diff --git a/.env.development b/.env.development
index 0c2fb5527..c56b62b36 100644
--- a/.env.development
+++ b/.env.development
@@ -20,14 +20,10 @@ 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=
+REACT_APP_DISABLE_TRACKING=true
 
 FAST_REFRESH=false
 
-# MATOMO
-REACT_APP_MATOMO_URL=
-REACT_APP_CDN_MATOMO_TRACKER_URL=
-REACT_APP_MATOMO_SITE_ID=
-
 #Debug flags
 
 # To enable bounding box for text containers
diff --git a/.env.production b/.env.production
index 8737c63c7..b86aa4bcc 100644
--- a/.env.production
+++ b/.env.production
@@ -11,14 +11,5 @@ REACT_APP_WS_SERVER_URL=
 
 REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","authDomain":"excalidraw-room-persistence.firebaseapp.com","databaseURL":"https://excalidraw-room-persistence.firebaseio.com","projectId":"excalidraw-room-persistence","storageBucket":"excalidraw-room-persistence.appspot.com","messagingSenderId":"654800341332","appId":"1:654800341332:web:4a692de832b55bd57ce0c1"}'
 
-# production-only vars
-# GOOGLE ANALYTICS
-REACT_APP_GOOGLE_ANALYTICS_ID=UA-387204-13
-# MATOMO
-REACT_APP_MATOMO_URL=https://excalidraw.matomo.cloud/
-REACT_APP_CDN_MATOMO_TRACKER_URL=//cdn.matomo.cloud/excalidraw.matomo.cloud/matomo.js
-REACT_APP_MATOMO_SITE_ID=1
-
-
-
 REACT_APP_PLUS_APP=https://app.excalidraw.com
+REACT_APP_DISABLE_TRACKING=
diff --git a/.github/workflows/size-limit.yml b/.github/workflows/size-limit.yml
new file mode 100644
index 000000000..8ced8ee03
--- /dev/null
+++ b/.github/workflows/size-limit.yml
@@ -0,0 +1,30 @@
+name: "Bundle Size check @excalidraw/excalidraw"
+on:
+  pull_request:
+    branches:
+      - master
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+      - name: Install
+        run: yarn --frozen-lockfile
+      - name: Install in src/packages/excalidraw
+        run: yarn --frozen-lockfile
+        working-directory: src/packages/excalidraw
+        env:
+          CI: true
+      - uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          build_script: build:umd
+          skip_step: install
+          directory: src/packages/excalidraw
diff --git a/.npmrc b/.npmrc
index cffe8cdef..1b78f1c6f 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1 +1,2 @@
 save-exact=true
+legacy-peer-deps=true
diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/children-components/footer.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/children-components/footer.mdx
index 262681895..cdd5ea5a4 100644
--- a/dev-docs/docs/@excalidraw/excalidraw/api/children-components/footer.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/children-components/footer.mdx
@@ -16,7 +16,6 @@ function App() {
             className="custom-footer"
             onClick={() => alert("This is dummy footer")}
           >
-            {" "}
             custom footer
           </button>
         </Footer>
diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx
index 8fbf228df..2494df108 100644
--- a/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx
@@ -14,8 +14,7 @@ function App() {
             Item1
           </MainMenu.Item>
           <MainMenu.Item onSelect={() => window.alert("Item2")}>
-            {" "}
-            Item 2{" "}
+            Item 2
           </MainMenu.Item>
         </MainMenu>
       </Excalidraw>
@@ -93,7 +92,6 @@ function App() {
               style={{ height: "2rem" }}
               onClick={() => window.alert("custom menu item")}
             >
-              {" "}
               custom item
             </button>
           </MainMenu.ItemCustom>
diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/props/ref.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/props/ref.mdx
index 08e807907..eaf58f758 100644
--- a/dev-docs/docs/@excalidraw/excalidraw/api/props/ref.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/props/ref.mdx
@@ -306,30 +306,32 @@ This is the history API. history.clear() will clear the history.
 
 ## scrollToContent
 
-<pre>
-  (<br />
-  {"  "}
-  target?:{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L115">
-    ExcalidrawElement
-  </a>{" "}
-  &#124;{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L115">
-    ExcalidrawElement
-  </a>
-  [],
-  <br />
-  {"  "}opts?: &#123; fitToContent?: boolean; animate?: boolean; duration?: number
-  &#125;
-  <br />) => void
-</pre>
+```tsx
+(
+  target?: ExcalidrawElement | ExcalidrawElement[],
+  opts?:
+      | {
+          fitToContent?: boolean;
+          animate?: boolean;
+          duration?: number;
+        }
+      | {
+          fitToViewport?: boolean;
+          viewportZoomFactor?: number;
+          animate?: boolean;
+          duration?: number;
+        }
+) => void
+```
 
 Scroll the nearest element out of the elements supplied to the center of the viewport. Defaults to the elements on the scene.
 
 | Attribute | type | default | Description |
 | --- | --- | --- | --- |
-| target | <code>ExcalidrawElement &#124; ExcalidrawElement[]</code> | All scene elements | The element(s) to scroll to. |
-| opts.fitToContent | boolean | false | Whether to fit the elements to viewport by automatically changing zoom as needed. |
+| target | [ExcalidrawElement](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L115) &#124; [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L115) | All scene elements | The element(s) to scroll to. |
+| opts.fitToContent | boolean | false | Whether to fit the elements to viewport by automatically changing zoom as needed. Note that the zoom range is between 10%-100%. |
+| opts.fitToViewport | boolean | false | Similar to fitToContent but the zoom range is not limited. If elements are smaller than the viewport, zoom will go above 100%. |
+| opts.viewportZoomFactor | number | 0.7 | when fitToViewport=true, how much screen should the content cover, between 0.1 (10%) and 1 (100%) |
 | opts.animate | boolean | false | Whether to animate between starting and ending position. Note that for larger scenes the animation may not be smooth due to performance issues. |
 | opts.duration | number | 500 | Duration of the animation if `opts.animate` is `true`. |
 
diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/props/render-props.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/props/render-props.mdx
index ca329e3e6..6531e29ec 100644
--- a/dev-docs/docs/@excalidraw/excalidraw/api/props/render-props.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/props/render-props.mdx
@@ -3,7 +3,7 @@
 ## renderTopRightUI
 
 <pre>
-  (isMobile: boolean, appState:{" "}
+  (isMobile: boolean, appState:
   <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">
     AppState
   </a>
@@ -29,8 +29,7 @@ function App() {
               }}
               onClick={() => window.alert("This is dummy top right UI")}
             >
-              {" "}
-              Click me{" "}
+              Click me
             </button>
           );
         }}
@@ -55,8 +54,7 @@ function App() {
       <Excalidraw
         renderCustomStats={() => (
           <p style={{ color: "#70b1ec", fontWeight: "bold" }}>
-            {" "}
-            Dummy stats will be shown here{" "}
+            Dummy stats will be shown here
           </p>
         )}
       />
@@ -105,8 +103,7 @@ function App() {
   return (
     <div style={{ height: "500px" }}>
       <button className="custom-button" onClick={() => excalidrawAPI.toggleMenu("customSidebar")}>
-        {" "}
-        Toggle Custom Sidebar{" "}
+        Toggle Custom Sidebar
       </button>
       <Excalidraw
         UIOptions={{ dockedSidebarBreakpoint: 100 }}
diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/utils/restore.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/utils/restore.mdx
index 198626eec..665a1ef9f 100644
--- a/dev-docs/docs/@excalidraw/excalidraw/api/utils/restore.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/utils/restore.mdx
@@ -31,10 +31,29 @@ You can pass `null` / `undefined` if not applicable.
 restoreElements(
   elements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ImportedDataState["elements"]</a>,<br/>&nbsp;
   localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a> | null | undefined): <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a>,<br/>&nbsp;
-  refreshDimensions?: boolean<br/>
+  opts: &#123; refreshDimensions?: boolean, repairBindings?: boolean }<br/>
 )
 </pre>
 
+| Prop | Type | Description |
+| ---- | ---- | ---- |
+| `elements` | <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ImportedDataState["elements"]</a> | The `elements` to be restored |
+| [`localElements`](#localelements) | <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a> &#124; null &#124; undefined |  When `localElements` are supplied, they are used to ensure that existing restored elements reuse `version` (and increment it), and regenerate `versionNonce`. |
+| [`opts`](#opts) | `Object` | The extra optional parameter to configure restored elements
+
+#### localElements
+
+When `localElements` are supplied, they are used to ensure that existing restored elements reuse `version` (and increment it), and regenerate `versionNonce`.  
+Use this when you `import` elements which may already be present in the scene to ensure that you do not disregard the newly imported elements if you're using element version to detect the update
+
+#### opts
+The extra optional parameter to configure restored elements. It has the following attributes
+
+| Prop | Type | Description|
+| --- | --- | ------|
+| `refreshDimensions` | `boolean` | Indicates whether we should also `recalculate` text element dimensions. Since this is a potentially costly operation, you may want to disable it if you restore elements in tight loops, such as during collaboration. |
+| `repairBindings` |`boolean` | Indicates whether the `bindings` for the elements should be repaired. This is to make sure there are no containers with non existent bound text element id and no bound text elements with non existent container id. |
+
 **_How to use_**
 
 ```js
@@ -43,9 +62,6 @@ import { restoreElements } from "@excalidraw/excalidraw";
 
 This function will make sure all properties of element is correctly set and if any attribute is missing, it will be set to its default value.
 
-When `localElements` are supplied, they are used to ensure that existing restored elements reuse `version` (and increment it), and regenerate `versionNonce`.  
-Use this when you import elements which may already be present in the scene to ensure that you do not disregard the newly imported elements if you're using element version to detect the updates.
-
 Parameter `refreshDimensions` indicates whether we should also `recalculate` text element dimensions. Defaults to `false`. Since this is a potentially costly operation, you may want to disable it if you restore elements in tight loops, such as during collaboration.
 
 ### restore
@@ -56,7 +72,9 @@ Parameter `refreshDimensions` indicates whether we should also `recalculate` tex
 restore(
   data: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L34">ImportedDataState</a>,<br/>&nbsp;
   localAppState: Partial&lt;<a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">AppState</a>> | null | undefined,<br/>&nbsp;
-  localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a> | null | undefined<br/>): <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L4">DataState</a>
+  localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a> | null | undefined<br/>): <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L4">DataState</a><br/>
+  opts: &#123; refreshDimensions?: boolean, repairBindings?: boolean }<br/>
+
 )
 </pre>
 
diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/utils/utils-intro.md b/dev-docs/docs/@excalidraw/excalidraw/api/utils/utils-intro.md
index c21592382..4d2745c09 100644
--- a/dev-docs/docs/@excalidraw/excalidraw/api/utils/utils-intro.md
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/utils/utils-intro.md
@@ -339,3 +339,47 @@ The `device` has the following `attributes`
 | `isMobile` | `boolean` | Set to `true` when the device is `mobile` |
 | `isTouchScreen` | `boolean` | Set to `true` for `touch` devices |
 | `canDeviceFitSidebar` | `boolean` | Implies whether there is enough space to fit the `sidebar` |
+
+### i18n
+
+To help with localization, we export the following.
+
+| name | type |
+| --- | --- |
+| `defaultLang` | `string` |
+| `languages` | [`Language[]`](https://github.com/excalidraw/excalidraw/blob/master/src/i18n.ts#L15) |
+| `useI18n` | [`() => { langCode, t }`](https://github.com/excalidraw/excalidraw/blob/master/src/i18n.ts#L15) |
+
+```js
+import { defaultLang, languages, useI18n } from "@excalidraw/excalidraw";
+```
+
+#### defaultLang
+
+Default language code, `en`.
+
+#### languages
+
+List of supported language codes. You can pass any of these to `Excalidraw`'s [`langCode` prop](/docs/@excalidraw/excalidraw/api/props/#langcode).
+
+#### useI18n
+
+A hook that returns the current language code and translation helper function. You can use this to translate strings in the components you render as children of `<Excalidraw>`.
+
+```jsx live
+function App() {
+  const { t } = useI18n();
+  return (
+    <div style={{ height: "500px" }}>
+      <Excalidraw>
+        <button
+          style={{ position: "absolute", zIndex: 10, height: "2rem" }}
+          onClick={() => window.alert(t("labels.madeWithExcalidraw"))}
+        >
+          {t("buttons.confirm")}
+        </button>
+      </Excalidraw>
+    </div>
+  );
+}
+```
diff --git a/dev-docs/docs/introduction/contributing.mdx b/dev-docs/docs/introduction/contributing.mdx
index d384c97a1..821355e0e 100644
--- a/dev-docs/docs/introduction/contributing.mdx
+++ b/dev-docs/docs/introduction/contributing.mdx
@@ -2,6 +2,11 @@
 
 Pull requests are welcome. For major changes, please [open an issue](https://github.com/excalidraw/excalidraw/issues/new) first to discuss what you would like to change.
 
+We have a [roadmap](https://github.com/orgs/excalidraw/projects/3) which we strongly recommend to go through and check if something interests you.
+For new contributors we would recommend to start with *Easy* tasks.
+
+In case you want to pick up something from the roadmap, comment on that issue and one of the project maintainers will assign it to you, post which you can discuss in the issue and start working on it.
+
 ## Setup
 
 ### Option 1 - Manual
diff --git a/dev-docs/package.json b/dev-docs/package.json
index dd3c45872..0aee8e01f 100644
--- a/dev-docs/package.json
+++ b/dev-docs/package.json
@@ -18,7 +18,7 @@
     "@docusaurus/core": "2.2.0",
     "@docusaurus/preset-classic": "2.2.0",
     "@docusaurus/theme-live-codeblock": "2.2.0",
-    "@excalidraw/excalidraw": "0.14.2",
+    "@excalidraw/excalidraw": "0.15.2",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "docusaurus-plugin-sass": "0.2.3",
diff --git a/dev-docs/src/theme/ReactLiveScope/index.js b/dev-docs/src/theme/ReactLiveScope/index.js
index a282ad6f0..e5263e1db 100644
--- a/dev-docs/src/theme/ReactLiveScope/index.js
+++ b/dev-docs/src/theme/ReactLiveScope/index.js
@@ -24,6 +24,7 @@ const ExcalidrawScope = {
   Sidebar: ExcalidrawComp.Sidebar,
   exportToCanvas: ExcalidrawComp.exportToCanvas,
   initialData,
+  useI18n: ExcalidrawComp.useI18n,
 };
 
 export default ExcalidrawScope;
diff --git a/dev-docs/yarn.lock b/dev-docs/yarn.lock
index 041f39b55..6206a60e9 100644
--- a/dev-docs/yarn.lock
+++ b/dev-docs/yarn.lock
@@ -1631,10 +1631,10 @@
     url-loader "^4.1.1"
     webpack "^5.73.0"
 
-"@excalidraw/excalidraw@0.14.2":
-  version "0.14.2"
-  resolved "https://registry.yarnpkg.com/@excalidraw/excalidraw/-/excalidraw-0.14.2.tgz#150cb4b7a1bf0d11cd64295936c930e7e0db8375"
-  integrity sha512-8LdjpTBWEK5waDWB7Bt/G9YBI4j0OxkstUhvaDGz7dwQGfzF6FW5CXBoYHNEoX0qmb+Fg/NPOlZ7FrKsrSVCqg==
+"@excalidraw/excalidraw@0.15.2":
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/@excalidraw/excalidraw/-/excalidraw-0.15.2.tgz#7dba4f6e10c52015a007efb75a9fc1afe598574c"
+  integrity sha512-rTI02kgWSTXiUdIkBxt9u/581F3eXcqQgJdIxmz54TFtG3ughoxO5fr4t7Fr2LZIturBPqfocQHGKZ0t2KLKgw==
 
 "@hapi/hoek@^9.0.0":
   version "9.3.0"
@@ -7159,9 +7159,9 @@ typescript@^4.7.4:
   integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==
 
 ua-parser-js@^0.7.30:
-  version "0.7.31"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"
-  integrity sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==
+  version "0.7.33"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.33.tgz#1d04acb4ccef9293df6f70f2c3d22f3030d8b532"
+  integrity sha512-s8ax/CeZdK9R/56Sui0WM6y9OFREJarMRHqLB2EwkovemBxNQ+Bqu8GAsUnVcXKgphb++ghr/B2BZx4mahujPw==
 
 unescape@^1.0.1:
   version "1.0.1"
diff --git a/package.json b/package.json
index 63805288d..ceca2d392 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,10 @@
     ]
   },
   "dependencies": {
-    "@dwelle/tunnel-rat": "0.1.1",
+    "@braintree/sanitize-url": "6.0.2",
+    "@excalidraw/random-username": "1.0.0",
+    "@radix-ui/react-popover": "1.0.3",
+    "@radix-ui/react-tabs": "1.0.2",
     "@radix-ui/react-dropdown-menu": "2.0.4",
     "@radix-ui/react-portal": "1.0.2",
     "@sentry/browser": "6.2.5",
@@ -28,6 +31,7 @@
     "@testing-library/react": "12.1.5",
     "@tldraw/vec": "1.7.1",
     "browser-fs-access": "0.29.1",
+    "canvas-roundrect-polyfill": "0.0.1",
     "clsx": "1.1.1",
     "cross-env": "7.0.3",
     "fake-indexeddb": "3.1.7",
@@ -35,7 +39,7 @@
     "i18next-browser-languagedetector": "6.1.4",
     "idb-keyval": "6.0.3",
     "image-blob-reduce": "3.0.1",
-    "jotai": "1.6.4",
+    "jotai": "1.13.1",
     "lodash.throttle": "4.1.1",
     "nanoid": "3.3.3",
     "open-color": "1.9.1",
@@ -53,7 +57,7 @@
     "roughjs": "4.5.2",
     "sass": "1.51.0",
     "socket.io-client": "2.3.1",
-    "tunnel-rat": "0.1.0",
+    "tunnel-rat": "0.1.2",
     "workbox-background-sync": "^6.5.4",
     "workbox-broadcast-update": "^6.5.4",
     "workbox-cacheable-response": "^6.5.4",
@@ -97,8 +101,17 @@
   },
   "homepage": ".",
   "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}"
+    ],
+    "coveragePathIgnorePatterns": [
+      "<rootDir>/locales",
+      "<rootDir>/src/packages/excalidraw/dist/",
+      "<rootDir>/src/packages/excalidraw/types",
+      "<rootDir>/src/packages/excalidraw/example"
+    ],
     "transformIgnorePatterns": [
-      "node_modules/(?!(roughjs|points-on-curve|path-data-parser|points-on-path|browser-fs-access)/)"
+      "node_modules/(?!(roughjs|points-on-curve|path-data-parser|points-on-path|browser-fs-access|canvas-roundrect-polyfill)/)"
     ],
     "resetMocks": false
   },
@@ -129,6 +142,7 @@
     "test:typecheck": "tsc",
     "test:update": "yarn test:app --updateSnapshot --watchAll=false",
     "test": "yarn test:app",
+    "test:coverage": "react-scripts test --passWithNoTests --coverage --watchAll",
     "autorelease": "node scripts/autorelease.js",
     "prerelease": "node scripts/prerelease.js",
     "release": "node scripts/release.js"
diff --git a/public/index.html b/public/index.html
index a8633fc4d..5509ded86 100644
--- a/public/index.html
+++ b/public/index.html
@@ -148,50 +148,6 @@
       // setting this so that libraries installation reuses this window tab.
       window.name = "_excalidraw";
     </script>
-    <% if (process.env.REACT_APP_DISABLE_TRACKING !== 'true') { %>
-
-    <!-- LEGACY GOOGLE ANALYTICS -->
-    <% if (process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
-    <script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GOOGLE_ANALYTICS_ID%"
-    ></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag("js", new Date());
-      gtag("config", "%REACT_APP_GOOGLE_ANALYTICS_ID%");
-    </script>
-    <% } %>
-    <!-- end LEGACY GOOGLE ANALYTICS -->
-
-    <!-- Matomo -->
-    <% if (process.env.REACT_APP_MATOMO_URL &&
-    process.env.REACT_APP_MATOMO_SITE_ID &&
-    process.env.REACT_APP_CDN_MATOMO_TRACKER_URL) { %>
-    <script>
-      var _paq = (window._paq = window._paq || []);
-      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-      _paq.push(["trackPageView"]);
-      _paq.push(["enableLinkTracking"]);
-      (function () {
-        var u = "%REACT_APP_MATOMO_URL%";
-        _paq.push(["setTrackerUrl", u + "matomo.php"]);
-        _paq.push(["setSiteId", "%REACT_APP_MATOMO_SITE_ID%"]);
-        var d = document,
-          g = d.createElement("script"),
-          s = d.getElementsByTagName("script")[0];
-        g.async = true;
-        g.src = "%REACT_APP_CDN_MATOMO_TRACKER_URL%";
-        s.parentNode.insertBefore(g, s);
-      })();
-    </script>
-    <% } %>
-    <!-- end Matomo analytics -->
-
-    <% } %>
 
     <!-- FIXME: remove this when we update CRA (fix SW caching) -->
     <style>
@@ -244,5 +200,39 @@
       <h1 class="visually-hidden">Excalidraw</h1>
     </header>
     <div id="root"></div>
+    <% if (process.env.REACT_APP_DISABLE_TRACKING !== 'true') { %>
+    <!-- 100% privacy friendly analytics -->
+    <script>
+      // need to load this script dynamically bcs. of iframe embed tracking
+      var scriptEle = document.createElement("script");
+      scriptEle.setAttribute(
+        "src",
+        "https://scripts.simpleanalyticscdn.com/latest.js",
+      );
+      scriptEle.setAttribute("type", "text/javascript");
+      scriptEle.setAttribute("defer", true);
+      scriptEle.setAttribute("async", true);
+      // if iframe
+      if (window.self !== window.top) {
+        scriptEle.setAttribute("data-auto-collect", true);
+      }
+
+      document.body.appendChild(scriptEle);
+
+      // if iframe
+      if (window.self !== window.top) {
+        scriptEle.addEventListener("load", () => {
+          if (window.sa_pageview) {
+            window.window.sa_event(action, {
+              category: "iframe",
+              label: "embed",
+              value: window.location.pathname,
+            });
+          }
+        });
+      }
+    </script>
+    <!-- end LEGACY GOOGLE ANALYTICS -->
+    <% } %>
   </body>
 </html>
diff --git a/scripts/release.js b/scripts/release.js
index 986eadc2a..24ac89c6b 100644
--- a/scripts/release.js
+++ b/scripts/release.js
@@ -1,22 +1,9 @@
-const fs = require("fs");
 const { execSync } = require("child_process");
 
 const excalidrawDir = `${__dirname}/../src/packages/excalidraw`;
 const excalidrawPackage = `${excalidrawDir}/package.json`;
 const pkg = require(excalidrawPackage);
 
-const originalReadMe = fs.readFileSync(`${excalidrawDir}/README.md`, "utf8");
-
-const updateReadme = () => {
-  const excalidrawIndex = originalReadMe.indexOf("### Excalidraw");
-
-  // remove note for stable readme
-  const data = originalReadMe.slice(excalidrawIndex);
-
-  // update readme
-  fs.writeFileSync(`${excalidrawDir}/README.md`, data, "utf8");
-};
-
 const publish = () => {
   try {
     execSync(`yarn  --frozen-lockfile`);
@@ -30,15 +17,8 @@ const publish = () => {
 };
 
 const release = () => {
-  updateReadme();
-  console.info("Note for stable readme removed");
-
   publish();
   console.info(`Published ${pkg.version}!`);
-
-  // revert readme after release
-  fs.writeFileSync(`${excalidrawDir}/README.md`, originalReadMe, "utf8");
-  console.info("Readme reverted");
 };
 
 release();
diff --git a/src/actions/actionAddToLibrary.ts b/src/actions/actionAddToLibrary.ts
index a4fca560a..feb4725e8 100644
--- a/src/actions/actionAddToLibrary.ts
+++ b/src/actions/actionAddToLibrary.ts
@@ -1,6 +1,4 @@
 import { register } from "./register";
-import { getSelectedElements } from "../scene";
-import { getNonDeletedElements } from "../element";
 import { deepCopyElement } from "../element/newElement";
 import { randomId } from "../random";
 import { t } from "../i18n";
@@ -9,11 +7,11 @@ export const actionAddToLibrary = register({
   name: "addToLibrary",
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-      true,
-    );
+    const selectedElements = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: true,
+      includeElementsInFrames: true,
+    });
     if (selectedElements.some((element) => element.type === "image")) {
       return {
         commitToHistory: false,
diff --git a/src/actions/actionAlign.tsx b/src/actions/actionAlign.tsx
index eceb42171..5697a707e 100644
--- a/src/actions/actionAlign.tsx
+++ b/src/actions/actionAlign.tsx
@@ -10,44 +10,55 @@ import {
 import { ToolButton } from "../components/ToolButton";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
+import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
 import { KEYS } from "../keys";
-import { getSelectedElements, isSomeElementSelected } from "../scene";
-import { AppState } from "../types";
+import { isSomeElementSelected } from "../scene";
+import { AppClassProperties, AppState } from "../types";
 import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
 
-const enableActionGroup = (
+const alignActionsPredicate = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
-) => getSelectedElements(getNonDeletedElements(elements), appState).length > 1;
+  _: unknown,
+  app: AppClassProperties,
+) => {
+  const selectedElements = app.scene.getSelectedElements(appState);
+  return (
+    selectedElements.length > 1 &&
+    // TODO enable aligning frames when implemented properly
+    !selectedElements.some((el) => el.type === "frame")
+  );
+};
 
 const alignSelectedElements = (
   elements: readonly ExcalidrawElement[],
   appState: Readonly<AppState>,
+  app: AppClassProperties,
   alignment: Alignment,
 ) => {
-  const selectedElements = getSelectedElements(
-    getNonDeletedElements(elements),
-    appState,
-  );
+  const selectedElements = app.scene.getSelectedElements(appState);
 
   const updatedElements = alignElements(selectedElements, alignment);
 
   const updatedElementsMap = arrayToMap(updatedElements);
 
-  return elements.map(
-    (element) => updatedElementsMap.get(element.id) || element,
+  return updateFrameMembershipOfSelectedElements(
+    elements.map((element) => updatedElementsMap.get(element.id) || element),
+    appState,
+    app,
   );
 };
 
 export const actionAlignTop = register({
   name: "alignTop",
   trackEvent: { category: "element" },
-  perform: (elements, appState) => {
+  predicate: alignActionsPredicate,
+  perform: (elements, appState, _, app) => {
     return {
       appState,
-      elements: alignSelectedElements(elements, appState, {
+      elements: alignSelectedElements(elements, appState, app, {
         position: "start",
         axis: "y",
       }),
@@ -56,9 +67,9 @@ export const actionAlignTop = register({
   },
   keyTest: (event) =>
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_UP,
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!enableActionGroup(elements, appState)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={AlignTopIcon}
       onClick={() => updateData(null)}
@@ -74,10 +85,11 @@ export const actionAlignTop = register({
 export const actionAlignBottom = register({
   name: "alignBottom",
   trackEvent: { category: "element" },
-  perform: (elements, appState) => {
+  predicate: alignActionsPredicate,
+  perform: (elements, appState, _, app) => {
     return {
       appState,
-      elements: alignSelectedElements(elements, appState, {
+      elements: alignSelectedElements(elements, appState, app, {
         position: "end",
         axis: "y",
       }),
@@ -86,9 +98,9 @@ export const actionAlignBottom = register({
   },
   keyTest: (event) =>
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_DOWN,
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!enableActionGroup(elements, appState)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={AlignBottomIcon}
       onClick={() => updateData(null)}
@@ -104,10 +116,11 @@ export const actionAlignBottom = register({
 export const actionAlignLeft = register({
   name: "alignLeft",
   trackEvent: { category: "element" },
-  perform: (elements, appState) => {
+  predicate: alignActionsPredicate,
+  perform: (elements, appState, _, app) => {
     return {
       appState,
-      elements: alignSelectedElements(elements, appState, {
+      elements: alignSelectedElements(elements, appState, app, {
         position: "start",
         axis: "x",
       }),
@@ -116,9 +129,9 @@ export const actionAlignLeft = register({
   },
   keyTest: (event) =>
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_LEFT,
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!enableActionGroup(elements, appState)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={AlignLeftIcon}
       onClick={() => updateData(null)}
@@ -134,11 +147,11 @@ export const actionAlignLeft = register({
 export const actionAlignRight = register({
   name: "alignRight",
   trackEvent: { category: "element" },
-
-  perform: (elements, appState) => {
+  predicate: alignActionsPredicate,
+  perform: (elements, appState, _, app) => {
     return {
       appState,
-      elements: alignSelectedElements(elements, appState, {
+      elements: alignSelectedElements(elements, appState, app, {
         position: "end",
         axis: "x",
       }),
@@ -147,9 +160,9 @@ export const actionAlignRight = register({
   },
   keyTest: (event) =>
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_RIGHT,
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!enableActionGroup(elements, appState)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={AlignRightIcon}
       onClick={() => updateData(null)}
@@ -165,20 +178,20 @@ export const actionAlignRight = register({
 export const actionAlignVerticallyCentered = register({
   name: "alignVerticallyCentered",
   trackEvent: { category: "element" },
-
-  perform: (elements, appState) => {
+  predicate: alignActionsPredicate,
+  perform: (elements, appState, _, app) => {
     return {
       appState,
-      elements: alignSelectedElements(elements, appState, {
+      elements: alignSelectedElements(elements, appState, app, {
         position: "center",
         axis: "y",
       }),
       commitToHistory: true,
     };
   },
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!enableActionGroup(elements, appState)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={CenterVerticallyIcon}
       onClick={() => updateData(null)}
@@ -192,19 +205,20 @@ export const actionAlignVerticallyCentered = register({
 export const actionAlignHorizontallyCentered = register({
   name: "alignHorizontallyCentered",
   trackEvent: { category: "element" },
-  perform: (elements, appState) => {
+  predicate: alignActionsPredicate,
+  perform: (elements, appState, _, app) => {
     return {
       appState,
-      elements: alignSelectedElements(elements, appState, {
+      elements: alignSelectedElements(elements, appState, app, {
         position: "center",
         axis: "x",
       }),
       commitToHistory: true,
     };
   },
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!enableActionGroup(elements, appState)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={CenterHorizontallyIcon}
       onClick={() => updateData(null)}
diff --git a/src/actions/actionBoundText.tsx b/src/actions/actionBoundText.tsx
index 3f240b5d8..b42169544 100644
--- a/src/actions/actionBoundText.tsx
+++ b/src/actions/actionBoundText.tsx
@@ -4,7 +4,7 @@ import {
   VERTICAL_ALIGN,
   TEXT_ALIGN,
 } from "../constants";
-import { getNonDeletedElements, isTextElement, newElement } from "../element";
+import { isTextElement, newElement } from "../element";
 import { mutateElement } from "../element/mutateElement";
 import {
   computeBoundTextPosition,
@@ -16,6 +16,7 @@ import {
 import {
   getOriginalContainerHeightFromCache,
   resetOriginalContainerCache,
+  updateOriginalContainerCache,
 } from "../element/textWysiwyg";
 import {
   hasBoundTextElement,
@@ -28,8 +29,8 @@ import {
   ExcalidrawTextContainer,
   ExcalidrawTextElement,
 } from "../element/types";
-import { getSelectedElements } from "../scene";
 import { AppState } from "../types";
+import { Mutable } from "../utility-types";
 import { getFontString } from "../utils";
 import { register } from "./register";
 
@@ -37,16 +38,13 @@ export const actionUnbindText = register({
   name: "unbindText",
   contextItemLabel: "labels.unbindText",
   trackEvent: { category: "element" },
-  predicate: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState);
+  predicate: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
 
     return selectedElements.some((element) => hasBoundTextElement(element));
   },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-    );
+  perform: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
     selectedElements.forEach((element) => {
       const boundTextElement = getBoundTextElement(element);
       if (boundTextElement) {
@@ -91,8 +89,8 @@ export const actionBindText = register({
   name: "bindText",
   contextItemLabel: "labels.bindText",
   trackEvent: { category: "element" },
-  predicate: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState);
+  predicate: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
 
     if (selectedElements.length === 2) {
       const textElement =
@@ -115,11 +113,8 @@ export const actionBindText = register({
     }
     return false;
   },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-    );
+  perform: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
 
     let textElement: ExcalidrawTextElement;
     let container: ExcalidrawTextContainer;
@@ -145,7 +140,11 @@ export const actionBindText = register({
         id: textElement.id,
       }),
     });
+    const originalContainerHeight = container.height;
     redrawTextBoundingBox(textElement, container);
+    // overwritting the cache with original container height so
+    // it can be restored when unbind
+    updateOriginalContainerCache(container.id, originalContainerHeight);
 
     return {
       elements: pushTextAboveContainer(elements, container, textElement),
@@ -191,22 +190,19 @@ const pushContainerBelowText = (
   return updatedElements;
 };
 
-export const actionCreateContainerFromText = register({
-  name: "createContainerFromText",
+export const actionWrapTextInContainer = register({
+  name: "wrapTextInContainer",
   contextItemLabel: "labels.createContainerFromText",
   trackEvent: { category: "element" },
-  predicate: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState);
+  predicate: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
     const areTextElements = selectedElements.every((el) => isTextElement(el));
     return selectedElements.length > 0 && areTextElements;
   },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-    );
+  perform: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
     let updatedElements: readonly ExcalidrawElement[] = elements.slice();
-    const containerIds: AppState["selectedElementIds"] = {};
+    const containerIds: Mutable<AppState["selectedElementIds"]> = {};
 
     for (const textElement of selectedElements) {
       if (isTextElement(textElement)) {
@@ -244,6 +240,7 @@ export const actionCreateContainerFromText = register({
             "rectangle",
           ),
           groupIds: textElement.groupIds,
+          frameId: textElement.frameId,
         });
 
         // update bindings
@@ -281,6 +278,7 @@ export const actionCreateContainerFromText = register({
             containerId: container.id,
             verticalAlign: VERTICAL_ALIGN.MIDDLE,
             boundElements: null,
+            textAlign: TEXT_ALIGN.CENTER,
           },
           false,
         );
diff --git a/src/actions/actionCanvas.tsx b/src/actions/actionCanvas.tsx
index 440c59191..bc268544b 100644
--- a/src/actions/actionCanvas.tsx
+++ b/src/actions/actionCanvas.tsx
@@ -1,4 +1,4 @@
-import { ColorPicker } from "../components/ColorPicker";
+import { ColorPicker } from "../components/ColorPicker/ColorPicker";
 import { ZoomInIcon, ZoomOutIcon } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { CURSOR_TYPE, MIN_ZOOM, THEME, ZOOM_STEP } from "../constants";
@@ -6,7 +6,7 @@ import { getCommonBounds, getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 import { CODES, KEYS } from "../keys";
-import { getNormalizedZoom, getSelectedElements } from "../scene";
+import { getNormalizedZoom } from "../scene";
 import { centerScrollOn } from "../scene/scroll";
 import { getStateForZoom } from "../scene/zoom";
 import { AppState, NormalizedZoomValue } from "../types";
@@ -19,6 +19,8 @@ import {
   isEraserActive,
   isHandToolActive,
 } from "../appState";
+import { DEFAULT_CANVAS_BACKGROUND_PICKS } from "../colors";
+import { Bounds } from "../element/bounds";
 
 export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
@@ -35,24 +37,21 @@ export const actionChangeViewBackgroundColor = register({
       commitToHistory: !!value.viewBackgroundColor,
     };
   },
-  PanelComponent: ({ elements, appState, updateData }) => {
+  PanelComponent: ({ elements, appState, updateData, appProps }) => {
     // FIXME move me to src/components/mainMenu/DefaultItems.tsx
     return (
-      <div style={{ position: "relative" }}>
-        <ColorPicker
-          label={t("labels.canvasBackground")}
-          type="canvasBackground"
-          color={appState.viewBackgroundColor}
-          onChange={(color) => updateData({ viewBackgroundColor: color })}
-          isActive={appState.openPopup === "canvasColorPicker"}
-          setActive={(active) =>
-            updateData({ openPopup: active ? "canvasColorPicker" : null })
-          }
-          data-testid="canvas-background-picker"
-          elements={elements}
-          appState={appState}
-        />
-      </div>
+      <ColorPicker
+        palette={null}
+        topPicks={DEFAULT_CANVAS_BACKGROUND_PICKS}
+        label={t("labels.canvasBackground")}
+        type="canvasBackground"
+        color={appState.viewBackgroundColor}
+        onChange={(color) => updateData({ viewBackgroundColor: color })}
+        data-testid="canvas-background-picker"
+        elements={elements}
+        appState={appState}
+        updateData={updateData}
+      />
     );
   },
 });
@@ -208,7 +207,7 @@ export const actionResetZoom = register({
 });
 
 const zoomValueToFitBoundsOnViewport = (
-  bounds: [number, number, number, number],
+  bounds: Bounds,
   viewportDimensions: { width: number; height: number },
 ) => {
   const [x1, y1, x2, y2] = bounds;
@@ -226,50 +225,93 @@ const zoomValueToFitBoundsOnViewport = (
   return clampedZoomValueToFitElements as NormalizedZoomValue;
 };
 
-export const zoomToFitElements = (
-  elements: readonly ExcalidrawElement[],
-  appState: Readonly<AppState>,
-  zoomToSelection: boolean,
-) => {
-  const nonDeletedElements = getNonDeletedElements(elements);
-  const selectedElements = getSelectedElements(nonDeletedElements, appState);
-
-  const commonBounds =
-    zoomToSelection && selectedElements.length > 0
-      ? getCommonBounds(selectedElements)
-      : getCommonBounds(nonDeletedElements);
-
-  const newZoom = {
-    value: zoomValueToFitBoundsOnViewport(commonBounds, {
-      width: appState.width,
-      height: appState.height,
-    }),
-  };
+export const zoomToFit = ({
+  targetElements,
+  appState,
+  fitToViewport = false,
+  viewportZoomFactor = 0.7,
+}: {
+  targetElements: readonly ExcalidrawElement[];
+  appState: Readonly<AppState>;
+  /** whether to fit content to viewport (beyond >100%) */
+  fitToViewport: boolean;
+  /** zoom content to cover X of the viewport, when fitToViewport=true */
+  viewportZoomFactor?: number;
+}) => {
+  const commonBounds = getCommonBounds(getNonDeletedElements(targetElements));
 
   const [x1, y1, x2, y2] = commonBounds;
   const centerX = (x1 + x2) / 2;
   const centerY = (y1 + y2) / 2;
+
+  let newZoomValue;
+  let scrollX;
+  let scrollY;
+
+  if (fitToViewport) {
+    const commonBoundsWidth = x2 - x1;
+    const commonBoundsHeight = y2 - y1;
+
+    newZoomValue =
+      Math.min(
+        appState.width / commonBoundsWidth,
+        appState.height / commonBoundsHeight,
+      ) * Math.min(1, Math.max(viewportZoomFactor, 0.1));
+
+    // Apply clamping to newZoomValue to be between 10% and 3000%
+    newZoomValue = Math.min(
+      Math.max(newZoomValue, 0.1),
+      30.0,
+    ) as NormalizedZoomValue;
+
+    scrollX = (appState.width / 2) * (1 / newZoomValue) - centerX;
+    scrollY = (appState.height / 2) * (1 / newZoomValue) - centerY;
+  } else {
+    newZoomValue = zoomValueToFitBoundsOnViewport(commonBounds, {
+      width: appState.width,
+      height: appState.height,
+    });
+
+    const centerScroll = centerScrollOn({
+      scenePoint: { x: centerX, y: centerY },
+      viewportDimensions: {
+        width: appState.width,
+        height: appState.height,
+      },
+      zoom: { value: newZoomValue },
+    });
+
+    scrollX = centerScroll.scrollX;
+    scrollY = centerScroll.scrollY;
+  }
+
   return {
     appState: {
       ...appState,
-      ...centerScrollOn({
-        scenePoint: { x: centerX, y: centerY },
-        viewportDimensions: {
-          width: appState.width,
-          height: appState.height,
-        },
-        zoom: newZoom,
-      }),
-      zoom: newZoom,
+      scrollX,
+      scrollY,
+      zoom: { value: newZoomValue },
     },
     commitToHistory: false,
   };
 };
 
-export const actionZoomToSelected = register({
-  name: "zoomToSelection",
+// Note, this action differs from actionZoomToFitSelection in that it doesn't
+// zoom beyond 100%. In other words, if the content is smaller than viewport
+// size, it won't be zoomed in.
+export const actionZoomToFitSelectionInViewport = register({
+  name: "zoomToFitSelectionInViewport",
   trackEvent: { category: "canvas" },
-  perform: (elements, appState) => zoomToFitElements(elements, appState, true),
+  perform: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
+    return zoomToFit({
+      targetElements: selectedElements.length ? selectedElements : elements,
+      appState,
+      fitToViewport: false,
+    });
+  },
+  // NOTE shift-2 should have been assigned actionZoomToFitSelection.
+  // TBD on how proceed
   keyTest: (event) =>
     event.code === CODES.TWO &&
     event.shiftKey &&
@@ -277,11 +319,31 @@ export const actionZoomToSelected = register({
     !event[KEYS.CTRL_OR_CMD],
 });
 
+export const actionZoomToFitSelection = register({
+  name: "zoomToFitSelection",
+  trackEvent: { category: "canvas" },
+  perform: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
+    return zoomToFit({
+      targetElements: selectedElements.length ? selectedElements : elements,
+      appState,
+      fitToViewport: true,
+    });
+  },
+  // NOTE this action should use shift-2 per figma, alas
+  keyTest: (event) =>
+    event.code === CODES.THREE &&
+    event.shiftKey &&
+    !event.altKey &&
+    !event[KEYS.CTRL_OR_CMD],
+});
+
 export const actionZoomToFit = register({
   name: "zoomToFit",
   viewMode: true,
   trackEvent: { category: "canvas" },
-  perform: (elements, appState) => zoomToFitElements(elements, appState, false),
+  perform: (elements, appState) =>
+    zoomToFit({ targetElements: elements, appState, fitToViewport: false }),
   keyTest: (event) =>
     event.code === CODES.ONE &&
     event.shiftKey &&
diff --git a/src/actions/actionClipboard.tsx b/src/actions/actionClipboard.tsx
index 661f65f38..b3794d0c0 100644
--- a/src/actions/actionClipboard.tsx
+++ b/src/actions/actionClipboard.tsx
@@ -7,7 +7,6 @@ import {
   probablySupportsClipboardWriteText,
 } from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
-import { getSelectedElements } from "../scene/selection";
 import { exportCanvas } from "../data/index";
 import { getNonDeletedElements, isTextElement } from "../element";
 import { t } from "../i18n";
@@ -16,9 +15,13 @@ export const actionCopy = register({
   name: "copy",
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
-    const selectedElements = getSelectedElements(elements, appState, true);
+    const elementsToCopy = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: true,
+      includeElementsInFrames: true,
+    });
 
-    copyToClipboard(selectedElements, appState, app.files);
+    copyToClipboard(elementsToCopy, app.files);
 
     return {
       commitToHistory: false,
@@ -72,11 +75,11 @@ export const actionCopyAsSvg = register({
         commitToHistory: false,
       };
     }
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-      true,
-    );
+    const selectedElements = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: true,
+      includeElementsInFrames: true,
+    });
     try {
       await exportCanvas(
         "clipboard-svg",
@@ -116,11 +119,11 @@ export const actionCopyAsPng = register({
         commitToHistory: false,
       };
     }
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-      true,
-    );
+    const selectedElements = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: true,
+      includeElementsInFrames: true,
+    });
     try {
       await exportCanvas(
         "clipboard",
@@ -168,12 +171,11 @@ export const actionCopyAsPng = register({
 export const copyText = register({
   name: "copyText",
   trackEvent: { category: "element" },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-      true,
-    );
+  perform: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: true,
+    });
 
     const text = selectedElements
       .reduce((acc: string[], element) => {
@@ -188,10 +190,15 @@ export const copyText = register({
       commitToHistory: false,
     };
   },
-  predicate: (elements, appState) => {
+  predicate: (elements, appState, _, app) => {
     return (
       probablySupportsClipboardWriteText &&
-      getSelectedElements(elements, appState, true).some(isTextElement)
+      app.scene
+        .getSelectedElements({
+          selectedElementIds: appState.selectedElementIds,
+          includeBoundTextElement: true,
+        })
+        .some(isTextElement)
     );
   },
   contextItemLabel: "labels.copyText",
diff --git a/src/actions/actionDeleteSelected.tsx b/src/actions/actionDeleteSelected.tsx
index 86b985284..b0486e0c6 100644
--- a/src/actions/actionDeleteSelected.tsx
+++ b/src/actions/actionDeleteSelected.tsx
@@ -1,4 +1,4 @@
-import { isSomeElementSelected } from "../scene";
+import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { KEYS } from "../keys";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
@@ -18,11 +18,23 @@ const deleteSelectedElements = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
 ) => {
+  const framesToBeDeleted = new Set(
+    getSelectedElements(
+      elements.filter((el) => el.type === "frame"),
+      appState,
+    ).map((el) => el.id),
+  );
+
   return {
     elements: elements.map((el) => {
       if (appState.selectedElementIds[el.id]) {
         return newElementWith(el, { isDeleted: true });
       }
+
+      if (el.frameId && framesToBeDeleted.has(el.frameId)) {
+        return newElementWith(el, { isDeleted: true });
+      }
+
       if (
         isBoundToContainer(el) &&
         appState.selectedElementIds[el.containerId]
diff --git a/src/actions/actionDistribute.tsx b/src/actions/actionDistribute.tsx
index 9eaab70d3..d3cdb5c9c 100644
--- a/src/actions/actionDistribute.tsx
+++ b/src/actions/actionDistribute.tsx
@@ -6,44 +6,49 @@ import { ToolButton } from "../components/ToolButton";
 import { distributeElements, Distribution } from "../distribute";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
+import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
 import { CODES, KEYS } from "../keys";
-import { getSelectedElements, isSomeElementSelected } from "../scene";
-import { AppState } from "../types";
+import { isSomeElementSelected } from "../scene";
+import { AppClassProperties, AppState } from "../types";
 import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
 
-const enableActionGroup = (
-  elements: readonly ExcalidrawElement[],
-  appState: AppState,
-) => getSelectedElements(getNonDeletedElements(elements), appState).length > 1;
+const enableActionGroup = (appState: AppState, app: AppClassProperties) => {
+  const selectedElements = app.scene.getSelectedElements(appState);
+  return (
+    selectedElements.length > 1 &&
+    // TODO enable distributing frames when implemented properly
+    !selectedElements.some((el) => el.type === "frame")
+  );
+};
 
 const distributeSelectedElements = (
   elements: readonly ExcalidrawElement[],
   appState: Readonly<AppState>,
+  app: AppClassProperties,
   distribution: Distribution,
 ) => {
-  const selectedElements = getSelectedElements(
-    getNonDeletedElements(elements),
-    appState,
-  );
+  const selectedElements = app.scene.getSelectedElements(appState);
 
   const updatedElements = distributeElements(selectedElements, distribution);
 
   const updatedElementsMap = arrayToMap(updatedElements);
 
-  return elements.map(
-    (element) => updatedElementsMap.get(element.id) || element,
+  return updateFrameMembershipOfSelectedElements(
+    elements.map((element) => updatedElementsMap.get(element.id) || element),
+    appState,
+    app,
   );
 };
 
 export const distributeHorizontally = register({
   name: "distributeHorizontally",
   trackEvent: { category: "element" },
-  perform: (elements, appState) => {
+  perform: (elements, appState, _, app) => {
     return {
       appState,
-      elements: distributeSelectedElements(elements, appState, {
+      elements: distributeSelectedElements(elements, appState, app, {
         space: "between",
         axis: "x",
       }),
@@ -52,9 +57,9 @@ export const distributeHorizontally = register({
   },
   keyTest: (event) =>
     !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.H,
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!enableActionGroup(elements, appState)}
+      hidden={!enableActionGroup(appState, app)}
       type="button"
       icon={DistributeHorizontallyIcon}
       onClick={() => updateData(null)}
@@ -70,10 +75,10 @@ export const distributeHorizontally = register({
 export const distributeVertically = register({
   name: "distributeVertically",
   trackEvent: { category: "element" },
-  perform: (elements, appState) => {
+  perform: (elements, appState, _, app) => {
     return {
       appState,
-      elements: distributeSelectedElements(elements, appState, {
+      elements: distributeSelectedElements(elements, appState, app, {
         space: "between",
         axis: "y",
       }),
@@ -82,9 +87,9 @@ export const distributeVertically = register({
   },
   keyTest: (event) =>
     !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.V,
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!enableActionGroup(elements, appState)}
+      hidden={!enableActionGroup(appState, app)}
       type="button"
       icon={DistributeVerticallyIcon}
       onClick={() => updateData(null)}
diff --git a/src/actions/actionDuplicateSelection.tsx b/src/actions/actionDuplicateSelection.tsx
index e3e5fb85a..81dea88f1 100644
--- a/src/actions/actionDuplicateSelection.tsx
+++ b/src/actions/actionDuplicateSelection.tsx
@@ -2,7 +2,7 @@ import { KEYS } from "../keys";
 import { register } from "./register";
 import { ExcalidrawElement } from "../element/types";
 import { duplicateElement, getNonDeletedElements } from "../element";
-import { getSelectedElements, isSomeElementSelected } from "../scene";
+import { isSomeElementSelected } from "../scene";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
 import { arrayToMap, getShortcutKey } from "../utils";
@@ -20,9 +20,17 @@ import {
   bindTextToShapeAfterDuplication,
   getBoundTextElement,
 } from "../element/textElement";
-import { isBoundToContainer } from "../element/typeChecks";
+import { isBoundToContainer, isFrameElement } from "../element/typeChecks";
 import { normalizeElementOrder } from "../element/sortElements";
 import { DuplicateIcon } from "../components/icons";
+import {
+  bindElementsToFramesAfterDuplication,
+  getFrameElements,
+} from "../frame";
+import {
+  excludeElementsInFramesFromSelection,
+  getSelectedElements,
+} from "../scene/selection";
 
 export const actionDuplicateSelection = register({
   name: "duplicateSelection",
@@ -94,8 +102,11 @@ const duplicateElements = (
     return newElement;
   };
 
-  const selectedElementIds = arrayToMap(
-    getSelectedElements(sortedElements, appState, true),
+  const idsOfElementsToDuplicate = arrayToMap(
+    getSelectedElements(sortedElements, appState, {
+      includeBoundTextElement: true,
+      includeElementsInFrames: true,
+    }),
   );
 
   // Ids of elements that have already been processed so we don't push them
@@ -129,12 +140,25 @@ const duplicateElements = (
     }
 
     const boundTextElement = getBoundTextElement(element);
-    if (selectedElementIds.get(element.id)) {
-      // if a group or a container/bound-text, duplicate atomically
-      if (element.groupIds.length || boundTextElement) {
+    const isElementAFrame = isFrameElement(element);
+
+    if (idsOfElementsToDuplicate.get(element.id)) {
+      // if a group or a container/bound-text or frame, duplicate atomically
+      if (element.groupIds.length || boundTextElement || isElementAFrame) {
         const groupId = getSelectedGroupForElement(appState, element);
         if (groupId) {
-          const groupElements = getElementsInGroup(sortedElements, groupId);
+          // TODO:
+          // remove `.flatMap...`
+          // if the elements in a frame are grouped when the frame is grouped
+          const groupElements = getElementsInGroup(
+            sortedElements,
+            groupId,
+          ).flatMap((element) =>
+            isFrameElement(element)
+              ? [...getFrameElements(elements, element.id), element]
+              : [element],
+          );
+
           elementsWithClones.push(
             ...markAsProcessed([
               ...groupElements,
@@ -156,10 +180,34 @@ const duplicateElements = (
           );
           continue;
         }
+        if (isElementAFrame) {
+          const elementsInFrame = getFrameElements(sortedElements, element.id);
+
+          elementsWithClones.push(
+            ...markAsProcessed([
+              ...elementsInFrame,
+              element,
+              ...elementsInFrame.map((e) => duplicateAndOffsetElement(e)),
+              duplicateAndOffsetElement(element),
+            ]),
+          );
+
+          continue;
+        }
+      }
+      // since elements in frames have a lower z-index than the frame itself,
+      // they will be looped first and if their frames are selected as well,
+      // they will have been copied along with the frame atomically in the
+      // above branch, so we must skip those elements here
+      //
+      // now, for elements do not belong any frames or elements whose frames
+      // are selected (or elements that are left out from the above
+      // steps for whatever reason) we (should at least) duplicate them here
+      if (!element.frameId || !idsOfElementsToDuplicate.has(element.frameId)) {
+        elementsWithClones.push(
+          ...markAsProcessed([element, duplicateAndOffsetElement(element)]),
+        );
       }
-      elementsWithClones.push(
-        ...markAsProcessed([element, duplicateAndOffsetElement(element)]),
-      );
     } else {
       elementsWithClones.push(...markAsProcessed([element]));
     }
@@ -200,6 +248,14 @@ const duplicateElements = (
     oldElements,
     oldIdToDuplicatedId,
   );
+  bindElementsToFramesAfterDuplication(
+    finalElements,
+    oldElements,
+    oldIdToDuplicatedId,
+  );
+
+  const nextElementsToSelect =
+    excludeElementsInFramesFromSelection(newElements);
 
   return {
     elements: finalElements,
@@ -207,7 +263,7 @@ const duplicateElements = (
       {
         ...appState,
         selectedGroupIds: {},
-        selectedElementIds: newElements.reduce(
+        selectedElementIds: nextElementsToSelect.reduce(
           (acc: Record<ExcalidrawElement["id"], true>, element) => {
             if (!isBoundToContainer(element)) {
               acc[element.id] = true;
@@ -218,6 +274,8 @@ const duplicateElements = (
         ),
       },
       getNonDeletedElements(finalElements),
+      appState,
+      null,
     ),
   };
 };
diff --git a/src/actions/actionElementLock.test.tsx b/src/actions/actionElementLock.test.tsx
new file mode 100644
index 000000000..19db5e325
--- /dev/null
+++ b/src/actions/actionElementLock.test.tsx
@@ -0,0 +1,68 @@
+import { Excalidraw } from "../packages/excalidraw/index";
+import { queryByTestId, fireEvent } from "@testing-library/react";
+import { render } from "../tests/test-utils";
+import { Pointer, UI } from "../tests/helpers/ui";
+import { API } from "../tests/helpers/api";
+
+const { h } = window;
+const mouse = new Pointer("mouse");
+
+describe("element locking", () => {
+  it("should not show unlockAllElements action in contextMenu if no elements locked", async () => {
+    await render(<Excalidraw />);
+
+    mouse.rightClickAt(0, 0);
+
+    const item = queryByTestId(UI.queryContextMenu()!, "unlockAllElements");
+    expect(item).toBe(null);
+  });
+
+  it("should unlock all elements and select them when using unlockAllElements action in contextMenu", async () => {
+    await render(
+      <Excalidraw
+        initialData={{
+          elements: [
+            API.createElement({
+              x: 100,
+              y: 100,
+              width: 100,
+              height: 100,
+              locked: true,
+            }),
+            API.createElement({
+              x: 100,
+              y: 100,
+              width: 100,
+              height: 100,
+              locked: true,
+            }),
+            API.createElement({
+              x: 100,
+              y: 100,
+              width: 100,
+              height: 100,
+              locked: false,
+            }),
+          ],
+        }}
+      />,
+    );
+
+    mouse.rightClickAt(0, 0);
+
+    expect(Object.keys(h.state.selectedElementIds).length).toBe(0);
+    expect(h.elements.map((el) => el.locked)).toEqual([true, true, false]);
+
+    const item = queryByTestId(UI.queryContextMenu()!, "unlockAllElements");
+    expect(item).not.toBe(null);
+
+    fireEvent.click(item!.querySelector("button")!);
+
+    expect(h.elements.map((el) => el.locked)).toEqual([false, false, false]);
+    // should select the unlocked elements
+    expect(h.state.selectedElementIds).toEqual({
+      [h.elements[0].id]: true,
+      [h.elements[1].id]: true,
+    });
+  });
+});
diff --git a/src/actions/actionElementLock.ts b/src/actions/actionElementLock.ts
new file mode 100644
index 000000000..cd539c5a3
--- /dev/null
+++ b/src/actions/actionElementLock.ts
@@ -0,0 +1,104 @@
+import { newElementWith } from "../element/mutateElement";
+import { ExcalidrawElement } from "../element/types";
+import { KEYS } from "../keys";
+import { arrayToMap } from "../utils";
+import { register } from "./register";
+
+const shouldLock = (elements: readonly ExcalidrawElement[]) =>
+  elements.every((el) => !el.locked);
+
+export const actionToggleElementLock = register({
+  name: "toggleElementLock",
+  trackEvent: { category: "element" },
+  predicate: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
+    return !selectedElements.some(
+      (element) => element.locked && element.frameId,
+    );
+  },
+  perform: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: true,
+      includeElementsInFrames: true,
+    });
+
+    if (!selectedElements.length) {
+      return false;
+    }
+
+    const nextLockState = shouldLock(selectedElements);
+    const selectedElementsMap = arrayToMap(selectedElements);
+    return {
+      elements: elements.map((element) => {
+        if (!selectedElementsMap.has(element.id)) {
+          return element;
+        }
+
+        return newElementWith(element, { locked: nextLockState });
+      }),
+      appState: {
+        ...appState,
+        selectedLinearElement: nextLockState
+          ? null
+          : appState.selectedLinearElement,
+      },
+      commitToHistory: true,
+    };
+  },
+  contextItemLabel: (elements, appState, app) => {
+    const selected = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: false,
+    });
+    if (selected.length === 1 && selected[0].type !== "frame") {
+      return selected[0].locked
+        ? "labels.elementLock.unlock"
+        : "labels.elementLock.lock";
+    }
+
+    return shouldLock(selected)
+      ? "labels.elementLock.lockAll"
+      : "labels.elementLock.unlockAll";
+  },
+  keyTest: (event, appState, elements, app) => {
+    return (
+      event.key.toLocaleLowerCase() === KEYS.L &&
+      event[KEYS.CTRL_OR_CMD] &&
+      event.shiftKey &&
+      app.scene.getSelectedElements({
+        selectedElementIds: appState.selectedElementIds,
+        includeBoundTextElement: false,
+      }).length > 0
+    );
+  },
+});
+
+export const actionUnlockAllElements = register({
+  name: "unlockAllElements",
+  trackEvent: { category: "canvas" },
+  viewMode: false,
+  predicate: (elements) => {
+    return elements.some((element) => element.locked);
+  },
+  perform: (elements, appState) => {
+    const lockedElements = elements.filter((el) => el.locked);
+
+    return {
+      elements: elements.map((element) => {
+        if (element.locked) {
+          return newElementWith(element, { locked: false });
+        }
+        return element;
+      }),
+      appState: {
+        ...appState,
+        selectedElementIds: Object.fromEntries(
+          lockedElements.map((el) => [el.id, true]),
+        ),
+      },
+      commitToHistory: true,
+    };
+  },
+  contextItemLabel: "labels.elementLock.unlockAll",
+});
diff --git a/src/actions/actionExport.tsx b/src/actions/actionExport.tsx
index f142eac87..2c94a9863 100644
--- a/src/actions/actionExport.tsx
+++ b/src/actions/actionExport.tsx
@@ -26,7 +26,7 @@ export const actionChangeProjectName = register({
   perform: (_elements, appState, value) => {
     return { appState: { ...appState, name: value }, commitToHistory: false };
   },
-  PanelComponent: ({ appState, updateData, appProps }) => (
+  PanelComponent: ({ appState, updateData, appProps, data }) => (
     <ProjectName
       label={t("labels.fileTitle")}
       value={appState.name || "Unnamed"}
@@ -34,6 +34,7 @@ export const actionChangeProjectName = register({
       isNameEditable={
         typeof appProps.name === "undefined" && !appState.viewModeEnabled
       }
+      ignoreFocus={data?.ignoreFocus ?? false}
     />
   ),
 });
@@ -64,7 +65,7 @@ export const actionChangeExportScale = register({
           );
 
           const scaleButtonTitle = `${t(
-            "buttons.scale",
+            "imageExportDialog.label.scale",
           )} ${s}x (${width}x${height})`;
 
           return (
@@ -101,7 +102,7 @@ export const actionChangeExportBackground = register({
       checked={appState.exportBackground}
       onChange={(checked) => updateData(checked)}
     >
-      {t("labels.withBackground")}
+      {t("imageExportDialog.label.withBackground")}
     </CheckboxItem>
   ),
 });
@@ -120,8 +121,8 @@ export const actionChangeExportEmbedScene = register({
       checked={appState.exportEmbedScene}
       onChange={(checked) => updateData(checked)}
     >
-      {t("labels.exportEmbedScene")}
-      <Tooltip label={t("labels.exportEmbedScene_details")} long={true}>
+      {t("imageExportDialog.label.embedScene")}
+      <Tooltip label={t("imageExportDialog.tooltip.embedScene")} long={true}>
         <div className="excalidraw-tooltip-icon">{questionCircle}</div>
       </Tooltip>
     </CheckboxItem>
@@ -276,7 +277,7 @@ export const actionExportWithDarkMode = register({
         onChange={(theme: Theme) => {
           updateData(theme === THEME.DARK);
         }}
-        title={t("labels.toggleExportColorScheme")}
+        title={t("imageExportDialog.label.darkMode")}
       />
     </div>
   ),
diff --git a/src/actions/actionFinalize.tsx b/src/actions/actionFinalize.tsx
index 3508de0ad..99c8d8cf5 100644
--- a/src/actions/actionFinalize.tsx
+++ b/src/actions/actionFinalize.tsx
@@ -125,13 +125,6 @@ export const actionFinalize = register({
           { x, y },
         );
       }
-
-      if (
-        !appState.activeTool.locked &&
-        appState.activeTool.type !== "freedraw"
-      ) {
-        appState.selectedElementIds[multiPointElement.id] = true;
-      }
     }
 
     if (
diff --git a/src/actions/actionFlip.ts b/src/actions/actionFlip.ts
index ff6bfe4b7..8a71a7e0f 100644
--- a/src/actions/actionFlip.ts
+++ b/src/actions/actionFlip.ts
@@ -1,74 +1,54 @@
 import { register } from "./register";
 import { getSelectedElements } from "../scene";
 import { getNonDeletedElements } from "../element";
-import { mutateElement } from "../element/mutateElement";
 import { ExcalidrawElement, NonDeleted } from "../element/types";
-import { normalizeAngle, resizeSingleElement } from "../element/resizeElements";
-import { AppState } from "../types";
-import { getTransformHandles } from "../element/transformHandles";
-import { updateBoundElements } from "../element/binding";
+import { resizeMultipleElements } from "../element/resizeElements";
+import { AppState, PointerDownState } from "../types";
 import { arrayToMap } from "../utils";
+import { CODES, KEYS } from "../keys";
+import { getCommonBoundingBox } from "../element/bounds";
 import {
-  getElementAbsoluteCoords,
-  getElementPointsCoords,
-} from "../element/bounds";
-import { isLinearElement } from "../element/typeChecks";
-import { LinearElementEditor } from "../element/linearElementEditor";
-import { KEYS } from "../keys";
-
-const enableActionFlipHorizontal = (
-  elements: readonly ExcalidrawElement[],
-  appState: AppState,
-) => {
-  const eligibleElements = getSelectedElements(
-    getNonDeletedElements(elements),
-    appState,
-  );
-  return eligibleElements.length === 1 && eligibleElements[0].type !== "text";
-};
-
-const enableActionFlipVertical = (
-  elements: readonly ExcalidrawElement[],
-  appState: AppState,
-) => {
-  const eligibleElements = getSelectedElements(
-    getNonDeletedElements(elements),
-    appState,
-  );
-  return eligibleElements.length === 1;
-};
+  bindOrUnbindSelectedElements,
+  isBindingEnabled,
+  unbindLinearElements,
+} from "../element/binding";
+import { updateFrameMembershipOfSelectedElements } from "../frame";
 
 export const actionFlipHorizontal = register({
   name: "flipHorizontal",
   trackEvent: { category: "element" },
-  perform: (elements, appState) => {
+  perform: (elements, appState, _, app) => {
     return {
-      elements: flipSelectedElements(elements, appState, "horizontal"),
+      elements: updateFrameMembershipOfSelectedElements(
+        flipSelectedElements(elements, appState, "horizontal"),
+        appState,
+        app,
+      ),
       appState,
       commitToHistory: true,
     };
   },
-  keyTest: (event) => event.shiftKey && event.code === "KeyH",
+  keyTest: (event) => event.shiftKey && event.code === CODES.H,
   contextItemLabel: "labels.flipHorizontal",
-  predicate: (elements, appState) =>
-    enableActionFlipHorizontal(elements, appState),
 });
 
 export const actionFlipVertical = register({
   name: "flipVertical",
   trackEvent: { category: "element" },
-  perform: (elements, appState) => {
+  perform: (elements, appState, _, app) => {
     return {
-      elements: flipSelectedElements(elements, appState, "vertical"),
+      elements: updateFrameMembershipOfSelectedElements(
+        flipSelectedElements(elements, appState, "vertical"),
+        appState,
+        app,
+      ),
       appState,
       commitToHistory: true,
     };
   },
   keyTest: (event) =>
-    event.shiftKey && event.code === "KeyV" && !event[KEYS.CTRL_OR_CMD],
+    event.shiftKey && event.code === CODES.V && !event[KEYS.CTRL_OR_CMD],
   contextItemLabel: "labels.flipVertical",
-  predicate: (elements, appState) =>
-    enableActionFlipVertical(elements, appState),
 });
 
 const flipSelectedElements = (
@@ -79,13 +59,11 @@ const flipSelectedElements = (
   const selectedElements = getSelectedElements(
     getNonDeletedElements(elements),
     appState,
+    {
+      includeElementsInFrames: true,
+    },
   );
 
-  // remove once we allow for groups of elements to be flipped
-  if (selectedElements.length > 1) {
-    return elements;
-  }
-
   const updatedElements = flipElements(
     selectedElements,
     appState,
@@ -104,144 +82,20 @@ const flipElements = (
   appState: AppState,
   flipDirection: "horizontal" | "vertical",
 ): ExcalidrawElement[] => {
-  elements.forEach((element) => {
-    flipElement(element, appState);
-    // If vertical flip, rotate an extra 180
-    if (flipDirection === "vertical") {
-      rotateElement(element, Math.PI);
-    }
-  });
+  const { minX, minY, maxX, maxY } = getCommonBoundingBox(elements);
+
+  resizeMultipleElements(
+    { originalElements: arrayToMap(elements) } as PointerDownState,
+    elements,
+    "nw",
+    true,
+    flipDirection === "horizontal" ? maxX : minX,
+    flipDirection === "horizontal" ? minY : maxY,
+  );
+
+  (isBindingEnabled(appState)
+    ? bindOrUnbindSelectedElements
+    : unbindLinearElements)(elements);
+
   return elements;
 };
-
-const flipElement = (
-  element: NonDeleted<ExcalidrawElement>,
-  appState: AppState,
-) => {
-  const originalX = element.x;
-  const originalY = element.y;
-  const width = element.width;
-  const height = element.height;
-  const originalAngle = normalizeAngle(element.angle);
-
-  // Rotate back to zero, if necessary
-  mutateElement(element, {
-    angle: normalizeAngle(0),
-  });
-  // Flip unrotated by pulling TransformHandle to opposite side
-  const transformHandles = getTransformHandles(element, appState.zoom);
-  let usingNWHandle = true;
-  let nHandle = transformHandles.nw;
-  if (!nHandle) {
-    // Use ne handle instead
-    usingNWHandle = false;
-    nHandle = transformHandles.ne;
-    if (!nHandle) {
-      mutateElement(element, {
-        angle: originalAngle,
-      });
-      return;
-    }
-  }
-
-  let finalOffsetX = 0;
-  if (isLinearElement(element) && element.points.length < 3) {
-    finalOffsetX =
-      element.points.reduce((max, point) => Math.max(max, point[0]), 0) * 2 -
-      element.width;
-  }
-
-  let initialPointsCoords;
-  if (isLinearElement(element)) {
-    initialPointsCoords = getElementPointsCoords(element, element.points);
-  }
-  const initialElementAbsoluteCoords = getElementAbsoluteCoords(element);
-
-  if (isLinearElement(element) && element.points.length < 3) {
-    for (let index = 1; index < element.points.length; index++) {
-      LinearElementEditor.movePoints(element, [
-        {
-          index,
-          point: [-element.points[index][0], element.points[index][1]],
-        },
-      ]);
-    }
-    LinearElementEditor.normalizePoints(element);
-  } else {
-    const elWidth = initialPointsCoords
-      ? initialPointsCoords[2] - initialPointsCoords[0]
-      : initialElementAbsoluteCoords[2] - initialElementAbsoluteCoords[0];
-
-    const startPoint = initialPointsCoords
-      ? [initialPointsCoords[0], initialPointsCoords[1]]
-      : [initialElementAbsoluteCoords[0], initialElementAbsoluteCoords[1]];
-
-    resizeSingleElement(
-      new Map().set(element.id, element),
-      false,
-      element,
-      usingNWHandle ? "nw" : "ne",
-      true,
-      usingNWHandle ? startPoint[0] + elWidth : startPoint[0] - elWidth,
-      startPoint[1],
-    );
-  }
-
-  // Rotate by (360 degrees - original angle)
-  let angle = normalizeAngle(2 * Math.PI - originalAngle);
-  if (angle < 0) {
-    // check, probably unnecessary
-    angle = normalizeAngle(angle + 2 * Math.PI);
-  }
-  mutateElement(element, {
-    angle,
-  });
-
-  // Move back to original spot to appear "flipped in place"
-  mutateElement(element, {
-    x: originalX + finalOffsetX,
-    y: originalY,
-    width,
-    height,
-  });
-
-  updateBoundElements(element);
-
-  if (initialPointsCoords && isLinearElement(element)) {
-    // 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 topLeftCoordsDiff = initialPointsCoords[0] - finalPointsCoords[0];
-    const topRightCoordDiff = initialPointsCoords[2] - finalPointsCoords[2];
-
-    const coordsDiff = topLeftCoordsDiff + topRightCoordDiff;
-
-    mutateElement(element, {
-      x: element.x + coordsDiff * 0.5,
-      y: element.y,
-      width,
-      height,
-    });
-  }
-};
-
-const rotateElement = (element: ExcalidrawElement, rotationAngle: number) => {
-  const originalX = element.x;
-  const originalY = element.y;
-  let angle = normalizeAngle(element.angle + rotationAngle);
-  if (angle < 0) {
-    // check, probably unnecessary
-    angle = normalizeAngle(2 * Math.PI + angle);
-  }
-  mutateElement(element, {
-    angle,
-  });
-
-  // Move back to original spot
-  mutateElement(element, {
-    x: originalX,
-    y: originalY,
-  });
-};
diff --git a/src/actions/actionFrame.ts b/src/actions/actionFrame.ts
new file mode 100644
index 000000000..7cf6ea4e4
--- /dev/null
+++ b/src/actions/actionFrame.ts
@@ -0,0 +1,132 @@
+import { getNonDeletedElements } from "../element";
+import { ExcalidrawElement } from "../element/types";
+import { removeAllElementsFromFrame } from "../frame";
+import { getFrameElements } from "../frame";
+import { KEYS } from "../keys";
+import { AppClassProperties, AppState } from "../types";
+import { setCursorForShape, updateActiveTool } from "../utils";
+import { register } from "./register";
+
+const isSingleFrameSelected = (appState: AppState, app: AppClassProperties) => {
+  const selectedElements = app.scene.getSelectedElements(appState);
+
+  return selectedElements.length === 1 && selectedElements[0].type === "frame";
+};
+
+export const actionSelectAllElementsInFrame = register({
+  name: "selectAllElementsInFrame",
+  trackEvent: { category: "canvas" },
+  perform: (elements, appState, _, app) => {
+    const selectedFrame = app.scene.getSelectedElements(appState)[0];
+
+    if (selectedFrame && selectedFrame.type === "frame") {
+      const elementsInFrame = getFrameElements(
+        getNonDeletedElements(elements),
+        selectedFrame.id,
+      ).filter((element) => !(element.type === "text" && element.containerId));
+
+      return {
+        elements,
+        appState: {
+          ...appState,
+          selectedElementIds: elementsInFrame.reduce((acc, element) => {
+            acc[element.id] = true;
+            return acc;
+          }, {} as Record<ExcalidrawElement["id"], true>),
+        },
+        commitToHistory: false,
+      };
+    }
+
+    return {
+      elements,
+      appState,
+      commitToHistory: false,
+    };
+  },
+  contextItemLabel: "labels.selectAllElementsInFrame",
+  predicate: (elements, appState, _, app) =>
+    isSingleFrameSelected(appState, app),
+});
+
+export const actionRemoveAllElementsFromFrame = register({
+  name: "removeAllElementsFromFrame",
+  trackEvent: { category: "history" },
+  perform: (elements, appState, _, app) => {
+    const selectedFrame = app.scene.getSelectedElements(appState)[0];
+
+    if (selectedFrame && selectedFrame.type === "frame") {
+      return {
+        elements: removeAllElementsFromFrame(elements, selectedFrame, appState),
+        appState: {
+          ...appState,
+          selectedElementIds: {
+            [selectedFrame.id]: true,
+          },
+        },
+        commitToHistory: true,
+      };
+    }
+
+    return {
+      elements,
+      appState,
+      commitToHistory: false,
+    };
+  },
+  contextItemLabel: "labels.removeAllElementsFromFrame",
+  predicate: (elements, appState, _, app) =>
+    isSingleFrameSelected(appState, app),
+});
+
+export const actionupdateFrameRendering = register({
+  name: "updateFrameRendering",
+  viewMode: true,
+  trackEvent: { category: "canvas" },
+  perform: (elements, appState) => {
+    return {
+      elements,
+      appState: {
+        ...appState,
+        frameRendering: {
+          ...appState.frameRendering,
+          enabled: !appState.frameRendering.enabled,
+        },
+      },
+      commitToHistory: false,
+    };
+  },
+  contextItemLabel: "labels.updateFrameRendering",
+  checked: (appState: AppState) => appState.frameRendering.enabled,
+});
+
+export const actionSetFrameAsActiveTool = register({
+  name: "setFrameAsActiveTool",
+  trackEvent: { category: "toolbar" },
+  perform: (elements, appState, _, app) => {
+    const nextActiveTool = updateActiveTool(appState, {
+      type: "frame",
+    });
+
+    setCursorForShape(app.canvas, {
+      ...appState,
+      activeTool: nextActiveTool,
+    });
+
+    return {
+      elements,
+      appState: {
+        ...appState,
+        activeTool: updateActiveTool(appState, {
+          type: "frame",
+        }),
+      },
+      commitToHistory: false,
+    };
+  },
+  keyTest: (event) =>
+    !event[KEYS.CTRL_OR_CMD] &&
+    !event.shiftKey &&
+    !event.altKey &&
+    event.key.toLocaleLowerCase() === KEYS.F,
+});
diff --git a/src/actions/actionGroup.tsx b/src/actions/actionGroup.tsx
index 1e6bcfbbc..82293d7d1 100644
--- a/src/actions/actionGroup.tsx
+++ b/src/actions/actionGroup.tsx
@@ -4,7 +4,7 @@ import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
 import { UngroupIcon, GroupIcon } from "../components/icons";
 import { newElementWith } from "../element/mutateElement";
-import { getSelectedElements, isSomeElementSelected } from "../scene";
+import { isSomeElementSelected } from "../scene";
 import {
   getSelectedGroupIds,
   selectGroup,
@@ -17,9 +17,19 @@ import {
 import { getNonDeletedElements } from "../element";
 import { randomId } from "../random";
 import { ToolButton } from "../components/ToolButton";
-import { ExcalidrawElement, ExcalidrawTextElement } from "../element/types";
-import { AppState } from "../types";
+import {
+  ExcalidrawElement,
+  ExcalidrawFrameElement,
+  ExcalidrawTextElement,
+} from "../element/types";
+import { AppClassProperties, AppState } from "../types";
 import { isBoundToContainer } from "../element/typeChecks";
+import {
+  getElementsInResizingFrame,
+  groupByFrames,
+  removeElementsFromFrame,
+  replaceAllElementsInFrame,
+} from "../frame";
 
 const allElementsInSameGroup = (elements: readonly ExcalidrawElement[]) => {
   if (elements.length >= 2) {
@@ -41,12 +51,12 @@ const allElementsInSameGroup = (elements: readonly ExcalidrawElement[]) => {
 const enableActionGroup = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
+  app: AppClassProperties,
 ) => {
-  const selectedElements = getSelectedElements(
-    getNonDeletedElements(elements),
-    appState,
-    true,
-  );
+  const selectedElements = app.scene.getSelectedElements({
+    selectedElementIds: appState.selectedElementIds,
+    includeBoundTextElement: true,
+  });
   return (
     selectedElements.length >= 2 && !allElementsInSameGroup(selectedElements)
   );
@@ -55,12 +65,11 @@ const enableActionGroup = (
 export const actionGroup = register({
   name: "group",
   trackEvent: { category: "element" },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-      true,
-    );
+  perform: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: true,
+    });
     if (selectedElements.length < 2) {
       // nothing to group
       return { appState, elements, commitToHistory: false };
@@ -86,9 +95,31 @@ export const actionGroup = register({
         return { appState, elements, commitToHistory: false };
       }
     }
+
+    let nextElements = [...elements];
+
+    // this includes the case where we are grouping elements inside a frame
+    // and elements outside that frame
+    const groupingElementsFromDifferentFrames =
+      new Set(selectedElements.map((element) => element.frameId)).size > 1;
+    // when it happens, we want to remove elements that are in the frame
+    // and are going to be grouped from the frame (mouthful, I know)
+    if (groupingElementsFromDifferentFrames) {
+      const frameElementsMap = groupByFrames(selectedElements);
+
+      frameElementsMap.forEach((elementsInFrame, frameId) => {
+        nextElements = removeElementsFromFrame(
+          nextElements,
+          elementsInFrame,
+          appState,
+        );
+      });
+    }
+
     const newGroupId = randomId();
     const selectElementIds = arrayToMap(selectedElements);
-    const updatedElements = elements.map((element) => {
+
+    nextElements = nextElements.map((element) => {
       if (!selectElementIds.get(element.id)) {
         return element;
       }
@@ -102,17 +133,16 @@ export const actionGroup = register({
     });
     // keep the z order within the group the same, but move them
     // to the z order of the highest element in the layer stack
-    const elementsInGroup = getElementsInGroup(updatedElements, newGroupId);
+    const elementsInGroup = getElementsInGroup(nextElements, newGroupId);
     const lastElementInGroup = elementsInGroup[elementsInGroup.length - 1];
-    const lastGroupElementIndex =
-      updatedElements.lastIndexOf(lastElementInGroup);
-    const elementsAfterGroup = updatedElements.slice(lastGroupElementIndex + 1);
-    const elementsBeforeGroup = updatedElements
+    const lastGroupElementIndex = nextElements.lastIndexOf(lastElementInGroup);
+    const elementsAfterGroup = nextElements.slice(lastGroupElementIndex + 1);
+    const elementsBeforeGroup = nextElements
       .slice(0, lastGroupElementIndex)
       .filter(
         (updatedElement) => !isElementInGroup(updatedElement, newGroupId),
       );
-    const updatedElementsInOrder = [
+    nextElements = [
       ...elementsBeforeGroup,
       ...elementsInGroup,
       ...elementsAfterGroup,
@@ -122,19 +152,20 @@ export const actionGroup = register({
       appState: selectGroup(
         newGroupId,
         { ...appState, selectedGroupIds: {} },
-        getNonDeletedElements(updatedElementsInOrder),
+        getNonDeletedElements(nextElements),
       ),
-      elements: updatedElementsInOrder,
+      elements: nextElements,
       commitToHistory: true,
     };
   },
   contextItemLabel: "labels.group",
-  predicate: (elements, appState) => enableActionGroup(elements, appState),
+  predicate: (elements, appState, _, app) =>
+    enableActionGroup(elements, appState, app),
   keyTest: (event) =>
     !event.shiftKey && event[KEYS.CTRL_OR_CMD] && event.key === KEYS.G,
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!enableActionGroup(elements, appState)}
+      hidden={!enableActionGroup(elements, appState, app)}
       type="button"
       icon={<GroupIcon theme={appState.theme} />}
       onClick={() => updateData(null)}
@@ -148,14 +179,23 @@ export const actionGroup = register({
 export const actionUngroup = register({
   name: "ungroup",
   trackEvent: { category: "element" },
-  perform: (elements, appState) => {
+  perform: (elements, appState, _, app) => {
     const groupIds = getSelectedGroupIds(appState);
     if (groupIds.length === 0) {
       return { appState, elements, commitToHistory: false };
     }
 
+    let nextElements = [...elements];
+
+    const selectedElements = app.scene.getSelectedElements(appState);
+    const frames = selectedElements
+      .filter((element) => element.frameId)
+      .map((element) =>
+        app.scene.getElement(element.frameId!),
+      ) as ExcalidrawFrameElement[];
+
     const boundTextElementIds: ExcalidrawTextElement["id"][] = [];
-    const nextElements = elements.map((element) => {
+    nextElements = nextElements.map((element) => {
       if (isBoundToContainer(element)) {
         boundTextElementIds.push(element.id);
       }
@@ -174,15 +214,36 @@ export const actionUngroup = register({
     const updateAppState = selectGroupsForSelectedElements(
       { ...appState, selectedGroupIds: {} },
       getNonDeletedElements(nextElements),
+      appState,
+      null,
     );
 
+    frames.forEach((frame) => {
+      if (frame) {
+        nextElements = replaceAllElementsInFrame(
+          nextElements,
+          getElementsInResizingFrame(nextElements, frame, appState),
+          frame,
+          appState,
+        );
+      }
+    });
+
     // remove binded text elements from selection
-    boundTextElementIds.forEach(
-      (id) => (updateAppState.selectedElementIds[id] = false),
+    updateAppState.selectedElementIds = Object.entries(
+      updateAppState.selectedElementIds,
+    ).reduce(
+      (acc: { [key: ExcalidrawElement["id"]]: true }, [id, selected]) => {
+        if (selected && !boundTextElementIds.includes(id)) {
+          acc[id] = true;
+        }
+        return acc;
+      },
+      {},
     );
+
     return {
       appState: updateAppState,
-
       elements: nextElements,
       commitToHistory: true,
     };
diff --git a/src/actions/actionLinearEditor.ts b/src/actions/actionLinearEditor.ts
index fc86eb165..83611b027 100644
--- a/src/actions/actionLinearEditor.ts
+++ b/src/actions/actionLinearEditor.ts
@@ -1,8 +1,6 @@
-import { getNonDeletedElements } from "../element";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { isLinearElement } from "../element/typeChecks";
 import { ExcalidrawLinearElement } from "../element/types";
-import { getSelectedElements } from "../scene";
 import { register } from "./register";
 
 export const actionToggleLinearEditor = register({
@@ -10,19 +8,18 @@ export const actionToggleLinearEditor = register({
   trackEvent: {
     category: "element",
   },
-  predicate: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState);
+  predicate: (elements, appState, _, app) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
     if (selectedElements.length === 1 && isLinearElement(selectedElements[0])) {
       return true;
     }
     return false;
   },
   perform(elements, appState, _, app) {
-    const selectedElement = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-      true,
-    )[0] as ExcalidrawLinearElement;
+    const selectedElement = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: true,
+    })[0] as ExcalidrawLinearElement;
 
     const editingLinearElement =
       appState.editingLinearElement?.elementId === selectedElement.id
@@ -36,12 +33,11 @@ export const actionToggleLinearEditor = register({
       commitToHistory: false,
     };
   },
-  contextItemLabel: (elements, appState) => {
-    const selectedElement = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-      true,
-    )[0] as ExcalidrawLinearElement;
+  contextItemLabel: (elements, appState, app) => {
+    const selectedElement = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: true,
+    })[0] as ExcalidrawLinearElement;
     return appState.editingLinearElement?.elementId === selectedElement.id
       ? "labels.lineEditor.exit"
       : "labels.lineEditor.edit";
diff --git a/src/actions/actionMenu.tsx b/src/actions/actionMenu.tsx
index 27bd3b37a..80a5c2b1f 100644
--- a/src/actions/actionMenu.tsx
+++ b/src/actions/actionMenu.tsx
@@ -67,7 +67,6 @@ export const actionFullScreen = register({
       commitToHistory: false,
     };
   },
-  keyTest: (event) => event.key === KEYS.F && !event[KEYS.CTRL_OR_CMD],
 });
 
 export const actionShortcuts = register({
diff --git a/src/actions/actionNavigate.tsx b/src/actions/actionNavigate.tsx
index 1b808e4a7..126e547ae 100644
--- a/src/actions/actionNavigate.tsx
+++ b/src/actions/actionNavigate.tsx
@@ -1,4 +1,4 @@
-import { getClientColors } from "../clients";
+import { getClientColor } from "../clients";
 import { Avatar } from "../components/Avatar";
 import { centerScrollOn } from "../scene/scroll";
 import { Collaborator } from "../types";
@@ -31,15 +31,14 @@ export const actionGoToCollaborator = register({
       commitToHistory: false,
     };
   },
-  PanelComponent: ({ appState, updateData, data }) => {
+  PanelComponent: ({ updateData, data }) => {
     const [clientId, collaborator] = data as [string, Collaborator];
 
-    const { background, stroke } = getClientColors(clientId, appState);
+    const background = getClientColor(clientId);
 
     return (
       <Avatar
         color={background}
-        border={stroke}
         onClick={() => updateData(collaborator.pointer)}
         name={collaborator.username || ""}
         src={collaborator.avatarUrl}
diff --git a/src/actions/actionProperties.tsx b/src/actions/actionProperties.tsx
index ed714816b..e0d61a271 100644
--- a/src/actions/actionProperties.tsx
+++ b/src/actions/actionProperties.tsx
@@ -1,7 +1,13 @@
 import { AppState } from "../../src/types";
+import {
+  DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE,
+  DEFAULT_ELEMENT_BACKGROUND_PICKS,
+  DEFAULT_ELEMENT_STROKE_COLOR_PALETTE,
+  DEFAULT_ELEMENT_STROKE_PICKS,
+} from "../colors";
 import { trackEvent } from "../analytics";
 import { ButtonIconSelect } from "../components/ButtonIconSelect";
-import { ColorPicker } from "../components/ColorPicker";
+import { ColorPicker } from "../components/ColorPicker/ColorPicker";
 import { IconPicker } from "../components/IconPicker";
 // TODO barnabasmolnar/editor-redesign
 // TextAlignTopIcon, TextAlignBottomIcon,TextAlignMiddleIcon,
@@ -84,7 +90,7 @@ import {
   isSomeElementSelected,
 } from "../scene";
 import { hasStrokeColor } from "../scene/comparisons";
-import { arrayToMap } from "../utils";
+import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
 
 const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
@@ -96,8 +102,11 @@ const changeProperty = (
   includeBoundText = false,
 ) => {
   const selectedElementIds = arrayToMap(
-    getSelectedElements(elements, appState, includeBoundText),
+    getSelectedElements(elements, appState, {
+      includeBoundTextElement: includeBoundText,
+    }),
   );
+
   return elements.map((element) => {
     if (
       selectedElementIds.get(element.id) ||
@@ -113,8 +122,8 @@ const getFormValue = function <T>(
   elements: readonly ExcalidrawElement[],
   appState: AppState,
   getAttribute: (element: ExcalidrawElement) => T,
-  defaultValue?: T,
-): T | null {
+  defaultValue: T,
+): T {
   const editingElement = appState.editingElement;
   const nonDeletedElements = getNonDeletedElements(elements);
   return (
@@ -126,7 +135,7 @@ const getFormValue = function <T>(
           getAttribute,
         )
       : defaultValue) ??
-    null
+    defaultValue
   );
 };
 
@@ -226,10 +235,12 @@ export const actionChangeStrokeColor = register({
       commitToHistory: !!value.currentItemStrokeColor,
     };
   },
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData, appProps }) => (
     <>
       <h3 aria-hidden="true">{t("labels.stroke")}</h3>
       <ColorPicker
+        topPicks={DEFAULT_ELEMENT_STROKE_PICKS}
+        palette={DEFAULT_ELEMENT_STROKE_COLOR_PALETTE}
         type="elementStroke"
         label={t("labels.stroke")}
         color={getFormValue(
@@ -239,12 +250,9 @@ export const actionChangeStrokeColor = register({
           appState.currentItemStrokeColor,
         )}
         onChange={(color) => updateData({ currentItemStrokeColor: color })}
-        isActive={appState.openPopup === "strokeColorPicker"}
-        setActive={(active) =>
-          updateData({ openPopup: active ? "strokeColorPicker" : null })
-        }
         elements={elements}
         appState={appState}
+        updateData={updateData}
       />
     </>
   ),
@@ -269,10 +277,12 @@ export const actionChangeBackgroundColor = register({
       commitToHistory: !!value.currentItemBackgroundColor,
     };
   },
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData, appProps }) => (
     <>
       <h3 aria-hidden="true">{t("labels.background")}</h3>
       <ColorPicker
+        topPicks={DEFAULT_ELEMENT_BACKGROUND_PICKS}
+        palette={DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE}
         type="elementBackground"
         label={t("labels.background")}
         color={getFormValue(
@@ -282,12 +292,9 @@ export const actionChangeBackgroundColor = register({
           appState.currentItemBackgroundColor,
         )}
         onChange={(color) => updateData({ currentItemBackgroundColor: color })}
-        isActive={appState.openPopup === "backgroundColorPicker"}
-        setActive={(active) =>
-          updateData({ openPopup: active ? "backgroundColorPicker" : null })
-        }
         elements={elements}
         appState={appState}
+        updateData={updateData}
       />
     </>
   ),
@@ -314,9 +321,9 @@ export const actionChangeFillStyle = register({
   },
   PanelComponent: ({ elements, appState, updateData }) => {
     const selectedElements = getSelectedElements(elements, appState);
-    const allElementsZigZag = selectedElements.every(
-      (el) => el.fillStyle === "zigzag",
-    );
+    const allElementsZigZag =
+      selectedElements.length > 0 &&
+      selectedElements.every((el) => el.fillStyle === "zigzag");
 
     return (
       <fieldset>
@@ -326,7 +333,9 @@ export const actionChangeFillStyle = register({
           options={[
             {
               value: "hachure",
-              text: t("labels.hachure"),
+              text: `${
+                allElementsZigZag ? t("labels.zigzag") : t("labels.hachure")
+              } (${getShortcutKey("Alt-Click")})`,
               icon: allElementsZigZag ? FillZigZagIcon : FillHachureIcon,
               active: allElementsZigZag ? true : undefined,
             },
@@ -805,6 +814,7 @@ export const actionChangeTextAlign = register({
     );
   },
 });
+
 export const actionChangeVerticalAlign = register({
   name: "changeVerticalAlign",
   trackEvent: { category: "element" },
@@ -859,16 +869,21 @@ export const actionChangeVerticalAlign = register({
               testId: "align-bottom",
             },
           ]}
-          value={getFormValue(elements, appState, (element) => {
-            if (isTextElement(element) && element.containerId) {
-              return element.verticalAlign;
-            }
-            const boundTextElement = getBoundTextElement(element);
-            if (boundTextElement) {
-              return boundTextElement.verticalAlign;
-            }
-            return null;
-          })}
+          value={getFormValue(
+            elements,
+            appState,
+            (element) => {
+              if (isTextElement(element) && element.containerId) {
+                return element.verticalAlign;
+              }
+              const boundTextElement = getBoundTextElement(element);
+              if (boundTextElement) {
+                return boundTextElement.verticalAlign;
+              }
+              return null;
+            },
+            VERTICAL_ALIGN.MIDDLE,
+          )}
           onChange={(value) => updateData(value)}
         />
       </fieldset>
diff --git a/src/actions/actionSelectAll.ts b/src/actions/actionSelectAll.ts
index 2adadd241..eeadf2dc9 100644
--- a/src/actions/actionSelectAll.ts
+++ b/src/actions/actionSelectAll.ts
@@ -5,6 +5,7 @@ import { getNonDeletedElements, isTextElement } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { isLinearElement } from "../element/typeChecks";
 import { LinearElementEditor } from "../element/linearElementEditor";
+import { excludeElementsInFramesFromSelection } from "../scene/selection";
 
 export const actionSelectAll = register({
   name: "selectAll",
@@ -13,19 +14,18 @@ export const actionSelectAll = register({
     if (appState.editingLinearElement) {
       return false;
     }
-    const selectedElementIds = elements.reduce(
-      (map: Record<ExcalidrawElement["id"], true>, element) => {
-        if (
+
+    const selectedElementIds = excludeElementsInFramesFromSelection(
+      elements.filter(
+        (element) =>
           !element.isDeleted &&
           !(isTextElement(element) && element.containerId) &&
-          !element.locked
-        ) {
-          map[element.id] = true;
-        }
-        return map;
-      },
-      {},
-    );
+          !element.locked,
+      ),
+    ).reduce((map: Record<ExcalidrawElement["id"], true>, element) => {
+      map[element.id] = true;
+      return map;
+    }, {});
 
     return {
       appState: selectGroupsForSelectedElements(
@@ -41,6 +41,8 @@ export const actionSelectAll = register({
           selectedElementIds,
         },
         getNonDeletedElements(elements),
+        appState,
+        app,
       ),
       commitToHistory: true,
     };
diff --git a/src/actions/actionStyles.test.tsx b/src/actions/actionStyles.test.tsx
index c73864cc4..238196dfc 100644
--- a/src/actions/actionStyles.test.tsx
+++ b/src/actions/actionStyles.test.tsx
@@ -1,9 +1,14 @@
 import ExcalidrawApp from "../excalidraw-app";
-import { t } from "../i18n";
 import { CODES } from "../keys";
 import { API } from "../tests/helpers/api";
 import { Keyboard, Pointer, UI } from "../tests/helpers/ui";
-import { fireEvent, render, screen } from "../tests/test-utils";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  togglePopover,
+} from "../tests/test-utils";
 import { copiedStyles } from "./actionStyles";
 
 const { h } = window;
@@ -14,7 +19,14 @@ describe("actionStyles", () => {
   beforeEach(async () => {
     await render(<ExcalidrawApp />);
   });
-  it("should copy & paste styles via keyboard", () => {
+
+  afterEach(async () => {
+    // https://github.com/floating-ui/floating-ui/issues/1908#issuecomment-1301553793
+    // affects node v16+
+    await act(async () => {});
+  });
+
+  it("should copy & paste styles via keyboard", async () => {
     UI.clickTool("rectangle");
     mouse.down(10, 10);
     mouse.up(20, 20);
@@ -24,10 +36,10 @@ describe("actionStyles", () => {
     mouse.up(20, 20);
 
     // Change some styles of second rectangle
-    UI.clickLabeledElement("Stroke");
-    UI.clickLabeledElement(t("colors.c92a2a"));
-    UI.clickLabeledElement("Background");
-    UI.clickLabeledElement(t("colors.e64980"));
+    togglePopover("Stroke");
+    UI.clickOnTestId("color-red");
+    togglePopover("Background");
+    UI.clickOnTestId("color-blue");
     // Fill style
     fireEvent.click(screen.getByTitle("Cross-hatch"));
     // Stroke width
@@ -60,8 +72,8 @@ describe("actionStyles", () => {
 
     const firstRect = API.getSelectedElement();
     expect(firstRect.id).toBe(h.elements[0].id);
-    expect(firstRect.strokeColor).toBe("#c92a2a");
-    expect(firstRect.backgroundColor).toBe("#e64980");
+    expect(firstRect.strokeColor).toBe("#e03131");
+    expect(firstRect.backgroundColor).toBe("#a5d8ff");
     expect(firstRect.fillStyle).toBe("cross-hatch");
     expect(firstRect.strokeWidth).toBe(2); // Bold: 2
     expect(firstRect.strokeStyle).toBe("dotted");
diff --git a/src/actions/actionStyles.ts b/src/actions/actionStyles.ts
index aaa59d324..88d4b4c47 100644
--- a/src/actions/actionStyles.ts
+++ b/src/actions/actionStyles.ts
@@ -20,6 +20,7 @@ import {
   hasBoundTextElement,
   canApplyRoundnessTypeToElement,
   getDefaultRoundnessTypeForElement,
+  isFrameElement,
 } from "../element/typeChecks";
 import { getSelectedElements } from "../scene";
 
@@ -64,7 +65,9 @@ export const actionPasteStyles = register({
       return { elements, commitToHistory: false };
     }
 
-    const selectedElements = getSelectedElements(elements, appState, true);
+    const selectedElements = getSelectedElements(elements, appState, {
+      includeBoundTextElement: true,
+    });
     const selectedElementIds = selectedElements.map((element) => element.id);
     return {
       elements: elements.map((element) => {
@@ -127,6 +130,13 @@ export const actionPasteStyles = register({
             });
           }
 
+          if (isFrameElement(element)) {
+            newElement = newElementWith(newElement, {
+              roundness: null,
+              backgroundColor: "transparent",
+            });
+          }
+
           return newElement;
         }
         return element;
diff --git a/src/actions/actionToggleLock.ts b/src/actions/actionToggleLock.ts
deleted file mode 100644
index c44bd5700..000000000
--- a/src/actions/actionToggleLock.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { newElementWith } from "../element/mutateElement";
-import { ExcalidrawElement } from "../element/types";
-import { KEYS } from "../keys";
-import { getSelectedElements } from "../scene";
-import { arrayToMap } from "../utils";
-import { register } from "./register";
-
-export const actionToggleLock = register({
-  name: "toggleLock",
-  trackEvent: { category: "element" },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState, true);
-
-    if (!selectedElements.length) {
-      return false;
-    }
-
-    const operation = getOperation(selectedElements);
-    const selectedElementsMap = arrayToMap(selectedElements);
-    const lock = operation === "lock";
-    return {
-      elements: elements.map((element) => {
-        if (!selectedElementsMap.has(element.id)) {
-          return element;
-        }
-
-        return newElementWith(element, { locked: lock });
-      }),
-      appState: {
-        ...appState,
-        selectedLinearElement: lock ? null : appState.selectedLinearElement,
-      },
-      commitToHistory: true,
-    };
-  },
-  contextItemLabel: (elements, appState) => {
-    const selected = getSelectedElements(elements, appState, false);
-    if (selected.length === 1) {
-      return selected[0].locked
-        ? "labels.elementLock.unlock"
-        : "labels.elementLock.lock";
-    }
-
-    return getOperation(selected) === "lock"
-      ? "labels.elementLock.lockAll"
-      : "labels.elementLock.unlockAll";
-  },
-  keyTest: (event, appState, elements) => {
-    return (
-      event.key.toLocaleLowerCase() === KEYS.L &&
-      event[KEYS.CTRL_OR_CMD] &&
-      event.shiftKey &&
-      getSelectedElements(elements, appState, false).length > 0
-    );
-  },
-});
-
-const getOperation = (
-  elements: readonly ExcalidrawElement[],
-): "lock" | "unlock" => (elements.some((el) => !el.locked) ? "lock" : "unlock");
diff --git a/src/actions/index.ts b/src/actions/index.ts
index eea4faf7d..9b53f8173 100644
--- a/src/actions/index.ts
+++ b/src/actions/index.ts
@@ -84,5 +84,5 @@ export { actionToggleZenMode } from "./actionToggleZenMode";
 export { actionToggleStats } from "./actionToggleStats";
 export { actionUnbindText, actionBindText } from "./actionBoundText";
 export { actionLink } from "../element/Hyperlink";
-export { actionToggleLock } from "./actionToggleLock";
+export { actionToggleElementLock } from "./actionElementLock";
 export { actionToggleLinearEditor } from "./actionLinearEditor";
diff --git a/src/actions/manager.tsx b/src/actions/manager.tsx
index 60648e410..b68b59d51 100644
--- a/src/actions/manager.tsx
+++ b/src/actions/manager.tsx
@@ -90,6 +90,7 @@ export class ActionManager {
             event,
             this.getAppState(),
             this.getElementsIncludingDeleted(),
+            this.app,
           ),
       );
 
@@ -118,10 +119,13 @@ export class ActionManager {
     return true;
   }
 
-  executeAction(action: Action, source: ActionSource = "api") {
+  executeAction(
+    action: Action,
+    source: ActionSource = "api",
+    value: any = null,
+  ) {
     const elements = this.getElementsIncludingDeleted();
     const appState = this.getAppState();
-    const value = null;
 
     trackAction(action, source, appState, elements, this.app, value);
 
@@ -165,6 +169,7 @@ export class ActionManager {
           appState={this.getAppState()}
           updateData={updateData}
           appProps={this.app.props}
+          app={this.app}
           data={data}
         />
       );
diff --git a/src/actions/shortcuts.ts b/src/actions/shortcuts.ts
index be48c6470..b9c24a757 100644
--- a/src/actions/shortcuts.ts
+++ b/src/actions/shortcuts.ts
@@ -34,7 +34,7 @@ export type ShortcutName =
       | "flipHorizontal"
       | "flipVertical"
       | "hyperlink"
-      | "toggleLock"
+      | "toggleElementLock"
     >
   | "saveScene"
   | "imageExport";
@@ -80,7 +80,7 @@ const shortcutMap: Record<ShortcutName, string[]> = {
   flipVertical: [getShortcutKey("Shift+V")],
   viewMode: [getShortcutKey("Alt+R")],
   hyperlink: [getShortcutKey("CtrlOrCmd+K")],
-  toggleLock: [getShortcutKey("CtrlOrCmd+Shift+L")],
+  toggleElementLock: [getShortcutKey("CtrlOrCmd+Shift+L")],
 };
 
 export const getShortcutFromShortcutName = (name: ShortcutName) => {
diff --git a/src/actions/types.ts b/src/actions/types.ts
index e46cd2ab8..1a98320da 100644
--- a/src/actions/types.ts
+++ b/src/actions/types.ts
@@ -82,7 +82,8 @@ export type ActionName =
   | "zoomOut"
   | "resetZoom"
   | "zoomToFit"
-  | "zoomToSelection"
+  | "zoomToFitSelection"
+  | "zoomToFitSelectionInViewport"
   | "changeFontFamily"
   | "changeTextAlign"
   | "changeVerticalAlign"
@@ -111,11 +112,17 @@ export type ActionName =
   | "unbindText"
   | "hyperlink"
   | "bindText"
-  | "toggleLock"
+  | "unlockAllElements"
+  | "toggleElementLock"
   | "toggleLinearEditor"
   | "toggleEraserTool"
   | "toggleHandTool"
-  | "createContainerFromText";
+  | "selectAllElementsInFrame"
+  | "removeAllElementsFromFrame"
+  | "updateFrameRendering"
+  | "setFrameAsActiveTool"
+  | "createContainerFromText"
+  | "wrapTextInContainer";
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];
@@ -123,6 +130,7 @@ export type PanelComponentProps = {
   updateData: (formData?: any) => void;
   appProps: ExcalidrawProps;
   data?: Record<string, any>;
+  app: AppClassProperties;
 };
 
 export interface Action {
@@ -134,12 +142,14 @@ export interface Action {
     event: React.KeyboardEvent | KeyboardEvent,
     appState: AppState,
     elements: readonly ExcalidrawElement[],
+    app: AppClassProperties,
   ) => boolean;
   contextItemLabel?:
     | string
     | ((
         elements: readonly ExcalidrawElement[],
         appState: Readonly<AppState>,
+        app: AppClassProperties,
       ) => string);
   predicate?: (
     elements: readonly ExcalidrawElement[],
diff --git a/src/align.ts b/src/align.ts
index b9971c242..06382838f 100644
--- a/src/align.ts
+++ b/src/align.ts
@@ -1,6 +1,6 @@
 import { ExcalidrawElement } from "./element/types";
 import { newElementWith } from "./element/mutateElement";
-import { Box, getCommonBoundingBox } from "./element/bounds";
+import { BoundingBox, getCommonBoundingBox } from "./element/bounds";
 import { getMaximumGroups } from "./groups";
 
 export interface Alignment {
@@ -33,7 +33,7 @@ export const alignElements = (
 
 const calculateTranslation = (
   group: ExcalidrawElement[],
-  selectionBoundingBox: Box,
+  selectionBoundingBox: BoundingBox,
   { axis, position }: Alignment,
 ): { x: number; y: number } => {
   const groupBoundingBox = getCommonBoundingBox(group);
diff --git a/src/analytics.ts b/src/analytics.ts
index 1e9a429b6..2373cc549 100644
--- a/src/analytics.ts
+++ b/src/analytics.ts
@@ -5,6 +5,9 @@ export const trackEvent = (
   value?: number,
 ) => {
   try {
+    // place here categories that you want to track as events
+    // KEEP IN MIND THE PRICING
+    const ALLOWED_CATEGORIES_TO_TRACK = [] as string[];
     // Uncomment the next line to track locally
     // console.log("Track Event", { category, action, label, value });
 
@@ -12,17 +15,16 @@ export const trackEvent = (
       return;
     }
 
-    if (process.env.REACT_APP_GOOGLE_ANALYTICS_ID && window.gtag) {
-      window.gtag("event", action, {
-        event_category: category,
-        event_label: label,
-        value,
-      });
+    if (!ALLOWED_CATEGORIES_TO_TRACK.includes(category)) {
+      return;
     }
 
-    // MATOMO event tracking _paq must be same as the one in index.html
-    if (window._paq) {
-      window._paq.push(["trackEvent", category, action, label, value]);
+    if (window.sa_event) {
+      window.sa_event(action, {
+        category,
+        label,
+        value,
+      });
     }
   } catch (error) {
     console.error("error during analytics", error);
diff --git a/src/appState.ts b/src/appState.ts
index f02d5943c..104fbcbf5 100644
--- a/src/appState.ts
+++ b/src/appState.ts
@@ -1,5 +1,6 @@
-import oc from "open-color";
+import { COLOR_PALETTE } from "./colors";
 import {
+  DEFAULT_ELEMENT_PROPS,
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   DEFAULT_TEXT_ALIGN,
@@ -23,18 +24,18 @@ export const getDefaultAppState = (): Omit<
     theme: THEME.LIGHT,
     collaborators: new Map(),
     currentChartType: "bar",
-    currentItemBackgroundColor: "transparent",
+    currentItemBackgroundColor: DEFAULT_ELEMENT_PROPS.backgroundColor,
     currentItemEndArrowhead: "arrow",
-    currentItemFillStyle: "hachure",
+    currentItemFillStyle: DEFAULT_ELEMENT_PROPS.fillStyle,
     currentItemFontFamily: DEFAULT_FONT_FAMILY,
     currentItemFontSize: DEFAULT_FONT_SIZE,
-    currentItemOpacity: 100,
-    currentItemRoughness: 1,
+    currentItemOpacity: DEFAULT_ELEMENT_PROPS.opacity,
+    currentItemRoughness: DEFAULT_ELEMENT_PROPS.roughness,
     currentItemStartArrowhead: null,
-    currentItemStrokeColor: oc.black,
+    currentItemStrokeColor: DEFAULT_ELEMENT_PROPS.strokeColor,
     currentItemRoundness: "round",
-    currentItemStrokeStyle: "solid",
-    currentItemStrokeWidth: 1,
+    currentItemStrokeStyle: DEFAULT_ELEMENT_PROPS.strokeStyle,
+    currentItemStrokeWidth: DEFAULT_ELEMENT_PROPS.strokeWidth,
     currentItemTextAlign: DEFAULT_TEXT_ALIGN,
     cursorButton: "up",
     draggingElement: null,
@@ -44,7 +45,7 @@ export const getDefaultAppState = (): Omit<
     activeTool: {
       type: "selection",
       customType: null,
-      locked: false,
+      locked: DEFAULT_ELEMENT_PROPS.locked,
       lastActiveTool: null,
     },
     penMode: false,
@@ -57,7 +58,7 @@ export const getDefaultAppState = (): Omit<
     fileHandle: null,
     gridSize: null,
     isBindingEnabled: true,
-    isSidebarDocked: false,
+    defaultSidebarDockedPreference: false,
     isLoading: false,
     isResizing: false,
     isRotating: false,
@@ -77,13 +78,18 @@ export const getDefaultAppState = (): Omit<
     scrollY: 0,
     selectedElementIds: {},
     selectedGroupIds: {},
+    selectedElementsAreBeingDragged: false,
     selectionElement: null,
     shouldCacheIgnoreZoom: false,
     showStats: false,
     startBoundElement: null,
     suggestedBindings: [],
+    frameRendering: { enabled: true, clip: true, name: true, outline: true },
+    frameToHighlight: null,
+    editingFrame: null,
+    elementsToHighlight: null,
     toast: null,
-    viewBackgroundColor: oc.white,
+    viewBackgroundColor: COLOR_PALETTE.white,
     zenModeEnabled: false,
     zoom: {
       value: 1 as NormalizedZoomValue,
@@ -149,7 +155,11 @@ const APP_STATE_STORAGE_CONF = (<
   gridSize: { browser: true, export: true, server: true },
   height: { browser: false, export: false, server: false },
   isBindingEnabled: { browser: false, export: false, server: false },
-  isSidebarDocked: { browser: true, export: false, server: false },
+  defaultSidebarDockedPreference: {
+    browser: true,
+    export: false,
+    server: false,
+  },
   isLoading: { browser: false, export: false, server: false },
   isResizing: { browser: false, export: false, server: false },
   isRotating: { browser: false, export: false, server: false },
@@ -171,11 +181,20 @@ const APP_STATE_STORAGE_CONF = (<
   scrollY: { browser: true, export: false, server: false },
   selectedElementIds: { browser: true, export: false, server: false },
   selectedGroupIds: { browser: true, export: false, server: false },
+  selectedElementsAreBeingDragged: {
+    browser: false,
+    export: false,
+    server: false,
+  },
   selectionElement: { browser: false, export: false, server: false },
   shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
   showStats: { browser: true, export: false, server: false },
   startBoundElement: { browser: false, export: false, server: false },
   suggestedBindings: { browser: false, export: false, server: false },
+  frameRendering: { browser: false, export: false, server: false },
+  frameToHighlight: { browser: false, export: false, server: false },
+  editingFrame: { browser: false, export: false, server: false },
+  elementsToHighlight: { browser: false, export: false, server: false },
   toast: { browser: false, export: false, server: false },
   viewBackgroundColor: { browser: true, export: true, server: true },
   width: { browser: false, export: false, server: false },
diff --git a/src/assets/lock.svg b/src/assets/lock.svg
new file mode 100644
index 000000000..aa9dbf170
--- /dev/null
+++ b/src/assets/lock.svg
@@ -0,0 +1,20 @@
+<svg width="178" height="162" viewBox="0 0 178 162" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.3329 54.3823L38.5547 94.3134L39.7731 111.754L40.1282 118.907L41.0832 123.59L44.3502 131.942L48.9438 137.693L52.5472 143.333L58.5544 147.755L62.5364 150.239L72.3634 154.486L83.15 156.361L91.1212 158.708L101.174 157.525L110.808 156.719L115.983 154.049L124.511 151.377L129.276 148.71L133.701 143.947L139.666 135.877L142.001 128.136L145.746 118.192L145.188 111.065L145.489 94.3675L145.873 75.2546L143.227 59.7779L142.022 47.4695L138.595 46.8345L102.952 45.4703L56.9173 46.7498L46.0719 49.1207L41.9323 50.6825L39.5684 53.4297" fill="#E3E2FE"/>
+<path d="M41.0014 54.2859C41.0861 64.8796 38.3765 102.581 40.9779 117.876C43.5793 133.17 48.2646 139.346 56.6121 146.047C64.9596 152.746 79.1214 157.662 91.0653 158.078C103.009 158.492 119.347 155.242 128.277 148.543C137.206 141.842 142.112 133.527 144.641 117.874C147.169 102.221 146.061 66.4132 143.446 54.6222C140.83 42.8289 143.97 48.2857 128.948 47.1238C113.925 45.9619 67.9608 46.477 53.3051 47.6483C38.6493 48.8197 43.2053 53.0675 41.0155 54.1518M40.5263 53.9801C40.5404 64.6138 37.9249 103.418 40.5921 118.587C43.257 133.755 48.147 138.325 56.5251 144.991C64.9008 151.655 78.7263 157.935 90.8536 158.577C102.981 159.221 120.212 155.413 129.289 148.844C138.368 142.277 142.872 134.995 145.321 119.168C147.767 103.343 146.805 65.8698 143.977 53.8837C141.148 41.8975 143.615 48.4292 128.348 47.2508C113.081 46.0724 67.14 45.6726 52.3737 46.8157C37.6074 47.9564 41.7776 53.091 39.7524 54.1024" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M64.7935 45.726L66.36 36.6964L65.5979 34.4501L67.3384 30.7668L70.4197 26.5048L74.8157 21.0598L81.9095 16.9131L89.9419 14.4951L95.6127 12.8534L97.7555 13.2133L103.819 15.269L106.552 18.5807L109.967 22.3793L114.45 27.2387L114.904 34.3937L117.153 38.9214L116.031 44.5005L116.765 45.5448L118.863 47.3559L126.164 47.6782L127.744 46.7797L128.76 44.7052L123.882 25.8227L120.641 20.4835L116.351 15.8758L112.809 11.0729L108.617 7.36601L101.352 5.43025L93.263 3.31104L84.2451 5.1433L77.7299 7.86229L76.0011 8.0975L62.1168 19.8532L59.5366 24.5597L55.7733 32.3215L55.0371 39.5282L56.0626 44.8933L56.5636 47.1725L59.6401 46.8644L66.1648 46.0388" fill="#E3E2FE"/>
+<path d="M65.0037 46.0106C65.1166 43.8231 64.9237 36.8492 66.1421 33.2412C67.3605 29.6307 69.0799 27.2857 72.314 24.3527C75.5481 21.422 81.273 17.6093 85.5444 15.6453C89.8157 13.6813 94.3317 12.1148 97.9421 12.5664C101.555 13.0157 104.544 15.857 107.219 18.3478C109.893 20.8387 112.356 24.0869 113.986 27.5115C115.618 30.9338 116.389 35.8684 117.006 38.8861C117.622 41.9038 115.992 44.2888 117.69 45.6178C119.388 46.949 125.617 48.1721 127.195 46.8667C128.773 45.5613 127.717 41.1888 127.157 37.7877C126.597 34.3866 125.494 30.1247 123.838 26.4601C122.183 22.7956 119.746 18.9029 117.222 15.7982C114.698 12.6934 112.791 9.9086 108.696 7.83642C104.601 5.76189 97.8081 3.42863 92.6547 3.35337C87.5013 3.2781 81.5529 5.74308 77.7708 7.38717C73.991 9.03127 72.8879 10.6166 69.9666 13.218C67.043 15.8217 62.4306 19.6768 60.2384 23.0026C58.0486 26.3284 57.4818 29.252 56.8185 33.1753C56.1529 37.0962 54.6499 44.39 56.2517 46.5327C57.8511 48.6731 64.7756 45.98 66.4267 46.0247M65.9704 45.5096C65.9845 43.348 64.2652 37.5525 65.5423 33.8456C66.8172 30.1364 70.2959 26.4789 73.6264 23.259C76.9546 20.039 81.3177 16.3015 85.5208 14.5281C89.7216 12.7523 95.1079 11.7903 98.8383 12.6111C102.569 13.432 105.283 16.8072 107.903 19.4486C110.526 22.09 113.146 25.3029 114.567 28.4664C115.987 31.6276 116.03 35.4051 116.425 38.4204C116.82 41.4334 115.124 45.1426 116.937 46.5515C118.751 47.9604 125.539 48.2968 127.31 46.8761C129.081 45.4578 127.978 41.4428 127.562 38.0347C127.145 34.6265 126.501 30.1646 124.81 26.4296C123.116 22.6921 120.195 18.7594 117.413 15.6194C114.63 12.4818 112.247 9.39349 108.117 7.58945C103.987 5.78541 97.5776 5.02099 92.6335 4.79519C87.6895 4.56939 82.3503 4.78813 78.4505 6.23466C74.5484 7.68118 72.0882 10.6542 69.228 13.4696C66.3679 16.2851 63.4725 19.7873 61.2898 23.1319C59.1071 26.4789 56.9761 29.4896 56.1293 33.5469C55.285 37.6043 54.577 45.2132 56.2117 47.4759C57.8487 49.7409 64.2675 47.3418 65.9445 47.1301" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
+<path d="M140.37 54.8958C137.884 58.1322 127.704 71.2286 125.185 74.5427M139.697 54.209C137.098 57.5466 127.005 71.7884 124.51 75.3565" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
+<path d="M141.663 63.1765C139.661 66.0413 131.311 77.1501 129.077 79.9726M141.065 62.5908C139.021 65.2792 130.631 76.1364 128.717 78.8625" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
+<path d="M141.888 72.9917C139.475 75.8589 130.268 86.8478 127.966 89.7455M141.02 72.726C138.503 75.6496 129.775 87.2476 127.58 90.3242" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
+<path d="M141.948 82.215C139.815 85.1057 130.308 96.8214 127.961 99.7709M141.459 81.7375C139.298 84.4119 129.816 95.9888 127.479 98.8606" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
+<path d="M141.357 91.7838C138.885 95.2484 128.808 108.535 126.428 111.76M142.474 91.4757C139.917 94.7921 128.38 107.493 125.781 110.883" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
+<path d="M142.568 101.479C140.028 104.403 129.867 115.528 127.195 118.356M141.811 101.018C139.212 104.055 129.477 115.975 126.828 118.97" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
+<path d="M141.023 112.172C138.591 114.775 128.028 125.905 125.422 128.664M140.51 113.465C138.008 116.147 127.36 125.233 124.742 127.582" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
+<path d="M139.004 123.69C136.501 126.275 125.952 137.248 123.287 140.108M138.343 124.817C135.805 127.454 125.487 138.261 122.848 140.75" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
+<path d="M132.192 139.862C129.854 141.624 120.87 148.168 118.574 150.012M131.39 139.496C128.97 141.333 120.524 148.89 118.322 150.621" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M82.6351 92.3124L78.2767 89.0148L78.6718 88.8784L75.6282 79.6865L74.4922 76.0525L75.0379 74.1074L78.6248 69.5444L83.6182 65.186L86.6924 64.0711L93.7768 63.9864L99.9181 63.9276L103.905 64.4215L106.038 66.068L109.333 67.6392L110.251 69.4479L112.438 73.1877L112.702 81.928L111.674 82.93L110.907 85.5573L107.828 89.2336L101.273 92.9193L102.785 120.401L99.5488 125.521L98.0059 127.838L96.1313 129.414L93.17 130.237L92.2198 130.033L90.1358 129.233L88.8328 126.594L87.8378 95.2549L88.9386 93.3215L86.0409 91.294L80.9533 91.1552" fill="white"/>
+<path d="M82.8214 92.0607C82.0664 91.4327 79.291 90.7201 77.8539 88.2033C76.4167 85.6866 73.5284 80.4438 74.1964 76.9581C74.862 73.4723 78.6959 69.6384 81.8524 67.2887C85.0089 64.939 88.9227 63.1138 93.1353 62.8574C97.3478 62.6034 103.957 63.9888 107.132 65.7575C110.31 67.5263 111.416 70.5651 112.196 73.4747C112.977 76.3842 112.606 80.6626 111.82 83.2122C111.035 85.7642 109.078 87.1661 107.481 88.7749C105.883 90.3837 103.106 91.2751 102.233 92.8651C101.363 94.4551 102.327 95.3254 102.25 98.3125C102.172 101.3 101.76 107.227 101.767 110.788C101.772 114.349 102.487 116.981 102.285 119.676C102.085 122.374 101.52 125.126 100.556 126.965C99.5917 128.805 98.077 130.256 96.5011 130.715C94.9275 131.171 92.4485 130.36 91.1101 129.713C89.7742 129.066 89.0144 128.341 88.4805 126.836C87.9489 125.331 87.9678 123.964 87.9137 120.681C87.8596 117.397 88.1159 111.599 88.1583 107.14C88.203 102.68 89.2779 96.445 88.1724 93.9236C87.0693 91.4022 82.7791 92.4347 81.5325 92.0137M82.0194 91.6068C81.222 90.7624 78.4536 89.7886 77.3623 87.1567C76.2733 84.5247 74.6621 79.3125 75.4783 75.815C76.2921 72.3151 79.1428 68.3166 82.2522 66.1597C85.3617 64.0029 90.1693 63.062 94.1302 62.8739C98.0911 62.6857 102.925 63.0832 106.02 65.0331C109.118 66.9853 111.834 71.5836 112.705 74.5801C113.572 77.5743 111.949 80.7731 111.234 83.0076C110.519 85.2444 109.835 86.3711 108.417 87.9916C107.001 89.6146 103.738 90.9623 102.732 92.7358C101.725 94.5092 102.351 95.6382 102.377 98.6301C102.405 101.62 102.866 106.949 102.894 110.682C102.922 114.417 102.955 118.291 102.544 121.038C102.13 123.783 101.408 125.54 100.42 127.161C99.4318 128.781 98.1005 130.233 96.6163 130.759C95.1322 131.286 92.9353 130.893 91.51 130.322C90.0846 129.753 88.7769 128.889 88.0618 127.335C87.3468 125.78 87.0128 124.317 87.2198 120.998C87.4268 117.68 89.0874 112.046 89.299 107.422C89.5107 102.798 89.8494 95.9322 88.4946 93.2509C87.1398 90.5695 82.4804 91.4845 81.1679 91.3316" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
+<path d="M28.1943 139.31C26.7936 139.432 25.332 140.402 23.8703 140.523C23.1395 140.766 22.5914 140.16 21.9824 139.735C21.5561 139.553 21.008 138.461 20.8253 138.219C20.5817 136.884 19.9118 134.276 20.0336 133.002C19.7291 131.364 21.5561 129.787 23.0786 129.727C23.2613 129.727 23.8094 129.787 23.8703 129.787C25.7583 130.151 27.5853 131.546 29.5341 131.728C29.595 131.728 29.6559 131.728 29.6559 131.668C30.4476 130.333 30.204 126.937 30.813 125.542C30.813 125.36 31.1784 123.54 31.1784 123.237C31.6048 122.327 32.1529 121.781 33.1273 122.084C33.7972 122.266 34.6498 122.388 34.6498 123.237V128.635C34.8325 129.242 36.1114 128.999 36.5986 128.999C38.7911 128.028 40.8617 127.422 43.3586 127.058C45.6729 127.179 46.7082 129.242 46.5864 131.304C46.6473 132.396 45.4293 133.245 44.6985 133.973C44.4549 134.094 43.4804 134.519 43.115 134.397C42.2624 133.791 41.1662 134.033 40.1309 134.094C40.1309 134.155 40.0091 134.337 40.07 134.397C41.288 135.853 43.5413 136.096 45.0639 137.066C46.1601 138.34 47.4999 138.643 47.1345 140.341C47.0736 141.191 47.1345 142.1 46.221 142.404C45.9774 142.586 44.5767 142.828 44.2722 142.828C43.9677 142.768 43.3586 142.343 43.115 142.04C40.9835 141.13 38.6693 140.402 36.2332 140.159V145.133C35.9896 146.468 35.6851 147.923 34.6498 148.955C34.2844 149.015 33.1273 149.015 32.7619 148.955C32.4574 148.773 31.4221 147.741 31.1784 147.438C30.5694 145.133 30.4476 142.404 29.6559 140.159C29.1687 139.553 28.986 139.25 28.1943 139.31Z" fill="#6965DB"/>
+<path d="M59.5964 139.31C58.1956 139.432 56.734 140.402 55.2724 140.523C54.5416 140.766 53.9935 140.16 53.3845 139.735C52.9582 139.553 52.41 138.461 52.2273 138.219C51.9837 136.884 51.3138 134.276 51.4356 133.002C51.1311 131.364 52.9582 129.787 54.4807 129.727C54.6634 129.727 55.2115 129.787 55.2724 129.787C57.1603 130.151 58.9874 131.546 60.9362 131.728C60.9971 131.728 61.058 131.728 61.058 131.668C61.8497 130.333 61.6061 126.937 62.2151 125.542C62.2151 125.36 62.5805 123.54 62.5805 123.237C63.0068 122.327 63.5549 121.781 64.5293 122.084C65.1992 122.266 66.0519 122.388 66.0519 123.237V128.635C66.2346 129.242 67.5135 128.999 68.0007 128.999C70.1931 128.028 72.2638 127.422 74.7607 127.058C77.0749 127.179 78.1103 129.242 77.9885 131.304C78.0494 132.396 76.8313 133.245 76.1005 133.973C75.8569 134.094 74.8825 134.519 74.5171 134.397C73.6645 133.791 72.5683 134.033 71.5329 134.094C71.5329 134.155 71.4112 134.337 71.4721 134.397C72.6901 135.853 74.9434 136.096 76.4659 137.066C77.5621 138.34 78.902 138.643 78.5366 140.341C78.4757 141.191 78.5366 142.1 77.623 142.404C77.3794 142.586 75.9787 142.828 75.6742 142.828C75.3697 142.768 74.7607 142.343 74.5171 142.04C72.3856 141.13 70.0713 140.402 67.6353 140.159V145.133C67.3917 146.468 67.0872 147.923 66.0519 148.955C65.6865 149.015 64.5293 149.015 64.1639 148.955C63.8594 148.773 62.8241 147.741 62.5805 147.438C61.9715 145.133 61.8497 142.404 61.058 140.159C60.5708 139.553 60.3881 139.25 59.5964 139.31Z" fill="#6965DB"/>
+<path d="M90.9984 139.31C89.5977 139.432 88.1361 140.402 86.6745 140.523C85.9436 140.766 85.3955 140.16 84.7865 139.735C84.3602 139.553 83.8121 138.461 83.6294 138.219C83.3858 136.884 82.7159 134.276 82.8377 133.002C82.5332 131.364 84.3602 129.787 85.8827 129.727C86.0654 129.727 86.6136 129.787 86.6745 129.787C88.5624 130.151 90.3894 131.546 92.3382 131.728C92.3991 131.728 92.46 131.728 92.46 131.668C93.2518 130.333 93.0082 126.937 93.6172 125.542C93.6172 125.36 93.9826 123.54 93.9826 123.237C94.4089 122.327 94.957 121.781 95.9314 122.084C96.6013 122.266 97.4539 122.388 97.4539 123.237V128.635C97.6366 129.242 98.9155 128.999 99.4028 128.999C101.595 128.028 103.666 127.422 106.163 127.058C108.477 127.179 109.512 129.242 109.391 131.304C109.451 132.396 108.233 133.245 107.503 133.973C107.259 134.094 106.285 134.519 105.919 134.397C105.067 133.791 103.97 134.033 102.935 134.094C102.935 134.155 102.813 134.337 102.874 134.397C104.092 135.853 106.345 136.096 107.868 137.066C108.964 138.34 110.304 138.643 109.939 140.341C109.878 141.191 109.939 142.1 109.025 142.404C108.782 142.586 107.381 142.828 107.076 142.828C106.772 142.768 106.163 142.343 105.919 142.04C103.788 141.13 101.473 140.402 99.0373 140.159V145.133C98.7937 146.468 98.4892 147.923 97.4539 148.955C97.0885 149.015 95.9314 149.015 95.566 148.955C95.2615 148.773 94.2262 147.741 93.9826 147.438C93.3736 145.133 93.2518 142.404 92.46 140.159C91.9728 139.553 91.7901 139.25 90.9984 139.31Z" fill="#6965DB"/>
+</svg>
diff --git a/src/charts.ts b/src/charts.ts
index e8980db6c..d22da4329 100644
--- a/src/charts.ts
+++ b/src/charts.ts
@@ -1,4 +1,8 @@
-import colors from "./colors";
+import {
+  COLOR_PALETTE,
+  DEFAULT_CHART_COLOR_INDEX,
+  getAllColorsSpecificShade,
+} from "./colors";
 import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
@@ -158,10 +162,7 @@ export const tryParseSpreadsheet = (text: string): ParseSpreadsheetResult => {
   return result;
 };
 
-const bgColors = colors.elementBackground.slice(
-  2,
-  colors.elementBackground.length,
-);
+const bgColors = getAllColorsSpecificShade(DEFAULT_CHART_COLOR_INDEX);
 
 // Put all the common properties here so when the whole chart is selected
 // the properties dialog shows the correct selected values
@@ -171,7 +172,7 @@ const commonProps = {
   fontSize: DEFAULT_FONT_SIZE,
   opacity: 100,
   roughness: 1,
-  strokeColor: colors.elementStroke[0],
+  strokeColor: COLOR_PALETTE.black,
   roundness: null,
   strokeStyle: "solid",
   strokeWidth: 1,
@@ -179,7 +180,7 @@ const commonProps = {
   locked: false,
 } as const;
 
-const getChartDimentions = (spreadsheet: Spreadsheet) => {
+const getChartDimensions = (spreadsheet: Spreadsheet) => {
   const chartWidth =
     (BAR_WIDTH + BAR_GAP) * spreadsheet.values.length + BAR_GAP;
   const chartHeight = BAR_HEIGHT + BAR_GAP * 2;
@@ -249,7 +250,7 @@ const chartLines = (
   groupId: string,
   backgroundColor: string,
 ): ChartElements => {
-  const { chartWidth, chartHeight } = getChartDimentions(spreadsheet);
+  const { chartWidth, chartHeight } = getChartDimensions(spreadsheet);
   const xLine = newLinearElement({
     backgroundColor,
     groupIds: [groupId],
@@ -312,7 +313,7 @@ const chartBaseElements = (
   backgroundColor: string,
   debug?: boolean,
 ): ChartElements => {
-  const { chartWidth, chartHeight } = getChartDimentions(spreadsheet);
+  const { chartWidth, chartHeight } = getChartDimensions(spreadsheet);
 
   const title = spreadsheet.title
     ? newTextElement({
@@ -323,7 +324,6 @@ const chartBaseElements = (
         x: x + chartWidth / 2,
         y: y - BAR_HEIGHT - BAR_GAP * 2 - DEFAULT_FONT_SIZE,
         roundness: null,
-        strokeStyle: "solid",
         textAlign: "center",
       })
     : null;
@@ -338,7 +338,7 @@ const chartBaseElements = (
         y: y - chartHeight,
         width: chartWidth,
         height: chartHeight,
-        strokeColor: colors.elementStroke[0],
+        strokeColor: COLOR_PALETTE.black,
         fillStyle: "solid",
         opacity: 6,
       })
diff --git a/src/clients.ts b/src/clients.ts
index 9e1e6e144..354098918 100644
--- a/src/clients.ts
+++ b/src/clients.ts
@@ -1,28 +1,40 @@
-import colors from "./colors";
-import { AppState } from "./types";
-
-export const getClientColors = (clientId: string, appState: AppState) => {
-  if (appState?.collaborators) {
-    const currentUser = appState.collaborators.get(clientId);
-    if (currentUser?.color) {
-      return currentUser.color;
-    }
+function hashToInteger(id: string) {
+  let hash = 0;
+  if (id.length === 0) {
+    return hash;
   }
-  // Naive way of getting an integer out of the clientId
-  const sum = clientId.split("").reduce((a, str) => a + str.charCodeAt(0), 0);
+  for (let i = 0; i < id.length; i++) {
+    const char = id.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+  }
+  return hash;
+}
 
-  // Skip transparent & gray colors
-  const backgrounds = colors.elementBackground.slice(3);
-  const strokes = colors.elementStroke.slice(3);
-  return {
-    background: backgrounds[sum % backgrounds.length],
-    stroke: strokes[sum % strokes.length],
-  };
+export const getClientColor = (
+  /**
+   * any uniquely identifying key, such as user id or socket id
+   */
+  id: string,
+) => {
+  // to get more even distribution in case `id` is not uniformly distributed to
+  // begin with, we hash it
+  const hash = Math.abs(hashToInteger(id));
+  // we want to get a multiple of 10 number in the range of 0-360 (in other
+  // words a hue value of step size 10). There are 37 such values including 0.
+  const hue = (hash % 37) * 10;
+  const saturation = 100;
+  const lightness = 83;
+
+  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
 };
 
-export const getClientInitials = (userName?: string | null) => {
-  if (!userName?.trim()) {
-    return "?";
-  }
-  return userName.trim()[0].toUpperCase();
+/**
+ * returns first char, capitalized
+ */
+export const getNameInitial = (name?: string | null) => {
+  // first char can be a surrogate pair, hence using codePointAt
+  const firstCodePoint = name?.trim()?.codePointAt(0);
+  return (
+    firstCodePoint ? String.fromCodePoint(firstCodePoint) : "?"
+  ).toUpperCase();
 };
diff --git a/src/clipboard.ts b/src/clipboard.ts
index 5f7950c53..c13829b6a 100644
--- a/src/clipboard.ts
+++ b/src/clipboard.ts
@@ -2,12 +2,15 @@ import {
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
 } from "./element/types";
-import { AppState, BinaryFiles } from "./types";
+import { BinaryFiles } from "./types";
 import { SVG_EXPORT_TAG } from "./scene/export";
 import { tryParseSpreadsheet, Spreadsheet, VALID_SPREADSHEET } from "./charts";
 import { EXPORT_DATA_TYPES, MIME_TYPES } from "./constants";
 import { isInitializedImageElement } from "./element/typeChecks";
-import { isPromiseLike } from "./utils";
+import { deepCopyElement } from "./element/newElement";
+import { mutateElement } from "./element/mutateElement";
+import { getContainingFrame } from "./frame";
+import { isPromiseLike, isTestEnv } from "./utils";
 
 type ElementsClipboard = {
   type: typeof EXPORT_DATA_TYPES.excalidrawClipboard;
@@ -55,24 +58,56 @@ const clipboardContainsElements = (
 
 export const copyToClipboard = async (
   elements: readonly NonDeletedExcalidrawElement[],
-  appState: AppState,
   files: BinaryFiles | null,
 ) => {
+  const framesToCopy = new Set(
+    elements.filter((element) => element.type === "frame"),
+  );
+  let foundFile = false;
+
+  const _files = elements.reduce((acc, element) => {
+    if (isInitializedImageElement(element)) {
+      foundFile = true;
+      if (files && files[element.fileId]) {
+        acc[element.fileId] = files[element.fileId];
+      }
+    }
+    return acc;
+  }, {} as BinaryFiles);
+
+  if (foundFile && !files) {
+    console.warn(
+      "copyToClipboard: attempting to file element(s) without providing associated `files` object.",
+    );
+  }
+
   // select binded text elements when copying
   const contents: ElementsClipboard = {
     type: EXPORT_DATA_TYPES.excalidrawClipboard,
-    elements,
-    files: files
-      ? elements.reduce((acc, element) => {
-          if (isInitializedImageElement(element) && files[element.fileId]) {
-            acc[element.fileId] = files[element.fileId];
-          }
-          return acc;
-        }, {} as BinaryFiles)
-      : undefined,
+    elements: elements.map((element) => {
+      if (
+        getContainingFrame(element) &&
+        !framesToCopy.has(getContainingFrame(element)!)
+      ) {
+        const copiedElement = deepCopyElement(element);
+        mutateElement(copiedElement, {
+          frameId: null,
+        });
+        return copiedElement;
+      }
+
+      return element;
+    }),
+    files: files ? _files : undefined,
   };
   const json = JSON.stringify(contents);
+
+  if (isTestEnv()) {
+    return json;
+  }
+
   CLIPBOARD = json;
+
   try {
     PREFER_APP_CLIPBOARD = false;
     await copyTextToSystemClipboard(json);
diff --git a/src/colors.ts b/src/colors.ts
index 63cd72839..7da128399 100644
--- a/src/colors.ts
+++ b/src/colors.ts
@@ -1,22 +1,170 @@
 import oc from "open-color";
+import { Merge } from "./utility-types";
 
-const shades = (index: number) => [
-  oc.red[index],
-  oc.pink[index],
-  oc.grape[index],
-  oc.violet[index],
-  oc.indigo[index],
-  oc.blue[index],
-  oc.cyan[index],
-  oc.teal[index],
-  oc.green[index],
-  oc.lime[index],
-  oc.yellow[index],
-  oc.orange[index],
-];
-
-export default {
-  canvasBackground: [oc.white, oc.gray[0], oc.gray[1], ...shades(0)],
-  elementBackground: ["transparent", oc.gray[4], oc.gray[6], ...shades(6)],
-  elementStroke: [oc.black, oc.gray[8], oc.gray[7], ...shades(9)],
+// FIXME can't put to utils.ts rn because of circular dependency
+const pick = <R extends Record<string, any>, K extends readonly (keyof R)[]>(
+  source: R,
+  keys: K,
+) => {
+  return keys.reduce((acc, key: K[number]) => {
+    if (key in source) {
+      acc[key] = source[key];
+    }
+    return acc;
+  }, {} as Pick<R, K[number]>) as Pick<R, K[number]>;
 };
+
+export type ColorPickerColor =
+  | Exclude<keyof oc, "indigo" | "lime">
+  | "transparent"
+  | "bronze";
+export type ColorTuple = readonly [string, string, string, string, string];
+export type ColorPalette = Merge<
+  Record<ColorPickerColor, ColorTuple>,
+  { black: string; white: string; transparent: string }
+>;
+
+// used general type instead of specific type (ColorPalette) to support custom colors
+export type ColorPaletteCustom = { [key: string]: ColorTuple | string };
+export type ColorShadesIndexes = [number, number, number, number, number];
+
+export const MAX_CUSTOM_COLORS_USED_IN_CANVAS = 5;
+export const COLORS_PER_ROW = 5;
+
+export const DEFAULT_CHART_COLOR_INDEX = 4;
+
+export const DEFAULT_ELEMENT_STROKE_COLOR_INDEX = 4;
+export const DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX = 1;
+export const ELEMENTS_PALETTE_SHADE_INDEXES = [0, 2, 4, 6, 8] as const;
+export const CANVAS_PALETTE_SHADE_INDEXES = [0, 1, 2, 3, 4] as const;
+
+export const getSpecificColorShades = (
+  color: Exclude<
+    ColorPickerColor,
+    "transparent" | "white" | "black" | "bronze"
+  >,
+  indexArr: Readonly<ColorShadesIndexes>,
+) => {
+  return indexArr.map((index) => oc[color][index]) as any as ColorTuple;
+};
+
+export const COLOR_PALETTE = {
+  transparent: "transparent",
+  black: "#1e1e1e",
+  white: "#ffffff",
+  // open-colors
+  gray: getSpecificColorShades("gray", ELEMENTS_PALETTE_SHADE_INDEXES),
+  red: getSpecificColorShades("red", ELEMENTS_PALETTE_SHADE_INDEXES),
+  pink: getSpecificColorShades("pink", ELEMENTS_PALETTE_SHADE_INDEXES),
+  grape: getSpecificColorShades("grape", ELEMENTS_PALETTE_SHADE_INDEXES),
+  violet: getSpecificColorShades("violet", ELEMENTS_PALETTE_SHADE_INDEXES),
+  blue: getSpecificColorShades("blue", ELEMENTS_PALETTE_SHADE_INDEXES),
+  cyan: getSpecificColorShades("cyan", ELEMENTS_PALETTE_SHADE_INDEXES),
+  teal: getSpecificColorShades("teal", ELEMENTS_PALETTE_SHADE_INDEXES),
+  green: getSpecificColorShades("green", ELEMENTS_PALETTE_SHADE_INDEXES),
+  yellow: getSpecificColorShades("yellow", ELEMENTS_PALETTE_SHADE_INDEXES),
+  orange: getSpecificColorShades("orange", ELEMENTS_PALETTE_SHADE_INDEXES),
+  // radix bronze shades 3,5,7,9,11
+  bronze: ["#f8f1ee", "#eaddd7", "#d2bab0", "#a18072", "#846358"],
+} as ColorPalette;
+
+const COMMON_ELEMENT_SHADES = pick(COLOR_PALETTE, [
+  "cyan",
+  "blue",
+  "violet",
+  "grape",
+  "pink",
+  "green",
+  "teal",
+  "yellow",
+  "orange",
+  "red",
+]);
+
+// -----------------------------------------------------------------------------
+// quick picks defaults
+// -----------------------------------------------------------------------------
+
+// ORDER matters for positioning in quick picker
+export const DEFAULT_ELEMENT_STROKE_PICKS = [
+  COLOR_PALETTE.black,
+  COLOR_PALETTE.red[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
+  COLOR_PALETTE.green[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
+  COLOR_PALETTE.blue[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
+  COLOR_PALETTE.yellow[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
+] as ColorTuple;
+
+// ORDER matters for positioning in quick picker
+export const DEFAULT_ELEMENT_BACKGROUND_PICKS = [
+  COLOR_PALETTE.transparent,
+  COLOR_PALETTE.red[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
+  COLOR_PALETTE.green[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
+  COLOR_PALETTE.blue[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
+  COLOR_PALETTE.yellow[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
+] as ColorTuple;
+
+// ORDER matters for positioning in quick picker
+export const DEFAULT_CANVAS_BACKGROUND_PICKS = [
+  COLOR_PALETTE.white,
+  // radix slate2
+  "#f8f9fa",
+  // radix blue2
+  "#f5faff",
+  // radix yellow2
+  "#fffce8",
+  // radix bronze2
+  "#fdf8f6",
+] as ColorTuple;
+
+// -----------------------------------------------------------------------------
+// palette defaults
+// -----------------------------------------------------------------------------
+
+export const DEFAULT_ELEMENT_STROKE_COLOR_PALETTE = {
+  // 1st row
+  transparent: COLOR_PALETTE.transparent,
+  white: COLOR_PALETTE.white,
+  gray: COLOR_PALETTE.gray,
+  black: COLOR_PALETTE.black,
+  bronze: COLOR_PALETTE.bronze,
+  // rest
+  ...COMMON_ELEMENT_SHADES,
+} as const;
+
+// ORDER matters for positioning in pallete (5x3 grid)s
+export const DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE = {
+  transparent: COLOR_PALETTE.transparent,
+  white: COLOR_PALETTE.white,
+  gray: COLOR_PALETTE.gray,
+  black: COLOR_PALETTE.black,
+  bronze: COLOR_PALETTE.bronze,
+
+  ...COMMON_ELEMENT_SHADES,
+} as const;
+
+// -----------------------------------------------------------------------------
+// helpers
+// -----------------------------------------------------------------------------
+
+// !!!MUST BE WITHOUT GRAY, TRANSPARENT AND BLACK!!!
+export const getAllColorsSpecificShade = (index: 0 | 1 | 2 | 3 | 4) =>
+  [
+    // 2nd row
+    COLOR_PALETTE.cyan[index],
+    COLOR_PALETTE.blue[index],
+    COLOR_PALETTE.violet[index],
+    COLOR_PALETTE.grape[index],
+    COLOR_PALETTE.pink[index],
+
+    // 3rd row
+    COLOR_PALETTE.green[index],
+    COLOR_PALETTE.teal[index],
+    COLOR_PALETTE.yellow[index],
+    COLOR_PALETTE.orange[index],
+    COLOR_PALETTE.red[index],
+  ] as const;
+
+export const rgbToHex = (r: number, g: number, b: number) =>
+  `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+
+// -----------------------------------------------------------------------------
diff --git a/src/components/Actions.tsx b/src/components/Actions.tsx
index 3bbc0ff1a..594951ae1 100644
--- a/src/components/Actions.tsx
+++ b/src/components/Actions.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { ActionManager } from "../actions/manager";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement, PointerType } from "../element/types";
@@ -14,7 +14,7 @@ import {
   hasText,
 } from "../scene";
 import { SHAPES } from "../shapes";
-import { AppState, Zoom } from "../types";
+import { UIAppState, Zoom } from "../types";
 import {
   capitalizeString,
   isTransparent,
@@ -28,19 +28,23 @@ import { trackEvent } from "../analytics";
 import { hasBoundTextElement } from "../element/typeChecks";
 import clsx from "clsx";
 import { actionToggleZenMode } from "../actions";
-import "./Actions.scss";
 import { Tooltip } from "./Tooltip";
 import {
   shouldAllowVerticalAlign,
   suppportsHorizontalAlign,
 } from "../element/textElement";
 
+import "./Actions.scss";
+import DropdownMenu from "./dropdownMenu/DropdownMenu";
+import { extraToolsIcon, frameToolIcon } from "./icons";
+import { KEYS } from "../keys";
+
 export const SelectedShapeActions = ({
   appState,
   elements,
   renderAction,
 }: {
-  appState: AppState;
+  appState: UIAppState;
   elements: readonly ExcalidrawElement[];
   renderAction: ActionManager["renderAction"];
 }) => {
@@ -88,7 +92,8 @@ export const SelectedShapeActions = ({
       <div>
         {((hasStrokeColor(appState.activeTool.type) &&
           appState.activeTool.type !== "image" &&
-          commonSelectedType !== "image") ||
+          commonSelectedType !== "image" &&
+          commonSelectedType !== "frame") ||
           targetElements.some((element) => hasStrokeColor(element.type))) &&
           renderAction("changeStrokeColor")}
       </div>
@@ -215,32 +220,82 @@ export const ShapesSwitcher = ({
   appState,
 }: {
   canvas: HTMLCanvasElement | null;
-  activeTool: AppState["activeTool"];
-  setAppState: React.Component<any, AppState>["setState"];
+  activeTool: UIAppState["activeTool"];
+  setAppState: React.Component<any, UIAppState>["setState"];
   onImageAction: (data: { pointerType: PointerType | null }) => void;
-  appState: AppState;
-}) => (
-  <>
-    {SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {
-      const label = t(`toolBar.${value}`);
-      const letter =
-        key && capitalizeString(typeof key === "string" ? key : key[0]);
-      const shortcut = letter
-        ? `${letter} ${t("helpDialog.or")} ${numericKey}`
-        : `${numericKey}`;
-      return (
+  appState: UIAppState;
+}) => {
+  const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = useState(false);
+  const device = useDevice();
+  return (
+    <>
+      {SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {
+        const label = t(`toolBar.${value}`);
+        const letter =
+          key && capitalizeString(typeof key === "string" ? key : key[0]);
+        const shortcut = letter
+          ? `${letter} ${t("helpDialog.or")} ${numericKey}`
+          : `${numericKey}`;
+        return (
+          <ToolButton
+            className={clsx("Shape", { fillable })}
+            key={value}
+            type="radio"
+            icon={icon}
+            checked={activeTool.type === value}
+            name="editor-current-shape"
+            title={`${capitalizeString(label)} — ${shortcut}`}
+            keyBindingLabel={numericKey || letter}
+            aria-label={capitalizeString(label)}
+            aria-keyshortcuts={shortcut}
+            data-testid={`toolbar-${value}`}
+            onPointerDown={({ pointerType }) => {
+              if (!appState.penDetected && pointerType === "pen") {
+                setAppState({
+                  penDetected: true,
+                  penMode: true,
+                });
+              }
+            }}
+            onChange={({ pointerType }) => {
+              if (appState.activeTool.type !== value) {
+                trackEvent("toolbar", value, "ui");
+              }
+              const nextActiveTool = updateActiveTool(appState, {
+                type: value,
+              });
+              setAppState({
+                activeTool: nextActiveTool,
+                multiElement: null,
+                selectedElementIds: {},
+              });
+              setCursorForShape(canvas, {
+                ...appState,
+                activeTool: nextActiveTool,
+              });
+              if (value === "image") {
+                onImageAction({ pointerType });
+              }
+            }}
+          />
+        );
+      })}
+      <div className="App-toolbar__divider" />
+      {/* TEMP HACK because dropdown doesn't work well inside mobile toolbar */}
+      {device.isMobile ? (
         <ToolButton
-          className={clsx("Shape", { fillable })}
-          key={value}
+          className={clsx("Shape", { fillable: false })}
           type="radio"
-          icon={icon}
-          checked={activeTool.type === value}
+          icon={frameToolIcon}
+          checked={activeTool.type === "frame"}
           name="editor-current-shape"
-          title={`${capitalizeString(label)} — ${shortcut}`}
-          keyBindingLabel={numericKey || letter}
-          aria-label={capitalizeString(label)}
-          aria-keyshortcuts={shortcut}
-          data-testid={`toolbar-${value}`}
+          title={`${capitalizeString(
+            t("toolBar.frame"),
+          )} — ${KEYS.F.toLocaleUpperCase()}`}
+          keyBindingLabel={KEYS.F.toLocaleUpperCase()}
+          aria-label={capitalizeString(t("toolBar.frame"))}
+          aria-keyshortcuts={KEYS.F.toLocaleUpperCase()}
+          data-testid={`toolbar-frame`}
           onPointerDown={({ pointerType }) => {
             if (!appState.penDetected && pointerType === "pen") {
               setAppState({
@@ -250,30 +305,54 @@ export const ShapesSwitcher = ({
             }
           }}
           onChange={({ pointerType }) => {
-            if (appState.activeTool.type !== value) {
-              trackEvent("toolbar", value, "ui");
-            }
+            trackEvent("toolbar", "frame", "ui");
             const nextActiveTool = updateActiveTool(appState, {
-              type: value,
+              type: "frame",
             });
             setAppState({
               activeTool: nextActiveTool,
               multiElement: null,
               selectedElementIds: {},
             });
-            setCursorForShape(canvas, {
-              ...appState,
-              activeTool: nextActiveTool,
-            });
-            if (value === "image") {
-              onImageAction({ pointerType });
-            }
           }}
         />
-      );
-    })}
-  </>
-);
+      ) : (
+        <DropdownMenu open={isExtraToolsMenuOpen}>
+          <DropdownMenu.Trigger
+            className="App-toolbar__extra-tools-trigger"
+            onToggle={() => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen)}
+            title={t("toolBar.extraTools")}
+          >
+            {extraToolsIcon}
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content
+            onClickOutside={() => setIsExtraToolsMenuOpen(false)}
+            onSelect={() => setIsExtraToolsMenuOpen(false)}
+            className="App-toolbar__extra-tools-dropdown"
+          >
+            <DropdownMenu.Item
+              onSelect={() => {
+                const nextActiveTool = updateActiveTool(appState, {
+                  type: "frame",
+                });
+                setAppState({
+                  activeTool: nextActiveTool,
+                  multiElement: null,
+                  selectedElementIds: {},
+                });
+              }}
+              icon={frameToolIcon}
+              shortcut={KEYS.F.toLocaleUpperCase()}
+              data-testid="toolbar-frame"
+            >
+              {t("toolBar.frame")}
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu>
+      )}
+    </>
+  );
+};
 
 export const ZoomActions = ({
   renderAction,
diff --git a/src/components/App.tsx b/src/components/App.tsx
index be5561995..7f2c98e50 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -33,7 +33,7 @@ import {
   actionBindText,
   actionUngroup,
   actionLink,
-  actionToggleLock,
+  actionToggleElementLock,
   actionToggleLinearEditor,
 } from "../actions";
 import { createRedoAction, createUndoAction } from "../actions/actionHistory";
@@ -59,7 +59,10 @@ import {
   ELEMENT_TRANSLATE_AMOUNT,
   ENV,
   EVENT,
+  FRAME_STYLE,
+  EXPORT_IMAGE_TYPES,
   GRID_SIZE,
+  IMAGE_MIME_TYPES,
   IMAGE_RENDER_TIMEOUT,
   isAndroid,
   isBrave,
@@ -77,11 +80,12 @@ import {
   TAP_TWICE_TIMEOUT,
   TEXT_TO_CENTER_SNAP_THRESHOLD,
   THEME,
+  THEME_FILTER,
   TOUCH_CTX_MENU_TIMEOUT,
   VERTICAL_ALIGN,
   ZOOM_STEP,
 } from "../constants";
-import { loadFromBlob } from "../data";
+import { exportCanvas, loadFromBlob } from "../data";
 import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
 import { restore, restoreElements } from "../data/restore";
 import {
@@ -130,6 +134,7 @@ import { mutateElement, newElementWith } from "../element/mutateElement";
 import {
   deepCopyElement,
   duplicateElements,
+  newFrameElement,
   newFreeDrawElement,
 } from "../element/newElement";
 import {
@@ -138,6 +143,7 @@ import {
   isBindingElement,
   isBindingElementType,
   isBoundToContainer,
+  isFrameElement,
   isImageElement,
   isInitializedImageElement,
   isLinearElement,
@@ -157,6 +163,7 @@ import {
   FileId,
   NonDeletedExcalidrawElement,
   ExcalidrawTextContainer,
+  ExcalidrawFrameElement,
 } from "../element/types";
 import { getCenter, getDistance } from "../gesture";
 import {
@@ -179,7 +186,7 @@ import {
   KEYS,
 } from "../keys";
 import { distance2d, getGridPoint, isPathALoop } from "../math";
-import { renderScene } from "../renderer/renderScene";
+import { isVisibleElement, renderScene } from "../renderer/renderScene";
 import { invalidateShapeForElement } from "../renderer/renderElement";
 import {
   calculateScrollCenter,
@@ -209,6 +216,9 @@ import {
   PointerDownState,
   SceneData,
   Device,
+  FrameNameBoundsCache,
+  SidebarName,
+  SidebarTabName,
 } from "../types";
 import {
   debounce,
@@ -234,6 +244,8 @@ import {
   getShortcutKey,
   isTransparent,
   easeToValuesRAF,
+  muteFSAbortError,
+  easeOut,
 } from "../utils";
 import {
   ContextMenu,
@@ -248,6 +260,7 @@ import {
   generateIdFromFile,
   getDataURL,
   getFileFromEvent,
+  isImageFileHandle,
   isSupportedImageFile,
   loadSceneOrLibraryFromBlob,
   normalizeFile,
@@ -279,30 +292,55 @@ import {
 } from "../element/textElement";
 import { isHittingElementNotConsideringBoundingBox } from "../element/collision";
 import {
-  normalizeLink,
   showHyperlinkTooltip,
   hideHyperlinkToolip,
   Hyperlink,
   isPointHittingLinkIcon,
-  isLocalLink,
 } from "../element/Hyperlink";
+import { isLocalLink, normalizeLink } from "../data/url";
 import { shouldShowBoundingBox } from "../element/transformHandles";
+import { actionUnlockAllElements } from "../actions/actionElementLock";
 import { Fonts } from "../scene/Fonts";
+import {
+  getFrameElements,
+  isCursorInFrame,
+  bindElementsToFramesAfterDuplication,
+  addElementsToFrame,
+  replaceAllElementsInFrame,
+  removeElementsFromFrame,
+  getElementsInResizingFrame,
+  getElementsInNewFrame,
+  getContainingFrame,
+  elementOverlapsWithFrame,
+  updateFrameMembershipOfSelectedElements,
+  isElementInFrame,
+} from "../frame";
+import {
+  excludeElementsInFramesFromSelection,
+  makeNextSelectedElementIds,
+} from "../scene/selection";
 import { actionPaste } from "../actions/actionClipboard";
 import {
-  actionToggleHandTool,
-  zoomToFitElements,
-} from "../actions/actionCanvas";
+  actionRemoveAllElementsFromFrame,
+  actionSelectAllElementsInFrame,
+} from "../actions/actionFrame";
+import { actionToggleHandTool, zoomToFit } from "../actions/actionCanvas";
 import { jotaiStore } from "../jotai";
 import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
-import { actionCreateContainerFromText } from "../actions/actionBoundText";
+import { actionWrapTextInContainer } from "../actions/actionBoundText";
 import BraveMeasureTextError from "./BraveMeasureTextError";
+import { activeEyeDropperAtom } from "./EyeDropper";
+import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
+
+const AppContext = React.createContext<AppClassProperties>(null!);
+const AppPropsContext = React.createContext<AppProps>(null!);
 
 const deviceContextInitialValue = {
   isSmScreen: false,
   isMobile: false,
   isTouchScreen: false,
   canDeviceFitSidebar: false,
+  isLandscape: false,
 };
 const DeviceContext = React.createContext<Device>(deviceContextInitialValue);
 DeviceContext.displayName = "DeviceContext";
@@ -339,6 +377,8 @@ const ExcalidrawActionManagerContext = React.createContext<ActionManager>(
 );
 ExcalidrawActionManagerContext.displayName = "ExcalidrawActionManagerContext";
 
+export const useApp = () => useContext(AppContext);
+export const useAppProps = () => useContext(AppPropsContext);
 export const useDevice = () => useContext<Device>(DeviceContext);
 export const useExcalidrawContainer = () =>
   useContext(ExcalidrawContainerContext);
@@ -353,8 +393,6 @@ export const useExcalidrawActionManager = () =>
 
 let didTapTwice: boolean = false;
 let tappedTwiceTimer = 0;
-let cursorX = 0;
-let cursorY = 0;
 let isHoldingSpace: boolean = false;
 let isPanning: boolean = false;
 let isDraggingScrollBar: boolean = false;
@@ -399,7 +437,7 @@ class App extends React.Component<AppProps, AppState> {
   private nearestScrollableContainer: HTMLElement | Document | undefined;
   public library: AppClassProperties["library"];
   public libraryItemsFromStorage: LibraryItems | undefined;
-  private id: string;
+  public id: string;
   private history: History;
   private excalidrawContainerValue: {
     container: HTMLDivElement | null;
@@ -410,9 +448,9 @@ class App extends React.Component<AppProps, AppState> {
   public imageCache: AppClassProperties["imageCache"] = new Map();
 
   hitLinkElement?: NonDeletedExcalidrawElement;
-  lastPointerDown: React.PointerEvent<HTMLCanvasElement> | null = null;
+  lastPointerDown: React.PointerEvent<HTMLElement> | null = null;
   lastPointerUp: React.PointerEvent<HTMLElement> | PointerEvent | null = null;
-  lastScenePointer: { x: number; y: number } | null = null;
+  lastViewportPosition = { x: 0, y: 0 };
 
   constructor(props: AppProps) {
     super(props);
@@ -436,8 +474,6 @@ class App extends React.Component<AppProps, AppState> {
       name,
       width: window.innerWidth,
       height: window.innerHeight,
-      showHyperlinkPopup: false,
-      isSidebarDocked: false,
     };
 
     this.id = nanoid();
@@ -468,7 +504,8 @@ class App extends React.Component<AppProps, AppState> {
         setActiveTool: this.setActiveTool,
         setCursor: this.setCursor,
         resetCursor: this.resetCursor,
-        toggleMenu: this.toggleMenu,
+        updateFrameRendering: this.updateFrameRendering,
+        toggleSidebar: this.toggleSidebar,
       } as const;
       if (typeof excalidrawRef === "function") {
         excalidrawRef(api);
@@ -522,7 +559,9 @@ class App extends React.Component<AppProps, AppState> {
           width={canvasWidth}
           height={canvasHeight}
           ref={this.handleCanvasRef}
-          onContextMenu={this.handleCanvasContextMenu}
+          onContextMenu={(event: React.PointerEvent<HTMLCanvasElement>) =>
+            this.handleCanvasContextMenu(event)
+          }
           onPointerMove={this.handleCanvasPointerMove}
           onPointerUp={this.handleCanvasPointerUp}
           onPointerCancel={this.removePointer}
@@ -543,7 +582,9 @@ class App extends React.Component<AppProps, AppState> {
         width={canvasWidth}
         height={canvasHeight}
         ref={this.handleCanvasRef}
-        onContextMenu={this.handleCanvasContextMenu}
+        onContextMenu={(event: React.PointerEvent<HTMLCanvasElement>) =>
+          this.handleCanvasContextMenu(event)
+        }
         onPointerDown={this.handleCanvasPointerDown}
         onDoubleClick={this.handleCanvasDoubleClick}
         onPointerMove={this.handleCanvasPointerMove}
@@ -556,11 +597,208 @@ class App extends React.Component<AppProps, AppState> {
     );
   }
 
+  private getFrameNameDOMId = (frameElement: ExcalidrawElement) => {
+    return `${this.id}-frame-name-${frameElement.id}`;
+  };
+
+  frameNameBoundsCache: FrameNameBoundsCache = {
+    get: (frameElement) => {
+      let bounds = this.frameNameBoundsCache._cache.get(frameElement.id);
+      if (
+        !bounds ||
+        bounds.zoom !== this.state.zoom.value ||
+        bounds.versionNonce !== frameElement.versionNonce
+      ) {
+        const frameNameDiv = document.getElementById(
+          this.getFrameNameDOMId(frameElement),
+        );
+
+        if (frameNameDiv) {
+          const box = frameNameDiv.getBoundingClientRect();
+          const boxSceneTopLeft = viewportCoordsToSceneCoords(
+            { clientX: box.x, clientY: box.y },
+            this.state,
+          );
+          const boxSceneBottomRight = viewportCoordsToSceneCoords(
+            { clientX: box.right, clientY: box.bottom },
+            this.state,
+          );
+
+          bounds = {
+            x: boxSceneTopLeft.x,
+            y: boxSceneTopLeft.y,
+            width: boxSceneBottomRight.x - boxSceneTopLeft.x,
+            height: boxSceneBottomRight.y - boxSceneTopLeft.y,
+            angle: 0,
+            zoom: this.state.zoom.value,
+            versionNonce: frameElement.versionNonce,
+          };
+
+          this.frameNameBoundsCache._cache.set(frameElement.id, bounds);
+
+          return bounds;
+        }
+        return null;
+      }
+
+      return bounds;
+    },
+    /**
+     * @private
+     */
+    _cache: new Map(),
+  };
+
+  private renderFrameNames = () => {
+    if (!this.state.frameRendering.enabled || !this.state.frameRendering.name) {
+      return null;
+    }
+
+    const isDarkTheme = this.state.theme === "dark";
+
+    return this.scene.getNonDeletedFrames().map((f, index) => {
+      if (
+        !this.canvas ||
+        !isVisibleElement(
+          f,
+          this.canvas.width / window.devicePixelRatio,
+          this.canvas.height / window.devicePixelRatio,
+          {
+            offsetLeft: this.state.offsetLeft,
+            offsetTop: this.state.offsetTop,
+            scrollX: this.state.scrollX,
+            scrollY: this.state.scrollY,
+            zoom: this.state.zoom,
+          },
+        )
+      ) {
+        // if frame not visible, don't render its name
+        return null;
+      }
+
+      const { x: x1, y: y1 } = sceneCoordsToViewportCoords(
+        { sceneX: f.x, sceneY: f.y },
+        this.state,
+      );
+
+      const { x: x2 } = sceneCoordsToViewportCoords(
+        { sceneX: f.x + f.width, sceneY: f.y + f.height },
+        this.state,
+      );
+
+      const FRAME_NAME_GAP = 20;
+      const FRAME_NAME_EDIT_PADDING = 6;
+
+      const reset = () => {
+        if (f.name?.trim() === "") {
+          mutateElement(f, { name: null });
+        }
+
+        this.setState({ editingFrame: null });
+      };
+
+      let frameNameJSX;
+
+      if (f.id === this.state.editingFrame) {
+        const frameNameInEdit = f.name == null ? `Frame ${index + 1}` : f.name;
+
+        frameNameJSX = (
+          <input
+            autoFocus
+            value={frameNameInEdit}
+            onChange={(e) => {
+              mutateElement(f, {
+                name: e.target.value,
+              });
+            }}
+            onBlur={() => reset()}
+            onKeyDown={(event) => {
+              // for some inexplicable reason, `onBlur` triggered on ESC
+              // does not reset `state.editingFrame` despite being called,
+              // and we need to reset it here as well
+              if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) {
+                reset();
+              }
+            }}
+            style={{
+              background: this.state.viewBackgroundColor,
+              filter: isDarkTheme ? THEME_FILTER : "none",
+              zIndex: 2,
+              border: "none",
+              display: "block",
+              padding: `${FRAME_NAME_EDIT_PADDING}px`,
+              borderRadius: 4,
+              boxShadow: "inset 0 0 0 1px var(--color-primary)",
+              fontFamily: "Assistant",
+              fontSize: "14px",
+              transform: `translateY(-${FRAME_NAME_EDIT_PADDING}px)`,
+              color: "var(--color-gray-80)",
+              overflow: "hidden",
+              maxWidth: `${Math.min(
+                x2 - x1 - FRAME_NAME_EDIT_PADDING,
+                document.body.clientWidth - x1 - FRAME_NAME_EDIT_PADDING,
+              )}px`,
+            }}
+            size={frameNameInEdit.length + 1 || 1}
+            dir="auto"
+            autoComplete="off"
+            autoCapitalize="off"
+            autoCorrect="off"
+          />
+        );
+      } else {
+        frameNameJSX =
+          f.name == null || f.name.trim() === ""
+            ? `Frame ${index + 1}`
+            : f.name.trim();
+      }
+
+      return (
+        <div
+          id={this.getFrameNameDOMId(f)}
+          key={f.id}
+          style={{
+            position: "absolute",
+            top: `${y1 - FRAME_NAME_GAP - this.state.offsetTop}px`,
+            left: `${
+              x1 -
+              this.state.offsetLeft -
+              (this.state.editingFrame === f.id ? FRAME_NAME_EDIT_PADDING : 0)
+            }px`,
+            zIndex: 2,
+            fontSize: "14px",
+            color: isDarkTheme
+              ? "var(--color-gray-60)"
+              : "var(--color-gray-50)",
+            width: "max-content",
+            maxWidth: `${x2 - x1 + FRAME_NAME_EDIT_PADDING * 2}px`,
+            overflow: f.id === this.state.editingFrame ? "visible" : "hidden",
+            whiteSpace: "nowrap",
+            textOverflow: "ellipsis",
+            cursor: CURSOR_TYPE.MOVE,
+            // disable all interaction (e.g. cursor change) when in view
+            // mode
+            pointerEvents: this.state.viewModeEnabled ? "none" : "all",
+          }}
+          onPointerDown={(event) => this.handleCanvasPointerDown(event)}
+          onWheel={(event) => this.handleWheel(event)}
+          onContextMenu={(event: React.PointerEvent<HTMLDivElement>) => {
+            this.handleCanvasContextMenu(event);
+          }}
+          onDoubleClick={() => {
+            this.setState({
+              editingFrame: f.id,
+            });
+          }}
+        >
+          {frameNameJSX}
+        </div>
+      );
+    });
+  };
+
   public render() {
-    const selectedElement = getSelectedElements(
-      this.scene.getNonDeletedElements(),
-      this.state,
-    );
+    const selectedElement = this.scene.getSelectedElements(this.state);
     const { renderTopRightUI, renderCustomStats } = this.props;
 
     return (
@@ -576,101 +814,96 @@ class App extends React.Component<AppProps, AppState> {
           this.props.handleKeyboardGlobally ? undefined : this.onKeyDown
         }
       >
-        <ExcalidrawContainerContext.Provider
-          value={this.excalidrawContainerValue}
-        >
-          <DeviceContext.Provider value={this.device}>
-            <ExcalidrawSetAppStateContext.Provider value={this.setAppState}>
-              <ExcalidrawAppStateContext.Provider value={this.state}>
-                <ExcalidrawElementsContext.Provider
-                  value={this.scene.getNonDeletedElements()}
-                >
-                  <ExcalidrawActionManagerContext.Provider
-                    value={this.actionManager}
-                  >
-                    <LayerUI
-                      canvas={this.canvas}
-                      appState={this.state}
-                      files={this.files}
-                      setAppState={this.setAppState}
-                      actionManager={this.actionManager}
-                      elements={this.scene.getNonDeletedElements()}
-                      onLockToggle={this.toggleLock}
-                      onPenModeToggle={this.togglePenMode}
-                      onHandToolToggle={this.onHandToolToggle}
-                      onInsertElements={(elements) =>
-                        this.addElementsFromPasteOrLibrary({
-                          elements,
-                          position: "center",
-                          files: null,
-                        })
-                      }
-                      langCode={getLanguage().code}
-                      renderTopRightUI={renderTopRightUI}
-                      renderCustomStats={renderCustomStats}
-                      renderCustomSidebar={this.props.renderSidebar}
-                      showExitZenModeBtn={
-                        typeof this.props?.zenModeEnabled === "undefined" &&
-                        this.state.zenModeEnabled
-                      }
-                      libraryReturnUrl={this.props.libraryReturnUrl}
-                      UIOptions={this.props.UIOptions}
-                      focusContainer={this.focusContainer}
-                      library={this.library}
-                      id={this.id}
-                      onImageAction={this.onImageAction}
-                      renderWelcomeScreen={
-                        !this.state.isLoading &&
-                        this.state.showWelcomeScreen &&
-                        this.state.activeTool.type === "selection" &&
-                        !this.scene.getElementsIncludingDeleted().length
-                      }
+        <AppContext.Provider value={this}>
+          <AppPropsContext.Provider value={this.props}>
+            <ExcalidrawContainerContext.Provider
+              value={this.excalidrawContainerValue}
+            >
+              <DeviceContext.Provider value={this.device}>
+                <ExcalidrawSetAppStateContext.Provider value={this.setAppState}>
+                  <ExcalidrawAppStateContext.Provider value={this.state}>
+                    <ExcalidrawElementsContext.Provider
+                      value={this.scene.getNonDeletedElements()}
                     >
-                      {this.props.children}
-                    </LayerUI>
-                    <div className="excalidraw-textEditorContainer" />
-                    <div className="excalidraw-contextMenuContainer" />
-                    {selectedElement.length === 1 &&
-                      !this.state.contextMenu &&
-                      this.state.showHyperlinkPopup && (
-                        <Hyperlink
-                          key={selectedElement[0].id}
-                          element={selectedElement[0]}
+                      <ExcalidrawActionManagerContext.Provider
+                        value={this.actionManager}
+                      >
+                        <LayerUI
+                          canvas={this.canvas}
+                          appState={this.state}
+                          files={this.files}
                           setAppState={this.setAppState}
-                          onLinkOpen={this.props.onLinkOpen}
-                        />
-                      )}
-                    {this.state.toast !== null && (
-                      <Toast
-                        message={this.state.toast.message}
-                        onClose={() => this.setToast(null)}
-                        duration={this.state.toast.duration}
-                        closable={this.state.toast.closable}
-                      />
-                    )}
-                    {this.state.contextMenu && (
-                      <ContextMenu
-                        items={this.state.contextMenu.items}
-                        top={this.state.contextMenu.top}
-                        left={this.state.contextMenu.left}
-                        actionManager={this.actionManager}
-                      />
-                    )}
-                    <main>{this.renderCanvas()}</main>
-                  </ExcalidrawActionManagerContext.Provider>
-                </ExcalidrawElementsContext.Provider>{" "}
-              </ExcalidrawAppStateContext.Provider>
-            </ExcalidrawSetAppStateContext.Provider>
-          </DeviceContext.Provider>
-        </ExcalidrawContainerContext.Provider>
+                          actionManager={this.actionManager}
+                          elements={this.scene.getNonDeletedElements()}
+                          onLockToggle={this.toggleLock}
+                          onPenModeToggle={this.togglePenMode}
+                          onHandToolToggle={this.onHandToolToggle}
+                          langCode={getLanguage().code}
+                          renderTopRightUI={renderTopRightUI}
+                          renderCustomStats={renderCustomStats}
+                          showExitZenModeBtn={
+                            typeof this.props?.zenModeEnabled === "undefined" &&
+                            this.state.zenModeEnabled
+                          }
+                          UIOptions={this.props.UIOptions}
+                          onImageAction={this.onImageAction}
+                          onExportImage={this.onExportImage}
+                          renderWelcomeScreen={
+                            !this.state.isLoading &&
+                            this.state.showWelcomeScreen &&
+                            this.state.activeTool.type === "selection" &&
+                            !this.state.zenModeEnabled &&
+                            !this.scene.getElementsIncludingDeleted().length
+                          }
+                          app={this}
+                        >
+                          {this.props.children}
+                        </LayerUI>
+                        <div className="excalidraw-textEditorContainer" />
+                        <div className="excalidraw-contextMenuContainer" />
+                        <div className="excalidraw-eye-dropper-container" />
+                        {selectedElement.length === 1 &&
+                          !this.state.contextMenu &&
+                          this.state.showHyperlinkPopup && (
+                            <Hyperlink
+                              key={selectedElement[0].id}
+                              element={selectedElement[0]}
+                              setAppState={this.setAppState}
+                              onLinkOpen={this.props.onLinkOpen}
+                            />
+                          )}
+                        {this.state.toast !== null && (
+                          <Toast
+                            message={this.state.toast.message}
+                            onClose={() => this.setToast(null)}
+                            duration={this.state.toast.duration}
+                            closable={this.state.toast.closable}
+                          />
+                        )}
+                        {this.state.contextMenu && (
+                          <ContextMenu
+                            items={this.state.contextMenu.items}
+                            top={this.state.contextMenu.top}
+                            left={this.state.contextMenu.left}
+                            actionManager={this.actionManager}
+                          />
+                        )}
+                        <main>{this.renderCanvas()}</main>
+                        {this.renderFrameNames()}
+                      </ExcalidrawActionManagerContext.Provider>
+                    </ExcalidrawElementsContext.Provider>
+                  </ExcalidrawAppStateContext.Provider>
+                </ExcalidrawSetAppStateContext.Provider>
+              </DeviceContext.Provider>
+            </ExcalidrawContainerContext.Provider>
+          </AppPropsContext.Provider>
+        </AppContext.Provider>
       </div>
     );
   }
 
   public focusContainer: AppClassProperties["focusContainer"] = () => {
-    if (this.props.autoFocus) {
-      this.excalidrawContainerRef.current?.focus();
-    }
+    this.excalidrawContainerRef.current?.focus();
   };
 
   public getSceneElementsIncludingDeleted = () => {
@@ -681,6 +914,85 @@ class App extends React.Component<AppProps, AppState> {
     return this.scene.getNonDeletedElements();
   };
 
+  public onInsertElements = (elements: readonly ExcalidrawElement[]) => {
+    this.addElementsFromPasteOrLibrary({
+      elements,
+      position: "center",
+      files: null,
+    });
+  };
+
+  public onExportImage = async (
+    type: keyof typeof EXPORT_IMAGE_TYPES,
+    elements: readonly NonDeletedExcalidrawElement[],
+  ) => {
+    trackEvent("export", type, "ui");
+    const fileHandle = await exportCanvas(
+      type,
+      elements,
+      this.state,
+      this.files,
+      {
+        exportBackground: this.state.exportBackground,
+        name: this.state.name,
+        viewBackgroundColor: this.state.viewBackgroundColor,
+      },
+    )
+      .catch(muteFSAbortError)
+      .catch((error) => {
+        console.error(error);
+        this.setState({ errorMessage: error.message });
+      });
+
+    if (
+      this.state.exportEmbedScene &&
+      fileHandle &&
+      isImageFileHandle(fileHandle)
+    ) {
+      this.setState({ fileHandle });
+    }
+  };
+
+  private openEyeDropper = ({ type }: { type: "stroke" | "background" }) => {
+    jotaiStore.set(activeEyeDropperAtom, {
+      swapPreviewOnAlt: true,
+      previewType: type === "stroke" ? "strokeColor" : "backgroundColor",
+      onSelect: (color, event) => {
+        const shouldUpdateStrokeColor =
+          (type === "background" && event.altKey) ||
+          (type === "stroke" && !event.altKey);
+        const selectedElements = this.scene.getSelectedElements(this.state);
+        if (
+          !selectedElements.length ||
+          this.state.activeTool.type !== "selection"
+        ) {
+          if (shouldUpdateStrokeColor) {
+            this.setState({
+              currentItemStrokeColor: color,
+            });
+          } else {
+            this.setState({
+              currentItemBackgroundColor: color,
+            });
+          }
+        } else {
+          this.updateScene({
+            elements: this.scene.getElementsIncludingDeleted().map((el) => {
+              if (this.state.selectedElementIds[el.id]) {
+                return newElementWith(el, {
+                  [shouldUpdateStrokeColor ? "strokeColor" : "backgroundColor"]:
+                    color,
+                });
+              }
+              return el;
+            }),
+          });
+        }
+      },
+      keepOpenOnAlt: false,
+    });
+  };
+
   private syncActionResult = withBatchedUpdates(
     (actionResult: ActionResult) => {
       if (this.unmounted || actionResult === false) {
@@ -739,6 +1051,14 @@ class App extends React.Component<AppProps, AppState> {
         if (typeof this.props.name !== "undefined") {
           name = this.props.name;
         }
+
+        editingElement =
+          editingElement || actionResult.appState?.editingElement || null;
+
+        if (editingElement?.isDeleted) {
+          editingElement = null;
+        }
+
         this.setState(
           (state) => {
             // using Object.assign instead of spread to fool TS 4.2.2+ into
@@ -749,8 +1069,7 @@ class App extends React.Component<AppProps, AppState> {
               // or programmatically from the host, so it will need to be
               // rewritten later
               contextMenu: null,
-              editingElement:
-                editingElement || actionResult.appState?.editingElement || null,
+              editingElement,
               viewModeEnabled,
               zenModeEnabled,
               gridSize,
@@ -905,6 +1224,7 @@ class App extends React.Component<AppProps, AppState> {
         ? this.props.UIOptions.dockedSidebarBreakpoint
         : MQ_RIGHT_SIDEBAR_MIN_WIDTH;
     this.device = updateObject(this.device, {
+      isLandscape: width > height,
       isSmScreen: width < MQ_SM_MAX_WIDTH,
       isMobile:
         width < MQ_MAX_WIDTH_PORTRAIT ||
@@ -950,7 +1270,7 @@ class App extends React.Component<AppProps, AppState> {
     this.scene.addCallback(this.onSceneUpdated);
     this.addEventListeners();
 
-    if (this.excalidrawContainerRef.current) {
+    if (this.props.autoFocus && this.excalidrawContainerRef.current) {
       this.focusContainer();
     }
 
@@ -1028,7 +1348,9 @@ class App extends React.Component<AppProps, AppState> {
     this.unmounted = true;
     this.removeEventListeners();
     this.scene.destroy();
+    this.library.destroy();
     clearTimeout(touchTimeout);
+    isSomeElementSelected.clearCache();
     touchTimeout = 0;
   }
 
@@ -1259,6 +1581,12 @@ class App extends React.Component<AppProps, AppState> {
       });
     }
 
+    // failsafe in case the state is being updated in incorrect order resulting
+    // in the editingElement being now a deleted element
+    if (this.state.editingElement?.isDeleted) {
+      this.setState({ editingElement: null });
+    }
+
     if (
       this.state.selectedLinearElement &&
       !this.state.selectedElementIds[this.state.selectedLinearElement.elementId]
@@ -1387,7 +1715,7 @@ class App extends React.Component<AppProps, AppState> {
           theme: this.state.theme,
           imageCache: this.imageCache,
           isExporting: false,
-          renderScrollbars: !this.device.isMobile,
+          renderScrollbars: false,
         },
         callback: ({ atLeastOneVisibleElement, scrollBars }) => {
           if (scrollBars) {
@@ -1495,7 +1823,7 @@ class App extends React.Component<AppProps, AppState> {
 
     if (event.touches.length === 2) {
       this.setState({
-        selectedElementIds: {},
+        selectedElementIds: makeNextSelectedElementIds({}, this.state),
       });
     }
   };
@@ -1505,7 +1833,10 @@ class App extends React.Component<AppProps, AppState> {
     if (event.touches.length > 0) {
       this.setState({
         previousSelectedElementIds: {},
-        selectedElementIds: this.state.previousSelectedElementIds,
+        selectedElementIds: makeNextSelectedElementIds(
+          this.state.previousSelectedElementIds,
+          this.state,
+        ),
       });
     } else {
       gesture.pointers.clear();
@@ -1524,7 +1855,10 @@ class App extends React.Component<AppProps, AppState> {
         return;
       }
 
-      const elementUnderCursor = document.elementFromPoint(cursorX, cursorY);
+      const elementUnderCursor = document.elementFromPoint(
+        this.lastViewportPosition.x,
+        this.lastViewportPosition.y,
+      );
       if (
         event &&
         (!(elementUnderCursor instanceof HTMLCanvasElement) ||
@@ -1552,14 +1886,24 @@ class App extends React.Component<AppProps, AppState> {
       // prefer spreadsheet data over image file (MS Office/Libre Office)
       if (isSupportedImageFile(file) && !data.spreadsheet) {
         const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(
-          { clientX: cursorX, clientY: cursorY },
+          {
+            clientX: this.lastViewportPosition.x,
+            clientY: this.lastViewportPosition.y,
+          },
           this.state,
         );
 
         const imageElement = this.createImageElement({ sceneX, sceneY });
         this.insertImageElement(imageElement, file);
         this.initializeImageDimensions(imageElement);
-        this.setState({ selectedElementIds: { [imageElement.id]: true } });
+        this.setState({
+          selectedElementIds: makeNextSelectedElementIds(
+            {
+              [imageElement.id]: true,
+            },
+            this.state,
+          ),
+        });
 
         return;
       }
@@ -1589,6 +1933,7 @@ class App extends React.Component<AppProps, AppState> {
           elements: data.elements,
           files: data.files || null,
           position: "cursor",
+          retainSeed: isPlainPaste,
         });
       } else if (data.text) {
         this.addTextFromPaste(data.text, isPlainPaste);
@@ -1602,6 +1947,7 @@ class App extends React.Component<AppProps, AppState> {
     elements: readonly ExcalidrawElement[];
     files: BinaryFiles | null;
     position: { clientX: number; clientY: number } | "cursor" | "center";
+    retainSeed?: boolean;
   }) => {
     const elements = restoreElements(opts.elements, null);
     const [minX, minY, maxX, maxY] = getCommonBounds(elements);
@@ -1613,13 +1959,13 @@ class App extends React.Component<AppProps, AppState> {
       typeof opts.position === "object"
         ? opts.position.clientX
         : opts.position === "cursor"
-        ? cursorX
+        ? this.lastViewportPosition.x
         : this.state.width / 2 + this.state.offsetLeft;
     const clientY =
       typeof opts.position === "object"
         ? opts.position.clientY
         : opts.position === "cursor"
-        ? cursorY
+        ? this.lastViewportPosition.y
         : this.state.height / 2 + this.state.offsetTop;
 
     const { x, y } = viewportCoordsToSceneCoords(
@@ -1639,6 +1985,9 @@ class App extends React.Component<AppProps, AppState> {
           y: element.y + gridY - minY,
         });
       }),
+      {
+        randomizeSeed: !opts.retainSeed,
+      },
     );
 
     const nextElements = [
@@ -1661,6 +2010,9 @@ class App extends React.Component<AppProps, AppState> {
 
     this.history.resumeRecording();
 
+    const nextElementsToSelect =
+      excludeElementsInFramesFromSelection(newElements);
+
     this.setState(
       selectGroupsForSelectedElements(
         {
@@ -1673,10 +2025,10 @@ class App extends React.Component<AppProps, AppState> {
           openSidebar:
             this.state.openSidebar &&
             this.device.canDeviceFitSidebar &&
-            this.state.isSidebarDocked
+            jotaiStore.get(isSidebarDockedAtom)
               ? this.state.openSidebar
               : null,
-          selectedElementIds: newElements.reduce(
+          selectedElementIds: nextElementsToSelect.reduce(
             (acc: Record<ExcalidrawElement["id"], true>, element) => {
               if (!isBoundToContainer(element)) {
                 acc[element.id] = true;
@@ -1688,6 +2040,8 @@ class App extends React.Component<AppProps, AppState> {
           selectedGroupIds: {},
         },
         this.scene.getNonDeletedElements(),
+        this.state,
+        this,
       ),
       () => {
         if (opts.files) {
@@ -1700,7 +2054,10 @@ class App extends React.Component<AppProps, AppState> {
 
   private addTextFromPaste(text: string, isPlainPaste = false) {
     const { x, y } = viewportCoordsToSceneCoords(
-      { clientX: cursorX, clientY: cursorY },
+      {
+        clientX: this.lastViewportPosition.x,
+        clientY: this.lastViewportPosition.y,
+      },
       this.state,
     );
 
@@ -1733,12 +2090,18 @@ class App extends React.Component<AppProps, AppState> {
 
         const lineHeight = getDefaultLineHeight(textElementProps.fontFamily);
         if (text.length) {
+          const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
+            x,
+            y: currentY,
+          });
+
           const element = newTextElement({
             ...textElementProps,
             x,
             y: currentY,
             text,
             lineHeight,
+            frameId: topLayerFrame ? topLayerFrame.id : null,
           });
           acc.push(element);
           currentY += element.height + LINE_GAP;
@@ -1762,14 +2125,24 @@ class App extends React.Component<AppProps, AppState> {
       return;
     }
 
-    this.scene.replaceAllElements([
-      ...this.scene.getElementsIncludingDeleted(),
-      ...textElements,
-    ]);
+    const frameId = textElements[0].frameId;
+
+    if (frameId) {
+      this.scene.insertElementsAtIndex(
+        textElements,
+        this.scene.getElementIndex(frameId),
+      );
+    } else {
+      this.scene.replaceAllElements([
+        ...this.scene.getElementsIncludingDeleted(),
+        ...textElements,
+      ]);
+    }
 
     this.setState({
-      selectedElementIds: Object.fromEntries(
-        textElements.map((el) => [el.id, true]),
+      selectedElementIds: makeNextSelectedElementIds(
+        Object.fromEntries(textElements.map((el) => [el.id, true])),
+        this.state,
       ),
     });
 
@@ -1830,6 +2203,27 @@ class App extends React.Component<AppProps, AppState> {
     });
   };
 
+  updateFrameRendering = (
+    opts:
+      | Partial<AppState["frameRendering"]>
+      | ((
+          prevState: AppState["frameRendering"],
+        ) => Partial<AppState["frameRendering"]>),
+  ) => {
+    this.setState((prevState) => {
+      const next =
+        typeof opts === "function" ? opts(prevState.frameRendering) : opts;
+      return {
+        frameRendering: {
+          enabled: next?.enabled ?? prevState.frameRendering.enabled,
+          clip: next?.clip ?? prevState.frameRendering.clip,
+          name: next?.name ?? prevState.frameRendering.name,
+          outline: next?.outline ?? prevState.frameRendering.outline,
+        },
+      };
+    });
+  };
+
   togglePenMode = () => {
     this.setState((prevState) => {
       return {
@@ -1867,27 +2261,51 @@ class App extends React.Component<AppProps, AppState> {
     target:
       | ExcalidrawElement
       | readonly ExcalidrawElement[] = this.scene.getNonDeletedElements(),
-    opts?: { fitToContent?: boolean; animate?: boolean; duration?: number },
+    opts?:
+      | {
+          fitToContent?: boolean;
+          fitToViewport?: never;
+          viewportZoomFactor?: never;
+          animate?: boolean;
+          duration?: number;
+        }
+      | {
+          fitToContent?: never;
+          fitToViewport?: boolean;
+          /** when fitToViewport=true, how much screen should the content cover,
+           * between 0.1 (10%) and 1 (100%)
+           */
+          viewportZoomFactor?: number;
+          animate?: boolean;
+          duration?: number;
+        },
   ) => {
     this.cancelInProgresAnimation?.();
 
     // convert provided target into ExcalidrawElement[] if necessary
-    const targets = Array.isArray(target) ? target : [target];
+    const targetElements = Array.isArray(target) ? target : [target];
 
     let zoom = this.state.zoom;
     let scrollX = this.state.scrollX;
     let scrollY = this.state.scrollY;
 
-    if (opts?.fitToContent) {
-      // compute an appropriate viewport location (scroll X, Y) and zoom level
-      // that fit the target elements on the scene
-      const { appState } = zoomToFitElements(targets, this.state, false);
+    if (opts?.fitToContent || opts?.fitToViewport) {
+      const { appState } = zoomToFit({
+        targetElements,
+        appState: this.state,
+        fitToViewport: !!opts?.fitToViewport,
+        viewportZoomFactor: opts?.viewportZoomFactor,
+      });
       zoom = appState.zoom;
       scrollX = appState.scrollX;
       scrollY = appState.scrollY;
     } else {
       // compute only the viewport location, without any zoom adjustment
-      const scroll = calculateScrollCenter(targets, this.state, this.canvas);
+      const scroll = calculateScrollCenter(
+        targetElements,
+        this.state,
+        this.canvas,
+      );
       scrollX = scroll.scrollX;
       scrollY = scroll.scrollY;
     }
@@ -1897,19 +2315,42 @@ class App extends React.Component<AppProps, AppState> {
     if (opts?.animate) {
       const origScrollX = this.state.scrollX;
       const origScrollY = this.state.scrollY;
+      const origZoom = this.state.zoom.value;
 
-      // zoom animation could become problematic on scenes with large number
-      // of elements, setting it to its final value to improve user experience.
-      //
-      // using zoomCanvas() to zoom on current viewport center
-      this.zoomCanvas(zoom.value);
+      const cancel = easeToValuesRAF({
+        fromValues: {
+          scrollX: origScrollX,
+          scrollY: origScrollY,
+          zoom: origZoom,
+        },
+        toValues: { scrollX, scrollY, zoom: zoom.value },
+        interpolateValue: (from, to, progress, key) => {
+          // for zoom, use different easing
+          if (key === "zoom") {
+            return from * Math.pow(to / from, easeOut(progress));
+          }
+          // handle using default
+          return undefined;
+        },
+        onStep: ({ scrollX, scrollY, zoom }) => {
+          this.setState({
+            scrollX,
+            scrollY,
+            zoom: { value: zoom },
+          });
+        },
+        onStart: () => {
+          this.setState({ shouldCacheIgnoreZoom: true });
+        },
+        onEnd: () => {
+          this.setState({ shouldCacheIgnoreZoom: false });
+        },
+        onCancel: () => {
+          this.setState({ shouldCacheIgnoreZoom: false });
+        },
+        duration: opts?.duration ?? 500,
+      });
 
-      const cancel = easeToValuesRAF(
-        [origScrollX, origScrollY],
-        [scrollX, scrollY],
-        (scrollX, scrollY) => this.setState({ scrollX, scrollY }),
-        { duration: opts?.duration ?? 500 },
-      );
       this.cancelInProgresAnimation = () => {
         cancel();
         this.cancelInProgresAnimation = null;
@@ -2011,36 +2452,30 @@ class App extends React.Component<AppProps, AppState> {
   /**
    * @returns whether the menu was toggled on or off
    */
-  public toggleMenu = (
-    type: "library" | "customSidebar",
-    force?: boolean,
-  ): boolean => {
-    if (type === "customSidebar" && !this.props.renderSidebar) {
-      console.warn(
-        `attempting to toggle "customSidebar", but no "props.renderSidebar" is defined`,
-      );
-      return false;
+  public toggleSidebar = ({
+    name,
+    tab,
+    force,
+  }: {
+    name: SidebarName;
+    tab?: SidebarTabName;
+    force?: boolean;
+  }): boolean => {
+    let nextName;
+    if (force === undefined) {
+      nextName = this.state.openSidebar?.name === name ? null : name;
+    } else {
+      nextName = force ? name : null;
     }
+    this.setState({ openSidebar: nextName ? { name: nextName, tab } : null });
 
-    if (type === "library" || type === "customSidebar") {
-      let nextValue;
-      if (force === undefined) {
-        nextValue = this.state.openSidebar === type ? null : type;
-      } else {
-        nextValue = force ? type : null;
-      }
-      this.setState({ openSidebar: nextValue });
-
-      return !!nextValue;
-    }
-
-    return false;
+    return !!nextName;
   };
 
   private updateCurrentCursorPosition = withBatchedUpdates(
     (event: MouseEvent) => {
-      cursorX = event.clientX;
-      cursorY = event.clientY;
+      this.lastViewportPosition.x = event.clientX;
+      this.lastViewportPosition.y = event.clientY;
     },
   );
 
@@ -2113,6 +2548,7 @@ class App extends React.Component<AppProps, AppState> {
         event.shiftKey &&
         event[KEYS.CTRL_OR_CMD]
       ) {
+        event.preventDefault();
         this.setState({ openDialog: "imageExport" });
         return;
       }
@@ -2170,11 +2606,11 @@ class App extends React.Component<AppProps, AppState> {
           offsetY = step;
         }
 
-        const selectedElements = getSelectedElements(
-          this.scene.getNonDeletedElements(),
-          this.state,
-          true,
-        );
+        const selectedElements = this.scene.getSelectedElements({
+          selectedElementIds: this.state.selectedElementIds,
+          includeBoundTextElement: true,
+          includeElementsInFrames: true,
+        });
 
         selectedElements.forEach((element) => {
           mutateElement(element, {
@@ -2191,10 +2627,7 @@ class App extends React.Component<AppProps, AppState> {
 
         event.preventDefault();
       } else if (event.key === KEYS.ENTER) {
-        const selectedElements = getSelectedElements(
-          this.scene.getNonDeletedElements(),
-          this.state,
-        );
+        const selectedElements = this.scene.getSelectedElements(this.state);
         if (selectedElements.length === 1) {
           const selectedElement = selectedElements[0];
           if (event[KEYS.CTRL_OR_CMD]) {
@@ -2231,6 +2664,10 @@ class App extends React.Component<AppProps, AppState> {
             });
             event.preventDefault();
             return;
+          } else if (isFrameElement(selectedElement)) {
+            this.setState({
+              editingFrame: selectedElement.id,
+            });
           }
         }
       } else if (
@@ -2266,10 +2703,7 @@ class App extends React.Component<AppProps, AppState> {
         !event.altKey &&
         !event[KEYS.CTRL_OR_CMD]
       ) {
-        const selectedElements = getSelectedElements(
-          this.scene.getNonDeletedElements(),
-          this.state,
-        );
+        const selectedElements = this.scene.getSelectedElements(this.state);
         if (
           this.state.activeTool.type === "selection" &&
           !selectedElements.length
@@ -2282,11 +2716,11 @@ class App extends React.Component<AppProps, AppState> {
           (hasBackground(this.state.activeTool.type) ||
             selectedElements.some((element) => hasBackground(element.type)))
         ) {
-          this.setState({ openPopup: "backgroundColorPicker" });
+          this.setState({ openPopup: "elementBackground" });
           event.stopPropagation();
         }
         if (event.key === KEYS.S) {
-          this.setState({ openPopup: "strokeColorPicker" });
+          this.setState({ openPopup: "elementStroke" });
           event.stopPropagation();
         }
       }
@@ -2297,6 +2731,20 @@ class App extends React.Component<AppProps, AppState> {
       ) {
         jotaiStore.set(activeConfirmDialogAtom, "clearCanvas");
       }
+
+      // eye dropper
+      // -----------------------------------------------------------------------
+      const lowerCased = event.key.toLocaleLowerCase();
+      const isPickingStroke = lowerCased === KEYS.S && event.shiftKey;
+      const isPickingBackground =
+        event.key === KEYS.I || (lowerCased === KEYS.G && event.shiftKey);
+
+      if (isPickingStroke || isPickingBackground) {
+        this.openEyeDropper({
+          type: isPickingStroke ? "stroke" : "background",
+        });
+      }
+      // -----------------------------------------------------------------------
     },
   );
 
@@ -2316,7 +2764,7 @@ class App extends React.Component<AppProps, AppState> {
       } else {
         setCursorForShape(this.canvas, this.state);
         this.setState({
-          selectedElementIds: {},
+          selectedElementIds: makeNextSelectedElementIds({}, this.state),
           selectedGroupIds: {},
           editingGroupId: null,
         });
@@ -2327,10 +2775,7 @@ class App extends React.Component<AppProps, AppState> {
       this.setState({ isBindingEnabled: true });
     }
     if (isArrowKey(event.key)) {
-      const selectedElements = getSelectedElements(
-        this.scene.getNonDeletedElements(),
-        this.state,
-      );
+      const selectedElements = this.scene.getSelectedElements(this.state);
       isBindingEnabled(this.state)
         ? bindOrUnbindSelectedElements(selectedElements)
         : unbindLinearElements(selectedElements);
@@ -2340,7 +2785,7 @@ class App extends React.Component<AppProps, AppState> {
 
   private setActiveTool = (
     tool:
-      | { type: typeof SHAPES[number]["value"] | "eraser" | "hand" }
+      | { type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame" }
       | { type: "custom"; customType: string },
   ) => {
     const nextActiveTool = updateActiveTool(this.state, tool);
@@ -2361,7 +2806,7 @@ class App extends React.Component<AppProps, AppState> {
     if (nextActiveTool.type !== "selection") {
       this.setState({
         activeTool: nextActiveTool,
-        selectedElementIds: {},
+        selectedElementIds: makeNextSelectedElementIds({}, this.state),
         selectedGroupIds: {},
         editingGroupId: null,
       });
@@ -2398,7 +2843,7 @@ class App extends React.Component<AppProps, AppState> {
     // elements by mistake while zooming
     if (this.isTouchScreenMultiTouchGesture()) {
       this.setState({
-        selectedElementIds: {},
+        selectedElementIds: makeNextSelectedElementIds({}, this.state),
       });
     }
     gesture.initialScale = this.state.zoom.value;
@@ -2426,8 +2871,8 @@ class App extends React.Component<AppProps, AppState> {
       this.setState((state) => ({
         ...getStateForZoom(
           {
-            viewportX: cursorX,
-            viewportY: cursorY,
+            viewportX: this.lastViewportPosition.x,
+            viewportY: this.lastViewportPosition.y,
             nextZoom: getNormalizedZoom(initialScale * event.scale),
           },
           state,
@@ -2443,7 +2888,10 @@ class App extends React.Component<AppProps, AppState> {
     if (this.isTouchScreenMultiTouchGesture()) {
       this.setState({
         previousSelectedElementIds: {},
-        selectedElementIds: this.state.previousSelectedElementIds,
+        selectedElementIds: makeNextSelectedElementIds(
+          this.state.previousSelectedElementIds,
+          this.state,
+        ),
       });
     }
     gesture.initialScale = null;
@@ -2508,10 +2956,13 @@ class App extends React.Component<AppProps, AppState> {
             ? element.containerId
             : element.id;
           this.setState((prevState) => ({
-            selectedElementIds: {
-              ...prevState.selectedElementIds,
-              [elementIdToSelect]: true,
-            },
+            selectedElementIds: makeNextSelectedElementIds(
+              {
+                ...prevState.selectedElementIds,
+                [elementIdToSelect]: true,
+              },
+              prevState,
+            ),
           }));
         }
         if (isDeleted) {
@@ -2547,7 +2998,7 @@ class App extends React.Component<AppProps, AppState> {
 
   private deselectElements() {
     this.setState({
-      selectedElementIds: {},
+      selectedElementIds: makeNextSelectedElementIds({}, this.state),
       selectedGroupIds: {},
       editingGroupId: null,
     });
@@ -2598,6 +3049,7 @@ class App extends React.Component<AppProps, AppState> {
       return isHittingElementBoundingBoxWithoutHittingElement(
         elementWithHighestZIndex,
         this.state,
+        this.frameNameBoundsCache,
         x,
         y,
       )
@@ -2629,8 +3081,16 @@ class App extends React.Component<AppProps, AppState> {
             );
 
     return getElementsAtPosition(elements, (element) =>
-      hitTest(element, this.state, x, y),
-    );
+      hitTest(element, this.state, this.frameNameBoundsCache, x, y),
+    ).filter((element) => {
+      // hitting a frame's element from outside the frame is not considered a hit
+      const containingFrame = getContainingFrame(element);
+      return containingFrame &&
+        this.state.frameRendering.enabled &&
+        this.state.frameRendering.clip
+        ? isCursorInFrame({ x, y }, containingFrame)
+        : true;
+    });
   }
 
   private startTextEditing = ({
@@ -2658,14 +3118,14 @@ class App extends React.Component<AppProps, AppState> {
         container,
       );
     if (container && parentCenterPosition) {
-      shouldBindToContainer = true;
+      const boundTextElementToContainer = getBoundTextElement(container);
+      if (!boundTextElementToContainer) {
+        shouldBindToContainer = true;
+      }
     }
     let existingTextElement: NonDeleted<ExcalidrawTextElement> | null = null;
 
-    const selectedElements = getSelectedElements(
-      this.scene.getNonDeletedElements(),
-      this.state,
-    );
+    const selectedElements = this.scene.getSelectedElements(this.state);
 
     if (selectedElements.length === 1) {
       if (isTextElement(selectedElements[0])) {
@@ -2716,6 +3176,12 @@ class App extends React.Component<AppProps, AppState> {
         );
       }
     }
+
+    const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
+      x: sceneX,
+      y: sceneY,
+    });
+
     const element = existingTextElement
       ? existingTextElement
       : newTextElement({
@@ -2732,7 +3198,6 @@ class App extends React.Component<AppProps, AppState> {
           strokeStyle: this.state.currentItemStrokeStyle,
           roughness: this.state.currentItemRoughness,
           opacity: this.state.currentItemOpacity,
-          roundness: null,
           text: "",
           fontSize,
           fontFamily,
@@ -2744,8 +3209,9 @@ class App extends React.Component<AppProps, AppState> {
             : DEFAULT_VERTICAL_ALIGN,
           containerId: shouldBindToContainer ? container?.id : undefined,
           groupIds: container?.groupIds ?? [],
-          locked: false,
           lineHeight,
+          angle: container?.angle ?? 0,
+          frameId: topLayerFrame ? topLayerFrame.id : null,
         });
 
     if (!existingTextElement && shouldBindToContainer && container) {
@@ -2763,10 +3229,7 @@ class App extends React.Component<AppProps, AppState> {
         const containerIndex = this.scene.getElementIndex(container.id);
         this.scene.insertElementAtIndex(element, containerIndex + 1);
       } else {
-        this.scene.replaceAllElements([
-          ...this.scene.getElementsIncludingDeleted(),
-          element,
-        ]);
+        this.scene.addNewElement(element);
       }
     }
 
@@ -2792,10 +3255,7 @@ class App extends React.Component<AppProps, AppState> {
       return;
     }
 
-    const selectedElements = getSelectedElements(
-      this.scene.getNonDeletedElements(),
-      this.state,
-    );
+    const selectedElements = this.scene.getSelectedElements(this.state);
 
     if (selectedElements.length === 1 && isLinearElement(selectedElements[0])) {
       if (
@@ -2845,6 +3305,8 @@ class App extends React.Component<AppProps, AppState> {
               selectedGroupIds: {},
             },
             this.scene.getNonDeletedElements(),
+            prevState,
+            this,
           ),
         );
         return;
@@ -2863,10 +3325,12 @@ class App extends React.Component<AppProps, AppState> {
         if (
           hasBoundTextElement(container) ||
           !isTransparent(container.backgroundColor) ||
-          isHittingElementNotConsideringBoundingBox(container, this.state, [
-            sceneX,
-            sceneY,
-          ])
+          isHittingElementNotConsideringBoundingBox(
+            container,
+            this.state,
+            this.frameNameBoundsCache,
+            [sceneX, sceneY],
+          )
         ) {
           const midPoint = getContainerCenter(container, this.state);
 
@@ -2948,12 +3412,19 @@ class App extends React.Component<AppProps, AppState> {
       this.device.isMobile,
     );
     if (lastPointerDownHittingLinkIcon && lastPointerUpHittingLinkIcon) {
-      const url = this.hitLinkElement.link;
+      let url = this.hitLinkElement.link;
       if (url) {
+        url = normalizeLink(url);
         let customEvent;
         if (this.props.onLinkOpen) {
           customEvent = wrapEvent(EVENT.EXCALIDRAW_LINK, event.nativeEvent);
-          this.props.onLinkOpen(this.hitLinkElement, customEvent);
+          this.props.onLinkOpen(
+            {
+              ...this.hitLinkElement,
+              link: url,
+            },
+            customEvent,
+          );
         }
         if (!customEvent?.defaultPrevented) {
           const target = isLocalLink(url) ? "_self" : "_blank";
@@ -2961,13 +3432,26 @@ class App extends React.Component<AppProps, AppState> {
           // https://mathiasbynens.github.io/rel-noopener/
           if (newWindow) {
             newWindow.opener = null;
-            newWindow.location = normalizeLink(url);
+            newWindow.location = url;
           }
         }
       }
     }
   };
 
+  private getTopLayerFrameAtSceneCoords = (sceneCoords: {
+    x: number;
+    y: number;
+  }) => {
+    const frames = this.scene
+      .getNonDeletedFrames()
+      .filter((frame) =>
+        isCursorInFrame(sceneCoords, frame as ExcalidrawFrameElement),
+      );
+
+    return frames.length ? frames[frames.length - 1] : null;
+  };
+
   private handleCanvasPointerMove = (
     event: React.PointerEvent<HTMLCanvasElement>,
   ) => {
@@ -3199,7 +3683,7 @@ class App extends React.Component<AppProps, AppState> {
 
     const elements = this.scene.getNonDeletedElements();
 
-    const selectedElements = getSelectedElements(elements, this.state);
+    const selectedElements = this.scene.getSelectedElements(this.state);
     if (
       selectedElements.length === 1 &&
       !isOverScrollBar &&
@@ -3416,10 +3900,12 @@ class App extends React.Component<AppProps, AppState> {
       let hoverPointIndex = -1;
       let segmentMidPointHoveredCoords = null;
       if (
-        isHittingElementNotConsideringBoundingBox(element, this.state, [
-          scenePointerX,
-          scenePointerY,
-        ])
+        isHittingElementNotConsideringBoundingBox(
+          element,
+          this.state,
+          this.frameNameBoundsCache,
+          [scenePointerX, scenePointerY],
+        )
       ) {
         hoverPointIndex = LinearElementEditor.getPointIndexUnderCursor(
           element,
@@ -3444,6 +3930,7 @@ class App extends React.Component<AppProps, AppState> {
         isHittingElementBoundingBoxWithoutHittingElement(
           element,
           this.state,
+          this.frameNameBoundsCache,
           scenePointerX,
           scenePointerY,
         )
@@ -3451,7 +3938,13 @@ class App extends React.Component<AppProps, AppState> {
         setCursor(this.canvas, CURSOR_TYPE.MOVE);
       } else if (
         boundTextElement &&
-        hitTest(boundTextElement, this.state, scenePointerX, scenePointerY)
+        hitTest(
+          boundTextElement,
+          this.state,
+          this.frameNameBoundsCache,
+          scenePointerX,
+          scenePointerY,
+        )
       ) {
         setCursor(this.canvas, CURSOR_TYPE.MOVE);
       }
@@ -3485,7 +3978,7 @@ class App extends React.Component<AppProps, AppState> {
     }
   }
   private handleCanvasPointerDown = (
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
   ) => {
     // since contextMenu options are potentially evaluated on each render,
     // and an contextMenu action may depend on selection state, we must
@@ -3521,12 +4014,15 @@ class App extends React.Component<AppProps, AppState> {
           editingElement: null,
           startBoundElement: null,
           suggestedBindings: [],
-          selectedElementIds: Object.keys(this.state.selectedElementIds)
-            .filter((key) => key !== element.id)
-            .reduce((obj: { [id: string]: boolean }, key) => {
-              obj[key] = this.state.selectedElementIds[key];
-              return obj;
-            }, {}),
+          selectedElementIds: makeNextSelectedElementIds(
+            Object.keys(this.state.selectedElementIds)
+              .filter((key) => key !== element.id)
+              .reduce((obj: { [id: string]: true }, key) => {
+                obj[key] = this.state.selectedElementIds[key];
+                return obj;
+              }, {}),
+            this.state,
+          ),
         },
       });
       return;
@@ -3592,6 +4088,10 @@ class App extends React.Component<AppProps, AppState> {
     // pointerDown event, ends with a pointerUp event (or another pointerDown)
     const pointerDownState = this.initialPointerDownState(event);
 
+    this.setState({
+      selectedElementsAreBeingDragged: false,
+    });
+
     if (this.handleDraggingScrollBar(event, pointerDownState)) {
       return;
     }
@@ -3659,6 +4159,8 @@ class App extends React.Component<AppProps, AppState> {
       );
     } else if (this.state.activeTool.type === "custom") {
       setCursor(this.canvas, CURSOR_TYPE.AUTO);
+    } else if (this.state.activeTool.type === "frame") {
+      this.createFrameElementOnPointerDown(pointerDownState);
     } else if (
       this.state.activeTool.type !== "eraser" &&
       this.state.activeTool.type !== "hand"
@@ -3698,6 +4200,7 @@ class App extends React.Component<AppProps, AppState> {
     event: React.PointerEvent<HTMLCanvasElement>,
   ) => {
     this.lastPointerUp = event;
+
     if (this.device.isTouchScreen) {
       const scenePointer = viewportCoordsToSceneCoords(
         { clientX: event.clientX, clientY: event.clientY },
@@ -3723,7 +4226,7 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   private maybeOpenContextMenuAfterPointerDownOnTouchDevices = (
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
   ): void => {
     // deal with opening context menu on touch devices
     if (event.pointerType === "touch") {
@@ -3754,7 +4257,7 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   private maybeCleanupAfterMissingPointerUp(
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
   ): void {
     if (lastPointerUp !== null) {
       // Unfortunately, sometimes we don't get a pointerup after a pointerdown,
@@ -3766,7 +4269,7 @@ class App extends React.Component<AppProps, AppState> {
 
   // Returns whether the event is a panning
   private handleCanvasPanUsingWheelOrSpaceDrag = (
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
   ): boolean => {
     if (
       !(
@@ -3863,7 +4366,7 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   private updateGestureOnPointerDown(
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
   ): void {
     gesture.pointers.set(event.pointerId, {
       x: event.clientX,
@@ -3880,13 +4383,10 @@ class App extends React.Component<AppProps, AppState> {
   }
 
   private initialPointerDownState(
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
   ): PointerDownState {
     const origin = viewportCoordsToSceneCoords(event, this.state);
-    const selectedElements = getSelectedElements(
-      this.scene.getNonDeletedElements(),
-      this.state,
-    );
+    const selectedElements = this.scene.getSelectedElements(this.state);
     const [minX, minY, maxX, maxY] = getCommonBounds(selectedElements);
 
     return {
@@ -3945,7 +4445,7 @@ class App extends React.Component<AppProps, AppState> {
 
   // Returns whether the event is a dragging a scrollbar
   private handleDraggingScrollBar(
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
     pointerDownState: PointerDownState,
   ): boolean {
     if (
@@ -3988,7 +4488,7 @@ class App extends React.Component<AppProps, AppState> {
   private clearSelectionIfNotUsingSelection = (): void => {
     if (this.state.activeTool.type !== "selection") {
       this.setState({
-        selectedElementIds: {},
+        selectedElementIds: makeNextSelectedElementIds({}, this.state),
         selectedGroupIds: {},
         editingGroupId: null,
       });
@@ -3999,12 +4499,12 @@ class App extends React.Component<AppProps, AppState> {
    * @returns whether the pointer event has been completely handled
    */
   private handleSelectionOnPointerDown = (
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
     pointerDownState: PointerDownState,
   ): boolean => {
     if (this.state.activeTool.type === "selection") {
       const elements = this.scene.getNonDeletedElements();
-      const selectedElements = getSelectedElements(elements, this.state);
+      const selectedElements = this.scene.getSelectedElements(this.state);
       if (selectedElements.length === 1 && !this.state.editingLinearElement) {
         const elementWithTransformHandleType =
           getElementWithTransformHandleType(
@@ -4032,12 +4532,6 @@ class App extends React.Component<AppProps, AppState> {
         );
       }
       if (pointerDownState.resize.handleType) {
-        setCursor(
-          this.canvas,
-          getCursorForResizingElement({
-            transformHandleType: pointerDownState.resize.handleType,
-          }),
-        );
         pointerDownState.resize.isResizing = true;
         pointerDownState.resize.offset = tupleToCoors(
           getResizeOffsetXY(
@@ -4126,9 +4620,12 @@ class App extends React.Component<AppProps, AppState> {
 
         if (this.state.editingLinearElement) {
           this.setState({
-            selectedElementIds: {
-              [this.state.editingLinearElement.elementId]: true,
-            },
+            selectedElementIds: makeNextSelectedElementIds(
+              {
+                [this.state.editingLinearElement.elementId]: true,
+              },
+              this.state,
+            ),
           });
           // If we click on something
         } else if (hitElement != null) {
@@ -4156,7 +4653,7 @@ class App extends React.Component<AppProps, AppState> {
               !isElementInGroup(hitElement, this.state.editingGroupId)
             ) {
               this.setState({
-                selectedElementIds: {},
+                selectedElementIds: makeNextSelectedElementIds({}, this.state),
                 selectedGroupIds: {},
                 editingGroupId: null,
               });
@@ -4165,21 +4662,92 @@ class App extends React.Component<AppProps, AppState> {
             // Add hit element to selection. At this point if we're not holding
             // SHIFT the previously selected element(s) were deselected above
             // (make sure you use setState updater to use latest state)
+            // With shift-selection, we want to make sure that frames and their containing
+            // elements are not selected at the same time.
             if (
               !someHitElementIsSelected &&
               !pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements
             ) {
               this.setState((prevState) => {
+                const nextSelectedElementIds: { [id: string]: true } = {
+                  ...prevState.selectedElementIds,
+                  [hitElement.id]: true,
+                };
+
+                const previouslySelectedElements: ExcalidrawElement[] = [];
+
+                Object.keys(prevState.selectedElementIds).forEach((id) => {
+                  const element = this.scene.getElement(id);
+                  element && previouslySelectedElements.push(element);
+                });
+
+                // if hitElement is frame, deselect all of its elements if they are selected
+                if (hitElement.type === "frame") {
+                  getFrameElements(
+                    previouslySelectedElements,
+                    hitElement.id,
+                  ).forEach((element) => {
+                    delete nextSelectedElementIds[element.id];
+                  });
+                } else if (hitElement.frameId) {
+                  // if hitElement is in a frame and its frame has been selected
+                  // disable selection for the given element
+                  if (nextSelectedElementIds[hitElement.frameId]) {
+                    delete nextSelectedElementIds[hitElement.id];
+                  }
+                } else {
+                  // hitElement is neither a frame nor an element in a frame
+                  // but since hitElement could be in a group with some frames
+                  // this means selecting hitElement will have the frames selected as well
+                  // because we want to keep the invariant:
+                  // - frames and their elements are not selected at the same time
+                  // we deselect elements in those frames that were previously selected
+
+                  const groupIds = hitElement.groupIds;
+                  const framesInGroups = new Set(
+                    groupIds
+                      .flatMap((gid) =>
+                        getElementsInGroup(
+                          this.scene.getNonDeletedElements(),
+                          gid,
+                        ),
+                      )
+                      .filter((element) => element.type === "frame")
+                      .map((frame) => frame.id),
+                  );
+
+                  if (framesInGroups.size > 0) {
+                    previouslySelectedElements.forEach((element) => {
+                      if (
+                        element.frameId &&
+                        framesInGroups.has(element.frameId)
+                      ) {
+                        // deselect element and groups containing the element
+                        delete nextSelectedElementIds[element.id];
+                        element.groupIds
+                          .flatMap((gid) =>
+                            getElementsInGroup(
+                              this.scene.getNonDeletedElements(),
+                              gid,
+                            ),
+                          )
+                          .forEach((element) => {
+                            delete nextSelectedElementIds[element.id];
+                          });
+                      }
+                    });
+                  }
+                }
+
                 return selectGroupsForSelectedElements(
                   {
                     ...prevState,
-                    selectedElementIds: {
-                      ...prevState.selectedElementIds,
-                      [hitElement.id]: true,
-                    },
+                    selectedElementIds: nextSelectedElementIds,
                     showHyperlinkPopup: hitElement.link ? "info" : false,
                   },
                   this.scene.getNonDeletedElements(),
+                  prevState,
+                  this,
                 );
               });
               pointerDownState.hit.wasAddedToSelection = true;
@@ -4219,7 +4787,7 @@ class App extends React.Component<AppProps, AppState> {
   }
 
   private handleTextOnPointerDown = (
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
     pointerDownState: PointerDownState,
   ): void => {
     // if we're currently still editing text, clicking outside
@@ -4263,7 +4831,7 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   private handleFreeDrawElementOnPointerDown = (
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
     elementType: ExcalidrawFreeDrawElement["type"],
     pointerDownState: PointerDownState,
   ) => {
@@ -4274,6 +4842,11 @@ class App extends React.Component<AppProps, AppState> {
       null,
     );
 
+    const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
+      x: gridX,
+      y: gridY,
+    });
+
     const element = newFreeDrawElement({
       type: elementType,
       x: gridX,
@@ -4288,14 +4861,21 @@ class App extends React.Component<AppProps, AppState> {
       roundness: null,
       simulatePressure: event.pressure === 0.5,
       locked: false,
+      frameId: topLayerFrame ? topLayerFrame.id : null,
     });
 
-    this.setState((prevState) => ({
-      selectedElementIds: {
+    this.setState((prevState) => {
+      const nextSelectedElementIds = {
         ...prevState.selectedElementIds,
-        [element.id]: false,
-      },
-    }));
+      };
+      delete nextSelectedElementIds[element.id];
+      return {
+        selectedElementIds: makeNextSelectedElementIds(
+          nextSelectedElementIds,
+          prevState,
+        ),
+      };
+    });
 
     const pressures = element.simulatePressure
       ? element.pressures
@@ -4310,10 +4890,7 @@ class App extends React.Component<AppProps, AppState> {
       pointerDownState.origin,
       this.scene,
     );
-    this.scene.replaceAllElements([
-      ...this.scene.getElementsIncludingDeleted(),
-      element,
-    ]);
+    this.scene.addNewElement(element);
     this.setState({
       draggingElement: element,
       editingElement: element,
@@ -4331,6 +4908,11 @@ class App extends React.Component<AppProps, AppState> {
   }) => {
     const [gridX, gridY] = getGridPoint(sceneX, sceneY, this.state.gridSize);
 
+    const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
+      x: gridX,
+      y: gridY,
+    });
+
     const element = newImageElement({
       type: "image",
       x: gridX,
@@ -4344,13 +4926,14 @@ class App extends React.Component<AppProps, AppState> {
       roundness: null,
       opacity: this.state.currentItemOpacity,
       locked: false,
+      frameId: topLayerFrame ? topLayerFrame.id : null,
     });
 
     return element;
   };
 
   private handleLinearElementOnPointerDown = (
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
     elementType: ExcalidrawLinearElement["type"],
     pointerDownState: PointerDownState,
   ): void => {
@@ -4388,10 +4971,13 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       this.setState((prevState) => ({
-        selectedElementIds: {
-          ...prevState.selectedElementIds,
-          [multiElement.id]: true,
-        },
+        selectedElementIds: makeNextSelectedElementIds(
+          {
+            ...prevState.selectedElementIds,
+            [multiElement.id]: true,
+          },
+          prevState,
+        ),
       }));
       // clicking outside commit zone → update reference for last committed
       // point
@@ -4406,6 +4992,11 @@ class App extends React.Component<AppProps, AppState> {
         this.state.gridSize,
       );
 
+      const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
+        x: gridX,
+        y: gridY,
+      });
+
       /* If arrow is pre-arrowheads, it will have undefined for both start and end arrowheads.
       If so, we want it to be null for start and "arrow" for end. If the linear item is not
       an arrow, we want it to be null for both. Otherwise, we want it to use the
@@ -4435,13 +5026,20 @@ class App extends React.Component<AppProps, AppState> {
         startArrowhead,
         endArrowhead,
         locked: false,
+        frameId: topLayerFrame ? topLayerFrame.id : null,
       });
-      this.setState((prevState) => ({
-        selectedElementIds: {
+      this.setState((prevState) => {
+        const nextSelectedElementIds = {
           ...prevState.selectedElementIds,
-          [element.id]: false,
-        },
-      }));
+        };
+        delete nextSelectedElementIds[element.id];
+        return {
+          selectedElementIds: makeNextSelectedElementIds(
+            nextSelectedElementIds,
+            prevState,
+          ),
+        };
+      });
       mutateElement(element, {
         points: [...element.points, [0, 0]],
       });
@@ -4449,10 +5047,8 @@ class App extends React.Component<AppProps, AppState> {
         pointerDownState.origin,
         this.scene,
       );
-      this.scene.replaceAllElements([
-        ...this.scene.getElementsIncludingDeleted(),
-        element,
-      ]);
+
+      this.scene.addNewElement(element);
       this.setState({
         draggingElement: element,
         editingElement: element,
@@ -4471,6 +5067,12 @@ class App extends React.Component<AppProps, AppState> {
       pointerDownState.origin.y,
       this.state.gridSize,
     );
+
+    const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
+      x: gridX,
+      y: gridY,
+    });
+
     const element = newElement({
       type: elementType,
       x: gridX,
@@ -4491,6 +5093,7 @@ class App extends React.Component<AppProps, AppState> {
             }
           : null,
       locked: false,
+      frameId: topLayerFrame ? topLayerFrame.id : null,
     });
 
     if (element.type === "selection") {
@@ -4499,10 +5102,7 @@ class App extends React.Component<AppProps, AppState> {
         draggingElement: element,
       });
     } else {
-      this.scene.replaceAllElements([
-        ...this.scene.getElementsIncludingDeleted(),
-        element,
-      ]);
+      this.scene.addNewElement(element);
       this.setState({
         multiElement: null,
         draggingElement: element,
@@ -4511,6 +5111,35 @@ class App extends React.Component<AppProps, AppState> {
     }
   };
 
+  private createFrameElementOnPointerDown = (
+    pointerDownState: PointerDownState,
+  ): void => {
+    const [gridX, gridY] = getGridPoint(
+      pointerDownState.origin.x,
+      pointerDownState.origin.y,
+      this.state.gridSize,
+    );
+
+    const frame = newFrameElement({
+      x: gridX,
+      y: gridY,
+      opacity: this.state.currentItemOpacity,
+      locked: false,
+      ...FRAME_STYLE,
+    });
+
+    this.scene.replaceAllElements([
+      ...this.scene.getElementsIncludingDeleted(),
+      frame,
+    ]);
+
+    this.setState({
+      multiElement: null,
+      draggingElement: frame,
+      editingElement: frame,
+    });
+  };
+
   private onKeyDownFromPointerDownHandler(
     pointerDownState: PointerDownState,
   ): (event: KeyboardEvent) => void {
@@ -4546,7 +5175,7 @@ class App extends React.Component<AppProps, AppState> {
       if (pointerDownState.drag.offset === null) {
         pointerDownState.drag.offset = tupleToCoors(
           getDragOffsetXY(
-            getSelectedElements(this.scene.getNonDeletedElements(), this.state),
+            this.scene.getSelectedElements(this.state),
             pointerDownState.origin.x,
             pointerDownState.origin.y,
           ),
@@ -4709,19 +5338,35 @@ class App extends React.Component<AppProps, AppState> {
           pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) &&
         !isSelectingPointsInLineEditor
       ) {
-        const selectedElements = getSelectedElements(
-          this.scene.getNonDeletedElements(),
-          this.state,
-        );
+        const selectedElements = this.scene.getSelectedElements(this.state);
+
         if (selectedElements.every((element) => element.locked)) {
           return;
         }
+
+        const selectedElementsHasAFrame = selectedElements.find((e) =>
+          isFrameElement(e),
+        );
+        const topLayerFrame = this.getTopLayerFrameAtSceneCoords(pointerCoords);
+        this.setState({
+          frameToHighlight:
+            topLayerFrame && !selectedElementsHasAFrame ? topLayerFrame : null,
+        });
+
         // Marking that click was used for dragging to check
         // if elements should be deselected on pointerup
         pointerDownState.drag.hasOccurred = true;
+        this.setState({
+          selectedElementsAreBeingDragged: true,
+        });
         // prevent dragging even if we're no longer holding cmd/ctrl otherwise
         // it would have weird results (stuff jumping all over the screen)
-        if (selectedElements.length > 0 && !pointerDownState.withCmdOrCtrl) {
+        // Checking for editingElement to avoid jump while editing on mobile #6503
+        if (
+          selectedElements.length > 0 &&
+          !pointerDownState.withCmdOrCtrl &&
+          !this.state.editingElement
+        ) {
           const [dragX, dragY] = getGridPoint(
             pointerCoords.x - pointerDownState.drag.offset.x,
             pointerCoords.y - pointerDownState.drag.offset.y,
@@ -4735,16 +5380,20 @@ class App extends React.Component<AppProps, AppState> {
 
           // We only drag in one direction if shift is pressed
           const lockDirection = event.shiftKey;
-          dragSelectedElements(
-            pointerDownState,
-            selectedElements,
-            dragX,
-            dragY,
-            lockDirection,
-            dragDistanceX,
-            dragDistanceY,
-            this.state,
-          );
+          // when we're editing the name of a frame, we want the user to be
+          // able to select and interact with the text input
+          !this.state.editingFrame &&
+            dragSelectedElements(
+              pointerDownState,
+              selectedElements,
+              dragX,
+              dragY,
+              lockDirection,
+              dragDistanceX,
+              dragDistanceY,
+              this.state,
+              this.scene,
+            );
           this.maybeSuggestBindingForAll(selectedElements);
 
           // We duplicate the selected element if alt is pressed on pointer move
@@ -4760,15 +5409,21 @@ class App extends React.Component<AppProps, AppState> {
             const groupIdMap = new Map();
             const oldIdToDuplicatedId = new Map();
             const hitElement = pointerDownState.hit.element;
-            const elements = this.scene.getElementsIncludingDeleted();
-            const selectedElementIds: Array<ExcalidrawElement["id"]> =
-              getSelectedElements(elements, this.state, true).map(
-                (element) => element.id,
-              );
+            const selectedElementIds = new Set(
+              this.scene
+                .getSelectedElements({
+                  selectedElementIds: this.state.selectedElementIds,
+                  includeBoundTextElement: true,
+                  includeElementsInFrames: true,
+                })
+                .map((element) => element.id),
+            );
+
+            const elements = this.scene.getNonDeletedElements();
 
             for (const element of elements) {
               if (
-                selectedElementIds.includes(element.id) ||
+                selectedElementIds.has(element.id) ||
                 // case: the state.selectedElementIds might not have been
                 // updated yet by the time this mousemove event is fired
                 (element.id === hitElement?.id &&
@@ -4807,6 +5462,11 @@ class App extends React.Component<AppProps, AppState> {
               oldIdToDuplicatedId,
               "duplicatesServeAsOld",
             );
+            bindElementsToFramesAfterDuplication(
+              nextSceneElements,
+              elementsToAppend,
+              oldIdToDuplicatedId,
+            );
             this.scene.replaceAllElements(nextSceneElements);
           }
           return;
@@ -4841,6 +5501,9 @@ class App extends React.Component<AppProps, AppState> {
         }
       } else if (isLinearElement(draggingElement)) {
         pointerDownState.drag.hasOccurred = true;
+        this.setState({
+          selectedElementsAreBeingDragged: true,
+        });
         const points = draggingElement.points;
         let dx = gridX - draggingElement.x;
         let dy = gridY - draggingElement.y;
@@ -4898,14 +5561,10 @@ class App extends React.Component<AppProps, AppState> {
                   },
                 },
                 this.scene.getNonDeletedElements(),
+                prevState,
+                this,
               ),
             );
-          } else {
-            this.setState({
-              selectedElementIds: {},
-              selectedGroupIds: {},
-              editingGroupId: null,
-            });
           }
         }
         // box-select line editor points
@@ -4921,28 +5580,29 @@ class App extends React.Component<AppProps, AppState> {
             elements,
             draggingElement,
           );
-          this.setState((prevState) =>
-            selectGroupsForSelectedElements(
+          this.setState((prevState) => {
+            const nextSelectedElementIds = elementsWithinSelection.reduce(
+              (acc: Record<ExcalidrawElement["id"], true>, element) => {
+                acc[element.id] = true;
+                return acc;
+              },
+              {},
+            );
+
+            if (pointerDownState.hit.element) {
+              // if using ctrl/cmd, select the hitElement only if we
+              // haven't box-selected anything else
+              if (!elementsWithinSelection.length) {
+                nextSelectedElementIds[pointerDownState.hit.element.id] = true;
+              } else {
+                delete nextSelectedElementIds[pointerDownState.hit.element.id];
+              }
+            }
+
+            return selectGroupsForSelectedElements(
               {
                 ...prevState,
-                selectedElementIds: {
-                  ...prevState.selectedElementIds,
-                  ...elementsWithinSelection.reduce(
-                    (acc: Record<ExcalidrawElement["id"], true>, element) => {
-                      acc[element.id] = true;
-                      return acc;
-                    },
-                    {},
-                  ),
-                  ...(pointerDownState.hit.element
-                    ? {
-                        // if using ctrl/cmd, select the hitElement only if we
-                        // haven't box-selected anything else
-                        [pointerDownState.hit.element.id]:
-                          !elementsWithinSelection.length,
-                      }
-                    : null),
-                },
+                selectedElementIds: nextSelectedElementIds,
                 showHyperlinkPopup:
                   elementsWithinSelection.length === 1 &&
                   elementsWithinSelection[0].link
@@ -4959,8 +5619,10 @@ class App extends React.Component<AppProps, AppState> {
                     : null,
               },
               this.scene.getNonDeletedElements(),
-            ),
-          );
+              prevState,
+              this,
+            );
+          });
         }
       }
     });
@@ -4997,6 +5659,10 @@ class App extends React.Component<AppProps, AppState> {
     pointerDownState: PointerDownState,
   ): (event: PointerEvent) => void {
     return withBatchedUpdates((childEvent: PointerEvent) => {
+      if (pointerDownState.eventListeners.onMove) {
+        pointerDownState.eventListeners.onMove.flush();
+      }
+
       const {
         draggingElement,
         resizingElement,
@@ -5010,6 +5676,8 @@ class App extends React.Component<AppProps, AppState> {
         isRotating: false,
         resizingElement: null,
         selectionElement: null,
+        frameToHighlight: null,
+        elementsToHighlight: null,
         cursorButton: "up",
         // text elements are reset on finalize, and resetting on pointerup
         // may cause issues with double taps
@@ -5021,6 +5689,10 @@ class App extends React.Component<AppProps, AppState> {
 
       this.savePointer(childEvent.clientX, childEvent.clientY, "up");
 
+      this.setState({
+        selectedElementsAreBeingDragged: false,
+      });
+
       // Handle end of dragging a point of a linear element, might close a loop
       // and sets binding element
       if (this.state.editingLinearElement) {
@@ -5048,10 +5720,7 @@ class App extends React.Component<AppProps, AppState> {
           pointerDownState.hit?.element?.id !==
           this.state.selectedLinearElement.elementId
         ) {
-          const selectedELements = getSelectedElements(
-            this.scene.getNonDeletedElements(),
-            this.state,
-          );
+          const selectedELements = this.scene.getSelectedElements(this.state);
           // set selectedLinearElement to null if there is more than one element selected since we don't want to show linear element handles
           if (selectedELements.length > 1) {
             this.setState({ selectedLinearElement: null });
@@ -5088,10 +5757,6 @@ class App extends React.Component<AppProps, AppState> {
 
       lastPointerUp = null;
 
-      if (pointerDownState.eventListeners.onMove) {
-        pointerDownState.eventListeners.onMove.flush();
-      }
-
       window.removeEventListener(
         EVENT.POINTER_MOVE,
         pointerDownState.eventListeners.onMove!,
@@ -5148,7 +5813,12 @@ class App extends React.Component<AppProps, AppState> {
         try {
           this.initializeImageDimensions(imageElement);
           this.setState(
-            { selectedElementIds: { [imageElement.id]: true } },
+            {
+              selectedElementIds: makeNextSelectedElementIds(
+                { [imageElement.id]: true },
+                this.state,
+              ),
+            },
             () => {
               this.actionManager.executeAction(actionFinalize);
             },
@@ -5212,10 +5882,13 @@ class App extends React.Component<AppProps, AppState> {
               activeTool: updateActiveTool(this.state, {
                 type: "selection",
               }),
-              selectedElementIds: {
-                ...prevState.selectedElementIds,
-                [draggingElement.id]: true,
-              },
+              selectedElementIds: makeNextSelectedElementIds(
+                {
+                  ...prevState.selectedElementIds,
+                  [draggingElement.id]: true,
+                },
+                prevState,
+              ),
               selectedLinearElement: new LinearElementEditor(
                 draggingElement,
                 this.scene,
@@ -5246,6 +5919,150 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       if (draggingElement) {
+        if (pointerDownState.drag.hasOccurred) {
+          const sceneCoords = viewportCoordsToSceneCoords(
+            childEvent,
+            this.state,
+          );
+
+          // when editing the points of a linear element, we check if the
+          // linear element still is in the frame afterwards
+          // if not, the linear element will be removed from its frame (if any)
+          if (
+            this.state.selectedLinearElement &&
+            this.state.selectedLinearElement.isDragging
+          ) {
+            const linearElement = this.scene.getElement(
+              this.state.selectedLinearElement.elementId,
+            );
+
+            if (linearElement?.frameId) {
+              const frame = getContainingFrame(linearElement);
+
+              if (frame && linearElement) {
+                if (!elementOverlapsWithFrame(linearElement, frame)) {
+                  // remove the linear element from all groups
+                  // before removing it from the frame as well
+                  mutateElement(linearElement, {
+                    groupIds: [],
+                  });
+
+                  this.scene.replaceAllElements(
+                    removeElementsFromFrame(
+                      this.scene.getElementsIncludingDeleted(),
+                      [linearElement],
+                      this.state,
+                    ),
+                  );
+                }
+              }
+            }
+          } else {
+            // update the relationships between selected elements and frames
+            const topLayerFrame =
+              this.getTopLayerFrameAtSceneCoords(sceneCoords);
+
+            const selectedElements = this.scene.getSelectedElements(this.state);
+            let nextElements = this.scene.getElementsIncludingDeleted();
+
+            const updateGroupIdsAfterEditingGroup = (
+              elements: ExcalidrawElement[],
+            ) => {
+              if (elements.length > 0) {
+                for (const element of elements) {
+                  const index = element.groupIds.indexOf(
+                    this.state.editingGroupId!,
+                  );
+
+                  mutateElement(
+                    element,
+                    {
+                      groupIds: element.groupIds.slice(0, index),
+                    },
+                    false,
+                  );
+                }
+
+                nextElements.forEach((element) => {
+                  if (
+                    element.groupIds.length &&
+                    getElementsInGroup(
+                      nextElements,
+                      element.groupIds[element.groupIds.length - 1],
+                    ).length < 2
+                  ) {
+                    mutateElement(
+                      element,
+                      {
+                        groupIds: [],
+                      },
+                      false,
+                    );
+                  }
+                });
+
+                this.setState({
+                  editingGroupId: null,
+                });
+              }
+            };
+
+            if (
+              topLayerFrame &&
+              !this.state.selectedElementIds[topLayerFrame.id]
+            ) {
+              const elementsToAdd = selectedElements.filter(
+                (element) =>
+                  element.frameId !== topLayerFrame.id &&
+                  isElementInFrame(element, nextElements, this.state),
+              );
+
+              if (this.state.editingGroupId) {
+                updateGroupIdsAfterEditingGroup(elementsToAdd);
+              }
+
+              nextElements = addElementsToFrame(
+                nextElements,
+                elementsToAdd,
+                topLayerFrame,
+              );
+            } else if (!topLayerFrame) {
+              if (this.state.editingGroupId) {
+                const elementsToRemove = selectedElements.filter(
+                  (element) =>
+                    element.frameId &&
+                    !isElementInFrame(element, nextElements, this.state),
+                );
+
+                updateGroupIdsAfterEditingGroup(elementsToRemove);
+              }
+            }
+
+            nextElements = updateFrameMembershipOfSelectedElements(
+              this.scene.getElementsIncludingDeleted(),
+              this.state,
+              this,
+            );
+
+            this.scene.replaceAllElements(nextElements);
+          }
+        }
+
+        if (draggingElement.type === "frame") {
+          const elementsInsideFrame = getElementsInNewFrame(
+            this.scene.getElementsIncludingDeleted(),
+            draggingElement,
+          );
+
+          this.scene.replaceAllElements(
+            addElementsToFrame(
+              this.scene.getElementsIncludingDeleted(),
+              elementsInsideFrame,
+              draggingElement,
+            ),
+          );
+        }
+
         mutateElement(
           draggingElement,
           getNormalizedDimensions(draggingElement),
@@ -5264,6 +6081,36 @@ class App extends React.Component<AppProps, AppState> {
         );
       }
 
+      // handle frame membership for resizing frames and/or selected elements
+      if (pointerDownState.resize.isResizing) {
+        let nextElements = updateFrameMembershipOfSelectedElements(
+          this.scene.getElementsIncludingDeleted(),
+          this.state,
+          this,
+        );
+
+        const selectedFrames = this.scene
+          .getSelectedElements(this.state)
+          .filter(
+            (element) => element.type === "frame",
+          ) as ExcalidrawFrameElement[];
+
+        for (const frame of selectedFrames) {
+          nextElements = replaceAllElementsInFrame(
+            nextElements,
+            getElementsInResizingFrame(
+              this.scene.getElementsIncludingDeleted(),
+              frame,
+              this.state,
+            ),
+            frame,
+            this.state,
+          );
+        }
+
+        this.scene.replaceAllElements(nextElements);
+      }
+
       // Code below handles selection when element(s) weren't
       // drag or added to selection on pointer down phase.
       const hitElement = pointerDownState.hit.element;
@@ -5271,10 +6118,7 @@ class App extends React.Component<AppProps, AppState> {
         this.state.selectedLinearElement?.elementId !== hitElement?.id &&
         isLinearElement(hitElement)
       ) {
-        const selectedELements = getSelectedElements(
-          this.scene.getNonDeletedElements(),
-          this.state,
-        );
+        const selectedELements = this.scene.getSelectedElements(this.state);
         // set selectedLinearElement when no other element selected except
         // the one we've hit
         if (selectedELements.length === 1) {
@@ -5333,31 +6177,37 @@ class App extends React.Component<AppProps, AppState> {
         if (childEvent.shiftKey && !this.state.editingLinearElement) {
           if (this.state.selectedElementIds[hitElement.id]) {
             if (isSelectedViaGroup(this.state, hitElement)) {
-              // We want to unselect all groups hitElement is part of
-              // as well as all elements that are part of the groups
-              // hitElement is part of
-              const idsOfSelectedElementsThatAreInGroups = hitElement.groupIds
-                .flatMap((groupId) =>
-                  getElementsInGroup(
-                    this.scene.getNonDeletedElements(),
-                    groupId,
-                  ),
-                )
-                .map((element) => ({ [element.id]: false }))
-                .reduce((prevId, acc) => ({ ...prevId, ...acc }), {});
+              this.setState((_prevState) => {
+                const nextSelectedElementIds = {
+                  ..._prevState.selectedElementIds,
+                };
 
-              this.setState((_prevState) => ({
-                selectedGroupIds: {
-                  ..._prevState.selectedElementIds,
-                  ...hitElement.groupIds
-                    .map((gId) => ({ [gId]: false }))
-                    .reduce((prev, acc) => ({ ...prev, ...acc }), {}),
-                },
-                selectedElementIds: {
-                  ..._prevState.selectedElementIds,
-                  ...idsOfSelectedElementsThatAreInGroups,
-                },
-              }));
+                // We want to unselect all groups hitElement is part of
+                // as well as all elements that are part of the groups
+                // hitElement is part of
+                for (const groupedElement of hitElement.groupIds.flatMap(
+                  (groupId) =>
+                    getElementsInGroup(
+                      this.scene.getNonDeletedElements(),
+                      groupId,
+                    ),
+                )) {
+                  delete nextSelectedElementIds[groupedElement.id];
+                }
+
+                return {
+                  selectedGroupIds: {
+                    ..._prevState.selectedElementIds,
+                    ...hitElement.groupIds
+                      .map((gId) => ({ [gId]: false }))
+                      .reduce((prev, acc) => ({ ...prev, ...acc }), {}),
+                  },
+                  selectedElementIds: makeNextSelectedElementIds(
+                    nextSelectedElementIds,
+                    _prevState,
+                  ),
+                };
+              });
               // if not gragging a linear element point (outside editor)
             } else if (!this.state.selectedLinearElement?.isDragging) {
               // remove element from selection while
@@ -5366,11 +6216,11 @@ class App extends React.Component<AppProps, AppState> {
               this.setState((prevState) => {
                 const newSelectedElementIds = {
                   ...prevState.selectedElementIds,
-                  [hitElement!.id]: false,
                 };
+                delete newSelectedElementIds[hitElement!.id];
                 const newSelectedElements = getSelectedElements(
                   this.scene.getNonDeletedElements(),
-                  { ...prevState, selectedElementIds: newSelectedElementIds },
+                  { selectedElementIds: newSelectedElementIds },
                 );
 
                 return selectGroupsForSelectedElements(
@@ -5388,17 +6238,57 @@ class App extends React.Component<AppProps, AppState> {
                         : prevState.selectedLinearElement,
                   },
                   this.scene.getNonDeletedElements(),
+                  prevState,
+                  this,
                 );
               });
             }
+          } else if (
+            hitElement.frameId &&
+            this.state.selectedElementIds[hitElement.frameId]
+          ) {
+            // when hitElement is part of a selected frame, deselect the frame
+            // to avoid frame and containing elements selected simultaneously
+            this.setState((prevState) => {
+              const nextSelectedElementIds: {
+                [id: string]: true;
+              } = {
+                ...prevState.selectedElementIds,
+                [hitElement.id]: true,
+              };
+              // deselect the frame
+              delete nextSelectedElementIds[hitElement.frameId!];
+
+              // deselect groups containing the frame
+              (this.scene.getElement(hitElement.frameId!)?.groupIds ?? [])
+                .flatMap((gid) =>
+                  getElementsInGroup(this.scene.getNonDeletedElements(), gid),
+                )
+                .forEach((element) => {
+                  delete nextSelectedElementIds[element.id];
+                });
+
+              return selectGroupsForSelectedElements(
+                {
+                  ...prevState,
+                  selectedElementIds: nextSelectedElementIds,
+                  showHyperlinkPopup: hitElement.link ? "info" : false,
+                },
+                this.scene.getNonDeletedElements(),
+                prevState,
+                this,
+              );
+            });
           } else {
-            // add element to selection while
-            // keeping prev elements selected
+            // add element to selection while keeping prev elements selected
             this.setState((_prevState) => ({
-              selectedElementIds: {
-                ..._prevState.selectedElementIds,
-                [hitElement!.id]: true,
-              },
+              selectedElementIds: makeNextSelectedElementIds(
+                {
+                  ..._prevState.selectedElementIds,
+                  [hitElement!.id]: true,
+                },
+                _prevState,
+              ),
             }));
           }
         } else {
@@ -5416,6 +6306,8 @@ class App extends React.Component<AppProps, AppState> {
                     : prevState.selectedLinearElement,
               },
               this.scene.getNonDeletedElements(),
+              prevState,
+              this,
             ),
           }));
         }
@@ -5428,6 +6320,7 @@ class App extends React.Component<AppProps, AppState> {
           isHittingElementBoundingBoxWithoutHittingElement(
             hitElement,
             this.state,
+            this.frameNameBoundsCache,
             pointerDownState.origin.x,
             pointerDownState.origin.y,
           )) ||
@@ -5439,7 +6332,7 @@ class App extends React.Component<AppProps, AppState> {
         } else {
           // Deselect selected elements
           this.setState({
-            selectedElementIds: {},
+            selectedElementIds: makeNextSelectedElementIds({}, this.state),
             selectedGroupIds: {},
             editingGroupId: null,
           });
@@ -5450,13 +6343,17 @@ class App extends React.Component<AppProps, AppState> {
       if (
         !activeTool.locked &&
         activeTool.type !== "freedraw" &&
-        draggingElement
+        draggingElement &&
+        draggingElement.type !== "selection"
       ) {
         this.setState((prevState) => ({
-          selectedElementIds: {
-            ...prevState.selectedElementIds,
-            [draggingElement.id]: true,
-          },
+          selectedElementIds: makeNextSelectedElementIds(
+            {
+              ...prevState.selectedElementIds,
+              [draggingElement.id]: true,
+            },
+            prevState,
+          ),
         }));
       }
 
@@ -5470,9 +6367,7 @@ class App extends React.Component<AppProps, AppState> {
       if (pointerDownState.drag.hasOccurred || isResizing || isRotating) {
         (isBindingEnabled(this.state)
           ? bindOrUnbindSelectedElements
-          : unbindLinearElements)(
-          getSelectedElements(this.scene.getNonDeletedElements(), this.state),
-        );
+          : unbindLinearElements)(this.scene.getSelectedElements(this.state));
       }
 
       if (!activeTool.locked && activeTool.type !== "freedraw") {
@@ -5510,6 +6405,14 @@ class App extends React.Component<AppProps, AppState> {
         return newElementWith(ele, {
           opacity: pointerDownState.elementIdsToErase[ele.containerId].opacity,
         });
+      } else if (
+        ele.frameId &&
+        pointerDownState.elementIdsToErase[ele.frameId] &&
+        pointerDownState.elementIdsToErase[ele.frameId].erase
+      ) {
+        return newElementWith(ele, {
+          opacity: pointerDownState.elementIdsToErase[ele.frameId].opacity,
+        });
       }
       return ele;
     });
@@ -5530,6 +6433,12 @@ class App extends React.Component<AppProps, AppState> {
         pointerDownState.elementIdsToErase[ele.containerId].erase
       ) {
         return newElementWith(ele, { isDeleted: true });
+      } else if (
+        ele.frameId &&
+        pointerDownState.elementIdsToErase[ele.frameId] &&
+        pointerDownState.elementIdsToErase[ele.frameId].erase
+      ) {
+        return newElementWith(ele, { isDeleted: true });
       }
       return ele;
     });
@@ -5669,10 +6578,7 @@ class App extends React.Component<AppProps, AppState> {
     imageFile: File,
     showCursorImagePreview?: boolean,
   ) => {
-    this.scene.replaceAllElements([
-      ...this.scene.getElementsIncludingDeleted(),
-      imageElement,
-    ]);
+    this.scene.addNewElement(imageElement);
 
     try {
       await this.initializeImage({
@@ -5744,7 +6650,9 @@ class App extends React.Component<AppProps, AppState> {
 
       const imageFile = await fileOpen({
         description: "Image",
-        extensions: ["jpg", "png", "svg", "gif"],
+        extensions: Object.keys(
+          IMAGE_MIME_TYPES,
+        ) as (keyof typeof IMAGE_MIME_TYPES)[],
       });
 
       const imageElement = this.createImageElement({
@@ -5757,7 +6665,10 @@ class App extends React.Component<AppProps, AppState> {
         this.initializeImageDimensions(imageElement);
         this.setState(
           {
-            selectedElementIds: { [imageElement.id]: true },
+            selectedElementIds: makeNextSelectedElementIds(
+              { [imageElement.id]: true },
+              this.state,
+            ),
           },
           () => {
             this.actionManager.executeAction(actionFinalize);
@@ -5914,7 +6825,7 @@ class App extends React.Component<AppProps, AppState> {
   }, IMAGE_RENDER_TIMEOUT);
 
   private updateBindingEnabledOnPointerMove = (
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
   ) => {
     const shouldEnableBinding = shouldEnableBindingForPointerEvent(event);
     if (this.state.isBindingEnabled !== shouldEnableBinding) {
@@ -5984,7 +6895,7 @@ class App extends React.Component<AppProps, AppState> {
 
   private clearSelection(hitElement: ExcalidrawElement | null): void {
     this.setState((prevState) => ({
-      selectedElementIds: {},
+      selectedElementIds: makeNextSelectedElementIds({}, prevState),
       selectedGroupIds: {},
       // Continue editing the same group if the user selected a different
       // element from it
@@ -5996,7 +6907,7 @@ class App extends React.Component<AppProps, AppState> {
           : null,
     }));
     this.setState({
-      selectedElementIds: {},
+      selectedElementIds: makeNextSelectedElementIds({}, this.state),
       previousSelectedElementIds: this.state.selectedElementIds,
     });
   }
@@ -6065,7 +6976,12 @@ class App extends React.Component<AppProps, AppState> {
         const imageElement = this.createImageElement({ sceneX, sceneY });
         this.insertImageElement(imageElement, file);
         this.initializeImageDimensions(imageElement);
-        this.setState({ selectedElementIds: { [imageElement.id]: true } });
+        this.setState({
+          selectedElementIds: makeNextSelectedElementIds(
+            { [imageElement.id]: true },
+            this.state,
+          ),
+        });
 
         return;
       }
@@ -6138,7 +7054,7 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   private handleCanvasContextMenu = (
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
   ) => {
     event.preventDefault();
 
@@ -6158,10 +7074,7 @@ class App extends React.Component<AppProps, AppState> {
       includeLockedElements: true,
     });
 
-    const selectedElements = getSelectedElements(
-      this.scene.getNonDeletedElements(),
-      this.state,
-    );
+    const selectedElements = this.scene.getSelectedElements(this.state);
     const isHittignCommonBoundBox =
       this.isHittingCommonBoundingBoxOfSelectedElements(
         { x, y },
@@ -6190,6 +7103,8 @@ class App extends React.Component<AppProps, AppState> {
                   : null,
               },
               this.scene.getNonDeletedElements(),
+              this.state,
+              this,
             )
           : this.state),
         showHyperlinkPopup: false,
@@ -6259,6 +7174,17 @@ class App extends React.Component<AppProps, AppState> {
       );
 
       this.maybeSuggestBindingForAll([draggingElement]);
+
+      // highlight elements that are to be added to frames on frames creation
+      if (this.state.activeTool.type === "frame") {
+        this.setState({
+          elementsToHighlight: getElementsInResizingFrame(
+            this.scene.getNonDeletedElements(),
+            draggingElement as ExcalidrawFrameElement,
+            this.state,
+          ),
+        });
+      }
     }
   };
 
@@ -6266,11 +7192,17 @@ class App extends React.Component<AppProps, AppState> {
     pointerDownState: PointerDownState,
     event: MouseEvent | KeyboardEvent,
   ): boolean => {
-    const selectedElements = getSelectedElements(
-      this.scene.getNonDeletedElements(),
-      this.state,
-    );
+    const selectedElements = this.scene.getSelectedElements(this.state);
+    const selectedFrames = selectedElements.filter(
+      (element) => element.type === "frame",
+    ) as ExcalidrawFrameElement[];
+
     const transformHandleType = pointerDownState.resize.handleType;
+
+    if (selectedFrames.length > 0 && transformHandleType === "rotation") {
+      return false;
+    }
+
     this.setState({
       // TODO: rename this state field to "isScaling" to distinguish
       // it from the generic "isResizing" which includes scaling and
@@ -6284,6 +7216,29 @@ class App extends React.Component<AppProps, AppState> {
       pointerCoords.y - pointerDownState.resize.offset.y,
       this.state.gridSize,
     );
+
+    const frameElementsOffsetsMap = new Map<
+      string,
+      {
+        x: number;
+        y: number;
+      }
+    >();
+
+    selectedFrames.forEach((frame) => {
+      const elementsInFrame = getFrameElements(
+        this.scene.getNonDeletedElements(),
+        frame.id,
+      );
+
+      elementsInFrame.forEach((element) => {
+        frameElementsOffsetsMap.set(frame.id + element.id, {
+          x: element.x - frame.x,
+          y: element.y - frame.y,
+        });
+      });
+    });
+
     if (
       transformElements(
         pointerDownState,
@@ -6302,6 +7257,53 @@ class App extends React.Component<AppProps, AppState> {
       )
     ) {
       this.maybeSuggestBindingForAll(selectedElements);
+
+      const elementsToHighlight = new Set<ExcalidrawElement>();
+      selectedFrames.forEach((frame) => {
+        const elementsInFrame = getFrameElements(
+          this.scene.getNonDeletedElements(),
+          frame.id,
+        );
+
+        // keep elements' positions relative to their frames on frames resizing
+        if (transformHandleType) {
+          if (transformHandleType.includes("w")) {
+            elementsInFrame.forEach((element) => {
+              mutateElement(element, {
+                x:
+                  frame.x +
+                  (frameElementsOffsetsMap.get(frame.id + element.id)?.x || 0),
+                y:
+                  frame.y +
+                  (frameElementsOffsetsMap.get(frame.id + element.id)?.y || 0),
+              });
+            });
+          }
+          if (transformHandleType.includes("n")) {
+            elementsInFrame.forEach((element) => {
+              mutateElement(element, {
+                x:
+                  frame.x +
+                  (frameElementsOffsetsMap.get(frame.id + element.id)?.x || 0),
+                y:
+                  frame.y +
+                  (frameElementsOffsetsMap.get(frame.id + element.id)?.y || 0),
+              });
+            });
+          }
+        }
+
+        getElementsInResizingFrame(
+          this.scene.getNonDeletedElements(),
+          frame,
+          this.state,
+        ).forEach((element) => elementsToHighlight.add(element));
+      });
+
+      this.setState({
+        elementsToHighlight: [...elementsToHighlight],
+      });
+
       return true;
     }
     return false;
@@ -6336,6 +7338,7 @@ class App extends React.Component<AppProps, AppState> {
         copyText,
         CONTEXT_MENU_SEPARATOR,
         actionSelectAll,
+        actionUnlockAllElements,
         CONTEXT_MENU_SEPARATOR,
         actionToggleGridMode,
         actionToggleZenMode,
@@ -6357,6 +7360,8 @@ class App extends React.Component<AppProps, AppState> {
       actionCut,
       actionCopy,
       actionPaste,
+      actionSelectAllElementsInFrame,
+      actionRemoveAllElementsFromFrame,
       CONTEXT_MENU_SEPARATOR,
       ...options,
       CONTEXT_MENU_SEPARATOR,
@@ -6366,7 +7371,7 @@ class App extends React.Component<AppProps, AppState> {
       actionGroup,
       actionUnbindText,
       actionBindText,
-      actionCreateContainerFromText,
+      actionWrapTextInContainer,
       actionUngroup,
       CONTEXT_MENU_SEPARATOR,
       actionAddToLibrary,
@@ -6382,66 +7387,68 @@ class App extends React.Component<AppProps, AppState> {
       actionToggleLinearEditor,
       actionLink,
       actionDuplicateSelection,
-      actionToggleLock,
+      actionToggleElementLock,
       CONTEXT_MENU_SEPARATOR,
       actionDeleteSelected,
     ];
   };
 
-  private handleWheel = withBatchedUpdates((event: WheelEvent) => {
-    event.preventDefault();
-    if (isPanning) {
-      return;
-    }
-
-    const { deltaX, deltaY } = event;
-    // note that event.ctrlKey is necessary to handle pinch zooming
-    if (event.metaKey || event.ctrlKey) {
-      const sign = Math.sign(deltaY);
-      const MAX_STEP = ZOOM_STEP * 100;
-      const absDelta = Math.abs(deltaY);
-      let delta = deltaY;
-      if (absDelta > MAX_STEP) {
-        delta = MAX_STEP * sign;
+  private handleWheel = withBatchedUpdates(
+    (event: WheelEvent | React.WheelEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      if (isPanning) {
+        return;
       }
 
-      let newZoom = this.state.zoom.value - delta / 100;
-      // increase zoom steps the more zoomed-in we are (applies to >100% only)
-      newZoom +=
-        Math.log10(Math.max(1, this.state.zoom.value)) *
-        -sign *
-        // reduced amplification for small deltas (small movements on a trackpad)
-        Math.min(1, absDelta / 20);
+      const { deltaX, deltaY } = event;
+      // note that event.ctrlKey is necessary to handle pinch zooming
+      if (event.metaKey || event.ctrlKey) {
+        const sign = Math.sign(deltaY);
+        const MAX_STEP = ZOOM_STEP * 100;
+        const absDelta = Math.abs(deltaY);
+        let delta = deltaY;
+        if (absDelta > MAX_STEP) {
+          delta = MAX_STEP * sign;
+        }
 
-      this.translateCanvas((state) => ({
-        ...getStateForZoom(
-          {
-            viewportX: cursorX,
-            viewportY: cursorY,
-            nextZoom: getNormalizedZoom(newZoom),
-          },
-          state,
-        ),
-        shouldCacheIgnoreZoom: true,
+        let newZoom = this.state.zoom.value - delta / 100;
+        // increase zoom steps the more zoomed-in we are (applies to >100% only)
+        newZoom +=
+          Math.log10(Math.max(1, this.state.zoom.value)) *
+          -sign *
+          // reduced amplification for small deltas (small movements on a trackpad)
+          Math.min(1, absDelta / 20);
+
+        this.translateCanvas((state) => ({
+          ...getStateForZoom(
+            {
+              viewportX: this.lastViewportPosition.x,
+              viewportY: this.lastViewportPosition.y,
+              nextZoom: getNormalizedZoom(newZoom),
+            },
+            state,
+          ),
+          shouldCacheIgnoreZoom: true,
+        }));
+        this.resetShouldCacheIgnoreZoomDebounced();
+        return;
+      }
+
+      // scroll horizontally when shift pressed
+      if (event.shiftKey) {
+        this.translateCanvas(({ zoom, scrollX }) => ({
+          // on Mac, shift+wheel tends to result in deltaX
+          scrollX: scrollX - (deltaY || deltaX) / zoom.value,
+        }));
+        return;
+      }
+
+      this.translateCanvas(({ zoom, scrollX, scrollY }) => ({
+        scrollX: scrollX - deltaX / zoom.value,
+        scrollY: scrollY - deltaY / zoom.value,
       }));
-      this.resetShouldCacheIgnoreZoomDebounced();
-      return;
-    }
-
-    // scroll horizontally when shift pressed
-    if (event.shiftKey) {
-      this.translateCanvas(({ zoom, scrollX }) => ({
-        // on Mac, shift+wheel tends to result in deltaX
-        scrollX: scrollX - (deltaY || deltaX) / zoom.value,
-      }));
-      return;
-    }
-
-    this.translateCanvas(({ zoom, scrollX, scrollY }) => ({
-      scrollX: scrollX - deltaX / zoom.value,
-      scrollY: scrollY - deltaY / zoom.value,
-    }));
-  });
+    },
+  );
 
   private getTextWysiwygSnappedToCenterPosition(
     x: number,
diff --git a/src/components/Avatar.scss b/src/components/Avatar.scss
index 86b9c4238..c0c66f0a2 100644
--- a/src/components/Avatar.scss
+++ b/src/components/Avatar.scss
@@ -10,10 +10,9 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    color: $oc-white;
     cursor: pointer;
-    font-size: 0.625rem;
-    font-weight: 500;
+    font-size: 0.75rem;
+    font-weight: 800;
     line-height: 1;
 
     &-img {
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index 57a7eec26..8b4624b7f 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -1,18 +1,17 @@
 import "./Avatar.scss";
 
 import React, { useState } from "react";
-import { getClientInitials } from "../clients";
+import { getNameInitial } from "../clients";
 
 type AvatarProps = {
   onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   color: string;
-  border: string;
   name: string;
   src?: string;
 };
 
 export const Avatar = ({ color, onClick, name, src }: AvatarProps) => {
-  const shortName = getClientInitials(name);
+  const shortName = getNameInitial(name);
   const [error, setError] = useState(false);
   const loadImg = !error && src;
   const style = loadImg ? undefined : { background: color };
diff --git a/src/components/BraveMeasureTextError.tsx b/src/components/BraveMeasureTextError.tsx
index 8a4a71e4f..1932d7a29 100644
--- a/src/components/BraveMeasureTextError.tsx
+++ b/src/components/BraveMeasureTextError.tsx
@@ -1,39 +1,40 @@
-import { t } from "../i18n";
+import Trans from "./Trans";
+
 const BraveMeasureTextError = () => {
   return (
     <div data-testid="brave-measure-text-error">
       <p>
-        {t("errors.brave_measure_text_error.start")} &nbsp;
-        <span style={{ fontWeight: 600 }}>
-          {t("errors.brave_measure_text_error.aggressive_block_fingerprint")}
-        </span>{" "}
-        {t("errors.brave_measure_text_error.setting_enabled")}.
-        <br />
-        <br />
-        {t("errors.brave_measure_text_error.break")}{" "}
-        <span style={{ fontWeight: 600 }}>
-          {t("errors.brave_measure_text_error.text_elements")}
-        </span>{" "}
-        {t("errors.brave_measure_text_error.in_your_drawings")}.
+        <Trans
+          i18nKey="errors.brave_measure_text_error.line1"
+          bold={(el) => <span style={{ fontWeight: 600 }}>{el}</span>}
+        />
       </p>
       <p>
-        {t("errors.brave_measure_text_error.strongly_recommend")}{" "}
-        <a href="http://docs.excalidraw.com/docs/@excalidraw/excalidraw/faq#turning-off-aggresive-block-fingerprinting-in-brave-browser">
-          {" "}
-          {t("errors.brave_measure_text_error.steps")}
-        </a>{" "}
-        {t("errors.brave_measure_text_error.how")}.
+        <Trans
+          i18nKey="errors.brave_measure_text_error.line2"
+          bold={(el) => <span style={{ fontWeight: 600 }}>{el}</span>}
+        />
       </p>
       <p>
-        {t("errors.brave_measure_text_error.disable_setting")}{" "}
-        <a href="https://github.com/excalidraw/excalidraw/issues/new">
-          {t("errors.brave_measure_text_error.issue")}
-        </a>{" "}
-        {t("errors.brave_measure_text_error.write")}{" "}
-        <a href="https://discord.gg/UexuTaE">
-          {t("errors.brave_measure_text_error.discord")}
-        </a>
-        .
+        <Trans
+          i18nKey="errors.brave_measure_text_error.line3"
+          link={(el) => (
+            <a href="http://docs.excalidraw.com/docs/@excalidraw/excalidraw/faq#turning-off-aggresive-block-fingerprinting-in-brave-browser">
+              {el}
+            </a>
+          )}
+        />
+      </p>
+      <p>
+        <Trans
+          i18nKey="errors.brave_measure_text_error.line4"
+          issueLink={(el) => (
+            <a href="https://github.com/excalidraw/excalidraw/issues/new">
+              {el}
+            </a>
+          )}
+          discordLink={(el) => <a href="https://discord.gg/UexuTaE">{el}.</a>}
+        />
       </p>
     </div>
   );
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 3303c3ebf..bf548d72f 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,8 +1,12 @@
+import clsx from "clsx";
+import { composeEventHandlers } from "../utils";
 import "./Button.scss";
 
 interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   type?: "button" | "submit" | "reset";
   onSelect: () => any;
+  /** whether button is in active state */
+  selected?: boolean;
   children: React.ReactNode;
   className?: string;
 }
@@ -15,18 +19,18 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
 export const Button = ({
   type = "button",
   onSelect,
+  selected,
   children,
   className = "",
   ...rest
 }: ButtonProps) => {
   return (
     <button
-      onClick={(event) => {
+      onClick={composeEventHandlers(rest.onClick, (event) => {
         onSelect();
-        rest.onClick?.(event);
-      }}
+      })}
       type={type}
-      className={`excalidraw-button ${className}`}
+      className={clsx("excalidraw-button", className, { selected })}
       {...rest}
     >
       {children}
diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
deleted file mode 100644
index af5f4175b..000000000
--- a/src/components/ColorPicker.tsx
+++ /dev/null
@@ -1,440 +0,0 @@
-import React from "react";
-import { Popover } from "./Popover";
-import { isTransparent } from "../utils";
-
-import "./ColorPicker.scss";
-import { isArrowKey, KEYS } from "../keys";
-import { t, getLanguage } from "../i18n";
-import { isWritableElement } from "../utils";
-import colors from "../colors";
-import { ExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
-
-const MAX_CUSTOM_COLORS = 5;
-const MAX_DEFAULT_COLORS = 15;
-
-export const getCustomColors = (
-  elements: readonly ExcalidrawElement[],
-  type: "elementBackground" | "elementStroke",
-) => {
-  const customColors: string[] = [];
-  const updatedElements = elements
-    .filter((element) => !element.isDeleted)
-    .sort((ele1, ele2) => ele2.updated - ele1.updated);
-
-  let index = 0;
-  const elementColorTypeMap = {
-    elementBackground: "backgroundColor",
-    elementStroke: "strokeColor",
-  };
-  const colorType = elementColorTypeMap[type] as
-    | "backgroundColor"
-    | "strokeColor";
-  while (
-    index < updatedElements.length &&
-    customColors.length < MAX_CUSTOM_COLORS
-  ) {
-    const element = updatedElements[index];
-
-    if (
-      customColors.length < MAX_CUSTOM_COLORS &&
-      isCustomColor(element[colorType], type) &&
-      !customColors.includes(element[colorType])
-    ) {
-      customColors.push(element[colorType]);
-    }
-    index++;
-  }
-  return customColors;
-};
-
-const isCustomColor = (
-  color: string,
-  type: "elementBackground" | "elementStroke",
-) => {
-  return !colors[type].includes(color);
-};
-
-const isValidColor = (color: string) => {
-  const style = new Option().style;
-  style.color = color;
-  return !!style.color;
-};
-
-const getColor = (color: string): string | null => {
-  if (isTransparent(color)) {
-    return color;
-  }
-
-  // testing for `#` first fixes a bug on Electron (more specfically, an
-  // Obsidian popout window), where a hex color without `#` is (incorrectly)
-  // considered valid
-  return isValidColor(`#${color}`)
-    ? `#${color}`
-    : isValidColor(color)
-    ? color
-    : null;
-};
-
-// This is a narrow reimplementation of the awesome react-color Twitter component
-// https://github.com/casesandberg/react-color/blob/master/src/components/twitter/Twitter.js
-
-// Unfortunately, we can't detect keyboard layout in the browser. So this will
-// only work well for QWERTY but not AZERTY or others...
-const keyBindings = [
-  ["1", "2", "3", "4", "5"],
-  ["q", "w", "e", "r", "t"],
-  ["a", "s", "d", "f", "g"],
-  ["z", "x", "c", "v", "b"],
-].flat();
-
-const Picker = ({
-  colors,
-  color,
-  onChange,
-  onClose,
-  label,
-  showInput = true,
-  type,
-  elements,
-}: {
-  colors: string[];
-  color: string | null;
-  onChange: (color: string) => void;
-  onClose: () => void;
-  label: string;
-  showInput: boolean;
-  type: "canvasBackground" | "elementBackground" | "elementStroke";
-  elements: readonly ExcalidrawElement[];
-}) => {
-  const firstItem = React.useRef<HTMLButtonElement>();
-  const activeItem = React.useRef<HTMLButtonElement>();
-  const gallery = React.useRef<HTMLDivElement>();
-  const colorInput = React.useRef<HTMLInputElement>();
-
-  const [customColors] = React.useState(() => {
-    if (type === "canvasBackground") {
-      return [];
-    }
-    return getCustomColors(elements, type);
-  });
-
-  React.useEffect(() => {
-    // After the component is first mounted focus on first input
-    if (activeItem.current) {
-      activeItem.current.focus();
-    } else if (colorInput.current) {
-      colorInput.current.focus();
-    } else if (gallery.current) {
-      gallery.current.focus();
-    }
-  }, []);
-
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    let handled = false;
-    if (isArrowKey(event.key)) {
-      handled = true;
-      const { activeElement } = document;
-      const isRTL = getLanguage().rtl;
-      let isCustom = false;
-      let index = Array.prototype.indexOf.call(
-        gallery.current!.querySelector(".color-picker-content--default")
-          ?.children,
-        activeElement,
-      );
-      if (index === -1) {
-        index = Array.prototype.indexOf.call(
-          gallery.current!.querySelector(".color-picker-content--canvas-colors")
-            ?.children,
-          activeElement,
-        );
-        if (index !== -1) {
-          isCustom = true;
-        }
-      }
-      const parentElement = isCustom
-        ? gallery.current?.querySelector(".color-picker-content--canvas-colors")
-        : gallery.current?.querySelector(".color-picker-content--default");
-
-      if (parentElement && index !== -1) {
-        const length = parentElement.children.length - (showInput ? 1 : 0);
-        const nextIndex =
-          event.key === (isRTL ? KEYS.ARROW_LEFT : KEYS.ARROW_RIGHT)
-            ? (index + 1) % length
-            : event.key === (isRTL ? KEYS.ARROW_RIGHT : KEYS.ARROW_LEFT)
-            ? (length + index - 1) % length
-            : !isCustom && event.key === KEYS.ARROW_DOWN
-            ? (index + 5) % length
-            : !isCustom && event.key === KEYS.ARROW_UP
-            ? (length + index - 5) % length
-            : index;
-        (parentElement.children[nextIndex] as HTMLElement | undefined)?.focus();
-      }
-      event.preventDefault();
-    } else if (
-      keyBindings.includes(event.key.toLowerCase()) &&
-      !event[KEYS.CTRL_OR_CMD] &&
-      !event.altKey &&
-      !isWritableElement(event.target)
-    ) {
-      handled = true;
-      const index = keyBindings.indexOf(event.key.toLowerCase());
-      const isCustom = index >= MAX_DEFAULT_COLORS;
-      const parentElement = isCustom
-        ? gallery?.current?.querySelector(
-            ".color-picker-content--canvas-colors",
-          )
-        : gallery?.current?.querySelector(".color-picker-content--default");
-      const actualIndex = isCustom ? index - MAX_DEFAULT_COLORS : index;
-      (
-        parentElement?.children[actualIndex] as HTMLElement | undefined
-      )?.focus();
-
-      event.preventDefault();
-    } else if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) {
-      handled = true;
-      event.preventDefault();
-      onClose();
-    }
-    if (handled) {
-      event.nativeEvent.stopImmediatePropagation();
-      event.stopPropagation();
-    }
-  };
-
-  const renderColors = (colors: Array<string>, custom: boolean = false) => {
-    return colors.map((_color, i) => {
-      const _colorWithoutHash = _color.replace("#", "");
-      const keyBinding = custom
-        ? keyBindings[i + MAX_DEFAULT_COLORS]
-        : keyBindings[i];
-      const label = custom
-        ? _colorWithoutHash
-        : t(`colors.${_colorWithoutHash}`);
-      return (
-        <button
-          className="color-picker-swatch"
-          onClick={(event) => {
-            (event.currentTarget as HTMLButtonElement).focus();
-            onChange(_color);
-          }}
-          title={`${label}${
-            !isTransparent(_color) ? ` (${_color})` : ""
-          } — ${keyBinding.toUpperCase()}`}
-          aria-label={label}
-          aria-keyshortcuts={keyBindings[i]}
-          style={{ color: _color }}
-          key={_color}
-          ref={(el) => {
-            if (!custom && el && i === 0) {
-              firstItem.current = el;
-            }
-            if (el && _color === color) {
-              activeItem.current = el;
-            }
-          }}
-          onFocus={() => {
-            onChange(_color);
-          }}
-        >
-          {isTransparent(_color) ? (
-            <div className="color-picker-transparent"></div>
-          ) : undefined}
-          <span className="color-picker-keybinding">{keyBinding}</span>
-        </button>
-      );
-    });
-  };
-
-  return (
-    <div
-      className={`color-picker color-picker-type-${type}`}
-      role="dialog"
-      aria-modal="true"
-      aria-label={t("labels.colorPicker")}
-      onKeyDown={handleKeyDown}
-    >
-      <div className="color-picker-triangle color-picker-triangle-shadow"></div>
-      <div className="color-picker-triangle"></div>
-      <div
-        className="color-picker-content"
-        ref={(el) => {
-          if (el) {
-            gallery.current = el;
-          }
-        }}
-        // to allow focusing by clicking but not by tabbing
-        tabIndex={-1}
-      >
-        <div className="color-picker-content--default">
-          {renderColors(colors)}
-        </div>
-        {!!customColors.length && (
-          <div className="color-picker-content--canvas">
-            <span className="color-picker-content--canvas-title">
-              {t("labels.canvasColors")}
-            </span>
-            <div className="color-picker-content--canvas-colors">
-              {renderColors(customColors, true)}
-            </div>
-          </div>
-        )}
-
-        {showInput && (
-          <ColorInput
-            color={color}
-            label={label}
-            onChange={(color) => {
-              onChange(color);
-            }}
-            ref={colorInput}
-          />
-        )}
-      </div>
-    </div>
-  );
-};
-
-const ColorInput = React.forwardRef(
-  (
-    {
-      color,
-      onChange,
-      label,
-    }: {
-      color: string | null;
-      onChange: (color: string) => void;
-      label: string;
-    },
-    ref,
-  ) => {
-    const [innerValue, setInnerValue] = React.useState(color);
-    const inputRef = React.useRef(null);
-
-    React.useEffect(() => {
-      setInnerValue(color);
-    }, [color]);
-
-    React.useImperativeHandle(ref, () => inputRef.current);
-
-    const changeColor = React.useCallback(
-      (inputValue: string) => {
-        const value = inputValue.toLowerCase();
-        const color = getColor(value);
-        if (color) {
-          onChange(color);
-        }
-        setInnerValue(value);
-      },
-      [onChange],
-    );
-
-    return (
-      <label className="color-input-container">
-        <div className="color-picker-hash">#</div>
-        <input
-          spellCheck={false}
-          className="color-picker-input"
-          aria-label={label}
-          onChange={(event) => changeColor(event.target.value)}
-          value={(innerValue || "").replace(/^#/, "")}
-          onBlur={() => setInnerValue(color)}
-          ref={inputRef}
-        />
-      </label>
-    );
-  },
-);
-
-ColorInput.displayName = "ColorInput";
-
-export const ColorPicker = ({
-  type,
-  color,
-  onChange,
-  label,
-  isActive,
-  setActive,
-  elements,
-  appState,
-}: {
-  type: "canvasBackground" | "elementBackground" | "elementStroke";
-  color: string | null;
-  onChange: (color: string) => void;
-  label: string;
-  isActive: boolean;
-  setActive: (active: boolean) => void;
-  elements: readonly ExcalidrawElement[];
-  appState: AppState;
-}) => {
-  const pickerButton = React.useRef<HTMLButtonElement>(null);
-  const coords = pickerButton.current?.getBoundingClientRect();
-  const mainMenuContentCoords = document
-    .querySelector(".main-menu-content")
-    ?.getBoundingClientRect();
-
-  const top =
-    coords && mainMenuContentCoords && coords.top - mainMenuContentCoords.top;
-  const left =
-    coords &&
-    mainMenuContentCoords &&
-    coords.right - mainMenuContentCoords.left;
-
-  return (
-    <div>
-      <div className="color-picker-control-container">
-        <div className="color-picker-label-swatch-container">
-          <button
-            className="color-picker-label-swatch"
-            aria-label={label}
-            style={color ? { "--swatch-color": color } : undefined}
-            onClick={() => setActive(!isActive)}
-            ref={pickerButton}
-          />
-        </div>
-        <ColorInput
-          color={color}
-          label={label}
-          onChange={(color) => {
-            onChange(color);
-          }}
-        />
-      </div>
-      <React.Suspense fallback="">
-        {isActive ? (
-          <div
-            className="color-picker-popover-container"
-            style={{
-              position: "fixed",
-              top,
-              left,
-              zIndex: 1,
-            }}
-          >
-            <Popover
-              onCloseRequest={(event) =>
-                event.target !== pickerButton.current && setActive(false)
-              }
-            >
-              <Picker
-                colors={colors[type]}
-                color={color || null}
-                onChange={(changedColor) => {
-                  onChange(changedColor);
-                }}
-                onClose={() => {
-                  setActive(false);
-                  pickerButton.current?.focus();
-                }}
-                label={label}
-                showInput={false}
-                type={type}
-                elements={elements}
-              />
-            </Popover>
-          </div>
-        ) : null}
-      </React.Suspense>
-    </div>
-  );
-};
diff --git a/src/components/ColorPicker/ColorInput.tsx b/src/components/ColorPicker/ColorInput.tsx
new file mode 100644
index 000000000..f179d415c
--- /dev/null
+++ b/src/components/ColorPicker/ColorInput.tsx
@@ -0,0 +1,126 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { getColor } from "./ColorPicker";
+import { useAtom } from "jotai";
+import { activeColorPickerSectionAtom } from "./colorPickerUtils";
+import { eyeDropperIcon } from "../icons";
+import { jotaiScope } from "../../jotai";
+import { KEYS } from "../../keys";
+import { activeEyeDropperAtom } from "../EyeDropper";
+import clsx from "clsx";
+import { t } from "../../i18n";
+import { useDevice } from "../App";
+import { getShortcutKey } from "../../utils";
+
+interface ColorInputProps {
+  color: string;
+  onChange: (color: string) => void;
+  label: string;
+}
+
+export const ColorInput = ({ color, onChange, label }: ColorInputProps) => {
+  const device = useDevice();
+  const [innerValue, setInnerValue] = useState(color);
+  const [activeSection, setActiveColorPickerSection] = useAtom(
+    activeColorPickerSectionAtom,
+  );
+
+  useEffect(() => {
+    setInnerValue(color);
+  }, [color]);
+
+  const changeColor = useCallback(
+    (inputValue: string) => {
+      const value = inputValue.toLowerCase();
+      const color = getColor(value);
+
+      if (color) {
+        onChange(color);
+      }
+      setInnerValue(value);
+    },
+    [onChange],
+  );
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const eyeDropperTriggerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [activeSection]);
+
+  const [eyeDropperState, setEyeDropperState] = useAtom(
+    activeEyeDropperAtom,
+    jotaiScope,
+  );
+
+  useEffect(() => {
+    return () => {
+      setEyeDropperState(null);
+    };
+  }, [setEyeDropperState]);
+
+  return (
+    <div className="color-picker__input-label">
+      <div className="color-picker__input-hash">#</div>
+      <input
+        ref={activeSection === "hex" ? inputRef : undefined}
+        style={{ border: 0, padding: 0 }}
+        spellCheck={false}
+        className="color-picker-input"
+        aria-label={label}
+        onChange={(event) => {
+          changeColor(event.target.value);
+        }}
+        value={(innerValue || "").replace(/^#/, "")}
+        onBlur={() => {
+          setInnerValue(color);
+        }}
+        tabIndex={-1}
+        onFocus={() => setActiveColorPickerSection("hex")}
+        onKeyDown={(event) => {
+          if (event.key === KEYS.TAB) {
+            return;
+          } else if (event.key === KEYS.ESCAPE) {
+            eyeDropperTriggerRef.current?.focus();
+          }
+          event.stopPropagation();
+        }}
+      />
+      {/* TODO reenable on mobile with a better UX */}
+      {!device.isMobile && (
+        <>
+          <div
+            style={{
+              width: "1px",
+              height: "1.25rem",
+              backgroundColor: "var(--default-border-color)",
+            }}
+          />
+          <div
+            ref={eyeDropperTriggerRef}
+            className={clsx("excalidraw-eye-dropper-trigger", {
+              selected: eyeDropperState,
+            })}
+            onClick={() =>
+              setEyeDropperState((s) =>
+                s
+                  ? null
+                  : {
+                      keepOpenOnAlt: false,
+                      onSelect: (color) => onChange(color),
+                    },
+              )
+            }
+            title={`${t(
+              "labels.eyeDropper",
+            )} — ${KEYS.I.toLocaleUpperCase()} or ${getShortcutKey("Alt")} `}
+          >
+            {eyeDropperIcon}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/ColorPicker.scss b/src/components/ColorPicker/ColorPicker.scss
similarity index 63%
rename from src/components/ColorPicker.scss
rename to src/components/ColorPicker/ColorPicker.scss
index 52ea20a19..815e8e59d 100644
--- a/src/components/ColorPicker.scss
+++ b/src/components/ColorPicker/ColorPicker.scss
@@ -1,6 +1,134 @@
-@import "../css/variables.module";
+@import "../../css/variables.module";
 
 .excalidraw {
+  .focus-visible-none {
+    &:focus-visible {
+      outline: none !important;
+    }
+  }
+
+  .color-picker__heading {
+    padding: 0 0.5rem;
+    font-size: 0.75rem;
+    text-align: left;
+  }
+
+  .color-picker-container {
+    display: grid;
+    grid-template-columns: 1fr 20px 1.625rem;
+    padding: 0.25rem 0px;
+    align-items: center;
+
+    @include isMobile {
+      max-width: 175px;
+    }
+  }
+
+  .color-picker__top-picks {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .color-picker__button {
+    --radius: 0.25rem;
+
+    padding: 0;
+    margin: 0;
+    width: 1.35rem;
+    height: 1.35rem;
+    border: 1px solid var(--color-gray-30);
+    border-radius: var(--radius);
+    filter: var(--theme-filter);
+    background-color: var(--swatch-color);
+    background-position: left center;
+    position: relative;
+    font-family: inherit;
+    box-sizing: border-box;
+
+    &:hover {
+      &::after {
+        content: "";
+        position: absolute;
+        top: -2px;
+        left: -2px;
+        right: -2px;
+        bottom: -2px;
+        box-shadow: 0 0 0 1px var(--color-gray-30);
+        border-radius: calc(var(--radius) + 1px);
+        filter: var(--theme-filter);
+      }
+    }
+
+    &.active {
+      .color-picker__button-outline {
+        position: absolute;
+        top: -2px;
+        left: -2px;
+        right: -2px;
+        bottom: -2px;
+        box-shadow: 0 0 0 1px var(--color-primary-darkest);
+        z-index: 1; // due hover state so this has preference
+        border-radius: calc(var(--radius) + 1px);
+        filter: var(--theme-filter);
+      }
+    }
+
+    &:focus-visible {
+      outline: none;
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: -4px;
+        right: -4px;
+        bottom: -4px;
+        left: -4px;
+        border: 3px solid var(--focus-highlight-color);
+        border-radius: calc(var(--radius) + 1px);
+      }
+
+      &.active {
+        .color-picker__button-outline {
+          display: none;
+        }
+      }
+    }
+
+    &--large {
+      --radius: 0.5rem;
+      width: 1.875rem;
+      height: 1.875rem;
+    }
+
+    &.is-transparent {
+      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==");
+    }
+
+    &--no-focus-visible {
+      border: 0;
+      &::after {
+        display: none;
+      }
+      &:focus-visible {
+        outline: none !important;
+      }
+    }
+
+    &.active-color {
+      border-radius: calc(var(--radius) + 1px);
+      width: 1.625rem;
+      height: 1.625rem;
+    }
+  }
+
+  .color-picker__button__hotkey-label {
+    position: absolute;
+    right: 4px;
+    bottom: 4px;
+    filter: none;
+    font-size: 11px;
+  }
+
   .color-picker {
     background: var(--popup-bg-color);
     border: 0 solid transparentize($oc-white, 0.75);
@@ -72,11 +200,18 @@
     }
   }
 
+  .color-picker-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    outline: none;
+  }
+
   .color-picker-content--default {
     padding: 0.5rem;
     display: grid;
-    grid-template-columns: repeat(5, auto);
-    grid-gap: 0.5rem;
+    grid-template-columns: repeat(5, 1.875rem);
+    grid-gap: 0.25rem;
     border-radius: 4px;
 
     &:focus {
@@ -178,11 +313,33 @@
     }
   }
 
+  .color-picker__input-label {
+    display: grid;
+    grid-template-columns: auto 1fr auto auto;
+    gap: 8px;
+    align-items: center;
+    border: 1px solid var(--default-border-color);
+    border-radius: 8px;
+    padding: 0 12px;
+    margin: 8px;
+    box-sizing: border-box;
+
+    &:focus-within {
+      box-shadow: 0 0 0 1px var(--color-primary-darkest);
+      border-radius: var(--border-radius-lg);
+    }
+  }
+
+  .color-picker__input-hash {
+    padding: 0 0.25rem;
+  }
+
   .color-picker-input {
     box-sizing: border-box;
     width: 100%;
     margin: 0;
     font-size: 0.875rem;
+    font-family: inherit;
     background-color: transparent;
     color: var(--text-primary-color);
     border: 0;
diff --git a/src/components/ColorPicker/ColorPicker.tsx b/src/components/ColorPicker/ColorPicker.tsx
new file mode 100644
index 000000000..d2f89c81e
--- /dev/null
+++ b/src/components/ColorPicker/ColorPicker.tsx
@@ -0,0 +1,293 @@
+import { isInteractive, isTransparent, isWritableElement } from "../../utils";
+import { ExcalidrawElement } from "../../element/types";
+import { AppState } from "../../types";
+import { TopPicks } from "./TopPicks";
+import { Picker } from "./Picker";
+import * as Popover from "@radix-ui/react-popover";
+import { useAtom } from "jotai";
+import {
+  activeColorPickerSectionAtom,
+  ColorPickerType,
+} from "./colorPickerUtils";
+import { useDevice, useExcalidrawContainer } from "../App";
+import { ColorTuple, COLOR_PALETTE, ColorPaletteCustom } from "../../colors";
+import PickerHeading from "./PickerHeading";
+import { t } from "../../i18n";
+import clsx from "clsx";
+import { jotaiScope } from "../../jotai";
+import { ColorInput } from "./ColorInput";
+import { useRef } from "react";
+import { activeEyeDropperAtom } from "../EyeDropper";
+
+import "./ColorPicker.scss";
+
+const isValidColor = (color: string) => {
+  const style = new Option().style;
+  style.color = color;
+  return !!style.color;
+};
+
+export const getColor = (color: string): string | null => {
+  if (isTransparent(color)) {
+    return color;
+  }
+
+  // testing for `#` first fixes a bug on Electron (more specfically, an
+  // Obsidian popout window), where a hex color without `#` is (incorrectly)
+  // considered valid
+  return isValidColor(`#${color}`)
+    ? `#${color}`
+    : isValidColor(color)
+    ? color
+    : null;
+};
+
+interface ColorPickerProps {
+  type: ColorPickerType;
+  color: string;
+  onChange: (color: string) => void;
+  label: string;
+  elements: readonly ExcalidrawElement[];
+  appState: AppState;
+  palette?: ColorPaletteCustom | null;
+  topPicks?: ColorTuple;
+  updateData: (formData?: any) => void;
+}
+
+const ColorPickerPopupContent = ({
+  type,
+  color,
+  onChange,
+  label,
+  elements,
+  palette = COLOR_PALETTE,
+  updateData,
+}: Pick<
+  ColorPickerProps,
+  | "type"
+  | "color"
+  | "onChange"
+  | "label"
+  | "elements"
+  | "palette"
+  | "updateData"
+>) => {
+  const [, setActiveColorPickerSection] = useAtom(activeColorPickerSectionAtom);
+
+  const [eyeDropperState, setEyeDropperState] = useAtom(
+    activeEyeDropperAtom,
+    jotaiScope,
+  );
+
+  const { container } = useExcalidrawContainer();
+  const { isMobile, isLandscape } = useDevice();
+
+  const colorInputJSX = (
+    <div>
+      <PickerHeading>{t("colorPicker.hexCode")}</PickerHeading>
+      <ColorInput
+        color={color}
+        label={label}
+        onChange={(color) => {
+          onChange(color);
+        }}
+      />
+    </div>
+  );
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  const focusPickerContent = () => {
+    popoverRef.current
+      ?.querySelector<HTMLDivElement>(".color-picker-content")
+      ?.focus();
+  };
+
+  return (
+    <Popover.Portal container={container}>
+      <Popover.Content
+        ref={popoverRef}
+        className="focus-visible-none"
+        data-prevent-outside-click
+        onFocusOutside={(event) => {
+          focusPickerContent();
+          event.preventDefault();
+        }}
+        onPointerDownOutside={(event) => {
+          if (eyeDropperState) {
+            // prevent from closing if we click outside the popover
+            // while eyedropping (e.g. click when clicking the sidebar;
+            // the eye-dropper-backdrop is prevented downstream)
+            event.preventDefault();
+          }
+        }}
+        onCloseAutoFocus={(e) => {
+          e.stopPropagation();
+          // prevents focusing the trigger
+          e.preventDefault();
+
+          // return focus to excalidraw container unless
+          // user focuses an interactive element, such as a button, or
+          // enters the text editor by clicking on canvas with the text tool
+          if (container && !isInteractive(document.activeElement)) {
+            container.focus();
+          }
+
+          updateData({ openPopup: null });
+          setActiveColorPickerSection(null);
+        }}
+        side={isMobile && !isLandscape ? "bottom" : "right"}
+        align={isMobile && !isLandscape ? "center" : "start"}
+        alignOffset={-16}
+        sideOffset={20}
+        style={{
+          zIndex: 9999,
+          backgroundColor: "var(--popup-bg-color)",
+          maxWidth: "208px",
+          maxHeight: window.innerHeight,
+          padding: "12px",
+          borderRadius: "8px",
+          boxSizing: "border-box",
+          overflowY: "auto",
+          boxShadow:
+            "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)",
+        }}
+      >
+        {palette ? (
+          <Picker
+            palette={palette}
+            color={color}
+            onChange={(changedColor) => {
+              onChange(changedColor);
+            }}
+            onEyeDropperToggle={(force) => {
+              setEyeDropperState((state) => {
+                if (force) {
+                  state = state || {
+                    keepOpenOnAlt: true,
+                    onSelect: onChange,
+                  };
+                  state.keepOpenOnAlt = true;
+                  return state;
+                }
+
+                return force === false || state
+                  ? null
+                  : {
+                      keepOpenOnAlt: false,
+                      onSelect: onChange,
+                    };
+              });
+            }}
+            onEscape={(event) => {
+              if (eyeDropperState) {
+                setEyeDropperState(null);
+              } else if (isWritableElement(event.target)) {
+                focusPickerContent();
+              } else {
+                updateData({ openPopup: null });
+              }
+            }}
+            label={label}
+            type={type}
+            elements={elements}
+            updateData={updateData}
+          >
+            {colorInputJSX}
+          </Picker>
+        ) : (
+          colorInputJSX
+        )}
+        <Popover.Arrow
+          width={20}
+          height={10}
+          style={{
+            fill: "var(--popup-bg-color)",
+            filter: "drop-shadow(rgba(0, 0, 0, 0.05) 0px 3px 2px)",
+          }}
+        />
+      </Popover.Content>
+    </Popover.Portal>
+  );
+};
+
+const ColorPickerTrigger = ({
+  label,
+  color,
+  type,
+}: {
+  color: string;
+  label: string;
+  type: ColorPickerType;
+}) => {
+  return (
+    <Popover.Trigger
+      type="button"
+      className={clsx("color-picker__button active-color", {
+        "is-transparent": color === "transparent" || !color,
+      })}
+      aria-label={label}
+      style={color ? { "--swatch-color": color } : undefined}
+      title={
+        type === "elementStroke"
+          ? t("labels.showStroke")
+          : t("labels.showBackground")
+      }
+    >
+      <div className="color-picker__button-outline" />
+    </Popover.Trigger>
+  );
+};
+
+export const ColorPicker = ({
+  type,
+  color,
+  onChange,
+  label,
+  elements,
+  palette = COLOR_PALETTE,
+  topPicks,
+  updateData,
+  appState,
+}: ColorPickerProps) => {
+  return (
+    <div>
+      <div role="dialog" aria-modal="true" className="color-picker-container">
+        <TopPicks
+          activeColor={color}
+          onChange={onChange}
+          type={type}
+          topPicks={topPicks}
+        />
+        <div
+          style={{
+            width: 1,
+            height: "100%",
+            backgroundColor: "var(--default-border-color)",
+            margin: "0 auto",
+          }}
+        />
+        <Popover.Root
+          open={appState.openPopup === type}
+          onOpenChange={(open) => {
+            updateData({ openPopup: open ? type : null });
+          }}
+        >
+          {/* serves as an active color indicator as well */}
+          <ColorPickerTrigger color={color} label={label} type={type} />
+          {/* popup content */}
+          {appState.openPopup === type && (
+            <ColorPickerPopupContent
+              type={type}
+              color={color}
+              onChange={onChange}
+              label={label}
+              elements={elements}
+              palette={palette}
+              updateData={updateData}
+            />
+          )}
+        </Popover.Root>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/ColorPicker/CustomColorList.tsx b/src/components/ColorPicker/CustomColorList.tsx
new file mode 100644
index 000000000..b028dcc76
--- /dev/null
+++ b/src/components/ColorPicker/CustomColorList.tsx
@@ -0,0 +1,63 @@
+import clsx from "clsx";
+import { useAtom } from "jotai";
+import { useEffect, useRef } from "react";
+import { activeColorPickerSectionAtom } from "./colorPickerUtils";
+import HotkeyLabel from "./HotkeyLabel";
+
+interface CustomColorListProps {
+  colors: string[];
+  color: string;
+  onChange: (color: string) => void;
+  label: string;
+}
+
+export const CustomColorList = ({
+  colors,
+  color,
+  onChange,
+  label,
+}: CustomColorListProps) => {
+  const [activeColorPickerSection, setActiveColorPickerSection] = useAtom(
+    activeColorPickerSectionAtom,
+  );
+
+  const btnRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (btnRef.current) {
+      btnRef.current.focus();
+    }
+  }, [color, activeColorPickerSection]);
+
+  return (
+    <div className="color-picker-content--default">
+      {colors.map((c, i) => {
+        return (
+          <button
+            ref={color === c ? btnRef : undefined}
+            tabIndex={-1}
+            type="button"
+            className={clsx(
+              "color-picker__button color-picker__button--large",
+              {
+                active: color === c,
+                "is-transparent": c === "transparent" || !c,
+              },
+            )}
+            onClick={() => {
+              onChange(c);
+              setActiveColorPickerSection("custom");
+            }}
+            title={c}
+            aria-label={label}
+            style={{ "--swatch-color": c }}
+            key={i}
+          >
+            <div className="color-picker__button-outline" />
+            <HotkeyLabel color={c} keyLabel={i + 1} isCustomColor />
+          </button>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/src/components/ColorPicker/HotkeyLabel.tsx b/src/components/ColorPicker/HotkeyLabel.tsx
new file mode 100644
index 000000000..145060d19
--- /dev/null
+++ b/src/components/ColorPicker/HotkeyLabel.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { getContrastYIQ } from "./colorPickerUtils";
+
+interface HotkeyLabelProps {
+  color: string;
+  keyLabel: string | number;
+  isCustomColor?: boolean;
+  isShade?: boolean;
+}
+const HotkeyLabel = ({
+  color,
+  keyLabel,
+  isCustomColor = false,
+  isShade = false,
+}: HotkeyLabelProps) => {
+  return (
+    <div
+      className="color-picker__button__hotkey-label"
+      style={{
+        color: getContrastYIQ(color, isCustomColor),
+      }}
+    >
+      {isShade && "⇧"}
+      {keyLabel}
+    </div>
+  );
+};
+
+export default HotkeyLabel;
diff --git a/src/components/ColorPicker/Picker.tsx b/src/components/ColorPicker/Picker.tsx
new file mode 100644
index 000000000..a2e17526c
--- /dev/null
+++ b/src/components/ColorPicker/Picker.tsx
@@ -0,0 +1,178 @@
+import React, { useEffect, useState } from "react";
+import { t } from "../../i18n";
+
+import { ExcalidrawElement } from "../../element/types";
+import { ShadeList } from "./ShadeList";
+
+import PickerColorList from "./PickerColorList";
+import { useAtom } from "jotai";
+import { CustomColorList } from "./CustomColorList";
+import { colorPickerKeyNavHandler } from "./keyboardNavHandlers";
+import PickerHeading from "./PickerHeading";
+import {
+  ColorPickerType,
+  activeColorPickerSectionAtom,
+  getColorNameAndShadeFromColor,
+  getMostUsedCustomColors,
+  isCustomColor,
+} from "./colorPickerUtils";
+import {
+  ColorPaletteCustom,
+  DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX,
+  DEFAULT_ELEMENT_STROKE_COLOR_INDEX,
+} from "../../colors";
+import { KEYS } from "../../keys";
+import { EVENT } from "../../constants";
+
+interface PickerProps {
+  color: string;
+  onChange: (color: string) => void;
+  label: string;
+  type: ColorPickerType;
+  elements: readonly ExcalidrawElement[];
+  palette: ColorPaletteCustom;
+  updateData: (formData?: any) => void;
+  children?: React.ReactNode;
+  onEyeDropperToggle: (force?: boolean) => void;
+  onEscape: (event: React.KeyboardEvent | KeyboardEvent) => void;
+}
+
+export const Picker = ({
+  color,
+  onChange,
+  label,
+  type,
+  elements,
+  palette,
+  updateData,
+  children,
+  onEyeDropperToggle,
+  onEscape,
+}: PickerProps) => {
+  const [customColors] = React.useState(() => {
+    if (type === "canvasBackground") {
+      return [];
+    }
+    return getMostUsedCustomColors(elements, type, palette);
+  });
+
+  const [activeColorPickerSection, setActiveColorPickerSection] = useAtom(
+    activeColorPickerSectionAtom,
+  );
+
+  const colorObj = getColorNameAndShadeFromColor({
+    color,
+    palette,
+  });
+
+  useEffect(() => {
+    if (!activeColorPickerSection) {
+      const isCustom = isCustomColor({ color, palette });
+      const isCustomButNotInList = isCustom && !customColors.includes(color);
+
+      setActiveColorPickerSection(
+        isCustomButNotInList
+          ? "hex"
+          : isCustom
+          ? "custom"
+          : colorObj?.shade != null
+          ? "shades"
+          : "baseColors",
+      );
+    }
+  }, [
+    activeColorPickerSection,
+    color,
+    palette,
+    setActiveColorPickerSection,
+    colorObj,
+    customColors,
+  ]);
+
+  const [activeShade, setActiveShade] = useState(
+    colorObj?.shade ??
+      (type === "elementBackground"
+        ? DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX
+        : DEFAULT_ELEMENT_STROKE_COLOR_INDEX),
+  );
+
+  useEffect(() => {
+    if (colorObj?.shade != null) {
+      setActiveShade(colorObj.shade);
+    }
+
+    const keyup = (event: KeyboardEvent) => {
+      if (event.key === KEYS.ALT) {
+        onEyeDropperToggle(false);
+      }
+    };
+    document.addEventListener(EVENT.KEYUP, keyup, { capture: true });
+    return () => {
+      document.removeEventListener(EVENT.KEYUP, keyup, { capture: true });
+    };
+  }, [colorObj, onEyeDropperToggle]);
+
+  const pickerRef = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <div role="dialog" aria-modal="true" aria-label={t("labels.colorPicker")}>
+      <div
+        ref={pickerRef}
+        onKeyDown={(event) => {
+          const handled = colorPickerKeyNavHandler({
+            event,
+            activeColorPickerSection,
+            palette,
+            color,
+            onChange,
+            onEyeDropperToggle,
+            customColors,
+            setActiveColorPickerSection,
+            updateData,
+            activeShade,
+            onEscape,
+          });
+
+          if (handled) {
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        }}
+        className="color-picker-content"
+        // to allow focusing by clicking but not by tabbing
+        tabIndex={-1}
+      >
+        {!!customColors.length && (
+          <div>
+            <PickerHeading>
+              {t("colorPicker.mostUsedCustomColors")}
+            </PickerHeading>
+            <CustomColorList
+              colors={customColors}
+              color={color}
+              label={t("colorPicker.mostUsedCustomColors")}
+              onChange={onChange}
+            />
+          </div>
+        )}
+
+        <div>
+          <PickerHeading>{t("colorPicker.colors")}</PickerHeading>
+          <PickerColorList
+            color={color}
+            label={label}
+            palette={palette}
+            onChange={onChange}
+            activeShade={activeShade}
+          />
+        </div>
+
+        <div>
+          <PickerHeading>{t("colorPicker.shades")}</PickerHeading>
+          <ShadeList hex={color} onChange={onChange} palette={palette} />
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/ColorPicker/PickerColorList.tsx b/src/components/ColorPicker/PickerColorList.tsx
new file mode 100644
index 000000000..40f4bbeb0
--- /dev/null
+++ b/src/components/ColorPicker/PickerColorList.tsx
@@ -0,0 +1,90 @@
+import clsx from "clsx";
+import { useAtom } from "jotai";
+import { useEffect, useRef } from "react";
+import {
+  activeColorPickerSectionAtom,
+  colorPickerHotkeyBindings,
+  getColorNameAndShadeFromColor,
+} from "./colorPickerUtils";
+import HotkeyLabel from "./HotkeyLabel";
+import { ColorPaletteCustom } from "../../colors";
+import { TranslationKeys, t } from "../../i18n";
+
+interface PickerColorListProps {
+  palette: ColorPaletteCustom;
+  color: string;
+  onChange: (color: string) => void;
+  label: string;
+  activeShade: number;
+}
+
+const PickerColorList = ({
+  palette,
+  color,
+  onChange,
+  label,
+  activeShade,
+}: PickerColorListProps) => {
+  const colorObj = getColorNameAndShadeFromColor({
+    color: color || "transparent",
+    palette,
+  });
+  const [activeColorPickerSection, setActiveColorPickerSection] = useAtom(
+    activeColorPickerSectionAtom,
+  );
+
+  const btnRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (btnRef.current && activeColorPickerSection === "baseColors") {
+      btnRef.current.focus();
+    }
+  }, [colorObj?.colorName, activeColorPickerSection]);
+
+  return (
+    <div className="color-picker-content--default">
+      {Object.entries(palette).map(([key, value], index) => {
+        const color =
+          (Array.isArray(value) ? value[activeShade] : value) || "transparent";
+
+        const keybinding = colorPickerHotkeyBindings[index];
+        const label = t(
+          `colors.${key.replace(/\d+/, "")}` as unknown as TranslationKeys,
+          null,
+          "",
+        );
+
+        return (
+          <button
+            ref={colorObj?.colorName === key ? btnRef : undefined}
+            tabIndex={-1}
+            type="button"
+            className={clsx(
+              "color-picker__button color-picker__button--large",
+              {
+                active: colorObj?.colorName === key,
+                "is-transparent": color === "transparent" || !color,
+              },
+            )}
+            onClick={() => {
+              onChange(color);
+              setActiveColorPickerSection("baseColors");
+            }}
+            title={`${label}${
+              color.startsWith("#") ? ` ${color}` : ""
+            } — ${keybinding}`}
+            aria-label={`${label} — ${keybinding}`}
+            style={color ? { "--swatch-color": color } : undefined}
+            data-testid={`color-${key}`}
+            key={key}
+          >
+            <div className="color-picker__button-outline" />
+            <HotkeyLabel color={color} keyLabel={keybinding} />
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default PickerColorList;
diff --git a/src/components/ColorPicker/PickerHeading.tsx b/src/components/ColorPicker/PickerHeading.tsx
new file mode 100644
index 000000000..043731366
--- /dev/null
+++ b/src/components/ColorPicker/PickerHeading.tsx
@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+
+const PickerHeading = ({ children }: { children: ReactNode }) => (
+  <div className="color-picker__heading">{children}</div>
+);
+
+export default PickerHeading;
diff --git a/src/components/ColorPicker/ShadeList.tsx b/src/components/ColorPicker/ShadeList.tsx
new file mode 100644
index 000000000..81ddaab24
--- /dev/null
+++ b/src/components/ColorPicker/ShadeList.tsx
@@ -0,0 +1,105 @@
+import clsx from "clsx";
+import { useAtom } from "jotai";
+import { useEffect, useRef } from "react";
+import {
+  activeColorPickerSectionAtom,
+  getColorNameAndShadeFromColor,
+} from "./colorPickerUtils";
+import HotkeyLabel from "./HotkeyLabel";
+import { t } from "../../i18n";
+import { ColorPaletteCustom } from "../../colors";
+
+interface ShadeListProps {
+  hex: string;
+  onChange: (color: string) => void;
+  palette: ColorPaletteCustom;
+}
+
+export const ShadeList = ({ hex, onChange, palette }: ShadeListProps) => {
+  const colorObj = getColorNameAndShadeFromColor({
+    color: hex || "transparent",
+    palette,
+  });
+
+  const [activeColorPickerSection, setActiveColorPickerSection] = useAtom(
+    activeColorPickerSectionAtom,
+  );
+
+  const btnRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (btnRef.current && activeColorPickerSection === "shades") {
+      btnRef.current.focus();
+    }
+  }, [colorObj, activeColorPickerSection]);
+
+  if (colorObj) {
+    const { colorName, shade } = colorObj;
+
+    const shades = palette[colorName];
+
+    if (Array.isArray(shades)) {
+      return (
+        <div className="color-picker-content--default shades">
+          {shades.map((color, i) => (
+            <button
+              ref={
+                i === shade && activeColorPickerSection === "shades"
+                  ? btnRef
+                  : undefined
+              }
+              tabIndex={-1}
+              key={i}
+              type="button"
+              className={clsx(
+                "color-picker__button color-picker__button--large",
+                { active: i === shade },
+              )}
+              aria-label="Shade"
+              title={`${colorName} - ${i + 1}`}
+              style={color ? { "--swatch-color": color } : undefined}
+              onClick={() => {
+                onChange(color);
+                setActiveColorPickerSection("shades");
+              }}
+            >
+              <div className="color-picker__button-outline" />
+              <HotkeyLabel color={color} keyLabel={i + 1} isShade />
+            </button>
+          ))}
+        </div>
+      );
+    }
+  }
+
+  return (
+    <div
+      className="color-picker-content--default"
+      style={{ position: "relative" }}
+      tabIndex={-1}
+    >
+      <button
+        type="button"
+        tabIndex={-1}
+        className="color-picker__button color-picker__button--large color-picker__button--no-focus-visible"
+      />
+      <div
+        tabIndex={-1}
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+          fontSize: "0.75rem",
+        }}
+      >
+        {t("colorPicker.noShades")}
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/ColorPicker/TopPicks.tsx b/src/components/ColorPicker/TopPicks.tsx
new file mode 100644
index 000000000..ae420c3fd
--- /dev/null
+++ b/src/components/ColorPicker/TopPicks.tsx
@@ -0,0 +1,64 @@
+import clsx from "clsx";
+import { ColorPickerType } from "./colorPickerUtils";
+import {
+  DEFAULT_CANVAS_BACKGROUND_PICKS,
+  DEFAULT_ELEMENT_BACKGROUND_PICKS,
+  DEFAULT_ELEMENT_STROKE_PICKS,
+} from "../../colors";
+
+interface TopPicksProps {
+  onChange: (color: string) => void;
+  type: ColorPickerType;
+  activeColor: string;
+  topPicks?: readonly string[];
+}
+
+export const TopPicks = ({
+  onChange,
+  type,
+  activeColor,
+  topPicks,
+}: TopPicksProps) => {
+  let colors;
+  if (type === "elementStroke") {
+    colors = DEFAULT_ELEMENT_STROKE_PICKS;
+  }
+
+  if (type === "elementBackground") {
+    colors = DEFAULT_ELEMENT_BACKGROUND_PICKS;
+  }
+
+  if (type === "canvasBackground") {
+    colors = DEFAULT_CANVAS_BACKGROUND_PICKS;
+  }
+
+  // this one can overwrite defaults
+  if (topPicks) {
+    colors = topPicks;
+  }
+
+  if (!colors) {
+    console.error("Invalid type for TopPicks");
+    return null;
+  }
+
+  return (
+    <div className="color-picker__top-picks">
+      {colors.map((color: string) => (
+        <button
+          className={clsx("color-picker__button", {
+            active: color === activeColor,
+            "is-transparent": color === "transparent" || !color,
+          })}
+          style={{ "--swatch-color": color }}
+          key={color}
+          type="button"
+          title={color}
+          onClick={() => onChange(color)}
+        >
+          <div className="color-picker__button-outline" />
+        </button>
+      ))}
+    </div>
+  );
+};
diff --git a/src/components/ColorPicker/colorPickerUtils.ts b/src/components/ColorPicker/colorPickerUtils.ts
new file mode 100644
index 000000000..37e5c88a6
--- /dev/null
+++ b/src/components/ColorPicker/colorPickerUtils.ts
@@ -0,0 +1,136 @@
+import { ExcalidrawElement } from "../../element/types";
+import { atom } from "jotai";
+import {
+  ColorPickerColor,
+  ColorPaletteCustom,
+  MAX_CUSTOM_COLORS_USED_IN_CANVAS,
+} from "../../colors";
+
+export const getColorNameAndShadeFromColor = ({
+  palette,
+  color,
+}: {
+  palette: ColorPaletteCustom;
+  color: string;
+}): {
+  colorName: ColorPickerColor;
+  shade: number | null;
+} | null => {
+  for (const [colorName, colorVal] of Object.entries(palette)) {
+    if (Array.isArray(colorVal)) {
+      const shade = colorVal.indexOf(color);
+      if (shade > -1) {
+        return { colorName: colorName as ColorPickerColor, shade };
+      }
+    } else if (colorVal === color) {
+      return { colorName: colorName as ColorPickerColor, shade: null };
+    }
+  }
+  return null;
+};
+
+export const colorPickerHotkeyBindings = [
+  ["q", "w", "e", "r", "t"],
+  ["a", "s", "d", "f", "g"],
+  ["z", "x", "c", "v", "b"],
+].flat();
+
+export const isCustomColor = ({
+  color,
+  palette,
+}: {
+  color: string;
+  palette: ColorPaletteCustom;
+}) => {
+  const paletteValues = Object.values(palette).flat();
+  return !paletteValues.includes(color);
+};
+
+export const getMostUsedCustomColors = (
+  elements: readonly ExcalidrawElement[],
+  type: "elementBackground" | "elementStroke",
+  palette: ColorPaletteCustom,
+) => {
+  const elementColorTypeMap = {
+    elementBackground: "backgroundColor",
+    elementStroke: "strokeColor",
+  };
+
+  const colors = elements.filter((element) => {
+    if (element.isDeleted) {
+      return false;
+    }
+
+    const color =
+      element[elementColorTypeMap[type] as "backgroundColor" | "strokeColor"];
+
+    return isCustomColor({ color, palette });
+  });
+
+  const colorCountMap = new Map<string, number>();
+  colors.forEach((element) => {
+    const color =
+      element[elementColorTypeMap[type] as "backgroundColor" | "strokeColor"];
+    if (colorCountMap.has(color)) {
+      colorCountMap.set(color, colorCountMap.get(color)! + 1);
+    } else {
+      colorCountMap.set(color, 1);
+    }
+  });
+
+  return [...colorCountMap.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .map((c) => c[0])
+    .slice(0, MAX_CUSTOM_COLORS_USED_IN_CANVAS);
+};
+
+export type ActiveColorPickerSectionAtomType =
+  | "custom"
+  | "baseColors"
+  | "shades"
+  | "hex"
+  | null;
+export const activeColorPickerSectionAtom =
+  atom<ActiveColorPickerSectionAtomType>(null);
+
+const calculateContrast = (r: number, g: number, b: number) => {
+  const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+  return yiq >= 160 ? "black" : "white";
+};
+
+// inspiration from https://stackoverflow.com/a/11868398
+export const getContrastYIQ = (bgHex: string, isCustomColor: boolean) => {
+  if (isCustomColor) {
+    const style = new Option().style;
+    style.color = bgHex;
+
+    if (style.color) {
+      const rgb = style.color
+        .replace(/^(rgb|rgba)\(/, "")
+        .replace(/\)$/, "")
+        .replace(/\s/g, "")
+        .split(",");
+      const r = parseInt(rgb[0]);
+      const g = parseInt(rgb[1]);
+      const b = parseInt(rgb[2]);
+
+      return calculateContrast(r, g, b);
+    }
+  }
+
+  // TODO: ? is this wanted?
+  if (bgHex === "transparent") {
+    return "black";
+  }
+
+  const r = parseInt(bgHex.substring(1, 3), 16);
+  const g = parseInt(bgHex.substring(3, 5), 16);
+  const b = parseInt(bgHex.substring(5, 7), 16);
+
+  return calculateContrast(r, g, b);
+};
+
+export type ColorPickerType =
+  | "canvasBackground"
+  | "elementBackground"
+  | "elementStroke";
diff --git a/src/components/ColorPicker/keyboardNavHandlers.ts b/src/components/ColorPicker/keyboardNavHandlers.ts
new file mode 100644
index 000000000..95ee7beeb
--- /dev/null
+++ b/src/components/ColorPicker/keyboardNavHandlers.ts
@@ -0,0 +1,287 @@
+import { KEYS } from "../../keys";
+import {
+  ColorPickerColor,
+  ColorPalette,
+  ColorPaletteCustom,
+  COLORS_PER_ROW,
+  COLOR_PALETTE,
+} from "../../colors";
+import { ValueOf } from "../../utility-types";
+import {
+  ActiveColorPickerSectionAtomType,
+  colorPickerHotkeyBindings,
+  getColorNameAndShadeFromColor,
+} from "./colorPickerUtils";
+
+const arrowHandler = (
+  eventKey: string,
+  currentIndex: number | null,
+  length: number,
+) => {
+  const rows = Math.ceil(length / COLORS_PER_ROW);
+
+  currentIndex = currentIndex ?? -1;
+
+  switch (eventKey) {
+    case "ArrowLeft": {
+      const prevIndex = currentIndex - 1;
+      return prevIndex < 0 ? length - 1 : prevIndex;
+    }
+    case "ArrowRight": {
+      return (currentIndex + 1) % length;
+    }
+    case "ArrowDown": {
+      const nextIndex = currentIndex + COLORS_PER_ROW;
+      return nextIndex >= length ? currentIndex % COLORS_PER_ROW : nextIndex;
+    }
+    case "ArrowUp": {
+      const prevIndex = currentIndex - COLORS_PER_ROW;
+      const newIndex =
+        prevIndex < 0 ? COLORS_PER_ROW * rows + prevIndex : prevIndex;
+      return newIndex >= length ? undefined : newIndex;
+    }
+  }
+};
+
+interface HotkeyHandlerProps {
+  e: React.KeyboardEvent;
+  colorObj: { colorName: ColorPickerColor; shade: number | null } | null;
+  onChange: (color: string) => void;
+  palette: ColorPaletteCustom;
+  customColors: string[];
+  setActiveColorPickerSection: (
+    update: React.SetStateAction<ActiveColorPickerSectionAtomType>,
+  ) => void;
+  activeShade: number;
+}
+
+/**
+ * @returns true if the event was handled
+ */
+const hotkeyHandler = ({
+  e,
+  colorObj,
+  onChange,
+  palette,
+  customColors,
+  setActiveColorPickerSection,
+  activeShade,
+}: HotkeyHandlerProps): boolean => {
+  if (colorObj?.shade != null) {
+    // shift + numpad is extremely messed up on windows apparently
+    if (
+      ["Digit1", "Digit2", "Digit3", "Digit4", "Digit5"].includes(e.code) &&
+      e.shiftKey
+    ) {
+      const newShade = Number(e.code.slice(-1)) - 1;
+      onChange(palette[colorObj.colorName][newShade]);
+      setActiveColorPickerSection("shades");
+      return true;
+    }
+  }
+
+  if (["1", "2", "3", "4", "5"].includes(e.key)) {
+    const c = customColors[Number(e.key) - 1];
+    if (c) {
+      onChange(customColors[Number(e.key) - 1]);
+      setActiveColorPickerSection("custom");
+      return true;
+    }
+  }
+
+  if (colorPickerHotkeyBindings.includes(e.key)) {
+    const index = colorPickerHotkeyBindings.indexOf(e.key);
+    const paletteKey = Object.keys(palette)[index] as keyof ColorPalette;
+    const paletteValue = palette[paletteKey];
+    const r = Array.isArray(paletteValue)
+      ? paletteValue[activeShade]
+      : paletteValue;
+    onChange(r);
+    setActiveColorPickerSection("baseColors");
+    return true;
+  }
+  return false;
+};
+
+interface ColorPickerKeyNavHandlerProps {
+  event: React.KeyboardEvent;
+  activeColorPickerSection: ActiveColorPickerSectionAtomType;
+  palette: ColorPaletteCustom;
+  color: string;
+  onChange: (color: string) => void;
+  customColors: string[];
+  setActiveColorPickerSection: (
+    update: React.SetStateAction<ActiveColorPickerSectionAtomType>,
+  ) => void;
+  updateData: (formData?: any) => void;
+  activeShade: number;
+  onEyeDropperToggle: (force?: boolean) => void;
+  onEscape: (event: React.KeyboardEvent | KeyboardEvent) => void;
+}
+
+/**
+ * @returns true if the event was handled
+ */
+export const colorPickerKeyNavHandler = ({
+  event,
+  activeColorPickerSection,
+  palette,
+  color,
+  onChange,
+  customColors,
+  setActiveColorPickerSection,
+  updateData,
+  activeShade,
+  onEyeDropperToggle,
+  onEscape,
+}: ColorPickerKeyNavHandlerProps): boolean => {
+  if (event[KEYS.CTRL_OR_CMD]) {
+    return false;
+  }
+
+  if (event.key === KEYS.ESCAPE) {
+    onEscape(event);
+    return true;
+  }
+
+  // checkt using `key` to ignore combos with Alt modifier
+  if (event.key === KEYS.ALT) {
+    onEyeDropperToggle(true);
+    return true;
+  }
+
+  if (event.key === KEYS.I) {
+    onEyeDropperToggle();
+    return true;
+  }
+
+  const colorObj = getColorNameAndShadeFromColor({ color, palette });
+
+  if (event.key === KEYS.TAB) {
+    const sectionsMap: Record<
+      NonNullable<ActiveColorPickerSectionAtomType>,
+      boolean
+    > = {
+      custom: !!customColors.length,
+      baseColors: true,
+      shades: colorObj?.shade != null,
+      hex: true,
+    };
+
+    const sections = Object.entries(sectionsMap).reduce((acc, [key, value]) => {
+      if (value) {
+        acc.push(key as ActiveColorPickerSectionAtomType);
+      }
+      return acc;
+    }, [] as ActiveColorPickerSectionAtomType[]);
+
+    const activeSectionIndex = sections.indexOf(activeColorPickerSection);
+    const indexOffset = event.shiftKey ? -1 : 1;
+    const nextSectionIndex =
+      activeSectionIndex + indexOffset > sections.length - 1
+        ? 0
+        : activeSectionIndex + indexOffset < 0
+        ? sections.length - 1
+        : activeSectionIndex + indexOffset;
+
+    const nextSection = sections[nextSectionIndex];
+
+    if (nextSection) {
+      setActiveColorPickerSection(nextSection);
+    }
+
+    if (nextSection === "custom") {
+      onChange(customColors[0]);
+    } else if (nextSection === "baseColors") {
+      const baseColorName = (
+        Object.entries(palette) as [string, ValueOf<ColorPalette>][]
+      ).find(([name, shades]) => {
+        if (Array.isArray(shades)) {
+          return shades.includes(color);
+        } else if (shades === color) {
+          return name;
+        }
+        return null;
+      });
+
+      if (!baseColorName) {
+        onChange(COLOR_PALETTE.black);
+      }
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    return true;
+  }
+
+  if (
+    hotkeyHandler({
+      e: event,
+      colorObj,
+      onChange,
+      palette,
+      customColors,
+      setActiveColorPickerSection,
+      activeShade,
+    })
+  ) {
+    return true;
+  }
+
+  if (activeColorPickerSection === "shades") {
+    if (colorObj) {
+      const { shade } = colorObj;
+      const newShade = arrowHandler(event.key, shade, COLORS_PER_ROW);
+
+      if (newShade !== undefined) {
+        onChange(palette[colorObj.colorName][newShade]);
+        return true;
+      }
+    }
+  }
+
+  if (activeColorPickerSection === "baseColors") {
+    if (colorObj) {
+      const { colorName } = colorObj;
+      const colorNames = Object.keys(palette) as (keyof ColorPalette)[];
+      const indexOfColorName = colorNames.indexOf(colorName);
+
+      const newColorIndex = arrowHandler(
+        event.key,
+        indexOfColorName,
+        colorNames.length,
+      );
+
+      if (newColorIndex !== undefined) {
+        const newColorName = colorNames[newColorIndex];
+        const newColorNameValue = palette[newColorName];
+
+        onChange(
+          Array.isArray(newColorNameValue)
+            ? newColorNameValue[activeShade]
+            : newColorNameValue,
+        );
+        return true;
+      }
+    }
+  }
+
+  if (activeColorPickerSection === "custom") {
+    const indexOfColor = customColors.indexOf(color);
+
+    const newColorIndex = arrowHandler(
+      event.key,
+      indexOfColor,
+      customColors.length,
+    );
+
+    if (newColorIndex !== undefined) {
+      const newColor = customColors[newColorIndex];
+      onChange(newColor);
+      return true;
+    }
+  }
+
+  return false;
+};
diff --git a/src/components/ConfirmDialog.tsx b/src/components/ConfirmDialog.tsx
index aebb42de7..9061fefa0 100644
--- a/src/components/ConfirmDialog.tsx
+++ b/src/components/ConfirmDialog.tsx
@@ -4,8 +4,8 @@ import { Dialog, DialogProps } from "./Dialog";
 import "./ConfirmDialog.scss";
 import DialogActionButton from "./DialogActionButton";
 import { useSetAtom } from "jotai";
-import { isLibraryMenuOpenAtom } from "./LibraryMenuHeaderContent";
-import { useExcalidrawSetAppState } from "./App";
+import { isLibraryMenuOpenAtom } from "./LibraryMenu";
+import { useExcalidrawContainer, useExcalidrawSetAppState } from "./App";
 import { jotaiScope } from "../jotai";
 
 interface Props extends Omit<DialogProps, "onCloseRequest"> {
@@ -26,11 +26,12 @@ const ConfirmDialog = (props: Props) => {
   } = props;
   const setAppState = useExcalidrawSetAppState();
   const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom, jotaiScope);
+  const { container } = useExcalidrawContainer();
 
   return (
     <Dialog
       onCloseRequest={onCancel}
-      small={true}
+      size="small"
       {...rest}
       className={`confirm-dialog ${className}`}
     >
@@ -42,6 +43,7 @@ const ConfirmDialog = (props: Props) => {
             setAppState({ openMenu: null });
             setIsLibraryMenuOpen(false);
             onCancel();
+            container?.focus();
           }}
         />
         <DialogActionButton
@@ -50,6 +52,7 @@ const ConfirmDialog = (props: Props) => {
             setAppState({ openMenu: null });
             setIsLibraryMenuOpen(false);
             onConfirm();
+            container?.focus();
           }}
           actionType="danger"
         />
diff --git a/src/components/ContextMenu.scss b/src/components/ContextMenu.scss
index 579763119..81ced3880 100644
--- a/src/components/ContextMenu.scss
+++ b/src/components/ContextMenu.scss
@@ -30,6 +30,7 @@
     background-color: transparent;
     border: none;
     white-space: nowrap;
+    font-family: inherit;
 
     display: grid;
     grid-template-columns: 1fr 0.2fr;
diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx
index 1463f1033..42d654207 100644
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { Popover } from "./Popover";
-import { t } from "../i18n";
+import { t, TranslationKeys } from "../i18n";
 
 import "./ContextMenu.scss";
 import {
@@ -82,9 +82,15 @@ export const ContextMenu = React.memo(
             let label = "";
             if (item.contextItemLabel) {
               if (typeof item.contextItemLabel === "function") {
-                label = t(item.contextItemLabel(elements, appState));
+                label = t(
+                  item.contextItemLabel(
+                    elements,
+                    appState,
+                    actionManager.app,
+                  ) as unknown as TranslationKeys,
+                );
               } else {
-                label = t(item.contextItemLabel);
+                label = t(item.contextItemLabel as unknown as TranslationKeys);
               }
             }
 
diff --git a/src/components/DefaultSidebar.test.tsx b/src/components/DefaultSidebar.test.tsx
new file mode 100644
index 000000000..64cfe5ba6
--- /dev/null
+++ b/src/components/DefaultSidebar.test.tsx
@@ -0,0 +1,144 @@
+import React from "react";
+import { DEFAULT_SIDEBAR } from "../constants";
+import { DefaultSidebar } from "../packages/excalidraw/index";
+import {
+  fireEvent,
+  waitFor,
+  withExcalidrawDimensions,
+} from "../tests/test-utils";
+import {
+  assertExcalidrawWithSidebar,
+  assertSidebarDockButton,
+} from "./Sidebar/Sidebar.test";
+
+const { h } = window;
+
+describe("DefaultSidebar", () => {
+  it("when `docked={undefined}` & `onDock={undefined}`, should allow docking", async () => {
+    await assertExcalidrawWithSidebar(
+      <DefaultSidebar />,
+      DEFAULT_SIDEBAR.name,
+      async () => {
+        expect(h.state.defaultSidebarDockedPreference).toBe(false);
+
+        const { dockButton } = await assertSidebarDockButton(true);
+
+        fireEvent.click(dockButton);
+        await waitFor(() => {
+          expect(h.state.defaultSidebarDockedPreference).toBe(true);
+          expect(dockButton).toHaveClass("selected");
+        });
+
+        fireEvent.click(dockButton);
+        await waitFor(() => {
+          expect(h.state.defaultSidebarDockedPreference).toBe(false);
+          expect(dockButton).not.toHaveClass("selected");
+        });
+      },
+    );
+  });
+
+  it("when `docked={undefined}` & `onDock`, should allow docking", async () => {
+    await assertExcalidrawWithSidebar(
+      <DefaultSidebar onDock={() => {}} />,
+      DEFAULT_SIDEBAR.name,
+      async () => {
+        expect(h.state.defaultSidebarDockedPreference).toBe(false);
+
+        const { dockButton } = await assertSidebarDockButton(true);
+
+        fireEvent.click(dockButton);
+        await waitFor(() => {
+          expect(h.state.defaultSidebarDockedPreference).toBe(true);
+          expect(dockButton).toHaveClass("selected");
+        });
+
+        fireEvent.click(dockButton);
+        await waitFor(() => {
+          expect(h.state.defaultSidebarDockedPreference).toBe(false);
+          expect(dockButton).not.toHaveClass("selected");
+        });
+      },
+    );
+  });
+
+  it("when `docked={true}` & `onDock`, should allow docking", async () => {
+    await assertExcalidrawWithSidebar(
+      <DefaultSidebar onDock={() => {}} />,
+      DEFAULT_SIDEBAR.name,
+      async () => {
+        expect(h.state.defaultSidebarDockedPreference).toBe(false);
+
+        const { dockButton } = await assertSidebarDockButton(true);
+
+        fireEvent.click(dockButton);
+        await waitFor(() => {
+          expect(h.state.defaultSidebarDockedPreference).toBe(true);
+          expect(dockButton).toHaveClass("selected");
+        });
+
+        fireEvent.click(dockButton);
+        await waitFor(() => {
+          expect(h.state.defaultSidebarDockedPreference).toBe(false);
+          expect(dockButton).not.toHaveClass("selected");
+        });
+      },
+    );
+  });
+
+  it("when `onDock={false}`, should disable docking", async () => {
+    await assertExcalidrawWithSidebar(
+      <DefaultSidebar onDock={false} />,
+      DEFAULT_SIDEBAR.name,
+      async () => {
+        await withExcalidrawDimensions(
+          { width: 1920, height: 1080 },
+          async () => {
+            expect(h.state.defaultSidebarDockedPreference).toBe(false);
+
+            await assertSidebarDockButton(false);
+          },
+        );
+      },
+    );
+  });
+
+  it("when `docked={true}` & `onDock={false}`, should force-dock sidebar", async () => {
+    await assertExcalidrawWithSidebar(
+      <DefaultSidebar docked onDock={false} />,
+      DEFAULT_SIDEBAR.name,
+      async () => {
+        expect(h.state.defaultSidebarDockedPreference).toBe(false);
+
+        const { sidebar } = await assertSidebarDockButton(false);
+        expect(sidebar).toHaveClass("sidebar--docked");
+      },
+    );
+  });
+
+  it("when `docked={true}` & `onDock={undefined}`, should force-dock sidebar", async () => {
+    await assertExcalidrawWithSidebar(
+      <DefaultSidebar docked />,
+      DEFAULT_SIDEBAR.name,
+      async () => {
+        expect(h.state.defaultSidebarDockedPreference).toBe(false);
+
+        const { sidebar } = await assertSidebarDockButton(false);
+        expect(sidebar).toHaveClass("sidebar--docked");
+      },
+    );
+  });
+
+  it("when `docked={false}` & `onDock={undefined}`, should force-undock sidebar", async () => {
+    await assertExcalidrawWithSidebar(
+      <DefaultSidebar docked={false} />,
+      DEFAULT_SIDEBAR.name,
+      async () => {
+        expect(h.state.defaultSidebarDockedPreference).toBe(false);
+
+        const { sidebar } = await assertSidebarDockButton(false);
+        expect(sidebar).not.toHaveClass("sidebar--docked");
+      },
+    );
+  });
+});
diff --git a/src/components/DefaultSidebar.tsx b/src/components/DefaultSidebar.tsx
new file mode 100644
index 000000000..48a78faac
--- /dev/null
+++ b/src/components/DefaultSidebar.tsx
@@ -0,0 +1,118 @@
+import clsx from "clsx";
+import { DEFAULT_SIDEBAR, LIBRARY_SIDEBAR_TAB } from "../constants";
+import { useTunnels } from "../context/tunnels";
+import { useUIAppState } from "../context/ui-appState";
+import { t } from "../i18n";
+import { MarkOptional, Merge } from "../utility-types";
+import { composeEventHandlers } from "../utils";
+import { useExcalidrawSetAppState } from "./App";
+import { withInternalFallback } from "./hoc/withInternalFallback";
+import { LibraryMenu } from "./LibraryMenu";
+import { SidebarProps, SidebarTriggerProps } from "./Sidebar/common";
+import { Sidebar } from "./Sidebar/Sidebar";
+
+const DefaultSidebarTrigger = withInternalFallback(
+  "DefaultSidebarTrigger",
+  (
+    props: Omit<SidebarTriggerProps, "name"> &
+      React.HTMLAttributes<HTMLDivElement>,
+  ) => {
+    const { DefaultSidebarTriggerTunnel } = useTunnels();
+    return (
+      <DefaultSidebarTriggerTunnel.In>
+        <Sidebar.Trigger
+          {...props}
+          className="default-sidebar-trigger"
+          name={DEFAULT_SIDEBAR.name}
+        />
+      </DefaultSidebarTriggerTunnel.In>
+    );
+  },
+);
+DefaultSidebarTrigger.displayName = "DefaultSidebarTrigger";
+
+const DefaultTabTriggers = ({
+  children,
+  ...rest
+}: { children: React.ReactNode } & React.HTMLAttributes<HTMLDivElement>) => {
+  const { DefaultSidebarTabTriggersTunnel } = useTunnels();
+  return (
+    <DefaultSidebarTabTriggersTunnel.In>
+      <Sidebar.TabTriggers {...rest}>{children}</Sidebar.TabTriggers>
+    </DefaultSidebarTabTriggersTunnel.In>
+  );
+};
+DefaultTabTriggers.displayName = "DefaultTabTriggers";
+
+export const DefaultSidebar = Object.assign(
+  withInternalFallback(
+    "DefaultSidebar",
+    ({
+      children,
+      className,
+      onDock,
+      docked,
+      ...rest
+    }: Merge<
+      MarkOptional<Omit<SidebarProps, "name">, "children">,
+      {
+        /** pass `false` to disable docking */
+        onDock?: SidebarProps["onDock"] | false;
+      }
+    >) => {
+      const appState = useUIAppState();
+      const setAppState = useExcalidrawSetAppState();
+
+      const { DefaultSidebarTabTriggersTunnel } = useTunnels();
+
+      return (
+        <Sidebar
+          {...rest}
+          name="default"
+          key="default"
+          className={clsx("default-sidebar", className)}
+          docked={docked ?? appState.defaultSidebarDockedPreference}
+          onDock={
+            // `onDock=false` disables docking.
+            // if `docked` passed, but no onDock passed, disable manual docking.
+            onDock === false || (!onDock && docked != null)
+              ? undefined
+              : // compose to allow the host app to listen on default behavior
+                composeEventHandlers(onDock, (docked) => {
+                  setAppState({ defaultSidebarDockedPreference: docked });
+                })
+          }
+        >
+          <Sidebar.Tabs>
+            <Sidebar.Header>
+              {rest.__fallback && (
+                <div
+                  style={{
+                    color: "var(--color-primary)",
+                    fontSize: "1.2em",
+                    fontWeight: "bold",
+                    textOverflow: "ellipsis",
+                    overflow: "hidden",
+                    whiteSpace: "nowrap",
+                    paddingRight: "1em",
+                  }}
+                >
+                  {t("toolBar.library")}
+                </div>
+              )}
+              <DefaultSidebarTabTriggersTunnel.Out />
+            </Sidebar.Header>
+            <Sidebar.Tab tab={LIBRARY_SIDEBAR_TAB}>
+              <LibraryMenu />
+            </Sidebar.Tab>
+            {children}
+          </Sidebar.Tabs>
+        </Sidebar>
+      );
+    },
+  ),
+  {
+    Trigger: DefaultSidebarTrigger,
+    TabTriggers: DefaultTabTriggers,
+  },
+);
diff --git a/src/components/Dialog.scss b/src/components/Dialog.scss
index 604b3c64e..405f9235a 100644
--- a/src/components/Dialog.scss
+++ b/src/components/Dialog.scss
@@ -14,4 +14,33 @@
     padding: 0 0 0.75rem;
     margin-bottom: 1.5rem;
   }
+
+  .Dialog__close {
+    color: var(--color-gray-40);
+    margin: 0;
+    position: absolute;
+    top: 0.75rem;
+    right: 0.5rem;
+    border: 0;
+    background-color: transparent;
+    line-height: 0;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--color-gray-60);
+    }
+    &:active {
+      color: var(--color-gray-40);
+    }
+
+    @include isMobile {
+      top: 1.25rem;
+      right: 1.25rem;
+    }
+
+    svg {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+  }
 }
diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
index 24a078dd5..34e6cf872 100644
--- a/src/components/Dialog.tsx
+++ b/src/components/Dialog.tsx
@@ -12,27 +12,44 @@ import "./Dialog.scss";
 import { back, CloseIcon } from "./icons";
 import { Island } from "./Island";
 import { Modal } from "./Modal";
-import { AppState } from "../types";
 import { queryFocusableElements } from "../utils";
 import { useSetAtom } from "jotai";
-import { isLibraryMenuOpenAtom } from "./LibraryMenuHeaderContent";
+import { isLibraryMenuOpenAtom } from "./LibraryMenu";
 import { jotaiScope } from "../jotai";
 
+export type DialogSize = number | "small" | "regular" | "wide" | undefined;
+
 export interface DialogProps {
   children: React.ReactNode;
   className?: string;
-  small?: boolean;
+  size?: DialogSize;
   onCloseRequest(): void;
-  title: React.ReactNode;
+  title: React.ReactNode | false;
   autofocus?: boolean;
-  theme?: AppState["theme"];
   closeOnClickOutside?: boolean;
 }
 
+function getDialogSize(size: DialogSize): number {
+  if (size && typeof size === "number") {
+    return size;
+  }
+
+  switch (size) {
+    case "small":
+      return 550;
+    case "wide":
+      return 1024;
+    case "regular":
+    default:
+      return 800;
+  }
+}
+
 export const Dialog = (props: DialogProps) => {
   const [islandNode, setIslandNode] = useCallbackRefState<HTMLDivElement>();
   const [lastActiveElement] = useState(document.activeElement);
   const { id } = useExcalidrawContainer();
+  const device = useDevice();
 
   useEffect(() => {
     if (!islandNode) {
@@ -86,23 +103,24 @@ export const Dialog = (props: DialogProps) => {
     <Modal
       className={clsx("Dialog", props.className)}
       labelledBy="dialog-title"
-      maxWidth={props.small ? 550 : 800}
+      maxWidth={getDialogSize(props.size)}
       onCloseRequest={onClose}
-      theme={props.theme}
       closeOnClickOutside={props.closeOnClickOutside}
     >
       <Island ref={setIslandNode}>
-        <h2 id={`${id}-dialog-title`} className="Dialog__title">
-          <span className="Dialog__titleContent">{props.title}</span>
-          <button
-            className="Modal__close"
-            onClick={onClose}
-            title={t("buttons.close")}
-            aria-label={t("buttons.close")}
-          >
-            {useDevice().isMobile ? back : CloseIcon}
-          </button>
-        </h2>
+        {props.title && (
+          <h2 id={`${id}-dialog-title`} className="Dialog__title">
+            <span className="Dialog__titleContent">{props.title}</span>
+          </h2>
+        )}
+        <button
+          className="Dialog__close"
+          onClick={onClose}
+          title={t("buttons.close")}
+          aria-label={t("buttons.close")}
+        >
+          {device.isMobile ? back : CloseIcon}
+        </button>
         <div className="Dialog__content">{props.children}</div>
       </Island>
     </Modal>
diff --git a/src/components/ErrorDialog.tsx b/src/components/ErrorDialog.tsx
index 56c303c15..74d265f73 100644
--- a/src/components/ErrorDialog.tsx
+++ b/src/components/ErrorDialog.tsx
@@ -28,7 +28,7 @@ export const ErrorDialog = ({
     <>
       {modalIsShown && (
         <Dialog
-          small
+          size="small"
           onCloseRequest={handleClose}
           title={t("errorDialog.title")}
         >
diff --git a/src/components/EyeDropper.scss b/src/components/EyeDropper.scss
new file mode 100644
index 000000000..3273e4d77
--- /dev/null
+++ b/src/components/EyeDropper.scss
@@ -0,0 +1,48 @@
+.excalidraw {
+  .excalidraw-eye-dropper-container,
+  .excalidraw-eye-dropper-backdrop {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    touch-action: none;
+  }
+
+  .excalidraw-eye-dropper-container {
+    pointer-events: none;
+  }
+
+  .excalidraw-eye-dropper-backdrop {
+    pointer-events: all;
+  }
+
+  .excalidraw-eye-dropper-preview {
+    pointer-events: none;
+    width: 3rem;
+    height: 3rem;
+    position: fixed;
+    z-index: 999999;
+    border-radius: 1rem;
+    border: 1px solid var(--default-border-color);
+    filter: var(--theme-filter);
+  }
+
+  .excalidraw-eye-dropper-trigger {
+    width: 1.25rem;
+    height: 1.25rem;
+    cursor: pointer;
+    padding: 4px;
+    margin-right: -4px;
+    margin-left: -2px;
+    border-radius: 0.5rem;
+    color: var(--icon-fill-color);
+
+    &:hover {
+      background: var(--button-hover-bg);
+    }
+    &.selected {
+      color: var(--color-primary);
+      background: var(--color-primary-light);
+    }
+  }
+}
diff --git a/src/components/EyeDropper.tsx b/src/components/EyeDropper.tsx
new file mode 100644
index 000000000..794ad6026
--- /dev/null
+++ b/src/components/EyeDropper.tsx
@@ -0,0 +1,217 @@
+import { atom } from "jotai";
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { COLOR_PALETTE, rgbToHex } from "../colors";
+import { EVENT } from "../constants";
+import { useUIAppState } from "../context/ui-appState";
+import { mutateElement } from "../element/mutateElement";
+import { useCreatePortalContainer } from "../hooks/useCreatePortalContainer";
+import { useOutsideClick } from "../hooks/useOutsideClick";
+import { KEYS } from "../keys";
+import { invalidateShapeForElement } from "../renderer/renderElement";
+import { getSelectedElements } from "../scene";
+import Scene from "../scene/Scene";
+import { useApp, useExcalidrawContainer, useExcalidrawElements } from "./App";
+
+import "./EyeDropper.scss";
+
+type EyeDropperProperties = {
+  keepOpenOnAlt: boolean;
+  swapPreviewOnAlt?: boolean;
+  onSelect?: (color: string, event: PointerEvent) => void;
+  previewType?: "strokeColor" | "backgroundColor";
+};
+
+export const activeEyeDropperAtom = atom<null | EyeDropperProperties>(null);
+
+export const EyeDropper: React.FC<{
+  onCancel: () => void;
+  onSelect: Required<EyeDropperProperties>["onSelect"];
+  swapPreviewOnAlt?: EyeDropperProperties["swapPreviewOnAlt"];
+  previewType?: EyeDropperProperties["previewType"];
+}> = ({
+  onCancel,
+  onSelect,
+  swapPreviewOnAlt,
+  previewType = "backgroundColor",
+}) => {
+  const eyeDropperContainer = useCreatePortalContainer({
+    className: "excalidraw-eye-dropper-backdrop",
+    parentSelector: ".excalidraw-eye-dropper-container",
+  });
+  const appState = useUIAppState();
+  const elements = useExcalidrawElements();
+  const app = useApp();
+
+  const selectedElements = getSelectedElements(elements, appState);
+
+  const metaStuffRef = useRef({ selectedElements, app });
+  metaStuffRef.current.selectedElements = selectedElements;
+  metaStuffRef.current.app = app;
+
+  const { container: excalidrawContainer } = useExcalidrawContainer();
+
+  useEffect(() => {
+    const colorPreviewDiv = ref.current;
+
+    if (!colorPreviewDiv || !app.canvas || !eyeDropperContainer) {
+      return;
+    }
+
+    let currentColor = COLOR_PALETTE.black;
+    let isHoldingPointerDown = false;
+
+    const ctx = app.canvas.getContext("2d")!;
+
+    const mouseMoveListener = ({
+      clientX,
+      clientY,
+      altKey,
+    }: {
+      clientX: number;
+      clientY: number;
+      altKey: boolean;
+    }) => {
+      // FIXME swap offset when the preview gets outside viewport
+      colorPreviewDiv.style.top = `${clientY + 20}px`;
+      colorPreviewDiv.style.left = `${clientX + 20}px`;
+
+      const pixel = ctx.getImageData(
+        clientX * window.devicePixelRatio - appState.offsetLeft,
+        clientY * window.devicePixelRatio - appState.offsetTop,
+        1,
+        1,
+      ).data;
+
+      currentColor = rgbToHex(pixel[0], pixel[1], pixel[2]);
+
+      if (isHoldingPointerDown) {
+        for (const element of metaStuffRef.current.selectedElements) {
+          mutateElement(
+            element,
+            {
+              [altKey && swapPreviewOnAlt
+                ? previewType === "strokeColor"
+                  ? "backgroundColor"
+                  : "strokeColor"
+                : previewType]: currentColor,
+            },
+            false,
+          );
+          invalidateShapeForElement(element);
+        }
+        Scene.getScene(
+          metaStuffRef.current.selectedElements[0],
+        )?.informMutation();
+      }
+
+      colorPreviewDiv.style.background = currentColor;
+    };
+
+    const pointerDownListener = (event: PointerEvent) => {
+      isHoldingPointerDown = true;
+      // NOTE we can't event.preventDefault() as that would stop
+      // pointermove events
+      event.stopImmediatePropagation();
+    };
+
+    const pointerUpListener = (event: PointerEvent) => {
+      isHoldingPointerDown = false;
+
+      // since we're not preventing default on pointerdown, the focus would
+      // goes back to `body` so we want to refocus the editor container instead
+      excalidrawContainer?.focus();
+
+      event.stopImmediatePropagation();
+      event.preventDefault();
+
+      onSelect(currentColor, event);
+    };
+
+    const keyDownListener = (event: KeyboardEvent) => {
+      if (event.key === KEYS.ESCAPE) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        onCancel();
+      }
+    };
+
+    // -------------------------------------------------------------------------
+
+    eyeDropperContainer.tabIndex = -1;
+    // focus container so we can listen on keydown events
+    eyeDropperContainer.focus();
+
+    // init color preview else it would show only after the first mouse move
+    mouseMoveListener({
+      clientX: metaStuffRef.current.app.lastViewportPosition.x,
+      clientY: metaStuffRef.current.app.lastViewportPosition.y,
+      altKey: false,
+    });
+
+    eyeDropperContainer.addEventListener(EVENT.KEYDOWN, keyDownListener);
+    eyeDropperContainer.addEventListener(
+      EVENT.POINTER_DOWN,
+      pointerDownListener,
+    );
+    eyeDropperContainer.addEventListener(EVENT.POINTER_UP, pointerUpListener);
+    window.addEventListener("pointermove", mouseMoveListener, {
+      passive: true,
+    });
+    window.addEventListener(EVENT.BLUR, onCancel);
+
+    return () => {
+      isHoldingPointerDown = false;
+      eyeDropperContainer.removeEventListener(EVENT.KEYDOWN, keyDownListener);
+      eyeDropperContainer.removeEventListener(
+        EVENT.POINTER_DOWN,
+        pointerDownListener,
+      );
+      eyeDropperContainer.removeEventListener(
+        EVENT.POINTER_UP,
+        pointerUpListener,
+      );
+      window.removeEventListener("pointermove", mouseMoveListener);
+      window.removeEventListener(EVENT.BLUR, onCancel);
+    };
+  }, [
+    app.canvas,
+    eyeDropperContainer,
+    onCancel,
+    onSelect,
+    swapPreviewOnAlt,
+    previewType,
+    excalidrawContainer,
+    appState.offsetLeft,
+    appState.offsetTop,
+  ]);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useOutsideClick(
+    ref,
+    () => {
+      onCancel();
+    },
+    (event) => {
+      if (
+        event.target.closest(
+          ".excalidraw-eye-dropper-trigger, .excalidraw-eye-dropper-backdrop",
+        )
+      ) {
+        return true;
+      }
+      // consider all other clicks as outside
+      return false;
+    },
+  );
+
+  if (!eyeDropperContainer) {
+    return null;
+  }
+
+  return createPortal(
+    <div ref={ref} className="excalidraw-eye-dropper-preview" />,
+    eyeDropperContainer,
+  );
+};
diff --git a/src/components/FilledButton.scss b/src/components/FilledButton.scss
new file mode 100644
index 000000000..e171ff8d0
--- /dev/null
+++ b/src/components/FilledButton.scss
@@ -0,0 +1,191 @@
+@import "../css/variables.module";
+
+.excalidraw {
+  .ExcButton {
+    --text-color: transparent;
+    --border-color: transparent;
+    --back-color: transparent;
+
+    color: var(--text-color);
+    background-color: var(--back-color);
+    border-color: var(--border-color);
+
+    &--color-primary {
+      &.ExcButton--variant-filled {
+        --text-color: var(--input-bg-color);
+        --back-color: var(--color-primary);
+
+        &:hover {
+          --back-color: var(--color-primary-darker);
+        }
+
+        &:active {
+          --back-color: var(--color-primary-darkest);
+        }
+      }
+
+      &.ExcButton--variant-outlined,
+      &.ExcButton--variant-icon {
+        --text-color: var(--color-primary);
+        --border-color: var(--color-primary);
+        --back-color: var(--input-bg-color);
+
+        &:hover {
+          --text-color: var(--color-primary-darker);
+          --border-color: var(--color-primary-darker);
+        }
+
+        &:active {
+          --text-color: var(--color-primary-darkest);
+          --border-color: var(--color-primary-darkest);
+        }
+      }
+    }
+
+    &--color-danger {
+      &.ExcButton--variant-filled {
+        --text-color: var(--color-danger-text);
+        --back-color: var(--color-danger-dark);
+
+        &:hover {
+          --back-color: var(--color-danger-darker);
+        }
+
+        &:active {
+          --back-color: var(--color-danger-darkest);
+        }
+      }
+
+      &.ExcButton--variant-outlined,
+      &.ExcButton--variant-icon {
+        --text-color: var(--color-danger);
+        --border-color: var(--color-danger);
+        --back-color: transparent;
+
+        &:hover {
+          --text-color: var(--color-danger-darkest);
+          --border-color: var(--color-danger-darkest);
+        }
+
+        &:active {
+          --text-color: var(--color-danger-darker);
+          --border-color: var(--color-danger-darker);
+        }
+      }
+    }
+
+    &--color-muted {
+      &.ExcButton--variant-filled {
+        --text-color: var(--island-bg-color);
+        --back-color: var(--color-gray-50);
+
+        &:hover {
+          --back-color: var(--color-gray-60);
+        }
+
+        &:active {
+          --back-color: var(--color-gray-80);
+        }
+      }
+
+      &.ExcButton--variant-outlined,
+      &.ExcButton--variant-icon {
+        --text-color: var(--color-muted-background);
+        --border-color: var(--color-muted);
+        --back-color: var(--island-bg-color);
+
+        &:hover {
+          --text-color: var(--color-muted-background-darker);
+          --border-color: var(--color-muted-darker);
+        }
+
+        &:active {
+          --text-color: var(--color-muted-background-darker);
+          --border-color: var(--color-muted-darkest);
+        }
+      }
+    }
+
+    &--color-warning {
+      &.ExcButton--variant-filled {
+        --text-color: black;
+        --back-color: var(--color-warning-dark);
+
+        &:hover {
+          --back-color: var(--color-warning-darker);
+        }
+
+        &:active {
+          --back-color: var(--color-warning-darkest);
+        }
+      }
+
+      &.ExcButton--variant-outlined,
+      &.ExcButton--variant-icon {
+        --text-color: var(--color-warning-dark);
+        --border-color: var(--color-warning-dark);
+        --back-color: var(--input-bg-color);
+
+        &:hover {
+          --text-color: var(--color-warning-darker);
+          --border-color: var(--color-warning-darker);
+        }
+
+        &:active {
+          --text-color: var(--color-warning-darkest);
+          --border-color: var(--color-warning-darkest);
+        }
+      }
+    }
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+
+    border-radius: 0.5rem;
+    border-width: 1px;
+    border-style: solid;
+
+    font-family: "Assistant";
+
+    user-select: none;
+
+    transition: all 150ms ease-out;
+
+    &--size-large {
+      font-weight: 600;
+      font-size: 0.875rem;
+      min-height: 3rem;
+      padding: 0.5rem 1.5rem;
+      gap: 0.75rem;
+
+      letter-spacing: 0.4px;
+    }
+
+    &--size-medium {
+      font-weight: 600;
+      font-size: 0.75rem;
+      min-height: 2.5rem;
+      padding: 0.5rem 1rem;
+      gap: 0.5rem;
+
+      letter-spacing: normal;
+    }
+
+    &--variant-icon {
+      padding: 0.5rem 0.75rem;
+      width: 3rem;
+    }
+
+    &--fullWidth {
+      width: 100%;
+    }
+
+    &__icon {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+  }
+}
diff --git a/src/components/FilledButton.tsx b/src/components/FilledButton.tsx
new file mode 100644
index 000000000..3f844cf37
--- /dev/null
+++ b/src/components/FilledButton.tsx
@@ -0,0 +1,64 @@
+import React, { forwardRef } from "react";
+import clsx from "clsx";
+
+import "./FilledButton.scss";
+
+export type ButtonVariant = "filled" | "outlined" | "icon";
+export type ButtonColor = "primary" | "danger" | "warning" | "muted";
+export type ButtonSize = "medium" | "large";
+
+export type FilledButtonProps = {
+  label: string;
+
+  children?: React.ReactNode;
+  onClick?: () => void;
+
+  variant?: ButtonVariant;
+  color?: ButtonColor;
+  size?: ButtonSize;
+  className?: string;
+  fullWidth?: boolean;
+
+  startIcon?: React.ReactNode;
+};
+
+export const FilledButton = forwardRef<HTMLButtonElement, FilledButtonProps>(
+  (
+    {
+      children,
+      startIcon,
+      onClick,
+      label,
+      variant = "filled",
+      color = "primary",
+      size = "medium",
+      fullWidth,
+      className,
+    },
+    ref,
+  ) => {
+    return (
+      <button
+        className={clsx(
+          "ExcButton",
+          `ExcButton--color-${color}`,
+          `ExcButton--variant-${variant}`,
+          `ExcButton--size-${size}`,
+          { "ExcButton--fullWidth": fullWidth },
+          className,
+        )}
+        onClick={onClick}
+        type="button"
+        aria-label={label}
+        ref={ref}
+      >
+        {startIcon && (
+          <div className="ExcButton__icon" aria-hidden>
+            {startIcon}
+          </div>
+        )}
+        {variant !== "icon" && (children ?? label)}
+      </button>
+    );
+  },
+);
diff --git a/src/components/HelpDialog.tsx b/src/components/HelpDialog.tsx
index bd2f38417..b51fadfca 100644
--- a/src/components/HelpDialog.tsx
+++ b/src/components/HelpDialog.tsx
@@ -12,7 +12,7 @@ const Header = () => (
   <div className="HelpDialog__header">
     <a
       className="HelpDialog__btn"
-      href="https://github.com/excalidraw/excalidraw#documentation"
+      href="https://docs.excalidraw.com"
       target="_blank"
       rel="noopener noreferrer"
     >
@@ -164,6 +164,11 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               label={t("toolBar.eraser")}
               shortcuts={[KEYS.E, KEYS["0"]]}
             />
+            <Shortcut label={t("toolBar.frame")} shortcuts={[KEYS.F]} />
+            <Shortcut
+              label={t("labels.eyeDropper")}
+              shortcuts={[KEYS.I, "Shift+S", "Shift+G"]}
+            />
             <Shortcut
               label={t("helpDialog.editLineArrowPoints")}
               shortcuts={[getShortcutKey("CtrlOrCmd+Enter")]}
diff --git a/src/components/HintViewer.tsx b/src/components/HintViewer.tsx
index 6615c91e7..fd4446e42 100644
--- a/src/components/HintViewer.tsx
+++ b/src/components/HintViewer.tsx
@@ -1,9 +1,5 @@
 import { t } from "../i18n";
-import { NonDeletedExcalidrawElement } from "../element/types";
-import { getSelectedElements } from "../scene";
-
-import "./HintViewer.scss";
-import { AppState, Device } from "../types";
+import { AppClassProperties, Device, UIAppState } from "../types";
 import {
   isImageElement,
   isLinearElement,
@@ -13,23 +9,20 @@ import {
 import { getShortcutKey } from "../utils";
 import { isEraserActive } from "../appState";
 
+import "./HintViewer.scss";
+
 interface HintViewerProps {
-  appState: AppState;
-  elements: readonly NonDeletedExcalidrawElement[];
+  appState: UIAppState;
   isMobile: boolean;
   device: Device;
+  app: AppClassProperties;
 }
 
-const getHints = ({
-  appState,
-  elements,
-  isMobile,
-  device,
-}: HintViewerProps) => {
+const getHints = ({ appState, isMobile, device, app }: HintViewerProps) => {
   const { activeTool, isResizing, isRotating, lastPointerDownWith } = appState;
   const multiMode = appState.multiElement !== null;
 
-  if (appState.openSidebar === "library" && !device.canDeviceFitSidebar) {
+  if (appState.openSidebar && !device.canDeviceFitSidebar) {
     return null;
   }
 
@@ -55,7 +48,7 @@ const getHints = ({
     return t("hints.placeImage");
   }
 
-  const selectedElements = getSelectedElements(elements, appState);
+  const selectedElements = app.scene.getSelectedElements(appState);
 
   if (
     isResizing &&
@@ -115,15 +108,15 @@ const getHints = ({
 
 export const HintViewer = ({
   appState,
-  elements,
   isMobile,
   device,
+  app,
 }: HintViewerProps) => {
   let hint = getHints({
     appState,
-    elements,
     isMobile,
     device,
+    app,
   });
   if (!hint) {
     return null;
diff --git a/src/components/ImageExportDialog.scss b/src/components/ImageExportDialog.scss
new file mode 100644
index 000000000..093e1a76f
--- /dev/null
+++ b/src/components/ImageExportDialog.scss
@@ -0,0 +1,173 @@
+@import "../css/variables.module";
+
+.excalidraw {
+  --ImageExportModal-preview-border: #d6d6d6;
+
+  &.theme--dark {
+    --ImageExportModal-preview-border: #5c5c5c;
+  }
+
+  .ImageExportModal {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    & h3 {
+      font-family: "Assistant";
+      font-style: normal;
+      font-weight: 700;
+      font-size: 1.313rem;
+      line-height: 130%;
+      padding: 0;
+      margin: 0;
+
+      @include isMobile {
+        display: none;
+      }
+    }
+
+    & > h3 {
+      display: none;
+
+      @include isMobile {
+        display: block;
+      }
+    }
+
+    @include isMobile {
+      flex-direction: column;
+      height: calc(100vh - 5rem);
+    }
+
+    &__preview {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      height: 360px;
+      width: 55%;
+
+      margin-right: 1.5rem;
+
+      @include isMobile {
+        max-width: unset;
+        margin-right: unset;
+
+        width: 100%;
+        height: unset;
+        flex-grow: 1;
+      }
+
+      &__filename {
+        & > input {
+          margin-top: 1rem;
+        }
+      }
+
+      &__canvas {
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-grow: 1;
+        justify-content: center;
+        align-items: center;
+
+        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")
+          left center;
+
+        border: 1px solid var(--ImageExportModal-preview-border);
+        border-radius: 12px;
+
+        overflow: hidden;
+        padding: 1rem;
+
+        & > canvas {
+          max-width: calc(100% - 2rem);
+          max-height: calc(100% - 2rem);
+
+          filter: none !important;
+
+          @include isMobile {
+            max-height: 100%;
+          }
+        }
+
+        @include isMobile {
+          margin-top: 24px;
+          max-width: unset;
+        }
+      }
+    }
+
+    &__settings {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      gap: 18px;
+
+      @include isMobile {
+        margin-left: unset;
+        margin-top: 1rem;
+        flex-direction: row;
+        gap: 6px 34px;
+
+        align-content: flex-start;
+      }
+
+      &__setting {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+
+        @include isMobile {
+          flex-direction: column;
+          align-items: start;
+          justify-content: unset;
+          height: 52px;
+        }
+
+        &__label {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+
+          font-family: "Assistant";
+          font-weight: 600;
+          font-size: 1rem;
+          line-height: 150%;
+
+          & svg {
+            width: 20px;
+            height: 20px;
+            margin-left: 10px;
+          }
+        }
+
+        &__content {
+          display: flex;
+          height: 100%;
+          align-items: center;
+        }
+      }
+
+      &__buttons {
+        flex-grow: 1;
+        flex-wrap: wrap;
+        display: flex;
+        flex-direction: row;
+        gap: 11px;
+
+        align-items: flex-end;
+        align-content: flex-end;
+
+        @include isMobile {
+          padding-top: 32px;
+          flex-basis: 100%;
+          justify-content: center;
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/ImageExportDialog.tsx b/src/components/ImageExportDialog.tsx
index fb2c1ec81..960c87f2d 100644
--- a/src/components/ImageExportDialog.tsx
+++ b/src/components/ImageExportDialog.tsx
@@ -1,20 +1,39 @@
 import React, { useEffect, useRef, useState } from "react";
+
+import type { ActionManager } from "../actions/manager";
+import type { AppClassProperties, BinaryFiles, UIAppState } from "../types";
+
+import {
+  actionExportWithDarkMode,
+  actionChangeExportBackground,
+  actionChangeExportEmbedScene,
+  actionChangeExportScale,
+  actionChangeProjectName,
+} from "../actions/actionExport";
 import { probablySupportsClipboardBlob } from "../clipboard";
+import {
+  DEFAULT_EXPORT_PADDING,
+  EXPORT_IMAGE_TYPES,
+  isFirefox,
+  EXPORT_SCALES,
+} from "../constants";
+
 import { canvasToBlob } from "../data/blob";
+import { nativeFileSystemSupported } from "../data/filesystem";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
-import { exportToCanvas } from "../scene/export";
-import { AppState, BinaryFiles } from "../types";
+import { exportToCanvas } from "../packages/utils";
+
+import { copyIcon, downloadIcon, helpIcon } from "./icons";
 import { Dialog } from "./Dialog";
-import { clipboard } from "./icons";
-import Stack from "./Stack";
-import "./ExportDialog.scss";
-import OpenColor from "open-color";
-import { CheckboxItem } from "./CheckboxItem";
-import { DEFAULT_EXPORT_PADDING, isFirefox } from "../constants";
-import { nativeFileSystemSupported } from "../data/filesystem";
-import { ActionManager } from "../actions/manager";
+import { RadioGroup } from "./RadioGroup";
+import { Switch } from "./Switch";
+import { Tooltip } from "./Tooltip";
+
+import "./ImageExportDialog.scss";
+import { useAppProps } from "./App";
+import { FilledButton } from "./FilledButton";
 
 const supportsContextFilters =
   "filter" in document.createElement("canvas").getContext("2d")!;
@@ -31,78 +50,62 @@ export const ErrorCanvasPreview = () => {
   );
 };
 
-export type ExportCB = (
-  elements: readonly NonDeletedExcalidrawElement[],
-  scale?: number,
-) => void;
-
-const ExportButton: React.FC<{
-  color: keyof OpenColor;
-  onClick: () => void;
-  title: string;
-  shade?: number;
-  children?: React.ReactNode;
-}> = ({ children, title, onClick, color, shade = 6 }) => {
-  return (
-    <button
-      className="ExportDialog-imageExportButton"
-      style={{
-        ["--button-color" as any]: OpenColor[color][shade],
-        ["--button-color-darker" as any]: OpenColor[color][shade + 1],
-        ["--button-color-darkest" as any]: OpenColor[color][shade + 2],
-      }}
-      title={title}
-      aria-label={title}
-      onClick={onClick}
-    >
-      {children}
-    </button>
-  );
+type ImageExportModalProps = {
+  appState: UIAppState;
+  elements: readonly NonDeletedExcalidrawElement[];
+  files: BinaryFiles;
+  actionManager: ActionManager;
+  onExportImage: AppClassProperties["onExportImage"];
 };
 
 const ImageExportModal = ({
-  elements,
   appState,
+  elements,
   files,
-  exportPadding = DEFAULT_EXPORT_PADDING,
   actionManager,
-  onExportToPng,
-  onExportToSvg,
-  onExportToClipboard,
-}: {
-  appState: AppState;
-  elements: readonly NonDeletedExcalidrawElement[];
-  files: BinaryFiles;
-  exportPadding?: number;
-  actionManager: ActionManager;
-  onExportToPng: ExportCB;
-  onExportToSvg: ExportCB;
-  onExportToClipboard: ExportCB;
-  onCloseRequest: () => void;
-}) => {
+  onExportImage,
+}: ImageExportModalProps) => {
+  const appProps = useAppProps();
+  const [projectName, setProjectName] = useState(appState.name);
+
   const someElementIsSelected = isSomeElementSelected(elements, appState);
+
   const [exportSelected, setExportSelected] = useState(someElementIsSelected);
+  const [exportWithBackground, setExportWithBackground] = useState(
+    appState.exportBackground,
+  );
+  const [exportDarkMode, setExportDarkMode] = useState(
+    appState.exportWithDarkMode,
+  );
+  const [embedScene, setEmbedScene] = useState(appState.exportEmbedScene);
+  const [exportScale, setExportScale] = useState(appState.exportScale);
+
   const previewRef = useRef<HTMLDivElement>(null);
-  const { exportBackground, viewBackgroundColor } = appState;
   const [renderError, setRenderError] = useState<Error | null>(null);
 
   const exportedElements = exportSelected
-    ? getSelectedElements(elements, appState, true)
+    ? getSelectedElements(elements, appState, {
+        includeBoundTextElement: true,
+        includeElementsInFrames: true,
+      })
     : elements;
 
-  useEffect(() => {
-    setExportSelected(someElementIsSelected);
-  }, [someElementIsSelected]);
-
   useEffect(() => {
     const previewNode = previewRef.current;
     if (!previewNode) {
       return;
     }
-    exportToCanvas(exportedElements, appState, files, {
-      exportBackground,
-      viewBackgroundColor,
-      exportPadding,
+    const maxWidth = previewNode.offsetWidth;
+    const maxHeight = previewNode.offsetHeight;
+    if (!maxWidth) {
+      return;
+    }
+    exportToCanvas({
+      elements: exportedElements,
+      appState,
+      files,
+      exportPadding: DEFAULT_EXPORT_PADDING,
+      maxWidthOrHeight: Math.max(maxWidth, maxHeight),
     })
       .then((canvas) => {
         setRenderError(null);
@@ -116,93 +119,193 @@ const ImageExportModal = ({
         console.error(error);
         setRenderError(error);
       });
-  }, [
-    appState,
-    files,
-    exportedElements,
-    exportBackground,
-    exportPadding,
-    viewBackgroundColor,
-  ]);
+  }, [appState, files, exportedElements]);
 
   return (
-    <div className="ExportDialog">
-      <div className="ExportDialog__preview" ref={previewRef}>
-        {renderError && <ErrorCanvasPreview />}
-      </div>
-      {supportsContextFilters &&
-        actionManager.renderAction("exportWithDarkMode")}
-      <div style={{ display: "grid", gridTemplateColumns: "1fr" }}>
-        <div
-          style={{
-            display: "grid",
-            gridTemplateColumns: "repeat(auto-fit, minmax(190px, 1fr))",
-            // dunno why this is needed, but when the items wrap it creates
-            // an overflow
-            overflow: "hidden",
-          }}
-        >
-          {actionManager.renderAction("changeExportBackground")}
-          {someElementIsSelected && (
-            <CheckboxItem
-              checked={exportSelected}
-              onChange={(checked) => setExportSelected(checked)}
-            >
-              {t("labels.onlySelected")}
-            </CheckboxItem>
+    <div className="ImageExportModal">
+      <h3>{t("imageExportDialog.header")}</h3>
+      <div className="ImageExportModal__preview">
+        <div className="ImageExportModal__preview__canvas" ref={previewRef}>
+          {renderError && <ErrorCanvasPreview />}
+        </div>
+        <div className="ImageExportModal__preview__filename">
+          {!nativeFileSystemSupported && (
+            <input
+              type="text"
+              className="TextInput"
+              value={projectName}
+              style={{ width: "30ch" }}
+              disabled={
+                typeof appProps.name !== "undefined" || appState.viewModeEnabled
+              }
+              onChange={(event) => {
+                setProjectName(event.target.value);
+                actionManager.executeAction(
+                  actionChangeProjectName,
+                  "ui",
+                  event.target.value,
+                );
+              }}
+            />
           )}
-          {actionManager.renderAction("changeExportEmbedScene")}
         </div>
       </div>
-      <div style={{ display: "flex", alignItems: "center", marginTop: ".6em" }}>
-        <Stack.Row gap={2}>
-          {actionManager.renderAction("changeExportScale")}
-        </Stack.Row>
-        <p style={{ marginLeft: "1em", userSelect: "none" }}>
-          {t("buttons.scale")}
-        </p>
-      </div>
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          margin: ".6em 0",
-        }}
-      >
-        {!nativeFileSystemSupported &&
-          actionManager.renderAction("changeProjectName")}
-      </div>
-      <Stack.Row gap={2} justifyContent="center" style={{ margin: "2em 0" }}>
-        <ExportButton
-          color="indigo"
-          title={t("buttons.exportToPng")}
-          aria-label={t("buttons.exportToPng")}
-          onClick={() => onExportToPng(exportedElements)}
-        >
-          PNG
-        </ExportButton>
-        <ExportButton
-          color="red"
-          title={t("buttons.exportToSvg")}
-          aria-label={t("buttons.exportToSvg")}
-          onClick={() => onExportToSvg(exportedElements)}
-        >
-          SVG
-        </ExportButton>
-        {/* firefox supports clipboard API under a flag,
-            so let's throw and tell people what they can do */}
-        {(probablySupportsClipboardBlob || isFirefox) && (
-          <ExportButton
-            title={t("buttons.copyPngToClipboard")}
-            onClick={() => onExportToClipboard(exportedElements)}
-            color="gray"
-            shade={7}
+      <div className="ImageExportModal__settings">
+        <h3>{t("imageExportDialog.header")}</h3>
+        {someElementIsSelected && (
+          <ExportSetting
+            label={t("imageExportDialog.label.onlySelected")}
+            name="exportOnlySelected"
           >
-            {clipboard}
-          </ExportButton>
+            <Switch
+              name="exportOnlySelected"
+              checked={exportSelected}
+              onChange={(checked) => {
+                setExportSelected(checked);
+              }}
+            />
+          </ExportSetting>
         )}
-      </Stack.Row>
+        <ExportSetting
+          label={t("imageExportDialog.label.withBackground")}
+          name="exportBackgroundSwitch"
+        >
+          <Switch
+            name="exportBackgroundSwitch"
+            checked={exportWithBackground}
+            onChange={(checked) => {
+              setExportWithBackground(checked);
+              actionManager.executeAction(
+                actionChangeExportBackground,
+                "ui",
+                checked,
+              );
+            }}
+          />
+        </ExportSetting>
+        {supportsContextFilters && (
+          <ExportSetting
+            label={t("imageExportDialog.label.darkMode")}
+            name="exportDarkModeSwitch"
+          >
+            <Switch
+              name="exportDarkModeSwitch"
+              checked={exportDarkMode}
+              onChange={(checked) => {
+                setExportDarkMode(checked);
+                actionManager.executeAction(
+                  actionExportWithDarkMode,
+                  "ui",
+                  checked,
+                );
+              }}
+            />
+          </ExportSetting>
+        )}
+        <ExportSetting
+          label={t("imageExportDialog.label.embedScene")}
+          tooltip={t("imageExportDialog.tooltip.embedScene")}
+          name="exportEmbedSwitch"
+        >
+          <Switch
+            name="exportEmbedSwitch"
+            checked={embedScene}
+            onChange={(checked) => {
+              setEmbedScene(checked);
+              actionManager.executeAction(
+                actionChangeExportEmbedScene,
+                "ui",
+                checked,
+              );
+            }}
+          />
+        </ExportSetting>
+        <ExportSetting
+          label={t("imageExportDialog.label.scale")}
+          name="exportScale"
+        >
+          <RadioGroup
+            name="exportScale"
+            value={exportScale}
+            onChange={(scale) => {
+              setExportScale(scale);
+              actionManager.executeAction(actionChangeExportScale, "ui", scale);
+            }}
+            choices={EXPORT_SCALES.map((scale) => ({
+              value: scale,
+              label: `${scale}\u00d7`,
+            }))}
+          />
+        </ExportSetting>
+
+        <div className="ImageExportModal__settings__buttons">
+          <FilledButton
+            className="ImageExportModal__settings__buttons__button"
+            label={t("imageExportDialog.title.exportToPng")}
+            onClick={() =>
+              onExportImage(EXPORT_IMAGE_TYPES.png, exportedElements)
+            }
+            startIcon={downloadIcon}
+          >
+            {t("imageExportDialog.button.exportToPng")}
+          </FilledButton>
+          <FilledButton
+            className="ImageExportModal__settings__buttons__button"
+            label={t("imageExportDialog.title.exportToSvg")}
+            onClick={() =>
+              onExportImage(EXPORT_IMAGE_TYPES.svg, exportedElements)
+            }
+            startIcon={downloadIcon}
+          >
+            {t("imageExportDialog.button.exportToSvg")}
+          </FilledButton>
+          {(probablySupportsClipboardBlob || isFirefox) && (
+            <FilledButton
+              className="ImageExportModal__settings__buttons__button"
+              label={t("imageExportDialog.title.copyPngToClipboard")}
+              onClick={() =>
+                onExportImage(EXPORT_IMAGE_TYPES.clipboard, exportedElements)
+              }
+              startIcon={copyIcon}
+            >
+              {t("imageExportDialog.button.copyPngToClipboard")}
+            </FilledButton>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+type ExportSettingProps = {
+  label: string;
+  children: React.ReactNode;
+  tooltip?: string;
+  name?: string;
+};
+
+const ExportSetting = ({
+  label,
+  children,
+  tooltip,
+  name,
+}: ExportSettingProps) => {
+  return (
+    <div className="ImageExportModal__settings__setting" title={label}>
+      <label
+        htmlFor={name}
+        className="ImageExportModal__settings__setting__label"
+      >
+        {label}
+        {tooltip && (
+          <Tooltip label={tooltip} long={true}>
+            {helpIcon}
+          </Tooltip>
+        )}
+      </label>
+      <div className="ImageExportModal__settings__setting__content">
+        {children}
+      </div>
     </div>
   );
 };
@@ -210,45 +313,31 @@ const ImageExportModal = ({
 export const ImageExportDialog = ({
   elements,
   appState,
-  setAppState,
   files,
-  exportPadding = DEFAULT_EXPORT_PADDING,
   actionManager,
-  onExportToPng,
-  onExportToSvg,
-  onExportToClipboard,
+  onExportImage,
+  onCloseRequest,
 }: {
-  appState: AppState;
-  setAppState: React.Component<any, AppState>["setState"];
+  appState: UIAppState;
   elements: readonly NonDeletedExcalidrawElement[];
   files: BinaryFiles;
-  exportPadding?: number;
   actionManager: ActionManager;
-  onExportToPng: ExportCB;
-  onExportToSvg: ExportCB;
-  onExportToClipboard: ExportCB;
+  onExportImage: AppClassProperties["onExportImage"];
+  onCloseRequest: () => void;
 }) => {
-  const handleClose = React.useCallback(() => {
-    setAppState({ openDialog: null });
-  }, [setAppState]);
+  if (appState.openDialog !== "imageExport") {
+    return null;
+  }
 
   return (
-    <>
-      {appState.openDialog === "imageExport" && (
-        <Dialog onCloseRequest={handleClose} title={t("buttons.exportImage")}>
-          <ImageExportModal
-            elements={elements}
-            appState={appState}
-            files={files}
-            exportPadding={exportPadding}
-            actionManager={actionManager}
-            onExportToPng={onExportToPng}
-            onExportToSvg={onExportToSvg}
-            onExportToClipboard={onExportToClipboard}
-            onCloseRequest={handleClose}
-          />
-        </Dialog>
-      )}
-    </>
+    <Dialog onCloseRequest={onCloseRequest} size="wide" title={false}>
+      <ImageExportModal
+        elements={elements}
+        appState={appState}
+        files={files}
+        actionManager={actionManager}
+        onExportImage={onExportImage}
+      />
+    </Dialog>
   );
 };
diff --git a/src/components/JSONExportDialog.tsx b/src/components/JSONExportDialog.tsx
index 8f89ebcb7..f40ebe453 100644
--- a/src/components/JSONExportDialog.tsx
+++ b/src/components/JSONExportDialog.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 
-import { AppState, ExportOpts, BinaryFiles } from "../types";
+import { ExportOpts, BinaryFiles, UIAppState } from "../types";
 import { Dialog } from "./Dialog";
 import { exportToFileIcon, LinkIcon } from "./icons";
 import { ToolButton } from "./ToolButton";
@@ -28,7 +28,7 @@ const JSONExportModal = ({
   exportOpts,
   canvas,
 }: {
-  appState: AppState;
+  appState: UIAppState;
   files: BinaryFiles;
   elements: readonly NonDeletedExcalidrawElement[];
   actionManager: ActionManager;
@@ -96,12 +96,12 @@ export const JSONExportDialog = ({
   setAppState,
 }: {
   elements: readonly NonDeletedExcalidrawElement[];
-  appState: AppState;
+  appState: UIAppState;
   files: BinaryFiles;
   actionManager: ActionManager;
   exportOpts: ExportOpts;
   canvas: HTMLCanvasElement | null;
-  setAppState: React.Component<any, AppState>["setState"];
+  setAppState: React.Component<any, UIAppState>["setState"];
 }) => {
   const handleClose = React.useCallback(() => {
     setAppState({ openDialog: null });
diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index 7103d3ade..100259a81 100644
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -1,18 +1,23 @@
 import clsx from "clsx";
 import React from "react";
 import { ActionManager } from "../actions/manager";
-import { CLASSES, LIBRARY_SIDEBAR_WIDTH } from "../constants";
-import { exportCanvas } from "../data";
+import { CLASSES, DEFAULT_SIDEBAR, LIBRARY_SIDEBAR_WIDTH } from "../constants";
 import { isTextElement, showSelectedShapeActions } from "../element";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { Language, t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
-import { ExportType } from "../scene/types";
-import { AppProps, AppState, ExcalidrawProps, BinaryFiles } from "../types";
-import { isShallowEqual, muteFSAbortError } from "../utils";
+import {
+  AppProps,
+  AppState,
+  ExcalidrawProps,
+  BinaryFiles,
+  UIAppState,
+  AppClassProperties,
+} from "../types";
+import { capitalizeString, isShallowEqual } from "../utils";
 import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { ErrorDialog } from "./ErrorDialog";
-import { ExportCB, ImageExportDialog } from "./ImageExportDialog";
+import { ImageExportDialog } from "./ImageExportDialog";
 import { FixedSideContainer } from "./FixedSideContainer";
 import { HintViewer } from "./HintViewer";
 import { Island } from "./Island";
@@ -24,32 +29,33 @@ import { Section } from "./Section";
 import { HelpDialog } from "./HelpDialog";
 import Stack from "./Stack";
 import { UserList } from "./UserList";
-import Library from "../data/library";
 import { JSONExportDialog } from "./JSONExportDialog";
-import { LibraryButton } from "./LibraryButton";
-import { isImageFileHandle } from "../data/blob";
-import { LibraryMenu } from "./LibraryMenu";
-
-import "./LayerUI.scss";
-import "./Toolbar.scss";
 import { PenModeButton } from "./PenModeButton";
 import { trackEvent } from "../analytics";
 import { useDevice } from "../components/App";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions/actionToggleStats";
 import Footer from "./footer/Footer";
-import { hostSidebarCountersAtom } from "./Sidebar/Sidebar";
+import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
 import { jotaiScope } from "../jotai";
-import { Provider, useAtom } from "jotai";
+import { Provider, useAtom, useAtomValue } from "jotai";
 import MainMenu from "./main-menu/MainMenu";
 import { ActiveConfirmDialog } from "./ActiveConfirmDialog";
+import { OverwriteConfirmDialog } from "./OverwriteConfirm/OverwriteConfirm";
 import { HandButton } from "./HandButton";
 import { isHandToolActive } from "../appState";
-import { TunnelsContext, useInitializeTunnels } from "./context/tunnels";
+import { TunnelsContext, useInitializeTunnels } from "../context/tunnels";
+import { LibraryIcon } from "./icons";
+import { UIAppStateContext } from "../context/ui-appState";
+import { DefaultSidebar } from "./DefaultSidebar";
+import { EyeDropper, activeEyeDropperAtom } from "./EyeDropper";
+
+import "./LayerUI.scss";
+import "./Toolbar.scss";
 
 interface LayerUIProps {
   actionManager: ActionManager;
-  appState: AppState;
+  appState: UIAppState;
   files: BinaryFiles;
   canvas: HTMLCanvasElement | null;
   setAppState: React.Component<any, AppState>["setState"];
@@ -57,20 +63,16 @@ interface LayerUIProps {
   onLockToggle: () => void;
   onHandToolToggle: () => void;
   onPenModeToggle: () => void;
-  onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
   showExitZenModeBtn: boolean;
   langCode: Language["code"];
   renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
   renderCustomStats?: ExcalidrawProps["renderCustomStats"];
-  renderCustomSidebar?: ExcalidrawProps["renderSidebar"];
-  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
   UIOptions: AppProps["UIOptions"];
-  focusContainer: () => void;
-  library: Library;
-  id: string;
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
+  onExportImage: AppClassProperties["onExportImage"];
   renderWelcomeScreen: boolean;
   children?: React.ReactNode;
+  app: AppClassProperties;
 }
 
 const DefaultMainMenu: React.FC<{
@@ -99,6 +101,15 @@ const DefaultMainMenu: React.FC<{
   );
 };
 
+const DefaultOverwriteConfirmDialog = () => {
+  return (
+    <OverwriteConfirmDialog __fallback>
+      <OverwriteConfirmDialog.Actions.SaveToDisk />
+      <OverwriteConfirmDialog.Actions.ExportToImage />
+    </OverwriteConfirmDialog>
+  );
+};
+
 const LayerUI = ({
   actionManager,
   appState,
@@ -109,23 +120,24 @@ const LayerUI = ({
   onLockToggle,
   onHandToolToggle,
   onPenModeToggle,
-  onInsertElements,
   showExitZenModeBtn,
   renderTopRightUI,
   renderCustomStats,
-  renderCustomSidebar,
-  libraryReturnUrl,
   UIOptions,
-  focusContainer,
-  library,
-  id,
   onImageAction,
+  onExportImage,
   renderWelcomeScreen,
   children,
+  app,
 }: LayerUIProps) => {
   const device = useDevice();
   const tunnels = useInitializeTunnels();
 
+  const [eyeDropperState, setEyeDropperState] = useAtom(
+    activeEyeDropperAtom,
+    jotaiScope,
+  );
+
   const renderJSONExportDialog = () => {
     if (!UIOptions.canvasActions.export) {
       return null;
@@ -149,46 +161,14 @@ const LayerUI = ({
       return null;
     }
 
-    const createExporter =
-      (type: ExportType): ExportCB =>
-      async (exportedElements) => {
-        trackEvent("export", type, "ui");
-        const fileHandle = await exportCanvas(
-          type,
-          exportedElements,
-          appState,
-          files,
-          {
-            exportBackground: appState.exportBackground,
-            name: appState.name,
-            viewBackgroundColor: appState.viewBackgroundColor,
-          },
-        )
-          .catch(muteFSAbortError)
-          .catch((error) => {
-            console.error(error);
-            setAppState({ errorMessage: error.message });
-          });
-
-        if (
-          appState.exportEmbedScene &&
-          fileHandle &&
-          isImageFileHandle(fileHandle)
-        ) {
-          setAppState({ fileHandle });
-        }
-      };
-
     return (
       <ImageExportDialog
         elements={elements}
         appState={appState}
-        setAppState={setAppState}
         files={files}
         actionManager={actionManager}
-        onExportToPng={createExporter("png")}
-        onExportToSvg={createExporter("svg")}
-        onExportToClipboard={createExporter("clipboard")}
+        onExportImage={onExportImage}
+        onCloseRequest={() => setAppState({ openDialog: null })}
       />
     );
   };
@@ -197,8 +177,8 @@ const LayerUI = ({
     <div style={{ position: "relative" }}>
       {/* wrapping to Fragment stops React from occasionally complaining
                 about identical Keys */}
-      <tunnels.mainMenuTunnel.Out />
-      {renderWelcomeScreen && <tunnels.welcomeScreenMenuHintTunnel.Out />}
+      <tunnels.MainMenuTunnel.Out />
+      {renderWelcomeScreen && <tunnels.WelcomeScreenMenuHintTunnel.Out />}
     </div>
   );
 
@@ -236,12 +216,7 @@ const LayerUI = ({
     return (
       <FixedSideContainer side="top">
         <div className="App-menu App-menu_top">
-          <Stack.Col
-            gap={6}
-            className={clsx("App-menu_top__left", {
-              "disable-pointerEvents": appState.zenModeEnabled,
-            })}
-          >
+          <Stack.Col gap={6} className={clsx("App-menu_top__left")}>
             {renderCanvasActions()}
             {shouldRenderSelectedShapeActions && renderSelectedShapeActions()}
           </Stack.Col>
@@ -250,7 +225,7 @@ const LayerUI = ({
               {(heading: React.ReactNode) => (
                 <div style={{ position: "relative" }}>
                   {renderWelcomeScreen && (
-                    <tunnels.welcomeScreenToolbarHintTunnel.Out />
+                    <tunnels.WelcomeScreenToolbarHintTunnel.Out />
                   )}
                   <Stack.Col gap={4} align="start">
                     <Stack.Row
@@ -267,9 +242,9 @@ const LayerUI = ({
                       >
                         <HintViewer
                           appState={appState}
-                          elements={elements}
                           isMobile={device.isMobile}
                           device={device}
+                          app={app}
                         />
                         {heading}
                         <Stack.Row gap={1}>
@@ -286,7 +261,7 @@ const LayerUI = ({
                             title={t("toolBar.lock")}
                           />
 
-                          <div className="App-toolbar__divider"></div>
+                          <div className="App-toolbar__divider" />
 
                           <HandButton
                             checked={isHandToolActive(appState)}
@@ -324,9 +299,12 @@ const LayerUI = ({
           >
             <UserList collaborators={appState.collaborators} />
             {renderTopRightUI?.(device.isMobile, appState)}
-            {!appState.viewModeEnabled && (
-              <LibraryButton appState={appState} setAppState={setAppState} />
-            )}
+            {!appState.viewModeEnabled &&
+              // hide button when sidebar docked
+              (!isSidebarDocked ||
+                appState.openSidebar?.name !== DEFAULT_SIDEBAR.name) && (
+                <tunnels.DefaultSidebarTriggerTunnel.Out />
+              )}
           </div>
         </div>
       </FixedSideContainer>
@@ -334,21 +312,21 @@ const LayerUI = ({
   };
 
   const renderSidebars = () => {
-    return appState.openSidebar === "customSidebar" ? (
-      renderCustomSidebar?.() || null
-    ) : appState.openSidebar === "library" ? (
-      <LibraryMenu
-        appState={appState}
-        onInsertElements={onInsertElements}
-        libraryReturnUrl={libraryReturnUrl}
-        focusContainer={focusContainer}
-        library={library}
-        id={id}
+    return (
+      <DefaultSidebar
+        __fallback
+        onDock={(docked) => {
+          trackEvent(
+            "sidebar",
+            `toggleDock (${docked ? "dock" : "undock"})`,
+            `(${device.isMobile ? "mobile" : "desktop"})`,
+          );
+        }}
       />
-    ) : null;
+    );
   };
 
-  const [hostSidebarCounters] = useAtom(hostSidebarCountersAtom, jotaiScope);
+  const isSidebarDocked = useAtomValue(isSidebarDockedAtom, jotaiScope);
 
   const layerUIJSX = (
     <>
@@ -358,8 +336,26 @@ const LayerUI = ({
       {children}
       {/* render component fallbacks. Can be rendered anywhere as they'll be
           tunneled away. We only render tunneled components that actually
-          have defaults when host do not render anything. */}
+        have defaults when host do not render anything. */}
       <DefaultMainMenu UIOptions={UIOptions} />
+      <DefaultSidebar.Trigger
+        __fallback
+        icon={LibraryIcon}
+        title={capitalizeString(t("toolBar.library"))}
+        onToggle={(open) => {
+          if (open) {
+            trackEvent(
+              "sidebar",
+              `${DEFAULT_SIDEBAR.name} (open)`,
+              `button (${device.isMobile ? "mobile" : "desktop"})`,
+            );
+          }
+        }}
+        tab={DEFAULT_SIDEBAR.defaultTab}
+      >
+        {t("toolBar.library")}
+      </DefaultSidebar.Trigger>
+      <DefaultOverwriteConfirmDialog />
       {/* ------------------------------------------------------------------ */}
 
       {appState.isLoading && <LoadingMessage delay={250} />}
@@ -368,6 +364,21 @@ const LayerUI = ({
           {appState.errorMessage}
         </ErrorDialog>
       )}
+      {eyeDropperState && !device.isMobile && (
+        <EyeDropper
+          swapPreviewOnAlt={eyeDropperState.swapPreviewOnAlt}
+          previewType={eyeDropperState.previewType}
+          onCancel={() => {
+            setEyeDropperState(null);
+          }}
+          onSelect={(color, event) => {
+            setEyeDropperState((state) => {
+              return state?.keepOpenOnAlt && event.altKey ? state : null;
+            });
+            eyeDropperState?.onSelect?.(color, event);
+          }}
+        />
+      )}
       {appState.openDialog === "help" && (
         <HelpDialog
           onClose={() => {
@@ -376,13 +387,13 @@ const LayerUI = ({
         />
       )}
       <ActiveConfirmDialog />
+      <tunnels.OverwriteConfirmDialogTunnel.Out />
       {renderImageExportDialog()}
       {renderJSONExportDialog()}
       {appState.pasteDialog.shown && (
         <PasteChartDialog
           setAppState={setAppState}
           appState={appState}
-          onInsertChart={onInsertElements}
           onClose={() =>
             setAppState({
               pasteDialog: { shown: false, data: null },
@@ -392,6 +403,7 @@ const LayerUI = ({
       )}
       {device.isMobile && (
         <MobileMenu
+          app={app}
           appState={appState}
           elements={elements}
           actionManager={actionManager}
@@ -410,7 +422,6 @@ const LayerUI = ({
           renderWelcomeScreen={renderWelcomeScreen}
         />
       )}
-
       {!device.isMobile && (
         <>
           <div
@@ -422,15 +433,14 @@ const LayerUI = ({
                   !isTextElement(appState.editingElement)),
             })}
             style={
-              ((appState.openSidebar === "library" &&
-                appState.isSidebarDocked) ||
-                hostSidebarCounters.docked) &&
+              appState.openSidebar &&
+              isSidebarDocked &&
               device.canDeviceFitSidebar
                 ? { width: `calc(100% - ${LIBRARY_SIDEBAR_WIDTH}px)` }
                 : {}
             }
           >
-            {renderWelcomeScreen && <tunnels.welcomeScreenCenterTunnel.Out />}
+            {renderWelcomeScreen && <tunnels.WelcomeScreenCenterTunnel.Out />}
             {renderFixedSideContainer()}
             <Footer
               appState={appState}
@@ -453,9 +463,9 @@ const LayerUI = ({
               <button
                 className="scroll-back-to-content"
                 onClick={() => {
-                  setAppState({
+                  setAppState((appState) => ({
                     ...calculateScrollCenter(elements, appState, canvas),
-                  });
+                  }));
                 }}
               >
                 {t("buttons.scrollBackToContent")}
@@ -469,19 +479,25 @@ const LayerUI = ({
   );
 
   return (
-    <Provider scope={tunnels.jotaiScope}>
-      <TunnelsContext.Provider value={tunnels}>
-        {layerUIJSX}
-      </TunnelsContext.Provider>
-    </Provider>
+    <UIAppStateContext.Provider value={appState}>
+      <Provider scope={tunnels.jotaiScope}>
+        <TunnelsContext.Provider value={tunnels}>
+          {layerUIJSX}
+        </TunnelsContext.Provider>
+      </Provider>
+    </UIAppStateContext.Provider>
   );
 };
 
-const stripIrrelevantAppStateProps = (
-  appState: AppState,
-): Partial<AppState> => {
-  const { suggestedBindings, startBoundElement, cursorButton, ...ret } =
-    appState;
+const stripIrrelevantAppStateProps = (appState: AppState): UIAppState => {
+  const {
+    suggestedBindings,
+    startBoundElement,
+    cursorButton,
+    scrollX,
+    scrollY,
+    ...ret
+  } = appState;
   return ret;
 };
 
@@ -491,24 +507,19 @@ const areEqual = (prevProps: LayerUIProps, nextProps: LayerUIProps) => {
     return false;
   }
 
-  const {
-    canvas: _prevCanvas,
-    // not stable, but shouldn't matter in our case
-    onInsertElements: _prevOnInsertElements,
-    appState: prevAppState,
-    ...prev
-  } = prevProps;
-  const {
-    canvas: _nextCanvas,
-    onInsertElements: _nextOnInsertElements,
-    appState: nextAppState,
-    ...next
-  } = nextProps;
+  const { canvas: _prevCanvas, appState: prevAppState, ...prev } = prevProps;
+  const { canvas: _nextCanvas, appState: nextAppState, ...next } = nextProps;
 
   return (
     isShallowEqual(
-      stripIrrelevantAppStateProps(prevAppState),
-      stripIrrelevantAppStateProps(nextAppState),
+      // asserting AppState because we're being passed the whole AppState
+      // but resolve to only the UI-relevant props
+      stripIrrelevantAppStateProps(prevAppState as AppState),
+      stripIrrelevantAppStateProps(nextAppState as AppState),
+      {
+        selectedElementIds: isShallowEqual,
+        selectedGroupIds: isShallowEqual,
+      },
     ) && isShallowEqual(prev, next)
   );
 };
diff --git a/src/components/LibraryButton.scss b/src/components/LibraryButton.scss
deleted file mode 100644
index 1a3db79f3..000000000
--- a/src/components/LibraryButton.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@import "../css/variables.module";
-
-.library-button {
-  @include outlineButtonStyles;
-
-  background-color: var(--island-bg-color);
-
-  width: auto;
-  height: var(--lg-button-size);
-
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-
-  line-height: 0;
-
-  font-size: 0.75rem;
-  letter-spacing: 0.4px;
-
-  svg {
-    width: var(--lg-icon-size);
-    height: var(--lg-icon-size);
-  }
-
-  &__label {
-    display: none;
-
-    @media screen and (min-width: 1024px) {
-      display: block;
-    }
-  }
-}
diff --git a/src/components/LibraryButton.tsx b/src/components/LibraryButton.tsx
deleted file mode 100644
index 517e802a8..000000000
--- a/src/components/LibraryButton.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from "react";
-import { t } from "../i18n";
-import { AppState } from "../types";
-import { capitalizeString } from "../utils";
-import { trackEvent } from "../analytics";
-import { useDevice } from "./App";
-import "./LibraryButton.scss";
-import { LibraryIcon } from "./icons";
-
-export const LibraryButton: React.FC<{
-  appState: AppState;
-  setAppState: React.Component<any, AppState>["setState"];
-  isMobile?: boolean;
-}> = ({ appState, setAppState, isMobile }) => {
-  const device = useDevice();
-  const showLabel = !isMobile;
-
-  // TODO barnabasmolnar/redesign
-  // not great, toolbar jumps in a jarring manner
-  if (appState.isSidebarDocked && appState.openSidebar === "library") {
-    return null;
-  }
-
-  return (
-    <label title={`${capitalizeString(t("toolBar.library"))}`}>
-      <input
-        className="ToolIcon_type_checkbox"
-        type="checkbox"
-        name="editor-library"
-        onChange={(event) => {
-          document
-            .querySelector(".layer-ui__wrapper")
-            ?.classList.remove("animate");
-          const isOpen = event.target.checked;
-          setAppState({ openSidebar: isOpen ? "library" : null });
-          // track only openings
-          if (isOpen) {
-            trackEvent(
-              "library",
-              "toggleLibrary (open)",
-              `toolbar (${device.isMobile ? "mobile" : "desktop"})`,
-            );
-          }
-        }}
-        checked={appState.openSidebar === "library"}
-        aria-label={capitalizeString(t("toolBar.library"))}
-        aria-keyshortcuts="0"
-      />
-      <div className="library-button">
-        <div>{LibraryIcon}</div>
-        {showLabel && (
-          <div className="library-button__label">{t("toolBar.library")}</div>
-        )}
-      </div>
-    </label>
-  );
-};
diff --git a/src/components/LibraryMenu.scss b/src/components/LibraryMenu.scss
index c06b01fd5..16715614a 100644
--- a/src/components/LibraryMenu.scss
+++ b/src/components/LibraryMenu.scss
@@ -1,38 +1,11 @@
 @import "open-color/open-color";
 
 .excalidraw {
-  .layer-ui__library-sidebar {
-    display: flex;
-    flex-direction: column;
-  }
-
   .layer-ui__library {
     display: flex;
     flex-direction: column;
 
     flex: 1 1 auto;
-
-    .layer-ui__library-header {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      margin: 2px 0 15px 0;
-      .Spinner {
-        margin-right: 1rem;
-      }
-
-      button {
-        // 2px from the left to account for focus border of left-most button
-        margin: 0 2px;
-      }
-    }
-  }
-
-  .layer-ui__sidebar {
-    .library-menu-items-container {
-      height: 100%;
-      width: 100%;
-    }
   }
 
   .library-actions-counter {
@@ -87,10 +60,27 @@
     }
   }
 
-  .library-menu-browse-button {
-    margin: 1rem auto;
+  .library-menu-control-buttons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.625rem;
+    position: relative;
 
-    padding: 0.875rem 1rem;
+    &--at-bottom::before {
+      content: "";
+      width: calc(100% - 1.5rem);
+      height: 1px;
+      position: absolute;
+      top: -1px;
+      background: var(--sidebar-border-color);
+    }
+  }
+
+  .library-menu-browse-button {
+    flex: 1;
+
+    height: var(--lg-button-size);
 
     display: flex;
     align-items: center;
@@ -122,34 +112,39 @@
     }
   }
 
-  .library-menu-browse-button--mobile {
-    min-height: 22px;
-    margin-left: auto;
-    a {
-      padding-right: 0;
-    }
+  &.excalidraw--mobile .library-menu-browse-button {
+    height: var(--default-button-size);
   }
 
-  .layer-ui__sidebar__header .dropdown-menu {
-    &.dropdown-menu--mobile {
-      top: 100%;
-    }
+  .layer-ui__library .dropdown-menu {
+    width: auto;
+    top: initial;
+    right: 0;
+    left: initial;
+    bottom: 100%;
+    margin-bottom: 0.625rem;
+
     .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;
     }
   }
+
+  .layer-ui__library .library-menu-dropdown-container {
+    position: relative;
+
+    &--in-heading {
+      padding: 0;
+      position: absolute;
+      top: 1rem;
+      right: 0.75rem;
+      z-index: 1;
+
+      .dropdown-menu {
+        top: 100%;
+      }
+    }
+  }
 }
diff --git a/src/components/LibraryMenu.tsx b/src/components/LibraryMenu.tsx
index d3a718322..1932e3ae6 100644
--- a/src/components/LibraryMenu.tsx
+++ b/src/components/LibraryMenu.tsx
@@ -1,77 +1,41 @@
-import {
-  useRef,
-  useState,
-  useEffect,
-  useCallback,
-  RefObject,
-  forwardRef,
-} from "react";
+import React, { useState, useCallback, useMemo, useRef } from "react";
 import Library, {
   distributeLibraryItemsOnSquareGrid,
   libraryItemsAtom,
 } from "../data/library";
 import { t } from "../i18n";
 import { randomId } from "../random";
-import { LibraryItems, LibraryItem, AppState, ExcalidrawProps } from "../types";
-
-import "./LibraryMenu.scss";
+import {
+  LibraryItems,
+  LibraryItem,
+  ExcalidrawProps,
+  UIAppState,
+} from "../types";
 import LibraryMenuItems from "./LibraryMenuItems";
-import { EVENT } from "../constants";
-import { KEYS } from "../keys";
 import { trackEvent } from "../analytics";
-import { useAtom } from "jotai";
+import { atom, useAtom } from "jotai";
 import { jotaiScope } from "../jotai";
 import Spinner from "./Spinner";
 import {
-  useDevice,
+  useApp,
+  useAppProps,
   useExcalidrawElements,
   useExcalidrawSetAppState,
 } from "./App";
-import { Sidebar } from "./Sidebar/Sidebar";
 import { getSelectedElements } from "../scene";
+import { useUIAppState } from "../context/ui-appState";
+
+import "./LibraryMenu.scss";
+import { LibraryMenuControlButtons } from "./LibraryMenuControlButtons";
+import { isShallowEqual } from "../utils";
 import { NonDeletedExcalidrawElement } from "../element/types";
-import { LibraryMenuHeader } from "./LibraryMenuHeaderContent";
-import LibraryMenuBrowseButton from "./LibraryMenuBrowseButton";
 
-const useOnClickOutside = (
-  ref: RefObject<HTMLElement>,
-  cb: (event: MouseEvent) => void,
-) => {
-  useEffect(() => {
-    const listener = (event: MouseEvent) => {
-      if (!ref.current) {
-        return;
-      }
+export const isLibraryMenuOpenAtom = atom(false);
 
-      if (
-        event.target instanceof Element &&
-        (ref.current.contains(event.target) ||
-          !document.body.contains(event.target))
-      ) {
-        return;
-      }
-
-      cb(event);
-    };
-    document.addEventListener("pointerdown", listener, false);
-
-    return () => {
-      document.removeEventListener("pointerdown", listener);
-    };
-  }, [ref, cb]);
+const LibraryMenuWrapper = ({ children }: { children: React.ReactNode }) => {
+  return <div className="layer-ui__library">{children}</div>;
 };
 
-const LibraryMenuWrapper = forwardRef<
-  HTMLDivElement,
-  { children: React.ReactNode }
->(({ children }, ref) => {
-  return (
-    <div ref={ref} className="layer-ui__library">
-      {children}
-    </div>
-  );
-});
-
 export const LibraryMenuContent = ({
   onInsertLibraryItems,
   pendingElements,
@@ -80,46 +44,58 @@ export const LibraryMenuContent = ({
   libraryReturnUrl,
   library,
   id,
-  appState,
+  theme,
   selectedItems,
   onSelectItems,
 }: {
   pendingElements: LibraryItem["elements"];
   onInsertLibraryItems: (libraryItems: LibraryItems) => void;
   onAddToLibrary: () => void;
-  setAppState: React.Component<any, AppState>["setState"];
+  setAppState: React.Component<any, UIAppState>["setState"];
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
   library: Library;
   id: string;
-  appState: AppState;
+  theme: UIAppState["theme"];
   selectedItems: LibraryItem["id"][];
   onSelectItems: (id: LibraryItem["id"][]) => void;
 }) => {
   const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
 
-  const addToLibrary = useCallback(
-    async (elements: LibraryItem["elements"], libraryItems: LibraryItems) => {
-      trackEvent("element", "addToLibrary", "ui");
-      if (elements.some((element) => element.type === "image")) {
-        return setAppState({
-          errorMessage: "Support for adding images to the library coming soon!",
+  const _onAddToLibrary = useCallback(
+    (elements: LibraryItem["elements"]) => {
+      const addToLibrary = async (
+        processedElements: LibraryItem["elements"],
+        libraryItems: LibraryItems,
+      ) => {
+        trackEvent("element", "addToLibrary", "ui");
+        if (processedElements.some((element) => element.type === "image")) {
+          return setAppState({
+            errorMessage:
+              "Support for adding images to the library coming soon!",
+          });
+        }
+        const nextItems: LibraryItems = [
+          {
+            status: "unpublished",
+            elements: processedElements,
+            id: randomId(),
+            created: Date.now(),
+          },
+          ...libraryItems,
+        ];
+        onAddToLibrary();
+        library.setLibrary(nextItems).catch(() => {
+          setAppState({ errorMessage: t("alerts.errorAddingToLibrary") });
         });
-      }
-      const nextItems: LibraryItems = [
-        {
-          status: "unpublished",
-          elements,
-          id: randomId(),
-          created: Date.now(),
-        },
-        ...libraryItems,
-      ];
-      onAddToLibrary();
-      library.setLibrary(nextItems).catch(() => {
-        setAppState({ errorMessage: t("alerts.errorAddingToLibrary") });
-      });
+      };
+      addToLibrary(elements, libraryItemsData.libraryItems);
     },
-    [onAddToLibrary, library, setAppState],
+    [onAddToLibrary, library, setAppState, libraryItemsData.libraryItems],
+  );
+
+  const libraryItems = useMemo(
+    () => libraryItemsData.libraryItems,
+    [libraryItemsData],
   );
 
   if (
@@ -145,95 +121,78 @@ export const LibraryMenuContent = ({
     <LibraryMenuWrapper>
       <LibraryMenuItems
         isLoading={libraryItemsData.status === "loading"}
-        libraryItems={libraryItemsData.libraryItems}
-        onAddToLibrary={(elements) =>
-          addToLibrary(elements, libraryItemsData.libraryItems)
-        }
+        libraryItems={libraryItems}
+        onAddToLibrary={_onAddToLibrary}
         onInsertLibraryItems={onInsertLibraryItems}
         pendingElements={pendingElements}
-        selectedItems={selectedItems}
-        onSelectItems={onSelectItems}
         id={id}
         libraryReturnUrl={libraryReturnUrl}
-        theme={appState.theme}
+        theme={theme}
+        onSelectItems={onSelectItems}
+        selectedItems={selectedItems}
       />
       {showBtn && (
-        <LibraryMenuBrowseButton
+        <LibraryMenuControlButtons
+          className="library-menu-control-buttons--at-bottom"
+          style={{ padding: "16px 12px 0 12px" }}
           id={id}
           libraryReturnUrl={libraryReturnUrl}
-          theme={appState.theme}
+          theme={theme}
         />
       )}
     </LibraryMenuWrapper>
   );
 };
 
-export const LibraryMenu: React.FC<{
-  appState: AppState;
-  onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
-  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
-  focusContainer: () => void;
-  library: Library;
-  id: string;
-}> = ({
-  appState,
-  onInsertElements,
-  libraryReturnUrl,
-  focusContainer,
-  library,
-  id,
-}) => {
+const usePendingElementsMemo = (
+  appState: UIAppState,
+  elements: readonly NonDeletedExcalidrawElement[],
+) => {
+  const create = () =>
+    getSelectedElements(elements, appState, {
+      includeBoundTextElement: true,
+      includeElementsInFrames: true,
+    });
+  const val = useRef(create());
+  const prevAppState = useRef<UIAppState>(appState);
+  const prevElements = useRef(elements);
+
+  if (
+    !isShallowEqual(
+      appState.selectedElementIds,
+      prevAppState.current.selectedElementIds,
+    ) ||
+    !isShallowEqual(elements, prevElements.current)
+  ) {
+    val.current = create();
+    prevAppState.current = appState;
+    prevElements.current = elements;
+  }
+  return val.current;
+};
+
+/**
+ * This component is meant to be rendered inside <Sidebar.Tab/> inside our
+ * <DefaultSidebar/> or host apps Sidebar components.
+ */
+export const LibraryMenu = () => {
+  const { library, id, onInsertElements } = useApp();
+  const appProps = useAppProps();
+  const appState = useUIAppState();
   const setAppState = useExcalidrawSetAppState();
   const elements = useExcalidrawElements();
-  const device = useDevice();
-
   const [selectedItems, setSelectedItems] = useState<LibraryItem["id"][]>([]);
-  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
+  const memoizedLibrary = useMemo(() => library, [library]);
+  // BUG: pendingElements are still causing some unnecessary rerenders because clicking into canvas returns some ids even when no element is selected.
+  const pendingElements = usePendingElementsMemo(appState, elements);
 
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  const closeLibrary = useCallback(() => {
-    const isDialogOpen = !!document.querySelector(".Dialog");
-
-    // Prevent closing if any dialog is open
-    if (isDialogOpen) {
-      return;
-    }
-    setAppState({ openSidebar: null });
-  }, [setAppState]);
-
-  useOnClickOutside(
-    ref,
-    useCallback(
-      (event) => {
-        // If click on the library icon, do nothing so that LibraryButton
-        // can toggle library menu
-        if ((event.target as Element).closest(".ToolIcon__library")) {
-          return;
-        }
-        if (!appState.isSidebarDocked || !device.canDeviceFitSidebar) {
-          closeLibrary();
-        }
-      },
-      [closeLibrary, appState.isSidebarDocked, device.canDeviceFitSidebar],
-    ),
+  const onInsertLibraryItems = useCallback(
+    (libraryItems: LibraryItems) => {
+      onInsertElements(distributeLibraryItemsOnSquareGrid(libraryItems));
+    },
+    [onInsertElements],
   );
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (
-        event.key === KEYS.ESCAPE &&
-        (!appState.isSidebarDocked || !device.canDeviceFitSidebar)
-      ) {
-        closeLibrary();
-      }
-    };
-    document.addEventListener(EVENT.KEYDOWN, handleKeyDown);
-    return () => {
-      document.removeEventListener(EVENT.KEYDOWN, handleKeyDown);
-    };
-  }, [closeLibrary, appState.isSidebarDocked, device.canDeviceFitSidebar]);
-
   const deselectItems = useCallback(() => {
     setAppState({
       selectedElementIds: {},
@@ -241,69 +200,18 @@ export const LibraryMenu: React.FC<{
     });
   }, [setAppState]);
 
-  const removeFromLibrary = useCallback(
-    async (libraryItems: LibraryItems) => {
-      const nextItems = libraryItems.filter(
-        (item) => !selectedItems.includes(item.id),
-      );
-      library.setLibrary(nextItems).catch(() => {
-        setAppState({ errorMessage: t("alerts.errorRemovingFromLibrary") });
-      });
-      setSelectedItems([]);
-    },
-    [library, setAppState, selectedItems, setSelectedItems],
-  );
-
-  const resetLibrary = useCallback(() => {
-    library.resetLibrary();
-    focusContainer();
-  }, [library, focusContainer]);
-
   return (
-    <Sidebar
-      __isInternal
-      // necessary to remount when switching between internal
-      // and custom (host app) sidebar, so that the `props.onClose`
-      // is colled correctly
-      key="library"
-      className="layer-ui__library-sidebar"
-      initialDockedState={appState.isSidebarDocked}
-      onDock={(docked) => {
-        trackEvent(
-          "library",
-          `toggleLibraryDock (${docked ? "dock" : "undock"})`,
-          `sidebar (${device.isMobile ? "mobile" : "desktop"})`,
-        );
-      }}
-      ref={ref}
-    >
-      <Sidebar.Header className="layer-ui__library-header">
-        <LibraryMenuHeader
-          appState={appState}
-          setAppState={setAppState}
-          selectedItems={selectedItems}
-          onSelectItems={setSelectedItems}
-          library={library}
-          onRemoveFromLibrary={() =>
-            removeFromLibrary(libraryItemsData.libraryItems)
-          }
-          resetLibrary={resetLibrary}
-        />
-      </Sidebar.Header>
-      <LibraryMenuContent
-        pendingElements={getSelectedElements(elements, appState, true)}
-        onInsertLibraryItems={(libraryItems) => {
-          onInsertElements(distributeLibraryItemsOnSquareGrid(libraryItems));
-        }}
-        onAddToLibrary={deselectItems}
-        setAppState={setAppState}
-        libraryReturnUrl={libraryReturnUrl}
-        library={library}
-        id={id}
-        appState={appState}
-        selectedItems={selectedItems}
-        onSelectItems={setSelectedItems}
-      />
-    </Sidebar>
+    <LibraryMenuContent
+      pendingElements={pendingElements}
+      onInsertLibraryItems={onInsertLibraryItems}
+      onAddToLibrary={deselectItems}
+      setAppState={setAppState}
+      libraryReturnUrl={appProps.libraryReturnUrl}
+      library={memoizedLibrary}
+      id={id}
+      theme={appState.theme}
+      selectedItems={selectedItems}
+      onSelectItems={setSelectedItems}
+    />
   );
 };
diff --git a/src/components/LibraryMenuBrowseButton.tsx b/src/components/LibraryMenuBrowseButton.tsx
index 69e1a6940..666804922 100644
--- a/src/components/LibraryMenuBrowseButton.tsx
+++ b/src/components/LibraryMenuBrowseButton.tsx
@@ -1,6 +1,6 @@
 import { VERSIONS } from "../constants";
 import { t } from "../i18n";
-import { AppState, ExcalidrawProps } from "../types";
+import { ExcalidrawProps, UIAppState } from "../types";
 
 const LibraryMenuBrowseButton = ({
   theme,
@@ -8,7 +8,7 @@ const LibraryMenuBrowseButton = ({
   libraryReturnUrl,
 }: {
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
-  theme: AppState["theme"];
+  theme: UIAppState["theme"];
   id: string;
 }) => {
   const referrer =
diff --git a/src/components/LibraryMenuControlButtons.tsx b/src/components/LibraryMenuControlButtons.tsx
new file mode 100644
index 000000000..86ac1b635
--- /dev/null
+++ b/src/components/LibraryMenuControlButtons.tsx
@@ -0,0 +1,33 @@
+import { ExcalidrawProps, UIAppState } from "../types";
+import LibraryMenuBrowseButton from "./LibraryMenuBrowseButton";
+import clsx from "clsx";
+
+export const LibraryMenuControlButtons = ({
+  libraryReturnUrl,
+  theme,
+  id,
+  style,
+  children,
+  className,
+}: {
+  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
+  theme: UIAppState["theme"];
+  id: string;
+  style: React.CSSProperties;
+  children?: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={clsx("library-menu-control-buttons", className)}
+      style={style}
+    >
+      <LibraryMenuBrowseButton
+        id={id}
+        libraryReturnUrl={libraryReturnUrl}
+        theme={theme}
+      />
+      {children}
+    </div>
+  );
+};
diff --git a/src/components/LibraryMenuHeaderContent.tsx b/src/components/LibraryMenuHeaderContent.tsx
index 8e6b93523..56c8fe6d0 100644
--- a/src/components/LibraryMenuHeaderContent.tsx
+++ b/src/components/LibraryMenuHeaderContent.tsx
@@ -1,8 +1,11 @@
-import React, { useCallback, useState } from "react";
+import { useCallback, useState } from "react";
+import { t } from "../i18n";
+import Trans from "./Trans";
+import { jotaiScope } from "../jotai";
+import { LibraryItem, LibraryItems, UIAppState } from "../types";
+import { useApp, useExcalidrawSetAppState } from "./App";
 import { saveLibraryAsJSON } from "../data/json";
 import Library, { libraryItemsAtom } from "../data/library";
-import { t } from "../i18n";
-import { AppState, LibraryItem, LibraryItems } from "../types";
 import {
   DotsIcon,
   ExportIcon,
@@ -13,29 +16,30 @@ import {
 import { ToolButton } from "./ToolButton";
 import { fileOpen } from "../data/filesystem";
 import { muteFSAbortError } from "../utils";
-import { atom, useAtom } from "jotai";
-import { jotaiScope } from "../jotai";
+import { useAtom } from "jotai";
 import ConfirmDialog from "./ConfirmDialog";
 import PublishLibrary from "./PublishLibrary";
 import { Dialog } from "./Dialog";
-
 import DropdownMenu from "./dropdownMenu/DropdownMenu";
-
-export const isLibraryMenuOpenAtom = atom(false);
+import { isLibraryMenuOpenAtom } from "./LibraryMenu";
+import { useUIAppState } from "../context/ui-appState";
+import clsx from "clsx";
+import { useLibraryCache } from "../hooks/useLibraryItemSvg";
 
 const getSelectedItems = (
   libraryItems: LibraryItems,
   selectedItems: LibraryItem["id"][],
 ) => libraryItems.filter((item) => selectedItems.includes(item.id));
 
-export const LibraryMenuHeader: React.FC<{
-  setAppState: React.Component<any, AppState>["setState"];
+export const LibraryDropdownMenuButton: React.FC<{
+  setAppState: React.Component<any, UIAppState>["setState"];
   selectedItems: LibraryItem["id"][];
   library: Library;
   onRemoveFromLibrary: () => void;
   resetLibrary: () => void;
   onSelectItems: (items: LibraryItem["id"][]) => void;
-  appState: AppState;
+  appState: UIAppState;
+  className?: string;
 }> = ({
   setAppState,
   selectedItems,
@@ -44,13 +48,15 @@ export const LibraryMenuHeader: React.FC<{
   resetLibrary,
   onSelectItems,
   appState,
+  className,
 }) => {
   const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
   const [isLibraryMenuOpen, setIsLibraryMenuOpen] = useAtom(
     isLibraryMenuOpenAtom,
     jotaiScope,
   );
-  const renderRemoveLibAlert = useCallback(() => {
+
+  const renderRemoveLibAlert = () => {
     const content = selectedItems.length
       ? t("alerts.removeItemsFromsLibrary", { count: selectedItems.length })
       : t("alerts.resetLibrary");
@@ -75,7 +81,7 @@ export const LibraryMenuHeader: React.FC<{
         <p>{content}</p>
       </ConfirmDialog>
     );
-  }, [selectedItems, onRemoveFromLibrary, resetLibrary]);
+  };
 
   const [showRemoveLibAlert, setShowRemoveLibAlert] = useState(false);
 
@@ -101,19 +107,22 @@ export const LibraryMenuHeader: React.FC<{
         onCloseRequest={() => setPublishLibSuccess(null)}
         title={t("publishSuccessDialog.title")}
         className="publish-library-success"
-        small={true}
+        size="small"
       >
         <p>
-          {t("publishSuccessDialog.content", {
-            authorName: publishLibSuccess!.authorName,
-          })}{" "}
-          <a
-            href={publishLibSuccess?.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            {t("publishSuccessDialog.link")}
-          </a>
+          <Trans
+            i18nKey="publishSuccessDialog.content"
+            authorName={publishLibSuccess!.authorName}
+            link={(el) => (
+              <a
+                href={publishLibSuccess?.url}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {el}
+              </a>
+            )}
+          />
         </p>
         <ToolButton
           type="button"
@@ -128,20 +137,20 @@ export const LibraryMenuHeader: React.FC<{
     );
   }, [setPublishLibSuccess, publishLibSuccess]);
 
-  const onPublishLibSuccess = useCallback(
-    (data: { url: string; authorName: string }, libraryItems: LibraryItems) => {
-      setShowPublishLibraryDialog(false);
-      setPublishLibSuccess({ url: data.url, authorName: data.authorName });
-      const nextLibItems = libraryItems.slice();
-      nextLibItems.forEach((libItem) => {
-        if (selectedItems.includes(libItem.id)) {
-          libItem.status = "published";
-        }
-      });
-      library.setLibrary(nextLibItems);
-    },
-    [setShowPublishLibraryDialog, setPublishLibSuccess, selectedItems, library],
-  );
+  const onPublishLibSuccess = (
+    data: { url: string; authorName: string },
+    libraryItems: LibraryItems,
+  ) => {
+    setShowPublishLibraryDialog(false);
+    setPublishLibSuccess({ url: data.url, authorName: data.authorName });
+    const nextLibItems = libraryItems.slice();
+    nextLibItems.forEach((libItem) => {
+      if (selectedItems.includes(libItem.id)) {
+        libItem.status = "published";
+      }
+    });
+    library.setLibrary(nextLibItems);
+  };
 
   const onLibraryImport = async () => {
     try {
@@ -181,7 +190,6 @@ export const LibraryMenuHeader: React.FC<{
     return (
       <DropdownMenu open={isLibraryMenuOpen}>
         <DropdownMenu.Trigger
-          className="Sidebar__dropdown-btn"
           onToggle={() => setIsLibraryMenuOpen(!isLibraryMenuOpen)}
         >
           {DotsIcon}
@@ -230,8 +238,9 @@ export const LibraryMenuHeader: React.FC<{
       </DropdownMenu>
     );
   };
+
   return (
-    <div style={{ position: "relative" }}>
+    <div className={clsx("library-menu-dropdown-container", className)}>
       {renderLibraryMenu()}
       {selectedItems.length > 0 && (
         <div className="library-actions-counter">{selectedItems.length}</div>
@@ -261,3 +270,53 @@ export const LibraryMenuHeader: React.FC<{
     </div>
   );
 };
+
+export const LibraryDropdownMenu = ({
+  selectedItems,
+  onSelectItems,
+  className,
+}: {
+  selectedItems: LibraryItem["id"][];
+  onSelectItems: (id: LibraryItem["id"][]) => void;
+  className?: string;
+}) => {
+  const { library } = useApp();
+  const { clearLibraryCache, deleteItemsFromLibraryCache } = useLibraryCache();
+  const appState = useUIAppState();
+  const setAppState = useExcalidrawSetAppState();
+
+  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
+
+  const removeFromLibrary = async (libraryItems: LibraryItems) => {
+    const nextItems = libraryItems.filter(
+      (item) => !selectedItems.includes(item.id),
+    );
+    library.setLibrary(nextItems).catch(() => {
+      setAppState({ errorMessage: t("alerts.errorRemovingFromLibrary") });
+    });
+
+    deleteItemsFromLibraryCache(selectedItems);
+
+    onSelectItems([]);
+  };
+
+  const resetLibrary = () => {
+    library.resetLibrary();
+    clearLibraryCache();
+  };
+
+  return (
+    <LibraryDropdownMenuButton
+      appState={appState}
+      setAppState={setAppState}
+      selectedItems={selectedItems}
+      onSelectItems={onSelectItems}
+      library={library}
+      onRemoveFromLibrary={() =>
+        removeFromLibrary(libraryItemsData.libraryItems)
+      }
+      resetLibrary={resetLibrary}
+      className={className}
+    />
+  );
+};
diff --git a/src/components/LibraryMenuItems.scss b/src/components/LibraryMenuItems.scss
index 1e81fdfd1..8ac09aabc 100644
--- a/src/components/LibraryMenuItems.scss
+++ b/src/components/LibraryMenuItems.scss
@@ -26,6 +26,7 @@
   }
 
   .library-menu-items-container {
+    width: 100%;
     display: flex;
     flex-grow: 1;
     flex-shrink: 1;
@@ -35,10 +36,14 @@
     height: 100%;
     justify-content: center;
     margin: 0;
-    border-bottom: 1px solid var(--sidebar-border-color);
 
     position: relative;
 
+    & > div {
+      padding-left: 0.75rem;
+      padding-right: 0.75rem;
+    }
+
     &__row {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
@@ -47,7 +52,7 @@
 
     &__items {
       row-gap: 0.5rem;
-      padding: var(--container-padding-y) var(--container-padding-x);
+      padding: var(--container-padding-y) 0;
       flex: 1;
       overflow-y: auto;
       overflow-x: hidden;
@@ -59,12 +64,21 @@
       font-size: 1.125rem;
       font-weight: bold;
       margin-bottom: 0.75rem;
+      width: 100%;
+      padding-right: 4rem; // due to dropdown button
+      box-sizing: border-box;
 
       &--excal {
-        margin-top: 2.5rem;
+        margin-top: 2rem;
       }
     }
 
+    &__grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+      grid-gap: 1rem;
+    }
+
     .separator {
       width: 100%;
       display: flex;
@@ -75,4 +89,11 @@
       color: var(--text-primary-color);
     }
   }
+
+  .library-menu-items-private-library-container {
+    // so that when you toggle between pending item and no items, there's
+    // no layout shift (this is hardcoded and works only with ENG locale)
+    min-height: 3.75rem;
+    width: 100%;
+  }
 }
diff --git a/src/components/LibraryMenuItems.tsx b/src/components/LibraryMenuItems.tsx
index 7ae6517a8..ff88e537c 100644
--- a/src/components/LibraryMenuItems.tsx
+++ b/src/components/LibraryMenuItems.tsx
@@ -1,211 +1,207 @@
-import React, { useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { serializeLibraryAsJSON } from "../data/json";
-import { ExcalidrawElement, NonDeleted } from "../element/types";
 import { t } from "../i18n";
-import { AppState, ExcalidrawProps, LibraryItem, LibraryItems } from "../types";
-import { arrayToMap, chunk } from "../utils";
-import { LibraryUnit } from "./LibraryUnit";
+import {
+  ExcalidrawProps,
+  LibraryItem,
+  LibraryItems,
+  UIAppState,
+} from "../types";
+import { arrayToMap } from "../utils";
 import Stack from "./Stack";
-
-import "./LibraryMenuItems.scss";
 import { MIME_TYPES } from "../constants";
 import Spinner from "./Spinner";
-import LibraryMenuBrowseButton from "./LibraryMenuBrowseButton";
-import clsx from "clsx";
 import { duplicateElements } from "../element/newElement";
+import { LibraryMenuControlButtons } from "./LibraryMenuControlButtons";
+import { LibraryDropdownMenu } from "./LibraryMenuHeaderContent";
+import {
+  LibraryMenuSection,
+  LibraryMenuSectionGrid,
+} from "./LibraryMenuSection";
+import { useScrollPosition } from "../hooks/useScrollPosition";
+import { useLibraryCache } from "../hooks/useLibraryItemSvg";
 
-const CELLS_PER_ROW = 4;
+import "./LibraryMenuItems.scss";
 
-const LibraryMenuItems = ({
+// using an odd number of items per batch so the rendering creates an irregular
+// pattern which looks more organic
+const ITEMS_RENDERED_PER_BATCH = 17;
+// when render outputs cached we can render many more items per batch to
+// speed it up
+const CACHED_ITEMS_RENDERED_PER_BATCH = 64;
+
+export default function LibraryMenuItems({
   isLoading,
   libraryItems,
   onAddToLibrary,
   onInsertLibraryItems,
   pendingElements,
-  selectedItems,
-  onSelectItems,
   theme,
   id,
   libraryReturnUrl,
+  onSelectItems,
+  selectedItems,
 }: {
   isLoading: boolean;
   libraryItems: LibraryItems;
   pendingElements: LibraryItem["elements"];
   onInsertLibraryItems: (libraryItems: LibraryItems) => void;
   onAddToLibrary: (elements: LibraryItem["elements"]) => void;
+  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
+  theme: UIAppState["theme"];
+  id: string;
   selectedItems: LibraryItem["id"][];
   onSelectItems: (id: LibraryItem["id"][]) => void;
-  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
-  theme: AppState["theme"];
-  id: string;
-}) => {
+}) {
+  const libraryContainerRef = useRef<HTMLDivElement>(null);
+  const scrollPosition = useScrollPosition<HTMLDivElement>(libraryContainerRef);
+
+  // This effect has to be called only on first render, therefore  `scrollPosition` isn't in the dependency array
+  useEffect(() => {
+    if (scrollPosition > 0) {
+      libraryContainerRef.current?.scrollTo(0, scrollPosition);
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const { svgCache } = useLibraryCache();
+  const unpublishedItems = useMemo(
+    () => libraryItems.filter((item) => item.status !== "published"),
+    [libraryItems],
+  );
+
+  const publishedItems = useMemo(
+    () => libraryItems.filter((item) => item.status === "published"),
+    [libraryItems],
+  );
+
+  const showBtn = !libraryItems.length && !pendingElements.length;
+
+  const isLibraryEmpty =
+    !pendingElements.length &&
+    !unpublishedItems.length &&
+    !publishedItems.length;
+
   const [lastSelectedItem, setLastSelectedItem] = useState<
     LibraryItem["id"] | null
   >(null);
 
-  const onItemSelectToggle = (
-    id: LibraryItem["id"],
-    event: React.MouseEvent,
-  ) => {
-    const shouldSelect = !selectedItems.includes(id);
+  const onItemSelectToggle = useCallback(
+    (id: LibraryItem["id"], event: React.MouseEvent) => {
+      const shouldSelect = !selectedItems.includes(id);
 
-    const orderedItems = [...unpublishedItems, ...publishedItems];
+      const orderedItems = [...unpublishedItems, ...publishedItems];
 
-    if (shouldSelect) {
-      if (event.shiftKey && lastSelectedItem) {
-        const rangeStart = orderedItems.findIndex(
-          (item) => item.id === lastSelectedItem,
-        );
-        const rangeEnd = orderedItems.findIndex((item) => item.id === id);
+      if (shouldSelect) {
+        if (event.shiftKey && lastSelectedItem) {
+          const rangeStart = orderedItems.findIndex(
+            (item) => item.id === lastSelectedItem,
+          );
+          const rangeEnd = orderedItems.findIndex((item) => item.id === id);
 
-        if (rangeStart === -1 || rangeEnd === -1) {
+          if (rangeStart === -1 || rangeEnd === -1) {
+            onSelectItems([...selectedItems, id]);
+            return;
+          }
+
+          const selectedItemsMap = arrayToMap(selectedItems);
+          const nextSelectedIds = orderedItems.reduce(
+            (acc: LibraryItem["id"][], item, idx) => {
+              if (
+                (idx >= rangeStart && idx <= rangeEnd) ||
+                selectedItemsMap.has(item.id)
+              ) {
+                acc.push(item.id);
+              }
+              return acc;
+            },
+            [],
+          );
+
+          onSelectItems(nextSelectedIds);
+        } else {
           onSelectItems([...selectedItems, id]);
-          return;
         }
-
-        const selectedItemsMap = arrayToMap(selectedItems);
-        const nextSelectedIds = orderedItems.reduce(
-          (acc: LibraryItem["id"][], item, idx) => {
-            if (
-              (idx >= rangeStart && idx <= rangeEnd) ||
-              selectedItemsMap.has(item.id)
-            ) {
-              acc.push(item.id);
-            }
-            return acc;
-          },
-          [],
-        );
-
-        onSelectItems(nextSelectedIds);
+        setLastSelectedItem(id);
       } else {
-        onSelectItems([...selectedItems, id]);
+        setLastSelectedItem(null);
+        onSelectItems(selectedItems.filter((_id) => _id !== id));
       }
-      setLastSelectedItem(id);
-    } else {
-      setLastSelectedItem(null);
-      onSelectItems(selectedItems.filter((_id) => _id !== id));
-    }
-  };
+    },
+    [
+      lastSelectedItem,
+      onSelectItems,
+      publishedItems,
+      selectedItems,
+      unpublishedItems,
+    ],
+  );
 
-  const getInsertedElements = (id: string) => {
-    let targetElements;
-    if (selectedItems.includes(id)) {
-      targetElements = libraryItems.filter((item) =>
-        selectedItems.includes(item.id),
-      );
-    } else {
-      targetElements = libraryItems.filter((item) => item.id === id);
-    }
-    return targetElements.map((item) => {
-      return {
-        ...item,
-        // duplicate each library item before inserting on canvas to confine
-        // ids and bindings to each library item. See #6465
-        elements: duplicateElements(item.elements),
-      };
-    });
-  };
-
-  const createLibraryItemCompo = (params: {
-    item:
-      | LibraryItem
-      | /* pending library item */ {
-          id: null;
-          elements: readonly NonDeleted<ExcalidrawElement>[];
-        }
-      | null;
-    onClick?: () => void;
-    key: string;
-  }) => {
-    return (
-      <Stack.Col key={params.key}>
-        <LibraryUnit
-          elements={params.item?.elements}
-          isPending={!params.item?.id && !!params.item?.elements}
-          onClick={params.onClick || (() => {})}
-          id={params.item?.id || null}
-          selected={!!params.item?.id && selectedItems.includes(params.item.id)}
-          onToggle={onItemSelectToggle}
-          onDrag={(id, event) => {
-            event.dataTransfer.setData(
-              MIME_TYPES.excalidrawlib,
-              serializeLibraryAsJSON(getInsertedElements(id)),
-            );
-          }}
-        />
-      </Stack.Col>
-    );
-  };
-
-  const renderLibrarySection = (
-    items: (
-      | LibraryItem
-      | /* pending library item */ {
-          id: null;
-          elements: readonly NonDeleted<ExcalidrawElement>[];
-        }
-    )[],
-  ) => {
-    const _items = items.map((item) => {
-      if (item.id) {
-        return createLibraryItemCompo({
-          item,
-          onClick: () => onInsertLibraryItems(getInsertedElements(item.id)),
-          key: item.id,
-        });
-      }
-      return createLibraryItemCompo({
-        key: "__pending__item__",
-        item,
-        onClick: () => onAddToLibrary(pendingElements),
-      });
-    });
-
-    // ensure we render all empty cells if no items are present
-    let rows = chunk(_items, CELLS_PER_ROW);
-    if (!rows.length) {
-      rows = [[]];
-    }
-
-    return rows.map((rowItems, index, rows) => {
-      if (index === rows.length - 1) {
-        // pad row with empty cells
-        rowItems = rowItems.concat(
-          new Array(CELLS_PER_ROW - rowItems.length)
-            .fill(null)
-            .map((_, index) => {
-              return createLibraryItemCompo({
-                key: `empty_${index}`,
-                item: null,
-              });
-            }),
+  const getInsertedElements = useCallback(
+    (id: string) => {
+      let targetElements;
+      if (selectedItems.includes(id)) {
+        targetElements = libraryItems.filter((item) =>
+          selectedItems.includes(item.id),
         );
+      } else {
+        targetElements = libraryItems.filter((item) => item.id === id);
       }
-      return (
-        <Stack.Row
-          align="center"
-          key={index}
-          className="library-menu-items-container__row"
-        >
-          {rowItems}
-        </Stack.Row>
+      return targetElements.map((item) => {
+        return {
+          ...item,
+          // duplicate each library item before inserting on canvas to confine
+          // ids and bindings to each library item. See #6465
+          elements: duplicateElements(item.elements, { randomizeSeed: true }),
+        };
+      });
+    },
+    [libraryItems, selectedItems],
+  );
+
+  const onItemDrag = useCallback(
+    (id: LibraryItem["id"], event: React.DragEvent) => {
+      event.dataTransfer.setData(
+        MIME_TYPES.excalidrawlib,
+        serializeLibraryAsJSON(getInsertedElements(id)),
       );
-    });
-  };
-
-  const unpublishedItems = libraryItems.filter(
-    (item) => item.status !== "published",
-  );
-  const publishedItems = libraryItems.filter(
-    (item) => item.status === "published",
+    },
+    [getInsertedElements],
   );
 
-  const showBtn =
-    !libraryItems.length &&
-    !unpublishedItems.length &&
-    !publishedItems.length &&
-    !pendingElements.length;
+  const isItemSelected = useCallback(
+    (id: LibraryItem["id"] | null) => {
+      if (!id) {
+        return false;
+      }
+
+      return selectedItems.includes(id);
+    },
+    [selectedItems],
+  );
+
+  const onAddToLibraryClick = useCallback(() => {
+    onAddToLibrary(pendingElements);
+  }, [pendingElements, onAddToLibrary]);
+
+  const onItemClick = useCallback(
+    (id: LibraryItem["id"] | null) => {
+      if (id) {
+        onInsertLibraryItems(getInsertedElements(id));
+      }
+    },
+    [getInsertedElements, onInsertLibraryItems],
+  );
+
+  const itemsRenderedPerBatch =
+    svgCache.size >= libraryItems.length
+      ? CACHED_ITEMS_RENDERED_PER_BATCH
+      : ITEMS_RENDERED_PER_BATCH;
 
   return (
     <div
@@ -215,9 +211,16 @@ const LibraryMenuItems = ({
         unpublishedItems.length ||
         publishedItems.length
           ? { justifyContent: "flex-start" }
-          : {}
+          : { borderBottom: 0 }
       }
     >
+      {!isLibraryEmpty && (
+        <LibraryDropdownMenu
+          selectedItems={selectedItems}
+          onSelectItems={onSelectItems}
+          className="library-menu-dropdown-container--in-heading"
+        />
+      )}
       <Stack.Col
         className="library-menu-items-container__items"
         align="start"
@@ -226,36 +229,29 @@ const LibraryMenuItems = ({
           flex: publishedItems.length > 0 ? 1 : "0 1 auto",
           marginBottom: 0,
         }}
+        ref={libraryContainerRef}
       >
         <>
-          <div>
-            {(pendingElements.length > 0 ||
-              unpublishedItems.length > 0 ||
-              publishedItems.length > 0) && (
-              <div className="library-menu-items-container__header">
-                {t("labels.personalLib")}
-              </div>
-            )}
-            {isLoading && (
-              <div
-                style={{
-                  position: "absolute",
-                  top: "var(--container-padding-y)",
-                  right: "var(--container-padding-x)",
-                  transform: "translateY(50%)",
-                }}
-              >
-                <Spinner />
-              </div>
-            )}
-          </div>
+          {!isLibraryEmpty && (
+            <div className="library-menu-items-container__header">
+              {t("labels.personalLib")}
+            </div>
+          )}
+          {isLoading && (
+            <div
+              style={{
+                position: "absolute",
+                top: "var(--container-padding-y)",
+                right: "var(--container-padding-x)",
+                transform: "translateY(50%)",
+              }}
+            >
+              <Spinner />
+            </div>
+          )}
           {!pendingElements.length && !unpublishedItems.length ? (
             <div className="library-menu-items__no-items">
-              <div
-                className={clsx({
-                  "library-menu-items__no-items__label": showBtn,
-                })}
-              >
+              <div className="library-menu-items__no-items__label">
                 {t("library.noItems")}
               </div>
               <div className="library-menu-items__no-items__hint">
@@ -265,13 +261,28 @@ const LibraryMenuItems = ({
               </div>
             </div>
           ) : (
-            renderLibrarySection([
-              // append pending library item
-              ...(pendingElements.length
-                ? [{ id: null, elements: pendingElements }]
-                : []),
-              ...unpublishedItems,
-            ])
+            <LibraryMenuSectionGrid>
+              {pendingElements.length > 0 && (
+                <LibraryMenuSection
+                  itemsRenderedPerBatch={itemsRenderedPerBatch}
+                  items={[{ id: null, elements: pendingElements }]}
+                  onItemSelectToggle={onItemSelectToggle}
+                  onItemDrag={onItemDrag}
+                  onClick={onAddToLibraryClick}
+                  isItemSelected={isItemSelected}
+                  svgCache={svgCache}
+                />
+              )}
+              <LibraryMenuSection
+                itemsRenderedPerBatch={itemsRenderedPerBatch}
+                items={unpublishedItems}
+                onItemSelectToggle={onItemSelectToggle}
+                onItemDrag={onItemDrag}
+                onClick={onItemClick}
+                isItemSelected={isItemSelected}
+                svgCache={svgCache}
+              />
+            </LibraryMenuSectionGrid>
           )}
         </>
 
@@ -284,7 +295,17 @@ const LibraryMenuItems = ({
             </div>
           )}
           {publishedItems.length > 0 ? (
-            renderLibrarySection(publishedItems)
+            <LibraryMenuSectionGrid>
+              <LibraryMenuSection
+                itemsRenderedPerBatch={itemsRenderedPerBatch}
+                items={publishedItems}
+                onItemSelectToggle={onItemSelectToggle}
+                onItemDrag={onItemDrag}
+                onClick={onItemClick}
+                isItemSelected={isItemSelected}
+                svgCache={svgCache}
+              />
+            </LibraryMenuSectionGrid>
           ) : unpublishedItems.length > 0 ? (
             <div
               style={{
@@ -303,15 +324,19 @@ const LibraryMenuItems = ({
         </>
 
         {showBtn && (
-          <LibraryMenuBrowseButton
+          <LibraryMenuControlButtons
+            style={{ padding: "16px 0", width: "100%" }}
             id={id}
             libraryReturnUrl={libraryReturnUrl}
             theme={theme}
-          />
+          >
+            <LibraryDropdownMenu
+              selectedItems={selectedItems}
+              onSelectItems={onSelectItems}
+            />
+          </LibraryMenuControlButtons>
         )}
       </Stack.Col>
     </div>
   );
-};
-
-export default LibraryMenuItems;
+}
diff --git a/src/components/LibraryMenuSection.tsx b/src/components/LibraryMenuSection.tsx
new file mode 100644
index 000000000..0e10470fc
--- /dev/null
+++ b/src/components/LibraryMenuSection.tsx
@@ -0,0 +1,77 @@
+import React, { memo, ReactNode, useEffect, useState } from "react";
+import { EmptyLibraryUnit, LibraryUnit } from "./LibraryUnit";
+import { LibraryItem } from "../types";
+import { ExcalidrawElement, NonDeleted } from "../element/types";
+import { SvgCache } from "../hooks/useLibraryItemSvg";
+import { useTransition } from "../hooks/useTransition";
+
+type LibraryOrPendingItem = (
+  | LibraryItem
+  | /* pending library item */ {
+      id: null;
+      elements: readonly NonDeleted<ExcalidrawElement>[];
+    }
+)[];
+
+interface Props {
+  items: LibraryOrPendingItem;
+  onClick: (id: LibraryItem["id"] | null) => void;
+  onItemSelectToggle: (id: LibraryItem["id"], event: React.MouseEvent) => void;
+  onItemDrag: (id: LibraryItem["id"], event: React.DragEvent) => void;
+  isItemSelected: (id: LibraryItem["id"] | null) => boolean;
+  svgCache: SvgCache;
+  itemsRenderedPerBatch: number;
+}
+
+export const LibraryMenuSectionGrid = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  return <div className="library-menu-items-container__grid">{children}</div>;
+};
+
+export const LibraryMenuSection = memo(
+  ({
+    items,
+    onItemSelectToggle,
+    onItemDrag,
+    isItemSelected,
+    onClick,
+    svgCache,
+    itemsRenderedPerBatch,
+  }: Props) => {
+    const [, startTransition] = useTransition();
+    const [index, setIndex] = useState(0);
+
+    useEffect(() => {
+      if (index < items.length) {
+        startTransition(() => {
+          setIndex(index + itemsRenderedPerBatch);
+        });
+      }
+    }, [index, items.length, startTransition, itemsRenderedPerBatch]);
+
+    return (
+      <>
+        {items.map((item, i) => {
+          return i < index ? (
+            <LibraryUnit
+              elements={item?.elements}
+              isPending={!item?.id && !!item?.elements}
+              onClick={onClick}
+              svgCache={svgCache}
+              id={item?.id}
+              selected={isItemSelected(item.id)}
+              onToggle={onItemSelectToggle}
+              onDrag={onItemDrag}
+              key={item?.id ?? i}
+            />
+          ) : (
+            <EmptyLibraryUnit key={i} />
+          );
+        })}
+      </>
+    );
+  },
+);
diff --git a/src/components/LibraryUnit.scss b/src/components/LibraryUnit.scss
index 85d7505c3..a5f26bff4 100644
--- a/src/components/LibraryUnit.scss
+++ b/src/components/LibraryUnit.scss
@@ -20,6 +20,27 @@
       border-color: var(--color-primary);
       border-width: 1px;
     }
+
+    &--skeleton {
+      opacity: 0.5;
+      background: linear-gradient(
+        -45deg,
+        var(--color-gray-10),
+        var(--color-gray-20),
+        var(--color-gray-10)
+      );
+      background-size: 200% 200%;
+      animation: library-unit__skeleton-opacity-animation 0.2s linear;
+    }
+  }
+
+  &.theme--dark .library-unit--skeleton {
+    background-image: linear-gradient(
+      -45deg,
+      var(--color-gray-100),
+      var(--color-gray-80),
+      var(--color-gray-100)
+    );
   }
 
   .library-unit__dragger {
@@ -142,4 +163,18 @@
       transform: scale(0.85);
     }
   }
+
+  @keyframes library-unit__skeleton-opacity-animation {
+    0% {
+      opacity: 0;
+    }
+
+    75% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 0.5;
+    }
+  }
 }
diff --git a/src/components/LibraryUnit.tsx b/src/components/LibraryUnit.tsx
index 749877cdd..ce5d4ebbb 100644
--- a/src/components/LibraryUnit.tsx
+++ b/src/components/LibraryUnit.tsx
@@ -1,108 +1,107 @@
 import clsx from "clsx";
-import oc from "open-color";
-import { useEffect, useRef, useState } from "react";
+import { memo, useEffect, useRef, useState } from "react";
 import { useDevice } from "../components/App";
-import { exportToSvg } from "../packages/utils";
 import { LibraryItem } from "../types";
 import "./LibraryUnit.scss";
 import { CheckboxItem } from "./CheckboxItem";
 import { PlusIcon } from "./icons";
+import { SvgCache, useLibraryItemSvg } from "../hooks/useLibraryItemSvg";
 
-export const LibraryUnit = ({
-  id,
-  elements,
-  isPending,
-  onClick,
-  selected,
-  onToggle,
-  onDrag,
-}: {
-  id: LibraryItem["id"] | /** for pending item */ null;
-  elements?: LibraryItem["elements"];
-  isPending?: boolean;
-  onClick: () => void;
-  selected: boolean;
-  onToggle: (id: string, event: React.MouseEvent) => void;
-  onDrag: (id: string, event: React.DragEvent) => void;
-}) => {
-  const ref = useRef<HTMLDivElement | null>(null);
-  useEffect(() => {
-    const node = ref.current;
-    if (!node) {
-      return;
-    }
+export const LibraryUnit = memo(
+  ({
+    id,
+    elements,
+    isPending,
+    onClick,
+    selected,
+    onToggle,
+    onDrag,
+    svgCache,
+  }: {
+    id: LibraryItem["id"] | /** for pending item */ null;
+    elements?: LibraryItem["elements"];
+    isPending?: boolean;
+    onClick: (id: LibraryItem["id"] | null) => void;
+    selected: boolean;
+    onToggle: (id: string, event: React.MouseEvent) => void;
+    onDrag: (id: string, event: React.DragEvent) => void;
+    svgCache: SvgCache;
+  }) => {
+    const ref = useRef<HTMLDivElement | null>(null);
+    const svg = useLibraryItemSvg(id, elements, svgCache);
 
-    (async () => {
-      if (!elements) {
+    useEffect(() => {
+      const node = ref.current;
+
+      if (!node) {
         return;
       }
-      const svg = await exportToSvg({
-        elements,
-        appState: {
-          exportBackground: false,
-          viewBackgroundColor: oc.white,
-        },
-        files: null,
-      });
-      svg.querySelector(".style-fonts")?.remove();
-      node.innerHTML = svg.outerHTML;
-    })();
 
-    return () => {
-      node.innerHTML = "";
-    };
-  }, [elements]);
+      if (svg) {
+        node.innerHTML = svg.outerHTML;
+      }
 
-  const [isHovered, setIsHovered] = useState(false);
-  const isMobile = useDevice().isMobile;
-  const adder = isPending && (
-    <div className="library-unit__adder">{PlusIcon}</div>
-  );
+      return () => {
+        node.innerHTML = "";
+      };
+    }, [svg]);
 
-  return (
-    <div
-      className={clsx("library-unit", {
-        "library-unit__active": elements,
-        "library-unit--hover": elements && isHovered,
-        "library-unit--selected": selected,
-      })}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
+    const [isHovered, setIsHovered] = useState(false);
+    const isMobile = useDevice().isMobile;
+    const adder = isPending && (
+      <div className="library-unit__adder">{PlusIcon}</div>
+    );
+
+    return (
       <div
-        className={clsx("library-unit__dragger", {
-          "library-unit__pulse": !!isPending,
+        className={clsx("library-unit", {
+          "library-unit__active": elements,
+          "library-unit--hover": elements && isHovered,
+          "library-unit--selected": selected,
+          "library-unit--skeleton": !svg,
         })}
-        ref={ref}
-        draggable={!!elements}
-        onClick={
-          !!elements || !!isPending
-            ? (event) => {
-                if (id && event.shiftKey) {
-                  onToggle(id, event);
-                } else {
-                  onClick();
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        <div
+          className={clsx("library-unit__dragger", {
+            "library-unit__pulse": !!isPending,
+          })}
+          ref={ref}
+          draggable={!!elements}
+          onClick={
+            !!elements || !!isPending
+              ? (event) => {
+                  if (id && event.shiftKey) {
+                    onToggle(id, event);
+                  } else {
+                    onClick(id);
+                  }
                 }
-              }
-            : undefined
-        }
-        onDragStart={(event) => {
-          if (!id) {
-            event.preventDefault();
-            return;
+              : undefined
           }
-          setIsHovered(false);
-          onDrag(id, event);
-        }}
-      />
-      {adder}
-      {id && elements && (isHovered || isMobile || selected) && (
-        <CheckboxItem
-          checked={selected}
-          onChange={(checked, event) => onToggle(id, event)}
-          className="library-unit__checkbox"
+          onDragStart={(event) => {
+            if (!id) {
+              event.preventDefault();
+              return;
+            }
+            setIsHovered(false);
+            onDrag(id, event);
+          }}
         />
-      )}
-    </div>
-  );
-};
+        {adder}
+        {id && elements && (isHovered || isMobile || selected) && (
+          <CheckboxItem
+            checked={selected}
+            onChange={(checked, event) => onToggle(id, event)}
+            className="library-unit__checkbox"
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+export const EmptyLibraryUnit = () => (
+  <div className="library-unit library-unit--skeleton" />
+);
diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx
index 75e08867c..30f431cbf 100644
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -1,5 +1,11 @@
 import React from "react";
-import { AppState, Device, ExcalidrawProps } from "../types";
+import {
+  AppClassProperties,
+  AppState,
+  Device,
+  ExcalidrawProps,
+  UIAppState,
+} from "../types";
 import { ActionManager } from "../actions/manager";
 import { t } from "../i18n";
 import Stack from "./Stack";
@@ -13,16 +19,15 @@ import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { Section } from "./Section";
 import { SCROLLBAR_WIDTH, SCROLLBAR_MARGIN } from "../scene/scrollbars";
 import { LockButton } from "./LockButton";
-import { LibraryButton } from "./LibraryButton";
 import { PenModeButton } from "./PenModeButton";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions";
 import { HandButton } from "./HandButton";
 import { isHandToolActive } from "../appState";
-import { useTunnels } from "./context/tunnels";
+import { useTunnels } from "../context/tunnels";
 
 type MobileMenuProps = {
-  appState: AppState;
+  appState: UIAppState;
   actionManager: ActionManager;
   renderJSONExportDialog: () => React.ReactNode;
   renderImageExportDialog: () => React.ReactNode;
@@ -36,12 +41,13 @@ type MobileMenuProps = {
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
   renderTopRightUI?: (
     isMobile: boolean,
-    appState: AppState,
+    appState: UIAppState,
   ) => JSX.Element | null;
   renderCustomStats?: ExcalidrawProps["renderCustomStats"];
   renderSidebars: () => JSX.Element | null;
   device: Device;
   renderWelcomeScreen: boolean;
+  app: AppClassProperties;
 };
 
 export const MobileMenu = ({
@@ -59,12 +65,17 @@ export const MobileMenu = ({
   renderSidebars,
   device,
   renderWelcomeScreen,
+  app,
 }: MobileMenuProps) => {
-  const { welcomeScreenCenterTunnel, mainMenuTunnel } = useTunnels();
+  const {
+    WelcomeScreenCenterTunnel,
+    MainMenuTunnel,
+    DefaultSidebarTriggerTunnel,
+  } = useTunnels();
   const renderToolbar = () => {
     return (
       <FixedSideContainer side="top" className="App-top-bar">
-        {renderWelcomeScreen && <welcomeScreenCenterTunnel.Out />}
+        {renderWelcomeScreen && <WelcomeScreenCenterTunnel.Out />}
         <Section heading="shapes">
           {(heading: React.ReactNode) => (
             <Stack.Col gap={4} align="center">
@@ -88,11 +99,7 @@ export const MobileMenu = ({
                 {renderTopRightUI && renderTopRightUI(true, appState)}
                 <div className="mobile-misc-tools-container">
                   {!appState.viewModeEnabled && (
-                    <LibraryButton
-                      appState={appState}
-                      setAppState={setAppState}
-                      isMobile
-                    />
+                    <DefaultSidebarTriggerTunnel.Out />
                   )}
                   <PenModeButton
                     checked={appState.penMode}
@@ -120,9 +127,9 @@ export const MobileMenu = ({
         </Section>
         <HintViewer
           appState={appState}
-          elements={elements}
           isMobile={true}
           device={device}
+          app={app}
         />
       </FixedSideContainer>
     );
@@ -132,14 +139,14 @@ export const MobileMenu = ({
     if (appState.viewModeEnabled) {
       return (
         <div className="App-toolbar-content">
-          <mainMenuTunnel.Out />
+          <MainMenuTunnel.Out />
         </div>
       );
     }
 
     return (
       <div className="App-toolbar-content">
-        <mainMenuTunnel.Out />
+        <MainMenuTunnel.Out />
         {actionManager.renderAction("toggleEditMenu")}
         {actionManager.renderAction("undo")}
         {actionManager.renderAction("redo")}
@@ -190,13 +197,13 @@ export const MobileMenu = ({
             {renderAppToolbar()}
             {appState.scrolledOutside &&
               !appState.openMenu &&
-              appState.openSidebar !== "library" && (
+              !appState.openSidebar && (
                 <button
                   className="scroll-back-to-content"
                   onClick={() => {
-                    setAppState({
+                    setAppState((appState) => ({
                       ...calculateScrollCenter(elements, appState, canvas),
-                    });
+                    }));
                   }}
                 >
                   {t("buttons.scrollBackToContent")}
diff --git a/src/components/Modal.scss b/src/components/Modal.scss
index 71a1a4c0f..ad2d0c568 100644
--- a/src/components/Modal.scss
+++ b/src/components/Modal.scss
@@ -3,7 +3,7 @@
 .excalidraw {
   &.excalidraw-modal-container {
     position: absolute;
-    z-index: 10;
+    z-index: var(--zIndex-modal);
   }
 
   .Modal {
@@ -24,13 +24,15 @@
   }
 
   .Modal__background {
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 1;
     background-color: rgba(#121212, 0.2);
+
+    animation: Modal__background__fade-in 0.125s linear forwards;
   }
 
   .Modal__content {
@@ -65,14 +67,23 @@
     }
   }
 
-  @keyframes Modal__content_fade-in {
+  @keyframes Modal__background__fade-in {
     from {
       opacity: 0;
-      transform: translateY(10px);
     }
     to {
       opacity: 1;
-      transform: translateY(0);
+    }
+  }
+
+  @keyframes Modal__content_fade-in {
+    from {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
     }
   }
 
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 3d774b3df..3dd737e45 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -1,12 +1,11 @@
 import "./Modal.scss";
 
-import React, { useState, useLayoutEffect, useRef } from "react";
+import React from "react";
 import { createPortal } from "react-dom";
 import clsx from "clsx";
 import { KEYS } from "../keys";
-import { useExcalidrawContainer, useDevice } from "./App";
 import { AppState } from "../types";
-import { THEME } from "../constants";
+import { useCreatePortalContainer } from "../hooks/useCreatePortalContainer";
 
 export const Modal: React.FC<{
   className?: string;
@@ -17,8 +16,10 @@ export const Modal: React.FC<{
   theme?: AppState["theme"];
   closeOnClickOutside?: boolean;
 }> = (props) => {
-  const { theme = THEME.LIGHT, closeOnClickOutside = true } = props;
-  const modalRoot = useBodyRoot(theme);
+  const { closeOnClickOutside = true } = props;
+  const modalRoot = useCreatePortalContainer({
+    className: "excalidraw-modal-container",
+  });
 
   if (!modalRoot) {
     return null;
@@ -44,7 +45,7 @@ export const Modal: React.FC<{
       <div
         className="Modal__background"
         onClick={closeOnClickOutside ? props.onCloseRequest : undefined}
-      ></div>
+      />
       <div
         className="Modal__content"
         style={{ "--max-width": `${props.maxWidth}px` }}
@@ -56,43 +57,3 @@ export const Modal: React.FC<{
     modalRoot,
   );
 };
-
-const useBodyRoot = (theme: AppState["theme"]) => {
-  const [div, setDiv] = useState<HTMLDivElement | null>(null);
-
-  const device = useDevice();
-  const isMobileRef = useRef(device.isMobile);
-  isMobileRef.current = device.isMobile;
-
-  const { container: excalidrawContainer } = useExcalidrawContainer();
-
-  useLayoutEffect(() => {
-    if (div) {
-      div.classList.toggle("excalidraw--mobile", device.isMobile);
-    }
-  }, [div, device.isMobile]);
-
-  useLayoutEffect(() => {
-    const isDarkTheme =
-      !!excalidrawContainer?.classList.contains("theme--dark") ||
-      theme === "dark";
-    const div = document.createElement("div");
-
-    div.classList.add("excalidraw", "excalidraw-modal-container");
-    div.classList.toggle("excalidraw--mobile", isMobileRef.current);
-
-    if (isDarkTheme) {
-      div.classList.add("theme--dark");
-      div.classList.add("theme--dark-background-none");
-    }
-    document.body.appendChild(div);
-
-    setDiv(div);
-
-    return () => {
-      document.body.removeChild(div);
-    };
-  }, [excalidrawContainer, theme]);
-
-  return div;
-};
diff --git a/src/components/OverwriteConfirm/OverwriteConfirm.scss b/src/components/OverwriteConfirm/OverwriteConfirm.scss
new file mode 100644
index 000000000..23dd4f411
--- /dev/null
+++ b/src/components/OverwriteConfirm/OverwriteConfirm.scss
@@ -0,0 +1,126 @@
+@import "../../css/variables.module";
+
+.excalidraw {
+  .OverwriteConfirm {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    isolation: isolate;
+
+    h3 {
+      margin: 0;
+
+      font-weight: 700;
+      font-size: 1.3125rem;
+      line-height: 130%;
+      align-self: flex-start;
+
+      color: var(--text-primary-color);
+    }
+
+    &__Description {
+      box-sizing: border-box;
+
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      width: 100%;
+      gap: 1rem;
+
+      @include isMobile {
+        flex-direction: column;
+        text-align: center;
+      }
+
+      padding: 2.5rem;
+
+      background: var(--color-danger-background);
+      border-radius: 0.5rem;
+
+      font-family: "Assistant";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 1rem;
+      line-height: 150%;
+
+      color: var(--color-danger-color);
+
+      &__spacer {
+        flex-grow: 1;
+      }
+
+      &__icon {
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 2.5rem;
+        background: var(--color-danger-icon-background);
+        width: 3.5rem;
+        height: 3.5rem;
+
+        padding: 0.75rem;
+
+        svg {
+          color: var(--color-danger-icon-color);
+          width: 1.5rem;
+          height: 1.5rem;
+        }
+      }
+
+      &.OverwriteConfirm__Description--color-warning {
+        background: var(--color-warning-background);
+        color: var(--color-warning-color);
+
+        .OverwriteConfirm__Description__icon {
+          background: var(--color-warning-icon-background);
+          flex: 0 0 auto;
+
+          svg {
+            color: var(--color-warning-icon-color);
+          }
+        }
+      }
+    }
+
+    &__Actions {
+      display: flex;
+      flex-direction: row;
+      align-items: stretch;
+      justify-items: stretch;
+      justify-content: center;
+      gap: 1.5rem;
+
+      @include isMobile {
+        flex-direction: column;
+      }
+
+      &__Action {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 1.5rem;
+        gap: 0.75rem;
+        flex-basis: 50%;
+        flex-grow: 0;
+
+        &__content {
+          height: 100%;
+          font-size: 0.875rem;
+          text-align: center;
+        }
+
+        h4 {
+          font-weight: 700;
+          font-size: 1.125rem;
+          line-height: 130%;
+
+          margin: 0;
+
+          color: var(--text-primary-color);
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/OverwriteConfirm/OverwriteConfirm.tsx b/src/components/OverwriteConfirm/OverwriteConfirm.tsx
new file mode 100644
index 000000000..9a674cd37
--- /dev/null
+++ b/src/components/OverwriteConfirm/OverwriteConfirm.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import { useAtom } from "jotai";
+
+import { useTunnels } from "../../context/tunnels";
+import { jotaiScope } from "../../jotai";
+import { Dialog } from "../Dialog";
+import { withInternalFallback } from "../hoc/withInternalFallback";
+import { overwriteConfirmStateAtom } from "./OverwriteConfirmState";
+
+import { FilledButton } from "../FilledButton";
+import { alertTriangleIcon } from "../icons";
+import { Actions, Action } from "./OverwriteConfirmActions";
+import "./OverwriteConfirm.scss";
+
+export type OverwriteConfirmDialogProps = {
+  children: React.ReactNode;
+};
+
+const OverwriteConfirmDialog = Object.assign(
+  withInternalFallback(
+    "OverwriteConfirmDialog",
+    ({ children }: OverwriteConfirmDialogProps) => {
+      const { OverwriteConfirmDialogTunnel } = useTunnels();
+      const [overwriteConfirmState, setState] = useAtom(
+        overwriteConfirmStateAtom,
+        jotaiScope,
+      );
+
+      if (!overwriteConfirmState.active) {
+        return null;
+      }
+
+      const handleClose = () => {
+        overwriteConfirmState.onClose();
+        setState((state) => ({ ...state, active: false }));
+      };
+
+      const handleConfirm = () => {
+        overwriteConfirmState.onConfirm();
+        setState((state) => ({ ...state, active: false }));
+      };
+
+      return (
+        <OverwriteConfirmDialogTunnel.In>
+          <Dialog onCloseRequest={handleClose} title={false} size={916}>
+            <div className="OverwriteConfirm">
+              <h3>{overwriteConfirmState.title}</h3>
+              <div
+                className={`OverwriteConfirm__Description OverwriteConfirm__Description--color-${overwriteConfirmState.color}`}
+              >
+                <div className="OverwriteConfirm__Description__icon">
+                  {alertTriangleIcon}
+                </div>
+                <div>{overwriteConfirmState.description}</div>
+                <div className="OverwriteConfirm__Description__spacer"></div>
+                <FilledButton
+                  color={overwriteConfirmState.color}
+                  size="large"
+                  label={overwriteConfirmState.actionLabel}
+                  onClick={handleConfirm}
+                />
+              </div>
+              <Actions>{children}</Actions>
+            </div>
+          </Dialog>
+        </OverwriteConfirmDialogTunnel.In>
+      );
+    },
+  ),
+  {
+    Actions,
+    Action,
+  },
+);
+
+export { OverwriteConfirmDialog };
diff --git a/src/components/OverwriteConfirm/OverwriteConfirmActions.tsx b/src/components/OverwriteConfirm/OverwriteConfirmActions.tsx
new file mode 100644
index 000000000..b5bec84cf
--- /dev/null
+++ b/src/components/OverwriteConfirm/OverwriteConfirmActions.tsx
@@ -0,0 +1,85 @@
+import React from "react";
+import { FilledButton } from "../FilledButton";
+import { useExcalidrawActionManager, useExcalidrawSetAppState } from "../App";
+import { actionSaveFileToDisk } from "../../actions";
+import { useI18n } from "../../i18n";
+import { actionChangeExportEmbedScene } from "../../actions/actionExport";
+
+export type ActionProps = {
+  title: string;
+  children: React.ReactNode;
+  actionLabel: string;
+  onClick: () => void;
+};
+
+export const Action = ({
+  title,
+  children,
+  actionLabel,
+  onClick,
+}: ActionProps) => {
+  return (
+    <div className="OverwriteConfirm__Actions__Action">
+      <h4>{title}</h4>
+      <div className="OverwriteConfirm__Actions__Action__content">
+        {children}
+      </div>
+      <FilledButton
+        variant="outlined"
+        color="muted"
+        label={actionLabel}
+        size="large"
+        fullWidth
+        onClick={onClick}
+      />
+    </div>
+  );
+};
+
+export const ExportToImage = () => {
+  const { t } = useI18n();
+  const actionManager = useExcalidrawActionManager();
+  const setAppState = useExcalidrawSetAppState();
+
+  return (
+    <Action
+      title={t("overwriteConfirm.action.exportToImage.title")}
+      actionLabel={t("overwriteConfirm.action.exportToImage.button")}
+      onClick={() => {
+        actionManager.executeAction(actionChangeExportEmbedScene, "ui", true);
+        setAppState({ openDialog: "imageExport" });
+      }}
+    >
+      {t("overwriteConfirm.action.exportToImage.description")}
+    </Action>
+  );
+};
+
+export const SaveToDisk = () => {
+  const { t } = useI18n();
+  const actionManager = useExcalidrawActionManager();
+
+  return (
+    <Action
+      title={t("overwriteConfirm.action.saveToDisk.title")}
+      actionLabel={t("overwriteConfirm.action.saveToDisk.button")}
+      onClick={() => {
+        actionManager.executeAction(actionSaveFileToDisk, "ui");
+      }}
+    >
+      {t("overwriteConfirm.action.saveToDisk.description")}
+    </Action>
+  );
+};
+
+const Actions = Object.assign(
+  ({ children }: { children: React.ReactNode }) => {
+    return <div className="OverwriteConfirm__Actions">{children}</div>;
+  },
+  {
+    ExportToImage,
+    SaveToDisk,
+  },
+);
+
+export { Actions };
diff --git a/src/components/OverwriteConfirm/OverwriteConfirmState.ts b/src/components/OverwriteConfirm/OverwriteConfirmState.ts
new file mode 100644
index 000000000..99060ccfd
--- /dev/null
+++ b/src/components/OverwriteConfirm/OverwriteConfirmState.ts
@@ -0,0 +1,46 @@
+import { atom } from "jotai";
+import { jotaiStore } from "../../jotai";
+import React from "react";
+
+export type OverwriteConfirmState =
+  | {
+      active: true;
+      title: string;
+      description: React.ReactNode;
+      actionLabel: string;
+      color: "danger" | "warning";
+
+      onClose: () => void;
+      onConfirm: () => void;
+      onReject: () => void;
+    }
+  | { active: false };
+
+export const overwriteConfirmStateAtom = atom<OverwriteConfirmState>({
+  active: false,
+});
+
+export async function openConfirmModal({
+  title,
+  description,
+  actionLabel,
+  color,
+}: {
+  title: string;
+  description: React.ReactNode;
+  actionLabel: string;
+  color: "danger" | "warning";
+}) {
+  return new Promise<boolean>((resolve) => {
+    jotaiStore.set(overwriteConfirmStateAtom, {
+      active: true,
+      onConfirm: () => resolve(true),
+      onClose: () => resolve(false),
+      onReject: () => resolve(false),
+      title,
+      description,
+      actionLabel,
+      color,
+    });
+  });
+}
diff --git a/src/components/PasteChartDialog.tsx b/src/components/PasteChartDialog.tsx
index b71aef509..9878f6fcc 100644
--- a/src/components/PasteChartDialog.tsx
+++ b/src/components/PasteChartDialog.tsx
@@ -5,8 +5,10 @@ import { ChartElements, renderSpreadsheet, Spreadsheet } from "../charts";
 import { ChartType } from "../element/types";
 import { t } from "../i18n";
 import { exportToSvg } from "../scene/export";
-import { AppState, LibraryItem } from "../types";
+import { UIAppState } from "../types";
+import { useApp } from "./App";
 import { Dialog } from "./Dialog";
+
 import "./PasteChartDialog.scss";
 
 type OnInsertChart = (chartType: ChartType, elements: ChartElements) => void;
@@ -78,13 +80,12 @@ export const PasteChartDialog = ({
   setAppState,
   appState,
   onClose,
-  onInsertChart,
 }: {
-  appState: AppState;
+  appState: UIAppState;
   onClose: () => void;
-  setAppState: React.Component<any, AppState>["setState"];
-  onInsertChart: (elements: LibraryItem["elements"]) => void;
+  setAppState: React.Component<any, UIAppState>["setState"];
 }) => {
+  const { onInsertElements } = useApp();
   const handleClose = React.useCallback(() => {
     if (onClose) {
       onClose();
@@ -92,7 +93,7 @@ export const PasteChartDialog = ({
   }, [onClose]);
 
   const handleChartClick = (chartType: ChartType, elements: ChartElements) => {
-    onInsertChart(elements);
+    onInsertElements(elements);
     trackEvent("magic", "chart", chartType);
     setAppState({
       currentChartType: chartType,
@@ -105,7 +106,7 @@ export const PasteChartDialog = ({
 
   return (
     <Dialog
-      small
+      size="small"
       onCloseRequest={handleClose}
       title={t("labels.pasteCharts")}
       className={"PasteChartDialog"}
diff --git a/src/components/ProjectName.tsx b/src/components/ProjectName.tsx
index db2b70027..69ff33527 100644
--- a/src/components/ProjectName.tsx
+++ b/src/components/ProjectName.tsx
@@ -5,12 +5,14 @@ import { focusNearestParent } from "../utils";
 
 import "./ProjectName.scss";
 import { useExcalidrawContainer } from "./App";
+import { KEYS } from "../keys";
 
 type Props = {
   value: string;
   onChange: (value: string) => void;
   label: string;
   isNameEditable: boolean;
+  ignoreFocus?: boolean;
 };
 
 export const ProjectName = (props: Props) => {
@@ -18,7 +20,9 @@ export const ProjectName = (props: Props) => {
   const [fileName, setFileName] = useState<string>(props.value);
 
   const handleBlur = (event: any) => {
-    focusNearestParent(event.target);
+    if (!props.ignoreFocus) {
+      focusNearestParent(event.target);
+    }
     const value = event.target.value;
     if (value !== props.value) {
       props.onChange(value);
@@ -26,7 +30,7 @@ export const ProjectName = (props: Props) => {
   };
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
-    if (event.key === "Enter") {
+    if (event.key === KEYS.ENTER) {
       event.preventDefault();
       if (event.nativeEvent.isComposing || event.keyCode === 229) {
         return;
diff --git a/src/components/PublishLibrary.tsx b/src/components/PublishLibrary.tsx
index b4233222d..ef7453e7c 100644
--- a/src/components/PublishLibrary.tsx
+++ b/src/components/PublishLibrary.tsx
@@ -3,8 +3,9 @@ import OpenColor from "open-color";
 
 import { Dialog } from "./Dialog";
 import { t } from "../i18n";
+import Trans from "./Trans";
 
-import { AppState, LibraryItems, LibraryItem } from "../types";
+import { LibraryItems, LibraryItem, UIAppState } from "../types";
 import { exportToCanvas, exportToSvg } from "../packages/utils";
 import {
   EXPORT_DATA_TYPES,
@@ -135,7 +136,7 @@ const SingleLibraryItem = ({
   onRemove,
 }: {
   libItem: LibraryItem;
-  appState: AppState;
+  appState: UIAppState;
   index: number;
   onChange: (val: string, index: number) => void;
   onRemove: (id: string) => void;
@@ -231,7 +232,7 @@ const PublishLibrary = ({
 }: {
   onClose: () => void;
   libraryItems: LibraryItems;
-  appState: AppState;
+  appState: UIAppState;
   onSuccess: (data: {
     url: string;
     authorName: string;
@@ -402,26 +403,32 @@ const PublishLibrary = ({
       {shouldRenderForm ? (
         <form onSubmit={onSubmit}>
           <div className="publish-library-note">
-            {t("publishDialog.noteDescription.pre")}
-            <a
-              href="https://libraries.excalidraw.com"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {t("publishDialog.noteDescription.link")}
-            </a>{" "}
-            {t("publishDialog.noteDescription.post")}
+            <Trans
+              i18nKey="publishDialog.noteDescription"
+              link={(el) => (
+                <a
+                  href="https://libraries.excalidraw.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {el}
+                </a>
+              )}
+            />
           </div>
           <span className="publish-library-note">
-            {t("publishDialog.noteGuidelines.pre")}
-            <a
-              href="https://github.com/excalidraw/excalidraw-libraries#guidelines"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {t("publishDialog.noteGuidelines.link")}
-            </a>
-            {t("publishDialog.noteGuidelines.post")}
+            <Trans
+              i18nKey="publishDialog.noteGuidelines"
+              link={(el) => (
+                <a
+                  href="https://github.com/excalidraw/excalidraw-libraries#guidelines"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {el}
+                </a>
+              )}
+            />
           </span>
 
           <div className="publish-library-note">
@@ -515,15 +522,18 @@ const PublishLibrary = ({
               />
             </label>
             <span className="publish-library-note">
-              {t("publishDialog.noteLicense.pre")}
-              <a
-                href="https://github.com/excalidraw/excalidraw-libraries/blob/main/LICENSE"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {t("publishDialog.noteLicense.link")}
-              </a>
-              {t("publishDialog.noteLicense.post")}
+              <Trans
+                i18nKey="publishDialog.noteLicense"
+                link={(el) => (
+                  <a
+                    href="https://github.com/excalidraw/excalidraw-libraries/blob/main/LICENSE"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {el}
+                  </a>
+                )}
+              />
             </span>
           </div>
           <div className="publish-library__buttons">
diff --git a/src/components/RadioGroup.scss b/src/components/RadioGroup.scss
new file mode 100644
index 000000000..860648269
--- /dev/null
+++ b/src/components/RadioGroup.scss
@@ -0,0 +1,100 @@
+@import "../css/variables.module";
+
+.excalidraw {
+  --RadioGroup-background: #ffffff;
+  --RadioGroup-border: var(--color-gray-30);
+
+  --RadioGroup-choice-color-off: var(--color-primary);
+  --RadioGroup-choice-color-off-hover: var(--color-primary-darkest);
+  --RadioGroup-choice-background-off: white;
+  --RadioGroup-choice-background-off-active: var(--color-gray-20);
+
+  --RadioGroup-choice-color-on: white;
+  --RadioGroup-choice-background-on: var(--color-primary);
+  --RadioGroup-choice-background-on-hover: var(--color-primary-darker);
+  --RadioGroup-choice-background-on-active: var(--color-primary-darkest);
+
+  &.theme--dark {
+    --RadioGroup-background: var(--color-gray-85);
+    --RadioGroup-border: var(--color-gray-70);
+
+    --RadioGroup-choice-background-off: var(--color-gray-85);
+    --RadioGroup-choice-background-off-active: var(--color-gray-70);
+    --RadioGroup-choice-color-on: var(--color-gray-85);
+  }
+
+  .RadioGroup {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+
+    padding: 3px;
+    border-radius: 10px;
+
+    background: var(--RadioGroup-background);
+    border: 1px solid var(--RadioGroup-border);
+
+    &__choice {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 24px;
+
+      color: var(--RadioGroup-choice-color-off);
+      background: var(--RadioGroup-choice-background-off);
+
+      border-radius: 8px;
+
+      font-family: "Assistant";
+      font-style: normal;
+      font-weight: 600;
+      font-size: 0.75rem;
+      line-height: 100%;
+      user-select: none;
+      letter-spacing: 0.4px;
+
+      transition: all 75ms ease-out;
+
+      &:hover {
+        color: var(--RadioGroup-choice-color-off-hover);
+      }
+
+      &:active {
+        background: var(--RadioGroup-choice-background-off-active);
+      }
+
+      &.active {
+        color: var(--RadioGroup-choice-color-on);
+        background: var(--RadioGroup-choice-background-on);
+
+        &:hover {
+          background: var(--RadioGroup-choice-background-on-hover);
+        }
+
+        &:active {
+          background: var(--RadioGroup-choice-background-on-active);
+        }
+      }
+
+      & input {
+        z-index: 1;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+
+        border-radius: 8px;
+
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+
+        cursor: pointer;
+      }
+    }
+  }
+}
diff --git a/src/components/RadioGroup.tsx b/src/components/RadioGroup.tsx
new file mode 100644
index 000000000..40c6551f1
--- /dev/null
+++ b/src/components/RadioGroup.tsx
@@ -0,0 +1,42 @@
+import clsx from "clsx";
+import "./RadioGroup.scss";
+
+export type RadioGroupChoice<T> = {
+  value: T;
+  label: string;
+};
+
+export type RadioGroupProps<T> = {
+  choices: RadioGroupChoice<T>[];
+  value: T;
+  onChange: (value: T) => void;
+  name: string;
+};
+
+export const RadioGroup = function <T>({
+  onChange,
+  value,
+  choices,
+  name,
+}: RadioGroupProps<T>) {
+  return (
+    <div className="RadioGroup">
+      {choices.map((choice) => (
+        <div
+          className={clsx("RadioGroup__choice", {
+            active: choice.value === value,
+          })}
+          key={choice.label}
+        >
+          <input
+            name={name}
+            type="radio"
+            checked={choice.value === value}
+            onChange={() => onChange(choice.value)}
+          />
+          {choice.label}
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/src/components/Section.tsx b/src/components/Section.tsx
index 49f26d390..8cd0aaab5 100644
--- a/src/components/Section.tsx
+++ b/src/components/Section.tsx
@@ -3,7 +3,7 @@ import { t } from "../i18n";
 import { useExcalidrawContainer } from "./App";
 
 export const Section: React.FC<{
-  heading: string;
+  heading: "canvasActions" | "selectedShapeActions" | "shapes";
   children?: React.ReactNode | ((heading: React.ReactNode) => React.ReactNode);
   className?: string;
 }> = ({ heading, children, ...props }) => {
diff --git a/src/components/ShareableLinkDialog.scss b/src/components/ShareableLinkDialog.scss
new file mode 100644
index 000000000..595acf7dd
--- /dev/null
+++ b/src/components/ShareableLinkDialog.scss
@@ -0,0 +1,91 @@
+@import "../css/variables.module";
+
+.excalidraw {
+  .ShareableLinkDialog {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+
+    color: var(--text-primary-color);
+
+    ::selection {
+      background: var(--color-primary-light-darker);
+    }
+
+    h3 {
+      font-family: "Assistant";
+      font-weight: 700;
+      font-size: 1.313rem;
+      line-height: 130%;
+
+      margin: 0;
+    }
+
+    &__popover {
+      @keyframes RoomDialog__popover__scaleIn {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+
+      box-sizing: border-box;
+      z-index: 100;
+
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: flex-start;
+      padding: 0.125rem 0.5rem;
+      gap: 0.125rem;
+
+      height: 1.125rem;
+
+      border: none;
+      border-radius: 0.6875rem;
+
+      font-family: "Assistant";
+      font-style: normal;
+      font-weight: 600;
+      font-size: 0.75rem;
+      line-height: 110%;
+
+      background: var(--color-success-lighter);
+      color: var(--color-success);
+
+      & > svg {
+        width: 0.875rem;
+        height: 0.875rem;
+      }
+
+      transform-origin: var(--radix-popover-content-transform-origin);
+      animation: RoomDialog__popover__scaleIn 150ms ease-out;
+    }
+
+    &__linkRow {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-end;
+      gap: 0.75rem;
+    }
+
+    &__description {
+      border-top: 1px solid var(--color-gray-20);
+
+      padding: 0.5rem 0.5rem 0;
+      font-weight: 400;
+      font-size: 0.75rem;
+      line-height: 150%;
+
+      & p {
+        margin: 0;
+      }
+
+      & p + p {
+        margin-top: 1em;
+      }
+    }
+  }
+}
diff --git a/src/components/ShareableLinkDialog.tsx b/src/components/ShareableLinkDialog.tsx
new file mode 100644
index 000000000..7a53a4a82
--- /dev/null
+++ b/src/components/ShareableLinkDialog.tsx
@@ -0,0 +1,91 @@
+import { useRef, useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
+
+import { copyTextToSystemClipboard } from "../clipboard";
+import { useI18n } from "../i18n";
+
+import { Dialog } from "./Dialog";
+import { TextField } from "./TextField";
+import { FilledButton } from "./FilledButton";
+import { copyIcon, tablerCheckIcon } from "./icons";
+
+import "./ShareableLinkDialog.scss";
+
+export type ShareableLinkDialogProps = {
+  link: string;
+
+  onCloseRequest: () => void;
+  setErrorMessage: (error: string) => void;
+};
+
+export const ShareableLinkDialog = ({
+  link,
+  onCloseRequest,
+  setErrorMessage,
+}: ShareableLinkDialogProps) => {
+  const { t } = useI18n();
+  const [justCopied, setJustCopied] = useState(false);
+  const timerRef = useRef<number>(0);
+  const ref = useRef<HTMLInputElement>(null);
+
+  const copyRoomLink = async () => {
+    try {
+      await copyTextToSystemClipboard(link);
+
+      setJustCopied(true);
+
+      if (timerRef.current) {
+        window.clearTimeout(timerRef.current);
+      }
+
+      timerRef.current = window.setTimeout(() => {
+        setJustCopied(false);
+      }, 3000);
+    } catch (error: any) {
+      setErrorMessage(error.message);
+    }
+
+    ref.current?.select();
+  };
+
+  return (
+    <Dialog onCloseRequest={onCloseRequest} title={false} size="small">
+      <div className="ShareableLinkDialog">
+        <h3>Shareable link</h3>
+        <div className="ShareableLinkDialog__linkRow">
+          <TextField
+            ref={ref}
+            label="Link"
+            readonly
+            fullWidth
+            value={link}
+            selectOnRender
+          />
+          <Popover.Root open={justCopied}>
+            <Popover.Trigger asChild>
+              <FilledButton
+                size="large"
+                label="Copy link"
+                startIcon={copyIcon}
+                onClick={copyRoomLink}
+              />
+            </Popover.Trigger>
+            <Popover.Content
+              onOpenAutoFocus={(event) => event.preventDefault()}
+              onCloseAutoFocus={(event) => event.preventDefault()}
+              className="ShareableLinkDialog__popover"
+              side="top"
+              align="end"
+              sideOffset={5.5}
+            >
+              {tablerCheckIcon} copied
+            </Popover.Content>
+          </Popover.Root>
+        </div>
+        <div className="ShareableLinkDialog__description">
+          🔒 {t("alerts.uploadedSecurly")}
+        </div>
+      </div>
+    </Dialog>
+  );
+};
diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss
index c14509e38..200e94ef4 100644
--- a/src/components/Sidebar/Sidebar.scss
+++ b/src/components/Sidebar/Sidebar.scss
@@ -2,67 +2,26 @@
 @import "../../css/variables.module";
 
 .excalidraw {
-  .Sidebar {
-    &__close-btn,
-    &__pin-btn,
-    &__dropdown-btn {
-      @include outlineButtonStyles;
-      width: var(--lg-button-size);
-      height: var(--lg-button-size);
-      padding: 0;
-
-      svg {
-        width: var(--lg-icon-size);
-        height: var(--lg-icon-size);
-      }
-    }
-
-    &__pin-btn {
-      &--pinned {
-        background-color: var(--color-primary);
-        border-color: var(--color-primary);
-
-        svg {
-          color: #fff;
-        }
-
-        &:hover,
-        &:active {
-          background-color: var(--color-primary-darker);
-        }
-      }
-    }
-  }
-
-  &.theme--dark {
-    .Sidebar {
-      &__pin-btn {
-        &--pinned {
-          svg {
-            color: var(--color-gray-90);
-          }
-        }
-      }
-    }
-  }
-
-  .layer-ui__sidebar {
+  .sidebar {
+    display: flex;
+    flex-direction: column;
     position: absolute;
     top: 0;
     bottom: 0;
     right: 0;
     z-index: 5;
     margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+
+    background-color: var(--sidebar-bg-color);
+    box-shadow: var(--sidebar-shadow);
 
     :root[dir="rtl"] & {
       left: 0;
       right: auto;
     }
 
-    background-color: var(--sidebar-bg-color);
-
-    box-shadow: var(--sidebar-shadow);
-
     &--docked {
       box-shadow: none;
     }
@@ -77,52 +36,139 @@
       border-right: 1px solid var(--sidebar-border-color);
       border-left: 0;
     }
-
-    padding: 0;
-    box-sizing: border-box;
-
-    .Island {
-      box-shadow: none;
-    }
-
-    .ToolIcon__icon {
-      border-radius: var(--border-radius-md);
-    }
-
-    .ToolIcon__icon__close {
-      .Modal__close {
-        width: calc(var(--space-factor) * 7);
-        height: calc(var(--space-factor) * 7);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: var(--color-text);
-      }
-    }
-
-    .Island {
-      --padding: 0;
-      background-color: var(--island-bg-color);
-      border-radius: var(--border-radius-lg);
-      padding: calc(var(--padding) * var(--space-factor));
-      position: relative;
-      transition: box-shadow 0.5s ease-in-out;
-    }
   }
 
-  .layer-ui__sidebar__header {
+  // ---------------------------- sidebar header ------------------------------
+
+  .sidebar__header {
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    padding: 1rem;
-    border-bottom: 1px solid var(--sidebar-border-color);
+    padding: 1rem 0.75rem;
+    position: relative;
+
+    &::after {
+      content: "";
+      width: calc(100% - 1.5rem);
+      height: 1px;
+      background: var(--sidebar-border-color);
+      position: absolute;
+      bottom: -1px;
+    }
   }
 
-  .layer-ui__sidebar__header__buttons {
+  .sidebar__header__buttons {
+    gap: 0;
     display: flex;
     align-items: center;
-    gap: 0.625rem;
+    margin-left: auto;
+
+    button {
+      @include outlineButtonStyles;
+      --button-bg: transparent;
+      border: 0 !important;
+
+      width: var(--lg-button-size);
+      height: var(--lg-button-size);
+      padding: 0;
+
+      svg {
+        width: var(--lg-icon-size);
+        height: var(--lg-icon-size);
+      }
+
+      &:hover {
+        background: var(--button-hover-bg, var(--island-bg-color));
+      }
+    }
+
+    .sidebar__dock.selected {
+      svg {
+        stroke: var(--color-primary);
+        fill: var(--color-primary);
+      }
+    }
+  }
+
+  // ---------------------------- sidebar tabs ------------------------------
+
+  .sidebar-tabs-root {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    padding: 1rem 0;
+
+    [role="tabpanel"] {
+      flex: 1;
+      outline: none;
+
+      flex: 1 1 auto;
+      display: flex;
+      flex-direction: column;
+      outline: none;
+    }
+
+    [role="tabpanel"][data-state="inactive"] {
+      display: none !important;
+    }
+
+    [role="tablist"] {
+      display: grid;
+      gap: 1rem;
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    }
+  }
+
+  .sidebar-tabs-root > .sidebar__header {
+    padding-top: 0;
+    padding-bottom: 1rem;
+  }
+
+  .sidebar-tab-trigger {
+    --button-width: auto;
+    --button-bg: transparent;
+    --button-hover-bg: transparent;
+    --button-active-bg: var(--color-primary);
+    --button-hover-color: var(--color-primary);
+    --button-hover-border: var(--color-primary);
+
+    &[data-state="active"] {
+      --button-bg: var(--color-primary);
+      --button-hover-bg: var(--color-primary-darker);
+      --button-hover-color: var(--color-icon-white);
+      --button-border: var(--color-primary);
+      color: var(--color-icon-white);
+    }
+  }
+
+  // ---------------------------- default sidebar ------------------------------
+
+  .default-sidebar {
+    display: flex;
+    flex-direction: column;
+
+    .sidebar-triggers {
+      $padding: 2px;
+      $border: 1px;
+      display: flex;
+      gap: 0;
+      padding: $padding;
+      // offset by padding + border to vertically center the list with sibling
+      // buttons (both from top and bototm, due to flex layout)
+      margin-top: -#{$padding + $border};
+      margin-bottom: -#{$padding + $border};
+      border: $border solid var(--sidebar-border-color);
+      background: var(--default-bg-color);
+      border-radius: 0.625rem;
+
+      .sidebar-tab-trigger {
+        height: var(--lg-button-size);
+        width: var(--lg-button-size);
+
+        border: none;
+      }
+    }
   }
 }
diff --git a/src/components/Sidebar/Sidebar.test.tsx b/src/components/Sidebar/Sidebar.test.tsx
index b79e67f7c..742efc0c9 100644
--- a/src/components/Sidebar/Sidebar.test.tsx
+++ b/src/components/Sidebar/Sidebar.test.tsx
@@ -1,8 +1,9 @@
 import React from "react";
+import { DEFAULT_SIDEBAR } from "../../constants";
 import { Excalidraw, Sidebar } from "../../packages/excalidraw/index";
 import {
-  act,
   fireEvent,
+  GlobalTestState,
   queryAllByTestId,
   queryByTestId,
   render,
@@ -10,346 +11,321 @@ import {
   withExcalidrawDimensions,
 } from "../../tests/test-utils";
 
+export const assertSidebarDockButton = async <T extends boolean>(
+  hasDockButton: T,
+): Promise<
+  T extends false
+    ? { dockButton: null; sidebar: HTMLElement }
+    : { dockButton: HTMLElement; sidebar: HTMLElement }
+> => {
+  const sidebar =
+    GlobalTestState.renderResult.container.querySelector<HTMLElement>(
+      ".sidebar",
+    );
+  expect(sidebar).not.toBe(null);
+  const dockButton = queryByTestId(sidebar!, "sidebar-dock");
+  if (hasDockButton) {
+    expect(dockButton).not.toBe(null);
+    return { dockButton: dockButton!, sidebar: sidebar! } as any;
+  }
+  expect(dockButton).toBe(null);
+  return { dockButton: null, sidebar: sidebar! } as any;
+};
+
+export const assertExcalidrawWithSidebar = async (
+  sidebar: React.ReactNode,
+  name: string,
+  test: () => void,
+) => {
+  await render(
+    <Excalidraw initialData={{ appState: { openSidebar: { name } } }}>
+      {sidebar}
+    </Excalidraw>,
+  );
+  await withExcalidrawDimensions({ width: 1920, height: 1080 }, test);
+};
+
 describe("Sidebar", () => {
-  it("should render custom sidebar", async () => {
-    const { container } = await render(
-      <Excalidraw
-        initialData={{ appState: { openSidebar: "customSidebar" } }}
-        renderSidebar={() => (
-          <Sidebar>
+  describe("General behavior", () => {
+    it("should render custom sidebar", async () => {
+      const { container } = await render(
+        <Excalidraw
+          initialData={{ appState: { openSidebar: { name: "customSidebar" } } }}
+        >
+          <Sidebar name="customSidebar">
             <div id="test-sidebar-content">42</div>
           </Sidebar>
-        )}
-      />,
-    );
+        </Excalidraw>,
+      );
 
-    const node = container.querySelector("#test-sidebar-content");
-    expect(node).not.toBe(null);
+      const node = container.querySelector("#test-sidebar-content");
+      expect(node).not.toBe(null);
+    });
+
+    it("should render only one sidebar and prefer the custom one", async () => {
+      const { container } = await render(
+        <Excalidraw
+          initialData={{ appState: { openSidebar: { name: "customSidebar" } } }}
+        >
+          <Sidebar name="customSidebar">
+            <div id="test-sidebar-content">42</div>
+          </Sidebar>
+        </Excalidraw>,
+      );
+
+      await waitFor(() => {
+        // make sure the custom sidebar is rendered
+        const node = container.querySelector("#test-sidebar-content");
+        expect(node).not.toBe(null);
+
+        // make sure only one sidebar is rendered
+        const sidebars = container.querySelectorAll(".sidebar");
+        expect(sidebars.length).toBe(1);
+      });
+    });
+
+    it("should toggle sidebar using props.toggleMenu()", async () => {
+      const { container } = await render(
+        <Excalidraw>
+          <Sidebar name="customSidebar">
+            <div id="test-sidebar-content">42</div>
+          </Sidebar>
+        </Excalidraw>,
+      );
+
+      // sidebar isn't rendered initially
+      // -------------------------------------------------------------------------
+      await waitFor(() => {
+        const node = container.querySelector("#test-sidebar-content");
+        expect(node).toBe(null);
+      });
+
+      // toggle sidebar on
+      // -------------------------------------------------------------------------
+      expect(window.h.app.toggleSidebar({ name: "customSidebar" })).toBe(true);
+
+      await waitFor(() => {
+        const node = container.querySelector("#test-sidebar-content");
+        expect(node).not.toBe(null);
+      });
+
+      // toggle sidebar off
+      // -------------------------------------------------------------------------
+      expect(window.h.app.toggleSidebar({ name: "customSidebar" })).toBe(false);
+
+      await waitFor(() => {
+        const node = container.querySelector("#test-sidebar-content");
+        expect(node).toBe(null);
+      });
+
+      // force-toggle sidebar off (=> still hidden)
+      // -------------------------------------------------------------------------
+      expect(
+        window.h.app.toggleSidebar({ name: "customSidebar", force: false }),
+      ).toBe(false);
+
+      await waitFor(() => {
+        const node = container.querySelector("#test-sidebar-content");
+        expect(node).toBe(null);
+      });
+
+      // force-toggle sidebar on
+      // -------------------------------------------------------------------------
+      expect(
+        window.h.app.toggleSidebar({ name: "customSidebar", force: true }),
+      ).toBe(true);
+      expect(
+        window.h.app.toggleSidebar({ name: "customSidebar", force: true }),
+      ).toBe(true);
+
+      await waitFor(() => {
+        const node = container.querySelector("#test-sidebar-content");
+        expect(node).not.toBe(null);
+      });
+
+      // toggle library (= hide custom sidebar)
+      // -------------------------------------------------------------------------
+      expect(window.h.app.toggleSidebar({ name: DEFAULT_SIDEBAR.name })).toBe(
+        true,
+      );
+
+      await waitFor(() => {
+        const node = container.querySelector("#test-sidebar-content");
+        expect(node).toBe(null);
+
+        // make sure only one sidebar is rendered
+        const sidebars = container.querySelectorAll(".sidebar");
+        expect(sidebars.length).toBe(1);
+      });
+    });
   });
 
-  it("should render custom sidebar header", async () => {
-    const { container } = await render(
-      <Excalidraw
-        initialData={{ appState: { openSidebar: "customSidebar" } }}
-        renderSidebar={() => (
-          <Sidebar>
+  describe("<Sidebar.Header/>", () => {
+    it("should render custom sidebar header", async () => {
+      const { container } = await render(
+        <Excalidraw
+          initialData={{ appState: { openSidebar: { name: "customSidebar" } } }}
+        >
+          <Sidebar name="customSidebar">
             <Sidebar.Header>
               <div id="test-sidebar-header-content">42</div>
             </Sidebar.Header>
           </Sidebar>
-        )}
-      />,
-    );
+        </Excalidraw>,
+      );
 
-    const node = container.querySelector("#test-sidebar-header-content");
-    expect(node).not.toBe(null);
-    // make sure we don't render the default fallback header,
-    // just the custom one
-    expect(queryAllByTestId(container, "sidebar-header").length).toBe(1);
-  });
-
-  it("should render only one sidebar and prefer the custom one", async () => {
-    const { container } = await render(
-      <Excalidraw
-        initialData={{ appState: { openSidebar: "customSidebar" } }}
-        renderSidebar={() => (
-          <Sidebar>
-            <div id="test-sidebar-content">42</div>
-          </Sidebar>
-        )}
-      />,
-    );
-
-    await waitFor(() => {
-      // make sure the custom sidebar is rendered
-      const node = container.querySelector("#test-sidebar-content");
+      const node = container.querySelector("#test-sidebar-header-content");
       expect(node).not.toBe(null);
-
-      // make sure only one sidebar is rendered
-      const sidebars = container.querySelectorAll(".layer-ui__sidebar");
-      expect(sidebars.length).toBe(1);
+      // make sure we don't render the default fallback header,
+      // just the custom one
+      expect(queryAllByTestId(container, "sidebar-header").length).toBe(1);
     });
-  });
 
-  it("should always render custom sidebar with close button & close on click", async () => {
-    const onClose = jest.fn();
-    const CustomExcalidraw = () => {
-      return (
-        <Excalidraw
-          initialData={{ appState: { openSidebar: "customSidebar" } }}
-          renderSidebar={() => (
-            <Sidebar className="test-sidebar" onClose={onClose}>
+    it("should not render <Sidebar.Header> for custom sidebars by default", async () => {
+      const CustomExcalidraw = () => {
+        return (
+          <Excalidraw
+            initialData={{
+              appState: { openSidebar: { name: "customSidebar" } },
+            }}
+          >
+            <Sidebar name="customSidebar" className="test-sidebar">
               hello
             </Sidebar>
-          )}
-        />
-      );
-    };
+          </Excalidraw>
+        );
+      };
 
-    const { container } = await render(<CustomExcalidraw />);
+      const { container } = await render(<CustomExcalidraw />);
 
-    const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
-    expect(sidebar).not.toBe(null);
-    const closeButton = queryByTestId(sidebar!, "sidebar-close")!;
-    expect(closeButton).not.toBe(null);
-
-    fireEvent.click(closeButton);
-    await waitFor(() => {
-      expect(container.querySelector<HTMLElement>(".test-sidebar")).toBe(null);
-      expect(onClose).toHaveBeenCalled();
-    });
-  });
-
-  it("should render custom sidebar with dock (irrespective of onDock prop)", async () => {
-    const CustomExcalidraw = () => {
-      return (
-        <Excalidraw
-          initialData={{ appState: { openSidebar: "customSidebar" } }}
-          renderSidebar={() => (
-            <Sidebar className="test-sidebar">hello</Sidebar>
-          )}
-        />
-      );
-    };
-
-    const { container } = await render(<CustomExcalidraw />);
-
-    // should show dock button when the sidebar fits to be docked
-    // -------------------------------------------------------------------------
-
-    await withExcalidrawDimensions({ width: 1920, height: 1080 }, () => {
       const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
       expect(sidebar).not.toBe(null);
-      const closeButton = queryByTestId(sidebar!, "sidebar-dock");
-      expect(closeButton).not.toBe(null);
-    });
-
-    // should not show dock button when the sidebar does not fit to be docked
-    // -------------------------------------------------------------------------
-
-    await withExcalidrawDimensions({ width: 400, height: 1080 }, () => {
-      const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
-      expect(sidebar).not.toBe(null);
-      const closeButton = queryByTestId(sidebar!, "sidebar-dock");
+      const closeButton = queryByTestId(sidebar!, "sidebar-close");
       expect(closeButton).toBe(null);
     });
-  });
 
-  it("should support controlled docking", async () => {
-    let _setDockable: (dockable: boolean) => void = null!;
-
-    const CustomExcalidraw = () => {
-      const [dockable, setDockable] = React.useState(false);
-      _setDockable = setDockable;
-      return (
-        <Excalidraw
-          initialData={{ appState: { openSidebar: "customSidebar" } }}
-          renderSidebar={() => (
+    it("<Sidebar.Header> should render close button", async () => {
+      const onStateChange = jest.fn();
+      const CustomExcalidraw = () => {
+        return (
+          <Excalidraw
+            initialData={{
+              appState: { openSidebar: { name: "customSidebar" } },
+            }}
+          >
             <Sidebar
+              name="customSidebar"
               className="test-sidebar"
-              docked={false}
-              dockable={dockable}
+              onStateChange={onStateChange}
             >
-              hello
+              <Sidebar.Header />
             </Sidebar>
-          )}
-        />
-      );
-    };
+          </Excalidraw>
+        );
+      };
 
-    const { container } = await render(<CustomExcalidraw />);
+      const { container } = await render(<CustomExcalidraw />);
 
-    await withExcalidrawDimensions({ width: 1920, height: 1080 }, async () => {
-      // should not show dock button when `dockable` is `false`
-      // -------------------------------------------------------------------------
+      // initial open
+      expect(onStateChange).toHaveBeenCalledWith({ name: "customSidebar" });
 
-      act(() => {
-        _setDockable(false);
-      });
+      const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
+      expect(sidebar).not.toBe(null);
+      const closeButton = queryByTestId(sidebar!, "sidebar-close")!;
+      expect(closeButton).not.toBe(null);
 
+      fireEvent.click(closeButton);
       await waitFor(() => {
-        const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
-        expect(sidebar).not.toBe(null);
-        const closeButton = queryByTestId(sidebar!, "sidebar-dock");
-        expect(closeButton).toBe(null);
-      });
-
-      // should show dock button when `dockable` is `true`, even if `docked`
-      // prop is set
-      // -------------------------------------------------------------------------
-
-      act(() => {
-        _setDockable(true);
-      });
-
-      await waitFor(() => {
-        const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
-        expect(sidebar).not.toBe(null);
-        const closeButton = queryByTestId(sidebar!, "sidebar-dock");
-        expect(closeButton).not.toBe(null);
+        expect(container.querySelector<HTMLElement>(".test-sidebar")).toBe(
+          null,
+        );
+        expect(onStateChange).toHaveBeenCalledWith(null);
       });
     });
   });
 
-  it("should support controlled docking", async () => {
-    let _setDocked: (docked?: boolean) => void = null!;
+  describe("Docking behavior", () => {
+    it("shouldn't be user-dockable if `onDock` not supplied", async () => {
+      await assertExcalidrawWithSidebar(
+        <Sidebar name="customSidebar">
+          <Sidebar.Header />
+        </Sidebar>,
+        "customSidebar",
+        async () => {
+          await assertSidebarDockButton(false);
+        },
+      );
+    });
 
-    const CustomExcalidraw = () => {
-      const [docked, setDocked] = React.useState<boolean | undefined>();
-      _setDocked = setDocked;
-      return (
+    it("shouldn't be user-dockable if `onDock` not supplied & `docked={true}`", async () => {
+      await assertExcalidrawWithSidebar(
+        <Sidebar name="customSidebar" docked={true}>
+          <Sidebar.Header />
+        </Sidebar>,
+        "customSidebar",
+        async () => {
+          await assertSidebarDockButton(false);
+        },
+      );
+    });
+
+    it("shouldn't be user-dockable if `onDock` not supplied & docked={false}`", async () => {
+      await assertExcalidrawWithSidebar(
+        <Sidebar name="customSidebar" docked={false}>
+          <Sidebar.Header />
+        </Sidebar>,
+        "customSidebar",
+        async () => {
+          await assertSidebarDockButton(false);
+        },
+      );
+    });
+
+    it("should be user-dockable when both `onDock` and `docked` supplied", async () => {
+      await render(
         <Excalidraw
-          initialData={{ appState: { openSidebar: "customSidebar" } }}
-          renderSidebar={() => (
-            <Sidebar className="test-sidebar" docked={docked}>
-              hello
-            </Sidebar>
-          )}
-        />
-      );
-    };
-
-    const { container } = await render(<CustomExcalidraw />);
-
-    const { h } = window;
-
-    await withExcalidrawDimensions({ width: 1920, height: 1080 }, async () => {
-      const dockButton = await waitFor(() => {
-        const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
-        expect(sidebar).not.toBe(null);
-        const dockBotton = queryByTestId(sidebar!, "sidebar-dock");
-        expect(dockBotton).not.toBe(null);
-        return dockBotton!;
-      });
-
-      const dockButtonInput = dockButton.querySelector("input")!;
-
-      // should not show dock button when `dockable` is `false`
-      // -------------------------------------------------------------------------
-
-      expect(h.state.isSidebarDocked).toBe(false);
-
-      fireEvent.click(dockButtonInput);
-      await waitFor(() => {
-        expect(h.state.isSidebarDocked).toBe(true);
-        expect(dockButtonInput).toBeChecked();
-      });
-
-      fireEvent.click(dockButtonInput);
-      await waitFor(() => {
-        expect(h.state.isSidebarDocked).toBe(false);
-        expect(dockButtonInput).not.toBeChecked();
-      });
-
-      // shouldn't update `appState.isSidebarDocked` when the sidebar
-      // is controlled (`docked` prop is set), as host apps should handle
-      // the state themselves
-      // -------------------------------------------------------------------------
-
-      act(() => {
-        _setDocked(true);
-      });
-
-      await waitFor(() => {
-        expect(dockButtonInput).toBeChecked();
-        expect(h.state.isSidebarDocked).toBe(false);
-        expect(dockButtonInput).toBeChecked();
-      });
-
-      fireEvent.click(dockButtonInput);
-      await waitFor(() => {
-        expect(h.state.isSidebarDocked).toBe(false);
-        expect(dockButtonInput).toBeChecked();
-      });
-
-      // the `appState.isSidebarDocked` should remain untouched when
-      // `props.docked` is set to `false`, and user toggles
-      // -------------------------------------------------------------------------
-
-      act(() => {
-        _setDocked(false);
-        h.setState({ isSidebarDocked: true });
-      });
-
-      await waitFor(() => {
-        expect(h.state.isSidebarDocked).toBe(true);
-        expect(dockButtonInput).not.toBeChecked();
-      });
-
-      fireEvent.click(dockButtonInput);
-      await waitFor(() => {
-        expect(dockButtonInput).not.toBeChecked();
-        expect(h.state.isSidebarDocked).toBe(true);
-      });
-    });
-  });
-
-  it("should toggle sidebar using props.toggleMenu()", async () => {
-    const { container } = await render(
-      <Excalidraw
-        renderSidebar={() => (
-          <Sidebar>
-            <div id="test-sidebar-content">42</div>
+          initialData={{ appState: { openSidebar: { name: "customSidebar" } } }}
+        >
+          <Sidebar
+            name="customSidebar"
+            className="test-sidebar"
+            onDock={() => {}}
+            docked
+          >
+            <Sidebar.Header />
           </Sidebar>
-        )}
-      />,
-    );
+        </Excalidraw>,
+      );
 
-    // sidebar isn't rendered initially
-    // -------------------------------------------------------------------------
-    await waitFor(() => {
-      const node = container.querySelector("#test-sidebar-content");
-      expect(node).toBe(null);
+      await withExcalidrawDimensions(
+        { width: 1920, height: 1080 },
+        async () => {
+          await assertSidebarDockButton(true);
+        },
+      );
     });
 
-    // toggle sidebar on
-    // -------------------------------------------------------------------------
-    expect(window.h.app.toggleMenu("customSidebar")).toBe(true);
+    it("shouldn't be user-dockable when only `onDock` supplied w/o `docked`", async () => {
+      await render(
+        <Excalidraw
+          initialData={{ appState: { openSidebar: { name: "customSidebar" } } }}
+        >
+          <Sidebar
+            name="customSidebar"
+            className="test-sidebar"
+            onDock={() => {}}
+          >
+            <Sidebar.Header />
+          </Sidebar>
+        </Excalidraw>,
+      );
 
-    await waitFor(() => {
-      const node = container.querySelector("#test-sidebar-content");
-      expect(node).not.toBe(null);
-    });
-
-    // toggle sidebar off
-    // -------------------------------------------------------------------------
-    expect(window.h.app.toggleMenu("customSidebar")).toBe(false);
-
-    await waitFor(() => {
-      const node = container.querySelector("#test-sidebar-content");
-      expect(node).toBe(null);
-    });
-
-    // force-toggle sidebar off (=> still hidden)
-    // -------------------------------------------------------------------------
-    expect(window.h.app.toggleMenu("customSidebar", false)).toBe(false);
-
-    await waitFor(() => {
-      const node = container.querySelector("#test-sidebar-content");
-      expect(node).toBe(null);
-    });
-
-    // force-toggle sidebar on
-    // -------------------------------------------------------------------------
-    expect(window.h.app.toggleMenu("customSidebar", true)).toBe(true);
-    expect(window.h.app.toggleMenu("customSidebar", true)).toBe(true);
-
-    await waitFor(() => {
-      const node = container.querySelector("#test-sidebar-content");
-      expect(node).not.toBe(null);
-    });
-
-    // toggle library (= hide custom sidebar)
-    // -------------------------------------------------------------------------
-    expect(window.h.app.toggleMenu("library")).toBe(true);
-
-    await waitFor(() => {
-      const node = container.querySelector("#test-sidebar-content");
-      expect(node).toBe(null);
-
-      // make sure only one sidebar is rendered
-      const sidebars = container.querySelectorAll(".layer-ui__sidebar");
-      expect(sidebars.length).toBe(1);
+      await withExcalidrawDimensions(
+        { width: 1920, height: 1080 },
+        async () => {
+          await assertSidebarDockButton(false);
+        },
+      );
     });
   });
 });
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 225b2e2fb..ee94beca5 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -1,151 +1,217 @@
-import {
+import React, {
   useEffect,
   useLayoutEffect,
   useRef,
   useState,
   forwardRef,
+  useImperativeHandle,
+  useCallback,
 } from "react";
 import { Island } from ".././Island";
-import { atom, useAtom } from "jotai";
+import { atom, useSetAtom } from "jotai";
 import { jotaiScope } from "../../jotai";
 import {
   SidebarPropsContext,
   SidebarProps,
   SidebarPropsContextValue,
 } from "./common";
-
-import { SidebarHeaderComponents } from "./SidebarHeader";
+import { SidebarHeader } from "./SidebarHeader";
+import clsx from "clsx";
+import { useDevice, useExcalidrawSetAppState } from "../App";
+import { updateObject } from "../../utils";
+import { KEYS } from "../../keys";
+import { EVENT } from "../../constants";
+import { SidebarTrigger } from "./SidebarTrigger";
+import { SidebarTabTriggers } from "./SidebarTabTriggers";
+import { SidebarTabTrigger } from "./SidebarTabTrigger";
+import { SidebarTabs } from "./SidebarTabs";
+import { SidebarTab } from "./SidebarTab";
+import { useUIAppState } from "../../context/ui-appState";
+import { useOutsideClick } from "../../hooks/useOutsideClick";
 
 import "./Sidebar.scss";
-import clsx from "clsx";
-import { useExcalidrawSetAppState } from "../App";
-import { updateObject } from "../../utils";
 
-/** using a counter instead of boolean to handle race conditions where
- * the host app may render (mount/unmount) multiple different sidebar */
-export const hostSidebarCountersAtom = atom({ rendered: 0, docked: 0 });
+/**
+ * Flags whether the currently rendered Sidebar is docked or not, for use
+ * in upstream components that need to act on this (e.g. LayerUI to shift the
+ * UI). We use an atom because of potential host app sidebars (for the default
+ * sidebar we could just read from appState.defaultSidebarDockedPreference).
+ *
+ * Since we can only render one Sidebar at a time, we can use a simple flag.
+ */
+export const isSidebarDockedAtom = atom(false);
 
-export const Sidebar = Object.assign(
-  forwardRef(
-    (
-      {
-        children,
-        onClose,
-        onDock,
-        docked,
-        /** Undocumented, may be removed later. Generally should either be
-         * `props.docked` or `appState.isSidebarDocked`. Currently serves to
-         *  prevent unwanted animation of the shadow if initially docked. */
-        //
-        // NOTE we'll want to remove this after we sort out how to subscribe to
-        // individual appState properties
-        initialDockedState = docked,
-        dockable = true,
-        className,
-        __isInternal,
-      }: SidebarProps<{
-        // NOTE sidebars we use internally inside the editor must have this flag set.
-        // It indicates that this sidebar should have lower precedence over host
-        // sidebars, if both are open.
-        /** @private internal */
-        __isInternal?: boolean;
-      }>,
-      ref: React.ForwardedRef<HTMLDivElement>,
-    ) => {
-      const [hostSidebarCounters, setHostSidebarCounters] = useAtom(
-        hostSidebarCountersAtom,
-        jotaiScope,
+export const SidebarInner = forwardRef(
+  (
+    {
+      name,
+      children,
+      onDock,
+      docked,
+      className,
+      ...rest
+    }: SidebarProps & Omit<React.RefAttributes<HTMLDivElement>, "onSelect">,
+    ref: React.ForwardedRef<HTMLDivElement>,
+  ) => {
+    if (process.env.NODE_ENV === "development" && onDock && docked == null) {
+      console.warn(
+        "Sidebar: `docked` must be set when `onDock` is supplied for the sidebar to be user-dockable. To hide this message, either pass `docked` or remove `onDock`",
       );
+    }
 
-      const setAppState = useExcalidrawSetAppState();
+    const setAppState = useExcalidrawSetAppState();
 
-      const [isDockedFallback, setIsDockedFallback] = useState(
-        docked ?? initialDockedState ?? false,
-      );
+    const setIsSidebarDockedAtom = useSetAtom(isSidebarDockedAtom, jotaiScope);
 
-      useLayoutEffect(() => {
-        if (docked === undefined) {
-          // ugly hack to get initial state out of AppState without subscribing
-          // to it as a whole (once we have granular subscriptions, we'll move
-          // to that)
-          //
-          // NOTE this means that is updated `state.isSidebarDocked` changes outside
-          // of this compoent, it won't be reflected here. Currently doesn't happen.
-          setAppState((state) => {
-            setIsDockedFallback(state.isSidebarDocked);
-            // bail from update
-            return null;
-          });
-        }
-      }, [setAppState, docked]);
-
-      useLayoutEffect(() => {
-        if (!__isInternal) {
-          setHostSidebarCounters((s) => ({
-            rendered: s.rendered + 1,
-            docked: isDockedFallback ? s.docked + 1 : s.docked,
-          }));
-          return () => {
-            setHostSidebarCounters((s) => ({
-              rendered: s.rendered - 1,
-              docked: isDockedFallback ? s.docked - 1 : s.docked,
-            }));
-          };
-        }
-      }, [__isInternal, setHostSidebarCounters, isDockedFallback]);
-
-      const onCloseRef = useRef(onClose);
-      onCloseRef.current = onClose;
-
-      useEffect(() => {
-        return () => {
-          onCloseRef.current?.();
-        };
-      }, []);
-
-      const headerPropsRef = useRef<SidebarPropsContextValue>({});
-      headerPropsRef.current.onClose = () => {
-        setAppState({ openSidebar: null });
+    useLayoutEffect(() => {
+      setIsSidebarDockedAtom(!!docked);
+      return () => {
+        setIsSidebarDockedAtom(false);
       };
-      headerPropsRef.current.onDock = (isDocked) => {
-        if (docked === undefined) {
-          setAppState({ isSidebarDocked: isDocked });
-          setIsDockedFallback(isDocked);
-        }
-        onDock?.(isDocked);
-      };
-      // renew the ref object if the following props change since we want to
-      // rerender. We can't pass down as component props manually because
-      // the <Sidebar.Header/> can be rendered upsream.
-      headerPropsRef.current = updateObject(headerPropsRef.current, {
-        docked: docked ?? isDockedFallback,
-        dockable,
-      });
+    }, [setIsSidebarDockedAtom, docked]);
 
-      if (hostSidebarCounters.rendered > 0 && __isInternal) {
-        return null;
+    const headerPropsRef = useRef<SidebarPropsContextValue>(
+      {} as SidebarPropsContextValue,
+    );
+    headerPropsRef.current.onCloseRequest = () => {
+      setAppState({ openSidebar: null });
+    };
+    headerPropsRef.current.onDock = (isDocked) => onDock?.(isDocked);
+    // renew the ref object if the following props change since we want to
+    // rerender. We can't pass down as component props manually because
+    // the <Sidebar.Header/> can be rendered upstream.
+    headerPropsRef.current = updateObject(headerPropsRef.current, {
+      docked,
+      // explicit prop to rerender on update
+      shouldRenderDockButton: !!onDock && docked != null,
+    });
+
+    const islandRef = useRef<HTMLDivElement>(null);
+
+    useImperativeHandle(ref, () => {
+      return islandRef.current!;
+    });
+
+    const device = useDevice();
+
+    const closeLibrary = useCallback(() => {
+      const isDialogOpen = !!document.querySelector(".Dialog");
+
+      // Prevent closing if any dialog is open
+      if (isDialogOpen) {
+        return;
       }
+      setAppState({ openSidebar: null });
+    }, [setAppState]);
 
-      return (
-        <Island
-          className={clsx(
-            "layer-ui__sidebar",
-            { "layer-ui__sidebar--docked": isDockedFallback },
-            className,
-          )}
-          ref={ref}
-        >
-          <SidebarPropsContext.Provider value={headerPropsRef.current}>
-            <SidebarHeaderComponents.Context>
-              <SidebarHeaderComponents.Component __isFallback />
-              {children}
-            </SidebarHeaderComponents.Context>
-          </SidebarPropsContext.Provider>
-        </Island>
-      );
-    },
-  ),
-  {
-    Header: SidebarHeaderComponents.Component,
+    useOutsideClick(
+      islandRef,
+      useCallback(
+        (event) => {
+          // If click on the library icon, do nothing so that LibraryButton
+          // can toggle library menu
+          if ((event.target as Element).closest(".sidebar-trigger")) {
+            return;
+          }
+          if (!docked || !device.canDeviceFitSidebar) {
+            closeLibrary();
+          }
+        },
+        [closeLibrary, docked, device.canDeviceFitSidebar],
+      ),
+    );
+
+    useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === KEYS.ESCAPE &&
+          (!docked || !device.canDeviceFitSidebar)
+        ) {
+          closeLibrary();
+        }
+      };
+      document.addEventListener(EVENT.KEYDOWN, handleKeyDown);
+      return () => {
+        document.removeEventListener(EVENT.KEYDOWN, handleKeyDown);
+      };
+    }, [closeLibrary, docked, device.canDeviceFitSidebar]);
+
+    return (
+      <Island
+        {...rest}
+        className={clsx("sidebar", { "sidebar--docked": docked }, className)}
+        ref={islandRef}
+      >
+        <SidebarPropsContext.Provider value={headerPropsRef.current}>
+          {children}
+        </SidebarPropsContext.Provider>
+      </Island>
+    );
   },
 );
+SidebarInner.displayName = "SidebarInner";
+
+export const Sidebar = Object.assign(
+  forwardRef((props: SidebarProps, ref: React.ForwardedRef<HTMLDivElement>) => {
+    const appState = useUIAppState();
+
+    const { onStateChange } = props;
+
+    const refPrevOpenSidebar = useRef(appState.openSidebar);
+    useEffect(() => {
+      if (
+        // closing sidebar
+        ((!appState.openSidebar &&
+          refPrevOpenSidebar?.current?.name === props.name) ||
+          // opening current sidebar
+          (appState.openSidebar?.name === props.name &&
+            refPrevOpenSidebar?.current?.name !== props.name) ||
+          // switching tabs or switching to a different sidebar
+          refPrevOpenSidebar.current?.name === props.name) &&
+        appState.openSidebar !== refPrevOpenSidebar.current
+      ) {
+        onStateChange?.(
+          appState.openSidebar?.name !== props.name
+            ? null
+            : appState.openSidebar,
+        );
+      }
+      refPrevOpenSidebar.current = appState.openSidebar;
+    }, [appState.openSidebar, onStateChange, props.name]);
+
+    const [mounted, setMounted] = useState(false);
+    useLayoutEffect(() => {
+      setMounted(true);
+      return () => setMounted(false);
+    }, []);
+
+    // We want to render in the next tick (hence `mounted` flag) so that it's
+    // guaranteed to happen after unmount of the previous sidebar (in case the
+    // previous sidebar is mounted after the next one). This is necessary to
+    // prevent flicker of subcomponents that support fallbacks
+    // (e.g. SidebarHeader). This is because we're using flags to determine
+    // whether prefer the fallback component or not (otherwise both will render
+    // initially), and the flag won't be reset in time if the unmount order
+    // it not correct.
+    //
+    // Alternative, and more general solution would be to namespace the fallback
+    // HoC so that state is not shared between subcomponents when the wrapping
+    // component is of the same type (e.g. Sidebar -> SidebarHeader).
+    const shouldRender = mounted && appState.openSidebar?.name === props.name;
+
+    if (!shouldRender) {
+      return null;
+    }
+
+    return <SidebarInner {...props} ref={ref} key={props.name} />;
+  }),
+  {
+    Header: SidebarHeader,
+    TabTriggers: SidebarTabTriggers,
+    TabTrigger: SidebarTabTrigger,
+    Tabs: SidebarTabs,
+    Tab: SidebarTab,
+    Trigger: SidebarTrigger,
+  },
+);
+Sidebar.displayName = "Sidebar";
diff --git a/src/components/Sidebar/SidebarHeader.tsx b/src/components/Sidebar/SidebarHeader.tsx
index bb107216c..35506166d 100644
--- a/src/components/Sidebar/SidebarHeader.tsx
+++ b/src/components/Sidebar/SidebarHeader.tsx
@@ -4,86 +4,54 @@ import { t } from "../../i18n";
 import { useDevice } from "../App";
 import { SidebarPropsContext } from "./common";
 import { CloseIcon, PinIcon } from "../icons";
-import { withUpstreamOverride } from "../hoc/withUpstreamOverride";
 import { Tooltip } from "../Tooltip";
+import { Button } from "../Button";
 
-export const SidebarDockButton = (props: {
-  checked: boolean;
-  onChange?(): void;
-}) => {
-  return (
-    <div className="layer-ui__sidebar-dock-button" data-testid="sidebar-dock">
-      <Tooltip label={t("labels.sidebarLock")}>
-        <label
-          className={clsx(
-            "ToolIcon ToolIcon__lock ToolIcon_type_floating",
-            `ToolIcon_size_medium`,
-          )}
-        >
-          <input
-            className="ToolIcon_type_checkbox"
-            type="checkbox"
-            onChange={props.onChange}
-            checked={props.checked}
-            aria-label={t("labels.sidebarLock")}
-          />{" "}
-          <div
-            className={clsx("Sidebar__pin-btn", {
-              "Sidebar__pin-btn--pinned": props.checked,
-            })}
-            tabIndex={0}
-          >
-            {PinIcon}
-          </div>{" "}
-        </label>{" "}
-      </Tooltip>
-    </div>
-  );
-};
-
-const _SidebarHeader: React.FC<{
+export const SidebarHeader = ({
+  children,
+  className,
+}: {
   children?: React.ReactNode;
   className?: string;
-}> = ({ children, className }) => {
+}) => {
   const device = useDevice();
   const props = useContext(SidebarPropsContext);
 
-  const renderDockButton = !!(device.canDeviceFitSidebar && props.dockable);
-  const renderCloseButton = !!props.onClose;
+  const renderDockButton = !!(
+    device.canDeviceFitSidebar && props.shouldRenderDockButton
+  );
 
   return (
     <div
-      className={clsx("layer-ui__sidebar__header", className)}
+      className={clsx("sidebar__header", className)}
       data-testid="sidebar-header"
     >
       {children}
-      {(renderDockButton || renderCloseButton) && (
-        <div className="layer-ui__sidebar__header__buttons">
-          {renderDockButton && (
-            <SidebarDockButton
-              checked={!!props.docked}
-              onChange={() => {
-                props.onDock?.(!props.docked);
-              }}
-            />
-          )}
-          {renderCloseButton && (
-            <button
-              data-testid="sidebar-close"
-              className="Sidebar__close-btn"
-              onClick={props.onClose}
-              aria-label={t("buttons.close")}
+      <div className="sidebar__header__buttons">
+        {renderDockButton && (
+          <Tooltip label={t("labels.sidebarLock")}>
+            <Button
+              onSelect={() => props.onDock?.(!props.docked)}
+              selected={!!props.docked}
+              className="sidebar__dock"
+              data-testid="sidebar-dock"
+              aria-label={t("labels.sidebarLock")}
             >
-              {CloseIcon}
-            </button>
-          )}
-        </div>
-      )}
+              {PinIcon}
+            </Button>
+          </Tooltip>
+        )}
+        <Button
+          data-testid="sidebar-close"
+          className="sidebar__close"
+          onSelect={props.onCloseRequest}
+          aria-label={t("buttons.close")}
+        >
+          {CloseIcon}
+        </Button>
+      </div>
     </div>
   );
 };
 
-const [Context, Component] = withUpstreamOverride(_SidebarHeader);
-
-/** @private */
-export const SidebarHeaderComponents = { Context, Component };
+SidebarHeader.displayName = "SidebarHeader";
diff --git a/src/components/Sidebar/SidebarTab.tsx b/src/components/Sidebar/SidebarTab.tsx
new file mode 100644
index 000000000..741a69fd1
--- /dev/null
+++ b/src/components/Sidebar/SidebarTab.tsx
@@ -0,0 +1,18 @@
+import * as RadixTabs from "@radix-ui/react-tabs";
+import { SidebarTabName } from "../../types";
+
+export const SidebarTab = ({
+  tab,
+  children,
+  ...rest
+}: {
+  tab: SidebarTabName;
+  children: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <RadixTabs.Content {...rest} value={tab}>
+      {children}
+    </RadixTabs.Content>
+  );
+};
+SidebarTab.displayName = "SidebarTab";
diff --git a/src/components/Sidebar/SidebarTabTrigger.tsx b/src/components/Sidebar/SidebarTabTrigger.tsx
new file mode 100644
index 000000000..cf25f7024
--- /dev/null
+++ b/src/components/Sidebar/SidebarTabTrigger.tsx
@@ -0,0 +1,26 @@
+import * as RadixTabs from "@radix-ui/react-tabs";
+import { SidebarTabName } from "../../types";
+
+export const SidebarTabTrigger = ({
+  children,
+  tab,
+  onSelect,
+  ...rest
+}: {
+  children: React.ReactNode;
+  tab: SidebarTabName;
+  onSelect?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+} & Omit<React.HTMLAttributes<HTMLButtonElement>, "onSelect">) => {
+  return (
+    <RadixTabs.Trigger value={tab} asChild onSelect={onSelect}>
+      <button
+        type={"button"}
+        className={`excalidraw-button sidebar-tab-trigger`}
+        {...rest}
+      >
+        {children}
+      </button>
+    </RadixTabs.Trigger>
+  );
+};
+SidebarTabTrigger.displayName = "SidebarTabTrigger";
diff --git a/src/components/Sidebar/SidebarTabTriggers.tsx b/src/components/Sidebar/SidebarTabTriggers.tsx
new file mode 100644
index 000000000..0be187b76
--- /dev/null
+++ b/src/components/Sidebar/SidebarTabTriggers.tsx
@@ -0,0 +1,16 @@
+import * as RadixTabs from "@radix-ui/react-tabs";
+
+export const SidebarTabTriggers = ({
+  children,
+  ...rest
+}: { children: React.ReactNode } & Omit<
+  React.RefAttributes<HTMLDivElement>,
+  "onSelect"
+>) => {
+  return (
+    <RadixTabs.List className="sidebar-triggers" {...rest}>
+      {children}
+    </RadixTabs.List>
+  );
+};
+SidebarTabTriggers.displayName = "SidebarTabTriggers";
diff --git a/src/components/Sidebar/SidebarTabs.tsx b/src/components/Sidebar/SidebarTabs.tsx
new file mode 100644
index 000000000..a681b5ee5
--- /dev/null
+++ b/src/components/Sidebar/SidebarTabs.tsx
@@ -0,0 +1,36 @@
+import * as RadixTabs from "@radix-ui/react-tabs";
+import { useUIAppState } from "../../context/ui-appState";
+import { useExcalidrawSetAppState } from "../App";
+
+export const SidebarTabs = ({
+  children,
+  ...rest
+}: {
+  children: React.ReactNode;
+} & Omit<React.RefAttributes<HTMLDivElement>, "onSelect">) => {
+  const appState = useUIAppState();
+  const setAppState = useExcalidrawSetAppState();
+
+  if (!appState.openSidebar) {
+    return null;
+  }
+
+  const { name } = appState.openSidebar;
+
+  return (
+    <RadixTabs.Root
+      className="sidebar-tabs-root"
+      value={appState.openSidebar.tab}
+      onValueChange={(tab) =>
+        setAppState((state) => ({
+          ...state,
+          openSidebar: { ...state.openSidebar, name, tab },
+        }))
+      }
+      {...rest}
+    >
+      {children}
+    </RadixTabs.Root>
+  );
+};
+SidebarTabs.displayName = "SidebarTabs";
diff --git a/src/components/Sidebar/SidebarTrigger.scss b/src/components/Sidebar/SidebarTrigger.scss
new file mode 100644
index 000000000..5aeef52eb
--- /dev/null
+++ b/src/components/Sidebar/SidebarTrigger.scss
@@ -0,0 +1,34 @@
+@import "../../css/variables.module";
+
+.excalidraw {
+  .sidebar-trigger {
+    @include outlineButtonStyles;
+
+    background-color: var(--island-bg-color);
+
+    width: auto;
+    height: var(--lg-button-size);
+
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    line-height: 0;
+
+    font-size: 0.75rem;
+    letter-spacing: 0.4px;
+
+    svg {
+      width: var(--lg-icon-size);
+      height: var(--lg-icon-size);
+    }
+  }
+
+  .default-sidebar-trigger .sidebar-trigger__label {
+    display: none;
+
+    @media screen and (min-width: 1024px) {
+      display: block;
+    }
+  }
+}
diff --git a/src/components/Sidebar/SidebarTrigger.tsx b/src/components/Sidebar/SidebarTrigger.tsx
new file mode 100644
index 000000000..711432818
--- /dev/null
+++ b/src/components/Sidebar/SidebarTrigger.tsx
@@ -0,0 +1,45 @@
+import { useExcalidrawSetAppState } from "../App";
+import { SidebarTriggerProps } from "./common";
+import { useUIAppState } from "../../context/ui-appState";
+import clsx from "clsx";
+
+import "./SidebarTrigger.scss";
+
+export const SidebarTrigger = ({
+  name,
+  tab,
+  icon,
+  title,
+  children,
+  onToggle,
+  className,
+  style,
+}: SidebarTriggerProps) => {
+  const setAppState = useExcalidrawSetAppState();
+  const appState = useUIAppState();
+
+  return (
+    <label title={title}>
+      <input
+        className="ToolIcon_type_checkbox"
+        type="checkbox"
+        onChange={(event) => {
+          document
+            .querySelector(".layer-ui__wrapper")
+            ?.classList.remove("animate");
+          const isOpen = event.target.checked;
+          setAppState({ openSidebar: isOpen ? { name, tab } : null });
+          onToggle?.(isOpen);
+        }}
+        checked={appState.openSidebar?.name === name}
+        aria-label={title}
+        aria-keyshortcuts="0"
+      />
+      <div className={clsx("sidebar-trigger", className)} style={style}>
+        {icon && <div>{icon}</div>}
+        {children && <div className="sidebar-trigger__label">{children}</div>}
+      </div>
+    </label>
+  );
+};
+SidebarTrigger.displayName = "SidebarTrigger";
diff --git a/src/components/Sidebar/common.ts b/src/components/Sidebar/common.ts
index 97c72b5d3..c7161bd17 100644
--- a/src/components/Sidebar/common.ts
+++ b/src/components/Sidebar/common.ts
@@ -1,23 +1,41 @@
 import React from "react";
+import { AppState, SidebarName, SidebarTabName } from "../../types";
+
+export type SidebarTriggerProps = {
+  name: SidebarName;
+  tab?: SidebarTabName;
+  icon?: JSX.Element;
+  children?: React.ReactNode;
+  title?: string;
+  className?: string;
+  onToggle?: (open: boolean) => void;
+  style?: React.CSSProperties;
+};
 
 export type SidebarProps<P = {}> = {
+  name: SidebarName;
   children: React.ReactNode;
   /**
-   * Called on sidebar close (either by user action or by the editor).
+   * Called on sidebar open/close or tab change.
+   */
+  onStateChange?: (state: AppState["openSidebar"]) => void;
+  /**
+   * supply alongside `docked` prop in order to make the Sidebar user-dockable
    */
-  onClose?: () => void | boolean;
-  /** if not supplied, sidebar won't be dockable */
   onDock?: (docked: boolean) => void;
   docked?: boolean;
-  initialDockedState?: boolean;
-  dockable?: boolean;
   className?: string;
+  // NOTE sidebars we use internally inside the editor must have this flag set.
+  // It indicates that this sidebar should have lower precedence over host
+  // sidebars, if both are open.
+  /** @private internal */
+  __fallback?: boolean;
 } & P;
 
 export type SidebarPropsContextValue = Pick<
   SidebarProps,
-  "onClose" | "onDock" | "docked" | "dockable"
->;
+  "onDock" | "docked"
+> & { onCloseRequest: () => void; shouldRenderDockButton: boolean };
 
 export const SidebarPropsContext =
-  React.createContext<SidebarPropsContextValue>({});
+  React.createContext<SidebarPropsContextValue>({} as SidebarPropsContextValue);
diff --git a/src/components/Spinner.scss b/src/components/Spinner.scss
index fd6fd50e8..e2d90f881 100644
--- a/src/components/Spinner.scss
+++ b/src/components/Spinner.scss
@@ -15,6 +15,7 @@ $duration: 1.6s;
 
     svg {
       animation: rotate $duration linear infinite;
+      animation-delay: var(--spinner-delay);
       transform-origin: center center;
     }
 
diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
index c4edb65af..8bc1e5911 100644
--- a/src/components/Spinner.tsx
+++ b/src/components/Spinner.tsx
@@ -5,13 +5,26 @@ import "./Spinner.scss";
 const Spinner = ({
   size = "1em",
   circleWidth = 8,
+  synchronized = false,
 }: {
   size?: string | number;
   circleWidth?: number;
+  synchronized?: boolean;
 }) => {
+  const mountTime = React.useRef(Date.now());
+  const mountDelay = -(mountTime.current % 1600);
+
   return (
     <div className="Spinner">
-      <svg viewBox="0 0 100 100" style={{ width: size, height: size }}>
+      <svg
+        viewBox="0 0 100 100"
+        style={{
+          width: size,
+          height: size,
+          // fix for remounting causing spinner flicker
+          ["--spinner-delay" as any]: synchronized ? `${mountDelay}ms` : 0,
+        }}
+      >
         <circle
           cx="50"
           cy="50"
diff --git a/src/components/Stack.tsx b/src/components/Stack.tsx
index aa18e8998..c54a6aef8 100644
--- a/src/components/Stack.tsx
+++ b/src/components/Stack.tsx
@@ -1,6 +1,6 @@
 import "./Stack.scss";
 
-import React from "react";
+import React, { forwardRef } from "react";
 import clsx from "clsx";
 
 type StackProps = {
@@ -10,53 +10,52 @@ type StackProps = {
   justifyContent?: "center" | "space-around" | "space-between";
   className?: string | boolean;
   style?: React.CSSProperties;
+  ref: React.RefObject<HTMLDivElement>;
 };
 
-const RowStack = ({
-  children,
-  gap,
-  align,
-  justifyContent,
-  className,
-  style,
-}: StackProps) => {
-  return (
-    <div
-      className={clsx("Stack Stack_horizontal", className)}
-      style={{
-        "--gap": gap,
-        alignItems: align,
-        justifyContent,
-        ...style,
-      }}
-    >
-      {children}
-    </div>
-  );
-};
+const RowStack = forwardRef(
+  (
+    { children, gap, align, justifyContent, className, style }: StackProps,
+    ref: React.ForwardedRef<HTMLDivElement>,
+  ) => {
+    return (
+      <div
+        className={clsx("Stack Stack_horizontal", className)}
+        style={{
+          "--gap": gap,
+          alignItems: align,
+          justifyContent,
+          ...style,
+        }}
+        ref={ref}
+      >
+        {children}
+      </div>
+    );
+  },
+);
 
-const ColStack = ({
-  children,
-  gap,
-  align,
-  justifyContent,
-  className,
-  style,
-}: StackProps) => {
-  return (
-    <div
-      className={clsx("Stack Stack_vertical", className)}
-      style={{
-        "--gap": gap,
-        justifyItems: align,
-        justifyContent,
-        ...style,
-      }}
-    >
-      {children}
-    </div>
-  );
-};
+const ColStack = forwardRef(
+  (
+    { children, gap, align, justifyContent, className, style }: StackProps,
+    ref: React.ForwardedRef<HTMLDivElement>,
+  ) => {
+    return (
+      <div
+        className={clsx("Stack Stack_vertical", className)}
+        style={{
+          "--gap": gap,
+          justifyItems: align,
+          justifyContent,
+          ...style,
+        }}
+        ref={ref}
+      >
+        {children}
+      </div>
+    );
+  },
+);
 
 export default {
   Row: RowStack,
diff --git a/src/components/Stats.tsx b/src/components/Stats.tsx
index 8aad76026..eb2b93e7e 100644
--- a/src/components/Stats.tsx
+++ b/src/components/Stats.tsx
@@ -3,14 +3,14 @@ import { getCommonBounds } from "../element/bounds";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 import { getTargetElements } from "../scene";
-import { AppState, ExcalidrawProps } from "../types";
+import { ExcalidrawProps, UIAppState } from "../types";
 import { CloseIcon } from "./icons";
 import { Island } from "./Island";
 import "./Stats.scss";
 
 export const Stats = (props: {
-  appState: AppState;
-  setAppState: React.Component<any, AppState>["setState"];
+  appState: UIAppState;
+  setAppState: React.Component<any, UIAppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
   onClose: () => void;
   renderCustomStats: ExcalidrawProps["renderCustomStats"];
diff --git a/src/components/Switch.scss b/src/components/Switch.scss
new file mode 100644
index 000000000..ab98bad63
--- /dev/null
+++ b/src/components/Switch.scss
@@ -0,0 +1,116 @@
+@import "../css/variables.module";
+
+.excalidraw {
+  --Switch-disabled-color: #d6d6d6;
+  --Switch-track-background: white;
+  --Switch-thumb-background: #3d3d3d;
+
+  &.theme--dark {
+    --Switch-disabled-color: #5c5c5c;
+    --Switch-track-background: #242424;
+    --Switch-thumb-background: #b8b8b8;
+  }
+
+  .Switch {
+    position: relative;
+    box-sizing: border-box;
+
+    width: 40px;
+    height: 20px;
+    border-radius: 12px;
+
+    transition-property: background, border;
+    transition-duration: 150ms;
+    transition-timing-function: ease-out;
+
+    background: var(--Switch-track-background);
+    border: 1px solid var(--Switch-disabled-color);
+
+    &:hover {
+      background: var(--Switch-track-background);
+      border: 1px solid #999999;
+    }
+
+    &.toggled {
+      background: var(--color-primary);
+      border: 1px solid var(--color-primary);
+
+      &:hover {
+        background: var(--color-primary-darker);
+        border: 1px solid var(--color-primary-darker);
+      }
+    }
+
+    &.disabled {
+      background: var(--Switch-track-background);
+      border: 1px solid var(--Switch-disabled-color);
+
+      &.toggled {
+        background: var(--Switch-disabled-color);
+        border: 1px solid var(--Switch-disabled-color);
+      }
+    }
+
+    &:before {
+      content: "";
+      box-sizing: border-box;
+      display: block;
+      pointer-events: none;
+      position: absolute;
+
+      border-radius: 100%;
+      transition: all 150ms ease-out;
+
+      width: 10px;
+      height: 10px;
+      top: 4px;
+      left: 4px;
+
+      background: var(--Switch-thumb-background);
+    }
+
+    &:active:before {
+      width: 12px;
+    }
+
+    &.toggled:before {
+      width: 14px;
+      height: 14px;
+      left: 22px;
+      top: 2px;
+
+      background: var(--Switch-track-background);
+    }
+
+    &.toggled:active:before {
+      width: 16px;
+      left: 20px;
+    }
+
+    &.disabled:before {
+      background: var(--Switch-disabled-color);
+    }
+
+    &.disabled.toggled:before {
+      background: var(--color-gray-50);
+    }
+
+    & input {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+
+      border-radius: 12px;
+
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+
+      cursor: pointer;
+
+      &:disabled {
+        cursor: unset;
+      }
+    }
+  }
+}
diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx
new file mode 100644
index 000000000..431c644f0
--- /dev/null
+++ b/src/components/Switch.tsx
@@ -0,0 +1,38 @@
+import clsx from "clsx";
+
+import "./Switch.scss";
+
+export type SwitchProps = {
+  name: string;
+  checked: boolean;
+  title?: string;
+  onChange: (value: boolean) => void;
+  disabled?: boolean;
+};
+
+export const Switch = ({
+  title,
+  name,
+  checked,
+  onChange,
+  disabled = false,
+}: SwitchProps) => {
+  return (
+    <div className={clsx("Switch", { toggled: checked, disabled })}>
+      <input
+        name={name}
+        id={name}
+        title={title}
+        type="checkbox"
+        checked={checked}
+        disabled={disabled}
+        onChange={() => onChange(!checked)}
+        onKeyDown={(event) => {
+          if (event.key === " ") {
+            onChange(!checked);
+          }
+        }}
+      />
+    </div>
+  );
+};
diff --git a/src/components/TextField.scss b/src/components/TextField.scss
new file mode 100644
index 000000000..57093996c
--- /dev/null
+++ b/src/components/TextField.scss
@@ -0,0 +1,118 @@
+@import "../css/variables.module";
+
+.excalidraw {
+  --ExcTextField--color: var(--color-gray-80);
+  --ExcTextField--label-color: var(--color-gray-80);
+  --ExcTextField--background: white;
+  --ExcTextField--readonly--background: var(--color-gray-10);
+  --ExcTextField--readonly--color: var(--color-gray-80);
+  --ExcTextField--border: var(--color-gray-40);
+  --ExcTextField--border-hover: var(--color-gray-50);
+  --ExcTextField--placeholder: var(--color-gray-40);
+
+  &.theme--dark {
+    --ExcTextField--color: var(--color-gray-10);
+    --ExcTextField--label-color: var(--color-gray-20);
+    --ExcTextField--background: var(--color-gray-85);
+    --ExcTextField--readonly--background: var(--color-gray-80);
+    --ExcTextField--readonly--color: var(--color-gray-40);
+    --ExcTextField--border: var(--color-gray-70);
+    --ExcTextField--border-hover: var(--color-gray-60);
+    --ExcTextField--placeholder: var(--color-gray-80);
+  }
+
+  .ExcTextField {
+    &--fullWidth {
+      width: 100%;
+      flex-grow: 1;
+    }
+
+    &__label {
+      font-family: "Assistant";
+      font-style: normal;
+      font-weight: 600;
+      font-size: 0.875rem;
+      line-height: 150%;
+
+      color: var(--ExcTextField--label-color);
+
+      margin-bottom: 0.25rem;
+      user-select: none;
+    }
+
+    &__input {
+      box-sizing: border-box;
+
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 0 1rem;
+
+      height: 3rem;
+
+      background: var(--ExcTextField--background);
+      border: 1px solid var(--ExcTextField--border);
+      border-radius: 0.5rem;
+
+      &:not(&--readonly) {
+        &:hover {
+          border-color: var(--ExcTextField--border-hover);
+        }
+
+        &:active,
+        &:focus-within {
+          border-color: var(--color-primary);
+        }
+      }
+
+      & input {
+        display: flex;
+        align-items: center;
+
+        border: none;
+        outline: none;
+        padding: 0;
+        margin: 0;
+
+        height: 1.5rem;
+
+        color: var(--ExcTextField--color);
+
+        font-family: "Assistant";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 1rem;
+        line-height: 150%;
+        text-overflow: ellipsis;
+
+        background: transparent;
+
+        width: 100%;
+
+        &::placeholder {
+          color: var(--ExcTextField--placeholder);
+        }
+
+        &:not(:focus) {
+          &:hover {
+            background-color: initial;
+          }
+        }
+
+        &:focus {
+          outline: initial;
+          box-shadow: initial;
+        }
+      }
+
+      &--readonly {
+        background: var(--ExcTextField--readonly--background);
+        border-color: transparent;
+
+        & input {
+          color: var(--ExcTextField--readonly--color);
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/TextField.tsx b/src/components/TextField.tsx
new file mode 100644
index 000000000..0f87bdb5c
--- /dev/null
+++ b/src/components/TextField.tsx
@@ -0,0 +1,79 @@
+import {
+  forwardRef,
+  useRef,
+  useImperativeHandle,
+  KeyboardEvent,
+  useLayoutEffect,
+} from "react";
+import clsx from "clsx";
+
+import "./TextField.scss";
+
+export type TextFieldProps = {
+  value?: string;
+
+  onChange?: (value: string) => void;
+  onClick?: () => void;
+  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+
+  readonly?: boolean;
+  fullWidth?: boolean;
+  selectOnRender?: boolean;
+
+  label?: string;
+  placeholder?: string;
+};
+
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+  (
+    {
+      value,
+      onChange,
+      label,
+      fullWidth,
+      placeholder,
+      readonly,
+      selectOnRender,
+      onKeyDown,
+    },
+    ref,
+  ) => {
+    const innerRef = useRef<HTMLInputElement | null>(null);
+
+    useImperativeHandle(ref, () => innerRef.current!);
+
+    useLayoutEffect(() => {
+      if (selectOnRender) {
+        innerRef.current?.select();
+      }
+    }, [selectOnRender]);
+
+    return (
+      <div
+        className={clsx("ExcTextField", {
+          "ExcTextField--fullWidth": fullWidth,
+        })}
+        onClick={() => {
+          innerRef.current?.focus();
+        }}
+      >
+        <div className="ExcTextField__label">{label}</div>
+        <div
+          className={clsx("ExcTextField__input", {
+            "ExcTextField__input--readonly": readonly,
+          })}
+        >
+          <input
+            readOnly={readonly}
+            type="text"
+            value={value}
+            placeholder={placeholder}
+            ref={innerRef}
+            onChange={(event) => onChange?.(event.target.value)}
+            onKeyDown={onKeyDown}
+          />
+        </div>
+      </div>
+    );
+  },
+);
diff --git a/src/components/ToolButton.tsx b/src/components/ToolButton.tsx
index 446d154df..c77454dc6 100644
--- a/src/components/ToolButton.tsx
+++ b/src/components/ToolButton.tsx
@@ -1,6 +1,6 @@
 import "./ToolIcon.scss";
 
-import React, { useEffect, useRef, useState } from "react";
+import React, { CSSProperties, useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import { useExcalidrawContainer } from "./App";
 import { AbortError } from "../errors";
@@ -25,6 +25,7 @@ type ToolButtonBaseProps = {
   visible?: boolean;
   selected?: boolean;
   className?: string;
+  style?: CSSProperties;
   isLoading?: boolean;
 };
 
@@ -114,6 +115,7 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
             "ToolIcon--plain": props.type === "icon",
           },
         )}
+        style={props.style}
         data-testid={props["data-testid"]}
         hidden={props.hidden}
         title={props.title}
diff --git a/src/components/Toolbar.scss b/src/components/Toolbar.scss
index da305b8ba..4bd20f7b3 100644
--- a/src/components/Toolbar.scss
+++ b/src/components/Toolbar.scss
@@ -15,7 +15,24 @@
       height: 1.5rem;
       align-self: center;
       background-color: var(--default-border-color);
-      margin: 0 0.5rem;
+      margin: 0 0.25rem;
     }
   }
+
+  .App-toolbar__extra-tools-trigger {
+    box-shadow: none;
+    border: 0;
+
+    &:active {
+      background-color: var(--button-hover-bg);
+      box-shadow: 0 0 0 1px
+        var(--button-active-border, var(--color-primary-darkest)) inset;
+    }
+  }
+
+  .App-toolbar__extra-tools-dropdown {
+    margin-top: 0.375rem;
+    right: 0;
+    min-width: 11.875rem;
+  }
 }
diff --git a/src/components/Tooltip.scss b/src/components/Tooltip.scss
index bb2b2f72e..07350b7e9 100644
--- a/src/components/Tooltip.scss
+++ b/src/components/Tooltip.scss
@@ -2,8 +2,11 @@
 
 // container in body where the actual tooltip is appended to
 .excalidraw-tooltip {
+  --ui-font: Assistant, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI,
+    Roboto, Helvetica, Arial, sans-serif;
+  font-family: var(--ui-font);
   position: fixed;
-  z-index: 1000;
+  z-index: var(--zIndex-popup);
 
   padding: 8px;
   border-radius: 6px;
diff --git a/src/components/TopErrorBoundary.tsx b/src/components/TopErrorBoundary.tsx
index ce81ec092..d465514f1 100644
--- a/src/components/TopErrorBoundary.tsx
+++ b/src/components/TopErrorBoundary.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import * as Sentry from "@sentry/browser";
 import { t } from "../i18n";
+import Trans from "./Trans";
 
 interface TopErrorBoundaryState {
   hasError: boolean;
@@ -74,25 +75,31 @@ export class TopErrorBoundary extends React.Component<
       <div className="ErrorSplash excalidraw">
         <div className="ErrorSplash-messageContainer">
           <div className="ErrorSplash-paragraph bigger align-center">
-            {t("errorSplash.headingMain_pre")}
-            <button onClick={() => window.location.reload()}>
-              {t("errorSplash.headingMain_button")}
-            </button>
+            <Trans
+              i18nKey="errorSplash.headingMain"
+              button={(el) => (
+                <button onClick={() => window.location.reload()}>{el}</button>
+              )}
+            />
           </div>
           <div className="ErrorSplash-paragraph align-center">
-            {t("errorSplash.clearCanvasMessage")}
-            <button
-              onClick={() => {
-                try {
-                  localStorage.clear();
-                  window.location.reload();
-                } catch (error: any) {
-                  console.error(error);
-                }
-              }}
-            >
-              {t("errorSplash.clearCanvasMessage_button")}
-            </button>
+            <Trans
+              i18nKey="errorSplash.clearCanvasMessage"
+              button={(el) => (
+                <button
+                  onClick={() => {
+                    try {
+                      localStorage.clear();
+                      window.location.reload();
+                    } catch (error: any) {
+                      console.error(error);
+                    }
+                  }}
+                >
+                  {el}
+                </button>
+              )}
+            />
             <br />
             <div className="smaller">
               <span role="img" aria-label="warning">
@@ -106,16 +113,17 @@ export class TopErrorBoundary extends React.Component<
           </div>
           <div>
             <div className="ErrorSplash-paragraph">
-              {t("errorSplash.trackedToSentry_pre")}
-              {this.state.sentryEventId}
-              {t("errorSplash.trackedToSentry_post")}
+              {t("errorSplash.trackedToSentry", {
+                eventId: this.state.sentryEventId,
+              })}
             </div>
             <div className="ErrorSplash-paragraph">
-              {t("errorSplash.openIssueMessage_pre")}
-              <button onClick={() => this.createGithubIssue()}>
-                {t("errorSplash.openIssueMessage_button")}
-              </button>
-              {t("errorSplash.openIssueMessage_post")}
+              <Trans
+                i18nKey="errorSplash.openIssueMessage"
+                button={(el) => (
+                  <button onClick={() => this.createGithubIssue()}>{el}</button>
+                )}
+              />
             </div>
             <div className="ErrorSplash-paragraph">
               <div className="ErrorSplash-details">
diff --git a/src/components/Trans.test.tsx b/src/components/Trans.test.tsx
new file mode 100644
index 000000000..0c6786351
--- /dev/null
+++ b/src/components/Trans.test.tsx
@@ -0,0 +1,71 @@
+import { render } from "@testing-library/react";
+
+import fallbackLangData from "../locales/en.json";
+
+import Trans from "./Trans";
+import { TranslationKeys } from "../i18n";
+
+describe("Test <Trans/>", () => {
+  it("should translate the the strings correctly", () => {
+    //@ts-ignore
+    fallbackLangData.transTest = {
+      key1: "Hello {{audience}}",
+      key2: "Please <link>click the button</link> to continue.",
+      key3: "Please <link>click {{location}}</link> to continue.",
+      key4: "Please <link>click <bold>{{location}}</bold></link> to continue.",
+      key5: "Please <connect-link>click the button</connect-link> to continue.",
+    };
+
+    const { getByTestId } = render(
+      <>
+        <div data-testid="test1">
+          <Trans
+            i18nKey={"transTest.key1" as unknown as TranslationKeys}
+            audience="world"
+          />
+        </div>
+        <div data-testid="test2">
+          <Trans
+            i18nKey={"transTest.key2" as unknown as TranslationKeys}
+            link={(el) => <a href="https://example.com">{el}</a>}
+          />
+        </div>
+        <div data-testid="test3">
+          <Trans
+            i18nKey={"transTest.key3" as unknown as TranslationKeys}
+            link={(el) => <a href="https://example.com">{el}</a>}
+            location="the button"
+          />
+        </div>
+        <div data-testid="test4">
+          <Trans
+            i18nKey={"transTest.key4" as unknown as TranslationKeys}
+            link={(el) => <a href="https://example.com">{el}</a>}
+            location="the button"
+            bold={(el) => <strong>{el}</strong>}
+          />
+        </div>
+        <div data-testid="test5">
+          <Trans
+            i18nKey={"transTest.key5" as unknown as TranslationKeys}
+            connect-link={(el) => <a href="https://example.com">{el}</a>}
+          />
+        </div>
+      </>,
+    );
+
+    expect(getByTestId("test1").innerHTML).toEqual("Hello world");
+    expect(getByTestId("test2").innerHTML).toEqual(
+      `Please <a href="https://example.com">click the button</a> to continue.`,
+    );
+    expect(getByTestId("test3").innerHTML).toEqual(
+      `Please <a href="https://example.com">click the button</a> to continue.`,
+    );
+    expect(getByTestId("test4").innerHTML).toEqual(
+      `Please <a href="https://example.com">click <strong>the button</strong></a> to continue.`,
+    );
+    expect(getByTestId("test5").innerHTML).toEqual(
+      `Please <a href="https://example.com">click the button</a> to continue.`,
+    );
+  });
+});
diff --git a/src/components/Trans.tsx b/src/components/Trans.tsx
new file mode 100644
index 000000000..f9318ca2b
--- /dev/null
+++ b/src/components/Trans.tsx
@@ -0,0 +1,169 @@
+import React from "react";
+
+import { TranslationKeys, useI18n } from "../i18n";
+
+// Used for splitting i18nKey into tokens in Trans component
+// Example:
+// "Please <link>click {{location}}</link> to continue.".split(SPLIT_REGEX).filter(Boolean)
+// produces
+// ["Please ", "<link>", "click ", "{{location}}", "</link>", " to continue."]
+const SPLIT_REGEX = /({{[\w-]+}})|(<[\w-]+>)|(<\/[\w-]+>)/g;
+// Used for extracting "location" from "{{location}}"
+const KEY_REGEXP = /{{([\w-]+)}}/;
+// Used for extracting "link" from "<link>"
+const TAG_START_REGEXP = /<([\w-]+)>/;
+// Used for extracting "link" from "</link>"
+const TAG_END_REGEXP = /<\/([\w-]+)>/;
+
+const getTransChildren = (
+  format: string,
+  props: {
+    [key: string]: React.ReactNode | ((el: React.ReactNode) => React.ReactNode);
+  },
+): React.ReactNode[] => {
+  const stack: { name: string; children: React.ReactNode[] }[] = [
+    {
+      name: "",
+      children: [],
+    },
+  ];
+
+  format
+    .split(SPLIT_REGEX)
+    .filter(Boolean)
+    .forEach((match) => {
+      const tagStartMatch = match.match(TAG_START_REGEXP);
+      const tagEndMatch = match.match(TAG_END_REGEXP);
+      const keyMatch = match.match(KEY_REGEXP);
+
+      if (tagStartMatch !== null) {
+        // The match is <tag>. Set the tag name as the name if it's one of the
+        // props, e.g. for "Please <link>click the button</link> to continue"
+        // tagStartMatch[1] = "link" and props contain "link" then it will be
+        // pushed to stack.
+        const name = tagStartMatch[1];
+        if (props.hasOwnProperty(name)) {
+          stack.push({
+            name,
+            children: [],
+          });
+        } else {
+          console.warn(
+            `Trans: missed to pass in prop ${name} for interpolating ${format}`,
+          );
+        }
+      } else if (tagEndMatch !== null) {
+        // If tag end match is found, this means we need to replace the content with
+        // its actual value in prop e.g. format = "Please <link>click the
+        // button</link> to continue", tagEndMatch is for "</link>", stack last item name =
+        // "link" and props.link = (el) => <a
+        // href="https://example.com">{el}</a> then its prop value will be
+        // pushed to "link"'s children so on DOM when rendering it's rendered as
+        // <a href="https://example.com">click the button</a>
+        const name = tagEndMatch[1];
+        if (name === stack[stack.length - 1].name) {
+          const item = stack.pop()!;
+          const itemChildren = React.createElement(
+            React.Fragment,
+            {},
+            ...item.children,
+          );
+          const fn = props[item.name];
+          if (typeof fn === "function") {
+            stack[stack.length - 1].children.push(fn(itemChildren));
+          }
+        } else {
+          console.warn(
+            `Trans: unexpected end tag ${match} for interpolating ${format}`,
+          );
+        }
+      } else if (keyMatch !== null) {
+        // The match is for {{key}}. Check if the key is present in props and set
+        // the prop value as children of last stack item e.g. format = "Hello
+        // {{name}}", key = "name" and props.name = "Excalidraw" then its prop
+        // value will be pushed to "name"'s children so it's rendered on DOM as
+        // "Hello Excalidraw"
+        const name = keyMatch[1];
+        if (props.hasOwnProperty(name)) {
+          stack[stack.length - 1].children.push(props[name] as React.ReactNode);
+        } else {
+          console.warn(
+            `Trans: key ${name} not in props for interpolating ${format}`,
+          );
+        }
+      } else {
+        // If none of cases match means we just need to push the string
+        // to stack eg - "Hello {{name}} Whats up?" "Hello", "Whats up" will be pushed
+        stack[stack.length - 1].children.push(match);
+      }
+    });
+
+  if (stack.length !== 1) {
+    console.warn(`Trans: stack not empty for interpolating ${format}`);
+  }
+
+  return stack[0].children;
+};
+
+/*
+Trans component is used for translating JSX.
+
+```json
+{
+  "example1": "Hello {{audience}}",
+  "example2": "Please <link>click the button</link> to continue.",
+  "example3": "Please <link>click {{location}}</link> to continue.",
+  "example4": "Please <link>click <bold>{{location}}</bold></link> to continue.",
+}
+```
+
+```jsx
+<Trans i18nKey="example1" audience="world" />
+
+<Trans
+  i18nKey="example2"
+  connectLink={(el) => <a href="https://example.com">{el}</a>}
+/>
+
+<Trans
+  i18nKey="example3"
+  connectLink={(el) => <a href="https://example.com">{el}</a>}
+  location="the button"
+/>
+
+<Trans
+  i18nKey="example4"
+  connectLink={(el) => <a href="https://example.com">{el}</a>}
+  location="the button"
+  bold={(el) => <strong>{el}</strong>}
+/>
+```
+
+Output:
+
+```html
+Hello world
+Please <a href="https://example.com">click the button</a> to continue.
+Please <a href="https://example.com">click the button</a> to continue.
+Please <a href="https://example.com">click <strong>the button</strong></a> to continue.
+```
+*/
+const Trans = ({
+  i18nKey,
+  children,
+  ...props
+}: {
+  i18nKey: TranslationKeys;
+  [key: string]: React.ReactNode | ((el: React.ReactNode) => React.ReactNode);
+}) => {
+  const { t } = useI18n();
+
+  // This is needed to avoid unique key error in list which gets rendered from getTransChildren
+  return React.createElement(
+    React.Fragment,
+    {},
+    ...getTransChildren(t(i18nKey), props),
+  );
+};
+
+export default Trans;
diff --git a/src/components/__snapshots__/App.test.tsx.snap b/src/components/__snapshots__/App.test.tsx.snap
index b36d678cd..2cdf4bb8b 100644
--- a/src/components/__snapshots__/App.test.tsx.snap
+++ b/src/components/__snapshots__/App.test.tsx.snap
@@ -5,59 +5,46 @@ exports[`Test <App/> should show error modal when using brave and measureText AP
   data-testid="brave-measure-text-error"
 >
   <p>
-    Looks like you are using Brave browser with the
-      
+    Looks like you are using Brave browser with the 
     <span
       style="font-weight: 600;"
     >
       Aggressively Block Fingerprinting
     </span>
-     
-    setting enabled
-    .
-    <br />
-    <br />
-    This could result in breaking the
-     
+     setting enabled.
+  </p>
+  <p>
+    This could result in breaking the 
     <span
       style="font-weight: 600;"
     >
       Text Elements
     </span>
-     
-    in your drawings
-    .
+     in your drawings.
   </p>
   <p>
-    We strongly recommend disabling this setting. You can follow
-     
+    We strongly recommend disabling this setting. You can follow 
     <a
       href="http://docs.excalidraw.com/docs/@excalidraw/excalidraw/faq#turning-off-aggresive-block-fingerprinting-in-brave-browser"
     >
-       
       these steps
     </a>
-     
-    on how to do so
-    .
+     on how to do so.
   </p>
   <p>
-     If disabling this setting doesn't fix the display of text elements, please open an
-     
+    If disabling this setting doesn't fix the display of text elements, please open an 
     <a
       href="https://github.com/excalidraw/excalidraw/issues/new"
     >
       issue
     </a>
-     
-    on our GitHub, or write us on
-     
+     on our GitHub, or write us on 
     <a
       href="https://discord.gg/UexuTaE"
     >
       Discord
+      .
     </a>
-    .
   </p>
 </div>
 `;
diff --git a/src/components/context/tunnels.ts b/src/components/context/tunnels.ts
deleted file mode 100644
index 981fcb0ad..000000000
--- a/src/components/context/tunnels.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-import tunnel from "@dwelle/tunnel-rat";
-
-type Tunnel = ReturnType<typeof tunnel>;
-
-type TunnelsContextValue = {
-  mainMenuTunnel: Tunnel;
-  welcomeScreenMenuHintTunnel: Tunnel;
-  welcomeScreenToolbarHintTunnel: Tunnel;
-  welcomeScreenHelpHintTunnel: Tunnel;
-  welcomeScreenCenterTunnel: Tunnel;
-  footerCenterTunnel: Tunnel;
-  jotaiScope: symbol;
-};
-
-export const TunnelsContext = React.createContext<TunnelsContextValue>(null!);
-
-export const useTunnels = () => React.useContext(TunnelsContext);
-
-export const useInitializeTunnels = () => {
-  return React.useMemo((): TunnelsContextValue => {
-    return {
-      mainMenuTunnel: tunnel(),
-      welcomeScreenMenuHintTunnel: tunnel(),
-      welcomeScreenToolbarHintTunnel: tunnel(),
-      welcomeScreenHelpHintTunnel: tunnel(),
-      welcomeScreenCenterTunnel: tunnel(),
-      footerCenterTunnel: tunnel(),
-      jotaiScope: Symbol(),
-    };
-  }, []);
-};
diff --git a/src/components/dropdownMenu/DropdownMenuContent.tsx b/src/components/dropdownMenu/DropdownMenuContent.tsx
index d60ddd97e..f272ab729 100644
--- a/src/components/dropdownMenu/DropdownMenuContent.tsx
+++ b/src/components/dropdownMenu/DropdownMenuContent.tsx
@@ -1,11 +1,10 @@
-import { useOutsideClickHook } from "../../hooks/useOutsideClick";
 import { Island } from "../Island";
-
 import { useDevice } from "../App";
 import clsx from "clsx";
 import Stack from "../Stack";
-import React from "react";
+import React, { useRef } from "react";
 import { DropdownMenuContentPropsContext } from "./common";
+import { useOutsideClick } from "../../hooks/useOutsideClick";
 
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 
@@ -28,7 +27,9 @@ const MenuContent = ({
   sideOffset?: number;
 }) => {
   const device = useDevice();
-  const menuRef = useOutsideClickHook(() => {
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useOutsideClick(menuRef, () => {
     onClickOutside?.();
   });
 
@@ -55,7 +56,7 @@ const MenuContent = ({
           <Island
             className="dropdown-menu-container"
             padding={2}
-            style={{ zIndex: 1 }}
+            style={{ zIndex: 2 }}
           >
             {children}
           </Island>
diff --git a/src/components/dropdownMenu/DropdownMenuTrigger.tsx b/src/components/dropdownMenu/DropdownMenuTrigger.tsx
index c7b547e68..1d79712ef 100644
--- a/src/components/dropdownMenu/DropdownMenuTrigger.tsx
+++ b/src/components/dropdownMenu/DropdownMenuTrigger.tsx
@@ -1,23 +1,24 @@
 import clsx from "clsx";
-import { useDevice, useExcalidrawAppState } from "../App";
+import { useDevice } from "../App";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 
 const MenuTrigger = ({
   className = "",
   children,
   onToggle,
+  title,
+  ...rest
 }: {
   className?: string;
   children: React.ReactNode;
   onToggle: () => void;
-}) => {
-  const appState = useExcalidrawAppState();
+  title?: string;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">) => {
   const device = useDevice();
   const classNames = clsx(
     `dropdown-menu-button ${className}`,
     "zen-mode-transition",
     {
-      "transition-left": appState.zenModeEnabled,
       "dropdown-menu-button--mobile": device.isMobile,
     },
   ).trim();
@@ -28,6 +29,8 @@ const MenuTrigger = ({
       onClick={onToggle}
       type="button"
       data-testid="dropdown-menu-button"
+      title={title}
+      {...rest}
     >
       {children}
     </DropdownMenuPrimitive.Trigger>
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
index 788462b86..173ea451a 100644
--- a/src/components/footer/Footer.tsx
+++ b/src/components/footer/Footer.tsx
@@ -1,7 +1,6 @@
 import clsx from "clsx";
 import { actionShortcuts } from "../../actions";
 import { ActionManager } from "../../actions/manager";
-import { AppState } from "../../types";
 import {
   ExitZenModeAction,
   FinalizeAction,
@@ -9,10 +8,11 @@ import {
   ZoomActions,
 } from "../Actions";
 import { useDevice } from "../App";
-import { useTunnels } from "../context/tunnels";
+import { useTunnels } from "../../context/tunnels";
 import { HelpButton } from "../HelpButton";
 import { Section } from "../Section";
 import Stack from "../Stack";
+import { UIAppState } from "../../types";
 
 const Footer = ({
   appState,
@@ -20,12 +20,12 @@ const Footer = ({
   showExitZenModeBtn,
   renderWelcomeScreen,
 }: {
-  appState: AppState;
+  appState: UIAppState;
   actionManager: ActionManager;
   showExitZenModeBtn: boolean;
   renderWelcomeScreen: boolean;
 }) => {
-  const { footerCenterTunnel, welcomeScreenHelpHintTunnel } = useTunnels();
+  const { FooterCenterTunnel, WelcomeScreenHelpHintTunnel } = useTunnels();
 
   const device = useDevice();
   const showFinalize =
@@ -70,14 +70,14 @@ const Footer = ({
           </Section>
         </Stack.Col>
       </div>
-      <footerCenterTunnel.Out />
+      <FooterCenterTunnel.Out />
       <div
         className={clsx("layer-ui__wrapper__footer-right zen-mode-transition", {
           "transition-right disable-pointerEvents": appState.zenModeEnabled,
         })}
       >
         <div style={{ position: "relative" }}>
-          {renderWelcomeScreen && <welcomeScreenHelpHintTunnel.Out />}
+          {renderWelcomeScreen && <WelcomeScreenHelpHintTunnel.Out />}
           <HelpButton
             onClick={() => actionManager.executeAction(actionShortcuts)}
           />
diff --git a/src/components/footer/FooterCenter.tsx b/src/components/footer/FooterCenter.tsx
index 90f0f96c5..55a0fb998 100644
--- a/src/components/footer/FooterCenter.tsx
+++ b/src/components/footer/FooterCenter.tsx
@@ -1,13 +1,13 @@
 import clsx from "clsx";
-import { useExcalidrawAppState } from "../App";
-import { useTunnels } from "../context/tunnels";
+import { useTunnels } from "../../context/tunnels";
 import "./FooterCenter.scss";
+import { useUIAppState } from "../../context/ui-appState";
 
 const FooterCenter = ({ children }: { children?: React.ReactNode }) => {
-  const { footerCenterTunnel } = useTunnels();
-  const appState = useExcalidrawAppState();
+  const { FooterCenterTunnel } = useTunnels();
+  const appState = useUIAppState();
   return (
-    <footerCenterTunnel.In>
+    <FooterCenterTunnel.In>
       <div
         className={clsx("footer-center zen-mode-transition", {
           "layer-ui__wrapper__footer-left--transition-bottom":
@@ -16,7 +16,7 @@ const FooterCenter = ({ children }: { children?: React.ReactNode }) => {
       >
         {children}
       </div>
-    </footerCenterTunnel.In>
+    </FooterCenterTunnel.In>
   );
 };
 
diff --git a/src/components/hoc/withInternalFallback.test.tsx b/src/components/hoc/withInternalFallback.test.tsx
new file mode 100644
index 000000000..363923b44
--- /dev/null
+++ b/src/components/hoc/withInternalFallback.test.tsx
@@ -0,0 +1,100 @@
+import { render, queryAllByTestId } from "../../tests/test-utils";
+import { Excalidraw, MainMenu } from "../../packages/excalidraw/index";
+
+describe("Test internal component fallback rendering", () => {
+  it("should render only one menu per excalidraw instance (custom menu first scenario)", async () => {
+    const { container } = await render(
+      <div>
+        <Excalidraw>
+          <MainMenu>test</MainMenu>
+        </Excalidraw>
+        <Excalidraw />
+      </div>,
+    );
+
+    expect(queryAllByTestId(container, "main-menu-trigger")?.length).toBe(2);
+
+    const excalContainers = container.querySelectorAll<HTMLDivElement>(
+      ".excalidraw-container",
+    );
+
+    expect(
+      queryAllByTestId(excalContainers[0], "main-menu-trigger")?.length,
+    ).toBe(1);
+    expect(
+      queryAllByTestId(excalContainers[1], "main-menu-trigger")?.length,
+    ).toBe(1);
+  });
+
+  it("should render only one menu per excalidraw instance (default menu first scenario)", async () => {
+    const { container } = await render(
+      <div>
+        <Excalidraw />
+        <Excalidraw>
+          <MainMenu>test</MainMenu>
+        </Excalidraw>
+      </div>,
+    );
+
+    expect(queryAllByTestId(container, "main-menu-trigger")?.length).toBe(2);
+
+    const excalContainers = container.querySelectorAll<HTMLDivElement>(
+      ".excalidraw-container",
+    );
+
+    expect(
+      queryAllByTestId(excalContainers[0], "main-menu-trigger")?.length,
+    ).toBe(1);
+    expect(
+      queryAllByTestId(excalContainers[1], "main-menu-trigger")?.length,
+    ).toBe(1);
+  });
+
+  it("should render only one menu per excalidraw instance (two custom menus scenario)", async () => {
+    const { container } = await render(
+      <div>
+        <Excalidraw>
+          <MainMenu>test</MainMenu>
+        </Excalidraw>
+        <Excalidraw>
+          <MainMenu>test</MainMenu>
+        </Excalidraw>
+      </div>,
+    );
+
+    expect(queryAllByTestId(container, "main-menu-trigger")?.length).toBe(2);
+
+    const excalContainers = container.querySelectorAll<HTMLDivElement>(
+      ".excalidraw-container",
+    );
+
+    expect(
+      queryAllByTestId(excalContainers[0], "main-menu-trigger")?.length,
+    ).toBe(1);
+    expect(
+      queryAllByTestId(excalContainers[1], "main-menu-trigger")?.length,
+    ).toBe(1);
+  });
+
+  it("should render only one menu per excalidraw instance (two default menus scenario)", async () => {
+    const { container } = await render(
+      <div>
+        <Excalidraw />
+        <Excalidraw />
+      </div>,
+    );
+
+    expect(queryAllByTestId(container, "main-menu-trigger")?.length).toBe(2);
+
+    const excalContainers = container.querySelectorAll<HTMLDivElement>(
+      ".excalidraw-container",
+    );
+
+    expect(
+      queryAllByTestId(excalContainers[0], "main-menu-trigger")?.length,
+    ).toBe(1);
+    expect(
+      queryAllByTestId(excalContainers[1], "main-menu-trigger")?.length,
+    ).toBe(1);
+  });
+});
diff --git a/src/components/hoc/withInternalFallback.tsx b/src/components/hoc/withInternalFallback.tsx
index 4ad61a11e..4131c51ec 100644
--- a/src/components/hoc/withInternalFallback.tsx
+++ b/src/components/hoc/withInternalFallback.tsx
@@ -1,17 +1,12 @@
 import { atom, useAtom } from "jotai";
-import React, { useLayoutEffect } from "react";
-import { useTunnels } from "../context/tunnels";
+import React, { useLayoutEffect, useRef } from "react";
+import { useTunnels } from "../../context/tunnels";
 
 export const withInternalFallback = <P,>(
   componentName: string,
   Component: React.FC<P>,
 ) => {
-  const counterAtom = atom(0);
-  // flag set on initial render to tell the fallback component to skip the
-  // render until mount counter are initialized. This is because the counter
-  // is initialized in an effect, and thus we could end rendering both
-  // components at the same time until counter is initialized.
-  let preferHost = false;
+  const renderAtom = atom(0);
 
   const WrapperComponent: React.FC<
     P & {
@@ -19,26 +14,52 @@ export const withInternalFallback = <P,>(
     }
   > = (props) => {
     const { jotaiScope } = useTunnels();
-    const [counter, setCounter] = useAtom(counterAtom, jotaiScope);
+    // for rerenders
+    const [, setCounter] = useAtom(renderAtom, jotaiScope);
+    // for initial & subsequent renders. Tracked as component state
+    // due to excalidraw multi-instance scanerios.
+    const metaRef = useRef({
+      // flag set on initial render to tell the fallback component to skip the
+      // render until mount counter are initialized. This is because the counter
+      // is initialized in an effect, and thus we could end rendering both
+      // components at the same time until counter is initialized.
+      preferHost: false,
+      counter: 0,
+    });
 
     useLayoutEffect(() => {
-      setCounter((counter) => counter + 1);
+      const meta = metaRef.current;
+      setCounter((c) => {
+        const next = c + 1;
+        meta.counter = next;
+
+        return next;
+      });
       return () => {
-        setCounter((counter) => counter - 1);
+        setCounter((c) => {
+          const next = c - 1;
+          meta.counter = next;
+          if (!next) {
+            meta.preferHost = false;
+          }
+          return next;
+        });
       };
     }, [setCounter]);
 
     if (!props.__fallback) {
-      preferHost = true;
+      metaRef.current.preferHost = true;
     }
 
     // ensure we don't render fallback and host components at the same time
     if (
       // either before the counters are initialized
-      (!counter && props.__fallback && preferHost) ||
+      (!metaRef.current.counter &&
+        props.__fallback &&
+        metaRef.current.preferHost) ||
       // or after the counters are initialized, and both are rendered
       // (this is the default when host renders as well)
-      (counter > 1 && props.__fallback)
+      (metaRef.current.counter > 1 && props.__fallback)
     ) {
       return null;
     }
diff --git a/src/components/hoc/withUpstreamOverride.tsx b/src/components/hoc/withUpstreamOverride.tsx
deleted file mode 100644
index acbc800b3..000000000
--- a/src/components/hoc/withUpstreamOverride.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, {
-  useMemo,
-  useContext,
-  useLayoutEffect,
-  useState,
-  createContext,
-} from "react";
-
-export const withUpstreamOverride = <P,>(Component: React.ComponentType<P>) => {
-  type ContextValue = [boolean, React.Dispatch<React.SetStateAction<boolean>>];
-
-  const DefaultComponentContext = createContext<ContextValue>([
-    false,
-    () => {},
-  ]);
-
-  const ComponentContext: React.FC<{ children: React.ReactNode }> = ({
-    children,
-  }) => {
-    const [isRenderedUpstream, setIsRenderedUpstream] = useState(false);
-    const contextValue: ContextValue = useMemo(
-      () => [isRenderedUpstream, setIsRenderedUpstream],
-      [isRenderedUpstream],
-    );
-
-    return (
-      <DefaultComponentContext.Provider value={contextValue}>
-        {children}
-      </DefaultComponentContext.Provider>
-    );
-  };
-
-  const DefaultComponent = (
-    props: P & {
-      // indicates whether component should render when not rendered upstream
-      /** @private internal */
-      __isFallback?: boolean;
-    },
-  ) => {
-    const [isRenderedUpstream, setIsRenderedUpstream] = useContext(
-      DefaultComponentContext,
-    );
-
-    useLayoutEffect(() => {
-      if (!props.__isFallback) {
-        setIsRenderedUpstream(true);
-        return () => setIsRenderedUpstream(false);
-      }
-    }, [props.__isFallback, setIsRenderedUpstream]);
-
-    if (props.__isFallback && isRenderedUpstream) {
-      return null;
-    }
-
-    return <Component {...props} />;
-  };
-  if (Component.name) {
-    DefaultComponent.displayName = `${Component.name}_upstreamOverrideWrapper`;
-    ComponentContext.displayName = `${Component.name}_upstreamOverrideContextWrapper`;
-  }
-
-  return [ComponentContext, DefaultComponent] as const;
-};
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index 7a984615d..cb2ee244a 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -1559,3 +1559,100 @@ export const handIcon = createIcon(
   </g>,
   tablerIconProps,
 );
+
+export const downloadIcon = createIcon(
+  <>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
+    <path d="M7 11l5 5l5 -5"></path>
+    <path d="M12 4l0 12"></path>
+  </>,
+  tablerIconProps,
+);
+
+export const copyIcon = createIcon(
+  <>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path>
+    <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path>
+  </>,
+  tablerIconProps,
+);
+
+export const helpIcon = createIcon(
+  <>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
+    <path d="M12 17l0 .01"></path>
+    <path d="M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4"></path>
+  </>,
+  tablerIconProps,
+);
+
+export const playerPlayIcon = createIcon(
+  <>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M7 4v16l13 -8z"></path>
+  </>,
+  tablerIconProps,
+);
+
+export const playerStopFilledIcon = createIcon(
+  <>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path
+      d="M17 4h-10a3 3 0 0 0 -3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3 -3v-10a3 3 0 0 0 -3 -3z"
+      strokeWidth="0"
+      fill="currentColor"
+    ></path>
+  </>,
+  tablerIconProps,
+);
+
+export const tablerCheckIcon = createIcon(
+  <>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M5 12l5 5l10 -10"></path>
+  </>,
+  tablerIconProps,
+);
+
+export const alertTriangleIcon = createIcon(
+  <>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M10.24 3.957l-8.422 14.06a1.989 1.989 0 0 0 1.7 2.983h16.845a1.989 1.989 0 0 0 1.7 -2.983l-8.423 -14.06a1.989 1.989 0 0 0 -3.4 0z" />
+    <path d="M12 9v4" />
+    <path d="M12 17h.01" />
+  </>,
+  tablerIconProps,
+);
+
+export const eyeDropperIcon = createIcon(
+  <g strokeWidth={1.25}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M11 7l6 6"></path>
+    <path d="M4 16l11.7 -11.7a1 1 0 0 1 1.4 0l2.6 2.6a1 1 0 0 1 0 1.4l-11.7 11.7h-4v-4z"></path>
+  </g>,
+  tablerIconProps,
+);
+
+export const extraToolsIcon = createIcon(
+  <g strokeWidth={1.5}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M12 3l-4 7h8z"></path>
+    <path d="M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+    <path d="M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
+  </g>,
+  tablerIconProps,
+);
+
+export const frameToolIcon = createIcon(
+  <g strokeWidth={1.5}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M4 7l16 0"></path>
+    <path d="M4 17l16 0"></path>
+    <path d="M7 4l0 16"></path>
+    <path d="M17 4l0 16"></path>
+  </g>,
+  tablerIconProps,
+);
diff --git a/src/components/live-collaboration/LiveCollaborationTrigger.tsx b/src/components/live-collaboration/LiveCollaborationTrigger.tsx
index 87f696d85..3111680cb 100644
--- a/src/components/live-collaboration/LiveCollaborationTrigger.tsx
+++ b/src/components/live-collaboration/LiveCollaborationTrigger.tsx
@@ -3,9 +3,9 @@ import { usersIcon } from "../icons";
 import { Button } from "../Button";
 
 import clsx from "clsx";
-import { useExcalidrawAppState } from "../App";
 
 import "./LiveCollaborationTrigger.scss";
+import { useUIAppState } from "../../context/ui-appState";
 
 const LiveCollaborationTrigger = ({
   isCollaborating,
@@ -15,7 +15,7 @@ const LiveCollaborationTrigger = ({
   isCollaborating: boolean;
   onSelect: () => void;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
-  const appState = useExcalidrawAppState();
+  const appState = useUIAppState();
 
   return (
     <Button
diff --git a/src/components/main-menu/DefaultItems.tsx b/src/components/main-menu/DefaultItems.tsx
index d02719a2c..919443d12 100644
--- a/src/components/main-menu/DefaultItems.tsx
+++ b/src/components/main-menu/DefaultItems.tsx
@@ -1,9 +1,9 @@
 import { getShortcutFromShortcutName } from "../../actions/shortcuts";
 import { useI18n } from "../../i18n";
 import {
-  useExcalidrawAppState,
   useExcalidrawSetAppState,
   useExcalidrawActionManager,
+  useExcalidrawElements,
 } from "../App";
 import {
   ExportIcon,
@@ -32,19 +32,43 @@ import clsx from "clsx";
 import { useSetAtom } from "jotai";
 import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
 import { jotaiScope } from "../../jotai";
+import { useUIAppState } from "../../context/ui-appState";
+import { openConfirmModal } from "../OverwriteConfirm/OverwriteConfirmState";
+import Trans from "../Trans";
 
 export const LoadScene = () => {
   const { t } = useI18n();
   const actionManager = useExcalidrawActionManager();
+  const elements = useExcalidrawElements();
 
   if (!actionManager.isActionEnabled(actionLoadScene)) {
     return null;
   }
 
+  const handleSelect = async () => {
+    if (
+      !elements.length ||
+      (await openConfirmModal({
+        title: t("overwriteConfirm.modal.loadFromFile.title"),
+        actionLabel: t("overwriteConfirm.modal.loadFromFile.button"),
+        color: "warning",
+        description: (
+          <Trans
+            i18nKey="overwriteConfirm.modal.loadFromFile.description"
+            bold={(text) => <strong>{text}</strong>}
+            br={() => <br />}
+          />
+        ),
+      }))
+    ) {
+      actionManager.executeAction(actionLoadScene);
+    }
+  };
+
   return (
     <DropdownMenuItem
       icon={LoadIcon}
-      onSelect={() => actionManager.executeAction(actionLoadScene)}
+      onSelect={handleSelect}
       data-testid="load-button"
       shortcut={getShortcutFromShortcutName("loadScene")}
       aria-label={t("buttons.load")}
@@ -139,7 +163,7 @@ ClearCanvas.displayName = "ClearCanvas";
 
 export const ToggleTheme = () => {
   const { t } = useI18n();
-  const appState = useExcalidrawAppState();
+  const appState = useUIAppState();
   const actionManager = useExcalidrawActionManager();
 
   if (!actionManager.isActionEnabled(actionToggleTheme)) {
@@ -172,7 +196,7 @@ ToggleTheme.displayName = "ToggleTheme";
 
 export const ChangeCanvasBackground = () => {
   const { t } = useI18n();
-  const appState = useExcalidrawAppState();
+  const appState = useUIAppState();
   const actionManager = useExcalidrawActionManager();
 
   if (appState.viewModeEnabled) {
diff --git a/src/components/main-menu/MainMenu.tsx b/src/components/main-menu/MainMenu.tsx
index 33e0868c0..a15916fab 100644
--- a/src/components/main-menu/MainMenu.tsx
+++ b/src/components/main-menu/MainMenu.tsx
@@ -1,9 +1,5 @@
 import React from "react";
-import {
-  useDevice,
-  useExcalidrawAppState,
-  useExcalidrawSetAppState,
-} from "../App";
+import { useDevice, useExcalidrawSetAppState } from "../App";
 import DropdownMenu from "../dropdownMenu/DropdownMenu";
 
 import * as DefaultItems from "./DefaultItems";
@@ -13,7 +9,8 @@ import { t } from "../../i18n";
 import { HamburgerMenuIcon } from "../icons";
 import { withInternalFallback } from "../hoc/withInternalFallback";
 import { composeEventHandlers } from "../../utils";
-import { useTunnels } from "../context/tunnels";
+import { useTunnels } from "../../context/tunnels";
+import { useUIAppState } from "../../context/ui-appState";
 import DropdownMenuSub from "../dropdownMenu/DropdownMenuSub";
 
 import * as Portal from "@radix-ui/react-portal";
@@ -31,16 +28,16 @@ const MainMenu = Object.assign(
        */
       onSelect?: (event: Event) => void;
     }) => {
-      const { mainMenuTunnel } = useTunnels();
+      const { MainMenuTunnel } = useTunnels();
       const device = useDevice();
-      const appState = useExcalidrawAppState();
+      const appState = useUIAppState();
       const setAppState = useExcalidrawSetAppState();
       const onClickOutside = device.isMobile
         ? undefined
         : () => setAppState({ openMenu: null });
 
       return (
-        <mainMenuTunnel.In>
+        <MainMenuTunnel.In>
           {appState.openMenu === "canvas" && device.isMobile && (
             <Portal.Root
               style={{
@@ -59,6 +56,7 @@ const MainMenu = Object.assign(
                   openMenu: appState.openMenu === "canvas" ? null : "canvas",
                 });
               }}
+              data-testid="main-menu-trigger"
             >
               {HamburgerMenuIcon}
             </DropdownMenu.Trigger>
@@ -83,7 +81,7 @@ const MainMenu = Object.assign(
               )}
             </DropdownMenu.Content>
           </DropdownMenu>
-        </mainMenuTunnel.In>
+        </MainMenuTunnel.In>
       );
     },
   ),
diff --git a/src/components/welcome-screen/WelcomeScreen.Center.tsx b/src/components/welcome-screen/WelcomeScreen.Center.tsx
index 8ab010057..2d43761e6 100644
--- a/src/components/welcome-screen/WelcomeScreen.Center.tsx
+++ b/src/components/welcome-screen/WelcomeScreen.Center.tsx
@@ -1,13 +1,10 @@
 import { actionLoadScene, actionShortcuts } from "../../actions";
 import { getShortcutFromShortcutName } from "../../actions/shortcuts";
 import { t, useI18n } from "../../i18n";
-import {
-  useDevice,
-  useExcalidrawActionManager,
-  useExcalidrawAppState,
-} from "../App";
-import { useTunnels } from "../context/tunnels";
+import { useDevice, useExcalidrawActionManager } from "../App";
+import { useTunnels } from "../../context/tunnels";
 import { ExcalLogo, HelpIcon, LoadIcon, usersIcon } from "../icons";
+import { useUIAppState } from "../../context/ui-appState";
 
 const WelcomeScreenMenuItemContent = ({
   icon,
@@ -89,9 +86,9 @@ const WelcomeScreenMenuItemLink = ({
 WelcomeScreenMenuItemLink.displayName = "WelcomeScreenMenuItemLink";
 
 const Center = ({ children }: { children?: React.ReactNode }) => {
-  const { welcomeScreenCenterTunnel } = useTunnels();
+  const { WelcomeScreenCenterTunnel } = useTunnels();
   return (
-    <welcomeScreenCenterTunnel.In>
+    <WelcomeScreenCenterTunnel.In>
       <div className="welcome-screen-center">
         {children || (
           <>
@@ -104,7 +101,7 @@ const Center = ({ children }: { children?: React.ReactNode }) => {
           </>
         )}
       </div>
-    </welcomeScreenCenterTunnel.In>
+    </WelcomeScreenCenterTunnel.In>
   );
 };
 Center.displayName = "Center";
@@ -148,7 +145,7 @@ const MenuItemHelp = () => {
 MenuItemHelp.displayName = "MenuItemHelp";
 
 const MenuItemLoadScene = () => {
-  const appState = useExcalidrawAppState();
+  const appState = useUIAppState();
   const actionManager = useExcalidrawActionManager();
 
   if (appState.viewModeEnabled) {
diff --git a/src/components/welcome-screen/WelcomeScreen.Hints.tsx b/src/components/welcome-screen/WelcomeScreen.Hints.tsx
index 3ba36211d..ccd42ed27 100644
--- a/src/components/welcome-screen/WelcomeScreen.Hints.tsx
+++ b/src/components/welcome-screen/WelcomeScreen.Hints.tsx
@@ -1,5 +1,5 @@
 import { t } from "../../i18n";
-import { useTunnels } from "../context/tunnels";
+import { useTunnels } from "../../context/tunnels";
 import {
   WelcomeScreenHelpArrow,
   WelcomeScreenMenuArrow,
@@ -7,44 +7,44 @@ import {
 } from "../icons";
 
 const MenuHint = ({ children }: { children?: React.ReactNode }) => {
-  const { welcomeScreenMenuHintTunnel } = useTunnels();
+  const { WelcomeScreenMenuHintTunnel } = useTunnels();
   return (
-    <welcomeScreenMenuHintTunnel.In>
+    <WelcomeScreenMenuHintTunnel.In>
       <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>
-    </welcomeScreenMenuHintTunnel.In>
+    </WelcomeScreenMenuHintTunnel.In>
   );
 };
 MenuHint.displayName = "MenuHint";
 
 const ToolbarHint = ({ children }: { children?: React.ReactNode }) => {
-  const { welcomeScreenToolbarHintTunnel } = useTunnels();
+  const { WelcomeScreenToolbarHintTunnel } = useTunnels();
   return (
-    <welcomeScreenToolbarHintTunnel.In>
+    <WelcomeScreenToolbarHintTunnel.In>
       <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>
-    </welcomeScreenToolbarHintTunnel.In>
+    </WelcomeScreenToolbarHintTunnel.In>
   );
 };
 ToolbarHint.displayName = "ToolbarHint";
 
 const HelpHint = ({ children }: { children?: React.ReactNode }) => {
-  const { welcomeScreenHelpHintTunnel } = useTunnels();
+  const { WelcomeScreenHelpHintTunnel } = useTunnels();
   return (
-    <welcomeScreenHelpHintTunnel.In>
+    <WelcomeScreenHelpHintTunnel.In>
       <div className="virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--help">
         <div>{children || t("welcomeScreen.defaults.helpHint")}</div>
         {WelcomeScreenHelpArrow}
       </div>
-    </welcomeScreenHelpHintTunnel.In>
+    </WelcomeScreenHelpHintTunnel.In>
   );
 };
 HelpHint.displayName = "HelpHint";
diff --git a/src/constants.ts b/src/constants.ts
index ef563e4a4..bca7094c5 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,6 +1,7 @@
 import cssVariables from "./css/variables.module.scss";
 import { AppProps } from "./types";
-import { FontFamilyValues } from "./element/types";
+import { ExcalidrawElement, FontFamilyValues } from "./element/types";
+import { COLOR_PALETTE } from "./colors";
 
 export const isDarwin = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
 export const isWindows = /^Win/.test(navigator.platform);
@@ -58,6 +59,7 @@ export enum EVENT {
   GESTURE_START = "gesturestart",
   GESTURE_CHANGE = "gesturechange",
   POINTER_MOVE = "pointermove",
+  POINTER_DOWN = "pointerdown",
   POINTER_UP = "pointerup",
   STATE_CHANGE = "statechange",
   WHEEL = "wheel",
@@ -92,6 +94,17 @@ export const THEME = {
   DARK: "dark",
 };
 
+export const FRAME_STYLE = {
+  strokeColor: "#bbb" as ExcalidrawElement["strokeColor"],
+  strokeWidth: 1 as ExcalidrawElement["strokeWidth"],
+  strokeStyle: "solid" as ExcalidrawElement["strokeStyle"],
+  fillStyle: "solid" as ExcalidrawElement["fillStyle"],
+  roughness: 0 as ExcalidrawElement["roughness"],
+  roundness: null as ExcalidrawElement["roundness"],
+  backgroundColor: "transparent" as ExcalidrawElement["backgroundColor"],
+  radius: 8,
+};
+
 export const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
 
 export const DEFAULT_FONT_SIZE = 20;
@@ -104,20 +117,36 @@ export const CANVAS_ONLY_ACTIONS = ["selectAll"];
 
 export const GRID_SIZE = 20; // TODO make it configurable?
 
-export const MIME_TYPES = {
-  excalidraw: "application/vnd.excalidraw+json",
-  excalidrawlib: "application/vnd.excalidrawlib+json",
-  json: "application/json",
+export const IMAGE_MIME_TYPES = {
   svg: "image/svg+xml",
-  "excalidraw.svg": "image/svg+xml",
   png: "image/png",
-  "excalidraw.png": "image/png",
   jpg: "image/jpeg",
   gif: "image/gif",
   webp: "image/webp",
   bmp: "image/bmp",
   ico: "image/x-icon",
+  avif: "image/avif",
+  jfif: "image/jfif",
+} as const;
+
+export const MIME_TYPES = {
+  json: "application/json",
+  // excalidraw data
+  excalidraw: "application/vnd.excalidraw+json",
+  excalidrawlib: "application/vnd.excalidrawlib+json",
+  // image-encoded excalidraw data
+  "excalidraw.svg": "image/svg+xml",
+  "excalidraw.png": "image/png",
+  // binary
   binary: "application/octet-stream",
+  // image
+  ...IMAGE_MIME_TYPES,
+} as const;
+
+export const EXPORT_IMAGE_TYPES = {
+  png: "png",
+  svg: "svg",
+  clipboard: "clipboard",
 } as const;
 
 export const EXPORT_DATA_TYPES = {
@@ -188,16 +217,6 @@ export const DEFAULT_EXPORT_PADDING = 10; // px
 
 export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
 
-export const ALLOWED_IMAGE_MIME_TYPES = [
-  MIME_TYPES.png,
-  MIME_TYPES.jpg,
-  MIME_TYPES.svg,
-  MIME_TYPES.gif,
-  MIME_TYPES.webp,
-  MIME_TYPES.bmp,
-  MIME_TYPES.ico,
-] as const;
-
 export const MAX_ALLOWED_FILE_BYTES = 2 * 1024 * 1024;
 
 export const SVG_NS = "http://www.w3.org/2000/svg";
@@ -254,3 +273,30 @@ export const ROUNDNESS = {
 /** key containt id of precedeing elemnt id we use in reconciliation during
  * collaboration */
 export const PRECEDING_ELEMENT_KEY = "__precedingElement__";
+
+export const DEFAULT_ELEMENT_PROPS: {
+  strokeColor: ExcalidrawElement["strokeColor"];
+  backgroundColor: ExcalidrawElement["backgroundColor"];
+  fillStyle: ExcalidrawElement["fillStyle"];
+  strokeWidth: ExcalidrawElement["strokeWidth"];
+  strokeStyle: ExcalidrawElement["strokeStyle"];
+  roughness: ExcalidrawElement["roughness"];
+  opacity: ExcalidrawElement["opacity"];
+  locked: ExcalidrawElement["locked"];
+} = {
+  strokeColor: COLOR_PALETTE.black,
+  backgroundColor: COLOR_PALETTE.transparent,
+  fillStyle: "hachure",
+  strokeWidth: 1,
+  strokeStyle: "solid",
+  roughness: 1,
+  opacity: 100,
+  locked: false,
+};
+
+export const LIBRARY_SIDEBAR_TAB = "library";
+
+export const DEFAULT_SIDEBAR = {
+  name: "default",
+  defaultTab: LIBRARY_SIDEBAR_TAB,
+} as const;
diff --git a/src/context/tunnels.ts b/src/context/tunnels.ts
new file mode 100644
index 000000000..fa807a600
--- /dev/null
+++ b/src/context/tunnels.ts
@@ -0,0 +1,38 @@
+import React from "react";
+import tunnel from "tunnel-rat";
+
+export type Tunnel = ReturnType<typeof tunnel>;
+
+type TunnelsContextValue = {
+  MainMenuTunnel: Tunnel;
+  WelcomeScreenMenuHintTunnel: Tunnel;
+  WelcomeScreenToolbarHintTunnel: Tunnel;
+  WelcomeScreenHelpHintTunnel: Tunnel;
+  WelcomeScreenCenterTunnel: Tunnel;
+  FooterCenterTunnel: Tunnel;
+  DefaultSidebarTriggerTunnel: Tunnel;
+  DefaultSidebarTabTriggersTunnel: Tunnel;
+  OverwriteConfirmDialogTunnel: Tunnel;
+  jotaiScope: symbol;
+};
+
+export const TunnelsContext = React.createContext<TunnelsContextValue>(null!);
+
+export const useTunnels = () => React.useContext(TunnelsContext);
+
+export const useInitializeTunnels = () => {
+  return React.useMemo((): TunnelsContextValue => {
+    return {
+      MainMenuTunnel: tunnel(),
+      WelcomeScreenMenuHintTunnel: tunnel(),
+      WelcomeScreenToolbarHintTunnel: tunnel(),
+      WelcomeScreenHelpHintTunnel: tunnel(),
+      WelcomeScreenCenterTunnel: tunnel(),
+      FooterCenterTunnel: tunnel(),
+      DefaultSidebarTriggerTunnel: tunnel(),
+      DefaultSidebarTabTriggersTunnel: tunnel(),
+      OverwriteConfirmDialogTunnel: tunnel(),
+      jotaiScope: Symbol(),
+    };
+  }, []);
+};
diff --git a/src/context/ui-appState.ts b/src/context/ui-appState.ts
new file mode 100644
index 000000000..d276f18c8
--- /dev/null
+++ b/src/context/ui-appState.ts
@@ -0,0 +1,5 @@
+import React from "react";
+import { UIAppState } from "../types";
+
+export const UIAppStateContext = React.createContext<UIAppState>(null!);
+export const useUIAppState = () => React.useContext(UIAppStateContext);
diff --git a/src/css/styles.scss b/src/css/styles.scss
index 8dafbfbdf..826540d02 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -5,6 +5,15 @@
   --zIndex-canvas: 1;
   --zIndex-wysiwyg: 2;
   --zIndex-layerUI: 3;
+
+  --zIndex-modal: 1000;
+  --zIndex-popup: 1001;
+  --zIndex-toast: 999999;
+
+  --sab: env(safe-area-inset-bottom);
+  --sal: env(safe-area-inset-left);
+  --sar: env(safe-area-inset-right);
+  --sat: env(safe-area-inset-top);
 }
 
 .excalidraw {
@@ -354,6 +363,7 @@
     border-radius: var(--space-factor);
     border: 1px solid var(--button-gray-2);
     font-size: 0.8rem;
+    font-family: inherit;
     outline: none;
     appearance: none;
     background-image: var(--dropdown-icon);
@@ -413,6 +423,7 @@
     bottom: 30px;
     transform: translateX(-50%);
     pointer-events: all;
+    font-family: inherit;
 
     &:hover {
       background-color: var(--button-hover-bg);
@@ -536,6 +547,10 @@
     height: 3px;
   }
 
+  select::-webkit-scrollbar {
+    width: 10px;
+  }
+
   ::-webkit-scrollbar-thumb {
     background: var(--scrollbar-thumb);
     border-radius: 10px;
@@ -565,7 +580,7 @@
       border-radius: 0;
     }
 
-    .library-button {
+    .default-sidebar-trigger {
       border: 0;
     }
   }
diff --git a/src/css/theme.scss b/src/css/theme.scss
index fd8067968..643f9346d 100644
--- a/src/css/theme.scss
+++ b/src/css/theme.scss
@@ -27,10 +27,6 @@
   --popup-secondary-bg-color: #{$oc-gray-1};
   --popup-text-color: #{$oc-black};
   --popup-text-inverted-color: #{$oc-white};
-  --sab: env(safe-area-inset-bottom);
-  --sal: env(safe-area-inset-left);
-  --sar: env(safe-area-inset-right);
-  --sat: env(safe-area-inset-top);
   --select-highlight-color: #{$oc-blue-5};
   --shadow-island: 0px 7px 14px rgba(0, 0, 0, 0.05),
     0px 0px 3.12708px rgba(0, 0, 0, 0.0798),
@@ -78,10 +74,13 @@
 
   --color-selection: #6965db;
 
+  --color-icon-white: #{$oc-white};
+
   --color-primary: #6965db;
   --color-primary-darker: #5b57d1;
   --color-primary-darkest: #4a47b1;
   --color-primary-light: #e3e2fe;
+  --color-primary-light-darker: #d7d5ff;
 
   --color-gray-10: #f5f5f5;
   --color-gray-20: #ebebeb;
@@ -96,10 +95,36 @@
   --color-gray-100: #121212;
 
   --color-warning: #fceeca;
+  --color-warning-dark: #f5c354;
+  --color-warning-darker: #f3ab2c;
+  --color-warning-darkest: #ec8b14;
   --color-text-warning: var(--text-primary-color);
 
   --color-danger: #db6965;
+  --color-danger-dark: #db6965;
+  --color-danger-darker: #d65550;
+  --color-danger-darkest: #d1413c;
+  --color-danger-text: black;
+
+  --color-danger-background: #fff0f0;
+  --color-danger-icon-background: #ffdad6;
+  --color-danger-color: #700000;
+  --color-danger-icon-color: #700000;
+
+  --color-warning-background: var(--color-warning);
+  --color-warning-icon-background: var(--color-warning-dark);
+  --color-warning-color: var(--text-primary-color);
+  --color-warning-icon-color: var(--text-primary-color);
+
+  --color-muted: var(--color-gray-30);
+  --color-muted-darker: var(--color-gray-60);
+  --color-muted-darkest: var(--color-gray-100);
+  --color-muted-background: var(--color-gray-80);
+  --color-muted-background-darker: var(--color-gray-100);
+
   --color-promo: #e70078;
+  --color-success: #268029;
+  --color-success-lighter: #cafccc;
 
   --border-radius-md: 0.375rem;
   --border-radius-lg: 0.5rem;
@@ -161,14 +186,38 @@
     // will be inverted to a lighter color.
     --color-selection: #3530c4;
 
+    --color-icon-white: var(--color-gray-90);
+
     --color-primary: #a8a5ff;
     --color-primary-darker: #b2aeff;
     --color-primary-darkest: #beb9ff;
     --color-primary-light: #4f4d6f;
+    --color-primary-light-darker: #43415e;
 
     --color-text-warning: var(--color-gray-80);
 
     --color-danger: #ffa8a5;
+    --color-danger-dark: #672120;
+    --color-danger-darker: #8f2625;
+    --color-danger-darkest: #ac2b29;
+    --color-danger-text: #fbcbcc;
+
+    --color-danger-background: #fbcbcc;
+    --color-danger-icon-background: #672120;
+    --color-danger-color: #261919;
+    --color-danger-icon-color: #fbcbcc;
+
+    --color-warning-background: var(--color-warning);
+    --color-warning-icon-background: var(--color-warning-dark);
+    --color-warning-color: var(--color-gray-80);
+    --color-warning-icon-color: var(--color-gray-80);
+
+    --color-muted: var(--color-gray-80);
+    --color-muted-darker: var(--color-gray-60);
+    --color-muted-darkest: var(--color-gray-20);
+    --color-muted-background: var(--color-gray-40);
+    --color-muted-background-darker: var(--color-gray-20);
+
     --color-promo: #d297ff;
   }
 }
diff --git a/src/css/variables.module.scss b/src/css/variables.module.scss
index 779c52bff..10e42dc72 100644
--- a/src/css/variables.module.scss
+++ b/src/css/variables.module.scss
@@ -72,7 +72,14 @@
 
   &:hover {
     background-color: var(--button-hover-bg, var(--island-bg-color));
-    border-color: var(--button-hover-border, var(--default-border-color));
+    border-color: var(
+      --button-hover-border,
+      var(--button-border, var(--default-border-color))
+    );
+    color: var(
+      --button-hover-color,
+      var(--button-color, var(--text-primary-color, inherit))
+    );
   }
 
   &:active {
@@ -81,11 +88,14 @@
   }
 
   &.active {
-    background-color: var(--color-primary-light);
-    border-color: var(--color-primary-light);
+    background-color: var(--button-selected-bg, var(--color-primary-light));
+    border-color: var(--button-selected-border, var(--color-primary-light));
 
     &:hover {
-      background-color: var(--color-primary-light);
+      background-color: var(
+        --button-selected-hover-bg,
+        var(--color-primary-light)
+      );
     }
 
     svg {
diff --git a/src/data/blob.ts b/src/data/blob.ts
index 47cff293f..c0aa66ee7 100644
--- a/src/data/blob.ts
+++ b/src/data/blob.ts
@@ -1,6 +1,6 @@
 import { nanoid } from "nanoid";
 import { cleanAppStateForExport } from "../appState";
-import { ALLOWED_IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
+import { IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
 import { clearElementsForExport } from "../element";
 import { ExcalidrawElement, FileId } from "../element/types";
 import { CanvasError } from "../errors";
@@ -117,11 +117,9 @@ export const isImageFileHandle = (handle: FileSystemHandle | null) => {
 
 export const isSupportedImageFile = (
   blob: Blob | null | undefined,
-): blob is Blob & { type: typeof ALLOWED_IMAGE_MIME_TYPES[number] } => {
+): blob is Blob & { type: ValueOf<typeof IMAGE_MIME_TYPES> } => {
   const { type } = blob || {};
-  return (
-    !!type && (ALLOWED_IMAGE_MIME_TYPES as readonly string[]).includes(type)
-  );
+  return !!type && (Object.values(IMAGE_MIME_TYPES) as string[]).includes(type);
 };
 
 export const loadSceneOrLibraryFromBlob = async (
@@ -157,7 +155,7 @@ export const loadSceneOrLibraryFromBlob = async (
           },
           localAppState,
           localElements,
-          { repairBindings: true, refreshDimensions: true },
+          { repairBindings: true, refreshDimensions: false },
         ),
       };
     } else if (isValidLibrary(data)) {
diff --git a/src/data/filesystem.ts b/src/data/filesystem.ts
index ffe088faf..fa29604f4 100644
--- a/src/data/filesystem.ts
+++ b/src/data/filesystem.ts
@@ -8,16 +8,7 @@ import { EVENT, MIME_TYPES } from "../constants";
 import { AbortError } from "../errors";
 import { debounce } from "../utils";
 
-type FILE_EXTENSION =
-  | "gif"
-  | "jpg"
-  | "png"
-  | "excalidraw.png"
-  | "svg"
-  | "excalidraw.svg"
-  | "json"
-  | "excalidraw"
-  | "excalidrawlib";
+type FILE_EXTENSION = Exclude<keyof typeof MIME_TYPES, "binary">;
 
 const INPUT_CHANGE_INTERVAL_MS = 500;
 
diff --git a/src/data/library.ts b/src/data/library.ts
index 564ccc7d3..381caed11 100644
--- a/src/data/library.ts
+++ b/src/data/library.ts
@@ -14,7 +14,15 @@ import { getCommonBoundingBox } from "../element/bounds";
 import { AbortError } from "../errors";
 import { t } from "../i18n";
 import { useEffect, useRef } from "react";
-import { URL_HASH_KEYS, URL_QUERY_KEYS, APP_NAME, EVENT } from "../constants";
+import {
+  URL_HASH_KEYS,
+  URL_QUERY_KEYS,
+  APP_NAME,
+  EVENT,
+  DEFAULT_SIDEBAR,
+  LIBRARY_SIDEBAR_TAB,
+} from "../constants";
+import { libraryItemSvgsCache } from "../hooks/useLibraryItemSvg";
 
 export const libraryItemsAtom = atom<{
   status: "loading" | "loaded";
@@ -108,6 +116,20 @@ class Library {
     }
   };
 
+  /** call on excalidraw instance unmount */
+  destroy = () => {
+    this.isInitialized = false;
+    this.updateQueue = [];
+    this.lastLibraryItems = [];
+    jotaiStore.set(libraryItemSvgsCache, new Map());
+    // TODO uncomment after/if we make jotai store scoped to each excal instance
+    // jotaiStore.set(libraryItemsAtom, {
+    //   status: "loading",
+    //   isInitialized: false,
+    //   libraryItems: [],
+    // });
+  };
+
   resetLibrary = () => {
     return this.setLibrary([]);
   };
@@ -148,7 +170,9 @@ class Library {
     defaultStatus?: "unpublished" | "published";
   }): Promise<LibraryItems> => {
     if (openLibraryMenu) {
-      this.app.setState({ openSidebar: "library" });
+      this.app.setState({
+        openSidebar: { name: DEFAULT_SIDEBAR.name, tab: LIBRARY_SIDEBAR_TAB },
+      });
     }
 
     return this.setLibrary(() => {
@@ -174,6 +198,13 @@ class Library {
               }),
             )
           ) {
+            if (prompt) {
+              // focus container if we've prompted. We focus conditionally
+              // lest `props.autoFocus` is disabled (in which case we should
+              // focus only on user action such as prompt confirm)
+              this.app.focusContainer();
+            }
+
             if (merge) {
               resolve(mergeLibraryItems(this.lastLibraryItems, nextItems));
             } else {
@@ -186,8 +217,6 @@ class Library {
           reject(error);
         }
       });
-    }).finally(() => {
-      this.app.focusContainer();
     });
   };
 
diff --git a/src/data/restore.ts b/src/data/restore.ts
index fcf5fa132..5f2adc004 100644
--- a/src/data/restore.ts
+++ b/src/data/restore.ts
@@ -27,19 +27,21 @@ import {
   PRECEDING_ELEMENT_KEY,
   FONT_FAMILY,
   ROUNDNESS,
+  DEFAULT_SIDEBAR,
 } from "../constants";
 import { getDefaultAppState } from "../appState";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bumpVersion } from "../element/mutateElement";
 import { getFontString, getUpdatedTimestamp, updateActiveTool } from "../utils";
 import { arrayToMap } from "../utils";
-import oc from "open-color";
 import { MarkOptional, Mutable } from "../utility-types";
 import {
   detectLineHeight,
   getDefaultLineHeight,
   measureBaseline,
 } from "../element/textElement";
+import { COLOR_PALETTE } from "../colors";
+import { normalizeLink } from "./url";
 
 type RestoredAppState = Omit<
   AppState,
@@ -61,6 +63,7 @@ export const AllowedExcalidrawActiveTools: Record<
   freedraw: true,
   eraser: false,
   custom: true,
+  frame: true,
   hand: true,
 };
 
@@ -118,12 +121,13 @@ const restoreElementWithProperties = <
     angle: element.angle || 0,
     x: extra.x ?? element.x ?? 0,
     y: extra.y ?? element.y ?? 0,
-    strokeColor: element.strokeColor || oc.black,
-    backgroundColor: element.backgroundColor || "transparent",
+    strokeColor: element.strokeColor || COLOR_PALETTE.black,
+    backgroundColor: element.backgroundColor || COLOR_PALETTE.transparent,
     width: element.width || 0,
     height: element.height || 0,
     seed: element.seed ?? 1,
     groupIds: element.groupIds ?? [],
+    frameId: element.frameId ?? null,
     roundness: element.roundness
       ? element.roundness
       : element.strokeSharpness === "round"
@@ -139,7 +143,7 @@ const restoreElementWithProperties = <
       ? element.boundElementIds.map((id) => ({ type: "arrow", id }))
       : element.boundElements ?? [],
     updated: element.updated ?? getUpdatedTimestamp(),
-    link: element.link ?? null,
+    link: element.link ? normalizeLink(element.link) : null,
     locked: element.locked ?? false,
   };
 
@@ -271,6 +275,10 @@ const restoreElement = (
       return restoreElementWithProperties(element, {});
     case "diamond":
       return restoreElementWithProperties(element, {});
+    case "frame":
+      return restoreElementWithProperties(element, {
+        name: element.name ?? null,
+      });
 
     // Don't use default case so as to catch a missing an element type case.
     // We also don't want to throw, but instead return void so we filter
@@ -363,6 +371,24 @@ const repairBoundElement = (
   }
 };
 
+/**
+ * Remove an element's frameId if its containing frame is non-existent
+ *
+ * NOTE mutates elements.
+ */
+const repairFrameMembership = (
+  element: Mutable<ExcalidrawElement>,
+  elementsMap: Map<string, Mutable<ExcalidrawElement>>,
+) => {
+  if (element.frameId) {
+    const containingFrame = elementsMap.get(element.frameId);
+
+    if (!containingFrame) {
+      element.frameId = null;
+    }
+  }
+};
+
 export const restoreElements = (
   elements: ImportedDataState["elements"],
   /** NOTE doesn't serve for reconciliation */
@@ -403,6 +429,10 @@ export const restoreElements = (
   // repair binding. Mutates elements.
   const restoredElementsMap = arrayToMap(restoredElements);
   for (const element of restoredElements) {
+    if (element.frameId) {
+      repairFrameMembership(element, restoredElementsMap);
+    }
+
     if (isTextElement(element) && element.containerId) {
       repairBoundElement(element, restoredElementsMap);
     } else if (element.boundElements) {
@@ -431,21 +461,15 @@ const LegacyAppStateMigrations: {
     defaultAppState: ReturnType<typeof getDefaultAppState>,
   ) => [LegacyAppState[K][1], AppState[LegacyAppState[K][1]]];
 } = {
-  isLibraryOpen: (appState, defaultAppState) => {
+  isSidebarDocked: (appState, defaultAppState) => {
     return [
-      "openSidebar",
-      "isLibraryOpen" in appState
-        ? appState.isLibraryOpen
-          ? "library"
-          : null
-        : coalesceAppStateValue("openSidebar", appState, defaultAppState),
-    ];
-  },
-  isLibraryMenuDocked: (appState, defaultAppState) => {
-    return [
-      "isSidebarDocked",
-      appState.isLibraryMenuDocked ??
-        coalesceAppStateValue("isSidebarDocked", appState, defaultAppState),
+      "defaultSidebarDockedPreference",
+      appState.isSidebarDocked ??
+        coalesceAppStateValue(
+          "defaultSidebarDockedPreference",
+          appState,
+          defaultAppState,
+        ),
     ];
   },
 };
@@ -517,13 +541,10 @@ export const restoreAppState = (
         : appState.zoom?.value
         ? appState.zoom
         : defaultAppState.zoom,
-    // when sidebar docked and user left it open in last session,
-    // keep it open. If not docked, keep it closed irrespective of last state.
     openSidebar:
-      nextAppState.openSidebar === "library"
-        ? nextAppState.isSidebarDocked
-          ? "library"
-          : null
+      // string (legacy)
+      typeof (appState.openSidebar as any as string) === "string"
+        ? { name: DEFAULT_SIDEBAR.name }
         : nextAppState.openSidebar,
   };
 };
diff --git a/src/data/types.ts b/src/data/types.ts
index b8c959218..69112b6b6 100644
--- a/src/data/types.ts
+++ b/src/data/types.ts
@@ -25,10 +25,8 @@ export interface ExportedDataState {
  * Don't consume on its own.
  */
 export type LegacyAppState = {
-  /** @deprecated #5663 TODO remove 22-12-15 */
-  isLibraryOpen: [boolean, "openSidebar"];
-  /** @deprecated #5663 TODO remove 22-12-15 */
-  isLibraryMenuDocked: [boolean, "isSidebarDocked"];
+  /** @deprecated #6213 TODO remove 23-06-01 */
+  isSidebarDocked: [boolean, "defaultSidebarDockedPreference"];
 };
 
 export interface ImportedDataState {
diff --git a/src/data/url.test.tsx b/src/data/url.test.tsx
new file mode 100644
index 000000000..36bed0a38
--- /dev/null
+++ b/src/data/url.test.tsx
@@ -0,0 +1,30 @@
+import { normalizeLink } from "./url";
+
+describe("normalizeLink", () => {
+  // NOTE not an extensive XSS test suite, just to check if we're not
+  // regressing in sanitization
+  it("should sanitize links", () => {
+    expect(
+      // eslint-disable-next-line no-script-url
+      normalizeLink(`javascript://%0aalert(document.domain)`).startsWith(
+        // eslint-disable-next-line no-script-url
+        `javascript:`,
+      ),
+    ).toBe(false);
+    expect(normalizeLink("ola")).toBe("ola");
+    expect(normalizeLink(" ola")).toBe("ola");
+
+    expect(normalizeLink("https://www.excalidraw.com")).toBe(
+      "https://www.excalidraw.com",
+    );
+    expect(normalizeLink("www.excalidraw.com")).toBe("www.excalidraw.com");
+    expect(normalizeLink("/ola")).toBe("/ola");
+    expect(normalizeLink("http://test")).toBe("http://test");
+    expect(normalizeLink("ftp://test")).toBe("ftp://test");
+    expect(normalizeLink("file://")).toBe("file://");
+    expect(normalizeLink("file://")).toBe("file://");
+    expect(normalizeLink("[test](https://test)")).toBe("[test](https://test)");
+    expect(normalizeLink("[[test]]")).toBe("[[test]]");
+    expect(normalizeLink("<test>")).toBe("<test>");
+  });
+});
diff --git a/src/data/url.ts b/src/data/url.ts
new file mode 100644
index 000000000..d34320a5d
--- /dev/null
+++ b/src/data/url.ts
@@ -0,0 +1,9 @@
+import { sanitizeUrl } from "@braintree/sanitize-url";
+
+export const normalizeLink = (link: string) => {
+  return sanitizeUrl(link);
+};
+
+export const isLocalLink = (link: string | null) => {
+  return !!(link?.includes(location.origin) || link?.startsWith("/"));
+};
diff --git a/src/element/Hyperlink.tsx b/src/element/Hyperlink.tsx
index 43cbf0da5..cf741ce08 100644
--- a/src/element/Hyperlink.tsx
+++ b/src/element/Hyperlink.tsx
@@ -1,4 +1,4 @@
-import { AppState, ExcalidrawProps, Point } from "../types";
+import { AppState, ExcalidrawProps, Point, UIAppState } from "../types";
 import {
   getShortcutKey,
   sceneCoordsToViewportCoords,
@@ -29,6 +29,7 @@ import { getTooltipDiv, updateTooltipPosition } from "../components/Tooltip";
 import { getSelectedElements } from "../scene";
 import { isPointHittingElementBoundingBox } from "./collision";
 import { getElementAbsoluteCoords } from "./";
+import { isLocalLink, normalizeLink } from "../data/url";
 
 import "./Hyperlink.scss";
 import { trackEvent } from "../analytics";
@@ -166,7 +167,7 @@ export const Hyperlink = ({
         />
       ) : (
         <a
-          href={element.link || ""}
+          href={normalizeLink(element.link || "")}
           className={clsx("excalidraw-hyperlinkContainer-link", {
             "d-none": isEditing,
           })}
@@ -177,7 +178,13 @@ export const Hyperlink = ({
                 EVENT.EXCALIDRAW_LINK,
                 event.nativeEvent,
               );
-              onLinkOpen(element, customEvent);
+              onLinkOpen(
+                {
+                  ...element,
+                  link: normalizeLink(element.link),
+                },
+                customEvent,
+              );
               if (customEvent.defaultPrevented) {
                 event.preventDefault();
               }
@@ -231,21 +238,6 @@ const getCoordsForPopover = (
   return { x, y };
 };
 
-export const normalizeLink = (link: string) => {
-  link = link.trim();
-  if (link) {
-    // prefix with protocol if not fully-qualified
-    if (!link.includes("://") && !/^[[\\/]/.test(link)) {
-      link = `https://${link}`;
-    }
-  }
-  return link;
-};
-
-export const isLocalLink = (link: string | null) => {
-  return !!(link?.includes(location.origin) || link?.startsWith("/"));
-};
-
 export const actionLink = register({
   name: "hyperlink",
   perform: (elements, appState) => {
@@ -297,10 +289,11 @@ export const getContextMenuLabel = (
     : "labels.link.create";
   return label;
 };
+
 export const getLinkHandleFromCoords = (
   [x1, y1, x2, y2]: Bounds,
   angle: number,
-  appState: AppState,
+  appState: UIAppState,
 ): [x: number, y: number, width: number, height: number] => {
   const size = DEFAULT_LINK_SIZE;
   const linkWidth = size / appState.zoom.value;
@@ -343,7 +336,7 @@ export const isPointHittingLinkIcon = (
   if (
     !isMobile &&
     appState.viewModeEnabled &&
-    isPointHittingElementBoundingBox(element, [x, y], threshold)
+    isPointHittingElementBoundingBox(element, [x, y], threshold, null)
   ) {
     return true;
   }
@@ -439,7 +432,9 @@ export const shouldHideLinkPopup = (
 
   const threshold = 15 / appState.zoom.value;
   // hitbox to prevent hiding when hovered in element bounding box
-  if (isPointHittingElementBoundingBox(element, [sceneX, sceneY], threshold)) {
+  if (
+    isPointHittingElementBoundingBox(element, [sceneX, sceneY], threshold, null)
+  ) {
     return false;
   }
   const [x1, y1, x2] = getElementAbsoluteCoords(element);
diff --git a/src/element/binding.ts b/src/element/binding.ts
index b5ae041bd..b175f14e7 100644
--- a/src/element/binding.ts
+++ b/src/element/binding.ts
@@ -39,7 +39,7 @@ export type SuggestedPointBinding = [
 ];
 
 export const shouldEnableBindingForPointerEvent = (
-  event: React.PointerEvent<HTMLCanvasElement>,
+  event: React.PointerEvent<HTMLElement>,
 ) => {
   return !event[KEYS.CTRL_OR_CMD];
 };
diff --git a/src/element/bounds.ts b/src/element/bounds.ts
index 3245ca3fc..a2a04439b 100644
--- a/src/element/bounds.ts
+++ b/src/element/bounds.ts
@@ -6,7 +6,7 @@ import {
   NonDeleted,
   ExcalidrawTextElementWithContainer,
 } from "./types";
-import { distance2d, rotate } from "../math";
+import { distance2d, rotate, rotatePoint } from "../math";
 import rough from "roughjs/bin/rough";
 import { Drawable, Op } from "roughjs/bin/core";
 import { Point } from "../types";
@@ -25,10 +25,101 @@ import { getBoundTextElement, getContainerElement } from "./textElement";
 import { LinearElementEditor } from "./linearElementEditor";
 import { Mutable } from "../utility-types";
 
-// x and y position of top left corner, x and y position of bottom right corner
-export type Bounds = readonly [number, number, number, number];
+export type RectangleBox = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  angle: number;
+};
+
 type MaybeQuadraticSolution = [number | null, number | null] | false;
 
+// x and y position of top left corner, x and y position of bottom right corner
+export type Bounds = readonly [x1: number, y1: number, x2: number, y2: number];
+
+export class ElementBounds {
+  private static boundsCache = new WeakMap<
+    ExcalidrawElement,
+    {
+      bounds: Bounds;
+      version: ExcalidrawElement["version"];
+    }
+  >();
+
+  static getBounds(element: ExcalidrawElement) {
+    const cachedBounds = ElementBounds.boundsCache.get(element);
+
+    if (cachedBounds?.version && cachedBounds.version === element.version) {
+      return cachedBounds.bounds;
+    }
+
+    const bounds = ElementBounds.calculateBounds(element);
+
+    ElementBounds.boundsCache.set(element, {
+      version: element.version,
+      bounds,
+    });
+
+    return bounds;
+  }
+
+  private static calculateBounds(element: ExcalidrawElement): Bounds {
+    let bounds: [number, number, number, number];
+
+    const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element);
+
+    if (isFreeDrawElement(element)) {
+      const [minX, minY, maxX, maxY] = getBoundsFromPoints(
+        element.points.map(([x, y]) =>
+          rotate(x, y, cx - element.x, cy - element.y, element.angle),
+        ),
+      );
+
+      return [
+        minX + element.x,
+        minY + element.y,
+        maxX + element.x,
+        maxY + element.y,
+      ];
+    } else if (isLinearElement(element)) {
+      bounds = getLinearElementRotatedBounds(element, cx, cy);
+    } else if (element.type === "diamond") {
+      const [x11, y11] = rotate(cx, y1, cx, cy, element.angle);
+      const [x12, y12] = rotate(cx, y2, cx, cy, element.angle);
+      const [x22, y22] = rotate(x1, cy, cx, cy, element.angle);
+      const [x21, y21] = rotate(x2, cy, cx, cy, element.angle);
+      const minX = Math.min(x11, x12, x22, x21);
+      const minY = Math.min(y11, y12, y22, y21);
+      const maxX = Math.max(x11, x12, x22, x21);
+      const maxY = Math.max(y11, y12, y22, y21);
+      bounds = [minX, minY, maxX, maxY];
+    } else if (element.type === "ellipse") {
+      const w = (x2 - x1) / 2;
+      const h = (y2 - y1) / 2;
+      const cos = Math.cos(element.angle);
+      const sin = Math.sin(element.angle);
+      const ww = Math.hypot(w * cos, h * sin);
+      const hh = Math.hypot(h * cos, w * sin);
+      bounds = [cx - ww, cy - hh, cx + ww, cy + hh];
+    } else {
+      const [x11, y11] = rotate(x1, y1, cx, cy, element.angle);
+      const [x12, y12] = rotate(x1, y2, cx, cy, element.angle);
+      const [x22, y22] = rotate(x2, y2, cx, cy, element.angle);
+      const [x21, y21] = rotate(x2, y1, cx, cy, element.angle);
+      const minX = Math.min(x11, x12, x22, x21);
+      const minY = Math.min(y11, y12, y22, y21);
+      const maxX = Math.max(x11, x12, x22, x21);
+      const maxY = Math.max(y11, y12, y22, y21);
+      bounds = [minX, minY, maxX, maxY];
+    }
+
+    return bounds;
+  }
+}
+
+// Scene -> Scene coords, but in x1,x2,y1,y2 format.
+//
 // If the element is created from right to left, the width is going to be negative
 // This set of functions retrieves the absolute position of the 4 points.
 export const getElementAbsoluteCoords = (
@@ -69,6 +160,111 @@ export const getElementAbsoluteCoords = (
   ];
 };
 
+/**
+ * for a given element, `getElementLineSegments` returns line segments
+ * that can be used for visual collision detection (useful for frames)
+ * as opposed to bounding box collision detection
+ */
+export const getElementLineSegments = (
+  element: ExcalidrawElement,
+): [Point, Point][] => {
+  const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element);
+
+  const center: Point = [cx, cy];
+
+  if (isLinearElement(element) || isFreeDrawElement(element)) {
+    const segments: [Point, Point][] = [];
+
+    let i = 0;
+
+    while (i < element.points.length - 1) {
+      segments.push([
+        rotatePoint(
+          [
+            element.points[i][0] + element.x,
+            element.points[i][1] + element.y,
+          ] as Point,
+          center,
+          element.angle,
+        ),
+        rotatePoint(
+          [
+            element.points[i + 1][0] + element.x,
+            element.points[i + 1][1] + element.y,
+          ] as Point,
+          center,
+          element.angle,
+        ),
+      ]);
+      i++;
+    }
+
+    return segments;
+  }
+
+  const [nw, ne, sw, se, n, s, w, e] = (
+    [
+      [x1, y1],
+      [x2, y1],
+      [x1, y2],
+      [x2, y2],
+      [cx, y1],
+      [cx, y2],
+      [x1, cy],
+      [x2, cy],
+    ] as Point[]
+  ).map((point) => rotatePoint(point, center, element.angle));
+
+  if (element.type === "diamond") {
+    return [
+      [n, w],
+      [n, e],
+      [s, w],
+      [s, e],
+    ];
+  }
+
+  if (element.type === "ellipse") {
+    return [
+      [n, w],
+      [n, e],
+      [s, w],
+      [s, e],
+      [n, w],
+      [n, e],
+      [s, w],
+      [s, e],
+    ];
+  }
+
+  return [
+    [nw, ne],
+    [sw, se],
+    [nw, sw],
+    [ne, se],
+    [nw, e],
+    [sw, e],
+    [ne, w],
+    [se, w],
+  ];
+};
+
+/**
+ * Scene -> Scene coords, but in x1,x2,y1,y2 format.
+ *
+ * Rectangle here means any rectangular frame, not an excalidraw element.
+ */
+export const getRectangleBoxAbsoluteCoords = (boxSceneCoords: RectangleBox) => {
+  return [
+    boxSceneCoords.x,
+    boxSceneCoords.y,
+    boxSceneCoords.x + boxSceneCoords.width,
+    boxSceneCoords.y + boxSceneCoords.height,
+    boxSceneCoords.x + boxSceneCoords.width / 2,
+    boxSceneCoords.y + boxSceneCoords.height / 2,
+  ];
+};
+
 export const pointRelativeTo = (
   element: ExcalidrawElement,
   absoluteCoords: Point,
@@ -454,64 +650,12 @@ const getLinearElementRotatedBounds = (
   return coords;
 };
 
-// We could cache this stuff
-export const getElementBounds = (
-  element: ExcalidrawElement,
-): [number, number, number, number] => {
-  let bounds: [number, number, number, number];
-
-  const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element);
-  if (isFreeDrawElement(element)) {
-    const [minX, minY, maxX, maxY] = getBoundsFromPoints(
-      element.points.map(([x, y]) =>
-        rotate(x, y, cx - element.x, cy - element.y, element.angle),
-      ),
-    );
-
-    return [
-      minX + element.x,
-      minY + element.y,
-      maxX + element.x,
-      maxY + element.y,
-    ];
-  } else if (isLinearElement(element)) {
-    bounds = getLinearElementRotatedBounds(element, cx, cy);
-  } else if (element.type === "diamond") {
-    const [x11, y11] = rotate(cx, y1, cx, cy, element.angle);
-    const [x12, y12] = rotate(cx, y2, cx, cy, element.angle);
-    const [x22, y22] = rotate(x1, cy, cx, cy, element.angle);
-    const [x21, y21] = rotate(x2, cy, cx, cy, element.angle);
-    const minX = Math.min(x11, x12, x22, x21);
-    const minY = Math.min(y11, y12, y22, y21);
-    const maxX = Math.max(x11, x12, x22, x21);
-    const maxY = Math.max(y11, y12, y22, y21);
-    bounds = [minX, minY, maxX, maxY];
-  } else if (element.type === "ellipse") {
-    const w = (x2 - x1) / 2;
-    const h = (y2 - y1) / 2;
-    const cos = Math.cos(element.angle);
-    const sin = Math.sin(element.angle);
-    const ww = Math.hypot(w * cos, h * sin);
-    const hh = Math.hypot(h * cos, w * sin);
-    bounds = [cx - ww, cy - hh, cx + ww, cy + hh];
-  } else {
-    const [x11, y11] = rotate(x1, y1, cx, cy, element.angle);
-    const [x12, y12] = rotate(x1, y2, cx, cy, element.angle);
-    const [x22, y22] = rotate(x2, y2, cx, cy, element.angle);
-    const [x21, y21] = rotate(x2, y1, cx, cy, element.angle);
-    const minX = Math.min(x11, x12, x22, x21);
-    const minY = Math.min(y11, y12, y22, y21);
-    const maxX = Math.max(x11, x12, x22, x21);
-    const maxY = Math.max(y11, y12, y22, y21);
-    bounds = [minX, minY, maxX, maxY];
-  }
-
-  return bounds;
+export const getElementBounds = (element: ExcalidrawElement): Bounds => {
+  return ElementBounds.getBounds(element);
 };
-
 export const getCommonBounds = (
   elements: readonly ExcalidrawElement[],
-): [number, number, number, number] => {
+): Bounds => {
   if (!elements.length) {
     return [0, 0, 0, 0];
   }
@@ -608,7 +752,7 @@ export const getElementPointsCoords = (
 export const getClosestElementBounds = (
   elements: readonly ExcalidrawElement[],
   from: { x: number; y: number },
-): [number, number, number, number] => {
+): Bounds => {
   if (!elements.length) {
     return [0, 0, 0, 0];
   }
@@ -629,7 +773,7 @@ export const getClosestElementBounds = (
   return getElementBounds(closestElement);
 };
 
-export interface Box {
+export interface BoundingBox {
   minX: number;
   minY: number;
   maxX: number;
@@ -642,7 +786,7 @@ export interface Box {
 
 export const getCommonBoundingBox = (
   elements: ExcalidrawElement[] | readonly NonDeleted<ExcalidrawElement>[],
-): Box => {
+): BoundingBox => {
   const [minX, minY, maxX, maxY] = getCommonBounds(elements);
   return {
     minX,
diff --git a/src/element/collision.ts b/src/element/collision.ts
index 0e7257d79..f160783e6 100644
--- a/src/element/collision.ts
+++ b/src/element/collision.ts
@@ -26,10 +26,16 @@ import {
   ExcalidrawImageElement,
   ExcalidrawLinearElement,
   StrokeRoundness,
+  ExcalidrawFrameElement,
 } from "./types";
 
-import { getElementAbsoluteCoords, getCurvePathOps, Bounds } from "./bounds";
-import { Point } from "../types";
+import {
+  getElementAbsoluteCoords,
+  getCurvePathOps,
+  getRectangleBoxAbsoluteCoords,
+  RectangleBox,
+} from "./bounds";
+import { FrameNameBoundsCache, Point } from "../types";
 import { Drawable } from "roughjs/bin/core";
 import { AppState } from "../types";
 import { getShapeForElement } from "../renderer/renderElement";
@@ -61,6 +67,7 @@ const isElementDraggableFromInside = (
 export const hitTest = (
   element: NonDeletedExcalidrawElement,
   appState: AppState,
+  frameNameBoundsCache: FrameNameBoundsCache,
   x: number,
   y: number,
 ): boolean => {
@@ -72,22 +79,39 @@ export const hitTest = (
     isElementSelected(appState, element) &&
     shouldShowBoundingBox([element], appState)
   ) {
-    return isPointHittingElementBoundingBox(element, point, threshold);
+    return isPointHittingElementBoundingBox(
+      element,
+      point,
+      threshold,
+      frameNameBoundsCache,
+    );
   }
 
   const boundTextElement = getBoundTextElement(element);
   if (boundTextElement) {
-    const isHittingBoundTextElement = hitTest(boundTextElement, appState, x, y);
+    const isHittingBoundTextElement = hitTest(
+      boundTextElement,
+      appState,
+      frameNameBoundsCache,
+      x,
+      y,
+    );
     if (isHittingBoundTextElement) {
       return true;
     }
   }
-  return isHittingElementNotConsideringBoundingBox(element, appState, point);
+  return isHittingElementNotConsideringBoundingBox(
+    element,
+    appState,
+    frameNameBoundsCache,
+    point,
+  );
 };
 
 export const isHittingElementBoundingBoxWithoutHittingElement = (
   element: NonDeletedExcalidrawElement,
   appState: AppState,
+  frameNameBoundsCache: FrameNameBoundsCache,
   x: number,
   y: number,
 ): boolean => {
@@ -96,19 +120,33 @@ export const isHittingElementBoundingBoxWithoutHittingElement = (
   // So that bound text element hit is considered within bounding box of container even if its outside actual bounding box of element
   // eg for linear elements text can be outside the element bounding box
   const boundTextElement = getBoundTextElement(element);
-  if (boundTextElement && hitTest(boundTextElement, appState, x, y)) {
+  if (
+    boundTextElement &&
+    hitTest(boundTextElement, appState, frameNameBoundsCache, x, y)
+  ) {
     return false;
   }
 
   return (
-    !isHittingElementNotConsideringBoundingBox(element, appState, [x, y]) &&
-    isPointHittingElementBoundingBox(element, [x, y], threshold)
+    !isHittingElementNotConsideringBoundingBox(
+      element,
+      appState,
+      frameNameBoundsCache,
+      [x, y],
+    ) &&
+    isPointHittingElementBoundingBox(
+      element,
+      [x, y],
+      threshold,
+      frameNameBoundsCache,
+    )
   );
 };
 
 export const isHittingElementNotConsideringBoundingBox = (
   element: NonDeletedExcalidrawElement,
   appState: AppState,
+  frameNameBoundsCache: FrameNameBoundsCache | null,
   point: Point,
 ): boolean => {
   const threshold = 10 / appState.zoom.value;
@@ -117,7 +155,13 @@ export const isHittingElementNotConsideringBoundingBox = (
     : isElementDraggableFromInside(element)
     ? isInsideCheck
     : isNearCheck;
-  return hitTestPointAgainstElement({ element, point, threshold, check });
+  return hitTestPointAgainstElement({
+    element,
+    point,
+    threshold,
+    check,
+    frameNameBoundsCache,
+  });
 };
 
 const isElementSelected = (
@@ -129,7 +173,22 @@ export const isPointHittingElementBoundingBox = (
   element: NonDeleted<ExcalidrawElement>,
   [x, y]: Point,
   threshold: number,
+  frameNameBoundsCache: FrameNameBoundsCache | null,
 ) => {
+  // frames needs be checked differently so as to be able to drag it
+  // by its frame, whether it has been selected or not
+  // this logic here is not ideal
+  // TODO: refactor it later...
+  if (element.type === "frame") {
+    return hitTestPointAgainstElement({
+      element,
+      point: [x, y],
+      threshold,
+      check: isInsideCheck,
+      frameNameBoundsCache,
+    });
+  }
+
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
   const elementCenterX = (x1 + x2) / 2;
   const elementCenterY = (y1 + y2) / 2;
@@ -157,7 +216,13 @@ export const bindingBorderTest = (
   const threshold = maxBindingGap(element, element.width, element.height);
   const check = isOutsideCheck;
   const point: Point = [x, y];
-  return hitTestPointAgainstElement({ element, point, threshold, check });
+  return hitTestPointAgainstElement({
+    element,
+    point,
+    threshold,
+    check,
+    frameNameBoundsCache: null,
+  });
 };
 
 export const maxBindingGap = (
@@ -177,6 +242,7 @@ type HitTestArgs = {
   point: Point;
   threshold: number;
   check: (distance: number, threshold: number) => boolean;
+  frameNameBoundsCache: FrameNameBoundsCache | null;
 };
 
 const hitTestPointAgainstElement = (args: HitTestArgs): boolean => {
@@ -208,6 +274,27 @@ const hitTestPointAgainstElement = (args: HitTestArgs): boolean => {
         "This should not happen, we need to investigate why it does.",
       );
       return false;
+    case "frame": {
+      // check distance to frame element first
+      if (
+        args.check(
+          distanceToBindableElement(args.element, args.point),
+          args.threshold,
+        )
+      ) {
+        return true;
+      }
+
+      const frameNameBounds = args.frameNameBoundsCache?.get(args.element);
+
+      if (frameNameBounds) {
+        return args.check(
+          distanceToRectangleBox(frameNameBounds, args.point),
+          args.threshold,
+        );
+      }
+      return false;
+    }
   }
 };
 
@@ -219,6 +306,7 @@ export const distanceToBindableElement = (
     case "rectangle":
     case "image":
     case "text":
+    case "frame":
       return distanceToRectangle(element, point);
     case "diamond":
       return distanceToDiamond(element, point);
@@ -248,7 +336,8 @@ const distanceToRectangle = (
     | ExcalidrawRectangleElement
     | ExcalidrawTextElement
     | ExcalidrawFreeDrawElement
-    | ExcalidrawImageElement,
+    | ExcalidrawImageElement
+    | ExcalidrawFrameElement,
   point: Point,
 ): number => {
   const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point);
@@ -258,6 +347,14 @@ const distanceToRectangle = (
   );
 };
 
+const distanceToRectangleBox = (box: RectangleBox, point: Point): number => {
+  const [, pointRel, hwidth, hheight] = pointRelativeToDivElement(point, box);
+  return Math.max(
+    GAPoint.distanceToLine(pointRel, GALine.equation(0, 1, -hheight)),
+    GAPoint.distanceToLine(pointRel, GALine.equation(1, 0, -hwidth)),
+  );
+};
+
 const distanceToDiamond = (
   element: ExcalidrawDiamondElement,
   point: Point,
@@ -457,8 +554,7 @@ const pointRelativeToElement = (
 ): [GA.Point, GA.Point, number, number] => {
   const point = GAPoint.from(pointTuple);
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-  const elementCoords = getElementAbsoluteCoords(element);
-  const center = coordsCenter([x1, y1, x2, y2]);
+  const center = coordsCenter(x1, y1, x2, y2);
   // GA has angle orientation opposite to `rotate`
   const rotate = GATransform.rotation(center, element.angle);
   const pointRotated = GATransform.apply(rotate, point);
@@ -466,9 +562,26 @@ const pointRelativeToElement = (
   const pointRelToCenterAbs = GAPoint.abs(pointRelToCenter);
   const elementPos = GA.offset(element.x, element.y);
   const pointRelToPos = GA.sub(pointRotated, elementPos);
-  const [ax, ay, bx, by] = elementCoords;
-  const halfWidth = (bx - ax) / 2;
-  const halfHeight = (by - ay) / 2;
+  const halfWidth = (x2 - x1) / 2;
+  const halfHeight = (y2 - y1) / 2;
+  return [pointRelToPos, pointRelToCenterAbs, halfWidth, halfHeight];
+};
+
+const pointRelativeToDivElement = (
+  pointTuple: Point,
+  rectangle: RectangleBox,
+): [GA.Point, GA.Point, number, number] => {
+  const point = GAPoint.from(pointTuple);
+  const [x1, y1, x2, y2] = getRectangleBoxAbsoluteCoords(rectangle);
+  const center = coordsCenter(x1, y1, x2, y2);
+  const rotate = GATransform.rotation(center, rectangle.angle);
+  const pointRotated = GATransform.apply(rotate, point);
+  const pointRelToCenter = GA.sub(pointRotated, GADirection.from(center));
+  const pointRelToCenterAbs = GAPoint.abs(pointRelToCenter);
+  const elementPos = GA.offset(rectangle.x, rectangle.y);
+  const pointRelToPos = GA.sub(pointRotated, elementPos);
+  const halfWidth = (x2 - x1) / 2;
+  const halfHeight = (y2 - y1) / 2;
   return [pointRelToPos, pointRelToCenterAbs, halfWidth, halfHeight];
 };
 
@@ -490,7 +603,7 @@ const relativizationToElementCenter = (
   element: ExcalidrawElement,
 ): GA.Transform => {
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-  const center = coordsCenter([x1, y1, x2, y2]);
+  const center = coordsCenter(x1, y1, x2, y2);
   // GA has angle orientation opposite to `rotate`
   const rotate = GATransform.rotation(center, element.angle);
   const translate = GA.reverse(
@@ -499,8 +612,13 @@ const relativizationToElementCenter = (
   return GATransform.compose(rotate, translate);
 };
 
-const coordsCenter = ([ax, ay, bx, by]: Bounds): GA.Point => {
-  return GA.point((ax + bx) / 2, (ay + by) / 2);
+const coordsCenter = (
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+): GA.Point => {
+  return GA.point((x1 + x2) / 2, (y1 + y2) / 2);
 };
 
 // The focus distance is the oriented ratio between the size of
@@ -531,6 +649,7 @@ export const determineFocusDistance = (
     case "rectangle":
     case "image":
     case "text":
+    case "frame":
       return c / (hwidth * (nabs + q * mabs));
     case "diamond":
       return mabs < nabs ? c / (nabs * hwidth) : c / (mabs * hheight);
@@ -548,7 +667,7 @@ export const determineFocusPoint = (
 ): Point => {
   if (focus === 0) {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-    const center = coordsCenter([x1, y1, x2, y2]);
+    const center = coordsCenter(x1, y1, x2, y2);
     return GAPoint.toTuple(center);
   }
   const relateToCenter = relativizationToElementCenter(element);
@@ -563,6 +682,7 @@ export const determineFocusPoint = (
     case "image":
     case "text":
     case "diamond":
+    case "frame":
       point = findFocusPointForRectangulars(element, focus, adjecentPointRel);
       break;
     case "ellipse":
@@ -613,6 +733,7 @@ const getSortedElementLineIntersections = (
     case "image":
     case "text":
     case "diamond":
+    case "frame":
       const corners = getCorners(element);
       intersections = corners
         .flatMap((point, i) => {
@@ -646,7 +767,8 @@ const getCorners = (
     | ExcalidrawRectangleElement
     | ExcalidrawImageElement
     | ExcalidrawDiamondElement
-    | ExcalidrawTextElement,
+    | ExcalidrawTextElement
+    | ExcalidrawFrameElement,
   scale: number = 1,
 ): GA.Point[] => {
   const hx = (scale * element.width) / 2;
@@ -655,6 +777,7 @@ const getCorners = (
     case "rectangle":
     case "image":
     case "text":
+    case "frame":
       return [
         GA.point(hx, hy),
         GA.point(hx, -hy),
@@ -802,7 +925,8 @@ export const findFocusPointForRectangulars = (
     | ExcalidrawRectangleElement
     | ExcalidrawImageElement
     | ExcalidrawDiamondElement
-    | ExcalidrawTextElement,
+    | ExcalidrawTextElement
+    | ExcalidrawFrameElement,
   // Between -1 and 1 for how far away should the focus point be relative
   // to the size of the element. Sign determines orientation.
   relativeDistance: number,
diff --git a/src/element/dragElements.ts b/src/element/dragElements.ts
index 56296e464..4dc5322ba 100644
--- a/src/element/dragElements.ts
+++ b/src/element/dragElements.ts
@@ -6,6 +6,8 @@ import { NonDeletedExcalidrawElement } from "./types";
 import { AppState, PointerDownState } from "../types";
 import { getBoundTextElement } from "./textElement";
 import { isSelectedViaGroup } from "../groups";
+import Scene from "../scene/Scene";
+import { isFrameElement } from "./typeChecks";
 
 export const dragSelectedElements = (
   pointerDownState: PointerDownState,
@@ -16,10 +18,31 @@ export const dragSelectedElements = (
   distanceX: number = 0,
   distanceY: number = 0,
   appState: AppState,
+  scene: Scene,
 ) => {
   const [x1, y1] = getCommonBounds(selectedElements);
   const offset = { x: pointerX - x1, y: pointerY - y1 };
-  selectedElements.forEach((element) => {
+
+  // we do not want a frame and its elements to be selected at the same time
+  // but when it happens (due to some bug), we want to avoid updating element
+  // in the frame twice, hence the use of set
+  const elementsToUpdate = new Set<NonDeletedExcalidrawElement>(
+    selectedElements,
+  );
+  const frames = selectedElements
+    .filter((e) => isFrameElement(e))
+    .map((f) => f.id);
+
+  if (frames.length > 0) {
+    const elementsInFrames = scene
+      .getNonDeletedElements()
+      .filter((e) => e.frameId !== null)
+      .filter((e) => frames.includes(e.frameId!));
+
+    elementsInFrames.forEach((element) => elementsToUpdate.add(element));
+  }
+
+  elementsToUpdate.forEach((element) => {
     updateElementCoords(
       lockDirection,
       distanceX,
@@ -38,7 +61,13 @@ export const dragSelectedElements = (
       (appState.editingGroupId && !isSelectedViaGroup(appState, element))
     ) {
       const textElement = getBoundTextElement(element);
-      if (textElement) {
+      if (
+        textElement &&
+        // when container is added to a frame, so will its bound text
+        // so the text is already in `elementsToUpdate` and we should avoid
+        // updating its coords again
+        (!textElement.frameId || !frames.includes(textElement.frameId))
+      ) {
         updateElementCoords(
           lockDirection,
           distanceX,
@@ -50,7 +79,7 @@ export const dragSelectedElements = (
       }
     }
     updateBoundElements(element, {
-      simultaneouslyUpdated: selectedElements,
+      simultaneouslyUpdated: Array.from(elementsToUpdate),
     });
   });
 };
diff --git a/src/element/index.ts b/src/element/index.ts
index c3543fee6..72375bfea 100644
--- a/src/element/index.ts
+++ b/src/element/index.ts
@@ -2,6 +2,7 @@ import {
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
   NonDeleted,
+  ExcalidrawFrameElement,
 } from "./types";
 import { isInvisiblySmallElement } from "./sizeHelpers";
 import { isLinearElementType } from "./typeChecks";
@@ -49,7 +50,11 @@ export {
   getDragOffsetXY,
   dragNewElement,
 } from "./dragElements";
-export { isTextElement, isExcalidrawElement } from "./typeChecks";
+export {
+  isTextElement,
+  isExcalidrawElement,
+  isFrameElement,
+} from "./typeChecks";
 export { textWysiwyg } from "./textWysiwyg";
 export { redrawTextBoundingBox } from "./textElement";
 export {
@@ -74,6 +79,13 @@ export const getNonDeletedElements = (elements: readonly ExcalidrawElement[]) =>
     (element) => !element.isDeleted,
   ) as readonly NonDeletedExcalidrawElement[];
 
+export const getNonDeletedFrames = (
+  frames: readonly ExcalidrawFrameElement[],
+) =>
+  frames.filter(
+    (frame) => !frame.isDeleted,
+  ) as readonly NonDeleted<ExcalidrawFrameElement>[];
+
 export const isNonDeletedElement = <T extends ExcalidrawElement>(
   element: T,
 ): element is NonDeleted<T> => !element.isDeleted;
diff --git a/src/element/linearElementEditor.ts b/src/element/linearElementEditor.ts
index aedc25974..b10493e0d 100644
--- a/src/element/linearElementEditor.ts
+++ b/src/element/linearElementEditor.ts
@@ -594,7 +594,7 @@ export class LinearElementEditor {
   }
 
   static handlePointerDown(
-    event: React.PointerEvent<HTMLCanvasElement>,
+    event: React.PointerEvent<HTMLElement>,
     appState: AppState,
     history: History,
     scenePointer: { x: number; y: number },
diff --git a/src/element/newElement.ts b/src/element/newElement.ts
index e3b25e848..848a6af7a 100644
--- a/src/element/newElement.ts
+++ b/src/element/newElement.ts
@@ -12,6 +12,7 @@ import {
   ExcalidrawFreeDrawElement,
   FontFamilyValues,
   ExcalidrawTextContainer,
+  ExcalidrawFrameElement,
 } from "../element/types";
 import {
   arrayToMap,
@@ -20,24 +21,28 @@ import {
   isTestEnv,
 } from "../utils";
 import { randomInteger, randomId } from "../random";
-import { mutateElement, newElementWith } from "./mutateElement";
+import { bumpVersion, newElementWith } from "./mutateElement";
 import { getNewGroupIdsForDuplication } from "../groups";
 import { AppState } from "../types";
 import { getElementAbsoluteCoords } from ".";
 import { adjustXYWithRotation } from "../math";
 import { getResizedElementAbsoluteCoords } from "./bounds";
 import {
-  getBoundTextElementOffset,
-  getContainerDims,
   getContainerElement,
   measureText,
   normalizeText,
   wrapText,
-  getMaxContainerWidth,
+  getBoundTextMaxWidth,
   getDefaultLineHeight,
 } from "./textElement";
-import { VERTICAL_ALIGN } from "../constants";
-import { isArrowElement } from "./typeChecks";
+import {
+  DEFAULT_ELEMENT_PROPS,
+  DEFAULT_FONT_FAMILY,
+  DEFAULT_FONT_SIZE,
+  DEFAULT_TEXT_ALIGN,
+  DEFAULT_VERTICAL_ALIGN,
+  VERTICAL_ALIGN,
+} from "../constants";
 import { MarkOptional, Merge, Mutable } from "../utility-types";
 
 type ElementConstructorOpts = MarkOptional<
@@ -46,11 +51,21 @@ type ElementConstructorOpts = MarkOptional<
   | "height"
   | "angle"
   | "groupIds"
+  | "frameId"
   | "boundElements"
   | "seed"
   | "version"
   | "versionNonce"
   | "link"
+  | "strokeStyle"
+  | "fillStyle"
+  | "strokeColor"
+  | "backgroundColor"
+  | "roughness"
+  | "strokeWidth"
+  | "roundness"
+  | "locked"
+  | "opacity"
 >;
 
 const _newElementBase = <T extends ExcalidrawElement>(
@@ -58,21 +73,22 @@ const _newElementBase = <T extends ExcalidrawElement>(
   {
     x,
     y,
-    strokeColor,
-    backgroundColor,
-    fillStyle,
-    strokeWidth,
-    strokeStyle,
-    roughness,
-    opacity,
+    strokeColor = DEFAULT_ELEMENT_PROPS.strokeColor,
+    backgroundColor = DEFAULT_ELEMENT_PROPS.backgroundColor,
+    fillStyle = DEFAULT_ELEMENT_PROPS.fillStyle,
+    strokeWidth = DEFAULT_ELEMENT_PROPS.strokeWidth,
+    strokeStyle = DEFAULT_ELEMENT_PROPS.strokeStyle,
+    roughness = DEFAULT_ELEMENT_PROPS.roughness,
+    opacity = DEFAULT_ELEMENT_PROPS.opacity,
     width = 0,
     height = 0,
     angle = 0,
     groupIds = [],
+    frameId = null,
     roundness = null,
     boundElements = null,
     link = null,
-    locked,
+    locked = DEFAULT_ELEMENT_PROPS.locked,
     ...rest
   }: ElementConstructorOpts & Omit<Partial<ExcalidrawGenericElement>, "type">,
 ) => {
@@ -93,6 +109,7 @@ const _newElementBase = <T extends ExcalidrawElement>(
     roughness,
     opacity,
     groupIds,
+    frameId,
     roundness,
     seed: rest.seed ?? randomInteger(),
     version: rest.version || 1,
@@ -113,6 +130,21 @@ export const newElement = (
 ): NonDeleted<ExcalidrawGenericElement> =>
   _newElementBase<ExcalidrawGenericElement>(opts.type, opts);
 
+export const newFrameElement = (
+  opts: ElementConstructorOpts,
+): NonDeleted<ExcalidrawFrameElement> => {
+  const frameElement = newElementWith(
+    {
+      ..._newElementBase<ExcalidrawFrameElement>("frame", opts),
+      type: "frame",
+      name: null,
+    },
+    {},
+  );
+
+  return frameElement;
+};
+
 /** computes element x/y offset based on textAlign/verticalAlign */
 const getTextElementPositionOffsets = (
   opts: {
@@ -138,27 +170,40 @@ const getTextElementPositionOffsets = (
 export const newTextElement = (
   opts: {
     text: string;
-    fontSize: number;
-    fontFamily: FontFamilyValues;
-    textAlign: TextAlign;
-    verticalAlign: VerticalAlign;
+    fontSize?: number;
+    fontFamily?: FontFamilyValues;
+    textAlign?: TextAlign;
+    verticalAlign?: VerticalAlign;
     containerId?: ExcalidrawTextContainer["id"];
     lineHeight?: ExcalidrawTextElement["lineHeight"];
+    strokeWidth?: ExcalidrawTextElement["strokeWidth"];
+    isFrameName?: boolean;
   } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawTextElement> => {
-  const lineHeight = opts.lineHeight || getDefaultLineHeight(opts.fontFamily);
+  const fontFamily = opts.fontFamily || DEFAULT_FONT_FAMILY;
+  const fontSize = opts.fontSize || DEFAULT_FONT_SIZE;
+  const lineHeight = opts.lineHeight || getDefaultLineHeight(fontFamily);
   const text = normalizeText(opts.text);
-  const metrics = measureText(text, getFontString(opts), lineHeight);
-  const offsets = getTextElementPositionOffsets(opts, metrics);
+  const metrics = measureText(
+    text,
+    getFontString({ fontFamily, fontSize }),
+    lineHeight,
+  );
+  const textAlign = opts.textAlign || DEFAULT_TEXT_ALIGN;
+  const verticalAlign = opts.verticalAlign || DEFAULT_VERTICAL_ALIGN;
+  const offsets = getTextElementPositionOffsets(
+    { textAlign, verticalAlign },
+    metrics,
+  );
 
   const textElement = newElementWith(
     {
       ..._newElementBase<ExcalidrawTextElement>("text", opts),
       text,
-      fontSize: opts.fontSize,
-      fontFamily: opts.fontFamily,
-      textAlign: opts.textAlign,
-      verticalAlign: opts.verticalAlign,
+      fontSize,
+      fontFamily,
+      textAlign,
+      verticalAlign,
       x: opts.x - offsets.x,
       y: opts.y - offsets.y,
       width: metrics.width,
@@ -167,6 +212,7 @@ export const newTextElement = (
       containerId: opts.containerId || null,
       originalText: text,
       lineHeight,
+      isFrameName: opts.isFrameName || false,
     },
     {},
   );
@@ -183,8 +229,6 @@ const getAdjustedDimensions = (
   height: number;
   baseline: number;
 } => {
-  const container = getContainerElement(element);
-
   const {
     width: nextWidth,
     height: nextHeight,
@@ -240,27 +284,6 @@ const getAdjustedDimensions = (
     );
   }
 
-  // make sure container dimensions are set properly when
-  // text editor overflows beyond viewport dimensions
-  if (container) {
-    const boundTextElementPadding = getBoundTextElementOffset(element);
-
-    const containerDims = getContainerDims(container);
-    let height = containerDims.height;
-    let width = containerDims.width;
-    if (nextHeight > height - boundTextElementPadding * 2) {
-      height = nextHeight + boundTextElementPadding * 2;
-    }
-    if (nextWidth > width - boundTextElementPadding * 2) {
-      width = nextWidth + boundTextElementPadding * 2;
-    }
-    if (
-      !isArrowElement(container) &&
-      (height !== containerDims.height || width !== containerDims.width)
-    ) {
-      mutateElement(container, { height, width });
-    }
-  }
   return {
     width: nextWidth,
     height: nextHeight,
@@ -282,7 +305,7 @@ export const refreshTextDimensions = (
     text = wrapText(
       text,
       getFontString(textElement),
-      getMaxContainerWidth(container),
+      getBoundTextMaxWidth(container),
     );
   }
   const dimensions = getAdjustedDimensions(textElement, text);
@@ -511,8 +534,16 @@ export const duplicateElement = <TElement extends ExcalidrawElement>(
  * it's advised to supply the whole elements array, or sets of elements that
  * are encapsulated (such as library items), if the purpose is to retain
  * bindings to the cloned elements intact.
+ *
+ * NOTE by default does not randomize or regenerate anything except the id.
  */
-export const duplicateElements = (elements: readonly ExcalidrawElement[]) => {
+export const duplicateElements = (
+  elements: readonly ExcalidrawElement[],
+  opts?: {
+    /** NOTE also updates version flags and `updated` */
+    randomizeSeed: boolean;
+  },
+) => {
   const clonedElements: ExcalidrawElement[] = [];
 
   const origElementsMap = arrayToMap(elements);
@@ -546,6 +577,11 @@ export const duplicateElements = (elements: readonly ExcalidrawElement[]) => {
 
     clonedElement.id = maybeGetNewId(element.id)!;
 
+    if (opts?.randomizeSeed) {
+      clonedElement.seed = randomInteger();
+      bumpVersion(clonedElement);
+    }
+
     if (clonedElement.groupIds) {
       clonedElement.groupIds = clonedElement.groupIds.map((groupId) => {
         if (!groupNewIdsMap.has(groupId)) {
@@ -597,6 +633,10 @@ export const duplicateElements = (elements: readonly ExcalidrawElement[]) => {
         : null;
     }
 
+    if (clonedElement.frameId) {
+      clonedElement.frameId = maybeGetNewId(clonedElement.frameId);
+    }
+
     clonedElements.push(clonedElement);
   }
 
diff --git a/src/element/resizeElements.ts b/src/element/resizeElements.ts
index 69b8afae7..b9fd63287 100644
--- a/src/element/resizeElements.ts
+++ b/src/element/resizeElements.ts
@@ -14,17 +14,22 @@ import {
   NonDeleted,
   ExcalidrawElement,
   ExcalidrawTextElementWithContainer,
+  ExcalidrawImageElement,
 } from "./types";
+import type { Mutable } from "../utility-types";
 import {
   getElementAbsoluteCoords,
   getCommonBounds,
   getResizedElementAbsoluteCoords,
   getCommonBoundingBox,
+  getElementPointsCoords,
 } from "./bounds";
 import {
   isArrowElement,
   isBoundToContainer,
+  isFrameElement,
   isFreeDrawElement,
+  isImageElement,
   isLinearElement,
   isTextElement,
 } from "./typeChecks";
@@ -44,13 +49,17 @@ import {
   getBoundTextElementId,
   getContainerElement,
   handleBindTextResize,
-  getMaxContainerWidth,
+  getBoundTextMaxWidth,
   getApproxMinLineHeight,
   measureText,
-  getMaxContainerHeight,
+  getBoundTextMaxHeight,
 } from "./textElement";
+import { LinearElementEditor } from "./linearElementEditor";
 
 export const normalizeAngle = (angle: number): number => {
+  if (angle < 0) {
+    return angle + 2 * Math.PI;
+  }
   if (angle >= 2 * Math.PI) {
     return angle - 2 * Math.PI;
   }
@@ -152,12 +161,17 @@ const rotateSingleElement = (
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
   const cx = (x1 + x2) / 2;
   const cy = (y1 + y2) / 2;
-  let angle = (5 * Math.PI) / 2 + Math.atan2(pointerY - cy, pointerX - cx);
-  if (shouldRotateWithDiscreteAngle) {
-    angle += SHIFT_LOCKING_ANGLE / 2;
-    angle -= angle % SHIFT_LOCKING_ANGLE;
+  let angle: number;
+  if (isFrameElement(element)) {
+    angle = 0;
+  } else {
+    angle = (5 * Math.PI) / 2 + Math.atan2(pointerY - cy, pointerX - cx);
+    if (shouldRotateWithDiscreteAngle) {
+      angle += SHIFT_LOCKING_ANGLE / 2;
+      angle -= angle % SHIFT_LOCKING_ANGLE;
+    }
+    angle = normalizeAngle(angle);
   }
-  angle = normalizeAngle(angle);
   const boundTextElementId = getBoundTextElementId(element);
 
   mutateElement(element, { angle });
@@ -204,7 +218,7 @@ const measureFontSizeFromWidth = (
   if (hasContainer) {
     const container = getContainerElement(element);
     if (container) {
-      width = getMaxContainerWidth(container);
+      width = getBoundTextMaxWidth(container);
     }
   }
   const nextFontSize = element.fontSize * (nextWidth / width);
@@ -435,8 +449,8 @@ export const resizeSingleElement = (
 
       const nextFont = measureFontSizeFromWidth(
         boundTextElement,
-        getMaxContainerWidth(updatedElement),
-        getMaxContainerHeight(updatedElement),
+        getBoundTextMaxWidth(updatedElement),
+        getBoundTextMaxHeight(updatedElement, boundTextElement),
       );
       if (nextFont === null) {
         return;
@@ -596,7 +610,7 @@ export const resizeSingleElement = (
   }
 };
 
-const resizeMultipleElements = (
+export const resizeMultipleElements = (
   pointerDownState: PointerDownState,
   selectedElements: readonly NonDeletedExcalidrawElement[],
   transformHandleType: "nw" | "ne" | "sw" | "se",
@@ -627,8 +641,28 @@ const resizeMultipleElements = (
     [],
   );
 
+  // getCommonBoundingBox() uses getBoundTextElement() which returns null for
+  // original elements from pointerDownState, so we have to find and add these
+  // bound text elements manually. Additionally, the coordinates of bound text
+  // elements aren't always up to date.
+  const boundTextElements = targetElements.reduce((acc, { orig }) => {
+    if (!isLinearElement(orig)) {
+      return acc;
+    }
+    const textId = getBoundTextElementId(orig);
+    if (!textId) {
+      return acc;
+    }
+    const text = pointerDownState.originalElements.get(textId) ?? null;
+    if (!isBoundToContainer(text)) {
+      return acc;
+    }
+    const xy = LinearElementEditor.getBoundTextElementPosition(orig, text);
+    return [...acc, { ...text, ...xy }];
+  }, [] as ExcalidrawTextElementWithContainer[]);
+
   const { minX, minY, maxX, maxY, midX, midY } = getCommonBoundingBox(
-    targetElements.map(({ orig }) => orig),
+    targetElements.map(({ orig }) => orig).concat(boundTextElements),
   );
   const direction = transformHandleType;
 
@@ -640,12 +674,22 @@ const resizeMultipleElements = (
   };
 
   // anchor point must be on the opposite side of the dragged selection handle
-  // or be the center of the selection if alt is pressed
+  // or be the center of the selection if shouldResizeFromCenter
   const [anchorX, anchorY]: Point = shouldResizeFromCenter
     ? [midX, midY]
     : mapDirectionsToAnchors[direction];
 
-  const mapDirectionsToPointerSides: Record<
+  const scale =
+    Math.max(
+      Math.abs(pointerX - anchorX) / (maxX - minX) || 0,
+      Math.abs(pointerY - anchorY) / (maxY - minY) || 0,
+    ) * (shouldResizeFromCenter ? 2 : 1);
+
+  if (scale === 0) {
+    return;
+  }
+
+  const mapDirectionsToPointerPositions: Record<
     typeof direction,
     [x: boolean, y: boolean]
   > = {
@@ -655,73 +699,122 @@ const resizeMultipleElements = (
     nw: [pointerX <= anchorX, pointerY <= anchorY],
   };
 
-  // pointer side relative to anchor
-  const [pointerSideX, pointerSideY] = mapDirectionsToPointerSides[
+  /**
+   * to flip an element:
+   * 1. determine over which axis is the element being flipped
+   *    (could be x, y, or both) indicated by `flipFactorX` & `flipFactorY`
+   * 2. shift element's position by the amount of width or height (or both) or
+   *    mirror points in the case of linear & freedraw elemenets
+   * 3. adjust element angle
+   */
+  const [flipFactorX, flipFactorY] = mapDirectionsToPointerPositions[
     direction
   ].map((condition) => (condition ? 1 : -1));
+  const isFlippedByX = flipFactorX < 0;
+  const isFlippedByY = flipFactorY < 0;
 
-  // stop resizing if a pointer is on the other side of selection
-  if (pointerSideX < 0 && pointerSideY < 0) {
-    return;
-  }
+  const elementsAndUpdates: {
+    element: NonDeletedExcalidrawElement;
+    update: Mutable<
+      Pick<ExcalidrawElement, "x" | "y" | "width" | "height" | "angle">
+    > & {
+      points?: ExcalidrawLinearElement["points"];
+      fontSize?: ExcalidrawTextElement["fontSize"];
+      baseline?: ExcalidrawTextElement["baseline"];
+      scale?: ExcalidrawImageElement["scale"];
+    };
+    boundText: {
+      element: ExcalidrawTextElementWithContainer;
+      fontSize: ExcalidrawTextElement["fontSize"];
+      baseline: ExcalidrawTextElement["baseline"];
+    } | null;
+  }[] = [];
 
-  const scale =
-    Math.max(
-      (pointerSideX * Math.abs(pointerX - anchorX)) / (maxX - minX),
-      (pointerSideY * Math.abs(pointerY - anchorY)) / (maxY - minY),
-    ) * (shouldResizeFromCenter ? 2 : 1);
+  for (const { orig, latest } of targetElements) {
+    // bounded text elements are updated along with their container elements
+    if (isTextElement(orig) && isBoundToContainer(orig)) {
+      continue;
+    }
 
-  if (scale === 0) {
-    return;
-  }
+    const width = orig.width * scale;
+    const height = orig.height * scale;
+    const angle = normalizeAngle(orig.angle * flipFactorX * flipFactorY);
 
-  targetElements.forEach((element) => {
-    const width = element.orig.width * scale;
-    const height = element.orig.height * scale;
-    const x = anchorX + (element.orig.x - anchorX) * scale;
-    const y = anchorY + (element.orig.y - anchorY) * scale;
+    const isLinearOrFreeDraw = isLinearElement(orig) || isFreeDrawElement(orig);
+    const offsetX = orig.x - anchorX;
+    const offsetY = orig.y - anchorY;
+    const shiftX = isFlippedByX && !isLinearOrFreeDraw ? width : 0;
+    const shiftY = isFlippedByY && !isLinearOrFreeDraw ? height : 0;
+    const x = anchorX + flipFactorX * (offsetX * scale + shiftX);
+    const y = anchorY + flipFactorY * (offsetY * scale + shiftY);
 
-    // readjust points for linear & free draw elements
     const rescaledPoints = rescalePointsInElement(
-      element.orig,
-      width,
-      height,
+      orig,
+      width * flipFactorX,
+      height * flipFactorY,
       false,
     );
 
-    const update: {
-      width: number;
-      height: number;
-      x: number;
-      y: number;
-      points?: Point[];
-      fontSize?: number;
-      baseline?: number;
-    } = {
-      width,
-      height,
+    const update: typeof elementsAndUpdates[0]["update"] = {
       x,
       y,
+      width,
+      height,
+      angle,
       ...rescaledPoints,
     };
 
-    let boundTextUpdates: { fontSize: number; baseline: number } | null = null;
+    if (isImageElement(orig) && targetElements.length === 1) {
+      update.scale = [orig.scale[0] * flipFactorX, orig.scale[1] * flipFactorY];
+    }
 
-    const boundTextElement = getBoundTextElement(element.latest);
+    if (isLinearElement(orig) && (isFlippedByX || isFlippedByY)) {
+      const origBounds = getElementPointsCoords(orig, orig.points);
+      const newBounds = getElementPointsCoords(
+        { ...orig, x, y },
+        rescaledPoints.points!,
+      );
+      const origXY = [orig.x, orig.y];
+      const newXY = [x, y];
 
-    if (boundTextElement || isTextElement(element.orig)) {
+      const linearShift = (axis: "x" | "y") => {
+        const i = axis === "x" ? 0 : 1;
+        return (
+          (newBounds[i + 2] -
+            newXY[i] -
+            (origXY[i] - origBounds[i]) * scale +
+            (origBounds[i + 2] - origXY[i]) * scale -
+            (newXY[i] - newBounds[i])) /
+          2
+        );
+      };
+
+      if (isFlippedByX) {
+        update.x -= linearShift("x");
+      }
+
+      if (isFlippedByY) {
+        update.y -= linearShift("y");
+      }
+    }
+
+    let boundText: typeof elementsAndUpdates[0]["boundText"] = null;
+
+    const boundTextElement = getBoundTextElement(latest);
+
+    if (boundTextElement || isTextElement(orig)) {
       const updatedElement = {
-        ...element.latest,
+        ...latest,
         width,
         height,
       };
       const metrics = measureFontSizeFromWidth(
-        boundTextElement ?? (element.orig as ExcalidrawTextElement),
+        boundTextElement ?? (orig as ExcalidrawTextElement),
         boundTextElement
-          ? getMaxContainerWidth(updatedElement)
+          ? getBoundTextMaxWidth(updatedElement)
           : updatedElement.width,
         boundTextElement
-          ? getMaxContainerHeight(updatedElement)
+          ? getBoundTextMaxHeight(updatedElement, boundTextElement)
           : updatedElement.height,
       );
 
@@ -729,29 +822,50 @@ const resizeMultipleElements = (
         return;
       }
 
-      if (isTextElement(element.orig)) {
+      if (isTextElement(orig)) {
         update.fontSize = metrics.size;
         update.baseline = metrics.baseline;
       }
 
       if (boundTextElement) {
-        boundTextUpdates = {
+        boundText = {
+          element: boundTextElement,
           fontSize: metrics.size,
           baseline: metrics.baseline,
         };
       }
     }
 
-    updateBoundElements(element.latest, { newSize: { width, height } });
+    elementsAndUpdates.push({ element: latest, update, boundText });
+  }
 
-    mutateElement(element.latest, update);
+  const elementsToUpdate = elementsAndUpdates.map(({ element }) => element);
 
-    if (boundTextElement && boundTextUpdates) {
-      mutateElement(boundTextElement, boundTextUpdates);
+  for (const { element, update, boundText } of elementsAndUpdates) {
+    const { width, height, angle } = update;
 
-      handleBindTextResize(element.latest, transformHandleType);
+    mutateElement(element, update, false);
+
+    updateBoundElements(element, {
+      simultaneouslyUpdated: elementsToUpdate,
+      newSize: { width, height },
+    });
+
+    if (boundText) {
+      const { element: boundTextElement, ...boundTextUpdates } = boundText;
+      mutateElement(
+        boundTextElement,
+        {
+          ...boundTextUpdates,
+          angle: isLinearElement(element) ? undefined : angle,
+        },
+        false,
+      );
+      handleBindTextResize(element, transformHandleType);
     }
-  });
+  }
+
+  Scene.getScene(elementsAndUpdates[0].element)?.informMutation();
 };
 
 const rotateMultipleElements = (
@@ -769,39 +883,49 @@ const rotateMultipleElements = (
     centerAngle += SHIFT_LOCKING_ANGLE / 2;
     centerAngle -= centerAngle % SHIFT_LOCKING_ANGLE;
   }
-  elements.forEach((element) => {
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-    const cx = (x1 + x2) / 2;
-    const cy = (y1 + y2) / 2;
-    const origAngle =
-      pointerDownState.originalElements.get(element.id)?.angle ?? element.angle;
-    const [rotatedCX, rotatedCY] = rotate(
-      cx,
-      cy,
-      centerX,
-      centerY,
-      centerAngle + origAngle - element.angle,
-    );
-    mutateElement(element, {
-      x: element.x + (rotatedCX - cx),
-      y: element.y + (rotatedCY - cy),
-      angle: normalizeAngle(centerAngle + origAngle),
-    });
-    const boundTextElementId = getBoundTextElementId(element);
-    if (boundTextElementId) {
-      const textElement =
-        Scene.getScene(element)?.getElement<ExcalidrawTextElementWithContainer>(
-          boundTextElementId,
-        );
-      if (textElement && !isArrowElement(element)) {
-        mutateElement(textElement, {
-          x: textElement.x + (rotatedCX - cx),
-          y: textElement.y + (rotatedCY - cy),
+
+  elements
+    .filter((element) => element.type !== "frame")
+    .forEach((element) => {
+      const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+      const cx = (x1 + x2) / 2;
+      const cy = (y1 + y2) / 2;
+      const origAngle =
+        pointerDownState.originalElements.get(element.id)?.angle ??
+        element.angle;
+      const [rotatedCX, rotatedCY] = rotate(
+        cx,
+        cy,
+        centerX,
+        centerY,
+        centerAngle + origAngle - element.angle,
+      );
+      mutateElement(
+        element,
+        {
+          x: element.x + (rotatedCX - cx),
+          y: element.y + (rotatedCY - cy),
           angle: normalizeAngle(centerAngle + origAngle),
-        });
+        },
+        false,
+      );
+      updateBoundElements(element, { simultaneouslyUpdated: elements });
+
+      const boundText = getBoundTextElement(element);
+      if (boundText && !isArrowElement(element)) {
+        mutateElement(
+          boundText,
+          {
+            x: boundText.x + (rotatedCX - cx),
+            y: boundText.y + (rotatedCY - cy),
+            angle: normalizeAngle(centerAngle + origAngle),
+          },
+          false,
+        );
       }
-    }
-  });
+    });
+
+  Scene.getScene(elements[0])?.informMutation();
 };
 
 export const getResizeOffsetXY = (
diff --git a/src/element/showSelectedShapeActions.ts b/src/element/showSelectedShapeActions.ts
index 29f8d9fcb..e04802934 100644
--- a/src/element/showSelectedShapeActions.ts
+++ b/src/element/showSelectedShapeActions.ts
@@ -1,9 +1,9 @@
-import { AppState } from "../types";
 import { NonDeletedExcalidrawElement } from "./types";
 import { getSelectedElements } from "../scene";
+import { UIAppState } from "../types";
 
 export const showSelectedShapeActions = (
-  appState: AppState,
+  appState: UIAppState,
   elements: readonly NonDeletedExcalidrawElement[],
 ) =>
   Boolean(
diff --git a/src/element/textElement.test.ts b/src/element/textElement.test.ts
index 106ed7bea..b6221336d 100644
--- a/src/element/textElement.test.ts
+++ b/src/element/textElement.test.ts
@@ -3,14 +3,15 @@ import { API } from "../tests/helpers/api";
 import {
   computeContainerDimensionForBoundText,
   getContainerCoords,
-  getMaxContainerWidth,
-  getMaxContainerHeight,
+  getBoundTextMaxWidth,
+  getBoundTextMaxHeight,
   wrapText,
   detectLineHeight,
   getLineHeightInPx,
   getDefaultLineHeight,
+  parseTokens,
 } from "./textElement";
-import { FontString } from "./types";
+import { ExcalidrawTextElementWithContainer, FontString } from "./types";
 
 describe("Test wrapText", () => {
   const font = "20px Cascadia, width: Segoe UI Emoji" as FontString;
@@ -183,6 +184,56 @@ now`,
     expect(wrapText(text, font, -1)).toEqual(text);
     expect(wrapText(text, font, Infinity)).toEqual(text);
   });
+
+  it("should wrap the text correctly when text contains hyphen", () => {
+    let text =
+      "Wikipedia is hosted by Wikimedia- Foundation, a non-profit organization that also hosts a range-of other projects";
+    const res = wrapText(text, font, 110);
+    expect(res).toBe(
+      `Wikipedia \nis hosted \nby \nWikimedia-\nFoundation,\na non-\nprofit \norganizati\non that \nalso hosts\na range-of\nother \nprojects`,
+    );
+
+    text = "Hello thereusing-now";
+    expect(wrapText(text, font, 100)).toEqual("Hello \nthereusin\ng-now");
+  });
+});
+
+describe("Test parseTokens", () => {
+  it("should split into tokens correctly", () => {
+    let text = "Excalidraw is a virtual collaborative whiteboard";
+    expect(parseTokens(text)).toEqual([
+      "Excalidraw",
+      "is",
+      "a",
+      "virtual",
+      "collaborative",
+      "whiteboard",
+    ]);
+
+    text =
+      "Wikipedia is hosted by Wikimedia- Foundation, a non-profit organization that also hosts a range-of other projects";
+    expect(parseTokens(text)).toEqual([
+      "Wikipedia",
+      "is",
+      "hosted",
+      "by",
+      "Wikimedia-",
+      "",
+      "Foundation,",
+      "a",
+      "non-",
+      "profit",
+      "organization",
+      "that",
+      "also",
+      "hosts",
+      "a",
+      "range-",
+      "of",
+      "other",
+      "projects",
+    ]);
+  });
 });
 
 describe("Test measureText", () => {
@@ -260,7 +311,7 @@ describe("Test measureText", () => {
     });
   });
 
-  describe("Test getMaxContainerWidth", () => {
+  describe("Test getBoundTextMaxWidth", () => {
     const params = {
       width: 178,
       height: 194,
@@ -268,39 +319,76 @@ describe("Test measureText", () => {
 
     it("should return max width when container is rectangle", () => {
       const container = API.createElement({ type: "rectangle", ...params });
-      expect(getMaxContainerWidth(container)).toBe(168);
+      expect(getBoundTextMaxWidth(container)).toBe(168);
     });
 
     it("should return max width when container is ellipse", () => {
       const container = API.createElement({ type: "ellipse", ...params });
-      expect(getMaxContainerWidth(container)).toBe(116);
+      expect(getBoundTextMaxWidth(container)).toBe(116);
     });
 
     it("should return max width when container is diamond", () => {
       const container = API.createElement({ type: "diamond", ...params });
-      expect(getMaxContainerWidth(container)).toBe(79);
+      expect(getBoundTextMaxWidth(container)).toBe(79);
     });
   });
 
-  describe("Test getMaxContainerHeight", () => {
+  describe("Test getBoundTextMaxHeight", () => {
     const params = {
       width: 178,
       height: 194,
+      id: '"container-id',
     };
 
+    const boundTextElement = API.createElement({
+      type: "text",
+      id: "text-id",
+      x: 560.51171875,
+      y: 202.033203125,
+      width: 154,
+      height: 175,
+      fontSize: 20,
+      fontFamily: 1,
+      text: "Excalidraw is a\nvirtual \nopensource \nwhiteboard for \nsketching \nhand-drawn like\ndiagrams",
+      textAlign: "center",
+      verticalAlign: "middle",
+      containerId: params.id,
+    }) as ExcalidrawTextElementWithContainer;
+
     it("should return max height when container is rectangle", () => {
       const container = API.createElement({ type: "rectangle", ...params });
-      expect(getMaxContainerHeight(container)).toBe(184);
+      expect(getBoundTextMaxHeight(container, boundTextElement)).toBe(184);
     });
 
     it("should return max height when container is ellipse", () => {
       const container = API.createElement({ type: "ellipse", ...params });
-      expect(getMaxContainerHeight(container)).toBe(127);
+      expect(getBoundTextMaxHeight(container, boundTextElement)).toBe(127);
     });
 
     it("should return max height when container is diamond", () => {
       const container = API.createElement({ type: "diamond", ...params });
-      expect(getMaxContainerHeight(container)).toBe(87);
+      expect(getBoundTextMaxHeight(container, boundTextElement)).toBe(87);
+    });
+
+    it("should return max height when container is arrow", () => {
+      const container = API.createElement({
+        type: "arrow",
+        ...params,
+      });
+      expect(getBoundTextMaxHeight(container, boundTextElement)).toBe(194);
+    });
+
+    it("should return max height when container is arrow and height is less than threshold", () => {
+      const container = API.createElement({
+        type: "arrow",
+        ...params,
+        height: 70,
+        boundElements: [{ type: "text", id: "text-id" }],
+      });
+
+      expect(getBoundTextMaxHeight(container, boundTextElement)).toBe(
+        boundTextElement.height,
+      );
     });
   });
 });
diff --git a/src/element/textElement.ts b/src/element/textElement.ts
index 38da5df5a..76de2c886 100644
--- a/src/element/textElement.ts
+++ b/src/element/textElement.ts
@@ -65,7 +65,7 @@ export const redrawTextBoundingBox = (
   boundTextUpdates.text = textElement.text;
 
   if (container) {
-    maxWidth = getMaxContainerWidth(container);
+    maxWidth = getBoundTextMaxWidth(container);
     boundTextUpdates.text = wrapText(
       textElement.originalText,
       getFontString(textElement),
@@ -83,35 +83,28 @@ export const redrawTextBoundingBox = (
   boundTextUpdates.baseline = metrics.baseline;
 
   if (container) {
-    if (isArrowElement(container)) {
-      const centerX = textElement.x + textElement.width / 2;
-      const centerY = textElement.y + textElement.height / 2;
-      const diffWidth = metrics.width - textElement.width;
-      const diffHeight = metrics.height - textElement.height;
-      boundTextUpdates.x = centerY - (textElement.height + diffHeight) / 2;
-      boundTextUpdates.y = centerX - (textElement.width + diffWidth) / 2;
-    } else {
-      const containerDims = getContainerDims(container);
-      let maxContainerHeight = getMaxContainerHeight(container);
+    const containerDims = getContainerDims(container);
+    const maxContainerHeight = getBoundTextMaxHeight(
+      container,
+      textElement as ExcalidrawTextElementWithContainer,
+    );
 
-      let nextHeight = containerDims.height;
-      if (metrics.height > maxContainerHeight) {
-        nextHeight = computeContainerDimensionForBoundText(
-          metrics.height,
-          container.type,
-        );
-        mutateElement(container, { height: nextHeight });
-        maxContainerHeight = getMaxContainerHeight(container);
-        updateOriginalContainerCache(container.id, nextHeight);
-      }
-      const updatedTextElement = {
-        ...textElement,
-        ...boundTextUpdates,
-      } as ExcalidrawTextElementWithContainer;
-      const { x, y } = computeBoundTextPosition(container, updatedTextElement);
-      boundTextUpdates.x = x;
-      boundTextUpdates.y = y;
+    let nextHeight = containerDims.height;
+    if (metrics.height > maxContainerHeight) {
+      nextHeight = computeContainerDimensionForBoundText(
+        metrics.height,
+        container.type,
+      );
+      mutateElement(container, { height: nextHeight });
+      updateOriginalContainerCache(container.id, nextHeight);
     }
+    const updatedTextElement = {
+      ...textElement,
+      ...boundTextUpdates,
+    } as ExcalidrawTextElementWithContainer;
+    const { x, y } = computeBoundTextPosition(container, updatedTextElement);
+    boundTextUpdates.x = x;
+    boundTextUpdates.y = y;
   }
 
   mutateElement(textElement, boundTextUpdates);
@@ -183,8 +176,11 @@ export const handleBindTextResize = (
     let nextHeight = textElement.height;
     let nextWidth = textElement.width;
     const containerDims = getContainerDims(container);
-    const maxWidth = getMaxContainerWidth(container);
-    const maxHeight = getMaxContainerHeight(container);
+    const maxWidth = getBoundTextMaxWidth(container);
+    const maxHeight = getBoundTextMaxHeight(
+      container,
+      textElement as ExcalidrawTextElementWithContainer,
+    );
     let containerHeight = containerDims.height;
     let nextBaseLine = textElement.baseline;
     if (transformHandleType !== "n" && transformHandleType !== "s") {
@@ -256,8 +252,8 @@ export const computeBoundTextPosition = (
     );
   }
   const containerCoords = getContainerCoords(container);
-  const maxContainerHeight = getMaxContainerHeight(container);
-  const maxContainerWidth = getMaxContainerWidth(container);
+  const maxContainerHeight = getBoundTextMaxHeight(container, boundTextElement);
+  const maxContainerWidth = getBoundTextMaxWidth(container);
 
   let x;
   let y;
@@ -419,6 +415,24 @@ export const getTextHeight = (
   return getLineHeightInPx(fontSize, lineHeight) * lineCount;
 };
 
+export const parseTokens = (text: string) => {
+  // Splitting words containing "-" as those are treated as separate words
+  // by css wrapping algorithm eg non-profit => non-, profit
+  const words = text.split("-");
+  if (words.length > 1) {
+    // non-proft org => ['non-', 'profit org']
+    words.forEach((word, index) => {
+      if (index !== words.length - 1) {
+        words[index] = word += "-";
+      }
+    });
+  }
+  // Joining the words with space and splitting them again with space to get the
+  // final list of tokens
+  // ['non-', 'profit org'] =>,'non- proft org' => ['non-','profit','org']
+  return words.join(" ").split(" ");
+};
+
 export const wrapText = (text: string, font: FontString, maxWidth: number) => {
   // if maxWidth is not finite or NaN which can happen in case of bugs in
   // computation, we need to make sure we don't continue as we'll end up
@@ -444,17 +458,16 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
     currentLine = "";
     currentLineWidthTillNow = 0;
   };
-
   originalLines.forEach((originalLine) => {
     const currentLineWidth = getTextWidth(originalLine, font);
 
-    //Push the line if its <= maxWidth
+    // Push the line if its <= maxWidth
     if (currentLineWidth <= maxWidth) {
       lines.push(originalLine);
       return; // continue
     }
-    const words = originalLine.split(" ");
 
+    const words = parseTokens(originalLine);
     resetParams();
 
     let index = 0;
@@ -472,6 +485,7 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
       else if (currentWordWidth > maxWidth) {
         // push current line since the current word exceeds the max width
         // so will be appended in next line
+
         push(currentLine);
 
         resetParams();
@@ -492,15 +506,15 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
             currentLine += currentChar;
           }
         }
-
         // push current line if appending space exceeds max width
         if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
           push(currentLine);
           resetParams();
-        } else {
           // space needs to be appended before next word
           // as currentLine contains chars which couldn't be appended
-          // to previous line
+          // to previous line unless the line ends with hyphen to sync
+          // with css word-wrap
+        } else if (!currentLine.endsWith("-")) {
           currentLine += " ";
           currentLineWidthTillNow += spaceWidth;
         }
@@ -518,12 +532,23 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
             break;
           }
           index++;
-          currentLine += `${word} `;
+
+          // if word ends with "-" then we don't need to add space
+          // to sync with css word-wrap
+          const shouldAppendSpace = !word.endsWith("-");
+          currentLine += word;
+
+          if (shouldAppendSpace) {
+            currentLine += " ";
+          }
 
           // Push the word if appending space exceeds max width
           if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
-            const word = currentLine.slice(0, -1);
-            push(word);
+            if (shouldAppendSpace) {
+              lines.push(currentLine.slice(0, -1));
+            } else {
+              lines.push(currentLine);
+            }
             resetParams();
             break;
           }
@@ -815,10 +840,12 @@ export const getTextBindableContainerAtPosition = (
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(elements[index]);
     if (
       isArrowElement(elements[index]) &&
-      isHittingElementNotConsideringBoundingBox(elements[index], appState, [
-        x,
-        y,
-      ])
+      isHittingElementNotConsideringBoundingBox(
+        elements[index],
+        appState,
+        null,
+        [x, y],
+      )
     ) {
       hitElement = elements[index];
       break;
@@ -835,7 +862,6 @@ const VALID_CONTAINER_TYPES = new Set([
   "rectangle",
   "ellipse",
   "diamond",
-  "image",
   "arrow",
 ]);
 
@@ -861,18 +887,10 @@ export const computeContainerDimensionForBoundText = (
   return dimension + padding;
 };
 
-export const getMaxContainerWidth = (container: ExcalidrawElement) => {
+export const getBoundTextMaxWidth = (container: ExcalidrawElement) => {
   const width = getContainerDims(container).width;
   if (isArrowElement(container)) {
-    const containerWidth = width - BOUND_TEXT_PADDING * 8 * 2;
-    if (containerWidth <= 0) {
-      const boundText = getBoundTextElement(container);
-      if (boundText) {
-        return boundText.width;
-      }
-      return BOUND_TEXT_PADDING * 8 * 2;
-    }
-    return containerWidth;
+    return width - BOUND_TEXT_PADDING * 8 * 2;
   }
 
   if (container.type === "ellipse") {
@@ -889,16 +907,15 @@ export const getMaxContainerWidth = (container: ExcalidrawElement) => {
   return width - BOUND_TEXT_PADDING * 2;
 };
 
-export const getMaxContainerHeight = (container: ExcalidrawElement) => {
+export const getBoundTextMaxHeight = (
+  container: ExcalidrawElement,
+  boundTextElement: ExcalidrawTextElementWithContainer,
+) => {
   const height = getContainerDims(container).height;
   if (isArrowElement(container)) {
     const containerHeight = height - BOUND_TEXT_PADDING * 8 * 2;
     if (containerHeight <= 0) {
-      const boundText = getBoundTextElement(container);
-      if (boundText) {
-        return boundText.height;
-      }
-      return BOUND_TEXT_PADDING * 8 * 2;
+      return boundTextElement.height;
     }
     return height;
   }
diff --git a/src/element/textWysiwyg.test.tsx b/src/element/textWysiwyg.test.tsx
index 4ae3f26f9..7fb153987 100644
--- a/src/element/textWysiwyg.test.tsx
+++ b/src/element/textWysiwyg.test.tsx
@@ -26,6 +26,17 @@ ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
 const tab = "    ";
 const mouse = new Pointer("mouse");
 
+const getTextEditor = () => {
+  return document.querySelector(
+    ".excalidraw-textEditorContainer > textarea",
+  ) as HTMLTextAreaElement;
+};
+
+const updateTextEditor = (editor: HTMLTextAreaElement, value: string) => {
+  fireEvent.change(editor, { target: { value } });
+  editor.dispatchEvent(new Event("input"));
+};
+
 describe("textWysiwyg", () => {
   describe("start text editing", () => {
     const { h } = window;
@@ -190,9 +201,7 @@ describe("textWysiwyg", () => {
 
       mouse.clickAt(text.x + 50, text.y + 50);
 
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      const editor = getTextEditor();
 
       expect(editor).not.toBe(null);
       expect(h.state.editingElement?.id).toBe(text.id);
@@ -214,9 +223,7 @@ describe("textWysiwyg", () => {
 
       mouse.doubleClickAt(text.x + 50, text.y + 50);
 
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      const editor = getTextEditor();
 
       expect(editor).not.toBe(null);
       expect(h.state.editingElement?.id).toBe(text.id);
@@ -243,9 +250,7 @@ describe("textWysiwyg", () => {
       textElement = UI.createElement("text");
 
       mouse.clickOn(textElement);
-      textarea = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      )!;
+      textarea = getTextEditor();
     });
 
     afterAll(() => {
@@ -455,17 +460,11 @@ describe("textWysiwyg", () => {
       UI.clickTool("text");
       mouse.clickAt(750, 300);
 
-      textarea = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      )!;
-      fireEvent.change(textarea, {
-        target: {
-          value:
-            "Excalidraw is an opensource virtual collaborative whiteboard for sketching hand-drawn like diagrams!",
-        },
-      });
-
-      textarea.dispatchEvent(new Event("input"));
+      textarea = getTextEditor();
+      updateTextEditor(
+        textarea,
+        "Excalidraw is an opensource virtual collaborative whiteboard for sketching hand-drawn like diagrams!",
+      );
       await new Promise((cb) => setTimeout(cb, 0));
       textarea.blur();
       expect(textarea.style.width).toBe("792px");
@@ -513,11 +512,37 @@ describe("textWysiwyg", () => {
         { id: text.id, type: "text" },
       ]);
       mouse.down();
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      const editor = getTextEditor();
 
-      fireEvent.change(editor, { target: { value: "Hello World!" } });
+      updateTextEditor(editor, "Hello World!");
+
+      await new Promise((r) => setTimeout(r, 0));
+      editor.blur();
+      expect(rectangle.boundElements).toStrictEqual([
+        { id: text.id, type: "text" },
+      ]);
+    });
+
+    it("should set the text element angle to same as container angle when binding to rotated container", async () => {
+      const rectangle = API.createElement({
+        type: "rectangle",
+        width: 90,
+        height: 75,
+        angle: 45,
+      });
+      h.elements = [rectangle];
+      mouse.doubleClickAt(rectangle.x + 10, rectangle.y + 10);
+      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
+      expect(text.type).toBe("text");
+      expect(text.containerId).toBe(rectangle.id);
+      expect(rectangle.boundElements).toStrictEqual([
+        { id: text.id, type: "text" },
+      ]);
+      expect(text.angle).toBe(rectangle.angle);
+      mouse.down();
+      const editor = getTextEditor();
+
+      updateTextEditor(editor, "Hello World!");
 
       await new Promise((r) => setTimeout(r, 0));
       editor.blur();
@@ -542,9 +567,7 @@ describe("textWysiwyg", () => {
       API.setSelectedElements([diamond]);
       Keyboard.keyPress(KEYS.ENTER);
 
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      const editor = getTextEditor();
 
       await new Promise((r) => setTimeout(r, 0));
       const value = new Array(1000).fill("1").join("\n");
@@ -557,9 +580,7 @@ describe("textWysiwyg", () => {
       expect(diamond.height).toBe(50020);
 
       // Clearing text to simulate height decrease
-      expect(() =>
-        fireEvent.input(editor, { target: { value: "" } }),
-      ).not.toThrow();
+      expect(() => updateTextEditor(editor, "")).not.toThrow();
 
       expect(diamond.height).toBe(70);
     });
@@ -581,9 +602,7 @@ describe("textWysiwyg", () => {
       expect(text.type).toBe("text");
       expect(text.containerId).toBe(null);
       mouse.down();
-      let editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      let editor = getTextEditor();
       await new Promise((r) => setTimeout(r, 0));
       editor.blur();
 
@@ -598,11 +617,9 @@ describe("textWysiwyg", () => {
       expect(text.containerId).toBe(rectangle.id);
 
       mouse.down();
-      editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      editor = getTextEditor();
 
-      fireEvent.change(editor, { target: { value: "Hello World!" } });
+      updateTextEditor(editor, "Hello World!");
       await new Promise((r) => setTimeout(r, 0));
       editor.blur();
 
@@ -622,13 +639,11 @@ describe("textWysiwyg", () => {
       const text = h.elements[1] as ExcalidrawTextElementWithContainer;
       expect(text.type).toBe("text");
       expect(text.containerId).toBe(rectangle.id);
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      const editor = getTextEditor();
 
       await new Promise((r) => setTimeout(r, 0));
 
-      fireEvent.change(editor, { target: { value: "Hello World!" } });
+      updateTextEditor(editor, "Hello World!");
       editor.blur();
       expect(rectangle.boundElements).toStrictEqual([
         { id: text.id, type: "text" },
@@ -659,11 +674,8 @@ describe("textWysiwyg", () => {
         { id: text.id, type: "text" },
       ]);
       mouse.down();
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-
-      fireEvent.change(editor, { target: { value: "Hello World!" } });
+      const editor = getTextEditor();
+      updateTextEditor(editor, "Hello World!");
 
       await new Promise((r) => setTimeout(r, 0));
       editor.blur();
@@ -687,17 +699,9 @@ describe("textWysiwyg", () => {
         freedraw.y + freedraw.height / 2,
       );
 
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-
-      fireEvent.change(editor, {
-        target: {
-          value: "Hello World!",
-        },
-      });
+      const editor = getTextEditor();
+      updateTextEditor(editor, "Hello World!");
       fireEvent.keyDown(editor, { key: KEYS.ESCAPE });
-      editor.dispatchEvent(new Event("input"));
 
       expect(freedraw.boundElements).toBe(null);
       expect(h.elements[1].type).toBe("text");
@@ -729,11 +733,9 @@ describe("textWysiwyg", () => {
       expect(text.type).toBe("text");
       expect(text.containerId).toBe(null);
       mouse.down();
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      const editor = getTextEditor();
 
-      fireEvent.change(editor, { target: { value: "Hello World!" } });
+      updateTextEditor(editor, "Hello World!");
 
       await new Promise((r) => setTimeout(r, 0));
       editor.blur();
@@ -746,17 +748,12 @@ describe("textWysiwyg", () => {
 
       UI.clickTool("text");
       mouse.clickAt(20, 30);
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      const editor = getTextEditor();
 
-      fireEvent.change(editor, {
-        target: {
-          value: "Excalidraw is an opensource virtual collaborative whiteboard",
-        },
-      });
-
-      editor.dispatchEvent(new Event("input"));
+      updateTextEditor(
+        editor,
+        "Excalidraw is an opensource virtual collaborative whiteboard",
+      );
       await new Promise((cb) => setTimeout(cb, 0));
       expect(h.elements.length).toBe(2);
       expect(h.elements[1].type).toBe("text");
@@ -796,12 +793,10 @@ describe("textWysiwyg", () => {
       mouse.down();
 
       const text = h.elements[1] as ExcalidrawTextElementWithContainer;
-      let editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      let editor = getTextEditor();
 
       await new Promise((r) => setTimeout(r, 0));
-      fireEvent.change(editor, { target: { value: "Hello World!" } });
+      updateTextEditor(editor, "Hello World!");
       editor.blur();
       expect(text.fontFamily).toEqual(FONT_FAMILY.Virgil);
       UI.clickTool("text");
@@ -811,9 +806,7 @@ describe("textWysiwyg", () => {
         rectangle.y + rectangle.height / 2,
       );
       mouse.down();
-      editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      editor = getTextEditor();
 
       editor.select();
       fireEvent.click(screen.getByTitle(/code/i));
@@ -846,17 +839,9 @@ describe("textWysiwyg", () => {
 
       Keyboard.keyDown(KEYS.ENTER);
       let text = h.elements[1] as ExcalidrawTextElementWithContainer;
-      let editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      let editor = getTextEditor();
 
-      fireEvent.change(editor, {
-        target: {
-          value: "Hello World!",
-        },
-      });
-
-      editor.dispatchEvent(new Event("input"));
+      updateTextEditor(editor, "Hello World!");
 
       await new Promise((cb) => setTimeout(cb, 0));
       editor.blur();
@@ -875,17 +860,8 @@ describe("textWysiwyg", () => {
       mouse.select(rectangle);
       Keyboard.keyPress(KEYS.ENTER);
 
-      editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-
-      fireEvent.change(editor, {
-        target: {
-          value: "Hello",
-        },
-      });
-
-      editor.dispatchEvent(new Event("input"));
+      editor = getTextEditor();
+      updateTextEditor(editor, "Hello");
 
       await new Promise((r) => setTimeout(r, 0));
 
@@ -913,13 +889,11 @@ describe("textWysiwyg", () => {
       const text = h.elements[1] as ExcalidrawTextElementWithContainer;
       expect(text.containerId).toBe(rectangle.id);
 
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      const editor = getTextEditor();
 
       await new Promise((r) => setTimeout(r, 0));
 
-      fireEvent.change(editor, { target: { value: "Hello World!" } });
+      updateTextEditor(editor, "Hello World!");
       editor.blur();
       expect(rectangle.boundElements).toStrictEqual([
         { id: text.id, type: "text" },
@@ -952,11 +926,9 @@ describe("textWysiwyg", () => {
       // Bind first text
       const text = h.elements[1] as ExcalidrawTextElementWithContainer;
       expect(text.containerId).toBe(rectangle.id);
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      const editor = getTextEditor();
       await new Promise((r) => setTimeout(r, 0));
-      fireEvent.change(editor, { target: { value: "Hello World!" } });
+      updateTextEditor(editor, "Hello World!");
       editor.blur();
       expect(rectangle.boundElements).toStrictEqual([
         { id: text.id, type: "text" },
@@ -975,11 +947,9 @@ describe("textWysiwyg", () => {
     it("should respect text alignment when resizing", async () => {
       Keyboard.keyPress(KEYS.ENTER);
 
-      let editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      let editor = getTextEditor();
       await new Promise((r) => setTimeout(r, 0));
-      fireEvent.change(editor, { target: { value: "Hello" } });
+      updateTextEditor(editor, "Hello");
       editor.blur();
 
       // should center align horizontally and vertically by default
@@ -994,9 +964,7 @@ describe("textWysiwyg", () => {
       mouse.select(rectangle);
       Keyboard.keyPress(KEYS.ENTER);
 
-      editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      editor = getTextEditor();
 
       editor.select();
 
@@ -1019,9 +987,7 @@ describe("textWysiwyg", () => {
 
       mouse.select(rectangle);
       Keyboard.keyPress(KEYS.ENTER);
-      editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      editor = getTextEditor();
 
       editor.select();
 
@@ -1059,11 +1025,9 @@ describe("textWysiwyg", () => {
       expect(text.type).toBe("text");
       expect(text.containerId).toBe(rectangle.id);
       mouse.down();
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      const editor = getTextEditor();
 
-      fireEvent.change(editor, { target: { value: "Hello World!" } });
+      updateTextEditor(editor, "Hello World!");
 
       await new Promise((r) => setTimeout(r, 0));
       editor.blur();
@@ -1076,11 +1040,9 @@ describe("textWysiwyg", () => {
     it("should scale font size correctly when resizing using shift", async () => {
       Keyboard.keyPress(KEYS.ENTER);
 
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      const editor = getTextEditor();
       await new Promise((r) => setTimeout(r, 0));
-      fireEvent.change(editor, { target: { value: "Hello" } });
+      updateTextEditor(editor, "Hello");
       editor.blur();
       const textElement = h.elements[1] as ExcalidrawTextElement;
       expect(rectangle.width).toBe(90);
@@ -1098,11 +1060,9 @@ describe("textWysiwyg", () => {
     it("should bind text correctly when container duplicated with alt-drag", async () => {
       Keyboard.keyPress(KEYS.ENTER);
 
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      const editor = getTextEditor();
       await new Promise((r) => setTimeout(r, 0));
-      fireEvent.change(editor, { target: { value: "Hello" } });
+      updateTextEditor(editor, "Hello");
       editor.blur();
       expect(h.elements.length).toBe(2);
 
@@ -1132,11 +1092,9 @@ describe("textWysiwyg", () => {
 
     it("undo should work", async () => {
       Keyboard.keyPress(KEYS.ENTER);
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      const editor = getTextEditor();
       await new Promise((r) => setTimeout(r, 0));
-      fireEvent.change(editor, { target: { value: "Hello" } });
+      updateTextEditor(editor, "Hello");
       editor.blur();
       expect(rectangle.boundElements).toStrictEqual([
         { id: h.elements[1].id, type: "text" },
@@ -1171,54 +1129,64 @@ describe("textWysiwyg", () => {
 
     it("should not allow bound text with only whitespaces", async () => {
       Keyboard.keyPress(KEYS.ENTER);
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      const editor = getTextEditor();
       await new Promise((r) => setTimeout(r, 0));
 
-      fireEvent.change(editor, { target: { value: "   " } });
+      updateTextEditor(editor, "   ");
       editor.blur();
       expect(rectangle.boundElements).toStrictEqual([]);
       expect(h.elements[1].isDeleted).toBe(true);
     });
 
     it("should restore original container height and clear cache once text is unbind", async () => {
-      const originalRectHeight = rectangle.height;
-      expect(rectangle.height).toBe(originalRectHeight);
-
-      Keyboard.keyPress(KEYS.ENTER);
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-      await new Promise((r) => setTimeout(r, 0));
-
-      fireEvent.change(editor, {
-        target: { value: "Online whiteboard collaboration made easy" },
+      const container = API.createElement({
+        type: "rectangle",
+        height: 75,
+        width: 90,
       });
-      editor.blur();
-      expect(rectangle.height).toBe(185);
-      mouse.select(rectangle);
+      const originalRectHeight = container.height;
+      expect(container.height).toBe(originalRectHeight);
+
+      const text = API.createElement({
+        type: "text",
+        text: "Online whiteboard collaboration made easy",
+      });
+
+      h.elements = [container, text];
+      API.setSelectedElements([container, text]);
       fireEvent.contextMenu(GlobalTestState.canvas, {
         button: 2,
         clientX: 20,
         clientY: 30,
       });
-      const contextMenu = document.querySelector(".context-menu");
+      let contextMenu = document.querySelector(".context-menu");
+
+      fireEvent.click(
+        queryByText(contextMenu as HTMLElement, "Bind text to the container")!,
+      );
+
+      expect((h.elements[1] as ExcalidrawTextElementWithContainer).text).toBe(
+        "Online \nwhitebo\nard \ncollabo\nration \nmade \neasy",
+      );
+      fireEvent.contextMenu(GlobalTestState.canvas, {
+        button: 2,
+        clientX: 20,
+        clientY: 30,
+      });
+      contextMenu = document.querySelector(".context-menu");
       fireEvent.click(queryByText(contextMenu as HTMLElement, "Unbind text")!);
       expect(h.elements[0].boundElements).toEqual([]);
-      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(null);
+      expect(getOriginalContainerHeightFromCache(container.id)).toBe(null);
 
-      expect(rectangle.height).toBe(originalRectHeight);
+      expect(container.height).toBe(originalRectHeight);
     });
 
     it("should reset the container height cache when resizing", async () => {
       Keyboard.keyPress(KEYS.ENTER);
       expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);
-      let editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      let editor = getTextEditor();
       await new Promise((r) => setTimeout(r, 0));
-      fireEvent.change(editor, { target: { value: "Hello" } });
+      updateTextEditor(editor, "Hello");
       editor.blur();
 
       resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
@@ -1228,9 +1196,7 @@ describe("textWysiwyg", () => {
       mouse.select(rectangle);
       Keyboard.keyPress(KEYS.ENTER);
 
-      editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      editor = getTextEditor();
 
       await new Promise((r) => setTimeout(r, 0));
       editor.blur();
@@ -1243,12 +1209,8 @@ describe("textWysiwyg", () => {
       Keyboard.keyPress(KEYS.ENTER);
       expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);
 
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-
-      await new Promise((r) => setTimeout(r, 0));
-      fireEvent.change(editor, { target: { value: "Hello World!" } });
+      const editor = getTextEditor();
+      updateTextEditor(editor, "Hello World!");
       editor.blur();
 
       mouse.select(rectangle);
@@ -1272,12 +1234,8 @@ describe("textWysiwyg", () => {
       Keyboard.keyPress(KEYS.ENTER);
       expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);
 
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-
-      await new Promise((r) => setTimeout(r, 0));
-      fireEvent.change(editor, { target: { value: "Hello World!" } });
+      const editor = getTextEditor();
+      updateTextEditor(editor, "Hello World!");
       editor.blur();
       expect(
         (h.elements[1] as ExcalidrawTextElementWithContainer).lineHeight,
@@ -1308,17 +1266,12 @@ describe("textWysiwyg", () => {
 
       beforeEach(async () => {
         Keyboard.keyPress(KEYS.ENTER);
-        editor = document.querySelector(
-          ".excalidraw-textEditorContainer > textarea",
-        ) as HTMLTextAreaElement;
-        await new Promise((r) => setTimeout(r, 0));
-        fireEvent.change(editor, { target: { value: "Hello" } });
+        editor = getTextEditor();
+        updateTextEditor(editor, "Hello");
         editor.blur();
         mouse.select(rectangle);
         Keyboard.keyPress(KEYS.ENTER);
-        editor = document.querySelector(
-          ".excalidraw-textEditorContainer > textarea",
-        ) as HTMLTextAreaElement;
+        editor = getTextEditor();
         editor.select();
       });
 
@@ -1429,17 +1382,12 @@ describe("textWysiwyg", () => {
     it("should wrap text in a container when wrap text in container triggered from context menu", async () => {
       UI.clickTool("text");
       mouse.clickAt(20, 30);
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
+      const editor = getTextEditor();
 
-      fireEvent.change(editor, {
-        target: {
-          value: "Excalidraw is an opensource virtual collaborative whiteboard",
-        },
-      });
-
-      editor.dispatchEvent(new Event("input"));
+      updateTextEditor(
+        editor,
+        "Excalidraw is an opensource virtual collaborative whiteboard",
+      );
       await new Promise((cb) => setTimeout(cb, 0));
 
       editor.select();
@@ -1491,7 +1439,7 @@ describe("textWysiwyg", () => {
           roundness: {
             type: 3,
           },
-          strokeColor: "#000000",
+          strokeColor: "#1e1e1e",
           strokeStyle: "solid",
           strokeWidth: 1,
           type: "rectangle",
@@ -1506,10 +1454,59 @@ describe("textWysiwyg", () => {
         expect.objectContaining({
           text: "Excalidraw is an opensource virtual collaborative whiteboard",
           verticalAlign: VERTICAL_ALIGN.MIDDLE,
-          textAlign: TEXT_ALIGN.LEFT,
+          textAlign: TEXT_ALIGN.CENTER,
           boundElements: null,
         }),
       );
     });
+
+    it("shouldn't bind to container if container has bound text not centered and text tool is used", async () => {
+      expect(h.elements.length).toBe(1);
+
+      Keyboard.keyPress(KEYS.ENTER);
+
+      expect(h.elements.length).toBe(2);
+
+      // Bind first text
+      let text = h.elements[1] as ExcalidrawTextElementWithContainer;
+      expect(text.containerId).toBe(rectangle.id);
+      let editor = getTextEditor();
+      await new Promise((r) => setTimeout(r, 0));
+      updateTextEditor(editor, "Hello!");
+      expect(
+        (h.elements[1] as ExcalidrawTextElementWithContainer).verticalAlign,
+      ).toBe(VERTICAL_ALIGN.MIDDLE);
+
+      fireEvent.click(screen.getByTitle("Align bottom"));
+      await new Promise((r) => setTimeout(r, 0));
+
+      editor.blur();
+
+      expect(rectangle.boundElements).toStrictEqual([
+        { id: text.id, type: "text" },
+      ]);
+      expect(
+        (h.elements[1] as ExcalidrawTextElementWithContainer).verticalAlign,
+      ).toBe(VERTICAL_ALIGN.BOTTOM);
+
+      // Attempt to Bind 2nd text using text tool
+      UI.clickTool("text");
+      mouse.clickAt(
+        rectangle.x + rectangle.width / 2,
+        rectangle.y + rectangle.height / 2,
+      );
+      editor = getTextEditor();
+      await new Promise((r) => setTimeout(r, 0));
+      updateTextEditor(editor, "Excalidraw");
+      editor.blur();
+
+      expect(h.elements.length).toBe(3);
+      expect(rectangle.boundElements).toStrictEqual([
+        { id: h.elements[1].id, type: "text" },
+      ]);
+      text = h.elements[2] as ExcalidrawTextElementWithContainer;
+      expect(text.containerId).toBe(null);
+      expect(text.text).toBe("Excalidraw");
+    });
   });
 });
diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx
index ef4f7c926..9105ba700 100644
--- a/src/element/textWysiwyg.tsx
+++ b/src/element/textWysiwyg.tsx
@@ -11,7 +11,7 @@ import {
   isBoundToContainer,
   isTextElement,
 } from "./typeChecks";
-import { CLASSES, isSafari, VERTICAL_ALIGN } from "../constants";
+import { CLASSES, isSafari } from "../constants";
 import {
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -23,19 +23,18 @@ import { AppState } from "../types";
 import { mutateElement } from "./mutateElement";
 import {
   getBoundTextElementId,
-  getContainerCoords,
   getContainerDims,
   getContainerElement,
   getTextElementAngle,
   getTextWidth,
-  measureText,
   normalizeText,
   redrawTextBoundingBox,
   wrapText,
-  getMaxContainerHeight,
-  getMaxContainerWidth,
+  getBoundTextMaxHeight,
+  getBoundTextMaxWidth,
   computeContainerDimensionForBoundText,
   detectLineHeight,
+  computeBoundTextPosition,
 } from "./textElement";
 import {
   actionDecreaseFontSize,
@@ -162,7 +161,7 @@ export const textWysiwyg = ({
       let textElementWidth = updatedTextElement.width;
       // Set to element height by default since that's
       // what is going to be used for unbounded text
-      let textElementHeight = updatedTextElement.height;
+      const textElementHeight = updatedTextElement.height;
 
       if (container && updatedTextElement.containerId) {
         if (isArrowElement(container)) {
@@ -179,15 +178,6 @@ export const textWysiwyg = ({
           editable,
         );
         const containerDims = getContainerDims(container);
-        // using editor.style.height to get the accurate height of text editor
-        const editorHeight = Number(editable.style.height.slice(0, -2));
-        if (editorHeight > 0) {
-          textElementHeight = editorHeight;
-        }
-        if (propertiesUpdated) {
-          // update height of the editor after properties updated
-          textElementHeight = updatedTextElement.height;
-        }
 
         let originalContainerData;
         if (propertiesUpdated) {
@@ -205,8 +195,11 @@ export const textWysiwyg = ({
           }
         }
 
-        maxWidth = getMaxContainerWidth(container);
-        maxHeight = getMaxContainerHeight(container);
+        maxWidth = getBoundTextMaxWidth(container);
+        maxHeight = getBoundTextMaxHeight(
+          container,
+          updatedTextElement as ExcalidrawTextElementWithContainer,
+        );
 
         // autogrow container height if text exceeds
         if (!isArrowElement(container) && textElementHeight > maxHeight) {
@@ -229,29 +222,18 @@ export const textWysiwyg = ({
             container.type,
           );
           mutateElement(container, { height: targetContainerHeight });
-        }
-        // Start pushing text upward until a diff of 30px (padding)
-        // is reached
-        else {
-          const containerCoords = getContainerCoords(container);
-
-          // vertically center align the text
-          if (verticalAlign === VERTICAL_ALIGN.MIDDLE) {
-            if (!isArrowElement(container)) {
-              coordY =
-                containerCoords.y + maxHeight / 2 - textElementHeight / 2;
-            }
-          }
-          if (verticalAlign === VERTICAL_ALIGN.BOTTOM) {
-            coordY = containerCoords.y + (maxHeight - textElementHeight);
-          }
+        } else {
+          const { y } = computeBoundTextPosition(
+            container,
+            updatedTextElement as ExcalidrawTextElementWithContainer,
+          );
+          coordY = y;
         }
       }
       const [viewportX, viewportY] = getViewportCoords(coordX, coordY);
       const initialSelectionStart = editable.selectionStart;
       const initialSelectionEnd = editable.selectionEnd;
       const initialLength = editable.value.length;
-      editable.value = updatedTextElement.originalText;
 
       // restore cursor position after value updated so it doesn't
       // go to the end of text when container auto expanded
@@ -355,6 +337,7 @@ export const textWysiwyg = ({
     overflowWrap: "break-word",
     boxSizing: "content-box",
   });
+  editable.value = element.originalText;
   updateWysiwygStyle();
 
   if (onChange) {
@@ -377,7 +360,7 @@ export const textWysiwyg = ({
         const wrappedText = wrapText(
           `${editable.value}${data}`,
           font,
-          getMaxContainerWidth(container),
+          getBoundTextMaxWidth(container),
         );
         const width = getTextWidth(wrappedText, font);
         editable.style.width = `${width}px`;
@@ -385,25 +368,6 @@ export const textWysiwyg = ({
     };
 
     editable.oninput = () => {
-      const updatedTextElement = Scene.getScene(element)?.getElement(
-        id,
-      ) as ExcalidrawTextElement;
-      const font = getFontString(updatedTextElement);
-      if (isBoundToContainer(element)) {
-        const container = getContainerElement(element);
-        const wrappedText = wrapText(
-          normalizeText(editable.value),
-          font,
-          getMaxContainerWidth(container!),
-        );
-        const { width, height } = measureText(
-          wrappedText,
-          font,
-          updatedTextElement.lineHeight,
-        );
-        editable.style.width = `${width}px`;
-        editable.style.height = `${height}px`;
-      }
       onChange(normalizeText(editable.value));
     };
   }
@@ -633,20 +597,46 @@ export const textWysiwyg = ({
     // in that same tick.
     const target = event?.target;
 
-    const isTargetColorPicker =
-      target instanceof HTMLInputElement &&
-      target.closest(".color-picker-input") &&
-      isWritableElement(target);
+    const isTargetPickerTrigger =
+      target instanceof HTMLElement &&
+      target.classList.contains("active-color");
 
     setTimeout(() => {
       editable.onblur = handleSubmit;
-      if (target && isTargetColorPicker) {
-        target.onblur = () => {
-          editable.focus();
+
+      if (isTargetPickerTrigger) {
+        const callback = (
+          mutationList: MutationRecord[],
+          observer: MutationObserver,
+        ) => {
+          const radixIsRemoved = mutationList.find(
+            (mutation) =>
+              mutation.removedNodes.length > 0 &&
+              (mutation.removedNodes[0] as HTMLElement).dataset
+                ?.radixPopperContentWrapper !== undefined,
+          );
+
+          if (radixIsRemoved) {
+            // should work without this in theory
+            // and i think it does actually but radix probably somewhere,
+            // somehow sets the focus elsewhere
+            setTimeout(() => {
+              editable.focus();
+            });
+
+            observer.disconnect();
+          }
         };
+
+        const observer = new MutationObserver(callback);
+
+        observer.observe(document.querySelector(".excalidraw-container")!, {
+          childList: true,
+        });
       }
+
       // case: clicking on the same property → no change → no update → no focus
-      if (!isTargetColorPicker) {
+      if (!isTargetPickerTrigger) {
         editable.focus();
       }
     });
@@ -654,16 +644,16 @@ export const textWysiwyg = ({
 
   // prevent blur when changing properties from the menu
   const onPointerDown = (event: MouseEvent) => {
-    const isTargetColorPicker =
-      event.target instanceof HTMLInputElement &&
-      event.target.closest(".color-picker-input") &&
-      isWritableElement(event.target);
+    const isTargetPickerTrigger =
+      event.target instanceof HTMLElement &&
+      event.target.classList.contains("active-color");
+
     if (
       ((event.target instanceof HTMLElement ||
         event.target instanceof SVGElement) &&
         event.target.closest(`.${CLASSES.SHAPE_ACTIONS_MENU}`) &&
         !isWritableElement(event.target)) ||
-      isTargetColorPicker
+      isTargetPickerTrigger
     ) {
       editable.onblur = null;
       window.addEventListener("pointerup", bindBlurEvent);
@@ -677,7 +667,7 @@ export const textWysiwyg = ({
   const unbindUpdate = Scene.getScene(element)!.addCallback(() => {
     updateWysiwygStyle();
     const isColorPickerActive = !!document.activeElement?.closest(
-      ".color-picker-input",
+      ".color-picker-content",
     );
     if (!isColorPickerActive) {
       editable.focus();
diff --git a/src/element/transformHandles.ts b/src/element/transformHandles.ts
index 823ba5c72..cf8e5b6a2 100644
--- a/src/element/transformHandles.ts
+++ b/src/element/transformHandles.ts
@@ -8,7 +8,7 @@ import { getElementAbsoluteCoords } from "./bounds";
 import { rotate } from "../math";
 import { AppState, Zoom } from "../types";
 import { isTextElement } from ".";
-import { isLinearElement } from "./typeChecks";
+import { isFrameElement, isLinearElement } from "./typeChecks";
 import { DEFAULT_SPACING } from "../renderer/renderScene";
 
 export type TransformHandleDirection =
@@ -44,6 +44,14 @@ export const OMIT_SIDES_FOR_MULTIPLE_ELEMENTS = {
   w: true,
 };
 
+export const OMIT_SIDES_FOR_FRAME = {
+  e: true,
+  s: true,
+  n: true,
+  w: true,
+  rotation: true,
+};
+
 const OMIT_SIDES_FOR_TEXT_ELEMENT = {
   e: true,
   s: true,
@@ -249,6 +257,10 @@ export const getTransformHandles = (
     }
   } else if (isTextElement(element)) {
     omitSides = OMIT_SIDES_FOR_TEXT_ELEMENT;
+  } else if (isFrameElement(element)) {
+    omitSides = {
+      rotation: true,
+    };
   }
   const dashedLineMargin = isLinearElement(element)
     ? DEFAULT_SPACING + 8
diff --git a/src/element/typeChecks.test.ts b/src/element/typeChecks.test.ts
index ab04c29b7..60eb9e273 100644
--- a/src/element/typeChecks.test.ts
+++ b/src/element/typeChecks.test.ts
@@ -30,15 +30,6 @@ describe("Test TypeChecks", () => {
           }),
         ),
       ).toBeTruthy();
-
-      expect(
-        hasBoundTextElement(
-          API.createElement({
-            type: "image",
-            boundElements: [{ type: "text", id: "text-id" }],
-          }),
-        ),
-      ).toBeTruthy();
     });
 
     it("should return false for text bindable containers without bound text", () => {
@@ -62,5 +53,14 @@ describe("Test TypeChecks", () => {
         ),
       ).toBeFalsy();
     });
+
+    expect(
+      hasBoundTextElement(
+        API.createElement({
+          type: "image",
+          boundElements: [{ type: "text", id: "text-id" }],
+        }),
+      ),
+    ).toBeFalsy();
   });
 });
diff --git a/src/element/typeChecks.ts b/src/element/typeChecks.ts
index 164fafe68..d255a9a25 100644
--- a/src/element/typeChecks.ts
+++ b/src/element/typeChecks.ts
@@ -12,6 +12,7 @@ import {
   ExcalidrawImageElement,
   ExcalidrawTextElementWithContainer,
   ExcalidrawTextContainer,
+  ExcalidrawFrameElement,
   RoundnessType,
 } from "./types";
 
@@ -45,6 +46,12 @@ export const isTextElement = (
   return element != null && element.type === "text";
 };
 
+export const isFrameElement = (
+  element: ExcalidrawElement | null,
+): element is ExcalidrawFrameElement => {
+  return element != null && element.type === "frame";
+};
+
 export const isFreeDrawElement = (
   element?: ExcalidrawElement | null,
 ): element is ExcalidrawFreeDrawElement => {
@@ -119,7 +126,6 @@ export const isTextBindableContainer = (
     (element.type === "rectangle" ||
       element.type === "diamond" ||
       element.type === "ellipse" ||
-      element.type === "image" ||
       isArrowElement(element))
   );
 };
diff --git a/src/element/types.ts b/src/element/types.ts
index 4a4db7e8b..a8c49e1a0 100644
--- a/src/element/types.ts
+++ b/src/element/types.ts
@@ -53,6 +53,7 @@ type _ExcalidrawElementBase = Readonly<{
   /** List of groups the element belongs to.
       Ordered from deepest to shallowest. */
   groupIds: readonly GroupId[];
+  frameId: string | null;
   /** other elements that are bound to this element */
   boundElements:
     | readonly Readonly<{
@@ -98,6 +99,11 @@ export type InitializedExcalidrawImageElement = MarkNonNullable<
   "fileId"
 >;
 
+export type ExcalidrawFrameElement = _ExcalidrawElementBase & {
+  type: "frame";
+  name: string | null;
+};
+
 /**
  * These are elements that don't have any additional properties.
  */
@@ -117,7 +123,8 @@ export type ExcalidrawElement =
   | ExcalidrawTextElement
   | ExcalidrawLinearElement
   | ExcalidrawFreeDrawElement
-  | ExcalidrawImageElement;
+  | ExcalidrawImageElement
+  | ExcalidrawFrameElement;
 
 export type NonDeleted<TElement extends ExcalidrawElement> = TElement & {
   isDeleted: boolean;
@@ -148,13 +155,13 @@ export type ExcalidrawBindableElement =
   | ExcalidrawDiamondElement
   | ExcalidrawEllipseElement
   | ExcalidrawTextElement
-  | ExcalidrawImageElement;
+  | ExcalidrawImageElement
+  | ExcalidrawFrameElement;
 
 export type ExcalidrawTextContainer =
   | ExcalidrawRectangleElement
   | ExcalidrawDiamondElement
   | ExcalidrawEllipseElement
-  | ExcalidrawImageElement
   | ExcalidrawArrowElement;
 
 export type ExcalidrawTextElementWithContainer = {
diff --git a/src/excalidraw-app/CustomStats.tsx b/src/excalidraw-app/CustomStats.tsx
index d23e67a9f..addea4cd9 100644
--- a/src/excalidraw-app/CustomStats.tsx
+++ b/src/excalidraw-app/CustomStats.tsx
@@ -7,8 +7,9 @@ import {
 import { DEFAULT_VERSION } from "../constants";
 import { t } from "../i18n";
 import { copyTextToSystemClipboard } from "../clipboard";
-import { AppState } from "../types";
 import { NonDeletedExcalidrawElement } from "../element/types";
+import { UIAppState } from "../types";
+
 type StorageSizes = { scene: number; total: number };
 
 const STORAGE_SIZE_TIMEOUT = 500;
@@ -23,7 +24,7 @@ const getStorageSizes = debounce((cb: (sizes: StorageSizes) => void) => {
 type Props = {
   setToast: (message: string) => void;
   elements: readonly NonDeletedExcalidrawElement[];
-  appState: AppState;
+  appState: UIAppState;
 };
 const CustomStats = (props: Props) => {
   const [storageSizes, setStorageSizes] = useState<StorageSizes>({
diff --git a/src/excalidraw-app/collab/Collab.tsx b/src/excalidraw-app/collab/Collab.tsx
index e48484ab6..ec0c2a348 100644
--- a/src/excalidraw-app/collab/Collab.tsx
+++ b/src/excalidraw-app/collab/Collab.tsx
@@ -157,6 +157,8 @@ class Collab extends PureComponent<Props, CollabState> {
     window.addEventListener("offline", this.onOfflineStatusToggle);
     window.addEventListener(EVENT.UNLOAD, this.onUnload);
 
+    this.onOfflineStatusToggle();
+
     const collabAPI: CollabAPI = {
       isCollaborating: this.isCollaborating,
       onPointerUpdate: this.onPointerUpdate,
@@ -168,7 +170,6 @@ class Collab extends PureComponent<Props, CollabState> {
     };
 
     appJotaiStore.set(collabAPIAtom, collabAPI);
-    this.onOfflineStatusToggle();
 
     if (
       process.env.NODE_ENV === ENV.TEST ||
@@ -380,6 +381,13 @@ class Collab extends PureComponent<Props, CollabState> {
   startCollaboration = async (
     existingRoomLinkData: null | { roomId: string; roomKey: string },
   ): Promise<ImportedDataState | null> => {
+    if (!this.state.username) {
+      import("@excalidraw/random-username").then(({ getRandomUsername }) => {
+        const username = getRandomUsername();
+        this.onUsernameChange(username);
+      });
+    }
+
     if (this.portal.socket) {
       return null;
     }
@@ -834,7 +842,6 @@ class Collab extends PureComponent<Props, CollabState> {
             setErrorMessage={(errorMessage) => {
               this.setState({ errorMessage });
             }}
-            theme={this.excalidrawAPI.getAppState().theme}
           />
         )}
         {errorMessage && (
diff --git a/src/excalidraw-app/collab/RoomDialog.scss b/src/excalidraw-app/collab/RoomDialog.scss
index c8bf0dcde..0d1bcad6c 100644
--- a/src/excalidraw-app/collab/RoomDialog.scss
+++ b/src/excalidraw-app/collab/RoomDialog.scss
@@ -1,76 +1,149 @@
 @import "../../css/variables.module";
 
 .excalidraw {
-  .RoomDialog__button {
-    border: 1px solid var(--default-border-color) !important;
-  }
-
-  .RoomDialog-linkContainer {
+  .RoomDialog {
     display: flex;
-    margin: 1.5em 0;
-  }
+    flex-direction: column;
+    gap: 1.5rem;
 
-  input.RoomDialog-link {
-    color: var(--text-primary-color);
-    min-width: 0;
-    flex: 1 1 auto;
-    margin-inline-start: 1em;
-    display: inline-block;
-    cursor: pointer;
-    border: none;
-    padding: 0 0.5rem;
-    white-space: nowrap;
-    border-radius: var(--space-factor);
-    background-color: var(--button-gray-1);
-  }
-
-  .RoomDialog-emoji {
-    font-family: sans-serif;
-  }
-
-  .RoomDialog-usernameContainer {
-    display: flex;
-    margin: 1.5em 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     @include isMobile {
-      flex-direction: column;
-      align-items: stretch;
+      height: calc(100vh - 5rem);
     }
-  }
 
-  @include isMobile {
-    .RoomDialog-usernameLabel {
-      font-weight: bold;
+    &__popover {
+      @keyframes RoomDialog__popover__scaleIn {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+
+      box-sizing: border-box;
+      z-index: 100;
+
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: flex-start;
+      padding: 0.125rem 0.5rem;
+      gap: 0.125rem;
+
+      height: 1.125rem;
+
+      border: none;
+      border-radius: 0.6875rem;
+
+      font-family: "Assistant";
+      font-style: normal;
+      font-weight: 600;
+      font-size: 0.75rem;
+      line-height: 110%;
+
+      background: var(--color-success-lighter);
+      color: var(--color-success);
+
+      & > svg {
+        width: 0.875rem;
+        height: 0.875rem;
+      }
+
+      transform-origin: var(--radix-popover-content-transform-origin);
+      animation: RoomDialog__popover__scaleIn 150ms ease-out;
     }
-  }
 
-  .RoomDialog-username {
-    background-color: var(--input-bg-color);
-    border-color: var(--input-border-color);
-    appearance: none;
-    min-width: 0;
-    flex: 1 1 auto;
-    margin-inline-start: 1em;
-    @include isMobile {
-      margin-top: 0.5em;
-      margin-inline-start: 0;
+    &__inactive {
+      font-family: "Assistant";
+
+      &__illustration {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: center;
+
+        & svg {
+          filter: var(--theme-filter);
+        }
+      }
+
+      &__header {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: center;
+
+        font-weight: 700;
+        font-size: 1.3125rem;
+        line-height: 130%;
+
+        color: var(--color-primary);
+      }
+
+      &__description {
+        font-weight: 400;
+        font-size: 0.875rem;
+        line-height: 150%;
+
+        text-align: center;
+
+        color: var(--text-primary-color);
+
+        & strong {
+          display: block;
+          font-weight: 700;
+        }
+      }
+
+      &__start_session {
+        display: flex;
+
+        align-items: center;
+        justify-content: center;
+      }
     }
-    font-size: 1em;
-  }
 
-  .RoomDialog-sessionStartButtonContainer {
-    display: flex;
-    justify-content: center;
-  }
+    &__active {
+      &__share {
+        display: none !important;
 
-  .Modal .RoomDialog-stopSession {
-    background-color: var(--button-destructive-bg-color);
+        @include isMobile {
+          display: flex !important;
+        }
+      }
 
-    .ToolIcon__label,
-    .ToolIcon__icon svg {
-      color: var(--button-destructive-color);
+      &__header {
+        margin: 0;
+      }
+
+      &__linkRow {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-end;
+        gap: 0.75rem;
+      }
+
+      &__description {
+        border-top: 1px solid var(--color-gray-20);
+
+        padding: 0.5rem 0.5rem 0;
+        font-weight: 400;
+        font-size: 0.75rem;
+        line-height: 150%;
+
+        & p {
+          margin: 0;
+        }
+
+        & p + p {
+          margin-top: 1em;
+        }
+      }
+
+      &__actions {
+        display: flex;
+        justify-content: center;
+      }
     }
   }
 }
diff --git a/src/excalidraw-app/collab/RoomDialog.tsx b/src/excalidraw-app/collab/RoomDialog.tsx
index 50f586efc..6b0706270 100644
--- a/src/excalidraw-app/collab/RoomDialog.tsx
+++ b/src/excalidraw-app/collab/RoomDialog.tsx
@@ -1,22 +1,27 @@
-import React, { useRef } from "react";
+import { useRef, useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
+
 import { copyTextToSystemClipboard } from "../../clipboard";
+import { trackEvent } from "../../analytics";
+import { getFrame } from "../../utils";
+import { useI18n } from "../../i18n";
+import { KEYS } from "../../keys";
+
 import { Dialog } from "../../components/Dialog";
 import {
-  clipboard,
-  start,
-  stop,
+  copyIcon,
+  playerPlayIcon,
+  playerStopFilledIcon,
   share,
   shareIOS,
   shareWindows,
+  tablerCheckIcon,
 } from "../../components/icons";
-import { ToolButton } from "../../components/ToolButton";
+import { TextField } from "../../components/TextField";
+import { FilledButton } from "../../components/FilledButton";
+
+import { ReactComponent as CollabImage } from "../../assets/lock.svg";
 import "./RoomDialog.scss";
-import Stack from "../../components/Stack";
-import { AppState } from "../../types";
-import { trackEvent } from "../../analytics";
-import { getFrame } from "../../utils";
-import DialogActionButton from "../../components/DialogActionButton";
-import { useI18n } from "../../i18n";
 
 const getShareIcon = () => {
   const navigator = window.navigator as any;
@@ -32,16 +37,7 @@ const getShareIcon = () => {
   return share;
 };
 
-const RoomDialog = ({
-  handleClose,
-  activeRoomLink,
-  username,
-  onUsernameChange,
-  onRoomCreate,
-  onRoomDestroy,
-  setErrorMessage,
-  theme,
-}: {
+export type RoomModalProps = {
   handleClose: () => void;
   activeRoomLink: string;
   username: string;
@@ -49,20 +45,41 @@ const RoomDialog = ({
   onRoomCreate: () => void;
   onRoomDestroy: () => void;
   setErrorMessage: (message: string) => void;
-  theme: AppState["theme"];
-}) => {
+};
+
+export const RoomModal = ({
+  activeRoomLink,
+  onRoomCreate,
+  onRoomDestroy,
+  setErrorMessage,
+  username,
+  onUsernameChange,
+  handleClose,
+}: RoomModalProps) => {
   const { t } = useI18n();
-  const roomLinkInput = useRef<HTMLInputElement>(null);
+  const [justCopied, setJustCopied] = useState(false);
+  const timerRef = useRef<number>(0);
+  const ref = useRef<HTMLInputElement>(null);
+  const isShareSupported = "share" in navigator;
 
   const copyRoomLink = async () => {
     try {
       await copyTextToSystemClipboard(activeRoomLink);
+
+      setJustCopied(true);
+
+      if (timerRef.current) {
+        window.clearTimeout(timerRef.current);
+      }
+
+      timerRef.current = window.setTimeout(() => {
+        setJustCopied(false);
+      }, 3000);
     } catch (error: any) {
       setErrorMessage(error.message);
     }
-    if (roomLinkInput.current) {
-      roomLinkInput.current.select();
-    }
+
+    ref.current?.select();
   };
 
   const shareRoomLink = async () => {
@@ -77,112 +94,124 @@ const RoomDialog = ({
     }
   };
 
-  const selectInput = (event: React.MouseEvent<HTMLInputElement>) => {
-    if (event.target !== document.activeElement) {
-      event.preventDefault();
-      (event.target as HTMLInputElement).select();
-    }
-  };
-
-  const renderRoomDialog = () => {
+  if (activeRoomLink) {
     return (
-      <div className="RoomDialog-modal">
-        {!activeRoomLink && (
-          <>
-            <p>{t("roomDialog.desc_intro")}</p>
-            <p>{`🔒 ${t("roomDialog.desc_privacy")}`}</p>
-            <div className="RoomDialog-sessionStartButtonContainer">
-              <DialogActionButton
-                label={t("roomDialog.button_startSession")}
-                onClick={() => {
-                  trackEvent("share", "room creation", `ui (${getFrame()})`);
-                  onRoomCreate();
-                }}
-              >
-                {start}
-              </DialogActionButton>
-            </div>
-          </>
-        )}
-        {activeRoomLink && (
-          <>
-            <p>{t("roomDialog.desc_inProgressIntro")}</p>
-            <p>{t("roomDialog.desc_shareLink")}</p>
-            <div className="RoomDialog-linkContainer">
-              <Stack.Row gap={2}>
-                {"share" in navigator ? (
-                  <ToolButton
-                    className="RoomDialog__button"
-                    type="button"
-                    icon={getShareIcon()}
-                    title={t("labels.share")}
-                    aria-label={t("labels.share")}
-                    onClick={shareRoomLink}
-                  />
-                ) : null}
-                <ToolButton
-                  className="RoomDialog__button"
-                  type="button"
-                  icon={clipboard}
-                  title={t("labels.copy")}
-                  aria-label={t("labels.copy")}
-                  onClick={copyRoomLink}
-                />
-              </Stack.Row>
-              <input
-                type="text"
-                value={activeRoomLink}
-                readOnly={true}
-                className="RoomDialog-link"
-                ref={roomLinkInput}
-                onPointerDown={selectInput}
+      <>
+        <h3 className="RoomDialog__active__header">
+          {t("labels.liveCollaboration")}
+        </h3>
+        <TextField
+          value={username}
+          placeholder="Your name"
+          label="Your name"
+          onChange={onUsernameChange}
+          onKeyDown={(event) => event.key === KEYS.ENTER && handleClose()}
+        />
+        <div className="RoomDialog__active__linkRow">
+          <TextField
+            ref={ref}
+            label="Link"
+            readonly
+            fullWidth
+            value={activeRoomLink}
+          />
+          {isShareSupported && (
+            <FilledButton
+              size="large"
+              variant="icon"
+              label="Share"
+              startIcon={getShareIcon()}
+              className="RoomDialog__active__share"
+              onClick={shareRoomLink}
+            />
+          )}
+          <Popover.Root open={justCopied}>
+            <Popover.Trigger asChild>
+              <FilledButton
+                size="large"
+                label="Copy link"
+                startIcon={copyIcon}
+                onClick={copyRoomLink}
               />
-            </div>
-            <div className="RoomDialog-usernameContainer">
-              <label className="RoomDialog-usernameLabel" htmlFor="username">
-                {t("labels.yourName")}
-              </label>
-              <input
-                type="text"
-                id="username"
-                value={username.trim() || ""}
-                className="RoomDialog-username TextInput"
-                onChange={(event) => onUsernameChange(event.target.value)}
-                onKeyPress={(event) => event.key === "Enter" && handleClose()}
-              />
-            </div>
-            <p>
-              <span role="img" aria-hidden="true" className="RoomDialog-emoji">
-                {"🔒"}
-              </span>{" "}
-              {t("roomDialog.desc_privacy")}
-            </p>
-            <p>{t("roomDialog.desc_exitSession")}</p>
-            <div className="RoomDialog-sessionStartButtonContainer">
-              <DialogActionButton
-                actionType="danger"
-                label={t("roomDialog.button_stopSession")}
-                onClick={() => {
-                  trackEvent("share", "room closed");
-                  onRoomDestroy();
-                }}
-              >
-                {stop}
-              </DialogActionButton>
-            </div>
-          </>
-        )}
-      </div>
+            </Popover.Trigger>
+            <Popover.Content
+              onOpenAutoFocus={(event) => event.preventDefault()}
+              onCloseAutoFocus={(event) => event.preventDefault()}
+              className="RoomDialog__popover"
+              side="top"
+              align="end"
+              sideOffset={5.5}
+            >
+              {tablerCheckIcon} copied
+            </Popover.Content>
+          </Popover.Root>
+        </div>
+        <div className="RoomDialog__active__description">
+          <p>
+            <span
+              role="img"
+              aria-hidden="true"
+              className="RoomDialog__active__description__emoji"
+            >
+              🔒{" "}
+            </span>
+            {t("roomDialog.desc_privacy")}
+          </p>
+          <p>{t("roomDialog.desc_exitSession")}</p>
+        </div>
+
+        <div className="RoomDialog__active__actions">
+          <FilledButton
+            size="large"
+            variant="outlined"
+            color="danger"
+            label={t("roomDialog.button_stopSession")}
+            startIcon={playerStopFilledIcon}
+            onClick={() => {
+              trackEvent("share", "room closed");
+              onRoomDestroy();
+            }}
+          />
+        </div>
+      </>
     );
-  };
+  }
+
   return (
-    <Dialog
-      small
-      onCloseRequest={handleClose}
-      title={t("labels.liveCollaboration")}
-      theme={theme}
-    >
-      {renderRoomDialog()}
+    <>
+      <div className="RoomDialog__inactive__illustration">
+        <CollabImage />
+      </div>
+      <div className="RoomDialog__inactive__header">
+        {t("labels.liveCollaboration")}
+      </div>
+
+      <div className="RoomDialog__inactive__description">
+        <strong>{t("roomDialog.desc_intro")}</strong>
+        {t("roomDialog.desc_privacy")}
+      </div>
+
+      <div className="RoomDialog__inactive__start_session">
+        <FilledButton
+          size="large"
+          label={t("roomDialog.button_startSession")}
+          startIcon={playerPlayIcon}
+          onClick={() => {
+            trackEvent("share", "room creation", `ui (${getFrame()})`);
+            onRoomCreate();
+          }}
+        />
+      </div>
+    </>
+  );
+};
+
+const RoomDialog = (props: RoomModalProps) => {
+  return (
+    <Dialog size="small" onCloseRequest={props.handleClose} title={false}>
+      <div className="RoomDialog">
+        <RoomModal {...props} />
+      </div>
     </Dialog>
   );
 };
diff --git a/src/excalidraw-app/collab/reconciliation.ts b/src/excalidraw-app/collab/reconciliation.ts
index 76b6f052a..3f50bc358 100644
--- a/src/excalidraw-app/collab/reconciliation.ts
+++ b/src/excalidraw-app/collab/reconciliation.ts
@@ -65,7 +65,7 @@ export const reconcileElements = (
 
     // Mark duplicate for removal as it'll be replaced with the remote element
     if (local) {
-      // Unless the ramote and local elements are the same element in which case
+      // Unless the remote and local elements are the same element in which case
       // we need to keep it as we'd otherwise discard it from the resulting
       // array.
       if (local[0] === remoteElement) {
diff --git a/src/excalidraw-app/components/AppMainMenu.tsx b/src/excalidraw-app/components/AppMainMenu.tsx
index b1c0771e5..7b562f8b7 100644
--- a/src/excalidraw-app/components/AppMainMenu.tsx
+++ b/src/excalidraw-app/components/AppMainMenu.tsx
@@ -6,6 +6,7 @@ import { LanguageList } from "./LanguageList";
 export const AppMainMenu: React.FC<{
   setCollabDialogShown: (toggle: boolean) => any;
   isCollaborating: boolean;
+  isCollabEnabled: boolean;
 }> = React.memo((props) => {
   return (
     <MainMenu>
@@ -13,10 +14,12 @@ export const AppMainMenu: React.FC<{
       <MainMenu.DefaultItems.SaveToActiveFile />
       <MainMenu.DefaultItems.Export />
       <MainMenu.DefaultItems.SaveAsImage />
-      <MainMenu.DefaultItems.LiveCollaborationTrigger
-        isCollaborating={props.isCollaborating}
-        onSelect={() => props.setCollabDialogShown(true)}
-      />
+      {props.isCollabEnabled && (
+        <MainMenu.DefaultItems.LiveCollaborationTrigger
+          isCollaborating={props.isCollaborating}
+          onSelect={() => props.setCollabDialogShown(true)}
+        />
+      )}
 
       <MainMenu.DefaultItems.Help />
       <MainMenu.DefaultItems.ClearCanvas />
diff --git a/src/excalidraw-app/components/AppWelcomeScreen.tsx b/src/excalidraw-app/components/AppWelcomeScreen.tsx
index 1e34fa819..80fedf9fa 100644
--- a/src/excalidraw-app/components/AppWelcomeScreen.tsx
+++ b/src/excalidraw-app/components/AppWelcomeScreen.tsx
@@ -6,6 +6,7 @@ import { isExcalidrawPlusSignedUser } from "../app_constants";
 
 export const AppWelcomeScreen: React.FC<{
   setCollabDialogShown: (toggle: boolean) => any;
+  isCollabEnabled: boolean;
 }> = React.memo((props) => {
   const { t } = useI18n();
   let headingContent;
@@ -46,9 +47,11 @@ export const AppWelcomeScreen: React.FC<{
         <WelcomeScreen.Center.Menu>
           <WelcomeScreen.Center.MenuItemLoadScene />
           <WelcomeScreen.Center.MenuItemHelp />
-          <WelcomeScreen.Center.MenuItemLiveCollaborationTrigger
-            onSelect={() => props.setCollabDialogShown(true)}
-          />
+          {props.isCollabEnabled && (
+            <WelcomeScreen.Center.MenuItemLiveCollaborationTrigger
+              onSelect={() => props.setCollabDialogShown(true)}
+            />
+          )}
           {!isExcalidrawPlusSignedUser && (
             <WelcomeScreen.Center.MenuItemLink
               href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenGuest"
diff --git a/src/excalidraw-app/components/ExportToExcalidrawPlus.tsx b/src/excalidraw-app/components/ExportToExcalidrawPlus.tsx
index daf4b95c3..8e6342d3a 100644
--- a/src/excalidraw-app/components/ExportToExcalidrawPlus.tsx
+++ b/src/excalidraw-app/components/ExportToExcalidrawPlus.tsx
@@ -16,9 +16,9 @@ import { MIME_TYPES } from "../../constants";
 import { trackEvent } from "../../analytics";
 import { getFrame } from "../../utils";
 
-const exportToExcalidrawPlus = async (
+export const exportToExcalidrawPlus = async (
   elements: readonly NonDeletedExcalidrawElement[],
-  appState: AppState,
+  appState: Partial<AppState>,
   files: BinaryFiles,
 ) => {
   const firebase = await loadFirebaseStorage();
@@ -75,7 +75,7 @@ const exportToExcalidrawPlus = async (
 
 export const ExportToExcalidrawPlus: React.FC<{
   elements: readonly NonDeletedExcalidrawElement[];
-  appState: AppState;
+  appState: Partial<AppState>;
   files: BinaryFiles;
   onError: (error: Error) => void;
 }> = ({ elements, appState, files, onError }) => {
diff --git a/src/excalidraw-app/components/LanguageList.tsx b/src/excalidraw-app/components/LanguageList.tsx
index aaa5f2137..c80acc9b6 100644
--- a/src/excalidraw-app/components/LanguageList.tsx
+++ b/src/excalidraw-app/components/LanguageList.tsx
@@ -1,7 +1,7 @@
 import { useSetAtom } from "jotai";
 import React from "react";
 import { appLangCodeAtom } from "..";
-import { defaultLang, useI18n } from "../../i18n";
+import { useI18n } from "../../i18n";
 import { languages } from "../../i18n";
 
 export const LanguageList = ({ style }: { style?: React.CSSProperties }) => {
@@ -16,9 +16,6 @@ export const LanguageList = ({ style }: { style?: React.CSSProperties }) => {
       aria-label={t("buttons.selectLanguage")}
       style={style}
     >
-      <option key={defaultLang.code} value={defaultLang.code}>
-        {defaultLang.label}
-      </option>
       {languages.map((lang) => (
         <option key={lang.code} value={lang.code}>
           {lang.label}
diff --git a/src/excalidraw-app/data/index.ts b/src/excalidraw-app/data/index.ts
index 7f13bc615..c85eb27c0 100644
--- a/src/excalidraw-app/data/index.ts
+++ b/src/excalidraw-app/data/index.ts
@@ -263,7 +263,7 @@ export const loadScene = async (
       await importFromBackend(id, privateKey),
       localDataState?.appState,
       localDataState?.elements,
-      { repairBindings: true, refreshDimensions: true },
+      { repairBindings: true, refreshDimensions: false },
     );
   } else {
     data = restore(localDataState || null, null, null, {
@@ -282,11 +282,15 @@ export const loadScene = async (
   };
 };
 
+type ExportToBackendResult =
+  | { url: null; errorMessage: string }
+  | { url: string; errorMessage: null };
+
 export const exportToBackend = async (
   elements: readonly ExcalidrawElement[],
-  appState: AppState,
+  appState: Partial<AppState>,
   files: BinaryFiles,
-) => {
+): Promise<ExportToBackendResult> => {
   const encryptionKey = await generateEncryptionKey("string");
 
   const payload = await compressData(
@@ -327,14 +331,18 @@ export const exportToBackend = async (
         files: filesToUpload,
       });
 
-      window.prompt(`🔒${t("alerts.uploadedSecurly")}`, urlString);
+      return { url: urlString, errorMessage: null };
     } else if (json.error_class === "RequestTooLargeError") {
-      window.alert(t("alerts.couldNotCreateShareableLinkTooBig"));
-    } else {
-      window.alert(t("alerts.couldNotCreateShareableLink"));
+      return {
+        url: null,
+        errorMessage: t("alerts.couldNotCreateShareableLinkTooBig"),
+      };
     }
+
+    return { url: null, errorMessage: t("alerts.couldNotCreateShareableLink") };
   } catch (error: any) {
     console.error(error);
-    window.alert(t("alerts.couldNotCreateShareableLink"));
+
+    return { url: null, errorMessage: t("alerts.couldNotCreateShareableLink") };
   }
 };
diff --git a/src/excalidraw-app/debug.ts b/src/excalidraw-app/debug.ts
new file mode 100644
index 000000000..6e439f1c8
--- /dev/null
+++ b/src/excalidraw-app/debug.ts
@@ -0,0 +1,135 @@
+declare global {
+  interface Window {
+    debug: typeof Debug;
+  }
+}
+
+const lessPrecise = (num: number, precision = 5) =>
+  parseFloat(num.toPrecision(precision));
+
+const getAvgFrameTime = (times: number[]) =>
+  lessPrecise(times.reduce((a, b) => a + b) / times.length);
+
+const getFps = (frametime: number) => lessPrecise(1000 / frametime);
+
+export class Debug {
+  public static DEBUG_LOG_TIMES = true;
+
+  private static TIMES_AGGR: Record<string, { t: number; times: number[] }> =
+    {};
+  private static TIMES_AVG: Record<
+    string,
+    { t: number; times: number[]; avg: number | null }
+  > = {};
+  private static LAST_DEBUG_LOG_CALL = 0;
+  private static DEBUG_LOG_INTERVAL_ID: null | number = null;
+
+  private static setupInterval = () => {
+    if (Debug.DEBUG_LOG_INTERVAL_ID === null) {
+      console.info("%c(starting perf recording)", "color: lime");
+      Debug.DEBUG_LOG_INTERVAL_ID = window.setInterval(Debug.debugLogger, 1000);
+    }
+    Debug.LAST_DEBUG_LOG_CALL = Date.now();
+  };
+
+  private static debugLogger = () => {
+    if (
+      Date.now() - Debug.LAST_DEBUG_LOG_CALL > 600 &&
+      Debug.DEBUG_LOG_INTERVAL_ID !== null
+    ) {
+      window.clearInterval(Debug.DEBUG_LOG_INTERVAL_ID);
+      Debug.DEBUG_LOG_INTERVAL_ID = null;
+      for (const [name, { avg }] of Object.entries(Debug.TIMES_AVG)) {
+        if (avg != null) {
+          console.info(
+            `%c${name} run avg: ${avg}ms (${getFps(avg)} fps)`,
+            "color: blue",
+          );
+        }
+      }
+      console.info("%c(stopping perf recording)", "color: red");
+      Debug.TIMES_AGGR = {};
+      Debug.TIMES_AVG = {};
+      return;
+    }
+    if (Debug.DEBUG_LOG_TIMES) {
+      for (const [name, { t, times }] of Object.entries(Debug.TIMES_AGGR)) {
+        if (times.length) {
+          console.info(
+            name,
+            lessPrecise(times.reduce((a, b) => a + b)),
+            times.sort((a, b) => a - b).map((x) => lessPrecise(x)),
+          );
+          Debug.TIMES_AGGR[name] = { t, times: [] };
+        }
+      }
+      for (const [name, { t, times, avg }] of Object.entries(Debug.TIMES_AVG)) {
+        if (times.length) {
+          const avgFrameTime = getAvgFrameTime(times);
+          console.info(name, `${avgFrameTime}ms (${getFps(avgFrameTime)} fps)`);
+          Debug.TIMES_AVG[name] = {
+            t,
+            times: [],
+            avg:
+              avg != null ? getAvgFrameTime([avg, avgFrameTime]) : avgFrameTime,
+          };
+        }
+      }
+    }
+  };
+
+  public static logTime = (time?: number, name = "default") => {
+    Debug.setupInterval();
+    const now = performance.now();
+    const { t, times } = (Debug.TIMES_AGGR[name] = Debug.TIMES_AGGR[name] || {
+      t: 0,
+      times: [],
+    });
+    if (t) {
+      times.push(time != null ? time : now - t);
+    }
+    Debug.TIMES_AGGR[name].t = now;
+  };
+  public static logTimeAverage = (time?: number, name = "default") => {
+    Debug.setupInterval();
+    const now = performance.now();
+    const { t, times } = (Debug.TIMES_AVG[name] = Debug.TIMES_AVG[name] || {
+      t: 0,
+      times: [],
+    });
+    if (t) {
+      times.push(time != null ? time : now - t);
+    }
+    Debug.TIMES_AVG[name].t = now;
+  };
+
+  private static logWrapper =
+    (type: "logTime" | "logTimeAverage") =>
+    <T extends any[], R>(fn: (...args: T) => R, name = "default") => {
+      return (...args: T) => {
+        const t0 = performance.now();
+        const ret = fn(...args);
+        Debug.logTime(performance.now() - t0, name);
+        return ret;
+      };
+    };
+
+  public static logTimeWrap = Debug.logWrapper("logTime");
+  public static logTimeAverageWrap = Debug.logWrapper("logTimeAverage");
+
+  public static perfWrap = <T extends any[], R>(
+    fn: (...args: T) => R,
+    name = "default",
+  ) => {
+    return (...args: T) => {
+      // eslint-disable-next-line no-console
+      console.time(name);
+      const ret = fn(...args);
+      // eslint-disable-next-line no-console
+      console.timeEnd(name);
+      return ret;
+    };
+  };
+}
+
+window.debug = Debug;
diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx
index 930143f98..860437f3c 100644
--- a/src/excalidraw-app/index.tsx
+++ b/src/excalidraw-app/index.tsx
@@ -32,6 +32,7 @@ import {
   ExcalidrawImperativeAPI,
   BinaryFiles,
   ExcalidrawInitialDataState,
+  UIAppState,
 } from "../types";
 import {
   debounce,
@@ -41,6 +42,7 @@ import {
   preventUnload,
   ResolvablePromise,
   resolvablePromise,
+  isRunningInIframe,
 } from "../utils";
 import {
   FIREBASE_STORAGE_PREFIXES,
@@ -67,7 +69,10 @@ import {
 } from "./data/localStorage";
 import CustomStats from "./CustomStats";
 import { restore, restoreAppState, RestoredDataState } from "../data/restore";
-import { ExportToExcalidrawPlus } from "./components/ExportToExcalidrawPlus";
+import {
+  ExportToExcalidrawPlus,
+  exportToExcalidrawPlus,
+} from "./components/ExportToExcalidrawPlus";
 import { updateStaleImageStatuses } from "./data/FileManager";
 import { newElementWith } from "../element/mutateElement";
 import { isInitializedImageElement } from "../element/typeChecks";
@@ -86,6 +91,10 @@ import { appJotaiStore } from "./app-jotai";
 
 import "./index.scss";
 import { ResolutionType } from "../utility-types";
+import { ShareableLinkDialog } from "../components/ShareableLinkDialog";
+import { openConfirmModal } from "../components/OverwriteConfirm/OverwriteConfirmState";
+import { OverwriteConfirmDialog } from "../components/OverwriteConfirm/OverwriteConfirm";
+import Trans from "../components/Trans";
 
 polyfill();
 
@@ -96,8 +105,21 @@ languageDetector.init({
   languageUtils: {},
 });
 
+const shareableLinkConfirmDialog = {
+  title: t("overwriteConfirm.modal.shareableLink.title"),
+  description: (
+    <Trans
+      i18nKey="overwriteConfirm.modal.shareableLink.description"
+      bold={(text) => <strong>{text}</strong>}
+      br={() => <br />}
+    />
+  ),
+  actionLabel: t("overwriteConfirm.modal.shareableLink.button"),
+  color: "danger",
+} as const;
+
 const initializeScene = async (opts: {
-  collabAPI: CollabAPI;
+  collabAPI: CollabAPI | null;
   excalidrawAPI: ExcalidrawImperativeAPI;
 }): Promise<
   { scene: ExcalidrawInitialDataState | null } & (
@@ -127,7 +149,7 @@ const initializeScene = async (opts: {
       // don't prompt for collab scenes because we don't override local storage
       roomLinkData ||
       // otherwise, prompt whether user wants to override current scene
-      window.confirm(t("alerts.loadSceneOverridePrompt"))
+      (await openConfirmModal(shareableLinkConfirmDialog))
     ) {
       if (jsonBackendMatch) {
         scene = await loadScene(
@@ -166,7 +188,7 @@ const initializeScene = async (opts: {
       const data = await loadFromBlob(await request.blob(), null, null);
       if (
         !scene.elements.length ||
-        window.confirm(t("alerts.loadSceneOverridePrompt"))
+        (await openConfirmModal(shareableLinkConfirmDialog))
       ) {
         return { scene: data, isExternalScene };
       }
@@ -182,7 +204,7 @@ const initializeScene = async (opts: {
     }
   }
 
-  if (roomLinkData) {
+  if (roomLinkData && opts.collabAPI) {
     const { excalidrawAPI } = opts;
 
     const scene = await opts.collabAPI.startCollaboration(roomLinkData);
@@ -236,6 +258,7 @@ export const appLangCodeAtom = atom(
 const ExcalidrawWrapper = () => {
   const [errorMessage, setErrorMessage] = useState("");
   const [langCode, setLangCode] = useAtom(appLangCodeAtom);
+  const isCollabDisabled = isRunningInIframe();
 
   // initial state
   // ---------------------------------------------------------------------------
@@ -271,7 +294,7 @@ const ExcalidrawWrapper = () => {
   });
 
   useEffect(() => {
-    if (!collabAPI || !excalidrawAPI) {
+    if (!excalidrawAPI || (!isCollabDisabled && !collabAPI)) {
       return;
     }
 
@@ -282,7 +305,7 @@ const ExcalidrawWrapper = () => {
       if (!data.scene) {
         return;
       }
-      if (collabAPI.isCollaborating()) {
+      if (collabAPI?.isCollaborating()) {
         if (data.scene.elements) {
           collabAPI
             .fetchImageFilesFromFirebase({
@@ -352,7 +375,7 @@ const ExcalidrawWrapper = () => {
       const libraryUrlTokens = parseLibraryTokensFromUrl();
       if (!libraryUrlTokens) {
         if (
-          collabAPI.isCollaborating() &&
+          collabAPI?.isCollaborating() &&
           !isCollaborationLink(window.location.href)
         ) {
           collabAPI.stopCollaboration(false);
@@ -381,7 +404,10 @@ const ExcalidrawWrapper = () => {
       if (isTestEnv()) {
         return;
       }
-      if (!document.hidden && !collabAPI.isCollaborating()) {
+      if (
+        !document.hidden &&
+        ((collabAPI && !collabAPI.isCollaborating()) || isCollabDisabled)
+      ) {
         // don't sync if local state is newer or identical to browser state
         if (isBrowserStorageStateNewer(STORAGE_KEYS.VERSION_DATA_STATE)) {
           const localDataState = importFromLocalStorage();
@@ -397,7 +423,7 @@ const ExcalidrawWrapper = () => {
           excalidrawAPI.updateLibrary({
             libraryItems: getLibraryItemsFromStorage(),
           });
-          collabAPI.setUsername(username || "");
+          collabAPI?.setUsername(username || "");
         }
 
         if (isBrowserStorageStateNewer(STORAGE_KEYS.VERSION_FILES)) {
@@ -465,7 +491,7 @@ const ExcalidrawWrapper = () => {
       );
       clearTimeout(titleTimeout);
     };
-  }, [collabAPI, excalidrawAPI, setLangCode]);
+  }, [isCollabDisabled, collabAPI, excalidrawAPI, setLangCode]);
 
   useEffect(() => {
     const unloadHandler = (event: BeforeUnloadEvent) => {
@@ -548,9 +574,13 @@ const ExcalidrawWrapper = () => {
     }
   };
 
+  const [latestShareableLink, setLatestShareableLink] = useState<string | null>(
+    null,
+  );
+
   const onExportToBackend = async (
     exportedElements: readonly NonDeletedExcalidrawElement[],
-    appState: AppState,
+    appState: Partial<AppState>,
     files: BinaryFiles,
     canvas: HTMLCanvasElement | null,
   ) => {
@@ -559,7 +589,7 @@ const ExcalidrawWrapper = () => {
     }
     if (canvas) {
       try {
-        await exportToBackend(
+        const { url, errorMessage } = await exportToBackend(
           exportedElements,
           {
             ...appState,
@@ -569,6 +599,14 @@ const ExcalidrawWrapper = () => {
           },
           files,
         );
+
+        if (errorMessage) {
+          setErrorMessage(errorMessage);
+        }
+
+        if (url) {
+          setLatestShareableLink(url);
+        }
       } catch (error: any) {
         if (error.name !== "AbortError") {
           const { width, height } = canvas;
@@ -581,7 +619,7 @@ const ExcalidrawWrapper = () => {
 
   const renderCustomStats = (
     elements: readonly NonDeletedExcalidrawElement[],
-    appState: AppState,
+    appState: UIAppState,
   ) => {
     return (
       <CustomStats
@@ -648,7 +686,7 @@ const ExcalidrawWrapper = () => {
         autoFocus={true}
         theme={theme}
         renderTopRightUI={(isMobile) => {
-          if (isMobile) {
+          if (isMobile || !collabAPI || isCollabDisabled) {
             return null;
           }
           return (
@@ -662,21 +700,53 @@ const ExcalidrawWrapper = () => {
         <AppMainMenu
           setCollabDialogShown={setCollabDialogShown}
           isCollaborating={isCollaborating}
+          isCollabEnabled={!isCollabDisabled}
         />
-        <AppWelcomeScreen setCollabDialogShown={setCollabDialogShown} />
+        <AppWelcomeScreen
+          setCollabDialogShown={setCollabDialogShown}
+          isCollabEnabled={!isCollabDisabled}
+        />
+        <OverwriteConfirmDialog>
+          <OverwriteConfirmDialog.Actions.ExportToImage />
+          <OverwriteConfirmDialog.Actions.SaveToDisk />
+          {excalidrawAPI && (
+            <OverwriteConfirmDialog.Action
+              title={t("overwriteConfirm.action.excalidrawPlus.title")}
+              actionLabel={t("overwriteConfirm.action.excalidrawPlus.button")}
+              onClick={() => {
+                exportToExcalidrawPlus(
+                  excalidrawAPI.getSceneElements(),
+                  excalidrawAPI.getAppState(),
+                  excalidrawAPI.getFiles(),
+                );
+              }}
+            >
+              {t("overwriteConfirm.action.excalidrawPlus.description")}
+            </OverwriteConfirmDialog.Action>
+          )}
+        </OverwriteConfirmDialog>
         <AppFooter />
         {isCollaborating && isOffline && (
           <div className="collab-offline-warning">
             {t("alerts.collabOfflineWarning")}
           </div>
         )}
+        {latestShareableLink && (
+          <ShareableLinkDialog
+            link={latestShareableLink}
+            onCloseRequest={() => setLatestShareableLink(null)}
+            setErrorMessage={setErrorMessage}
+          />
+        )}
+        {excalidrawAPI && !isCollabDisabled && (
+          <Collab excalidrawAPI={excalidrawAPI} />
+        )}
+        {errorMessage && (
+          <ErrorDialog onClose={() => setErrorMessage("")}>
+            {errorMessage}
+          </ErrorDialog>
+        )}
       </Excalidraw>
-      {excalidrawAPI && <Collab excalidrawAPI={excalidrawAPI} />}
-      {errorMessage && (
-        <ErrorDialog onClose={() => setErrorMessage("")}>
-          {errorMessage}
-        </ErrorDialog>
-      )}
     </div>
   );
 };
diff --git a/src/frame.ts b/src/frame.ts
new file mode 100644
index 000000000..8a39a41b3
--- /dev/null
+++ b/src/frame.ts
@@ -0,0 +1,713 @@
+import {
+  getCommonBounds,
+  getElementAbsoluteCoords,
+  isTextElement,
+} from "./element";
+import {
+  ExcalidrawElement,
+  ExcalidrawFrameElement,
+  NonDeleted,
+  NonDeletedExcalidrawElement,
+} from "./element/types";
+import { isPointWithinBounds } from "./math";
+import {
+  getBoundTextElement,
+  getContainerElement,
+} from "./element/textElement";
+import { arrayToMap, findIndex } from "./utils";
+import { mutateElement } from "./element/mutateElement";
+import { AppClassProperties, AppState } from "./types";
+import { getElementsWithinSelection, getSelectedElements } from "./scene";
+import { isFrameElement } from "./element";
+import { moveOneRight } from "./zindex";
+import { getElementsInGroup, selectGroupsFromGivenElements } from "./groups";
+import Scene, { ExcalidrawElementsIncludingDeleted } from "./scene/Scene";
+import { getElementLineSegments } from "./element/bounds";
+
+// --------------------------- Frame State ------------------------------------
+export const bindElementsToFramesAfterDuplication = (
+  nextElements: ExcalidrawElement[],
+  oldElements: readonly ExcalidrawElement[],
+  oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>,
+) => {
+  const nextElementMap = arrayToMap(nextElements) as Map<
+    ExcalidrawElement["id"],
+    ExcalidrawElement
+  >;
+
+  for (const element of oldElements) {
+    if (element.frameId) {
+      // use its frameId to get the new frameId
+      const nextElementId = oldIdToDuplicatedId.get(element.id);
+      const nextFrameId = oldIdToDuplicatedId.get(element.frameId);
+      if (nextElementId) {
+        const nextElement = nextElementMap.get(nextElementId);
+        if (nextElement) {
+          mutateElement(
+            nextElement,
+            {
+              frameId: nextFrameId ?? element.frameId,
+            },
+            false,
+          );
+        }
+      }
+    }
+  }
+};
+
+// --------------------------- Frame Geometry ---------------------------------
+class Point {
+  x: number;
+  y: number;
+
+  constructor(x: number, y: number) {
+    this.x = x;
+    this.y = y;
+  }
+}
+
+class LineSegment {
+  first: Point;
+  second: Point;
+
+  constructor(pointA: Point, pointB: Point) {
+    this.first = pointA;
+    this.second = pointB;
+  }
+
+  public getBoundingBox(): [Point, Point] {
+    return [
+      new Point(
+        Math.min(this.first.x, this.second.x),
+        Math.min(this.first.y, this.second.y),
+      ),
+      new Point(
+        Math.max(this.first.x, this.second.x),
+        Math.max(this.first.y, this.second.y),
+      ),
+    ];
+  }
+}
+
+// https://martin-thoma.com/how-to-check-if-two-line-segments-intersect/
+class FrameGeometry {
+  private static EPSILON = 0.000001;
+
+  private static crossProduct(a: Point, b: Point) {
+    return a.x * b.y - b.x * a.y;
+  }
+
+  private static doBoundingBoxesIntersect(
+    a: [Point, Point],
+    b: [Point, Point],
+  ) {
+    return (
+      a[0].x <= b[1].x &&
+      a[1].x >= b[0].x &&
+      a[0].y <= b[1].y &&
+      a[1].y >= b[0].y
+    );
+  }
+
+  private static isPointOnLine(a: LineSegment, b: Point) {
+    const aTmp = new LineSegment(
+      new Point(0, 0),
+      new Point(a.second.x - a.first.x, a.second.y - a.first.y),
+    );
+    const bTmp = new Point(b.x - a.first.x, b.y - a.first.y);
+    const r = this.crossProduct(aTmp.second, bTmp);
+    return Math.abs(r) < this.EPSILON;
+  }
+
+  private static isPointRightOfLine(a: LineSegment, b: Point) {
+    const aTmp = new LineSegment(
+      new Point(0, 0),
+      new Point(a.second.x - a.first.x, a.second.y - a.first.y),
+    );
+    const bTmp = new Point(b.x - a.first.x, b.y - a.first.y);
+    return this.crossProduct(aTmp.second, bTmp) < 0;
+  }
+
+  private static lineSegmentTouchesOrCrossesLine(
+    a: LineSegment,
+    b: LineSegment,
+  ) {
+    return (
+      this.isPointOnLine(a, b.first) ||
+      this.isPointOnLine(a, b.second) ||
+      (this.isPointRightOfLine(a, b.first)
+        ? !this.isPointRightOfLine(a, b.second)
+        : this.isPointRightOfLine(a, b.second))
+    );
+  }
+
+  private static doLineSegmentsIntersect(
+    a: [readonly [number, number], readonly [number, number]],
+    b: [readonly [number, number], readonly [number, number]],
+  ) {
+    const aSegment = new LineSegment(
+      new Point(a[0][0], a[0][1]),
+      new Point(a[1][0], a[1][1]),
+    );
+    const bSegment = new LineSegment(
+      new Point(b[0][0], b[0][1]),
+      new Point(b[1][0], b[1][1]),
+    );
+
+    const box1 = aSegment.getBoundingBox();
+    const box2 = bSegment.getBoundingBox();
+    return (
+      this.doBoundingBoxesIntersect(box1, box2) &&
+      this.lineSegmentTouchesOrCrossesLine(aSegment, bSegment) &&
+      this.lineSegmentTouchesOrCrossesLine(bSegment, aSegment)
+    );
+  }
+
+  public static isElementIntersectingFrame(
+    element: ExcalidrawElement,
+    frame: ExcalidrawFrameElement,
+  ) {
+    const frameLineSegments = getElementLineSegments(frame);
+
+    const elementLineSegments = getElementLineSegments(element);
+
+    const intersecting = frameLineSegments.some((frameLineSegment) =>
+      elementLineSegments.some((elementLineSegment) =>
+        this.doLineSegmentsIntersect(frameLineSegment, elementLineSegment),
+      ),
+    );
+
+    return intersecting;
+  }
+}
+
+export const getElementsCompletelyInFrame = (
+  elements: readonly ExcalidrawElement[],
+  frame: ExcalidrawFrameElement,
+) =>
+  omitGroupsContainingFrames(
+    getElementsWithinSelection(elements, frame, false),
+  ).filter(
+    (element) =>
+      (element.type !== "frame" && !element.frameId) ||
+      element.frameId === frame.id,
+  );
+
+export const isElementContainingFrame = (
+  elements: readonly ExcalidrawElement[],
+  element: ExcalidrawElement,
+  frame: ExcalidrawFrameElement,
+) => {
+  return getElementsWithinSelection(elements, element).some(
+    (e) => e.id === frame.id,
+  );
+};
+
+export const getElementsIntersectingFrame = (
+  elements: readonly ExcalidrawElement[],
+  frame: ExcalidrawFrameElement,
+) =>
+  elements.filter((element) =>
+    FrameGeometry.isElementIntersectingFrame(element, frame),
+  );
+
+export const elementsAreInFrameBounds = (
+  elements: readonly ExcalidrawElement[],
+  frame: ExcalidrawFrameElement,
+) => {
+  const [selectionX1, selectionY1, selectionX2, selectionY2] =
+    getElementAbsoluteCoords(frame);
+
+  const [elementX1, elementY1, elementX2, elementY2] =
+    getCommonBounds(elements);
+
+  return (
+    selectionX1 <= elementX1 &&
+    selectionY1 <= elementY1 &&
+    selectionX2 >= elementX2 &&
+    selectionY2 >= elementY2
+  );
+};
+
+export const elementOverlapsWithFrame = (
+  element: ExcalidrawElement,
+  frame: ExcalidrawFrameElement,
+) => {
+  return (
+    elementsAreInFrameBounds([element], frame) ||
+    FrameGeometry.isElementIntersectingFrame(element, frame) ||
+    isElementContainingFrame([frame], element, frame)
+  );
+};
+
+export const isCursorInFrame = (
+  cursorCoords: {
+    x: number;
+    y: number;
+  },
+  frame: NonDeleted<ExcalidrawFrameElement>,
+) => {
+  const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame);
+
+  return isPointWithinBounds(
+    [fx1, fy1],
+    [cursorCoords.x, cursorCoords.y],
+    [fx2, fy2],
+  );
+};
+
+export const groupsAreAtLeastIntersectingTheFrame = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  groupIds: readonly string[],
+  frame: ExcalidrawFrameElement,
+) => {
+  const elementsInGroup = groupIds.flatMap((groupId) =>
+    getElementsInGroup(elements, groupId),
+  );
+
+  if (elementsInGroup.length === 0) {
+    return true;
+  }
+
+  return !!elementsInGroup.find(
+    (element) =>
+      elementsAreInFrameBounds([element], frame) ||
+      FrameGeometry.isElementIntersectingFrame(element, frame),
+  );
+};
+
+export const groupsAreCompletelyOutOfFrame = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  groupIds: readonly string[],
+  frame: ExcalidrawFrameElement,
+) => {
+  const elementsInGroup = groupIds.flatMap((groupId) =>
+    getElementsInGroup(elements, groupId),
+  );
+
+  if (elementsInGroup.length === 0) {
+    return true;
+  }
+
+  return (
+    elementsInGroup.find(
+      (element) =>
+        elementsAreInFrameBounds([element], frame) ||
+        FrameGeometry.isElementIntersectingFrame(element, frame),
+    ) === undefined
+  );
+};
+
+// --------------------------- Frame Utils ------------------------------------
+
+/**
+ * Returns a map of frameId to frame elements. Includes empty frames.
+ */
+export const groupByFrames = (elements: readonly ExcalidrawElement[]) => {
+  const frameElementsMap = new Map<
+    ExcalidrawElement["id"],
+    ExcalidrawElement[]
+  >();
+
+  for (const element of elements) {
+    const frameId = isFrameElement(element) ? element.id : element.frameId;
+    if (frameId && !frameElementsMap.has(frameId)) {
+      frameElementsMap.set(frameId, getFrameElements(elements, frameId));
+    }
+  }
+
+  return frameElementsMap;
+};
+
+export const getFrameElements = (
+  allElements: ExcalidrawElementsIncludingDeleted,
+  frameId: string,
+) => allElements.filter((element) => element.frameId === frameId);
+
+export const getElementsInResizingFrame = (
+  allElements: ExcalidrawElementsIncludingDeleted,
+  frame: ExcalidrawFrameElement,
+  appState: AppState,
+): ExcalidrawElement[] => {
+  const prevElementsInFrame = getFrameElements(allElements, frame.id);
+  const nextElementsInFrame = new Set<ExcalidrawElement>(prevElementsInFrame);
+
+  const elementsCompletelyInFrame = new Set([
+    ...getElementsCompletelyInFrame(allElements, frame),
+    ...prevElementsInFrame.filter((element) =>
+      isElementContainingFrame(allElements, element, frame),
+    ),
+  ]);
+
+  const elementsNotCompletelyInFrame = prevElementsInFrame.filter(
+    (element) => !elementsCompletelyInFrame.has(element),
+  );
+
+  // for elements that are completely in the frame
+  // if they are part of some groups, then those groups are still
+  // considered to belong to the frame
+  const groupsToKeep = new Set<string>(
+    Array.from(elementsCompletelyInFrame).flatMap(
+      (element) => element.groupIds,
+    ),
+  );
+
+  for (const element of elementsNotCompletelyInFrame) {
+    if (!FrameGeometry.isElementIntersectingFrame(element, frame)) {
+      if (element.groupIds.length === 0) {
+        nextElementsInFrame.delete(element);
+      }
+    } else if (element.groupIds.length > 0) {
+      // group element intersects with the frame, we should keep the groups
+      // that this element is part of
+      for (const id of element.groupIds) {
+        groupsToKeep.add(id);
+      }
+    }
+  }
+
+  for (const element of elementsNotCompletelyInFrame) {
+    if (element.groupIds.length > 0) {
+      let shouldRemoveElement = true;
+
+      for (const id of element.groupIds) {
+        if (groupsToKeep.has(id)) {
+          shouldRemoveElement = false;
+        }
+      }
+
+      if (shouldRemoveElement) {
+        nextElementsInFrame.delete(element);
+      }
+    }
+  }
+
+  const individualElementsCompletelyInFrame = Array.from(
+    elementsCompletelyInFrame,
+  ).filter((element) => element.groupIds.length === 0);
+
+  for (const element of individualElementsCompletelyInFrame) {
+    nextElementsInFrame.add(element);
+  }
+
+  const newGroupElementsCompletelyInFrame = Array.from(
+    elementsCompletelyInFrame,
+  ).filter((element) => element.groupIds.length > 0);
+
+  const groupIds = selectGroupsFromGivenElements(
+    newGroupElementsCompletelyInFrame,
+    appState,
+  );
+
+  // new group elements
+  for (const [id, isSelected] of Object.entries(groupIds)) {
+    if (isSelected) {
+      const elementsInGroup = getElementsInGroup(allElements, id);
+
+      if (elementsAreInFrameBounds(elementsInGroup, frame)) {
+        for (const element of elementsInGroup) {
+          nextElementsInFrame.add(element);
+        }
+      }
+    }
+  }
+
+  return [...nextElementsInFrame].filter((element) => {
+    return !(isTextElement(element) && element.containerId);
+  });
+};
+
+export const getElementsInNewFrame = (
+  allElements: ExcalidrawElementsIncludingDeleted,
+  frame: ExcalidrawFrameElement,
+) => {
+  return omitGroupsContainingFrames(
+    allElements,
+    getElementsCompletelyInFrame(allElements, frame),
+  );
+};
+
+export const getContainingFrame = (
+  element: ExcalidrawElement,
+  /**
+   * Optionally an elements map, in case the elements aren't in the Scene yet.
+   * Takes precedence over Scene elements, even if the element exists
+   * in Scene elements and not the supplied elements map.
+   */
+  elementsMap?: Map<string, ExcalidrawElement>,
+) => {
+  if (element.frameId) {
+    if (elementsMap) {
+      return (elementsMap.get(element.frameId) ||
+        null) as null | ExcalidrawFrameElement;
+    }
+    return (
+      (Scene.getScene(element)?.getElement(
+        element.frameId,
+      ) as ExcalidrawFrameElement) || null
+    );
+  }
+  return null;
+};
+
+// --------------------------- Frame Operations -------------------------------
+export const addElementsToFrame = (
+  allElements: ExcalidrawElementsIncludingDeleted,
+  elementsToAdd: NonDeletedExcalidrawElement[],
+  frame: ExcalidrawFrameElement,
+) => {
+  const _elementsToAdd: ExcalidrawElement[] = [];
+
+  for (const element of elementsToAdd) {
+    _elementsToAdd.push(element);
+
+    const boundTextElement = getBoundTextElement(element);
+    if (boundTextElement) {
+      _elementsToAdd.push(boundTextElement);
+    }
+  }
+
+  let nextElements = allElements.slice();
+
+  const frameBoundary = findIndex(nextElements, (e) => e.frameId === frame.id);
+
+  for (const element of omitGroupsContainingFrames(
+    allElements,
+    _elementsToAdd,
+  )) {
+    if (element.frameId !== frame.id && !isFrameElement(element)) {
+      mutateElement(
+        element,
+        {
+          frameId: frame.id,
+        },
+        false,
+      );
+
+      const frameIndex = findIndex(nextElements, (e) => e.id === frame.id);
+      const elementIndex = findIndex(nextElements, (e) => e.id === element.id);
+
+      if (elementIndex < frameBoundary) {
+        nextElements = [
+          ...nextElements.slice(0, elementIndex),
+          ...nextElements.slice(elementIndex + 1, frameBoundary),
+          element,
+          ...nextElements.slice(frameBoundary),
+        ];
+      } else if (elementIndex > frameIndex) {
+        nextElements = [
+          ...nextElements.slice(0, frameIndex),
+          element,
+          ...nextElements.slice(frameIndex, elementIndex),
+          ...nextElements.slice(elementIndex + 1),
+        ];
+      }
+    }
+  }
+
+  return nextElements;
+};
+
+export const removeElementsFromFrame = (
+  allElements: ExcalidrawElementsIncludingDeleted,
+  elementsToRemove: NonDeletedExcalidrawElement[],
+  appState: AppState,
+) => {
+  const _elementsToRemove: ExcalidrawElement[] = [];
+
+  for (const element of elementsToRemove) {
+    if (element.frameId) {
+      _elementsToRemove.push(element);
+      const boundTextElement = getBoundTextElement(element);
+      if (boundTextElement) {
+        _elementsToRemove.push(boundTextElement);
+      }
+    }
+  }
+
+  for (const element of _elementsToRemove) {
+    mutateElement(
+      element,
+      {
+        frameId: null,
+      },
+      false,
+    );
+  }
+
+  const nextElements = moveOneRight(
+    allElements,
+    appState,
+    Array.from(_elementsToRemove),
+  );
+
+  return nextElements;
+};
+
+export const removeAllElementsFromFrame = (
+  allElements: ExcalidrawElementsIncludingDeleted,
+  frame: ExcalidrawFrameElement,
+  appState: AppState,
+) => {
+  const elementsInFrame = getFrameElements(allElements, frame.id);
+  return removeElementsFromFrame(allElements, elementsInFrame, appState);
+};
+
+export const replaceAllElementsInFrame = (
+  allElements: ExcalidrawElementsIncludingDeleted,
+  nextElementsInFrame: ExcalidrawElement[],
+  frame: ExcalidrawFrameElement,
+  appState: AppState,
+) => {
+  return addElementsToFrame(
+    removeAllElementsFromFrame(allElements, frame, appState),
+    nextElementsInFrame,
+    frame,
+  );
+};
+
+/** does not mutate elements, but return new ones */
+export const updateFrameMembershipOfSelectedElements = (
+  allElements: ExcalidrawElementsIncludingDeleted,
+  appState: AppState,
+  app: AppClassProperties,
+) => {
+  const selectedElements = app.scene.getSelectedElements({
+    selectedElementIds: appState.selectedElementIds,
+    // supplying elements explicitly in case we're passed non-state elements
+    elements: allElements,
+  });
+  const elementsToFilter = new Set<ExcalidrawElement>(selectedElements);
+
+  if (appState.editingGroupId) {
+    for (const element of selectedElements) {
+      if (element.groupIds.length === 0) {
+        elementsToFilter.add(element);
+      } else {
+        element.groupIds
+          .flatMap((gid) => getElementsInGroup(allElements, gid))
+          .forEach((element) => elementsToFilter.add(element));
+      }
+    }
+  }
+
+  const elementsToRemove = new Set<ExcalidrawElement>();
+
+  elementsToFilter.forEach((element) => {
+    if (
+      element.frameId &&
+      !isFrameElement(element) &&
+      !isElementInFrame(element, allElements, appState)
+    ) {
+      elementsToRemove.add(element);
+    }
+  });
+
+  return elementsToRemove.size > 0
+    ? removeElementsFromFrame(allElements, [...elementsToRemove], appState)
+    : allElements;
+};
+
+/**
+ * filters out elements that are inside groups that contain a frame element
+ * anywhere in the group tree
+ */
+export const omitGroupsContainingFrames = (
+  allElements: ExcalidrawElementsIncludingDeleted,
+  /** subset of elements you want to filter. Optional perf optimization so we
+   * don't have to filter all elements unnecessarily
+   */
+  selectedElements?: readonly ExcalidrawElement[],
+) => {
+  const uniqueGroupIds = new Set<string>();
+  for (const el of selectedElements || allElements) {
+    const topMostGroupId = el.groupIds[el.groupIds.length - 1];
+    if (topMostGroupId) {
+      uniqueGroupIds.add(topMostGroupId);
+    }
+  }
+
+  const rejectedGroupIds = new Set<string>();
+  for (const groupId of uniqueGroupIds) {
+    if (
+      getElementsInGroup(allElements, groupId).some((el) => isFrameElement(el))
+    ) {
+      rejectedGroupIds.add(groupId);
+    }
+  }
+
+  return (selectedElements || allElements).filter(
+    (el) => !rejectedGroupIds.has(el.groupIds[el.groupIds.length - 1]),
+  );
+};
+
+/**
+ * depending on the appState, return target frame, which is the frame the given element
+ * is going to be added to or remove from
+ */
+export const getTargetFrame = (
+  element: ExcalidrawElement,
+  appState: AppState,
+) => {
+  const _element = isTextElement(element)
+    ? getContainerElement(element) || element
+    : element;
+
+  return appState.selectedElementIds[_element.id] &&
+    appState.selectedElementsAreBeingDragged
+    ? appState.frameToHighlight
+    : getContainingFrame(_element);
+};
+
+// given an element, return if the element is in some frame
+export const isElementInFrame = (
+  element: ExcalidrawElement,
+  allElements: ExcalidrawElementsIncludingDeleted,
+  appState: AppState,
+) => {
+  const frame = getTargetFrame(element, appState);
+  const _element = isTextElement(element)
+    ? getContainerElement(element) || element
+    : element;
+
+  if (frame) {
+    if (_element.groupIds.length === 0) {
+      return elementOverlapsWithFrame(_element, frame);
+    }
+
+    const allElementsInGroup = new Set(
+      _element.groupIds.flatMap((gid) => getElementsInGroup(allElements, gid)),
+    );
+
+    if (appState.editingGroupId && appState.selectedElementsAreBeingDragged) {
+      const selectedElements = new Set(
+        getSelectedElements(allElements, appState),
+      );
+
+      const editingGroupOverlapsFrame = appState.frameToHighlight !== null;
+
+      if (editingGroupOverlapsFrame) {
+        return true;
+      }
+
+      selectedElements.forEach((selectedElement) => {
+        allElementsInGroup.delete(selectedElement);
+      });
+    }
+
+    for (const elementInGroup of allElementsInGroup) {
+      if (isFrameElement(elementInGroup)) {
+        return false;
+      }
+    }
+
+    for (const elementInGroup of allElementsInGroup) {
+      if (elementOverlapsWithFrame(elementInGroup, frame)) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+};
diff --git a/src/global.d.ts b/src/global.d.ts
index 73c8fc813..3a666e11a 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -18,8 +18,8 @@ interface Window {
   EXCALIDRAW_EXPORT_SOURCE: string;
   EXCALIDRAW_THROTTLE_RENDER: boolean | undefined;
   gtag: Function;
-  _paq: any[];
-  _mtm: any[];
+  sa_event: Function;
+  fathom: { trackEvent: Function };
 }
 
 interface CanvasRenderingContext2D {
diff --git a/src/groups.ts b/src/groups.ts
index e45a59fa8..c7aa60fc2 100644
--- a/src/groups.ts
+++ b/src/groups.ts
@@ -1,7 +1,13 @@
-import { GroupId, ExcalidrawElement, NonDeleted } from "./element/types";
-import { AppState } from "./types";
+import {
+  GroupId,
+  ExcalidrawElement,
+  NonDeleted,
+  NonDeletedExcalidrawElement,
+} from "./element/types";
+import { AppClassProperties, AppState } from "./types";
 import { getSelectedElements } from "./scene";
 import { getBoundTextElement } from "./element/textElement";
+import { makeNextSelectedElementIds } from "./scene/selection";
 
 export const selectGroup = (
   groupId: GroupId,
@@ -66,14 +72,33 @@ export const getSelectedGroupIds = (appState: AppState): GroupId[] =>
  */
 export const selectGroupsForSelectedElements = (
   appState: AppState,
-  elements: readonly NonDeleted<ExcalidrawElement>[],
+  elements: readonly NonDeletedExcalidrawElement[],
+  prevAppState: AppState,
+  /**
+   * supply null in cases where you don't have access to App instance and
+   * you don't care about optimizing selectElements retrieval
+   */
+  app: AppClassProperties | null,
 ): AppState => {
   let nextAppState: AppState = { ...appState, selectedGroupIds: {} };
 
-  const selectedElements = getSelectedElements(elements, appState);
+  const selectedElements = app
+    ? app.scene.getSelectedElements({
+        selectedElementIds: appState.selectedElementIds,
+        // supplying elements explicitly in case we're passed non-state elements
+        elements,
+      })
+    : getSelectedElements(elements, appState);
 
   if (!selectedElements.length) {
-    return { ...nextAppState, editingGroupId: null };
+    return {
+      ...nextAppState,
+      editingGroupId: null,
+      selectedElementIds: makeNextSelectedElementIds(
+        nextAppState.selectedElementIds,
+        prevAppState,
+      ),
+    };
   }
 
   for (const selectedElement of selectedElements) {
@@ -91,9 +116,39 @@ export const selectGroupsForSelectedElements = (
     }
   }
 
+  nextAppState.selectedElementIds = makeNextSelectedElementIds(
+    nextAppState.selectedElementIds,
+    prevAppState,
+  );
+
   return nextAppState;
 };
 
+// given a list of elements, return the the actual group ids that should be selected
+// or used to update the elements
+export const selectGroupsFromGivenElements = (
+  elements: readonly NonDeleted<ExcalidrawElement>[],
+  appState: AppState,
+) => {
+  let nextAppState: AppState = { ...appState, selectedGroupIds: {} };
+
+  for (const element of elements) {
+    let groupIds = element.groupIds;
+    if (appState.editingGroupId) {
+      const indexOfEditingGroup = groupIds.indexOf(appState.editingGroupId);
+      if (indexOfEditingGroup > -1) {
+        groupIds = groupIds.slice(0, indexOfEditingGroup);
+      }
+    }
+    if (groupIds.length > 0) {
+      const groupId = groupIds[groupIds.length - 1];
+      nextAppState = selectGroup(groupId, nextAppState, elements);
+    }
+  }
+
+  return nextAppState.selectedGroupIds;
+};
+
 export const editGroupForSelectedElement = (
   appState: AppState,
   element: NonDeleted<ExcalidrawElement>,
@@ -186,3 +241,18 @@ export const getMaximumGroups = (
 
   return Array.from(groups.values());
 };
+
+export const elementsAreInSameGroup = (elements: ExcalidrawElement[]) => {
+  const allGroups = elements.flatMap((element) => element.groupIds);
+  const groupCount = new Map<string, number>();
+  let maxGroup = 0;
+
+  for (const group of allGroups) {
+    groupCount.set(group, (groupCount.get(group) ?? 0) + 1);
+    if (groupCount.get(group)! > maxGroup) {
+      maxGroup = groupCount.get(group)!;
+    }
+  }
+
+  return maxGroup === elements.length;
+};
diff --git a/src/hooks/useCreatePortalContainer.ts b/src/hooks/useCreatePortalContainer.ts
new file mode 100644
index 000000000..f56011ed1
--- /dev/null
+++ b/src/hooks/useCreatePortalContainer.ts
@@ -0,0 +1,49 @@
+import { useState, useRef, useLayoutEffect } from "react";
+import { useDevice, useExcalidrawContainer } from "../components/App";
+import { useUIAppState } from "../context/ui-appState";
+
+export const useCreatePortalContainer = (opts?: {
+  className?: string;
+  parentSelector?: string;
+}) => {
+  const [div, setDiv] = useState<HTMLDivElement | null>(null);
+
+  const device = useDevice();
+  const { theme } = useUIAppState();
+  const isMobileRef = useRef(device.isMobile);
+  isMobileRef.current = device.isMobile;
+
+  const { container: excalidrawContainer } = useExcalidrawContainer();
+
+  useLayoutEffect(() => {
+    if (div) {
+      div.classList.toggle("excalidraw--mobile", device.isMobile);
+    }
+  }, [div, device.isMobile]);
+
+  useLayoutEffect(() => {
+    const container = opts?.parentSelector
+      ? excalidrawContainer?.querySelector(opts.parentSelector)
+      : document.body;
+
+    if (!container) {
+      return;
+    }
+
+    const div = document.createElement("div");
+
+    div.classList.add("excalidraw", ...(opts?.className?.split(/\s+/) || []));
+    div.classList.toggle("excalidraw--mobile", isMobileRef.current);
+    div.classList.toggle("theme--dark", theme === "dark");
+
+    container.appendChild(div);
+
+    setDiv(div);
+
+    return () => {
+      container.removeChild(div);
+    };
+  }, [excalidrawContainer, theme, opts?.className, opts?.parentSelector]);
+
+  return div;
+};
diff --git a/src/hooks/useLibraryItemSvg.ts b/src/hooks/useLibraryItemSvg.ts
new file mode 100644
index 000000000..1c27f0ce7
--- /dev/null
+++ b/src/hooks/useLibraryItemSvg.ts
@@ -0,0 +1,77 @@
+import { atom, useAtom } from "jotai";
+import { useEffect, useState } from "react";
+import { COLOR_PALETTE } from "../colors";
+import { jotaiScope } from "../jotai";
+import { exportToSvg } from "../packages/utils";
+import { LibraryItem } from "../types";
+
+export type SvgCache = Map<LibraryItem["id"], SVGSVGElement>;
+
+export const libraryItemSvgsCache = atom<SvgCache>(new Map());
+
+const exportLibraryItemToSvg = async (elements: LibraryItem["elements"]) => {
+  return await exportToSvg({
+    elements,
+    appState: {
+      exportBackground: false,
+      viewBackgroundColor: COLOR_PALETTE.white,
+    },
+    files: null,
+  });
+};
+
+export const useLibraryItemSvg = (
+  id: LibraryItem["id"] | null,
+  elements: LibraryItem["elements"] | undefined,
+  svgCache: SvgCache,
+): SVGSVGElement | undefined => {
+  const [svg, setSvg] = useState<SVGSVGElement>();
+
+  useEffect(() => {
+    if (elements) {
+      if (id) {
+        // Try to load cached svg
+        const cachedSvg = svgCache.get(id);
+
+        if (cachedSvg) {
+          setSvg(cachedSvg);
+        } else {
+          // When there is no svg in cache export it and save to cache
+          (async () => {
+            const exportedSvg = await exportLibraryItemToSvg(elements);
+            exportedSvg.querySelector(".style-fonts")?.remove();
+
+            if (exportedSvg) {
+              svgCache.set(id, exportedSvg);
+              setSvg(exportedSvg);
+            }
+          })();
+        }
+      } else {
+        // When we have no id (usualy selected items from canvas) just export the svg
+        (async () => {
+          const exportedSvg = await exportLibraryItemToSvg(elements);
+          setSvg(exportedSvg);
+        })();
+      }
+    }
+  }, [id, elements, svgCache, setSvg]);
+
+  return svg;
+};
+
+export const useLibraryCache = () => {
+  const [svgCache] = useAtom(libraryItemSvgsCache, jotaiScope);
+
+  const clearLibraryCache = () => svgCache.clear();
+
+  const deleteItemsFromLibraryCache = (items: LibraryItem["id"][]) => {
+    items.forEach((item) => svgCache.delete(item));
+  };
+
+  return {
+    clearLibraryCache,
+    deleteItemsFromLibraryCache,
+    svgCache,
+  };
+};
diff --git a/src/hooks/useOutsideClick.ts b/src/hooks/useOutsideClick.ts
index 4b7512069..c720a836b 100644
--- a/src/hooks/useOutsideClick.ts
+++ b/src/hooks/useOutsideClick.ts
@@ -1,42 +1,86 @@
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
+import { EVENT } from "../constants";
 
-export const useOutsideClickHook = (handler: (event: Event) => void) => {
-  const ref = useRef(null);
+export function useOutsideClick<T extends HTMLElement>(
+  ref: React.RefObject<T>,
+  /** if performance is of concern, memoize the callback */
+  callback: (event: Event) => void,
+  /**
+   * Optional callback which is called on every click.
+   *
+   * Should return `true` if click should be considered as inside the container,
+   * and `false` if it falls outside and should call the `callback`.
+   *
+   * Returning `true` overrides the default behavior and `callback` won't be
+   * called.
+   *
+   * Returning `undefined` will fallback to the default behavior.
+   */
+  isInside?: (
+    event: Event & { target: HTMLElement },
+    /** the element of the passed ref */
+    container: T,
+  ) => boolean | undefined,
+) {
+  useEffect(() => {
+    function onOutsideClick(event: Event) {
+      const _event = event as Event & { target: T };
 
-  useEffect(
-    () => {
-      const listener = (event: Event) => {
-        const current = ref.current as HTMLElement | null;
+      if (!ref.current) {
+        return;
+      }
 
-        // Do nothing if clicking ref's element or descendent elements
-        if (
-          !current ||
-          current.contains(event.target as Node) ||
-          [...document.querySelectorAll("[data-prevent-outside-click]")].some(
-            (el) => el.contains(event.target as Node),
-          )
-        ) {
-          return;
-        }
+      const isInsideOverride = isInside?.(_event, ref.current);
 
-        handler(event);
-      };
+      if (isInsideOverride === true) {
+        return;
+      } else if (isInsideOverride === false) {
+        return callback(_event);
+      }
 
-      document.addEventListener("pointerdown", listener);
-      document.addEventListener("touchstart", listener);
-      return () => {
-        document.removeEventListener("pointerdown", listener);
-        document.removeEventListener("touchstart", listener);
-      };
-    },
-    // Add ref and handler to effect dependencies
-    // It's worth noting that because passed in handler is a new ...
-    // ... function on every render that will cause this effect ...
-    // ... callback/cleanup to run every render. It's not a big deal ...
-    // ... but to optimize you can wrap handler in useCallback before ...
-    // ... passing it into this hook.
-    [ref, handler],
-  );
+      // clicked element is in the descenendant of the target container
+      if (
+        ref.current.contains(_event.target) ||
+        // target is detached from DOM (happens when the element is removed
+        // on a pointerup event fired *before* this handler's pointerup is
+        // dispatched)
+        !document.documentElement.contains(_event.target)
+      ) {
+        return;
+      }
 
-  return ref;
-};
+      const isClickOnRadixPortal =
+        _event.target.closest("[data-radix-portal]") ||
+        // when radix popup is in "modal" mode, it disables pointer events on
+        // the `body` element, so the target element is going to be the `html`
+        // (note: this won't work if we selectively re-enable pointer events on
+        // specific elements as we do with navbar or excalidraw UI elements)
+        (_event.target === document.documentElement &&
+          document.body.style.pointerEvents === "none");
+
+      // if clicking on radix portal, assume it's a popup that
+      // should be considered as part of the UI. Obviously this is a terrible
+      // hack you can end up click on radix popups that outside the tree,
+      // but it works for most cases and the downside is minimal for now
+      if (isClickOnRadixPortal) {
+        return;
+      }
+
+      // clicking on a container that ignores outside clicks
+      if (_event.target.closest("[data-prevent-outside-click]")) {
+        return;
+      }
+
+      callback(_event);
+    }
+
+    // note: don't use `click` because it often reports incorrect `event.target`
+    document.addEventListener(EVENT.POINTER_DOWN, onOutsideClick);
+    document.addEventListener(EVENT.TOUCH_START, onOutsideClick);
+
+    return () => {
+      document.removeEventListener(EVENT.POINTER_DOWN, onOutsideClick);
+      document.removeEventListener(EVENT.TOUCH_START, onOutsideClick);
+    };
+  }, [ref, callback, isInside]);
+}
diff --git a/src/hooks/useScrollPosition.ts b/src/hooks/useScrollPosition.ts
new file mode 100644
index 000000000..e4efb460e
--- /dev/null
+++ b/src/hooks/useScrollPosition.ts
@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import { atom, useAtom } from "jotai";
+import throttle from "lodash.throttle";
+
+const scrollPositionAtom = atom<number>(0);
+
+export const useScrollPosition = <T extends HTMLElement>(
+  elementRef: React.RefObject<T>,
+) => {
+  const [scrollPosition, setScrollPosition] = useAtom(scrollPositionAtom);
+
+  useEffect(() => {
+    const { current: element } = elementRef;
+    if (!element) {
+      return;
+    }
+
+    const handleScroll = throttle(() => {
+      const { scrollTop } = element;
+      setScrollPosition(scrollTop);
+    }, 200);
+
+    element.addEventListener("scroll", handleScroll);
+
+    return () => {
+      handleScroll.cancel();
+      element.removeEventListener("scroll", handleScroll);
+    };
+  }, [elementRef, setScrollPosition]);
+
+  return scrollPosition;
+};
diff --git a/src/hooks/useTransition.ts b/src/hooks/useTransition.ts
new file mode 100644
index 000000000..bb107edbc
--- /dev/null
+++ b/src/hooks/useTransition.ts
@@ -0,0 +1,9 @@
+import React, { useCallback } from "react";
+
+/** noop polyfill for v17. Subset of API available */
+function useTransitionPolyfill() {
+  const startTransition = useCallback((callback: () => void) => callback(), []);
+  return [false, startTransition] as const;
+}
+
+export const useTransition = React.useTransition || useTransitionPolyfill;
diff --git a/src/i18n.ts b/src/i18n.ts
index 7a6300860..3c6bf7fcc 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -3,6 +3,7 @@ import percentages from "./locales/percentages.json";
 import { ENV } from "./constants";
 import { jotaiScope, jotaiStore } from "./jotai";
 import { atom, useAtomValue } from "jotai";
+import { NestedKeyOf } from "./utility-types";
 
 const COMPLETION_THRESHOLD = 85;
 
@@ -12,62 +13,65 @@ export interface Language {
   rtl?: boolean;
 }
 
+export type TranslationKeys = NestedKeyOf<typeof fallbackLangData>;
+
 export const defaultLang = { code: "en", label: "English" };
 
-const allLanguages: Language[] = [
-  { code: "ar-SA", label: "العربية", rtl: true },
-  { code: "bg-BG", label: "Български" },
-  { code: "ca-ES", label: "Català" },
-  { code: "cs-CZ", label: "Česky" },
-  { code: "de-DE", label: "Deutsch" },
-  { code: "el-GR", label: "Ελληνικά" },
-  { code: "es-ES", label: "Español" },
-  { code: "eu-ES", label: "Euskara" },
-  { code: "fa-IR", label: "فارسی", rtl: true },
-  { code: "fi-FI", label: "Suomi" },
-  { code: "fr-FR", label: "Français" },
-  { code: "gl-ES", label: "Galego" },
-  { code: "he-IL", label: "עברית", rtl: true },
-  { code: "hi-IN", label: "हिन्दी" },
-  { code: "hu-HU", label: "Magyar" },
-  { code: "id-ID", label: "Bahasa Indonesia" },
-  { code: "it-IT", label: "Italiano" },
-  { code: "ja-JP", label: "日本語" },
-  { code: "kab-KAB", label: "Taqbaylit" },
-  { code: "kk-KZ", label: "Қазақ тілі" },
-  { code: "ko-KR", label: "한국어" },
-  { code: "ku-TR", label: "Kurdî" },
-  { code: "lt-LT", label: "Lietuvių" },
-  { code: "lv-LV", label: "Latviešu" },
-  { code: "my-MM", label: "Burmese" },
-  { code: "nb-NO", label: "Norsk bokmål" },
-  { code: "nl-NL", label: "Nederlands" },
-  { code: "nn-NO", label: "Norsk nynorsk" },
-  { code: "oc-FR", label: "Occitan" },
-  { code: "pa-IN", label: "ਪੰਜਾਬੀ" },
-  { code: "pl-PL", label: "Polski" },
-  { code: "pt-BR", label: "Português Brasileiro" },
-  { code: "pt-PT", label: "Português" },
-  { code: "ro-RO", label: "Română" },
-  { code: "ru-RU", label: "Русский" },
-  { code: "sk-SK", label: "Slovenčina" },
-  { code: "sv-SE", label: "Svenska" },
-  { code: "sl-SI", label: "Slovenščina" },
-  { code: "tr-TR", label: "Türkçe" },
-  { code: "uk-UA", label: "Українська" },
-  { code: "zh-CN", label: "简体中文" },
-  { code: "zh-TW", label: "繁體中文" },
-  { code: "vi-VN", label: "Tiếng Việt" },
-  { code: "mr-IN", label: "मराठी" },
-].concat([defaultLang]);
-
-export const languages: Language[] = allLanguages
-  .sort((left, right) => (left.label > right.label ? 1 : -1))
-  .filter(
-    (lang) =>
-      (percentages as Record<string, number>)[lang.code] >=
-      COMPLETION_THRESHOLD,
-  );
+export const languages: Language[] = [
+  defaultLang,
+  ...[
+    { code: "ar-SA", label: "العربية", rtl: true },
+    { code: "bg-BG", label: "Български" },
+    { code: "ca-ES", label: "Català" },
+    { code: "cs-CZ", label: "Česky" },
+    { code: "de-DE", label: "Deutsch" },
+    { code: "el-GR", label: "Ελληνικά" },
+    { code: "es-ES", label: "Español" },
+    { code: "eu-ES", label: "Euskara" },
+    { code: "fa-IR", label: "فارسی", rtl: true },
+    { code: "fi-FI", label: "Suomi" },
+    { code: "fr-FR", label: "Français" },
+    { code: "gl-ES", label: "Galego" },
+    { code: "he-IL", label: "עברית", rtl: true },
+    { code: "hi-IN", label: "हिन्दी" },
+    { code: "hu-HU", label: "Magyar" },
+    { code: "id-ID", label: "Bahasa Indonesia" },
+    { code: "it-IT", label: "Italiano" },
+    { code: "ja-JP", label: "日本語" },
+    { code: "kab-KAB", label: "Taqbaylit" },
+    { code: "kk-KZ", label: "Қазақ тілі" },
+    { code: "ko-KR", label: "한국어" },
+    { code: "ku-TR", label: "Kurdî" },
+    { code: "lt-LT", label: "Lietuvių" },
+    { code: "lv-LV", label: "Latviešu" },
+    { code: "my-MM", label: "Burmese" },
+    { code: "nb-NO", label: "Norsk bokmål" },
+    { code: "nl-NL", label: "Nederlands" },
+    { code: "nn-NO", label: "Norsk nynorsk" },
+    { code: "oc-FR", label: "Occitan" },
+    { code: "pa-IN", label: "ਪੰਜਾਬੀ" },
+    { code: "pl-PL", label: "Polski" },
+    { code: "pt-BR", label: "Português Brasileiro" },
+    { code: "pt-PT", label: "Português" },
+    { code: "ro-RO", label: "Română" },
+    { code: "ru-RU", label: "Русский" },
+    { code: "sk-SK", label: "Slovenčina" },
+    { code: "sv-SE", label: "Svenska" },
+    { code: "sl-SI", label: "Slovenščina" },
+    { code: "tr-TR", label: "Türkçe" },
+    { code: "uk-UA", label: "Українська" },
+    { code: "zh-CN", label: "简体中文" },
+    { code: "zh-TW", label: "繁體中文" },
+    { code: "vi-VN", label: "Tiếng Việt" },
+    { code: "mr-IN", label: "मराठी" },
+  ]
+    .filter(
+      (lang) =>
+        (percentages as Record<string, number>)[lang.code] >=
+        COMPLETION_THRESHOLD,
+    )
+    .sort((left, right) => (left.label > right.label ? 1 : -1)),
+];
 
 const TEST_LANG_CODE = "__test__";
 if (process.env.NODE_ENV === ENV.DEVELOPMENT) {
@@ -122,8 +126,9 @@ const findPartsForData = (data: any, parts: string[]) => {
 };
 
 export const t = (
-  path: string,
-  replacement?: { [key: string]: string | number },
+  path: NestedKeyOf<typeof fallbackLangData>,
+  replacement?: { [key: string]: string | number } | null,
+  fallback?: string,
 ) => {
   if (currentLang.code.startsWith(TEST_LANG_CODE)) {
     const name = replacement
@@ -135,9 +140,16 @@ export const t = (
   const parts = path.split(".");
   let translation =
     findPartsForData(currentLangData, parts) ||
-    findPartsForData(fallbackLangData, parts);
+    findPartsForData(fallbackLangData, parts) ||
+    fallback;
   if (translation === undefined) {
-    throw new Error(`Can't find translation for ${path}`);
+    const errorMessage = `Can't find translation for ${path}`;
+    // in production, don't blow up the app on a missing translation key
+    if (process.env.NODE_ENV === "production") {
+      console.warn(errorMessage);
+      return "";
+    }
+    throw new Error(errorMessage);
   }
 
   if (replacement) {
diff --git a/src/keys.ts b/src/keys.ts
index ce0e803c0..33f1188dc 100644
--- a/src/keys.ts
+++ b/src/keys.ts
@@ -10,6 +10,7 @@ export const CODES = {
   BRACKET_LEFT: "BracketLeft",
   ONE: "Digit1",
   TWO: "Digit2",
+  THREE: "Digit3",
   NINE: "Digit9",
   QUOTE: "Quote",
   ZERO: "Digit0",
@@ -42,6 +43,7 @@ export const KEYS = {
   CHEVRON_RIGHT: ">",
   PERIOD: ".",
   COMMA: ",",
+  SUBTRACT: "-",
 
   A: "a",
   C: "c",
diff --git a/src/locales/ar-SA.json b/src/locales/ar-SA.json
index 25a32f222..6d94f0ad2 100644
--- a/src/locales/ar-SA.json
+++ b/src/locales/ar-SA.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "مثلث",
     "fontSize": "حجم الخط",
     "fontFamily": "نوع الخط",
-    "onlySelected": "المحدد فقط",
-    "withBackground": "الخلفية",
-    "exportEmbedScene": "تضمين المشهد",
-    "exportEmbedScene_details": "سيتم حفظ بيانات المشهد في ملف PNG/SVG المصدّر بحيث يمكن استعادة المشهد منه.\nسيزيد حجم الملف المصدر.",
     "addWatermark": "إضافة \"مصنوعة بواسطة Excalidraw\"",
     "handDrawn": "رسم باليد",
     "normal": "عادي",
@@ -54,6 +50,7 @@
     "veryLarge": "كبير جدا",
     "solid": "كامل",
     "hachure": "خطوط",
+    "zigzag": "",
     "crossHatch": "خطوط متقطعة",
     "thin": "نحيف",
     "bold": "داكن",
@@ -99,7 +96,6 @@
     "flipHorizontal": "قلب عامودي",
     "flipVertical": "قلب أفقي",
     "viewMode": "نمط العرض",
-    "toggleExportColorScheme": "تبديل نظام ألوان الصادرات",
     "share": "مشاركة",
     "showStroke": "إظهار منتقي لون الخط",
     "showBackground": "إظهار منتقي لون الخلفية",
@@ -127,7 +123,10 @@
       "unlockAll": "فتح الكل"
     },
     "statusPublished": "نُشر",
-    "sidebarLock": "إبقاء الشريط الجانبي مفتوح"
+    "sidebarLock": "إبقاء الشريط الجانبي مفتوح",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "لا توجد عناصر أضيفت بعد...",
@@ -139,11 +138,7 @@
     "exportJSON": "صدر الملف",
     "exportImage": "تصدير الصورة...",
     "export": "حفظ إلى...",
-    "exportToPng": "تصدير بصيغة PNG",
-    "exportToSvg": "تصدير بصيغة SVG",
     "copyToClipboard": "نسخ إلى الحافظة",
-    "copyPngToClipboard": "نسخ الـ PNG إلى الحافظة",
-    "scale": "مقاس",
     "save": "احفظ للملف الحالي",
     "saveAs": "حفظ كـ",
     "load": "فتح",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "تعذر الحفظ في قاعدة البيانات. إذا استمرت المشاكل، يفضل أن تحفظ ملفك محليا كي لا تفقد عملك.",
     "collabSaveFailed_sizeExceeded": "تعذر الحفظ في قاعدة البيانات، يبدو أن القماش كبير للغاية، يفضّل حفظ الملف محليا كي لا تفقد عملك.",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "وضع القلم - امنع اللمس",
     "link": "إضافة/تحديث الرابط للشكل المحدد",
     "eraser": "ممحاة",
-    "hand": ""
+    "frame": "",
+    "hand": "",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "إجراءات اللوحة",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "نصيحة: حاول تحريك العناصر البعيدة بشكل أقرب قليلاً."
   },
   "errorSplash": {
-    "headingMain_pre": "حدث خطأ، حاول مرة أخرى ",
-    "headingMain_button": "إعادة تحميل الصفحة.",
+    "headingMain": "",
     "clearCanvasMessage": "إذا لم تعمل إعادة التحميل، حاول مرة أخرى ",
-    "clearCanvasMessage_button": "مسح اللوحة.",
     "clearCanvasCaveat": " هذا سيؤدي إلى فقدان العمل ",
-    "trackedToSentry_pre": "الخطأ ",
-    "trackedToSentry_post": " تم تعقبه على نظامنا.",
-    "openIssueMessage_pre": "كنا حذرين جدا لعدم تضمين معلومات المشهد الخاصة بك في الخطأ. إذا لم يكن المشهد خاصًا ، يرجى النظر في متابعة هذا الأمر ",
-    "openIssueMessage_button": "متعقّب الخلل.",
-    "openIssueMessage_post": " يرجى تضمين المعلومات أدناة عن طريق نسخ ولصق المشكلة في GitHub.",
+    "trackedToSentry": "",
+    "openIssueMessage": "",
     "sceneContent": "محتوى المشهد:"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "مطلوب",
       "website": "أدخل عنوان URL صالح"
     },
-    "noteDescription": {
-      "pre": "",
-      "link": "مستودع المكتبة العامة",
-      "post": "ليستخدمها الآخرون في رسوماتهم."
-    },
-    "noteGuidelines": {
-      "pre": "يجب الموافقة على المكتبة يدويًا أولاً. يرجى قراءة ",
-      "link": "الإرشادات",
-      "post": ""
-    },
-    "noteLicense": {
-      "pre": "",
-      "link": "رخصة إم أي تي ",
-      "post": "وهو ما يعني باختصار أنه يمكن لأي شخص استخدامها دون قيود."
-    },
+    "noteDescription": "",
+    "noteGuidelines": "",
+    "noteLicense": "",
     "noteItems": "يجب أن يكون لكل عنصر مكتبة اسمه الخاص حتى يكون قابلاً للتصفية. سيتم تضمين عناصر المكتبة التالية:",
     "atleastOneLibItem": "يرجى تحديد عنصر مكتبة واحد على الأقل للبدء",
     "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "تم إرسال المكتبة",
-    "content": "شكرا لك {{authorName}}. لقد تم إرسال مكتبتك للمراجعة. يمكنك تتبع الحالة",
-    "link": "هنا"
+    "content": "شكرا لك {{authorName}}. لقد تم إرسال مكتبتك للمراجعة. يمكنك تتبع الحالة"
   },
   "confirmDialog": {
     "resetLibrary": "إعادة ضبط المكتبة",
     "removeItemsFromLib": "إزالة العناصر المحددة من المكتبة"
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "رسوماتك مشفرة من النهاية إلى النهاية حتى أن خوادم Excalidraw لن تراها أبدا.",
     "link": "مشاركة المدونة في التشفير من النهاية إلى النهاية في Excalidraw"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": ""
   },
   "colors": {
-    "ffffff": "أبيض",
-    "f8f9fa": "رمادي 0",
-    "f1f3f5": "رمادي 1",
-    "fff5f5": "أحمر 0",
-    "fff0f6": "وردي 0",
-    "f8f0fc": "عنبي 0",
-    "f3f0ff": "بنفسجي 0",
-    "edf2ff": "نيلي 0",
-    "e7f5ff": "أزرق 0",
-    "e3fafc": "سماوي 0",
-    "e6fcf5": "تركواز 0",
-    "ebfbee": "أخضر 0",
-    "f4fce3": "ليموني 0",
-    "fff9db": "أصفر 0",
-    "fff4e6": "برتقالي 0",
     "transparent": "شفاف",
-    "ced4da": "رمادي 4",
-    "868e96": "رمادي 6",
-    "fa5252": "أحمر 6",
-    "e64980": "وردي 6",
-    "be4bdb": "عنبي 6",
-    "7950f2": "بنفسجي 6",
-    "4c6ef5": "نيلي 6",
-    "228be6": "أزرق 6",
-    "15aabf": "سماوي 6",
-    "12b886": "تركواز 6",
-    "40c057": "أخضر 6",
-    "82c91e": "ليموني 6",
-    "fab005": "أصفر 6",
-    "fd7e14": "برتقالي 6",
-    "000000": "أسود",
-    "343a40": "رمادي 8",
-    "495057": "رمادي 7",
-    "c92a2a": "أحمر 9",
-    "a61e4d": "وردي 9",
-    "862e9c": "عنبي 9",
-    "5f3dc4": "بنفسجي 9",
-    "364fc7": "نيلي 9",
-    "1864ab": "أزرق 9",
-    "0b7285": "سماوي 9",
-    "087f5b": "تركواز 9",
-    "2b8a3e": "أخضر 9",
-    "5c940d": "ليموني 9",
-    "e67700": "أصفر 9",
-    "d9480f": "برتقالي 9"
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "",
       "helpHint": ""
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/az-AZ.json b/src/locales/az-AZ.json
new file mode 100644
index 000000000..2618ccbdc
--- /dev/null
+++ b/src/locales/az-AZ.json
@@ -0,0 +1,453 @@
+{
+  "labels": {
+    "paste": "Yapışdır",
+    "pasteAsPlaintext": "Düz mətn kimi yapışdırın",
+    "pasteCharts": "Diaqramları yapışdırın",
+    "selectAll": "Hamısını seç",
+    "multiSelect": "Seçimə element əlavə edin",
+    "moveCanvas": "Kanvası köçürün",
+    "cut": "Kəs",
+    "copy": "Kopyala",
+    "copyAsPng": "PNG olaraq panoya kopyala",
+    "copyAsSvg": "SVG olaraq panoya kopyala",
+    "copyText": "Mətn olaraq panoya kopyala",
+    "bringForward": "Önə daşı",
+    "sendToBack": "Geriyə göndərin",
+    "bringToFront": "Önə gətirin",
+    "sendBackward": "Geriyə göndərin",
+    "delete": "Sil",
+    "copyStyles": "Stilləri kopyalayın",
+    "pasteStyles": "Stilləri yapışdırın",
+    "stroke": "Strok rəngi",
+    "background": "Arxa fon",
+    "fill": "Doldur",
+    "strokeWidth": "Strok eni",
+    "strokeStyle": "Strok stili",
+    "strokeStyle_solid": "Solid",
+    "strokeStyle_dashed": "Kəsik",
+    "strokeStyle_dotted": "Nöqtəli",
+    "sloppiness": "Səliqəsizlik",
+    "opacity": "Şəffaflıq",
+    "textAlign": "Mətni uyğunlaşdır",
+    "edges": "Kənarlar",
+    "sharp": "Kəskin",
+    "round": "Dəyirmi",
+    "arrowheads": "Ox ucları",
+    "arrowhead_none": "Heç biri",
+    "arrowhead_arrow": "Ox",
+    "arrowhead_bar": "Çubuq",
+    "arrowhead_dot": "Nöqtə",
+    "arrowhead_triangle": "Üçbucaq",
+    "fontSize": "Şrift ölçüsü",
+    "fontFamily": "Şrift qrupu",
+    "addWatermark": "\"Made with Excalidraw\" əlavə et",
+    "handDrawn": "Əllə çəkilmiş",
+    "normal": "Normal",
+    "code": "Kod",
+    "small": "Kiçik",
+    "medium": "Orta",
+    "large": "Böyük",
+    "veryLarge": "Çox böyük",
+    "solid": "Solid",
+    "hachure": "Ştrix",
+    "zigzag": "Ziqzaq",
+    "crossHatch": "Çarpaz dəlik",
+    "thin": "İncə",
+    "bold": "Qalın",
+    "left": "Sol",
+    "center": "Mərkəz",
+    "right": "Sağ",
+    "extraBold": "Ekstra qalın",
+    "architect": "Memar",
+    "artist": "Rəssam",
+    "cartoonist": "Karikaturaçı",
+    "fileTitle": "Fayl adı",
+    "colorPicker": "Rəng seçən",
+    "canvasColors": "Kanvas üzərində istifadə olunur",
+    "canvasBackground": "Kanvas arxa fonu",
+    "drawingCanvas": "Kanvas çəkmək",
+    "layers": "Qatlar",
+    "actions": "Hərəkətlər",
+    "language": "Dil",
+    "liveCollaboration": "Canlı əməkdaşlıq...",
+    "duplicateSelection": "Dublikat",
+    "untitled": "Başlıqsız",
+    "name": "Ad",
+    "yourName": "Adınız",
+    "madeWithExcalidraw": "Excalidraw ilə hazırlanmışdır",
+    "group": "Qrup şəklində seçim",
+    "ungroup": "Qrupsuz seçim",
+    "collaborators": "",
+    "showGrid": "",
+    "addToLibrary": "",
+    "removeFromLibrary": "",
+    "libraryLoadingMessage": "",
+    "libraries": "",
+    "loadingScene": "",
+    "align": "",
+    "alignTop": "",
+    "alignBottom": "",
+    "alignLeft": "",
+    "alignRight": "",
+    "centerVertically": "",
+    "centerHorizontally": "",
+    "distributeHorizontally": "",
+    "distributeVertically": "",
+    "flipHorizontal": "",
+    "flipVertical": "",
+    "viewMode": "",
+    "share": "",
+    "showStroke": "",
+    "showBackground": "",
+    "toggleTheme": "",
+    "personalLib": "",
+    "excalidrawLib": "",
+    "decreaseFontSize": "",
+    "increaseFontSize": "",
+    "unbindText": "",
+    "bindText": "",
+    "createContainerFromText": "",
+    "link": {
+      "edit": "",
+      "create": "",
+      "label": ""
+    },
+    "lineEditor": {
+      "edit": "",
+      "exit": ""
+    },
+    "elementLock": {
+      "lock": "",
+      "unlock": "",
+      "lockAll": "",
+      "unlockAll": ""
+    },
+    "statusPublished": "",
+    "sidebarLock": "",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
+  },
+  "library": {
+    "noItems": "",
+    "hint_emptyLibrary": "",
+    "hint_emptyPrivateLibrary": ""
+  },
+  "buttons": {
+    "clearReset": "",
+    "exportJSON": "",
+    "exportImage": "",
+    "export": "",
+    "copyToClipboard": "",
+    "save": "",
+    "saveAs": "",
+    "load": "",
+    "getShareableLink": "",
+    "close": "",
+    "selectLanguage": "",
+    "scrollBackToContent": "",
+    "zoomIn": "",
+    "zoomOut": "",
+    "resetZoom": "",
+    "menu": "",
+    "done": "",
+    "edit": "",
+    "undo": "",
+    "redo": "",
+    "resetLibrary": "",
+    "createNewRoom": "",
+    "fullScreen": "",
+    "darkMode": "",
+    "lightMode": "",
+    "zenMode": "",
+    "exitZenMode": "",
+    "cancel": "",
+    "clear": "",
+    "remove": "",
+    "publishLibrary": "",
+    "submit": "",
+    "confirm": ""
+  },
+  "alerts": {
+    "clearReset": "",
+    "couldNotCreateShareableLink": "",
+    "couldNotCreateShareableLinkTooBig": "",
+    "couldNotLoadInvalidFile": "",
+    "importBackendFailed": "",
+    "cannotExportEmptyCanvas": "",
+    "couldNotCopyToClipboard": "",
+    "decryptFailed": "",
+    "uploadedSecurly": "",
+    "loadSceneOverridePrompt": "",
+    "collabStopOverridePrompt": "",
+    "errorAddingToLibrary": "",
+    "errorRemovingFromLibrary": "",
+    "confirmAddLibrary": "",
+    "imageDoesNotContainScene": "",
+    "cannotRestoreFromImage": "",
+    "invalidSceneUrl": "",
+    "resetLibrary": "",
+    "removeItemsFromsLibrary": "",
+    "invalidEncryptionKey": "",
+    "collabOfflineWarning": ""
+  },
+  "errors": {
+    "unsupportedFileType": "",
+    "imageInsertError": "",
+    "fileTooBig": "",
+    "svgImageInsertError": "",
+    "invalidSVGString": "",
+    "cannotResolveCollabServer": "",
+    "importLibraryError": "",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": "",
+    "brave_measure_text_error": {
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
+    }
+  },
+  "toolBar": {
+    "selection": "",
+    "image": "",
+    "rectangle": "",
+    "diamond": "",
+    "ellipse": "",
+    "arrow": "",
+    "line": "",
+    "freedraw": "",
+    "text": "",
+    "library": "",
+    "lock": "",
+    "penMode": "",
+    "link": "",
+    "eraser": "",
+    "frame": "",
+    "hand": "",
+    "extraTools": ""
+  },
+  "headings": {
+    "canvasActions": "",
+    "selectedShapeActions": "",
+    "shapes": ""
+  },
+  "hints": {
+    "canvasPanning": "",
+    "linearElement": "",
+    "freeDraw": "",
+    "text": "",
+    "text_selected": "",
+    "text_editing": "",
+    "linearElementMulti": "",
+    "lockAngle": "",
+    "resize": "",
+    "resizeImage": "",
+    "rotate": "",
+    "lineEditor_info": "",
+    "lineEditor_pointSelected": "",
+    "lineEditor_nothingSelected": "",
+    "placeImage": "",
+    "publishLibrary": "",
+    "bindTextToElement": "",
+    "deepBoxSelect": "",
+    "eraserRevert": "",
+    "firefox_clipboard_write": ""
+  },
+  "canvasError": {
+    "cannotShowPreview": "",
+    "canvasTooBig": "",
+    "canvasTooBigTip": ""
+  },
+  "errorSplash": {
+    "headingMain": "",
+    "clearCanvasMessage": "",
+    "clearCanvasCaveat": "",
+    "trackedToSentry": "",
+    "openIssueMessage": "",
+    "sceneContent": ""
+  },
+  "roomDialog": {
+    "desc_intro": "",
+    "desc_privacy": "",
+    "button_startSession": "",
+    "button_stopSession": "",
+    "desc_inProgressIntro": "",
+    "desc_shareLink": "",
+    "desc_exitSession": "",
+    "shareTitle": ""
+  },
+  "errorDialog": {
+    "title": ""
+  },
+  "exportDialog": {
+    "disk_title": "",
+    "disk_details": "",
+    "disk_button": "",
+    "link_title": "",
+    "link_details": "",
+    "link_button": "",
+    "excalidrawplus_description": "",
+    "excalidrawplus_button": "",
+    "excalidrawplus_exportError": ""
+  },
+  "helpDialog": {
+    "blog": "",
+    "click": "",
+    "deepSelect": "",
+    "deepBoxSelect": "",
+    "curvedArrow": "",
+    "curvedLine": "",
+    "documentation": "",
+    "doubleClick": "",
+    "drag": "",
+    "editor": "",
+    "editLineArrowPoints": "",
+    "editText": "",
+    "github": "",
+    "howto": "",
+    "or": "",
+    "preventBinding": "",
+    "tools": "",
+    "shortcuts": "",
+    "textFinish": "",
+    "textNewLine": "",
+    "title": "",
+    "view": "",
+    "zoomToFit": "",
+    "zoomToSelection": "",
+    "toggleElementLock": "",
+    "movePageUpDown": "",
+    "movePageLeftRight": ""
+  },
+  "clearCanvasDialog": {
+    "title": ""
+  },
+  "publishDialog": {
+    "title": "",
+    "itemName": "",
+    "authorName": "",
+    "githubUsername": "",
+    "twitterUsername": "",
+    "libraryName": "",
+    "libraryDesc": "",
+    "website": "",
+    "placeholder": {
+      "authorName": "",
+      "libraryName": "",
+      "libraryDesc": "",
+      "githubHandle": "",
+      "twitterHandle": "",
+      "website": ""
+    },
+    "errors": {
+      "required": "",
+      "website": ""
+    },
+    "noteDescription": "",
+    "noteGuidelines": "",
+    "noteLicense": "",
+    "noteItems": "",
+    "atleastOneLibItem": "",
+    "republishWarning": ""
+  },
+  "publishSuccessDialog": {
+    "title": "",
+    "content": ""
+  },
+  "confirmDialog": {
+    "resetLibrary": "",
+    "removeItemsFromLib": ""
+  },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
+  "encrypted": {
+    "tooltip": "",
+    "link": ""
+  },
+  "stats": {
+    "angle": "",
+    "element": "",
+    "elements": "",
+    "height": "",
+    "scene": "",
+    "selected": "",
+    "storage": "",
+    "title": "",
+    "total": "",
+    "version": "",
+    "versionCopy": "",
+    "versionNotAvailable": "",
+    "width": ""
+  },
+  "toast": {
+    "addedToLibrary": "",
+    "copyStyles": "",
+    "copyToClipboard": "",
+    "copyToClipboardAsPng": "",
+    "fileSaved": "",
+    "fileSavedToFilename": "",
+    "canvas": "",
+    "selection": "",
+    "pasteAsSingleElement": ""
+  },
+  "colors": {
+    "transparent": "",
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
+  },
+  "welcomeScreen": {
+    "app": {
+      "center_heading": "",
+      "center_heading_plus": "",
+      "menuHint": ""
+    },
+    "defaults": {
+      "menuHint": "",
+      "center_heading": "",
+      "toolbarHint": "",
+      "helpHint": ""
+    }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
+  }
+}
diff --git a/src/locales/bg-BG.json b/src/locales/bg-BG.json
index 501ce7399..76bcef574 100644
--- a/src/locales/bg-BG.json
+++ b/src/locales/bg-BG.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Триъгълник",
     "fontSize": "Размер на шрифта",
     "fontFamily": "Семейство шрифтове",
-    "onlySelected": "Само избраното",
-    "withBackground": "Фон",
-    "exportEmbedScene": "",
-    "exportEmbedScene_details": "Данните от сцената ще бъдат екпортирани в PNG/SVG файл, за да може сцената да бъде възстановена от него.\nТова ще увеличи размера на файла.",
     "addWatermark": "Добави \"Направено с Excalidraw\"",
     "handDrawn": "Нарисувано на ръка",
     "normal": "Нормален",
@@ -54,6 +50,7 @@
     "veryLarge": "Много голям",
     "solid": "Солиден",
     "hachure": "Хералдика",
+    "zigzag": "",
     "crossHatch": "Двойно-пресечено",
     "thin": "Тънък",
     "bold": "Ясно очертан",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Хоризонтално обръщане",
     "flipVertical": "Вертикално обръщане",
     "viewMode": "Изглед",
-    "toggleExportColorScheme": "",
     "share": "Сподели",
     "showStroke": "",
     "showBackground": "",
@@ -127,7 +123,10 @@
       "unlockAll": ""
     },
     "statusPublished": "",
-    "sidebarLock": ""
+    "sidebarLock": "",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "",
@@ -139,11 +138,7 @@
     "exportJSON": "",
     "exportImage": "",
     "export": "",
-    "exportToPng": "Изнасяне в PNG",
-    "exportToSvg": "Изнасяне в SVG",
     "copyToClipboard": "Копиране в клипборда",
-    "copyPngToClipboard": "Копирай PNG в клипборда",
-    "scale": "Мащаб",
     "save": "",
     "saveAs": "Запиши като",
     "load": "",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "",
     "collabSaveFailed_sizeExceeded": "",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "",
     "link": "",
     "eraser": "",
-    "hand": ""
+    "frame": "",
+    "hand": "",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Действия по платното",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Подсказка: пробвайте да приближите далечните елементи по-близко."
   },
   "errorSplash": {
-    "headingMain_pre": "Среща грешка. Опитайте ",
-    "headingMain_button": "презареждане на страницата.",
-    "clearCanvasMessage": "Ако презареждането не работи, опитайте ",
-    "clearCanvasMessage_button": "изчистване на платното.",
+    "headingMain": "Среща грешка. Опитайте <button>презареждане на страницата.</button>",
+    "clearCanvasMessage": "Ако презареждането не работи, опитайте <button>изчистване на платното.</button>",
     "clearCanvasCaveat": " Това ще доведе до загуба на работа ",
-    "trackedToSentry_pre": "Грешката с идентификатор ",
-    "trackedToSentry_post": " беше проследен в нашата система.",
-    "openIssueMessage_pre": "Бяхме много предпазливи да не включите информацията за вашата сцена при грешката. Ако сцената ви не е частна, моля, помислете за последващи действия на нашата ",
-    "openIssueMessage_button": "тракер за грешки.",
-    "openIssueMessage_post": " Моля, включете информация по-долу, като я копирате и добавите в GitHub.",
+    "trackedToSentry": "Грешката с идентификатор {{eventId}} беше проследен в нашата система.",
+    "openIssueMessage": "Бяхме много предпазливи да не включите информацията за вашата сцена при грешката. Ако сцената ви не е частна, моля, помислете за последващи действия на нашата <button>тракер за грешки.</button> Моля, включете информация по-долу, като я копирате и добавите в GitHub.",
     "sceneContent": "Съдържание на сцената:"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "",
       "website": ""
     },
-    "noteDescription": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
-    "noteGuidelines": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
-    "noteLicense": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
+    "noteDescription": "",
+    "noteGuidelines": "",
+    "noteLicense": "",
     "noteItems": "",
     "atleastOneLibItem": "",
     "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "",
-    "content": "",
-    "link": ""
+    "content": ""
   },
   "confirmDialog": {
     "resetLibrary": "",
     "removeItemsFromLib": ""
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "Вашите рисунки са криптирани от край до край, така че сървърите на Excalidraw няма да могат да ги виждат.",
     "link": ""
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": ""
   },
   "colors": {
-    "ffffff": "",
-    "f8f9fa": "",
-    "f1f3f5": "",
-    "fff5f5": "",
-    "fff0f6": "",
-    "f8f0fc": "",
-    "f3f0ff": "",
-    "edf2ff": "",
-    "e7f5ff": "",
-    "e3fafc": "",
-    "e6fcf5": "",
-    "ebfbee": "",
-    "f4fce3": "",
-    "fff9db": "",
-    "fff4e6": "",
     "transparent": "",
-    "ced4da": "",
-    "868e96": "",
-    "fa5252": "",
-    "e64980": "",
-    "be4bdb": "",
-    "7950f2": "",
-    "4c6ef5": "",
-    "228be6": "",
-    "15aabf": "",
-    "12b886": "",
-    "40c057": "",
-    "82c91e": "",
-    "fab005": "",
-    "fd7e14": "",
-    "000000": "",
-    "343a40": "",
-    "495057": "",
-    "c92a2a": "",
-    "a61e4d": "",
-    "862e9c": "",
-    "5f3dc4": "",
-    "364fc7": "",
-    "1864ab": "",
-    "0b7285": "",
-    "087f5b": "",
-    "2b8a3e": "",
-    "5c940d": "",
-    "e67700": "",
-    "d9480f": ""
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "",
       "helpHint": ""
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/bn-BD.json b/src/locales/bn-BD.json
index a5d9dec0f..2c5aa7277 100644
--- a/src/locales/bn-BD.json
+++ b/src/locales/bn-BD.json
@@ -1,7 +1,7 @@
 {
   "labels": {
     "paste": "পেস্ট করুন",
-    "pasteAsPlaintext": "",
+    "pasteAsPlaintext": "প্লেইনটেক্সট হিসাবে পেস্ট করুন",
     "pasteCharts": "চার্ট পেস্ট করুন",
     "selectAll": "সবটা সিলেক্ট করুন",
     "multiSelect": "একাধিক সিলেক্ট করুন",
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "ত্রিভূজ",
     "fontSize": "লেখনীর মাত্রা",
     "fontFamily": "লেখনীর হরফ",
-    "onlySelected": "শুধুমাত্র সিলেক্টকৃত",
-    "withBackground": "পটভূমি সমেত",
-    "exportEmbedScene": "দৃশ্য",
-    "exportEmbedScene_details": "সিনের ডেটা এক্সপোর্টকৃত পীএনজী বা এসভীজী ফাইলের মধ্যে সেভ করা হবে যাতে করে পরবর্তী সময়ে আপনি এডিট করতে পারেন। তবে এতে ফাইলের সাইজ বাড়বে",
     "addWatermark": "এক্সক্যালিড্র দ্বারা প্রস্তুত",
     "handDrawn": "হাতে আঁকা",
     "normal": "স্বাভাবিক",
@@ -54,6 +50,7 @@
     "veryLarge": "অনেক বড়",
     "solid": "দৃঢ়",
     "hachure": "ভ্রুলেখা",
+    "zigzag": "আঁকাবাঁকা",
     "crossHatch": "ক্রস হ্যাচ",
     "thin": "পাতলা",
     "bold": "পুরু",
@@ -72,7 +69,7 @@
     "layers": "মাত্রা",
     "actions": "ক্রিয়া",
     "language": "ভাষা",
-    "liveCollaboration": "",
+    "liveCollaboration": "সরাসরি পারস্পরিক সহযোগিতা...",
     "duplicateSelection": "সদৃশ সিলেক্ট",
     "untitled": "অনামী",
     "name": "নাম",
@@ -99,7 +96,6 @@
     "flipHorizontal": "অনুভূমিক আবর্তন",
     "flipVertical": "উলম্ব আবর্তন",
     "viewMode": "দৃশ্য",
-    "toggleExportColorScheme": "",
     "share": "ভাগ করুন",
     "showStroke": "",
     "showBackground": "",
@@ -127,7 +123,10 @@
       "unlockAll": "সব বিচ্ছিন্ন করুন"
     },
     "statusPublished": "প্রকাশিত",
-    "sidebarLock": "লক"
+    "sidebarLock": "লক",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "সংগ্রহে কিছু যোগ করা হয়নি",
@@ -139,11 +138,7 @@
     "exportJSON": "জেসন নিবদ্ধ করুন",
     "exportImage": "",
     "export": "",
-    "exportToPng": "পীএনজী ছবির মতন নিবদ্ধ করুন",
-    "exportToSvg": "এসভীজী ছবির মতন নিবদ্ধ করুন",
     "copyToClipboard": "ক্লিপবোর্ডে কপি করুন",
-    "copyPngToClipboard": "পীএনজী ছবির মতন ক্লিপবোর্ডে কপি করুন",
-    "scale": "মাপ",
     "save": "জমা করুন",
     "saveAs": "অন্যভাবে জমা করুন",
     "load": "",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "",
     "collabSaveFailed_sizeExceeded": "",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "",
     "link": "একটি নির্বাচিত আকৃতির জন্য লিঙ্ক যোগ বা আপডেট করুন",
     "eraser": "ঝাড়ন",
-    "hand": ""
+    "frame": "",
+    "hand": "",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "ক্যানভাস কার্যকলাপ",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "বিশেষ্য: দূরতম উপাদানগুলোকে একটু কাছাকাছি নিয়ে যাওয়ার চেষ্টা করুন।"
   },
   "errorSplash": {
-    "headingMain_pre": "একটি ত্রুটির সম্মুখীন হয়েছে৷ চেষ্টা করুন ",
-    "headingMain_button": "পৃষ্ঠাটি পুনরায় লোড করার।",
-    "clearCanvasMessage": "যদি পুনরায় লোড করা কাজ না করে, চেষ্টা করুন ",
-    "clearCanvasMessage_button": "ক্যানভাস পরিষ্কার করার।",
+    "headingMain": "একটি ত্রুটির সম্মুখীন হয়েছে৷ চেষ্টা করুন <button>পৃষ্ঠাটি পুনরায় লোড করার।</button>",
+    "clearCanvasMessage": "যদি পুনরায় লোড করা কাজ না করে, চেষ্টা করুন <button>ক্যানভাস পরিষ্কার করার।</button>",
     "clearCanvasCaveat": " এর ফলে কাজের ক্ষতি হবে ",
-    "trackedToSentry_pre": "ত্রুটি ",
-    "trackedToSentry_post": " আমাদের সিস্টেমে ট্র্যাক করা হয়েছিল।",
-    "openIssueMessage_pre": "আমরা ত্রুটিতে আপনার দৃশ্যের তথ্য অন্তর্ভুক্ত না করার জন্য খুব সতর্ক ছিলাম। আপনার দৃশ্য ব্যক্তিগত না হলে, আমাদের অনুসরণ করার কথা বিবেচনা করুন ",
-    "openIssueMessage_button": "ত্রুটি ইতিবৃত্ত।",
-    "openIssueMessage_post": " অনুগ্রহ করে GitHub ইস্যুতে অনুলিপি এবং পেস্ট করে নীচের তথ্য অন্তর্ভুক্ত করুন।",
+    "trackedToSentry": "ত্রুটি {{eventId}} আমাদের সিস্টেমে ট্র্যাক করা হয়েছিল।",
+    "openIssueMessage": "আমরা ত্রুটিতে আপনার দৃশ্যের তথ্য অন্তর্ভুক্ত না করার জন্য খুব সতর্ক ছিলাম। আপনার দৃশ্য ব্যক্তিগত না হলে, আমাদের অনুসরণ করার কথা বিবেচনা করুন <button>ত্রুটি ইতিবৃত্ত।</button> অনুগ্রহ করে GitHub ইস্যুতে অনুলিপি এবং পেস্ট করে নীচের তথ্য অন্তর্ভুক্ত করুন।",
     "sceneContent": "দৃশ্য বিষয়বস্তু:"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "",
       "website": ""
     },
-    "noteDescription": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
-    "noteGuidelines": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
-    "noteLicense": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
+    "noteDescription": "",
+    "noteGuidelines": "",
+    "noteLicense": "",
     "noteItems": "",
     "atleastOneLibItem": "",
     "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "",
-    "content": "",
-    "link": ""
+    "content": ""
   },
   "confirmDialog": {
     "resetLibrary": "",
     "removeItemsFromLib": ""
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "",
     "link": ""
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": ""
   },
   "colors": {
-    "ffffff": "সাদা",
-    "f8f9fa": "",
-    "f1f3f5": "",
-    "fff5f5": "",
-    "fff0f6": "",
-    "f8f0fc": "",
-    "f3f0ff": "",
-    "edf2ff": "",
-    "e7f5ff": "",
-    "e3fafc": "",
-    "e6fcf5": "",
-    "ebfbee": "",
-    "f4fce3": "",
-    "fff9db": "",
-    "fff4e6": "",
     "transparent": "",
-    "ced4da": "",
-    "868e96": "",
-    "fa5252": "",
-    "e64980": "",
-    "be4bdb": "",
-    "7950f2": "",
-    "4c6ef5": "",
-    "228be6": "",
-    "15aabf": "",
-    "12b886": "",
-    "40c057": "",
-    "82c91e": "",
-    "fab005": "",
-    "fd7e14": "",
-    "000000": "কালো",
-    "343a40": "",
-    "495057": "",
-    "c92a2a": "",
-    "a61e4d": "",
-    "862e9c": "",
-    "5f3dc4": "",
-    "364fc7": "",
-    "1864ab": "",
-    "0b7285": "",
-    "087f5b": "",
-    "2b8a3e": "",
-    "5c940d": "",
-    "e67700": "",
-    "d9480f": ""
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "",
       "helpHint": ""
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/ca-ES.json b/src/locales/ca-ES.json
index ae45e764d..daa9da8c4 100644
--- a/src/locales/ca-ES.json
+++ b/src/locales/ca-ES.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Triangle",
     "fontSize": "Mida de lletra",
     "fontFamily": "Tipus de lletra",
-    "onlySelected": "Només seleccionats",
-    "withBackground": "Fons",
-    "exportEmbedScene": "Insereix l'escena",
-    "exportEmbedScene_details": "Les dades de l’escena es desaran al fitxer PNG/SVG de manera que es pugui restaurar l’escena.\nAugmentarà la mida del fitxer exportat.",
     "addWatermark": "Afegeix-hi «Fet amb Excalidraw»",
     "handDrawn": "Dibuixat a mà",
     "normal": "Normal",
@@ -54,6 +50,7 @@
     "veryLarge": "Molt gran",
     "solid": "Sòlid",
     "hachure": "Ratlletes",
+    "zigzag": "",
     "crossHatch": "Ratlletes creuades",
     "thin": "Fi",
     "bold": "Negreta",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Capgira horitzontalment",
     "flipVertical": "Capgira verticalment",
     "viewMode": "Mode de visualització",
-    "toggleExportColorScheme": "Canvia l'esquema de colors de l'exportació",
     "share": "Comparteix",
     "showStroke": "Mostra el selector de color del traç",
     "showBackground": "Mostra el selector de color de fons",
@@ -127,7 +123,10 @@
       "unlockAll": "Desbloca-ho tot"
     },
     "statusPublished": "Publicat",
-    "sidebarLock": "Manté la barra lateral oberta"
+    "sidebarLock": "Manté la barra lateral oberta",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "Encara no s'hi han afegit elements...",
@@ -139,11 +138,7 @@
     "exportJSON": "Exporta a un fitxer",
     "exportImage": "Exporta la imatge...",
     "export": "Guardar a...",
-    "exportToPng": "Exporta a PNG",
-    "exportToSvg": "Exporta a SNG",
     "copyToClipboard": "Copia al porta-retalls",
-    "copyPngToClipboard": "Copia el PNG al porta-retalls",
-    "scale": "Escala",
     "save": "Desa al fitxer actual",
     "saveAs": "Anomena i desa",
     "load": "Obrir",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "No s'ha pogut desar a la base de dades de fons. Si els problemes persisteixen, hauríeu de desar el fitxer localment per assegurar-vos que no perdeu el vostre treball.",
     "collabSaveFailed_sizeExceeded": "No s'ha pogut desar a la base de dades de fons, sembla que el llenç és massa gran. Hauríeu de desar el fitxer localment per assegurar-vos que no perdeu el vostre treball.",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Mode de llapis - evita tocar",
     "link": "Afegeix / actualitza l'enllaç per a la forma seleccionada",
     "eraser": "Esborrador",
-    "hand": "Mà (eina de desplaçament)"
+    "frame": "",
+    "hand": "Mà (eina de desplaçament)",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Accions del llenç",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Consell: proveu d’acostar una mica els elements més allunyats."
   },
   "errorSplash": {
-    "headingMain_pre": "S'ha produït un error. Proveu ",
-    "headingMain_button": "recarregar la pàgina.",
-    "clearCanvasMessage": "Si la recàrrega no funciona, proveu ",
-    "clearCanvasMessage_button": "esborrar el llenç.",
+    "headingMain": "S'ha produït un error. Proveu <button>recarregar la pàgina.</button>",
+    "clearCanvasMessage": "Si la recàrrega no funciona, proveu <button>esborrar el llenç.</button>",
     "clearCanvasCaveat": " Això resultarà en la pèrdua de feina ",
-    "trackedToSentry_pre": "L'error amb l'identificador ",
-    "trackedToSentry_post": " s'ha rastrejat en el nostre sistema.",
-    "openIssueMessage_pre": "Anàvem amb molta cura de no incloure la informació de la vostra escena en l'error. Si l'escena no és privada, podeu fer-ne el seguiment al nostre ",
-    "openIssueMessage_button": "rastrejador d'errors.",
-    "openIssueMessage_post": " Incloeu la informació a continuació copiant i enganxant a GitHub Issues.",
+    "trackedToSentry": "L'error amb l'identificador {{eventId}} s'ha rastrejat en el nostre sistema.",
+    "openIssueMessage": "Anàvem amb molta cura de no incloure la informació de la vostra escena en l'error. Si l'escena no és privada, podeu fer-ne el seguiment al nostre <button>rastrejador d'errors.</button> Incloeu la informació a continuació copiant i enganxant a GitHub Issues.",
     "sceneContent": "Contingut de l'escena:"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "Requerit",
       "website": "Introduïu una URL vàlida"
     },
-    "noteDescription": {
-      "pre": "Envieu la vostra biblioteca perquè sigui inclosa al ",
-      "link": "repositori públic",
-      "post": "per tal que altres persones puguin fer-ne ús en els seus dibuixos."
-    },
-    "noteGuidelines": {
-      "pre": "La biblioteca ha de ser aprovada manualment. Si us plau, llegiu les ",
-      "link": "directrius",
-      "post": " abans d'enviar-hi res. Necessitareu un compte de GitHub per a comunicar i fer-hi canvis si cal, però no és requisit imprescindible."
-    },
-    "noteLicense": {
-      "pre": "Quan l'envieu, accepteu que la biblioteca sigui publicada sota la ",
-      "link": "llicència MIT, ",
-      "post": "que, en resum, vol dir que qualsevol persona pot fer-ne ús sense restriccions."
-    },
+    "noteDescription": "Envieu la vostra biblioteca perquè sigui inclosa al <link>repositori públic</link>per tal que altres persones puguin fer-ne ús en els seus dibuixos.",
+    "noteGuidelines": "La biblioteca ha de ser aprovada manualment. Si us plau, llegiu les <link>directrius</link> abans d'enviar-hi res. Necessitareu un compte de GitHub per a comunicar i fer-hi canvis si cal, però no és requisit imprescindible.",
+    "noteLicense": "Quan l'envieu, accepteu que la biblioteca sigui publicada sota la <link>llicència MIT, </link>que, en resum, vol dir que qualsevol persona pot fer-ne ús sense restriccions.",
     "noteItems": "Cada element de la biblioteca ha de tenir el seu propi nom per tal que sigui filtrable. S'hi inclouran els elements següents:",
     "atleastOneLibItem": "Si us plau, seleccioneu si més no un element de la biblioteca per a començar",
     "republishWarning": "Nota: alguns dels elements seleccionats s'han marcat com a publicats/enviats. Només hauríeu de reenviar elements quan actualitzeu una biblioteca existent."
   },
   "publishSuccessDialog": {
     "title": "Biblioteca enviada",
-    "content": "Gràcies, {{authorName}}. La vostra biblioteca ha estat enviada per a ser revisada. Podeu comprovar-ne l'estat",
-    "link": "aquí"
+    "content": "Gràcies, {{authorName}}. La vostra biblioteca ha estat enviada per a ser revisada. Podeu comprovar-ne l'estat<link>aquí</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Restableix la biblioteca",
     "removeItemsFromLib": "Suprimeix els elements seleccionats de la llibreria"
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "Els vostres dibuixos estan xifrats de punta a punta de manera que els servidors d’Excalidraw no els veuran mai.",
     "link": "Article del blog sobre encriptació d'extrem a extrem a Excalidraw"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "Fer servir {{shortcut}} per enganxar com un sol element,\no enganxeu-lo en un editor de text existent"
   },
   "colors": {
-    "ffffff": "Blanc",
-    "f8f9fa": "Gris 0",
-    "f1f3f5": "Gris 1",
-    "fff5f5": "Vermell 0",
-    "fff0f6": "Rosa 0",
-    "f8f0fc": "Malva 0",
-    "f3f0ff": "Violat 0",
-    "edf2ff": "Indi 0",
-    "e7f5ff": "Blau 0",
-    "e3fafc": "Cian 0",
-    "e6fcf5": "Xarxet 0",
-    "ebfbee": "Verd 0",
-    "f4fce3": "Llima 0",
-    "fff9db": "Groc 0",
-    "fff4e6": "Taronja 0",
     "transparent": "Transparent",
-    "ced4da": "Gris 4",
-    "868e96": "Gris 6",
-    "fa5252": "Vermell 6",
-    "e64980": "Rosa 6",
-    "be4bdb": "Malva 6",
-    "7950f2": "Violat 6",
-    "4c6ef5": "Indi 6",
-    "228be6": "Blau 6",
-    "15aabf": "Cian 6",
-    "12b886": "Xarxet 6",
-    "40c057": "Verd 6",
-    "82c91e": "Llima 6",
-    "fab005": "Groc 6",
-    "fd7e14": "Taronja 6",
-    "000000": "Negre",
-    "343a40": "Gris 8",
-    "495057": "Gris 7",
-    "c92a2a": "Vermell 9",
-    "a61e4d": "Rosa 9",
-    "862e9c": "Malva 9",
-    "5f3dc4": "Violat 9",
-    "364fc7": "Indi 9",
-    "1864ab": "Blau 9",
-    "0b7285": "Cian 9",
-    "087f5b": "Xarxet 9",
-    "2b8a3e": "Verd 9",
-    "5c940d": "Llima 9",
-    "e67700": "Groc 9",
-    "d9480f": "Taronja 9"
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "Selecciona una eina i comença a dibuixar!",
       "helpHint": "Dreceres i ajuda"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/cs-CZ.json b/src/locales/cs-CZ.json
index d57a8837d..528fb1b63 100644
--- a/src/locales/cs-CZ.json
+++ b/src/locales/cs-CZ.json
@@ -1,7 +1,7 @@
 {
   "labels": {
     "paste": "Vložit",
-    "pasteAsPlaintext": "",
+    "pasteAsPlaintext": "Vložit jako prostý text",
     "pasteCharts": "Vložit grafy",
     "selectAll": "Vybrat vše",
     "multiSelect": "Přidat prvek do výběru",
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Trojúhelník",
     "fontSize": "Velikost písma",
     "fontFamily": "Písmo",
-    "onlySelected": "Pouze vybrané",
-    "withBackground": "Pozadí",
-    "exportEmbedScene": "Vložit scénu",
-    "exportEmbedScene_details": "Data scény budou uložena do exportovaného souboru PNG/SVG tak, aby z něj mohla být scéna obnovena.\nZvýší se velikost exportovaného souboru.",
     "addWatermark": "Přidat \"Vyrobeno s Excalidraw\"",
     "handDrawn": "Od ruky",
     "normal": "Normální",
@@ -53,8 +49,9 @@
     "large": "Velké",
     "veryLarge": "Velmi velké",
     "solid": "Plný",
-    "hachure": "",
-    "crossHatch": "",
+    "hachure": "Hachure",
+    "zigzag": "Klikatě",
+    "crossHatch": "Křížový šrafování",
     "thin": "Tenký",
     "bold": "Tlustý",
     "left": "Vlevo",
@@ -63,7 +60,7 @@
     "extraBold": "Extra tlustý",
     "architect": "Architekt",
     "artist": "Umělec",
-    "cartoonist": "",
+    "cartoonist": "Kartoonista",
     "fileTitle": "Název souboru",
     "colorPicker": "Výběr barvy",
     "canvasColors": "Použito na plátně",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Převrátit vodorovně",
     "flipVertical": "Převrátit svisle",
     "viewMode": "Náhled",
-    "toggleExportColorScheme": "Přepnout exportování barevného schématu",
     "share": "Sdílet",
     "showStroke": "Zobrazit výběr barvy",
     "showBackground": "Zobrazit výběr barev pozadí",
@@ -110,7 +106,7 @@
     "increaseFontSize": "Zvětšit písmo",
     "unbindText": "Zrušit vazbu textu",
     "bindText": "Vázat text s kontejnerem",
-    "createContainerFromText": "",
+    "createContainerFromText": "Zabalit text do kontejneru",
     "link": {
       "edit": "Upravit odkaz",
       "create": "Vytvořit odkaz",
@@ -127,7 +123,10 @@
       "unlockAll": "Odemknout vše"
     },
     "statusPublished": "Zveřejněno",
-    "sidebarLock": "Ponechat postranní panel otevřený"
+    "sidebarLock": "Ponechat postranní panel otevřený",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": "Vyberte barvu z plátna"
   },
   "library": {
     "noItems": "Dosud neexistují žádné položky...",
@@ -139,11 +138,7 @@
     "exportJSON": "Exportovat do souboru",
     "exportImage": "Exportovat obrázek...",
     "export": "Uložit jako...",
-    "exportToPng": "Exportovat do PNG",
-    "exportToSvg": "Exportovat do SVG",
     "copyToClipboard": "Kopírovat do schránky",
-    "copyPngToClipboard": "Kopírovat PNG do schránky",
-    "scale": "Měřítko",
     "save": "Uložit do aktuálního souboru",
     "saveAs": "Uložit jako",
     "load": "Otevřít",
@@ -184,47 +179,38 @@
     "decryptFailed": "Nelze dešifrovat data.",
     "uploadedSecurly": "Nahrávání je zabezpečeno koncovým šifrováním, což znamená, že server Excalidraw ani třetí strany nemohou obsah přečíst.",
     "loadSceneOverridePrompt": "Načítání externího výkresu nahradí váš existující obsah. Přejete si pokračovat?",
-    "collabStopOverridePrompt": "",
+    "collabStopOverridePrompt": "Zastavení relace přepíše vaše předchozí, lokálně uložené kresby. Jste si jisti?\n\n(Pokud chcete zachovat místní kresbu, jednoduše zavřete kartu prohlížeče)",
     "errorAddingToLibrary": "Položku nelze přidat do knihovny",
     "errorRemovingFromLibrary": "Položku nelze odstranit z knihovny",
     "confirmAddLibrary": "Tímto přidáte {{numShapes}} tvarů do tvé knihovny. Jste si jisti?",
     "imageDoesNotContainScene": "Zdá se, že tento obrázek neobsahuje žádná data o scéně. Zapnuli jste při exportu vkládání scény?",
-    "cannotRestoreFromImage": "",
-    "invalidSceneUrl": "",
-    "resetLibrary": "",
-    "removeItemsFromsLibrary": "",
-    "invalidEncryptionKey": "",
-    "collabOfflineWarning": ""
+    "cannotRestoreFromImage": "Scénu nelze obnovit z tohoto souboru obrázku",
+    "invalidSceneUrl": "Nelze importovat scénu z zadané URL. Je buď poškozená, nebo neobsahuje platná JSON data Excalidraw.",
+    "resetLibrary": "Tímto vymažete vaši knihovnu. Jste si jisti?",
+    "removeItemsFromsLibrary": "Smazat {{count}} položek z knihovny?",
+    "invalidEncryptionKey": "Šifrovací klíč musí mít 22 znaků. Live spolupráce je zakázána.",
+    "collabOfflineWarning": "Není k dispozici žádné internetové připojení.\nVaše změny nebudou uloženy!"
   },
   "errors": {
-    "unsupportedFileType": "",
-    "imageInsertError": "",
-    "fileTooBig": "",
-    "svgImageInsertError": "",
-    "invalidSVGString": "",
-    "cannotResolveCollabServer": "",
-    "importLibraryError": "",
-    "collabSaveFailed": "",
-    "collabSaveFailed_sizeExceeded": "",
+    "unsupportedFileType": "Nepodporovaný typ souboru.",
+    "imageInsertError": "Nelze vložit obrázek. Zkuste to později...",
+    "fileTooBig": "Soubor je příliš velký. Maximální povolená velikost je {{maxSize}}.",
+    "svgImageInsertError": "Nelze vložit SVG obrázek. Značení SVG je neplatné.",
+    "invalidSVGString": "Neplatný SVG.",
+    "cannotResolveCollabServer": "Nelze se připojit ke sdílenému serveru. Prosím obnovte stránku a zkuste to znovu.",
+    "importLibraryError": "Nelze načíst knihovnu",
+    "collabSaveFailed": "Nelze uložit do databáze na serveru. Pokud problémy přetrvávají, měli byste uložit soubor lokálně, abyste se ujistili, že neztratíte svou práci.",
+    "collabSaveFailed_sizeExceeded": "Nelze uložit do databáze na serveru, plátno se zdá být příliš velké. Měli byste uložit soubor lokálně, abyste se ujistili, že neztratíte svou práci.",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "Vypadá to, že používáte Brave prohlížeč s povoleným nastavením <bold>Aggressively Block Fingerprinting</bold>.",
+      "line2": "To by mohlo vést k narušení <bold>Textových elementů</bold> ve vašich výkresech.",
+      "line3": "Důrazně doporučujeme zakázat toto nastavení. Můžete sledovat <link>tyto kroky</link> jak to udělat.",
+      "line4": "Pokud vypnutí tohoto nastavení neopravuje zobrazení textových prvků, prosím, otevřete <issueLink>problém</issueLink> na našem GitHubu, nebo nám napište na <discordLink>Discord</discordLink>"
     }
   },
   "toolBar": {
     "selection": "Výběr",
-    "image": "",
+    "image": "Vložit obrázek",
     "rectangle": "Obdélník",
     "diamond": "Diamant",
     "ellipse": "Elipsa",
@@ -232,74 +218,71 @@
     "line": "Čára",
     "freedraw": "Kreslení",
     "text": "Text",
-    "library": "",
-    "lock": "",
-    "penMode": "",
-    "link": "",
+    "library": "Knihovna",
+    "lock": "Po kreslení ponechat vybraný nástroj aktivní",
+    "penMode": "Režim Pera - zabránit dotyku",
+    "link": "Přidat/aktualizovat odkaz pro vybraný tvar",
     "eraser": "Guma",
-    "hand": ""
+    "frame": "",
+    "hand": "Ruka (nástroj pro posouvání)",
+    "extraTools": ""
   },
   "headings": {
-    "canvasActions": "",
-    "selectedShapeActions": "",
+    "canvasActions": "Akce plátna",
+    "selectedShapeActions": "Akce vybraného tvaru",
     "shapes": "Tvary"
   },
   "hints": {
-    "canvasPanning": "",
-    "linearElement": "",
-    "freeDraw": "",
-    "text": "",
-    "text_selected": "",
-    "text_editing": "",
-    "linearElementMulti": "",
-    "lockAngle": "",
-    "resize": "",
-    "resizeImage": "",
-    "rotate": "",
-    "lineEditor_info": "",
-    "lineEditor_pointSelected": "",
-    "lineEditor_nothingSelected": "",
-    "placeImage": "",
-    "publishLibrary": "",
-    "bindTextToElement": "",
-    "deepBoxSelect": "",
-    "eraserRevert": "",
-    "firefox_clipboard_write": ""
+    "canvasPanning": "Chcete-li přesunout plátno, podržte kolečko nebo mezerník při tažení nebo použijte nástroj Ruka",
+    "linearElement": "Kliknutím pro více bodů, táhnutím pro jednu čáru",
+    "freeDraw": "Klikněte a táhněte, pro ukončení pusťte",
+    "text": "Tip: Text můžete také přidat dvojitým kliknutím kdekoli pomocí nástroje pro výběr",
+    "text_selected": "Dvojklikem nebo stisknutím klávesy ENTER upravíte text",
+    "text_editing": "Stiskněte Escape nebo Ctrl/Cmd+ENTER pro dokončení úprav",
+    "linearElementMulti": "Klikněte na poslední bod nebo stiskněte Escape anebo Enter pro dokončení",
+    "lockAngle": "Úhel můžete omezit podržením SHIFT",
+    "resize": "Můžete omezit proporce podržením SHIFT při změně velikosti,\npodržte ALT pro změnu velikosti od středu",
+    "resizeImage": "Můžete volně změnit velikost podržením SHIFT,\npodržením klávesy ALT změníte velikosti od středu",
+    "rotate": "Úhly můžete omezit podržením SHIFT při otáčení",
+    "lineEditor_info": "Podržte Ctrl/Cmd a dvakrát klikněte nebo stiskněte Ctrl/Cmd + Enter pro úpravu bodů",
+    "lineEditor_pointSelected": "Stisknutím tlačítka Delete odstraňte bod(y),\nCtrl/Cmd+D pro duplicitu nebo táhnutím pro přesun",
+    "lineEditor_nothingSelected": "Vyberte bod, který chcete upravit (podržením klávesy SHIFT vyberete více položek),\nnebo podržením klávesy Alt a kliknutím přidáte nové body",
+    "placeImage": "Kliknutím umístěte obrázek, nebo klepnutím a přetažením ručně nastavíte jeho velikost",
+    "publishLibrary": "Publikovat vlastní knihovnu",
+    "bindTextToElement": "Stiskněte Enter pro přidání textu",
+    "deepBoxSelect": "Podržte Ctrl/Cmd pro hluboký výběr a pro zabránění táhnutí",
+    "eraserRevert": "Podržením klávesy Alt vrátíte prvky označené pro smazání",
+    "firefox_clipboard_write": "Tato funkce může být povolena nastavením vlajky \"dom.events.asyncClipboard.clipboardItem\" na \"true\". Chcete-li změnit vlajky prohlížeče ve Firefoxu, navštivte stránku \"about:config\"."
   },
   "canvasError": {
-    "cannotShowPreview": "",
-    "canvasTooBig": "",
-    "canvasTooBigTip": ""
+    "cannotShowPreview": "Náhled nelze zobrazit",
+    "canvasTooBig": "Plátno je možná příliš velké.",
+    "canvasTooBigTip": "Tip: zkus posunout nejvzdálenější prvky trochu blíže k sobě."
   },
   "errorSplash": {
-    "headingMain_pre": "",
-    "headingMain_button": "",
-    "clearCanvasMessage": "",
-    "clearCanvasMessage_button": "",
-    "clearCanvasCaveat": "",
-    "trackedToSentry_pre": "Chyba identifikátoru ",
-    "trackedToSentry_post": " byl zaznamenán v našem systému.",
-    "openIssueMessage_pre": "",
-    "openIssueMessage_button": "",
-    "openIssueMessage_post": "",
-    "sceneContent": ""
+    "headingMain": "Chyba. Zkuste <button>znovu načíst stránku</button>.",
+    "clearCanvasMessage": "Pokud opětovné načtení nefunguje, zkuste <button>vymazat plátno</button>.",
+    "clearCanvasCaveat": " To povede ke ztrátě dat ",
+    "trackedToSentry": "Chyba identifikátoru {{eventId}} byl zaznamenán v našem systému.",
+    "openIssueMessage": "Byli jsme velmi opatrní, abychom neuváděli informace o Vaší scéně. Pokud vaše scéna není soukromá, zvažte prosím sledování na našem <button>bug trackeru</button>. Uveďte prosím níže uvedené informace kopírováním a vložením do problému na GitHubu.",
+    "sceneContent": "Obsah scény:"
   },
   "roomDialog": {
-    "desc_intro": "",
-    "desc_privacy": "",
-    "button_startSession": "",
-    "button_stopSession": "",
-    "desc_inProgressIntro": "",
-    "desc_shareLink": "",
-    "desc_exitSession": "",
-    "shareTitle": ""
+    "desc_intro": "Můžete pozvat lidi na vaši aktuální scénu ke spolupráci s vámi.",
+    "desc_privacy": "Nebojte se, relace používá end-to-end šifrování, takže cokoliv nakreslíte zůstane soukromé. Ani náš server nebude schopen vidět, s čím budete pracovat.",
+    "button_startSession": "Zahájit relaci",
+    "button_stopSession": "Ukončit relaci",
+    "desc_inProgressIntro": "Živá spolupráce právě probíhá.",
+    "desc_shareLink": "Sdílejte tento odkaz s každým, s kým chcete spolupracovat:",
+    "desc_exitSession": "Zastavením relace se odpojíte od místnosti, ale budete moci pokračovat v práci s touto scénou lokálně. Všimněte si, že to nebude mít vliv na ostatní lidi a budou stále moci spolupracovat na jejich verzi.",
+    "shareTitle": "Připojte se k aktivní spolupráci na Excalidraw"
   },
   "errorDialog": {
-    "title": ""
+    "title": "Chyba"
   },
   "exportDialog": {
-    "disk_title": "",
-    "disk_details": "",
+    "disk_title": "Uložit na disk",
+    "disk_details": "Exportovat data scény do souboru, ze kterého můžete importovat později.",
     "disk_button": "Uložit do souboru",
     "link_title": "Odkaz pro sdílení",
     "link_details": "Exportovat jako odkaz pouze pro čtení.",
@@ -311,18 +294,18 @@
   "helpDialog": {
     "blog": "Přečtěte si náš blog",
     "click": "kliknutí",
-    "deepSelect": "",
-    "deepBoxSelect": "",
+    "deepSelect": "Hluboký výběr",
+    "deepBoxSelect": "Hluboký výběr uvnitř boxu a zabránění táhnnutí",
     "curvedArrow": "Zakřivená šipka",
     "curvedLine": "Zakřivená čára",
     "documentation": "Dokumentace",
     "doubleClick": "dvojklik",
     "drag": "tažení",
     "editor": "Editor",
-    "editLineArrowPoints": "",
-    "editText": "",
-    "github": "",
-    "howto": "",
+    "editLineArrowPoints": "Upravit body linií/šipek",
+    "editText": "Upravit text / přidat popis",
+    "github": "Našel jsi problém? Nahlaš ho",
+    "howto": "Sledujte naše návody",
     "or": "nebo",
     "preventBinding": "Zabránit vázání šipky",
     "tools": "Nástroje",
@@ -334,8 +317,8 @@
     "zoomToFit": "Přiblížit na zobrazení všech prvků",
     "zoomToSelection": "Přiblížit na výběr",
     "toggleElementLock": "Zamknout/odemknout výběr",
-    "movePageUpDown": "",
-    "movePageLeftRight": ""
+    "movePageUpDown": "Posunout stránku nahoru/dolů",
+    "movePageLeftRight": "Přesunout stránku doleva/doprava"
   },
   "clearCanvasDialog": {
     "title": "Vymazat plátno"
@@ -361,37 +344,48 @@
       "required": "Povinné",
       "website": "Zadejte platnou URL adresu"
     },
-    "noteDescription": {
-      "pre": "Odešlete svou knihovnu, pro zařazení do ",
-      "link": "veřejného úložiště knihoven",
-      "post": ", odkud ji budou moci při kreslení využít i ostatní uživatelé."
-    },
-    "noteGuidelines": {
-      "pre": "Knihovna musí být nejdříve ručně schválena. Přečtěte si prosím ",
-      "link": "pokyny",
-      "post": ""
-    },
-    "noteLicense": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
-    "noteItems": "",
-    "atleastOneLibItem": "",
-    "republishWarning": ""
+    "noteDescription": "Odešlete svou knihovnu, pro zařazení do <link>veřejného úložiště knihoven</link>, odkud ji budou moci při kreslení využít i ostatní uživatelé.",
+    "noteGuidelines": "Knihovna musí být nejdříve ručně schválena. Přečtěte si prosím <link>pokyny</link>",
+    "noteLicense": "Odesláním souhlasíte s tím, že knihovna bude zveřejněna pod <link>MIT licencí</link>, stručně řečeno, kdokoli ji může používat bez omezení.",
+    "noteItems": "Každá položka knihovny musí mít svůj vlastní název, aby byla filtrovatelná. Následující položky knihovny budou zahrnuty:",
+    "atleastOneLibItem": "Vyberte alespoň jednu položku knihovny, kterou chcete začít",
+    "republishWarning": "Poznámka: některé z vybraných položek jsou označeny jako již zveřejněné/odeslané. Položky byste měli znovu odeslat pouze při aktualizaci existující knihovny nebo podání."
   },
   "publishSuccessDialog": {
     "title": "Knihovna byla odeslána",
-    "content": "",
-    "link": ""
+    "content": "Děkujeme vám {{authorName}}. Vaše knihovna byla odeslána k posouzení. Stav můžete sledovat <link>zde</link>"
   },
   "confirmDialog": {
-    "resetLibrary": "",
-    "removeItemsFromLib": ""
+    "resetLibrary": "Resetovat knihovnu",
+    "removeItemsFromLib": "Odstranit vybrané položky z knihovny"
+  },
+  "imageExportDialog": {
+    "header": "Exportovat obrázek",
+    "label": {
+      "withBackground": "Pozadí",
+      "onlySelected": "Pouze vybrané",
+      "darkMode": "Tmavý režim",
+      "embedScene": "Vložit scénu",
+      "scale": "Měřítko",
+      "padding": "Odsazení"
+    },
+    "tooltip": {
+      "embedScene": "Data scény budou uložena do exportovaného souboru PNG/SVG tak, aby z něj mohla být scéna obnovena.\nZvýší se velikost exportovaného souboru."
+    },
+    "title": {
+      "exportToPng": "Exportovat do PNG",
+      "exportToSvg": "Exportovat do SVG",
+      "copyPngToClipboard": "Kopírovat PNG do schránky"
+    },
+    "button": {
+      "exportToPng": "PNG",
+      "exportToSvg": "SVG",
+      "copyPngToClipboard": "Kopírovat do schránky"
+    }
   },
   "encrypted": {
-    "tooltip": "",
-    "link": ""
+    "tooltip": "Vaše kresby jsou end-to-end šifrované, takže servery Excalidraw je nikdy neuvidí.",
+    "link": "Blog příspěvek na end-to-end šifrování v Excalidraw"
   },
   "stats": {
     "angle": "Úhel",
@@ -412,71 +406,48 @@
     "addedToLibrary": "Přidáno do knihovny",
     "copyStyles": "Styly byly zkopírovány.",
     "copyToClipboard": "Zkopírováno do schránky.",
-    "copyToClipboardAsPng": "",
+    "copyToClipboardAsPng": "{{exportSelection}} zkopírován do schránky jako PNG\n({{exportColorScheme}})",
     "fileSaved": "Soubor byl uložen.",
     "fileSavedToFilename": "Uloženo do {filename}",
     "canvas": "plátno",
     "selection": "výběr",
-    "pasteAsSingleElement": ""
+    "pasteAsSingleElement": "Pomocí {{shortcut}} vložte jako jeden prvek,\nnebo vložte do existujícího textového editoru"
   },
   "colors": {
-    "ffffff": "Bílá",
-    "f8f9fa": "Šedá 0",
-    "f1f3f5": "Šedá 1",
-    "fff5f5": "Červená 0",
-    "fff0f6": "Růžová 0",
-    "f8f0fc": "Vínová 0",
-    "f3f0ff": "Fialová 0",
-    "edf2ff": "Indigová 0",
-    "e7f5ff": "Modrá 0",
-    "e3fafc": "Azurová 0",
-    "e6fcf5": "Modrozelená 0",
-    "ebfbee": "Zelená 0",
-    "f4fce3": "Limetková 0",
-    "fff9db": "Žlutá 0",
-    "fff4e6": "Oranžová 0",
     "transparent": "Průhledná",
-    "ced4da": "Šedá 4",
-    "868e96": "Šedá 6",
-    "fa5252": "Červená 6",
-    "e64980": "Růžová 6",
-    "be4bdb": "Vínová 6",
-    "7950f2": "Fialová 6",
-    "4c6ef5": "Indigová 6",
-    "228be6": "Modrá 6",
-    "15aabf": "Azurová 6",
-    "12b886": "Modrozelená 6",
-    "40c057": "Zelená 6",
-    "82c91e": "Limetková 6",
-    "fab005": "Žlutá 6",
-    "fd7e14": "Oranžová 6",
-    "000000": "Černá",
-    "343a40": "Šedá 8",
-    "495057": "Šedá 7",
-    "c92a2a": "Červená 9",
-    "a61e4d": "Růžová 9",
-    "862e9c": "Vínová 9",
-    "5f3dc4": "Fialová 9",
-    "364fc7": "Indigová 9",
-    "1864ab": "Modrá 9",
-    "0b7285": "Azurová 9",
-    "087f5b": "Modrozelená 9",
-    "2b8a3e": "Zelená 9",
-    "5c940d": "Limetková 9",
-    "e67700": "Žlutá 9",
-    "d9480f": "Oranzova"
+    "black": "Černá",
+    "white": "Bílá",
+    "red": "Červená",
+    "pink": "Růžová",
+    "grape": "Vínová",
+    "violet": "Fialová",
+    "gray": "Šedá",
+    "blue": "Modrá",
+    "cyan": "Azurová",
+    "teal": "Modrozelená",
+    "green": "Zelená",
+    "yellow": "Žlutá",
+    "orange": "Oranžová",
+    "bronze": "Bronzová"
   },
   "welcomeScreen": {
     "app": {
-      "center_heading": "",
-      "center_heading_plus": "",
-      "menuHint": ""
+      "center_heading": "Všechna vaše data jsou uložena lokálně ve vašem prohlížeči.",
+      "center_heading_plus": "Chcete místo toho přejít na Excalidraw+?",
+      "menuHint": "Export, nastavení, jazyky, ..."
     },
     "defaults": {
-      "menuHint": "",
-      "center_heading": "",
-      "toolbarHint": "",
-      "helpHint": ""
+      "menuHint": "Export, nastavení a další...",
+      "center_heading": "Diagramy. Vytvořeny. Jednoduše.",
+      "toolbarHint": "Vyberte nástroj a začněte kreslit!",
+      "helpHint": "Zkratky a pomoc"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "Nejpoužívanější vlastní barvy",
+    "colors": "Barvy",
+    "shades": "Stíny",
+    "hexCode": "Hex kód",
+    "noShades": "Pro tuto barvu nejsou k dispozici žádné odstíny"
   }
 }
diff --git a/src/locales/da-DK.json b/src/locales/da-DK.json
index c8b5ad6e3..dd2b8c3fa 100644
--- a/src/locales/da-DK.json
+++ b/src/locales/da-DK.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Trekant",
     "fontSize": "Skriftstørrelse",
     "fontFamily": "Skrifttypefamilie",
-    "onlySelected": "Kun valgte",
-    "withBackground": "Baggrund",
-    "exportEmbedScene": "Indlejr scene",
-    "exportEmbedScene_details": "Scene data vil blive gemt i den eksporterede PNG/SVG-fil, så scenen kan gendannes fra den.\nDette vil øge den eksporterede filstørrelse.",
     "addWatermark": "Tilføj \"Lavet med Excalidraw\"",
     "handDrawn": "Hånd-tegnet",
     "normal": "Normal",
@@ -54,6 +50,7 @@
     "veryLarge": "Meget stor",
     "solid": "Solid",
     "hachure": "Skravering",
+    "zigzag": "",
     "crossHatch": "Krydsskravering",
     "thin": "Tynd",
     "bold": "Fed",
@@ -99,7 +96,6 @@
     "flipHorizontal": "",
     "flipVertical": "",
     "viewMode": "",
-    "toggleExportColorScheme": "",
     "share": "Del",
     "showStroke": "",
     "showBackground": "",
@@ -127,7 +123,10 @@
       "unlockAll": ""
     },
     "statusPublished": "",
-    "sidebarLock": ""
+    "sidebarLock": "",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "",
@@ -139,11 +138,7 @@
     "exportJSON": "",
     "exportImage": "",
     "export": "",
-    "exportToPng": "",
-    "exportToSvg": "",
     "copyToClipboard": "Kopier til klippebord",
-    "copyPngToClipboard": "Kopier PNG til klippebord",
-    "scale": "",
     "save": "",
     "saveAs": "Gem som",
     "load": "",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "",
     "collabSaveFailed_sizeExceeded": "",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "",
     "link": "",
     "eraser": "",
-    "hand": ""
+    "frame": "",
+    "hand": "",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": ""
   },
   "errorSplash": {
-    "headingMain_pre": "",
-    "headingMain_button": "",
+    "headingMain": "",
     "clearCanvasMessage": "",
-    "clearCanvasMessage_button": "",
     "clearCanvasCaveat": "",
-    "trackedToSentry_pre": "",
-    "trackedToSentry_post": "",
-    "openIssueMessage_pre": "",
-    "openIssueMessage_button": "",
-    "openIssueMessage_post": " Kopiere og indsæt venligst oplysningerne nedenfor i et GitHub problem.",
+    "trackedToSentry": "",
+    "openIssueMessage": "<button></button> Kopiere og indsæt venligst oplysningerne nedenfor i et GitHub problem.",
     "sceneContent": "Scene indhold:"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "",
       "website": ""
     },
-    "noteDescription": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
-    "noteGuidelines": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
-    "noteLicense": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
+    "noteDescription": "",
+    "noteGuidelines": "",
+    "noteLicense": "",
     "noteItems": "",
     "atleastOneLibItem": "",
     "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "",
-    "content": "",
-    "link": ""
+    "content": ""
   },
   "confirmDialog": {
     "resetLibrary": "",
     "removeItemsFromLib": ""
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "",
     "link": ""
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": ""
   },
   "colors": {
-    "ffffff": "",
-    "f8f9fa": "",
-    "f1f3f5": "",
-    "fff5f5": "",
-    "fff0f6": "",
-    "f8f0fc": "",
-    "f3f0ff": "",
-    "edf2ff": "",
-    "e7f5ff": "",
-    "e3fafc": "",
-    "e6fcf5": "",
-    "ebfbee": "",
-    "f4fce3": "",
-    "fff9db": "",
-    "fff4e6": "",
     "transparent": "",
-    "ced4da": "",
-    "868e96": "",
-    "fa5252": "",
-    "e64980": "",
-    "be4bdb": "",
-    "7950f2": "",
-    "4c6ef5": "",
-    "228be6": "",
-    "15aabf": "",
-    "12b886": "",
-    "40c057": "",
-    "82c91e": "",
-    "fab005": "",
-    "fd7e14": "",
-    "000000": "",
-    "343a40": "",
-    "495057": "",
-    "c92a2a": "",
-    "a61e4d": "",
-    "862e9c": "",
-    "5f3dc4": "",
-    "364fc7": "",
-    "1864ab": "",
-    "0b7285": "",
-    "087f5b": "",
-    "2b8a3e": "",
-    "5c940d": "",
-    "e67700": "",
-    "d9480f": ""
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "",
       "helpHint": ""
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/de-DE.json b/src/locales/de-DE.json
index bdf30a371..81fe54dd1 100644
--- a/src/locales/de-DE.json
+++ b/src/locales/de-DE.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Dreieck",
     "fontSize": "Schriftgröße",
     "fontFamily": "Schriftfamilie",
-    "onlySelected": "Nur ausgewählte",
-    "withBackground": "Hintergrund",
-    "exportEmbedScene": "Szene einbetten",
-    "exportEmbedScene_details": "Die Zeichnungsdaten werden in der exportierten PNG/SVG-Datei gespeichert, sodass das Dokument später weiter bearbeitet werden kann. \nDieses wird die exportierte Datei vergrößern.",
     "addWatermark": "\"Made with Excalidraw\" hinzufügen",
     "handDrawn": "Handgezeichnet",
     "normal": "Normal",
@@ -54,6 +50,7 @@
     "veryLarge": "Sehr groß",
     "solid": "Deckend",
     "hachure": "Schraffiert",
+    "zigzag": "Zickzack",
     "crossHatch": "Kreuzschraffiert",
     "thin": "Dünn",
     "bold": "Fett",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Horizontal spiegeln",
     "flipVertical": "Vertikal spiegeln",
     "viewMode": "Ansichtsmodus",
-    "toggleExportColorScheme": "Farbschema für Export umschalten",
     "share": "Teilen",
     "showStroke": "Auswahl für Strichfarbe anzeigen",
     "showBackground": "Hintergrundfarbe auswählen",
@@ -127,7 +123,10 @@
       "unlockAll": "Alle entsperren"
     },
     "statusPublished": "Veröffentlicht",
-    "sidebarLock": "Seitenleiste offen lassen"
+    "sidebarLock": "Seitenleiste offen lassen",
+    "selectAllElementsInFrame": "Alle Elemente im Rahmen auswählen",
+    "removeAllElementsFromFrame": "Alle Elemente aus dem Rahmen entfernen",
+    "eyeDropper": "Farbe von der Zeichenfläche auswählen"
   },
   "library": {
     "noItems": "Noch keine Elemente hinzugefügt...",
@@ -139,11 +138,7 @@
     "exportJSON": "In Datei exportieren",
     "exportImage": "Exportiere Bild...",
     "export": "Speichern als...",
-    "exportToPng": "Als PNG exportieren",
-    "exportToSvg": "Als SVG exportieren",
     "copyToClipboard": "In Zwischenablage kopieren",
-    "copyPngToClipboard": "PNG in die Zwischenablage kopieren",
-    "scale": "Skalierung",
     "save": "In aktueller Datei speichern",
     "saveAs": "Speichern unter",
     "load": "Öffnen",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Keine Speicherung in der Backend-Datenbank möglich. Wenn die Probleme weiterhin bestehen, solltest Du Deine Datei lokal speichern, um sicherzustellen, dass Du Deine Arbeit nicht verlierst.",
     "collabSaveFailed_sizeExceeded": "Keine Speicherung in der Backend-Datenbank möglich, die Zeichenfläche scheint zu groß zu sein. Du solltest Deine Datei lokal speichern, um sicherzustellen, dass Du Deine Arbeit nicht verlierst.",
     "brave_measure_text_error": {
-      "start": "Sieht so aus, als ob du den Brave Browser benutzt mit der",
-      "aggressive_block_fingerprint": "\"Fingerprinting aggressiv blockieren\"",
-      "setting_enabled": "Einstellung aktiviert",
-      "break": "Dies könnte zur inkorrekten Darstellung der",
-      "text_elements": "Textelemente",
-      "in_your_drawings": "in deinen Zeichnungen führen",
-      "strongly_recommend": "Wir empfehlen dringend, diese Einstellung zu deaktivieren. Du kannst",
-      "steps": "diesen Schritten entsprechend",
-      "how": "folgen",
-      "disable_setting": " Wenn die Deaktivierung dieser Einstellung nicht zu einer korrekten Textdarstellung führt, öffne bitte einen",
-      "issue": "Issue",
-      "write": "auf GitHub, oder schreibe uns auf",
-      "discord": "Discord"
+      "line1": "Sieht so aus, als ob Du den Brave-Browser verwendest und die <bold>aggressive Blockierung von Fingerabdrücken</bold> aktiviert hast.",
+      "line2": "Dies könnte dazu führen, dass die <bold>Textelemente</bold> in Ihren Zeichnungen zerstört werden.",
+      "line3": "Wir empfehlen dringend, diese Einstellung zu deaktivieren. Dazu kannst Du <link>diesen Schritten</link> folgen.",
+      "line4": "Wenn die Deaktivierung dieser Einstellung die fehlerhafte Anzeige von Textelementen nicht behebt, öffne bitte ein <issueLink>Ticket</issueLink> auf unserem GitHub oder schreibe uns auf <discordLink>Discord</discordLink>"
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Stift-Modus - Berührung verhindern",
     "link": "Link für ausgewählte Form hinzufügen / aktualisieren",
     "eraser": "Radierer",
-    "hand": "Hand (Schwenkwerkzeug)"
+    "frame": "Rahmenwerkzeug",
+    "hand": "Hand (Schwenkwerkzeug)",
+    "extraTools": "Weitere Werkzeuge"
   },
   "headings": {
     "canvasActions": "Aktionen für Zeichenfläche",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Tipp: Schiebe die am weitesten entfernten Elemente ein wenig näher zusammen."
   },
   "errorSplash": {
-    "headingMain_pre": "Es ist ein Fehler aufgetreten. Versuche ",
-    "headingMain_button": "die Seite neu zu laden.",
-    "clearCanvasMessage": "Wenn das Neuladen nicht funktioniert, versuche ",
-    "clearCanvasMessage_button": "die Zeichenfläche zu löschen.",
+    "headingMain": "Es ist ein Fehler aufgetreten. Versuche <button>die Seite neu zu laden.</button>",
+    "clearCanvasMessage": "Wenn das Neuladen nicht funktioniert, versuche <button>die Zeichenfläche zu löschen.</button>",
     "clearCanvasCaveat": " Dies wird zum Verlust von Daten führen ",
-    "trackedToSentry_pre": "Der Fehler mit der Kennung ",
-    "trackedToSentry_post": " wurde in unserem System registriert.",
-    "openIssueMessage_pre": "Wir waren sehr vorsichtig und haben deine Zeichnungsinformationen nicht in die Fehlerinformationen aufgenommen. Wenn deine Zeichnung nicht privat ist, unterstütze uns bitte über unseren ",
-    "openIssueMessage_button": "Bug-Tracker.",
-    "openIssueMessage_post": " Bitte teile die unten stehenden Informationen mit uns im GitHub Issue (Kopieren und Einfügen).",
+    "trackedToSentry": "Der Fehler mit der Kennung {{eventId}} wurde in unserem System registriert.",
+    "openIssueMessage": "Wir waren sehr vorsichtig und haben deine Zeichnungsinformationen nicht in die Fehlerinformationen aufgenommen. Wenn deine Zeichnung nicht privat ist, unterstütze uns bitte über unseren <button>Bug-Tracker</button>. Bitte teile die unten stehenden Informationen mit uns im GitHub Issue (Kopieren und Einfügen).",
     "sceneContent": "Zeichnungsinhalt:"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "Erforderlich",
       "website": "Gültige URL eingeben"
     },
-    "noteDescription": {
-      "pre": "Sende deine Bibliothek ein, um in die ",
-      "link": "öffentliche Bibliotheks-Repository aufgenommen zu werden",
-      "post": "damit andere Nutzer sie in ihren Zeichnungen verwenden können."
-    },
-    "noteGuidelines": {
-      "pre": "Die Bibliothek muss zuerst manuell freigegeben werden. Bitte lies die ",
-      "link": "Richtlinien",
-      "post": " vor dem Absenden. Du benötigst ein GitHub-Konto, um zu kommunizieren und Änderungen vorzunehmen, falls erforderlich, aber es ist nicht unbedingt erforderlich."
-    },
-    "noteLicense": {
-      "pre": "Mit dem Absenden stimmst du zu, dass die Bibliothek unter der ",
-      "link": "MIT-Lizenz, ",
-      "post": "die zusammengefasst beinhaltet, dass jeder sie ohne Einschränkungen nutzen kann."
-    },
+    "noteDescription": "Sende deine Bibliothek ein, um in die <link>öffentliche Bibliotheks-Repository aufgenommen zu werden</link>damit andere Nutzer sie in ihren Zeichnungen verwenden können.",
+    "noteGuidelines": "Die Bibliothek muss zuerst manuell freigegeben werden. Bitte lies die <link>Richtlinien</link> vor dem Absenden. Du benötigst ein GitHub-Konto, um zu kommunizieren und Änderungen vorzunehmen, falls erforderlich, aber es ist nicht unbedingt erforderlich.",
+    "noteLicense": "Mit dem Absenden stimmst du zu, dass die Bibliothek unter der <link>MIT-Lizenz, </link>die zusammengefasst beinhaltet, dass jeder sie ohne Einschränkungen nutzen kann.",
     "noteItems": "Jedes Bibliothekselement muss einen eigenen Namen haben, damit es gefiltert werden kann. Die folgenden Bibliothekselemente werden hinzugefügt:",
     "atleastOneLibItem": "Bitte wähle mindestens ein Bibliothekselement aus, um zu beginnen",
     "republishWarning": "Hinweis: Einige der ausgewählten Elemente sind bereits als veröffentlicht/eingereicht markiert. Du solltest Elemente nur erneut einreichen, wenn Du eine existierende Bibliothek oder Einreichung aktualisierst."
   },
   "publishSuccessDialog": {
     "title": "Bibliothek übermittelt",
-    "content": "Vielen Dank {{authorName}}. Deine Bibliothek wurde zur Überprüfung eingereicht. Du kannst den Status verfolgen",
-    "link": "hier"
+    "content": "Vielen Dank {{authorName}}. Deine Bibliothek wurde zur Überprüfung eingereicht. Du kannst den Status verfolgen<link>hier</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Bibliothek zurücksetzen",
     "removeItemsFromLib": "Ausgewählte Elemente aus der Bibliothek entfernen"
   },
+  "imageExportDialog": {
+    "header": "Bild exportieren",
+    "label": {
+      "withBackground": "Hintergrund",
+      "onlySelected": "Nur ausgewählte",
+      "darkMode": "Dunkler Modus",
+      "embedScene": "Szene einbetten",
+      "scale": "Skalierung",
+      "padding": "Abstand"
+    },
+    "tooltip": {
+      "embedScene": "Die Zeichnungsdaten werden in der exportierten PNG/SVG-Datei gespeichert, sodass das Dokument später weiter bearbeitet werden kann. \nDieses wird die exportierte Datei vergrößern."
+    },
+    "title": {
+      "exportToPng": "Als PNG exportieren",
+      "exportToSvg": "Als SVG exportieren",
+      "copyPngToClipboard": "PNG in die Zwischenablage kopieren"
+    },
+    "button": {
+      "exportToPng": "PNG",
+      "exportToSvg": "SVG",
+      "copyPngToClipboard": "In Zwischenablage kopieren"
+    }
+  },
   "encrypted": {
     "tooltip": "Da deine Zeichnungen Ende-zu-Ende verschlüsselt werden, sehen auch unsere Excalidraw-Server sie niemals.",
     "link": "Blogbeitrag über Ende-zu-Ende-Verschlüsselung in Excalidraw"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "Verwende {{shortcut}} , um als einzelnes Element\neinzufügen oder in einen existierenden Texteditor einzufügen"
   },
   "colors": {
-    "ffffff": "Weiß",
-    "f8f9fa": "Grau 0",
-    "f1f3f5": "Grau 1",
-    "fff5f5": "Rot 0",
-    "fff0f6": "Pink 0",
-    "f8f0fc": "Traube 0",
-    "f3f0ff": "Violett 0",
-    "edf2ff": "Indigo 0",
-    "e7f5ff": "Blau 0",
-    "e3fafc": "Cyan 0",
-    "e6fcf5": "Teal 0",
-    "ebfbee": "Grün 0",
-    "f4fce3": "Hellgrün 0",
-    "fff9db": "Gelb 0",
-    "fff4e6": "Orange 0",
     "transparent": "Transparent",
-    "ced4da": "Grau 4",
-    "868e96": "Grau 6",
-    "fa5252": "Rot 6",
-    "e64980": "Pink 6",
-    "be4bdb": "Traube 6",
-    "7950f2": "Violett 6",
-    "4c6ef5": "Indigo 6",
-    "228be6": "Blau 6",
-    "15aabf": "Cyan 6",
-    "12b886": "Teal 6",
-    "40c057": "Grün 6",
-    "82c91e": "Hellgrün 6",
-    "fab005": "Gelb 6",
-    "fd7e14": "Orange 6",
-    "000000": "Schwarz",
-    "343a40": "Grau 8",
-    "495057": "Grau 7",
-    "c92a2a": "Rot 9",
-    "a61e4d": "Pink 9",
-    "862e9c": "Traube 9",
-    "5f3dc4": "Violett 9",
-    "364fc7": "Indigo 9",
-    "1864ab": "Blau 9",
-    "0b7285": "Cyan 9",
-    "087f5b": "Teal 9",
-    "2b8a3e": "Grün 9",
-    "5c940d": "Hellgrün 9",
-    "e67700": "Gelb 9",
-    "d9480f": "Orange 9"
+    "black": "Schwarz",
+    "white": "Weiß",
+    "red": "Rot",
+    "pink": "Pink",
+    "grape": "Traube",
+    "violet": "Violett",
+    "gray": "Grau",
+    "blue": "Blau",
+    "cyan": "Cyan",
+    "teal": "Blaugrün",
+    "green": "Grün",
+    "yellow": "Gelb",
+    "orange": "Orange",
+    "bronze": "Bronze"
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "Wähle ein Werkzeug & beginne zu zeichnen!",
       "helpHint": "Kurzbefehle & Hilfe"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "Beliebteste benutzerdefinierte Farben",
+    "colors": "Farben",
+    "shades": "Schattierungen",
+    "hexCode": "Hex-Code",
+    "noShades": "Keine Schattierungen für diese Farbe verfügbar"
   }
 }
diff --git a/src/locales/el-GR.json b/src/locales/el-GR.json
index 888c39568..ce52d8281 100644
--- a/src/locales/el-GR.json
+++ b/src/locales/el-GR.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Τρίγωνο",
     "fontSize": "Μέγεθος γραμματοσειράς",
     "fontFamily": "Γραμματοσειρά",
-    "onlySelected": "Μόνο τα Επιλεγμένα",
-    "withBackground": "Φόντο",
-    "exportEmbedScene": "Ενσωμάτωση σκηνής",
-    "exportEmbedScene_details": "Τα δεδομένα σκηνής θα αποθηκευτούν στο αρχείο PNG/SVG προς εξαγωγή ώστε η σκηνή να είναι δυνατό να αποκατασταθεί από αυτό.\nΘα αυξήσει το μέγεθος του αρχείου προς εξαγωγή.",
     "addWatermark": "Προσθήκη \"Φτιαγμένο με Excalidraw\"",
     "handDrawn": "Σχεδιασμένο στο χέρι",
     "normal": "Κανονική",
@@ -54,6 +50,7 @@
     "veryLarge": "Πολύ μεγάλο",
     "solid": "Συμπαγής",
     "hachure": "Εκκόλαψη",
+    "zigzag": "",
     "crossHatch": "Διασταυρούμενη εκκόλαψη",
     "thin": "Λεπτή",
     "bold": "Έντονη",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Οριζόντια αναστροφή",
     "flipVertical": "Κατακόρυφη αναστροφή",
     "viewMode": "Λειτουργία προβολής",
-    "toggleExportColorScheme": "Εναλλαγή εξαγωγής θέματος χρωμάτων",
     "share": "Κοινοποίηση",
     "showStroke": "Εμφάνιση επιλογέα χρωμάτων πινελιάς",
     "showBackground": "Εμφάνιση επιλογέα χρώματος φόντου",
@@ -127,7 +123,10 @@
       "unlockAll": "Ξεκλείδωμα όλων"
     },
     "statusPublished": "Δημοσιευμένο",
-    "sidebarLock": "Κρατήστε την πλαϊνή μπάρα ανοιχτή"
+    "sidebarLock": "Κρατήστε την πλαϊνή μπάρα ανοιχτή",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "Δεν έχουν προστεθεί αντικείμενα ακόμη...",
@@ -139,11 +138,7 @@
     "exportJSON": "Εξαγωγή σε αρχείο",
     "exportImage": "Εξαγωγή εικόνας...",
     "export": "Αποθήκευση ως...",
-    "exportToPng": "Εξαγωγή σε PNG",
-    "exportToSvg": "Εξαγωγή σε SVG",
     "copyToClipboard": "Αντιγραφή στο πρόχειρο",
-    "copyPngToClipboard": "Αντιγραφή PNG στο πρόχειρο",
-    "scale": "Κλίμακα",
     "save": "Αποθήκευση στο τρέχον αρχείο",
     "saveAs": "Αποθήκευση ως",
     "load": "Άνοιγμα",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Η αποθήκευση στη βάση δεδομένων δεν ήταν δυνατή. Αν το προβλήματα παραμείνει, θα πρέπει να αποθηκεύσετε το αρχείο σας τοπικά για να βεβαιωθείτε ότι δεν χάνετε την εργασία σας.",
     "collabSaveFailed_sizeExceeded": "Η αποθήκευση στη βάση δεδομένων δεν ήταν δυνατή, ο καμβάς φαίνεται να είναι πολύ μεγάλος. Θα πρέπει να αποθηκεύσετε το αρχείο τοπικά για να βεβαιωθείτε ότι δεν θα χάσετε την εργασία σας.",
     "brave_measure_text_error": {
-      "start": "Φαίνεται ότι χρησιμοποιείτε το Brave browser με το",
-      "aggressive_block_fingerprint": "Αποκλεισμός \"Δακτυλικών Αποτυπωμάτων\"",
-      "setting_enabled": "ρύθμιση ενεργοποιημένη",
-      "break": "Αυτό θα μπορούσε να σπάσει το",
-      "text_elements": "Στοιχεία Κειμένου",
-      "in_your_drawings": "στα σχέδιά σας",
-      "strongly_recommend": "Συνιστούμε να απενεργοποιήσετε αυτή τη ρύθμιση. Μπορείτε να ακολουθήσετε",
-      "steps": "αυτά τα βήματα",
-      "how": "για το πώς να το κάνετε",
-      "disable_setting": " Εάν η απενεργοποίηση αυτής της ρύθμισης δεν διορθώνει την εμφάνιση των στοιχείων κειμένου, παρακαλώ ανοίξτε ένα",
-      "issue": "πρόβλημα",
-      "write": "στο GitHub, ή γράψτε μας στο",
-      "discord": "Discord"
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Λειτουργία μολυβιού - αποτροπή αφής",
     "link": "Προσθήκη/ Ενημέρωση συνδέσμου για ένα επιλεγμένο σχήμα",
     "eraser": "Γόμα",
-    "hand": ""
+    "frame": "",
+    "hand": "",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Ενέργειες καμβά",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Συμβουλή: προσπαθήστε να μετακινήσετε τα πιο απομακρυσμένα στοιχεία λίγο πιο κοντά μαζί."
   },
   "errorSplash": {
-    "headingMain_pre": "Συνέβη κάποιο σφάλμα. Προσπάθησε ",
-    "headingMain_button": "φόρτωσε ξανά την σελίδα.",
-    "clearCanvasMessage": "Εάν το παραπάνω δεν δουλέψει, προσπάθησε ",
-    "clearCanvasMessage_button": "καθαρίσετε τον κανβά.",
+    "headingMain": "Συνέβη κάποιο σφάλμα. Προσπάθησε <button>φόρτωσε ξανά την σελίδα.</button>",
+    "clearCanvasMessage": "Εάν το παραπάνω δεν δουλέψει, προσπάθησε <button>καθαρίσετε τον κανβά.</button>",
     "clearCanvasCaveat": " Αυτό θα προκαλέσει απώλεια της δουλειάς σου ",
-    "trackedToSentry_pre": "Το σφάλμα με αναγνωριστικό ",
-    "trackedToSentry_post": " παρακολουθήθηκε στο σύστημά μας.",
-    "openIssueMessage_pre": "Ήμασταν πολύ προσεκτικοί για να μην συμπεριλάβουμε τις πληροφορίες της σκηνής σου στο σφάλμα. Αν η σκηνή σου δεν είναι ιδιωτική, παρακαλώ σκέψου να ακολουθήσεις το δικό μας ",
-    "openIssueMessage_button": "ανιχνευτής σφαλμάτων.",
-    "openIssueMessage_post": " Παρακαλώ να συμπεριλάβετε τις παρακάτω πληροφορίες, αντιγράφοντας και επικολλώντας το ζήτημα στο GitHub.",
+    "trackedToSentry": "Το σφάλμα με αναγνωριστικό {{eventId}} παρακολουθήθηκε στο σύστημά μας.",
+    "openIssueMessage": "Ήμασταν πολύ προσεκτικοί για να μην συμπεριλάβουμε τις πληροφορίες της σκηνής σου στο σφάλμα. Αν η σκηνή σου δεν είναι ιδιωτική, παρακαλώ σκέψου να ακολουθήσεις το δικό μας <button>ανιχνευτής σφαλμάτων.</button> Παρακαλώ να συμπεριλάβετε τις παρακάτω πληροφορίες, αντιγράφοντας και επικολλώντας το ζήτημα στο GitHub.",
     "sceneContent": "Περιεχόμενο σκηνής:"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "Απαιτείται",
       "website": "Εισάγετε μια έγκυρη διεύθυνση URL"
     },
-    "noteDescription": {
-      "pre": "Υποβάλετε τη βιβλιοθήκη σας για να συμπεριληφθεί στο ",
-      "link": "δημόσιο αποθετήριο βιβλιοθήκης",
-      "post": "ώστε να χρησιμοποιηθεί από άλλα άτομα στα σχέδιά τους."
-    },
-    "noteGuidelines": {
-      "pre": "Η βιβλιοθήκη πρέπει πρώτα να εγκριθεί χειροκίνητα. Παρακαλώ διαβάστε τους ",
-      "link": "οδηγίες",
-      "post": " πριν την υποβολή. Θα χρειαστείτε έναν λογαριασμό GitHub για την επικοινωνία και για να προβείτε σε αλλαγές εφ' όσον χρειαστεί, αλλά δεν είναι αυστηρή απαίτηση."
-    },
-    "noteLicense": {
-      "pre": "Με την υποβολή, συμφωνείτε ότι η βιβλιοθήκη θα δημοσιευθεί υπό την ",
-      "link": "Άδεια MIT, ",
-      "post": "που εν συντομία σημαίνει ότι ο καθένας μπορεί να τα χρησιμοποιήσει χωρίς περιορισμούς."
-    },
+    "noteDescription": "Υποβάλετε τη βιβλιοθήκη σας για να συμπεριληφθεί στο <link>δημόσιο αποθετήριο βιβλιοθήκης</link>ώστε να χρησιμοποιηθεί από άλλα άτομα στα σχέδιά τους.",
+    "noteGuidelines": "Η βιβλιοθήκη πρέπει πρώτα να εγκριθεί χειροκίνητα. Παρακαλώ διαβάστε τους <link>οδηγίες</link> πριν την υποβολή. Θα χρειαστείτε έναν λογαριασμό GitHub για την επικοινωνία και για να προβείτε σε αλλαγές εφ' όσον χρειαστεί, αλλά δεν είναι αυστηρή απαίτηση.",
+    "noteLicense": "Με την υποβολή, συμφωνείτε ότι η βιβλιοθήκη θα δημοσιευθεί υπό την <link>Άδεια MIT, </link>που εν συντομία σημαίνει ότι ο καθένας μπορεί να τα χρησιμοποιήσει χωρίς περιορισμούς.",
     "noteItems": "Κάθε αντικείμενο της βιβλιοθήκης πρέπει να έχει το δικό του όνομα ώστε να μπορεί να φιλτραριστεί. Θα συμπεριληφθούν τα ακόλουθα αντικείμενα βιβλιοθήκης:",
     "atleastOneLibItem": "Παρακαλώ επιλέξτε τουλάχιστον ένα αντικείμενο βιβλιοθήκης για να ξεκινήσετε",
     "republishWarning": "Σημείωση: μερικά από τα επιλεγμένα αντικέιμενα έχουν ήδη επισημανθεί ως δημοσιευμένα/υποβεβλημένα. Θα πρέπει να υποβάλετε αντικείμενα εκ νέου μόνο για να ενημερώσετε μία ήδη υπάρχουσα βιβλιοθήκη ή υποβολή."
   },
   "publishSuccessDialog": {
     "title": "Η βιβλιοθήκη υποβλήθηκε",
-    "content": "Ευχαριστούμε {{authorName}}. Η βιβλιοθήκη σας έχει υποβληθεί για αξιολόγηση. Μπορείτε να παρακολουθείτε τη διαδικασία",
-    "link": "εδώ"
+    "content": "Ευχαριστούμε {{authorName}}. Η βιβλιοθήκη σας έχει υποβληθεί για αξιολόγηση. Μπορείτε να παρακολουθείτε τη διαδικασία<link>εδώ</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Καθαρισμός βιβλιοθήκης",
     "removeItemsFromLib": "Αφαίρεση επιλεγμένων αντικειμένων από τη βιβλιοθήκη"
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "Τα σχέδιά σου είναι κρυπτογραφημένα από άκρο σε άκρο, έτσι δεν θα είναι ποτέ ορατά μέσα από τους διακομιστές του Excalidraw.",
     "link": "Blog post στην κρυπτογράφηση end-to-end στο Excalidraw"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "Χρησιμοποίησε το {{shortcut}} για να επικολλήσεις ως ένα μόνο στοιχείο,\nή να επικολλήσεις σε έναν υπάρχοντα επεξεργαστή κειμένου"
   },
   "colors": {
-    "ffffff": "Λευκό",
-    "f8f9fa": "Γκρι 0",
-    "f1f3f5": "Γκρι 1",
-    "fff5f5": "Κόκκινο 0",
-    "fff0f6": "Ροζ 0",
-    "f8f0fc": "Σταφυλί 0",
-    "f3f0ff": "Βιολετί 0",
-    "edf2ff": "Λουλάκι 0",
-    "e7f5ff": "Μπλε 0",
-    "e3fafc": "Κυανό 0",
-    "e6fcf5": "Τιρκουάζ 0",
-    "ebfbee": "Πράσινο 0",
-    "f4fce3": "Πρασινοκίτρινο 0",
-    "fff9db": "Κίτρινο 0",
-    "fff4e6": "Πορτοκαλί 0",
     "transparent": "Διαφανές",
-    "ced4da": "Γκρι 4",
-    "868e96": "Γκρι 6",
-    "fa5252": "Κόκκινο 6",
-    "e64980": "Ροζ 6",
-    "be4bdb": "Σταφυλί 6",
-    "7950f2": "Βιολετί 6",
-    "4c6ef5": "Λουλάκι 6",
-    "228be6": "Μπλε 6",
-    "15aabf": "Κυανό 6",
-    "12b886": "Τιρκουάζ 6",
-    "40c057": "Πράσινο 6",
-    "82c91e": "Πρασινοκίτρινο 6",
-    "fab005": "Κίτρινο 6",
-    "fd7e14": "Πορτοκαλί 6",
-    "000000": "Μαύρο",
-    "343a40": "Γκρι 8",
-    "495057": "Γκρι 7",
-    "c92a2a": "Κόκκινο 9",
-    "a61e4d": "Ροζ 9",
-    "862e9c": "Σταφυλί 9",
-    "5f3dc4": "Βιολετί 9",
-    "364fc7": "Λουλάκι 9",
-    "1864ab": "Μπλε 9",
-    "0b7285": "Κυανό 9",
-    "087f5b": "Τιρκουάζ 9",
-    "2b8a3e": "Πράσινο 9",
-    "5c940d": "Πρασινοκίτρινο 9",
-    "e67700": "Κίτρινο 9",
-    "d9480f": "Πορτοκαλί 9"
+    "black": "Μαύρο",
+    "white": "Λευκό",
+    "red": "Κόκκινο",
+    "pink": "Ροζ",
+    "grape": "Σταφυλί",
+    "violet": "Βιολετί",
+    "gray": "Γκρι",
+    "blue": "Μπλε",
+    "cyan": "Κυανό",
+    "teal": "Τιρκουάζ",
+    "green": "Πράσινο",
+    "yellow": "Κίτρινο",
+    "orange": "Πορτοκαλί",
+    "bronze": "Χαλκινο"
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "Επιλέξτε ένα εργαλείο και ξεκινήστε να σχεδιάζεται!",
       "helpHint": "Συντομεύσεις και βοήθεια"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "Πιο χρησιμοποιούμενα χρώματα",
+    "colors": "Χρώματα",
+    "shades": "Αποχρώσεις",
+    "hexCode": "Κωδικός Hex",
+    "noShades": "Δεν υπάρχουν διαθέσιμες αποχρώσεις για αυτό το χρώμα"
   }
 }
diff --git a/src/locales/en.json b/src/locales/en.json
index 8752d415a..7092e9be8 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Triangle",
     "fontSize": "Font size",
     "fontFamily": "Font family",
-    "onlySelected": "Only selected",
-    "withBackground": "Background",
-    "exportEmbedScene": "Embed scene",
-    "exportEmbedScene_details": "Scene data will be saved into the exported PNG/SVG file so that the scene can be restored from it.\nWill increase exported file size.",
     "addWatermark": "Add \"Made with Excalidraw\"",
     "handDrawn": "Hand-drawn",
     "normal": "Normal",
@@ -54,6 +50,7 @@
     "veryLarge": "Very large",
     "solid": "Solid",
     "hachure": "Hachure",
+    "zigzag": "Zigzag",
     "crossHatch": "Cross-hatch",
     "thin": "Thin",
     "bold": "Bold",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Flip horizontal",
     "flipVertical": "Flip vertical",
     "viewMode": "View mode",
-    "toggleExportColorScheme": "Toggle export color scheme",
     "share": "Share",
     "showStroke": "Show stroke color picker",
     "showBackground": "Show background color picker",
@@ -127,7 +123,10 @@
       "unlockAll": "Unlock all"
     },
     "statusPublished": "Published",
-    "sidebarLock": "Keep sidebar open"
+    "sidebarLock": "Keep sidebar open",
+    "selectAllElementsInFrame": "Select all elements in frame",
+    "removeAllElementsFromFrame": "Remove all elements from frame",
+    "eyeDropper": "Pick color from canvas"
   },
   "library": {
     "noItems": "No items added yet...",
@@ -139,11 +138,7 @@
     "exportJSON": "Export to file",
     "exportImage": "Export image...",
     "export": "Save to...",
-    "exportToPng": "Export to PNG",
-    "exportToSvg": "Export to SVG",
     "copyToClipboard": "Copy to clipboard",
-    "copyPngToClipboard": "Copy PNG to clipboard",
-    "scale": "Scale",
     "save": "Save to current file",
     "saveAs": "Save as",
     "load": "Open",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Couldn't save to the backend database. If problems persist, you should save your file locally to ensure you don't lose your work.",
     "collabSaveFailed_sizeExceeded": "Couldn't save to the backend database, the canvas seems to be too big. You should save the file locally to ensure you don't lose your work.",
     "brave_measure_text_error": {
-      "start": "Looks like you are using Brave browser with the",
-      "aggressive_block_fingerprint": "Aggressively Block Fingerprinting",
-      "setting_enabled": "setting enabled",
-      "break": "This could result in breaking the",
-      "text_elements": "Text Elements",
-      "in_your_drawings": "in your drawings",
-      "strongly_recommend": "We strongly recommend disabling this setting. You can follow",
-      "steps": "these steps",
-      "how": "on how to do so",
-      "disable_setting": " If disabling this setting doesn't fix the display of text elements, please open an",
-      "issue": "issue",
-      "write": "on our GitHub, or write us on",
-      "discord": "Discord"
+      "line1": "Looks like you are using Brave browser with the <bold>Aggressively Block Fingerprinting</bold> setting enabled.",
+      "line2": "This could result in breaking the <bold>Text Elements</bold> in your drawings.",
+      "line3": "We strongly recommend disabling this setting. You can follow <link>these steps</link> on how to do so.",
+      "line4": "If disabling this setting doesn't fix the display of text elements, please open an <issueLink>issue</issueLink> on our GitHub, or write us on <discordLink>Discord</discordLink>"
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Pen mode - prevent touch",
     "link": "Add/ Update link for a selected shape",
     "eraser": "Eraser",
-    "hand": "Hand (panning tool)"
+    "frame": "Frame tool",
+    "hand": "Hand (panning tool)",
+    "extraTools": "More tools"
   },
   "headings": {
     "canvasActions": "Canvas actions",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Tip: try moving the farthest elements a bit closer together."
   },
   "errorSplash": {
-    "headingMain_pre": "Encountered an error. Try ",
-    "headingMain_button": "reloading the page.",
-    "clearCanvasMessage": "If reloading doesn't work, try ",
-    "clearCanvasMessage_button": "clearing the canvas.",
+    "headingMain": "Encountered an error. Try <button>reloading the page</button>.",
+    "clearCanvasMessage": "If reloading doesn't work, try <button>clearing the canvas</button>.",
     "clearCanvasCaveat": " This will result in loss of work ",
-    "trackedToSentry_pre": "The error with identifier ",
-    "trackedToSentry_post": " was tracked on our system.",
-    "openIssueMessage_pre": "We were very cautious not to include your scene information on the error. If your scene is not private, please consider following up on our ",
-    "openIssueMessage_button": "bug tracker.",
-    "openIssueMessage_post": " Please include information below by copying and pasting into the GitHub issue.",
+    "trackedToSentry": "The error with identifier {{eventId}} was tracked on our system.",
+    "openIssueMessage": "We were very cautious not to include your scene information on the error. If your scene is not private, please consider following up on our <button>bug tracker</button>. Please include information below by copying and pasting into the GitHub issue.",
     "sceneContent": "Scene content:"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "Required",
       "website": "Enter a valid URL"
     },
-    "noteDescription": {
-      "pre": "Submit your library to be included in the ",
-      "link": "public library repository",
-      "post": "for other people to use in their drawings."
-    },
-    "noteGuidelines": {
-      "pre": "The library needs to be manually approved first. Please read the ",
-      "link": "guidelines",
-      "post": " before submitting. You will need a GitHub account to communicate and make changes if requested, but it is not strictly required."
-    },
-    "noteLicense": {
-      "pre": "By submitting, you agree the library will be published under the ",
-      "link": "MIT License, ",
-      "post": "which in short means anyone can use them without restrictions."
-    },
+    "noteDescription": "Submit your library to be included in the <link>public library repository</link> for other people to use in their drawings.",
+    "noteGuidelines": "The library needs to be manually approved first. Please read the <link>guidelines</link> before submitting. You will need a GitHub account to communicate and make changes if requested, but it is not strictly required.",
+    "noteLicense": "By submitting, you agree the library will be published under the <link>MIT License</link>, which in short means anyone can use them without restrictions.",
     "noteItems": "Each library item must have its own name so it's filterable. The following library items will be included:",
     "atleastOneLibItem": "Please select at least one library item to get started",
     "republishWarning": "Note: some of the selected items are marked as already published/submitted. You should only resubmit items when updating an existing library or submission."
   },
   "publishSuccessDialog": {
     "title": "Library submitted",
-    "content": "Thank you {{authorName}}. Your library has been submitted for review. You can track the status",
-    "link": "here"
+    "content": "Thank you {{authorName}}. Your library has been submitted for review. You can track the status <link>here</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Reset library",
     "removeItemsFromLib": "Remove selected items from library"
   },
+  "imageExportDialog": {
+    "header": "Export image",
+    "label": {
+      "withBackground": "Background",
+      "onlySelected": "Only selected",
+      "darkMode": "Dark mode",
+      "embedScene": "Embed scene",
+      "scale": "Scale",
+      "padding": "Padding"
+    },
+    "tooltip": {
+      "embedScene": "Scene data will be saved into the exported PNG/SVG file so that the scene can be restored from it.\nWill increase exported file size."
+    },
+    "title": {
+      "exportToPng": "Export to PNG",
+      "exportToSvg": "Export to SVG",
+      "copyPngToClipboard": "Copy PNG to clipboard"
+    },
+    "button": {
+      "exportToPng": "PNG",
+      "exportToSvg": "SVG",
+      "copyPngToClipboard": "Copy to clipboard"
+    }
+  },
   "encrypted": {
     "tooltip": "Your drawings are end-to-end encrypted so Excalidraw's servers will never see them.",
     "link": "Blog post on end-to-end encryption in Excalidraw"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "Use {{shortcut}} to paste as a single element,\nor paste into an existing text editor"
   },
   "colors": {
-    "ffffff": "White",
-    "f8f9fa": "Gray 0",
-    "f1f3f5": "Gray 1",
-    "fff5f5": "Red 0",
-    "fff0f6": "Pink 0",
-    "f8f0fc": "Grape 0",
-    "f3f0ff": "Violet 0",
-    "edf2ff": "Indigo 0",
-    "e7f5ff": "Blue 0",
-    "e3fafc": "Cyan 0",
-    "e6fcf5": "Teal 0",
-    "ebfbee": "Green 0",
-    "f4fce3": "Lime 0",
-    "fff9db": "Yellow 0",
-    "fff4e6": "Orange 0",
     "transparent": "Transparent",
-    "ced4da": "Gray 4",
-    "868e96": "Gray 6",
-    "fa5252": "Red 6",
-    "e64980": "Pink 6",
-    "be4bdb": "Grape 6",
-    "7950f2": "Violet 6",
-    "4c6ef5": "Indigo 6",
-    "228be6": "Blue 6",
-    "15aabf": "Cyan 6",
-    "12b886": "Teal 6",
-    "40c057": "Green 6",
-    "82c91e": "Lime 6",
-    "fab005": "Yellow 6",
-    "fd7e14": "Orange 6",
-    "000000": "Black",
-    "343a40": "Gray 8",
-    "495057": "Gray 7",
-    "c92a2a": "Red 9",
-    "a61e4d": "Pink 9",
-    "862e9c": "Grape 9",
-    "5f3dc4": "Violet 9",
-    "364fc7": "Indigo 9",
-    "1864ab": "Blue 9",
-    "0b7285": "Cyan 9",
-    "087f5b": "Teal 9",
-    "2b8a3e": "Green 9",
-    "5c940d": "Lime 9",
-    "e67700": "Yellow 9",
-    "d9480f": "Orange 9"
+    "black": "Black",
+    "white": "White",
+    "red": "Red",
+    "pink": "Pink",
+    "grape": "Grape",
+    "violet": "Violet",
+    "gray": "Gray",
+    "blue": "Blue",
+    "cyan": "Cyan",
+    "teal": "Teal",
+    "green": "Green",
+    "yellow": "Yellow",
+    "orange": "Orange",
+    "bronze": "Bronze"
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,43 @@
       "toolbarHint": "Pick a tool & Start drawing!",
       "helpHint": "Shortcuts & help"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "Most used custom colors",
+    "colors": "Colors",
+    "shades": "Shades",
+    "hexCode": "Hex code",
+    "noShades": "No shades available for this color"
+  },
+  "overwriteConfirm": {
+    "action": {
+      "exportToImage": {
+        "title": "Export as image",
+        "button": "Export as image",
+        "description": "Export the scene data as an image from which you can import later."
+      },
+      "saveToDisk": {
+        "title": "Save to disk",
+        "button": "Save to disk",
+        "description": "Export the scene data to a file from which you can import later."
+      },
+      "excalidrawPlus": {
+        "title": "Excalidraw+",
+        "button": "Export to Excalidraw+",
+        "description": "Save the scene to your Excalidraw+ workspace."
+      }
+    },
+    "modal": {
+      "loadFromFile": {
+        "title": "Load from file",
+        "button": "Load from file",
+        "description": "Loading from a file will <bold>replace your existing content</bold>.<br></br>You can back up your drawing first using one of the options below."
+      },
+      "shareableLink": {
+        "title": "Load from link",
+        "button": "Replace my content",
+        "description": "Loading external drawing will <bold>replace your existing content</bold>.<br></br>You can back up your drawing first by using one of the options below."
+      }
+    }
   }
 }
diff --git a/src/locales/es-ES.json b/src/locales/es-ES.json
index 67a110293..ae8d30759 100644
--- a/src/locales/es-ES.json
+++ b/src/locales/es-ES.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Triángulo",
     "fontSize": "Tamaño de la fuente",
     "fontFamily": "Tipo de fuente",
-    "onlySelected": "Sólo seleccionados",
-    "withBackground": "Fondo",
-    "exportEmbedScene": "Incrustar escena",
-    "exportEmbedScene_details": "Los datos de escena se guardarán en el archivo PNG/SVG exportado, así la escena puede ser restaurada de la misma.\nEsto aumentará el tamaño del archivo exportado.",
     "addWatermark": "Agregar \"Hecho con Excalidraw\"",
     "handDrawn": "Dibujado a mano",
     "normal": "Normal",
@@ -54,6 +50,7 @@
     "veryLarge": "Muy grande",
     "solid": "Sólido",
     "hachure": "Folleto",
+    "zigzag": "Zigzag",
     "crossHatch": "Rayado transversal",
     "thin": "Fino",
     "bold": "Grueso",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Girar horizontalmente",
     "flipVertical": "Girar verticalmente",
     "viewMode": "Modo presentación",
-    "toggleExportColorScheme": "Alternar el esquema de color de exportación",
     "share": "Compartir",
     "showStroke": "Mostrar selector de color de trazo",
     "showBackground": "Mostrar el selector de color de fondo",
@@ -127,7 +123,10 @@
       "unlockAll": "Desbloquear todo"
     },
     "statusPublished": "Publicado",
-    "sidebarLock": "Mantener barra lateral abierta"
+    "sidebarLock": "Mantener barra lateral abierta",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "No hay elementos añadidos todavía...",
@@ -139,11 +138,7 @@
     "exportJSON": "Exportar a archivo",
     "exportImage": "Exportar imagen...",
     "export": "Guardar en...",
-    "exportToPng": "Exportar a PNG",
-    "exportToSvg": "Exportar a SVG",
     "copyToClipboard": "Copiar al portapapeles",
-    "copyPngToClipboard": "Copiar PNG al portapapeles",
-    "scale": "Escalar",
     "save": "Guardar en archivo actual",
     "saveAs": "Guardar como",
     "load": "Abrir",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "No se pudo guardar en la base de datos del backend. Si los problemas persisten, debería guardar su archivo localmente para asegurarse de que no pierde su trabajo.",
     "collabSaveFailed_sizeExceeded": "No se pudo guardar en la base de datos del backend, el lienzo parece ser demasiado grande. Debería guardar el archivo localmente para asegurarse de que no pierde su trabajo.",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "ajuste activado",
-      "break": "Esto podría resultar en romper los",
-      "text_elements": "Elementos de texto",
-      "in_your_drawings": "en tus dibujos",
-      "strongly_recommend": "Recomendamos desactivar esta configuración. Puedes seguir",
-      "steps": "estos pasos",
-      "how": "sobre cómo hacerlo",
-      "disable_setting": " Si deshabilitar esta opción no arregla la visualización de elementos de texto, por favor abre un",
-      "issue": "issue",
-      "write": "en GitHub, o escríbenos en",
-      "discord": "Discord"
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Modo Lápiz - previene toque",
     "link": "Añadir/Actualizar enlace para una forma seleccionada",
     "eraser": "Borrar",
-    "hand": "Mano (herramienta de panoramización)"
+    "frame": "",
+    "hand": "Mano (herramienta de panoramización)",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Acciones del lienzo",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Sugerencia: intenta acercar un poco más los elementos más lejanos."
   },
   "errorSplash": {
-    "headingMain_pre": "Se encontró un error. Intente ",
-    "headingMain_button": "recargando la página.",
-    "clearCanvasMessage": "Si la recarga no funciona, intente ",
-    "clearCanvasMessage_button": "limpiando el lienzo.",
+    "headingMain": "Se encontró un error. Intente <button>recargando la página.</button>",
+    "clearCanvasMessage": "Si la recarga no funciona, intente <button>limpiando el lienzo.</button>",
     "clearCanvasCaveat": " Esto provocará la pérdida de su trabajo ",
-    "trackedToSentry_pre": "El error con el identificador ",
-    "trackedToSentry_post": " fue rastreado en nuestro sistema.",
-    "openIssueMessage_pre": "Fuimos muy cautelosos de no incluir la información de tu escena en el error. Si tu escena no es privada, por favor considera seguir nuestro ",
-    "openIssueMessage_button": "rastreador de errores.",
-    "openIssueMessage_post": " Por favor, incluya la siguiente información copiándola y pegándola en el issue de GitHub.",
+    "trackedToSentry": "El error con el identificador {{eventId}} fue rastreado en nuestro sistema.",
+    "openIssueMessage": "Fuimos muy cautelosos de no incluir la información de tu escena en el error. Si tu escena no es privada, por favor considera seguir nuestro <button>rastreador de errores.</button> Por favor, incluya la siguiente información copiándola y pegándola en el issue de GitHub.",
     "sceneContent": "Contenido de la escena:"
   },
   "roomDialog": {
@@ -319,8 +302,8 @@
     "doubleClick": "doble clic",
     "drag": "arrastrar",
     "editor": "Editor",
-    "editLineArrowPoints": "",
-    "editText": "",
+    "editLineArrowPoints": "Editar puntos de línea/flecha",
+    "editText": "Editar texto / añadir etiqueta",
     "github": "¿Ha encontrado un problema? Envíelo",
     "howto": "Siga nuestras guías",
     "or": "o",
@@ -361,34 +344,45 @@
       "required": "Requerido",
       "website": "Introduce una URL válida"
     },
-    "noteDescription": {
-      "pre": "Envía tu biblioteca para ser incluida en el ",
-      "link": "repositorio de librería pública",
-      "post": "para que otras personas utilicen en sus dibujos."
-    },
-    "noteGuidelines": {
-      "pre": "La biblioteca debe ser aprobada manualmente primero. Por favor, lea la ",
-      "link": "pautas",
-      "post": " antes de enviar. Necesitará una cuenta de GitHub para comunicarse y hacer cambios si se solicita, pero no es estrictamente necesario."
-    },
-    "noteLicense": {
-      "pre": "Al enviar, usted acepta que la biblioteca se publicará bajo el ",
-      "link": "Licencia MIT ",
-      "post": "que en breve significa que cualquiera puede utilizarlos sin restricciones."
-    },
+    "noteDescription": "Envía tu biblioteca para ser incluida en el <link>repositorio de librería pública</link>para que otras personas utilicen en sus dibujos.",
+    "noteGuidelines": "La biblioteca debe ser aprobada manualmente primero. Por favor, lea la <link>pautas</link> antes de enviar. Necesitará una cuenta de GitHub para comunicarse y hacer cambios si se solicita, pero no es estrictamente necesario.",
+    "noteLicense": "Al enviar, usted acepta que la biblioteca se publicará bajo el <link>Licencia MIT </link>que en breve significa que cualquiera puede utilizarlos sin restricciones.",
     "noteItems": "Cada elemento de la biblioteca debe tener su propio nombre para que sea filtrable. Los siguientes elementos de la biblioteca serán incluidos:",
     "atleastOneLibItem": "Por favor, seleccione al menos un elemento de la biblioteca para empezar",
     "republishWarning": "Nota: algunos de los elementos seleccionados están marcados como ya publicados/enviados. Sólo debería volver a enviar elementos cuando se actualice una biblioteca o envío."
   },
   "publishSuccessDialog": {
     "title": "Biblioteca enviada",
-    "content": "Gracias {{authorName}}. Su biblioteca ha sido enviada para ser revisada. Puede seguir el estado",
-    "link": "aquí"
+    "content": "Gracias {{authorName}}. Su biblioteca ha sido enviada para ser revisada. Puede seguir el estado<link>aquí</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Reiniciar biblioteca",
     "removeItemsFromLib": "Eliminar elementos seleccionados de la biblioteca"
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "Tus dibujos están cifrados de punto a punto, por lo que los servidores de Excalidraw nunca los verán.",
     "link": "Entrada en el blog sobre cifrado de extremo a extremo"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "Usa {{shortcut}} para pegar como un solo elemento,\no pegar en un editor de texto existente"
   },
   "colors": {
-    "ffffff": "Blanco",
-    "f8f9fa": "Gris 0",
-    "f1f3f5": "Gris 1",
-    "fff5f5": "Rojo 0",
-    "fff0f6": "Rosa 0",
-    "f8f0fc": "Uva 0",
-    "f3f0ff": "Violeta 0",
-    "edf2ff": "Índigo 0",
-    "e7f5ff": "Azul 0",
-    "e3fafc": "Cian 0",
-    "e6fcf5": "Turquesa 0",
-    "ebfbee": "Verde 0",
-    "f4fce3": "Lima 0",
-    "fff9db": "Amarillo 0",
-    "fff4e6": "Naranja 0",
     "transparent": "Transparente",
-    "ced4da": "Gris 4",
-    "868e96": "Gris 6",
-    "fa5252": "Rojo 6",
-    "e64980": "Rosa 6",
-    "be4bdb": "Uva 6",
-    "7950f2": "Violeta 6",
-    "4c6ef5": "Índigo 6",
-    "228be6": "Azul 6",
-    "15aabf": "Cian 6",
-    "12b886": "Turquesa 6",
-    "40c057": "Verde 6",
-    "82c91e": "Lima 6",
-    "fab005": "Amarillo 6",
-    "fd7e14": "Naranja 6",
-    "000000": "Negro",
-    "343a40": "Gris 8",
-    "495057": "Gris 7",
-    "c92a2a": "Rojo 9",
-    "a61e4d": "Rosa 9",
-    "862e9c": "Uva 9",
-    "5f3dc4": "Violeta 9",
-    "364fc7": "Índigo 9",
-    "1864ab": "Azul 9",
-    "0b7285": "Cian 9",
-    "087f5b": "Turquesa 9",
-    "2b8a3e": "Verde 9",
-    "5c940d": "Lima 9",
-    "e67700": "Amarillo 9",
-    "d9480f": "Naranja 9"
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "¡Elige una herramienta y empieza a dibujar!",
       "helpHint": "Atajos y ayuda"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/eu-ES.json b/src/locales/eu-ES.json
index 1aec330cb..e66849dac 100644
--- a/src/locales/eu-ES.json
+++ b/src/locales/eu-ES.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Hirukia",
     "fontSize": "Letra-tamaina",
     "fontFamily": "Letra-tipoa",
-    "onlySelected": "Hautapena soilik",
-    "withBackground": "Atzeko planoa",
-    "exportEmbedScene": "Txertatu eszena",
-    "exportEmbedScene_details": "Eszenaren datuak esportatutako PNG/SVG fitxategian gordeko dira, eszena bertatik berrezartzeko.\nEsportatutako fitxategien tamaina handituko da.",
     "addWatermark": "Gehitu \"Excalidraw bidez egina\"",
     "handDrawn": "Eskuz marraztua",
     "normal": "Normala",
@@ -54,6 +50,7 @@
     "veryLarge": "Oso handia",
     "solid": "Solidoa",
     "hachure": "Itzalduna",
+    "zigzag": "Sigi-saga",
     "crossHatch": "Marraduna",
     "thin": "Mehea",
     "bold": "Lodia",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Irauli horizontalki",
     "flipVertical": "Irauli bertikalki",
     "viewMode": "Ikuspegia",
-    "toggleExportColorScheme": "Aldatu esportatzeko kolorearen eszena",
     "share": "Partekatu",
     "showStroke": "Erakutsi marraren kolore-hautatzailea",
     "showBackground": "Erakutsi atzeko planoaren kolore-hautatzailea",
@@ -127,7 +123,10 @@
       "unlockAll": "Desblokeatu guztiak"
     },
     "statusPublished": "Argitaratua",
-    "sidebarLock": "Mantendu alboko barra irekita"
+    "sidebarLock": "Mantendu alboko barra irekita",
+    "selectAllElementsInFrame": "Hautatu markoko elementu guztiak",
+    "removeAllElementsFromFrame": "Kendu markoko elementu guztiak",
+    "eyeDropper": "Aukeratu kolorea oihaletik"
   },
   "library": {
     "noItems": "Oraindik ez da elementurik gehitu...",
@@ -139,11 +138,7 @@
     "exportJSON": "Esportatu fitxategira",
     "exportImage": "Esportatu irudia...",
     "export": "Gorde hemen...",
-    "exportToPng": "Esportatu PNG gisa",
-    "exportToSvg": "Esportatu SVG gisa",
     "copyToClipboard": "Kopiatu arbelera",
-    "copyPngToClipboard": "Kopiatu PNG arbelera",
-    "scale": "Eskala",
     "save": "Gorde uneko fitxategian",
     "saveAs": "Gorde honela",
     "load": "Ireki",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Ezin izan da backend datu-basean gorde. Arazoak jarraitzen badu, zure fitxategia lokalean gorde beharko zenuke zure lana ez duzula galtzen ziurtatzeko.",
     "collabSaveFailed_sizeExceeded": "Ezin izan da backend datu-basean gorde, ohiala handiegia dela dirudi. Fitxategia lokalean gorde beharko zenuke zure lana galtzen ez duzula ziurtatzeko.",
     "brave_measure_text_error": {
-      "start": "Brave nabigatzailea erabiltzen ari zarela dirudi",
-      "aggressive_block_fingerprint": "Aggressively Block Fingerprinting",
-      "setting_enabled": "ezarpena gaituta",
-      "break": "Honek honen haustea eragin dezake",
-      "text_elements": "Testu-elementuak",
-      "in_your_drawings": "zure marrazkietan",
-      "strongly_recommend": "Ezarpen hau desgaitzea gomendatzen dugu. Jarrai dezakezu",
-      "steps": "urrats hauek",
-      "how": "jakiteko nola egin",
-      "disable_setting": " Ezarpen hau desgaitzeak testu-elementuen bistaratzea konpontzen ez badu, ireki",
-      "issue": "eskaera (issue) bat",
-      "write": "gure Github-en edo idatz iezaguzu",
-      "discord": "Discord-en"
+      "line1": "Brave arakatzailea erabiltzen ari zarela dirudi <bold>Blokeatu hatz-markak erasokorki</bold> ezarpena gaituta.",
+      "line2": "Honek zure marrazkietako <bold>Testu-elementuak</bold> hautsi ditzake.",
+      "line3": "Ezarpen hau desgaitzea gomendatzen dugu. <link>urrats hauek</link> jarrai ditzakezu hori nola egin jakiteko.",
+      "line4": "Ezarpen hau desgaituz gero, testu-elementuen bistaratzea konpontzen ez bada, ireki <issueLink>arazo</issueLink> gure GitHub-en edo idatzi iezaguzu <discordLink>Discord</discordLink> helbidera"
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Luma modua - ukipena saihestu",
     "link": "Gehitu / Eguneratu esteka hautatutako forma baterako",
     "eraser": "Borragoma",
-    "hand": "Eskua (panoratze tresna)"
+    "frame": "Marko tresna",
+    "hand": "Eskua (panoratze tresna)",
+    "extraTools": "Tresna gehiago"
   },
   "headings": {
     "canvasActions": "Canvas ekintzak",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Aholkua: saiatu urrunen dauden elementuak pixka bat hurbiltzen."
   },
   "errorSplash": {
-    "headingMain_pre": "Errore bat aurkitu da. Saiatu ",
-    "headingMain_button": "orria birkargatzen.",
-    "clearCanvasMessage": "Birkargatzea ez bada burutzen, saiatu ",
-    "clearCanvasMessage_button": "oihala garbitzen.",
+    "headingMain": "Errore bat aurkitu da. Saiatu <button>orria birkargatzen.</button>",
+    "clearCanvasMessage": "Birkargatzea ez bada burutzen, saiatu <button>oihala garbitzen.</button>",
     "clearCanvasCaveat": " Honen ondorioz lana galduko da ",
-    "trackedToSentry_pre": "Identifikatzailearen errorea ",
-    "trackedToSentry_post": " gure sistemak behatu du.",
-    "openIssueMessage_pre": "Oso kontuz ibili gara zure eszenaren informazioa errorean ez sartzeko. Zure eszena pribatua ez bada, kontuan hartu gure ",
-    "openIssueMessage_button": "erroreen jarraipena egitea.",
-    "openIssueMessage_post": " Sartu beheko informazioa kopiatu eta itsatsi bidez GitHub issue-n.",
+    "trackedToSentry": "Identifikatzailearen errorea {{eventId}} gure sistemak behatu du.",
+    "openIssueMessage": "Oso kontuz ibili gara zure eszenaren informazioa errorean ez sartzeko. Zure eszena pribatua ez bada, kontuan hartu gure <button>erroreen jarraipena egitea.</button> Sartu beheko informazioa kopiatu eta itsatsi bidez GitHub issue-n.",
     "sceneContent": "Eszenaren edukia:"
   },
   "roomDialog": {
@@ -319,8 +302,8 @@
     "doubleClick": "klik bikoitza",
     "drag": "arrastatu",
     "editor": "Editorea",
-    "editLineArrowPoints": "",
-    "editText": "",
+    "editLineArrowPoints": "Editatu lerroak/gezi-puntuak",
+    "editText": "Editatu testua / gehitu etiketa",
     "github": "Arazorik izan al duzu? Eman horren berri",
     "howto": "Jarraitu gure gidak",
     "or": "edo",
@@ -361,34 +344,45 @@
       "required": "Beharrezkoa",
       "website": "Sartu baliozko URL bat"
     },
-    "noteDescription": {
-      "pre": "Bidali zure liburutegira sartu ahal izateko ",
-      "link": "zure liburutegiko biltegian",
-      "post": "beste jendeak bere marrazkietan erabili ahal izateko."
-    },
-    "noteGuidelines": {
-      "pre": "Liburutegia eskuz onartu behar da. Irakurri ",
-      "link": "gidalerroak",
-      "post": " bidali aurretik. GitHub kontu bat edukitzea komeni da komunikatzeko eta aldaketak egin ahal izateko, baina ez da guztiz beharrezkoa."
-    },
-    "noteLicense": {
-      "pre": "Bidaltzen baduzu, onartzen duzu liburutegia ",
-      "link": "MIT lizentziarekin argitaratuko dela, ",
-      "post": "zeinak, laburbilduz, esan nahi du edozeinek erabiltzen ahal duela murrizketarik gabe."
-    },
+    "noteDescription": "Bidali zure liburutegira sartu ahal izateko <link>zure liburutegiko biltegian</link>beste jendeak bere marrazkietan erabili ahal izateko.",
+    "noteGuidelines": "Liburutegia eskuz onartu behar da. Irakurri <link>gidalerroak</link> bidali aurretik. GitHub kontu bat edukitzea komeni da komunikatzeko eta aldaketak egin ahal izateko, baina ez da guztiz beharrezkoa.",
+    "noteLicense": "Bidaltzen baduzu, onartzen duzu liburutegia <link>MIT lizentziarekin argitaratuko dela, </link>zeinak, laburbilduz, esan nahi du edozeinek erabiltzen ahal duela murrizketarik gabe.",
     "noteItems": "Liburutegiko elementu bakoitzak bere izena eduki behar du iragazi ahal izateko. Liburutegiko hurrengo elementuak barne daude:",
     "atleastOneLibItem": "Hautatu gutxienez liburutegiko elementu bat gutxienez hasi ahal izateko",
     "republishWarning": "Oharra: hautatutako elementu batzuk dagoeneko argitaratuta/bidalita bezala markatuta daude. Elementuak berriro bidali behar dituzu lehendik dagoen liburutegi edo bidalketa eguneratzen duzunean."
   },
   "publishSuccessDialog": {
     "title": "Liburutegia bidali da",
-    "content": "Eskerrik asko {{authorName}}. Zure liburutegia bidali da berrikustera. Jarraitu dezakezu haren egoera",
-    "link": "hemen"
+    "content": "Eskerrik asko {{authorName}}. Zure liburutegia bidali da berrikustera. Jarraitu dezakezu haren egoera<link>hemen</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Leheneratu liburutegia",
     "removeItemsFromLib": "Kendu hautatutako elementuak liburutegitik"
   },
+  "imageExportDialog": {
+    "header": "Esportatu irudia",
+    "label": {
+      "withBackground": "Atzeko planoa",
+      "onlySelected": "Hautapena soilik",
+      "darkMode": "Modu iluna",
+      "embedScene": "Txertatu eszena",
+      "scale": "Eskala",
+      "padding": "Betegarria"
+    },
+    "tooltip": {
+      "embedScene": "Eszenaren datuak esportatutako PNG/SVG fitxategian gordeko dira, eszena bertatik berrezartzeko.\nEsportatutako fitxategien tamaina handituko da."
+    },
+    "title": {
+      "exportToPng": "Esportatu PNG gisa",
+      "exportToSvg": "Esportatu SVG gisa",
+      "copyPngToClipboard": "Kopiatu PNG arbelera"
+    },
+    "button": {
+      "exportToPng": "PNG",
+      "exportToSvg": "SVG",
+      "copyPngToClipboard": "Kopiatu arbelean"
+    }
+  },
   "encrypted": {
     "tooltip": "Zure marrazkiak muturretik muturrera enkriptatu dira, beraz Excalidraw-ren zerbitzariek ezingo dituzte ikusi.",
     "link": "Excalidraw-ren muturretik muturrerako enkriptatzearen gaineko mezua blogean"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "Erabili {{shortcut}} elementu bakar gisa itsasteko,\nedo itsatsi lehendik dagoen testu-editore batean"
   },
   "colors": {
-    "ffffff": "Zuria",
-    "f8f9fa": "Grisa 0",
-    "f1f3f5": "Grisa 1",
-    "fff5f5": "Gorria 0",
-    "fff0f6": "Arrosa 0",
-    "f8f0fc": "Mahats kolorea 0",
-    "f3f0ff": "Bioleta 0",
-    "edf2ff": "Indigoa 0",
-    "e7f5ff": "Urdina 0",
-    "e3fafc": "Ziana 0",
-    "e6fcf5": "Berde urdinxka 0",
-    "ebfbee": "Berdea 0",
-    "f4fce3": "Lima 0",
-    "fff9db": "Horia 0",
-    "fff4e6": "Laranja 0",
     "transparent": "Gardena",
-    "ced4da": "Grisa 4",
-    "868e96": "Grisa 6",
-    "fa5252": "Gorria 6",
-    "e64980": "Arrosa 6",
-    "be4bdb": "Mahats kolorea 6",
-    "7950f2": "Bioleta 6",
-    "4c6ef5": "Indigoa 6",
-    "228be6": "Urdina 6",
-    "15aabf": "Ziana 6",
-    "12b886": "Berde urdinxka 6",
-    "40c057": "Berdea 6",
-    "82c91e": "Lima 6",
-    "fab005": "Horia 6",
-    "fd7e14": "Laranja 6",
-    "000000": "Beltza",
-    "343a40": "Grisa 8",
-    "495057": "Grisa 7",
-    "c92a2a": "Gorria 9",
-    "a61e4d": "Arrosa 9",
-    "862e9c": "Mahats kolorea 9",
-    "5f3dc4": "Bioleta 9",
-    "364fc7": "Indigoa 9",
-    "1864ab": "Urdina 9",
-    "0b7285": "Ziana 9",
-    "087f5b": "Berde urdinxka 9",
-    "2b8a3e": "Berdea 9",
-    "5c940d": "Lima 9",
-    "e67700": "Horia 9",
-    "d9480f": "Laranja 9"
+    "black": "Beltza",
+    "white": "Zuria",
+    "red": "Gorria",
+    "pink": "Arrosa",
+    "grape": "Mahats kolorea",
+    "violet": "Bioleta",
+    "gray": "Grisa",
+    "blue": "Urdina",
+    "cyan": "Ziana",
+    "teal": "Berde urdinxka",
+    "green": "Berdea",
+    "yellow": "Horia",
+    "orange": "Laranja",
+    "bronze": "Brontzea"
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "Aukeratu tresna bat eta hasi marrazten!",
       "helpHint": "Lasterbideak eta laguntza"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "Gehien erabilitako kolore pertsonalizatuak",
+    "colors": "Koloreak",
+    "shades": "Ñabardurak",
+    "hexCode": "Hez kodea",
+    "noShades": "Kolore honetarako ez dago ñabardurarik eskuragarri"
   }
 }
diff --git a/src/locales/fa-IR.json b/src/locales/fa-IR.json
index 44cf7ae00..1870a1730 100644
--- a/src/locales/fa-IR.json
+++ b/src/locales/fa-IR.json
@@ -1,7 +1,7 @@
 {
   "labels": {
     "paste": "جای گذاری",
-    "pasteAsPlaintext": "",
+    "pasteAsPlaintext": "جای‌گذاری به عنوان متن ساده",
     "pasteCharts": "قراردادن نمودارها",
     "selectAll": "انتخاب همه",
     "multiSelect": "یک ایتم به انتخاب شده ها اضافه کنید.",
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "مثلث",
     "fontSize": "اندازه قلم",
     "fontFamily": "نوع قلم",
-    "onlySelected": "فقط انتخاب شده ها",
-    "withBackground": "پس زمینه",
-    "exportEmbedScene": "تعبیه صحنه",
-    "exportEmbedScene_details": "متحوای صحنه به فایل خروجی SVG/PNG اضافه خواهد شد برای بازیابی صحنه به آن اضافه خواهد شد.\nباعث افزایش حجم فایل خروجی میشود.",
     "addWatermark": "\"ساخته شده با Excalidraw\" را اضافه کن",
     "handDrawn": "دست نویس",
     "normal": "عادی",
@@ -54,6 +50,7 @@
     "veryLarge": "بسیار بزرگ",
     "solid": "توپر",
     "hachure": "هاشور",
+    "zigzag": "زیگزاگ",
     "crossHatch": "هاشور متقاطع",
     "thin": "نازک",
     "bold": "ضخیم",
@@ -99,7 +96,6 @@
     "flipHorizontal": "چرخش افقی",
     "flipVertical": "چرخش عمودی",
     "viewMode": "حالت نمایش",
-    "toggleExportColorScheme": "تغییر طرح خروجی رنگ",
     "share": "اشتراک‌گذاری",
     "showStroke": "نمایش انتخاب کننده رنگ حاشیه",
     "showBackground": "نمایش انتخاب کننده رنگ پس زمینه",
@@ -110,7 +106,7 @@
     "increaseFontSize": "افزایش دادن اندازه فونت",
     "unbindText": "بازکردن نوشته",
     "bindText": "بستن نوشته",
-    "createContainerFromText": "",
+    "createContainerFromText": "متن را در یک جایگاه بپیچید",
     "link": {
       "edit": "ویرایش لینک",
       "create": "ایجاد پیوند",
@@ -127,7 +123,10 @@
       "unlockAll": "باز کردن قفل همه"
     },
     "statusPublished": "منتشر شده",
-    "sidebarLock": "باز نگه داشتن سایدبار"
+    "sidebarLock": "باز نگه داشتن سایدبار",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "آیتمی به اینجا اضافه نشده...",
@@ -139,11 +138,7 @@
     "exportJSON": "خروجی در فایل",
     "exportImage": "خروجی گرفتن از تصویر...",
     "export": "ذخیره در...",
-    "exportToPng": "تبدیل به PNG",
-    "exportToSvg": "تبدیل به SVG",
     "copyToClipboard": "کپی در حافظه موقت",
-    "copyPngToClipboard": "کپی PNG در حافظه موقت",
-    "scale": "مقیاس",
     "save": "ذخیره در همین فایل",
     "saveAs": "ذخیره با نام",
     "load": "باز کردن",
@@ -194,7 +189,7 @@
     "resetLibrary": "ین کار کل صفحه را پاک میکند. آیا مطمئنید?",
     "removeItemsFromsLibrary": "حذف {{count}} آیتم(ها) از کتابخانه?",
     "invalidEncryptionKey": "کلید رمزگذاری باید 22 کاراکتر باشد. همکاری زنده غیرفعال است.",
-    "collabOfflineWarning": ""
+    "collabOfflineWarning": "اتصال به اینترنت در دسترس نیست.\nتغییرات شما ذخیره نمی شود!"
   },
   "errors": {
     "unsupportedFileType": "نوع فایل پشتیبانی نشده.",
@@ -204,22 +199,13 @@
     "invalidSVGString": "SVG نادرست.",
     "cannotResolveCollabServer": "به سرور collab متصل نشد. لطفا صفحه را مجددا بارگذاری کنید و دوباره تلاش کنید.",
     "importLibraryError": "داده‌ها بارگذاری نشدند",
-    "collabSaveFailed": "",
-    "collabSaveFailed_sizeExceeded": "",
+    "collabSaveFailed": "در پایگاه داده باطن ذخیره نشد. اگر مشکلات همچنان ادامه داشت، باید فایل خود را به صورت محلی ذخیره کنید تا مطمئن شوید کار خود را از دست نمی دهید.",
+    "collabSaveFailed_sizeExceeded": "در پایگاه داده بکند ذخیره نشد. اگر مشکلات همچنان ادامه داشت، باید فایل خود را به صورت محلی ذخیره کنید تا مطمئن شوید کار خود را از دست نمی دهید.",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "به نظر می‌رسد از مرورگر Brave با تنظیم <bold> مسدود کردن شدید اثرانگشت</bold> استفاده می‌کنید.",
+      "line2": "این می تواند منجر به شکستن <bold>عناصر متن</bold> در نقاشی های شما شود.",
+      "line3": "اکیداً توصیه می کنیم این تنظیم را غیرفعال کنید. برای نحوه انجام این کار می‌توانید <link>این مراحل</link> را دنبال کنید.",
+      "line4": "اگر غیرفعال کردن این تنظیم نمایش عناصر متنی را برطرف نکرد، لطفاً یک <issueLink>مشکل</issueLink> را در GitHub ما باز کنید یا برای ما در <discordLink>Discord</discordLink> بنویسید."
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "حالت قلم - جلوگیری از تماس",
     "link": "افزودن/به‌روزرسانی پیوند برای شکل انتخابی",
     "eraser": "پاک کن",
-    "hand": ""
+    "frame": "",
+    "hand": "دست (ابزار پانینگ)",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "عملیات روی بوم",
@@ -245,7 +233,7 @@
     "shapes": "شکل‌ها"
   },
   "hints": {
-    "canvasPanning": "",
+    "canvasPanning": "برای حرکت دادن بوم، چرخ ماوس یا فاصله را در حین کشیدن نگه دارید یا از ابزار دستی استفاده کنید",
     "linearElement": "برای چند نقطه کلیک و برای یک خط بکشید",
     "freeDraw": "کلیک کنید و بکشید و وقتی کار تمام شد رها کنید",
     "text": "نکته: با برنامه انتخاب شده شما میتوانید با دوبار کلیک کردن هرکجا میخواید متن اظاف کنید",
@@ -256,7 +244,7 @@
     "resize": "می توانید با نگه داشتن SHIFT در هنگام تغییر اندازه، نسبت ها را محدود کنید،ALT را برای تغییر اندازه از مرکز نگه دارید",
     "resizeImage": "با نگه داشتن SHIFT می توانید آزادانه اندازه را تغییر دهید،\nبرای تغییر اندازه از مرکز، ALT را نگه دارید",
     "rotate": "با نگه داشتن SHIFT هنگام چرخش می توانید زاویه ها را محدود کنید",
-    "lineEditor_info": "",
+    "lineEditor_info": "CtrlOrCmd را نگه دارید و دوبار کلیک کنید یا CtrlOrCmd + Enter را فشار دهید تا نقاط را ویرایش کنید.",
     "lineEditor_pointSelected": "برای حذف نقطه Delete برای کپی زدن Ctrl یا Cmd+D را بزنید و یا برای جابجایی بکشید",
     "lineEditor_nothingSelected": "یک نقطه را برای ویرایش انتخاب کنید (SHIFT را برای انتخاب چندگانه نگه دارید)،\nیا Alt را نگه دارید و برای افزودن نقاط جدید کلیک کنید",
     "placeImage": "برای قرار دادن تصویر کلیک کنید، یا کلیک کنید و بکشید تا اندازه آن به صورت دستی تنظیم شود",
@@ -264,7 +252,7 @@
     "bindTextToElement": "برای افزودن اینتر را بزنید",
     "deepBoxSelect": "CtrlOrCmd را برای انتخاب عمیق و جلوگیری از کشیدن نگه دارید",
     "eraserRevert": "Alt را نگه دارید تا عناصر علامت گذاری شده برای حذف برگردند",
-    "firefox_clipboard_write": ""
+    "firefox_clipboard_write": "احتمالاً می‌توان این ویژگی را با تنظیم پرچم «dom.events.asyncClipboard.clipboardItem» روی «true» فعال کرد. برای تغییر پرچم های مرورگر در فایرفاکس، از صفحه \"about:config\" دیدن کنید."
   },
   "canvasError": {
     "cannotShowPreview": "پیش نمایش نشان داده نمی شود",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "نکته: سعی کنید دورترین عناصر را کمی به همدیگر نزدیک کنید."
   },
   "errorSplash": {
-    "headingMain_pre": "با مشکلی مواجه شدیم. این را امتحان کنید ",
-    "headingMain_button": "در حال بازنشانی صفحه.",
+    "headingMain": "",
     "clearCanvasMessage": "اگر بازنشانی صفحه مشکل را حل نکرد این را امتحان کنید ",
-    "clearCanvasMessage_button": "در حال تمیز کردن بوم",
     "clearCanvasCaveat": " این باعث میشود کارهای شما ذخیره نشود ",
-    "trackedToSentry_pre": "خطا در شناسه ",
-    "trackedToSentry_post": " در سیستم ما رهگیری شد.",
-    "openIssueMessage_pre": "ما خیلی محتاط هستیم که اطلاعات شما را در خطا قرار ندهیم. با این حال اگر اطلاعات شما خصوصی نیست لطفا پیگیری کنید ",
-    "openIssueMessage_button": "پیگیری اشکالات.",
-    "openIssueMessage_post": " لطفا اطلاعات زیر را با کپی کردن در صفحه مشکلات GitHub بگذارید.",
+    "trackedToSentry": "",
+    "openIssueMessage": "",
     "sceneContent": "محتوای صحنه:"
   },
   "roomDialog": {
@@ -319,8 +302,8 @@
     "doubleClick": "دابل کلیک",
     "drag": "کشیدن",
     "editor": "ویرایشگر",
-    "editLineArrowPoints": "",
-    "editText": "",
+    "editLineArrowPoints": "نقاط خط/پیکان را ویرایش کنید",
+    "editText": "ویرایش متن / افزودن برچسب",
     "github": "اشکالی می بینید؟ گزارش دهید",
     "howto": "راهنمای ما را دنبال کنید",
     "or": "یا",
@@ -334,8 +317,8 @@
     "zoomToFit": "بزرگنمایی برای دیدن تمام آیتم ها",
     "zoomToSelection": "بزرگنمایی قسمت انتخاب شده",
     "toggleElementLock": "قفل/بازکردن انتخاب شده ها",
-    "movePageUpDown": "",
-    "movePageLeftRight": ""
+    "movePageUpDown": "حرکت صفحه به بالا/پایین",
+    "movePageLeftRight": "حرکت صفحه به چپ/راست"
   },
   "clearCanvasDialog": {
     "title": "پاک کردن بوم"
@@ -361,34 +344,45 @@
       "required": "لازم",
       "website": "وارد کردن آدرس درست"
     },
-    "noteDescription": {
-      "pre": "کتابخانه خود را ارسال کنید تا در آن گنجانده شود ",
-      "link": "مخزن کتابخانه عمومی",
-      "post": "تا افراد دیگر در نقاشی های خود از آن استفاده کنند."
-    },
-    "noteGuidelines": {
-      "pre": "کتابخانه باید ابتدا به صورت دستی تایید شود. لطفاً بخوانید ",
-      "link": "دستورالعمل‌ها",
-      "post": " قبل از ارسال برای برقراری ارتباط و ایجاد تغییرات در صورت درخواست، به یک حساب GitHub نیاز دارید، اما به شدت الزامی نیست."
-    },
-    "noteLicense": {
-      "pre": "با ارسال، موافقت می کنید که کتابخانه تحت عنوان منتشر شود ",
-      "link": "پروانهٔ MIT ",
-      "post": "که به طور خلاصه به این معنی است که هر کسی می تواند بدون محدودیت از آنها استفاده کند."
-    },
+    "noteDescription": "",
+    "noteGuidelines": "",
+    "noteLicense": "",
     "noteItems": "هر مورد کتابخانه باید نام خاص خود را داشته باشد تا قابل فیلتر باشد. اقلام کتابخانه زیر شامل خواهد شد:",
     "atleastOneLibItem": "لطفاً حداقل یک مورد از کتابخانه را برای شروع انتخاب کنید",
     "republishWarning": "توجه: برخی از موارد انتخاب شده به عنوان قبلاً منتشر شده/ارسال شده علامت گذاری شده اند. شما فقط باید هنگام به‌روزرسانی یک کتابخانه موجود یا ارسال، موارد را دوباره ارسال کنید."
   },
   "publishSuccessDialog": {
     "title": "کتابخانه ارسال شد",
-    "content": "تشکر از شما {{authorName}}. کتابخانه شما برای بررسی ارسال شده است. می توانید وضعیت را پیگیری کنید",
-    "link": "اینجا"
+    "content": "تشکر از شما {{authorName}}. کتابخانه شما برای بررسی ارسال شده است. می توانید وضعیت را پیگیری کنید"
   },
   "confirmDialog": {
     "resetLibrary": "تنظیم مجدد کتابخانه",
     "removeItemsFromLib": "موارد انتخاب شده از موارد پسندیده حذف شوند"
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "شما در یک محیط رمزگزاری شده دو طرفه در حال طراحی هستید پس Excalidraw هرگز طرح های شما را نمیبند.",
     "link": "پست وبلاگ در مورد رمزگذاری سرتاسر در Excalidraw"
@@ -417,66 +411,43 @@
     "fileSavedToFilename": "ذخیره در {filename}",
     "canvas": "بوم",
     "selection": "انتخاب",
-    "pasteAsSingleElement": ""
+    "pasteAsSingleElement": "از {{shortcut}} برای چسباندن به عنوان یک عنصر استفاده کنید،\nیا در یک ویرایشگر متن موجود جایگذاری کنید"
   },
   "colors": {
-    "ffffff": "سفید",
-    "f8f9fa": "خاکستری 0",
-    "f1f3f5": "خاکستری 1",
-    "fff5f5": "قرمز 0",
-    "fff0f6": "صورتی 0",
-    "f8f0fc": "انگوری 0",
-    "f3f0ff": "بنفش 0",
-    "edf2ff": "نیلی 0",
-    "e7f5ff": "آبی 0",
-    "e3fafc": "آبی نفتی 0",
-    "e6fcf5": "آبی فیروزه ای 0",
-    "ebfbee": "سبز 0",
-    "f4fce3": "لیمویی 0",
-    "fff9db": "زرد 0",
-    "fff4e6": "نارنجی 0",
     "transparent": "شفاف",
-    "ced4da": "خاکستری 4",
-    "868e96": "خاکستری 6",
-    "fa5252": "قرمز 6",
-    "e64980": "صورتی 6",
-    "be4bdb": "انگوری 6",
-    "7950f2": "بنفش 6",
-    "4c6ef5": "نیلی 6",
-    "228be6": "آبی 6",
-    "15aabf": "آبی نفتی 6",
-    "12b886": "آبی فیروزه ای 6",
-    "40c057": "سبز 6",
-    "82c91e": "لیمویی 6",
-    "fab005": "زرد 6",
-    "fd7e14": "نارنجی 6",
-    "000000": "سیاه",
-    "343a40": "خاکستری 8",
-    "495057": "خاکستری 7",
-    "c92a2a": "قرمز 9",
-    "a61e4d": "صورتی 9",
-    "862e9c": "انگوری 9",
-    "5f3dc4": "بنفش 9",
-    "364fc7": "نیلی 9",
-    "1864ab": "آبی 9",
-    "0b7285": "آبی نفتی 9",
-    "087f5b": "آبی فیروزه ای 9",
-    "2b8a3e": "سبز 9",
-    "5c940d": "لیمویی 9",
-    "e67700": "زرد 9",
-    "d9480f": "نارنجی 9"
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
-      "center_heading": "",
-      "center_heading_plus": "",
-      "menuHint": ""
+      "center_heading": "تمام داده های شما به صورت محلی در مرورگر شما ذخیره می شود.",
+      "center_heading_plus": "آیا می‌خواهید به جای آن به Excalidraw+ بروید؟",
+      "menuHint": "خروجی، ترجیحات، زبان ها، ..."
     },
     "defaults": {
-      "menuHint": "",
-      "center_heading": "",
-      "toolbarHint": "",
-      "helpHint": ""
+      "menuHint": "خروجی، ترجیحات، وبیشتر ...",
+      "center_heading": "نمودارها .ساخته شده. ساده.",
+      "toolbarHint": "ابزاری را انتخاب کنید و نقاشی را شروع کنید!",
+      "helpHint": "میانبرها و راهنما"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/fi-FI.json b/src/locales/fi-FI.json
index e0701f2d2..d1c68b12a 100644
--- a/src/locales/fi-FI.json
+++ b/src/locales/fi-FI.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Kolmio",
     "fontSize": "Kirjasinkoko",
     "fontFamily": "Kirjasintyyppi",
-    "onlySelected": "Vain valitut",
-    "withBackground": "Taustalla",
-    "exportEmbedScene": "Upota työ",
-    "exportEmbedScene_details": "Teoksen tiedot tallennetaan PNG/SVG-tiedostoon, jolloin teoksen voi palauttaa siitä. Kasvattaa tallennetun tiedoston kokoa.",
     "addWatermark": "Lisää \"Tehty Excalidrawilla\"",
     "handDrawn": "Käsinpiirretty",
     "normal": "Tavallinen",
@@ -54,6 +50,7 @@
     "veryLarge": "Erittäin suuri",
     "solid": "Yhtenäinen",
     "hachure": "Vinoviivoitus",
+    "zigzag": "",
     "crossHatch": "Ristiviivoitus",
     "thin": "Ohut",
     "bold": "Lihavoitu",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Käännä vaakasuunnassa",
     "flipVertical": "Käännä pystysuunnassa",
     "viewMode": "Katselutila",
-    "toggleExportColorScheme": "Vaihda viennin väriteema",
     "share": "Jaa",
     "showStroke": "Näytä viivan värin valitsin",
     "showBackground": "Näytä taustavärin valitsin",
@@ -127,7 +123,10 @@
       "unlockAll": "Poista lukitus kaikista"
     },
     "statusPublished": "Julkaistu",
-    "sidebarLock": "Pidä sivupalkki avoinna"
+    "sidebarLock": "Pidä sivupalkki avoinna",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "Kirjastossa ei ole vielä yhtään kohdetta...",
@@ -139,11 +138,7 @@
     "exportJSON": "Vie tiedostoon",
     "exportImage": "Vie kuva...",
     "export": "Tallenna nimellä...",
-    "exportToPng": "Vie PNG-tiedostona",
-    "exportToSvg": "Vie SVG-tiedostona",
     "copyToClipboard": "Kopioi leikepöydälle",
-    "copyPngToClipboard": "Kopioi PNG-tiedosto leikepöydälle",
-    "scale": "Koko",
     "save": "Tallenna nykyiseen tiedostoon",
     "saveAs": "Tallenna nimellä",
     "load": "Avaa",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Ei voitu tallentaan palvelimen tietokantaan. Jos ongelmia esiintyy, sinun kannatta tallentaa tallentaa tiedosto paikallisesti varmistaaksesi, että et menetä työtäsi.",
     "collabSaveFailed_sizeExceeded": "Ei voitu tallentaan palvelimen tietokantaan. Jos ongelmia esiintyy, sinun kannatta tallentaa tallentaa tiedosto paikallisesti varmistaaksesi, että et menetä työtäsi.",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Kynätila - estä kosketus",
     "link": "Lisää/päivitä linkki valitulle muodolle",
     "eraser": "Poistotyökalu",
-    "hand": "Käsi (panning-työkalu)"
+    "frame": "",
+    "hand": "Käsi (panning-työkalu)",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Piirtoalueen toiminnot",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Vinkki: yritä siirtää kaukaisimpia elementtejä hieman lähemmäs toisiaan."
   },
   "errorSplash": {
-    "headingMain_pre": "Tapahtui virhe. Yritä ",
-    "headingMain_button": "sivun lataamista uudelleen.",
-    "clearCanvasMessage": "Mikäli sivun lataaminen uudelleen ei auta, yritä ",
-    "clearCanvasMessage_button": "tyhjentää piirtoalue.",
+    "headingMain": "Tapahtui virhe. Yritä <button>sivun lataamista uudelleen.</button>",
+    "clearCanvasMessage": "Mikäli sivun lataaminen uudelleen ei auta, yritä <button>tyhjentää piirtoalue.</button>",
     "clearCanvasCaveat": " Tämä johtaa työn menetykseen ",
-    "trackedToSentry_pre": "Virhe tunnisteella ",
-    "trackedToSentry_post": " tallennettiin järjestelmäämme.",
-    "openIssueMessage_pre": "Olimme varovaisia emmekä sisällyttäneet tietoa piirroksestasi virheeseen. Mikäli piirroksesi ei ole yksityinen, harkitsethan kertovasi meille ",
-    "openIssueMessage_button": "virheenseurantajärjestelmässämme.",
-    "openIssueMessage_post": " Sisällytä alla olevat tiedot kopioimalla ne GitHub-ongelmaan.",
+    "trackedToSentry": "Virhe tunnisteella {{eventId}} tallennettiin järjestelmäämme.",
+    "openIssueMessage": "Olimme varovaisia emmekä sisällyttäneet tietoa piirroksestasi virheeseen. Mikäli piirroksesi ei ole yksityinen, harkitsethan kertovasi meille <button>virheenseurantajärjestelmässämme.</button> Sisällytä alla olevat tiedot kopioimalla ne GitHub-ongelmaan.",
     "sceneContent": "Piirroksen tiedot:"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "Pakollinen",
       "website": "Syötä oikeamuotoinen URL-osoite"
     },
-    "noteDescription": {
-      "pre": "Lähetä kirjastosi, jotta se voidaan sisällyttää ",
-      "link": "julkisessa kirjastolistauksessa",
-      "post": "muiden käyttöön omissa piirrustuksissaan."
-    },
-    "noteGuidelines": {
-      "pre": "Kirjasto on ensin hyväksyttävä manuaalisesti. Ole hyvä ja lue ",
-      "link": "ohjeet",
-      "post": " ennen lähettämistä. Tarvitset GitHub-tilin, jotta voit viestiä ja tehdä muutoksia pyydettäessä, mutta se ei ole ehdottoman välttämätöntä."
-    },
-    "noteLicense": {
-      "pre": "Lähettämällä hyväksyt että kirjasto julkaistaan ",
-      "link": "MIT-lisenssin ",
-      "post": "alla, mikä lyhyesti antaa muiden käyttää sitä ilman rajoituksia."
-    },
+    "noteDescription": "Lähetä kirjastosi, jotta se voidaan sisällyttää <link>julkisessa kirjastolistauksessa</link>muiden käyttöön omissa piirrustuksissaan.",
+    "noteGuidelines": "Kirjasto on ensin hyväksyttävä manuaalisesti. Ole hyvä ja lue <link>ohjeet</link> ennen lähettämistä. Tarvitset GitHub-tilin, jotta voit viestiä ja tehdä muutoksia pyydettäessä, mutta se ei ole ehdottoman välttämätöntä.",
+    "noteLicense": "Lähettämällä hyväksyt että kirjasto julkaistaan <link>MIT-lisenssin </link>alla, mikä lyhyesti antaa muiden käyttää sitä ilman rajoituksia.",
     "noteItems": "Jokaisella kirjaston kohteella on oltava oma nimensä suodatusta varten. Seuraavat kirjaston kohteet sisältyvät:",
     "atleastOneLibItem": "Valitse vähintään yksi kirjaston kohde aloittaaksesi",
     "republishWarning": "Huom! Osa valituista kohteista on merkitty jo julkaistu/lähetetyiksi. Lähetä kohteita uudelleen vain päivitettäessä olemassa olevaa kirjastoa tai ehdotusta."
   },
   "publishSuccessDialog": {
     "title": "Kirjasto lähetetty",
-    "content": "Kiitos {{authorName}}. Kirjastosi on lähetetty tarkistettavaksi. Voit seurata sen tilaa",
-    "link": "täällä"
+    "content": "Kiitos {{authorName}}. Kirjastosi on lähetetty tarkistettavaksi. Voit seurata sen tilaa<link>täällä</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Tyhjennä kirjasto",
     "removeItemsFromLib": "Poista valitut kohteet kirjastosta"
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "Piirroksesi ovat päästä-päähän-salattuja, joten Excalidrawin palvelimet eivät koskaan näe niitä.",
     "link": "Blogiartikkeli päästä päähän -salauksesta Excalidraw:ssa"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "Käytä {{shortcut}} liittääksesi yhtenä elementtinä,\ntai liittääksesi olemassa olevaan tekstieditoriin"
   },
   "colors": {
-    "ffffff": "Valkoinen",
-    "f8f9fa": "Harmaa 0",
-    "f1f3f5": "Harmaa 1",
-    "fff5f5": "Punainen 0",
-    "fff0f6": "Pinkki 0",
-    "f8f0fc": "Rypäle 0",
-    "f3f0ff": "Violetti 0",
-    "edf2ff": "Indigo 0",
-    "e7f5ff": "Sininen 0",
-    "e3fafc": "Syaani 0",
-    "e6fcf5": "Sinivihreä 0",
-    "ebfbee": "Vihreä 0",
-    "f4fce3": "Limenvihreä 0",
-    "fff9db": "Keltainen 0",
-    "fff4e6": "Oranssi 0",
     "transparent": "Läpinäkyvä",
-    "ced4da": "Harmaa 4",
-    "868e96": "Harmaa 6",
-    "fa5252": "Punainen 6",
-    "e64980": "Pinkki 6",
-    "be4bdb": "Rypäle 6",
-    "7950f2": "Violetti 6",
-    "4c6ef5": "Indigo 6",
-    "228be6": "Sininen 6",
-    "15aabf": "Syaani 6",
-    "12b886": "Sinivihreä 6",
-    "40c057": "Vihreä 6",
-    "82c91e": "Limenvihreä 6",
-    "fab005": "Keltainen 6",
-    "fd7e14": "Oranssi 6",
-    "000000": "Musta",
-    "343a40": "Harmaa 8",
-    "495057": "Harmaa 7",
-    "c92a2a": "Punainen 9",
-    "a61e4d": "Pinkki 9",
-    "862e9c": "Rypäle 9",
-    "5f3dc4": "Violetti 9",
-    "364fc7": "Indigo 9",
-    "1864ab": "Sininen 9",
-    "0b7285": "Syaani 9",
-    "087f5b": "Sinivihreä 9",
-    "2b8a3e": "Vihreä 9",
-    "5c940d": "Limenvihreä 9",
-    "e67700": "Keltainen 9",
-    "d9480f": "Oranssi 9"
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "Valitse työkalu ja aloita piirtäminen!",
       "helpHint": "Pikanäppäimet & ohje"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/fr-FR.json b/src/locales/fr-FR.json
index 49135c3b6..e48cf1a85 100644
--- a/src/locales/fr-FR.json
+++ b/src/locales/fr-FR.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Triangle",
     "fontSize": "Taille de la police",
     "fontFamily": "Police",
-    "onlySelected": "Uniquement la sélection",
-    "withBackground": "Arrière-plan",
-    "exportEmbedScene": "Intégrer la scène",
-    "exportEmbedScene_details": "Les données de scène seront enregistrées dans le fichier PNG/SVG exporté, afin que la scène puisse être restaurée à partir de celui-ci.\nCela augmentera la taille du fichier exporté.",
     "addWatermark": "Ajouter \"Réalisé avec Excalidraw\"",
     "handDrawn": "À main levée",
     "normal": "Normale",
@@ -54,6 +50,7 @@
     "veryLarge": "Très grande",
     "solid": "Solide",
     "hachure": "Hachures",
+    "zigzag": "",
     "crossHatch": "Hachures croisées",
     "thin": "Fine",
     "bold": "Épaisse",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Retourner horizontalement",
     "flipVertical": "Retourner verticalement",
     "viewMode": "Mode présentation",
-    "toggleExportColorScheme": "Activer/Désactiver l'export du thème de couleur",
     "share": "Partager",
     "showStroke": "Afficher le sélecteur de couleur de trait",
     "showBackground": "Afficher le sélecteur de couleur de fond",
@@ -127,7 +123,10 @@
       "unlockAll": "Tout déverrouiller"
     },
     "statusPublished": "Publié",
-    "sidebarLock": "Maintenir la barre latérale ouverte"
+    "sidebarLock": "Maintenir la barre latérale ouverte",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "Aucun élément n'a encore été ajouté ...",
@@ -139,11 +138,7 @@
     "exportJSON": "Exporter comme fichier",
     "exportImage": "Exporter l'image...",
     "export": "Enregistrer sous...",
-    "exportToPng": "Enregistrer en PNG",
-    "exportToSvg": "Enregistrer en SVG",
     "copyToClipboard": "Copier dans le presse-papier",
-    "copyPngToClipboard": "Copier le PNG dans le presse-papier",
-    "scale": "Échelle",
     "save": "Enregistrer dans le fichier actuel",
     "saveAs": "Enregistrer sous",
     "load": "Ouvrir",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Impossible d'enregistrer dans la base de données en arrière-plan. Si des problèmes persistent, vous devriez enregistrer votre fichier localement pour vous assurer de ne pas perdre votre travail.",
     "collabSaveFailed_sizeExceeded": "Impossible d'enregistrer dans la base de données en arrière-plan, le tableau semble trop grand. Vous devriez enregistrer le fichier localement pour vous assurer de ne pas perdre votre travail.",
     "brave_measure_text_error": {
-      "start": "Il semble que vous utilisiez le navigateur Brave avec le",
-      "aggressive_block_fingerprint": "blocage d'empreinte agressif",
-      "setting_enabled": "activé",
-      "break": "Ceci pourrait avoir pour conséquence de « casser » les",
-      "text_elements": "éléments texte",
-      "in_your_drawings": "dans vos dessins",
-      "strongly_recommend": "Nous recommandons fortement de désactiver ce paramètre. Vous pouvez suivre",
-      "steps": "ces étapes",
-      "how": "sur la manière de procéder",
-      "disable_setting": " Si la désactivation de ce paramètre ne résout pas l'affichage des éléments texte, veuillez ouvrir un",
-      "issue": "ticket",
-      "write": "sur notre GitHub, ou nous écrire sur",
-      "discord": "Discord"
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Mode stylo - évite le toucher",
     "link": "Ajouter/mettre à jour le lien pour une forme sélectionnée",
     "eraser": "Gomme",
-    "hand": "Mains (outil de déplacement de la vue)"
+    "frame": "",
+    "hand": "Mains (outil de déplacement de la vue)",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Actions du canevas",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Astuce : essayez de rapprocher un peu les éléments les plus éloignés."
   },
   "errorSplash": {
-    "headingMain_pre": "Une erreur est survenue. Essayez ",
-    "headingMain_button": "de recharger la page.",
-    "clearCanvasMessage": "Si le rechargement ne résout pas l'erreur, essayez ",
-    "clearCanvasMessage_button": "effacement du canevas.",
+    "headingMain": "Une erreur est survenue. Essayez <button>de recharger la page.</button>",
+    "clearCanvasMessage": "Si le rechargement ne résout pas l'erreur, essayez <button>effacement du canevas.</button>",
     "clearCanvasCaveat": " Cela entraînera une perte du travail ",
-    "trackedToSentry_pre": "L'erreur avec l'identifiant ",
-    "trackedToSentry_post": " a été enregistrée dans notre système.",
-    "openIssueMessage_pre": "Nous avons fait très attention à ne pas inclure les informations de votre scène dans l'erreur. Si votre scène n'est pas privée, veuillez envisager de poursuivre sur notre ",
-    "openIssueMessage_button": "outil de suivi des bugs.",
-    "openIssueMessage_post": " Veuillez inclure les informations ci-dessous en les copiant-collant dans le ticket GitHub.",
+    "trackedToSentry": "L'erreur avec l'identifiant {{eventId}} a été enregistrée dans notre système.",
+    "openIssueMessage": "Nous avons fait très attention à ne pas inclure les informations de votre scène dans l'erreur. Si votre scène n'est pas privée, veuillez envisager de poursuivre sur notre <button>outil de suivi des bugs.</button> Veuillez inclure les informations ci-dessous en les copiant-collant dans le ticket GitHub.",
     "sceneContent": "Contenu de la scène :"
   },
   "roomDialog": {
@@ -319,8 +302,8 @@
     "doubleClick": "double-clic",
     "drag": "glisser",
     "editor": "Éditeur",
-    "editLineArrowPoints": "",
-    "editText": "",
+    "editLineArrowPoints": "Modifier les points de ligne/flèche",
+    "editText": "Modifier le texte / ajouter un libellé",
     "github": "Problème trouvé ? Soumettre",
     "howto": "Suivez nos guides",
     "or": "ou",
@@ -361,34 +344,45 @@
       "required": "Requis",
       "website": "Entrer une URL valide"
     },
-    "noteDescription": {
-      "pre": "Soumets ta bibliothèque pour l'inclure au ",
-      "link": "dépôt de bibliothèque publique",
-      "post": "pour permettre son utilisation par autrui dans leurs dessins."
-    },
-    "noteGuidelines": {
-      "pre": "La bibliothèque doit d'abord être approuvée manuellement. Veuillez lire les ",
-      "link": "lignes directrices",
-      "post": " avant de la soumettre. Vous aurez besoin d'un compte GitHub pour communiquer et apporter des modifications si demandé, mais ce n'est pas obligatoire."
-    },
-    "noteLicense": {
-      "pre": "En soumettant, vous acceptez que la bibliothèque soit publiée sous la ",
-      "link": "Licence MIT, ",
-      "post": "ce qui en gros signifie que tout le monde peut l'utiliser sans restrictions."
-    },
+    "noteDescription": "Soumets ta bibliothèque pour l'inclure au <link>dépôt de bibliothèque publique</link>pour permettre son utilisation par autrui dans leurs dessins.",
+    "noteGuidelines": "La bibliothèque doit d'abord être approuvée manuellement. Veuillez lire les <link>lignes directrices</link> avant de la soumettre. Vous aurez besoin d'un compte GitHub pour communiquer et apporter des modifications si demandé, mais ce n'est pas obligatoire.",
+    "noteLicense": "En soumettant, vous acceptez que la bibliothèque soit publiée sous la <link>Licence MIT, </link>ce qui en gros signifie que tout le monde peut l'utiliser sans restrictions.",
     "noteItems": "Chaque élément de la bibliothèque doit avoir son propre nom afin qu'il soit filtrable. Les éléments de bibliothèque suivants seront inclus :",
     "atleastOneLibItem": "Veuillez sélectionner au moins un élément de bibliothèque pour commencer",
     "republishWarning": "Remarque : certains des éléments sélectionnés sont marqués comme étant déjà publiés/soumis. Vous devez uniquement resoumettre des éléments lors de la mise à jour d'une bibliothèque ou d'une soumission existante."
   },
   "publishSuccessDialog": {
     "title": "Bibliothèque soumise",
-    "content": "Merci {{authorName}}. Votre bibliothèque a été soumise pour examen. Vous pouvez suivre le statut",
-    "link": "ici"
+    "content": "Merci {{authorName}}. Votre bibliothèque a été soumise pour examen. Vous pouvez suivre le statut<link>ici</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Réinitialiser la bibliothèque",
     "removeItemsFromLib": "Enlever les éléments sélectionnés de la bibliothèque"
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "Vos dessins sont chiffrés de bout en bout, les serveurs d'Excalidraw ne les verront jamais.",
     "link": "Article de blog sur le chiffrement de bout en bout dans Excalidraw"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "Utiliser {{shortcut}} pour coller comme un seul élément,\nou coller dans un éditeur de texte existant"
   },
   "colors": {
-    "ffffff": "Blanc",
-    "f8f9fa": "Gris 0",
-    "f1f3f5": "Gris 1",
-    "fff5f5": "Rouge 0",
-    "fff0f6": "Rose 0",
-    "f8f0fc": "Mauve 0",
-    "f3f0ff": "Violet 0",
-    "edf2ff": "Indigo 0",
-    "e7f5ff": "Bleu 0",
-    "e3fafc": "Cyan 0",
-    "e6fcf5": "Turquoise 0",
-    "ebfbee": "Vert 0",
-    "f4fce3": "Citron vert 0",
-    "fff9db": "Jaune 0",
-    "fff4e6": "Orange 0",
     "transparent": "Transparent",
-    "ced4da": "Gris 4",
-    "868e96": "Gris 6",
-    "fa5252": "Rouge 6",
-    "e64980": "Rose 6",
-    "be4bdb": "Mauve 6",
-    "7950f2": "Violet 6",
-    "4c6ef5": "Indigo 6",
-    "228be6": "Bleu 6",
-    "15aabf": "Cyan 6",
-    "12b886": "Turquoise 6",
-    "40c057": "Vert 6",
-    "82c91e": "Citron vert 6",
-    "fab005": "Jaune 6",
-    "fd7e14": "Orange 6",
-    "000000": "Noir",
-    "343a40": "Gris 8",
-    "495057": "Gris 7",
-    "c92a2a": "Rouge 9",
-    "a61e4d": "Rose 9",
-    "862e9c": "Mauve 9",
-    "5f3dc4": "Violet 9",
-    "364fc7": "Indigo 9",
-    "1864ab": "Bleu 9",
-    "0b7285": "Cyan 9",
-    "087f5b": "Turquoise 9",
-    "2b8a3e": "Vert 9",
-    "5c940d": "Citron vert 9",
-    "e67700": "Jaune 9",
-    "d9480f": "Orange 9"
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "Choisissez un outil et commencez à dessiner !",
       "helpHint": "Raccourcis et aide"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/gl-ES.json b/src/locales/gl-ES.json
index 5571f3f15..7522860a6 100644
--- a/src/locales/gl-ES.json
+++ b/src/locales/gl-ES.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Triángulo",
     "fontSize": "Tamaño da fonte",
     "fontFamily": "Tipo de fonte",
-    "onlySelected": "Só seleccionados",
-    "withBackground": "Fondo",
-    "exportEmbedScene": "Inserir escena",
-    "exportEmbedScene_details": "Os datos da escena serán gardados no ficheiro PNG/SVG exportado polo que a escena poderá ser restaurada dende el. Isto aumentará o tamaño do ficheiro exportado.",
     "addWatermark": "Engadir \"Feito con Excalidraw\"",
     "handDrawn": "Debuxado a man",
     "normal": "Normal",
@@ -54,6 +50,7 @@
     "veryLarge": "Moi grande",
     "solid": "Sólido",
     "hachure": "Folleto",
+    "zigzag": "",
     "crossHatch": "Raiado transversal",
     "thin": "Estreito",
     "bold": "Groso",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Virar horizontalmente",
     "flipVertical": "Virar verticalmente",
     "viewMode": "Modo de visualización",
-    "toggleExportColorScheme": "Alternar esquema de cores de exportación",
     "share": "Compartir",
     "showStroke": "Mostrar selector de cores do trazo",
     "showBackground": "Mostrar selector de cores do fondo",
@@ -127,7 +123,10 @@
       "unlockAll": "Desbloquear todo"
     },
     "statusPublished": "Publicado",
-    "sidebarLock": "Manter a barra lateral aberta"
+    "sidebarLock": "Manter a barra lateral aberta",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "Aínda non hai elementos engadidos...",
@@ -139,11 +138,7 @@
     "exportJSON": "Exportar a arquivo",
     "exportImage": "Exportar imaxe...",
     "export": "Gardar en...",
-    "exportToPng": "Exportar a PNG",
-    "exportToSvg": "Exportar a SVG",
     "copyToClipboard": "Copiar ao portapapeis",
-    "copyPngToClipboard": "Copiar PNG ao portapapeis",
-    "scale": "Escala",
     "save": "Gardar no ficheiro actual",
     "saveAs": "Gardar como",
     "load": "Abrir",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Non se puido gardar na base de datos. Se o problema persiste, deberías gardar o teu arquivo de maneira local para asegurarte de non perdelo teu traballo.",
     "collabSaveFailed_sizeExceeded": "Non se puido gardar na base de datos, o lenzo semella demasiado grande. Deberías gardar o teu arquivo de maneira local para asegurarte de non perdelo teu traballo.",
     "brave_measure_text_error": {
-      "start": "Semella que estás usando o navegador Brave coa opción",
-      "aggressive_block_fingerprint": "Aggressively Block Fingerprinting",
-      "setting_enabled": "activada",
-      "break": "Isto podería provocar unha ruptura dos",
-      "text_elements": "Elementos de Texto",
-      "in_your_drawings": "nos seus debuxos",
-      "strongly_recommend": "Recomendámoslle encarecidamente que desactive esa opción. Pode seguir",
-      "steps": "estes pasos",
-      "how": "sobre como facelo",
-      "disable_setting": " Se ao desactivar esta opción non se arranxa o problema ao mostrar os elementos de texto, por favor abra unha",
-      "issue": "issue",
-      "write": "no noso GitHub, ou escríbenos ao",
-      "discord": "Discord"
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Modo lapis - evitar o contacto",
     "link": "Engadir/ Actualizar ligazón para a forma seleccionada",
     "eraser": "Goma de borrar",
-    "hand": "Man (ferramenta de desprazamento)"
+    "frame": "",
+    "hand": "Man (ferramenta de desprazamento)",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Accións do lenzo",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Consello: Probe a acercar un pouco os elementos máis afastados."
   },
   "errorSplash": {
-    "headingMain_pre": "Atopouse un erro. Probe ",
-    "headingMain_button": "recargando a páxina.",
-    "clearCanvasMessage": "Se recargar non funcionou, probe ",
-    "clearCanvasMessage_button": "limpando o lenzo.",
+    "headingMain": "Atopouse un erro. Probe <button>recargando a páxina.</button>",
+    "clearCanvasMessage": "Se recargar non funcionou, probe <button>limpando o lenzo.</button>",
     "clearCanvasCaveat": " Isto resultará nunha perda do seu traballo ",
-    "trackedToSentry_pre": "O erro con identificador ",
-    "trackedToSentry_post": " foi rastrexado no noso sistema.",
-    "openIssueMessage_pre": "Fomos moi cautelosos de non incluír a información da súa escena no erro. Se a súa escena non é privada, por favor, considere o seguimento do noso ",
-    "openIssueMessage_button": "rastrexador de erros.",
-    "openIssueMessage_post": " Por favor inclúa a seguinte información copiándoa e pegándoa na issue de Github.",
+    "trackedToSentry": "O erro con identificador {{eventId}} foi rastrexado no noso sistema.",
+    "openIssueMessage": "Fomos moi cautelosos de non incluír a información da súa escena no erro. Se a súa escena non é privada, por favor, considere o seguimento do noso <button>rastrexador de erros.</button> Por favor inclúa a seguinte información copiándoa e pegándoa na issue de Github.",
     "sceneContent": "Contido da escena:"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "Obrigatorio",
       "website": "Introduza unha URL válida"
     },
-    "noteDescription": {
-      "pre": "Envíe a súa biblioteca para que sexa incluída no ",
-      "link": "repositorio público de bibliotecas",
-      "post": "para que outra xente a poida usar nos seus debuxos."
-    },
-    "noteGuidelines": {
-      "pre": "A biblioteca necesita ser aprobada manualmente primeiro. Por favor, lea as ",
-      "link": "normas",
-      "post": " antes de ser enviado. Necesitarás unha conta de GitHub para comunicarte ou facer cambios se se solicitan, pero non é estritamente necesario."
-    },
-    "noteLicense": {
-      "pre": "Ao enviar, estás de acordo con que a biblioteca sexa publicada baixo a ",
-      "link": "Licenza MIT, ",
-      "post": "o cal significa que, en resumo, calquera pode usalo sen restricións."
-    },
+    "noteDescription": "Envíe a súa biblioteca para que sexa incluída no <link>repositorio público de bibliotecas</link>para que outra xente a poida usar nos seus debuxos.",
+    "noteGuidelines": "A biblioteca necesita ser aprobada manualmente primeiro. Por favor, lea as <link>normas</link> antes de ser enviado. Necesitarás unha conta de GitHub para comunicarte ou facer cambios se se solicitan, pero non é estritamente necesario.",
+    "noteLicense": "Ao enviar, estás de acordo con que a biblioteca sexa publicada baixo a <link>Licenza MIT, </link>o cal significa que, en resumo, calquera pode usalo sen restricións.",
     "noteItems": "Cada elemento da biblioteca debe ter o seu nome propio para que se poida filtrar. Os seguintes elementos da biblioteca serán incluídos:",
     "atleastOneLibItem": "Por favor seleccione polo menos un elemento da biblioteca para comezar",
     "republishWarning": "Nota: algúns dos elementos seleccionados están marcados como xa publicados/enviados. Só deberías reenviar elementos cando se actualice unha biblioteca ou envío."
   },
   "publishSuccessDialog": {
     "title": "Biblioteca enviada",
-    "content": "Grazas {{authorName}}. A súa biblioteca foi enviada para ser revisada. Pode seguir o estado",
-    "link": "aquí"
+    "content": "Grazas {{authorName}}. A súa biblioteca foi enviada para ser revisada. Pode seguir o estado<link>aquí</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Restablecer biblioteca",
     "removeItemsFromLib": "Eliminar os elementos seleccionados da biblioteca"
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "Os teus debuxos están cifrados de punto a punto, polo que os servidores de Excalidraw nunca os verán.",
     "link": "Entrada do blog acerca do cifrado de punto a punto en Excalidraw"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "Usa {{shortcut}} para pegar como un único elemento\nou pega nun editor de texto existente"
   },
   "colors": {
-    "ffffff": "Branco",
-    "f8f9fa": "Gris 0",
-    "f1f3f5": "Gris 1",
-    "fff5f5": "Vermello 0",
-    "fff0f6": "Rosa 0",
-    "f8f0fc": "Uva 0",
-    "f3f0ff": "Violeta 0",
-    "edf2ff": "Índigo 0",
-    "e7f5ff": "Azul 0",
-    "e3fafc": "Ciano 0",
-    "e6fcf5": "Turquesa 0",
-    "ebfbee": "Verde 0",
-    "f4fce3": "Lima 0",
-    "fff9db": "Amarelo 0",
-    "fff4e6": "Laranxa 0",
     "transparent": "Transparente",
-    "ced4da": "Gris 4",
-    "868e96": "Gris 6",
-    "fa5252": "Vermello 6",
-    "e64980": "Rosa 6",
-    "be4bdb": "Uva 6",
-    "7950f2": "Violeta 6",
-    "4c6ef5": "Índigo 6",
-    "228be6": "Azul 6",
-    "15aabf": "Ciano 6",
-    "12b886": "Turquesa 6",
-    "40c057": "Verde 6",
-    "82c91e": "Lima 6",
-    "fab005": "Amarelo 6",
-    "fd7e14": "Laranxa 6",
-    "000000": "Negro",
-    "343a40": "Gris 8",
-    "495057": "Gris 7",
-    "c92a2a": "Vermello 9",
-    "a61e4d": "Rosa 9",
-    "862e9c": "Uva 9",
-    "5f3dc4": "Violeta 9",
-    "364fc7": "Índigo 9",
-    "1864ab": "Azul 9",
-    "0b7285": "Ciano 9",
-    "087f5b": "Turquesa 9",
-    "2b8a3e": "Verde 9",
-    "5c940d": "Lima 9",
-    "e67700": "Amarelo 9",
-    "d9480f": "Laranxa 9"
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "Escolle unha ferramenta & Comeza a debuxar!",
       "helpHint": "Atallos & axuda"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/he-IL.json b/src/locales/he-IL.json
index 810fc1776..8cdc242f0 100644
--- a/src/locales/he-IL.json
+++ b/src/locales/he-IL.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "משולש",
     "fontSize": "גודל גופן",
     "fontFamily": "גופן",
-    "onlySelected": "רק מה שנבחר",
-    "withBackground": "רקע",
-    "exportEmbedScene": "הטמעה של מידע הסצנה",
-    "exportEmbedScene_details": "הייצוא יבוצע לקובץ מסוג PNG/SVG כדי שהמידע על הסצנה ישמר בו וניתן יהיה לבצע שחזור ממנו.\nיגדיל את גודל הקובץ של הייצוא.",
     "addWatermark": "הוסף \"נוצר באמצעות Excalidraw\"",
     "handDrawn": "ציור יד",
     "normal": "רגיל",
@@ -54,6 +50,7 @@
     "veryLarge": "גדול מאוד",
     "solid": "מוצק",
     "hachure": "קווים מקבילים קצרים להצגת כיוון וחדות שיפוע במפה",
+    "zigzag": "",
     "crossHatch": "קווים מוצלבים שתי וערב",
     "thin": "דק",
     "bold": "מודגש",
@@ -99,7 +96,6 @@
     "flipHorizontal": "הפוך אופקית",
     "flipVertical": "הפוך אנכית",
     "viewMode": "מצב תצוגה",
-    "toggleExportColorScheme": "מתג ערכת צבעים לייצוא",
     "share": "שתף",
     "showStroke": "הצג בוחר צבע מברשת",
     "showBackground": "הצג בוחר צבע רקע",
@@ -127,7 +123,10 @@
       "unlockAll": "שחרור הכול"
     },
     "statusPublished": "פורסם",
-    "sidebarLock": "שמור את סרגל הצד פתוח"
+    "sidebarLock": "שמור את סרגל הצד פתוח",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "עוד לא הוספת דברים...",
@@ -139,11 +138,7 @@
     "exportJSON": "ייצא לקובץ",
     "exportImage": "ייצוא התמונה...",
     "export": "שמור ל...",
-    "exportToPng": "יצא ל PNG",
-    "exportToSvg": "יצא ל SVG",
     "copyToClipboard": "העתק ללוח",
-    "copyPngToClipboard": "העתק PNG ללוח",
-    "scale": "קנה מידה",
     "save": "שמור לקובץ נוכחי",
     "saveAs": "שמירה בשם",
     "load": "פתח",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "לא הצלחתי להתחבר למסד הנתונים האחורי. אם הבעיה ממשיכה, כדאי שתשמור את הקובץ מקומית כדי לוודא שלא תאבד את העבודה שלך.",
     "collabSaveFailed_sizeExceeded": "לא הצלחתי לשמור למסד הנתונים האחורי, נראה שהקנבס שלך גדול מדי. כדאי שתשמור את הקובץ מקומית כדי לוודא שלא תאבד את העבודה שלך.",
     "brave_measure_text_error": {
-      "start": "נראה שאתה משתמש בדפדפן Brave עם ה-",
-      "aggressive_block_fingerprint": "חסימת Fingerprinting אגרסיבית",
-      "setting_enabled": "ההגדרה מופעלת",
-      "break": "זה יכול לגרום לבעיה ב-",
-      "text_elements": "רכיבי טקסט",
-      "in_your_drawings": "בציורים שלך",
-      "strongly_recommend": "אנו ממליצים בחום לנטרל את ההגדרה הזו. אתה יכול לעקוב",
-      "steps": "הצעדים הבאים",
-      "how": "כיצד לעשות את זה",
-      "disable_setting": " אם נטרול ההגדרה לא מתקן את תצוגת רכיבי הטקסט, אנא פתח",
-      "issue": "בעיה",
-      "write": "ב- GitHub שלנו, או כתוב לנו ב-",
-      "discord": "Discord"
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "מצב עט - מנע נגיעה",
     "link": "הוספה/עדכון קישור של הצורה שנבחרה",
     "eraser": "מחק",
-    "hand": "יד (כלי הזזה)"
+    "frame": "",
+    "hand": "יד (כלי הזזה)",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "פעולות קנבאס",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "טיפ: נסה להזיז את הרכיבים הרחוקים ביותר מעט קרוב יותר האחד לשני."
   },
   "errorSplash": {
-    "headingMain_pre": "אירעה שגיאה. נסה ",
-    "headingMain_button": "טוען את העמוד מחדש.",
+    "headingMain": "",
     "clearCanvasMessage": "אם טעינה מחדש לא עובדת, נסה ",
-    "clearCanvasMessage_button": "מנקה את הקנבאס.",
     "clearCanvasCaveat": " זה יגרום לאובדן העבודה ",
-    "trackedToSentry_pre": "השגיאה עם מזהה ",
-    "trackedToSentry_post": " נמצאה במערכת שלנו.",
-    "openIssueMessage_pre": "נזהרנו מאוד שלא לכלול מידע מהקנבאס שלך בשגיאה. אם המידע בקנבאס אינו אישי, שקול לבצע מעקב אחר הטיפול שלנו ",
-    "openIssueMessage_button": "מעקב באגים.",
-    "openIssueMessage_post": " בבקשה כלול את המידע מטה באמצעות העתקתה שלו, והדבקה שלו ב- GitHub Issue.",
+    "trackedToSentry": "",
+    "openIssueMessage": "",
     "sceneContent": "תוכן הקנבאס:"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "נדרש",
       "website": "הזינו כתובת URL תקינה"
     },
-    "noteDescription": {
-      "pre": "הגש את הספריה שלך להכללתה ב ",
-      "link": "מאגר הספריה הציבורית",
-      "post": "לשימושם של אנשים אחרים בציורים שלהם."
-    },
-    "noteGuidelines": {
-      "pre": "הספריה צריכה לקבל אישור ידני קודם לכן. אנא קרא את ",
-      "link": "הנחיות",
-      "post": " לפני השליחה. אתה תצטרך לחשבון GitHub כדי לתקשר ולבצע שינויים אם תתבקש, אבל זה לא דרישה הכרחית."
-    },
-    "noteLicense": {
-      "pre": "על ידי שליחה, אתה מסכים שהסיפריה תפורסם תחת ה- ",
-      "link": "רישיון MIT, ",
-      "post": "שאומר בקצרה, שכל אחד יכול לעשות בהם שימוש ללא מגבלות."
-    },
+    "noteDescription": "",
+    "noteGuidelines": "",
+    "noteLicense": "",
     "noteItems": "לכל פריט בסיפריה חייב להיות שם כדי שאפשר יהיה לסנן. הפריטי סיפריה הבאים יהיו כלולים:",
     "atleastOneLibItem": "אנא בחר לפחות פריט אחד מספריה כדי להתחיל",
     "republishWarning": "הערה: חלק מהפריטים שבחרת מסומנים ככאלו שכבר פורסמו/נשלחו. אתה צריך לשלוח פריטים מחדש כאשר אתה מעדכן ספריה או הגשה קיימים."
   },
   "publishSuccessDialog": {
     "title": "הספריה הוגשה",
-    "content": "תודה {{authorName}}. הספריה שלך נשלחה לבחינה. תוכל לעקוב אחרי סטטוס הפרסום",
-    "link": "כאן"
+    "content": "תודה {{authorName}}. הספריה שלך נשלחה לבחינה. תוכל לעקוב אחרי סטטוס הפרסום"
   },
   "confirmDialog": {
     "resetLibrary": "איפוס ספריה",
     "removeItemsFromLib": "הסר את הפריטים הנבחרים מהספריה"
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "הציורים שלך מוצפנים מקצה לקצה כך שהשרתים של Excalidraw לא יראו אותם לעולם.",
     "link": "פוסט בבלוג על הצפנה מקצה לקצב ב-Excalidraw"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "השתמש ב- {{shortcut}} כדי להדביק כפריט יחיד,\nאו הדבק לתוך עורך טקסט קיים"
   },
   "colors": {
-    "ffffff": "לבן",
-    "f8f9fa": "אפור 0",
-    "f1f3f5": "אפור 1",
-    "fff5f5": "אדום 0",
-    "fff0f6": "ורוד 0",
-    "f8f0fc": "ענבים 0",
-    "f3f0ff": "סגול 0",
-    "edf2ff": "כחול כהה 0",
-    "e7f5ff": "כחול 0",
-    "e3fafc": "טורקיז 0",
-    "e6fcf5": "ירקרק 0",
-    "ebfbee": "ירוק 0",
-    "f4fce3": "ליים 0",
-    "fff9db": "צהוב",
-    "fff4e6": "כתום 0",
     "transparent": "שקוף",
-    "ced4da": "אפור 4",
-    "868e96": "אפור 6",
-    "fa5252": "אדום 6",
-    "e64980": "ורוד 6",
-    "be4bdb": "ענבים 6",
-    "7950f2": "סגול 6",
-    "4c6ef5": "כחול כהה 6",
-    "228be6": "כחול 6",
-    "15aabf": "טורקיז 6",
-    "12b886": "ירקרק 6",
-    "40c057": "ירוק 6",
-    "82c91e": "ליים 6",
-    "fab005": "צהוב 6",
-    "fd7e14": "כתום 6",
-    "000000": "שחור",
-    "343a40": "אפור 8",
-    "495057": "אפור 7",
-    "c92a2a": "אדום 9",
-    "a61e4d": "ורוד 9",
-    "862e9c": "ענבים 9",
-    "5f3dc4": "סגול 9",
-    "364fc7": "כחול כהה 9",
-    "1864ab": "כחול 9",
-    "0b7285": "טורקיז 9",
-    "087f5b": "ירוק-כחול 9",
-    "2b8a3e": "ירוק 9",
-    "5c940d": "ליים 9",
-    "e67700": "צהוב 9",
-    "d9480f": "כתום 9"
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "בחר כלי & והתחל לצייר!",
       "helpHint": "קיצורים & עזרה"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/hi-IN.json b/src/locales/hi-IN.json
index 77d6dae2d..66b517c0d 100644
--- a/src/locales/hi-IN.json
+++ b/src/locales/hi-IN.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "त्रिकोण",
     "fontSize": "फ़ॉन्ट का आकार",
     "fontFamily": "फ़ॉन्ट का परिवार",
-    "onlySelected": "केवल चयनित",
-    "withBackground": "पृष्ठभूमि",
-    "exportEmbedScene": "",
-    "exportEmbedScene_details": "निर्यात एम्बेड दृश्य विवरण",
     "addWatermark": "ऐड \"मेड विथ एक्सकैलिडराव\"",
     "handDrawn": "हाथ से बनाया हुआ",
     "normal": "साधारण",
@@ -54,6 +50,7 @@
     "veryLarge": "बहुत बड़ा",
     "solid": "दृढ़",
     "hachure": "हैशूर",
+    "zigzag": "तेढ़ी मेढ़ी",
     "crossHatch": "क्रॉस हैच",
     "thin": "पतला",
     "bold": "मोटा",
@@ -99,7 +96,6 @@
     "flipHorizontal": "दायें बायें पलटे",
     "flipVertical": "ऊपर नीचे पलटे",
     "viewMode": "अलग अलग देखें",
-    "toggleExportColorScheme": "",
     "share": "शेयर करें",
     "showStroke": "",
     "showBackground": "पृष्ठभूमि रंग वरक़ दिखाये",
@@ -127,7 +123,10 @@
       "unlockAll": "सब ताले के बाहर निकाले"
     },
     "statusPublished": "प्रकाशित",
-    "sidebarLock": "साइडबार खुला रखे."
+    "sidebarLock": "साइडबार खुला रखे.",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": "चित्रफलक से रंग चुने"
   },
   "library": {
     "noItems": "अभी तक कोई आइटम जोडा नहीं गया.",
@@ -139,11 +138,7 @@
     "exportJSON": "",
     "exportImage": "प्रतिमा निर्यात करे...",
     "export": "यंहा सुरक्षित करे...",
-    "exportToPng": "पीएनजी के रूप में निर्यात करे",
-    "exportToSvg": "Svg के रूप में निर्यात करे",
     "copyToClipboard": "क्लिपबोर्ड पर प्रतिलिपि बनाएँ",
-    "copyPngToClipboard": "क्लिपबोर्ड पर कॉपी करें,पीएनजी के रूप में",
-    "scale": "पैमाना",
     "save": "",
     "saveAs": "सेव करे इस तरह",
     "load": "खोलें",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "किसी कारण वश अंदरूनी डेटाबेस में सहेजा नहीं जा सका। यदि समस्या बनी रहती है, तो किये काम को खोने न देने के लिये अपनी फ़ाइल को स्थानीय रूप से सहेजे।",
     "collabSaveFailed_sizeExceeded": "लगता है कि पृष्ठ तल काफ़ी बड़ा है, इस्कारण अंदरूनी डेटाबेस में सहेजा नहीं जा सका। किये काम को खोने न देने के लिये अपनी फ़ाइल को स्थानीय रूप से सहेजे।",
     "brave_measure_text_error": {
-      "start": "ऐसा लगता है कि आप ब्रेव ब्राउज़र का उपयोग कर रहे है, उसके साथ",
-      "aggressive_block_fingerprint": "उग्रतापूर्वक उंगलियों के निशान रोकने की",
-      "setting_enabled": "सेटिंग सक्रिय की गई है।",
-      "break": "इसके परिणाम स्वरूम टूट सकता है यह",
-      "text_elements": "मूल पाठ अवयव टूट सकते हैं",
-      "in_your_drawings": "आपके चित्र में उपस्थित",
-      "strongly_recommend": "हमारा शशक्त अनुरोध इस सेटिंग्स को अक्षम करने का है. आप",
-      "steps": "इन दिए हुए स्टेप्स को अनुकरीत करके देख सकते है कि",
-      "how": "ये कैसे करे",
-      "disable_setting": " यदि इन सेटिंग्स को निष्क्रिय करने पर भी, पाठ्य दिखना ठीक न हो तो",
-      "issue": "समस्या",
-      "write": "हमारे \"GitHub\" पर, अथवा",
-      "discord": "\"Discord\" पर लिख सकते हैं."
+      "line1": "लगता है कि आप Brave ब्राउज़र का उपयोग कर रहे और साथ में <bold>आक्रामक उँगलियो के छाप </bold> का चयन किया हुवा है",
+      "line2": "यह आपके चित्रों के <bold>पाठ तत्वों</bold>को खंडित कर सकता हैं",
+      "line3": "हमें आपसे ठोस आग्रह है की आप सेट्टिंग में इस विकल्प का चयन ना करे.<link> इस अनुक्रम </link> का पालन करके इसका पता लगा सकते हैं",
+      "line4": "यदि इस सेटिंग्स को अक्षम करने पर भी पृष्ठ ठीक नहीं दिखता हो तो, हमारे GitHub पर एक <issueLink>मुद्दा प्रस्तुत</issueLink> करे, या हमें <discordLink>डिस्कोर्ड</discordLink> पर लिखित सम्पर्क करें"
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "पेन का मोड - स्पर्श टाले",
     "link": "",
     "eraser": "रबड़",
-    "hand": "हाथ ( खिसकाने का औज़ार)"
+    "frame": "",
+    "hand": "हाथ ( खिसकाने का औज़ार)",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "कैनवास क्रिया",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "कैनवास बहुत बड़ा टिप"
   },
   "errorSplash": {
-    "headingMain_pre": "एक त्रुटि का सामना करना पड़ा। प्रयत्न ",
-    "headingMain_button": "इस पृष्ठ को पुनः लोड करें",
-    "clearCanvasMessage": "यदि पुनः लोड करना काम नहीं करता है, तो प्रयास करें ",
-    "clearCanvasMessage_button": "कैनवास साफ करना।",
+    "headingMain": "एक त्रुटि का सामना करना पड़ा। प्रयत्न <button>इस पृष्ठ को पुनः लोड करें</button>",
+    "clearCanvasMessage": "यदि पुनः लोड करना काम नहीं करता है, तो प्रयास करें <button>कैनवास साफ करना।</button>",
     "clearCanvasCaveat": " इससे काम का नुकसान होगा ",
-    "trackedToSentry_pre": "पहचानकर्ता के साथ त्रुटि ",
-    "trackedToSentry_post": " हमारे सिस्टम पर नज़र रखी गई थी।",
-    "openIssueMessage_pre": "हम बहुत सतर्क थे कि त्रुटि पर आपकी दृश्य जानकारी शामिल न करें। यदि आपका दृश्य निजी नहीं है, तो कृपया हमारे बारे में विचार करें ",
-    "openIssueMessage_button": "बग ट्रैकर",
-    "openIssueMessage_post": " कृपया GitHub मुद्दे को कॉपी और पेस्ट करके नीचे दी गई जानकारी शामिल करें।",
+    "trackedToSentry": "पहचानकर्ता के साथ त्रुटि {{eventId}} हमारे सिस्टम पर नज़र रखी गई थी।",
+    "openIssueMessage": "हम बहुत सतर्क थे कि त्रुटि पर आपकी दृश्य जानकारी शामिल न करें। यदि आपका दृश्य निजी नहीं है, तो कृपया हमारे बारे में विचार करें <button>बग ट्रैकर</button> कृपया GitHub मुद्दे को कॉपी और पेस्ट करके नीचे दी गई जानकारी शामिल करें।",
     "sceneContent": "दृश्य सामग्री:"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "",
       "website": "मान्य URL प्रविष्ट करें"
     },
-    "noteDescription": {
-      "pre": "संग्रह सम्मिलित करने हेतु प्रस्तुत करें ",
-      "link": "सार्वजनिक संग्रहालय",
-      "post": "अन्य वक्तियों को उनके चित्रकारी में उपयोग के लिये"
-    },
-    "noteGuidelines": {
-      "pre": "संग्रह को पहले स्वीकृति आवश्यक कृपया यह पढ़ें ",
-      "link": "दिशा-निर्देश",
-      "post": ""
-    },
-    "noteLicense": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
+    "noteDescription": "संग्रह सम्मिलित करने हेतु प्रस्तुत करें <link>सार्वजनिक संग्रहालय</link>अन्य वक्तियों को उनके चित्रकारी में उपयोग के लिये",
+    "noteGuidelines": "संग्रह को पहले स्वीकृति आवश्यक कृपया यह पढ़ें <link>दिशा-निर्देश</link>",
+    "noteLicense": "जमा करके, आप सहमत हैं कि संग्रहण को <link>MIT लाइसेंस</link> के तहत प्रकाशित किया जाएगा, जिसका संक्षिप्त अर्थ है कि कोई भी बिना किसी प्रतिबंध के उनका उपयोग कर सकता है।",
     "noteItems": "",
     "atleastOneLibItem": "",
     "republishWarning": "टिप्पणी: कुछ चुने हुवे आइटम पहले ही प्रकाशित/प्रस्तुत किए जा चुके हैं। किसी प्रकाशित संग्रह को अद्यतन करते समय या पहले से प्रस्तुत आइटम को पुन्हा प्रस्तुत करते समय, आप बस उसे केवल अद्यतन करें ।"
   },
   "publishSuccessDialog": {
     "title": "",
-    "content": "",
-    "link": ""
+    "content": "{{authorName}} धन्यवाद. आपका संग्रहण समीक्षा के लिए दर्ज हो चुका है. समीक्षा स्थिति <link>यहाँ</link>जान सकते हैं."
   },
   "confirmDialog": {
     "resetLibrary": "",
     "removeItemsFromLib": ""
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "आपके चित्र अंत-से-अंत एन्क्रिप्टेड हैं, इसलिए एक्सक्लूसिव्रॉव के सर्वर उन्हें कभी नहीं देखेंगे।",
     "link": ""
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "एक अवयव के रूप में चिपकाने के लिए {{shortcut}} का उपयोग करें,\nया किसी मौजूदा पाठ संपादक में चिपकायें"
   },
   "colors": {
-    "ffffff": "सफेद",
-    "f8f9fa": "",
-    "f1f3f5": "",
-    "fff5f5": "",
-    "fff0f6": "",
-    "f8f0fc": "अंगूरी 0",
-    "f3f0ff": "",
-    "edf2ff": "नील 0",
-    "e7f5ff": "नीला 0",
-    "e3fafc": "",
-    "e6fcf5": "",
-    "ebfbee": "",
-    "f4fce3": "",
-    "fff9db": "",
-    "fff4e6": "",
     "transparent": "",
-    "ced4da": "",
-    "868e96": "",
-    "fa5252": "",
-    "e64980": "",
-    "be4bdb": "",
-    "7950f2": "",
-    "4c6ef5": "",
-    "228be6": "",
-    "15aabf": "",
-    "12b886": "",
-    "40c057": "",
-    "82c91e": "",
-    "fab005": "",
-    "fd7e14": "",
-    "000000": "",
-    "343a40": "",
-    "495057": "",
-    "c92a2a": "",
-    "a61e4d": "",
-    "862e9c": "",
-    "5f3dc4": "",
-    "364fc7": "",
-    "1864ab": "",
-    "0b7285": "आसमानी",
-    "087f5b": "",
-    "2b8a3e": "हरा",
-    "5c940d": "",
-    "e67700": "पीला",
-    "d9480f": "नारंगी"
+    "black": "काला",
+    "white": "सफ़ेद",
+    "red": "लाल",
+    "pink": "गुलाबी",
+    "grape": "अंगूरी",
+    "violet": "जामुनी",
+    "gray": "गहरा",
+    "blue": "नीला",
+    "cyan": "आसमानी",
+    "teal": "हरा-नीला",
+    "green": "हरा",
+    "yellow": "पीला",
+    "orange": "नारंगी",
+    "bronze": "कांस्य"
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "एक औजार चुने और चित्रकारी प्रारंभ करे!",
       "helpHint": "शॉर्ट्कट और सहाय्य"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "अधिकांश उपयोगित रंग",
+    "colors": "रंग",
+    "shades": "छाया",
+    "hexCode": "हेक्स कोड",
+    "noShades": "इस रंग की कोई छाया उपलब्ध नहीं हैं"
   }
 }
diff --git a/src/locales/hu-HU.json b/src/locales/hu-HU.json
index d514520ed..2e22ee296 100644
--- a/src/locales/hu-HU.json
+++ b/src/locales/hu-HU.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Háromszög",
     "fontSize": "Betűméret",
     "fontFamily": "Betűkészlet család",
-    "onlySelected": "Csak a kijelölt",
-    "withBackground": "Háttér",
-    "exportEmbedScene": "Jelenet beágyazása",
-    "exportEmbedScene_details": "A jelenetet leíró adatok hozzá lesznek adva a PNG/SVG fájlhoz, így a jelenetet vissza lehet majd tölteni belőle. Ez megnöveli a fájl méretét.",
     "addWatermark": "Add hozzá, hogy \"Excalidraw-val készült\"",
     "handDrawn": "Kézzel rajzolt",
     "normal": "Normál",
@@ -54,6 +50,7 @@
     "veryLarge": "Nagyon nagy",
     "solid": "Kitöltött",
     "hachure": "Vonalkázott",
+    "zigzag": "",
     "crossHatch": "Keresztcsíkozott",
     "thin": "Vékony",
     "bold": "Félkövér",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Vízszintes tükrözés",
     "flipVertical": "Függőleges tükrözés",
     "viewMode": "Nézet",
-    "toggleExportColorScheme": "Exportált színséma váltása",
     "share": "Megosztás",
     "showStroke": "Körvonal színválasztó megjelenítése",
     "showBackground": "Háttérszín-választó megjelenítése",
@@ -127,7 +123,10 @@
       "unlockAll": ""
     },
     "statusPublished": "",
-    "sidebarLock": ""
+    "sidebarLock": "",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "",
@@ -139,11 +138,7 @@
     "exportJSON": "Exportálás fájlba",
     "exportImage": "",
     "export": "",
-    "exportToPng": "Exportálás PNG-be",
-    "exportToSvg": "Exportálás SVG-be",
     "copyToClipboard": "Vágólapra másolás",
-    "copyPngToClipboard": "PNG másolása a vágólapra",
-    "scale": "Nagyítás",
     "save": "Mentés az aktuális fájlba",
     "saveAs": "Mentés másként",
     "load": "",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "",
     "collabSaveFailed_sizeExceeded": "",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "",
     "link": "Hivatkozás hozzáadása/frissítése a kiválasztott alakzathoz",
     "eraser": "",
-    "hand": ""
+    "frame": "",
+    "hand": "",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Vászon műveletek",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Tipp: próbáld meg a legtávolabbi elemeket közelebb hozni egy máshoz."
   },
   "errorSplash": {
-    "headingMain_pre": "Hiba történt. Próbáld ",
-    "headingMain_button": "újratölteni az oldalt.",
-    "clearCanvasMessage": "Ha az újratöltés nem működik, próbáld ",
-    "clearCanvasMessage_button": "letörölni a vászont.",
+    "headingMain": "Hiba történt. Próbáld <button>újratölteni az oldalt.</button>",
+    "clearCanvasMessage": "Ha az újratöltés nem működik, próbáld <button>letörölni a vászont.</button>",
     "clearCanvasCaveat": " Ezzel az eddigi munka elveszik ",
-    "trackedToSentry_pre": "A hibakód azonosítóval ",
-    "trackedToSentry_post": " nyomon van követve a rendszerünkben.",
-    "openIssueMessage_pre": "Vigyáztunk arra, hogy a jelenthez tartozó információ ne jelenjen meg a hibaüzenetben. Ha a jeleneted nem bizalmas, kérjük add hozzá a ",
-    "openIssueMessage_button": "hibakövető rendszerünkhöz.",
-    "openIssueMessage_post": " Kérjük, másolja be az alábbi információkat a GitHub problémába.",
+    "trackedToSentry": "A hibakód azonosítóval {{eventId}} nyomon van követve a rendszerünkben.",
+    "openIssueMessage": "Vigyáztunk arra, hogy a jelenthez tartozó információ ne jelenjen meg a hibaüzenetben. Ha a jeleneted nem bizalmas, kérjük add hozzá a <button>hibakövető rendszerünkhöz.</button> Kérjük, másolja be az alábbi információkat a GitHub problémába.",
     "sceneContent": "Jelenet tartalma:"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "Kötelező",
       "website": "Adj meg egy érvényes URL-t"
     },
-    "noteDescription": {
-      "pre": "Küld be könyvtáradat, hogy bekerüljön a ",
-      "link": "nyilvános könyvtár tárolóba",
-      "post": "hogy mások is felhasználhassák a rajzaikban."
-    },
-    "noteGuidelines": {
-      "pre": "A könyvtárat először manuálisan kell jóváhagyni. Kérjük, olvassa el a ",
-      "link": "segédletet",
-      "post": " benyújtása előtt. Szüksége lesz egy GitHub-fiókra a kommunikációhoz és a módosításokhoz, ha kérik, de ez nem feltétlenül szükséges."
-    },
-    "noteLicense": {
-      "pre": "A beküldéssel elfogadja, hogy a könyvtár a következő alatt kerül közzétételre ",
-      "link": "MIT Licensz ",
-      "post": "ami röviden azt jelenti, hogy bárki korlátozás nélkül használhatja őket."
-    },
+    "noteDescription": "Küld be könyvtáradat, hogy bekerüljön a <link>nyilvános könyvtár tárolóba</link>hogy mások is felhasználhassák a rajzaikban.",
+    "noteGuidelines": "A könyvtárat először manuálisan kell jóváhagyni. Kérjük, olvassa el a <link>segédletet</link> benyújtása előtt. Szüksége lesz egy GitHub-fiókra a kommunikációhoz és a módosításokhoz, ha kérik, de ez nem feltétlenül szükséges.",
+    "noteLicense": "A beküldéssel elfogadja, hogy a könyvtár a következő alatt kerül közzétételre <link>MIT Licensz </link>ami röviden azt jelenti, hogy bárki korlátozás nélkül használhatja őket.",
     "noteItems": "Minden könyvtárelemnek saját nevével kell rendelkeznie, hogy szűrhető legyen. A következő könyvtári tételek kerülnek bele:",
     "atleastOneLibItem": "A kezdéshez válassz ki legalább egy könyvtári elemet",
     "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "A könyvtár beküldve",
-    "content": "Köszönjük {{authorName}}. Könyvtáradat elküldtük felülvizsgálatra. Nyomon követheted az állapotot",
-    "link": "itt"
+    "content": "Köszönjük {{authorName}}. Könyvtáradat elküldtük felülvizsgálatra. Nyomon követheted az állapotot<link>itt</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Könyvtár alaphelyzetbe állítása",
     "removeItemsFromLib": "A kiválasztott elemek eltávolítása a könyvtárból"
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "A rajzaidat végpontok közötti titkosítással tároljuk, tehát az Excalidraw szervereiről se tud más belenézni.",
     "link": "Blogbejegyzés a végpontok közötti titkosításról az Excalidraw-ban"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": ""
   },
   "colors": {
-    "ffffff": "Fehér",
-    "f8f9fa": "Szürke 0",
-    "f1f3f5": "Szürke 1",
-    "fff5f5": "Piros 0",
-    "fff0f6": "Pink 0",
-    "f8f0fc": "Szőlő 0",
-    "f3f0ff": "Ibolya 0",
-    "edf2ff": "Indigó 0",
-    "e7f5ff": "Kék 0",
-    "e3fafc": "Cián 0",
-    "e6fcf5": "Kékes-zöld 0",
-    "ebfbee": "Zöld 0",
-    "f4fce3": "Lime 0",
-    "fff9db": "Sárga 0",
-    "fff4e6": "Narancs 0",
     "transparent": "Átlátszó",
-    "ced4da": "Szürke 4",
-    "868e96": "Szürke 6",
-    "fa5252": "Piros 6",
-    "e64980": "Pink 6",
-    "be4bdb": "Szőlő 6",
-    "7950f2": "Ibolya 6",
-    "4c6ef5": "Indigó 6",
-    "228be6": "Kék 6",
-    "15aabf": "Cián 6",
-    "12b886": "Kékes-zöld 6",
-    "40c057": "Zöld 6",
-    "82c91e": "Lime 6",
-    "fab005": "Sárga 6",
-    "fd7e14": "Narancs 6",
-    "000000": "Fekete",
-    "343a40": "Szürke 8",
-    "495057": "Szürke 7",
-    "c92a2a": "Piros 9",
-    "a61e4d": "Pink 9",
-    "862e9c": "Szőlő 9",
-    "5f3dc4": "Ibolya 9",
-    "364fc7": "Indigó 9",
-    "1864ab": "Kék 9",
-    "0b7285": "Cián 9",
-    "087f5b": "Kékes-zöld 9",
-    "2b8a3e": "Zöld 9",
-    "5c940d": "Lime 9",
-    "e67700": "Sárga 9",
-    "d9480f": "Narancs 9"
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "",
       "helpHint": ""
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/id-ID.json b/src/locales/id-ID.json
index 01b510fcd..8ce039700 100644
--- a/src/locales/id-ID.json
+++ b/src/locales/id-ID.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Segitiga",
     "fontSize": "Ukuran font",
     "fontFamily": "Jenis font",
-    "onlySelected": "Hanya yang Dipilih",
-    "withBackground": "Latar",
-    "exportEmbedScene": "Sematkan pemandangan",
-    "exportEmbedScene_details": "Data pemandangan akan disimpan dalam file PNG/SVG yang diekspor, sehingga pemandangan itu dapat dipulihkan darinya.\nAkan membesarkan ukuran file yang diekspor.",
     "addWatermark": "Tambahkan \"Dibuat dengan Excalidraw\"",
     "handDrawn": "Tulisan tangan",
     "normal": "Normal",
@@ -54,6 +50,7 @@
     "veryLarge": "Sangat besar",
     "solid": "Padat",
     "hachure": "Garis-garis",
+    "zigzag": "Zigzag",
     "crossHatch": "Asiran silang",
     "thin": "Lembut",
     "bold": "Tebal",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Balikkan horizontal",
     "flipVertical": "Balikkan vertikal",
     "viewMode": "Mode tampilan",
-    "toggleExportColorScheme": "Ubah skema warna ekspor",
     "share": "Bagikan",
     "showStroke": "Tampilkan garis pengambil warna",
     "showBackground": "Tampilkan latar pengambil warna",
@@ -110,7 +106,7 @@
     "increaseFontSize": "Besarkan ukuran font",
     "unbindText": "Lepas teks",
     "bindText": "Kunci teks ke kontainer",
-    "createContainerFromText": "",
+    "createContainerFromText": "Bungkus teks dalam kontainer",
     "link": {
       "edit": "Edit tautan",
       "create": "Buat tautan",
@@ -127,7 +123,10 @@
       "unlockAll": "Lepas semua"
     },
     "statusPublished": "Telah terbit",
-    "sidebarLock": "Biarkan sidebar tetap terbuka"
+    "sidebarLock": "Biarkan sidebar tetap terbuka",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "Belum ada item yang ditambahkan...",
@@ -139,11 +138,7 @@
     "exportJSON": "Ekspor ke file",
     "exportImage": "Ekspor gambar...",
     "export": "Simpan ke...",
-    "exportToPng": "Ekspor ke PNG",
-    "exportToSvg": "Ekspor ke SVG",
     "copyToClipboard": "Salin ke Papan Klip",
-    "copyPngToClipboard": "Salin PNG ke papan klip",
-    "scale": "Skala",
     "save": "Simpan ke file sekarang",
     "saveAs": "Simpan sebagai",
     "load": "Buka",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Tidak dapat menyimpan ke dalam basis data server. Jika masih berlanjut, Anda sebaiknya simpan berkas Anda secara lokal untuk memastikan pekerjaan Anda tidak hilang.",
     "collabSaveFailed_sizeExceeded": "Tidak dapat menyimpan ke dalam basis data server, tampaknya ukuran kanvas terlalu besar. Anda sebaiknya simpan berkas Anda secara lokal untuk memastikan pekerjaan Anda tidak hilang.",
     "brave_measure_text_error": {
-      "start": "Sepertinya kamu menggunakan browser Brave dengan",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "pengaturan diaktifkan",
-      "break": "",
-      "text_elements": "Elemen Teks",
-      "in_your_drawings": "dalam gambar anda",
-      "strongly_recommend": "Kami sangat menyarankan untuk mematikan pengaturan ini. Kamu dapat mengikuti",
-      "steps": "langkah-langkah ini",
-      "how": "dalam bagaimana melakukan itu",
-      "disable_setting": " Jika pengaturan ini dimatikan tidak mengatasi masalah tampilan dari elemen teks, silahkan buka",
-      "issue": "isu",
-      "write": "di GitHub kami, atau tulis kami di",
-      "discord": "Discord"
+      "line1": "Sepertinya Anda menggunkan peramban Brave dengan pengaturan <bold>Blokir Fingerprinting yang Agresif</bold> diaktifkan.",
+      "line2": "Ini dapat membuat <bold>Elemen Teks</bold> dalam gambar mu.",
+      "line3": "Kami sangat menyarankan mematikan pengaturan ini. Anda dapat mengikuti <link>langkah-langkah ini</link> untuk melakukannya.",
+      "line4": "Jika mematikan pengaturan ini tidak membenarkan tampilan elemen teks, mohon buka\n<issueLink>isu</issueLink> di GitHub kami, atau chat kami di <discordLink>Discord</discordLink>"
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Mode pena - mencegah sentuhan",
     "link": "Tambah/Perbarui tautan untuk bentuk yang dipilih",
     "eraser": "Penghapus",
-    "hand": ""
+    "frame": "",
+    "hand": "Tangan (alat panning)",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Opsi Kanvas",
@@ -245,7 +233,7 @@
     "shapes": "Bentuk"
   },
   "hints": {
-    "canvasPanning": "",
+    "canvasPanning": "Untuk memindahkan kanvas, tekan roda mouse atau spacebar sambil menyeret, atau menggunakan alat tangan",
     "linearElement": "Klik untuk memulai banyak poin, seret untuk satu baris",
     "freeDraw": "Klik dan seret, lepaskan jika Anda selesai",
     "text": "Tip: Anda juga dapat menambahkan teks dengan klik ganda di mana saja dengan alat pemilihan",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Tip: coba pindahkan elemen-terjauh lebih dekat bersama."
   },
   "errorSplash": {
-    "headingMain_pre": "Mengalami sebuah kesalahan. Cobalah ",
-    "headingMain_button": "muat ulang halaman.",
-    "clearCanvasMessage": "Jika memuat ulang tidak bekerja, cobalah ",
-    "clearCanvasMessage_button": "bersihkan canvas.",
+    "headingMain": "Mengalami sebuah kesalahan. Cobalah <button>muat ulang halaman.</button>",
+    "clearCanvasMessage": "Jika memuat ulang tidak bekerja, cobalah <button>bersihkan canvas.</button>",
     "clearCanvasCaveat": " Ini akan menghasilkan hilangnya pekerjaan ",
-    "trackedToSentry_pre": "Kesalahan dengan pengidentifikasi ",
-    "trackedToSentry_post": " dilacak di sistem kami.",
-    "openIssueMessage_pre": "Kami sangat berhati-hati untuk tidak menyertakan informasi pemandangan Anda pada kesalahan. Jika pemandangan Anda tidak bersifat pribadi, mohon pertimbangkan menindak lanjut pada ",
-    "openIssueMessage_button": "pelacak bug.",
-    "openIssueMessage_post": " Mohon sertakan informasi dibawah ini dengan menyalin dan menempelkan di Github issue.",
+    "trackedToSentry": "Kesalahan dengan pengidentifikasi {{eventId}} dilacak di sistem kami.",
+    "openIssueMessage": "Kami sangat berhati-hati untuk tidak menyertakan informasi pemandangan Anda pada kesalahan. Jika pemandangan Anda tidak bersifat pribadi, mohon pertimbangkan menindak lanjut pada <button>pelacak bug.</button> Mohon sertakan informasi dibawah ini dengan menyalin dan menempelkan di Github issue.",
     "sceneContent": "Pemandangan konten:"
   },
   "roomDialog": {
@@ -319,8 +302,8 @@
     "doubleClick": "klik-ganda",
     "drag": "seret",
     "editor": "Editor",
-    "editLineArrowPoints": "",
-    "editText": "",
+    "editLineArrowPoints": "Edit titik garis/panah",
+    "editText": "Edit teks / tambah label",
     "github": "Menemukan masalah? Kirimkan",
     "howto": "Ikuti panduan kami",
     "or": "atau",
@@ -361,34 +344,45 @@
       "required": "Dibutuhkan",
       "website": "Masukkan URL valid"
     },
-    "noteDescription": {
-      "pre": "Kirimkan pustaka Anda untuk disertakan di ",
-      "link": "repositori pustaka publik",
-      "post": "untuk orang lain menggunakannya dalam gambar mereka."
-    },
-    "noteGuidelines": {
-      "pre": "Pustaka butuh disetujui secara manual terlebih dahulu. Baca ",
-      "link": "pedoman",
-      "post": " sebelum mengirim. Anda butuh akun GitHub untuk berkomunikasi dan membuat perubahan jika dibutuhkan, tetapi tidak wajib dibutukan."
-    },
-    "noteLicense": {
-      "pre": "Dengan mengkirimkannya, Anda setuju pustaka akan diterbitkan dibawah ",
-      "link": "Lisensi MIT, ",
-      "post": "yang artinya siapa pun dapat menggunakannya tanpa batasan."
-    },
+    "noteDescription": "Kirimkan pustaka Anda untuk disertakan di <link>repositori pustaka publik</link>untuk orang lain menggunakannya dalam gambar mereka.",
+    "noteGuidelines": "Pustaka butuh disetujui secara manual terlebih dahulu. Baca <link>pedoman</link> sebelum mengirim. Anda butuh akun GitHub untuk berkomunikasi dan membuat perubahan jika dibutuhkan, tetapi tidak wajib dibutukan.",
+    "noteLicense": "Dengan mengkirimkannya, Anda setuju pustaka akan diterbitkan dibawah <link>Lisensi MIT, </link>yang artinya siapa pun dapat menggunakannya tanpa batasan.",
     "noteItems": "Setiap item pustaka harus memiliki nama, sehingga bisa disortir. Item pustaka di bawah ini akan dimasukan:",
     "atleastOneLibItem": "Pilih setidaknya satu item pustaka untuk mulai",
     "republishWarning": "Catatan: beberapa item yang dipilih telah ditandai sebagai sudah dipublikasikan/diserahkan. Anda hanya dapat menyerahkan kembali item-item ketika memperbarui pustaka atau pengumpulan."
   },
   "publishSuccessDialog": {
     "title": "Pustaka telah dikirm",
-    "content": "Terima kasih {{authorName}}. pustaka Anda telah diserahkan untuk ditinjau ulang. Anda dapat cek statusnya",
-    "link": "di sini"
+    "content": "Terima kasih {{authorName}}. pustaka Anda telah diserahkan untuk ditinjau ulang. Anda dapat cek statusnya<link>di sini</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Reset pustaka",
     "removeItemsFromLib": "Hapus item yang dipilih dari pustaka"
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "Gambar anda terenkripsi end-to-end sehingga server Excalidraw tidak akan pernah dapat melihatnya.",
     "link": "Pos blog tentang enkripsi ujung ke ujung di Excalidraw"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "Gunakan {{shortcut}} untuk menempelkan sebagai satu elemen,\natau tempelkan ke teks editor yang ada"
   },
   "colors": {
-    "ffffff": "Putih",
-    "f8f9fa": "Abu-abu 0",
-    "f1f3f5": "Abu-abu 1",
-    "fff5f5": "Merah 0",
-    "fff0f6": "Merah muda 0",
-    "f8f0fc": "Ungu 0",
-    "f3f0ff": "Violet 0",
-    "edf2ff": "Indigo 0",
-    "e7f5ff": "Biru 0",
-    "e3fafc": "Cyan 0",
-    "e6fcf5": "Teal 0",
-    "ebfbee": "Hijau 0",
-    "f4fce3": "Lime 0",
-    "fff9db": "Kuning 0",
-    "fff4e6": "Jingga 0",
     "transparent": "Transparan",
-    "ced4da": "Abu-abu 4",
-    "868e96": "Abu-abu 6",
-    "fa5252": "Merah 6",
-    "e64980": "Merah muda 6",
-    "be4bdb": "Ungu 6",
-    "7950f2": "Violet 6",
-    "4c6ef5": "Indigo 6",
-    "228be6": "Biru 6",
-    "15aabf": "Cyan 6",
-    "12b886": "Teal 6",
-    "40c057": "Hijau 6",
-    "82c91e": "Lime 6",
-    "fab005": "Kuning 6",
-    "fd7e14": "Jingga 6",
-    "000000": "Hitam",
-    "343a40": "Abu-abu 8",
-    "495057": "Abu-abu 7",
-    "c92a2a": "Merah 9",
-    "a61e4d": "Merah muda 9",
-    "862e9c": "Ungu 9",
-    "5f3dc4": "Violet 9",
-    "364fc7": "Indigo 9",
-    "1864ab": "Biru 9",
-    "0b7285": "Cyan 9",
-    "087f5b": "Teal 9",
-    "2b8a3e": "Hijau 9",
-    "5c940d": "Lime 9",
-    "e67700": "Kuning 9",
-    "d9480f": "Jingga 9"
+    "black": "Hitam",
+    "white": "Putih",
+    "red": "Merah",
+    "pink": "Pink",
+    "grape": "Ungu",
+    "violet": "Violet",
+    "gray": "Abu-abu",
+    "blue": "Biru",
+    "cyan": "Cyan",
+    "teal": "Teal",
+    "green": "Hijau",
+    "yellow": "Kuning",
+    "orange": "Jingga",
+    "bronze": "Tembaga"
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "Pilih alat & mulai menggambar!",
       "helpHint": "Pintasan & bantuan"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "Warna yang sering dipakai",
+    "colors": "Warna",
+    "shades": "Nuansa",
+    "hexCode": "Kode hexa",
+    "noShades": "Tidak ada nuansa untuk warna ini"
   }
 }
diff --git a/src/locales/it-IT.json b/src/locales/it-IT.json
index 8380fd8e5..b1ff02efe 100644
--- a/src/locales/it-IT.json
+++ b/src/locales/it-IT.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Triangolo",
     "fontSize": "Dimensione carattere",
     "fontFamily": "Carattere",
-    "onlySelected": "Solo selezionati",
-    "withBackground": "Sfondo",
-    "exportEmbedScene": "Includi scena",
-    "exportEmbedScene_details": "I dati della scena saranno salvati nel file PNG/SVG esportato in modo che la scena possa essere ripristinata da esso.\nQuesto aumenterà la dimensione del file esportato.",
     "addWatermark": "Aggiungi \"Creato con Excalidraw\"",
     "handDrawn": "A mano libera",
     "normal": "Normale",
@@ -54,6 +50,7 @@
     "veryLarge": "Molto grande",
     "solid": "Pieno",
     "hachure": "Tratteggio obliquo",
+    "zigzag": "Zig zag",
     "crossHatch": "Tratteggio incrociato",
     "thin": "Sottile",
     "bold": "Grassetto",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Capovolgi orizzontalmente",
     "flipVertical": "Capovolgi verticalmente",
     "viewMode": "Modalità visualizzazione",
-    "toggleExportColorScheme": "Cambia lo schema di colori in esportazione",
     "share": "Condividi",
     "showStroke": "Mostra selettore colore del tratto",
     "showBackground": "Mostra selettore colore di sfondo",
@@ -110,7 +106,7 @@
     "increaseFontSize": "Aumenta la dimensione dei caratteri",
     "unbindText": "Scollega testo",
     "bindText": "Associa il testo al container",
-    "createContainerFromText": "",
+    "createContainerFromText": "Avvolgi il testo in un container",
     "link": {
       "edit": "Modifica link",
       "create": "Crea link",
@@ -127,7 +123,10 @@
       "unlockAll": "Sblocca tutto"
     },
     "statusPublished": "Pubblicato",
-    "sidebarLock": "Mantieni aperta la barra laterale"
+    "sidebarLock": "Mantieni aperta la barra laterale",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "Nessun elemento ancora aggiunto...",
@@ -139,11 +138,7 @@
     "exportJSON": "Esporta su file",
     "exportImage": "Esporta immagine...",
     "export": "Salva in...",
-    "exportToPng": "Esporta come PNG",
-    "exportToSvg": "Esporta come SVG",
     "copyToClipboard": "Copia negli appunti",
-    "copyPngToClipboard": "Copia PNG negli appunti",
-    "scale": "Scala",
     "save": "Salva sul file corrente",
     "saveAs": "Salva con nome",
     "load": "Apri",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Impossibile salvare nel database di backend. Se i problemi persistono, dovresti salvare il tuo file localmente per assicurarti di non perdere il tuo lavoro.",
     "collabSaveFailed_sizeExceeded": "Impossibile salvare nel database di backend, la tela sembra essere troppo grande. Dovresti salvare il file localmente per assicurarti di non perdere il tuo lavoro.",
     "brave_measure_text_error": {
-      "start": "Sembra che tu stia usando il browser Brave con il",
-      "aggressive_block_fingerprint": "Blocco Aggressivamente Impronte Digitali",
-      "setting_enabled": "impostazioni abilitate",
-      "break": "Questo potrebbe portare a rompere gli",
-      "text_elements": "Elementi Di Testo",
-      "in_your_drawings": "nei tuoi disegni",
-      "strongly_recommend": "Si consiglia vivamente di disabilitare questa impostazione. È possibile seguire",
-      "steps": "questi passaggi",
-      "how": "su come fare",
-      "disable_setting": " Se la disabilitazione di questa impostazione non corregge la visualizzazione degli elementi di testo, apri un",
-      "issue": "problema",
-      "write": "sul nostro GitHub, o scrivici su",
-      "discord": "Discord"
+      "line1": "Sembra che tu stia utilizzando il browser Brave con l'impostazione <bold>Blocco aggressivo delle impronte digitali</bold> abilitata.",
+      "line2": "Ciò potrebbe causare la rottura degli <bold>Elementi di testo</bold> nei tuoi disegni.",
+      "line3": "Consigliamo vivamente di disabilitare questa impostazione. Puoi seguire <link>questi passaggi</link> su come farlo.",
+      "line4": "Se la disattivazione di questa impostazione non risolve la visualizzazione degli elementi di testo, apri un <issueLink>problema</issueLink> sul nostro GitHub o scrivici su <discordLink>Discord</discordLink>"
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Modalità penna - previene il tocco",
     "link": "Aggiungi/ aggiorna il link per una forma selezionata",
     "eraser": "Gomma",
-    "hand": "Mano (strumento di panoramica)"
+    "frame": "",
+    "hand": "Mano (strumento di panoramica)",
+    "extraTools": "Altri strumenti"
   },
   "headings": {
     "canvasActions": "Azioni sulla Tela",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Suggerimento: prova a spostare gli elementi più lontani più vicini tra loro."
   },
   "errorSplash": {
-    "headingMain_pre": "Si è verificato un errore. Provare ",
-    "headingMain_button": "ricaricando la pagina.",
-    "clearCanvasMessage": "Se ricaricare non funziona, prova ",
-    "clearCanvasMessage_button": "pulire la tela.",
+    "headingMain": "Si è verificato un errore. Provare <button>ricaricando la pagina.</button>",
+    "clearCanvasMessage": "Se ricaricare non funziona, prova <button>pulire la tela.</button>",
     "clearCanvasCaveat": " Questo risulterà nella perdita del lavoro ",
-    "trackedToSentry_pre": "L'errore con identificativo ",
-    "trackedToSentry_post": " è stato tracciato nel nostro sistema.",
-    "openIssueMessage_pre": "Siamo stati molto cauti nel non includere informazioni della scena nell'errore. Se la tua scena non è privata, ti preghiamo di considerare la sua inclusione nel nostro ",
-    "openIssueMessage_button": "bug tracker.",
-    "openIssueMessage_post": " Per favore includi le informazioni riportate qui sotto copiandole e incollandole nella issue di GitHub.",
+    "trackedToSentry": "L'errore con identificativo {{eventId}} è stato tracciato nel nostro sistema.",
+    "openIssueMessage": "Siamo stati molto cauti nel non includere informazioni della scena nell'errore. Se la tua scena non è privata, ti preghiamo di considerare la sua inclusione nel nostro <button>bug tracker.</button> Per favore includi le informazioni riportate qui sotto copiandole e incollandole nella issue di GitHub.",
     "sceneContent": "Contenuto della scena:"
   },
   "roomDialog": {
@@ -319,7 +302,7 @@
     "doubleClick": "doppio-click",
     "drag": "trascina",
     "editor": "Editor",
-    "editLineArrowPoints": "",
+    "editLineArrowPoints": "Modifica punti linea/freccia",
     "editText": "Modifica testo / aggiungi etichetta",
     "github": "Trovato un problema? Segnalalo",
     "howto": "Segui le nostre guide",
@@ -361,34 +344,45 @@
       "required": "Obbligatorio",
       "website": "Inserisci un URL valido"
     },
-    "noteDescription": {
-      "pre": "Invia la tua libreria da includere nella ",
-      "link": "repository della libreria pubblica",
-      "post": "perché sia usata da altri nei loro disegni."
-    },
-    "noteGuidelines": {
-      "pre": "La libreria dev'esser prima approvata manualmente. Sei pregato di leggere le ",
-      "link": "linee guida",
-      "post": " prima di inviarla. Necessiterai di un profilo di GitHub per comunicare ed effettuare modifiche se richiesto, ma non è strettamente necessario."
-    },
-    "noteLicense": {
-      "pre": "Inviando, acconsenti che la libreria sarà pubblicata sotto la ",
-      "link": "Licenza MIT, ",
-      "post": "che in breve significa che chiunque possa usarla senza restrizioni."
-    },
+    "noteDescription": "Invia la tua libreria da includere nella <link>repository della libreria pubblica</link>perché sia usata da altri nei loro disegni.",
+    "noteGuidelines": "La libreria dev'esser prima approvata manualmente. Sei pregato di leggere le <link>linee guida</link> prima di inviarla. Necessiterai di un profilo di GitHub per comunicare ed effettuare modifiche se richiesto, ma non è strettamente necessario.",
+    "noteLicense": "Inviando, acconsenti che la libreria sarà pubblicata sotto la <link>Licenza MIT, </link>che in breve significa che chiunque possa usarla senza restrizioni.",
     "noteItems": "Ogni elemento della libreria deve avere il proprio nome, così che sia filtrabile. Gli elementi della seguente libreria saranno inclusi:",
     "atleastOneLibItem": "Sei pregato di selezionare almeno un elemento della libreria per iniziare",
     "republishWarning": "Nota: alcuni degli elementi selezionati sono contrassegnati come già pubblicati/presentati. È necessario reinviare gli elementi solo quando si aggiorna una libreria o una presentazione esistente."
   },
   "publishSuccessDialog": {
     "title": "Libreria inviata",
-    "content": "Grazie {{authorName}}. La tua libreria è stata inviata per la revisione. Puoi monitorarne lo stato",
-    "link": "qui"
+    "content": "Grazie {{authorName}}. La tua libreria è stata inviata per la revisione. Puoi monitorarne lo stato<link>qui</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Ripristina la libreria",
     "removeItemsFromLib": "Rimuovi gli elementi selezionati dalla libreria"
   },
+  "imageExportDialog": {
+    "header": "Esporta immagine",
+    "label": {
+      "withBackground": "Sfondo",
+      "onlySelected": "Solo selezionato",
+      "darkMode": "Tema scuro",
+      "embedScene": "Includi scena",
+      "scale": "Scala",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": "I dati della scena saranno salvati nel file PNG/SVG esportato in modo che la scena possa essere ripristinata da esso.\nQuesto aumenterà la dimensione del file esportato."
+    },
+    "title": {
+      "exportToPng": "Esporta come PNG",
+      "exportToSvg": "Esporta come SVG",
+      "copyPngToClipboard": "Copia PNG negli appunti"
+    },
+    "button": {
+      "exportToPng": "PNG",
+      "exportToSvg": "SVG",
+      "copyPngToClipboard": "Copia negli appunti"
+    }
+  },
   "encrypted": {
     "tooltip": "I tuoi disegni sono crittografati end-to-end in modo che i server di Excalidraw non li possano mai vedere.",
     "link": "Articolo del blog sulla crittografia end-to-end di Excalidraw"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "Usa {{shortcut}} per incollare come un singolo elemento,\no incollare in un editor di testo esistente"
   },
   "colors": {
-    "ffffff": "Bianco",
-    "f8f9fa": "Grigio 0",
-    "f1f3f5": "Grigio 1",
-    "fff5f5": "Rosso 0",
-    "fff0f6": "Rosa 0",
-    "f8f0fc": "Uva 0",
-    "f3f0ff": "Viola 0",
-    "edf2ff": "Indaco 0",
-    "e7f5ff": "Blu 0",
-    "e3fafc": "Ciano 0",
-    "e6fcf5": "Verde acqua 0",
-    "ebfbee": "Verde 0",
-    "f4fce3": "Lime 0",
-    "fff9db": "Giallo 0",
-    "fff4e6": "Arancio 0",
     "transparent": "Trasparente",
-    "ced4da": "Grigio 4",
-    "868e96": "Grigio 6",
-    "fa5252": "Rosso 6",
-    "e64980": "Rosa 6",
-    "be4bdb": "Uva 6",
-    "7950f2": "Viola 6",
-    "4c6ef5": "Indaco 6",
-    "228be6": "Blu 6",
-    "15aabf": "Ciano 6",
-    "12b886": "Verde acqua 6",
-    "40c057": "Verde 6",
-    "82c91e": "Lime 6",
-    "fab005": "Giallo 6",
-    "fd7e14": "Arancio 6",
-    "000000": "Nero",
-    "343a40": "Grigio 8",
-    "495057": "Grigio 7",
-    "c92a2a": "Rosso 9",
-    "a61e4d": "Rosa 9",
-    "862e9c": "Uva 9",
-    "5f3dc4": "Viola 9",
-    "364fc7": "Indaco 9",
-    "1864ab": "Blu 9",
-    "0b7285": "Ciano 9",
-    "087f5b": "Verde acqua 9",
-    "2b8a3e": "Verde 9",
-    "5c940d": "Lime 9",
-    "e67700": "Giallo 9",
-    "d9480f": "Arancio 9"
+    "black": "Nero",
+    "white": "Bianco",
+    "red": "Rosso",
+    "pink": "Rosa",
+    "grape": "Uva",
+    "violet": "Viola",
+    "gray": "Grigio",
+    "blue": "Blu",
+    "cyan": "Ciano",
+    "teal": "Verde acqua",
+    "green": "Verde",
+    "yellow": "Giallo",
+    "orange": "Arancio",
+    "bronze": "Bronzo"
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "Scegli uno strumento & Inizia a disegnare!",
       "helpHint": "Scorciatoie & aiuto"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "Colori personalizzati più utilizzati",
+    "colors": "Colori",
+    "shades": "Sfumature",
+    "hexCode": "Codice esadecimale",
+    "noShades": "Nessuna sfumatura disponibile per questo colore"
   }
 }
diff --git a/src/locales/ja-JP.json b/src/locales/ja-JP.json
index 53333aea3..018752c23 100644
--- a/src/locales/ja-JP.json
+++ b/src/locales/ja-JP.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "三角",
     "fontSize": "フォントの大きさ",
     "fontFamily": "フォントの種類",
-    "onlySelected": "選択中のみ",
-    "withBackground": "背景",
-    "exportEmbedScene": "埋め込みシーン",
-    "exportEmbedScene_details": "シーンデータはエクスポートされたPNG/SVGファイルに保存され、シーンを復元することができます。\nエクスポートされたファイルのサイズは増加します。",
     "addWatermark": "\"Made with Excalidraw\"と表示",
     "handDrawn": "手描き風",
     "normal": "普通",
@@ -54,6 +50,7 @@
     "veryLarge": "特大",
     "solid": "ベタ塗り",
     "hachure": "斜線",
+    "zigzag": "",
     "crossHatch": "網掛け",
     "thin": "細",
     "bold": "太字",
@@ -99,7 +96,6 @@
     "flipHorizontal": "水平方向に反転",
     "flipVertical": "垂直方向に反転",
     "viewMode": "閲覧モード",
-    "toggleExportColorScheme": "エクスポートカラースキームの切り替え",
     "share": "共有",
     "showStroke": "ストロークカラーピッカーを表示",
     "showBackground": "背景色ピッカーを表示",
@@ -127,7 +123,10 @@
       "unlockAll": "すべてのロックを解除"
     },
     "statusPublished": "公開済み",
-    "sidebarLock": "サイドバーを開いたままにする"
+    "sidebarLock": "サイドバーを開いたままにする",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "まだアイテムが追加されていません…",
@@ -139,11 +138,7 @@
     "exportJSON": "ファイルへエクスポート",
     "exportImage": "画像のエクスポート...",
     "export": "名前を付けて保存...",
-    "exportToPng": "PNG にエクスポート",
-    "exportToSvg": "SVG にエクスポート",
     "copyToClipboard": "クリップボードにコピー",
-    "copyPngToClipboard": "クリップボードにPNGをコピー",
-    "scale": "スケール",
     "save": "現在のファイルに保存",
     "saveAs": "名前を付けて保存",
     "load": "開く",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "バックエンドデータベースに保存できませんでした。問題が解決しない場合は、作業を失わないようにローカルにファイルを保存してください。",
     "collabSaveFailed_sizeExceeded": "キャンバスが大きすぎるため、バックエンドデータベースに保存できませんでした。問題が解決しない場合は、作業を失わないようにローカルにファイルを保存してください。",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "設定が有効化されました",
-      "break": "",
-      "text_elements": "テキスト要素",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": "Discord"
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "ペンモード - タッチ防止",
     "link": "選択した図形のリンクを追加/更新",
     "eraser": "消しゴム",
-    "hand": "手 (パンニングツール)"
+    "frame": "",
+    "hand": "手 (パンニングツール)",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "キャンバス操作",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "ヒント: 最も遠い要素をもう少し近づけてみてください。"
   },
   "errorSplash": {
-    "headingMain_pre": "エラーが発生しました。もう一度やり直してください。 ",
-    "headingMain_button": "ページを再読み込みする。",
-    "clearCanvasMessage": "再読み込みがうまくいかない場合は、 ",
-    "clearCanvasMessage_button": "キャンバスを消去しています",
+    "headingMain": "エラーが発生しました。もう一度やり直してください。 <button>ページを再読み込みする。</button>",
+    "clearCanvasMessage": "再読み込みがうまくいかない場合は、 <button>キャンバスを消去しています</button>",
     "clearCanvasCaveat": " これにより作業が失われます ",
-    "trackedToSentry_pre": "識別子のエラー ",
-    "trackedToSentry_post": " が我々のシステムで追跡されました。",
-    "openIssueMessage_pre": "エラーに関するシーン情報を含めないように非常に慎重に設定しました。もしあなたのシーンがプライベートでない場合は、私たちのフォローアップを検討してください。 ",
-    "openIssueMessage_button": "バグ報告",
-    "openIssueMessage_post": " GitHub のIssueに以下の情報をコピーして貼り付けてください。",
+    "trackedToSentry": "識別子のエラー {{eventId}} が我々のシステムで追跡されました。",
+    "openIssueMessage": "エラーに関するシーン情報を含めないように非常に慎重に設定しました。もしあなたのシーンがプライベートでない場合は、私たちのフォローアップを検討してください。 <button>バグ報告</button> GitHub のIssueに以下の情報をコピーして貼り付けてください。",
     "sceneContent": "シーンの内容:"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "必須項目",
       "website": "有効な URL を入力してください"
     },
-    "noteDescription": {
-      "pre": "以下に含めるライブラリを提出してください ",
-      "link": "公開ライブラリのリポジトリ",
-      "post": "他の人が作図に使えるようにするためです"
-    },
-    "noteGuidelines": {
-      "pre": "最初にライブラリを手動で承認する必要があります。次をお読みください ",
-      "link": "ガイドライン",
-      "post": " 送信する前に、GitHubアカウントが必要になりますが、必須ではありません。"
-    },
-    "noteLicense": {
-      "pre": "提出することにより、ライブラリが次の下で公開されることに同意します： ",
-      "link": "MIT ライセンス ",
-      "post": "つまり誰でも制限なく使えるということです"
-    },
+    "noteDescription": "以下に含めるライブラリを提出してください <link>公開ライブラリのリポジトリ</link>他の人が作図に使えるようにするためです",
+    "noteGuidelines": "最初にライブラリを手動で承認する必要があります。次をお読みください <link>ガイドライン</link> 送信する前に、GitHubアカウントが必要になりますが、必須ではありません。",
+    "noteLicense": "提出することにより、ライブラリが次の下で公開されることに同意します： <link>MIT ライセンス </link>つまり誰でも制限なく使えるということです",
     "noteItems": "各ライブラリ項目は、フィルタリングのために独自の名前を持つ必要があります。以下のライブラリアイテムが含まれます:",
     "atleastOneLibItem": "開始するには少なくとも1つのライブラリ項目を選択してください",
     "republishWarning": "注意: 選択された項目の中には、すでに公開/投稿済みと表示されているものがあります。既存のライブラリや投稿を更新する場合のみ、アイテムを再投稿してください。"
   },
   "publishSuccessDialog": {
     "title": "ライブラリを送信しました",
-    "content": "{{authorName}} さん、ありがとうございます。あなたのライブラリはレビューのために提出されました。状況を追跡できます。",
-    "link": "こちら"
+    "content": "{{authorName}} さん、ありがとうございます。あなたのライブラリはレビューのために提出されました。状況を追跡できます。<link>こちら</link>"
   },
   "confirmDialog": {
     "resetLibrary": "ライブラリをリセット",
     "removeItemsFromLib": "選択したアイテムをライブラリから削除"
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "描画内容はエンドツーエンド暗号化が施されており、Excalidrawサーバーが内容を見ることはできません。",
     "link": "Excalidrawのエンドツーエンド暗号化に関するブログ記事"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "{{shortcut}} を使用して単一の要素として貼り付けるか、\n既存のテキストエディタに貼り付け"
   },
   "colors": {
-    "ffffff": "ホワイト",
-    "f8f9fa": "グレー 0",
-    "f1f3f5": "グレー 1",
-    "fff5f5": "レッド 0",
-    "fff0f6": "ピンク 0",
-    "f8f0fc": "グレープ 0",
-    "f3f0ff": "バイオレット 0",
-    "edf2ff": "インディゴ 0",
-    "e7f5ff": "ブルー 0",
-    "e3fafc": "シアン 0",
-    "e6fcf5": "ティール 0",
-    "ebfbee": "グリーン 0",
-    "f4fce3": "ライム 0",
-    "fff9db": "イエロー 0",
-    "fff4e6": "オレンジ 0",
     "transparent": "透明",
-    "ced4da": "グレー 4",
-    "868e96": "グレー 6",
-    "fa5252": "レッド 6",
-    "e64980": "ピンク 6",
-    "be4bdb": "グレープ 6",
-    "7950f2": "バイオレット 6",
-    "4c6ef5": "インディゴ 6",
-    "228be6": "ブルー 6",
-    "15aabf": "シアン 6",
-    "12b886": "ティール 6",
-    "40c057": "グリーン 6",
-    "82c91e": "ライム 6",
-    "fab005": "イエロー 6",
-    "fd7e14": "オレンジ 6",
-    "000000": "ブラック",
-    "343a40": "グレー 8",
-    "495057": "グレー 7",
-    "c92a2a": "レッド 9",
-    "a61e4d": "ピンク 9",
-    "862e9c": "グレープ 9",
-    "5f3dc4": "バイオレット 9",
-    "364fc7": "インディゴ 9",
-    "1864ab": "ブルー 9",
-    "0b7285": "シアン 9",
-    "087f5b": "ティール 9",
-    "2b8a3e": "グリーン 9",
-    "5c940d": "ライム 9",
-    "e67700": "イエロー 9",
-    "d9480f": "オレンジ 9"
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "ツールを選んで描き始めよう！",
       "helpHint": "ショートカットとヘルプ"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/kaa.json b/src/locales/kaa.json
new file mode 100644
index 000000000..5b83e7d2e
--- /dev/null
+++ b/src/locales/kaa.json
@@ -0,0 +1,453 @@
+{
+  "labels": {
+    "paste": "",
+    "pasteAsPlaintext": "",
+    "pasteCharts": "",
+    "selectAll": "Barlıǵın tańlaw",
+    "multiSelect": "",
+    "moveCanvas": "",
+    "cut": "",
+    "copy": "Kóshirip alıw",
+    "copyAsPng": "",
+    "copyAsSvg": "",
+    "copyText": "",
+    "bringForward": "",
+    "sendToBack": "",
+    "bringToFront": "",
+    "sendBackward": "",
+    "delete": "Óshiriw",
+    "copyStyles": "",
+    "pasteStyles": "",
+    "stroke": "",
+    "background": "",
+    "fill": "",
+    "strokeWidth": "",
+    "strokeStyle": "",
+    "strokeStyle_solid": "",
+    "strokeStyle_dashed": "",
+    "strokeStyle_dotted": "",
+    "sloppiness": "",
+    "opacity": "",
+    "textAlign": "",
+    "edges": "",
+    "sharp": "",
+    "round": "",
+    "arrowheads": "",
+    "arrowhead_none": "",
+    "arrowhead_arrow": "",
+    "arrowhead_bar": "",
+    "arrowhead_dot": "",
+    "arrowhead_triangle": "",
+    "fontSize": "Shrift ólshemi",
+    "fontFamily": "",
+    "addWatermark": "",
+    "handDrawn": "",
+    "normal": "",
+    "code": "",
+    "small": "",
+    "medium": "",
+    "large": "",
+    "veryLarge": "",
+    "solid": "",
+    "hachure": "",
+    "zigzag": "",
+    "crossHatch": "",
+    "thin": "",
+    "bold": "",
+    "left": "",
+    "center": "",
+    "right": "",
+    "extraBold": "",
+    "architect": "",
+    "artist": "",
+    "cartoonist": "",
+    "fileTitle": "Fayl ataması",
+    "colorPicker": "",
+    "canvasColors": "",
+    "canvasBackground": "",
+    "drawingCanvas": "",
+    "layers": "",
+    "actions": "Háreketler",
+    "language": "Til",
+    "liveCollaboration": "",
+    "duplicateSelection": "Nusqa",
+    "untitled": "",
+    "name": "Ataması",
+    "yourName": "Atıńız",
+    "madeWithExcalidraw": "",
+    "group": "",
+    "ungroup": "",
+    "collaborators": "",
+    "showGrid": "",
+    "addToLibrary": "Kitapxanaǵa qosıw",
+    "removeFromLibrary": "Kitapxanadan alıp taslaw",
+    "libraryLoadingMessage": "Kitapxana júklenbekte…",
+    "libraries": "Kitapxanalardı kóriw",
+    "loadingScene": "",
+    "align": "",
+    "alignTop": "",
+    "alignBottom": "",
+    "alignLeft": "",
+    "alignRight": "",
+    "centerVertically": "",
+    "centerHorizontally": "",
+    "distributeHorizontally": "",
+    "distributeVertically": "",
+    "flipHorizontal": "",
+    "flipVertical": "",
+    "viewMode": "Kóriw rejimi",
+    "share": "Bólisiw",
+    "showStroke": "",
+    "showBackground": "",
+    "toggleTheme": "",
+    "personalLib": "",
+    "excalidrawLib": "",
+    "decreaseFontSize": "",
+    "increaseFontSize": "",
+    "unbindText": "",
+    "bindText": "",
+    "createContainerFromText": "",
+    "link": {
+      "edit": "Siltemeni ózgertiw",
+      "create": "Siltemeni jaratıw",
+      "label": "Silteme"
+    },
+    "lineEditor": {
+      "edit": "",
+      "exit": ""
+    },
+    "elementLock": {
+      "lock": "Qulıplaw",
+      "unlock": "Qulıptan shıǵarıw",
+      "lockAll": "Barlıǵın qulıplaw",
+      "unlockAll": "Barlıǵın qulıptan shıǵarıw"
+    },
+    "statusPublished": "",
+    "sidebarLock": "",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
+  },
+  "library": {
+    "noItems": "",
+    "hint_emptyLibrary": "",
+    "hint_emptyPrivateLibrary": ""
+  },
+  "buttons": {
+    "clearReset": "",
+    "exportJSON": "",
+    "exportImage": "",
+    "export": "",
+    "copyToClipboard": "Almasıw buferine kóshirip alındı",
+    "save": "",
+    "saveAs": "",
+    "load": "Ashıw",
+    "getShareableLink": "",
+    "close": "Jabıw",
+    "selectLanguage": "Tildi tańlaw",
+    "scrollBackToContent": "",
+    "zoomIn": "",
+    "zoomOut": "",
+    "resetZoom": "",
+    "menu": "Menyu",
+    "done": "Tayın",
+    "edit": "Ózgertiw",
+    "undo": "",
+    "redo": "",
+    "resetLibrary": "",
+    "createNewRoom": "",
+    "fullScreen": "Tolıq ekran",
+    "darkMode": "Qarańǵı tema",
+    "lightMode": "Jaqtı tema",
+    "zenMode": "",
+    "exitZenMode": "",
+    "cancel": "Biykarlaw",
+    "clear": "Tazalaw",
+    "remove": "Óshiriw",
+    "publishLibrary": "",
+    "submit": "Jiberiw",
+    "confirm": "Tastıyıqlaw"
+  },
+  "alerts": {
+    "clearReset": "",
+    "couldNotCreateShareableLink": "",
+    "couldNotCreateShareableLinkTooBig": "",
+    "couldNotLoadInvalidFile": "",
+    "importBackendFailed": "",
+    "cannotExportEmptyCanvas": "",
+    "couldNotCopyToClipboard": "Almasıw buferine kóshirip alıw ámelge aspadı.",
+    "decryptFailed": "",
+    "uploadedSecurly": "",
+    "loadSceneOverridePrompt": "",
+    "collabStopOverridePrompt": "",
+    "errorAddingToLibrary": "",
+    "errorRemovingFromLibrary": "",
+    "confirmAddLibrary": "",
+    "imageDoesNotContainScene": "",
+    "cannotRestoreFromImage": "",
+    "invalidSceneUrl": "",
+    "resetLibrary": "",
+    "removeItemsFromsLibrary": "",
+    "invalidEncryptionKey": "",
+    "collabOfflineWarning": ""
+  },
+  "errors": {
+    "unsupportedFileType": "",
+    "imageInsertError": "",
+    "fileTooBig": "",
+    "svgImageInsertError": "",
+    "invalidSVGString": "Jaramsız SVG.",
+    "cannotResolveCollabServer": "",
+    "importLibraryError": "Kitapxananı júklew ámelge aspadı",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": "",
+    "brave_measure_text_error": {
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
+    }
+  },
+  "toolBar": {
+    "selection": "",
+    "image": "Súwret qoyıw",
+    "rectangle": "",
+    "diamond": "",
+    "ellipse": "",
+    "arrow": "",
+    "line": "Sızıq",
+    "freedraw": "Sızıw",
+    "text": "Tekst",
+    "library": "Kitapxana",
+    "lock": "",
+    "penMode": "",
+    "link": "",
+    "eraser": "Óshirgish",
+    "frame": "",
+    "hand": "",
+    "extraTools": ""
+  },
+  "headings": {
+    "canvasActions": "",
+    "selectedShapeActions": "",
+    "shapes": ""
+  },
+  "hints": {
+    "canvasPanning": "",
+    "linearElement": "",
+    "freeDraw": "",
+    "text": "",
+    "text_selected": "",
+    "text_editing": "",
+    "linearElementMulti": "",
+    "lockAngle": "",
+    "resize": "",
+    "resizeImage": "",
+    "rotate": "",
+    "lineEditor_info": "",
+    "lineEditor_pointSelected": "",
+    "lineEditor_nothingSelected": "",
+    "placeImage": "",
+    "publishLibrary": "",
+    "bindTextToElement": "",
+    "deepBoxSelect": "",
+    "eraserRevert": "",
+    "firefox_clipboard_write": ""
+  },
+  "canvasError": {
+    "cannotShowPreview": "",
+    "canvasTooBig": "",
+    "canvasTooBigTip": ""
+  },
+  "errorSplash": {
+    "headingMain": "",
+    "clearCanvasMessage": "",
+    "clearCanvasCaveat": "",
+    "trackedToSentry": "",
+    "openIssueMessage": "",
+    "sceneContent": ""
+  },
+  "roomDialog": {
+    "desc_intro": "",
+    "desc_privacy": "",
+    "button_startSession": "",
+    "button_stopSession": "",
+    "desc_inProgressIntro": "",
+    "desc_shareLink": "",
+    "desc_exitSession": "",
+    "shareTitle": ""
+  },
+  "errorDialog": {
+    "title": "Qátelik"
+  },
+  "exportDialog": {
+    "disk_title": "",
+    "disk_details": "",
+    "disk_button": "",
+    "link_title": "",
+    "link_details": "",
+    "link_button": "",
+    "excalidrawplus_description": "",
+    "excalidrawplus_button": "Eksportlaw",
+    "excalidrawplus_exportError": ""
+  },
+  "helpDialog": {
+    "blog": "",
+    "click": "basıw",
+    "deepSelect": "",
+    "deepBoxSelect": "",
+    "curvedArrow": "",
+    "curvedLine": "",
+    "documentation": "Hújjetshilik",
+    "doubleClick": "",
+    "drag": "",
+    "editor": "",
+    "editLineArrowPoints": "",
+    "editText": "",
+    "github": "",
+    "howto": "",
+    "or": "yamasa",
+    "preventBinding": "",
+    "tools": "Ásbaplar",
+    "shortcuts": "",
+    "textFinish": "",
+    "textNewLine": "",
+    "title": "Járdem",
+    "view": "Kóriw",
+    "zoomToFit": "",
+    "zoomToSelection": "",
+    "toggleElementLock": "",
+    "movePageUpDown": "",
+    "movePageLeftRight": ""
+  },
+  "clearCanvasDialog": {
+    "title": ""
+  },
+  "publishDialog": {
+    "title": "",
+    "itemName": "",
+    "authorName": "Avtor atı",
+    "githubUsername": "GitHub paydalanıwshı atı",
+    "twitterUsername": "Twitter paydalanıwshı atı",
+    "libraryName": "Kitapxana ataması",
+    "libraryDesc": "",
+    "website": "Veb-sayt",
+    "placeholder": {
+      "authorName": "",
+      "libraryName": "",
+      "libraryDesc": "",
+      "githubHandle": "",
+      "twitterHandle": "",
+      "website": ""
+    },
+    "errors": {
+      "required": "",
+      "website": ""
+    },
+    "noteDescription": "",
+    "noteGuidelines": "",
+    "noteLicense": "",
+    "noteItems": "",
+    "atleastOneLibItem": "",
+    "republishWarning": ""
+  },
+  "publishSuccessDialog": {
+    "title": "",
+    "content": ""
+  },
+  "confirmDialog": {
+    "resetLibrary": "",
+    "removeItemsFromLib": ""
+  },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
+  "encrypted": {
+    "tooltip": "",
+    "link": ""
+  },
+  "stats": {
+    "angle": "",
+    "element": "",
+    "elements": "",
+    "height": "",
+    "scene": "Saxna",
+    "selected": "Tańlandı",
+    "storage": "",
+    "title": "",
+    "total": "",
+    "version": "Versiya",
+    "versionCopy": "Kóshirip alıw ushın basıń",
+    "versionNotAvailable": "",
+    "width": ""
+  },
+  "toast": {
+    "addedToLibrary": "",
+    "copyStyles": "",
+    "copyToClipboard": "",
+    "copyToClipboardAsPng": "",
+    "fileSaved": "Fayl saqlandı.",
+    "fileSavedToFilename": "{filename} saqlandı",
+    "canvas": "",
+    "selection": "",
+    "pasteAsSingleElement": ""
+  },
+  "colors": {
+    "transparent": "",
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
+  },
+  "welcomeScreen": {
+    "app": {
+      "center_heading": "",
+      "center_heading_plus": "",
+      "menuHint": "Eksportlaw, sazlawlar, tiller, ..."
+    },
+    "defaults": {
+      "menuHint": "Eksportlaw, sazlawlar hám basqa...",
+      "center_heading": "",
+      "toolbarHint": "",
+      "helpHint": ""
+    }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
+  }
+}
diff --git a/src/locales/kab-KAB.json b/src/locales/kab-KAB.json
index ba6a3de7e..a0465c654 100644
--- a/src/locales/kab-KAB.json
+++ b/src/locales/kab-KAB.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Akerdis",
     "fontSize": "Tiddi n tsefsit",
     "fontFamily": "Tawacult n tsefsiyin",
-    "onlySelected": "Tafrayt kan",
-    "withBackground": "Agilal",
-    "exportEmbedScene": "Sleɣ asayes",
-    "exportEmbedScene_details": "Asayes ad yettwasekles deg ufaylu n usifeḍ PNG/SVG akken akken ad yili wamek ara d-yettwarr seg-s usayes. Ayagi ad isimɣur tiddi n ufaylu n usifeḍ.",
     "addWatermark": "Seddu \"Yettwaxdem s Excalidraw\"",
     "handDrawn": "Asuneɣ s ufus",
     "normal": "Amagnu",
@@ -54,6 +50,7 @@
     "veryLarge": "Meqqer aṭas",
     "solid": "Aččuran",
     "hachure": "Azerreg",
+    "zigzag": "",
     "crossHatch": "Azerreg anmidag",
     "thin": "Arqaq",
     "bold": "Azuran",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Tuttya taglawant",
     "flipVertical": "Tuttya tubdidt",
     "viewMode": "Askar n tmuɣli",
-    "toggleExportColorScheme": "Sermed/sens asifeḍ usentel n yini",
     "share": "Bḍu",
     "showStroke": "Beqqeḍ amelqaḍ n yini n yizirig",
     "showBackground": "Beqqeḍ amelqaḍ n yini n ugilal",
@@ -127,7 +123,10 @@
       "unlockAll": "Serreḥ akk"
     },
     "statusPublished": "Yeffeɣ-d",
-    "sidebarLock": "Eǧǧ afeggag n yidis yeldi"
+    "sidebarLock": "Eǧǧ afeggag n yidis yeldi",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "Ulac iferdisen yettwarnan yakan...",
@@ -139,11 +138,7 @@
     "exportJSON": "Sifeḍ afaylu",
     "exportImage": "Sifeḍ tugna...",
     "export": "Sekles di...",
-    "exportToPng": "Sifeḍ ɣer PNG",
-    "exportToSvg": "Sifeḍ ɣer SVG",
     "copyToClipboard": "Nɣel ɣer tecfawit",
-    "copyPngToClipboard": "Nɣel PNG ɣer tecfawit",
-    "scale": "Taskala",
     "save": "Sekles deg ufaylu amiran",
     "saveAs": "Sekles am",
     "load": "Ldi",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Ulamek asekles deg uzadur n yisefka deg ugilal. Ma ikemmel wugur, isefk ad teskelseḍ afaylu s wudem adigan akken ad tetḥeqqeḍ ur tesruḥuyeḍ ara amahil-inek•inem.",
     "collabSaveFailed_sizeExceeded": "Ulamek asekles deg uzadur n yisefka deg ugilal, taɣzut n usuneɣ tettban-d temqer aṭas. Isefk ad teskelseḍ afaylu s wudem adigan akken ad tetḥeqqeḍ ur tesruḥuyeḍ ara amahil-inek•inem.",
     "brave_measure_text_error": {
-      "start": "Ittban-d am wakken tsseqdaceḍ iminig Brave akked",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "yermed",
-      "break": "Ayagi yezmer ad d-iseglu s truẓi n",
-      "text_elements": "Iferdisen iḍrisen",
-      "in_your_drawings": "deg wunuɣen-inek",
-      "strongly_recommend": "",
-      "steps": "isurifen-agi",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "di GitHub inek neɣ aru-yaɣ-d di",
-      "discord": ""
+      "line1": "",
+      "line2": "Ayagi yezmer ad d-iglu s truẓi n<bold>Iferdisen n uḍris</bold>deg wunuɣen-inek.",
+      "line3": "Ad k-nsemter ad tsexsiḍ aɣewwar-agi. Tzemreḍ ad tḍefreḍ<link>isurifen-agi</link> ɣef wamek ara txedmeḍ.",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Askar n yimru - gdel tanalit",
     "link": "Rnu/leqqem aseɣwen i talɣa yettwafernen",
     "eraser": "Sfeḍ",
-    "hand": "Afus (afecku n usmutti n tmuɣli)"
+    "frame": "",
+    "hand": "Afus (afecku n usmutti n tmuɣli)",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Tigawin n teɣzut n usuneɣ",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Tixidest: eɛreḍ ad tesqerbeḍ ciṭ iferdisen yembaɛaden."
   },
   "errorSplash": {
-    "headingMain_pre": "Teḍra-d tuccḍa. Eɛreḍ ",
-    "headingMain_button": "asali n usebter tikkelt-nniḍen.",
-    "clearCanvasMessage": "Ma yella tulsa n usali ur tefri ara ugur, eɛreḍ ",
-    "clearCanvasMessage_button": "asfaḍ n teɣzut n usuneɣ.",
+    "headingMain": "Teḍra-d tuccḍa. Eɛreḍ <button>asali n usebter tikkelt-nniḍen.</button>",
+    "clearCanvasMessage": "Ma yella tulsa n usali ur tefri ara ugur, eɛreḍ <button>asfaḍ n teɣzut n usuneɣ.</button>",
     "clearCanvasCaveat": " Ayagi ad d-iglu s usṛuḥu n umahil ",
-    "trackedToSentry_pre": "Tuccḍa akked umesmagi ",
-    "trackedToSentry_post": " tettwasekles deg unagraw-nneɣ.",
-    "openIssueMessage_pre": "Nḥuder aṭas akken ur nseddu ara talɣut n usayes-inek (m) di tuccḍa. Ma yella asayes-inek (m) mačči d amaẓlay, ttxil-k (m) xemmem ad ḍefreḍ ",
-    "openIssueMessage_button": "afecku n weḍfar n yibugen.",
-    "openIssueMessage_post": " Ma ulac uɣilif seddu talɣut ukessar-agi s wenɣal akked usenṭeḍ di GitHub issue.",
+    "trackedToSentry": "Tuccḍa akked umesmagi {{eventId}} tettwasekles deg unagraw-nneɣ.",
+    "openIssueMessage": "Nḥuder aṭas akken ur nseddu ara talɣut n usayes-inek (m) di tuccḍa. Ma yella asayes-inek (m) mačči d amaẓlay, ttxil-k (m) xemmem ad ḍefreḍ <button>afecku n weḍfar n yibugen.</button> Ma ulac uɣilif seddu talɣut ukessar-agi s wenɣal akked usenṭeḍ di GitHub issue.",
     "sceneContent": "Agbur n usayes:"
   },
   "roomDialog": {
@@ -319,8 +302,8 @@
     "doubleClick": "ssit snat n tikkal",
     "drag": "zuɣer",
     "editor": "Amaẓrag",
-    "editLineArrowPoints": "",
-    "editText": "",
+    "editLineArrowPoints": "Ẓreg tinqiḍin n yizirig/taneccabt",
+    "editText": "Ẓreg aḍris/rnu tabzimt",
     "github": "Tufiḍ-d ugur? Azen-aɣ-d",
     "howto": "Ḍfer imniren-nneɣ",
     "or": "neɣ",
@@ -361,34 +344,45 @@
       "required": "Yettwasra",
       "website": "Sekcem URL ameɣtu"
     },
-    "noteDescription": {
-      "pre": "Azen tamkarḍit-inek•inem akken ad teddu di ",
-      "link": "akaram azayez n temkarḍit",
-      "post": "i yimdanen-nniḍen ara isqedcen deg wunuɣen-nnsen."
-    },
-    "noteGuidelines": {
-      "pre": "Tamkarḍit teḥwaǧ ad tettwaqbel s ufus qbel. Ma ulac uɣilif ɣer ",
-      "link": "iwellihen",
-      "post": " send ad tazneḍ. Tesriḍ amiḍan n GitHub akken ad tmmeslayeḍ yerna ad tgeḍ ibeddilen ma yelaq, maca mačči d ayen yettwaḥetmen."
-    },
-    "noteLicense": {
-      "pre": "Mi tuzneḍ ad tqebleḍ akken tamkarḍit ad d-teffeɣ s ",
-      "link": "Turagt MIT, ",
-      "post": "ayen yebɣan ad d-yini belli yal yiwen izmer ad ten-iseqdec war tilist."
-    },
+    "noteDescription": "Azen tamkarḍit-inek•inem akken ad teddu di <link>akaram azayez n temkarḍit</link>i yimdanen-nniḍen ara isqedcen deg wunuɣen-nnsen.",
+    "noteGuidelines": "Tamkarḍit teḥwaǧ ad tettwaqbel s ufus qbel. Ma ulac uɣilif ɣer <link>iwellihen</link> send ad tazneḍ. Tesriḍ amiḍan n GitHub akken ad tmmeslayeḍ yerna ad tgeḍ ibeddilen ma yelaq, maca mačči d ayen yettwaḥetmen.",
+    "noteLicense": "Mi tuzneḍ ad tqebleḍ akken tamkarḍit ad d-teffeɣ s <link>Turagt MIT, </link>ayen yebɣan ad d-yini belli yal yiwen izmer ad ten-iseqdec war tilist.",
     "noteItems": "Yal aferdis n temkarḍit isefk ad isɛu isem-is i yiman-is akken ad yili wamek ara yettusizdeg. Iferdisen-agi n temkarḍit ad ddun:",
     "atleastOneLibItem": "Ma ulac uɣilif fern ma drus yiwen n uferdis n temkarḍit akken ad tebduḍ",
     "republishWarning": "Tamawt: kra n yiferdisen yettwafernen ttwacerḍen ffeɣen-d/ttwaznen. Isefk ad talseḍ tuzzna n yiferdisen anagar mi ara tleqqemeḍ tamkarḍit neɣ tuzzna yellan."
   },
   "publishSuccessDialog": {
     "title": "Tamkarḍit tettwazen",
-    "content": "Tanemmirt-ik•im {{authorName}}. Tamkarḍit-inek•inem tettwazen i weselken. Tzemreḍ ad tḍefreḍ aẓayer",
-    "link": "dagi"
+    "content": "Tanemmirt-ik•im {{authorName}}. Tamkarḍit-inek•inem tettwazen i weselken. Tzemreḍ ad tḍefreḍ aẓayer<link>dagi</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Ales awennez n temkarḍit",
     "removeItemsFromLib": "Kkes iferdisen yettafernen si temkarḍit"
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "Unuɣen-inek (m) ttuwgelhnen seg yixef s ixef dɣa iqeddacen n Excalidraw werǧin ad ten-walin. ",
     "link": "Amagrad ɣef uwgelhen ixef s ixef di Excalidraw"
@@ -420,63 +414,40 @@
     "pasteAsSingleElement": ""
   },
   "colors": {
-    "ffffff": "Amellal",
-    "f8f9fa": "Aɣiɣdi 0",
-    "f1f3f5": "Aɣiɣdi 1",
-    "fff5f5": "Azeggaɣ",
-    "fff0f6": "Axuxi 0",
-    "f8f0fc": "Tiẓurin 0",
-    "f3f0ff": "Amidadi 0",
-    "edf2ff": "",
-    "e7f5ff": "Anili 0",
-    "e3fafc": "",
-    "e6fcf5": "",
-    "ebfbee": "Azegzaw 0",
-    "f4fce3": "Llim 0",
-    "fff9db": "Awraɣ 0",
-    "fff4e6": "Aččinawi 0",
     "transparent": "Afrawan",
-    "ced4da": "Aɣiɣdi 4",
-    "868e96": "Aɣiɣdi 6",
-    "fa5252": "Azeggaɣ 6",
-    "e64980": "Axuxi 6",
-    "be4bdb": "",
-    "7950f2": "Amidadi 6",
-    "4c6ef5": "",
-    "228be6": "Anili 6",
-    "15aabf": "",
-    "12b886": "",
-    "40c057": "Azegzaw 0",
-    "82c91e": "Llim 6",
-    "fab005": "Awraɣ 6",
-    "fd7e14": "Aččinawi 6",
-    "000000": "Aberkan",
-    "343a40": "Aɣiɣdi 8",
-    "495057": "Aɣiɣdi 7",
-    "c92a2a": "Azeggaɣ 9",
-    "a61e4d": "Axuxi 9",
-    "862e9c": "Tiẓurin 9",
-    "5f3dc4": "Amidadi 9",
-    "364fc7": "",
-    "1864ab": "Anili 9",
-    "0b7285": "",
-    "087f5b": "",
-    "2b8a3e": "Azegzaw 9",
-    "5c940d": "Llim 9",
-    "e67700": "Awraɣ 9",
-    "d9480f": "Aččinawi 9"
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
-      "center_heading": "",
+      "center_heading": "Akk isefka-inek•inem ttwakelsen s wudem adigan deg yiminig-inek•inem.",
       "center_heading_plus": "Tebɣiḍ ad tedduḍ ɣer Excalidraw+ deg umḍiq?",
       "menuHint": "Asifeḍ, ismenyifen, tutlayin, ..."
     },
     "defaults": {
       "menuHint": "Asifeḍ, ismenyifen, d wayen-nniḍen...",
       "center_heading": "",
-      "toolbarHint": "",
-      "helpHint": ""
+      "toolbarHint": "Fren afecku tebduḍ asuneɣ!",
+      "helpHint": "Inegzumen akked tallelt"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/kk-KZ.json b/src/locales/kk-KZ.json
index 97a9063fa..e960a1325 100644
--- a/src/locales/kk-KZ.json
+++ b/src/locales/kk-KZ.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "",
     "fontSize": "Қаріп өлшемі",
     "fontFamily": "Қаріп тобы",
-    "onlySelected": "",
-    "withBackground": "",
-    "exportEmbedScene": "",
-    "exportEmbedScene_details": "",
     "addWatermark": "",
     "handDrawn": "",
     "normal": "Қалыпты",
@@ -54,6 +50,7 @@
     "veryLarge": "Өте үлкен",
     "solid": "",
     "hachure": "",
+    "zigzag": "",
     "crossHatch": "",
     "thin": "",
     "bold": "",
@@ -99,7 +96,6 @@
     "flipHorizontal": "",
     "flipVertical": "",
     "viewMode": "",
-    "toggleExportColorScheme": "",
     "share": "",
     "showStroke": "",
     "showBackground": "",
@@ -127,7 +123,10 @@
       "unlockAll": ""
     },
     "statusPublished": "",
-    "sidebarLock": ""
+    "sidebarLock": "",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "",
@@ -139,11 +138,7 @@
     "exportJSON": "",
     "exportImage": "",
     "export": "",
-    "exportToPng": "",
-    "exportToSvg": "",
     "copyToClipboard": "",
-    "copyPngToClipboard": "",
-    "scale": "",
     "save": "",
     "saveAs": "",
     "load": "",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "",
     "collabSaveFailed_sizeExceeded": "",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "",
     "link": "",
     "eraser": "",
-    "hand": ""
+    "frame": "",
+    "hand": "",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": ""
   },
   "errorSplash": {
-    "headingMain_pre": "",
-    "headingMain_button": "",
+    "headingMain": "",
     "clearCanvasMessage": "",
-    "clearCanvasMessage_button": "",
     "clearCanvasCaveat": "",
-    "trackedToSentry_pre": "",
-    "trackedToSentry_post": "",
-    "openIssueMessage_pre": "",
-    "openIssueMessage_button": "",
-    "openIssueMessage_post": "",
+    "trackedToSentry": "",
+    "openIssueMessage": "",
     "sceneContent": ""
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "",
       "website": ""
     },
-    "noteDescription": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
-    "noteGuidelines": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
-    "noteLicense": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
+    "noteDescription": "",
+    "noteGuidelines": "",
+    "noteLicense": "",
     "noteItems": "",
     "atleastOneLibItem": "",
     "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "",
-    "content": "",
-    "link": ""
+    "content": ""
   },
   "confirmDialog": {
     "resetLibrary": "",
     "removeItemsFromLib": ""
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "Сіздің сызбаларыңыз өтпелі шифрлеу арқылы шифрланған, сондықтан Excalidraw серверлері оларды ешқашан көрмейді.",
     "link": "Excalidraw қолданатын өтпелі шифрлеу туралы блог жазбасы"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": ""
   },
   "colors": {
-    "ffffff": "",
-    "f8f9fa": "",
-    "f1f3f5": "",
-    "fff5f5": "",
-    "fff0f6": "",
-    "f8f0fc": "",
-    "f3f0ff": "",
-    "edf2ff": "",
-    "e7f5ff": "",
-    "e3fafc": "",
-    "e6fcf5": "",
-    "ebfbee": "",
-    "f4fce3": "",
-    "fff9db": "",
-    "fff4e6": "",
     "transparent": "",
-    "ced4da": "",
-    "868e96": "",
-    "fa5252": "",
-    "e64980": "",
-    "be4bdb": "",
-    "7950f2": "",
-    "4c6ef5": "",
-    "228be6": "",
-    "15aabf": "",
-    "12b886": "",
-    "40c057": "",
-    "82c91e": "",
-    "fab005": "",
-    "fd7e14": "",
-    "000000": "",
-    "343a40": "",
-    "495057": "",
-    "c92a2a": "",
-    "a61e4d": "",
-    "862e9c": "",
-    "5f3dc4": "",
-    "364fc7": "",
-    "1864ab": "",
-    "0b7285": "",
-    "087f5b": "",
-    "2b8a3e": "",
-    "5c940d": "",
-    "e67700": "",
-    "d9480f": ""
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "",
       "helpHint": ""
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/km-KH.json b/src/locales/km-KH.json
new file mode 100644
index 000000000..ff51abd8d
--- /dev/null
+++ b/src/locales/km-KH.json
@@ -0,0 +1,453 @@
+{
+  "labels": {
+    "paste": "បិទភ្ជាប់",
+    "pasteAsPlaintext": "បិទភ្ជាប់ជាអត្ថបទធម្មតា",
+    "pasteCharts": "បិទភ្ជាប់តារាង",
+    "selectAll": "ជ្រើសរើស​ទាំងអស់",
+    "multiSelect": "បន្ថែមធាតុទៅលើការជ្រើសរើស",
+    "moveCanvas": "ផ្លាស់ទីបាវ",
+    "cut": "កាត់",
+    "copy": "ចម្លង",
+    "copyAsPng": "ចម្លងទៅក្តារតម្បៀតខ្ទាស់ជា​ PNG",
+    "copyAsSvg": "ចម្លងទៅក្តារតម្បៀតខ្ទាស់ជា​ SVG",
+    "copyText": "ចម្លងទៅក្តារតម្បៀតខ្ទាស់ជា​អត្ថបទ",
+    "bringForward": "នាំយកទៅលើ",
+    "sendToBack": "នាំយកទៅក្រោយបង្អស់",
+    "bringToFront": "នាំយកទៅលើបង្អស់",
+    "sendBackward": "នាំយកទៅក្រោយ",
+    "delete": "លុប",
+    "copyStyles": "ចម្លងរចនាប័ទ្ម",
+    "pasteStyles": "បិទភ្ជាប់រចនាប័ទ្ម",
+    "stroke": "ខ្វាច់",
+    "background": "ផ្ទៃខាងក្រោយ",
+    "fill": "បំពេញ",
+    "strokeWidth": "ទទឹងខ្វាច់",
+    "strokeStyle": "រចនាប័ទ្មរបស់ខ្វាច់",
+    "strokeStyle_solid": "តាន់",
+    "strokeStyle_dashed": "ដាច់ៗ",
+    "strokeStyle_dotted": "ចំណុចៗ",
+    "sloppiness": "រចនាប័ទ្មបន្ទាត់",
+    "opacity": "ភាពច្បាស់",
+    "textAlign": "តម្រឹមអត្ថបទ",
+    "edges": "គែម",
+    "sharp": "មុត",
+    "round": "រាងមូល",
+    "arrowheads": "ក្បាលព្រួញ",
+    "arrowhead_none": "គ្មាន",
+    "arrowhead_arrow": "ព្រួញ",
+    "arrowhead_bar": "របារ",
+    "arrowhead_dot": "ចំណុច",
+    "arrowhead_triangle": "ត្រីកោណ",
+    "fontSize": "ទំហំពុម្ពអក្សរ",
+    "fontFamily": "ក្រុម​ពុម្ពអក្សរ",
+    "addWatermark": "បន្ថែមវ៉ាត់ធើម៉ាក \"Made with Excalidraw\"",
+    "handDrawn": "គូរដោយដៃ",
+    "normal": "ធម្មតា",
+    "code": "កូដ",
+    "small": "តូច",
+    "medium": "មធ្យម",
+    "large": "ធំ",
+    "veryLarge": "ធំខ្លាំង",
+    "solid": "តាន់",
+    "hachure": "Hachure",
+    "zigzag": "Zigzag",
+    "crossHatch": "បន្ទាត់ឆ្នូតៗ",
+    "thin": "ស្តើង",
+    "bold": "ដឹត",
+    "left": "ខាងឆ្វេង",
+    "center": "កណ្ដាល",
+    "right": "នៅខាងស្ដាំ",
+    "extraBold": "ដិតបន្ថែម",
+    "architect": "ស្ថាបត្យករ",
+    "artist": "សិល្បៈករ",
+    "cartoonist": "អ្នកគំនូរជីវចល",
+    "fileTitle": "ឈ្មោះ​ឯកសារ",
+    "colorPicker": "ឧបករណ៍​ជ្រើស​ពណ៌",
+    "canvasColors": "ប្រើលើបាវ",
+    "canvasBackground": "ផ្ទៃខាងក្រោយបាវ",
+    "drawingCanvas": "តំបន់គំនូរ",
+    "layers": "ស្រទាប់",
+    "actions": "សកម្មភាព",
+    "language": "ភាសា",
+    "liveCollaboration": "សហការគ្នាផ្ទាល់...",
+    "duplicateSelection": "ចម្លង",
+    "untitled": "គ្មានឈ្មោះ",
+    "name": "ឈ្មោះ",
+    "yourName": "ឈ្មោះ​របស់​អ្នក",
+    "madeWithExcalidraw": "បង្កើតជាមួយ Excalidraw",
+    "group": "ការជ្រើសរើសជាក្រុម",
+    "ungroup": "បំបែកក្រុមការជ្រើសរើសជាក្រុម",
+    "collaborators": "អ្នកសហការ",
+    "showGrid": "បង្ហាញក្រឡាចត្រង្គ",
+    "addToLibrary": "បន្ថែមទៅបណ្ណាល័យ",
+    "removeFromLibrary": "លុបចេញពីបណ្ណាល័យ",
+    "libraryLoadingMessage": "កំពុងផ្ទុកបណ្ណាល័យ...",
+    "libraries": "រកមើលបណ្ណាល័យ",
+    "loadingScene": "កំពុង​ផ្ទុក​ស៊ីន...",
+    "align": "តម្រឹម",
+    "alignTop": "តម្រឹមផ្នែកខាងលើ",
+    "alignBottom": "តម្រឹមផ្នែកខាងក្រោម",
+    "alignLeft": "​តម្រឹម​ឆ្វេង",
+    "alignRight": "តម្រឹម​ស្តាំ",
+    "centerVertically": "កណ្តាល​បញ្ឈរ",
+    "centerHorizontally": "កណ្តាល​ផ្ដេក",
+    "distributeHorizontally": "ចែកចាយផ្ដេក",
+    "distributeVertically": "ចែកចាយបញ្ឈរ",
+    "flipHorizontal": "ត្រឡប់​ដោយ​ផ្ដេក",
+    "flipVertical": "ត្រឡប់​ដោយ​បញ្ឈរ",
+    "viewMode": "ម៉ូដ​បង្ហាញ",
+    "share": "ចែករំលែក",
+    "showStroke": "បង្ហាញឧបករណ៍ជ្រើសរើសពណ៌ខ្វាច់",
+    "showBackground": "បង្ហាញឧបករណ៍ជ្រើសរើសពណ៌ផ្ទៃខាងក្រោយ",
+    "toggleTheme": "បិទ/បើកប្រធានបទ",
+    "personalLib": "បណ្ណាល័យផ្ទាល់ខ្លួន",
+    "excalidrawLib": "បណ្ណាល័យ Excalidraw",
+    "decreaseFontSize": "បន្ថយទំហំពុម្ពអក្សរ",
+    "increaseFontSize": "បង្កើនទំហំពុម្ពអក្សរ",
+    "unbindText": "ស្រាយអត្ថបទ",
+    "bindText": "ភ្ជាប់អត្ថបទទៅប្រអប់",
+    "createContainerFromText": "រុំអត្ថបទក្នុងប្រអប់មួយ",
+    "link": {
+      "edit": "កែតំណភ្ជាប់",
+      "create": "បង្កើតតំណភ្ជាប់",
+      "label": "តំណ"
+    },
+    "lineEditor": {
+      "edit": "កែសម្រួលបន្ទាត់",
+      "exit": "ចាកចេញពីការកែសម្រួលបន្ទាត់"
+    },
+    "elementLock": {
+      "lock": "ចាក់សោ",
+      "unlock": "ដោះសោ",
+      "lockAll": "ចាក់សោទាំងអស់",
+      "unlockAll": "ដោះសោទាំងអស់"
+    },
+    "statusPublished": "ត្រូវបានបោះពុម្ពផ្សាយ",
+    "sidebarLock": "ទុករបារចំហៀងបើក",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
+  },
+  "library": {
+    "noItems": "មិនទាន់មានធាតុបន្ថែមទេ...",
+    "hint_emptyLibrary": "ជ្រើសរើសធាតុនៅលើបាវដើម្បីបន្ថែមវានៅទីនេះ ឬដំឡើងបណ្ណាល័យពីឃ្លាំងសាធារណៈខាងក្រោម។",
+    "hint_emptyPrivateLibrary": "ជ្រើសរើសធាតុនៅលើបាវដើម្បីបន្ថែមវានៅទីនេះ"
+  },
+  "buttons": {
+    "clearReset": "កំណត់បាវឡើងវិញ",
+    "exportJSON": "នាំចេញជាឯកសារ",
+    "exportImage": "នាំរូបភាពចេញ",
+    "export": "រក្សាទុក​នៅ...",
+    "copyToClipboard": "ចម្លងទៅក្តារតម្បៀតខ្ទាស់",
+    "save": "រក្សាទុកទៅឯកសារបច្ចុប្បន្ន",
+    "saveAs": "រក្សាទុក​ជា",
+    "load": "បើក",
+    "getShareableLink": "យកតំណដែលអាចចែករំលែកបាន",
+    "close": "បិទ",
+    "selectLanguage": "រើសភាសា",
+    "scrollBackToContent": "រំកិលត្រឡប់ទៅមាតិកាវិញ",
+    "zoomIn": "ពង្រីក",
+    "zoomOut": "បង្រួម",
+    "resetZoom": "កំណត់ការពង្រីកឡើងវិញ",
+    "menu": "ម៉ឺនុយ",
+    "done": "រួចរាល់",
+    "edit": "កែ",
+    "undo": "ត្រឡប់វិញ",
+    "redo": "ធ្វើ​វិញ",
+    "resetLibrary": "កំណត់បណ្ណាល័យឡើងវិញ",
+    "createNewRoom": "បង្កើតបន្ទប់ថ្មី",
+    "fullScreen": "ពេញ​អេក្រង់",
+    "darkMode": "ម៉ូដងងឹត",
+    "lightMode": "ម៉ូដភ្លឺ",
+    "zenMode": "ម៉ូត Zen",
+    "exitZenMode": "ចេញពី zen​ ម៉ូត",
+    "cancel": "បោះបង់",
+    "clear": "សម្អាត",
+    "remove": "ដកចេញ",
+    "publishLibrary": "បោះពុម្ពផ្សាយ",
+    "submit": "ដាក់​ស្នើ",
+    "confirm": "បញ្ជាក់"
+  },
+  "alerts": {
+    "clearReset": "វានឹងសម្អាតបាវទាំងមូល។ តើ​អ្នក​ប្រាកដ​ឬ​អត់?",
+    "couldNotCreateShareableLink": "មិនអាចបង្កើតតំណដែលអាចចែករំលែកបានទេ។",
+    "couldNotCreateShareableLinkTooBig": "មិន​អាច​បង្កើត​តំណ​ដែល​អាច​ចែក​រំលែក​បាន៖ ស៊ីន​ធំ​ពេក",
+    "couldNotLoadInvalidFile": "មិនអាចផ្ទុកឯកសារមិនត្រឹមត្រូវបានទេ។",
+    "importBackendFailed": "ការនាំចូលពីម៉ាស៊ីនមេបានបរាជ័យ។",
+    "cannotExportEmptyCanvas": "មិនអាចនាំចេញបាវទទេបានទេ។",
+    "couldNotCopyToClipboard": "មិនអាចចម្លងទៅក្ដារតម្បៀតខ្ទាស់បានទេ។",
+    "decryptFailed": "មិនអាចឌិគ្រីបទិន្នន័យបានទេ។",
+    "uploadedSecurly": "ការបង្ហោះត្រូវបានការពារដោយការអ៊ិនគ្រីបពីចុងដល់ចប់ មានន័យថា ទាំងម៉ាស៊ីនមេរបស់ Excalidraw ឬភាគីទីបីមិនអាចអានខ្លឹមសារបានទេ។",
+    "loadSceneOverridePrompt": "ការផ្ទុកគំនូរខាងក្រៅនឹងជំនួសមាតិកាដែលមានស្រាប់របស់អ្នក។ តើអ្នកចង់បន្តទេ?",
+    "collabStopOverridePrompt": "ការបញ្ឈប់សម័យនឹងសរសេរជាន់លើគំនូរដែលបានរក្សាទុកនៅលើកុំព្យូទ័ររបស់អ្នកពីមុន។ តើ​អ្នក​ប្រាកដ​ឬ​អត់?\n\n(ប្រសិនបើអ្នកចង់រក្សាគំនូរដែលនៅលើកុំព្យូទ័ររបស់អ្នក គ្រាន់តែបិទផ្ទាំងកម្មវិធីរុករក។)",
+    "errorAddingToLibrary": "មិនអាចបន្ថែមធាតុទៅបណ្ណាល័យបានទេ",
+    "errorRemovingFromLibrary": "មិនអាចលុបធាតុចេញពីបណ្ណាល័យបានទេ",
+    "confirmAddLibrary": "វានឹងបន្ថែមរូបរាង {{numShapes}} ទៅបណ្ណាល័យរបស់អ្នក។ តើ​អ្នក​ប្រាកដ​ឬ​អត់?",
+    "imageDoesNotContainScene": "រូបភាពនេះហាក់ដូចជាមិនមានទិន្នន័យស៊ីនណាមួយទេ។ តើអ្នកបានបើកការបង្កប់ស៊ីននៅពេលនាំចេញទេ?",
+    "cannotRestoreFromImage": "មិនអាចស្ដារស៊ីនពីឯកសាររូបភាពនេះបានទេ",
+    "invalidSceneUrl": "មិន​អាច​នាំចូល​ស៊ីន​ពី URL ដែល​បាន​ផ្តល់​ឱ្យ​ទេ។ វាមានទម្រង់ខុស ឬមិនមានទិន្នន័យ Excalidraw JSON ដែលត្រឹមត្រូវ។",
+    "resetLibrary": "វានឹងសម្អាតបាវទាំងមូល។ តើ​អ្នក​ប្រាកដ​ឬ​អត់?",
+    "removeItemsFromsLibrary": "តើអ្នកប្រាកដថាចង់លុប {{count}} ធាតុចេញពីបណ្ណាល័យទេ?",
+    "invalidEncryptionKey": "សោអ៊ីនគ្រីបត្រូវតែមាន 22 តួអក្សរ។ ការសហការផ្ទាល់ត្រូវបានបិទ។",
+    "collabOfflineWarning": "គ្មានការតភ្ជាប់អ៊ីនធឺណិត។\nការផ្លាស់ប្តូររបស់អ្នកនឹងមិនត្រូវបានរក្សាទុកទេ!"
+  },
+  "errors": {
+    "unsupportedFileType": "ប្រភេទឯកសារមិនត្រូវបានគាំទ្រទេ។",
+    "imageInsertError": "មិនអាចបញ្ចូលរូបភាពបានទេ។ សូម​ព្យាយាម​ម្តង​ទៀត​នៅ​ពេល​ក្រោយ……",
+    "fileTooBig": "ឯកសារធំពេក។ ទំហំអតិបរមាដែលអនុញ្ញាតគឺ {{maxSize}}។",
+    "svgImageInsertError": "មិនអាចបញ្ចូលរូបភាព SVG បានទេ។ ស្លាក SVG ហាក់ដូចជាមិនត្រឹមត្រូវ។",
+    "invalidSVGString": "SVG មិន​ត្រឹមត្រូវ។",
+    "cannotResolveCollabServer": "មិនអាចភ្ជាប់ទៅម៉ាស៊ីនមេសហការផ្ទាល់បានទេ។ សូមផ្ទុកទំព័រឡើងវិញ ហើយព្យាយាមម្តងទៀត។",
+    "importLibraryError": "មិនអាចផ្ទុកបណ្ណាល័យបានទេ។",
+    "collabSaveFailed": "មិនអាចរក្សាទុកទៅម៉ាស៊ីនមេបានទេ។ ប្រសិនបើបញ្ហានៅតែបន្តកើតមាន​ អ្នកគួរតែរក្សាទុកឯកសាររបស់អ្នកនៅលើកុំព្យូទ័ររបស់អ្នកសិន ដើម្បីធានាថាការងាររបស់អ្នកមិនបាត់បង់។",
+    "collabSaveFailed_sizeExceeded": "មិនអាចរក្សាទុកទៅម៉ាស៊ីនមេបានទេ, ផ្ទាំងបាវហាក់ដូចជាធំពេក។ អ្នកគួរតែរក្សាទុកឯកសាររបស់អ្នកនៅលើកុំព្យូទ័ររបស់អ្នកសិន ដើម្បីធានាថាការងាររបស់អ្នកមិនបាត់បង់។",
+    "brave_measure_text_error": {
+      "line1": "អ្នកហាក់ដូចជាកំពុងប្រើប្រាស់កម្មវិធីរុករកតាមអ៊ីនធឺណិត Brave ជាមួយនឹងការកំណត់ <bold>ការពារស្នាមម្រាមដៃយ៉ាងធ្ងន់ធ្ងរ</bold> ត្រូវបានបើក។",
+      "line2": "វាអាចបណ្តាលឱ្យមានការបំបែក <bold>ធាតុអត្ថបទ</bold> នៅក្នុងគំនូររបស់អ្នក។",
+      "line3": "យើងណែនាំយ៉ាងមុតមាំឱ្យបិទការកំណត់នេះ។ អ្នកអាចអនុវត្តតាម <link>ជំហានទាំងនេះ</link> ដើម្បីបិទការកំណត់នេះ។",
+      "line4": "ប្រសិនបើការបិទការកំណត់នេះមិនបានជួសជុលការបង្ហាញធាតុអត្ថបទទេ សូមដាក់ <issueLink>issue</issueLink> នៅលើ GitHub ឬរាយការណ៍នៅលើ <discordLink>Discord</discordLink> របស់យើង"
+    }
+  },
+  "toolBar": {
+    "selection": "ការជ្រើសរើស",
+    "image": "បញ្ចូលរូបភាព",
+    "rectangle": "ចតុ​កោណ​កែង​",
+    "diamond": "ពេជ្រ",
+    "ellipse": "ពងក្រពើ",
+    "arrow": "ព្រួញ",
+    "line": "បន្ទាត់",
+    "freedraw": "គូរ",
+    "text": "អត្ថបទ",
+    "library": "បណ្ណាល័យ",
+    "lock": "រក្សារឧបករណ៍ដែលបានជ្រើសរើសបន្ទាប់ពីគូររួច",
+    "penMode": "របៀបប៊ិច - ជៀសវាងការប៉ះ",
+    "link": "បន្ថែម/ធ្វើបច្ចុប្បន្នភាពតំណភ្ជាប់សម្រាប់រូបរាងដែលបានជ្រើសរើស",
+    "eraser": "ជ័រលុប",
+    "frame": "",
+    "hand": "ដៃ (panning tool)",
+    "extraTools": ""
+  },
+  "headings": {
+    "canvasActions": "សកម្មភាពបាវ",
+    "selectedShapeActions": "សកម្មភាពរបស់រាងដែលបានជ្រើសរើស",
+    "shapes": "រាង"
+  },
+  "hints": {
+    "canvasPanning": "ដើម្បីផ្លាស់ទីបាវ សូមសង្កត់កង់កណ្ដុរឬគ្រាប់ចុចspacebarខណៈពេលកំពុងអូស ឬប្រើឧបករណ៍ដៃ។",
+    "linearElement": "ចុចដើម្បីបង្កើតចំណុចច្រើន អូសដើម្បីបង្កើតបន្ទាត់មួយ",
+    "freeDraw": "ចុច​ហើយ​អូស លែង​ពេល​រួចរាល់",
+    "text": "គន្លឹះ៖ អ្នកក៏អាចបន្ថែមអត្ថបទដោយចុចពីរដងនៅកន្លែងណាមួយដោយប្រើឧបករណ៍ជ្រើសរើស",
+    "text_selected": "ចុចពីរដង ឬចុច ENTER ដើម្បីកែសម្រួលអត្ថបទ",
+    "text_editing": "ចុច Escape ឬ CtrlOrCmd +ENTER ដើម្បីបញ្ចប់ការកែសម្រួល",
+    "linearElementMulti": "ចុចលើចំណុចចុងក្រោយ ឬចុច Esc/Enter ដើម្បីបញ្ចប់",
+    "lockAngle": "អ្នកអាចសង្កត់ Shift ដើម្បីកំណត់មុំ",
+    "resize": "អ្នកអាចសង្កត់ SHIFT ដើម្បីបងំ្ខឲមានសមាមាត្រ ខណៈពេលដែលប្តូរទំហំ\nសង្កត់ ALT ដើម្បីប្តូរទំហំពីកណ្តាល",
+    "resizeImage": "អ្នកអាចប្តូរទំហំរូបភាពដោយសេរីដោយសង្កត់ SHIFT,\nសង្កត់ ALT ដើម្បីប្តូរទំហំពីកណ្តាល",
+    "rotate": "អ្នកអាចសង្កត់ Shift ខណៈពេលកំពុងបង្វិល ដើម្បីកម្រិតមុំ",
+    "lineEditor_info": "សង្កត់ CtrlOrCmd ហើយចុចពីរដង ឬចុច CtrlOrCmd + Enter ដើម្បីកែសម្រួលចំណុច",
+    "lineEditor_pointSelected": "ចុច Delete ដើម្បីលុបចំណុច(ច្រើន)\nCtrlOrCmd+D ដើម្បីចម្លង, ឬអូសដើម្បីផ្លាស់ទី",
+    "lineEditor_nothingSelected": "ជ្រើសរើសចំណុចដែលត្រូវកែសម្រួល (សង្កត់ SHIFT ដើម្បីជ្រើសរើសច្រើនចំណុច)\nឬ សង្កត់ Alt ហើយចុចដើម្បីបន្ថែមចំណុចថ្មី។",
+    "placeImage": "ចុចដើម្បីដាក់រូបភាព ឬចុចហើយអូសដើម្បីកំណត់ទំហំរបស់រូបភាពដោយដៃ",
+    "publishLibrary": "បោះពុម្ពផ្សាយបណ្ណាល័យផ្ទាល់ខ្លួនរបស់អ្នក",
+    "bindTextToElement": "ចុច Enter ដើម្បីបន្ថែមអត្ថបទ",
+    "deepBoxSelect": "សង្កត់ CtrlOrCmd ដើម្បីជ្រើសរើសយ៉ាងជ្រៅ និងជៀសវាងការអូស",
+    "eraserRevert": "សង្កត់ Alt ដើម្បីដកការជ្រើសរើសធាតុដែលត្រូវបានសម្គាល់សម្រាប់ការលុប",
+    "firefox_clipboard_write": "បើកមុខងារនេះដោយកំណត់ទង់ \"dom.events.asyncClipboard.clipboardItem\" ទៅ \"true\" \nដើម្បីផ្លាស់ប្តូរទង់កម្មវិធីរុករកនៅក្នុង Firefox សូមចូលទៅកាន់ទំព័រ \"about:config\"។"
+  },
+  "canvasError": {
+    "cannotShowPreview": "មិនអាចបង្ហាញការមើលជាមុនបាន",
+    "canvasTooBig": "បាវអាចមានទំហំធំពេក។",
+    "canvasTooBigTip": "គន្លឹះ៖ ព្យាយាមផ្លាស់ទីធាតុដែលឆ្ងាយបំផុតឱ្យទៅជិតគ្នាបន្តិច។"
+  },
+  "errorSplash": {
+    "headingMain": "បានជួបប្រទះកំហុសមួយ។ សូមព្យាយាម <button>ផ្ទុកទំព័រឡើងវិញ</button>។",
+    "clearCanvasMessage": "ប្រសិនបើការផ្ទុកឡើងវិញមិនអាចដោះស្រាយកំហុសបានទេ សូមសាកល្បង <button>សម្អាតបាវ។</button>",
+    "clearCanvasCaveat": " នេះនឹងបណ្តាលឱ្យបាត់បង់ការងារ ",
+    "trackedToSentry": "កំហុសជាមួយលេខសម្គាល់ {{eventId}} ត្រូវបានតាមដាននៅលើប្រព័ន្ធរបស់យើង។",
+    "openIssueMessage": "យើងមានការប្រុងប្រយ័ត្នខ្លាំងណាស់ក្នុងការមិនបញ្ចូលព័ត៌មានរបស់ស៊ីនរបស់អ្នកទៅលើកំហុស។ ប្រសិនបើស៊ីនរបស់អ្នកមិនមានលក្ខណៈឯកជនទេ សូមពិចារណាបន្តទៅកាន់ <button>កម្មវិធីតាមដានកំហុសរបស់យើង។</button> សូមបញ្ចូលព័ត៌មានខាងក្រោមដោយចម្លង និងបិទភ្ជាប់វាទៅក្នុងបញ្ហារបស់ GitHub។",
+    "sceneContent": "មាតិកាបាវ៖"
+  },
+  "roomDialog": {
+    "desc_intro": "អ្នកអាចអញ្ជើញអ្នកដទៃឱ្យសហការជាមួយអ្នកនៅលើស៊ីនបច្ចុប្បន្ន។",
+    "desc_privacy": "កុំបារម្ភ វគ្គប្រើការអ៊ិនគ្រីបពីចុងដល់ចប់ ដូច្នេះអ្វីដែលអ្នកគូរនឹងនៅតែជាឯកជន។ សូម្បីតែម៉ាស៊ីនមេរបស់យើងក៏នឹងមិនអាចមើលឃើញអ្វីដែលអ្នកកំពុងធ្វើដែរ។",
+    "button_startSession": "ចាប់ផ្តើមវគ្គ",
+    "button_stopSession": "បញ្ឈប់វគ្គ",
+    "desc_inProgressIntro": "វគ្គសហការផ្ទាល់ឥឡូវនេះកំពុងដំណើរការ។",
+    "desc_shareLink": "ចែករំលែកតំណនេះជាមួយអ្នកដែលអ្នកចង់សហការជាមួយ៖",
+    "desc_exitSession": "ការបញ្ឈប់វគ្គនេះនឹងផ្តាច់អ្នកចេញពីបន្ទប់ ប៉ុន្តែអ្នកនឹងនៅតែអាចបន្តប្រើបាវនៅលើកុំព្យូទ័ររបស់អ្នក។ សូមចំណាំថាវានឹងមិនប៉ះពាល់ដល់អ្នកប្រើប្រាស់ផ្សេងទៀតទេ​ ហើយពួកគេនឹងនៅតែអាចបន្តសហការលើកំណែរបស់ពួកគេ។",
+    "shareTitle": "ចូលរួមវគ្គសហការផ្ទាល់នៅលើ Excalidraw"
+  },
+  "errorDialog": {
+    "title": "មានកំហុស"
+  },
+  "exportDialog": {
+    "disk_title": "រក្សាទុកទៅថាស",
+    "disk_details": "នាំចេញទិន្នន័យរបស់ស៊ីនជាឯកសារដែលអ្នកអាចនាំចូលនៅពេលក្រោយ។",
+    "disk_button": "រក្សាទុកក្នុងឯកសារ",
+    "link_title": "តំណដែលអាចចែករំលែកបាន",
+    "link_details": "នាំចេញជាតំណបានតែមើលឬអាន។",
+    "link_button": "នាំចេញជាតំណ",
+    "excalidrawplus_description": "រក្សាទុកស៊ីនទៅកន្លែងធ្វើការ Excalidraw+ របស់អ្នក។",
+    "excalidrawplus_button": "នាំចេញ",
+    "excalidrawplus_exportError": "មិនអាចនាំចេញទៅ Excalidraw+ បានទេនៅពេលនេះ..."
+  },
+  "helpDialog": {
+    "blog": "អានប្លក់របស់យើង",
+    "click": "ចុច",
+    "deepSelect": "ការជ្រើសរើសជាក្រុម",
+    "deepBoxSelect": "ជ្រើសរើសជាក្រុម និង ជៀសវាងការអូសទាញផ្លាស់ទី",
+    "curvedArrow": "ព្រួញកោង",
+    "curvedLine": "ព្រួញកោង",
+    "documentation": "ឯកសារ",
+    "doubleClick": "ចុច​ពីរ​ដង",
+    "drag": "អូស",
+    "editor": "កម្មវិធីនិពន្ធ",
+    "editLineArrowPoints": "កែសម្រួលចំណុចនៃបន្ទាត់ ឬព្រួញ",
+    "editText": "បន្ថែម ឬកែសម្រួលអត្ថបទ",
+    "github": "រកឃើញបញ្ហា? ដាក់ស្នើ",
+    "howto": "ឯកសារជំនួយ",
+    "or": "ឬ",
+    "preventBinding": "ទប់ស្កាត់ការចងព្រួញ",
+    "tools": "ឧបករណ៍",
+    "shortcuts": "ផ្លូវកាត់ក្តារចុច",
+    "textFinish": "បញ្ចប់ការកែសម្រួល (កម្មវិធីនិពន្ធអត្ថបទ)",
+    "textNewLine": "ចុះបន្ទាត់ (កម្មវិធីនិពន្ធអត្ថបទ)",
+    "title": "ជំនួយ",
+    "view": "បង្ហាញ",
+    "zoomToFit": "ធ្វើមាត្រដ្ឋានឱ្យសមនឹងធាតុទាំងអស់។",
+    "zoomToSelection": "ពង្រីកទៅការជ្រើសរើស",
+    "toggleElementLock": "ចាក់សោ/ដោះសោការជ្រើសរើស",
+    "movePageUpDown": "ផ្លាស់ទីទំព័រឡើងលើ/ចុះក្រោម",
+    "movePageLeftRight": "ផ្លាស់ទីទំព័រទៅឆ្វេង/ស្ដាំ"
+  },
+  "clearCanvasDialog": {
+    "title": "សម្អាតបាវ"
+  },
+  "publishDialog": {
+    "title": "បោះពុម្ពបណ្ណាល័យ",
+    "itemName": "ឈ្មោះ​ធាតុ",
+    "authorName": "ឈ្មោះអ្នកនិពន្ធ",
+    "githubUsername": "ឈ្មោះអ្នកប្រើ GitHub",
+    "twitterUsername": "ឈ្មោះអ្នកប្រើ Twitter",
+    "libraryName": "ឈ្មោះបណ្ណាល័យ",
+    "libraryDesc": "ការពិពណ៌នាអំពីបណ្ណាល័យ",
+    "website": "គេហទំព័រ",
+    "placeholder": {
+      "authorName": "ឈ្មោះរបស់អ្នក ឬឈ្មោះអ្នកប្រើប្រាស់",
+      "libraryName": "ឈ្មោះបណ្ណាល័យរបស់អ្នក",
+      "libraryDesc": "ការពិពណ៌នាអំពីបណ្ណាល័យរបស់អ្នក នឹងអនុញ្ញាតឱ្យអ្នក​ផ្សេងយល់ពីការប្រើប្រាស់របស់វា។",
+      "githubHandle": "ឈ្មោះអ្នកប្រើ GitHub (ជាជម្រើស) ដូច្នេះអ្នកអាចកែសម្រួលបណ្ណាល័យបាននៅពេលដាក់ស្នើសម្រាប់ការពិនិត្យ",
+      "twitterHandle": "ឈ្មោះអ្នកប្រើប្រាស់ Twitter (ជាជម្រើស) ដូច្នេះយើងដឹងថាអ្នកណាដែលត្រូវផ្តល់ក្រេឌីតនៅពេលផ្សព្វផ្សាយតាម Twitter",
+      "website": "ភ្ជាប់ទៅគេហទំព័រផ្ទាល់ខ្លួនរបស់អ្នក ឬគេហទំព័រផ្សេងទៀត (ជាជម្រើស)"
+    },
+    "errors": {
+      "required": "ត្រូវបានទាមទារ",
+      "website": "សូមវាយបញ្ចូល URL ​ដែលត្រឹមត្រូវ"
+    },
+    "noteDescription": "ដាក់ស្នើបណ្ណាល័យរបស់អ្នកដើម្បីដាក់បញ្ចូលក្នុង <link>ឃ្លាំងបណ្ណាល័យសាធារណៈ</link> សម្រាប់ឲ្យអ្នកផ្សេងប្រើក្នុងគំនូររបស់ពួកគេ។",
+    "noteGuidelines": "បណ្ណាល័យត្រូវតែអនុម័តដោយដៃជាមុនសិន។ សូមអាន <link>ការណែនាំ</link> មុនពេលដាក់ស្នើ។ ការប្រាស្រ័យទាក់ទងជាបន្តបន្ទាប់ និងការផ្លាស់ប្តូរបណ្ណាល័យទាមទារឱ្យអ្នកមានគណនី GitHub ប៉ុន្តែមិនត្រូវបានទាមទារយ៉ាងតឹងរ៉ឹងទេ។",
+    "noteLicense": "តាមរយៈការដាក់ស្នើ អ្នកយល់ព្រមថាបណ្ណាល័យនឹងត្រូវបានបោះពុម្ពផ្សាយក្រោម <link>អាជ្ញាប័ណ្ណ MIT</link> ដែលមានន័យយ៉ាងខ្លី អ្នកណាក៏អាចប្រើប្រាស់វាបានដោយគ្មានការរឹតត្បិត។",
+    "noteItems": "ធាតុនីមួយៗនៅក្នុងបណ្ណាល័យត្រូវតែមានឈ្មោះផ្ទាល់ខ្លួនដើម្បីយើងអាចត្រងវាបាន។ ធាតុខាងក្រោមនឹងត្រូវបានរួមបញ្ចូល:",
+    "atleastOneLibItem": "សូមជ្រើសរើសយ៉ាងហោចណាស់ធាតុបណ្ណាល័យមួយដើម្បីចាប់ផ្តើម",
+    "republishWarning": "ចំណាំ៖ ធាតុដែលត្រូវបានជ្រើសរើសមួយចំនួនត្រូវបានសម្គាល់ថាបានបោះពុម្ព/បញ្ជូនរួចរាល់ហើយ។ អ្នកគួរតែបញ្ជូនធាតុឡើងវិញនៅពេលដែលធ្វើបច្ចុប្បន្នភាពបណ្ណាល័យដែលមានស្រាប់ ឬការបញ្ជូន។"
+  },
+  "publishSuccessDialog": {
+    "title": "បណ្ណាល័យត្រូវបានដាក់ស្នើ",
+    "content": "សូមអរគុណ {{authorName}}។ បណ្ណាល័យរបស់អ្នកត្រូវបានបញ្ជូនមកពិនិត្យ។ សូមចុច <link>ទីនេះ</link> ដើម្បីតាមដានស្ថានភាពនៃការដាក់ស្នើនេះ។"
+  },
+  "confirmDialog": {
+    "resetLibrary": "កំណត់បណ្ណាល័យឡើងវិញ",
+    "removeItemsFromLib": "លុបធាតុដែលបានជ្រើសរើសចេញពីបណ្ណាល័យ"
+  },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
+  "encrypted": {
+    "tooltip": "គំនូររបស់អ្នកត្រូវបានអ៊ិនគ្រីបពីចុងដល់ចប់ ដូច្នេះម៉ាស៊ីនមេរបស់ Excalidraw នឹងមិនឃើញពួកវាទេ។",
+    "link": "ប្លក់ផុសលើការអ៊ិនគ្រីបពីចុងដល់ចុងក្នុង Excalidraw"
+  },
+  "stats": {
+    "angle": "មុំ",
+    "element": "ធាតុ",
+    "elements": "ធាតុច្រើន",
+    "height": "កម្ពស់",
+    "scene": "ស៊ីន",
+    "selected": "បានជ្រើសរើស",
+    "storage": "ការផ្ទុក",
+    "title": "ស្ថិតិសម្រាប់ nerds",
+    "total": "សរុប",
+    "version": "ជំនាន់:",
+    "versionCopy": "ចុចដើម្បីចម្លង",
+    "versionNotAvailable": "កំណែមិនអាចប្រើបាន",
+    "width": "ទទឹង​"
+  },
+  "toast": {
+    "addedToLibrary": "បានបន្ថែមទៅបណ្ណាល័យ",
+    "copyStyles": "រចនាប័ទ្មត្រូវបានចម្លង។",
+    "copyToClipboard": "បានចម្លងទៅក្ដារតម្បៀតខ្ទាស់។",
+    "copyToClipboardAsPng": "បានចម្លង {{exportSelection}} ទៅក្ដារតម្បៀតខ្ទាស់ជា PNG\n({{exportColorScheme}})",
+    "fileSaved": "ឯកសារត្រូវបានរក្សាទុក។",
+    "fileSavedToFilename": "បានរក្សាទុកនៅក្នុង {filename}",
+    "canvas": "តំបន់គំនូរ",
+    "selection": "ការជ្រើសរើស",
+    "pasteAsSingleElement": "ប្រើ {{shortcut}} ដើម្បីបិទភ្ជាប់ជាធាតុតែមួយ,\nឬបិទភ្ជាប់ទៅក្នុងកម្មវិធីនិពន្ធអត្ថបទដែលមានស្រាប់"
+  },
+  "colors": {
+    "transparent": "ថ្លាមើលធ្លុះ",
+    "black": "ពណ៍ខ្មៅ",
+    "white": "ពណ៌ស",
+    "red": "ពណ៌ក្រហម",
+    "pink": "ពណ៌ផ្កាឈូក",
+    "grape": "ពណ៌ទំពាំងបាយជូរ",
+    "violet": "ពណ៌ស្វាយ",
+    "gray": "ពណ៌ប្រផេះ",
+    "blue": "ពណ៌ខៀវ",
+    "cyan": "ពណ៌ផ្ទៃមេឃ",
+    "teal": "ពណ៌​ខៀវបៃតង",
+    "green": "ពណ៌បៃតង",
+    "yellow": "ពណ៌លឿង",
+    "orange": "ពណ៌ទឹកក្រូច",
+    "bronze": "ពណ៌សំរិទ្ធ"
+  },
+  "welcomeScreen": {
+    "app": {
+      "center_heading": "ទិន្នន័យទាំងអស់របស់អ្នក ត្រូវបានរក្សាទុកនៅក្នុង browser របស់អ្នក ។",
+      "center_heading_plus": "តើ​អ្នក​ចង់​ទៅ Excalidraw+ ​វិញ ឬ មែន?",
+      "menuHint": "នាំចេញ ចំណូលចិត្ត ភាសា ..."
+    },
+    "defaults": {
+      "menuHint": "ការនាំចេញ ចំណូលចិត្ត និង ច្រើនទៀត...",
+      "center_heading": "ងាយស្រួល ។ ធ្វើ ។​ ដ្យាក្រាម ។",
+      "toolbarHint": "ជ្រើសរើសឧបករណ៍មួយ និង ចាប់ផ្តើមគូរ!",
+      "helpHint": "ផ្លូវកាត់ &​ ជំនួយ"
+    }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "ពណ៌ផ្ទាល់ខ្លួនដែលប្រើច្រើនបំផុត",
+    "colors": "ពណ៌",
+    "shades": "ស្រមោល",
+    "hexCode": "លេខកូដ hex",
+    "noShades": "មិនមានស្រមោលសម្រាប់ពណ៌នេះទេ"
+  }
+}
diff --git a/src/locales/ko-KR.json b/src/locales/ko-KR.json
index f170e4cbf..c6337bc8d 100644
--- a/src/locales/ko-KR.json
+++ b/src/locales/ko-KR.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "삼각형",
     "fontSize": "글자 크기",
     "fontFamily": "글꼴",
-    "onlySelected": "선택한 항목만",
-    "withBackground": "배경",
-    "exportEmbedScene": "화면을 담기",
-    "exportEmbedScene_details": "화면 정보가 내보내는 PNG/SVG 파일에 저장되어 이후에 파일에서 화면을 복구할 수 있습니다. 파일 크기가 증가합니다.",
     "addWatermark": "\"Made with Excalidraw\" 추가",
     "handDrawn": "손글씨",
     "normal": "일반",
@@ -54,6 +50,7 @@
     "veryLarge": "매우 크게",
     "solid": "단색",
     "hachure": "평행선",
+    "zigzag": "지그재그",
     "crossHatch": "교차선",
     "thin": "얇게",
     "bold": "굵게",
@@ -99,7 +96,6 @@
     "flipHorizontal": "좌우반전",
     "flipVertical": "상하반전",
     "viewMode": "보기 모드",
-    "toggleExportColorScheme": "내보내기의 색상 테마 전환하기",
     "share": "공유",
     "showStroke": "윤곽선 색상 선택기 열기",
     "showBackground": "배경 색상 선택기 열기",
@@ -127,7 +123,10 @@
       "unlockAll": "모두 잠금 해제"
     },
     "statusPublished": "게시됨",
-    "sidebarLock": "사이드바 유지"
+    "sidebarLock": "사이드바 유지",
+    "selectAllElementsInFrame": "프레임의 모든 요소 선택",
+    "removeAllElementsFromFrame": "프레임의 모든 요소 삭제",
+    "eyeDropper": "캔버스에서 색상 고르기"
   },
   "library": {
     "noItems": "추가된 아이템 없음",
@@ -139,11 +138,7 @@
     "exportJSON": "파일로 내보내기",
     "exportImage": "이미지 내보내기",
     "export": "다른 이름으로 저장...",
-    "exportToPng": "PNG로 내보내기",
-    "exportToSvg": "SVG로 내보내기",
     "copyToClipboard": "클립보드로 복사",
-    "copyPngToClipboard": "클립보드로 PNG 이미지 복사",
-    "scale": "크기",
     "save": "현재 파일에 저장",
     "saveAs": "다른 이름으로 저장",
     "load": "열기",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "데이터베이스에 저장하지 못했습니다. 문제가 계속 된다면, 작업 내용을 잃지 않도록 로컬 저장소에 저장해 주세요.",
     "collabSaveFailed_sizeExceeded": "데이터베이스에 저장하지 못했습니다. 캔버스가 너무 큰 거 같습니다. 문제가 계속 된다면, 작업 내용을 잃지 않도록 로컬 저장소에 저장해 주세요.",
     "brave_measure_text_error": {
-      "start": "귀하께서는",
-      "aggressive_block_fingerprint": "강력한 지문 차단",
-      "setting_enabled": "설정이 활성화된 Brave browser를 사용하고 계신 것 같습니다",
-      "break": "이 기능으로 인해 화이트보드의",
-      "text_elements": "텍스트 요소들이",
-      "in_your_drawings": "손상될 수 있습니다",
-      "strongly_recommend": "해당 기능을 설정에서 비활성화하는 것을 강력히 권장 드립니다. 비활성화 방법에 대해서는",
-      "steps": "이 게시글을",
-      "how": "참고해주세요.",
-      "disable_setting": " 만약 이 설정을 껐음에도 텍스트 요소들이 올바르게 표시되지 않는다면, 저희",
-      "issue": "Github에 이슈를",
-      "write": "올려주시거나",
-      "discord": "Discord에 제보해주세요"
+      "line1": "귀하께서는 <bold>강력한 지문 차단 설정</bold>이 활성화된 Brave browser를 사용하고 계신 것 같습니다.",
+      "line2": "이 기능으로 인해 화이트보드의 <bold>텍스트 요소들</bold>이 손상될 수 있습니다.",
+      "line3": "저희는 해당 기능을 비활성화하는 것을 강력히 권장 드립니다. 비활성화 방법에 대해서는 <link>이 게시글</link>을 참고해주세요.",
+      "line4": "만약 이 설정을 껐음에도 텍스트 요소들이 올바르게 표시되지 않는다면, 저희 Github에 <issueLink>이슈</issueLink>를 올려주시거나 <discordLink>Discord</discordLink>로 알려주세요."
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "펜 모드 - 터치 방지",
     "link": "선택한 도형에 대해서 링크를 추가/업데이트",
     "eraser": "지우개",
-    "hand": "손 (패닝 도구)"
+    "frame": "프레임 도구",
+    "hand": "손 (패닝 도구)",
+    "extraTools": "다른 도구"
   },
   "headings": {
     "canvasActions": "캔버스 동작",
@@ -256,7 +244,7 @@
     "resize": "SHIFT 키를 누르면서 조정하면 크기의 비율이 제한됩니다.\nALT를 누르면서 조정하면 중앙을 기준으로 크기를 조정합니다.",
     "resizeImage": "SHIFT를 눌러서 자유롭게 크기를 변경하거나,\nALT를 눌러서 중앙을 고정하고 크기를 변경하기",
     "rotate": "SHIFT 키를 누르면서 회전하면 각도를 제한할 수 있습니다.",
-    "lineEditor_info": "포인트를 편집하려면 Ctrl/Cmd을 누르고 더블 클릭을 하거나 Ctrl/Cmd + Enter를 누르세요",
+    "lineEditor_info": "꼭짓점을 수정하려면 CtrlOrCmd 키를 누르고 더블 클릭을 하거나 CtrlOrCmd + Enter를 누르세요.",
     "lineEditor_pointSelected": "Delete 키로 꼭짓점을 제거하거나,\nCtrlOrCmd+D 로 복제하거나, 드래그 해서 이동시키기",
     "lineEditor_nothingSelected": "꼭짓점을 선택해서 수정하거나 (SHIFT를 눌러서 여러개 선택),\nAlt를 누르고 클릭해서 새로운 꼭짓점 추가하기",
     "placeImage": "클릭해서 이미지를 배치하거나, 클릭하고 드래그해서 사이즈를 조정하기",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "팁: 멀리 있는 요소들을 좀 더 가까이로 붙여 보세요."
   },
   "errorSplash": {
-    "headingMain_pre": "오류가 발생했습니다. ",
-    "headingMain_button": "페이지 새로고침",
-    "clearCanvasMessage": "새로고침으로 해결되지 않을 경우, ",
-    "clearCanvasMessage_button": "캔버스 비우기",
+    "headingMain": "오류가 발생했습니다. <button>페이지 새로고침</button>",
+    "clearCanvasMessage": "새로고침으로 해결되지 않을 경우, <button>캔버스 비우기</button>",
     "clearCanvasCaveat": " 작업 내용을 잃게 됩니다 ",
-    "trackedToSentry_pre": "오류 ",
-    "trackedToSentry_post": " 가 시스템에서 발견되었습니다.",
-    "openIssueMessage_pre": "저희는 화면 정보를 오류에 포함하지 않도록 매우 주의하고 있습니다. 혹시 화면에 민감한 내용이 없다면 이곳에 업로드를 고려해주세요.",
-    "openIssueMessage_button": "버그 트래커",
-    "openIssueMessage_post": " 아래 정보를 GitHub 이슈에 복사 및 붙여넣기해 주세요.",
+    "trackedToSentry": "오류 {{eventId}} 가 시스템에서 발견되었습니다.",
+    "openIssueMessage": "저희는 화면 정보를 오류에 포함하지 않도록 매우 주의하고 있습니다. 혹시 화면에 민감한 내용이 없다면 이곳에 업로드를 고려해주세요.<button>버그 트래커</button> 아래 정보를 GitHub 이슈에 복사 및 붙여넣기해 주세요.",
     "sceneContent": "화면 내용:"
   },
   "roomDialog": {
@@ -319,8 +302,8 @@
     "doubleClick": "더블 클릭",
     "drag": "드래그",
     "editor": "에디터",
-    "editLineArrowPoints": "",
-    "editText": "",
+    "editLineArrowPoints": "직선 / 화살표 꼭짓점 수정",
+    "editText": "텍스트 수정 / 라벨 추가",
     "github": "문제 제보하기",
     "howto": "가이드 참고하기",
     "or": "또는",
@@ -361,34 +344,45 @@
       "required": "필수사항",
       "website": "유효한 URL을 입력하세요"
     },
-    "noteDescription": {
-      "pre": "당신의 라이브러리를 제출하여 ",
-      "link": "공개 라이브러리 저장소",
-      "post": "에서 다른 사람들의 그림에 사용할 수 있도록 하세요."
-    },
-    "noteGuidelines": {
-      "pre": "라이브러리는 먼저 수동으로 승인되어야 합니다. 제출하기 전에 ",
-      "link": "가이드라인",
-      "post": "을 먼저 읽어보세요. 의견을 공유하거나 변경사항을 만들기 위해선 GitHub 계정이 필요하지만, 반드시 필요하진 않습니다."
-    },
-    "noteLicense": {
-      "pre": "제출함으로써, 당신은 라이브러리가 ",
-      "link": "MIT 라이선스 ",
-      "post": "하에 배포됨을, 즉 아무나 제약 없이 사용할 수 있음에 동의합니다."
-    },
+    "noteDescription": "당신의 라이브러리를 제출하여 <link>공개 라이브러리 저장소</link>에서 다른 사람들의 그림에 사용할 수 있도록 하세요.",
+    "noteGuidelines": "라이브러리는 먼저 수동으로 승인되어야 합니다. 제출하기 전에 <link>가이드라인</link>을 먼저 읽어보세요. 의견을 공유하거나 변경사항을 만들기 위해선 GitHub 계정이 필요하지만, 반드시 필요하진 않습니다.",
+    "noteLicense": "제출함으로써, 당신은 라이브러리가 <link>MIT 라이선스 </link>하에 배포됨을, 즉 아무나 제약 없이 사용할 수 있음에 동의합니다.",
     "noteItems": "각각의 라이브러리는 분류할 수 있도록 고유한 이름을 가져야 합니다. 다음의 라이브러리 항목이 포함됩니다:",
     "atleastOneLibItem": "최소한 하나의 라이브러리를 선택해주세요",
     "republishWarning": "참고: 선택된 항목의 일부는 이미 제출/게시되었습니다. 기존의 라이브러리나 제출물을 업데이트하는 경우에만 제출하세요."
   },
   "publishSuccessDialog": {
     "title": "라이브러리 제출됨",
-    "content": "{{authorName}}님 감사합니다. 당신의 라이브러리가 심사를 위해 제출되었습니다. 진행 상황을 다음의 링크에서 확인할 수 있습니다.",
-    "link": "여기"
+    "content": "{{authorName}}님 감사합니다. 당신의 라이브러리가 심사를 위해 제출되었습니다. 진행 상황을<link>여기에서 확인하실 수 있습니다.</link>"
   },
   "confirmDialog": {
     "resetLibrary": "라이브러리 리셋",
     "removeItemsFromLib": "선택한 항목을 라이브러리에서 제거"
   },
+  "imageExportDialog": {
+    "header": "이미지 내보내기",
+    "label": {
+      "withBackground": "배경",
+      "onlySelected": "선택한 항목만",
+      "darkMode": "다크 모드",
+      "embedScene": "화면을 담기",
+      "scale": "크기",
+      "padding": "여백"
+    },
+    "tooltip": {
+      "embedScene": "화면 정보가 내보내는 PNG/SVG 파일에 저장되어 이후에 파일에서 화면을 복구할 수 있습니다. 파일 크기가 증가합니다."
+    },
+    "title": {
+      "exportToPng": "PNG로 내보내기",
+      "exportToSvg": "SVG로 내보내기",
+      "copyPngToClipboard": "클립보드로 PNG 복사"
+    },
+    "button": {
+      "exportToPng": "PNG",
+      "exportToSvg": "SVG",
+      "copyPngToClipboard": "클립보드로 복사"
+    }
+  },
   "encrypted": {
     "tooltip": "그림은 종단 간 암호화되므로 Excalidraw의 서버는 절대로 내용을 알 수 없습니다.",
     "link": "Excalidraw의 종단 간 암호화에 대한 블로그 포스트"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "단일 요소로 붙여넣거나, 기존 텍스트 에디터에 붙여넣으려면 {{shortcut}} 을 사용하세요."
   },
   "colors": {
-    "ffffff": "화이트",
-    "f8f9fa": "회색 0",
-    "f1f3f5": "회색 1",
-    "fff5f5": "빨강색 0",
-    "fff0f6": "핑크색 0",
-    "f8f0fc": "그레이프 0",
-    "f3f0ff": "바이올렛 0",
-    "edf2ff": "남색 0",
-    "e7f5ff": "파란색 0",
-    "e3fafc": "청록색 0",
-    "e6fcf5": "틸 0",
-    "ebfbee": "녹색 0",
-    "f4fce3": "라임 0",
-    "fff9db": "노란색 0",
-    "fff4e6": "주황색 0",
     "transparent": "투명",
-    "ced4da": "회색 4",
-    "868e96": "회색 6",
-    "fa5252": "빨강색 6",
-    "e64980": "핑크색 6",
-    "be4bdb": "그레이프 6",
-    "7950f2": "바이올렛 6",
-    "4c6ef5": "남색 6",
-    "228be6": "파란색 6",
-    "15aabf": "청록색 6",
-    "12b886": "틸 6",
-    "40c057": "녹색 6",
-    "82c91e": "라임 6",
-    "fab005": "노란색 6",
-    "fd7e14": "주황색 6",
-    "000000": "검정색",
-    "343a40": "회색 8",
-    "495057": "회색 7",
-    "c92a2a": "빨강색 9",
-    "a61e4d": "핑크색 9",
-    "862e9c": "그레이프 9",
-    "5f3dc4": "바이올렛 9",
-    "364fc7": "남색 9",
-    "1864ab": "파란색 9",
-    "0b7285": "청록색 9",
-    "087f5b": "틸 9",
-    "2b8a3e": "녹색 9",
-    "5c940d": "라임 9",
-    "e67700": "노란색 9",
-    "d9480f": "주황색 9"
+    "black": "블랙",
+    "white": "화이트",
+    "red": "레드",
+    "pink": "핑크",
+    "grape": "그레이프",
+    "violet": "바이올렛",
+    "gray": "그레이",
+    "blue": "블루",
+    "cyan": "시안",
+    "teal": "틸",
+    "green": "그린",
+    "yellow": "옐로우",
+    "orange": "오렌지",
+    "bronze": "브론즈"
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "도구를 선택하고, 그리세요!",
       "helpHint": "단축키 & 도움말"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "많이 쓰이는 사용자 색상들",
+    "colors": "색상",
+    "shades": "색조",
+    "hexCode": "Hex 코드",
+    "noShades": "사용할 수 있는 색조가 없음"
   }
 }
diff --git a/src/locales/ku-TR.json b/src/locales/ku-TR.json
index 76b5086e8..7f83c67cb 100644
--- a/src/locales/ku-TR.json
+++ b/src/locales/ku-TR.json
@@ -1,7 +1,7 @@
 {
   "labels": {
     "paste": "دانانەوە",
-    "pasteAsPlaintext": "",
+    "pasteAsPlaintext": "دایبنێ وەک دەقی سادە",
     "pasteCharts": "دانانەوەی خشتەکان",
     "selectAll": "دیاریکردنی هەموو",
     "multiSelect": "زیادکردنی بۆ دیاریکراوەکان",
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "سێگۆشە",
     "fontSize": "قەبارەی فۆنت",
     "fontFamily": "خێزانی فۆنت",
-    "onlySelected": "تەنها دیاریکراوەکان",
-    "withBackground": "باکگراوند",
-    "exportEmbedScene": "ئیمبێدکردنی دیمەنەکە",
-    "exportEmbedScene_details": "هەنداردەکراو بۆ ئەوەی دیمەنەکە بتوانرێت بگەڕێنرێتەوە لێی (PNG/SVG) داتای دیمەنەکە هەڵدەگیرێت وەکو فایلی\nقەبارەی فایلە هەناردەکراوەکان زیاد دەکات.",
     "addWatermark": "زیادبکە \"Made with Excalidraw\"",
     "handDrawn": "دەست کێشراو",
     "normal": "ئاسایی",
@@ -54,6 +50,7 @@
     "veryLarge": "زۆر گه‌وره‌",
     "solid": "سادە",
     "hachure": "هاچور",
+    "zigzag": "زیگزاگ",
     "crossHatch": "کرۆس هاتچ",
     "thin": "تەنک",
     "bold": "تۆخ",
@@ -74,10 +71,10 @@
     "language": "زمان",
     "liveCollaboration": "هاوکاریکردنی زیندو...",
     "duplicateSelection": "لەبەرگرتنەوە",
-    "untitled": "Untitled",
+    "untitled": "بێ ناونیشان",
     "name": "ناو",
     "yourName": "ناوەکەت",
-    "madeWithExcalidraw": "Made with Excalidraw",
+    "madeWithExcalidraw": "دروستکراوە بە Excalidraw",
     "group": "دیاریکردنی گروپ",
     "ungroup": "گروپی دیاریکراوەکان لابەرە",
     "collaborators": "هاوکارەکان",
@@ -99,7 +96,6 @@
     "flipHorizontal": "هەڵگەڕانەوەی ئاسۆیی",
     "flipVertical": "هەڵگەڕانەوەی ستونی",
     "viewMode": "دۆخی بینین",
-    "toggleExportColorScheme": "گۆڕینی بارکردنی هێلکاری ڕەنگەکان",
     "share": "هاوبەشی پێکردن",
     "showStroke": "ڕەنگهەڵگری هێڵکار نیشانبدە",
     "showBackground": "ڕەنگهەڵگری باکگراوند نیشانبدە",
@@ -110,7 +106,7 @@
     "increaseFontSize": "زایدکردنی قەبارەی فۆنت",
     "unbindText": "دەقەکە جیابکەرەوە",
     "bindText": "دەقەکە ببەستەوە بە کۆنتەینەرەکەوە",
-    "createContainerFromText": "",
+    "createContainerFromText": "دەق لە چوارچێوەیەکدا بپێچە",
     "link": {
       "edit": "دەستکاریکردنی بەستەر",
       "create": "دروستکردنی بەستەر",
@@ -127,7 +123,10 @@
       "unlockAll": "کردنەوەی قفلی هەمووی"
     },
     "statusPublished": "بڵاوکراوەتەوە",
-    "sidebarLock": "هێشتنەوەی شریتی لا بە کراوەیی"
+    "sidebarLock": "هێشتنەوەی شریتی لا بە کراوەیی",
+    "selectAllElementsInFrame": "هەموو توخمەکانی ناو چوارچێوەکە دیاری بکە",
+    "removeAllElementsFromFrame": "هەموو توخمەکانی ناو چوارچێوەکە لابەرە",
+    "eyeDropper": "ڕەنگێک لەسەر تابلۆکە هەڵبژێرە"
   },
   "library": {
     "noItems": "هێشتا هیچ بڕگەیەک زیاد نەکراوە...",
@@ -139,11 +138,7 @@
     "exportJSON": "هەناردەکردن بۆ فایل",
     "exportImage": "وێنە هەناردە بکە...",
     "export": "پاشەکەوت بکە بۆ...",
-    "exportToPng": "هەناردەکردن بۆ PNG",
-    "exportToSvg": "هەناردەکردن بۆ SVG",
     "copyToClipboard": "له‌به‌ری بگره‌وه‌ بۆ ته‌خته‌نووس",
-    "copyPngToClipboard": "لەبەرگرتنەوەی PNG بۆ تەختەنوس",
-    "scale": "پێوەر",
     "save": "پاشەکەوت بکە بۆ فایلی بەردەست",
     "saveAs": "پاشەکەوتکردن وەک",
     "load": "بکەرەوە",
@@ -194,7 +189,7 @@
     "resetLibrary": "ئەمە کتێبخانەکەت خاوێن دەکاتەوە. ئایا دڵنیایت?",
     "removeItemsFromsLibrary": "سڕینەوەی {{count}} ئایتم(ەکان) لە کتێبخانە؟",
     "invalidEncryptionKey": "کلیلی رەمزاندن دەبێت لە 22 پیت بێت. هاوکاری ڕاستەوخۆ لە کارخراوە.",
-    "collabOfflineWarning": ""
+    "collabOfflineWarning": "هێڵی ئینتەرنێت بەردەست نییە.\n گۆڕانکارییەکانت سەیڤ ناکرێن!"
   },
   "errors": {
     "unsupportedFileType": "جۆری فایلی پشتگیری نەکراو.",
@@ -204,22 +199,13 @@
     "invalidSVGString": "ئێس ڤی جی نادروستە.",
     "cannotResolveCollabServer": "ناتوانێت پەیوەندی بکات بە سێرڤەری کۆلاب. تکایە لاپەڕەکە دووبارە باربکەوە و دووبارە هەوڵ بدەوە.",
     "importLibraryError": "نەیتوانی کتێبخانە بار بکات",
-    "collabSaveFailed": "",
-    "collabSaveFailed_sizeExceeded": "",
+    "collabSaveFailed": "نەتوانرا لە بنکەدراوەی ڕاژەدا پاشەکەوت بکرێت. ئەگەر کێشەکان بەردەوام بوون، پێویستە فایلەکەت لە ناوخۆدا هەڵبگریت بۆ ئەوەی دڵنیا بیت کە کارەکانت لەدەست نادەیت.",
+    "collabSaveFailed_sizeExceeded": "نەتوانرا لە بنکەدراوەی ڕاژەدا پاشەکەوت بکرێت، پێدەچێت تابلۆکە زۆر گەورە بێت. پێویستە فایلەکە لە ناوخۆدا هەڵبگریت بۆ ئەوەی دڵنیا بیت کە کارەکانت لەدەست نادەیت.",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "وادیارە وێبگەڕی Brave بەکاردەهێنیت و ڕێکخستنی <bold>Aggressively Block Fingerprinting</bold> ـت چالاک کردووە.",
+      "line2": "ئەمە ئەکرێ ببێتە هۆی تێکدانی <bold>دانە دەقییەکان</bold> لە وێنەکێشانەکانتدا.",
+      "line3": "ئێمە بە توندی پێشنیاری لەکارخستنی ئەم ڕێکخستنە دەکەین. بۆ لە کارخستنی دەتوانیت بەم <link>هەنگاوانە</link>دا بڕۆیت.",
+      "line4": "ئەگەر لەکارخستنی ئەم ڕێکخستنە نەبوە هۆی چاککردنەوەی پێشاندانی دانە دەقییەکان، تکایە <issueLink>کێشە</issueLink>یەک بکەرەوە لەسەر گیتهەبەکەمان، یان بۆمان بنوسە لەسەر <discordLink>دیسکۆرد</discordLink>"
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "شێوازی قەڵەم - دەست لێدان ڕابگرە",
     "link": "زیادکردن/ نوێکردنەوەی لینک بۆ شێوەی دیاریکراو",
     "eraser": "سڕەر",
-    "hand": ""
+    "frame": "ئامرازی چوارچێوە",
+    "hand": "دەست (ئامرازی پانکردن)",
+    "extraTools": "ئامرازی زیاتر"
   },
   "headings": {
     "canvasActions": "کردارەکانی تابلۆ",
@@ -245,7 +233,7 @@
     "shapes": "شێوەکان"
   },
   "hints": {
-    "canvasPanning": "",
+    "canvasPanning": "بۆ جوڵاندنی تابلۆ، ویلی ماوسەکەت یان دوگمەی سپەیس بگرە لەکاتی ڕاکێشاندە، یانیش ئامرازی دەستەکە بەکاربهێنە",
     "linearElement": "کرتە بکە بۆ دەستپێکردنی چەند خاڵێک، ڕایبکێشە بۆ یەک هێڵ",
     "freeDraw": "کرتە بکە و ڕایبکێشە، کاتێک تەواو بوویت دەست هەڵگرە",
     "text": "زانیاری: هەروەها دەتوانیت دەق زیادبکەیت بە دوو کرتەکردن لە هەر شوێنێک لەگەڵ ئامڕازی دەستنیشانکردن",
@@ -256,7 +244,7 @@
     "resize": "دەتوانیت ڕێژەکان سنووردار بکەیت بە ڕاگرتنی SHIFT لەکاتی گۆڕینی قەبارەدا،\nALT ڕابگرە بۆ گۆڕینی قەبارە لە ناوەندەوە",
     "resizeImage": "دەتوانیت بە ئازادی قەبارە بگۆڕیت بە ڕاگرتنی SHIFT،\nALT ڕابگرە بۆ گۆڕینی قەبارە لە ناوەندەوە",
     "rotate": "دەتوانیت گۆشەکان سنووردار بکەیت بە ڕاگرتنی SHIFT لەکاتی سوڕانەوەدا",
-    "lineEditor_info": "",
+    "lineEditor_info": "یان Ctrl یان Cmd بگرە و دوانە کلیک بکە یانیش پەنجە بنێ بە Ctrl یان Cmd + ئینتەر بۆ دەستکاریکردنی خاڵەکان",
     "lineEditor_pointSelected": "بۆ لابردنی خاڵەکان Delete دابگرە، Ctrl Cmd+D بکە بۆ لەبەرگرتنەوە، یان بۆ جووڵە ڕاکێشان بکە",
     "lineEditor_nothingSelected": "خاڵێک هەڵبژێرە بۆ دەستکاریکردن (SHIFT ڕابگرە بۆ هەڵبژاردنی چەندین)،\nیان Alt ڕابگرە و کلیک بکە بۆ زیادکردنی خاڵە نوێیەکان",
     "placeImage": "کلیک بکە بۆ دانانی وێنەکە، یان کلیک بکە و ڕایبکێشە بۆ ئەوەی قەبارەکەی بە دەستی دابنێیت",
@@ -264,7 +252,7 @@
     "bindTextToElement": "بۆ زیادکردنی دەق enter بکە",
     "deepBoxSelect": "CtrlOrCmd ڕابگرە بۆ هەڵبژاردنی قووڵ، و بۆ ڕێگریکردن لە ڕاکێشان",
     "eraserRevert": "بۆ گەڕاندنەوەی ئەو توخمانەی کە بۆ سڕینەوە نیشانە کراون، Alt ڕابگرە",
-    "firefox_clipboard_write": ""
+    "firefox_clipboard_write": "ئەم تایبەتمەندییە بە ئەگەرێکی زۆرەوە دەتوانرێت چالاک بکرێت بە ڕێکخستنی ئاڵای \"dom.events.asyncClipboard.clipboardItem\" بۆ \"true\". بۆ گۆڕینی ئاڵاکانی وێبگەڕ لە فایەرفۆکسدا، سەردانی لاپەڕەی \"about:config\" بکە."
   },
   "canvasError": {
     "cannotShowPreview": "ناتوانرێ پێشبینین پیشان بدرێت",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "زانیاری: هەوڵ بدە دوورترین توخمەکان کەمێک لە یەکتر نزیک بکەوە."
   },
   "errorSplash": {
-    "headingMain_pre": "تووشی هەڵەیەک بوو. هەوڵ بدە ",
-    "headingMain_button": "دووبارە بارکردنی لاپەڕەکە.",
-    "clearCanvasMessage": "ئەگەر دووبارە بارکردنەوە کار ناکات، هەوڵبدە ",
-    "clearCanvasMessage_button": "خاوێنکردنەوەی تابلۆکە.",
+    "headingMain": "تووشی هەڵەیەک بوو. هەوڵ بدە <button>دووبارە بارکردنی لاپەڕەکە.</button>",
+    "clearCanvasMessage": "ئەگەر دووبارە بارکردنەوە کار ناکات، هەوڵبدە <button>خاوێنکردنەوەی تابلۆکە.</button>",
     "clearCanvasCaveat": " ئەمە دەبێتە هۆی لەدەستدانی ئەوەی کە کردوتە ",
-    "trackedToSentry_pre": "هەڵەکە لەگەڵ ناسێنەری ",
-    "trackedToSentry_post": " لەسەر سیستەمەکەمان بەدواداچوونی بۆ کرا.",
-    "openIssueMessage_pre": "ئێمە زۆر وریا بووین کە زانیارییەکانی دیمەنەکەت لەسەر هەڵەکە نەخەینەڕوو. ئەگەر دیمەنەکەت تایبەت نییە، تکایە بیر لە بەدواداچوون بکەنەوە بۆ ئێمە ",
-    "openIssueMessage_button": "شوێنپێهەڵگری هەڵە.",
-    "openIssueMessage_post": " تکایە ئەم زانیارییانەی خوارەوە کۆپی بکە و لە بەشی کێشەکانی Github دایبنێ.",
+    "trackedToSentry": "هەڵەکە لەگەڵ ناسێنەری {{eventId}} لەسەر سیستەمەکەمان بەدواداچوونی بۆ کرا.",
+    "openIssueMessage": "ئێمە زۆر وریا بووین کە زانیارییەکانی دیمەنەکەت لەسەر هەڵەکە نەخەینەڕوو. ئەگەر دیمەنەکەت تایبەت نییە، تکایە بیر لە بەدواداچوون بکەنەوە بۆ ئێمە <button>شوێنپێهەڵگری هەڵە.</button> تکایە ئەم زانیارییانەی خوارەوە کۆپی بکە و لە بەشی کێشەکانی Github دایبنێ.",
     "sceneContent": "پێکهاتەی ناو دیمەنەکە:"
   },
   "roomDialog": {
@@ -319,8 +302,8 @@
     "doubleClick": "دوو گرتە",
     "drag": "راکێشان",
     "editor": "دەستکاریکەر",
-    "editLineArrowPoints": "",
-    "editText": "",
+    "editLineArrowPoints": "دەستکاری خاڵەکانی هێڵ/تیر بکە",
+    "editText": "دەستکاری دەق بکە / لەیبڵێک زیاد بکە",
     "github": "کێشەیەکت دۆزیەوە؟ پێشکەشکردن",
     "howto": "شوێن ڕینماییەکانمان بکەوە",
     "or": "یان",
@@ -334,8 +317,8 @@
     "zoomToFit": "زووم بکە بۆ ئەوەی لەگەڵ هەموو توخمەکاندا بگونجێت",
     "zoomToSelection": "زووم بکە بۆ دەستنیشانکراوەکان",
     "toggleElementLock": "قفڵ/کردنەوەی دەستنیشانکراوەکان",
-    "movePageUpDown": "",
-    "movePageLeftRight": ""
+    "movePageUpDown": "لاپەڕەکە بجوڵێنە بۆ سەرەوە/خوارەوە",
+    "movePageLeftRight": "لاپەڕەکە بجوڵێنە بۆ چەپ/ڕاست"
   },
   "clearCanvasDialog": {
     "title": "تابلۆکە خاوێن بکەرەوە"
@@ -361,34 +344,45 @@
       "required": "داواکراوە",
       "website": "URLێکی دروست تێبنووسە"
     },
-    "noteDescription": {
-      "pre": "کتێبخانەکەت بنێرە بۆ ئەوەی بخرێتە ناو ",
-      "link": "کۆگای کتێبخانەی گشتی",
-      "post": "بۆ ئەوەی کەسانی تر لە وێنەکێشانەکانیاندا بەکاری بهێنن."
-    },
-    "noteGuidelines": {
-      "pre": "کتێبخانەکە پێویستە سەرەتا بە دەست پەسەند بکرێت. تکایە بفەرمو بە خوێندنەوەی ",
-      "link": "ڕێنماییەکان",
-      "post": " پێش پێشکەشکردن. پێویستت بە ئەژمێری GitHub دەبێت بۆ پەیوەندیکردن و گۆڕانکاری ئەگەر داوای لێکرا، بەڵام بە توندی پێویست نییە."
-    },
-    "noteLicense": {
-      "pre": "بە پێشکەشکردن، تۆ ڕەزامەندیت لەسەر بڵاوکردنەوەی کتێبخانەکە بەپێی ",
-      "link": "مۆڵەتی MIT، ",
-      "post": "کە بە کورتی مانای ئەوەیە کە هەرکەسێک دەتوانێت بە بێ سنوور بەکاری بهێنێت"
-    },
+    "noteDescription": "کتێبخانەکەت بنێرە بۆ ئەوەی بخرێتە ناو <link>کۆگای کتێبخانەی گشتی</link>بۆ ئەوەی کەسانی تر لە وێنەکێشانەکانیاندا بەکاری بهێنن.",
+    "noteGuidelines": "کتێبخانەکە پێویستە سەرەتا بە دەست پەسەند بکرێت. تکایە بفەرمو بە خوێندنەوەی <link>ڕێنماییەکان</link> پێش پێشکەشکردن. پێویستت بە ئەژمێری GitHub دەبێت بۆ پەیوەندیکردن و گۆڕانکاری ئەگەر داوای لێکرا، بەڵام بە توندی پێویست نییە.",
+    "noteLicense": "بە پێشکەشکردن، تۆ ڕەزامەندیت لەسەر بڵاوکردنەوەی کتێبخانەکە بەپێی <link>مۆڵەتی MIT، </link>کە بە کورتی مانای ئەوەیە کە هەرکەسێک دەتوانێت بە بێ سنوور بەکاری بهێنێت",
     "noteItems": "هەر شتێکی کتێبخانە دەبێت ناوی تایبەتی خۆی هەبێت بۆ ئەوەی بتوانرێت فلتەر بکرێت. ئەم بابەتانەی کتێبخانانەی خوارەوە لەخۆدەگرێت:",
     "atleastOneLibItem": "تکایە بەلایەنی کەمەوە یەک بڕگەی کتێبخانە دیاریبکە بۆ دەستپێکردن",
     "republishWarning": "تێبینی: هەندێک لە ئایتمە دیاریکراوەکان نیشانکراون وەک ئەوەی پێشتر بڵاوکراونەتەوە/نێردراون. تەنها پێویستە شتەکان دووبارە پێشکەش بکەیتەوە لە کاتی نوێکردنەوەی کتێبخانەیەکی هەبوو یان پێشکەشکردن."
   },
   "publishSuccessDialog": {
     "title": "کتێبخانە پێشکەش کرا",
-    "content": "سوپاس {{authorName}}. کتێبخانەکەت پێشکەش کراوە بۆ پێداچوونەوە. دەتوانیت بەدواداچوون بۆ دۆخەکە بکەیت",
-    "link": "لێرە"
+    "content": "سوپاس {{authorName}}. کتێبخانەکەت پێشکەش کراوە بۆ پێداچوونەوە. دەتوانیت بەدواداچوون بۆ دۆخەکە بکەیت<link>لێرە</link>"
   },
   "confirmDialog": {
     "resetLibrary": "ڕێکخستنەوەی کتێبخانە",
     "removeItemsFromLib": "لابردنی ئایتمە دیاریکراوەکان لە کتێبخانە"
   },
+  "imageExportDialog": {
+    "header": "وێنە هەناردە بکە",
+    "label": {
+      "withBackground": "پاشبنەما",
+      "onlySelected": "تەنها دیاریکراوەکان",
+      "darkMode": "دۆخی تاریک",
+      "embedScene": "دیمەنەکە بەکاربهێنەرەوە",
+      "scale": "قەبارە",
+      "padding": "بۆشایی"
+    },
+    "tooltip": {
+      "embedScene": "داتاکانی دیمەنەکە لە فایلە هەناردەکراوەکەی PNG/SVG هەڵدەگیرێن بۆ ئەوەی دیمەنەکە لێیەوە بگەڕێتەوە.\nقەبارەی پەڕگەی هەناردەکراو زیاد دەکات."
+    },
+    "title": {
+      "exportToPng": "هەناردە بکە وەک PNG",
+      "exportToSvg": "هەناردە بکە وەک SVG",
+      "copyPngToClipboard": "لەبەربگرەوە بۆ سەر تەختەنوس"
+    },
+    "button": {
+      "exportToPng": "PNG",
+      "exportToSvg": "SVG",
+      "copyPngToClipboard": "له‌به‌ری بگره‌وه‌ بۆ ته‌خته‌نووس"
+    }
+  },
   "encrypted": {
     "tooltip": "وێنەکێشانەکانت لە کۆتاییەوە بۆ کۆتایی کۆد کراون بۆیە سێرڤەرەکانی ئێکسکالیدرا هەرگیز نایانبینن.",
     "link": "بلۆگ پۆست لەسەر کۆدکردنی کۆتای بۆ کۆتای لە ئێکسکالیدرەو"
@@ -417,66 +411,43 @@
     "fileSavedToFilename": "هەڵگیراوە بۆ {filename}",
     "canvas": "تابلۆ",
     "selection": "دەستنیشانکراوەکان",
-    "pasteAsSingleElement": ""
+    "pasteAsSingleElement": "بۆ دانانەوە وەکو یەک توخم یان دانانەوە بۆ نێو دەسکاریکەرێکی دەق کە بوونی هەیە {{shortcut}} بەکاربهێنە"
   },
   "colors": {
-    "ffffff": "سپی",
-    "f8f9fa": "خۆڵەمێشی 0",
-    "f1f3f5": "خۆڵەمێشی 1",
-    "fff5f5": "سور 0",
-    "fff0f6": "پەمەی 0",
-    "f8f0fc": "مێوژی 0",
-    "f3f0ff": "مۆر 0",
-    "edf2ff": "نیلی 0",
-    "e7f5ff": "شین 0",
-    "e3fafc": "شینی ئاسمانی 0",
-    "e6fcf5": "سەوزباوی 0",
-    "ebfbee": "سه‌وز 0",
-    "f4fce3": "نارنجی 0",
-    "fff9db": "زەرد 0",
-    "fff4e6": "پرتەقاڵی 0",
     "transparent": "ڕوون",
-    "ced4da": "خۆڵەمێشی 4",
-    "868e96": "خۆڵەمێشی 6",
-    "fa5252": "سور 6",
-    "e64980": "پەمەی 6",
-    "be4bdb": "مێوژی 6",
-    "7950f2": "مۆر 6",
-    "4c6ef5": "نیلی 6",
-    "228be6": "شین 6",
-    "15aabf": "شینی ئاسمانی 6",
-    "12b886": "سەوزباوی 6",
-    "40c057": "سه‌وز 6",
-    "82c91e": "نارنجی 6",
-    "fab005": "زەرد 6",
-    "fd7e14": "پرتەقاڵی 6",
-    "000000": "ڕەش",
-    "343a40": "خۆڵەمێشی 8",
-    "495057": "خۆڵەمێشی 7",
-    "c92a2a": "سور 9",
-    "a61e4d": "پەمەی 9",
-    "862e9c": "مێوژی 9",
-    "5f3dc4": "مۆر 9",
-    "364fc7": "نیلی 9",
-    "1864ab": "شین 9",
-    "0b7285": "شینی ئاسمانی 9",
-    "087f5b": "سەوزباوی 9",
-    "2b8a3e": "سه‌وز 9",
-    "5c940d": "نارنجی 9",
-    "e67700": "زەرد 9",
-    "d9480f": "پرتەقاڵی 9"
+    "black": "ڕەش",
+    "white": "سپی",
+    "red": "سور",
+    "pink": "پەمەیی",
+    "grape": "مێوژی",
+    "violet": "مۆری کاڵ",
+    "gray": "خۆڵەمێشی",
+    "blue": "شین",
+    "cyan": "شینی ئاسمانی",
+    "teal": "شەدری",
+    "green": "سه‌وز",
+    "yellow": "زەرد",
+    "orange": "پرتەقاڵی",
+    "bronze": "برۆنزی"
   },
   "welcomeScreen": {
     "app": {
-      "center_heading": "",
-      "center_heading_plus": "",
-      "menuHint": ""
+      "center_heading": "هەموو داتاکانت لە ناوخۆی وێنگەڕەکەتدا پاشەکەوت کراوە.",
+      "center_heading_plus": "ویستت بڕۆیت بۆ Excalidraw+?",
+      "menuHint": "هەناردەکردن، ڕێکخستنەکان، زمانەکان، ..."
     },
     "defaults": {
-      "menuHint": "",
-      "center_heading": "",
-      "toolbarHint": "",
-      "helpHint": ""
+      "menuHint": "هەناردەکردن، ڕێکخستنەکان، و زیاتر...",
+      "center_heading": "دایاگرامەکان. ئاسان. کراون.",
+      "toolbarHint": "ئامرازێک هەڵبگرە و دەستبکە بە کێشان!",
+      "helpHint": "قەدبڕەکان و یارمەتی"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "زۆرترین ڕەنگە باوە بەکارهاتووەکان",
+    "colors": "ڕەنگەکان",
+    "shades": "سێبەرەکان",
+    "hexCode": "کۆدی هێکس",
+    "noShades": "هیچ سێبەرێک بۆ ئەم ڕەنگە بەردەست نییە"
   }
 }
diff --git a/src/locales/lt-LT.json b/src/locales/lt-LT.json
index d80739f09..ee2fc79bc 100644
--- a/src/locales/lt-LT.json
+++ b/src/locales/lt-LT.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Trikampis",
     "fontSize": "Šrifto dydis",
     "fontFamily": "Šriftas",
-    "onlySelected": "Tik pasirinktus",
-    "withBackground": "Fonas",
-    "exportEmbedScene": "Įterpti sceną",
-    "exportEmbedScene_details": "Scenos duomenys bus išsaugoti eksportuotame PNG/SVG faile taip, jog vėliau scena galėtu būti iš jo atkurta.\nTai padydins eksportuoto failo dydį.",
     "addWatermark": "Sukurta su Excalidraw",
     "handDrawn": "Ranka rašytas",
     "normal": "Normalus",
@@ -54,6 +50,7 @@
     "veryLarge": "Labai didelis",
     "solid": "",
     "hachure": "",
+    "zigzag": "",
     "crossHatch": "",
     "thin": "Plonas",
     "bold": "Pastorintas",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Apversti horizontaliai",
     "flipVertical": "Apversti vertikaliai",
     "viewMode": "",
-    "toggleExportColorScheme": "",
     "share": "Dalintis",
     "showStroke": "",
     "showBackground": "",
@@ -127,7 +123,10 @@
       "unlockAll": ""
     },
     "statusPublished": "",
-    "sidebarLock": ""
+    "sidebarLock": "",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "",
@@ -139,11 +138,7 @@
     "exportJSON": "Eksportuoti į failą",
     "exportImage": "",
     "export": "",
-    "exportToPng": "Eksportuoti į PNG",
-    "exportToSvg": "Eksportuoti į SVG",
     "copyToClipboard": "Kopijuoti į iškarpinę",
-    "copyPngToClipboard": "Kopijuoti PNG į iškarpinę",
-    "scale": "",
     "save": "",
     "saveAs": "Išsaugoti kaip",
     "load": "",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "",
     "collabSaveFailed_sizeExceeded": "",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Rašyklio režimas - neleisti prisilietimų",
     "link": "Pridėti / Atnaujinti pasirinktos figūros nuorodą",
     "eraser": "Trintukas",
-    "hand": ""
+    "frame": "",
+    "hand": "",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Veiksmai su drobe",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": ""
   },
   "errorSplash": {
-    "headingMain_pre": "",
-    "headingMain_button": "",
+    "headingMain": "",
     "clearCanvasMessage": "",
-    "clearCanvasMessage_button": "",
     "clearCanvasCaveat": "",
-    "trackedToSentry_pre": "",
-    "trackedToSentry_post": "",
-    "openIssueMessage_pre": "",
-    "openIssueMessage_button": "",
-    "openIssueMessage_post": "",
+    "trackedToSentry": "",
+    "openIssueMessage": "",
     "sceneContent": ""
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "Privalomas",
       "website": "Įveskite teisingą nuorodą (URL)"
     },
-    "noteDescription": {
-      "pre": "Pateik savo biblioteką, jog ji galėtų būti įtraukta į ",
-      "link": "",
-      "post": "jog kiti žmonės galėtų tai naudoti savo piešiniuose."
-    },
-    "noteGuidelines": {
-      "pre": "Visų pirma, biblioteka turi būti rankiniu būdu patvirtinta. Prašome paskaityti ",
-      "link": "gairės",
-      "post": ""
-    },
-    "noteLicense": {
-      "pre": "",
-      "link": "MIT licencija, ",
-      "post": ""
-    },
+    "noteDescription": "Pateik savo biblioteką, jog ji galėtų būti įtraukta į <link></link>jog kiti žmonės galėtų tai naudoti savo piešiniuose.",
+    "noteGuidelines": "Visų pirma, biblioteka turi būti rankiniu būdu patvirtinta. Prašome paskaityti <link>gairės</link>",
+    "noteLicense": "<link>MIT licencija, </link>",
     "noteItems": "",
     "atleastOneLibItem": "",
     "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "Biblioteka pateikta",
-    "content": "Ačiū {{authorName}}. Tavo biblioteka buvo pateikta peržiūrai. Gali sekti būseną",
-    "link": "čia"
+    "content": "Ačiū {{authorName}}. Tavo biblioteka buvo pateikta peržiūrai. Gali sekti būseną<link>čia</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Atstatyti biblioteką",
     "removeItemsFromLib": "Pašalinti pasirinktus elementus iš bibliotekos"
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "",
     "link": ""
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": ""
   },
   "colors": {
-    "ffffff": "Balta",
-    "f8f9fa": "Pilka 0",
-    "f1f3f5": "Pilka 1",
-    "fff5f5": "Raudona 0",
-    "fff0f6": "Rožinė 0",
-    "f8f0fc": "",
-    "f3f0ff": "Violetinė 0",
-    "edf2ff": "Indigo 0",
-    "e7f5ff": "Mėlyna 0",
-    "e3fafc": "",
-    "e6fcf5": "",
-    "ebfbee": "Žalia 0",
-    "f4fce3": "",
-    "fff9db": "Geltona 0",
-    "fff4e6": "Oranžinė 0",
     "transparent": "Permatoma",
-    "ced4da": "Pilka 4",
-    "868e96": "Pilka 6",
-    "fa5252": "Raudona 6",
-    "e64980": "Rožinė 6",
-    "be4bdb": "",
-    "7950f2": "Violetinė 6",
-    "4c6ef5": "Indigo 6",
-    "228be6": "Mėlyna 6",
-    "15aabf": "",
-    "12b886": "",
-    "40c057": "Žalia 6",
-    "82c91e": "",
-    "fab005": "Geltona 6",
-    "fd7e14": "Oranžinė 6",
-    "000000": "Juoda",
-    "343a40": "Pilna 8",
-    "495057": "Pilka 7",
-    "c92a2a": "Raudona 9",
-    "a61e4d": "Rožinė 9",
-    "862e9c": "",
-    "5f3dc4": "Violetinė 9",
-    "364fc7": "Indigo 9",
-    "1864ab": "Mėlyna 9",
-    "0b7285": "",
-    "087f5b": "",
-    "2b8a3e": "Žalia 9",
-    "5c940d": "",
-    "e67700": "Geltona 9",
-    "d9480f": "Oranžinė 9"
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "",
       "helpHint": ""
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/lv-LV.json b/src/locales/lv-LV.json
index 4a311f7cd..ec9a7e392 100644
--- a/src/locales/lv-LV.json
+++ b/src/locales/lv-LV.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Trijstūris",
     "fontSize": "Teksta lielums",
     "fontFamily": "Fontu saime",
-    "onlySelected": "Tikai atlasītais",
-    "withBackground": "Fons",
-    "exportEmbedScene": "Iegult ainu",
-    "exportEmbedScene_details": "Ainas dati tiks iekļauti saglabātajā PNG/SVG datnē, lai no tās būtu iespējams ainu atgūt. Tas palielinās datnes izmēru.",
     "addWatermark": "Pievienot \"Radīts ar Excalidraw\"",
     "handDrawn": "Rokraksts",
     "normal": "Parasts",
@@ -54,6 +50,7 @@
     "veryLarge": "Ļoti liels",
     "solid": "Pilns",
     "hachure": "Svītrots",
+    "zigzag": "Zigzaglīnija",
     "crossHatch": "Šķērssvītrots",
     "thin": "Šaurs",
     "bold": "Trekns",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Apmest horizontāli",
     "flipVertical": "Apmest vertikāli",
     "viewMode": "Skata režīms",
-    "toggleExportColorScheme": "Pārslēgt eksporta krāsu tēmu",
     "share": "Kopīgot",
     "showStroke": "Rādīt svītras krāsas atlasītāju",
     "showBackground": "Rādīt fona krāsas atlasītāju",
@@ -110,7 +106,7 @@
     "increaseFontSize": "Palielināt fonta izmēru",
     "unbindText": "Atdalīt tekstu",
     "bindText": "Piesaistīt tekstu figūrai",
-    "createContainerFromText": "",
+    "createContainerFromText": "Ietilpināt tekstu figurā",
     "link": {
       "edit": "Rediģēt saiti",
       "create": "Izveidot saiti",
@@ -127,7 +123,10 @@
       "unlockAll": "Atbrīvot visu"
     },
     "statusPublished": "Publicēts",
-    "sidebarLock": "Paturēt atvērtu sānjoslu"
+    "sidebarLock": "Paturēt atvērtu sānjoslu",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "Neviena vienība vēl nav pievienota...",
@@ -139,11 +138,7 @@
     "exportJSON": "Eksportēt kā failu",
     "exportImage": "Eksportēt attēlu...",
     "export": "Saglabāt uz...",
-    "exportToPng": "Eksportēt kā PNG",
-    "exportToSvg": "Eksportēt kā SVG",
     "copyToClipboard": "Kopēt starpliktuvē",
-    "copyPngToClipboard": "Kopēt PNG starpliktuvē",
-    "scale": "Mērogs",
     "save": "Saglabāt pašreizējo datni",
     "saveAs": "Saglabāt kā",
     "load": "Atvērt",
@@ -194,7 +189,7 @@
     "resetLibrary": "Šī funkcija iztukšos bibliotēku. Vai turpināt?",
     "removeItemsFromsLibrary": "Vai izņemt {{count}} vienumu(s) no bibliotēkas?",
     "invalidEncryptionKey": "Šifrēšanas atslēgai jābūt 22 simbolus garai. Tiešsaistes sadarbība ir izslēgta.",
-    "collabOfflineWarning": ""
+    "collabOfflineWarning": "Nav pieejams interneta pieslēgums.\nJūsu izmaiņas netiks saglabātas!"
   },
   "errors": {
     "unsupportedFileType": "Neatbalstīts datnes veids.",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Darbs nav saglabāts datubāzē. Ja problēma turpinās, saglabājiet datni lokālajā krātuvē, lai nodrošinātos pret darba pazaudēšanu.",
     "collabSaveFailed_sizeExceeded": "Darbs nav saglabāts datubāzē, šķiet, ka tāfele ir pārāk liela. Saglabājiet datni lokālajā krātuvē, lai nodrošinātos pret darba pazaudēšanu.",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Pildspalvas režīms – novērst pieskaršanos",
     "link": "Pievienot/rediģēt atlasītās figūras saiti",
     "eraser": "Dzēšgumija",
-    "hand": ""
+    "frame": "",
+    "hand": "Roka (panoramēšanas rīks)",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Tāfeles darbības",
@@ -245,7 +233,7 @@
     "shapes": "Formas"
   },
   "hints": {
-    "canvasPanning": "",
+    "canvasPanning": "Lai bīdītu tāfeli, turiet nospiestu ritināšanas vai atstarpes taustiņu, vai izmanto rokas rīku",
     "linearElement": "Klikšķiniet, lai sāktu zīmēt vairākus punktus; velciet, lai zīmētu līniju",
     "freeDraw": "Spiediet un velciet; atlaidiet, kad pabeidzat",
     "text": "Ieteikums: lai pievienotu tekstu, varat arī jebkur dubultklikšķināt ar atlases rīku",
@@ -264,7 +252,7 @@
     "bindTextToElement": "Spiediet ievades taustiņu, lai pievienotu tekstu",
     "deepBoxSelect": "Turient nospiestu Ctrl vai Cmd, lai atlasītu dziļumā un lai nepieļautu objektu pavilkšanu",
     "eraserRevert": "Turiet Alt, lai noņemtu elementus no dzēsšanas atlases",
-    "firefox_clipboard_write": ""
+    "firefox_clipboard_write": "Šis iestatījums var tikt ieslēgts ar \"dom.events.asyncClipboard.clipboardItem\" marķieri pārslēgtu uz \"true\". Lai mainītu pārlūka marķierus Firefox, apmeklē \"about:config\" lapu."
   },
   "canvasError": {
     "cannotShowPreview": "Nevar rādīt priekšskatījumu",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Ieteikums: mēģiniet satuvināt pašus tālākos elementus."
   },
   "errorSplash": {
-    "headingMain_pre": "Notikusi kļūda. Mēģiniet ",
-    "headingMain_button": "pārlādēt lapu.",
-    "clearCanvasMessage": "Ja pārlādēšana nestrādā, mēģiniet ",
-    "clearCanvasMessage_button": "notīrot tāfeli.",
+    "headingMain": "Notikusi kļūda. Mēģiniet <button>pārlādēt lapu.</button>",
+    "clearCanvasMessage": "Ja pārlādēšana nestrādā, mēģiniet <button>notīrot tāfeli.</button>",
     "clearCanvasCaveat": " Tas novedīs pie darba zaudēšanas ",
-    "trackedToSentry_pre": "Kļūda ar kodu ",
-    "trackedToSentry_post": " tika noteikta mūsu sistēmā.",
-    "openIssueMessage_pre": "Mēs uzmanījāmies, lai neiekļautu jūsu ainas informāciju šajā kļūdā. Ja jūsu aina nav privāta, lūdzu ziņojiet par šo kļūdu mūsu ",
-    "openIssueMessage_button": "kļūdu uzskaitē.",
-    "openIssueMessage_post": " Lūdzu, miniet sekojošo informāciju to kopējot un ielīmējot jūsu ziņojumā platformā GitHub.",
+    "trackedToSentry": "Kļūda ar kodu {{eventId}} tika noteikta mūsu sistēmā.",
+    "openIssueMessage": "Mēs uzmanījāmies, lai neiekļautu jūsu ainas informāciju šajā kļūdā. Ja jūsu aina nav privāta, lūdzu ziņojiet par šo kļūdu mūsu <button>kļūdu uzskaitē.</button> Lūdzu, miniet sekojošo informāciju to kopējot un ielīmējot jūsu ziņojumā platformā GitHub.",
     "sceneContent": "Ainas saturs:"
   },
   "roomDialog": {
@@ -319,8 +302,8 @@
     "doubleClick": "dubultklikšķis",
     "drag": "vilkt",
     "editor": "Redaktors",
-    "editLineArrowPoints": "",
-    "editText": "",
+    "editLineArrowPoints": "Rediģēt līniju/bultu punktus",
+    "editText": "Rediģēt tekstu/pievienot birku",
     "github": "Sastapāt kļūdu? Ziņot",
     "howto": "Sekojiet mūsu instrukcijām",
     "or": "vai",
@@ -361,34 +344,45 @@
       "required": "Obligāts",
       "website": "Ievadiet derīgu URL"
     },
-    "noteDescription": {
-      "pre": "Iesniegt savu bibliotēku iekļaušanai ",
-      "link": "publiskajā bibliotēku datubāzē",
-      "post": ", lai citi to varētu izmantot savos zīmējumos."
-    },
-    "noteGuidelines": {
-      "pre": "Šai bibliotēkai vispirms jātiek manuāli apstiprinātai. Lūdzu, izlasiet ",
-      "link": "norādījumus",
-      "post": " pirms iesniegšanas. Jums vajadzēs GitHub kontu, lai sazinātos un veiktu izmaiņas, ja tādas būs pieprasītas, bet tas nav absolūti nepieciešams."
-    },
-    "noteLicense": {
-      "pre": "Iesniedzot bibliotēku, jūs piekrītat tās publicēšanai saskaņā ar ",
-      "link": "MIT Licenci, ",
-      "post": "kas īsumā nozīmē, ka jebkurš to varēs izmantot bez ierobežojumiem."
-    },
+    "noteDescription": "Iesniegt savu bibliotēku iekļaušanai <link>publiskajā bibliotēku datubāzē</link>, lai citi to varētu izmantot savos zīmējumos.",
+    "noteGuidelines": "Šai bibliotēkai vispirms jātiek manuāli apstiprinātai. Lūdzu, izlasiet <link>norādījumus</link> pirms iesniegšanas. Jums vajadzēs GitHub kontu, lai sazinātos un veiktu izmaiņas, ja tādas būs pieprasītas, bet tas nav absolūti nepieciešams.",
+    "noteLicense": "Iesniedzot bibliotēku, jūs piekrītat tās publicēšanai saskaņā ar <link>MIT Licenci, </link>kas īsumā nozīmē, ka jebkurš to varēs izmantot bez ierobežojumiem.",
     "noteItems": "Katram bibliotēkas vienumam jābūt savam nosaukumam, lai to varētu atrast filtrējot. Tiks iekļauti sekojošie bibliotēkas vienumi:",
     "atleastOneLibItem": "Lūdzu, atlasiet vismaz vienu bibliotēkas vienumu, lai sāktu darbu",
     "republishWarning": "Ievēro: daži no atzīmētajiem objektiem jau atzīmēti kā publicēti vai iesniegti publicēšanai. Tos vajadzētu atkārtoti iesniegt tikai tad, ja vēlies labot esošo bibliotēku."
   },
   "publishSuccessDialog": {
     "title": "Bibliotēka iesniegta",
-    "content": "Paldies, {{authorName}}! Jūsu bibliotēka iesniegta izskatīšanai. Jūs varat izsekot iesnieguma statusam",
-    "link": "šeit"
+    "content": "Paldies, {{authorName}}! Jūsu bibliotēka iesniegta izskatīšanai. Jūs varat izsekot iesnieguma statusam<link>šeit</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Atiestatīt bibliotēku",
     "removeItemsFromLib": "Noņemt atlasītos vienumus no bibliotēkas"
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "Jūsu zīmējumi ir šifrēti no gala līdz galam; līdz ar to Excalidraw serveri tos nekad neredzēs.",
     "link": "Ieraksts par šifrēšanu no gala līdz galam Excalidraw blogā"
@@ -420,63 +414,40 @@
     "pasteAsSingleElement": "Izmantojiet {{shortcut}}, lai ielīmētu kā jaunu elementu, vai ielīmētu esošā teksta lauciņā"
   },
   "colors": {
-    "ffffff": "Balts",
-    "f8f9fa": "Pelēks 0",
-    "f1f3f5": "Pelēks 1",
-    "fff5f5": "Sarkans 0",
-    "fff0f6": "Rozā 0",
-    "f8f0fc": "Vīnogu 0",
-    "f3f0ff": "Violets 0",
-    "edf2ff": "Indigo 0",
-    "e7f5ff": "Zils 0",
-    "e3fafc": "Ciāns 0",
-    "e6fcf5": "Zilganzaļš 0",
-    "ebfbee": "Zaļš 0",
-    "f4fce3": "Laims 0",
-    "fff9db": "Dzeltens 0",
-    "fff4e6": "Oranžs 0",
     "transparent": "Caurspīdīgs",
-    "ced4da": "Pelēks 4",
-    "868e96": "Pelēks 6",
-    "fa5252": "Sarkans 6",
-    "e64980": "Rozā 6",
-    "be4bdb": "Vīnogu 6",
-    "7950f2": "Violets 6",
-    "4c6ef5": "Indigo 6",
-    "228be6": "Zils 6",
-    "15aabf": "Ciāns 6",
-    "12b886": "Zilganzaļš 6",
-    "40c057": "Zaļš 6",
-    "82c91e": "Laims 6",
-    "fab005": "Dzeltens 6",
-    "fd7e14": "Oranžs 6",
-    "000000": "Melns",
-    "343a40": "Pelēks 8",
-    "495057": "Pelēks 7",
-    "c92a2a": "Sarkans 9",
-    "a61e4d": "Rozā 9",
-    "862e9c": "Vīnogu 9",
-    "5f3dc4": "Violets 9",
-    "364fc7": "Indigo 9",
-    "1864ab": "Zils 9",
-    "0b7285": "Ciāns 9",
-    "087f5b": "Zilganzaļš 9",
-    "2b8a3e": "Zaļš 9",
-    "5c940d": "Laims 9",
-    "e67700": "Dzeltens 9",
-    "d9480f": "Oranžs 9"
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
-      "center_heading": "",
-      "center_heading_plus": "",
-      "menuHint": ""
+      "center_heading": "Visi jūsu dati tiek glabāti uz vietas jūsu pārlūkā.",
+      "center_heading_plus": "Vai tā vietā vēlies doties uz Excalidraw+?",
+      "menuHint": "Eksportēšana, iestatījumi, valodas..."
     },
     "defaults": {
-      "menuHint": "",
-      "center_heading": "",
-      "toolbarHint": "",
-      "helpHint": ""
+      "menuHint": "Eksportēšana, iestatījumi un vēl...",
+      "center_heading": "Diagrammas. Izveidotas. Vienkārši.",
+      "toolbarHint": "Izvēlies rīku un sāc zīmēt!",
+      "helpHint": "Īsceļi un palīdzība"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/mr-IN.json b/src/locales/mr-IN.json
index 4f58009c9..d98a1c738 100644
--- a/src/locales/mr-IN.json
+++ b/src/locales/mr-IN.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "त्रिकोण",
     "fontSize": "अक्षर आकार",
     "fontFamily": "अक्षर समूह",
-    "onlySelected": "नुसता निवडलेला",
-    "withBackground": "पार्श्वभूमी",
-    "exportEmbedScene": "दृश्य रुतवून टाका",
-    "exportEmbedScene_details": "दृश्य डेटा पण एक्सपोर्ट केलेल्या पी-एन-जी/एस-वी-जी फाईलमध्ये जतन केला जाईल जेणेकरून त्यामधून दृश्य परत आणता येईल.\nनिर्यात केलेल्या फाइलचा आकार वाढेल.",
     "addWatermark": "\"एक्सकेलीड्रॉ ने बनवलेलं\" जोडा",
     "handDrawn": "हातानी बनवलेलं",
     "normal": "सामान्य",
@@ -54,6 +50,7 @@
     "veryLarge": "फार मोठं",
     "solid": "भरीव",
     "hachure": "हैशूर रेखांकन",
+    "zigzag": "वाकडी तिकड़ी",
     "crossHatch": "आडव्या रेघा",
     "thin": "पातळ",
     "bold": "जाड",
@@ -99,7 +96,6 @@
     "flipHorizontal": "आडवं फ्लिप करा",
     "flipVertical": "उभं फ्लिप करा",
     "viewMode": "पहायची पद्धत",
-    "toggleExportColorScheme": "रंग शैली जतन पलटा",
     "share": "सामायिक करा",
     "showStroke": "रेघ रंग निवड यंत्र दाखवा",
     "showBackground": "पार्श्वभूमि: रंग निवड यंत्र दाखवा",
@@ -127,7 +123,10 @@
       "unlockAll": "सर्व कुलूपातून बाहेर"
     },
     "statusPublished": "प्रकाशित करा",
-    "sidebarLock": "साइडबार उघडं ठेवा"
+    "sidebarLock": "साइडबार उघडं ठेवा",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": "चित्रफलकातून रंग निवडा"
   },
   "library": {
     "noItems": "अजून कोणतेही आइटम जोडलेले नाही...",
@@ -139,11 +138,7 @@
     "exportJSON": "फ़ाइलमधे बाहेर ठेवा",
     "exportImage": "प्रतिमा निर्यात करा...",
     "export": "येथे सुरक्षित करा...",
-    "exportToPng": "पी-एन-जी स्वरूपात बाहेर ठेवा",
-    "exportToSvg": "एस-वी-जी स्वरूपात बाहेर ठेवा",
     "copyToClipboard": "फळी वर कॉपी करा",
-    "copyPngToClipboard": "PNG रूपे फळी वर कॉपी करा",
-    "scale": "मोजपट्टी",
     "save": "वर्तमान फ़ाइल मधे जतन करा",
     "saveAs": "ह्या नावाने जतन करा",
     "load": "उघडा",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "काही कारणा निमित्त आतल्या डेटाबेसमध्ये जतन करू शकत नाही। समस्या तशिस राहिल्यास, तुम्ही तुमचे काम गमावणार नाही याची खात्री करण्यासाठी तुम्ही तुमची फाइल स्थानिक जतन करावी.",
     "collabSaveFailed_sizeExceeded": "लगता है कि पृष्ठ तल काफ़ी बड़ा है, इस्कारण अंदरूनी डेटाबेस में सहेजा नहीं जा सका। किये काम को खोने न देने के लिये अपनी फ़ाइल को स्थानीय रूप से सहेजे।\n\nबॅकएंड डेटाबेसमध्ये जतन करू शकत नाही, कॅनव्हास खूप मोठा असल्याचे दिसते. तुम्ही तुमचे काम गमावणार नाही याची खात्री करण्यासाठी तुम्ही फाइल स्थानिक पातळीवर जतन करावी.",
     "brave_measure_text_error": {
-      "start": "असं वाटते की तुम्हीं \"Brave\" \"Browser\" वापरत आहात, त्या बरोबार",
-      "aggressive_block_fingerprint": "बोटांचे ठसे उग्रतेने थाम्बवाचे",
-      "setting_enabled": "सेटिंग्स सक्रिय केले आहेत",
-      "break": "ह्या कारणानिं",
-      "text_elements": "पाठ अवयव तुटु शकतात",
-      "in_your_drawings": "तुमच्या चित्रिकराणतले",
-      "strongly_recommend": "आमचा ज़ोरदार सल्ला असा कि सेटिंग्स निष्क्रिय करावे. तुम्हीं",
-      "steps": "ह्या स्टेप्स",
-      "how": "घेउ शकतात",
-      "disable_setting": " जर सेटिंग्स निष्क्रिय करून पाठ्य दिसणे ठीक नसेल होत तर",
-      "issue": "मुद्दा",
-      "write": "आमच्या Github वर, किव्हा आम्हाला",
-      "discord": "\"Discord\" वर लिहां"
+      "line1": "असं वाटते की तुम्हीं Brave ब्राउज़र वापरतात आहात आणि त्या बरोबार <bold>आक्रामक पद्धति चें बोटांचे ठसे </bold> हां सेटिंग्स चा विकल्प चयन केलेला आहे.",
+      "line2": "हे तुमच्या चित्रांच्या <bold>पाठ तत्वांनां </bold> खंडित करू शकतात.",
+      "line3": "तुम्हाला आमच्या कड़ून खूप आग्रह आहे की हे सेटिंग्स मधले चयन नका करु. <link>हे अनुक्रम </link> हे कसे करावे हे दाखवु शकते.",
+      "line4": "ही सेटिंग अक्षम करूनही पृष्ठ योग्यरित्या प्रदर्शित होत नसल्यास, आमच्या GitHub वर <issueLink>समस्या</issueLink> सबमिट करा, किव्हा <discordLink>डिस्कॉर्ड</discordLink> वर आम्हाला लिहा"
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "पेन चा मोड - स्पर्श टाळा",
     "link": "निवडलेल्या आकारासाठी दुवा जोडा/बदल करा",
     "eraser": "खोड रबर",
-    "hand": "हात ( सरकवण्या चे उपकरण)"
+    "frame": "",
+    "hand": "हात ( सरकवण्या चे उपकरण)",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "पटल क्रिया",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "टीप: दूर चा तत्व थोडं जवळ आणण्याचा प्रयत्न करावा."
   },
   "errorSplash": {
-    "headingMain_pre": "त्रुटि आली. परत प्रयत्न करा ",
-    "headingMain_button": "ह्या पानाला पुनः लोड करा.",
-    "clearCanvasMessage": "रीलोडिंग होत नसल्यास, परत प्रयत्न करा ",
-    "clearCanvasMessage_button": "पटल स्वच्छ करित आहे.",
+    "headingMain": "त्रुटि आली. परत प्रयत्न करा <button>ह्या पानाला पुनः लोड करा.</button>",
+    "clearCanvasMessage": "रीलोडिंग होत नसल्यास, परत प्रयत्न करा <button>पटल स्वच्छ करित आहे.</button>",
     "clearCanvasCaveat": " त्यामुळे केलेल्या कामाचे नुकसान होईल ",
-    "trackedToSentry_pre": "त्रुटि क्रमांक के साथ त्रुटि ",
-    "trackedToSentry_post": " आमच्या प्रणाली नी निरीक्षण केले होते.",
-    "openIssueMessage_pre": "त्रुटीत तुमची दृश्य माहिती समाविष्ट न करण्यासाठी आम्ही खूप सावध होतो. तुमचा सीन खाजगी नसल्यास, कृपया आम्हाला पुढ च्या कारवाई साठी सम्पर्क साधा ",
-    "openIssueMessage_button": "त्रुटि व्यवस्थापन.",
-    "openIssueMessage_post": " कृपया गिटहब समस्येमध्ये कॉपी आणि पेस्ट करून खालिल माहिती समाविष्ट करा.",
+    "trackedToSentry": "त्रुटि क्रमांक के साथ त्रुटि {{eventId}} आमच्या प्रणाली नी निरीक्षण केले होते.",
+    "openIssueMessage": "त्रुटीत तुमची दृश्य माहिती समाविष्ट न करण्यासाठी आम्ही खूप सावध होतो. तुमचा सीन खाजगी नसल्यास, कृपया आम्हाला पुढ च्या कारवाई साठी सम्पर्क साधा <button>त्रुटि व्यवस्थापन.</button> कृपया गिटहब समस्येमध्ये कॉपी आणि पेस्ट करून खालिल माहिती समाविष्ट करा.",
     "sceneContent": "दृश्य विषय:"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "आवश्यक आहे",
       "website": "वैध यू-आर-एल द्या"
     },
-    "noteDescription": {
-      "pre": "समाविष्ट करण्या साठी तुमचा संग्रह ह्याचात जमा करा ",
-      "link": "सार्वजनिक संग्रहाचे कोठार",
-      "post": "इतर लोकांना त्यांच्या रेखाचित्रांमधे वापरण्यासाठी."
-    },
-    "noteGuidelines": {
-      "pre": "संग्रहाला आधी स्वहस्ते स्वीकृती मिळणे आवश्यक आहे. कृपया हे वाचा ",
-      "link": "मार्गदर्शक तत्त्वे",
-      "post": " जमा करण्या पूर्वी, तुमच्या जवळ एक गिटहब खाते असणे आवश्यक आहे जे संवादा साठी आणिक बदल करण्या साठी लागेल, तरी हे सर्व अगदी आवश्यक नाही आहे."
-    },
-    "noteLicense": {
-      "pre": "जमा करताना तुम्हीं सहमति दाखवतात आहे की संग्रह ह्याचा खाली प्रकाशित होईल ",
-      "link": "एम-आइ-टी परवाना, ",
-      "post": "ज्याचा थोडक्यात अर्थ कोणीही निर्बंधांशिवाय वापरू शकतो."
-    },
+    "noteDescription": "समाविष्ट करण्या साठी तुमचा संग्रह ह्याचात जमा करा <link>सार्वजनिक संग्रहाचे कोठार</link>इतर लोकांना त्यांच्या रेखाचित्रांमधे वापरण्यासाठी.",
+    "noteGuidelines": "संग्रहाला आधी स्वहस्ते स्वीकृती मिळणे आवश्यक आहे. कृपया हे वाचा <link>मार्गदर्शक तत्त्वे</link> जमा करण्या पूर्वी, तुमच्या जवळ एक गिटहब खाते असणे आवश्यक आहे जे संवादा साठी आणिक बदल करण्या साठी लागेल, तरी हे सर्व अगदी आवश्यक नाही आहे.",
+    "noteLicense": "जमा करताना तुम्हीं सहमति दाखवतात आहे की संग्रह ह्याचा खाली प्रकाशित होईल <link>एम-आइ-टी परवाना, </link>ज्याचा थोडक्यात अर्थ कोणीही निर्बंधांशिवाय वापरू शकतो.",
     "noteItems": "प्रतैक संग्रहाचे नाव, नीट शोधनासाठी, असणे आवश्यक आहे. खाली दिलेल्या वस्तु समाविष्ट केल्या जातील:",
     "atleastOneLibItem": "सुरु करण्यासाठी, कृपया करून, कमित कमी एक वस्तु तरी निवडा",
     "republishWarning": "टीप: काही निवडक आयटम आधीच प्रकाशित/प्रस्तुत केलेले आहेत. विद्यमान लायब्ररी किंवा प्रस्तुतित आयटम अद्यावित करताना तुम्ही फक्त तो पुन्हा प्रस्तुत करा."
   },
   "publishSuccessDialog": {
     "title": "संग्रह जमा केला",
-    "content": "धन्यवाद {{authorName}}. आपला संग्रह पुनरावलोकना साठी जमा झाला आहे. तुम्हीं स्थिति सारखी तपासू सकता",
-    "link": "इकडे"
+    "content": "धन्यवाद {{authorName}}. आपला संग्रह पुनरावलोकना साठी जमा झाला आहे. तुम्हीं स्थिति सारखी तपासू सकता<link>इकडे</link>"
   },
   "confirmDialog": {
     "resetLibrary": "संग्रह पुनर्स्थित करा",
     "removeItemsFromLib": "निवडलेले आयटम्स संग्रहातून काढा"
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "तुमचे चित्रे या टोकापासून त्या टोकापर्यंत कूटबद्धतित आहेत, त्या कारणांनी ऐक्सकैलिड्रॉ सर्वर्स ह्यानां ते पहाणं कधीच जमणार नाही.",
     "link": "ब्लॉग पोस्ट ऐक्सकैलिड्रॉ मधे या टोकापासून त्या टोकापर्यंत कूटबद्धतित आहेत"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "एक घटक म्हणून चिपकावण्या साठी {{shortcut}} वापरा,\nकिंवा विद्यमान मजकूर संपादकात चिपकवा"
   },
   "colors": {
-    "ffffff": "पांढरा",
-    "f8f9fa": "करडा 0",
-    "f1f3f5": "करडा 1",
-    "fff5f5": "लाल 0",
-    "fff0f6": "गुलाबी 0",
-    "f8f0fc": "अंगूरी 0",
-    "f3f0ff": "जांभळा 0",
-    "edf2ff": "बैंगनी 0",
-    "e7f5ff": "नीळा 0",
-    "e3fafc": "आसमानी 0",
-    "e6fcf5": "पाचू 0",
-    "ebfbee": "हिरवा 0",
-    "f4fce3": "लिंबु 0",
-    "fff9db": "पिवळा 0",
-    "fff4e6": "नारंगी 0",
     "transparent": "पारदर्शक",
-    "ced4da": "करडा 4",
-    "868e96": "करडा 6",
-    "fa5252": "लाल 6",
-    "e64980": "गुलाबी 6",
-    "be4bdb": "अंगूरी 6",
-    "7950f2": "जांभळा 6",
-    "4c6ef5": "बैंगनी 6",
-    "228be6": "नीळा 6",
-    "15aabf": "आसमानी 6",
-    "12b886": "पाचू 6",
-    "40c057": "हिरवा 6",
-    "82c91e": "लिंबु 6",
-    "fab005": "पिवळा 6",
-    "fd7e14": "नारंगी 6",
-    "000000": "काळा",
-    "343a40": "करडा 8",
-    "495057": "करडा 7",
-    "c92a2a": "लाल 9",
-    "a61e4d": "गुलाबी 9",
-    "862e9c": "अंगूरी 9",
-    "5f3dc4": "जामुनी 9",
-    "364fc7": "बैंगनी 9",
-    "1864ab": "नीला 9",
-    "0b7285": "आसमानी 9",
-    "087f5b": "पाचू 9",
-    "2b8a3e": "हरा 9",
-    "5c940d": "नीबू 9",
-    "e67700": "पीला 9",
-    "d9480f": "नारंगी 9"
+    "black": "काळा",
+    "white": "पांढरा",
+    "red": "लाल",
+    "pink": "गुलाबी",
+    "grape": "अंगूरी",
+    "violet": "जांभळा",
+    "gray": "राखाडी",
+    "blue": "निळा",
+    "cyan": "आकाशी",
+    "teal": "हिरवट निळा",
+    "green": "हिरवा",
+    "yellow": "पिवळा",
+    "orange": "केशरी",
+    "bronze": "कांस्य"
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "एक साधन निवडा आणि चित्रीकरण सुरु करा!",
       "helpHint": "शॉर्टकट आणि सहाय्य"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "सर्वात जास्त वापरणीस रंग",
+    "colors": "रंग",
+    "shades": "रंगछटा",
+    "hexCode": "हेक्स कोड",
+    "noShades": "ह्या रंगाच्या छटा उपलब्ध नाहित"
   }
 }
diff --git a/src/locales/my-MM.json b/src/locales/my-MM.json
index efc874218..f5a69f8ca 100644
--- a/src/locales/my-MM.json
+++ b/src/locales/my-MM.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "",
     "fontSize": "စာလုံးအရွယ်",
     "fontFamily": "စာလုံးပုံစံ",
-    "onlySelected": "ရွေးထားသလောက်",
-    "withBackground": "",
-    "exportEmbedScene": "",
-    "exportEmbedScene_details": "ထုတ်ယူလိုက်သော PNG/SVG ထဲမြင်ကွင်းအချက်အလက်များပါဝင်သဖြင့် ပြန်လည်ရယူနိုင်သော်လည်း ဖိုင်အရွယ်အစားကြီးပါမည်။",
     "addWatermark": "\"Excalidraw ဖြင့်ဖန်တီးသည်။\" စာသားထည့်",
     "handDrawn": "လက်ရေး",
     "normal": "ပုံမှန်",
@@ -54,6 +50,7 @@
     "veryLarge": "ပိုကြီး",
     "solid": "အပြည့်",
     "hachure": "မျဉ်းစောင်း",
+    "zigzag": "",
     "crossHatch": "ဇကာကွက်",
     "thin": "ပါး",
     "bold": "ထူ",
@@ -99,7 +96,6 @@
     "flipHorizontal": "",
     "flipVertical": "",
     "viewMode": "",
-    "toggleExportColorScheme": "",
     "share": "",
     "showStroke": "",
     "showBackground": "",
@@ -127,7 +123,10 @@
       "unlockAll": ""
     },
     "statusPublished": "",
-    "sidebarLock": ""
+    "sidebarLock": "",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "",
@@ -139,11 +138,7 @@
     "exportJSON": "",
     "exportImage": "",
     "export": "",
-    "exportToPng": "PNG ထုတ်",
-    "exportToSvg": "SVG ထုတ်",
     "copyToClipboard": "ကူးယူ",
-    "copyPngToClipboard": "PNG ကူးယူ",
-    "scale": "စကေး",
     "save": "",
     "saveAs": "ပြောင်းသိမ်း",
     "load": "",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "",
     "collabSaveFailed_sizeExceeded": "",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "",
     "link": "",
     "eraser": "",
-    "hand": ""
+    "frame": "",
+    "hand": "",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "ကားချပ်လုပ်ဆောင်ချက်",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "မှတ်ချက်။ ။ဝေးကွာနေသော ပုံများ၊ စာများအား ပိုမိုနီးကပ်အောင်ရွှေ့ကြည့်ပါ။"
   },
   "errorSplash": {
-    "headingMain_pre": "ချို့ယွင်းမှုဖြစ်ပေါ်ခဲ့သဖြင့် ထပ်မံကြိုးစားကြည့်ရန် ",
-    "headingMain_button": "စာမျက်နှာအား အသစ်ပြန်လည်ရယူပါ။",
-    "clearCanvasMessage": "အသစ်ပြန်လည်မရယူနိုင်ပါက ထပ်မံကြိုးစားကြည့်ရန်",
-    "clearCanvasMessage_button": "ကားချပ်အား ရှင်းလင်းပါ။",
+    "headingMain": "ချို့ယွင်းမှုဖြစ်ပေါ်ခဲ့သဖြင့် ထပ်မံကြိုးစားကြည့်ရန် <button>စာမျက်နှာအား အသစ်ပြန်လည်ရယူပါ။</button>",
+    "clearCanvasMessage": "အသစ်ပြန်လည်မရယူနိုင်ပါက ထပ်မံကြိုးစားကြည့်ရန်<button>ကားချပ်အား ရှင်းလင်းပါ။</button>",
     "clearCanvasCaveat": " ရေးဆွဲထားသည်များ ဆုံးရှုံးနိုင်သည် ",
-    "trackedToSentry_pre": "ချို့ယွင်းမှုသတ်မှတ်ချက် ",
-    "trackedToSentry_post": " အားစနစ်အတွင်းခြေရာကောက်ပြီးပါပြီ။",
-    "openIssueMessage_pre": "ချို့ယွင်းမှုမှတ်တမ်းတွင် အရေးကြီးအချက်အလက်များပါဝင်မှုမရှိစေရန်အထူးသတိပြုပါသည်။ မပါဝင်ပါက ဆက်လက်ဆောင်ရွက်ရန် ",
-    "openIssueMessage_button": "ချို့ယွင်းမှုအားခြေရာကောက်ပါ။",
-    "openIssueMessage_post": " အောက်ပါအချက်အလက်များအား Github တွင် Issue အနေဖြင့်ဖြည့်သွင်းဖော်ပြပေးပါ။",
+    "trackedToSentry": "ချို့ယွင်းမှုသတ်မှတ်ချက် {{eventId}} အားစနစ်အတွင်းခြေရာကောက်ပြီးပါပြီ။",
+    "openIssueMessage": "ချို့ယွင်းမှုမှတ်တမ်းတွင် အရေးကြီးအချက်အလက်များပါဝင်မှုမရှိစေရန်အထူးသတိပြုပါသည်။ မပါဝင်ပါက ဆက်လက်ဆောင်ရွက်ရန် <button>ချို့ယွင်းမှုအားခြေရာကောက်ပါ။</button> အောက်ပါအချက်အလက်များအား Github တွင် Issue အနေဖြင့်ဖြည့်သွင်းဖော်ပြပေးပါ။",
     "sceneContent": "မြင်ကွင်းပါအချက်အလက်။ ။"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "",
       "website": ""
     },
-    "noteDescription": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
-    "noteGuidelines": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
-    "noteLicense": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
+    "noteDescription": "",
+    "noteGuidelines": "",
+    "noteLicense": "",
     "noteItems": "",
     "atleastOneLibItem": "",
     "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "",
-    "content": "",
-    "link": ""
+    "content": ""
   },
   "confirmDialog": {
     "resetLibrary": "",
     "removeItemsFromLib": ""
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "ရေးဆွဲထားသောပုံများအား နှစ်ဘက်စွန်းတိုင်လျှို့ဝှက်ထားသဖြင့် Excalidraw ၏ဆာဗာများပင်လျှင်မြင်တွေ့ရမည်မဟုတ်ပါ။",
     "link": ""
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": ""
   },
   "colors": {
-    "ffffff": "",
-    "f8f9fa": "",
-    "f1f3f5": "",
-    "fff5f5": "",
-    "fff0f6": "",
-    "f8f0fc": "",
-    "f3f0ff": "",
-    "edf2ff": "",
-    "e7f5ff": "",
-    "e3fafc": "",
-    "e6fcf5": "",
-    "ebfbee": "",
-    "f4fce3": "",
-    "fff9db": "",
-    "fff4e6": "",
     "transparent": "",
-    "ced4da": "",
-    "868e96": "",
-    "fa5252": "",
-    "e64980": "",
-    "be4bdb": "",
-    "7950f2": "",
-    "4c6ef5": "",
-    "228be6": "",
-    "15aabf": "",
-    "12b886": "",
-    "40c057": "",
-    "82c91e": "",
-    "fab005": "",
-    "fd7e14": "",
-    "000000": "",
-    "343a40": "",
-    "495057": "",
-    "c92a2a": "",
-    "a61e4d": "",
-    "862e9c": "",
-    "5f3dc4": "",
-    "364fc7": "",
-    "1864ab": "",
-    "0b7285": "",
-    "087f5b": "",
-    "2b8a3e": "",
-    "5c940d": "",
-    "e67700": "",
-    "d9480f": ""
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "",
       "helpHint": ""
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/nb-NO.json b/src/locales/nb-NO.json
index 27e717d2a..11962b7dc 100644
--- a/src/locales/nb-NO.json
+++ b/src/locales/nb-NO.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Trekant",
     "fontSize": "Skriftstørrelse",
     "fontFamily": "Fontfamilie",
-    "onlySelected": "Kun valgte",
-    "withBackground": "Bakgrunn",
-    "exportEmbedScene": "Bygg inn scene",
-    "exportEmbedScene_details": "Scenedata vil bli lagret i den eksporterte PNG/SVG-filen, slik at scenen kan gjenopprettes fra den.\nDet vil øke den eksporterte filstørrelsen.",
     "addWatermark": "Legg til \"Laget med Excalidraw\"",
     "handDrawn": "Håndtegnet",
     "normal": "Normal",
@@ -54,6 +50,7 @@
     "veryLarge": "Svært stor",
     "solid": "Helfarge",
     "hachure": "Skravert",
+    "zigzag": "Sikk-sakk",
     "crossHatch": "Krysskravert",
     "thin": "Tynn",
     "bold": "Tykk",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Snu horisontalt",
     "flipVertical": "Snu vertikalt",
     "viewMode": "Visningsmodus",
-    "toggleExportColorScheme": "Veksle eksport av fargepalett",
     "share": "Del",
     "showStroke": "Vis fargevelger for kantfarge",
     "showBackground": "Vis fargevelger for bakgrunnsfarge",
@@ -127,7 +123,10 @@
       "unlockAll": "Lås opp alle"
     },
     "statusPublished": "Publisert",
-    "sidebarLock": "Holde sidemenyen åpen"
+    "sidebarLock": "Holde sidemenyen åpen",
+    "selectAllElementsInFrame": "Velg alle elementene i rammen",
+    "removeAllElementsFromFrame": "Fjern alle elementer fra rammen",
+    "eyeDropper": "Velg farge fra lerretet"
   },
   "library": {
     "noItems": "Ingen elementer lagt til ennå...",
@@ -139,11 +138,7 @@
     "exportJSON": "Eksporter til fil",
     "exportImage": "Eksporter bilde...",
     "export": "Lagre som...",
-    "exportToPng": "Eksporter til PNG",
-    "exportToSvg": "Eksporter til SVG",
     "copyToClipboard": "Kopier til utklippstavle",
-    "copyPngToClipboard": "Kopier PNG til utklippstavlen",
-    "scale": "Skalering",
     "save": "Lagre til aktiv fil",
     "saveAs": "Lagre som",
     "load": "Åpne",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Kan ikke lagre i backend-databasen. Hvis problemer vedvarer, bør du lagre filen lokalt for å sikre at du ikke mister arbeidet.",
     "collabSaveFailed_sizeExceeded": "Kunne ikke lagre til backend-databasen, lerretet ser ut til å være for stort. Du bør lagre filen lokalt for å sikre at du ikke mister arbeidet ditt.",
     "brave_measure_text_error": {
-      "start": "Ser ut som du bruker Brave nettleser med",
-      "aggressive_block_fingerprint": "Blokker fingeravtrykk aggressivt",
-      "setting_enabled": "innstilling aktivert",
-      "break": "Dette kan føre til at den bryter",
-      "text_elements": "Tekstelementer",
-      "in_your_drawings": "i tegningene dine",
-      "strongly_recommend": "Vi anbefaler på det sterkeste å deaktivere denne innstillingen. Du kan følge dette",
-      "steps": "disse trinnene",
-      "how": "om hvordan det skal gjøres",
-      "disable_setting": " Hvis deaktivering av denne innstillingen ikke fikser visningen av tekstelementer, kan du åpne en",
-      "issue": "sak",
-      "write": "på vår GitHub, eller skriv oss på",
-      "discord": "Discord"
+      "line1": "Ser ut som om du bruker Brave nettleser med <bold>Aggressivt Block Finger</bold> -innstillingen aktivert.",
+      "line2": "Dette kan resultere i å bryte <bold>tekst-elementene</bold> i tegningene.",
+      "line3": "Vi anbefaler på det sterkeste å deaktivere denne innstillingen. Du kan følge <link>disse trinnene</link> om hvordan du gjør det.",
+      "line4": "Hvis deaktivering av denne innstillingen ikke fikser visningen av tekstelementer, vennligst åpne en <issueLink>sak</issueLink> på vår GitHub, eller skriv oss på <discordLink>Discord</discordLink>"
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Pennemodus - forhindre berøring",
     "link": "Legg til / oppdater link for en valgt figur",
     "eraser": "Viskelær",
-    "hand": "Hånd (panoreringsverktøy)"
+    "frame": "Rammeverktøy",
+    "hand": "Hånd (panoreringsverktøy)",
+    "extraTools": "Flere verktøy"
   },
   "headings": {
     "canvasActions": "Handlinger: lerret",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Tips: Prøv å flytte de ytterste elementene litt tettere sammen."
   },
   "errorSplash": {
-    "headingMain_pre": "En feil oppsto. Prøv ",
-    "headingMain_button": "å laste siden på nytt.",
-    "clearCanvasMessage": "Om ny sidelasting ikke fungerer, prøv ",
-    "clearCanvasMessage_button": "å tømme lerretet.",
+    "headingMain": "En feil oppsto. Prøv <button>å laste siden på nytt.</button>",
+    "clearCanvasMessage": "Om ny sidelasting ikke fungerer, prøv <button>å tømme lerretet.</button>",
     "clearCanvasCaveat": " Dette vil føre til tap av arbeid ",
-    "trackedToSentry_pre": "Feilen med identifikator ",
-    "trackedToSentry_post": " ble logget i vårt system.",
-    "openIssueMessage_pre": "Vi er veldig nøye med å ikke inkludere dine scene-opplysninger i feilen. Hvis din scene ikke er privat, vurder å følge opp i vårt ",
-    "openIssueMessage_button": "feilrapporteringssystem.",
-    "openIssueMessage_post": " Ta med opplysningene nedenfor ved å kopiere og lime inn i GitHub-saken.",
+    "trackedToSentry": "Feilen med identifikator {{eventId}} ble logget i vårt system.",
+    "openIssueMessage": "Vi er veldig nøye med å ikke inkludere dine scene-opplysninger i feilen. Hvis din scene ikke er privat, vurder å følge opp i vårt <button>feilrapporteringssystem.</button> Ta med opplysningene nedenfor ved å kopiere og lime inn i GitHub-saken.",
     "sceneContent": "Scene-innhold:"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "Påkrevd",
       "website": "Angi en gyldig nettadresse"
     },
-    "noteDescription": {
-      "pre": "Send inn biblioteket ditt som skal inkluderes i ",
-      "link": "kildekode for offentlig bibliotek",
-      "post": "for andre å bruke dem i tegninger."
-    },
-    "noteGuidelines": {
-      "pre": "Biblioteket må godkjennes manuelt først. Les ",
-      "link": "retningslinjene",
-      "post": " før innsending. Du vil trenge en GitHub-konto for å kommunisere og gjøre endringer hvis ønsket, men det er ikke påkrevd."
-    },
-    "noteLicense": {
-      "pre": "Ved å sende inn godtar du at biblioteket blir publisert under ",
-      "link": "MIT-lisens, ",
-      "post": "som kortfattet betyr at andre kan bruke dem uten begrensninger."
-    },
+    "noteDescription": "Send inn biblioteket ditt som skal inkluderes i <link>kildekode for offentlig bibliotek</link>for andre å bruke dem i tegninger.",
+    "noteGuidelines": "Biblioteket må godkjennes manuelt først. Les <link>retningslinjene</link> før innsending. Du vil trenge en GitHub-konto for å kommunisere og gjøre endringer hvis ønsket, men det er ikke påkrevd.",
+    "noteLicense": "Ved å sende inn godtar du at biblioteket blir publisert under <link>MIT-lisens, </link>som kortfattet betyr at andre kan bruke dem uten begrensninger.",
     "noteItems": "Hvert bibliotek må ha sitt eget navn, så det er filtrerbart. Følgende bibliotekselementer vil bli inkludert:",
     "atleastOneLibItem": "Vennligst velg minst ett bibliotek for å komme i gang",
     "republishWarning": "Merk: noen av de valgte elementene er merket som allerede publisert/sendt. Du bør kun sende inn elementer på nytt når du oppdaterer et eksisterende bibliotek eller innlevering."
   },
   "publishSuccessDialog": {
     "title": "Bibliotek innsendt",
-    "content": "Takk {{authorName}}. Ditt bibliotek har blitt sendt inn for gjennomgang. Du kan spore statusen",
-    "link": "her"
+    "content": "Takk {{authorName}}. Ditt bibliotek har blitt sendt inn for gjennomgang. Du kan spore statusen<link>her</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Nullstill bibliotek",
     "removeItemsFromLib": "Fjern valgte elementer fra bibliotek"
   },
+  "imageExportDialog": {
+    "header": "Eksporter bilde",
+    "label": {
+      "withBackground": "Bakgrunn",
+      "onlySelected": "Kun valgte",
+      "darkMode": "Mørk modus",
+      "embedScene": "Bygg inn scene",
+      "scale": "Skalering",
+      "padding": "Avstand"
+    },
+    "tooltip": {
+      "embedScene": "Scenedata vil bli lagret i den eksporterte PNG/SVG-filen, slik at scenen kan gjenopprettes fra den.\nDet vil øke den eksporterte filstørrelsen."
+    },
+    "title": {
+      "exportToPng": "Eksporter til PNG",
+      "exportToSvg": "Eksporter til SVG",
+      "copyPngToClipboard": "Kopier PNG til utklippstavlen"
+    },
+    "button": {
+      "exportToPng": "PNG",
+      "exportToSvg": "SVG",
+      "copyPngToClipboard": "Kopier til utklippstavle"
+    }
+  },
   "encrypted": {
     "tooltip": "Dine tegninger er ende-til-ende-krypterte slik at Excalidraw sine servere aldri vil se dem.",
     "link": "Blogginnlegg om ende-til-ende-kryptering i Excalidraw"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "Bruk {{shortcut}} for å lime inn som ett enkelt element,\neller lim inn i en eksisterende tekstbehandler"
   },
   "colors": {
-    "ffffff": "Hvit",
-    "f8f9fa": "Grå 0",
-    "f1f3f5": "Grå 1",
-    "fff5f5": "Rød 0",
-    "fff0f6": "Rosa 0",
-    "f8f0fc": "Drue 0",
-    "f3f0ff": "Fiolett 0",
-    "edf2ff": "Indigo 0",
-    "e7f5ff": "Blå 0",
-    "e3fafc": "Turkis 0",
-    "e6fcf5": "Blågrønn 0",
-    "ebfbee": "Grønn 0",
-    "f4fce3": "Limegrønn 0",
-    "fff9db": "Gul 0",
-    "fff4e6": "Oransje 0",
     "transparent": "Gjennomsiktig",
-    "ced4da": "Grå 4",
-    "868e96": "Grå 6",
-    "fa5252": "Rød 6",
-    "e64980": "Rosa 6",
-    "be4bdb": "Drue 6",
-    "7950f2": "Fiolett 6",
-    "4c6ef5": "Indigo 6",
-    "228be6": "Blå 6",
-    "15aabf": "Turkis 6",
-    "12b886": "Blågrønn 6",
-    "40c057": "Grønn 6",
-    "82c91e": "Limegrønn 6",
-    "fab005": "Gul 6",
-    "fd7e14": "Oransje 6",
-    "000000": "Sort",
-    "343a40": "Grå 8",
-    "495057": "Grå 7",
-    "c92a2a": "Rød 9",
-    "a61e4d": "Rosa 9",
-    "862e9c": "Drue 9",
-    "5f3dc4": "Fiolett 9",
-    "364fc7": "Indigo 9",
-    "1864ab": "Blå 9",
-    "0b7285": "Turkis 9",
-    "087f5b": "Blågrønn 9",
-    "2b8a3e": "Grønn 9",
-    "5c940d": "Limegrønn 9",
-    "e67700": "Gul 9",
-    "d9480f": "Oransje 9"
+    "black": "Svart",
+    "white": "Hvit",
+    "red": "Rød",
+    "pink": "Rosa",
+    "grape": "Drue",
+    "violet": "Fiolett",
+    "gray": "Grå",
+    "blue": "Blå",
+    "cyan": "Turkis",
+    "teal": "Blågrønn",
+    "green": "Grønn",
+    "yellow": "Gul",
+    "orange": "Oransje",
+    "bronze": "Bronse"
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "Velg et verktøy og start å tegne!",
       "helpHint": "Snarveier & hjelp"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "Mest brukte egendefinerte farger",
+    "colors": "Farger",
+    "shades": "Toner",
+    "hexCode": "Heksadesimal kode",
+    "noShades": "Ingen toner tilgjengelig for denne fargen"
   }
 }
diff --git a/src/locales/nl-NL.json b/src/locales/nl-NL.json
index 7c2bb105b..87529aac0 100644
--- a/src/locales/nl-NL.json
+++ b/src/locales/nl-NL.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Driehoek",
     "fontSize": "Tekstgrootte",
     "fontFamily": "Lettertype",
-    "onlySelected": "Enkel geselecteerde",
-    "withBackground": "Achtergrond",
-    "exportEmbedScene": "Scène insluiten",
-    "exportEmbedScene_details": "Scènegegevens worden in het geëxporteerde PNG/SVG-bestand opgeslagen zodat de scène kan worden hersteld.\nDe grootte van de geëxporteerde bestanden zal toenemen.",
     "addWatermark": "Voeg \"Gemaakt met Excalidraw\" toe",
     "handDrawn": "Handgetekend",
     "normal": "Normaal",
@@ -54,6 +50,7 @@
     "veryLarge": "Zeer groot",
     "solid": "Ingekleurd",
     "hachure": "Arcering",
+    "zigzag": "",
     "crossHatch": "Tweemaal gearceerd",
     "thin": "Dun",
     "bold": "Vet",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Horizontaal spiegelen",
     "flipVertical": "Verticaal spiegelen",
     "viewMode": "Weergavemodus",
-    "toggleExportColorScheme": "Kleurenschema exporteren aan/uit",
     "share": "Deel",
     "showStroke": "Toon lijn kleur kiezer",
     "showBackground": "Toon achtergrondkleur kiezer",
@@ -127,7 +123,10 @@
       "unlockAll": "Ontgrendel alles"
     },
     "statusPublished": "Gepubliceerd",
-    "sidebarLock": "Zijbalk open houden"
+    "sidebarLock": "Zijbalk open houden",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "Nog geen items toegevoegd...",
@@ -139,11 +138,7 @@
     "exportJSON": "Exporteren naar bestand",
     "exportImage": "Exporteer afbeelding...",
     "export": "Sla op...",
-    "exportToPng": "Exporteren naar PNG",
-    "exportToSvg": "Exporteren naar SVG",
     "copyToClipboard": "Kopieer",
-    "copyPngToClipboard": "Kopieer als PNG",
-    "scale": "Schaal",
     "save": "Opslaan naar huidige bestand",
     "saveAs": "Opslaan als",
     "load": "Open",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Kan niet opslaan in de backend database. Als de problemen blijven bestaan, moet u het bestand lokaal opslaan om ervoor te zorgen dat u uw werk niet verliest.",
     "collabSaveFailed_sizeExceeded": "Kan de backend database niet opslaan, het canvas lijkt te groot te zijn. U moet het bestand lokaal opslaan om ervoor te zorgen dat u uw werk niet verliest.",
     "brave_measure_text_error": {
-      "start": "Het ziet er uit dat u de Brave browser gebruikt met de",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "instelling ingeschakeld",
-      "break": "Dit kan leiden tot het breken van de",
-      "text_elements": "Tekst Elementen",
-      "in_your_drawings": "in je tekeningen",
-      "strongly_recommend": "We raden u ten zeerste aan deze instelling uit te schakelen. U kunt dit volgen",
-      "steps": "deze stappen",
-      "how": "over hoe dit te doen",
-      "disable_setting": " Indien het uitschakelen van deze instelling de weergave van tekst elementen niet wijzigt, open dan een",
-      "issue": "probleem",
-      "write": "",
-      "discord": "Discord"
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Pen modus - Blokkeer aanraken",
     "link": "Link toevoegen / bijwerken voor een geselecteerde vorm",
     "eraser": "Gum",
-    "hand": ""
+    "frame": "",
+    "hand": "",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Canvasacties",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Tip: beweeg de verste elementen iets dichter bij elkaar."
   },
   "errorSplash": {
-    "headingMain_pre": "Fout opgetreden. Probeer ",
-    "headingMain_button": "de pagina opnieuw laden.",
-    "clearCanvasMessage": "Als herladen niet werkt, probeer ",
-    "clearCanvasMessage_button": "het canvas te wissen.",
+    "headingMain": "Fout opgetreden. Probeer <button>de pagina opnieuw laden.</button>",
+    "clearCanvasMessage": "Als herladen niet werkt, probeer <button>het canvas te wissen.</button>",
     "clearCanvasCaveat": " Dit zal leiden tot verlies van je werk ",
-    "trackedToSentry_pre": "De fout met ID ",
-    "trackedToSentry_post": " was gevolgd op ons systeem.",
-    "openIssueMessage_pre": "We waren voorzichtig om je scène-informatie niet in de fout toe te voegen. Als je scène niet privé is, overweeg dan alstublieft het opvolgen op onze ",
-    "openIssueMessage_button": "bugtracker.",
-    "openIssueMessage_post": " Kopieer de informatie hieronder naar de GitHub issue.",
+    "trackedToSentry": "De fout met ID {{eventId}} was gevolgd op ons systeem.",
+    "openIssueMessage": "We waren voorzichtig om je scène-informatie niet in de fout toe te voegen. Als je scène niet privé is, overweeg dan alstublieft het opvolgen op onze <button>bugtracker.</button> Kopieer de informatie hieronder naar de GitHub issue.",
     "sceneContent": "Scène-inhoud:"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "Vereist",
       "website": "Vul een geldige URL in"
     },
-    "noteDescription": {
-      "pre": "",
-      "link": "openbare repository",
-      "post": ""
-    },
-    "noteGuidelines": {
-      "pre": "",
-      "link": "richtlijnen",
-      "post": ""
-    },
-    "noteLicense": {
-      "pre": "",
-      "link": "MIT-licentie, ",
-      "post": ""
-    },
+    "noteDescription": "<link>openbare repository</link>",
+    "noteGuidelines": "<link>richtlijnen</link>",
+    "noteLicense": "<link>MIT-licentie, </link>",
     "noteItems": "",
     "atleastOneLibItem": "",
     "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "Bibliotheek ingediend",
-    "content": "",
-    "link": "Hier"
+    "content": "<link>Hier</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Reset bibliotheek",
     "removeItemsFromLib": "Verwijder geselecteerde items uit bibliotheek"
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "Je tekeningen zijn beveiligd met end-to-end encryptie, dus Excalidraw's servers zullen nooit zien wat je tekent.",
     "link": "Blog post over end-to-end versleuteling in Excalidraw"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "Gebruik {{shortcut}} om te plakken als een enkel element,\nof plak in een bestaande teksteditor"
   },
   "colors": {
-    "ffffff": "Wit",
-    "f8f9fa": "Grijs 0",
-    "f1f3f5": "Grijs 1",
-    "fff5f5": "Rood 0",
-    "fff0f6": "Roze 0",
-    "f8f0fc": "Druiven 0",
-    "f3f0ff": "Violet 0",
-    "edf2ff": "Indigo 0",
-    "e7f5ff": "Blauw 0",
-    "e3fafc": "Cyaan 0",
-    "e6fcf5": "Groenblauw 0",
-    "ebfbee": "Groen 0",
-    "f4fce3": "Limoen 0",
-    "fff9db": "Geel 0",
-    "fff4e6": "Oranje 0",
     "transparent": "Transparant",
-    "ced4da": "Grijs 4",
-    "868e96": "Grijs 6",
-    "fa5252": "Rood 6",
-    "e64980": "Roze 6",
-    "be4bdb": "Druiven 6",
-    "7950f2": "Violet",
-    "4c6ef5": "Indigo 6",
-    "228be6": "Blauw 6",
-    "15aabf": "Cyaan 6",
-    "12b886": "Groenblauw 6",
-    "40c057": "Groen 6",
-    "82c91e": "Limoen 6",
-    "fab005": "Geel 6",
-    "fd7e14": "Oranje 6",
-    "000000": "Zwart",
-    "343a40": "Grijs 8",
-    "495057": "Grijs 7",
-    "c92a2a": "Rood 9",
-    "a61e4d": "Roze 9",
-    "862e9c": "Druiven 9",
-    "5f3dc4": "Violet 9",
-    "364fc7": "Indigo 9",
-    "1864ab": "Blauw 9",
-    "0b7285": "Cyaan 9",
-    "087f5b": "Groenblauw 9",
-    "2b8a3e": "Groen 9",
-    "5c940d": "Limoen 9",
-    "e67700": "Geel 9",
-    "d9480f": "Oranje 9"
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "Kies een tool & begin met tekenen!",
       "helpHint": "Snelkoppelingen en hulp"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/nn-NO.json b/src/locales/nn-NO.json
index 1733b84c4..21ed75d9c 100644
--- a/src/locales/nn-NO.json
+++ b/src/locales/nn-NO.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Trekant",
     "fontSize": "Skriftstorleik",
     "fontFamily": "Skrifttype",
-    "onlySelected": "Kun valde",
-    "withBackground": "Bakgrunn",
-    "exportEmbedScene": "Bygg inn scene",
-    "exportEmbedScene_details": "Scenedata vert lagra i den eksporterte PNG- eller SVG-fila slik at scena kan bli gjenopprettast frå den. Dette vil auke eksportert filstorleik.",
     "addWatermark": "Legg til «Laga med Excalidraw»",
     "handDrawn": "Handteikna",
     "normal": "Normal",
@@ -54,6 +50,7 @@
     "veryLarge": "Svært stor",
     "solid": "Solid",
     "hachure": "Skravert",
+    "zigzag": "",
     "crossHatch": "Krysskravert",
     "thin": "Tynn",
     "bold": "Tjukk",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Vipp vassrett",
     "flipVertical": "Vipp loddrett",
     "viewMode": "Visningsmodus",
-    "toggleExportColorScheme": "Veksle eksport av fargepalett",
     "share": "Del",
     "showStroke": "Vis fargeveljar for linjer",
     "showBackground": "Vis fargeveljar for bakgrunn",
@@ -127,7 +123,10 @@
       "unlockAll": ""
     },
     "statusPublished": "",
-    "sidebarLock": ""
+    "sidebarLock": "",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "",
@@ -139,11 +138,7 @@
     "exportJSON": "Eksporter til fil",
     "exportImage": "",
     "export": "",
-    "exportToPng": "Eksporter til PNG",
-    "exportToSvg": "Eksporter til SVG",
     "copyToClipboard": "Kopier til utklippstavla",
-    "copyPngToClipboard": "Kopier PNG til utklippstavla",
-    "scale": "Skaler",
     "save": "Lagre til noverande fil",
     "saveAs": "Lagre som",
     "load": "",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "",
     "collabSaveFailed_sizeExceeded": "",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "",
     "link": "Legg til/ oppdater lenke til valt figur",
     "eraser": "Viskelêr",
-    "hand": ""
+    "frame": "",
+    "hand": "",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Handlingar: lerret",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Tips: prøv å flytte elementa som er lengst frå kvarandre, litt nærare kvarandre."
   },
   "errorSplash": {
-    "headingMain_pre": "Ein feil oppstod. Prøv ",
-    "headingMain_button": "å laste sida på nytt.",
-    "clearCanvasMessage": "Om ny sidelasting ikkje fungerer, prøv ",
-    "clearCanvasMessage_button": "å tømme lerretet.",
+    "headingMain": "Ein feil oppstod. Prøv <button>å laste sida på nytt.</button>",
+    "clearCanvasMessage": "Om ny sidelasting ikkje fungerer, prøv <button>å tømme lerretet.</button>",
     "clearCanvasCaveat": " Dette vil føre til tap av arbeid ",
-    "trackedToSentry_pre": "Feilen med identifikator ",
-    "trackedToSentry_post": " vart logga i systemet vårt.",
-    "openIssueMessage_pre": "Vi er veldig nøye med å ikkje inkludere scene-opplysingane dine i feilmeldinga. Viss scena di ikkje er privat kan du vurdere å følge opp i ",
-    "openIssueMessage_button": "feilrapporteringssystemet vårt.",
-    "openIssueMessage_post": " Ta med opplysingane nedanfor ved å kopiere og lime inn i GitHub-saka.",
+    "trackedToSentry": "Feilen med identifikator {{eventId}} vart logga i systemet vårt.",
+    "openIssueMessage": "Vi er veldig nøye med å ikkje inkludere scene-opplysingane dine i feilmeldinga. Viss scena di ikkje er privat kan du vurdere å følge opp i <button>feilrapporteringssystemet vårt.</button> Ta med opplysingane nedanfor ved å kopiere og lime inn i GitHub-saka.",
     "sceneContent": "Scene-innhald:"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "Kravt",
       "website": "Fyll inn ein gyldig URL"
     },
-    "noteDescription": {
-      "pre": "Send inn biblioteket ditt til inkludering i ",
-      "link": "den offentlege bibliotek-kjeldekoda",
-      "post": "slik at andre kan bruke det i teikningane deira."
-    },
-    "noteGuidelines": {
-      "pre": "Biblioteket må godkjennast manuelt fyrst. Ver vennleg å lese ",
-      "link": "retningslinjene",
-      "post": " før du sender inn. Du kjem til å trenge ein GitHub-konto for å kommunisere og gjere endringar dersom kravt, men det er ikkje strengt naudsynt."
-    },
-    "noteLicense": {
-      "pre": "Ved å sende inn godkjenner du at biblioteket vert publisert under ",
-      "link": "MIT-lisensen, ",
-      "post": "som kort sagt betyr at kven som helst kan bruke det utan avgrensingar."
-    },
+    "noteDescription": "Send inn biblioteket ditt til inkludering i <link>den offentlege bibliotek-kjeldekoda</link>slik at andre kan bruke det i teikningane deira.",
+    "noteGuidelines": "Biblioteket må godkjennast manuelt fyrst. Ver vennleg å lese <link>retningslinjene</link> før du sender inn. Du kjem til å trenge ein GitHub-konto for å kommunisere og gjere endringar dersom kravt, men det er ikkje strengt naudsynt.",
+    "noteLicense": "Ved å sende inn godkjenner du at biblioteket vert publisert under <link>MIT-lisensen, </link>som kort sagt betyr at kven som helst kan bruke det utan avgrensingar.",
     "noteItems": "Kvart bibliotekselement må ha eit eige namn, slik at det er mogleg å filtrere. Dei følgande bibliotekselementa blir inkludert:",
     "atleastOneLibItem": "Ver vennleg å markere minst eitt bibliotekselement for å starte",
     "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "Bibliotek innsendt",
-    "content": "Tusen takk {{authorName}}! Biblioteket ditt har blitt sendt inn til gjennomgang. Du kan halde styr på status",
-    "link": "her"
+    "content": "Tusen takk {{authorName}}! Biblioteket ditt har blitt sendt inn til gjennomgang. Du kan halde styr på status<link>her</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Tilbakestill bibliotek",
     "removeItemsFromLib": "Fjern valde element frå biblioteket"
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "Teikningane dine er ende-til-ende-krypterte slik at Excalidraw sine serverar aldri får sjå dei.",
     "link": "Blogginnlegg om ende-til-ende-kryptering i Excalidraw"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": ""
   },
   "colors": {
-    "ffffff": "Kvit",
-    "f8f9fa": "Grå 0",
-    "f1f3f5": "Grå 1",
-    "fff5f5": "Raud 0",
-    "fff0f6": "Rosa 0",
-    "f8f0fc": "Drue 0",
-    "f3f0ff": "Fiolett 0",
-    "edf2ff": "Indigo 0",
-    "e7f5ff": "Blå 0",
-    "e3fafc": "Turkis 0",
-    "e6fcf5": "Blågrøn 0",
-    "ebfbee": "Grøn 0",
-    "f4fce3": "Limegrøn 0",
-    "fff9db": "Gul 0",
-    "fff4e6": "Oransje 0",
     "transparent": "Gjennomsiktig",
-    "ced4da": "Grå 4",
-    "868e96": "Grå 6",
-    "fa5252": "Raud 6",
-    "e64980": "Rosa 6",
-    "be4bdb": "Drue 6",
-    "7950f2": "Fiolett 6",
-    "4c6ef5": "Indigo 6",
-    "228be6": "Blå 6",
-    "15aabf": "Turkis 6",
-    "12b886": "Blågrøn 6",
-    "40c057": "Grøn 6",
-    "82c91e": "Limegrøn 6",
-    "fab005": "Gul 6",
-    "fd7e14": "Oransje 6",
-    "000000": "Svart",
-    "343a40": "Grå 8",
-    "495057": "Grå 7",
-    "c92a2a": "Raud 9",
-    "a61e4d": "Rosa 9",
-    "862e9c": "Drue 9",
-    "5f3dc4": "Fiolett 9",
-    "364fc7": "Indigo 9",
-    "1864ab": "Blå 9",
-    "0b7285": "Turkis 9",
-    "087f5b": "Blågrøn 9",
-    "2b8a3e": "Grøn 9",
-    "5c940d": "Limegrøn 9",
-    "e67700": "Gul 9",
-    "d9480f": "Oransj 9"
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "",
       "helpHint": ""
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/oc-FR.json b/src/locales/oc-FR.json
index a9ca70a84..d549e3a1b 100644
--- a/src/locales/oc-FR.json
+++ b/src/locales/oc-FR.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Triangle",
     "fontSize": "Talha polissa",
     "fontFamily": "Familha de polissa",
-    "onlySelected": "Seleccion sonque",
-    "withBackground": "Rèireplan",
-    "exportEmbedScene": "Scèna embarcada",
-    "exportEmbedScene_details": "Las donadas de scèna seràn enregistradas dins lo fichièr PNG/SVG exportat, per que la scèna pòsca èsser restaurada a partir d’aqueste fichièr.\nAumentarà la talha del fichièr exportat.",
     "addWatermark": "Apondre « Fabricat amb Excalidraw »",
     "handDrawn": "A la man levada",
     "normal": "Normala",
@@ -54,6 +50,7 @@
     "veryLarge": "Gradassa",
     "solid": "Solide",
     "hachure": "Raia",
+    "zigzag": "",
     "crossHatch": "Raia crosada",
     "thin": "Fin",
     "bold": "Espés",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Virar orizontalament",
     "flipVertical": "Virar verticalament",
     "viewMode": "Mòde de vista",
-    "toggleExportColorScheme": "Alternar l’esquèma de color d’expòrt",
     "share": "Partejar",
     "showStroke": "Mostrar lo selector de color de contorn",
     "showBackground": "Mostrar lo selector de color de fons",
@@ -127,7 +123,10 @@
       "unlockAll": "Tot desverrolhar"
     },
     "statusPublished": "Publicat",
-    "sidebarLock": "Gardar la barra laterala dobèrta"
+    "sidebarLock": "Gardar la barra laterala dobèrta",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "Cap d’element pas encara apondut...",
@@ -139,11 +138,7 @@
     "exportJSON": "Exportar en fichièr",
     "exportImage": "Exportar imatges...",
     "export": "Enregistrar dins...",
-    "exportToPng": "Exportar en PNG",
-    "exportToSvg": "Exportar en SVG",
     "copyToClipboard": "Copiar al quichapapièrs",
-    "copyPngToClipboard": "Copiar PNG al quichapapièrs",
-    "scale": "Escala",
     "save": "Salvar al fichièr actual",
     "saveAs": "Enregistrar jos",
     "load": "Dobrir",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "",
     "collabSaveFailed_sizeExceeded": "",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Mòde estilo - empachar lo contact",
     "link": "Apondre/Actualizar lo ligam per una fòrma seleccionada",
     "eraser": "Goma",
-    "hand": "Man (aisina de desplaçament de la vista)"
+    "frame": "",
+    "hand": "Man (aisina de desplaçament de la vista)",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Accions del canabàs",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Astúcia : ensajatz de sarrar los elements mai alonhats."
   },
   "errorSplash": {
-    "headingMain_pre": "Una error s’es producha. Ensajatz ",
-    "headingMain_button": "recargament de la pagina.",
-    "clearCanvasMessage": "Se recargar fonciona pas, ensajatz ",
-    "clearCanvasMessage_button": "d’escafar los canabasses.",
+    "headingMain": "Una error s’es producha. Ensajatz <button>recargament de la pagina.</button>",
+    "clearCanvasMessage": "Se recargar fonciona pas, ensajatz <button>d’escafar los canabasses.</button>",
     "clearCanvasCaveat": " Menarà a una pèrda del trabalh ",
-    "trackedToSentry_pre": "Error amb l’identificant ",
-    "trackedToSentry_post": " es estada enregistrada sus nòstre sistèma.",
-    "openIssueMessage_pre": "Èrem plan prudents per inclure pas d’informacions de la scèna vòstra sus l’error. Se vòstra scèna es pas privada, volgatz considerar de perseguir sus nòstre ",
-    "openIssueMessage_button": "traçadors d’avarias.",
-    "openIssueMessage_post": " Volgatz inclure las informacions çai-jos en las copiant e pegant a l’issue GitHub.",
+    "trackedToSentry": "Error amb l’identificant {{eventId}} es estada enregistrada sus nòstre sistèma.",
+    "openIssueMessage": "Èrem plan prudents per inclure pas d’informacions de la scèna vòstra sus l’error. Se vòstra scèna es pas privada, volgatz considerar de perseguir sus nòstre <button>traçadors d’avarias.</button> Volgatz inclure las informacions çai-jos en las copiant e pegant a l’issue GitHub.",
     "sceneContent": "Contengut de la scèna :"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "Requerit",
       "website": "Picatz una URL valida"
     },
-    "noteDescription": {
-      "pre": "Enviatz vòstra bibliotèca per èsser compresa al ",
-      "link": "repertòri public de bibliotèca",
-      "post": "per que los autres l’utilizen dins lor dessenhs."
-    },
-    "noteGuidelines": {
-      "pre": "Qualqu’un deu aprovar la bibliotèca manualament per començar. Volgatz legir las ",
-      "link": "linhas directrises",
-      "post": " abans de sometre. Vos farà mestièr un compte GitHub per comunicar e realizar de modificacions se demandadas, mas es pas complètament obligatòri."
-    },
-    "noteLicense": {
-      "pre": "En sometent, acceptatz que la bibliotèca siá publicada sota la ",
-      "link": "Licéncia MIT, ",
-      "post": "que significa en brèu que qual que siá pòt l’utilizar sens cap de restriccion."
-    },
+    "noteDescription": "Enviatz vòstra bibliotèca per èsser compresa al <link>repertòri public de bibliotèca</link>per que los autres l’utilizen dins lor dessenhs.",
+    "noteGuidelines": "Qualqu’un deu aprovar la bibliotèca manualament per començar. Volgatz legir las <link>linhas directrises</link> abans de sometre. Vos farà mestièr un compte GitHub per comunicar e realizar de modificacions se demandadas, mas es pas complètament obligatòri.",
+    "noteLicense": "En sometent, acceptatz que la bibliotèca siá publicada sota la <link>Licéncia MIT, </link>que significa en brèu que qual que siá pòt l’utilizar sens cap de restriccion.",
     "noteItems": "Cada element de bibliotèca deu aver un nom pròpri per èsser filtrable. Los elements de bibliotèca seguentas seràn incluses :",
     "atleastOneLibItem": "Volgatz seleccionar almens un element de bibliotèca per començar",
     "republishWarning": "Nòta : d’unes elements seleccionats son marcats ja coma publicats/enviats. Deuriatz sonque tornar enviar los elements pendent l’actualizacion d’una bibliotèca existenta o un mandadís."
   },
   "publishSuccessDialog": {
     "title": "Bibliotèca somesa",
-    "content": "Mercés {{authorName}}. Vòstre bibliotèca es estada somesa per repassa. Podètz seguir l’avançament",
-    "link": "aquí"
+    "content": "Mercés {{authorName}}. Vòstre bibliotèca es estada somesa per repassa. Podètz seguir l’avançament<link>aquí</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Reïnicializar la bibliotèca",
     "removeItemsFromLib": "Tirar los elements seleccionats de la bibliotèca"
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "Vòstres dessenhs son chifrats del cap a la fin en consequéncia los servidors d’Excalidraw los veiràn pas jamai.",
     "link": "Article de blòg sul chiframent del cap a la fin dins Excalidraw"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": ""
   },
   "colors": {
-    "ffffff": "Blanc",
-    "f8f9fa": "Gris 0",
-    "f1f3f5": "Gris 0",
-    "fff5f5": "Roge 0",
-    "fff0f6": "Ròse 0",
-    "f8f0fc": "Bordèu 0",
-    "f3f0ff": "Violet 0",
-    "edf2ff": "Indigo 0",
-    "e7f5ff": "Blau 0",
-    "e3fafc": "Cian 0",
-    "e6fcf5": "Esmerauda 0",
-    "ebfbee": "Verd 0",
-    "f4fce3": "Verd citron 0",
-    "fff9db": "Jaune 0",
-    "fff4e6": "Irange 0",
     "transparent": "Transparéncia",
-    "ced4da": "Gris 4",
-    "868e96": "Gris 6",
-    "fa5252": "Roge 6",
-    "e64980": "Ròse 6",
-    "be4bdb": "Bordèu 6",
-    "7950f2": "Violet 6",
-    "4c6ef5": "Indigo 6",
-    "228be6": "Blau 6",
-    "15aabf": "Cian 6",
-    "12b886": "Esmerauda 6",
-    "40c057": "Verd 6",
-    "82c91e": "Verd citron 6",
-    "fab005": "Jaune 6",
-    "fd7e14": "Irange 6",
-    "000000": "Negre",
-    "343a40": "Gris 8",
-    "495057": "Gris 7",
-    "c92a2a": "Roge 9",
-    "a61e4d": "Ròse 9",
-    "862e9c": "Bordèu 9",
-    "5f3dc4": "Violet 9",
-    "364fc7": "Indigo 9",
-    "1864ab": "Blau 9",
-    "0b7285": "Cian 9",
-    "087f5b": "Esmerauda 9",
-    "2b8a3e": "Verd 9",
-    "5c940d": "Verd citron 9",
-    "e67700": "Jaune 9",
-    "d9480f": "Irange 9"
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "Prenètz un esplech e començatz de dessenhar !",
       "helpHint": "Acorchis e ajuda"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/pa-IN.json b/src/locales/pa-IN.json
index 31c11ceb8..18fa57b63 100644
--- a/src/locales/pa-IN.json
+++ b/src/locales/pa-IN.json
@@ -1,7 +1,7 @@
 {
   "labels": {
     "paste": "ਪੇਸਟ ਕਰੋ",
-    "pasteAsPlaintext": "",
+    "pasteAsPlaintext": "ਸਾਦੇ ਪਾਠ ਵਜੋਂ ਪੇਸਟ ਕਰੋ",
     "pasteCharts": "ਚਾਰਟ ਪੇਸਟ ਕਰੋ",
     "selectAll": "ਸਾਰੇ ਚੁਣੋ",
     "multiSelect": "ਐਲੀਮੈਂਟ ਨੂੰ ਚੋਣ ਵਿੱਚ ਜੋੜੋ",
@@ -10,7 +10,7 @@
     "copy": "ਕਾਪੀ ਕਰੋ",
     "copyAsPng": "ਕਲਿੱਪਬੋਰਡ 'ਤੇ PNG ਵਜੋਂ ਕਾਪੀ ਕਰੋ",
     "copyAsSvg": "ਕਲਿੱਪਬੋਰਡ 'ਤੇ SVG ਵਜੋਂ ਕਾਪੀ ਕਰੋ",
-    "copyText": "",
+    "copyText": "ਕਲਿੱਪਬੋਰਡ 'ਤੇ ਪਾਠ ਵਜੋਂ ਕਾਪੀ ਕਰੋ",
     "bringForward": "ਅੱਗੇ ਲਿਆਓ",
     "sendToBack": "ਸਭ ਤੋਂ ਪਿੱਛੇ ਭੇਜੋ",
     "bringToFront": "ਸਭ ਤੋਂ ਅੱਗੇ ਲਿਆਓ",
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "ਤਿਕੋਣ",
     "fontSize": "ਫੌਂਟ ਅਕਾਰ",
     "fontFamily": "ਫੌਂਟ ਪਰਿਵਾਰ",
-    "onlySelected": "ਸਿਰਫ ਚੁਣੇ ਹੋਏ ਹੀ",
-    "withBackground": "ਬੈਕਗਰਾਉਂਡ",
-    "exportEmbedScene": "ਦ੍ਰਿਸ਼ ਮੜ੍ਹੋ",
-    "exportEmbedScene_details": "ਦ੍ਰਿਸ਼ ਦਾ ਡਾਟਾ ਨਿਰਯਾਤ ਕੀਤੀ PNG/SVG ਫਾਈਲ ਵਿੱਚ ਸਾਂਭ ਦਿੱਤਾ ਜਾਵੇਗਾ ਤਾਂ ਜੋ ਇਸ ਵਿੱਚੋਂ ਦ੍ਰਿਸ਼ ਨੂੰ ਬਹਾਲ ਕੀਤਾ ਜਾ ਸਕੇ। ਇਹ ਨਿਰਯਾਤ ਕੀਤੀ ਜਾਣ ਵਾਲੀ ਫਾਈਲ ਦਾ ਅਕਾਰ ਵਧਾ ਦੇਵੇਗਾ।",
     "addWatermark": "\"Excalidraw ਨਾਲ ਬਣਾਇਆ\" ਜੋੜੋ",
     "handDrawn": "ਹੱਥਲਿਖਤ",
     "normal": "ਆਮ",
@@ -54,6 +50,7 @@
     "veryLarge": "ਬਹੁਤ ਵੱਡਾ",
     "solid": "ਠੋਸ",
     "hachure": "ਤਿਰਛੀਆਂ ਗਰਿੱਲਾਂ",
+    "zigzag": "ਵਿੰਗ-ਤੜਿੰਗ",
     "crossHatch": "ਜਾਲੀ",
     "thin": "ਪਤਲੀ",
     "bold": "ਮੋਟੀ",
@@ -72,7 +69,7 @@
     "layers": "ਪਰਤਾਂ",
     "actions": "ਕਾਰਵਾਈਆਂ",
     "language": "ਭਾਸ਼ਾ",
-    "liveCollaboration": "",
+    "liveCollaboration": "ਲਾਇਵ ਸਹਿਯੋਗ...",
     "duplicateSelection": "ਡੁਪਲੀਕੇਟ ਬਣਾਓ",
     "untitled": "ਬੇ-ਸਿਰਨਾਵਾਂ",
     "name": "ਨਾਂ",
@@ -99,7 +96,6 @@
     "flipHorizontal": "ਲੇਟਵੇਂ ਪਾਸੇ ਪਲਟੋ",
     "flipVertical": "ਖੜ੍ਹਵੇਂ ਪਾਸੇ ਪਲਟੋ",
     "viewMode": "ਦੇਖਣ ਵਾਲਾ ਮੋਡ",
-    "toggleExportColorScheme": "ਨਿਰਯਾਤ ਦੇ ਰੰਗਾਂ ਦੀ ਸਕੀਮ ਟਾਗਲ ਕਰੋ",
     "share": "ਸਾਂਝਾ ਕਰੋ",
     "showStroke": "ਰੇਖਾ ਦਾ ਰੰਗ ਚੋਣਕਾਰ ਦਿਖਾਓ",
     "showBackground": "ਬੈਕਗਰਾਉਂਡ ਦਾ ਰੰਗ ਚੋਣਕਾਰ ਦਿਖਾਓ",
@@ -108,45 +104,44 @@
     "excalidrawLib": "ਐਕਸਕਲੀਡਰਾਅ ਲਾਇਬ੍ਰੇਰੀ",
     "decreaseFontSize": "ਫੌਂਟ ਦਾ ਅਕਾਰ ਘਟਾਓ",
     "increaseFontSize": "ਫੌਂਟ ਦਾ ਅਕਾਰ ਵਧਾਓ",
-    "unbindText": "",
+    "unbindText": "ਪਾਠ ਨੂੰ ਵੱਖ ਕਰੋ",
     "bindText": "ਪਾਠ ਨੂੰ ਕੰਟੇਨਰ ਨਾਲ ਬੰਨ੍ਹੋ",
-    "createContainerFromText": "",
+    "createContainerFromText": "ਪਾਠ ਨੂੰ ਕੰਟੇਨਰ ਵਿੱਚ ਇਕੱਠਾ ਕਰੋ",
     "link": {
       "edit": "ਕੜੀ ਸੋਧੋ",
       "create": "ਕੜੀ ਬਣਾਓ",
       "label": "ਕੜੀ"
     },
     "lineEditor": {
-      "edit": "",
-      "exit": ""
+      "edit": "ਪੰਕਤੀ ਸੋਧੋ",
+      "exit": "ਪੰਕਤੀ ਸੋਧਕ 'ਤੋਂ ਬਾਹਰ ਨਿਕਲੋ"
     },
     "elementLock": {
-      "lock": "",
-      "unlock": "",
-      "lockAll": "",
-      "unlockAll": ""
+      "lock": "ਲਾਕ ਕਰੋ",
+      "unlock": "ਅਨਲਾਕ ਕਰੋ",
+      "lockAll": "ਸਭ ਲਾਕ ਕਰੋ",
+      "unlockAll": "ਸਭ ਅਨਲਾਕ ਕਰੋ"
     },
-    "statusPublished": "",
-    "sidebarLock": ""
+    "statusPublished": "ਪ੍ਰਕਾਸ਼ਤ ਹੈ",
+    "sidebarLock": "ਸਾਈਡਬਾਰ ਨੂੰ ਖੁੱਲ੍ਹਾ ਰੱਖੋ",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
-    "noItems": "",
-    "hint_emptyLibrary": "",
-    "hint_emptyPrivateLibrary": ""
+    "noItems": "ਹਾਲੇ ਤੱਕ ਕੋਈ ਚੀਜ ਜੋੜੀ ਨਹੀਂ ਗਈ...",
+    "hint_emptyLibrary": "ਇੱਥੇ ਆਈਟਮ ਜੋੜਨ ਲਈ ਉਸਨੂੰ ਕੈਨਵਸ ‘ਤੇ ਚੁਣੋ, ਜਾਂ ਹੇਠਾਂ ਪਬਲਿਕ ਰਿਪਾਜ਼ੀਟਰੀ ‘ਚੋਂ ਲਾਇਬ੍ਰੇਰੀ ਸਥਾਪਤ ਕਰੋ।",
+    "hint_emptyPrivateLibrary": "ਇੱਥੇ ਆਈਟਮ ਜੋੜਨ ਲਈ ਉਸਨੂੰ ਕੈਨਵਸ ‘ਤੇ ਚੁਣੋ।"
   },
   "buttons": {
     "clearReset": "ਕੈਨਵਸ ਰੀਸੈੱਟ ਕਰੋ",
     "exportJSON": "ਫਾਈਲ ਵਿੱਚ ਨਿਰਯਾਤ ਕਰੋ",
-    "exportImage": "",
-    "export": "",
-    "exportToPng": "PNG ਵਿੱਚ ਨਿਰਯਾਤ ਕਰੋ",
-    "exportToSvg": "SVG ਵਿੱਚ ਨਿਰਯਾਤ ਕਰੋ",
+    "exportImage": "ਤਸਵੀਰ ਨਿਰਯਾਤ ਕਰੋ...",
+    "export": "ਇਸ ਵਿੱਚ ਸਾਂਭੋ...",
     "copyToClipboard": "ਕਲਿੱਪਬੋਰਡ 'ਤੇ ਕਾਪੀ ਕਰੋ",
-    "copyPngToClipboard": "PNG ਨੂੰ ਕਲਿੱਪਬੋਰਡ 'ਤੇ ਕਾਪੀ ਕਰੋ",
-    "scale": "ਪੈਮਾਇਸ਼",
     "save": "ਮੌਜੂਦਾ ਫਾਈਲ ਵਿੱਚ ਸਾਂਭੋ",
     "saveAs": "ਇਸ ਵਜੋਂ ਸਾਂਭੋ",
-    "load": "",
+    "load": "ਖੋਲ੍ਹੋ",
     "getShareableLink": "ਸਾਂਝੀ ਕਰਨ ਵਾਲੀ ਲਿੰਕ ਲਵੋ",
     "close": "ਬੰਦ ਕਰੋ",
     "selectLanguage": "ਭਾਸ਼ਾ ਚੁਣੋ",
@@ -179,8 +174,8 @@
     "couldNotCreateShareableLinkTooBig": "ਸਾਂਝੀ ਕਰਨ ਵਾਲੀ ਲਿੰਕ ਨਹੀਂ ਬਣਾ ਸਕੇ: ਦ੍ਰਿਸ਼ ਬਹੁਤ ਵੱਡਾ ਹੈ",
     "couldNotLoadInvalidFile": "ਨਜਾਇਜ਼ ਫਾਈਲ ਲੋਡ ਨਹੀਂ ਕਰ ਸਕੇ",
     "importBackendFailed": "ਬੈਕਐੱਨਡ ਤੋਂ ਆਯਾਤ ਕਰਨ ਵਿੱਚ ਅਸਫਲ ਰਹੇ।",
-    "cannotExportEmptyCanvas": "ਖਾਲੀ ਕੈਨਵਸ ਨਿਰਯਾਤ ਨਹੀਂ ਕਰ ਸਕਦੇ।",
-    "couldNotCopyToClipboard": "",
+    "cannotExportEmptyCanvas": "ਖਾਲੀ ਕੈਨਵਸ ਨੂੰ ਨਿਰਯਾਤ ਨਹੀਂ ਕਰ ਸਕਦੇ।",
+    "couldNotCopyToClipboard": "ਕਲਿੱਪਬੋਰਡ 'ਤੇ ਕਾਪੀ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਿਆ।",
     "decryptFailed": "ਡਾਟਾ ਡੀਕਰਿਪਟ ਨਹੀਂ ਕਰ ਸਕੇ।",
     "uploadedSecurly": "ਅੱਪਲੋਡ ਸਿਰੇ-ਤੋਂ-ਸਿਰੇ ਤੱਕ ਇਨਕਰਿਪਸ਼ਨ ਨਾਲ ਸੁਰੱਖਿਅਤ ਕੀਤੀ ਹੋਈ ਹੈ, ਜਿਸਦਾ ਮਤਲਬ ਇਹ ਹੈ ਕਿ Excalidraw ਸਰਵਰ ਅਤੇ ਤੀਜੀ ਧਿਰ ਦੇ ਬੰਦੇ ਸਮੱਗਰੀ ਨੂੰ ਪੜ੍ਹ ਨਹੀਂ ਸਕਦੇ।",
     "loadSceneOverridePrompt": "ਬਾਹਰੀ ਡਰਾਇੰਗ ਨੂੰ ਲੋਡ ਕਰਨਾ ਤੁਹਾਡੀ ਮੌਜੂਦਾ ਸਮੱਗਰੀ ਦੀ ਥਾਂ ਲੈ ਲਵੇਗਾ। ਕੀ ਤੁਸੀਂ ਜਾਰੀ ਰੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ?",
@@ -193,33 +188,24 @@
     "invalidSceneUrl": "ਦਿੱਤੀ ਗਈ URL 'ਚੋਂ ਦ੍ਰਿਸ਼ ਨੂੰ ਆਯਾਤ ਨਹੀਂ ਕਰ ਸਕੇ। ਇਹ ਜਾਂ ਤਾਂ ਖਰਾਬ ਹੈ, ਜਾਂ ਇਸ ਵਿੱਚ ਜਾਇਜ਼ Excalidraw JSON ਡਾਟਾ ਸ਼ਾਮਲ ਨਹੀਂ ਹੈ।",
     "resetLibrary": "ਇਹ ਤੁਹਾਡੀ ਲਾਇਬ੍ਰੇਰੀ ਨੂੰ ਸਾਫ ਕਰ ਦੇਵੇਗਾ। ਕੀ ਤੁਸੀਂ ਪੱਕਾ ਇੰਝ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ?",
     "removeItemsFromsLibrary": "ਲਾਇਬ੍ਰੇਰੀ ਵਿੱਚੋਂ {{count}} ਚੀਜ਼(-ਜ਼ਾਂ) ਮਿਟਾਉਣੀਆਂ ਹਨ?",
-    "invalidEncryptionKey": "",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": "ਇਨਕਰਿਪਸ਼ਨ ਕੁੰਜੀ ‌‌22 ਅੱਖਰਾਂ ਦੀ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ। ਲਾਇਵ ਸਹਿਯੋਗ ਬੰਦ ਹੈ।",
+    "collabOfflineWarning": "ਕੋਈ ਇੰਟਰਨੈੱਟ ਕਨੈਕਸ਼ਨ ਨਹੀਂ ਹੈ\nਤੁਹਾਡੀਆਂ ਤਬਦੀਲੀਆਂ ਸਾਂਭੀਆਂ ਨਹੀਂ ਜਾਣਗੀਆਂ।"
   },
   "errors": {
-    "unsupportedFileType": "",
-    "imageInsertError": "",
-    "fileTooBig": "",
-    "svgImageInsertError": "",
+    "unsupportedFileType": "ਫਾਈਲ ਦੀ ਕਿਸਮ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ।",
+    "imageInsertError": "ਚਿੱਤਰ ਸ਼ਾਮਲ ਨਹੀਂ ਜਾ ਸਕਿਆ, ਬਾਅਦ ਵਿੱਚ ਦੁਬਾਰਾ ਕੋਸ਼ਿਸ਼ ਕਰੋ...",
+    "fileTooBig": "ਫਾਈਲ ਬਹੁਤ ਜ਼ਿਆਦਾ ਵੱਡੀ ਹੈ। ਵੱਧ-ਤੋਂ-ਵੱਧ ਪ੍ਰਵਾਨਤ ਅਕਾਰ {{maxSize}} ਹੈ।",
+    "svgImageInsertError": "SVG ਤਸਵੀਰ ਸ਼ਾਮਲ ਨਹੀਂ ਕਰ ਸਕੇ। SVG ਮਾਰਕ-ਅੱਪ ਨਜਾਇਜ਼ ਲੱਗ ਰਿਹਾ ਹੈ।",
     "invalidSVGString": "SVG ਨਜਾਇਜ਼ ਹੈ।",
     "cannotResolveCollabServer": "",
-    "importLibraryError": "",
+    "importLibraryError": "ਲਾਇਬ੍ਰੇਰੀ ਲੋਡ ਨਹੀਂ ਕੀਤੀ ਜਾ ਸਕੀ",
     "collabSaveFailed": "",
     "collabSaveFailed_sizeExceeded": "",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -234,10 +220,12 @@
     "text": "ਪਾਠ",
     "library": "ਲਾਇਬ੍ਰੇਰੀ",
     "lock": "ਡਰਾਇੰਗ ਤੋਂ ਬਾਅਦ ਵੀ ਚੁਣੇ ਹੋਏ ਸੰਦ ਨੂੰ ਸਰਗਰਮ ਰੱਖੋ ",
-    "penMode": "",
+    "penMode": "ਪੈੱਨ ਮੋਡ - ਟੱਚ ਤੋਂ ਬਚਾਉਂਦਾ ਹੈ",
     "link": "",
     "eraser": "ਰਬੜ",
-    "hand": ""
+    "frame": "",
+    "hand": "",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "ਕੈਨਵਸ ਦੀਆਂ ਕਾਰਵਾਈਆਂ",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "ਨੁਸਖਾ: ਸਭ ਤੋਂ ਦੂਰ ਸਥਿੱਤ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਥੋੜ੍ਹਾ ਜਿਹਾ ਨੇੜੇ ਲਿਆ ਕੇ ਦੇਖੋ।"
   },
   "errorSplash": {
-    "headingMain_pre": "ਗਲਤੀ ਹੋਈ। ਇਹ ਕਰਕੇ ਦੇਖੋ ",
-    "headingMain_button": "ਪੰਨਾ ਮੁੜ-ਲੋਡ ਕਰੋ।",
-    "clearCanvasMessage": "ਜੇ ਮੁੜ-ਲੋਡ ਕਰਨਾ ਕੰਮ ਨਾ ਕਰੇ, ਤਾਂ ਇਹ ਕਰਕੇ ਦੇਖੋ ",
-    "clearCanvasMessage_button": "ਕੈਨਵਸ ਸਾਫ ਕਰੋ।",
+    "headingMain": "ਕੋਈ ਸਮੱਸਿਆ ਖੜ੍ਹੀ ਹੋਈ। <button>ਪੰਨਾ ਮੁੜ-ਲੋਡ</button> ਕਰਕੇ ਦੇਖੋ।",
+    "clearCanvasMessage": "ਜੇ ਮੁੜ-ਲੋਡ ਕਰਨਾ ਕੰਮ ਨਾ ਕਰੇ, ਤਾਂ ਇਹ ਕਰਕੇ ਦੇਖੋ <button>ਕੈਨਵਸ ਸਾਫ ਕਰੋ।</button>",
     "clearCanvasCaveat": " ਇਹ ਸਾਰਾ ਕੰਮ ਗਵਾ ਦੇਵੇਗਾ ",
-    "trackedToSentry_pre": "ਗਲਤੀ ਸੂਚਕ ",
-    "trackedToSentry_post": " ਸਾਡੇ ਸਿਸਟਮ 'ਤੇ ਟਰੈਕ ਕੀਤਾ ਗਿਆ ਸੀ।",
-    "openIssueMessage_pre": "ਅਸੀਂ ਬੜੇ ਸਾਵਧਾਨ ਸੀ ਕਿ ਗਲਤੀ ਵਿੱਚ ਤੁਹਾਡੇ ਦ੍ਰਿਸ਼ ਦੀ ਜਾਣਕਾਰੀ ਸ਼ਾਮਲ ਨਾ ਕਰੀਏ। ਜੇ ਤੁਹਾਡਾ ਦ੍ਰਿਸ਼ ਨਿੱਜੀ ਨਹੀਂ ਹੈ ਤਾਂ ਇਸ 'ਤੇ ਸਾਡੇ ਨਾਲ ਸੰਪਰਕ ਕਰੋ ਜੀ ",
-    "openIssueMessage_button": "ਬੱਗ ਟਰੈਕਰ।",
-    "openIssueMessage_post": "ਹੇਠਾਂ ਦਿੱਤੀ ਜਾਣਕਾਰੀ ਨੂੰ ਕਾਪੀ ਕਰਕੇ ਗਿੱਟਹੱਬ ਮੁੱਦੇ ਵਿੱਚ ਪੇਸਟ ਕਰਕੇ ਸ਼ਾਮਲ ਕਰੋ ਜੀ।",
+    "trackedToSentry": "ਸੂਚਕ {{eventId}} ਵਾਲੀ ਸਮੱਸਿਆ ਸਾਡੇ ਸਿਸਟਮ 'ਤੇ ਟਰੈਕ ਕੀਤੀ ਗਈ ਸੀ।",
+    "openIssueMessage": "ਅਸੀਂ ਬੜੇ ਸਾਵਧਾਨ ਸੀ ਕਿ ਗਲਤੀ ਵਿੱਚ ਤੁਹਾਡੇ ਦ੍ਰਿਸ਼ ਦੀ ਜਾਣਕਾਰੀ ਸ਼ਾਮਲ ਨਾ ਕਰੀਏ। ਜੇ ਤੁਹਾਡਾ ਦ੍ਰਿਸ਼ ਨਿੱਜੀ ਨਹੀਂ ਹੈ ਤਾਂ ਇਸ 'ਤੇ ਸਾਡੇ ਨਾਲ ਸੰਪਰਕ ਕਰੋ ਜੀ <button>ਬੱਗ ਟਰੈਕਰ।</button>ਹੇਠਾਂ ਦਿੱਤੀ ਜਾਣਕਾਰੀ ਨੂੰ ਕਾਪੀ ਕਰਕੇ ਗਿੱਟਹੱਬ ਮੁੱਦੇ ਵਿੱਚ ਪੇਸਟ ਕਰਕੇ ਸ਼ਾਮਲ ਕਰੋ ਜੀ।",
     "sceneContent": "ਦ੍ਰਿਸ਼ ਦੀ ਸਮੱਗਰੀ:"
   },
   "roomDialog": {
@@ -289,7 +272,7 @@
     "desc_privacy": "ਫਿਕਰ ਨਾ ਕਰੋ, ਇਜਲਾਸ ਸਿਰੇ-ਤੋਂ-ਸਿਰੇ ਤੱਕ ਇਨਕਰਿਪਸ਼ਨ ਵਰਤਦਾ ਹੈ, ਸੋ ਜੋ ਕੁਝ ਵੀ ਤੁਸੀਂ ਵਾਹੁੰਦੇ ਹੋ ਉਹ ਨਿੱਜੀ ਹੀ ਰਹਿੰਦਾ ਹੈ। ਇੱਥੋਂ ਤੱਕ ਕਿ ਸਾਡੇ ਸਰਵਰ ਵੀ ਨਹੀਂ ਜਾਣ ਸਕਣਗੇ ਕਿ ਤੁਸੀਂ ਕੀ ਬਣਾਇਆ ਹੈ।",
     "button_startSession": "ਇਜਲਾਸ ਸ਼ੁਰੂ ਕਰੋ",
     "button_stopSession": "ਇਜਲਾਸ ਰੋਕੋ",
-    "desc_inProgressIntro": "ਲਾਇਵ ਸਹਿਯੋਗ ਹੁਣ ਚੱਲ ਰਿਹਾ ਹੈ।",
+    "desc_inProgressIntro": "ਲਾਇਵ ਸਹਿਯੋਗ ਇਜਲਾਸ ਹੁਣ ਚੱਲ ਰਿਹਾ ਹੈ।",
     "desc_shareLink": "ਇਸ ਲਿੰਕ ਨੂੰ ਉਹਨਾਂ ਨਾਲ ਸਾਂਝਾ ਕਰੋ ਜਿਹਨਾਂ ਨਾਲ ਤੁਸੀਂ ਸਹਿਯੋਗ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ:",
     "desc_exitSession": "ਇਜਲਾਸ ਨੂੰ ਰੋਕਣਾ ਤੁਹਾਡਾ ਕਮਰੇ ਨਾਲੋਂ ਨਾਤਾ ਤੋੜ ਦੇਵੇਗਾ, ਪਰ ਤੁਸੀਂ ਸਥਾਨਕ ਪੱਧਰ 'ਤੇ ਦ੍ਰਿਸ਼ ਨਾਲ ਕੰਮ ਕਰਨਾ ਜਾਰੀ ਰੱਖ ਸਕੋਗੇ। ਇਹ ਧਿਆਨ 'ਚ ਰੱਖੋ ਕਿ ਇਹ ਬਾਕੀ ਲੋਕਾਂ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਕਰੇਗਾ , ਅਤੇ ਉਹ ਹਾਲੇ ਵੀ ਆਪਣੇ ਸੰਸਕਰਨ 'ਤੇ ਸਹਿਯੋਗ ਕਰਨ ਦੇ ਕਾਬਲ ਹੋਣਗੇ।",
     "shareTitle": "Excalidraw 'ਤੇ ਲਾਈਵ ਇਜਲਾਸ ਦਾ ਹਿੱਸਾ ਬਣੋ"
@@ -302,7 +285,7 @@
     "disk_details": "ਦ੍ਰਿਸ਼ ਦਾ ਡਾਟਾ ਫਾਈਲ ਵਿੱਚ ਨਿਰਯਾਤ ਕਰੋ ਜਿੱਥੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਬਾਅਦ ਵਿੱਚ ਆਯਾਤ ਕਰ ਸਕਦੇ ਹੋ।",
     "disk_button": "ਫਾਈਲ ਵਿੱਚ ਸਾਂਭੋ",
     "link_title": "ਸਾਂਝੀ ਕਰਨ ਵਾਲੀ ਲਿੰਕ",
-    "link_details": "ਸਿਰਫ ਪੜ੍ਹੇ-ਜਾਣ ਵਾਲੀ ਲਿੰਕ ਨਿਰਯਾਤ ਕਰੋ।",
+    "link_details": "ਸਿਰਫ ਦੇਖੇ-ਜਾਣ ਵਾਲੀ ਲਿੰਕ ਵਜੋਂ ਨਿਰਯਾਤ ਕਰੋ।",
     "link_button": "ਲਿੰਕ ਵਿੱਚ ਨਿਰਯਾਤ ਕਰੋ",
     "excalidrawplus_description": "ਆਪਣੇ ਦ੍ਰਿਸ਼ ਦੇ ਡਾਟੇ ਨੂੰ Excalidraw+ ਵਰਕਸਪੇਸ ਵਿੱਚ ਸਾਂਭੋ।",
     "excalidrawplus_button": "ਨਿਰਯਾਤ ਕਰੋ",
@@ -361,34 +344,45 @@
       "required": "ਲੋੜੀਂਦਾ",
       "website": "ਜਾਇਜ਼ URL ਭਰੋ"
     },
-    "noteDescription": {
-      "pre": "",
-      "link": "ਜਨਤਕ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਰਿਪਾਜ਼ੀਟਰੀ",
-      "post": ""
-    },
-    "noteGuidelines": {
-      "pre": "",
-      "link": "ਦਿਸ਼ਾ ਨਿਰਦੇਸ਼",
-      "post": ""
-    },
-    "noteLicense": {
-      "pre": "",
-      "link": "MIT ਲਾਇਸੈਂਸ, ",
-      "post": ""
-    },
+    "noteDescription": "ਹੋਰ ਲੋਕਾਂ ਵੱਲੋਂ ਤੁਹਾਡੀ ਲਾਇਬ੍ਰੇਰੀ ਨੂੰ ਵਰਤਣ ਲਈ ਸਕਣ ਇਸ ਲਈ<link>ਜਨਤਕ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਰਿਪਾਜ਼ੀਟਰੀ</link> ਵਿੱਚ ਆਪਣੀ ਲਾਇਬ੍ਰੇਰੀ ਸ਼ਾਮਲ ਕਰਵਾਉਣ ਲਈ ਜਮ੍ਹਾ ਕਰਵਾਓ",
+    "noteGuidelines": "<link>ਦਿਸ਼ਾ ਨਿਰਦੇਸ਼</link>",
+    "noteLicense": "<link>MIT ਲਾਇਸੈਂਸ, </link>",
     "noteItems": "",
     "atleastOneLibItem": "",
     "republishWarning": ""
   },
   "publishSuccessDialog": {
-    "title": "",
-    "content": "",
-    "link": "ਇੱਥੇ"
+    "title": "ਲਾਇਬ੍ਰੇਰੀ ਜਮ੍ਹਾਂ ਕਰਵਾਈ",
+    "content": "ਧੰਨਵਾਦ {{authorName}} ਜੀਉ। ਤੁਹਾਡੀ ਲਾਇਬ੍ਰੇਰੀ ਨੂੰ ਸਮੀਖਿਆ ਲਈ ਭੇਜ ਦਿੱਤਾ ਗਿਆ ਹੈ। ਤੁਸੀਂ ਉਸਦੀ ਸਥਿਤੀ <link>ਇੱਥੇ</link> ਦੇਖ ਸਕਦੇ ਹੋ।"
   },
   "confirmDialog": {
     "resetLibrary": "ਲਾਇਬ੍ਰੇਰੀ ਰੀਸੈੱਟ ਕਰੋ",
     "removeItemsFromLib": "ਲਾਇਬ੍ਰੇਰੀ ਵਿੱਚੋਂ ਚੁਣੀਆਂ ਹੋਈਆਂ ਆਈਟਮਾਂ ਹਟਾਓ"
   },
+  "imageExportDialog": {
+    "header": "ਤਸਵੀਰ ਨਿਰਯਾਤ ਕਰੋ",
+    "label": {
+      "withBackground": "ਪਿਛੋਕੜ",
+      "onlySelected": "ਸਿਰਫ ਚੁਣੇ ਹੋਏ",
+      "darkMode": "ਡਾਰਕ ਮੋਡ",
+      "embedScene": "ਦ੍ਰਿਸ਼ ਮੜ੍ਹੋ",
+      "scale": "ਸਕੇਲ",
+      "padding": "ਪੈਡਿੰਗ"
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "PNG ਵਿੱਚ ਨਿਰਯਾਤ ਕਰੋ",
+      "exportToSvg": "SVG ਵਿੱਚ ਨਿਰਯਾਤ ਕਰੋ",
+      "copyPngToClipboard": "PNG ਨੂੰ ਕਲਿੱਪੋਬਰਡ ‘ਤੇ ਕਾਪੀ ਕਰੋ"
+    },
+    "button": {
+      "exportToPng": "PNG",
+      "exportToSvg": "SVG",
+      "copyPngToClipboard": "ਗੱਤੇ 'ਤੇ ਕਾਪੀ ਕਰੋ"
+    }
+  },
   "encrypted": {
     "tooltip": "ਤੁਹਾਡੀ ਡਰਾਇੰਗਾਂ ਸਿਰੇ-ਤੋਂ-ਸਿਰੇ ਤੱਕ ਇਨਕਰਿਪਟ ਕੀਤੀਆਂ ਹੋਈਆਂ ਹਨ, ਇਸ ਲਈ Excalidraw ਦੇ ਸਰਵਰ ਉਹਨਾਂ ਨੂੰ ਕਦੇ ਵੀ ਨਹੀਂ ਦੇਖਣਗੇ।",
     "link": "Excalidraw ਵਿੱਚ ਸਿਰੇ-ਤੋਂ-ਸਿਰੇ ਤੱਕ ਇਨਕ੍ਰਿਪਸ਼ਨ 'ਤੇ ਬਲੌਗ ਸੰਪਾਦਨਾ"
@@ -420,63 +414,40 @@
     "pasteAsSingleElement": ""
   },
   "colors": {
-    "ffffff": "ਚਿੱਟਾ",
-    "f8f9fa": "ਸੁਰਮਈ 0",
-    "f1f3f5": "ਸੁਰਮਈ 1",
-    "fff5f5": "ਲਾਲ 0",
-    "fff0f6": "ਗੁਲਾਬੀ 0",
-    "f8f0fc": "ਅੰਗੂਰੀ 0",
-    "f3f0ff": "ਜਾਮਣੀ 0",
-    "edf2ff": "ਗੂੜ੍ਹਾ ਨੀਲਾ 0",
-    "e7f5ff": "ਨੀਲਾ 0",
-    "e3fafc": "ਫਿਰੋਜੀ 0",
-    "e6fcf5": "ਟੀਲ 0",
-    "ebfbee": "ਹਰਾ 0",
-    "f4fce3": "ਲਾਇਮ 0",
-    "fff9db": "ਪੀਲਾ 0",
-    "fff4e6": "ਸੰਤਰੀ 0",
     "transparent": "ਪਾਰਦਰਸ਼ੀ",
-    "ced4da": "ਸੁਰਮਈ 4",
-    "868e96": "ਸੁਰਮਈ 6",
-    "fa5252": "ਲਾਲ 6",
-    "e64980": "ਗੁਲਾਬੀ 6",
-    "be4bdb": "ਅੰਗੂਰੀ 6",
-    "7950f2": "ਜਾਮਣੀ 6",
-    "4c6ef5": "ਗੂੜ੍ਹਾ ਨੀਲਾ 6",
-    "228be6": "ਨੀਲਾ 6",
-    "15aabf": "ਫਿਰੋਜੀ 6",
-    "12b886": "ਟੀਲ 6",
-    "40c057": "ਹਰਾ 6",
-    "82c91e": "ਲਾਇਮ 6",
-    "fab005": "ਪੀਲਾ 6",
-    "fd7e14": "ਸੰਤਰੀ 6",
-    "000000": "ਕਾਲਾ",
-    "343a40": "ਸੁਰਮਈ 8",
-    "495057": "ਸੁਰਮਈ 7",
-    "c92a2a": "ਲਾਲ 9",
-    "a61e4d": "ਗੁਲਾਬੀ 9",
-    "862e9c": "ਅੰਗੂਰੀ 9",
-    "5f3dc4": "ਜਾਮਣੀ 9",
-    "364fc7": "ਗੂੜ੍ਹਾ ਨੀਲਾ 9",
-    "1864ab": "ਨੀਲਾ 9",
-    "0b7285": "ਫਿਰੋਜੀ 9",
-    "087f5b": "ਟੀਲ 9",
-    "2b8a3e": "ਹਰਾ 9",
-    "5c940d": "ਲਾਇਮ 9",
-    "e67700": "ਪੀਲਾ 9",
-    "d9480f": "ਸੰਤਰੀ 9"
+    "black": "ਕਾਲੀ",
+    "white": "ਸਫ਼ੈਦ",
+    "red": "ਲਾਲ",
+    "pink": "ਗੁਲਾਬੀ",
+    "grape": "ਅੰਗੂਰੀ",
+    "violet": "ਜਾਮਣੀ",
+    "gray": "ਸੁਰਮਈ",
+    "blue": "ਨੀਲਾ",
+    "cyan": "ਫਿਰੋਜੀ",
+    "teal": "ਟੀਲ",
+    "green": "ਹਰਾ",
+    "yellow": "ਪੀਲਾ",
+    "orange": "ਸੰਤਰੀ",
+    "bronze": "ਕਾਂਸੇਰੰਗਾ"
   },
   "welcomeScreen": {
     "app": {
-      "center_heading": "",
+      "center_heading": "ਤੁਹਾਡਾ ਸਾਰਾ ਡਾਟਾ ਤੁਹਾਡੇ ਲੋਕਲ ਬਰਾਉਜ਼ਰ ਵਿੱਚ ਸਾਂਭਿਆ ਹੋਇਆ ਹੈ।",
       "center_heading_plus": "",
-      "menuHint": ""
+      "menuHint": "ਨਿਰਯਾਤ, ਤਰਜੀਹਾਂ, ਭਾਸ਼ਾਵਾਂ, …"
     },
     "defaults": {
-      "menuHint": "",
-      "center_heading": "",
+      "menuHint": "ਨਿਰਯਾਤ, ਤਰਜੀਹਾਂ, ਅਤੇ ਹੋਰ ਵੀ ਬਹੁਤ ਕੁਝ…",
+      "center_heading": "ਡਾਇਆਗ੍ਰਾਮਾਂ। ਕੀਤੀਆਂ। ਸੁਖਾਲੀਆਂ।",
       "toolbarHint": "",
-      "helpHint": ""
+      "helpHint": "ਸ਼ਾਰਟਕੱਟ ਤੇ ਮਦਦ"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "ਸਭ ਤੋਂ ਵੱਧ ਵਰਤੇ ਜਾਣ ਵਾਲੇ ਕਸਟਮ ਰੰਗ",
+    "colors": "ਰੰਗ",
+    "shades": "ਸ਼ੇਡਾਂ",
+    "hexCode": "ਹੈਕਸ ਕੋਡ",
+    "noShades": "ਇਸ ਰੰਗ ਦੀ ਕੋਈ ਸ਼ੇਡ ਉਪਲਬਧ ਨਹੀਂ ਹੈ"
   }
 }
diff --git a/src/locales/percentages.json b/src/locales/percentages.json
index b28b6c259..b6b13a863 100644
--- a/src/locales/percentages.json
+++ b/src/locales/percentages.json
@@ -1,53 +1,56 @@
 {
-  "ar-SA": 89,
-  "bg-BG": 52,
-  "bn-BD": 57,
-  "ca-ES": 96,
-  "cs-CZ": 72,
-  "da-DK": 31,
+  "ar-SA": 79,
+  "az-AZ": 20,
+  "bg-BG": 54,
+  "bn-BD": 59,
+  "ca-ES": 87,
+  "cs-CZ": 98,
+  "da-DK": 33,
   "de-DE": 100,
-  "el-GR": 98,
+  "el-GR": 92,
   "en": 100,
-  "es-ES": 99,
-  "eu-ES": 99,
-  "fa-IR": 91,
-  "fi-FI": 96,
-  "fr-FR": 99,
-  "gl-ES": 99,
-  "he-IL": 99,
-  "hi-IN": 73,
-  "hu-HU": 85,
-  "id-ID": 98,
-  "it-IT": 99,
-  "ja-JP": 97,
-  "kab-KAB": 93,
-  "kk-KZ": 19,
-  "ko-KR": 99,
-  "ku-TR": 91,
-  "lt-LT": 61,
-  "lv-LV": 93,
-  "mr-IN": 100,
+  "es-ES": 88,
+  "eu-ES": 100,
+  "fa-IR": 88,
+  "fi-FI": 87,
+  "fr-FR": 88,
+  "gl-ES": 88,
+  "he-IL": 86,
+  "hi-IN": 77,
+  "hu-HU": 76,
+  "id-ID": 94,
+  "it-IT": 98,
+  "ja-JP": 88,
+  "kaa": 18,
+  "kab-KAB": 87,
+  "kk-KZ": 21,
+  "km-KH": 94,
+  "ko-KR": 100,
+  "ku-TR": 100,
+  "lt-LT": 55,
+  "lv-LV": 88,
+  "mr-IN": 95,
   "my-MM": 40,
   "nb-NO": 100,
-  "nl-NL": 92,
-  "nn-NO": 86,
-  "oc-FR": 94,
-  "pa-IN": 79,
-  "pl-PL": 87,
-  "pt-BR": 96,
-  "pt-PT": 99,
-  "ro-RO": 100,
-  "ru-RU": 96,
-  "si-LK": 8,
-  "sk-SK": 99,
+  "nl-NL": 83,
+  "nn-NO": 76,
+  "oc-FR": 86,
+  "pa-IN": 89,
+  "pl-PL": 98,
+  "pt-BR": 98,
+  "pt-PT": 94,
+  "ro-RO": 98,
+  "ru-RU": 98,
+  "si-LK": 9,
+  "sk-SK": 98,
   "sl-SI": 100,
-  "sv-SE": 99,
-  "ta-IN": 90,
-  "th-TH": 39,
-  "tr-TR": 98,
-  "uk-UA": 93,
-  "vi-VN": 52,
-  "zh-CN": 99,
+  "sv-SE": 100,
+  "ta-IN": 84,
+  "th-TH": 38,
+  "tr-TR": 86,
+  "uk-UA": 96,
+  "vi-VN": 56,
+  "zh-CN": 100,
   "zh-HK": 25,
   "zh-TW": 100
 }
diff --git a/src/locales/pl-PL.json b/src/locales/pl-PL.json
index 1abaa038f..8cdd54736 100644
--- a/src/locales/pl-PL.json
+++ b/src/locales/pl-PL.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Trójkąt",
     "fontSize": "Rozmiar tekstu",
     "fontFamily": "Krój pisma",
-    "onlySelected": "Tylko wybrane",
-    "withBackground": "Kolor wypełnienia",
-    "exportEmbedScene": "Osadź scenę",
-    "exportEmbedScene_details": "Dane sceny zostaną zapisane w eksportowanym pliku PNG/SVG tak, aby scena mogła zostać z niego przywrócona.\nZwiększy to rozmiar eksportowanego pliku.",
     "addWatermark": "Dodaj \"Zrobione w Excalidraw\"",
     "handDrawn": "Odręczny",
     "normal": "Normalny",
@@ -54,6 +50,7 @@
     "veryLarge": "Bardzo duży",
     "solid": "Pełne",
     "hachure": "Linie",
+    "zigzag": "Zygzak",
     "crossHatch": "Zakreślone",
     "thin": "Cienkie",
     "bold": "Pogrubione",
@@ -66,7 +63,7 @@
     "cartoonist": "Rysunkowy",
     "fileTitle": "Nazwa pliku",
     "colorPicker": "Paleta kolorów",
-    "canvasColors": "",
+    "canvasColors": "Używane na płótnie",
     "canvasBackground": "Kolor dokumentu",
     "drawingCanvas": "Obszar roboczy",
     "layers": "Warstwy",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Odwróć w poziomie",
     "flipVertical": "Odwróć w pionie",
     "viewMode": "Tryb widoku",
-    "toggleExportColorScheme": "Przełącz schemat kolorów przy eksporcie",
     "share": "Udostępnij",
     "showStroke": "Pokaż próbnik kolorów obrysu",
     "showBackground": "Pokaż próbnik koloru tła",
@@ -108,17 +104,17 @@
     "excalidrawLib": "Biblioteka Excalidraw",
     "decreaseFontSize": "Zmniejsz rozmiar czcionki",
     "increaseFontSize": "Zwiększ rozmiar czcionki",
-    "unbindText": "",
-    "bindText": "",
-    "createContainerFromText": "",
+    "unbindText": "Rozłącz tekst",
+    "bindText": "Połącz tekst z kontenerem",
+    "createContainerFromText": "Zawijaj tekst w kontenerze",
     "link": {
       "edit": "Edytuj łącze",
       "create": "Utwórz łącze",
       "label": "Łącze"
     },
     "lineEditor": {
-      "edit": "",
-      "exit": ""
+      "edit": "Edytuj linię",
+      "exit": "Wyjdź z edytora linii"
     },
     "elementLock": {
       "lock": "Zablokuj",
@@ -127,11 +123,14 @@
       "unlockAll": "Odblokuj wszystko"
     },
     "statusPublished": "Opublikowano",
-    "sidebarLock": "Panel boczny zawsze otwarty"
+    "sidebarLock": "Panel boczny zawsze otwarty",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": "Wybierz kolor z płótna"
   },
   "library": {
     "noItems": "Nie dodano jeszcze żadnych elementów...",
-    "hint_emptyLibrary": "",
+    "hint_emptyLibrary": "Wybierz element na płótnie, aby go tutaj dodać, lub zainstaluj bibliotekę z poniższego publicznego repozytorium.",
     "hint_emptyPrivateLibrary": "Wybierz element, aby dodać go tutaj."
   },
   "buttons": {
@@ -139,11 +138,7 @@
     "exportJSON": "Eksportuj do pliku",
     "exportImage": "Eksportuj obraz...",
     "export": "Zapisz jako...",
-    "exportToPng": "Zapisz jako PNG",
-    "exportToSvg": "Zapisz jako SVG",
     "copyToClipboard": "Skopiuj do schowka",
-    "copyPngToClipboard": "Skopiuj do schowka jako plik PNG",
-    "scale": "Skala",
     "save": "Zapisz do bieżącego pliku",
     "saveAs": "Zapisz jako",
     "load": "Otwórz",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Nie udało się zapisać w bazie danych. Jeśli problemy nie ustąpią, zapisz plik lokalnie, aby nie utracić swojej pracy.",
     "collabSaveFailed_sizeExceeded": "Nie udało się zapisać w bazie danych — dokument jest za duży. Zapisz plik lokalnie, aby nie utracić swojej pracy.",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "problem",
-      "write": "na naszym GitHubie lub napisz do nas na",
-      "discord": "Discord"
+      "line1": "Wygląda na to, że używasz przeglądarki Brave z włączonym ustawieniem <bold>Agressively Block Fingerprinting</bold>.",
+      "line2": "Może to doprowadzić do złamania <bold>elementów tekstu</bold> na rysunkach.",
+      "line3": "Zdecydowanie zalecamy wyłączenie tego ustawienia. Możesz wykonać <link>te kroki</link>, aby to zrobić.",
+      "line4": "Jeśli wyłączenie tego ustawienia nie naprawia wyświetlania elementów tekstowych, zgłoś <issueLink>problem</issueLink> na naszym GitHubie lub napisz do nas na <discordLink>Discordzie</discordLink>"
     }
   },
   "toolBar": {
@@ -234,10 +220,12 @@
     "text": "Tekst",
     "library": "Biblioteka",
     "lock": "Zablokuj wybrane narzędzie",
-    "penMode": "",
-    "link": "",
+    "penMode": "Tryb pióra — zapobiegaj dotknięciom",
+    "link": "Dodaj/aktualizuj link dla wybranego kształtu",
     "eraser": "Gumka",
-    "hand": ""
+    "frame": "",
+    "hand": "Ręka (narzędzie do przesuwania)",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Narzędzia",
@@ -245,7 +233,7 @@
     "shapes": "Kształty"
   },
   "hints": {
-    "canvasPanning": "",
+    "canvasPanning": "Aby przesunąć płótno, przytrzymaj kółko myszy lub spację podczas przeciągania, albo użyj narzędzia ręki",
     "linearElement": "Naciśnij, aby zrobić punkt, przeciągnij, aby narysować linię",
     "freeDraw": "Naciśnij i przeciągnij by rysować, puść kiedy skończysz",
     "text": "Wskazówka: możesz również dodać tekst klikając dwukrotnie gdziekolwiek za pomocą narzędzia zaznaczania",
@@ -256,15 +244,15 @@
     "resize": "Możesz zachować proporcję trzymająć wcisnięty SHIFT, przytrzymaj ALT by zmienić rozmiar względem środka",
     "resizeImage": "Możesz zmienić rozmiar swobodnie trzymając SHIFT,\nprzytrzymaj ALT, aby przeskalować względem środka obiektu",
     "rotate": "Możesz obracać element w równych odstępach trzymając wciśnięty SHIFT",
-    "lineEditor_info": "",
-    "lineEditor_pointSelected": "",
-    "lineEditor_nothingSelected": "",
+    "lineEditor_info": "Przytrzymaj CtrlOrCmd i kliknij dwukrotnie lub naciśnij CtrlOrCmd + Enter, aby edytować punkty",
+    "lineEditor_pointSelected": "Naciśnij przycisk Delete, aby usunąć punkt. Ctrl/Cmd+D, aby go zduplikować. Przeciągnij, aby go przenieść",
+    "lineEditor_nothingSelected": "Wybierz punkt do edycji (przytrzymaj SHIFT, aby wybrać wiele),\nlub przytrzymaj Alt i kliknij, aby dodać nowe punkty",
     "placeImage": "Kliknij, aby umieścić obraz, lub kliknij i przeciągnij, aby ustawić jego rozmiar ręcznie",
     "publishLibrary": "Opublikuj własną bibliotekę",
-    "bindTextToElement": "",
-    "deepBoxSelect": "",
-    "eraserRevert": "",
-    "firefox_clipboard_write": ""
+    "bindTextToElement": "Wciśnij enter, aby dodać tekst",
+    "deepBoxSelect": "Przytrzymaj CtrlOrCmd, aby wybrać w obrębie grupy i uniknąć przeciągania",
+    "eraserRevert": "Przytrzymaj Alt, aby przywrócić elementy oznaczone do usunięcia",
+    "firefox_clipboard_write": "Ta funkcja może być włączona poprzez ustawienie flagi \"dom.events.asyncClipboard.clipboardItem\" na \"true\". Aby zmienić flagi przeglądarki w Firefox, odwiedź stronę \"about:config\"."
   },
   "canvasError": {
     "cannotShowPreview": "Nie można wyświetlić podglądu",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Wskazówka: spróbuj nieco zbliżyć najdalej wysunięte elementy."
   },
   "errorSplash": {
-    "headingMain_pre": "Wystąpił błąd. Spróbuj ",
-    "headingMain_button": "odświeżyć stronę.",
-    "clearCanvasMessage": "Jeśli odświeżenie strony nie zadziałało, spróbuj ",
-    "clearCanvasMessage_button": "usunąć wszystko z dokumentu.",
+    "headingMain": "Wystąpił błąd. Spróbuj <button>odświeżyć stronę.</button>",
+    "clearCanvasMessage": "Jeśli odświeżenie strony nie zadziałało, spróbuj <button>usunąć wszystko z dokumentu.</button>",
     "clearCanvasCaveat": " Pamiętaj tylko, że spowoduje to utratę całej twojej pracy ",
-    "trackedToSentry_pre": "Błąd o identyfikatorze ",
-    "trackedToSentry_post": " został zaraportowany w naszym systemie.",
-    "openIssueMessage_pre": "Szanujemy twoją prywatność i raport nie zawierał żadnych danych dotyczących tego nad czym pracowałeś, natomiast jeżeli jesteś w stanie podzielić się tym nad czym pracowałeś, prosimy o dodatkowy raport poprzez ",
-    "openIssueMessage_button": "nasze narzędzie do raportowania błędów.",
-    "openIssueMessage_post": " Prosimy o dołączenie poniższej informacji poprzez skopiowanie jej i umieszczenie jej w zgłoszeniu na portalu GitHub.",
+    "trackedToSentry": "Błąd o identyfikatorze {{eventId}} został zaraportowany w naszym systemie.",
+    "openIssueMessage": "Szanujemy twoją prywatność i raport nie zawierał żadnych danych dotyczących tego nad czym pracowałeś, natomiast jeżeli jesteś w stanie podzielić się tym nad czym pracowałeś, prosimy o dodatkowy raport poprzez <button>nasze narzędzie do raportowania błędów.</button> Prosimy o dołączenie poniższej informacji poprzez skopiowanie jej i umieszczenie jej w zgłoszeniu na portalu GitHub.",
     "sceneContent": "Zawartość dokumentu:"
   },
   "roomDialog": {
@@ -306,21 +289,21 @@
     "link_button": "Wygeneruj link",
     "excalidrawplus_description": "Zapisz scenę do swojego obszaru roboczego Excalidraw+.",
     "excalidrawplus_button": "Eksportuj",
-    "excalidrawplus_exportError": ""
+    "excalidrawplus_exportError": "W tej chwili nie można wyeksportować do Excalidraw+..."
   },
   "helpDialog": {
     "blog": "Przeczytaj na naszym blogu",
     "click": "kliknięcie",
-    "deepSelect": "",
-    "deepBoxSelect": "",
+    "deepSelect": "Wybór w obrębie grupy",
+    "deepBoxSelect": "Wybór w obrębie grupy i unikanie przeciągania",
     "curvedArrow": "Zakrzywiona strzałka",
     "curvedLine": "Zakrzywiona linia",
     "documentation": "Dokumentacja",
     "doubleClick": "podwójne kliknięcie",
     "drag": "przeciągnij",
     "editor": "Edytor",
-    "editLineArrowPoints": "",
-    "editText": "",
+    "editLineArrowPoints": "Edytuj punkty linii/strzałki",
+    "editText": "Edytuj tekst/dodaj etykietę",
     "github": "Znalazłeś problem? Prześlij",
     "howto": "Skorzystaj z instrukcji",
     "or": "lub",
@@ -333,9 +316,9 @@
     "view": "Widok",
     "zoomToFit": "Powiększ, aby wyświetlić wszystkie elementy",
     "zoomToSelection": "Przybliż do zaznaczenia",
-    "toggleElementLock": "",
+    "toggleElementLock": "Zablokuj/odblokuj zaznaczenie",
     "movePageUpDown": "Przesuń stronę w górę/w dół",
-    "movePageLeftRight": ""
+    "movePageLeftRight": "Przenieś stronę w lewo/prawo"
   },
   "clearCanvasDialog": {
     "title": "Wyczyść płótno"
@@ -353,7 +336,7 @@
       "authorName": "Twoje imię lub nazwa użytkownika",
       "libraryName": "Nazwa twojej biblioteki",
       "libraryDesc": "Opis twojej biblioteki, aby pomóc innym zrozumieć jej działanie",
-      "githubHandle": "",
+      "githubHandle": "Uchwyt GitHub (opcjonalny), dzięki czemu możesz edytować bibliotekę po przesłaniu do sprawdzenia",
       "twitterHandle": "Nazwa użytkownika w serwisie Twitter (opcjonalna), aby wiedzieć kogo oznaczyć przy promowaniu na Twitterze",
       "website": "Link do Twojej osobistej strony internetowej lub gdzie indziej (opcjonalnie)"
     },
@@ -361,37 +344,48 @@
       "required": "Wymagane",
       "website": "Wprowadź prawidłowy adres URL"
     },
-    "noteDescription": {
-      "pre": "",
-      "link": "",
-      "post": "dla innych osób do wykorzystania w swoich rysunkach."
-    },
-    "noteGuidelines": {
-      "pre": "Biblioteka musi być najpierw zatwierdzona ręcznie. Przeczytaj ",
-      "link": "wytyczne",
-      "post": ""
-    },
-    "noteLicense": {
-      "pre": "Wysyłając zgadzasz się, że biblioteka zostanie opublikowana pod ",
-      "link": "Licencja MIT, ",
-      "post": "w skrócie, każdy może z nich korzystać bez ograniczeń."
-    },
-    "noteItems": "",
+    "noteDescription": "<link></link>dla innych osób do wykorzystania w swoich rysunkach.",
+    "noteGuidelines": "Biblioteka musi być najpierw zatwierdzona ręcznie. Przeczytaj <link>wytyczne</link>",
+    "noteLicense": "Wysyłając zgadzasz się, że biblioteka zostanie opublikowana pod <link>Licencja MIT, </link>w skrócie, każdy może z nich korzystać bez ograniczeń.",
+    "noteItems": "Każdy element biblioteki musi mieć własną nazwę, aby był filtrowalny. Uwzględnione zostaną następujące elementy biblioteki:",
     "atleastOneLibItem": "Proszę wybrać co najmniej jeden element biblioteki, by rozpocząć",
-    "republishWarning": ""
+    "republishWarning": "Uwaga: niektóre z wybranych elementów są oznaczone jako już opublikowane/wysłane. Powinieneś ponownie przesłać elementy tylko wtedy, gdy aktualizujesz istniejącą bibliotekę lub zgłoszenie."
   },
   "publishSuccessDialog": {
     "title": "Biblioteka została przesłana",
-    "content": "Dziękujemy {{authorName}}. Twoja biblioteka została przesłana do sprawdzenia. Możesz śledzić jej stan",
-    "link": "tutaj"
+    "content": "Dziękujemy {{authorName}}. Twoja biblioteka została przesłana do sprawdzenia. Możesz śledzić jej stan<link>tutaj</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Zresetuj Bibliotekę",
     "removeItemsFromLib": "Usuń wybrane elementy z biblioteki"
   },
+  "imageExportDialog": {
+    "header": "Eksportuj obraz",
+    "label": {
+      "withBackground": "Tło",
+      "onlySelected": "Tylko wybrane",
+      "darkMode": "Tryb ciemny",
+      "embedScene": "Osadź scenę",
+      "scale": "Skala",
+      "padding": "Dopełnienie"
+    },
+    "tooltip": {
+      "embedScene": "Dane sceny zostaną zapisane w eksportowanym pliku PNG/SVG tak, aby scena mogła zostać z niego przywrócona.\nZwiększy to rozmiar eksportowanego pliku."
+    },
+    "title": {
+      "exportToPng": "Zapisz jako PNG",
+      "exportToSvg": "Zapisz jako SVG",
+      "copyPngToClipboard": "Skopiuj do schowka jako PNG"
+    },
+    "button": {
+      "exportToPng": "PNG",
+      "exportToSvg": "SVG",
+      "copyPngToClipboard": "Skopiuj do schowka"
+    }
+  },
   "encrypted": {
     "tooltip": "Twoje rysunki są zabezpieczone szyfrowaniem end-to-end, tak więc nawet w Excalidraw nie jesteśmy w stanie zobaczyć tego co tworzysz.",
-    "link": ""
+    "link": "Wpis na blogu dotyczący szyfrowania end-to-end w Excalidraw"
   },
   "stats": {
     "angle": "Kąt",
@@ -417,66 +411,43 @@
     "fileSavedToFilename": "Zapisano jako {filename}",
     "canvas": "płótno",
     "selection": "zaznaczenie",
-    "pasteAsSingleElement": ""
+    "pasteAsSingleElement": "Użyj {{shortcut}}, aby wkleić jako pojedynczy element,\nlub wklej do istniejącego edytora tekstu"
   },
   "colors": {
-    "ffffff": "Biały",
-    "f8f9fa": "Szary 0",
-    "f1f3f5": "Szary 1",
-    "fff5f5": "Czerwony 0",
-    "fff0f6": "Różowy 0",
-    "f8f0fc": "Bordowy 0",
-    "f3f0ff": "Fioletowy 0",
-    "edf2ff": "Granatowy 0",
-    "e7f5ff": "Niebieski 0",
-    "e3fafc": "Błękitny 0",
-    "e6fcf5": "Turkusowy 0",
-    "ebfbee": "Zielony 0",
-    "f4fce3": "Limonkowy 0",
-    "fff9db": "Żółty 0",
-    "fff4e6": "Pomarańczowy 0",
     "transparent": "Przezroczysty",
-    "ced4da": "Szary 4",
-    "868e96": "Szary 6",
-    "fa5252": "Czerwony 6",
-    "e64980": "Różowy 6",
-    "be4bdb": "Bordowy 6",
-    "7950f2": "Fioletowy 6",
-    "4c6ef5": "Granatowy 6",
-    "228be6": "Niebieski 6",
-    "15aabf": "Błękitny 6",
-    "12b886": "Turkusowy 6",
-    "40c057": "Zielony 6",
-    "82c91e": "Limonkowy 6",
-    "fab005": "Żółty 6",
-    "fd7e14": "Pomarańczowy 6",
-    "000000": "Czarny",
-    "343a40": "Szary 8",
-    "495057": "Szary 7",
-    "c92a2a": "Czerwony 9",
-    "a61e4d": "Różowy 9",
-    "862e9c": "Bordowy 9",
-    "5f3dc4": "Fioletowy 9",
-    "364fc7": "Granatowy 9",
-    "1864ab": "Niebieski 9",
-    "0b7285": "Błękitny 9",
-    "087f5b": "Turkusowy 9",
-    "2b8a3e": "Zielony 9",
-    "5c940d": "Limonkowy 9",
-    "e67700": "Żółty 9",
-    "d9480f": "Pomarańczowy 9"
+    "black": "Czarny",
+    "white": "Biały",
+    "red": "Czerwony",
+    "pink": "Różowy",
+    "grape": "Winogronowy",
+    "violet": "Fioletowy",
+    "gray": "Szary",
+    "blue": "Niebieski",
+    "cyan": "Cyjanowy",
+    "teal": "Turkusowy",
+    "green": "Zielony",
+    "yellow": "Żółty",
+    "orange": "Pomarańczowy",
+    "bronze": "Brązowy"
   },
   "welcomeScreen": {
     "app": {
-      "center_heading": "",
-      "center_heading_plus": "",
-      "menuHint": ""
+      "center_heading": "Wszystkie dane są zapisywane lokalnie w przeglądarce.",
+      "center_heading_plus": "Czy zamiast tego chcesz przejść do Excalidraw+?",
+      "menuHint": "Eksportuj, preferencje, języki..."
     },
     "defaults": {
-      "menuHint": "",
-      "center_heading": "",
-      "toolbarHint": "",
-      "helpHint": ""
+      "menuHint": "Eksportuj, preferencje i więcej...",
+      "center_heading": "Schematy uproszczone.",
+      "toolbarHint": "Wybierz narzędzie i zacznij rysować!",
+      "helpHint": "Skróty klawiaturowe i pomoc"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "Najczęściej używane kolory",
+    "colors": "Kolory",
+    "shades": "Odcienie",
+    "hexCode": "Kod HEX",
+    "noShades": "Brak dostępnych odcieni dla tego koloru"
   }
 }
diff --git a/src/locales/pt-BR.json b/src/locales/pt-BR.json
index d790c5db5..55fdb5396 100644
--- a/src/locales/pt-BR.json
+++ b/src/locales/pt-BR.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Triângulo",
     "fontSize": "Tamanho da fonte",
     "fontFamily": "Família da fonte",
-    "onlySelected": "Somente a seleção",
-    "withBackground": "Fundo",
-    "exportEmbedScene": "Incorporar cena",
-    "exportEmbedScene_details": "Os dados da cena serão salvos no arquivo PNG/SVG exportado para que a cena possa ser restaurada.\nIrá aumentar o tamanho do arquivo exportado.",
     "addWatermark": "Adicionar \"Feito com Excalidraw\"",
     "handDrawn": "Manuscrito",
     "normal": "Normal",
@@ -54,6 +50,7 @@
     "veryLarge": "Muito grande",
     "solid": "Sólido",
     "hachure": "Hachura",
+    "zigzag": "Zigue-zague",
     "crossHatch": "Hachura cruzada",
     "thin": "Fino",
     "bold": "Espesso",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Inverter horizontalmente",
     "flipVertical": "Inverter verticalmente",
     "viewMode": "Modo de visualização",
-    "toggleExportColorScheme": "Alternar esquema de cores de exportação",
     "share": "Compartilhar",
     "showStroke": "Exibir seletor de cores do traço",
     "showBackground": "Exibir seletor de cores do fundo",
@@ -110,7 +106,7 @@
     "increaseFontSize": "Aumentar o tamanho da fonte",
     "unbindText": "Desvincular texto",
     "bindText": "Vincular texto ao contêiner",
-    "createContainerFromText": "",
+    "createContainerFromText": "Envolver texto em um contêiner",
     "link": {
       "edit": "Editar link",
       "create": "Criar link",
@@ -127,7 +123,10 @@
       "unlockAll": "Desbloquear tudo"
     },
     "statusPublished": "Publicado",
-    "sidebarLock": "Manter barra lateral aberta"
+    "sidebarLock": "Manter barra lateral aberta",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "Nenhum item adicionado ainda...",
@@ -139,11 +138,7 @@
     "exportJSON": "Exportar arquivo",
     "exportImage": "Exportar imagem...",
     "export": "Salvar como...",
-    "exportToPng": "Exportar em PNG",
-    "exportToSvg": "Exportar em SVG",
     "copyToClipboard": "Copiar para o clipboard",
-    "copyPngToClipboard": "Copiar PNG para área de transferência",
-    "scale": "Escala",
     "save": "Salvar para o arquivo atual",
     "saveAs": "Salvar como",
     "load": "Abrir",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Não foi possível salvar no banco de dados do servidor. Se os problemas persistirem, salve o arquivo localmente para garantir que não perca o seu trabalho.",
     "collabSaveFailed_sizeExceeded": "Não foi possível salvar no banco de dados do servidor, a tela parece ser muito grande. Se os problemas persistirem, salve o arquivo localmente para garantir que não perca o seu trabalho.",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "Parece que você está usando o navegador Brave com a configuração <bold>Bloquear Impressões Digitais</bold> no modo agressivo.",
+      "line2": "Isso pode acabar quebrando <bold>Elementos de Texto</bold> em seus desenhos.",
+      "line3": "Recomendamos fortemente desativar essa configuração. Você pode acessar o <link>passo a passo</link> sobre como fazer isso.",
+      "line4": "Se desativar essa configuração não corrigir a exibição de elementos de texto, por favor abra uma <issueLink>issue</issueLink> em nosso GitHub, ou mande uma mensagem em nosso <discordLink>Discord</discordLink>"
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Modo caneta — impede o toque",
     "link": "Adicionar/Atualizar link para uma forma selecionada",
     "eraser": "Borracha",
-    "hand": "Mão (ferramenta de rolagem)"
+    "frame": "",
+    "hand": "Mão (ferramenta de rolagem)",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Ações da tela",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Dica: tente aproximar um pouco os elementos mais distantes."
   },
   "errorSplash": {
-    "headingMain_pre": "Foi encontrado um erro. Tente ",
-    "headingMain_button": "recarregar a página.",
-    "clearCanvasMessage": "Se recarregar a página não funcionar, tente ",
-    "clearCanvasMessage_button": "limpando a tela.",
+    "headingMain": "Foi encontrado um erro. Tente <button>recarregar a página.</button>",
+    "clearCanvasMessage": "Se recarregar a página não funcionar, tente <button>limpando a tela.</button>",
     "clearCanvasCaveat": " Isso resultará em perda de trabalho ",
-    "trackedToSentry_pre": "O erro com o identificador ",
-    "trackedToSentry_post": " foi rastreado no nosso sistema.",
-    "openIssueMessage_pre": "Fomos muito cautelosos para não incluir suas informações de cena no erro. Se sua cena não for privada, por favor, considere seguir nosso ",
-    "openIssueMessage_button": "rastreador de bugs.",
-    "openIssueMessage_post": " Por favor, inclua informações abaixo, copiando e colando para a issue do GitHub.",
+    "trackedToSentry": "O erro com o identificador {{eventId}} foi rastreado no nosso sistema.",
+    "openIssueMessage": "Fomos muito cautelosos para não incluir suas informações de cena no erro. Se sua cena não for privada, por favor, considere seguir nosso <button>rastreador de bugs.</button> Por favor, inclua informações abaixo, copiando e colando para a issue do GitHub.",
     "sceneContent": "Conteúdo da cena:"
   },
   "roomDialog": {
@@ -319,8 +302,8 @@
     "doubleClick": "clique duplo",
     "drag": "arrastar",
     "editor": "Editor",
-    "editLineArrowPoints": "",
-    "editText": "",
+    "editLineArrowPoints": "Editar linha/ponta da seta",
+    "editText": "Editar texto / adicionar etiqueta",
     "github": "Encontrou algum problema? Nos informe",
     "howto": "Siga nossos guias",
     "or": "ou",
@@ -361,34 +344,45 @@
       "required": "Obrigatório",
       "website": "Informe uma URL válida"
     },
-    "noteDescription": {
-      "pre": "Envie sua biblioteca para ser incluída no ",
-      "link": "repositório de biblioteca pública",
-      "post": "para outras pessoas usarem em seus desenhos."
-    },
-    "noteGuidelines": {
-      "pre": "A biblioteca precisa ser aprovada manualmente primeiro. Por favor leia o ",
-      "link": "orientações",
-      "post": " antes de enviar. Você precisará de uma conta do GitHub para se comunicar e fazer alterações quando solicitado, mas não é estritamente necessário."
-    },
-    "noteLicense": {
-      "pre": "Ao enviar, você concorda que a biblioteca será publicada sob a ",
-      "link": "Licença MIT, ",
-      "post": "o que, em suma, significa que qualquer pessoa pode utilizá-los sem restrições."
-    },
+    "noteDescription": "Envie sua biblioteca para ser incluída no <link>repositório de biblioteca pública</link>para outras pessoas usarem em seus desenhos.",
+    "noteGuidelines": "A biblioteca precisa ser aprovada manualmente primeiro. Por favor leia o <link>orientações</link> antes de enviar. Você precisará de uma conta do GitHub para se comunicar e fazer alterações quando solicitado, mas não é estritamente necessário.",
+    "noteLicense": "Ao enviar, você concorda que a biblioteca será publicada sob a <link>Licença MIT, </link>o que, em suma, significa que qualquer pessoa pode utilizá-los sem restrições.",
     "noteItems": "Cada item da biblioteca deve ter seu próprio nome para que seja filtrável. Os seguintes itens da biblioteca serão incluídos:",
     "atleastOneLibItem": "Por favor, selecione pelo menos um item da biblioteca para começar",
     "republishWarning": "Nota: alguns dos itens selecionados estão marcados como já publicado/enviado. Você só deve reenviar itens ao atualizar uma biblioteca existente ou submissão."
   },
   "publishSuccessDialog": {
     "title": "Biblioteca enviada",
-    "content": "Obrigado {{authorName}}. Sua biblioteca foi enviada para análise. Você pode acompanhar o status",
-    "link": "aqui"
+    "content": "Obrigado {{authorName}}. Sua biblioteca foi enviada para análise. Você pode acompanhar o status<link>aqui</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Redefinir biblioteca",
     "removeItemsFromLib": "Remover itens selecionados da biblioteca"
   },
+  "imageExportDialog": {
+    "header": "Exportar imagem",
+    "label": {
+      "withBackground": "Fundo",
+      "onlySelected": "Somente selecionados",
+      "darkMode": "Modo escuro",
+      "embedScene": "Incorporar cena",
+      "scale": "Escala",
+      "padding": "Margem interna"
+    },
+    "tooltip": {
+      "embedScene": "Os dados da cena serão salvos no arquivo PNG/SVG exportado para que a cena possa ser restaurada a partir dele.\nIsso aumentará o tamanho do arquivo exportado."
+    },
+    "title": {
+      "exportToPng": "Exportar como PNG",
+      "exportToSvg": "Exportar como SVG",
+      "copyPngToClipboard": "Copiar PNG para área de transferência"
+    },
+    "button": {
+      "exportToPng": "PNG",
+      "exportToSvg": "SVG",
+      "copyPngToClipboard": "Copiar para a área de transferência"
+    }
+  },
   "encrypted": {
     "tooltip": "Seus desenhos são criptografados de ponta a ponta, então os servidores do Excalidraw nunca os verão.",
     "link": "Publicação de blog com criptografia de ponta a ponta no Excalidraw"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "Use {{shortcut}} para colar como um único elemento,\nou cole em um editor de texto já existente"
   },
   "colors": {
-    "ffffff": "Braco",
-    "f8f9fa": "Cinza 0",
-    "f1f3f5": "Cinza 1",
-    "fff5f5": "Vermelho 0",
-    "fff0f6": "Rosa 0",
-    "f8f0fc": "Uva 0",
-    "f3f0ff": "Violeta 0",
-    "edf2ff": "Índigo 0",
-    "e7f5ff": "Azul 0",
-    "e3fafc": "Ciano 0",
-    "e6fcf5": "Verde-azulado 0",
-    "ebfbee": "Verde 0",
-    "f4fce3": "Lima 0",
-    "fff9db": "Amarelo 0",
-    "fff4e6": "Laranja 0",
     "transparent": "Transparente",
-    "ced4da": "Cinza 4",
-    "868e96": "Cinza 6",
-    "fa5252": "Vermelho 6",
-    "e64980": "Rosa 6",
-    "be4bdb": "Uva 6",
-    "7950f2": "Violeta 6",
-    "4c6ef5": "Índigo 6",
-    "228be6": "Azul 6",
-    "15aabf": "Ciano 6",
-    "12b886": "Verde-azulado 6",
-    "40c057": "Verde 6",
-    "82c91e": "Lima 6",
-    "fab005": "Amarelo 6",
-    "fd7e14": "Laranja 6",
-    "000000": "Preto",
-    "343a40": "Cinza 8",
-    "495057": "Cinza 7",
-    "c92a2a": "Vermelho 9",
-    "a61e4d": "Rosa 9",
-    "862e9c": "Uva 9",
-    "5f3dc4": "Violeta 9",
-    "364fc7": "Índigo 9",
-    "1864ab": "Azul 9",
-    "0b7285": "Ciano 9",
-    "087f5b": "Verde-azulado 9",
-    "2b8a3e": "Verde 9",
-    "5c940d": "Lima 9",
-    "e67700": "Amarelo 9",
-    "d9480f": "Laranja 9"
+    "black": "Preto",
+    "white": "Branco",
+    "red": "Vermelho",
+    "pink": "Rosa",
+    "grape": "Uva",
+    "violet": "Violeta",
+    "gray": "Cinza",
+    "blue": "Azul",
+    "cyan": "Ciano",
+    "teal": "Verde-azulado",
+    "green": "Verde",
+    "yellow": "Amarelo",
+    "orange": "Laranja",
+    "bronze": "Bronze"
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "Escolha uma ferramenta e comece a desenhar!",
       "helpHint": "Atalhos e ajuda"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "Cores personalizadas mais usadas",
+    "colors": "Cores",
+    "shades": "Tons",
+    "hexCode": "Código hexadecimal",
+    "noShades": "Sem tons disponíveis para essa cor"
   }
 }
diff --git a/src/locales/pt-PT.json b/src/locales/pt-PT.json
index 7ce28f00f..13e6c27b2 100644
--- a/src/locales/pt-PT.json
+++ b/src/locales/pt-PT.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Triângulo",
     "fontSize": "Tamanho da fonte",
     "fontFamily": "Família da fontes",
-    "onlySelected": "Somente a seleção",
-    "withBackground": "Fundo",
-    "exportEmbedScene": "Cena embutida",
-    "exportEmbedScene_details": "Os dados da cena serão guardados no ficheiro PNG/SVG exportado para que a cena possa ser restaurada.\nIrá aumentar o tamanho do ficheiro exportado.",
     "addWatermark": "Adicionar \"Feito com Excalidraw\"",
     "handDrawn": "Manuscrito",
     "normal": "Normal",
@@ -54,6 +50,7 @@
     "veryLarge": "Muito grande",
     "solid": "Sólido",
     "hachure": "Eclosão",
+    "zigzag": "ziguezague",
     "crossHatch": "Sombreado",
     "thin": "Fino",
     "bold": "Espesso",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Inverter horizontalmente",
     "flipVertical": "Inverter verticalmente",
     "viewMode": "Modo de visualização",
-    "toggleExportColorScheme": "Alternar esquema de cores de exportação",
     "share": "Partilhar",
     "showStroke": "Mostrar seletor de cores do traço",
     "showBackground": "Mostrar seletor de cores do fundo",
@@ -127,7 +123,10 @@
       "unlockAll": "Desbloquear todos"
     },
     "statusPublished": "Publicado",
-    "sidebarLock": "Manter a barra lateral aberta"
+    "sidebarLock": "Manter a barra lateral aberta",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "Ainda não foram adicionados nenhuns itens...",
@@ -139,11 +138,7 @@
     "exportJSON": "Exportar para ficheiro",
     "exportImage": "Exportar imagem...",
     "export": "Guardar para...",
-    "exportToPng": "Exportar em PNG",
-    "exportToSvg": "Exportar em SVG",
     "copyToClipboard": "Copiar para o clipboard",
-    "copyPngToClipboard": "Copiar PNG para área de transferência",
-    "scale": "Escala",
     "save": "Guardar no ficheiro atual",
     "saveAs": "Guardar como",
     "load": "Abrir",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Não foi possível guardar na base de dados de backend. Se os problemas persistirem, guarde o ficheiro localmente para garantir que não perde o seu trabalho.",
     "collabSaveFailed_sizeExceeded": "Não foi possível guardar na base de dados de backend, o ecrã parece estar muito grande. Deve guardar o ficheiro localmente para garantir que não perde o seu trabalho.",
     "brave_measure_text_error": {
-      "start": "Parece que está a usar o navegador Brave com o",
-      "aggressive_block_fingerprint": "Bloqueio Agressivo via Impressão Digital",
-      "setting_enabled": "activo",
-      "break": "Isso pode desconfigurar os",
-      "text_elements": "Elementos de Texto",
-      "in_your_drawings": "nos seus desenhos",
-      "strongly_recommend": "Recomendamos fortemente a desactivação desta configuração. Pode seguir",
-      "steps": "os seguintes passos",
-      "how": "para saber como o fazer",
-      "disable_setting": " Se desactivar esta configuração não consertar a exibição de elementos de texto, por favor, abra um",
-      "issue": "problema",
-      "write": "no nosso GitHub ou então escreva-nos no",
-      "discord": "Discord"
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Modo caneta - impedir toque",
     "link": "Acrescentar/ Adicionar ligação para uma forma seleccionada",
     "eraser": "Borracha",
-    "hand": "Mão (ferramenta de movimento da tela)"
+    "frame": "",
+    "hand": "Mão (ferramenta de movimento da tela)",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Ações da área de desenho",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Dica: tente aproximar um pouco os elementos mais distantes."
   },
   "errorSplash": {
-    "headingMain_pre": "Foi encontrado um erro. Tente ",
-    "headingMain_button": "recarregar a página.",
-    "clearCanvasMessage": "Se a recarga não funcionar, tente ",
-    "clearCanvasMessage_button": "a limpar a área de desenho.",
+    "headingMain": "Foi encontrado um erro. Tente <button>recarregar a página.</button>",
+    "clearCanvasMessage": "Se a recarga não funcionar, tente <button>a limpar a área de desenho.</button>",
     "clearCanvasCaveat": " Isso resultará em perda de trabalho ",
-    "trackedToSentry_pre": "O erro com o identificador ",
-    "trackedToSentry_post": " foi rastreado no nosso sistema.",
-    "openIssueMessage_pre": "Fomos muito cautelosos para não incluir suas informações de cena no erro. Se sua cena não for privada, por favor, considere seguir nosso ",
-    "openIssueMessage_button": "rastreador de bugs.",
-    "openIssueMessage_post": " Por favor, inclua informações abaixo, copiando e colando no relatório de erros no GitHub.",
+    "trackedToSentry": "O erro com o identificador {{eventId}} foi rastreado no nosso sistema.",
+    "openIssueMessage": "Fomos muito cautelosos para não incluir suas informações de cena no erro. Se sua cena não for privada, por favor, considere seguir nosso <button>rastreador de bugs.</button> Por favor, inclua informações abaixo, copiando e colando no relatório de erros no GitHub.",
     "sceneContent": "Conteúdo da cena:"
   },
   "roomDialog": {
@@ -319,8 +302,8 @@
     "doubleClick": "clique duplo",
     "drag": "arrastar",
     "editor": "Editor",
-    "editLineArrowPoints": "",
-    "editText": "",
+    "editLineArrowPoints": "Editar pontos de linha/seta",
+    "editText": "Editar texto / adicionar etiqueta",
     "github": "Encontrou algum problema? Informe-nos",
     "howto": "Siga os nossos guias",
     "or": "ou",
@@ -361,34 +344,45 @@
       "required": "Obrigatório",
       "website": "Introduza um URL válido"
     },
-    "noteDescription": {
-      "pre": "Envie a sua biblioteca para ser incluída no ",
-      "link": "repositório de bibliotecas públicas",
-      "post": "para outras pessoas a poderem usar nos seus próprios desenhos."
-    },
-    "noteGuidelines": {
-      "pre": "A biblioteca precisa ser aprovada manualmente primeiro. Por favor, leia ",
-      "link": "orientações",
-      "post": " antes de enviar. Vai precisar de uma conta no GitHub para comunicar e fazer alterações se solicitado, mas não é estritamente necessária."
-    },
-    "noteLicense": {
-      "pre": "Ao enviar, concorda que a biblioteca será publicada sob a ",
-      "link": "Licença MIT, ",
-      "post": "o que significa, de forma resumida, que qualquer pessoa pode utilizá-la sem restrições."
-    },
+    "noteDescription": "Envie a sua biblioteca para ser incluída no <link>repositório de bibliotecas públicas</link>para outras pessoas a poderem usar nos seus próprios desenhos.",
+    "noteGuidelines": "A biblioteca precisa ser aprovada manualmente primeiro. Por favor, leia <link>orientações</link> antes de enviar. Vai precisar de uma conta no GitHub para comunicar e fazer alterações se solicitado, mas não é estritamente necessária.",
+    "noteLicense": "Ao enviar, concorda que a biblioteca será publicada sob a <link>Licença MIT, </link>o que significa, de forma resumida, que qualquer pessoa pode utilizá-la sem restrições.",
     "noteItems": "Cada item da biblioteca deve ter o seu próprio nome para que este seja pesquisável com filtros. Os seguintes itens da biblioteca serão incluídos:",
     "atleastOneLibItem": "Por favor, seleccione pelo menos um item da biblioteca para começar",
     "republishWarning": "Nota: alguns dos itens seleccionados estão marcados como já publicados/enviados. Só deve reenviar itens ao actualizar uma biblioteca existente ou submissão."
   },
   "publishSuccessDialog": {
     "title": "Biblioteca enviada",
-    "content": "Obrigado {{authorName}}. A sua biblioteca foi enviada para análise. Pode acompanhar o status",
-    "link": "aqui"
+    "content": "Obrigado {{authorName}}. A sua biblioteca foi enviada para análise. Pode acompanhar o status<link>aqui</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Repor a biblioteca",
     "removeItemsFromLib": "Remover os itens seleccionados da biblioteca"
   },
+  "imageExportDialog": {
+    "header": "Exportar imagem",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "Cena embutida",
+      "scale": "",
+      "padding": "Espaçamento"
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "Exportar em PNG",
+      "exportToSvg": "Exportar em SVG",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "PNG",
+      "exportToSvg": "SVG",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "Os seus desenhos são encriptados de ponta-a-ponta, por isso os servidores do Excalidraw nunca os verão.",
     "link": "Publicação de blogue na encriptação ponta-a-ponta no Excalidraw"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "Usar {{shortcut}} para colar como um único elemento,\nou colar num editor de texto existente"
   },
   "colors": {
-    "ffffff": "Branco",
-    "f8f9fa": "Cinza 0",
-    "f1f3f5": "Cinza 1",
-    "fff5f5": "Vermelho 0",
-    "fff0f6": "Rosa 0",
-    "f8f0fc": "Uva 0",
-    "f3f0ff": "Violeta 0",
-    "edf2ff": "Indigo 0",
-    "e7f5ff": "Azul 0",
-    "e3fafc": "Ciano 0",
-    "e6fcf5": "Verde-azulado 0",
-    "ebfbee": "Verde 0",
-    "f4fce3": "Lima 0",
-    "fff9db": "Amarelo 0",
-    "fff4e6": "Laranja 0",
     "transparent": "Transparente",
-    "ced4da": "Cinza 4",
-    "868e96": "Cinza 6",
-    "fa5252": "Vermelho 6",
-    "e64980": "Rosa 6",
-    "be4bdb": "Uva 6",
-    "7950f2": "Violeta 6",
-    "4c6ef5": "Indigo 6",
-    "228be6": "Azul 6",
-    "15aabf": "Ciano 6",
-    "12b886": "Verde-azulado 6",
-    "40c057": "Verde 6",
-    "82c91e": "Lima 6",
-    "fab005": "Amarelo 6",
-    "fd7e14": "Laranja 6",
-    "000000": "Preto",
-    "343a40": "Cinza 8",
-    "495057": "Cinza 7",
-    "c92a2a": "Vermelho 9",
-    "a61e4d": "Rosa 9",
-    "862e9c": "Uva 9",
-    "5f3dc4": "Violeta 9",
-    "364fc7": "Indigo 9",
-    "1864ab": "Azul 9",
-    "0b7285": "Ciano 9",
-    "087f5b": "Verde-azulado 9",
-    "2b8a3e": "Verde 9",
-    "5c940d": "Lima 9",
-    "e67700": "Amarelo 9",
-    "d9480f": "Laranja 9"
+    "black": "Preto",
+    "white": "Branco",
+    "red": "Vermelho",
+    "pink": "Rosa",
+    "grape": "Uva",
+    "violet": "Violeta",
+    "gray": "Cinza",
+    "blue": "Azul",
+    "cyan": "",
+    "teal": "",
+    "green": "Verde",
+    "yellow": "Amarelo",
+    "orange": "Laranja",
+    "bronze": "Bronze"
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "Escolha uma ferramenta e comece a desenhar!",
       "helpHint": "Atalhos e ajuda"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "Cores",
+    "shades": "Tons",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/ro-RO.json b/src/locales/ro-RO.json
index a0e3b5883..cc51f74b5 100644
--- a/src/locales/ro-RO.json
+++ b/src/locales/ro-RO.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Triunghi",
     "fontSize": "Dimensiune font",
     "fontFamily": "Familia de fonturi",
-    "onlySelected": "Numai selecția",
-    "withBackground": "Fundal",
-    "exportEmbedScene": "Încorporare scenă",
-    "exportEmbedScene_details": "Datele scenei vor fi salvate în fișierul PNG/SVG exportat, astfel că scena va putea fi restaurată din acesta.\nVa crește dimensiunea fișierului exportat.",
     "addWatermark": "Adaugă „Realizat cu Excalidraw”",
     "handDrawn": "Scris de mână",
     "normal": "Normal",
@@ -54,6 +50,7 @@
     "veryLarge": "Foarte mare",
     "solid": "Plină",
     "hachure": "Hașură",
+    "zigzag": "Zigzag",
     "crossHatch": "Hașură transversală",
     "thin": "Subțire",
     "bold": "Îngroșată",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Răsturnare orizontală",
     "flipVertical": "Răsturnare verticală",
     "viewMode": "Mod de vizualizare",
-    "toggleExportColorScheme": "Comutare schemă de culori de export",
     "share": "Distribuie",
     "showStroke": "Afișare selector culoare contur",
     "showBackground": "Afișare selector culoare fundal",
@@ -127,7 +123,10 @@
       "unlockAll": "Deblocare toate"
     },
     "statusPublished": "Publicat",
-    "sidebarLock": "Păstrează deschisă bara laterală"
+    "sidebarLock": "Păstrează deschisă bara laterală",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": "Alegere culoare din pânză"
   },
   "library": {
     "noItems": "Niciun element adăugat încă...",
@@ -139,11 +138,7 @@
     "exportJSON": "Exportare la fișiere",
     "exportImage": "Exportare imagine...",
     "export": "Salvare în...",
-    "exportToPng": "Exportare ca PNG",
-    "exportToSvg": "Exportare ca SVG",
     "copyToClipboard": "Copiere în memoria temporară",
-    "copyPngToClipboard": "Copiere PNG în memoria temporară",
-    "scale": "Scală",
     "save": "Salvare în fișierul curent",
     "saveAs": "Salvare ca",
     "load": "Deschidere",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Nu s-a putut salva în baza de date la nivel de server. Dacă problemele persistă, ar trebui să salvezi fișierul la nivel local pentru a te asigura că nu îți pierzi munca.",
     "collabSaveFailed_sizeExceeded": "Nu s-a putut salva în baza de date la nivel de server, întrucât se pare că pânza este prea mare. Ar trebui să salvezi fișierul la nivel local pentru a te asigura că nu îți pierzi munca.",
     "brave_measure_text_error": {
-      "start": "Se pare că folosești navigatorul Brave cu",
-      "aggressive_block_fingerprint": "setarea „Blocați amprentarea” în modul strict",
-      "setting_enabled": "activată",
-      "break": "Acest lucru ar putea duce la întreruperea",
-      "text_elements": "elementelor de text",
-      "in_your_drawings": "din desenele tale",
-      "strongly_recommend": "Recomandăm insistent dezactivarea acestei setări. Poți urma",
-      "steps": "acești pași",
-      "how": "pentru efectuarea procedurii",
-      "disable_setting": " Dacă dezactivarea acestei setări nu remediază afișarea elementelor de text, deschide",
-      "issue": "un tichet cu probleme",
-      "write": "pe pagina noastră de GitHub sau scrie-ne pe",
-      "discord": "Discord"
+      "line1": "Se pare că folosești navigatorul Brave cu opțiunea <bold>strictă pentru blocarea amprentării</bold>.",
+      "line2": "Acest lucru poate duce la întreruperea <bold>elementelor text</bold> din desene.",
+      "line3": "Îți recomandăm ferm să dezactivezi această setare. Poți urma <link>acești pași</link> pentru a face acest lucru.",
+      "line4": "Dacă dezactivarea acestei setări nu duce la remedierea afișării elementelor text, deschide un tichet de <issueLink>problemă</issueLink> pe pagina noastră de GitHub sau scrie-ne pe <discordLink>Discord</discordLink>"
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Mod stilou – împiedică atingerea",
     "link": "Adăugare/actualizare URL pentru forma selectată",
     "eraser": "Radieră",
-    "hand": "Mână (instrument de panoramare)"
+    "frame": "",
+    "hand": "Mână (instrument de panoramare)",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Acțiuni pentru pânză",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Sfat: încearcă să apropii puțin mai mult elementele cele mai îndepărtate."
   },
   "errorSplash": {
-    "headingMain_pre": "A apărut o eroare. Încearcă ",
-    "headingMain_button": "să reîncarci pagina.",
-    "clearCanvasMessage": "Dacă reîncărcarea nu funcționează, încearcă ",
-    "clearCanvasMessage_button": "să golești pânza.",
+    "headingMain": "A apărut o eroare. Încearcă <button>să reîncarci pagina</button>.",
+    "clearCanvasMessage": "Dacă reîncărcarea nu funcționează, încearcă <button>să ștergi pânza</button>.",
     "clearCanvasCaveat": " Acest lucru va duce la pierderea progresului ",
-    "trackedToSentry_pre": "Eroarea cu identificatorul ",
-    "trackedToSentry_post": " a fost urmărită în sistemul nostru.",
-    "openIssueMessage_pre": "Am luat măsuri de precauție pentru a nu include informații despre scenă în eroare. Dacă scena nu este privată, te rugăm să ne oferi mai multe informații în ",
-    "openIssueMessage_button": "monitorul nostru pentru erori.",
-    "openIssueMessage_post": " Te rugăm să incluzi informațiile de mai jos prin copierea și lipirea în problema GitHub.",
+    "trackedToSentry": "Eroarea cu identificatorul {{eventId}} a fost urmărită în sistemul nostru.",
+    "openIssueMessage": "Am luat măsuri de precauție pentru a nu include informații despre scenă în eroare. Dacă scena nu este privată, oferă-ne mai multe informații în <button>monitorul nostru pentru erori</button>. Include informațiile de mai jos copiindu-le și lipindu-le în tichetul cu problemă de pe GitHub.",
     "sceneContent": "Conținutul scenei:"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "Obligatoriu",
       "website": "Introdu un URL valid"
     },
-    "noteDescription": {
-      "pre": "Trimite-ți biblioteca pentru fi inclus în ",
-      "link": "depozitul de biblioteci publice",
-      "post": "pentru utilizarea de către alte persoane în desenele lor."
-    },
-    "noteGuidelines": {
-      "pre": "Biblioteca trebuie aprobată manual. Citește ",
-      "link": "orientările",
-      "post": " înainte de trimitere. Vei avea nevoie de un cont GitHub pentru a comunica și efectua modificări, dacă este cazul, însă nu este strict necesar."
-    },
-    "noteLicense": {
-      "pre": "Prin trimiterea bibliotecii, ești de acord că aceasta va fi publicată sub ",
-      "link": "Licența MIT, ",
-      "post": "care, pe scurt, înseamnă că oricine o poate folosi fără restricții."
-    },
+    "noteDescription": "Trimite-ți biblioteca pentru a fi inclusă în <link>depozitul de biblioteci publice</link> în vederea utilizării de către alte persoane în desenele lor.",
+    "noteGuidelines": "Biblioteca trebuie aprobată manual mai întâi. Citește <link>orientările</link> înainte de trimitere. Vei avea nevoie de un cont GitHub pentru a comunica și efectua modificări, dacă este cazul, însă nu este strict necesar.",
+    "noteLicense": "Prin trimiterea bibliotecii, ești de acord că aceasta va fi publicată sub <link>Licența MIT, </link>care, pe scurt, înseamnă că oricine o poate folosi fără restricții.",
     "noteItems": "Fiecare element din bibliotecă trebuie să aibă propriul nume astfel încât să fie filtrabil. Următoarele elemente din bibliotecă vor fi incluse:",
     "atleastOneLibItem": "Selectează cel puțin un element din bibliotecă pentru a începe",
     "republishWarning": "Observație: unele dintre elementele selectate sunt marcate ca fiind deja publicate/trimise. Ar trebui să retrimiți elemente numai atunci când actualizezi o trimitere sau o bibliotecă existentă."
   },
   "publishSuccessDialog": {
     "title": "Bibliotecă trimisă",
-    "content": "Îți mulțumim, {{authorName}}. Biblioteca ta a fost trimisă spre revizuire. Poți urmări starea",
-    "link": "aici"
+    "content": "Îți mulțumim, {{authorName}}. Biblioteca a fost trimisă spre revizuire. Poți urmări starea <link>aici</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Resetare bibliotecă",
     "removeItemsFromLib": "Elimină elementele selectate din bibliotecă"
   },
+  "imageExportDialog": {
+    "header": "Exportare imagine",
+    "label": {
+      "withBackground": "Fundal",
+      "onlySelected": "Numai selecția",
+      "darkMode": "Mod întunecat",
+      "embedScene": "Încorporare scenă",
+      "scale": "Scală",
+      "padding": "Spațiere"
+    },
+    "tooltip": {
+      "embedScene": "Datele scenei vor fi salvate în fișierul PNG/SVG exportat, astfel că scena va putea fi restaurată din acesta.\nVa crește dimensiunea fișierului exportat."
+    },
+    "title": {
+      "exportToPng": "Exportare ca PNG",
+      "exportToSvg": "Exportare ca SVG",
+      "copyPngToClipboard": "Copiere PNG în memoria temporară"
+    },
+    "button": {
+      "exportToPng": "PNG",
+      "exportToSvg": "SVG",
+      "copyPngToClipboard": "Copiere în memoria temporară"
+    }
+  },
   "encrypted": {
     "tooltip": "Desenele tale sunt criptate integral, astfel că serverele Excalidraw nu le vor vedea niciodată.",
     "link": "Articol de blog pe criptarea integrală din Excalidraw"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "Folosește {{shortcut}} pentru a insera ca un singur element\nsau insera într-un editor de text existent"
   },
   "colors": {
-    "ffffff": "Alb",
-    "f8f9fa": "Gri 0",
-    "f1f3f5": "Gri 1",
-    "fff5f5": "Roșu 0",
-    "fff0f6": "Roz 0",
-    "f8f0fc": "Struguriu 0",
-    "f3f0ff": "Violet 0",
-    "edf2ff": "Indigo 0",
-    "e7f5ff": "Albastru 0",
-    "e3fafc": "Cyan 0",
-    "e6fcf5": "Cyan-verde",
-    "ebfbee": "Verde 0",
-    "f4fce3": "Verde-limetă",
-    "fff9db": "Galben 0",
-    "fff4e6": "Portocaliu 0",
     "transparent": "Transparent",
-    "ced4da": "Gri 4",
-    "868e96": "Gri 6",
-    "fa5252": "Roșu 6",
-    "e64980": "Roz 6",
-    "be4bdb": "Struguriu 6",
-    "7950f2": "Violet 6",
-    "4c6ef5": "Indigo 6",
-    "228be6": "Albastru 6",
-    "15aabf": "Cyan 6",
-    "12b886": "Cyan-verde 6",
-    "40c057": "Verde 6",
-    "82c91e": "Verde-limetă 6",
-    "fab005": "Galben 6",
-    "fd7e14": "Portocaliu 6",
-    "000000": "Negru",
-    "343a40": "Gri 8",
-    "495057": "Gri 7",
-    "c92a2a": "Roșu 9",
-    "a61e4d": "Roz 9",
-    "862e9c": "Struguriu 9",
-    "5f3dc4": "Violet 9",
-    "364fc7": "Indigo 9",
-    "1864ab": "Albastru 9",
-    "0b7285": "Cyan 9",
-    "087f5b": "Cyan-verde 9",
-    "2b8a3e": "Verde 9",
-    "5c940d": "Verde-limetă 9",
-    "e67700": "Galben 9",
-    "d9480f": "Portocaliu 9"
+    "black": "Negru",
+    "white": "Alb",
+    "red": "Roșu",
+    "pink": "Roz",
+    "grape": "Struguriu",
+    "violet": "Violet",
+    "gray": "Gri",
+    "blue": "Albastru",
+    "cyan": "Cyan",
+    "teal": "Cyan-verde",
+    "green": "Verde",
+    "yellow": "Galben",
+    "orange": "Portocaliu",
+    "bronze": "Bronz"
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "Alege un instrument și începe să desenezi!",
       "helpHint": "Comenzi rapide și ajutor"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "Cele mai utilizate culori personalizate",
+    "colors": "Culori",
+    "shades": "Nuanțe",
+    "hexCode": "Cod hexa",
+    "noShades": "Nu este disponibilă nicio nuanță pentru această culoare"
   }
 }
diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json
index d4030897c..00be90c51 100644
--- a/src/locales/ru-RU.json
+++ b/src/locales/ru-RU.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Треугольник",
     "fontSize": "Размер шрифта",
     "fontFamily": "Семейство шрифтов",
-    "onlySelected": "Только выбранные",
-    "withBackground": "Фон",
-    "exportEmbedScene": "Встроить сцену",
-    "exportEmbedScene_details": "Сцена будет сохранена в PNG/SVG файл так, чтобы всю сцену можно будет восстановить из этого файла. Это увеличит размер файла.",
     "addWatermark": "Добавить «Создано в Excalidraw»",
     "handDrawn": "От руки",
     "normal": "Обычный",
@@ -54,6 +50,7 @@
     "veryLarge": "Очень большой",
     "solid": "Однотонная",
     "hachure": "Штрихованная",
+    "zigzag": "Зигзаг",
     "crossHatch": "Перекрестная",
     "thin": "Тонкая",
     "bold": "Жирная",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Переворот по горизонтали",
     "flipVertical": "Переворот по вертикали",
     "viewMode": "Вид",
-    "toggleExportColorScheme": "Экспортировать цветовую схему",
     "share": "Поделиться",
     "showStroke": "Показать выбор цвета обводки",
     "showBackground": "Показать выбор цвета фона",
@@ -110,7 +106,7 @@
     "increaseFontSize": "Увеличить шрифт",
     "unbindText": "Отвязать текст",
     "bindText": "Привязать текст к контейнеру",
-    "createContainerFromText": "",
+    "createContainerFromText": "Поместить текст в контейнер",
     "link": {
       "edit": "Редактировать ссылку",
       "create": "Создать ссылку",
@@ -127,7 +123,10 @@
       "unlockAll": "Разблокировать все"
     },
     "statusPublished": "Опубликовано",
-    "sidebarLock": "Держать боковую панель открытой"
+    "sidebarLock": "Держать боковую панель открытой",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": "Взять образец цвета с холста"
   },
   "library": {
     "noItems": "Пока ничего не добавлено...",
@@ -139,11 +138,7 @@
     "exportJSON": "Сохранить в",
     "exportImage": "Экспортировать изображение...",
     "export": "Сохранить как...",
-    "exportToPng": "Экспорт в PNG",
-    "exportToSvg": "Экспорт в SVG",
     "copyToClipboard": "Скопировать в буфер обмена",
-    "copyPngToClipboard": "Скопировать PNG в буфер обмена",
-    "scale": "Масштаб",
     "save": "Сохранить в текущий файл",
     "saveAs": "Сохранить как",
     "load": "Открыть",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Не удалось сохранить в базу данных. Если проблема повторится, нужно будет сохранить файл локально, чтобы быть уверенным, что вы не потеряете вашу работу.",
     "collabSaveFailed_sizeExceeded": "Не удалось сохранить в базу данных. Похоже, что холст слишком большой. Нужно сохранить файл локально, чтобы быть уверенным, что вы не потеряете вашу работу.",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "Похоже, вы используете браузер Brave с включенной опцией <bold>Агрессивно блокировать отслеживание</bold>.",
+      "line2": "Это может привести к поломке <bold>Текстовых объектов</bold> на рисунке.",
+      "line3": "Мы настоятельно рекомендуем отключить эту настройку. Для этого нужно выполнить <link>эти шаги</link>.",
+      "line4": "Если отключение этой настройки не исправит отображение текстовых объектов, создайте <issueLink>issue</issueLink> на нашем GitHub или напишите нам в <discordLink>Discord</discordLink>"
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Режим пера - предотвращение касания",
     "link": "Добавить/обновить ссылку для выбранной фигуры",
     "eraser": "Ластик",
-    "hand": "Рука (перемещение холста)"
+    "frame": "",
+    "hand": "Рука (перемещение холста)",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Операции холста",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Совет: попробуйте сблизить элементы рисунка."
   },
   "errorSplash": {
-    "headingMain_pre": "Возникла ошибка. Попробуйте ",
-    "headingMain_button": "перезагрузить страницу.",
-    "clearCanvasMessage": "Если перезагрузка страницы не помогла, попробуйте ",
-    "clearCanvasMessage_button": "очистить холст.",
+    "headingMain": "Возникла ошибка. Попробуйте <button>перезагрузить страницу.</button>",
+    "clearCanvasMessage": "Если перезагрузка страницы не помогла, попробуйте <button>очистить холст.</button>",
     "clearCanvasCaveat": " Текущая работа будет утеряна ",
-    "trackedToSentry_pre": "Ошибка с идентификатором ",
-    "trackedToSentry_post": " отслеживается в нашей системе.",
-    "openIssueMessage_pre": "Для безопасности информация о вашей сцене не включена в ошибку. Если в сцене нет ничего конфиденциального, пожалуйста следуйте нашим ",
-    "openIssueMessage_button": "баг трекере.",
-    "openIssueMessage_post": " Пожалуйста, приложите информацию ниже, скопировав и вставив её, в issue GitHub.",
+    "trackedToSentry": "Ошибка с идентификатором {{eventId}} отслеживается в нашей системе.",
+    "openIssueMessage": "Для безопасности информация о вашей сцене не включена в ошибку. Если в сцене нет ничего конфиденциального, пожалуйста следуйте нашим <button>баг трекере.</button> Пожалуйста, приложите информацию ниже, скопировав и вставив её, в issue GitHub.",
     "sceneContent": "Содержание сцены:"
   },
   "roomDialog": {
@@ -319,8 +302,8 @@
     "doubleClick": "двойной клик",
     "drag": "перетащить",
     "editor": "Редактор",
-    "editLineArrowPoints": "",
-    "editText": "",
+    "editLineArrowPoints": "Редактировать концы линий/стрелок",
+    "editText": "Редактировать текст / добавить метку",
     "github": "Нашли проблему? Отправьте",
     "howto": "Следуйте нашим инструкциям",
     "or": "или",
@@ -361,34 +344,45 @@
       "required": "Обязательно",
       "website": "Введите допустимый URL-адрес"
     },
-    "noteDescription": {
-      "pre": "Отправить вашу библиотеку для включения в ",
-      "link": "хранилище публичных библиотек",
-      "post": ", чтобы другие люди могли использовать объекты из вашей библиотеки в своих рисунках."
-    },
-    "noteGuidelines": {
-      "pre": "Библиотека должна быть подтверждена вручную. Пожалуйста, прочтите ",
-      "link": "рекомендации",
-      "post": " перед отправкой. Вам понадобится учетная запись GitHub, чтобы общаться и вносить изменения при необходимости, но это не обязательно."
-    },
-    "noteLicense": {
-      "pre": "Выполняя отправку, вы соглашаетесь с тем, что библиотека будет опубликована под ",
-      "link": "лицензией MIT, ",
-      "post": ", что, вкратце, означает, что каждый может использовать её без ограничений."
-    },
+    "noteDescription": "Отправить вашу библиотеку для включения в <link>хранилище публичных библиотек</link>, чтобы другие люди могли использовать объекты из вашей библиотеки в своих рисунках.",
+    "noteGuidelines": "Библиотека должна быть подтверждена вручную. Пожалуйста, прочтите <link>рекомендации</link> перед отправкой. Вам понадобится учетная запись GitHub, чтобы общаться и вносить изменения при необходимости, но это не обязательно.",
+    "noteLicense": "Выполняя отправку, вы соглашаетесь с тем, что библиотека будет опубликована под <link>лицензией MIT, </link>, что, вкратце, означает, что каждый может использовать её без ограничений.",
     "noteItems": "Каждый объект в библиотеке должен иметь свое собственное имя, чтобы по нему можно было фильтровать. Следующие объекты библиотеки будут включены:",
     "atleastOneLibItem": "Пожалуйста, выберите хотя бы один объект в библиотеке, чтобы начать",
     "republishWarning": "Примечание: некоторые из выбранных элементов помечены как уже опубликованные/отправленные. Вы должны повторно отправить элементы только при обновлении существующей библиотеки или сдаче работы."
   },
   "publishSuccessDialog": {
     "title": "Библиотека отправлена",
-    "content": "Благодарим вас, {{authorName}}. Ваша библиотека была отправлена на проверку. Вы можете отслеживать статус",
-    "link": "здесь"
+    "content": "Благодарим вас, {{authorName}}. Ваша библиотека была отправлена на проверку. Вы можете отслеживать статус<link>здесь</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Сброс библиотеки",
     "removeItemsFromLib": "Удалить выбранные объекты из библиотеки"
   },
+  "imageExportDialog": {
+    "header": "Экспортировать изображение",
+    "label": {
+      "withBackground": "Фон",
+      "onlySelected": "Только выделенное",
+      "darkMode": "Темная тема",
+      "embedScene": "Встроить сцену",
+      "scale": "Масштаб",
+      "padding": "Отступ"
+    },
+    "tooltip": {
+      "embedScene": "Сцена будет сохранена в PNG/SVG файл так, чтобы всю сцену можно будет восстановить из этого файла. Это увеличит размер файла."
+    },
+    "title": {
+      "exportToPng": "Экспорт в PNG",
+      "exportToSvg": "Экспорт в SVG",
+      "copyPngToClipboard": "Скопировать PNG в буфер обмена"
+    },
+    "button": {
+      "exportToPng": "PNG",
+      "exportToSvg": "SVG",
+      "copyPngToClipboard": "Скопировать в буфер обмена"
+    }
+  },
   "encrypted": {
     "tooltip": "Ваши данные защищены сквозным (End-to-end) шифрованием. Серверы Excalidraw никогда не получат доступ к ним.",
     "link": "Запись блога о сквозном шифровании в Excalidraw"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "Используйте {{shortcut}}, чтобы вставить один объект,\nили вставьте в существующий текстовый редактор"
   },
   "colors": {
-    "ffffff": "Белый",
-    "f8f9fa": "Серый 0",
-    "f1f3f5": "Серый 1",
-    "fff5f5": "Красный 0",
-    "fff0f6": "Розовый 0",
-    "f8f0fc": "Виноградный 0",
-    "f3f0ff": "Фиолетовый 0",
-    "edf2ff": "Индиго 0",
-    "e7f5ff": "Синий 0",
-    "e3fafc": "Голубой 0",
-    "e6fcf5": "Бирюзовый 0",
-    "ebfbee": "Зелёный 0",
-    "f4fce3": "Лайм 0",
-    "fff9db": "Жёлтый 0",
-    "fff4e6": "Оранжевый 0",
     "transparent": "Прозрачный",
-    "ced4da": "Серый 4",
-    "868e96": "Серый 6",
-    "fa5252": "Красный 6",
-    "e64980": "Розовый 6",
-    "be4bdb": "Виноградный 6",
-    "7950f2": "Фиолетовый 6",
-    "4c6ef5": "Индиго 6",
-    "228be6": "Синий 6",
-    "15aabf": "Голубой 6",
-    "12b886": "Бирюзовый 6",
-    "40c057": "Зелёный 6",
-    "82c91e": "Лайм 6",
-    "fab005": "Жёлтый 6",
-    "fd7e14": "Оранжевый 6",
-    "000000": "Чёрный",
-    "343a40": "Серый 8",
-    "495057": "Серый 7",
-    "c92a2a": "Красный 9",
-    "a61e4d": "Розовый 9",
-    "862e9c": "Виноградный 9",
-    "5f3dc4": "Фиолетовый 9",
-    "364fc7": "Индиго 9",
-    "1864ab": "Синий 9",
-    "0b7285": "Голубой 9",
-    "087f5b": "Бирюзовый 9",
-    "2b8a3e": "Зелёный 9",
-    "5c940d": "Лайм 9",
-    "e67700": "Жёлтый 9",
-    "d9480f": "Оранжевый 9"
+    "black": "Чёрный",
+    "white": "Белый",
+    "red": "Красный",
+    "pink": "Розовый",
+    "grape": "Виноградный",
+    "violet": "Фиолетовый",
+    "gray": "Серый",
+    "blue": "Синий",
+    "cyan": "Голубой",
+    "teal": "Бирюзовый",
+    "green": "Зелёный",
+    "yellow": "Жёлтый",
+    "orange": "Оранжевый",
+    "bronze": "Бронзовый"
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "Выберите инструмент и начните рисовать!",
       "helpHint": "Сочетания клавиш и помощь"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "Часто используемые пользовательские цвета",
+    "colors": "Цвета",
+    "shades": "Оттенки",
+    "hexCode": "Шестнадцатеричный код",
+    "noShades": "Нет доступных оттенков для этого цвета"
   }
 }
diff --git a/src/locales/si-LK.json b/src/locales/si-LK.json
index b84ad567f..468beaf47 100644
--- a/src/locales/si-LK.json
+++ b/src/locales/si-LK.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "",
     "fontSize": "",
     "fontFamily": "",
-    "onlySelected": "",
-    "withBackground": "",
-    "exportEmbedScene": "",
-    "exportEmbedScene_details": "",
     "addWatermark": "",
     "handDrawn": "",
     "normal": "",
@@ -54,6 +50,7 @@
     "veryLarge": "ඉතා විශාල",
     "solid": "විශාල",
     "hachure": "මධ්‍යම",
+    "zigzag": "",
     "crossHatch": "",
     "thin": "කෙට්ටු",
     "bold": "තද",
@@ -99,7 +96,6 @@
     "flipHorizontal": "",
     "flipVertical": "",
     "viewMode": "",
-    "toggleExportColorScheme": "",
     "share": "",
     "showStroke": "",
     "showBackground": "",
@@ -127,7 +123,10 @@
       "unlockAll": ""
     },
     "statusPublished": "",
-    "sidebarLock": ""
+    "sidebarLock": "",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "",
@@ -139,11 +138,7 @@
     "exportJSON": "",
     "exportImage": "",
     "export": "",
-    "exportToPng": "",
-    "exportToSvg": "",
     "copyToClipboard": "",
-    "copyPngToClipboard": "",
-    "scale": "",
     "save": "",
     "saveAs": "",
     "load": "",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "",
     "collabSaveFailed_sizeExceeded": "",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "",
     "link": "",
     "eraser": "",
-    "hand": ""
+    "frame": "",
+    "hand": "",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": ""
   },
   "errorSplash": {
-    "headingMain_pre": "",
-    "headingMain_button": "",
+    "headingMain": "",
     "clearCanvasMessage": "",
-    "clearCanvasMessage_button": "",
     "clearCanvasCaveat": "",
-    "trackedToSentry_pre": "",
-    "trackedToSentry_post": "",
-    "openIssueMessage_pre": "",
-    "openIssueMessage_button": "",
-    "openIssueMessage_post": "",
+    "trackedToSentry": "",
+    "openIssueMessage": "",
     "sceneContent": ""
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "",
       "website": ""
     },
-    "noteDescription": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
-    "noteGuidelines": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
-    "noteLicense": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
+    "noteDescription": "",
+    "noteGuidelines": "",
+    "noteLicense": "",
     "noteItems": "",
     "atleastOneLibItem": "",
     "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "",
-    "content": "",
-    "link": ""
+    "content": ""
   },
   "confirmDialog": {
     "resetLibrary": "",
     "removeItemsFromLib": ""
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "",
     "link": ""
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": ""
   },
   "colors": {
-    "ffffff": "",
-    "f8f9fa": "",
-    "f1f3f5": "",
-    "fff5f5": "",
-    "fff0f6": "",
-    "f8f0fc": "",
-    "f3f0ff": "",
-    "edf2ff": "",
-    "e7f5ff": "",
-    "e3fafc": "",
-    "e6fcf5": "",
-    "ebfbee": "",
-    "f4fce3": "",
-    "fff9db": "",
-    "fff4e6": "",
     "transparent": "",
-    "ced4da": "",
-    "868e96": "",
-    "fa5252": "",
-    "e64980": "",
-    "be4bdb": "",
-    "7950f2": "",
-    "4c6ef5": "",
-    "228be6": "",
-    "15aabf": "",
-    "12b886": "",
-    "40c057": "",
-    "82c91e": "",
-    "fab005": "",
-    "fd7e14": "",
-    "000000": "",
-    "343a40": "",
-    "495057": "",
-    "c92a2a": "",
-    "a61e4d": "",
-    "862e9c": "",
-    "5f3dc4": "",
-    "364fc7": "",
-    "1864ab": "",
-    "0b7285": "",
-    "087f5b": "",
-    "2b8a3e": "",
-    "5c940d": "",
-    "e67700": "",
-    "d9480f": ""
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "",
       "helpHint": ""
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/sk-SK.json b/src/locales/sk-SK.json
index d6322ac1c..cfda4f16b 100644
--- a/src/locales/sk-SK.json
+++ b/src/locales/sk-SK.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Trojuholník",
     "fontSize": "Veľkosť písma",
     "fontFamily": "Písmo",
-    "onlySelected": "Iba vybrané",
-    "withBackground": "Pozadie",
-    "exportEmbedScene": "Zahrnúť scénu",
-    "exportEmbedScene_details": "Údaje scény budú uložené do exportovaného PNG/SVG súboru, takže scéna z neho môže byť opäť obnovená.\nBude to mať za následok zvýšenie veľkosti súboru.",
     "addWatermark": "Pridať \"Vytvorené s Excalidraw\"",
     "handDrawn": "Ručne písané",
     "normal": "Normálne",
@@ -54,6 +50,7 @@
     "veryLarge": "Veľmi veľké",
     "solid": "Plná",
     "hachure": "Šrafovaná",
+    "zigzag": "Cik-cak",
     "crossHatch": "Mriežkovaná",
     "thin": "Tenká",
     "bold": "Hrubá",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Prevrátiť vodorovne",
     "flipVertical": "Prevrátiť zvislo",
     "viewMode": "Režim zobrazenia",
-    "toggleExportColorScheme": "Prepnúť exportovanie farebnej schémy",
     "share": "Zdieľať",
     "showStroke": "Zobraziť výber farby pre obrys",
     "showBackground": "Zobraziť výber farby pre pozadie",
@@ -127,7 +123,10 @@
       "unlockAll": "Odomknúť všetko"
     },
     "statusPublished": "Zverejnené",
-    "sidebarLock": "Nechať bočný panel otvorený"
+    "sidebarLock": "Nechať bočný panel otvorený",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": "Vybrať farbu z plátna"
   },
   "library": {
     "noItems": "Zatiaľ neboli pridané žiadne položky...",
@@ -139,11 +138,7 @@
     "exportJSON": "Exportovať do súboru",
     "exportImage": "Exportovať obrázok...",
     "export": "Uložiť do...",
-    "exportToPng": "Exportovať do PNG",
-    "exportToSvg": "Exportovať do SVG",
     "copyToClipboard": "Kopírovať do schránky",
-    "copyPngToClipboard": "Kopírovať PNG do schránky",
-    "scale": "Mierka",
     "save": "Uložiť do aktuálneho súboru",
     "saveAs": "Uložiť ako",
     "load": "Otvoriť",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Uloženie do databázy sa nepodarilo. Ak tento problém pretrváva uložte si váš súbor lokálne aby ste nestratili vašu prácu.",
     "collabSaveFailed_sizeExceeded": "Uloženie do databázy sa nepodarilo, pretože veľkosť plátna je príliš veľká. Uložte si váš súbor lokálne aby ste nestratili vašu prácu.",
     "brave_measure_text_error": {
-      "start": "Vyzerá to, že používate prehliadač Brave s",
-      "aggressive_block_fingerprint": "agresívnym blokovaním sledovania",
-      "setting_enabled": "zapnutým",
-      "break": "Toto môže znemožniť používanie",
-      "text_elements": "textových prvkov",
-      "in_your_drawings": "vo vašich kresbách",
-      "strongly_recommend": "Odporúčame vypnutie tohto nastavenia. Postupuje podľa",
-      "steps": "týchto krokov",
-      "how": "pre jeho vypnutie",
-      "disable_setting": " Ak sa vypnutím tohto nastavenia problém zobrazenia textových prvkov neodstráni, prosím vytvorte",
-      "issue": "issue",
-      "write": "na našom Github-e alebo nám to oznámte na",
-      "discord": "Discord"
+      "line1": "Vyzerá to, že používate prehliadač Brave so zapnutým nastavením pre <bold>agresívne blokovanie</bold>.",
+      "line2": "To môže spôsobiť nesprávne zobrazenie <bold>textových prvkov</bold> vo vašej kresbe.",
+      "line3": "Dôrazne odporúčame vypnutie toho nastavenia. Môžete tak spraviť vykonaním <link>týchto krokov</link>.",
+      "line4": "Ak vypnutie toho nastavenia nevyrieši problém so zobrazením textových prvkov, prosím ohláste <issueLink>problém</issueLink> na našom GitHub-e alebo nám napíšte na náš <discordLink>Discord</discordLink>"
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Režim pera – zabrániť dotyku",
     "link": "Pridať/ Upraviť odkaz pre vybraný tvar",
     "eraser": "Guma",
-    "hand": "Ruka (nástroj pre pohyb plátna)"
+    "frame": "",
+    "hand": "Ruka (nástroj pre pohyb plátna)",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Akcie plátna",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Tip: skúste presunúť najvzdialenejšie prvky bližšie k sebe."
   },
   "errorSplash": {
-    "headingMain_pre": "Nastala chyba. Vyskúšajte ",
-    "headingMain_button": "obnoviť stránku.",
-    "clearCanvasMessage": "Ak obnovenie stránky nepomáha, vyskúšajte ",
-    "clearCanvasMessage_button": "vyčistiť plátno.",
+    "headingMain": "Nastala chyba. Vyskúšajte <button>obnoviť stránku.</button>",
+    "clearCanvasMessage": "Ak obnovenie stránky nepomáha, vyskúšajte <button>vyčistiť plátno.</button>",
     "clearCanvasCaveat": " To bude mať za následok stratu práce ",
-    "trackedToSentry_pre": "Chyba s identifikátorom ",
-    "trackedToSentry_post": " bola zaznamenaná v našom systéme.",
-    "openIssueMessage_pre": "Boli sme veľmi opatrní, aby informácie vašej scény neboli v chybe zaznamenané. Ak vaša scéna nie je súkromná, prosím zvážte pokračovanie na naše ",
-    "openIssueMessage_button": "hlásenie chýb.",
-    "openIssueMessage_post": " Prosím zahrňte informácie nižšie pomocou kopírovania a prilepenia do GitHub issue.",
+    "trackedToSentry": "Chyba s identifikátorom {{eventId}} bola zaznamenaná v našom systéme.",
+    "openIssueMessage": "Boli sme veľmi opatrní, aby informácie vašej scény neboli v chybe zaznamenané. Ak vaša scéna nie je súkromná, prosím zvážte pokračovanie na naše <button>hlásenie chýb.</button> Prosím zahrňte informácie nižšie pomocou kopírovania a prilepenia do GitHub issue.",
     "sceneContent": "Obsah scény:"
   },
   "roomDialog": {
@@ -319,8 +302,8 @@
     "doubleClick": "dvojklik",
     "drag": "potiahnutie",
     "editor": "Editovanie",
-    "editLineArrowPoints": "",
-    "editText": "",
+    "editLineArrowPoints": "Editácia bodov čiary/šípky",
+    "editText": "Editácia textu / pridanie štítku",
     "github": "Objavili ste problém? Nahláste ho",
     "howto": "Postupujte podľa naších návodov",
     "or": "alebo",
@@ -361,34 +344,45 @@
       "required": "Povinné",
       "website": "Zadajte platnú adresu URL"
     },
-    "noteDescription": {
-      "pre": "Uverejnite vašu knižnicu vo ",
-      "link": "verejnom zozname knižníc",
-      "post": "aby ju aj ostatní mohli použiť v ich náčrtoch."
-    },
-    "noteGuidelines": {
-      "pre": "Knižnica musí byť najprv manuálne schválená. Prosím prečítajte si ",
-      "link": "pokyny",
-      "post": " pred uverejnením. Budete potrebovať Github účet na komunikáciu a vykonanie zmien, ak budú potrebné, avšak nie je to úplne povinné."
-    },
-    "noteLicense": {
-      "pre": "Potvrdením súhlasíte, že knižnica bude zverejnená s ",
-      "link": "MIT licenciou, ",
-      "post": "čo v skratke znamená, že ju môže použiť hocikto bez obmedzení."
-    },
+    "noteDescription": "Uverejnite vašu knižnicu vo <link>verejnom zozname knižníc</link>aby ju aj ostatní mohli použiť v ich náčrtoch.",
+    "noteGuidelines": "Knižnica musí byť najprv manuálne schválená. Prosím prečítajte si <link>pokyny</link> pred uverejnením. Budete potrebovať Github účet na komunikáciu a vykonanie zmien, ak budú potrebné, avšak nie je to úplne povinné.",
+    "noteLicense": "Potvrdením súhlasíte, že knižnica bude zverejnená s <link>MIT licenciou, </link>čo v skratke znamená, že ju môže použiť hocikto bez obmedzení.",
     "noteItems": "Každá položka v knižnici musí mať svoje vlastné meno, aby sa dala vyhľadať. Súčasťou knižnice budú nasledujúce položky:",
     "atleastOneLibItem": "Začnite prosím zvolením aspoň jednej položky z knižnice",
     "republishWarning": "Poznámka: Niektoré z vybraných položiek sú už označené ako zverejnené. Ich znovu uverejnenie by ste mali vykovať iba vtedy ak aktualizujete už existujúcu knižnicu alebo požiadavku na uverejnenie."
   },
   "publishSuccessDialog": {
     "title": "Knižnica uverejnená",
-    "content": "Ďakujeme vám {{authorName}}. Vaša knižnica bola uverejnená na posúdenie. Stav môžete skontrolovať",
-    "link": "tu"
+    "content": "Ďakujeme vám {{authorName}}. Vaša knižnica bola uverejnená na posúdenie. Stav môžete skontrolovať<link>tu</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Obnoviť knižnicu",
     "removeItemsFromLib": "Odstrániť zvolené položky z knižnice"
   },
+  "imageExportDialog": {
+    "header": "Exportovať obrázok",
+    "label": {
+      "withBackground": "Pozadie",
+      "onlySelected": "Iba vybrané",
+      "darkMode": "Tmavý režim",
+      "embedScene": "Zahrnúť scénu",
+      "scale": "Mierka",
+      "padding": "Odsadenie"
+    },
+    "tooltip": {
+      "embedScene": "Údaje scény budú uložené do exportovaného PNG/SVG súboru, takže scéna z neho môže byť opäť obnovená.\nBude to mať za následok zvýšenie veľkosti súboru."
+    },
+    "title": {
+      "exportToPng": "Exportovať do PNG",
+      "exportToSvg": "Exportovať do SVG",
+      "copyPngToClipboard": "Kopírovať PNG do schránky"
+    },
+    "button": {
+      "exportToPng": "PNG",
+      "exportToSvg": "SVG",
+      "copyPngToClipboard": "Kopírovať do schránky"
+    }
+  },
   "encrypted": {
     "tooltip": "Vaše kresby používajú end-to-end šifrovanie, takže ich Excalidraw server nedokáže prečítať.",
     "link": "Blog o end-to-end šifrovaní v Excalidraw"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "Použitím {{shortcut}} vložte ako samostatný prvok alebo vložte do existujúceho editovaného textu"
   },
   "colors": {
-    "ffffff": "Biela",
-    "f8f9fa": "Sivá 0",
-    "f1f3f5": "Sivá 1",
-    "fff5f5": "Červená 0",
-    "fff0f6": "Ružová 0",
-    "f8f0fc": "Hroznová fialová 0",
-    "f3f0ff": "Fialová 0",
-    "edf2ff": "Tmavomodrá 0",
-    "e7f5ff": "Modrá 0",
-    "e3fafc": "Azúrová 0",
-    "e6fcf5": "Modrozelená 0",
-    "ebfbee": "Zelená 0",
-    "f4fce3": "Limetková 0",
-    "fff9db": "Žltá 0",
-    "fff4e6": "Oranžová 0",
     "transparent": "Priehľadná",
-    "ced4da": "Sivá 4",
-    "868e96": "Sivá 6",
-    "fa5252": "Červená 6",
-    "e64980": "Ružová 6",
-    "be4bdb": "Hroznová fialová 6",
-    "7950f2": "Fialová 6",
-    "4c6ef5": "Tmavomodrá 6",
-    "228be6": "Modrá 6",
-    "15aabf": "Azúrová 6",
-    "12b886": "Modrozelená 6",
-    "40c057": "Zelená 6",
-    "82c91e": "Limetková 6",
-    "fab005": "Žltá 6",
-    "fd7e14": "Oranžová 6",
-    "000000": "Čierna",
-    "343a40": "Sivá 8",
-    "495057": "Sivá 7",
-    "c92a2a": "Červená 9",
-    "a61e4d": "Ružová 9",
-    "862e9c": "Hroznová fialová 9",
-    "5f3dc4": "Fialová 9",
-    "364fc7": "Tmavomodrá 9",
-    "1864ab": "Modrá 9",
-    "0b7285": "Azúrová 9",
-    "087f5b": "Modrozelená 9",
-    "2b8a3e": "Zelená 9",
-    "5c940d": "Limetková 9",
-    "e67700": "Žltá 9",
-    "d9480f": "Oranžová 9"
+    "black": "Čierna",
+    "white": "Biela",
+    "red": "Červená",
+    "pink": "Ružová",
+    "grape": "Hroznová fialová",
+    "violet": "Fialová",
+    "gray": "Sivá",
+    "blue": "Modrá",
+    "cyan": "Azúrová",
+    "teal": "Modrozelená",
+    "green": "Zelená",
+    "yellow": "Žltá",
+    "orange": "Oranžová",
+    "bronze": "Bronzová"
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "Zvoľte nástroj a začnite kresliť!",
       "helpHint": "Klávesové skratky a pomocník"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "Najpoužívanejšie vlastné farby",
+    "colors": "Farby",
+    "shades": "Odtiene",
+    "hexCode": "Hex kód",
+    "noShades": "Pre túto farbu nie sú dostupné žiadne odtiene"
   }
 }
diff --git a/src/locales/sl-SI.json b/src/locales/sl-SI.json
index 57199c813..70945a1f0 100644
--- a/src/locales/sl-SI.json
+++ b/src/locales/sl-SI.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Trikotnik",
     "fontSize": "Velikost pisave",
     "fontFamily": "Družina pisave",
-    "onlySelected": "Samo izbor",
-    "withBackground": "Ozadje",
-    "exportEmbedScene": "Vdelaj sceno",
-    "exportEmbedScene_details": "Podatki o sceni bodo shranjeni v izvoženo datoteko PNG/SVG, tako da bo sceno mogoče obnoviti iz nje.\nTo bo povečalo velikost izvožene datoteke.",
     "addWatermark": "Dodaj \"Izdelano z Excalidraw\"",
     "handDrawn": "Ročno narisano",
     "normal": "Običajno",
@@ -54,6 +50,7 @@
     "veryLarge": "Zelo velika",
     "solid": "Polno",
     "hachure": "Šrafura",
+    "zigzag": "Cikcak",
     "crossHatch": "Križno",
     "thin": "Tanko",
     "bold": "Krepko",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Obrni vodoravno",
     "flipVertical": "Obrni navpično",
     "viewMode": "Način ogleda",
-    "toggleExportColorScheme": "Preklopi barvno shemo izvoza",
     "share": "Deli",
     "showStroke": "Prikaži izbirnik barv poteze",
     "showBackground": "Prikaži izbirnik barv ozadja",
@@ -127,7 +123,10 @@
       "unlockAll": "Odkleni vse"
     },
     "statusPublished": "Objavljeno",
-    "sidebarLock": "Obdrži stransko vrstico odprto"
+    "sidebarLock": "Obdrži stransko vrstico odprto",
+    "selectAllElementsInFrame": "Izberi vse elemente v okvirju",
+    "removeAllElementsFromFrame": "Izbriši vse elemente v okvirju",
+    "eyeDropper": "Izberi barvo s platna"
   },
   "library": {
     "noItems": "Dodan še ni noben element...",
@@ -139,11 +138,7 @@
     "exportJSON": "Izvozi v datoteko",
     "exportImage": "Izvozi sliko...",
     "export": "Shrani v...",
-    "exportToPng": "Izvozi v PNG",
-    "exportToSvg": "Izvozi v SVG",
     "copyToClipboard": "Kopiraj v odložišče",
-    "copyPngToClipboard": "Kopiraj PNG v odložišče",
-    "scale": "Povečava",
     "save": "Shrani v trenutno datoteko",
     "saveAs": "Shrani kot",
     "load": "Odpri",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Ni bilo mogoče shraniti v zaledno bazo podatkov. Če se težave nadaljujejo, shranite datoteko lokalno, da ne boste izgubili svojega dela.",
     "collabSaveFailed_sizeExceeded": "Ni bilo mogoče shraniti v zaledno bazo podatkov, zdi se, da je platno preveliko. Datoteko shranite lokalno, da ne izgubite svojega dela.",
     "brave_measure_text_error": {
-      "start": "Videti je, da uporabljate brskalnik Brave z omogočeno nastavitvijo",
-      "aggressive_block_fingerprint": "Agresivno blokiranje prstnih odtisov",
-      "setting_enabled": " ",
-      "break": "To bi lahko povzročilo motnje v obnašanju",
-      "text_elements": "besedilnih elementov",
-      "in_your_drawings": "v vaših risbah",
-      "strongly_recommend": "Močno priporočamo, da onemogočite to nastavitev. Sledite",
-      "steps": "tem korakom,",
-      "how": "kako to storiti",
-      "disable_setting": " Če onemogočanje te nastavitve ne popravi prikaza besedilnih elementov, odprite",
-      "issue": "vprašanje",
-      "write": "na našem GitHubu ali nam pišite na",
-      "discord": "Discord"
+      "line1": "Videti je, da uporabljate brskalnik Brave z omogočeno nastavitvijo <bold>Agresivno blokiranje prstnih odtisov</bold>.",
+      "line2": "To bi lahko povzročilo motnje v obnašanju <bold>besedilnih elementov</bold> v vaših risbah.",
+      "line3": "Močno priporočamo, da onemogočite to nastavitev. Sledite <link>tem korakom</link>, kako to storiti.",
+      "line4": "Če onemogočanje te nastavitve ne popravi prikaza besedilnih elementov, odprite <issueLink>vprašanje</issueLink> na našem GitHubu ali nam pišite na <discordLink>Discord</discordLink>"
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Način peresa - prepreči dotik",
     "link": "Dodaj/posodobi povezavo za izbrano obliko",
     "eraser": "Radirka",
-    "hand": "Roka (orodje za premikanje)"
+    "frame": "Okvir",
+    "hand": "Roka (orodje za premikanje)",
+    "extraTools": "Več orodij"
   },
   "headings": {
     "canvasActions": "Dejanja za platno",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Nasvet: poskusite premakniti najbolj oddaljene elemente nekoliko bližje skupaj."
   },
   "errorSplash": {
-    "headingMain_pre": "Prišlo je do napake. Poskusite ",
-    "headingMain_button": "ponovno naložiti stran.",
-    "clearCanvasMessage": "Če ponovno nalaganje ne deluje, poskusite ",
-    "clearCanvasMessage_button": "počistiti platno.",
+    "headingMain": "Prišlo je do napake. Poskusite <button>ponovno naložiti stran.</button>",
+    "clearCanvasMessage": "Če ponovno nalaganje ne deluje, poskusite <button>počistiti platno.</button>",
     "clearCanvasCaveat": " To bo povzročilo izgubo dela ",
-    "trackedToSentry_pre": "Napaka z identifikatorjem ",
-    "trackedToSentry_post": " smo zabeležili v naš sistem.",
-    "openIssueMessage_pre": "Zelo smo bili previdni, da v podatke o napaki nismo vključili vaših podatkov o sceni. Če vaša scena ni zasebna, vas prosimo, da napišete več podrobnosti na našem ",
-    "openIssueMessage_button": "sledilniku hroščev.",
-    "openIssueMessage_post": " Prosimo, vključite spodnje informacije tako, da jih kopirate in prilepite v GitHub vprašanje.",
+    "trackedToSentry": "Napaka z identifikatorjem {{eventId}} smo zabeležili v naš sistem.",
+    "openIssueMessage": "Zelo smo bili previdni, da v podatke o napaki nismo vključili vaših podatkov o sceni. Če vaša scena ni zasebna, vas prosimo, da napišete več podrobnosti na našem <button>sledilniku hroščev.</button> Prosimo, vključite spodnje informacije tako, da jih kopirate in prilepite v GitHub vprašanje.",
     "sceneContent": "Vsebina scene:"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "Obvezno",
       "website": "Vnesite veljaven URL"
     },
-    "noteDescription": {
-      "pre": "Predložite svojo knjižnico, da bo vključena v ",
-      "link": "javno skladišče knjižnic,",
-      "post": "da jih drugi lahko uporabljajo v svojih risbah."
-    },
-    "noteGuidelines": {
-      "pre": "Knjižnica mora biti najprej ročno odobrena. Prosimo vas, da pred oddajanjem preberete naše ",
-      "link": "smernice.",
-      "post": "Za komunikacijo in spreminjanje po potrebi boste potrebovali račun GitHub, vendar to ni obvezno."
-    },
-    "noteLicense": {
-      "pre": "Z oddajo se strinjate, da bo knjižnica objavljena pod ",
-      "link": "licenco MIT, ",
-      "post": "kar na kratko pomeni, da jo lahko kdorkoli uporablja brez omejitev."
-    },
+    "noteDescription": "Predložite svojo knjižnico, da bo vključena v <link>javno skladišče knjižnic,</link>da jih drugi lahko uporabljajo v svojih risbah.",
+    "noteGuidelines": "Knjižnica mora biti najprej ročno odobrena. Prosimo vas, da pred oddajanjem preberete naše <link>smernice.</link>Za komunikacijo in spreminjanje po potrebi boste potrebovali račun GitHub, vendar to ni obvezno.",
+    "noteLicense": "Z oddajo se strinjate, da bo knjižnica objavljena pod <link>licenco MIT, </link>kar na kratko pomeni, da jo lahko kdorkoli uporablja brez omejitev.",
     "noteItems": "Vsak element knjižnice mora imeti svoje ime, tako da ga je mogoče filtrirati. Vključeni bodo naslednji elementi knjižnice:",
     "atleastOneLibItem": "Za začetek izberite vsaj en element knjižnice",
     "republishWarning": "Opomba: nekateri izbrani predmeti so označeni kot že objavljeni/oddani. Elemente lahko znova oddate samo, ko posodabljate obstoječo knjižnico ali oddajo."
   },
   "publishSuccessDialog": {
     "title": "Knjižnica oddana",
-    "content": "{{authorName}}, hvala. Vaša knjižnica je bila poslana v pregled. Stanje lahko spremljate",
-    "link": "tukaj"
+    "content": "{{authorName}}, hvala. Vaša knjižnica je bila poslana v pregled. Stanje lahko spremljate<link>tukaj</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Ponastavi knjižnico",
     "removeItemsFromLib": "Odstran izbrane elemente iz knjižnice"
   },
+  "imageExportDialog": {
+    "header": "Izvozi sliko",
+    "label": {
+      "withBackground": "Ozadje",
+      "onlySelected": "Samo izbor",
+      "darkMode": "Temni način",
+      "embedScene": "Vdelaj sceno",
+      "scale": "Povečava",
+      "padding": "Odmik"
+    },
+    "tooltip": {
+      "embedScene": "Podatki o sceni bodo shranjeni v izvoženo datoteko PNG/SVG, tako da bo sceno mogoče obnoviti iz nje.\nTo bo povečalo velikost izvožene datoteke."
+    },
+    "title": {
+      "exportToPng": "Izvozi v PNG",
+      "exportToSvg": "Izvozi v SVG",
+      "copyPngToClipboard": "Kopiraj PNG v odložišče"
+    },
+    "button": {
+      "exportToPng": "PNG",
+      "exportToSvg": "SVG",
+      "copyPngToClipboard": "Kopiraj v odložišče"
+    }
+  },
   "encrypted": {
     "tooltip": "Vaše risbe so šifrirane od konca do konca, tako da jih strežniki Excalidraw nikoli ne bodo videli.",
     "link": "Blog objava o šifriranju od konca do konca v Excalidraw"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "Uporabite {{shortcut}}, da prilepite kot en element,\n ali prilepite v obstoječ urejevalnik besedil"
   },
   "colors": {
-    "ffffff": "Bela",
-    "f8f9fa": "Siva 0",
-    "f1f3f5": "Siva 1",
-    "fff5f5": "Rdeča 0",
-    "fff0f6": "Roza 0",
-    "f8f0fc": "Grozdje 0",
-    "f3f0ff": "Vijolična 0",
-    "edf2ff": "Indigo 0",
-    "e7f5ff": "Modra 0",
-    "e3fafc": "Cijan 0",
-    "e6fcf5": "Modrozelena 0",
-    "ebfbee": "Zelena 0",
-    "f4fce3": "Limeta 0",
-    "fff9db": "Rumena 0",
-    "fff4e6": "Oranžna 0",
     "transparent": "Prosojno",
-    "ced4da": "Siva 4",
-    "868e96": "Siva 6",
-    "fa5252": "Rdeča 6",
-    "e64980": "Roza 6",
-    "be4bdb": "Grozdje 6",
-    "7950f2": "Vijolična 6",
-    "4c6ef5": "Indigo 6",
-    "228be6": "Modra 6",
-    "15aabf": "Cijan 6",
-    "12b886": "Modrozelena 6",
-    "40c057": "Zelena 6",
-    "82c91e": "Limeta 6",
-    "fab005": "Rumena 6",
-    "fd7e14": "Oranžna 6",
-    "000000": "Črna",
-    "343a40": "Siva 8",
-    "495057": "Siva 7",
-    "c92a2a": "Rdeča 9",
-    "a61e4d": "Roza 9",
-    "862e9c": "Grozdje 9",
-    "5f3dc4": "Vijolična 9",
-    "364fc7": "Indigo 9",
-    "1864ab": "Modra 9",
-    "0b7285": "Cijan 9",
-    "087f5b": "Modrozelena 9",
-    "2b8a3e": "Zelena 9",
-    "5c940d": "Limeta 9",
-    "e67700": "Rumena 9",
-    "d9480f": "Oranžna 9"
+    "black": "Črna",
+    "white": "Bela",
+    "red": "Rdeča",
+    "pink": "Roza",
+    "grape": "Grozdje",
+    "violet": "Vijolična",
+    "gray": "Siva",
+    "blue": "Modra",
+    "cyan": "Cijan",
+    "teal": "Turkizna",
+    "green": "Zelena",
+    "yellow": "Rumena",
+    "orange": "Oranžna",
+    "bronze": "Bronasta"
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "Izberi orodje in začni z risanjem!",
       "helpHint": "Bližnjice in pomoč"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "Najpogosteje uporabljene barve po meri",
+    "colors": "Barve",
+    "shades": "Odtenki",
+    "hexCode": "Hex koda",
+    "noShades": "Odtenki za to barvo niso na voljo"
   }
 }
diff --git a/src/locales/sv-SE.json b/src/locales/sv-SE.json
index d0392b119..e437e3924 100644
--- a/src/locales/sv-SE.json
+++ b/src/locales/sv-SE.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Triangel",
     "fontSize": "Teckenstorlek",
     "fontFamily": "Teckensnitt",
-    "onlySelected": "Endast markering",
-    "withBackground": "Bakgrund",
-    "exportEmbedScene": "Bädda in skiss",
-    "exportEmbedScene_details": "Skissdata kommer att sparas i den exporterade PNG/SVG-filen så att skissen kan återställas från den.\nKommer att öka exporterad filstorlek.",
     "addWatermark": "Lägg till \"Skapad med Excalidraw\"",
     "handDrawn": "Handritad",
     "normal": "Normal",
@@ -54,6 +50,7 @@
     "veryLarge": "Mycket stor",
     "solid": "Solid",
     "hachure": "Skraffering",
+    "zigzag": "Sicksack",
     "crossHatch": "Skraffera med kors",
     "thin": "Tunn",
     "bold": "Fet",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Vänd horisontellt",
     "flipVertical": "Vänd vertikalt",
     "viewMode": "Visningsläge",
-    "toggleExportColorScheme": "Växla färgschema för export",
     "share": "Dela",
     "showStroke": "Visa färgväljare för linjefärg",
     "showBackground": "Visa färgväljare för bakgrundsfärg",
@@ -127,7 +123,10 @@
       "unlockAll": "Lås upp alla"
     },
     "statusPublished": "Publicerad",
-    "sidebarLock": "Håll sidofältet öppet"
+    "sidebarLock": "Håll sidofältet öppet",
+    "selectAllElementsInFrame": "Markera alla element i rutan",
+    "removeAllElementsFromFrame": "Ta bort alla element från rutan",
+    "eyeDropper": "Välj färg från canvas"
   },
   "library": {
     "noItems": "Inga objekt tillagda ännu...",
@@ -139,11 +138,7 @@
     "exportJSON": "Exportera till fil",
     "exportImage": "Exportera bild...",
     "export": "Spara till...",
-    "exportToPng": "Exportera till PNG",
-    "exportToSvg": "Exportera till SVG",
     "copyToClipboard": "Kopiera till urklipp",
-    "copyPngToClipboard": "Kopiera PNG till urklipp",
-    "scale": "Skala",
     "save": "Spara till aktuell fil",
     "saveAs": "Spara som",
     "load": "Öppna",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Det gick inte att spara i backend-databasen. Om problemen kvarstår bör du spara filen lokalt för att se till att du inte förlorar ditt arbete.",
     "collabSaveFailed_sizeExceeded": "Det gick inte att spara till backend-databasen, whiteboarden verkar vara för stor. Du bör spara filen lokalt för att du inte ska förlora ditt arbete.",
     "brave_measure_text_error": {
-      "start": "Det ser ut som att du använder webbläsaren Brave med",
-      "aggressive_block_fingerprint": "Blockera \"Fingerprinting\" aggressivt",
-      "setting_enabled": "inställningen aktiverad",
-      "break": "Detta kan resultera i att ha sönder",
-      "text_elements": "Textelement",
-      "in_your_drawings": "i dina skisser",
-      "strongly_recommend": "Vi rekommenderar starkt att inaktivera denna inställning. Du kan följa",
-      "steps": "dessa steg",
-      "how": "om hur man gör det",
-      "disable_setting": " Om inaktivering av den här inställningen inte åtgärdar visningen av textelement, vänligen skapa ett",
-      "issue": "ärende",
-      "write": "på vår GitHub, eller skriv till oss på",
-      "discord": "Discord"
+      "line1": "Det ser ut som om du använder Brave-webbläsaren med <bold>Aggressivt Blockera fingeravtryck</bold> inställningen aktiverad.",
+      "line2": "Detta kan resultera i trasiga <bold>Textelement</bold> i dina ritningar.",
+      "line3": "Vi rekommenderar starkt att du inaktiverar den här inställningen. Du kan följa <link>dessa steg</link> för att inaktivera den.",
+      "line4": "Om inaktivering av denna inställning inte åtgärdar visningen av textelement, öppna ett <issueLink>ärende</issueLink> på vår GitHub, eller skriv till oss på <discordLink>Discord</discordLink>"
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Pennläge - förhindra touch",
     "link": "Lägg till / Uppdatera länk för en vald form",
     "eraser": "Radergummi",
-    "hand": "Hand (panoreringsverktyg)"
+    "frame": "Rutverktyg",
+    "hand": "Hand (panoreringsverktyg)",
+    "extraTools": "Fler verktyg"
   },
   "headings": {
     "canvasActions": "Canvas-åtgärder",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Tips: prova att flytta de mest avlägsna elementen lite närmare varandra."
   },
   "errorSplash": {
-    "headingMain_pre": "Ett fel uppstod. Försök ",
-    "headingMain_button": "med att läsa in sidan på nytt.",
-    "clearCanvasMessage": "Om omladdning inte fungerar, försök ",
-    "clearCanvasMessage_button": "rensa canvasen.",
+    "headingMain": "Ett fel uppstod. Försök <button>med att läsa in sidan på nytt.</button>",
+    "clearCanvasMessage": "Om omladdning inte fungerar, försök <button>rensa canvasen.</button>",
     "clearCanvasCaveat": " Detta kommer att leda till förlust av arbete ",
-    "trackedToSentry_pre": "Felet med identifieraren ",
-    "trackedToSentry_post": " spårades på vårt system.",
-    "openIssueMessage_pre": "Vi var mycket försiktiga med att inte inkludera din skissinformation om felet. Om din skiss inte är privat, vänligen överväga att följa upp på vår ",
-    "openIssueMessage_button": "buggspårare.",
-    "openIssueMessage_post": " Vänligen inkludera information nedan genom att kopiera och klistra in i GitHub-problemet.",
+    "trackedToSentry": "Felet med identifieraren {{eventId}} spårades på vårt system.",
+    "openIssueMessage": "Vi var mycket försiktiga med att inte inkludera din skissinformation om felet. Om din skiss inte är privat, vänligen överväga att följa upp på vår <button>buggspårare.</button> Vänligen inkludera information nedan genom att kopiera och klistra in i GitHub-problemet.",
     "sceneContent": "Skissinnehåll:"
   },
   "roomDialog": {
@@ -319,8 +302,8 @@
     "doubleClick": "dubbelklicka",
     "drag": "dra",
     "editor": "Redigerare",
-    "editLineArrowPoints": "",
-    "editText": "",
+    "editLineArrowPoints": "Redigera linje-/pilpunkter",
+    "editText": "Redigera text / lägg till etikett",
     "github": "Hittat ett problem? Rapportera",
     "howto": "Följ våra guider",
     "or": "eller",
@@ -361,34 +344,45 @@
       "required": "Obligatoriskt",
       "website": "Ange en giltig URL"
     },
-    "noteDescription": {
-      "pre": "Skicka ditt bibliotek för att inkluderas i ",
-      "link": "det offentliga bibliotekets arkiv",
-      "post": "för andra människor att använda i sina skisser."
-    },
-    "noteGuidelines": {
-      "pre": "Biblioteket måste godkännas manuellt först. Vänligen läs ",
-      "link": "riktlinjerna",
-      "post": " innan du skickar in. Du behöver ett GitHub-konto för att kommunicera och göra ändringar om så önskas, men det krävs inte."
-    },
-    "noteLicense": {
-      "pre": "Genom att skicka in godkänner du att biblioteket kommer att publiceras under ",
-      "link": "MIT-licens, ",
-      "post": "vilket kort sagt betyder att vem som helst kan använda det utan restriktioner."
-    },
+    "noteDescription": "Skicka ditt bibliotek för att inkluderas i <link>det offentliga bibliotekets arkiv</link>för andra människor att använda i sina skisser.",
+    "noteGuidelines": "Biblioteket måste godkännas manuellt först. Vänligen läs <link>riktlinjerna</link> innan du skickar in. Du behöver ett GitHub-konto för att kommunicera och göra ändringar om så önskas, men det krävs inte.",
+    "noteLicense": "Genom att skicka in godkänner du att biblioteket kommer att publiceras under <link>MIT-licens, </link>vilket kort sagt betyder att vem som helst kan använda det utan restriktioner.",
     "noteItems": "Varje objekt måste ha sitt eget namn så att det är filtrerbart. Följande objekt kommer att inkluderas:",
     "atleastOneLibItem": "Välj minst ett biblioteksobjekt för att komma igång",
     "republishWarning": "Obs: några av de markerade objekten är redan markerade som publicerade/skickade. Du bör endast skicka objekt igen när du uppdaterar ett befintligt bibliotek eller inlämning."
   },
   "publishSuccessDialog": {
     "title": "Bibliotek inskickat",
-    "content": "Tack {{authorName}}. Ditt bibliotek har skickats för granskning. Du kan följa status",
-    "link": "här"
+    "content": "Tack {{authorName}}. Ditt bibliotek har skickats för granskning. Du kan följa status<link>här</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Återställ bibliotek",
     "removeItemsFromLib": "Ta bort markerade objekt från biblioteket"
   },
+  "imageExportDialog": {
+    "header": "Exportera bild",
+    "label": {
+      "withBackground": "Bakgrund",
+      "onlySelected": "Endast markerade",
+      "darkMode": "Mörkt läge",
+      "embedScene": "Bädda in skiss",
+      "scale": "Skala",
+      "padding": "Utfyllnad"
+    },
+    "tooltip": {
+      "embedScene": "Skissdata kommer att sparas i den exporterade PNG/SVG-filen så att skissen kan återställas från den.\nKommer att öka exporterad filstorlek."
+    },
+    "title": {
+      "exportToPng": "Exportera till PNG",
+      "exportToSvg": "Exportera till SVG",
+      "copyPngToClipboard": "Kopiera PNG till urklipp"
+    },
+    "button": {
+      "exportToPng": "PNG",
+      "exportToSvg": "SVG",
+      "copyPngToClipboard": "Kopiera till urklipp"
+    }
+  },
   "encrypted": {
     "tooltip": "Dina skisser är krypterade från ände till ände så Excalidraws servrar kommer aldrig att se dem.",
     "link": "Blogginlägg om kryptering från ände till ände i Excalidraw"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "Använd {{shortcut}} för att klistra in som ett enda element,\neller klistra in i en befintlig textredigerare"
   },
   "colors": {
-    "ffffff": "Vit",
-    "f8f9fa": "Grå 0",
-    "f1f3f5": "Grå 1",
-    "fff5f5": "Röd 0",
-    "fff0f6": "Rosa 0",
-    "f8f0fc": "Lila 0",
-    "f3f0ff": "Violett 0",
-    "edf2ff": "Indigo 0",
-    "e7f5ff": "Blå 0",
-    "e3fafc": "Turkos 0",
-    "e6fcf5": "Blågrön 0",
-    "ebfbee": "Grön 0",
-    "f4fce3": "Limegrön 0",
-    "fff9db": "Gul 0",
-    "fff4e6": "Orange 0",
     "transparent": "Genomskinlig",
-    "ced4da": "Grå 4",
-    "868e96": "Grå 6",
-    "fa5252": "Röd 6",
-    "e64980": "Rosa 6",
-    "be4bdb": "Lila 6",
-    "7950f2": "Violett 6",
-    "4c6ef5": "Indigo 6",
-    "228be6": "Blå 6",
-    "15aabf": "Turkos 6",
-    "12b886": "Blågrön 6",
-    "40c057": "Grön 6",
-    "82c91e": "Limegrön 6",
-    "fab005": "Gul 6",
-    "fd7e14": "Orange 6",
-    "000000": "Svart",
-    "343a40": "Grå 8",
-    "495057": "Grå 7",
-    "c92a2a": "Röd 9",
-    "a61e4d": "Rosa 9",
-    "862e9c": "Lila 9",
-    "5f3dc4": "Violett 9",
-    "364fc7": "Indigo 9",
-    "1864ab": "Blå 9",
-    "0b7285": "Turkos 9",
-    "087f5b": "Blågrön 9",
-    "2b8a3e": "Grön 9",
-    "5c940d": "Limegrön 9",
-    "e67700": "Gul 9",
-    "d9480f": "Orange 9"
+    "black": "Svart",
+    "white": "Vit",
+    "red": "Röd",
+    "pink": "Rosa",
+    "grape": "Lila",
+    "violet": "Violett",
+    "gray": "Grå",
+    "blue": "Blå",
+    "cyan": "Turkos",
+    "teal": "Blågrön",
+    "green": "Grön",
+    "yellow": "Gul",
+    "orange": "Orange",
+    "bronze": "Brons"
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "Välj ett verktyg & börja rita!",
       "helpHint": "Genvägar & hjälp"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "Mest frekvent använda anpassade färger",
+    "colors": "Färger",
+    "shades": "Nyanser",
+    "hexCode": "Hex-kod",
+    "noShades": "Inga nyanser tillgängliga för denna färg"
   }
 }
diff --git a/src/locales/ta-IN.json b/src/locales/ta-IN.json
index 6dc865766..f7022391f 100644
--- a/src/locales/ta-IN.json
+++ b/src/locales/ta-IN.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "முக்கோணம்",
     "fontSize": "எழுத்துரு அளவு",
     "fontFamily": "எழுத்துரு குடும்பம்",
-    "onlySelected": "தேர்ந்ததை மட்டும்",
-    "withBackground": "பின்புலம்",
-    "exportEmbedScene": "காட்சியை உட்பொதி",
-    "exportEmbedScene_details": "காட்சி தரவு ஏற்றுமதி செய்யப்பட்ட PNG/SVG கோப்பினுள் சேமிக்கப்படும் இதனால் காட்சியை அதிலிருந்து மீட்டெடுக்க முடியும். ஏற்றுமதி செய்யப்பட்ட கோப்பின் அளவை அதிகரிக்கும்.",
     "addWatermark": "\"எக்ஸ்கேலிட்ரா கொண்டு ஆனது\"-ஐச் சேர்",
     "handDrawn": "கையால்-வரைந்த",
     "normal": "இயல்பு",
@@ -54,6 +50,7 @@
     "veryLarge": "மிகப் பெரிய",
     "solid": "திடமான",
     "hachure": "மலைக்குறிக்கோடு",
+    "zigzag": "கோணல்மாணல்",
     "crossHatch": "குறுக்குகதவு",
     "thin": "மெல்லிய",
     "bold": "பட்டை",
@@ -99,7 +96,6 @@
     "flipHorizontal": "கிடைமட்டமாக புரட்டு",
     "flipVertical": "செங்குத்தாக புரட்டு",
     "viewMode": "பார்வை பயன்முறை",
-    "toggleExportColorScheme": "",
     "share": "பகிர்",
     "showStroke": "கீறல் நிற எடுப்பானைக் காட்டு",
     "showBackground": "பின்னணி நிற எடுப்பானைக் காட்டு",
@@ -109,8 +105,8 @@
     "decreaseFontSize": "எழுத்துரு அளவைக் குறை",
     "increaseFontSize": "எழுத்துரு அளவை அதிகரி",
     "unbindText": "உரையைப் பிணைவவிழ்",
-    "bindText": "",
-    "createContainerFromText": "",
+    "bindText": "உரையைக் கொள்கலனுக்குப் பிணை",
+    "createContainerFromText": "உரையைக் கொள்கலனுள் சுருட்டு",
     "link": {
       "edit": "தொடுப்பைத் திருத்து",
       "create": "தொடுப்பைப் படை",
@@ -118,7 +114,7 @@
     },
     "lineEditor": {
       "edit": "தொடுப்பைத் திருத்து",
-      "exit": ""
+      "exit": "வரி திருத்தியிலிருந்து வெளியேறு"
     },
     "elementLock": {
       "lock": "பூட்டு",
@@ -127,7 +123,10 @@
       "unlockAll": "எல்லாம் பூட்டவிழ்"
     },
     "statusPublished": "வெளியிடப்பட்டது",
-    "sidebarLock": "பக்கப்பட்டையைத் திறந்தே வை"
+    "sidebarLock": "பக்கப்பட்டையைத் திறந்தே வை",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": "கித்தானிலிருந்து நிறம் தேர்ந்தெடு"
   },
   "library": {
     "noItems": "இதுவரை உருப்படிகள் சேரக்கப்படவில்லை...",
@@ -137,13 +136,9 @@
   "buttons": {
     "clearReset": "கித்தானை அகரமாக்கு",
     "exportJSON": "கோப்புக்கு ஏற்றுமதிசெய்",
-    "exportImage": "",
+    "exportImage": "படத்தை ஏற்றுமதிசெய்...",
     "export": "இதில் சேமி...",
-    "exportToPng": "PNGக்கு ஏற்றுமதிசெய்",
-    "exportToSvg": "SVGக்கு ஏற்றுமதிசெய்",
     "copyToClipboard": "நகலகத்திற்கு நகலெடு",
-    "copyPngToClipboard": "PNGஐ நகலகத்திற்கு நகலெடு",
-    "scale": "அளவு",
     "save": "தற்போதைய கோப்புக்குச் சேமி",
     "saveAs": "இப்படி சேமி",
     "load": "திற",
@@ -194,7 +189,7 @@
     "resetLibrary": "இது உங்கள் நுலகத்தைத் துடைக்கும். நீங்கள் உறுதியா?",
     "removeItemsFromsLibrary": "{{count}} உருப்படி(கள்)-ஐ உம் நூலகத்திலிருந்து அழிக்கவா?",
     "invalidEncryptionKey": "மறையாக்க விசை 22 வரியுருக்கள் கொண்டிருக்கவேண்டும். நேரடி கூட்டுப்பணி முடக்கப்பட்டது.",
-    "collabOfflineWarning": ""
+    "collabOfflineWarning": "இணைய இணைப்பு இல்லை.\nஉமது மாற்றங்கள் சேமிக்கப்படா!"
   },
   "errors": {
     "unsupportedFileType": "ஆதரிக்கப்படா கோப்பு வகை.",
@@ -202,24 +197,15 @@
     "fileTooBig": "கோப்பு மிகப்பெரிது. அனுமதிக்கப்பட்ட அதிகபட்ச அளவு {{maxSize}}.",
     "svgImageInsertError": "எஸ்விஜி படத்தைப் புகுத்தவியலா. எஸ்விஜியின் மார்க்அப் செல்லாததாக தெரிகிறது.",
     "invalidSVGString": "செல்லாத SVG.",
-    "cannotResolveCollabServer": "",
+    "cannotResolveCollabServer": "கூட்டுப்பணிச் சேவையகத்துடன் இணைக்க முடியவில்லை. பக்கத்தை மீளேற்றி மீண்டும் முயலவும்.",
     "importLibraryError": "நூலகத்தை ஏற்ற முடியவில்லை",
-    "collabSaveFailed": "",
-    "collabSaveFailed_sizeExceeded": "",
+    "collabSaveFailed": "பின்முனை தரவுத்தளத்தில் சேமிக்க முடியவில்லை. சிக்கல்கள் நீடித்தால், உமது வேலைகளை இழக்காமலிருப்பதை உறுதிசெய்ய உமது கோப்பை உள்ளகத்தில் சேமிக்க வேண்டும்.",
+    "collabSaveFailed_sizeExceeded": "பின்முனை தரவுத்தளத்தில் சேமிக்க முடியவில்லை, கித்தான் மிகப்பெரிதாகத் தெரிகிறது. உமது வேலைகளை இழக்காமலிருப்பதை உறுதிசெய்ய உமது கோப்பை உள்ளகத்தில் சேமிக்க வேண்டும்.",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "",
     "link": "தேர்தெடுத்த வடிவத்திற்குத் தொடுப்பைச் சேர்/ புதுப்பி",
     "eraser": "அழிப்பி",
-    "hand": ""
+    "frame": "",
+    "hand": "",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "கித்தான் செயல்கள்",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "துணுக்குதவி: தூரத்திலுள்ள உறுப்புகளைப் நெருக்கமாக நகர்த்தப்பார்."
   },
   "errorSplash": {
-    "headingMain_pre": "பிழையைச் சந்தித்தீரா. முயலவும் ",
-    "headingMain_button": "பக்கத்தை மீண்டுமேற்றுகிறது.",
-    "clearCanvasMessage": "மீண்டுமேற்றல் வேலைசெய்யவிட்டால், முயற்சி ",
-    "clearCanvasMessage_button": "கித்தானைத் துடைக்கிறது.",
+    "headingMain": "பிழையைச் சந்தித்தீரா. முயலவும் <button>பக்கத்தை மீண்டுமேற்றுகிறது.</button>",
+    "clearCanvasMessage": "மீண்டுமேற்றல் வேலைசெய்யவிட்டால், முயற்சி <button>கித்தானைத் துடைக்கிறது.</button>",
     "clearCanvasCaveat": " இது வேலையை இழக்கக்கூடும் ",
-    "trackedToSentry_pre": "இனங்காணியில் பிழை ",
-    "trackedToSentry_post": " எங்கள் இயங்குதளத்தில் தடமறியப்பட்டது.",
-    "openIssueMessage_pre": "பிழையில் உம் காட்சி தகவலை உள்ளடக்காமலிருக்க நாங்கள் மிக எச்சரிக்கையாக இருந்தோம். உம் காட்சி தனிப்பட்டதில்லையெனில், பின்தொடர்வதற்கு பரிசீலிக்கவும் எங்கள் ",
-    "openIssueMessage_button": "பிழை தடமி.",
-    "openIssueMessage_post": " கீழுள்ள தகவலை நகலெடுத்து ஒட்டி GitHub சிக்கலுள் உள்ளடக்கவும்.",
+    "trackedToSentry": "இனங்காணியில் பிழை {{eventId}} எங்கள் இயங்குதளத்தில் தடமறியப்பட்டது.",
+    "openIssueMessage": "பிழையில் உம் காட்சி தகவலை உள்ளடக்காமலிருக்க நாங்கள் மிக எச்சரிக்கையாக இருந்தோம். உம் காட்சி தனிப்பட்டதில்லையெனில், பின்தொடர்வதற்கு பரிசீலிக்கவும் எங்கள் <button>பிழை தடமி.</button> கீழுள்ள தகவலை நகலெடுத்து ஒட்டி GitHub சிக்கலுள் உள்ளடக்கவும்.",
     "sceneContent": "காட்சி உள்ளடக்கம்:"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "தேவைப்டுகிறது",
       "website": "செல்லத்தக்க உரலியை உள்ளிடு"
     },
-    "noteDescription": {
-      "pre": "உம் நூலகத்தைச் சமர்ப்பி உள்ளடக்குவதற்கு ",
-      "link": "பொது நூலக களஞ்சியத்தில்",
-      "post": "பிற மக்களவர்களின் சித்திரங்களில் பயன்படுத்த."
-    },
-    "noteGuidelines": {
-      "pre": "நூலகம் முதலில் கைமுறையாக ஒப்புக்கொள்ளப்படவேண்டும். வாசிக்கவும் ",
-      "link": "வழிகாட்டுதல்களைச்",
-      "post": " சமர்ப்பிக்கும் முன்பு. கோரப்பட்டால் தொடர்புகொள்ள மற்றும் மாற்றங்கள் செய்ய உமக்கொரு GitHub கணக்கு தேவை, ஆனால் அது கண்டிப்பாக தேவையல்ல."
-    },
-    "noteLicense": {
-      "pre": "சமர்ப்பிப்பதனால், நூலகம் இதனடியில் பிரசரிக்கப்பட ஏற்கிறீர்கள் ",
-      "link": "MIT உரிமம், ",
-      "post": "சுருக்கமாக எவருமிதைப் வரையறையின்றி பயன்படுத்தலாமென குறிக்கிறது."
-    },
+    "noteDescription": "உம் நூலகத்தைச் சமர்ப்பி உள்ளடக்குவதற்கு <link>பொது நூலக களஞ்சியத்தில்</link>பிற மக்களவர்களின் சித்திரங்களில் பயன்படுத்த.",
+    "noteGuidelines": "நூலகம் முதலில் கைமுறையாக ஒப்புக்கொள்ளப்படவேண்டும். வாசிக்கவும் <link>வழிகாட்டுதல்களைச்</link> சமர்ப்பிக்கும் முன்பு. கோரப்பட்டால் தொடர்புகொள்ள மற்றும் மாற்றங்கள் செய்ய உமக்கொரு GitHub கணக்கு தேவை, ஆனால் அது கண்டிப்பாக தேவையல்ல.",
+    "noteLicense": "சமர்ப்பிப்பதனால், நூலகம் இதனடியில் பிரசரிக்கப்பட ஏற்கிறீர்கள் <link>MIT உரிமம், </link>சுருக்கமாக எவருமிதைப் வரையறையின்றி பயன்படுத்தலாமென குறிக்கிறது.",
     "noteItems": "வடிக்கட்டக்கூடியதாகவிருக்க ஒவ்வொரு நூலகவுருப்படிக்கும் சொந்த பெயர் இருக்கவேண்டும். பின்வரும் நூலகவுருப்படிகள் உள்ளடக்கப்படும்:",
     "atleastOneLibItem": "ஆரம்பிக்க ஒரு நூலக உருப்படியையாவது தேர்ந்தெடுக்கவும்",
     "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "நூலகம் சமர்ப்பிக்கப்பட்டது",
-    "content": "நன்றி {{authorName}}. உமது நூலகம் மதிப்பாய்விற்காக சமர்ப்பிக்கப்பட்டது. நிலையை நீங்கள் தடமறியலாம்",
-    "link": "இங்கே"
+    "content": "நன்றி {{authorName}}. உமது நூலகம் மதிப்பாய்விற்காக சமர்ப்பிக்கப்பட்டது. நிலையை நீங்கள் தடமறியலாம்<link>இங்கே</link>"
   },
   "confirmDialog": {
     "resetLibrary": "நூலகத்தை அகரமாக்கு",
     "removeItemsFromLib": "நூலகத்திலிருந்து தேர்ந்தெடுத்த உருப்படிகளை நீக்கு"
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "உம் சித்திரங்கள் இருமுனை மறையாக்கம் செய்யப்பட்டவையாதலால் எக்ஸ்கேலிட்ராவின் சேவையகங்கள் அவற்றை ஒருபோதும் பார்க்கா.",
     "link": "எக்ஸ்கேலிட்ராவில் இருமுனை மறையாக்கம் மீதான வலைப்பூ இடுகை"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": ""
   },
   "colors": {
-    "ffffff": "வெள்ளை",
-    "f8f9fa": "சாம்பல்நிறம் 0",
-    "f1f3f5": "சாம்பல்நிறம் 1",
-    "fff5f5": "சிகப்பு 0",
-    "fff0f6": "இளஞ்சிவப்பு 0",
-    "f8f0fc": "திராட்சை 0",
-    "f3f0ff": "ஊதா 0",
-    "edf2ff": "கருநீலம் 0",
-    "e7f5ff": "நீலம் 0",
-    "e3fafc": "மயில்நிறம் 0",
-    "e6fcf5": "டீல் 0",
-    "ebfbee": "பச்சை 0",
-    "f4fce3": "தேசிக்காய்நிறம் 0",
-    "fff9db": "மஞ்சள் 0",
-    "fff4e6": "ஆரஞ்சு 0",
     "transparent": "ஒளிபுகுத்தன்மை",
-    "ced4da": "சாம்பல்நிறம் 4",
-    "868e96": "சாம்பல்நிறம் 6",
-    "fa5252": "சிகப்பு 6",
-    "e64980": "இளஞ்சிவப்பு 6",
-    "be4bdb": "திராட்சை 6",
-    "7950f2": "ஊதா 6",
-    "4c6ef5": "கருநீலம் 6",
-    "228be6": "நீலம் 6",
-    "15aabf": "மயில்நிறம் 6",
-    "12b886": "டீல் 6",
-    "40c057": "பச்சை 6",
-    "82c91e": "தேசிக்காய்நிறம் 6",
-    "fab005": "மஞ்சள் 6",
-    "fd7e14": "ஆரஞ்சு 6",
-    "000000": "கருப்பு",
-    "343a40": "சாம்பல்நிறம் 8",
-    "495057": "சாம்பல்நிறம் 7",
-    "c92a2a": "சிகப்பு 9",
-    "a61e4d": "இளஞ்சிவப்பு 9",
-    "862e9c": "திராட்சை 9",
-    "5f3dc4": "ஊதா 9",
-    "364fc7": "கருநீலம் 9",
-    "1864ab": "நீலம் 9",
-    "0b7285": "மயில்நிறம் 9",
-    "087f5b": "டீல் 9",
-    "2b8a3e": "பச்சை 9",
-    "5c940d": "தேசிக்காய்நிறம் 9",
-    "e67700": "மஞ்சள் 9",
-    "d9480f": "ஆரஞ்சு 9"
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "கருவியைத் தேர்ந்தெடு & வரை!",
       "helpHint": "குறுக்குவழிகள் & உதவி"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/th-TH.json b/src/locales/th-TH.json
index 2dcb9cb43..9d06b8cbb 100644
--- a/src/locales/th-TH.json
+++ b/src/locales/th-TH.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "",
     "fontSize": "ขนาดตัวอักษร",
     "fontFamily": "แบบตัวอักษร",
-    "onlySelected": "เฉพาะที่เลือก",
-    "withBackground": "พื้นหลัง",
-    "exportEmbedScene": "",
-    "exportEmbedScene_details": "",
     "addWatermark": "เพิ่มลายน้ำ \"สร้างด้วย Excalidraw\"",
     "handDrawn": "ลายมือ",
     "normal": "ปกติ",
@@ -54,6 +50,7 @@
     "veryLarge": "ใหญ่มาก",
     "solid": "",
     "hachure": "",
+    "zigzag": "",
     "crossHatch": "",
     "thin": "บาง",
     "bold": "หนา",
@@ -99,7 +96,6 @@
     "flipHorizontal": "พลิกแนวนอน",
     "flipVertical": "พลิกแนวตั้ง",
     "viewMode": "โหมดมุมมอง",
-    "toggleExportColorScheme": "",
     "share": "แชร์",
     "showStroke": "",
     "showBackground": "",
@@ -127,7 +123,10 @@
       "unlockAll": "ปลดล็อกทั้งหมด"
     },
     "statusPublished": "เผยแพร่",
-    "sidebarLock": ""
+    "sidebarLock": "",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "",
@@ -139,11 +138,7 @@
     "exportJSON": "ส่งออกไปยังไฟล์",
     "exportImage": "ส่งออกเป็นรูปภาพ",
     "export": "บันทึกไปยัง",
-    "exportToPng": "ส่งออกไปเป็น PNG",
-    "exportToSvg": "ส่งออกไปเป็น SVG",
     "copyToClipboard": "คัดลอกไปยังคลิปบอร์ด",
-    "copyPngToClipboard": "คัดลอก PNG ไปยังคลิปบอร์ด",
-    "scale": "อัตราส่วน",
     "save": "",
     "saveAs": "",
     "load": "เปิด",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "",
     "collabSaveFailed_sizeExceeded": "",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": "Discord"
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "",
     "link": "",
     "eraser": "ยางลบ",
-    "hand": ""
+    "frame": "",
+    "hand": "",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": ""
   },
   "errorSplash": {
-    "headingMain_pre": "",
-    "headingMain_button": "กำลังรีโหลดหน้า",
-    "clearCanvasMessage": "ถ้าโหลดไม่ได้ ให้ลอง ",
-    "clearCanvasMessage_button": "เคลียร์ผืนผ้าใบ",
+    "headingMain": "<button>กำลังรีโหลดหน้า</button>",
+    "clearCanvasMessage": "ถ้าโหลดไม่ได้ ให้ลอง <button>เคลียร์ผืนผ้าใบ</button>",
     "clearCanvasCaveat": "",
-    "trackedToSentry_pre": "",
-    "trackedToSentry_post": "",
-    "openIssueMessage_pre": "",
-    "openIssueMessage_button": "",
-    "openIssueMessage_post": "",
+    "trackedToSentry": "",
+    "openIssueMessage": "",
     "sceneContent": ""
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "",
       "website": ""
     },
-    "noteDescription": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
-    "noteGuidelines": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
-    "noteLicense": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
+    "noteDescription": "",
+    "noteGuidelines": "",
+    "noteLicense": "",
     "noteItems": "",
     "atleastOneLibItem": "",
     "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "",
-    "content": "",
-    "link": ""
+    "content": ""
   },
   "confirmDialog": {
     "resetLibrary": "",
     "removeItemsFromLib": ""
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "",
     "link": ""
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": ""
   },
   "colors": {
-    "ffffff": "สีขาว",
-    "f8f9fa": "สีเทา 0",
-    "f1f3f5": "สีเทา 1",
-    "fff5f5": "สีแดง 0",
-    "fff0f6": "สีชมพู 0",
-    "f8f0fc": "",
-    "f3f0ff": "",
-    "edf2ff": "",
-    "e7f5ff": "",
-    "e3fafc": "",
-    "e6fcf5": "",
-    "ebfbee": "",
-    "f4fce3": "",
-    "fff9db": "",
-    "fff4e6": "",
     "transparent": "",
-    "ced4da": "สีเทา 4",
-    "868e96": "สีเทา 6",
-    "fa5252": "สีแดง 6",
-    "e64980": "สีชมพู 6",
-    "be4bdb": "",
-    "7950f2": "",
-    "4c6ef5": "",
-    "228be6": "",
-    "15aabf": "",
-    "12b886": "",
-    "40c057": "",
-    "82c91e": "",
-    "fab005": "",
-    "fd7e14": "",
-    "000000": "",
-    "343a40": "",
-    "495057": "",
-    "c92a2a": "",
-    "a61e4d": "",
-    "862e9c": "",
-    "5f3dc4": "",
-    "364fc7": "",
-    "1864ab": "",
-    "0b7285": "",
-    "087f5b": "",
-    "2b8a3e": "",
-    "5c940d": "",
-    "e67700": "",
-    "d9480f": ""
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "",
       "helpHint": ""
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/tr-TR.json b/src/locales/tr-TR.json
index 78dd9329a..8130134ef 100644
--- a/src/locales/tr-TR.json
+++ b/src/locales/tr-TR.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Üçgen",
     "fontSize": "Yazı tipi boyutu",
     "fontFamily": "Yazı tipi ailesi",
-    "onlySelected": "Sadece seçilen",
-    "withBackground": "Arka plan",
-    "exportEmbedScene": "Gömülü sahne",
-    "exportEmbedScene_details": "Sahne verileri, sahnenin geri yüklenebilmesi için dışa aktarılan PNG/SVG dosyasına kaydedilecektir.\nDışa aktarılan dosya boyutunu artıracaktır.",
     "addWatermark": "\"Excalidraw ile yapıldı\" yazısını ekle",
     "handDrawn": "El-yazısı",
     "normal": "Normal",
@@ -54,6 +50,7 @@
     "veryLarge": "Çok geniş",
     "solid": "Dolu",
     "hachure": "Taralı",
+    "zigzag": "",
     "crossHatch": "Çapraz-taralı",
     "thin": "İnce",
     "bold": "Kalın",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Yatay döndür",
     "flipVertical": "Dikey döndür",
     "viewMode": "Görünüm modu",
-    "toggleExportColorScheme": "Renk şemasını dışa aktar/aktarma",
     "share": "Paylaş",
     "showStroke": "Kontur için renk seçiciyi göster",
     "showBackground": "Arkaplan için renk seçiciyi göster",
@@ -127,7 +123,10 @@
       "unlockAll": "Hepsinin kilidini kaldır"
     },
     "statusPublished": "Yayınlandı",
-    "sidebarLock": "Kenar çubuğu açık kalsın"
+    "sidebarLock": "Kenar çubuğu açık kalsın",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "Öğe eklenmedi...",
@@ -139,11 +138,7 @@
     "exportJSON": "Dosyaya aktar",
     "exportImage": "Resimleri dışa aktar...",
     "export": "Şuraya kaydet...",
-    "exportToPng": "PNG olarak dışa aktar",
-    "exportToSvg": "SVG olarak dışa aktar",
     "copyToClipboard": "Panoya kopyala",
-    "copyPngToClipboard": "PNG'yi panoya kopyala",
-    "scale": "Ölçek",
     "save": "Geçerli dosyaya kaydet",
     "saveAs": "Farklı kaydet",
     "load": "Aç",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Backend veritabanına kaydedilemedi. Eğer problem devam ederse, çalışmanızı korumak için dosyayı yerel olarak kaydetmelisiniz.",
     "collabSaveFailed_sizeExceeded": "Backend veritabanına kaydedilemedi; tuval çok büyük. Çalışmanızı korumak için dosyayı yerel olarak kaydetmelisiniz.",
     "brave_measure_text_error": {
-      "start": "Görünüşe göre Brave gezginini",
-      "aggressive_block_fingerprint": "Agresif parmakizi bloklama",
-      "setting_enabled": "ayarları etkin şeklide kullanıyor gibisiniz",
-      "break": "Bu bir takım sorunlara yol açabilir",
-      "text_elements": "Metin elementlerinde bozulma",
-      "in_your_drawings": "çizimlerde bozulma gibi",
-      "strongly_recommend": "Bu ayarı devre dışı bırakmanızı şiddetle öneririz. Şu adımları",
-      "steps": "takip ederek",
-      "how": "nasıl yapılacağını",
-      "disable_setting": " Yapabilirsiniz. Eğer devre dışı bırakmak işe yaramazsa, lütfen",
-      "issue": "konu hakkında",
-      "write": "github'da sorun belirtin, ya da bize",
-      "discord": "Discord üzerinden iletin"
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Kalem modu - dokunmayı engelle",
     "link": "Seçilen şekil için bağlantı Ekle/Güncelle",
     "eraser": "Silgi",
-    "hand": ""
+    "frame": "",
+    "hand": "",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Tuval eylemleri",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "İpucu: En uzaktaki elemanları birbirine yakınlaştırmayı deneyin."
   },
   "errorSplash": {
-    "headingMain_pre": "Hata oluştu. Lütfen ",
-    "headingMain_button": "sayfayı yenilemeyi deneyin.",
-    "clearCanvasMessage": "Yenileme sonrası sorun devam ediyorsa, lütfen ",
-    "clearCanvasMessage_button": "çizim alanını temizlemeyi deneyin.",
+    "headingMain": "Hata oluştu. Lütfen <button>sayfayı yenilemeyi deneyin.</button>",
+    "clearCanvasMessage": "Yenileme sonrası sorun devam ediyorsa, lütfen <button>çizim alanını temizlemeyi deneyin.</button>",
     "clearCanvasCaveat": " Bu, yaptığınız değişiklikleri sıfırlayacak ",
-    "trackedToSentry_pre": "Tanımlayıcı ile ilgili hata ",
-    "trackedToSentry_post": " sistemimize yakalandı.",
-    "openIssueMessage_pre": "Sahne bilginizi hata mesajına yansıtmamak için oldukça dikkatli davrandık. Eğer sahneniz gizli değilse hatayı lütfen şuradan takip edin ",
-    "openIssueMessage_button": "hata takibi.",
-    "openIssueMessage_post": " Lütfen aşağıya GitHub sorununa kopyalayarak ve yapıştırarak bilgi ekleyin.",
+    "trackedToSentry": "Tanımlayıcı ile ilgili hata {{eventId}} sistemimize yakalandı.",
+    "openIssueMessage": "Sahne bilginizi hata mesajına yansıtmamak için oldukça dikkatli davrandık. Eğer sahneniz gizli değilse hatayı lütfen şuradan takip edin <button>hata takibi.</button> Lütfen aşağıya GitHub sorununa kopyalayarak ve yapıştırarak bilgi ekleyin.",
     "sceneContent": "Sahne içeriği:"
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "Gerekli",
       "website": "Geçerli bir URL girin"
     },
-    "noteDescription": {
-      "pre": "Submit your library to be included in the ",
-      "link": "genel kütüphane reposu",
-      "post": "diğer insanlar çizimlerinde kullanabilsin diye."
-    },
-    "noteGuidelines": {
-      "pre": "Önce kütüphane elle onaylanmalı. şunu okuyun ",
-      "link": "yönergeler",
-      "post": " onaylamadan önce. gerekli olması halinde iletişim kurmak için ve değişiklik için Github hesabı gerekli, ama çok da illaki olmalı değil."
-    },
-    "noteLicense": {
-      "pre": "Bunu onaylayarak, kütüğhanenin şu lisansla yayınlanmasını onaylıyorsunuz ",
-      "link": "MIT Lisans, ",
-      "post": "ki bu kısaca herkesin onu kısıtlama olmaksızın kullanabileceği anlamına gelmektedir."
-    },
+    "noteDescription": "Submit your library to be included in the <link>genel kütüphane reposu</link>diğer insanlar çizimlerinde kullanabilsin diye.",
+    "noteGuidelines": "Önce kütüphane elle onaylanmalı. şunu okuyun <link>yönergeler</link> onaylamadan önce. gerekli olması halinde iletişim kurmak için ve değişiklik için Github hesabı gerekli, ama çok da illaki olmalı değil.",
+    "noteLicense": "Bunu onaylayarak, kütüğhanenin şu lisansla yayınlanmasını onaylıyorsunuz <link>MIT Lisans, </link>ki bu kısaca herkesin onu kısıtlama olmaksızın kullanabileceği anlamına gelmektedir.",
     "noteItems": "Her kütüphane kendi ismine sahip olmalı ki tarama yapabilelim. Şu kütüphane ögeleri dahil edilecek:",
     "atleastOneLibItem": "Lütfen başlamak için en az bir tane kütüphane ögesi seçin",
     "republishWarning": "Not: seçilen ögelerden bir kısmı zaten yayınlanmış/gönderilmiş. Yalnızca mevcut kütüphane ve gönderileri güncellerken yeniden gönderme işlemi yapmalısınız."
   },
   "publishSuccessDialog": {
     "title": "Kütüphane gönderildi",
-    "content": "Teşekkürler {{authorName}}. Kütüphaneniz gözden geçirme için alındı. Durumu takip edebilirsiniz",
-    "link": "burada"
+    "content": "Teşekkürler {{authorName}}. Kütüphaneniz gözden geçirme için alındı. Durumu takip edebilirsiniz<link>burada</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Kütüphaneyi sıfırla",
     "removeItemsFromLib": "Seçilen ögeleri kütüphaneden kaldır"
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "Çizimleriniz uçtan-uca şifrelenmiştir, Excalidraw'ın sunucuları bile onları göremez.",
     "link": "Excalidraw'da uçtan uca şifreleme hakkında blog yazısı"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "Tekil obje olarak yapıştırmak için veya var olan bir metin editörüne yapıştırmak için {{shortcut}} kullanın"
   },
   "colors": {
-    "ffffff": "Beyaz",
-    "f8f9fa": "Gri 0",
-    "f1f3f5": "Gri 1",
-    "fff5f5": "Kırmızı 0",
-    "fff0f6": "Pembe 0",
-    "f8f0fc": "Koyu Mor 0",
-    "f3f0ff": "Mor 0",
-    "edf2ff": "Çivit 0",
-    "e7f5ff": "Mavi 0",
-    "e3fafc": "Camgöbeği 0",
-    "e6fcf5": "Deniz Mavisi 0",
-    "ebfbee": "Yeşil 0",
-    "f4fce3": "Yeşil 0",
-    "fff9db": "Sarı 0",
-    "fff4e6": "Turuncu 0",
     "transparent": "Şeffaf",
-    "ced4da": "Gri 4",
-    "868e96": "Gri 6",
-    "fa5252": "Kırmızı 6",
-    "e64980": "Pembe 6",
-    "be4bdb": "Koyu Mor 6",
-    "7950f2": "Mor 6",
-    "4c6ef5": "Çivit 6",
-    "228be6": "Mavi 6",
-    "15aabf": "Camgöbeği 6",
-    "12b886": "Deniz Mavisi 6",
-    "40c057": "Yeşil 6",
-    "82c91e": "Green 6",
-    "fab005": "Sarı 6",
-    "fd7e14": "Turuncu 6",
-    "000000": "Siyah",
-    "343a40": "Gri 8",
-    "495057": "Gri 7",
-    "c92a2a": "Kırmızı 9",
-    "a61e4d": "Pembe 9",
-    "862e9c": "Koyu Mor 9",
-    "5f3dc4": "Mor 9",
-    "364fc7": "Çivit 9",
-    "1864ab": "Mavi 9",
-    "0b7285": "Camgöbeği 9",
-    "087f5b": "Deniz Mavisi 9",
-    "2b8a3e": "Yeşil 9",
-    "5c940d": "Yeşil 9",
-    "e67700": "Sarı 9",
-    "d9480f": "Turuncu 9"
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "Bir araç seçin ve çizime başlayın!",
       "helpHint": "Kısayollar & yardım"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/uk-UA.json b/src/locales/uk-UA.json
index ed1a01e68..36d9fc7af 100644
--- a/src/locales/uk-UA.json
+++ b/src/locales/uk-UA.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Трикутник",
     "fontSize": "Розмір шрифту",
     "fontFamily": "Шрифт",
-    "onlySelected": "Тільки вибране",
-    "withBackground": "Фон",
-    "exportEmbedScene": "Вбудована сцена",
-    "exportEmbedScene_details": "Дані сцени будуть збережені в експортований файл PNG/SVG. Ця сцена може бути відновленна з нього, однак це збільшить розмір експортованого файлу.",
     "addWatermark": "Додати «Накреслене в Excalidraw»",
     "handDrawn": "Ручний апарат",
     "normal": "Звичайний",
@@ -54,6 +50,7 @@
     "veryLarge": "Дуже великий",
     "solid": "Суцільна",
     "hachure": "Штриховка",
+    "zigzag": "Зиґзаґ",
     "crossHatch": "Перехресна штриховка",
     "thin": "Тонкий",
     "bold": "Жирний",
@@ -72,7 +69,7 @@
     "layers": "Шари",
     "actions": "Дії",
     "language": "Мова",
-    "liveCollaboration": "Спільна робота у режимі реального часу...",
+    "liveCollaboration": "Спільна робота наживо...",
     "duplicateSelection": "Дублювати",
     "untitled": "Без назви",
     "name": "Ім’я",
@@ -99,7 +96,6 @@
     "flipHorizontal": "Віддзеркалити горизонтально",
     "flipVertical": "Віддзеркалити вертикально",
     "viewMode": "Режим перегляду",
-    "toggleExportColorScheme": "Переключити колірну схему експорту",
     "share": "Поділитися",
     "showStroke": "Показати палітру для контура",
     "showBackground": "Показати палітру для фону",
@@ -110,7 +106,7 @@
     "increaseFontSize": "Збільшити розмір шрифту",
     "unbindText": "Відв'язати текст",
     "bindText": "Прив’язати текст до контейнера",
-    "createContainerFromText": "",
+    "createContainerFromText": "Огорнути текст у контейнер",
     "link": {
       "edit": "Редагування посилання",
       "create": "Створити посилання",
@@ -127,7 +123,10 @@
       "unlockAll": "Розблокувати все"
     },
     "statusPublished": "Опубліковано",
-    "sidebarLock": "Не закривати бокове меню"
+    "sidebarLock": "Не закривати бокове меню",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "Тут поки пусто...",
@@ -139,11 +138,7 @@
     "exportJSON": "Експорт у файл",
     "exportImage": "Експорт зображення...",
     "export": "Зберегти як...",
-    "exportToPng": "Експортувати в PNG",
-    "exportToSvg": "Експортувати в SVG",
     "copyToClipboard": "Скопіювати до буферу обміну",
-    "copyPngToClipboard": "Скопіювати PNG до буферу обміну",
-    "scale": "Масштаб",
     "save": "Зберегти до поточного файлу",
     "saveAs": "Зберегти як",
     "load": "Відкрити",
@@ -204,22 +199,13 @@
     "invalidSVGString": "Недійсний SVG.",
     "cannotResolveCollabServer": "Не вдалося приєднатися до сервера. Перезавантажте сторінку та повторіть спробу.",
     "importLibraryError": "Не вдалося завантажити бібліотеку",
-    "collabSaveFailed": "",
-    "collabSaveFailed_sizeExceeded": "",
+    "collabSaveFailed": "Не вдалося зберегти у базу даних сервера. Якщо проблеми не зникнуть, Вам слід зберегти файл локально, щоб не втратити роботу.",
+    "collabSaveFailed_sizeExceeded": "Полотно завелике! Не вдалося зберегти у базу даних сервера. Вам слід зберегти файл локально, щоб не втратити свою роботу.",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "Ви використовуєте браузер Brave з увімкненим налаштуванням <bold>Агресивного Блокування Розпізнавання Пристрою</bold>.",
+      "line2": "Це може нашкодити <bold>текстовим елементам</bold> у ваших малюнках.",
+      "line3": "Ми наполегливо рекомендуємо вимкнути це налаштування. Виконайте наступні <link>кроки</link>, щоб виправити це.",
+      "line4": "Якщо вимкнення цього параметра не вирішує показ текстових елементів, тоді створіть, будь ласка, <issueLink>запит на розв'язання проблеми</issueLink> на нашому GitHub або напишіть нам у <discordLink>Discord</discordLink>"
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Режим пера - запобігання дотику",
     "link": "Додати/Оновити посилання для вибраної форми",
     "eraser": "Очищувач",
-    "hand": ""
+    "frame": "",
+    "hand": "Рука (інструмент для панорамування)",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Дії з полотном",
@@ -245,7 +233,7 @@
     "shapes": "Фігури"
   },
   "hints": {
-    "canvasPanning": "",
+    "canvasPanning": "Щоб перемістити полотно, утримуйте коліщатко миші або пробіл під час перетягування, або скористайтеся інструментом Рука",
     "linearElement": "Натисніть щоб додати кілька точок. Перетягніть щоб намалювати одну лінію",
     "freeDraw": "Натисніть і потягніть, відпустіть коли завершите",
     "text": "Порада: можна також додати текст, двічі клацнувши по будь-якому місці інструментом вибору",
@@ -256,7 +244,7 @@
     "resize": "Ви можете зберегти пропорції, утримуючи SHIFT під час зміни розміру,\nутримуйте ALT для змінення розміру від центру",
     "resizeImage": "Ви можете змінювати розміри утримуючи клавішу SHIFT, втримуйте клавішу ALT щоб змінювати розмір відносно центру",
     "rotate": "Ви можете обмежити кути, утримуючи SHIFT під час обертання",
-    "lineEditor_info": "",
+    "lineEditor_info": "Утримуйте CtrlOrCmd і двічі клацніть або натисніть CtrlOrCmd + Enter, щоб редагувати цятки",
     "lineEditor_pointSelected": "Натисніть Delete для видалення точку (точок), або Ctrl/Cmd+D для дублювання, перетаскування працює як звично",
     "lineEditor_nothingSelected": "Виберіть точку для редагування (втримуйте клавішу SHIFT для вибору кількох точок), або клавішу Alt для додавання нових точок",
     "placeImage": "Клацніть, щоб розмістити зображення, або натисніть та потягніть щоб змінити його розмір",
@@ -264,7 +252,7 @@
     "bindTextToElement": "Натисніть Enter, щоб додати текст",
     "deepBoxSelect": "Втримуйте Ctrl/Cmd для глибокого виділення та щоб попередити перетягування",
     "eraserRevert": "Втримуйте клавішу Alt, щоб повернути елементи позначені для видалення",
-    "firefox_clipboard_write": ""
+    "firefox_clipboard_write": "Цю функцію можна ввімкнути, встановивши значення \"true\" для налаштування \"dom.events.asyncClipboard.clipboardItem\". Перейдіть на сторінку «about:config», щоб змінити налаштування браузера у Firefox."
   },
   "canvasError": {
     "cannotShowPreview": "Не вдається показати попередній перегляд",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Порада: спробуйте підсунути найвіддаленіші елементи ближче один до одного."
   },
   "errorSplash": {
-    "headingMain_pre": "Сталася помилка. Спробуйте ",
-    "headingMain_button": "перезавантажити сторінку.",
-    "clearCanvasMessage": "Якщо перезавантаження не допоможе, спробуйте ",
-    "clearCanvasMessage_button": "очистити полотно.",
+    "headingMain": "Сталася помилка. Спробуйте <button>перезавантажити сторінку.</button>",
+    "clearCanvasMessage": "Якщо перезавантаження не допоможе, спробуйте <button>очистити полотно.</button>",
     "clearCanvasCaveat": " Це призведе до втрати роботи ",
-    "trackedToSentry_pre": "Помилка з ідентифікатором ",
-    "trackedToSentry_post": " було відслідковано в нашій системі.",
-    "openIssueMessage_pre": "Ми були дуже обережні, щоб не включати інформацію про ваші сцени в текст помилки. Якщо ваша сцена не була приватна, будь ласка, розгляньте можливість продовження на нашому ",
-    "openIssueMessage_button": "трекер помилок.",
-    "openIssueMessage_post": " Будь ласка, додайте інформацію нижче, скопіюючи і вставляючи у GitHub issue.",
+    "trackedToSentry": "Помилка з ідентифікатором {{eventId}} було відслідковано в нашій системі.",
+    "openIssueMessage": "Ми були дуже обережні, щоб не включати інформацію про ваші сцени в текст помилки. Якщо ваша сцена не була приватна, будь ласка, розгляньте можливість продовження на нашому <button>трекер помилок.</button> Будь ласка, додайте інформацію нижче, скопіюючи і вставляючи у GitHub issue.",
     "sceneContent": "Вміст сцени:"
   },
   "roomDialog": {
@@ -319,8 +302,8 @@
     "doubleClick": "подвійний клік",
     "drag": "перетягнути",
     "editor": "Редактор",
-    "editLineArrowPoints": "",
-    "editText": "",
+    "editLineArrowPoints": "Редагувати лінію/стрілки",
+    "editText": "Редагувати текст / додати позначку",
     "github": "Знайшли помилку? Повідомте",
     "howto": "Дотримуйтесь наших інструкцій",
     "or": "або",
@@ -361,34 +344,45 @@
       "required": "Обов’язково",
       "website": "Введіть дійсну URL-адресу"
     },
-    "noteDescription": {
-      "pre": "Подати бібліотеку, щоб вона була включена до ",
-      "link": "публічного репозиторія бібліотек",
-      "post": "для інших людей, для використання у їхніх полотнах."
-    },
-    "noteGuidelines": {
-      "pre": "Спочатку бібліотека повинна бути підтверджена. Будь ласка, прочитайте ",
-      "link": "настанови",
-      "post": " перед відправкою. Вам знадобиться обліковий запис на GitHub, щоб колаборувати та вносити зміни, але це не обов'язково."
-    },
-    "noteLicense": {
-      "pre": "Публікуючи, ви погоджуєтеся, що бібліотека буде опублікована під ",
-      "link": "Ліцензія MIT, ",
-      "post": ", простими словами, це означає що нею зможе користуватися будь-хто без обмежень."
-    },
+    "noteDescription": "Подати бібліотеку, щоб вона була включена до <link>публічного репозиторія бібліотек</link>для інших людей, для використання у їхніх полотнах.",
+    "noteGuidelines": "Спочатку бібліотека повинна бути підтверджена. Будь ласка, прочитайте <link>настанови</link> перед відправкою. Вам знадобиться обліковий запис на GitHub, щоб колаборувати та вносити зміни, але це не обов'язково.",
+    "noteLicense": "Публікуючи, ви погоджуєтеся, що бібліотека буде опублікована під <link>Ліцензія MIT, </link>, простими словами, це означає що нею зможе користуватися будь-хто без обмежень.",
     "noteItems": "Кожен об'єкт в бібліотеці повинен мати назву, це потрібно для пошуку та фільтрування. Наступні об'єкти бібліотеки будуть включені:",
     "atleastOneLibItem": "Будь ласка, виберіть принаймні один елемент бібліотеки, щоб почати",
     "republishWarning": "Зауважте, деякі з вибраних елементів позначені як вже опубліковані/надіслані. Ви повинні повторно надсилати елементи тільки при оновленні вже опублікованої бібліотеки чи при публікації бібліотеки."
   },
   "publishSuccessDialog": {
     "title": "Бібліотека відправлена",
-    "content": "Дякуємо, {{authorName}}. Ваша бібліотека була відправлена для розгляду. Ви можете відстежувати статус",
-    "link": "тут"
+    "content": "Дякуємо, {{authorName}}. Ваша бібліотека була відправлена для розгляду. Ви можете відстежувати статус<link>тут</link>"
   },
   "confirmDialog": {
     "resetLibrary": "Очистити бібліотеку",
     "removeItemsFromLib": "Видалити вибрані елементи з бібліотеки"
   },
+  "imageExportDialog": {
+    "header": "Експортувати зображення",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "Тільки вибране",
+      "darkMode": "Темний режим",
+      "embedScene": "Вбудована сцена",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "Експортувати в PNG",
+      "exportToSvg": "Експортувати у SVG",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "PNG",
+      "exportToSvg": "SVG",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "Ваші креслення захищені наскрізним шифруванням — сервери Excalidraw ніколи їх не побачать.",
     "link": "Допис у блозі на наскрізному шифруванні в Excalidraw"
@@ -417,66 +411,43 @@
     "fileSavedToFilename": "Збережено в {filename}",
     "canvas": "полотно",
     "selection": "виділення",
-    "pasteAsSingleElement": ""
+    "pasteAsSingleElement": "Використайте {{shortcut}} для вставки самостійного зразка або використайте в текстовому редакторі"
   },
   "colors": {
-    "ffffff": "Білий",
-    "f8f9fa": "Сірий 0",
-    "f1f3f5": "Сірий 1",
-    "fff5f5": "Червоний 0",
-    "fff0f6": "Рожевий 0",
-    "f8f0fc": "Виноград 0",
-    "f3f0ff": "Фіолетовий 0",
-    "edf2ff": "Індиго 0",
-    "e7f5ff": "Синій 0",
-    "e3fafc": "Ціан 0",
-    "e6fcf5": "Зеленувато-блакитний 0",
-    "ebfbee": "Зелений 0",
-    "f4fce3": "Лайм 0",
-    "fff9db": "Жовтий 0",
-    "fff4e6": "Помаранчевий 0",
     "transparent": "Прозорий",
-    "ced4da": "Сірий 4",
-    "868e96": "Сірий 6",
-    "fa5252": "Червоний 6",
-    "e64980": "Рожевий 6",
-    "be4bdb": "Виноград 6",
-    "7950f2": "Фіолетовий 6",
-    "4c6ef5": "Індиго 6",
-    "228be6": "Синій 6",
-    "15aabf": "Ціан 6",
-    "12b886": "Зеленувато-блакитний 6",
-    "40c057": "Зелений 6",
-    "82c91e": "Лайм 6",
-    "fab005": "Жовтий 6",
-    "fd7e14": "Помаранчевий 6",
-    "000000": "Чорний",
-    "343a40": "Сірий 8",
-    "495057": "Сірий 7",
-    "c92a2a": "Червоний 9",
-    "a61e4d": "Рожевий 9",
-    "862e9c": "Виноград 9",
-    "5f3dc4": "Фіолетовий 9",
-    "364fc7": "Індиго 9",
-    "1864ab": "Синій 9",
-    "0b7285": "Ціан 9",
-    "087f5b": "Зеленувато-блакитний 9",
-    "2b8a3e": "Зелений 9",
-    "5c940d": "Лаймовий 9",
-    "e67700": "Жовтий 9",
-    "d9480f": "Помаранчевий 9"
+    "black": "Чорний",
+    "white": "Білий",
+    "red": "Червоний",
+    "pink": "Рожевий",
+    "grape": "",
+    "violet": "Фіолетовий",
+    "gray": "Сірий",
+    "blue": "Синій",
+    "cyan": "Ціан",
+    "teal": "",
+    "green": "Зелений",
+    "yellow": "Жовтий",
+    "orange": "Помаранчевий",
+    "bronze": "Бронзовий"
   },
   "welcomeScreen": {
     "app": {
-      "center_heading": "",
-      "center_heading_plus": "",
-      "menuHint": ""
+      "center_heading": "Всі ваші дані збережено локально у Вашому браузері.",
+      "center_heading_plus": "Чи бажаєте перейти до Excalidraw+?",
+      "menuHint": "Експорт, налаштування, мови, ..."
     },
     "defaults": {
-      "menuHint": "",
-      "center_heading": "",
+      "menuHint": "Експорт, налаштування та багато іншого...",
+      "center_heading": "Діаграми. Робити. Просто.",
       "toolbarHint": "Оберіть інструмент і почніть малювати!",
       "helpHint": "Гарячі клавіші і допомога"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "Найбільш використовувані користувацькі кольори",
+    "colors": "Кольори",
+    "shades": "",
+    "hexCode": "Hex-код",
+    "noShades": ""
   }
 }
diff --git a/src/locales/vi-VN.json b/src/locales/vi-VN.json
index 887c32e3e..e692854a8 100644
--- a/src/locales/vi-VN.json
+++ b/src/locales/vi-VN.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "Tam giác",
     "fontSize": "Cỡ chữ",
     "fontFamily": "Phông chữ",
-    "onlySelected": "Chỉ lựa chọn",
-    "withBackground": "Nền",
-    "exportEmbedScene": "",
-    "exportEmbedScene_details": "",
     "addWatermark": "Làm với Excalidraw\"",
     "handDrawn": "Vẽ tay",
     "normal": "Bình thường",
@@ -54,6 +50,7 @@
     "veryLarge": "Rất lớn",
     "solid": "Đặc",
     "hachure": "Nét gạch gạch",
+    "zigzag": "Zigzag",
     "crossHatch": "Nét gạch chéo",
     "thin": "Mỏng",
     "bold": "In đậm",
@@ -86,7 +83,7 @@
     "removeFromLibrary": "Xóa khỏi thư viện",
     "libraryLoadingMessage": "Đang tải thư viện…",
     "libraries": "Xem thư viện",
-    "loadingScene": "",
+    "loadingScene": "Đang tải về…",
     "align": "Căn chỉnh",
     "alignTop": "Căn trên",
     "alignBottom": "Căn dưới",
@@ -99,12 +96,11 @@
     "flipHorizontal": "Lật ngang",
     "flipVertical": "Lật dọc",
     "viewMode": "Chế độ xem",
-    "toggleExportColorScheme": "",
     "share": "Chia sẻ",
     "showStroke": "Hiển thị chọn màu",
     "showBackground": "Hiện thị chọn màu nền",
     "toggleTheme": "",
-    "personalLib": "",
+    "personalLib": "Thư viện cá nhân",
     "excalidrawLib": "Thư viện Excalidraw",
     "decreaseFontSize": "Giảm cỡ chữ",
     "increaseFontSize": "Tăng cỡ chữ",
@@ -127,7 +123,10 @@
       "unlockAll": "Mở khóa tất cả"
     },
     "statusPublished": "Đã đăng tải",
-    "sidebarLock": "Giữ thanh bên luôn mở"
+    "sidebarLock": "Giữ thanh bên luôn mở",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "Chưa có món nào...",
@@ -139,28 +138,24 @@
     "exportJSON": "Xuất ra tập tin",
     "exportImage": "Xuất file ảnh...",
     "export": "Lưu vào...",
-    "exportToPng": "Xuất ra tập tin PNG",
-    "exportToSvg": "Xuất ra tập tin SVG",
     "copyToClipboard": "Sao chép vào bộ nhớ tạm",
-    "copyPngToClipboard": "",
-    "scale": "",
-    "save": "",
-    "saveAs": "",
-    "load": "",
-    "getShareableLink": "",
-    "close": "",
-    "selectLanguage": "",
-    "scrollBackToContent": "",
-    "zoomIn": "",
-    "zoomOut": "",
-    "resetZoom": "",
-    "menu": "",
-    "done": "",
-    "edit": "",
-    "undo": "",
-    "redo": "",
+    "save": "Lưu vào tập tin hiện tại",
+    "saveAs": "Lưu thành",
+    "load": "Mở",
+    "getShareableLink": "Tạo liên kết để chia sẻ",
+    "close": "Đóng",
+    "selectLanguage": "Chọn ngôn ngữ",
+    "scrollBackToContent": "Cuộn về nội dung chính",
+    "zoomIn": "Phóng to",
+    "zoomOut": "Thu nhỏ",
+    "resetZoom": "Đặt lại thu phóng",
+    "menu": "Bảng chọn",
+    "done": "Xong",
+    "edit": "Chỉnh sửa",
+    "undo": "Hoàn tác",
+    "redo": "Làm lại",
     "resetLibrary": "",
-    "createNewRoom": "",
+    "createNewRoom": "Tạo phòng mới",
     "fullScreen": "Toàn màn hình",
     "darkMode": "Chế độ tối",
     "lightMode": "Chế độ sáng",
@@ -181,7 +176,7 @@
     "importBackendFailed": "",
     "cannotExportEmptyCanvas": "Không thể xuất canvas trống.",
     "couldNotCopyToClipboard": "",
-    "decryptFailed": "",
+    "decryptFailed": "Không thể giải mã dữ liệu.",
     "uploadedSecurly": "",
     "loadSceneOverridePrompt": "",
     "collabStopOverridePrompt": "Dừng phiên sẽ ghi đè lên bản vẽ được lưu trữ cục bộ trước đó của bạn. Bạn có chắc không?\n\n(Nếu bạn muốn giữ bản vẽ cục bộ của mình, chỉ cần đóng tab trình duyệt.)",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "Không thể lưu vào cơ sở dữ liệu. Nếu vấn đề tiếp tục xảy ra, bạn nên lưu tệp vào máy để đảm bảo bạn không bị mất công việc.",
     "collabSaveFailed_sizeExceeded": "Không thể lưu vào cơ sở dữ liệu, canvas có vẻ quá lớn. Bạn nên lưu tệp cục bộ để đảm bảo bạn không bị mất công việc.",
     "brave_measure_text_error": {
-      "start": "Có vẻ bạn đang sử dụng trình duyện Brave với chức năng",
-      "aggressive_block_fingerprint": "Aggressively Block Fingerprinting",
-      "setting_enabled": "được bật",
-      "break": "Điều này có thể xảy ra lỗi các",
-      "text_elements": "Yếu Tố Chữ",
-      "in_your_drawings": "trong bản vẽ của bạn",
-      "strongly_recommend": "Chúng tôi khuyên rằng bạn nên tắt chức năng này. Bạn có thể theo",
-      "steps": "các bước sau đây",
-      "how": "để tắt nó",
-      "disable_setting": " Nếu tắt chức năng này vẫn không sửa lại lỗi hiện thị các yếu tố chữ, hảy mở",
-      "issue": "issue",
-      "write": "trên trang GitHUb của chúng tôi, hoặc nhắn chúng tôi tại",
-      "discord": "Discord"
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "Chế độ bút vẽ - ngăn ngừa chạm nhầm",
     "link": "Thêm/ Chỉnh sửa liên kết cho hình được chọn",
     "eraser": "Xóa",
-    "hand": "Tay kéo"
+    "frame": "",
+    "hand": "Tay kéo",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "Hành động canvas",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "Mẹo: hãy thử di chuyển các elements nhất lại gần nhau hơn một chút."
   },
   "errorSplash": {
-    "headingMain_pre": "",
-    "headingMain_button": "",
-    "clearCanvasMessage": "Nếu không tải lại được, hãy thử ",
-    "clearCanvasMessage_button": "dọn canvas.",
+    "headingMain": "",
+    "clearCanvasMessage": "Nếu không tải lại được, hãy thử <button>dọn canvas.</button>",
     "clearCanvasCaveat": " Điều này sẽ dẫn đến mất dữ liệu bạn đã làm ",
-    "trackedToSentry_pre": "",
-    "trackedToSentry_post": "",
-    "openIssueMessage_pre": "",
-    "openIssueMessage_button": "",
-    "openIssueMessage_post": "",
+    "trackedToSentry": "",
+    "openIssueMessage": "",
     "sceneContent": ""
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "",
       "website": ""
     },
-    "noteDescription": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
-    "noteGuidelines": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
-    "noteLicense": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
+    "noteDescription": "",
+    "noteGuidelines": "",
+    "noteLicense": "",
     "noteItems": "Từng món trong thư viện phải có tên riêng để có thể lọc. Các món thư viện sau đây sẽ thêm:",
     "atleastOneLibItem": "Vui lòng chọn ít nhất một món thư viện để bắt đầu",
     "republishWarning": "Lưu ý: một số món đã chọn được đánh dấu là đã xuất bản/đã gửi. Bạn chỉ nên gửi lại các món khi cập nhật thư viện hiện có hoặc gửi."
   },
   "publishSuccessDialog": {
     "title": "",
-    "content": "",
-    "link": ""
+    "content": ""
   },
   "confirmDialog": {
     "resetLibrary": "",
     "removeItemsFromLib": "Xóa món đã chọn khỏi thư viện"
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "",
     "link": ""
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": ""
   },
   "colors": {
-    "ffffff": "",
-    "f8f9fa": "",
-    "f1f3f5": "",
-    "fff5f5": "",
-    "fff0f6": "",
-    "f8f0fc": "",
-    "f3f0ff": "",
-    "edf2ff": "",
-    "e7f5ff": "",
-    "e3fafc": "",
-    "e6fcf5": "",
-    "ebfbee": "",
-    "f4fce3": "",
-    "fff9db": "",
-    "fff4e6": "",
     "transparent": "",
-    "ced4da": "",
-    "868e96": "",
-    "fa5252": "",
-    "e64980": "",
-    "be4bdb": "",
-    "7950f2": "",
-    "4c6ef5": "",
-    "228be6": "",
-    "15aabf": "",
-    "12b886": "",
-    "40c057": "",
-    "82c91e": "",
-    "fab005": "",
-    "fd7e14": "",
-    "000000": "",
-    "343a40": "",
-    "495057": "",
-    "c92a2a": "",
-    "a61e4d": "",
-    "862e9c": "",
-    "5f3dc4": "",
-    "364fc7": "Chàm 9",
-    "1864ab": "Xanh Dương 9",
-    "0b7285": "Lục Lam 9",
-    "087f5b": "Xanh Mòng Két 9",
-    "2b8a3e": "Xanh Lá 9",
-    "5c940d": "Chanh Xanh 9",
-    "e67700": "Vàng 9",
-    "d9480f": "Cam 9"
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "",
       "helpHint": ""
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/zh-CN.json b/src/locales/zh-CN.json
index 5863f5ceb..25d43a46f 100644
--- a/src/locales/zh-CN.json
+++ b/src/locales/zh-CN.json
@@ -16,7 +16,7 @@
     "bringToFront": "置于顶层",
     "sendBackward": "下移一层",
     "delete": "删除",
-    "copyStyles": "复制样式",
+    "copyStyles": "拷贝样式",
     "pasteStyles": "粘贴样式",
     "stroke": "描边",
     "background": "背景",
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "三角箭头",
     "fontSize": "字体大小",
     "fontFamily": "字体",
-    "onlySelected": "仅选中",
-    "withBackground": "背景",
-    "exportEmbedScene": "包含画布数据",
-    "exportEmbedScene_details": "画布数据将被保存到导出的 PNG/SVG 文件，以便恢复。\n将会增加导出的文件大小。",
     "addWatermark": "添加 “使用 Excalidraw 创建” 水印",
     "handDrawn": "手写",
     "normal": "普通",
@@ -54,6 +50,7 @@
     "veryLarge": "加大",
     "solid": "实心",
     "hachure": "线条",
+    "zigzag": "之字形折线",
     "crossHatch": "交叉线条",
     "thin": "细",
     "bold": "粗",
@@ -99,7 +96,6 @@
     "flipHorizontal": "水平翻转",
     "flipVertical": "垂直翻转",
     "viewMode": "查看模式",
-    "toggleExportColorScheme": "切换导出配色方案",
     "share": "分享",
     "showStroke": "显示描边颜色选择器",
     "showBackground": "显示背景颜色选择器",
@@ -127,7 +123,10 @@
       "unlockAll": "全部解锁"
     },
     "statusPublished": "已发布",
-    "sidebarLock": "侧边栏常驻"
+    "sidebarLock": "侧边栏常驻",
+    "selectAllElementsInFrame": "选择画框中的所有元素",
+    "removeAllElementsFromFrame": "删除画框中的所有元素",
+    "eyeDropper": "从画布上取色"
   },
   "library": {
     "noItems": "尚未添加任何项目……",
@@ -139,11 +138,7 @@
     "exportJSON": "导出为文件",
     "exportImage": "导出图片...",
     "export": "保存到...",
-    "exportToPng": "导出为 PNG",
-    "exportToSvg": "导出为 SVG",
     "copyToClipboard": "复制到剪贴板",
-    "copyPngToClipboard": "复制 PNG 到剪切板",
-    "scale": "缩放",
     "save": "保存至当前文件",
     "saveAs": "保存为",
     "load": "打开",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "无法保存到后端数据库。如果问题持续存在，您应该保存文件到本地，以确保您的工作不会丢失。",
     "collabSaveFailed_sizeExceeded": "无法保存到后端数据库，画布似乎过大。您应该保存文件到本地，以确保您的工作不会丢失。",
     "brave_measure_text_error": {
-      "start": "看起来您正在使用 Brave 浏览器并启用了",
-      "aggressive_block_fingerprint": "积极阻止指纹识别",
-      "setting_enabled": "设置",
-      "break": "这可能会破坏绘图中的",
-      "text_elements": "文本元素",
-      "in_your_drawings": " ",
-      "strongly_recommend": "我们强烈建议禁用此设置。您可以按照",
-      "steps": "这些步骤",
-      "how": "来设置",
-      "disable_setting": " 如果禁用此设置无法修复文本元素的显示，请在 GitHub 提交一个",
-      "issue": "issue",
-      "write": "，或者通过",
-      "discord": "Discord 反馈"
+      "line1": "您似乎正在使用 Brave 浏览器并启用了<bold>积极阻止指纹识别</bold>的设置。",
+      "line2": "这可能会破坏绘图中的 <bold>文本元素</bold>。",
+      "line3": "我们强烈建议禁用此设置。您可以按照<link>这些步骤</link>来设置。",
+      "line4": "如果禁用此设置无法修复文本元素的显示，请在 GitHub 上提交一个 <issueLink>issue</issueLink> ，或者在 <discordLink>Discord</discordLink> 上反馈"
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "笔模式 – 避免误触",
     "link": "为选中的形状添加/更新链接",
     "eraser": "橡皮",
-    "hand": "抓手（平移工具）"
+    "frame": "画框工具",
+    "hand": "抓手（平移工具）",
+    "extraTools": "更多工具"
   },
   "headings": {
     "canvasActions": "画布动作",
@@ -272,27 +260,22 @@
     "canvasTooBigTip": "提示：尝试将最远的元素移动到和其它元素更近一些。"
   },
   "errorSplash": {
-    "headingMain_pre": "遇到异常。请尝试",
-    "headingMain_button": "重新加载页面。",
-    "clearCanvasMessage": "如果重新加载页面无效, 请尝试",
-    "clearCanvasMessage_button": "清除画布。",
+    "headingMain": "遇到异常。请尝试<button>重新加载页面</button>。",
+    "clearCanvasMessage": "如果重新加载页面无效，请尝试<button>清除画布</button>。",
     "clearCanvasCaveat": "这会造成当前工作丢失",
-    "trackedToSentry_pre": "带有标识符的错误",
-    "trackedToSentry_post": "已在我们的系统中跟踪",
-    "openIssueMessage_pre": "我们非常谨慎地处理错误信息，您的画布内容不会被包含在错误报告中。如果您的画布内容不需要保持私密，请考虑使用我们的",
-    "openIssueMessage_button": "错误追踪器。",
-    "openIssueMessage_post": " 请复制并粘贴以下信息到 GitHub Issue 中。",
+    "trackedToSentry": "标识符为{{eventId}}的错误已在我们的系统中被记录",
+    "openIssueMessage": "我们非常谨慎地处理错误信息，您的画布内容不会被包含在错误报告中。如果您的画布内容不需要保持私密，请考虑在我们的 <button>bug 跟踪系统</button>上提供更多信息。请复制粘贴以下信息到 GitHub Issue 中。",
     "sceneContent": "画布内容:"
   },
   "roomDialog": {
     "desc_intro": "你可以邀请其他人到目前的画面中与你协作。",
-    "desc_privacy": "别担心, 该会话使用端到端加密, 无论绘制什么都将保持私密，甚至连我们的服务器也无法查看。",
-    "button_startSession": "启动会议",
-    "button_stopSession": "结束会议",
-    "desc_inProgressIntro": "实时协作会议正在进行。",
+    "desc_privacy": "别担心，该会话使用端到端加密，无论绘制什么都将保持私密，甚至连我们的服务器也无法查看。",
+    "button_startSession": "开始会话",
+    "button_stopSession": "结束会话",
+    "desc_inProgressIntro": "实时协作会话进行中。",
     "desc_shareLink": "分享此链接给你要协作的用户",
-    "desc_exitSession": "停止会话将中断您在与房间的连接，但您依然可以在本地继续使用画布. 请注意，这不会影响到其他用户, 他们仍可以在他们的版本上继续协作。",
-    "shareTitle": "加入 Excalidraw 实时协作会议"
+    "desc_exitSession": "停止会话将中断您与房间的连接，但您依然可以在本地继续使用画布。请注意，这不会影响到其他用户，他们仍可以在他们的版本上继续协作。",
+    "shareTitle": "加入 Excalidraw 实时协作会话"
   },
   "errorDialog": {
     "title": "错误"
@@ -319,8 +302,8 @@
     "doubleClick": "双击",
     "drag": "拖动",
     "editor": "编辑器",
-    "editLineArrowPoints": "",
-    "editText": "",
+    "editLineArrowPoints": "编辑线条或箭头的点",
+    "editText": "添加或编辑文本",
     "github": "提交问题",
     "howto": "帮助文档",
     "or": "或",
@@ -361,36 +344,47 @@
       "required": "必填",
       "website": "输入一个有效的URL"
     },
-    "noteDescription": {
-      "pre": "提交后，您的素材库将被包含在 ",
-      "link": "公共素材库广场",
-      "post": "以供其他人在绘图中使用。"
-    },
-    "noteGuidelines": {
-      "pre": "提交的素材库需先经人工审核。在提交之前，请先阅读 ",
-      "link": "指南",
-      "post": " 。后续沟通和对库的修改需要 GitHub 账号，但这不是必须的。"
-    },
-    "noteLicense": {
-      "pre": "提交即表明您已同意素材库将遵循 ",
-      "link": "MIT 许可证， ",
-      "post": "简而言之，任何人都可以不受限制地使用它们。"
-    },
+    "noteDescription": "提交后，您的素材库将被包含在<link>公共素材库广场</link>以供其他人在绘图中使用。",
+    "noteGuidelines": "提交的素材库需先经人工审核。在提交之前，请先阅读<link>指南</link> 。后续沟通和对库的修改需要 GitHub 账号，但这不是必须的。",
+    "noteLicense": "提交即表明您已同意素材库将遵循 <link>MIT 许可证</link>，简而言之，任何人都可以不受限制地使用它们。",
     "noteItems": "素材库中每个项目都有各自的名称以供筛选。以下项目将被包含：",
     "atleastOneLibItem": "请选择至少一个素材库以开始",
     "republishWarning": "注意：部分选中的项目已经发布或提交。请仅在更新已有或已提交的素材库时重复提交项目。"
   },
   "publishSuccessDialog": {
     "title": "素材库已提交",
-    "content": "谢谢你 {{authorName}}。您的素材库已被提交审核。跟进此次提交的状态请点击",
-    "link": "此处"
+    "content": "谢谢你 {{authorName}}。您的素材库已被提交审核。请点击<link>此处</link>跟进此次提交的状态"
   },
   "confirmDialog": {
     "resetLibrary": "重置素材库",
     "removeItemsFromLib": "从素材库中删除选中的项目"
   },
+  "imageExportDialog": {
+    "header": "导出图片",
+    "label": {
+      "withBackground": "背景",
+      "onlySelected": "仅选中",
+      "darkMode": "深色模式",
+      "embedScene": "包含画布数据",
+      "scale": "缩放比例",
+      "padding": "内边距"
+    },
+    "tooltip": {
+      "embedScene": "画布数据将被保存到导出的 PNG/SVG 文件，以便恢复。\n将会增加导出文件的大小。"
+    },
+    "title": {
+      "exportToPng": "导出为 PNG",
+      "exportToSvg": "导出为 SVG",
+      "copyPngToClipboard": "复制 PNG 到剪切板"
+    },
+    "button": {
+      "exportToPng": "PNG",
+      "exportToSvg": "SVG",
+      "copyPngToClipboard": "复制到剪贴板"
+    }
+  },
   "encrypted": {
-    "tooltip": "您的绘图采用的端到端加密，其内容对于Excalidraw服务器是不可见的。",
+    "tooltip": "您的绘图采用端到端加密，其内容对于 Excalidraw 服务器是不可见的。",
     "link": "Excalidraw 中关于端到端加密的博客"
   },
   "stats": {
@@ -410,7 +404,7 @@
   },
   "toast": {
     "addedToLibrary": "添加到素材库中",
-    "copyStyles": "复制样式",
+    "copyStyles": "样式已拷贝。",
     "copyToClipboard": "已复制到剪切板。",
     "copyToClipboardAsPng": "已将 {{exportSelection}} 作为 PNG 复制到剪贴板\n({{exportColorScheme}})",
     "fileSaved": "文件已保存。",
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "使用 {{shortcut}} 粘贴为单个元素，\n或粘贴到现有的文本编辑器里"
   },
   "colors": {
-    "ffffff": "白",
-    "f8f9fa": "灰 0",
-    "f1f3f5": "灰 1",
-    "fff5f5": "红 0",
-    "fff0f6": "粉红 0",
-    "f8f0fc": "紫红 0",
-    "f3f0ff": "蓝紫 0",
-    "edf2ff": "靛蓝 0",
-    "e7f5ff": "蓝 0",
-    "e3fafc": "青 0",
-    "e6fcf5": "蓝绿 0",
-    "ebfbee": "绿 0",
-    "f4fce3": "柠檬绿 0",
-    "fff9db": "黄 0",
-    "fff4e6": "橙 0",
     "transparent": "透明",
-    "ced4da": "灰 4",
-    "868e96": "灰 6",
-    "fa5252": "红 6",
-    "e64980": "粉红 6",
-    "be4bdb": "紫红 6",
-    "7950f2": "蓝紫 6",
-    "4c6ef5": "靛蓝 6",
-    "228be6": "蓝 6",
-    "15aabf": "青 6",
-    "12b886": "蓝绿 6",
-    "40c057": "绿 6",
-    "82c91e": "柠檬绿 6",
-    "fab005": "黄 6",
-    "fd7e14": "橙 6",
-    "000000": "黑",
-    "343a40": "灰 8",
-    "495057": "灰 7",
-    "c92a2a": "红 9",
-    "a61e4d": "粉红 9",
-    "862e9c": "紫红 9",
-    "5f3dc4": "蓝紫 9",
-    "364fc7": "靛蓝 9",
-    "1864ab": "蓝 9",
-    "0b7285": "青 9",
-    "087f5b": "蓝绿 9",
-    "2b8a3e": "绿 9",
-    "5c940d": "柠檬绿 9",
-    "e67700": "黄 9",
-    "d9480f": "橙 9"
+    "black": "黑",
+    "white": "白",
+    "red": "红",
+    "pink": "粉红",
+    "grape": "紫红",
+    "violet": "蓝紫",
+    "gray": "灰",
+    "blue": "蓝",
+    "cyan": "青",
+    "teal": "蓝绿",
+    "green": "绿",
+    "yellow": "黄",
+    "orange": "橙",
+    "bronze": "古铜"
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "选择工具并开始绘图！",
       "helpHint": "快捷键和帮助"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "常用自定义颜色",
+    "colors": "颜色",
+    "shades": "色调明暗",
+    "hexCode": "十六进制值",
+    "noShades": "此颜色没有可用的明暗变化"
   }
 }
diff --git a/src/locales/zh-HK.json b/src/locales/zh-HK.json
index bbf23f7f7..54406cb23 100644
--- a/src/locales/zh-HK.json
+++ b/src/locales/zh-HK.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "三角箭嘴",
     "fontSize": "字型大小",
     "fontFamily": "字體",
-    "onlySelected": "只匯出已選取的物件",
-    "withBackground": "連同背景色一併匯出",
-    "exportEmbedScene": "嵌入畫布內容",
-    "exportEmbedScene_details": "雖然使用「嵌入畫布內容」匯出的 PNG 或 SVG 檔案大小會有所增加，但是你可以透過匯入包含畫布內容的存檔來回復及繼續編輯。",
     "addWatermark": "加入「使用 Excalidraw 製圖」水印",
     "handDrawn": "手繪體",
     "normal": "電腦字體",
@@ -54,6 +50,7 @@
     "veryLarge": "勁大",
     "solid": "實心",
     "hachure": "斜線",
+    "zigzag": "",
     "crossHatch": "交叉格仔",
     "thin": "幼",
     "bold": "粗",
@@ -99,7 +96,6 @@
     "flipHorizontal": "左右反轉",
     "flipVertical": "上下反轉",
     "viewMode": "唯讀模式",
-    "toggleExportColorScheme": "",
     "share": "",
     "showStroke": "",
     "showBackground": "",
@@ -127,7 +123,10 @@
       "unlockAll": ""
     },
     "statusPublished": "",
-    "sidebarLock": ""
+    "sidebarLock": "",
+    "selectAllElementsInFrame": "",
+    "removeAllElementsFromFrame": "",
+    "eyeDropper": ""
   },
   "library": {
     "noItems": "",
@@ -139,11 +138,7 @@
     "exportJSON": "",
     "exportImage": "",
     "export": "",
-    "exportToPng": "",
-    "exportToSvg": "",
     "copyToClipboard": "",
-    "copyPngToClipboard": "",
-    "scale": "",
     "save": "",
     "saveAs": "",
     "load": "",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "",
     "collabSaveFailed_sizeExceeded": "",
     "brave_measure_text_error": {
-      "start": "",
-      "aggressive_block_fingerprint": "",
-      "setting_enabled": "",
-      "break": "",
-      "text_elements": "",
-      "in_your_drawings": "",
-      "strongly_recommend": "",
-      "steps": "",
-      "how": "",
-      "disable_setting": "",
-      "issue": "",
-      "write": "",
-      "discord": ""
+      "line1": "",
+      "line2": "",
+      "line3": "",
+      "line4": ""
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "",
     "link": "",
     "eraser": "",
-    "hand": ""
+    "frame": "",
+    "hand": "",
+    "extraTools": ""
   },
   "headings": {
     "canvasActions": "畫布動作",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": ""
   },
   "errorSplash": {
-    "headingMain_pre": "",
-    "headingMain_button": "",
-    "clearCanvasMessage": "如果重新整理頁面都係睇唔到，你可以",
-    "clearCanvasMessage_button": "清空畫布",
+    "headingMain": "",
+    "clearCanvasMessage": "如果重新整理頁面都係睇唔到，你可以<button>清空畫布</button>",
     "clearCanvasCaveat": "（注意：呢個動作會直接丟棄你嘅作品，並且無法復原）",
-    "trackedToSentry_pre": "",
-    "trackedToSentry_post": "",
-    "openIssueMessage_pre": "",
-    "openIssueMessage_button": "",
-    "openIssueMessage_post": "",
+    "trackedToSentry": "",
+    "openIssueMessage": "",
     "sceneContent": ""
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "",
       "website": ""
     },
-    "noteDescription": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
-    "noteGuidelines": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
-    "noteLicense": {
-      "pre": "",
-      "link": "",
-      "post": ""
-    },
+    "noteDescription": "",
+    "noteGuidelines": "",
+    "noteLicense": "",
     "noteItems": "",
     "atleastOneLibItem": "",
     "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "",
-    "content": "",
-    "link": ""
+    "content": ""
   },
   "confirmDialog": {
     "resetLibrary": "",
     "removeItemsFromLib": ""
   },
+  "imageExportDialog": {
+    "header": "",
+    "label": {
+      "withBackground": "",
+      "onlySelected": "",
+      "darkMode": "",
+      "embedScene": "",
+      "scale": "",
+      "padding": ""
+    },
+    "tooltip": {
+      "embedScene": ""
+    },
+    "title": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    },
+    "button": {
+      "exportToPng": "",
+      "exportToSvg": "",
+      "copyPngToClipboard": ""
+    }
+  },
   "encrypted": {
     "tooltip": "",
     "link": ""
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": ""
   },
   "colors": {
-    "ffffff": "",
-    "f8f9fa": "",
-    "f1f3f5": "",
-    "fff5f5": "",
-    "fff0f6": "",
-    "f8f0fc": "",
-    "f3f0ff": "",
-    "edf2ff": "",
-    "e7f5ff": "",
-    "e3fafc": "",
-    "e6fcf5": "",
-    "ebfbee": "",
-    "f4fce3": "",
-    "fff9db": "",
-    "fff4e6": "",
     "transparent": "",
-    "ced4da": "",
-    "868e96": "",
-    "fa5252": "",
-    "e64980": "",
-    "be4bdb": "",
-    "7950f2": "",
-    "4c6ef5": "",
-    "228be6": "",
-    "15aabf": "",
-    "12b886": "",
-    "40c057": "",
-    "82c91e": "",
-    "fab005": "",
-    "fd7e14": "",
-    "000000": "",
-    "343a40": "",
-    "495057": "",
-    "c92a2a": "",
-    "a61e4d": "",
-    "862e9c": "",
-    "5f3dc4": "",
-    "364fc7": "",
-    "1864ab": "",
-    "0b7285": "",
-    "087f5b": "",
-    "2b8a3e": "",
-    "5c940d": "",
-    "e67700": "",
-    "d9480f": ""
+    "black": "",
+    "white": "",
+    "red": "",
+    "pink": "",
+    "grape": "",
+    "violet": "",
+    "gray": "",
+    "blue": "",
+    "cyan": "",
+    "teal": "",
+    "green": "",
+    "yellow": "",
+    "orange": "",
+    "bronze": ""
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "",
       "helpHint": ""
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "",
+    "colors": "",
+    "shades": "",
+    "hexCode": "",
+    "noShades": ""
   }
 }
diff --git a/src/locales/zh-TW.json b/src/locales/zh-TW.json
index f4462842c..9c706dc28 100644
--- a/src/locales/zh-TW.json
+++ b/src/locales/zh-TW.json
@@ -40,10 +40,6 @@
     "arrowhead_triangle": "三角形",
     "fontSize": "字型大小",
     "fontFamily": "字體集",
-    "onlySelected": "僅選取物件",
-    "withBackground": "含有背景",
-    "exportEmbedScene": "嵌入場景",
-    "exportEmbedScene_details": "用於回復場景的場景資料會被包含在輸出的 PNG/SVG 檔案中。\n會增加輸出的檔案大小。",
     "addWatermark": "加上 \"Made with Excalidraw\" 浮水印",
     "handDrawn": "手寫",
     "normal": "一般",
@@ -54,6 +50,7 @@
     "veryLarge": "特大",
     "solid": "實心",
     "hachure": "斜線筆觸",
+    "zigzag": "Ｚ字形",
     "crossHatch": "交叉筆觸",
     "thin": "細",
     "bold": "粗",
@@ -99,7 +96,6 @@
     "flipHorizontal": "水平翻轉",
     "flipVertical": "垂直翻轉",
     "viewMode": "檢視模式",
-    "toggleExportColorScheme": "切換輸出配色",
     "share": "共享",
     "showStroke": "顯示線條檢色器",
     "showBackground": "顯示背景檢色器",
@@ -127,7 +123,10 @@
       "unlockAll": "全部解鎖"
     },
     "statusPublished": "已發布",
-    "sidebarLock": "側欄維持開啟"
+    "sidebarLock": "側欄維持開啟",
+    "selectAllElementsInFrame": "選取框架內的所有元素",
+    "removeAllElementsFromFrame": "從框架內移除所有元素",
+    "eyeDropper": "從畫布中選取顏色"
   },
   "library": {
     "noItems": "尚未加入任何物件...",
@@ -139,11 +138,7 @@
     "exportJSON": "匯出至檔案",
     "exportImage": "匯出圖片",
     "export": "儲存至...",
-    "exportToPng": "輸出成 PNG",
-    "exportToSvg": "輸出成 SVG",
     "copyToClipboard": "複製至剪貼簿",
-    "copyPngToClipboard": "複製 PNG 至剪貼簿",
-    "scale": "縮放比例",
     "save": "儲存目前檔案",
     "saveAs": "儲存為",
     "load": "開啟",
@@ -207,19 +202,10 @@
     "collabSaveFailed": "無法儲存至後端資料庫。若此問題持續發生，請將檔案儲存於本機以確保資料不會遺失。",
     "collabSaveFailed_sizeExceeded": "無法儲存至後端資料庫，可能的原因為畫布尺寸過大。請將檔案儲存於本機以確保資料不會遺失。",
     "brave_measure_text_error": {
-      "start": "您似乎正在使用 Brave 瀏覽器並且將",
-      "aggressive_block_fingerprint": "\"Aggressively Block Fingerprinting\" 設定",
-      "setting_enabled": "設為開啟",
-      "break": "這可能導致破壞",
-      "text_elements": "文字元素",
-      "in_your_drawings": "在您的繪圖中",
-      "strongly_recommend": "我們強烈建議您關掉此設定。您可以參考",
-      "steps": "這些步驟",
-      "how": "來變更",
-      "disable_setting": " 若關閉此設定無法修正文字元素的顯示問題，請回報",
-      "issue": "問題",
-      "write": "至我們的 GitHub，或反應在我們的",
-      "discord": "Discord"
+      "line1": "看起來您開啟了 Brave 瀏覽器的 <bold>Aggressively Block Fingerprinting</bold> 設定。",
+      "line2": "這可能造成您畫布中 <bold>文字元素</bold> 的異常。",
+      "line3": "我們強烈建議您關閉此設定。您可以依照 <link>這些步驟</link> 來進行。",
+      "line4": "若關閉此設定並未修復文字元素的顯示問題，請回報於我們 GitHub 上的 <issueLink>issue</issueLink>，或在 <discordLink>Discord</discordLink> 上告訴我們。"
     }
   },
   "toolBar": {
@@ -237,7 +223,9 @@
     "penMode": "筆模式 - 避免觸摸",
     "link": "為所選的形狀增加\b/更新連結",
     "eraser": "橡皮擦",
-    "hand": "手形（平移工具）"
+    "frame": "框架工具",
+    "hand": "手形（平移工具）",
+    "extraTools": "更多工具"
   },
   "headings": {
     "canvasActions": "canvas 動作",
@@ -272,16 +260,11 @@
     "canvasTooBigTip": "提示：可嘗試將最遠的元素移動至較集中的位置"
   },
   "errorSplash": {
-    "headingMain_pre": "發生錯誤，嘗試",
-    "headingMain_button": "重新載入頁面。",
-    "clearCanvasMessage": "若重新載入仍無法解決問題，嘗試",
-    "clearCanvasMessage_button": "清除 canvas。",
+    "headingMain": "發生錯誤，嘗試<button>重新載入頁面。</button>",
+    "clearCanvasMessage": "若重新載入仍無法解決問題，嘗試<button>清除 canvas。</button>",
     "clearCanvasCaveat": "此動作將造成目前的作品被移除。",
-    "trackedToSentry_pre": "此錯誤與其識別碼",
-    "trackedToSentry_post": "將由系統記錄。",
-    "openIssueMessage_pre": "我們將謹慎處理，你的作品內容不會被包含在錯誤報告中。若你的作品不需保持私密，請考慮使用我們的",
-    "openIssueMessage_button": "bug tracker。",
-    "openIssueMessage_post": "請將下列資訊複製貼上至 GitHub issue 中。",
+    "trackedToSentry": "此錯誤與其識別碼{{eventId}}將由系統記錄。",
+    "openIssueMessage": "我們將謹慎處理，你的作品內容不會被包含在錯誤報告中。若你的作品不需保持私密，請考慮使用我們的<button>bug tracker。</button>請將下列資訊複製貼上至 GitHub issue 中。",
     "sceneContent": "作品內容："
   },
   "roomDialog": {
@@ -361,34 +344,45 @@
       "required": "必填",
       "website": "請輸入有效的 URL"
     },
-    "noteDescription": {
-      "pre": "送出您的資料庫後將被包含於",
-      "link": "公開資料庫 repository",
-      "post": "以利他人在其繪圖中使用。"
-    },
-    "noteGuidelines": {
-      "pre": "資料庫需先經人工審查。請閱讀",
-      "link": "說明文件",
-      "post": "再送出。若需溝通與修改時要透過 GitHub 帳號來進行，但並非強制需求。"
-    },
-    "noteLicense": {
-      "pre": "送出即代表您同意此資料庫將發布時使用 ",
-      "link": "MIT 授權，",
-      "post": "簡單來說是指任何人都能不受限制的使用。"
-    },
+    "noteDescription": "送出您的資料庫後將被包含於<link>公開資料庫 repository</link>以利他人在其繪圖中使用。",
+    "noteGuidelines": "資料庫需先經人工審查。請閱讀<link>說明文件</link>再送出。若需溝通與修改時要透過 GitHub 帳號來進行，但並非強制需求。",
+    "noteLicense": "送出即代表您同意此資料庫將發布時使用 <link>MIT 授權，</link>簡單來說是指任何人都能不受限制的使用。",
     "noteItems": "每個資料庫項目都有獨立的名稱故可篩選。會包含下列資料庫項目：",
     "atleastOneLibItem": "請選擇至少一項資料庫項目",
     "republishWarning": "注意：部分選取中的物件先前已發布/送出過。建議僅在要更新現存資料庫或已送出的物件時才重新送出這些物件。"
   },
   "publishSuccessDialog": {
     "title": "資料庫已送出",
-    "content": "感謝 {{authorName}} 。您的資料庫已送出待審查。您可查看目前狀態",
-    "link": "在此"
+    "content": "感謝 {{authorName}} 。您的資料庫已送出待審查。您可查看目前狀態<link>在此</link>"
   },
   "confirmDialog": {
     "resetLibrary": "重設資料庫",
     "removeItemsFromLib": "從資料庫移除所選的項目"
   },
+  "imageExportDialog": {
+    "header": "匯出圖片",
+    "label": {
+      "withBackground": "背景",
+      "onlySelected": "僅選取物件",
+      "darkMode": "深色模式",
+      "embedScene": "嵌入場景",
+      "scale": "縮放比例",
+      "padding": "內間距"
+    },
+    "tooltip": {
+      "embedScene": "用於回復場景的場景資料會被包含在輸出的 PNG/SVG 檔案中。\n會增加輸出的檔案大小。"
+    },
+    "title": {
+      "exportToPng": "輸出成 PNG",
+      "exportToSvg": "輸出成 SVG",
+      "copyPngToClipboard": "複製 PNG 至剪貼簿"
+    },
+    "button": {
+      "exportToPng": "PNG",
+      "exportToSvg": "SVG",
+      "copyPngToClipboard": "複製至剪貼簿"
+    }
+  },
   "encrypted": {
     "tooltip": "你的作品已使用 end-to-end 方式加密，Excalidraw 的伺服器也無法取得其內容。",
     "link": "Excalidraw 端到端加密的相關部落格文章"
@@ -420,51 +414,21 @@
     "pasteAsSingleElement": "使用 {{shortcut}} 以做為單一物件貼上，\n或貼上至現有的文字編輯器"
   },
   "colors": {
-    "ffffff": "白",
-    "f8f9fa": "灰 0",
-    "f1f3f5": "灰 1",
-    "fff5f5": "紅 0",
-    "fff0f6": "粉紅 0",
-    "f8f0fc": "深紫 0",
-    "f3f0ff": "藍紫 0",
-    "edf2ff": "靛藍 0",
-    "e7f5ff": "藍 0",
-    "e3fafc": "青 0",
-    "e6fcf5": "藍綠 0",
-    "ebfbee": "綠 0",
-    "f4fce3": "黃綠 0",
-    "fff9db": "黃 0",
-    "fff4e6": "橘 0",
     "transparent": "透明",
-    "ced4da": "灰 4",
-    "868e96": "灰 6",
-    "fa5252": "紅 6",
-    "e64980": "粉紅 6",
-    "be4bdb": "深紫 6",
-    "7950f2": "藍紫 6",
-    "4c6ef5": "靛藍 6",
-    "228be6": "藍 6",
-    "15aabf": "青 6",
-    "12b886": "藍綠 6",
-    "40c057": "綠 6",
-    "82c91e": "黃綠 6",
-    "fab005": "黃 6",
-    "fd7e14": "橘 6",
-    "000000": "黑",
-    "343a40": "灰 8",
-    "495057": "灰 7",
-    "c92a2a": "紅 9",
-    "a61e4d": "粉紅 9",
-    "862e9c": "深紫 9",
-    "5f3dc4": "藍紫 9",
-    "364fc7": "靛藍 9",
-    "1864ab": "藍 9",
-    "0b7285": "青 9",
-    "087f5b": "藍綠 9",
-    "2b8a3e": "綠 9",
-    "5c940d": "黃綠 9",
-    "e67700": "黃 9",
-    "d9480f": "橘 9"
+    "black": "黑",
+    "white": "白",
+    "red": "紅",
+    "pink": "粉紅",
+    "grape": "深紫",
+    "violet": "藍紫",
+    "gray": "灰",
+    "blue": "藍",
+    "cyan": "青",
+    "teal": "藍綠",
+    "green": "綠",
+    "yellow": "黃",
+    "orange": "橘",
+    "bronze": "銅"
   },
   "welcomeScreen": {
     "app": {
@@ -478,5 +442,12 @@
       "toolbarHint": "選個工具開始畫圖吧！",
       "helpHint": "快速鍵與說明"
     }
+  },
+  "colorPicker": {
+    "mostUsedCustomColors": "最常使用的自訂顏色",
+    "colors": "顏色",
+    "shades": "漸變色",
+    "hexCode": "Hex 碼",
+    "noShades": "沒有此顏色的漸變色"
   }
 }
diff --git a/src/math.ts b/src/math.ts
index 602fe976c..01123ce81 100644
--- a/src/math.ts
+++ b/src/math.ts
@@ -206,7 +206,7 @@ export const isPointInPolygon = (
 
 // Returns whether `q` lies inside the segment/rectangle defined by `p` and `r`.
 // This is an approximation to "does `q` lie on a segment `pr`" check.
-const isPointWithinBounds = (p: Point, q: Point, r: Point) => {
+export const isPointWithinBounds = (p: Point, q: Point, r: Point) => {
   return (
     q[0] <= Math.max(p[0], r[0]) &&
     q[0] >= Math.min(p[0], r[0]) &&
diff --git a/src/packages/excalidraw/.size-limit.json b/src/packages/excalidraw/.size-limit.json
new file mode 100644
index 000000000..e95dd1758
--- /dev/null
+++ b/src/packages/excalidraw/.size-limit.json
@@ -0,0 +1,16 @@
+[
+  {
+    "path": "dist/excalidraw.production.min.js",
+    "limit": "285 kB"
+  },
+  {
+    "path": "dist/excalidraw-assets/locales",
+    "name": "dist/excalidraw-assets/locales",
+    "limit": "270 kB"
+  },
+  {
+    "path": "dist/excalidraw-assets/vendor-*.js",
+    "name": "dist/excalidraw-assets/vendor*.js",
+    "limit": "30 kB"
+  }
+]
diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md
index c36883b8e..5933f5649 100644
--- a/src/packages/excalidraw/CHANGELOG.md
+++ b/src/packages/excalidraw/CHANGELOG.md
@@ -15,7 +15,57 @@ Please add the latest change on the top under the correct section.
 
 ### Features
 
-- [`ExcalidrawAPI.scrolToContent`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props/ref#scrolltocontent) has new opts object allowing you to fit viewport to content, and animate the scrolling. [#6319](https://github.com/excalidraw/excalidraw/pull/6319)
+- Add support for `opts.fitToViewport` and `opts.viewportZoomFactor` in the [`ExcalidrawAPI.scrollToContent`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props/ref#scrolltocontent) API. [#6581](https://github.com/excalidraw/excalidraw/pull/6581).
+- Properly sanitize element `link` urls. [#6728](https://github.com/excalidraw/excalidraw/pull/6728).
+- Sidebar component now supports tabs — for more detailed description of new behavior and breaking changes, see the linked PR. [#6213](https://github.com/excalidraw/excalidraw/pull/6213)
+- Exposed `DefaultSidebar` component to allow modifying the default sidebar, such as adding custom tabs to it. [#6213](https://github.com/excalidraw/excalidraw/pull/6213)
+
+  #### BREAKING CHANGES
+
+  - `props.renderSidebar` is removed in favor of rendering as `children`.
+  - `appState.isSidebarDocked` replaced with `appState.defaultSidebarDockedPreference` with slightly different semantics, and relating only to the default sidebar. You need to handle `docked` state for your custom sidebars yourself.
+  - Sidebar `props.dockable` is removed. To indicate dockability, supply `props.onDock()` alongside setting `props.docked`.
+  - `Sidebar.Header` is no longer rendered by default. You need to render it yourself.
+  - `props.onClose` replaced with `props.onStateChange`.
+  - `restore()`/`restoreAppState()` now retains `appState.openSidebar` regardless of docked state.
+
+## 0.15.2 (2023-04-20)
+
+### Docs
+
+- Fix docs link in readme [#6486](https://github.com/excalidraw/excalidraw/pull/6486)
+
+## Excalidraw Library
+
+**_This section lists the updates made to the excalidraw library and will not affect the integration._**
+
+### Fixes
+
+- Rotate the text element when binding to a rotated container [#6477](https://github.com/excalidraw/excalidraw/pull/6477)
+
+- Support breaking words containing hyphen - [#6014](https://github.com/excalidraw/excalidraw/pull/6014)
+
+- Incorrect background fill button active state [#6491](https://github.com/excalidraw/excalidraw/pull/6491)
+
+---
+
+## 0.15.1 (2023-04-18)
+
+### Docs
+
+- Add the readme back to the package which was mistakenly removed [#6484](https://github.com/excalidraw/excalidraw/pull/6484)
+
+## Excalidraw Library
+
+**_This section lists the updates made to the excalidraw library and will not affect the integration._**
+
+---
+
+## 0.15.0 (2023-04-18)
+
+### Features
+
+- [`ExcalidrawAPI.scrollToContent`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props/ref#scrolltocontent) has new opts object allowing you to fit viewport to content, and animate the scrolling. [#6319](https://github.com/excalidraw/excalidraw/pull/6319)
 
 - Expose `useI18n()` hook return an object containing `t()` i18n helper and current `langCode`. You can use this in components you render as `<Excalidraw>` children to render any of our i18n locale strings. [#6224](https://github.com/excalidraw/excalidraw/pull/6224)
 
@@ -37,6 +87,154 @@ For more details refer to the [docs](https://docs.excalidraw.com)
 
 - Exporting labelled arrows via export utils [#6443](https://github.com/excalidraw/excalidraw/pull/6443)
 
+## Excalidraw Library
+
+**_This section lists the updates made to the excalidraw library and will not affect the integration._**
+
+### Features
+
+- Constrain export dialog preview size [#6475](https://github.com/excalidraw/excalidraw/pull/6475)
+
+- Zigzag fill easter egg [#6439](https://github.com/excalidraw/excalidraw/pull/6439)
+
+- Add container to multiple text elements [#6428](https://github.com/excalidraw/excalidraw/pull/6428)
+
+- Starting migration from GA to Matomo for better privacy [#6398](https://github.com/excalidraw/excalidraw/pull/6398)
+
+- Add line height attribute to text element [#6360](https://github.com/excalidraw/excalidraw/pull/6360)
+
+- Add thai lang support [#6314](https://github.com/excalidraw/excalidraw/pull/6314)
+
+- Create bound container from text [#6301](https://github.com/excalidraw/excalidraw/pull/6301)
+
+- Improve text measurements in bound containers [#6187](https://github.com/excalidraw/excalidraw/pull/6187)
+
+- Bind text to container if double clicked on filled shape or stroke [#6250](https://github.com/excalidraw/excalidraw/pull/6250)
+
+- Make repair and refreshDimensions configurable in restoreElements [#6238](https://github.com/excalidraw/excalidraw/pull/6238)
+
+- Show error message when not connected to internet while collabo… [#6165](https://github.com/excalidraw/excalidraw/pull/6165)
+
+- Shortcut for clearCanvas confirmDialog [#6114](https://github.com/excalidraw/excalidraw/pull/6114)
+
+- Disable canvas smoothing (antialiasing) for right-angled elements [#6186](https://github.com/excalidraw/excalidraw/pull/6186)Co-authored-by: Ignacio Cuadra <67276174+ignacio-cuadra@users.noreply.github.com>
+
+### Fixes
+
+- Center align text when wrapped in container via context menu [#6480](https://github.com/excalidraw/excalidraw/pull/6480)
+
+- Restore original container height when unbinding text which was binded via context menu [#6444](https://github.com/excalidraw/excalidraw/pull/6444)
+
+- Mark more props as optional for element [#6448](https://github.com/excalidraw/excalidraw/pull/6448)
+
+- Improperly cache-busting on canvas scale instead of zoom [#6473](https://github.com/excalidraw/excalidraw/pull/6473)
+
+- Incorrectly duplicating items on paste/library insert [#6467](https://github.com/excalidraw/excalidraw/pull/6467)
+
+- Library ids cross-contamination on multiple insert [#6466](https://github.com/excalidraw/excalidraw/pull/6466)
+
+- Color picker keyboard handling not working [#6464](https://github.com/excalidraw/excalidraw/pull/6464)
+
+- Abort freedraw line if second touch is detected [#6440](https://github.com/excalidraw/excalidraw/pull/6440)
+
+- Utils leaking Scene state [#6461](https://github.com/excalidraw/excalidraw/pull/6461)
+
+- Split "Edit selected shape" shortcut [#6457](https://github.com/excalidraw/excalidraw/pull/6457)
+
+- Center align text when bind to container via context menu [#6451](https://github.com/excalidraw/excalidraw/pull/6451)
+
+- Update coords when text unbinded from its container [#6445](https://github.com/excalidraw/excalidraw/pull/6445)
+
+- Autoredirect to plus in prod only [#6446](https://github.com/excalidraw/excalidraw/pull/6446)
+
+- Fixing popover overflow on small screen [#6433](https://github.com/excalidraw/excalidraw/pull/6433)
+
+- Introduce baseline to fix the layout shift when switching to text editor [#6397](https://github.com/excalidraw/excalidraw/pull/6397)
+
+- Don't refresh dimensions for deleted text elements [#6438](https://github.com/excalidraw/excalidraw/pull/6438)
+
+- Element vanishes when zoomed in [#6417](https://github.com/excalidraw/excalidraw/pull/6417)
+
+- Don't jump text to end when out of viewport in safari [#6416](https://github.com/excalidraw/excalidraw/pull/6416)
+
+- GetDefaultLineHeight should return default font family line height for unknown font [#6399](https://github.com/excalidraw/excalidraw/pull/6399)
+
+- Revert use `ideographic` textBaseline to improve layout shift when editing text" [#6400](https://github.com/excalidraw/excalidraw/pull/6400)
+
+- Call stack size exceeded when paste large text [#6373](https://github.com/excalidraw/excalidraw/pull/6373) (#6396)
+
+- Use `ideographic` textBaseline to improve layout shift when editing text [#6384](https://github.com/excalidraw/excalidraw/pull/6384)
+
+- Chrome crashing when embedding scene on chrome arm [#6383](https://github.com/excalidraw/excalidraw/pull/6383)
+
+- Division by zero in findFocusPointForEllipse leads to infinite loop in wrapText freezing Excalidraw [#6377](https://github.com/excalidraw/excalidraw/pull/6377)
+
+- Containerizing text incorrectly updates arrow bindings [#6369](https://github.com/excalidraw/excalidraw/pull/6369)
+
+- Ensure export preview is centered [#6337](https://github.com/excalidraw/excalidraw/pull/6337)
+
+- Hide text align for labelled arrows [#6339](https://github.com/excalidraw/excalidraw/pull/6339)
+
+- Refresh dimensions when elements loaded from shareable link and blob [#6333](https://github.com/excalidraw/excalidraw/pull/6333)
+
+- Show error message when measureText API breaks in brave [#6336](https://github.com/excalidraw/excalidraw/pull/6336)
+
+- Add an offset of 0.5px for text editor in containers [#6328](https://github.com/excalidraw/excalidraw/pull/6328)
+
+- Move utility types out of `.d.ts` file to fix exported declaration files [#6315](https://github.com/excalidraw/excalidraw/pull/6315)
+
+- More jotai scopes missing [#6313](https://github.com/excalidraw/excalidraw/pull/6313)
+
+- Provide HelpButton title prop [#6209](https://github.com/excalidraw/excalidraw/pull/6209)
+
+- Respect text align when wrapping in a container [#6310](https://github.com/excalidraw/excalidraw/pull/6310)
+
+- Compute bounding box correctly for text element when multiple element resizing [#6307](https://github.com/excalidraw/excalidraw/pull/6307)
+
+- Use jotai scope for editor-specific atoms [#6308](https://github.com/excalidraw/excalidraw/pull/6308)
+
+- Consider arrow for bound text element [#6297](https://github.com/excalidraw/excalidraw/pull/6297)
+
+- Text never goes beyond max width for unbound text elements [#6288](https://github.com/excalidraw/excalidraw/pull/6288)
+
+- Svg text baseline [#6285](https://github.com/excalidraw/excalidraw/pull/6273)
+
+- Compute container height from bound text correctly [#6273](https://github.com/excalidraw/excalidraw/pull/6273)
+
+- Fit mobile toolbar and make scrollable [#6270](https://github.com/excalidraw/excalidraw/pull/6270)
+
+- Indenting via `tab` clashing with IME compositor [#6258](https://github.com/excalidraw/excalidraw/pull/6258)
+
+- Improve text wrapping inside rhombus and more fixes [#6265](https://github.com/excalidraw/excalidraw/pull/6265)
+
+- Improve text wrapping in ellipse and alignment [#6172](https://github.com/excalidraw/excalidraw/pull/6172)
+
+- Don't allow blank space in collab name [#6211](https://github.com/excalidraw/excalidraw/pull/6211)
+
+- Docker build architecture:linux/amd64 error occur on linux/arm64 instance [#6197](https://github.com/excalidraw/excalidraw/pull/6197)
+
+- Sort bound text elements to fix text duplication z-index error [#5130](https://github.com/excalidraw/excalidraw/pull/5130)
+
+- Hide welcome screen on mobile once user interacts [#6185](https://github.com/excalidraw/excalidraw/pull/6185)
+
+- Edit link in docs [#6182](https://github.com/excalidraw/excalidraw/pull/6182)
+
+### Refactor
+
+- Inline `SingleLibraryItem` into `PublishLibrary` [#6462](https://github.com/excalidraw/excalidraw/pull/6462)
+
+- Make the example React app reusable without duplication [#6188](https://github.com/excalidraw/excalidraw/pull/6188)
+
+### Performance
+
+- Break early if the line width <= max width of the container [#6347](https://github.com/excalidraw/excalidraw/pull/6347)
+
+### Build
+
+- Move TS and types to devDependencies [#6346](https://github.com/excalidraw/excalidraw/pull/6346)
+
+---
+
 ## 0.14.2 (2023-02-01)
 
 ### Features
diff --git a/src/packages/excalidraw/README.md b/src/packages/excalidraw/README.md
index eaeef4b0c..3e2f8efc6 100644
--- a/src/packages/excalidraw/README.md
+++ b/src/packages/excalidraw/README.md
@@ -38,8 +38,12 @@ Excalidraw takes _100%_ of `width` and `height` of the containing block so make
 
 ## Integration
 
-Head over to the [docs](https://docs.excalidraw.com/docs/package/integration)
+Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration)
 
 ## API
 
-Head over to the [docs](https://docs.excalidraw.com/docs/package/api)
+Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api)
+
+## Contributing
+
+Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/contributing)
diff --git a/src/packages/excalidraw/example/App.tsx b/src/packages/excalidraw/example/App.tsx
index 24376aff6..7d6bc5d23 100644
--- a/src/packages/excalidraw/example/App.tsx
+++ b/src/packages/excalidraw/example/App.tsx
@@ -30,6 +30,7 @@ import { NonDeletedExcalidrawElement } from "../../../element/types";
 import { ImportedLibraryData } from "../../../data/types";
 import CustomFooter from "./CustomFooter";
 import MobileFooter from "./MobileFooter";
+import { KEYS } from "../../../keys";
 
 declare global {
   interface Window {
@@ -55,9 +56,9 @@ type PointerDownState = {
     y: number;
   };
 };
+
 // This is so that we use the bundled excalidraw.development.js file instead
 // of the actual source code
-
 const {
   exportToCanvas,
   exportToSvg,
@@ -161,8 +162,7 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
           onClick={() => alert("This is an empty top right UI")}
           style={{ height: "2.5rem" }}
         >
-          {" "}
-          Click me{" "}
+          Click me
         </button>
       </>
     );
@@ -205,6 +205,7 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
             height: 141.9765625,
             seed: 1968410350,
             groupIds: [],
+            frameId: null,
             boundElements: null,
             locked: false,
             link: null,
@@ -485,7 +486,7 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
         }}
         onBlur={saveComment}
         onKeyDown={(event) => {
-          if (!event.shiftKey && event.key === "Enter") {
+          if (!event.shiftKey && event.key === KEYS.ENTER) {
             event.preventDefault();
             saveComment();
           }
@@ -494,15 +495,6 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
     );
   };
 
-  const renderSidebar = () => {
-    return (
-      <Sidebar>
-        <Sidebar.Header>Custom header!</Sidebar.Header>
-        Custom sidebar!
-      </Sidebar>
-    );
-  };
-
   const renderMenu = () => {
     return (
       <MainMenu>
@@ -617,9 +609,11 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
       </MainMenu>
     );
   };
+
   return (
     <div className="App" ref={appRef}>
       <h1>{appTitle}</h1>
+      {/* TODO fix type */}
       <ExampleSidebar>
         <div className="button-wrapper">
           <button onClick={loadSceneOrLibrary}>Load Scene or Library</button>
@@ -754,23 +748,6 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
           </div>
         </div>
         <div className="excalidraw-wrapper">
-          <div
-            style={{
-              position: "absolute",
-              left: "50%",
-              bottom: "20px",
-              display: "flex",
-              zIndex: 9999999999999999,
-              padding: "5px 10px",
-              transform: "translateX(-50%)",
-              background: "rgba(255, 255, 255, 0.8)",
-              gap: "1rem",
-            }}
-          >
-            <button onClick={() => excalidrawAPI?.toggleMenu("customSidebar")}>
-              Toggle Custom Sidebar
-            </button>
-          </div>
           <Excalidraw
             ref={(api: ExcalidrawImperativeAPI) => setExcalidrawAPI(api)}
             initialData={initialStatePromiseRef.current.promise}
@@ -792,7 +769,6 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
             onLinkOpen={onLinkOpen}
             onPointerDown={onPointerDown}
             onScrollChange={rerenderCommentIcons}
-            renderSidebar={renderSidebar}
           >
             {excalidrawAPI && (
               <Footer>
@@ -800,6 +776,30 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
               </Footer>
             )}
             <WelcomeScreen />
+            <Sidebar name="custom">
+              <Sidebar.Tabs>
+                <Sidebar.Header />
+                <Sidebar.Tab tab="one">Tab one!</Sidebar.Tab>
+                <Sidebar.Tab tab="two">Tab two!</Sidebar.Tab>
+                <Sidebar.TabTriggers>
+                  <Sidebar.TabTrigger tab="one">One</Sidebar.TabTrigger>
+                  <Sidebar.TabTrigger tab="two">Two</Sidebar.TabTrigger>
+                </Sidebar.TabTriggers>
+              </Sidebar.Tabs>
+            </Sidebar>
+            <Sidebar.Trigger
+              name="custom"
+              tab="one"
+              style={{
+                position: "absolute",
+                left: "50%",
+                transform: "translateX(-50%)",
+                bottom: "20px",
+                zIndex: 9999999999999999,
+              }}
+            >
+              Toggle Custom Sidebar
+            </Sidebar.Trigger>
             {renderMenu()}
           </Excalidraw>
           {Object.keys(commentIcons || []).length > 0 && renderCommentIcons()}
@@ -870,7 +870,6 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
           <div className="export export-blob">
             <img src={blobUrl} alt="" />
           </div>
-
           <button
             onClick={async () => {
               if (!excalidrawAPI) {
@@ -892,6 +891,78 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
           >
             Export to Canvas
           </button>
+          <button
+            onClick={async () => {
+              if (!excalidrawAPI) {
+                return;
+              }
+              const canvas = await exportToCanvas({
+                elements: excalidrawAPI.getSceneElements(),
+                appState: {
+                  ...initialData.appState,
+                  exportWithDarkMode,
+                },
+                files: excalidrawAPI.getFiles(),
+              });
+              const ctx = canvas.getContext("2d")!;
+              ctx.font = "30px Virgil";
+              ctx.strokeText("My custom text", 50, 60);
+              setCanvasUrl(canvas.toDataURL());
+            }}
+          >
+            Export to Canvas
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              if (!excalidrawAPI) {
+                return;
+              }
+
+              const elements = excalidrawAPI.getSceneElements();
+              excalidrawAPI.scrollToContent(elements[0], {
+                fitToViewport: true,
+              });
+            }}
+          >
+            Fit to viewport, first element
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              if (!excalidrawAPI) {
+                return;
+              }
+
+              const elements = excalidrawAPI.getSceneElements();
+              excalidrawAPI.scrollToContent(elements[0], {
+                fitToContent: true,
+              });
+
+              excalidrawAPI.scrollToContent(elements[0], {
+                fitToContent: true,
+              });
+            }}
+          >
+            Fit to content, first element
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              if (!excalidrawAPI) {
+                return;
+              }
+
+              const elements = excalidrawAPI.getSceneElements();
+              excalidrawAPI.scrollToContent(elements[0], {
+                fitToContent: true,
+              });
+
+              excalidrawAPI.scrollToContent(elements[0]);
+            }}
+          >
+            Scroll to first element, no fitToContent, no fitToViewport
+          </button>
           <div className="export export-canvas">
             <img src={canvasUrl} alt="" />
           </div>
diff --git a/src/packages/excalidraw/example/CustomFooter.tsx b/src/packages/excalidraw/example/CustomFooter.tsx
index fbc2ea732..5c47de6c6 100644
--- a/src/packages/excalidraw/example/CustomFooter.tsx
+++ b/src/packages/excalidraw/example/CustomFooter.tsx
@@ -65,8 +65,7 @@ const CustomFooter = ({
         className="custom-footer"
         onClick={() => alert("This is dummy footer")}
       >
-        {" "}
-        custom footer{" "}
+        custom footer
       </button>
     </>
   );
diff --git a/src/packages/excalidraw/example/initialData.js b/src/packages/excalidraw/example/initialData.js
index dde22b83b..37b0755d3 100644
--- a/src/packages/excalidraw/example/initialData.js
+++ b/src/packages/excalidraw/example/initialData.js
@@ -20,6 +20,7 @@ export default {
       height: 141.9765625,
       seed: 1968410350,
       groupIds: [],
+      frameId: null,
     },
     {
       id: "-xMIs_0jIFqvpx-R9UnaG",
@@ -37,6 +38,7 @@ export default {
       roughness: 1,
       opacity: 100,
       groupIds: [],
+      frameId: null,
       seed: 957947807,
       version: 47,
       versionNonce: 1128618623,
@@ -58,6 +60,7 @@ export default {
       roughness: 1,
       opacity: 100,
       groupIds: [],
+      frameId: null,
       strokeSharpness: "round",
       seed: 707269846,
       version: 143,
@@ -94,6 +97,7 @@ export default {
         height: 103.65107323746608,
         seed: 1445523839,
         groupIds: [],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
         startBinding: null,
@@ -133,6 +137,7 @@ export default {
         height: 113.8575037534261,
         seed: 1513238033,
         groupIds: ["N2YAi9nU-wlRb0rDaDZoe"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         startBinding: null,
@@ -182,6 +187,7 @@ export default {
         height: 9.797916664247975,
         seed: 683951089,
         groupIds: ["N2YAi9nU-wlRb0rDaDZoe"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         startBinding: null,
@@ -220,6 +226,7 @@ export default {
         height: 9.797916664247975,
         seed: 1817746897,
         groupIds: ["N2YAi9nU-wlRb0rDaDZoe"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         startBinding: null,
@@ -258,6 +265,7 @@ export default {
         height: 17.72670397681366,
         seed: 1409727409,
         groupIds: ["N2YAi9nU-wlRb0rDaDZoe"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: ["bxuMGTzXLn7H-uBCptINx"],
       },
@@ -281,6 +289,7 @@ export default {
         height: 13.941904362416096,
         seed: 1073094033,
         groupIds: ["N2YAi9nU-wlRb0rDaDZoe"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -304,6 +313,7 @@ export default {
         height: 13.941904362416096,
         seed: 526271345,
         groupIds: ["N2YAi9nU-wlRb0rDaDZoe"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -327,6 +337,7 @@ export default {
         height: 13.941904362416096,
         seed: 243707217,
         groupIds: ["N2YAi9nU-wlRb0rDaDZoe"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -352,6 +363,7 @@ export default {
         height: 36.77344700318558,
         seed: 511870335,
         groupIds: ["M6ByXuSmtHCr3RtPPKJQh"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -375,6 +387,7 @@ export default {
         height: 36.77344700318558,
         seed: 1283079231,
         groupIds: ["M6ByXuSmtHCr3RtPPKJQh"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -398,6 +411,7 @@ export default {
         height: 36.77344700318558,
         seed: 996251633,
         groupIds: ["M6ByXuSmtHCr3RtPPKJQh"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -421,6 +435,7 @@ export default {
         height: 36.77344700318558,
         seed: 1764842481,
         groupIds: ["M6ByXuSmtHCr3RtPPKJQh"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -446,6 +461,7 @@ export default {
         height: 154.56722543646003,
         seed: 1424381745,
         groupIds: ["HSrtfEf-CssQTf160Fb6R"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         startBinding: null,
@@ -495,6 +511,7 @@ export default {
         height: 12.698053371678215,
         seed: 726657713,
         groupIds: ["HSrtfEf-CssQTf160Fb6R"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         startBinding: null,
@@ -533,6 +550,7 @@ export default {
         height: 10.178760037658167,
         seed: 1977326481,
         groupIds: ["HSrtfEf-CssQTf160Fb6R"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         startBinding: null,
@@ -571,6 +589,7 @@ export default {
         height: 22.797152568995934,
         seed: 1774660383,
         groupIds: ["HSrtfEf-CssQTf160Fb6R"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: ["bxuMGTzXLn7H-uBCptINx"],
       },
@@ -596,6 +615,7 @@ export default {
         height: 107.25081879410921,
         seed: 371096063,
         groupIds: ["9ppmKFUbA4iKjt8FaDFox"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [
           "CFu0B4Mw_1wC1Hbgx8Fs0",
@@ -623,6 +643,7 @@ export default {
         height: 107.25081879410921,
         seed: 685932433,
         groupIds: ["0RJwA-yKP5dqk5oMiSeot", "9ppmKFUbA4iKjt8FaDFox"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [
           "CFu0B4Mw_1wC1Hbgx8Fs0",
@@ -650,6 +671,7 @@ export default {
         height: 107.25081879410921,
         seed: 58634943,
         groupIds: ["9ppmKFUbA4iKjt8FaDFox"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [
           "CFu0B4Mw_1wC1Hbgx8Fs0",
@@ -677,6 +699,7 @@ export default {
         height: 3.249953844290203,
         seed: 1673003743,
         groupIds: ["9ppmKFUbA4iKjt8FaDFox"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         points: [
@@ -708,6 +731,7 @@ export default {
         height: 2.8032978840147194,
         seed: 1821527807,
         groupIds: ["9ppmKFUbA4iKjt8FaDFox"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         points: [
@@ -739,6 +763,7 @@ export default {
         height: 4.280657518731036,
         seed: 1485707039,
         groupIds: ["9ppmKFUbA4iKjt8FaDFox"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         points: [
@@ -771,6 +796,7 @@ export default {
         height: 2.9096445412231735,
         seed: 1042012991,
         groupIds: ["9ppmKFUbA4iKjt8FaDFox"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         points: [
@@ -804,6 +830,7 @@ export default {
         height: 2.4757501798128,
         seed: 295443295,
         groupIds: ["9ppmKFUbA4iKjt8FaDFox"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         points: [
@@ -835,6 +862,7 @@ export default {
         height: 2.4757501798128,
         seed: 1734301567,
         groupIds: ["9ppmKFUbA4iKjt8FaDFox"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         points: [
@@ -869,6 +897,7 @@ export default {
         height: 76.53703389977764,
         seed: 106569279,
         groupIds: ["TC0RSM64Cxmu17MlE12-o"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -892,6 +921,7 @@ export default {
         height: 0,
         seed: 73916127,
         groupIds: ["TC0RSM64Cxmu17MlE12-o"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         startBinding: null,
@@ -924,6 +954,7 @@ export default {
         height: 5.001953125,
         seed: 387857791,
         groupIds: ["TC0RSM64Cxmu17MlE12-o"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -947,6 +978,7 @@ export default {
         height: 5.001953125,
         seed: 1486370207,
         groupIds: ["TC0RSM64Cxmu17MlE12-o"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -970,6 +1002,7 @@ export default {
         height: 5.001953125,
         seed: 610150847,
         groupIds: ["TC0RSM64Cxmu17MlE12-o"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -993,6 +1026,7 @@ export default {
         height: 42.72020253937572,
         seed: 144280593,
         groupIds: ["TC0RSM64Cxmu17MlE12-o"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -1016,6 +1050,7 @@ export default {
         height: 24.44112284281997,
         seed: 29167967,
         groupIds: ["TC0RSM64Cxmu17MlE12-o"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         startBinding: null,
@@ -1068,6 +1103,7 @@ export default {
         height: 0,
         seed: 1443027377,
         groupIds: ["TC0RSM64Cxmu17MlE12-o"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         startBinding: null,
@@ -1100,6 +1136,7 @@ export default {
         height: 5.711199931375845,
         seed: 244310513,
         groupIds: ["TC0RSM64Cxmu17MlE12-o"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         startBinding: null,
@@ -1138,6 +1175,7 @@ export default {
         height: 44.82230388130942,
         seed: 683572113,
         groupIds: ["TC0RSM64Cxmu17MlE12-o"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -1161,6 +1199,7 @@ export default {
         height: 5.896061363392446,
         seed: 318798801,
         groupIds: ["TC0RSM64Cxmu17MlE12-o"],
+        frameId: null,
         strokeSharpness: "round",
         boundElementIds: [],
         startBinding: null,
@@ -1200,6 +1239,7 @@ export default {
         height: 108.30428902193904,
         seed: 1914896753,
         groupIds: ["GMZ-NW9lG7c1AtfBInZ0n"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -1223,6 +1263,7 @@ export default {
         height: 82.83278895375764,
         seed: 1306468145,
         groupIds: ["GMZ-NW9lG7c1AtfBInZ0n"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -1246,6 +1287,7 @@ export default {
         height: 11.427824006438863,
         seed: 93422161,
         groupIds: ["GMZ-NW9lG7c1AtfBInZ0n"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -1269,6 +1311,7 @@ export default {
         height: 19.889460471185775,
         seed: 11646495,
         groupIds: ["GMZ-NW9lG7c1AtfBInZ0n"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
@@ -1292,6 +1335,7 @@ export default {
         height: 19.889460471185775,
         seed: 291717649,
         groupIds: ["GMZ-NW9lG7c1AtfBInZ0n"],
+        frameId: null,
         strokeSharpness: "sharp",
         boundElementIds: [],
       },
diff --git a/src/packages/excalidraw/example/sidebar/ExampleSidebar.tsx b/src/packages/excalidraw/example/sidebar/ExampleSidebar.tsx
index 793d17b05..4c51ecdc2 100644
--- a/src/packages/excalidraw/example/sidebar/ExampleSidebar.tsx
+++ b/src/packages/excalidraw/example/sidebar/ExampleSidebar.tsx
@@ -11,7 +11,7 @@ export default function Sidebar({ children }: { children: React.ReactNode }) {
         </button>
         <div className="sidebar-links">
           <button>Empty Home</button>
-          <button>Empty About</button>{" "}
+          <button>Empty About</button>
         </div>
       </div>
       <div className={`${open ? "sidebar-open" : ""}`}>
diff --git a/src/packages/excalidraw/index.tsx b/src/packages/excalidraw/index.tsx
index 4f768c6d5..8ee2956bb 100644
--- a/src/packages/excalidraw/index.tsx
+++ b/src/packages/excalidraw/index.tsx
@@ -24,7 +24,6 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     isCollaborating = false,
     onPointerUpdate,
     renderTopRightUI,
-    renderSidebar,
     langCode = defaultLang.code,
     viewModeEnabled,
     zenModeEnabled,
@@ -47,6 +46,8 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
 
   const canvasActions = props.UIOptions?.canvasActions;
 
+  // FIXME normalize/set defaults in parent component so that the memo resolver
+  // compares the same values
   const UIOptions: AppProps["UIOptions"] = {
     ...props.UIOptions,
     canvasActions: {
@@ -114,7 +115,6 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           onLinkOpen={onLinkOpen}
           onPointerDown={onPointerDown}
           onScrollChange={onScrollChange}
-          renderSidebar={renderSidebar}
         >
           {children}
         </App>
@@ -245,3 +245,7 @@ export { MainMenu };
 export { useDevice } from "../../components/App";
 export { WelcomeScreen };
 export { LiveCollaborationTrigger };
+
+export { DefaultSidebar } from "../../components/DefaultSidebar";
+
+export { normalizeLink } from "../../data/url";
diff --git a/src/packages/excalidraw/package.json b/src/packages/excalidraw/package.json
index be4e61d27..b3b9d6f03 100644
--- a/src/packages/excalidraw/package.json
+++ b/src/packages/excalidraw/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@excalidraw/excalidraw",
-  "version": "0.14.2",
+  "version": "0.15.2",
   "main": "main.js",
   "types": "types/packages/excalidraw/index.d.ts",
   "files": [
@@ -52,6 +52,7 @@
     "@babel/preset-env": "7.18.6",
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.18.6",
+    "@size-limit/preset-big-lib": "8.2.6",
     "autoprefixer": "10.4.7",
     "babel-loader": "8.2.5",
     "babel-plugin-transform-class-properties": "6.24.1",
@@ -61,9 +62,11 @@
     "mini-css-extract-plugin": "2.6.1",
     "postcss-loader": "7.0.1",
     "sass-loader": "13.0.2",
+    "size-limit": "8.2.4",
+    "style-loader": "3.3.3",
     "terser-webpack-plugin": "5.3.3",
     "ts-loader": "9.3.1",
-    "typescript": "4.7.4",
+    "typescript": "4.9.4",
     "webpack": "5.76.0",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-cli": "4.10.0",
@@ -79,6 +82,7 @@
     "pack": "yarn build:umd && yarn pack",
     "start": "webpack serve --config webpack.dev-server.config.js",
     "install:deps": "yarn install --frozen-lockfile && yarn --cwd ../../../",
-    "build:example": "EXAMPLE=true webpack --config webpack.dev-server.config.js && yarn gen:types"
+    "build:example": "EXAMPLE=true webpack --config webpack.dev-server.config.js && yarn gen:types",
+    "size": "yarn build:umd && size-limit"
   }
 }
diff --git a/src/packages/excalidraw/webpack.dev.config.js b/src/packages/excalidraw/webpack.dev.config.js
index 9e8180f5f..e16d8da72 100644
--- a/src/packages/excalidraw/webpack.dev.config.js
+++ b/src/packages/excalidraw/webpack.dev.config.js
@@ -44,7 +44,8 @@ module.exports = {
       },
       {
         test: /\.(ts|tsx|js|jsx|mjs)$/,
-        exclude: /node_modules\/(?!browser-fs-access)/,
+        exclude:
+          /node_modules\/(?!(browser-fs-access|canvas-roundrect-polyfill))/,
         use: [
           {
             loader: "ts-loader",
diff --git a/src/packages/excalidraw/webpack.prod.config.js b/src/packages/excalidraw/webpack.prod.config.js
index 0450d36fa..0a1e63618 100644
--- a/src/packages/excalidraw/webpack.prod.config.js
+++ b/src/packages/excalidraw/webpack.prod.config.js
@@ -46,7 +46,9 @@ module.exports = {
       },
       {
         test: /\.(ts|tsx|js|jsx|mjs)$/,
-        exclude: /node_modules\/(?!browser-fs-access)/,
+        exclude:
+          /node_modules\/(?!(browser-fs-access|canvas-roundrect-polyfill))/,
+
         use: [
           {
             loader: "ts-loader",
diff --git a/src/packages/excalidraw/yarn.lock b/src/packages/excalidraw/yarn.lock
index 339cda939..43dc27cb8 100644
--- a/src/packages/excalidraw/yarn.lock
+++ b/src/packages/excalidraw/yarn.lock
@@ -1027,7 +1027,7 @@
     "@jridgewell/sourcemap-codec" "^1.4.10"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@jridgewell/resolve-uri@^3.0.3":
+"@jridgewell/resolve-uri@3.1.0", "@jridgewell/resolve-uri@^3.0.3":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
   integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
@@ -1045,11 +1045,27 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@jridgewell/sourcemap-codec@^1.4.10":
+"@jridgewell/source-map@^0.3.3":
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.5.tgz#a3bb4d5c6825aab0d281268f47f6ad5853431e91"
+  integrity sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.10":
   version "1.4.14"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 
+"@jridgewell/trace-mapping@^0.3.17":
+  version "0.3.18"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz#25783b2086daf6ff1dcb53c9249ae480e4dd4cd6"
+  integrity sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==
+  dependencies:
+    "@jridgewell/resolve-uri" "3.1.0"
+    "@jridgewell/sourcemap-codec" "1.4.14"
+
 "@jridgewell/trace-mapping@^0.3.7", "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.14"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz#b231a081d8f66796e475ad588a1ef473112701ed"
@@ -1063,11 +1079,72 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
   integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
 
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
 "@polka/url@^1.0.0-next.9":
   version "1.0.0-next.11"
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.11.tgz#aeb16f50649a91af79dbe36574b66d0f9e4d9f71"
   integrity sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA==
 
+"@sitespeed.io/tracium@^0.3.3":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@sitespeed.io/tracium/-/tracium-0.3.3.tgz#b497a4a8d5837db1fd9e3053c99b78f6c0e1f53b"
+  integrity sha512-dNZafjM93Y+F+sfwTO5gTpsGXlnc/0Q+c2+62ViqP3gkMWvHEMSKkaEHgVJLcLg3i/g19GSIPziiKpgyne07Bw==
+  dependencies:
+    debug "^4.1.1"
+
+"@size-limit/file@8.2.6":
+  version "8.2.6"
+  resolved "https://registry.yarnpkg.com/@size-limit/file/-/file-8.2.6.tgz#0e17045a0fa8009fc787c85e3c09f611316f908c"
+  integrity sha512-B7ayjxiJsbtXdIIWazJkB5gezi5WBMecdHTFPMDhI3NwEML1RVvUjAkrb1mPAAkIpt2LVHPnhdCUHjqDdjugwg==
+  dependencies:
+    semver "7.5.3"
+
+"@size-limit/preset-big-lib@8.2.6":
+  version "8.2.6"
+  resolved "https://registry.yarnpkg.com/@size-limit/preset-big-lib/-/preset-big-lib-8.2.6.tgz#fbff51e7a03fc36b6b3d9103cbe5b3909e35a83e"
+  integrity sha512-63a+yos0QNMVCfx1OWnxBrdQVTlBVGzW5fDXwpWq/hKfP3B89XXHYGeL2Z2f8IXSVeGkAHXnDcTZyIPRaXffVg==
+  dependencies:
+    "@size-limit/file" "8.2.6"
+    "@size-limit/time" "8.2.6"
+    "@size-limit/webpack" "8.2.6"
+    size-limit "8.2.6"
+
+"@size-limit/time@8.2.6":
+  version "8.2.6"
+  resolved "https://registry.yarnpkg.com/@size-limit/time/-/time-8.2.6.tgz#5d1912bcfc6437f6f59804737ad0538b25c207ed"
+  integrity sha512-fUEPvz7Uq6+oUQxSYbNlJt3tTgQBl1VY21USi/B7ebdnVKLnUx1JyPI9v7imN6XEkB2VpJtnYgjFeLgNrirzMA==
+  dependencies:
+    estimo "^2.3.6"
+    react "^17.0.2"
+
+"@size-limit/webpack@8.2.6":
+  version "8.2.6"
+  resolved "https://registry.yarnpkg.com/@size-limit/webpack/-/webpack-8.2.6.tgz#3a3c98293b80f7c5fb6e8499199ae6f94f05b463"
+  integrity sha512-y2sB66m5sJxIjZ8SEAzpWbiw3/+bnQHDHfk9cSbV5ChKklq02AlYg8BS5KxGWmMpdyUo4TzpjSCP9oEudY+hxQ==
+  dependencies:
+    nanoid "^3.3.6"
+    webpack "^5.88.0"
+
 "@types/body-parser@*":
   version "1.19.2"
   resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.2.tgz#aea2059e28b7658639081347ac4fab3de166e6f0"
@@ -1119,6 +1196,11 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
   integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
 
+"@types/estree@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.1.tgz#aa22750962f3bf0e79d753d3cc067f010c95f194"
+  integrity sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==
+
 "@types/express-serve-static-core@*", "@types/express-serve-static-core@^4.17.18":
   version "4.17.27"
   resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.27.tgz#7a776191e47295d2a05962ecbb3a4ce97e38b401"
@@ -1219,6 +1301,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/yauzl@^2.9.1":
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.10.0.tgz#b3248295276cf8c6f153ebe6a9aba0c988cb2599"
+  integrity sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==
+  dependencies:
+    "@types/node" "*"
+
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
@@ -1227,21 +1316,44 @@
     "@webassemblyjs/helper-numbers" "1.11.1"
     "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
 
+"@webassemblyjs/ast@1.11.6", "@webassemblyjs/ast@^1.11.5":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.6.tgz#db046555d3c413f8966ca50a95176a0e2c642e24"
+  integrity sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==
+  dependencies:
+    "@webassemblyjs/helper-numbers" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+
 "@webassemblyjs/floating-point-hex-parser@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz#f6c61a705f0fd7a6aecaa4e8198f23d9dc179e4f"
   integrity sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==
 
+"@webassemblyjs/floating-point-hex-parser@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz#dacbcb95aff135c8260f77fa3b4c5fea600a6431"
+  integrity sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==
+
 "@webassemblyjs/helper-api-error@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz#1a63192d8788e5c012800ba6a7a46c705288fd16"
   integrity sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==
 
+"@webassemblyjs/helper-api-error@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz#6132f68c4acd59dcd141c44b18cbebbd9f2fa768"
+  integrity sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==
+
 "@webassemblyjs/helper-buffer@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz#832a900eb444884cde9a7cad467f81500f5e5ab5"
   integrity sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==
 
+"@webassemblyjs/helper-buffer@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz#b66d73c43e296fd5e88006f18524feb0f2c7c093"
+  integrity sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==
+
 "@webassemblyjs/helper-numbers@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz#64d81da219fbbba1e3bd1bfc74f6e8c4e10a62ae"
@@ -1251,11 +1363,25 @@
     "@webassemblyjs/helper-api-error" "1.11.1"
     "@xtuc/long" "4.2.2"
 
+"@webassemblyjs/helper-numbers@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz#cbce5e7e0c1bd32cf4905ae444ef64cea919f1b5"
+  integrity sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==
+  dependencies:
+    "@webassemblyjs/floating-point-hex-parser" "1.11.6"
+    "@webassemblyjs/helper-api-error" "1.11.6"
+    "@xtuc/long" "4.2.2"
+
 "@webassemblyjs/helper-wasm-bytecode@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz#f328241e41e7b199d0b20c18e88429c4433295e1"
   integrity sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==
 
+"@webassemblyjs/helper-wasm-bytecode@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz#bb2ebdb3b83aa26d9baad4c46d4315283acd51e9"
+  integrity sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==
+
 "@webassemblyjs/helper-wasm-section@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz#21ee065a7b635f319e738f0dd73bfbda281c097a"
@@ -1266,6 +1392,16 @@
     "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
     "@webassemblyjs/wasm-gen" "1.11.1"
 
+"@webassemblyjs/helper-wasm-section@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz#ff97f3863c55ee7f580fd5c41a381e9def4aa577"
+  integrity sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/helper-buffer" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/wasm-gen" "1.11.6"
+
 "@webassemblyjs/ieee754@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz#963929e9bbd05709e7e12243a099180812992614"
@@ -1273,6 +1409,13 @@
   dependencies:
     "@xtuc/ieee754" "^1.2.0"
 
+"@webassemblyjs/ieee754@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz#bb665c91d0b14fffceb0e38298c329af043c6e3a"
+  integrity sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==
+  dependencies:
+    "@xtuc/ieee754" "^1.2.0"
+
 "@webassemblyjs/leb128@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.11.1.tgz#ce814b45574e93d76bae1fb2644ab9cdd9527aa5"
@@ -1280,11 +1423,23 @@
   dependencies:
     "@xtuc/long" "4.2.2"
 
+"@webassemblyjs/leb128@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.11.6.tgz#70e60e5e82f9ac81118bc25381a0b283893240d7"
+  integrity sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==
+  dependencies:
+    "@xtuc/long" "4.2.2"
+
 "@webassemblyjs/utf8@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.11.1.tgz#d1f8b764369e7c6e6bae350e854dec9a59f0a3ff"
   integrity sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==
 
+"@webassemblyjs/utf8@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.11.6.tgz#90f8bc34c561595fe156603be7253cdbcd0fab5a"
+  integrity sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==
+
 "@webassemblyjs/wasm-edit@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz#ad206ebf4bf95a058ce9880a8c092c5dec8193d6"
@@ -1299,6 +1454,20 @@
     "@webassemblyjs/wasm-parser" "1.11.1"
     "@webassemblyjs/wast-printer" "1.11.1"
 
+"@webassemblyjs/wasm-edit@^1.11.5":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz#c72fa8220524c9b416249f3d94c2958dfe70ceab"
+  integrity sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/helper-buffer" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/helper-wasm-section" "1.11.6"
+    "@webassemblyjs/wasm-gen" "1.11.6"
+    "@webassemblyjs/wasm-opt" "1.11.6"
+    "@webassemblyjs/wasm-parser" "1.11.6"
+    "@webassemblyjs/wast-printer" "1.11.6"
+
 "@webassemblyjs/wasm-gen@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz#86c5ea304849759b7d88c47a32f4f039ae3c8f76"
@@ -1310,6 +1479,17 @@
     "@webassemblyjs/leb128" "1.11.1"
     "@webassemblyjs/utf8" "1.11.1"
 
+"@webassemblyjs/wasm-gen@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz#fb5283e0e8b4551cc4e9c3c0d7184a65faf7c268"
+  integrity sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/ieee754" "1.11.6"
+    "@webassemblyjs/leb128" "1.11.6"
+    "@webassemblyjs/utf8" "1.11.6"
+
 "@webassemblyjs/wasm-opt@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz#657b4c2202f4cf3b345f8a4c6461c8c2418985f2"
@@ -1320,6 +1500,16 @@
     "@webassemblyjs/wasm-gen" "1.11.1"
     "@webassemblyjs/wasm-parser" "1.11.1"
 
+"@webassemblyjs/wasm-opt@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz#d9a22d651248422ca498b09aa3232a81041487c2"
+  integrity sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/helper-buffer" "1.11.6"
+    "@webassemblyjs/wasm-gen" "1.11.6"
+    "@webassemblyjs/wasm-parser" "1.11.6"
+
 "@webassemblyjs/wasm-parser@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz#86ca734534f417e9bd3c67c7a1c75d8be41fb199"
@@ -1332,6 +1522,18 @@
     "@webassemblyjs/leb128" "1.11.1"
     "@webassemblyjs/utf8" "1.11.1"
 
+"@webassemblyjs/wasm-parser@1.11.6", "@webassemblyjs/wasm-parser@^1.11.5":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz#bb85378c527df824004812bbdb784eea539174a1"
+  integrity sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/helper-api-error" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/ieee754" "1.11.6"
+    "@webassemblyjs/leb128" "1.11.6"
+    "@webassemblyjs/utf8" "1.11.6"
+
 "@webassemblyjs/wast-printer@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz#d0c73beda8eec5426f10ae8ef55cee5e7084c2f0"
@@ -1340,6 +1542,14 @@
     "@webassemblyjs/ast" "1.11.1"
     "@xtuc/long" "4.2.2"
 
+"@webassemblyjs/wast-printer@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz#a7bf8dd7e362aeb1668ff43f35cb849f188eff20"
+  integrity sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.6"
+    "@xtuc/long" "4.2.2"
+
 "@webpack-cli/configtest@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-1.2.0.tgz#7b20ce1c12533912c3b217ea68262365fa29a6f5"
@@ -1388,6 +1598,11 @@ acorn-import-assertions@^1.7.6:
   resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.7.6.tgz#580e3ffcae6770eebeec76c3b9723201e9d01f78"
   integrity sha512-FlVvVFA1TX6l3lp8VjDnYYq7R1nyW6x3svAt4nDgrWQ9SBaSh9CnbwgSUTasgfNfOG5HlM1ehugCvM+hjo56LA==
 
+acorn-import-assertions@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz#507276249d684797c84e0734ef84860334cfb1ac"
+  integrity sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==
+
 acorn-walk@^8.0.0:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.0.2.tgz#d4632bfc63fd93d0f15fd05ea0e984ffd3f5a8c3"
@@ -1398,6 +1613,18 @@ acorn@^8.0.4, acorn@^8.5.0, acorn@^8.7.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
   integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
 
+acorn@^8.8.2:
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
+  integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
+
+agent-base@6:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
+  integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
+  dependencies:
+    debug "4"
+
 ajv-formats@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ajv-formats/-/ajv-formats-2.1.1.tgz#6e669400659eb74973bbf2e33327180a0996b520"
@@ -1484,6 +1711,11 @@ array-flatten@^2.1.2:
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.2.tgz#24ef80a28c1a893617e2149b0c6d0d788293b099"
   integrity sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==
 
+array-union@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
+  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
+
 autoprefixer@10.4.7:
   version "10.4.7"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.7.tgz#1db8d195f41a52ca5069b7593be167618edbbedf"
@@ -1641,6 +1873,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+base64-js@^1.3.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
@@ -1656,6 +1893,15 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
+bl@^4.0.3:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
+  integrity sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==
+  dependencies:
+    buffer "^5.5.0"
+    inherits "^2.0.4"
+    readable-stream "^3.4.0"
+
 body-parser@1.20.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.0.tgz#3de69bd89011c11573d7bfee6a64f11b6bd27cc5"
@@ -1692,7 +1938,7 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-braces@^3.0.1, braces@~3.0.2:
+braces@^3.0.1, braces@^3.0.2, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -1709,11 +1955,29 @@ browserslist@^4.14.5, browserslist@^4.20.2, browserslist@^4.20.3, browserslist@^
     node-releases "^2.0.5"
     update-browserslist-db "^1.0.4"
 
+buffer-crc32@~0.2.3:
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
+  integrity sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==
+
 buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
+buffer@^5.2.1, buffer@^5.5.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
+  integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.1.13"
+
+bytes-iec@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/bytes-iec/-/bytes-iec-3.1.1.tgz#94cd36bf95c2c22a82002c247df8772d1d591083"
+  integrity sha512-fey6+4jDK7TFtFg/klGSvNKJctyU7n2aQdnM+CO0ruLPbqqMOM8Tio0Pc+deqUeVKX1tL5DQep1zQ7+37aTAsA==
+
 bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
@@ -1790,6 +2054,11 @@ chokidar@^3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
+chownr@^1.1.1:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
+  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
+
 chrome-trace-event@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
@@ -1845,6 +2114,11 @@ commander@^7.0.0, commander@^7.2.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
 
+commander@^9.1.0:
+  version "9.5.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30"
+  integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -1945,6 +2219,13 @@ cross-env@7.0.3:
   dependencies:
     cross-spawn "^7.0.1"
 
+cross-fetch@3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.5.tgz#e1389f44d9e7ba767907f7af8454787952ab534f"
+  integrity sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==
+  dependencies:
+    node-fetch "2.6.7"
+
 cross-spawn@^7.0.1, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -1980,6 +2261,13 @@ debug@2.6.9, debug@^2.6.8:
   dependencies:
     ms "2.0.0"
 
+debug@4, debug@4.3.4:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
 debug@^4.1.0, debug@^4.1.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
@@ -2026,6 +2314,18 @@ detect-node@^2.0.4:
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
   integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
 
+devtools-protocol@0.0.981744:
+  version "0.0.981744"
+  resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.981744.tgz#9960da0370284577d46c28979a0b32651022bacf"
+  integrity sha512-0cuGS8+jhR67Fy7qG3i3Pc7Aw494sb9yG9QgpG97SFVWwolgYjlhJg7n+UaHxOQT30d1TYu/EYe9k01ivLErIg==
+
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.0.0"
+
 dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
@@ -2068,6 +2368,13 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
+end-of-stream@^1.1.0, end-of-stream@^1.4.1:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
+  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
+  dependencies:
+    once "^1.4.0"
+
 enhanced-resolve@^5.0.0, enhanced-resolve@^5.10.0:
   version "5.12.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz#300e1c90228f5b570c4d35babf263f6da7155634"
@@ -2076,6 +2383,14 @@ enhanced-resolve@^5.0.0, enhanced-resolve@^5.10.0:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
+enhanced-resolve@^5.15.0:
+  version "5.15.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz#1af946c7d93603eb88e9896cee4904dc012e9c35"
+  integrity sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
 envinfo@^7.7.3:
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.7.4.tgz#c6311cdd38a0e86808c1c9343f667e4267c4a320"
@@ -2093,6 +2408,11 @@ es-module-lexer@^0.9.0:
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19"
   integrity sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==
 
+es-module-lexer@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.3.0.tgz#6be9c9e0b4543a60cd166ff6f8b4e9dae0b0c16f"
+  integrity sha512-vZK7T0N2CBmBOixhmjdqx2gWVbFZ4DXZ/NyRMZVlJXPa7CyFS+/a4QQsDGDQy9ZfEzxFuNEsMLeQJnKP2p5/JA==
+
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -2123,6 +2443,17 @@ esrecurse@^4.3.0:
   dependencies:
     estraverse "^5.2.0"
 
+estimo@^2.3.6:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/estimo/-/estimo-2.3.6.tgz#af0ea229d82a642e89570616d4349b267642fd00"
+  integrity sha512-aPd3VTQAL1TyDyhFfn6fqBTJ9WvbRZVN4Z29Buk6+P6xsI0DuF5Mh3dGv6kYCUxWnZkB4Jt3aYglUxOtuwtxoA==
+  dependencies:
+    "@sitespeed.io/tracium" "^0.3.3"
+    commander "^9.1.0"
+    find-chrome-bin "0.1.0"
+    nanoid "^3.3.2"
+    puppeteer-core "^13.5.1"
+
 estraverse@^4.1.1:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
@@ -2205,11 +2536,33 @@ express@^4.17.3:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
+extract-zip@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-2.0.1.tgz#663dca56fe46df890d5f131ef4a06d22bb8ba13a"
+  integrity sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==
+  dependencies:
+    debug "^4.1.1"
+    get-stream "^5.1.0"
+    yauzl "^2.10.0"
+  optionalDependencies:
+    "@types/yauzl" "^2.9.1"
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-glob@^3.2.9:
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
+  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -2220,6 +2573,13 @@ fastest-levenshtein@^1.0.12:
   resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz#9990f7d3a88cc5a9ffd1f1745745251700d497e2"
   integrity sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==
 
+fastq@^1.6.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.15.0.tgz#d04d07c6a2a68fe4599fea8d2e103a937fae6b3a"
+  integrity sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==
+  dependencies:
+    reusify "^1.0.4"
+
 faye-websocket@^0.11.3:
   version "0.11.4"
   resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.4.tgz#7f0d9275cfdd86a1c963dc8b65fcc451edcbb1da"
@@ -2227,6 +2587,13 @@ faye-websocket@^0.11.3:
   dependencies:
     websocket-driver ">=0.5.1"
 
+fd-slicer@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
+  integrity sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==
+  dependencies:
+    pend "~1.2.0"
+
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
@@ -2256,6 +2623,11 @@ find-cache-dir@^3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
+find-chrome-bin@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/find-chrome-bin/-/find-chrome-bin-0.1.0.tgz#9fa3e6f86c275762c6d8be9da9af71e6fef05373"
+  integrity sha512-XoFZwaEn1R3pE6zNG8kH64l2e093hgB9+78eEKPmJK0o1EXEou+25cEWdtu2qq4DBQPDSe90VJAWVI2Sz9pX6Q==
+
 find-up@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
@@ -2284,6 +2656,11 @@ fresh@0.5.2:
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
   integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
 
+fs-constants@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
+  integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
+
 fs-monkey@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/fs-monkey/-/fs-monkey-1.0.3.tgz#ae3ac92d53bb328efe0e9a1d9541f6ad8d48e2d3"
@@ -2318,12 +2695,19 @@ get-intrinsic@^1.0.2:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
+get-stream@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.2.0.tgz#4966a1795ee5ace65e706c4b7beb71257d6e22d3"
+  integrity sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==
+  dependencies:
+    pump "^3.0.0"
+
 get-stream@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.0.tgz#3e0012cb6827319da2706e601a1583e8629a6718"
   integrity sha512-A1B3Bh1UmL0bidM/YX2NsCOTnGJePL9rO/M+Mw3m9f2gUpfokS0hi5Eah0WSUEWZdZhIZtMjkIYS7mDfOqNHbg==
 
-glob-parent@~5.1.2:
+glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -2357,6 +2741,18 @@ globals@^9.18.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
   integrity sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==
 
+globby@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
 graceful-fs@^4.1.2, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
   version "4.2.10"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
@@ -2469,6 +2865,14 @@ http-proxy@^1.18.1:
     follow-redirects "^1.0.0"
     requires-port "^1.0.0"
 
+https-proxy-agent@5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
+  integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
+  dependencies:
+    agent-base "6"
+    debug "4"
+
 human-signals@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
@@ -2486,6 +2890,16 @@ icss-utils@^5.0.0, icss-utils@^5.1.0:
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
   integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
 
+ieee754@^1.1.13:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
+
+ignore@^5.2.0:
+  version "5.2.4"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
+  integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
+
 import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -2515,7 +2929,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -2686,6 +3100,11 @@ klona@^2.0.4, klona@^2.0.5:
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
   integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
 
+lilconfig@^2.0.6, lilconfig@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
+  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
+
 lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -2722,7 +3141,7 @@ lodash@^4.17.20, lodash@^4.17.4:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.0.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -2765,6 +3184,11 @@ merge-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
+merge2@^1.3.0, merge2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
@@ -2778,6 +3202,14 @@ micromatch@^4.0.0, micromatch@^4.0.2:
     braces "^3.0.1"
     picomatch "^2.2.3"
 
+micromatch@^4.0.4:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  dependencies:
+    braces "^3.0.2"
+    picomatch "^2.3.1"
+
 mime-db@1.52.0:
   version "1.52.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
@@ -2829,6 +3261,11 @@ minimatch@^3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
+mkdirp-classic@^0.5.2:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
+  integrity sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -2857,6 +3294,18 @@ nanoid@^3.3.1:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
   integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==
 
+nanoid@^3.3.2, nanoid@^3.3.6:
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
+  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
+
+nanospinner@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/nanospinner/-/nanospinner-1.1.0.tgz#d17ff621cb1784b0a206b400da88a0ef6db39b97"
+  integrity sha512-yFvNYMig4AthKYfHFl1sLj7B2nkHL4lzdig4osvl9/LdGbXwrdFRoqBS98gsEsOakr0yH+r5NZ/1Y9gdVB8trA==
+  dependencies:
+    picocolors "^1.0.0"
+
 negotiator@0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@@ -2872,6 +3321,13 @@ neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+node-fetch@2.6.7:
+  version "2.6.7"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
+  integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
+  dependencies:
+    whatwg-url "^5.0.0"
+
 node-forge@^1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3"
@@ -2899,6 +3355,11 @@ npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
+object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
+
 object-inspect@^1.9.0:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.0.tgz#6e2c120e868fd1fd18cb4f18c31741d0d6e776f0"
@@ -2936,7 +3397,7 @@ on-headers@~1.0.2:
   resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"
   integrity sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==
 
-once@^1.3.0:
+once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
@@ -3043,6 +3504,11 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+pend@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
+  integrity sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==
+
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
@@ -3053,7 +3519,12 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
   integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
 
-pkg-dir@^4.1.0, pkg-dir@^4.2.0:
+picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+pkg-dir@4.2.0, pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
   integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
@@ -3126,6 +3597,11 @@ process-nextick-args@~2.0.0:
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
+progress@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
+
 proxy-addr@~2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -3134,11 +3610,42 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+proxy-from-env@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
+pump@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
+  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
 punycode@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+puppeteer-core@^13.5.1:
+  version "13.7.0"
+  resolved "https://registry.yarnpkg.com/puppeteer-core/-/puppeteer-core-13.7.0.tgz#3344bee3994163f49120a55ddcd144a40575ba5b"
+  integrity sha512-rXja4vcnAzFAP1OVLq/5dWNfwBGuzcOARJ6qGV7oAZhnLmVRU8G5MsdeQEAOy332ZhkIOnn9jp15R89LKHyp2Q==
+  dependencies:
+    cross-fetch "3.1.5"
+    debug "4.3.4"
+    devtools-protocol "0.0.981744"
+    extract-zip "2.0.1"
+    https-proxy-agent "5.0.1"
+    pkg-dir "4.2.0"
+    progress "2.0.3"
+    proxy-from-env "1.1.0"
+    rimraf "3.0.2"
+    tar-fs "2.1.1"
+    unbzip2-stream "1.4.3"
+    ws "8.5.0"
+
 qs@6.10.3:
   version "6.10.3"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.3.tgz#d6cde1b2ffca87b5aa57889816c5f81535e22e8e"
@@ -3146,6 +3653,11 @@ qs@6.10.3:
   dependencies:
     side-channel "^1.0.4"
 
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
 randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -3168,6 +3680,14 @@ raw-body@2.5.1:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+react@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 readable-stream@^2.0.1:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
@@ -3190,6 +3710,15 @@ readable-stream@^3.0.6:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
+readable-stream@^3.1.1, readable-stream@^3.4.0:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
@@ -3297,13 +3826,25 @@ retry@^0.13.1:
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.13.1.tgz#185b1587acf67919d63b357349e03537b2484658"
   integrity sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==
 
-rimraf@^3.0.2:
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
+rimraf@3.0.2, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
   dependencies:
     glob "^7.1.3"
 
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
 safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
@@ -3345,6 +3886,15 @@ schema-utils@^3.1.0, schema-utils@^3.1.1:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+schema-utils@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe"
+  integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
+  dependencies:
+    "@types/json-schema" "^7.0.8"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
 schema-utils@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.0.0.tgz#60331e9e3ae78ec5d16353c467c34b3a0a1d3df7"
@@ -3372,6 +3922,13 @@ semver@7.0.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
+semver@7.5.3:
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.3.tgz#161ce8c2c6b4b3bdca6caadc9fa3317a4c4fe88e"
+  integrity sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==
+  dependencies:
+    lru-cache "^6.0.0"
+
 semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
@@ -3410,6 +3967,13 @@ serialize-javascript@^6.0.0:
   dependencies:
     randombytes "^2.1.0"
 
+serialize-javascript@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz#b206efb27c3da0b0ab6b52f48d170b7996458e5c"
+  integrity sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==
+  dependencies:
+    randombytes "^2.1.0"
+
 serve-index@^1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
@@ -3485,6 +4049,35 @@ sirv@^1.0.7:
     mime "^2.3.1"
     totalist "^1.0.0"
 
+size-limit@8.2.4:
+  version "8.2.4"
+  resolved "https://registry.yarnpkg.com/size-limit/-/size-limit-8.2.4.tgz#0ab0df7cbc89007d544a50b451f5fb4d110694ca"
+  integrity sha512-Un16nSreD1v2CYwSorattiJcHuAWqXvg4TsGgzpjnoByqQwsSfCIEQHuaD14HNStzredR8cdsO9oGH91ibypTA==
+  dependencies:
+    bytes-iec "^3.1.1"
+    chokidar "^3.5.3"
+    globby "^11.1.0"
+    lilconfig "^2.0.6"
+    nanospinner "^1.1.0"
+    picocolors "^1.0.0"
+
+size-limit@8.2.6:
+  version "8.2.6"
+  resolved "https://registry.yarnpkg.com/size-limit/-/size-limit-8.2.6.tgz#e41dbc74a4d7fc13be72551b6ef31ea50007d18d"
+  integrity sha512-zpznim/tX/NegjoQuRKgWTF4XiB0cn2qt90uJzxYNTFAqexk4b94DOAkBD3TwhC6c3kw2r0KcnA5upziVMZqDg==
+  dependencies:
+    bytes-iec "^3.1.1"
+    chokidar "^3.5.3"
+    globby "^11.1.0"
+    lilconfig "^2.1.0"
+    nanospinner "^1.1.0"
+    picocolors "^1.0.0"
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
 sockjs@^0.3.24:
   version "0.3.24"
   resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"
@@ -3571,6 +4164,11 @@ strip-final-newline@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
+style-loader@3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.3.tgz#bba8daac19930169c0c9c96706749a597ae3acff"
+  integrity sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -3602,6 +4200,27 @@ tapable@^2.1.1, tapable@^2.2.0:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.0.tgz#5c373d281d9c672848213d0e037d1c4165ab426b"
   integrity sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==
 
+tar-fs@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.1.tgz#489a15ab85f1f0befabb370b7de4f9eb5cbe8784"
+  integrity sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==
+  dependencies:
+    chownr "^1.1.1"
+    mkdirp-classic "^0.5.2"
+    pump "^3.0.0"
+    tar-stream "^2.1.4"
+
+tar-stream@^2.1.4:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.2.0.tgz#acad84c284136b060dc3faa64474aa9aebd77287"
+  integrity sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==
+  dependencies:
+    bl "^4.0.3"
+    end-of-stream "^1.4.1"
+    fs-constants "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^3.1.1"
+
 terser-webpack-plugin@5.3.3, terser-webpack-plugin@^5.1.3:
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.3.tgz#8033db876dd5875487213e87c627bca323e5ed90"
@@ -3613,6 +4232,27 @@ terser-webpack-plugin@5.3.3, terser-webpack-plugin@^5.1.3:
     serialize-javascript "^6.0.0"
     terser "^5.7.2"
 
+terser-webpack-plugin@^5.3.7:
+  version "5.3.9"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz#832536999c51b46d468067f9e37662a3b96adfe1"
+  integrity sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jest-worker "^27.4.5"
+    schema-utils "^3.1.1"
+    serialize-javascript "^6.0.1"
+    terser "^5.16.8"
+
+terser@^5.16.8:
+  version "5.19.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.19.1.tgz#dbd7231f224a9e2401d0f0959542ed74d76d340b"
+  integrity sha512-27hxBUVdV6GoNg1pKQ7Z5cbR6V9txPVyBA+FQw3BaZ1Wuzvztce5p156DaP0NVZNrMZZ+6iG9Syf7WgMNKDg2Q==
+  dependencies:
+    "@jridgewell/source-map" "^0.3.3"
+    acorn "^8.8.2"
+    commander "^2.20.0"
+    source-map-support "~0.5.20"
+
 terser@^5.7.2:
   version "5.14.2"
   resolved "https://registry.yarnpkg.com/terser/-/terser-5.14.2.tgz#9ac9f22b06994d736174f4091aa368db896f1c10"
@@ -3623,6 +4263,11 @@ terser@^5.7.2:
     commander "^2.20.0"
     source-map-support "~0.5.20"
 
+through@^2.3.8:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+  integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
+
 thunky@^1.0.2:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
@@ -3655,6 +4300,11 @@ totalist@^1.0.0:
   resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
   integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==
 
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+  integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
+
 ts-loader@9.3.1:
   version "9.3.1"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.3.1.tgz#fe25cca56e3e71c1087fe48dc67f4df8c59b22d4"
@@ -3678,10 +4328,18 @@ type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
-typescript@4.7.4:
-  version "4.7.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235"
-  integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==
+typescript@4.9.4:
+  version "4.9.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"
+  integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==
+
+unbzip2-stream@1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz#b0da04c4371311df771cdc215e87f2130991ace7"
+  integrity sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==
+  dependencies:
+    buffer "^5.2.1"
+    through "^2.3.8"
 
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
@@ -3766,6 +4424,11 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+  integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
+
 webpack-bundle-analyzer@4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.5.0.tgz#1b0eea2947e73528754a6f9af3e91b2b6e0f79d5"
@@ -3888,6 +4551,36 @@ webpack@5.76.0:
     watchpack "^2.4.0"
     webpack-sources "^3.2.3"
 
+webpack@^5.88.0:
+  version "5.88.2"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.88.2.tgz#f62b4b842f1c6ff580f3fcb2ed4f0b579f4c210e"
+  integrity sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==
+  dependencies:
+    "@types/eslint-scope" "^3.7.3"
+    "@types/estree" "^1.0.0"
+    "@webassemblyjs/ast" "^1.11.5"
+    "@webassemblyjs/wasm-edit" "^1.11.5"
+    "@webassemblyjs/wasm-parser" "^1.11.5"
+    acorn "^8.7.1"
+    acorn-import-assertions "^1.9.0"
+    browserslist "^4.14.5"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.15.0"
+    es-module-lexer "^1.2.1"
+    eslint-scope "5.1.1"
+    events "^3.2.0"
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.2.9"
+    json-parse-even-better-errors "^2.3.1"
+    loader-runner "^4.2.0"
+    mime-types "^2.1.27"
+    neo-async "^2.6.2"
+    schema-utils "^3.2.0"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.3.7"
+    watchpack "^2.4.0"
+    webpack-sources "^3.2.3"
+
 websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"
@@ -3902,6 +4595,14 @@ websocket-extensions@>=0.1.1:
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
   integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
 
+whatwg-url@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
+  integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
 which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
@@ -3919,6 +4620,11 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
+ws@8.5.0:
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.5.0.tgz#bfb4be96600757fe5382de12c670dab984a1ed4f"
+  integrity sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==
+
 ws@^7.3.1:
   version "7.4.6"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
@@ -3938,3 +4644,11 @@ yaml@^1.10.0:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
+yauzl@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
+  integrity sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==
+  dependencies:
+    buffer-crc32 "~0.2.3"
+    fd-slicer "~1.1.0"
diff --git a/src/packages/utils.ts b/src/packages/utils.ts
index 1fb6cd3d9..d9365895e 100644
--- a/src/packages/utils.ts
+++ b/src/packages/utils.ts
@@ -79,7 +79,11 @@ export const exportToCanvas = ({
 
         const max = Math.max(width, height);
 
-        const scale = maxWidthOrHeight / max;
+        // if content is less then maxWidthOrHeight, fallback on supplied scale
+        const scale =
+          maxWidthOrHeight < max
+            ? maxWidthOrHeight / max
+            : appState?.exportScale ?? 1;
 
         canvas.width = width * scale;
         canvas.height = height * scale;
@@ -216,15 +220,7 @@ export const exportToClipboard = async (
   } else if (opts.type === "png") {
     await copyBlobToClipboardAsPng(exportToBlob(opts));
   } else if (opts.type === "json") {
-    const appState = {
-      offsetTop: 0,
-      offsetLeft: 0,
-      width: 0,
-      height: 0,
-      ...getDefaultAppState(),
-      ...opts.appState,
-    };
-    await copyToClipboard(opts.elements, appState, opts.files);
+    await copyToClipboard(opts.elements, opts.files);
   } else {
     throw new Error("Invalid export type");
   }
diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts
index 21de70cb9..ff47d4359 100644
--- a/src/renderer/renderElement.ts
+++ b/src/renderer/renderElement.ts
@@ -34,6 +34,7 @@ import { AppState, BinaryFiles, Zoom } from "../types";
 import { getDefaultAppState } from "../appState";
 import {
   BOUND_TEXT_PADDING,
+  FRAME_STYLE,
   MAX_DECIMALS_FOR_SVG_EXPORT,
   MIME_TYPES,
   SVG_NS,
@@ -44,10 +45,12 @@ import {
   getContainerCoords,
   getContainerElement,
   getLineHeightInPx,
-  getMaxContainerHeight,
-  getMaxContainerWidth,
+  getBoundTextMaxHeight,
+  getBoundTextMaxWidth,
 } from "../element/textElement";
 import { LinearElementEditor } from "../element/linearElementEditor";
+import { getContainingFrame } from "../frame";
+import { normalizeLink } from "../data/url";
 
 // using a stronger invert (100% vs our regular 93%) and saturate
 // as a temp hack to make images in dark theme look closer to original
@@ -92,6 +95,7 @@ export interface ExcalidrawElementWithCanvas {
   canvasOffsetX: number;
   canvasOffsetY: number;
   boundTextElementVersion: number | null;
+  containingFrameOpacity: number;
 }
 
 const cappedElementCanvasSize = (
@@ -207,6 +211,7 @@ const generateElementCanvas = (
     canvasOffsetX,
     canvasOffsetY,
     boundTextElementVersion: getBoundTextElement(element)?.version || null,
+    containingFrameOpacity: getContainingFrame(element)?.opacity || 100,
   };
 };
 
@@ -253,7 +258,8 @@ const drawElementOnCanvas = (
   context: CanvasRenderingContext2D,
   renderConfig: RenderConfig,
 ) => {
-  context.globalAlpha = element.opacity / 100;
+  context.globalAlpha =
+    ((getContainingFrame(element)?.opacity ?? 100) * element.opacity) / 10000;
   switch (element.type) {
     case "rectangle":
     case "diamond":
@@ -469,7 +475,7 @@ const generateElementShape = (
     elementWithCanvasCache.delete(element);
 
     switch (element.type) {
-      case "rectangle":
+      case "rectangle": {
         if (element.roundness) {
           const w = element.width;
           const h = element.height;
@@ -494,6 +500,7 @@ const generateElementShape = (
         setShapeForElement(element, shape);
 
         break;
+      }
       case "diamond": {
         const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
           getDiamondPoints(element);
@@ -717,12 +724,14 @@ const generateElementWithCanvas = (
     prevElementWithCanvas.zoomValue !== zoom.value &&
     !renderConfig?.shouldCacheIgnoreZoom;
   const boundTextElementVersion = getBoundTextElement(element)?.version || null;
+  const containingFrameOpacity = getContainingFrame(element)?.opacity || 100;
 
   if (
     !prevElementWithCanvas ||
     shouldRegenerateBecauseZoom ||
     prevElementWithCanvas.theme !== renderConfig.theme ||
-    prevElementWithCanvas.boundTextElementVersion !== boundTextElementVersion
+    prevElementWithCanvas.boundTextElementVersion !== boundTextElementVersion ||
+    prevElementWithCanvas.containingFrameOpacity !== containingFrameOpacity
   ) {
     const elementWithCanvas = generateElementCanvas(
       element,
@@ -864,17 +873,21 @@ const drawElementFromCanvas = (
     );
 
     if (
-      process.env.REACT_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX &&
+      process.env.REACT_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX ===
+        "true" &&
       hasBoundTextElement(element)
     ) {
+      const textElement = getBoundTextElement(
+        element,
+      ) as ExcalidrawTextElementWithContainer;
       const coords = getContainerCoords(element);
       context.strokeStyle = "#c92a2a";
       context.lineWidth = 3;
       context.strokeRect(
         (coords.x + renderConfig.scrollX) * window.devicePixelRatio,
         (coords.y + renderConfig.scrollY) * window.devicePixelRatio,
-        getMaxContainerWidth(element) * window.devicePixelRatio,
-        getMaxContainerHeight(element) * window.devicePixelRatio,
+        getBoundTextMaxWidth(element) * window.devicePixelRatio,
+        getBoundTextMaxHeight(element, textElement) * window.devicePixelRatio,
       );
     }
   }
@@ -893,25 +906,63 @@ export const renderElement = (
   const generator = rc.generator;
   switch (element.type) {
     case "selection": {
-      context.save();
-      context.translate(
-        element.x + renderConfig.scrollX,
-        element.y + renderConfig.scrollY,
-      );
-      context.fillStyle = "rgba(0, 0, 200, 0.04)";
+      // do not render selection when exporting
+      if (!renderConfig.isExporting) {
+        context.save();
+        context.translate(
+          element.x + renderConfig.scrollX,
+          element.y + renderConfig.scrollY,
+        );
+        context.fillStyle = "rgba(0, 0, 200, 0.04)";
 
-      // render from 0.5px offset  to get 1px wide line
-      // https://stackoverflow.com/questions/7530593/html5-canvas-and-line-width/7531540#7531540
-      // TODO can be be improved by offseting to the negative when user selects
-      // from right to left
-      const offset = 0.5 / renderConfig.zoom.value;
+        // render from 0.5px offset  to get 1px wide line
+        // https://stackoverflow.com/questions/7530593/html5-canvas-and-line-width/7531540#7531540
+        // TODO can be be improved by offseting to the negative when user selects
+        // from right to left
+        const offset = 0.5 / renderConfig.zoom.value;
 
-      context.fillRect(offset, offset, element.width, element.height);
-      context.lineWidth = 1 / renderConfig.zoom.value;
-      context.strokeStyle = "rgb(105, 101, 219)";
-      context.strokeRect(offset, offset, element.width, element.height);
+        context.fillRect(offset, offset, element.width, element.height);
+        context.lineWidth = 1 / renderConfig.zoom.value;
+        context.strokeStyle = " rgb(105, 101, 219)";
+        context.strokeRect(offset, offset, element.width, element.height);
 
-      context.restore();
+        context.restore();
+      }
+      break;
+    }
+    case "frame": {
+      if (
+        !renderConfig.isExporting &&
+        appState.frameRendering.enabled &&
+        appState.frameRendering.outline
+      ) {
+        context.save();
+        context.translate(
+          element.x + renderConfig.scrollX,
+          element.y + renderConfig.scrollY,
+        );
+        context.fillStyle = "rgba(0, 0, 200, 0.04)";
+
+        context.lineWidth = 2 / renderConfig.zoom.value;
+        context.strokeStyle = FRAME_STYLE.strokeColor;
+
+        if (FRAME_STYLE.radius && context.roundRect) {
+          context.beginPath();
+          context.roundRect(
+            0,
+            0,
+            element.width,
+            element.height,
+            FRAME_STYLE.radius / renderConfig.zoom.value,
+          );
+          context.stroke();
+          context.closePath();
+        } else {
+          context.strokeRect(0, 0, element.width, element.height);
+        }
+
+        context.restore();
+      }
       break;
     }
     case "freedraw": {
@@ -1103,6 +1154,23 @@ const roughSVGDrawWithPrecision = (
   return rsvg.draw(pshape);
 };
 
+const maybeWrapNodesInFrameClipPath = (
+  element: NonDeletedExcalidrawElement,
+  root: SVGElement,
+  nodes: SVGElement[],
+  exportedFrameId?: string | null,
+) => {
+  const frame = getContainingFrame(element);
+  if (frame && frame.id === exportedFrameId) {
+    const g = root.ownerDocument!.createElementNS(SVG_NS, "g");
+    g.setAttributeNS(SVG_NS, "clip-path", `url(#${frame.id})`);
+    nodes.forEach((node) => g.appendChild(node));
+    return g;
+  }
+
+  return null;
+};
+
 export const renderElementToSvg = (
   element: NonDeletedExcalidrawElement,
   rsvg: RoughSVG,
@@ -1111,6 +1179,7 @@ export const renderElementToSvg = (
   offsetX: number,
   offsetY: number,
   exportWithDarkMode?: boolean,
+  exportingFrameId?: string | null,
 ) => {
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
   let cx = (x2 - x1) / 2 - (element.x - x1);
@@ -1139,11 +1208,14 @@ export const renderElementToSvg = (
   // if the element has a link, create an anchor tag and make that the new root
   if (element.link) {
     const anchorTag = svgRoot.ownerDocument!.createElementNS(SVG_NS, "a");
-    anchorTag.setAttribute("href", element.link);
+    anchorTag.setAttribute("href", normalizeLink(element.link));
     root.appendChild(anchorTag);
     root = anchorTag;
   }
 
+  const opacity =
+    ((getContainingFrame(element)?.opacity ?? 100) * element.opacity) / 10000;
+
   switch (element.type) {
     case "selection": {
       // Since this is used only during editing experience, which is canvas based,
@@ -1159,7 +1231,6 @@ export const renderElementToSvg = (
         getShapeForElement(element)!,
         MAX_DECIMALS_FOR_SVG_EXPORT,
       );
-      const opacity = element.opacity / 100;
       if (opacity !== 1) {
         node.setAttribute("stroke-opacity", `${opacity}`);
         node.setAttribute("fill-opacity", `${opacity}`);
@@ -1171,7 +1242,15 @@ export const renderElementToSvg = (
           offsetY || 0
         }) rotate(${degree} ${cx} ${cy})`,
       );
-      root.appendChild(node);
+
+      const g = maybeWrapNodesInFrameClipPath(
+        element,
+        root,
+        [node],
+        exportingFrameId,
+      );
+
+      g ? root.appendChild(g) : root.appendChild(node);
       break;
     }
     case "line":
@@ -1224,7 +1303,6 @@ export const renderElementToSvg = (
       if (boundText) {
         group.setAttribute("mask", `url(#mask-${element.id})`);
       }
-      const opacity = element.opacity / 100;
       group.setAttribute("stroke-linecap", "round");
 
       getShapeForElement(element)!.forEach((shape) => {
@@ -1252,14 +1330,24 @@ export const renderElementToSvg = (
         }
         group.appendChild(node);
       });
-      root.appendChild(group);
-      root.append(maskPath);
+
+      const g = maybeWrapNodesInFrameClipPath(
+        element,
+        root,
+        [group, maskPath],
+        exportingFrameId,
+      );
+      if (g) {
+        root.appendChild(g);
+      } else {
+        root.appendChild(group);
+        root.append(maskPath);
+      }
       break;
     }
     case "freedraw": {
       generateElementShape(element, generator);
       generateFreeDrawShape(element);
-      const opacity = element.opacity / 100;
       const shape = getShapeForElement(element);
       const node = shape
         ? roughSVGDrawWithPrecision(rsvg, shape, MAX_DECIMALS_FOR_SVG_EXPORT)
@@ -1279,7 +1367,15 @@ export const renderElementToSvg = (
       path.setAttribute("fill", element.strokeColor);
       path.setAttribute("d", getFreeDrawSvgPath(element));
       node.appendChild(path);
-      root.appendChild(node);
+
+      const g = maybeWrapNodesInFrameClipPath(
+        element,
+        root,
+        [node],
+        exportingFrameId,
+      );
+
+      g ? root.appendChild(g) : root.appendChild(node);
       break;
     }
     case "image": {
@@ -1315,6 +1411,7 @@ export const renderElementToSvg = (
 
         use.setAttribute("width", `${width}`);
         use.setAttribute("height", `${height}`);
+        use.setAttribute("opacity", `${opacity}`);
 
         // We first apply `scale` transforms (horizontal/vertical mirroring)
         // on the <use> element, then apply translation and rotation
@@ -1340,13 +1437,22 @@ export const renderElementToSvg = (
           }) rotate(${degree} ${cx} ${cy})`,
         );
 
-        root.appendChild(g);
+        const clipG = maybeWrapNodesInFrameClipPath(
+          element,
+          root,
+          [g],
+          exportingFrameId,
+        );
+        clipG ? root.appendChild(clipG) : root.appendChild(g);
       }
       break;
     }
+    // frames are not rendered and only acts as a container
+    case "frame": {
+      break;
+    }
     default: {
       if (isTextElement(element)) {
-        const opacity = element.opacity / 100;
         const node = svgRoot.ownerDocument!.createElementNS(SVG_NS, "g");
         if (opacity !== 1) {
           node.setAttribute("stroke-opacity", `${opacity}`);
@@ -1391,7 +1497,15 @@ export const renderElementToSvg = (
           text.setAttribute("dominant-baseline", "text-before-edge");
           node.appendChild(text);
         }
-        root.appendChild(node);
+
+        const g = maybeWrapNodesInFrameClipPath(
+          element,
+          root,
+          [node],
+          exportingFrameId,
+        );
+
+        g ? root.appendChild(g) : root.appendChild(node);
       } else {
         // @ts-ignore
         throw new Error(`Unimplemented type ${element.type}`);
diff --git a/src/renderer/renderScene.ts b/src/renderer/renderScene.ts
index c8b64b47b..1344329e5 100644
--- a/src/renderer/renderScene.ts
+++ b/src/renderer/renderScene.ts
@@ -10,6 +10,7 @@ import {
   NonDeleted,
   GroupId,
   ExcalidrawBindableElement,
+  ExcalidrawFrameElement,
 } from "../element/types";
 import {
   getElementAbsoluteCoords,
@@ -30,12 +31,13 @@ import {
 import { getSelectedElements } from "../scene/selection";
 
 import { renderElement, renderElementToSvg } from "./renderElement";
-import { getClientColors } from "../clients";
+import { getClientColor } from "../clients";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import {
   isSelectedViaGroup,
   getSelectedGroupIds,
   getElementsInGroup,
+  selectGroupsFromGivenElements,
 } from "../groups";
 import { maxBindingGap } from "../element/collision";
 import {
@@ -44,24 +46,30 @@ import {
   isBindingEnabled,
 } from "../element/binding";
 import {
+  OMIT_SIDES_FOR_FRAME,
   shouldShowBoundingBox,
   TransformHandles,
   TransformHandleType,
 } from "../element/transformHandles";
 import {
   viewportCoordsToSceneCoords,
-  supportsEmoji,
   throttleRAF,
+  isOnlyExportingSingleFrame,
 } from "../utils";
 import { UserIdleState } from "../types";
-import { THEME_FILTER } from "../constants";
+import { FRAME_STYLE, THEME_FILTER } from "../constants";
 import {
   EXTERNAL_LINK_IMG,
   getLinkHandleFromCoords,
 } from "../element/Hyperlink";
-import { isLinearElement } from "../element/typeChecks";
+import { isFrameElement, isLinearElement } from "../element/typeChecks";
+import {
+  elementOverlapsWithFrame,
+  getTargetFrame,
+  isElementInFrame,
+} from "../frame";
+import "canvas-roundrect-polyfill";
 
-const hasEmojiSupport = supportsEmoji();
 export const DEFAULT_SPACING = 2;
 
 const strokeRectWithRotation = (
@@ -74,6 +82,8 @@ const strokeRectWithRotation = (
   cy: number,
   angle: number,
   fill: boolean = false,
+  /** should account for zoom */
+  radius: number = 0,
 ) => {
   context.save();
   context.translate(cx, cy);
@@ -81,7 +91,14 @@ const strokeRectWithRotation = (
   if (fill) {
     context.fillRect(x - cx, y - cy, width, height);
   }
-  context.strokeRect(x - cx, y - cy, width, height);
+  if (radius && context.roundRect) {
+    context.beginPath();
+    context.roundRect(x - cx, y - cy, width, height, radius);
+    context.stroke();
+    context.closePath();
+  } else {
+    context.strokeRect(x - cx, y - cy, width, height);
+  }
   context.restore();
 };
 
@@ -159,7 +176,6 @@ const strokeGrid = (
 
 const renderSingleLinearPoint = (
   context: CanvasRenderingContext2D,
-  appState: AppState,
   renderConfig: RenderConfig,
   point: Point,
   radius: number,
@@ -206,14 +222,7 @@ const renderLinearPointHandles = (
     const isSelected =
       !!appState.editingLinearElement?.selectedPointsIndices?.includes(idx);
 
-    renderSingleLinearPoint(
-      context,
-      appState,
-      renderConfig,
-      point,
-      radius,
-      isSelected,
-    );
+    renderSingleLinearPoint(context, renderConfig, point, radius, isSelected);
   });
 
   //Rendering segment mid points
@@ -237,7 +246,6 @@ const renderLinearPointHandles = (
       if (appState.editingLinearElement) {
         renderSingleLinearPoint(
           context,
-          appState,
           renderConfig,
           segmentMidPoint,
           radius,
@@ -248,7 +256,6 @@ const renderLinearPointHandles = (
         highlightPoint(segmentMidPoint, context, renderConfig);
         renderSingleLinearPoint(
           context,
-          appState,
           renderConfig,
           segmentMidPoint,
           radius,
@@ -258,7 +265,6 @@ const renderLinearPointHandles = (
     } else if (appState.editingLinearElement || points.length === 2) {
       renderSingleLinearPoint(
         context,
-        appState,
         renderConfig,
         segmentMidPoint,
         POINT_HANDLE_SIZE / 2,
@@ -314,6 +320,34 @@ const renderLinearElementPointHighlight = (
   context.restore();
 };
 
+const frameClip = (
+  frame: ExcalidrawFrameElement,
+  context: CanvasRenderingContext2D,
+  renderConfig: RenderConfig,
+) => {
+  context.translate(
+    frame.x + renderConfig.scrollX,
+    frame.y + renderConfig.scrollY,
+  );
+  context.beginPath();
+  if (context.roundRect && !renderConfig.isExporting) {
+    context.roundRect(
+      0,
+      0,
+      frame.width,
+      frame.height,
+      FRAME_STYLE.radius / renderConfig.zoom.value,
+    );
+  } else {
+    context.rect(0, 0, frame.width, frame.height);
+  }
+  context.clip();
+  context.translate(
+    -(frame.x + renderConfig.scrollX),
+    -(frame.y + renderConfig.scrollY),
+  );
+};
+
 export const _renderScene = ({
   elements,
   appState,
@@ -335,7 +369,7 @@ export const _renderScene = ({
       return { atLeastOneVisibleElement: false };
     }
     const {
-      renderScrollbars = true,
+      renderScrollbars = false,
       renderSelection = true,
       renderGrid = true,
       isExporting,
@@ -405,11 +439,53 @@ export const _renderScene = ({
       }),
     );
 
+    const groupsToBeAddedToFrame = new Set<string>();
+
+    visibleElements.forEach((element) => {
+      if (
+        element.groupIds.length > 0 &&
+        appState.frameToHighlight &&
+        appState.selectedElementIds[element.id] &&
+        (elementOverlapsWithFrame(element, appState.frameToHighlight) ||
+          element.groupIds.find((groupId) =>
+            groupsToBeAddedToFrame.has(groupId),
+          ))
+      ) {
+        element.groupIds.forEach((groupId) =>
+          groupsToBeAddedToFrame.add(groupId),
+        );
+      }
+    });
+
     let editingLinearElement: NonDeleted<ExcalidrawLinearElement> | undefined =
       undefined;
+
     visibleElements.forEach((element) => {
       try {
-        renderElement(element, rc, context, renderConfig, appState);
+        // - when exporting the whole canvas, we DO NOT apply clipping
+        // - when we are exporting a particular frame, apply clipping
+        //   if the containing frame is not selected, apply clipping
+        const frameId = element.frameId || appState.frameToHighlight?.id;
+
+        if (
+          frameId &&
+          ((renderConfig.isExporting && isOnlyExportingSingleFrame(elements)) ||
+            (!renderConfig.isExporting &&
+              appState.frameRendering.enabled &&
+              appState.frameRendering.clip))
+        ) {
+          context.save();
+
+          const frame = getTargetFrame(element, appState);
+
+          if (frame && isElementInFrame(element, elements, appState)) {
+            frameClip(frame, context, renderConfig);
+          }
+          renderElement(element, rc, context, renderConfig, appState);
+          context.restore();
+        } else {
+          renderElement(element, rc, context, renderConfig, appState);
+        }
         // Getting the element using LinearElementEditor during collab mismatches version - being one head of visible elements due to
         // ShapeCache returns empty hence making sure that we get the
         // correct element from visible elements
@@ -458,7 +534,24 @@ export const _renderScene = ({
           renderBindingHighlight(context, renderConfig, suggestedBinding!);
         });
     }
+
+    if (appState.frameToHighlight) {
+      renderFrameHighlight(context, renderConfig, appState.frameToHighlight);
+    }
+
+    if (appState.elementsToHighlight) {
+      renderElementsBoxHighlight(
+        context,
+        renderConfig,
+        appState.elementsToHighlight,
+        appState,
+      );
+    }
+
     const locallySelectedElements = getSelectedElements(elements, appState);
+    const isFrameSelected = locallySelectedElements.some((element) =>
+      isFrameElement(element),
+    );
 
     // Getting the element using LinearElementEditor during collab mismatches version - being one head of visible elements due to
     // ShapeCache returns empty hence making sure that we get the
@@ -527,7 +620,7 @@ export const _renderScene = ({
             selectionColors.push(
               ...renderConfig.remoteSelectedElementIds[element.id].map(
                 (socketId) => {
-                  const { background } = getClientColors(socketId, appState);
+                  const background = getClientColor(socketId);
                   return background;
                 },
               ),
@@ -628,7 +721,9 @@ export const _renderScene = ({
           0,
           renderConfig.zoom,
           "mouse",
-          OMIT_SIDES_FOR_MULTIPLE_ELEMENTS,
+          isFrameSelected
+            ? OMIT_SIDES_FOR_FRAME
+            : OMIT_SIDES_FOR_MULTIPLE_ELEMENTS,
         );
         if (locallySelectedElements.some((element) => !element.locked)) {
           renderTransformHandles(context, renderConfig, transformHandles, 0);
@@ -647,7 +742,7 @@ export const _renderScene = ({
       x -= appState.offsetLeft;
       y -= appState.offsetTop;
 
-      const width = 9;
+      const width = 11;
       const height = 14;
 
       const isOutOfBounds =
@@ -661,15 +756,20 @@ export const _renderScene = ({
       y = Math.max(y, 0);
       y = Math.min(y, normalizedCanvasHeight - height);
 
-      const { background, stroke } = getClientColors(clientId, appState);
+      const background = getClientColor(clientId);
 
       context.save();
-      context.strokeStyle = stroke;
+      context.strokeStyle = background;
       context.fillStyle = background;
 
       const userState = renderConfig.remotePointerUserStates[clientId];
-      if (isOutOfBounds || userState === UserIdleState.AWAY) {
-        context.globalAlpha = 0.48;
+      const isInactive =
+        isOutOfBounds ||
+        userState === UserIdleState.IDLE ||
+        userState === UserIdleState.AWAY;
+
+      if (isInactive) {
+        context.globalAlpha = 0.3;
       }
 
       if (
@@ -686,73 +786,86 @@ export const _renderScene = ({
         context.beginPath();
         context.arc(x, y, 15, 0, 2 * Math.PI, false);
         context.lineWidth = 1;
-        context.strokeStyle = stroke;
+        context.strokeStyle = background;
         context.stroke();
         context.closePath();
       }
 
+      // Background (white outline) for arrow
+      context.fillStyle = oc.white;
+      context.strokeStyle = oc.white;
+      context.lineWidth = 6;
+      context.lineJoin = "round";
       context.beginPath();
       context.moveTo(x, y);
-      context.lineTo(x + 1, y + 14);
+      context.lineTo(x + 0, y + 14);
       context.lineTo(x + 4, y + 9);
-      context.lineTo(x + 9, y + 10);
-      context.lineTo(x, y);
-      context.fill();
+      context.lineTo(x + 11, y + 8);
+      context.closePath();
       context.stroke();
+      context.fill();
 
-      const username = renderConfig.remotePointerUsernames[clientId];
-
-      let idleState = "";
-      if (userState === UserIdleState.AWAY) {
-        idleState = hasEmojiSupport ? "⚫️" : ` (${UserIdleState.AWAY})`;
-      } else if (userState === UserIdleState.IDLE) {
-        idleState = hasEmojiSupport ? "💤" : ` (${UserIdleState.IDLE})`;
+      // Arrow
+      context.fillStyle = background;
+      context.strokeStyle = background;
+      context.lineWidth = 2;
+      context.lineJoin = "round";
+      context.beginPath();
+      if (isInactive) {
+        context.moveTo(x - 1, y - 1);
+        context.lineTo(x - 1, y + 15);
+        context.lineTo(x + 5, y + 10);
+        context.lineTo(x + 12, y + 9);
+        context.closePath();
+        context.fill();
+      } else {
+        context.moveTo(x, y);
+        context.lineTo(x + 0, y + 14);
+        context.lineTo(x + 4, y + 9);
+        context.lineTo(x + 11, y + 8);
+        context.closePath();
+        context.fill();
+        context.stroke();
       }
 
-      const usernameAndIdleState = `${username || ""}${
-        idleState ? ` ${idleState}` : ""
-      }`;
+      const username = renderConfig.remotePointerUsernames[clientId] || "";
 
-      if (!isOutOfBounds && usernameAndIdleState) {
-        const offsetX = x + width;
-        const offsetY = y + height;
-        const paddingHorizontal = 4;
-        const paddingVertical = 4;
-        const measure = context.measureText(usernameAndIdleState);
+      if (!isOutOfBounds && username) {
+        context.font = "600 12px sans-serif"; // font has to be set before context.measureText()
+
+        const offsetX = x + width / 2;
+        const offsetY = y + height + 2;
+        const paddingHorizontal = 5;
+        const paddingVertical = 3;
+        const measure = context.measureText(username);
         const measureHeight =
           measure.actualBoundingBoxDescent + measure.actualBoundingBoxAscent;
+        const finalHeight = Math.max(measureHeight, 12);
 
         const boxX = offsetX - 1;
         const boxY = offsetY - 1;
-        const boxWidth = measure.width + 2 * paddingHorizontal + 2;
-        const boxHeight = measureHeight + 2 * paddingVertical + 2;
+        const boxWidth = measure.width + 2 + paddingHorizontal * 2 + 2;
+        const boxHeight = finalHeight + 2 + paddingVertical * 2 + 2;
         if (context.roundRect) {
           context.beginPath();
-          context.roundRect(
-            boxX,
-            boxY,
-            boxWidth,
-            boxHeight,
-            4 / renderConfig.zoom.value,
-          );
+          context.roundRect(boxX, boxY, boxWidth, boxHeight, 8);
           context.fillStyle = background;
           context.fill();
-          context.fillStyle = stroke;
+          context.strokeStyle = oc.white;
           context.stroke();
         } else {
-          // Border
-          context.fillStyle = stroke;
-          context.fillRect(boxX, boxY, boxWidth, boxHeight);
-          // Background
-          context.fillStyle = background;
-          context.fillRect(offsetX, offsetY, boxWidth - 2, boxHeight - 2);
+          roundRect(context, boxX, boxY, boxWidth, boxHeight, 8, oc.white);
         }
-        context.fillStyle = oc.white;
+        context.fillStyle = oc.black;
 
         context.fillText(
-          usernameAndIdleState,
-          offsetX + paddingHorizontal,
-          offsetY + paddingVertical + measure.actualBoundingBoxAscent,
+          username,
+          offsetX + paddingHorizontal + 1,
+          offsetY +
+            paddingVertical +
+            measure.actualBoundingBoxAscent +
+            Math.floor((finalHeight - measureHeight) / 2) +
+            2,
         );
       }
 
@@ -971,6 +1084,7 @@ const renderBindingHighlightForBindableElement = (
     case "rectangle":
     case "text":
     case "image":
+    case "frame":
       strokeRectWithRotation(
         context,
         x1 - padding,
@@ -1008,6 +1122,82 @@ const renderBindingHighlightForBindableElement = (
   }
 };
 
+const renderFrameHighlight = (
+  context: CanvasRenderingContext2D,
+  renderConfig: RenderConfig,
+  frame: NonDeleted<ExcalidrawFrameElement>,
+) => {
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords(frame);
+  const width = x2 - x1;
+  const height = y2 - y1;
+
+  context.strokeStyle = "rgb(0,118,255)";
+  context.lineWidth = (FRAME_STYLE.strokeWidth * 2) / renderConfig.zoom.value;
+
+  context.save();
+  context.translate(renderConfig.scrollX, renderConfig.scrollY);
+  strokeRectWithRotation(
+    context,
+    x1,
+    y1,
+    width,
+    height,
+    x1 + width / 2,
+    y1 + height / 2,
+    frame.angle,
+    false,
+    FRAME_STYLE.radius / renderConfig.zoom.value,
+  );
+  context.restore();
+};
+
+const renderElementsBoxHighlight = (
+  context: CanvasRenderingContext2D,
+  renderConfig: RenderConfig,
+  elements: NonDeleted<ExcalidrawElement>[],
+  appState: AppState,
+) => {
+  const individualElements = elements.filter(
+    (element) => element.groupIds.length === 0,
+  );
+
+  const elementsInGroups = elements.filter(
+    (element) => element.groupIds.length > 0,
+  );
+
+  const getSelectionFromElements = (elements: ExcalidrawElement[]) => {
+    const [elementX1, elementY1, elementX2, elementY2] =
+      getCommonBounds(elements);
+    return {
+      angle: 0,
+      elementX1,
+      elementX2,
+      elementY1,
+      elementY2,
+      selectionColors: ["rgb(0,118,255)"],
+      dashed: false,
+      cx: elementX1 + (elementX2 - elementX1) / 2,
+      cy: elementY1 + (elementY2 - elementY1) / 2,
+    };
+  };
+
+  const getSelectionForGroupId = (groupId: GroupId) => {
+    const groupElements = getElementsInGroup(elements, groupId);
+    return getSelectionFromElements(groupElements);
+  };
+
+  Object.entries(selectGroupsFromGivenElements(elementsInGroups, appState))
+    .filter(([id, isSelected]) => isSelected)
+    .map(([id, isSelected]) => id)
+    .map((groupId) => getSelectionForGroupId(groupId))
+    .concat(
+      individualElements.map((element) => getSelectionFromElements([element])),
+    )
+    .forEach((selection) =>
+      renderSelectionBorder(context, renderConfig, selection),
+    );
+};
+
 const renderBindingHighlightForSuggestedPointBinding = (
   context: CanvasRenderingContext2D,
   suggestedBinding: SuggestedPointBinding,
@@ -1089,7 +1279,7 @@ const renderLinkIcon = (
   }
 };
 
-const isVisibleElement = (
+export const isVisibleElement = (
   element: ExcalidrawElement,
   canvasWidth: number,
   canvasHeight: number,
@@ -1135,17 +1325,20 @@ export const renderSceneToSvg = (
     offsetX = 0,
     offsetY = 0,
     exportWithDarkMode = false,
+    exportingFrameId = null,
   }: {
     offsetX?: number;
     offsetY?: number;
     exportWithDarkMode?: boolean;
+    exportingFrameId?: string | null;
   } = {},
 ) => {
   if (!svgRoot) {
     return;
   }
+
   // render elements
-  elements.forEach((element, index) => {
+  elements.forEach((element) => {
     if (!element.isDeleted) {
       try {
         renderElementToSvg(
@@ -1156,6 +1349,7 @@ export const renderSceneToSvg = (
           element.x + offsetX,
           element.y + offsetY,
           exportWithDarkMode,
+          exportingFrameId,
         );
       } catch (error: any) {
         console.error(error);
diff --git a/src/renderer/roundRect.ts b/src/renderer/roundRect.ts
index be842a522..bbb98306d 100644
--- a/src/renderer/roundRect.ts
+++ b/src/renderer/roundRect.ts
@@ -15,6 +15,7 @@ export const roundRect = (
   width: number,
   height: number,
   radius: number,
+  strokeColor?: string,
 ) => {
   context.beginPath();
   context.moveTo(x + radius, y);
@@ -33,5 +34,8 @@ export const roundRect = (
   context.quadraticCurveTo(x, y, x + radius, y);
   context.closePath();
   context.fill();
+  if (strokeColor) {
+    context.strokeStyle = strokeColor;
+  }
   context.stroke();
 };
diff --git a/src/scene/Fonts.ts b/src/scene/Fonts.ts
index cc206c776..e245eb16e 100644
--- a/src/scene/Fonts.ts
+++ b/src/scene/Fonts.ts
@@ -1,5 +1,6 @@
 import { isTextElement, refreshTextDimensions } from "../element";
 import { newElementWith } from "../element/mutateElement";
+import { isBoundToContainer } from "../element/typeChecks";
 import { ExcalidrawElement, ExcalidrawTextElement } from "../element/types";
 import { invalidateShapeForElement } from "../renderer/renderElement";
 import { getFontString } from "../utils";
@@ -52,7 +53,7 @@ export class Fonts {
     let didUpdate = false;
 
     this.scene.mapElements((element) => {
-      if (isTextElement(element)) {
+      if (isTextElement(element) && !isBoundToContainer(element)) {
         invalidateShapeForElement(element);
         didUpdate = true;
         return newElementWith(element, {
diff --git a/src/scene/Scene.ts b/src/scene/Scene.ts
index e9fc98f89..5b5b7970b 100644
--- a/src/scene/Scene.ts
+++ b/src/scene/Scene.ts
@@ -2,9 +2,18 @@ import {
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
   NonDeleted,
+  ExcalidrawFrameElement,
 } from "../element/types";
-import { getNonDeletedElements, isNonDeletedElement } from "../element";
+import {
+  getNonDeletedElements,
+  getNonDeletedFrames,
+  isNonDeletedElement,
+} from "../element";
 import { LinearElementEditor } from "../element/linearElementEditor";
+import { isFrameElement } from "../element/typeChecks";
+import { getSelectedElements } from "./selection";
+import { AppState } from "../types";
+import { Assert, SameType } from "../utility-types";
 
 type ElementIdKey = InstanceType<typeof LinearElementEditor>["elementId"];
 type ElementKey = ExcalidrawElement | ElementIdKey;
@@ -12,6 +21,35 @@ type ElementKey = ExcalidrawElement | ElementIdKey;
 type SceneStateCallback = () => void;
 type SceneStateCallbackRemover = () => void;
 
+type SelectionHash = string & { __brand: "selectionHash" };
+
+const hashSelectionOpts = (
+  opts: Parameters<InstanceType<typeof Scene>["getSelectedElements"]>[0],
+) => {
+  const keys = ["includeBoundTextElement", "includeElementsInFrames"] as const;
+
+  type HashableKeys = Omit<typeof opts, "selectedElementIds" | "elements">;
+
+  // just to ensure we're hashing all expected keys
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  type _ = Assert<
+    SameType<
+      Required<HashableKeys>,
+      Pick<Required<HashableKeys>, typeof keys[number]>
+    >
+  >;
+
+  let hash = "";
+  for (const key of keys) {
+    hash += `${key}:${opts[key] ? "1" : "0"}`;
+  }
+  return hash as SelectionHash;
+};
+
+// ideally this would be a branded type but it'd be insanely hard to work with
+// in our codebase
+export type ExcalidrawElementsIncludingDeleted = readonly ExcalidrawElement[];
+
 const isIdKey = (elementKey: ElementKey): elementKey is ElementIdKey => {
   if (typeof elementKey === "string") {
     return true;
@@ -55,7 +93,18 @@ class Scene {
 
   private nonDeletedElements: readonly NonDeletedExcalidrawElement[] = [];
   private elements: readonly ExcalidrawElement[] = [];
+  private nonDeletedFrames: readonly NonDeleted<ExcalidrawFrameElement>[] = [];
+  private frames: readonly ExcalidrawFrameElement[] = [];
   private elementsMap = new Map<ExcalidrawElement["id"], ExcalidrawElement>();
+  private selectedElementsCache: {
+    selectedElementIds: AppState["selectedElementIds"] | null;
+    elements: readonly NonDeletedExcalidrawElement[] | null;
+    cache: Map<SelectionHash, NonDeletedExcalidrawElement[]>;
+  } = {
+    selectedElementIds: null,
+    elements: null,
+    cache: new Map(),
+  };
 
   getElementsIncludingDeleted() {
     return this.elements;
@@ -65,6 +114,60 @@ class Scene {
     return this.nonDeletedElements;
   }
 
+  getFramesIncludingDeleted() {
+    return this.frames;
+  }
+
+  getSelectedElements(opts: {
+    // NOTE can be ommitted by making Scene constructor require App instance
+    selectedElementIds: AppState["selectedElementIds"];
+    /**
+     * for specific cases where you need to use elements not from current
+     * scene state. This in effect will likely result in cache-miss, and
+     * the cache won't be updated in this case.
+     */
+    elements?: readonly ExcalidrawElement[];
+    // selection-related options
+    includeBoundTextElement?: boolean;
+    includeElementsInFrames?: boolean;
+  }): NonDeleted<ExcalidrawElement>[] {
+    const hash = hashSelectionOpts(opts);
+
+    const elements = opts?.elements || this.nonDeletedElements;
+    if (
+      this.selectedElementsCache.elements === elements &&
+      this.selectedElementsCache.selectedElementIds === opts.selectedElementIds
+    ) {
+      const cached = this.selectedElementsCache.cache.get(hash);
+      if (cached) {
+        return cached;
+      }
+    } else if (opts?.elements == null) {
+      // if we're operating on latest scene elements and the cache is not
+      //  storing the latest elements, clear the cache
+      this.selectedElementsCache.cache.clear();
+    }
+
+    const selectedElements = getSelectedElements(
+      elements,
+      { selectedElementIds: opts.selectedElementIds },
+      opts,
+    );
+
+    // cache only if we're not using custom elements
+    if (opts?.elements == null) {
+      this.selectedElementsCache.selectedElementIds = opts.selectedElementIds;
+      this.selectedElementsCache.elements = this.nonDeletedElements;
+      this.selectedElementsCache.cache.set(hash, selectedElements);
+    }
+
+    return selectedElements;
+  }
+
+  getNonDeletedFrames(): readonly NonDeleted<ExcalidrawFrameElement>[] {
+    return this.nonDeletedFrames;
+  }
+
   getElement<T extends ExcalidrawElement>(id: T["id"]): T | null {
     return (this.elementsMap.get(id) as T | undefined) || null;
   }
@@ -110,12 +213,19 @@ class Scene {
 
   replaceAllElements(nextElements: readonly ExcalidrawElement[]) {
     this.elements = nextElements;
+    const nextFrames: ExcalidrawFrameElement[] = [];
     this.elementsMap.clear();
     nextElements.forEach((element) => {
+      if (isFrameElement(element)) {
+        nextFrames.push(element);
+      }
       this.elementsMap.set(element.id, element);
       Scene.mapElementToScene(element, this);
     });
     this.nonDeletedElements = getNonDeletedElements(this.elements);
+    this.frames = nextFrames;
+    this.nonDeletedFrames = getNonDeletedFrames(this.frames);
+
     this.informMutation();
   }
 
@@ -141,11 +251,21 @@ class Scene {
   }
 
   destroy() {
+    this.nonDeletedElements = [];
+    this.elements = [];
+    this.nonDeletedFrames = [];
+    this.frames = [];
+    this.elementsMap.clear();
+    this.selectedElementsCache.selectedElementIds = null;
+    this.selectedElementsCache.elements = null;
+    this.selectedElementsCache.cache.clear();
+
     Scene.sceneMapById.forEach((scene, elementKey) => {
       if (scene === this) {
         Scene.sceneMapById.delete(elementKey);
       }
     });
+
     // done not for memory leaks, but to guard against possible late fires
     // (I guess?)
     this.callbacks.clear();
@@ -165,6 +285,29 @@ class Scene {
     this.replaceAllElements(nextElements);
   }
 
+  insertElementsAtIndex(elements: ExcalidrawElement[], index: number) {
+    if (!Number.isFinite(index) || index < 0) {
+      throw new Error(
+        "insertElementAtIndex can only be called with index >= 0",
+      );
+    }
+    const nextElements = [
+      ...this.elements.slice(0, index),
+      ...elements,
+      ...this.elements.slice(index),
+    ];
+
+    this.replaceAllElements(nextElements);
+  }
+
+  addNewElement = (element: ExcalidrawElement) => {
+    if (element.frameId) {
+      this.insertElementAtIndex(element, this.getElementIndex(element.frameId));
+    } else {
+      this.replaceAllElements([...this.elements, element]);
+    }
+  };
+
   getElementIndex(elementId: string) {
     return this.elements.findIndex((element) => element.id === elementId);
   }
diff --git a/src/scene/comparisons.ts b/src/scene/comparisons.ts
index b88c8b1ea..ff73e83c9 100644
--- a/src/scene/comparisons.ts
+++ b/src/scene/comparisons.ts
@@ -7,7 +7,8 @@ export const hasBackground = (type: string) =>
   type === "line" ||
   type === "freedraw";
 
-export const hasStrokeColor = (type: string) => type !== "image";
+export const hasStrokeColor = (type: string) =>
+  type !== "image" && type !== "frame";
 
 export const hasStrokeWidth = (type: string) =>
   type === "rectangle" ||
diff --git a/src/scene/export.ts b/src/scene/export.ts
index 6c5712be6..78fc9b466 100644
--- a/src/scene/export.ts
+++ b/src/scene/export.ts
@@ -1,8 +1,8 @@
 import rough from "roughjs/bin/rough";
 import { NonDeletedExcalidrawElement } from "../element/types";
-import { getCommonBounds } from "../element/bounds";
+import { getCommonBounds, getElementAbsoluteCoords } from "../element/bounds";
 import { renderScene, renderSceneToSvg } from "../renderer/renderScene";
-import { distance } from "../utils";
+import { distance, isOnlyExportingSingleFrame } from "../utils";
 import { AppState, BinaryFiles } from "../types";
 import { DEFAULT_EXPORT_PADDING, SVG_NS, THEME_FILTER } from "../constants";
 import { getDefaultAppState } from "../appState";
@@ -11,6 +11,7 @@ import {
   getInitializedImageElements,
   updateImageCache,
 } from "../element/image";
+import Scene from "./Scene";
 
 export const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
 
@@ -51,6 +52,8 @@ export const exportToCanvas = async (
     files,
   });
 
+  const onlyExportingSingleFrame = isOnlyExportingSingleFrame(elements);
+
   renderScene({
     elements,
     appState,
@@ -59,8 +62,8 @@ export const exportToCanvas = async (
     canvas,
     renderConfig: {
       viewBackgroundColor: exportBackground ? viewBackgroundColor : null,
-      scrollX: -minX + exportPadding,
-      scrollY: -minY + exportPadding,
+      scrollX: -minX + (onlyExportingSingleFrame ? 0 : exportPadding),
+      scrollY: -minY + (onlyExportingSingleFrame ? 0 : exportPadding),
       zoom: defaultAppState.zoom,
       remotePointerViewportCoords: {},
       remoteSelectedElementIds: {},
@@ -88,6 +91,7 @@ export const exportToSvg = async (
     viewBackgroundColor: string;
     exportWithDarkMode?: boolean;
     exportEmbedScene?: boolean;
+    renderFrame?: boolean;
   },
   files: BinaryFiles | null,
   opts?: {
@@ -140,6 +144,39 @@ export const exportToSvg = async (
     }
     assetPath = `${assetPath}/dist/excalidraw-assets/`;
   }
+
+  // do not apply clipping when we're exporting the whole scene
+  const isExportingWholeCanvas =
+    Scene.getScene(elements[0])?.getNonDeletedElements()?.length ===
+    elements.length;
+
+  const onlyExportingSingleFrame = isOnlyExportingSingleFrame(elements);
+
+  const offsetX = -minX + (onlyExportingSingleFrame ? 0 : exportPadding);
+  const offsetY = -minY + (onlyExportingSingleFrame ? 0 : exportPadding);
+
+  const exportingFrame =
+    isExportingWholeCanvas || !onlyExportingSingleFrame
+      ? undefined
+      : elements.find((element) => element.type === "frame");
+
+  let exportingFrameClipPath = "";
+  if (exportingFrame) {
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(exportingFrame);
+    const cx = (x2 - x1) / 2 - (exportingFrame.x - x1);
+    const cy = (y2 - y1) / 2 - (exportingFrame.y - y1);
+
+    exportingFrameClipPath = `<clipPath id=${exportingFrame.id}>
+            <rect transform="translate(${exportingFrame.x + offsetX} ${
+      exportingFrame.y + offsetY
+    }) rotate(${exportingFrame.angle} ${cx} ${cy})"
+          width="${exportingFrame.width}"
+          height="${exportingFrame.height}"
+          >
+          </rect>
+        </clipPath>`;
+  }
+
   svgRoot.innerHTML = `
   ${SVG_EXPORT_TAG}
   ${metadata}
@@ -154,8 +191,10 @@ export const exportToSvg = async (
         src: url("${assetPath}Cascadia.woff2");
       }
     </style>
+    ${exportingFrameClipPath}
   </defs>
   `;
+
   // render background rect
   if (appState.exportBackground && viewBackgroundColor) {
     const rect = svgRoot.ownerDocument!.createElementNS(SVG_NS, "rect");
@@ -169,9 +208,10 @@ export const exportToSvg = async (
 
   const rsvg = rough.svg(svgRoot);
   renderSceneToSvg(elements, rsvg, svgRoot, files || {}, {
-    offsetX: -minX + exportPadding,
-    offsetY: -minY + exportPadding,
+    offsetX,
+    offsetY,
     exportWithDarkMode: appState.exportWithDarkMode,
+    exportingFrameId: exportingFrame?.id || null,
   });
 
   return svgRoot;
@@ -182,9 +222,36 @@ const getCanvasSize = (
   elements: readonly NonDeletedExcalidrawElement[],
   exportPadding: number,
 ): [number, number, number, number] => {
+  // we should decide if we are exporting the whole canvas
+  // if so, we are not clipping elements in the frame
+  // and therefore, we should not do anything special
+
+  const isExportingWholeCanvas =
+    Scene.getScene(elements[0])?.getNonDeletedElements()?.length ===
+    elements.length;
+
+  const onlyExportingSingleFrame = isOnlyExportingSingleFrame(elements);
+
+  if (!isExportingWholeCanvas || onlyExportingSingleFrame) {
+    const frames = elements.filter((element) => element.type === "frame");
+
+    const exportedFrameIds = frames.reduce((acc, frame) => {
+      acc[frame.id] = true;
+      return acc;
+    }, {} as Record<string, true>);
+
+    // elements in a frame do not affect the canvas size if we're not exporting
+    // the whole canvas
+    elements = elements.filter(
+      (element) => !exportedFrameIds[element.frameId ?? ""],
+    );
+  }
+
   const [minX, minY, maxX, maxY] = getCommonBounds(elements);
-  const width = distance(minX, maxX) + exportPadding * 2;
-  const height = distance(minY, maxY) + exportPadding + exportPadding;
+  const width =
+    distance(minX, maxX) + (onlyExportingSingleFrame ? 0 : exportPadding * 2);
+  const height =
+    distance(minY, maxY) + (onlyExportingSingleFrame ? 0 : exportPadding * 2);
 
   return [minX, minY, width, height];
 };
diff --git a/src/scene/scrollbars.ts b/src/scene/scrollbars.ts
index c36acde04..76a04d606 100644
--- a/src/scene/scrollbars.ts
+++ b/src/scene/scrollbars.ts
@@ -41,10 +41,10 @@ export const getScrollBars = (
   const viewportHeightDiff = viewportHeight - viewportHeightWithZoom;
 
   const safeArea = {
-    top: parseInt(getGlobalCSSVariable("sat")),
-    bottom: parseInt(getGlobalCSSVariable("sab")),
-    left: parseInt(getGlobalCSSVariable("sal")),
-    right: parseInt(getGlobalCSSVariable("sar")),
+    top: parseInt(getGlobalCSSVariable("sat")) || 0,
+    bottom: parseInt(getGlobalCSSVariable("sab")) || 0,
+    left: parseInt(getGlobalCSSVariable("sal")) || 0,
+    right: parseInt(getGlobalCSSVariable("sar")) || 0,
   };
 
   const isRTL = getLanguage().rtl;
diff --git a/src/scene/selection.test.ts b/src/scene/selection.test.ts
new file mode 100644
index 000000000..644d2129f
--- /dev/null
+++ b/src/scene/selection.test.ts
@@ -0,0 +1,35 @@
+import { makeNextSelectedElementIds } from "./selection";
+
+describe("makeNextSelectedElementIds", () => {
+  const _makeNextSelectedElementIds = (
+    selectedElementIds: { [id: string]: true },
+    prevSelectedElementIds: { [id: string]: true },
+    expectUpdated: boolean,
+  ) => {
+    const ret = makeNextSelectedElementIds(selectedElementIds, {
+      selectedElementIds: prevSelectedElementIds,
+    });
+    expect(ret === selectedElementIds).toBe(expectUpdated);
+  };
+  it("should return prevState selectedElementIds if no change", () => {
+    _makeNextSelectedElementIds({}, {}, false);
+    _makeNextSelectedElementIds({ 1: true }, { 1: true }, false);
+    _makeNextSelectedElementIds(
+      { 1: true, 2: true },
+      { 1: true, 2: true },
+      false,
+    );
+  });
+  it("should return new selectedElementIds if changed", () => {
+    // _makeNextSelectedElementIds({ 1: true }, { 1: false }, true);
+    _makeNextSelectedElementIds({ 1: true }, {}, true);
+    _makeNextSelectedElementIds({}, { 1: true }, true);
+    _makeNextSelectedElementIds({ 1: true }, { 2: true }, true);
+    _makeNextSelectedElementIds({ 1: true }, { 1: true, 2: true }, true);
+    _makeNextSelectedElementIds(
+      { 1: true, 2: true },
+      { 1: true, 3: true },
+      true,
+    );
+  });
+});
diff --git a/src/scene/selection.ts b/src/scene/selection.ts
index 39d3518b1..bbb629d3c 100644
--- a/src/scene/selection.ts
+++ b/src/scene/selection.ts
@@ -5,17 +5,62 @@ import {
 import { getElementAbsoluteCoords, getElementBounds } from "../element";
 import { AppState } from "../types";
 import { isBoundToContainer } from "../element/typeChecks";
+import {
+  elementOverlapsWithFrame,
+  getContainingFrame,
+  getFrameElements,
+} from "../frame";
+import { isShallowEqual } from "../utils";
+
+/**
+ * Frames and their containing elements are not to be selected at the same time.
+ * Given an array of selected elements, if there are frames and their containing elements
+ * we only keep the frames.
+ * @param selectedElements
+ */
+export const excludeElementsInFramesFromSelection = <
+  T extends ExcalidrawElement,
+>(
+  selectedElements: readonly T[],
+) => {
+  const framesInSelection = new Set<T["id"]>();
+
+  selectedElements.forEach((element) => {
+    if (element.type === "frame") {
+      framesInSelection.add(element.id);
+    }
+  });
+
+  return selectedElements.filter((element) => {
+    if (element.frameId && framesInSelection.has(element.frameId)) {
+      return false;
+    }
+    return true;
+  });
+};
 
 export const getElementsWithinSelection = (
   elements: readonly NonDeletedExcalidrawElement[],
   selection: NonDeletedExcalidrawElement,
+  excludeElementsInFrames: boolean = true,
 ) => {
   const [selectionX1, selectionY1, selectionX2, selectionY2] =
     getElementAbsoluteCoords(selection);
-  return elements.filter((element) => {
-    const [elementX1, elementY1, elementX2, elementY2] =
+
+  let elementsInSelection = elements.filter((element) => {
+    let [elementX1, elementY1, elementX2, elementY2] =
       getElementBounds(element);
 
+    const containingFrame = getContainingFrame(element);
+    if (containingFrame) {
+      const [fx1, fy1, fx2, fy2] = getElementBounds(containingFrame);
+
+      elementX1 = Math.max(fx1, elementX1);
+      elementY1 = Math.max(fy1, elementY1);
+      elementX2 = Math.min(fx2, elementX2);
+      elementY2 = Math.min(fy2, elementY2);
+    }
+
     return (
       element.locked === false &&
       element.type !== "selection" &&
@@ -26,13 +71,59 @@ export const getElementsWithinSelection = (
       selectionY2 >= elementY2
     );
   });
+
+  elementsInSelection = excludeElementsInFrames
+    ? excludeElementsInFramesFromSelection(elementsInSelection)
+    : elementsInSelection;
+
+  elementsInSelection = elementsInSelection.filter((element) => {
+    const containingFrame = getContainingFrame(element);
+
+    if (containingFrame) {
+      return elementOverlapsWithFrame(element, containingFrame);
+    }
+
+    return true;
+  });
+
+  return elementsInSelection;
 };
 
-export const isSomeElementSelected = (
-  elements: readonly NonDeletedExcalidrawElement[],
-  appState: AppState,
-): boolean =>
-  elements.some((element) => appState.selectedElementIds[element.id]);
+// FIXME move this into the editor instance to keep utility methods stateless
+export const isSomeElementSelected = (function () {
+  let lastElements: readonly NonDeletedExcalidrawElement[] | null = null;
+  let lastSelectedElementIds: AppState["selectedElementIds"] | null = null;
+  let isSelected: boolean | null = null;
+
+  const ret = (
+    elements: readonly NonDeletedExcalidrawElement[],
+    appState: Pick<AppState, "selectedElementIds">,
+  ): boolean => {
+    if (
+      isSelected != null &&
+      elements === lastElements &&
+      appState.selectedElementIds === lastSelectedElementIds
+    ) {
+      return isSelected;
+    }
+
+    isSelected = elements.some(
+      (element) => appState.selectedElementIds[element.id],
+    );
+    lastElements = elements;
+    lastSelectedElementIds = appState.selectedElementIds;
+
+    return isSelected;
+  };
+
+  ret.clearCache = () => {
+    lastElements = null;
+    lastSelectedElementIds = null;
+    isSelected = null;
+  };
+
+  return ret;
+})();
 
 /**
  * Returns common attribute (picked by `getAttribute` callback) of selected
@@ -40,7 +131,7 @@ export const isSomeElementSelected = (
  */
 export const getCommonAttributeOfSelectedElements = <T>(
   elements: readonly NonDeletedExcalidrawElement[],
-  appState: AppState,
+  appState: Pick<AppState, "selectedElementIds">,
   getAttribute: (element: ExcalidrawElement) => T,
 ): T | null => {
   const attributes = Array.from(
@@ -55,15 +146,18 @@ export const getCommonAttributeOfSelectedElements = <T>(
 
 export const getSelectedElements = (
   elements: readonly NonDeletedExcalidrawElement[],
-  appState: AppState,
-  includeBoundTextElement: boolean = false,
-) =>
-  elements.filter((element) => {
+  appState: Pick<AppState, "selectedElementIds">,
+  opts?: {
+    includeBoundTextElement?: boolean;
+    includeElementsInFrames?: boolean;
+  },
+) => {
+  const selectedElements = elements.filter((element) => {
     if (appState.selectedElementIds[element.id]) {
       return element;
     }
     if (
-      includeBoundTextElement &&
+      opts?.includeBoundTextElement &&
       isBoundToContainer(element) &&
       appState.selectedElementIds[element?.containerId]
     ) {
@@ -72,10 +166,44 @@ export const getSelectedElements = (
     return null;
   });
 
+  if (opts?.includeElementsInFrames) {
+    const elementsToInclude: ExcalidrawElement[] = [];
+    selectedElements.forEach((element) => {
+      if (element.type === "frame") {
+        getFrameElements(elements, element.id).forEach((e) =>
+          elementsToInclude.push(e),
+        );
+      }
+      elementsToInclude.push(element);
+    });
+
+    return elementsToInclude;
+  }
+
+  return selectedElements;
+};
+
 export const getTargetElements = (
   elements: readonly NonDeletedExcalidrawElement[],
-  appState: AppState,
+  appState: Pick<AppState, "selectedElementIds" | "editingElement">,
 ) =>
   appState.editingElement
     ? [appState.editingElement]
-    : getSelectedElements(elements, appState, true);
+    : getSelectedElements(elements, appState, {
+        includeBoundTextElement: true,
+      });
+
+/**
+ * returns prevState's selectedElementids if no change from previous, so as to
+ * retain reference identity for memoization
+ */
+export const makeNextSelectedElementIds = (
+  nextSelectedElementIds: AppState["selectedElementIds"],
+  prevState: Pick<AppState, "selectedElementIds">,
+) => {
+  if (isShallowEqual(prevState.selectedElementIds, nextSelectedElementIds)) {
+    return prevState.selectedElementIds;
+  }
+
+  return nextSelectedElementIds;
+};
diff --git a/src/shapes.tsx b/src/shapes.tsx
index a8b9b5301..bb827995b 100644
--- a/src/shapes.tsx
+++ b/src/shapes.tsx
@@ -83,6 +83,14 @@ export const SHAPES = [
     numericKey: KEYS["0"],
     fillable: false,
   },
+  // TODO: frame, create icon and set up numeric key
+  // {
+  //   icon: RectangleIcon,
+  //   value: "frame",
+  //   key: KEYS.F,
+  //   numericKey: KEYS.SUBTRACT,
+  //   fillable: false,
+  // },
 ] as const;
 
 export const findShapeByKey = (key: string) => {
diff --git a/src/tests/MobileMenu.test.tsx b/src/tests/MobileMenu.test.tsx
index 41d5d0169..60059cb2e 100644
--- a/src/tests/MobileMenu.test.tsx
+++ b/src/tests/MobileMenu.test.tsx
@@ -29,6 +29,7 @@ describe("Test MobileMenu", () => {
     expect(h.app.device).toMatchInlineSnapshot(`
       Object {
         "canDeviceFitSidebar": false,
+        "isLandscape": true,
         "isMobile": true,
         "isSmScreen": false,
         "isTouchScreen": false,
diff --git a/src/tests/__snapshots__/contextmenu.test.tsx.snap b/src/tests/__snapshots__/contextmenu.test.tsx.snap
index 18656edd1..0049c9199 100644
--- a/src/tests/__snapshots__/contextmenu.test.tsx.snap
+++ b/src/tests/__snapshots__/contextmenu.test.tsx.snap
@@ -41,6 +41,24 @@ Object {
           "category": "element",
         },
       },
+      Object {
+        "contextItemLabel": "labels.selectAllElementsInFrame",
+        "name": "selectAllElementsInFrame",
+        "perform": [Function],
+        "predicate": [Function],
+        "trackEvent": Object {
+          "category": "canvas",
+        },
+      },
+      Object {
+        "contextItemLabel": "labels.removeAllElementsFromFrame",
+        "name": "removeAllElementsFromFrame",
+        "perform": [Function],
+        "predicate": [Function],
+        "trackEvent": Object {
+          "category": "history",
+        },
+      },
       "separator",
       Object {
         "contextItemLabel": "labels.copyAsPng",
@@ -121,7 +139,7 @@ Object {
       },
       Object {
         "contextItemLabel": "labels.createContainerFromText",
-        "name": "createContainerFromText",
+        "name": "wrapTextInContainer",
         "perform": [Function],
         "predicate": [Function],
         "trackEvent": Object {
@@ -197,7 +215,6 @@ Object {
         "keyTest": [Function],
         "name": "flipHorizontal",
         "perform": [Function],
-        "predicate": [Function],
         "trackEvent": Object {
           "category": "element",
         },
@@ -207,7 +224,6 @@ Object {
         "keyTest": [Function],
         "name": "flipVertical",
         "perform": [Function],
-        "predicate": [Function],
         "trackEvent": Object {
           "category": "element",
         },
@@ -247,8 +263,9 @@ Object {
       Object {
         "contextItemLabel": [Function],
         "keyTest": [Function],
-        "name": "toggleLock",
+        "name": "toggleElementLock",
         "perform": [Function],
+        "predicate": [Function],
         "trackEvent": Object {
           "category": "element",
         },
@@ -279,28 +296,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -326,6 +352,7 @@ Object {
     "id0": true,
     "id1": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {
     "g1": true,
   },
@@ -355,6 +382,7 @@ Object {
   "backgroundColor": "red",
   "boundElements": null,
   "fillStyle": "solid",
+  "frameId": null,
   "groupIds": Array [
     "g1",
   ],
@@ -369,7 +397,7 @@ Object {
     "type": 3,
   },
   "seed": 337897,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -388,6 +416,7 @@ Object {
   "backgroundColor": "red",
   "boundElements": null,
   "fillStyle": "solid",
+  "frameId": null,
   "groupIds": Array [
     "g1",
   ],
@@ -402,7 +431,7 @@ Object {
     "type": 3,
   },
   "seed": 1278240551,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -459,28 +488,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -505,6 +543,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -534,6 +573,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0",
@@ -546,7 +586,7 @@ Object {
     "type": 3,
   },
   "seed": 1278240551,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -592,6 +632,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -604,7 +645,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -645,28 +686,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -691,6 +741,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -718,6 +769,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id1",
@@ -730,7 +782,7 @@ Object {
     "type": 3,
   },
   "seed": 453191,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -749,6 +801,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0",
@@ -761,7 +814,7 @@ Object {
     "type": 3,
   },
   "seed": 1278240551,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -807,6 +860,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -819,7 +873,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -849,6 +903,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -861,7 +916,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -877,6 +932,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -889,7 +945,7 @@ Object {
             "type": 3,
           },
           "seed": 453191,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -919,6 +975,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -931,7 +988,7 @@ Object {
             "type": 3,
           },
           "seed": 453191,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -947,6 +1004,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -959,7 +1017,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1000,28 +1058,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -1046,6 +1113,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -1073,6 +1141,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id1",
@@ -1085,7 +1154,7 @@ Object {
     "type": 3,
   },
   "seed": 453191,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -1104,6 +1173,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0",
@@ -1116,7 +1186,7 @@ Object {
     "type": 3,
   },
   "seed": 1278240551,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -1162,6 +1232,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -1174,7 +1245,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1204,6 +1275,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -1216,7 +1288,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1232,6 +1304,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -1244,7 +1317,7 @@ Object {
             "type": 3,
           },
           "seed": 453191,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1274,6 +1347,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -1286,7 +1360,7 @@ Object {
             "type": 3,
           },
           "seed": 453191,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1302,6 +1376,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -1314,7 +1389,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1355,28 +1430,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -1401,6 +1485,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -1430,6 +1515,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0",
@@ -1441,14 +1527,14 @@ Object {
   "roundness": Object {
     "type": 3,
   },
-  "seed": 449462985,
-  "strokeColor": "#000000",
+  "seed": 1278240551,
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
   "updated": 1,
   "version": 2,
-  "versionNonce": 453191,
+  "versionNonce": 449462985,
   "width": 20,
   "x": -10,
   "y": 0,
@@ -1488,6 +1574,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -1499,14 +1586,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 449462985,
-          "strokeColor": "#000000",
+          "seed": 1278240551,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 453191,
+          "versionNonce": 449462985,
           "width": 20,
           "x": -10,
           "y": 0,
@@ -1541,28 +1628,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -1585,6 +1681,7 @@ Object {
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -1612,6 +1709,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0",
@@ -1623,14 +1721,14 @@ Object {
   "roundness": Object {
     "type": 3,
   },
-  "seed": 337897,
-  "strokeColor": "#000000",
+  "seed": 1278240551,
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
   "updated": 1,
   "version": 3,
-  "versionNonce": 449462985,
+  "versionNonce": 453191,
   "width": 20,
   "x": -10,
   "y": 0,
@@ -1670,6 +1768,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -1681,14 +1780,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 337897,
-          "strokeColor": "#000000",
+          "seed": 1278240551,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 1278240551,
+          "versionNonce": 449462985,
           "width": 20,
           "x": -10,
           "y": 0,
@@ -1710,6 +1809,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -1721,14 +1821,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 337897,
-          "strokeColor": "#000000",
+          "seed": 1278240551,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 3,
-          "versionNonce": 449462985,
+          "versionNonce": 453191,
           "width": 20,
           "x": -10,
           "y": 0,
@@ -1763,28 +1863,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -1809,6 +1918,7 @@ Object {
   "selectedElementIds": Object {
     "id0_copy": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -1836,6 +1946,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0",
@@ -1848,7 +1959,7 @@ Object {
     "type": 3,
   },
   "seed": 1278240551,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -1867,6 +1978,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0_copy",
@@ -1879,7 +1991,7 @@ Object {
     "type": 3,
   },
   "seed": 453191,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -1925,6 +2037,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -1937,7 +2050,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1967,6 +2080,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -1979,7 +2093,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1995,6 +2109,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0_copy",
@@ -2007,7 +2122,7 @@ Object {
             "type": 3,
           },
           "seed": 453191,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2048,28 +2163,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -2096,8 +2220,8 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
     "id1": true,
-    "id2": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {
     "id3": true,
   },
@@ -2127,6 +2251,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id3",
   ],
@@ -2141,7 +2266,7 @@ Object {
     "type": 3,
   },
   "seed": 1278240551,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -2160,6 +2285,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id3",
   ],
@@ -2174,7 +2300,7 @@ Object {
     "type": 3,
   },
   "seed": 453191,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -2220,6 +2346,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -2232,7 +2359,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2262,6 +2389,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -2274,7 +2402,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2290,6 +2418,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -2302,7 +2431,7 @@ Object {
             "type": 3,
           },
           "seed": 453191,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2323,7 +2452,6 @@ Object {
         "selectedElementIds": Object {
           "id0": true,
           "id1": true,
-          "id2": true,
         },
         "selectedGroupIds": Object {
           "id3": true,
@@ -2336,6 +2464,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -2350,7 +2479,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2366,6 +2495,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -2380,7 +2510,7 @@ Object {
             "type": 3,
           },
           "seed": 453191,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2412,7 +2542,7 @@ Object {
   "collaborators": Map {},
   "contextMenu": null,
   "currentChartType": "bar",
-  "currentItemBackgroundColor": "#e64980",
+  "currentItemBackgroundColor": "#a5d8ff",
   "currentItemEndArrowhead": "arrow",
   "currentItemFillStyle": "cross-hatch",
   "currentItemFontFamily": 1,
@@ -2421,28 +2551,37 @@ Object {
   "currentItemRoughness": 2,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#c92a2a",
+  "currentItemStrokeColor": "#e03131",
   "currentItemStrokeStyle": "dotted",
   "currentItemStrokeWidth": 2,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -2450,7 +2589,7 @@ Object {
   "offsetTop": 10,
   "openDialog": null,
   "openMenu": null,
-  "openPopup": "backgroundColorPicker",
+  "openPopup": null,
   "openSidebar": null,
   "pasteDialog": Object {
     "data": null,
@@ -2467,6 +2606,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -2493,9 +2633,10 @@ Object {
 exports[`contextMenu element selecting 'Paste styles' in context menu pastes styles: [end of test] element 0 1`] = `
 Object {
   "angle": 0,
-  "backgroundColor": "#e64980",
+  "backgroundColor": "#a5d8ff",
   "boundElements": null,
   "fillStyle": "cross-hatch",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0",
@@ -2508,7 +2649,7 @@ Object {
     "type": 3,
   },
   "seed": 1278240551,
-  "strokeColor": "#c92a2a",
+  "strokeColor": "#e03131",
   "strokeStyle": "dotted",
   "strokeWidth": 2,
   "type": "rectangle",
@@ -2524,9 +2665,10 @@ Object {
 exports[`contextMenu element selecting 'Paste styles' in context menu pastes styles: [end of test] element 1 1`] = `
 Object {
   "angle": 0,
-  "backgroundColor": "#e64980",
+  "backgroundColor": "#a5d8ff",
   "boundElements": null,
   "fillStyle": "cross-hatch",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id1",
@@ -2539,7 +2681,7 @@ Object {
     "type": 3,
   },
   "seed": 400692809,
-  "strokeColor": "#c92a2a",
+  "strokeColor": "#e03131",
   "strokeStyle": "dotted",
   "strokeWidth": 2,
   "type": "rectangle",
@@ -2585,6 +2727,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -2597,7 +2740,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2627,6 +2770,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -2639,7 +2783,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2655,6 +2799,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -2667,7 +2812,7 @@ Object {
             "type": 3,
           },
           "seed": 453191,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2697,6 +2842,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -2709,7 +2855,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2725,6 +2871,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -2737,7 +2884,7 @@ Object {
             "type": 3,
           },
           "seed": 453191,
-          "strokeColor": "#c92a2a",
+          "strokeColor": "#e03131",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2767,6 +2914,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -2779,7 +2927,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2792,9 +2940,10 @@ Object {
         },
         Object {
           "angle": 0,
-          "backgroundColor": "#e64980",
+          "backgroundColor": "#a5d8ff",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -2807,7 +2956,7 @@ Object {
             "type": 3,
           },
           "seed": 453191,
-          "strokeColor": "#c92a2a",
+          "strokeColor": "#e03131",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2837,6 +2986,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -2849,7 +2999,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2862,9 +3012,10 @@ Object {
         },
         Object {
           "angle": 0,
-          "backgroundColor": "#e64980",
+          "backgroundColor": "#a5d8ff",
           "boundElements": null,
           "fillStyle": "cross-hatch",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -2877,7 +3028,7 @@ Object {
             "type": 3,
           },
           "seed": 453191,
-          "strokeColor": "#c92a2a",
+          "strokeColor": "#e03131",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2907,6 +3058,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -2919,7 +3071,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2932,9 +3084,10 @@ Object {
         },
         Object {
           "angle": 0,
-          "backgroundColor": "#e64980",
+          "backgroundColor": "#a5d8ff",
           "boundElements": null,
           "fillStyle": "cross-hatch",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -2947,7 +3100,7 @@ Object {
             "type": 3,
           },
           "seed": 453191,
-          "strokeColor": "#c92a2a",
+          "strokeColor": "#e03131",
           "strokeStyle": "solid",
           "strokeWidth": 2,
           "type": "rectangle",
@@ -2977,6 +3130,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -2989,7 +3143,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -3002,9 +3156,10 @@ Object {
         },
         Object {
           "angle": 0,
-          "backgroundColor": "#e64980",
+          "backgroundColor": "#a5d8ff",
           "boundElements": null,
           "fillStyle": "cross-hatch",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -3017,7 +3172,7 @@ Object {
             "type": 3,
           },
           "seed": 453191,
-          "strokeColor": "#c92a2a",
+          "strokeColor": "#e03131",
           "strokeStyle": "dotted",
           "strokeWidth": 2,
           "type": "rectangle",
@@ -3047,6 +3202,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -3059,7 +3215,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -3072,9 +3228,10 @@ Object {
         },
         Object {
           "angle": 0,
-          "backgroundColor": "#e64980",
+          "backgroundColor": "#a5d8ff",
           "boundElements": null,
           "fillStyle": "cross-hatch",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -3087,7 +3244,7 @@ Object {
             "type": 3,
           },
           "seed": 400692809,
-          "strokeColor": "#c92a2a",
+          "strokeColor": "#e03131",
           "strokeStyle": "dotted",
           "strokeWidth": 2,
           "type": "rectangle",
@@ -3117,6 +3274,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -3129,7 +3287,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -3142,9 +3300,10 @@ Object {
         },
         Object {
           "angle": 0,
-          "backgroundColor": "#e64980",
+          "backgroundColor": "#a5d8ff",
           "boundElements": null,
           "fillStyle": "cross-hatch",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -3157,7 +3316,7 @@ Object {
             "type": 3,
           },
           "seed": 400692809,
-          "strokeColor": "#c92a2a",
+          "strokeColor": "#e03131",
           "strokeStyle": "dotted",
           "strokeWidth": 2,
           "type": "rectangle",
@@ -3184,9 +3343,10 @@ Object {
       "elements": Array [
         Object {
           "angle": 0,
-          "backgroundColor": "#e64980",
+          "backgroundColor": "#a5d8ff",
           "boundElements": null,
           "fillStyle": "cross-hatch",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -3199,7 +3359,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#c92a2a",
+          "strokeColor": "#e03131",
           "strokeStyle": "dotted",
           "strokeWidth": 2,
           "type": "rectangle",
@@ -3212,9 +3372,10 @@ Object {
         },
         Object {
           "angle": 0,
-          "backgroundColor": "#e64980",
+          "backgroundColor": "#a5d8ff",
           "boundElements": null,
           "fillStyle": "cross-hatch",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -3227,7 +3388,7 @@ Object {
             "type": 3,
           },
           "seed": 400692809,
-          "strokeColor": "#c92a2a",
+          "strokeColor": "#e03131",
           "strokeStyle": "dotted",
           "strokeWidth": 2,
           "type": "rectangle",
@@ -3246,7 +3407,7 @@ Object {
 
 exports[`contextMenu element selecting 'Paste styles' in context menu pastes styles: [end of test] number of elements 1`] = `2`;
 
-exports[`contextMenu element selecting 'Paste styles' in context menu pastes styles: [end of test] number of renders 1`] = `33`;
+exports[`contextMenu element selecting 'Paste styles' in context menu pastes styles: [end of test] number of renders 1`] = `32`;
 
 exports[`contextMenu element selecting 'Send backward' in context menu sends element backward: [end of test] appState 1`] = `
 Object {
@@ -3268,28 +3429,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -3314,6 +3484,7 @@ Object {
   "selectedElementIds": Object {
     "id1": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -3341,6 +3512,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id1",
@@ -3353,7 +3525,7 @@ Object {
     "type": 3,
   },
   "seed": 453191,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -3372,6 +3544,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0",
@@ -3384,7 +3557,7 @@ Object {
     "type": 3,
   },
   "seed": 1278240551,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -3430,6 +3603,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -3442,7 +3616,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -3472,6 +3646,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -3484,7 +3659,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -3500,6 +3675,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -3512,7 +3688,7 @@ Object {
             "type": 3,
           },
           "seed": 453191,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -3542,6 +3718,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -3554,7 +3731,7 @@ Object {
             "type": 3,
           },
           "seed": 453191,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -3570,6 +3747,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -3582,7 +3760,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -3623,28 +3801,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -3669,6 +3856,7 @@ Object {
   "selectedElementIds": Object {
     "id1": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -3696,6 +3884,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id1",
@@ -3708,7 +3897,7 @@ Object {
     "type": 3,
   },
   "seed": 453191,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -3727,6 +3916,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0",
@@ -3739,7 +3929,7 @@ Object {
     "type": 3,
   },
   "seed": 1278240551,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -3785,6 +3975,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -3797,7 +3988,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -3827,6 +4018,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -3839,7 +4031,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -3855,6 +4047,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -3867,7 +4060,7 @@ Object {
             "type": 3,
           },
           "seed": 453191,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -3897,6 +4090,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -3909,7 +4103,7 @@ Object {
             "type": 3,
           },
           "seed": 453191,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -3925,6 +4119,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -3937,7 +4132,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -3978,28 +4173,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -4026,8 +4230,8 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
     "id1": true,
-    "id2": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -4055,6 +4259,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0",
@@ -4066,14 +4271,14 @@ Object {
   "roundness": Object {
     "type": 3,
   },
-  "seed": 449462985,
-  "strokeColor": "#000000",
+  "seed": 1278240551,
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
   "updated": 1,
   "version": 4,
-  "versionNonce": 238820263,
+  "versionNonce": 1014066025,
   "width": 20,
   "x": -10,
   "y": 0,
@@ -4086,6 +4291,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id1",
@@ -4097,14 +4303,14 @@ Object {
   "roundness": Object {
     "type": 3,
   },
-  "seed": 401146281,
-  "strokeColor": "#000000",
+  "seed": 453191,
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
   "updated": 1,
   "version": 4,
-  "versionNonce": 400692809,
+  "versionNonce": 238820263,
   "width": 20,
   "x": 20,
   "y": 30,
@@ -4144,6 +4350,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -4155,14 +4362,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 449462985,
-          "strokeColor": "#000000",
+          "seed": 1278240551,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 453191,
+          "versionNonce": 449462985,
           "width": 20,
           "x": -10,
           "y": 0,
@@ -4186,6 +4393,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -4197,14 +4405,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 449462985,
-          "strokeColor": "#000000",
+          "seed": 1278240551,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 453191,
+          "versionNonce": 449462985,
           "width": 20,
           "x": -10,
           "y": 0,
@@ -4214,6 +4422,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -4225,14 +4434,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 401146281,
-          "strokeColor": "#000000",
+          "seed": 453191,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 2019559783,
+          "versionNonce": 401146281,
           "width": 20,
           "x": 20,
           "y": 30,
@@ -4247,7 +4456,6 @@ Object {
         "selectedElementIds": Object {
           "id0": true,
           "id1": true,
-          "id2": true,
         },
         "selectedGroupIds": Object {
           "id3": true,
@@ -4260,6 +4468,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -4273,14 +4482,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 449462985,
-          "strokeColor": "#000000",
+          "seed": 1278240551,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 3,
-          "versionNonce": 1116226695,
+          "versionNonce": 1150084233,
           "width": 20,
           "x": -10,
           "y": 0,
@@ -4290,6 +4499,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -4303,14 +4513,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 401146281,
-          "strokeColor": "#000000",
+          "seed": 453191,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 3,
-          "versionNonce": 1014066025,
+          "versionNonce": 1116226695,
           "width": 20,
           "x": 20,
           "y": 30,
@@ -4325,7 +4535,6 @@ Object {
         "selectedElementIds": Object {
           "id0": true,
           "id1": true,
-          "id2": true,
         },
         "selectedGroupIds": Object {},
         "viewBackgroundColor": "#ffffff",
@@ -4336,6 +4545,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -4347,14 +4557,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 449462985,
-          "strokeColor": "#000000",
+          "seed": 1278240551,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 4,
-          "versionNonce": 238820263,
+          "versionNonce": 1014066025,
           "width": 20,
           "x": -10,
           "y": 0,
@@ -4364,6 +4574,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -4375,14 +4586,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 401146281,
-          "strokeColor": "#000000",
+          "seed": 453191,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 4,
-          "versionNonce": 400692809,
+          "versionNonce": 238820263,
           "width": 20,
           "x": 20,
           "y": 30,
@@ -4438,6 +4649,24 @@ Object {
           "category": "element",
         },
       },
+      Object {
+        "contextItemLabel": "labels.selectAllElementsInFrame",
+        "name": "selectAllElementsInFrame",
+        "perform": [Function],
+        "predicate": [Function],
+        "trackEvent": Object {
+          "category": "canvas",
+        },
+      },
+      Object {
+        "contextItemLabel": "labels.removeAllElementsFromFrame",
+        "name": "removeAllElementsFromFrame",
+        "perform": [Function],
+        "predicate": [Function],
+        "trackEvent": Object {
+          "category": "history",
+        },
+      },
       "separator",
       Object {
         "contextItemLabel": "labels.copyAsPng",
@@ -4518,7 +4747,7 @@ Object {
       },
       Object {
         "contextItemLabel": "labels.createContainerFromText",
-        "name": "createContainerFromText",
+        "name": "wrapTextInContainer",
         "perform": [Function],
         "predicate": [Function],
         "trackEvent": Object {
@@ -4594,7 +4823,6 @@ Object {
         "keyTest": [Function],
         "name": "flipHorizontal",
         "perform": [Function],
-        "predicate": [Function],
         "trackEvent": Object {
           "category": "element",
         },
@@ -4604,7 +4832,6 @@ Object {
         "keyTest": [Function],
         "name": "flipVertical",
         "perform": [Function],
-        "predicate": [Function],
         "trackEvent": Object {
           "category": "element",
         },
@@ -4644,8 +4871,9 @@ Object {
       Object {
         "contextItemLabel": [Function],
         "keyTest": [Function],
-        "name": "toggleLock",
+        "name": "toggleElementLock",
         "perform": [Function],
+        "predicate": [Function],
         "trackEvent": Object {
           "category": "element",
         },
@@ -4676,28 +4904,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -4716,7 +4953,6 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {
     "id0": true,
-    "id2": true,
   },
   "resizingElement": null,
   "scrollX": 0,
@@ -4725,9 +4961,8 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
     "id1": true,
-    "id2": true,
-    "id3": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -4755,6 +4990,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -4767,7 +5003,7 @@ Object {
     "type": 3,
   },
   "seed": 1278240551,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -4786,6 +5022,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id1",
@@ -4798,7 +5035,7 @@ Object {
     "type": 3,
   },
   "seed": 453191,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -4844,6 +5081,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -4856,7 +5094,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -4886,6 +5124,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -4898,7 +5137,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -4914,6 +5153,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -4926,7 +5166,7 @@ Object {
             "type": 3,
           },
           "seed": 453191,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -4988,6 +5228,24 @@ Object {
           "category": "element",
         },
       },
+      Object {
+        "contextItemLabel": "labels.selectAllElementsInFrame",
+        "name": "selectAllElementsInFrame",
+        "perform": [Function],
+        "predicate": [Function],
+        "trackEvent": Object {
+          "category": "canvas",
+        },
+      },
+      Object {
+        "contextItemLabel": "labels.removeAllElementsFromFrame",
+        "name": "removeAllElementsFromFrame",
+        "perform": [Function],
+        "predicate": [Function],
+        "trackEvent": Object {
+          "category": "history",
+        },
+      },
       "separator",
       Object {
         "contextItemLabel": "labels.copyAsPng",
@@ -5068,7 +5326,7 @@ Object {
       },
       Object {
         "contextItemLabel": "labels.createContainerFromText",
-        "name": "createContainerFromText",
+        "name": "wrapTextInContainer",
         "perform": [Function],
         "predicate": [Function],
         "trackEvent": Object {
@@ -5144,7 +5402,6 @@ Object {
         "keyTest": [Function],
         "name": "flipHorizontal",
         "perform": [Function],
-        "predicate": [Function],
         "trackEvent": Object {
           "category": "element",
         },
@@ -5154,7 +5411,6 @@ Object {
         "keyTest": [Function],
         "name": "flipVertical",
         "perform": [Function],
-        "predicate": [Function],
         "trackEvent": Object {
           "category": "element",
         },
@@ -5194,8 +5450,9 @@ Object {
       Object {
         "contextItemLabel": [Function],
         "keyTest": [Function],
-        "name": "toggleLock",
+        "name": "toggleElementLock",
         "perform": [Function],
+        "predicate": [Function],
         "trackEvent": Object {
           "category": "element",
         },
@@ -5226,28 +5483,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -5266,7 +5532,6 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {
     "id0": true,
-    "id2": true,
   },
   "resizingElement": null,
   "scrollX": 0,
@@ -5275,9 +5540,8 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
     "id1": true,
-    "id2": true,
-    "id3": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {
     "id4": true,
   },
@@ -5307,6 +5571,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id4",
   ],
@@ -5320,14 +5585,14 @@ Object {
   "roundness": Object {
     "type": 3,
   },
-  "seed": 449462985,
-  "strokeColor": "#000000",
+  "seed": 1278240551,
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
   "updated": 1,
   "version": 3,
-  "versionNonce": 1014066025,
+  "versionNonce": 1116226695,
   "width": 10,
   "x": -10,
   "y": 0,
@@ -5340,6 +5605,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [
     "id4",
   ],
@@ -5353,14 +5619,14 @@ Object {
   "roundness": Object {
     "type": 3,
   },
-  "seed": 401146281,
-  "strokeColor": "#000000",
+  "seed": 453191,
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
   "updated": 1,
   "version": 3,
-  "versionNonce": 238820263,
+  "versionNonce": 1014066025,
   "width": 10,
   "x": 10,
   "y": 0,
@@ -5400,6 +5666,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -5411,14 +5678,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 449462985,
-          "strokeColor": "#000000",
+          "seed": 1278240551,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 453191,
+          "versionNonce": 449462985,
           "width": 10,
           "x": -10,
           "y": 0,
@@ -5442,6 +5709,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -5453,14 +5721,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 449462985,
-          "strokeColor": "#000000",
+          "seed": 1278240551,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 453191,
+          "versionNonce": 449462985,
           "width": 10,
           "x": -10,
           "y": 0,
@@ -5470,6 +5738,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -5481,14 +5750,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 401146281,
-          "strokeColor": "#000000",
+          "seed": 453191,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 2019559783,
+          "versionNonce": 401146281,
           "width": 10,
           "x": 10,
           "y": 0,
@@ -5503,8 +5772,6 @@ Object {
         "selectedElementIds": Object {
           "id0": true,
           "id1": true,
-          "id2": true,
-          "id3": true,
         },
         "selectedGroupIds": Object {
           "id4": true,
@@ -5517,6 +5784,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -5530,14 +5798,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 449462985,
-          "strokeColor": "#000000",
+          "seed": 1278240551,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 3,
-          "versionNonce": 1014066025,
+          "versionNonce": 1116226695,
           "width": 10,
           "x": -10,
           "y": 0,
@@ -5547,6 +5815,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -5560,14 +5829,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 401146281,
-          "strokeColor": "#000000",
+          "seed": 453191,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 3,
-          "versionNonce": 238820263,
+          "versionNonce": 1014066025,
           "width": 10,
           "x": 10,
           "y": 0,
@@ -5642,6 +5911,16 @@ Object {
           "category": "canvas",
         },
       },
+      Object {
+        "contextItemLabel": "labels.elementLock.unlockAll",
+        "name": "unlockAllElements",
+        "perform": [Function],
+        "predicate": [Function],
+        "trackEvent": Object {
+          "category": "canvas",
+        },
+        "viewMode": false,
+      },
       "separator",
       Object {
         "checked": [Function],
@@ -5707,28 +5986,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -5751,6 +6039,7 @@ Object {
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -5837,6 +6126,24 @@ Object {
           "category": "element",
         },
       },
+      Object {
+        "contextItemLabel": "labels.selectAllElementsInFrame",
+        "name": "selectAllElementsInFrame",
+        "perform": [Function],
+        "predicate": [Function],
+        "trackEvent": Object {
+          "category": "canvas",
+        },
+      },
+      Object {
+        "contextItemLabel": "labels.removeAllElementsFromFrame",
+        "name": "removeAllElementsFromFrame",
+        "perform": [Function],
+        "predicate": [Function],
+        "trackEvent": Object {
+          "category": "history",
+        },
+      },
       "separator",
       Object {
         "contextItemLabel": "labels.copyAsPng",
@@ -5917,7 +6224,7 @@ Object {
       },
       Object {
         "contextItemLabel": "labels.createContainerFromText",
-        "name": "createContainerFromText",
+        "name": "wrapTextInContainer",
         "perform": [Function],
         "predicate": [Function],
         "trackEvent": Object {
@@ -5993,7 +6300,6 @@ Object {
         "keyTest": [Function],
         "name": "flipHorizontal",
         "perform": [Function],
-        "predicate": [Function],
         "trackEvent": Object {
           "category": "element",
         },
@@ -6003,7 +6309,6 @@ Object {
         "keyTest": [Function],
         "name": "flipVertical",
         "perform": [Function],
-        "predicate": [Function],
         "trackEvent": Object {
           "category": "element",
         },
@@ -6043,8 +6348,9 @@ Object {
       Object {
         "contextItemLabel": [Function],
         "keyTest": [Function],
-        "name": "toggleLock",
+        "name": "toggleElementLock",
         "perform": [Function],
+        "predicate": [Function],
         "trackEvent": Object {
           "category": "element",
         },
@@ -6075,28 +6381,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -6121,6 +6436,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -6183,6 +6499,24 @@ Object {
           "category": "element",
         },
       },
+      Object {
+        "contextItemLabel": "labels.selectAllElementsInFrame",
+        "name": "selectAllElementsInFrame",
+        "perform": [Function],
+        "predicate": [Function],
+        "trackEvent": Object {
+          "category": "canvas",
+        },
+      },
+      Object {
+        "contextItemLabel": "labels.removeAllElementsFromFrame",
+        "name": "removeAllElementsFromFrame",
+        "perform": [Function],
+        "predicate": [Function],
+        "trackEvent": Object {
+          "category": "history",
+        },
+      },
       "separator",
       Object {
         "contextItemLabel": "labels.copyAsPng",
@@ -6263,7 +6597,7 @@ Object {
       },
       Object {
         "contextItemLabel": "labels.createContainerFromText",
-        "name": "createContainerFromText",
+        "name": "wrapTextInContainer",
         "perform": [Function],
         "predicate": [Function],
         "trackEvent": Object {
@@ -6339,7 +6673,6 @@ Object {
         "keyTest": [Function],
         "name": "flipHorizontal",
         "perform": [Function],
-        "predicate": [Function],
         "trackEvent": Object {
           "category": "element",
         },
@@ -6349,7 +6682,6 @@ Object {
         "keyTest": [Function],
         "name": "flipVertical",
         "perform": [Function],
-        "predicate": [Function],
         "trackEvent": Object {
           "category": "element",
         },
@@ -6389,8 +6721,9 @@ Object {
       Object {
         "contextItemLabel": [Function],
         "keyTest": [Function],
-        "name": "toggleLock",
+        "name": "toggleElementLock",
         "perform": [Function],
+        "predicate": [Function],
         "trackEvent": Object {
           "category": "element",
         },
@@ -6421,28 +6754,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 100,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -6467,6 +6809,7 @@ Object {
   "selectedElementIds": Object {
     "id1": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -6494,6 +6837,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 20,
   "id": "id0",
@@ -6506,7 +6850,7 @@ Object {
     "type": 3,
   },
   "seed": 1278240551,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -6525,6 +6869,7 @@ Object {
   "backgroundColor": "red",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 200,
   "id": "id0",
@@ -6537,7 +6882,7 @@ Object {
     "type": 3,
   },
   "seed": 337897,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -6556,6 +6901,7 @@ Object {
   "backgroundColor": "red",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 200,
   "id": "id1",
@@ -6568,7 +6914,7 @@ Object {
     "type": 3,
   },
   "seed": 1278240551,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -6614,6 +6960,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id0",
@@ -6626,7 +6973,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
diff --git a/src/tests/__snapshots__/dragCreate.test.tsx.snap b/src/tests/__snapshots__/dragCreate.test.tsx.snap
index ffcf57b0d..b8d95d221 100644
--- a/src/tests/__snapshots__/dragCreate.test.tsx.snap
+++ b/src/tests/__snapshots__/dragCreate.test.tsx.snap
@@ -10,6 +10,7 @@ Object {
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
@@ -35,7 +36,7 @@ Object {
   "seed": 337897,
   "startArrowhead": null,
   "startBinding": null,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "arrow",
@@ -56,6 +57,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
@@ -68,7 +70,7 @@ Object {
     "type": 2,
   },
   "seed": 337897,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "diamond",
@@ -89,6 +91,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
@@ -101,7 +104,7 @@ Object {
     "type": 2,
   },
   "seed": 337897,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "ellipse",
@@ -122,6 +125,7 @@ Object {
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
@@ -147,7 +151,7 @@ Object {
   "seed": 337897,
   "startArrowhead": null,
   "startBinding": null,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "line",
@@ -168,6 +172,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
@@ -180,7 +185,7 @@ Object {
     "type": 3,
   },
   "seed": 337897,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
diff --git a/src/tests/__snapshots__/export.test.tsx.snap b/src/tests/__snapshots__/export.test.tsx.snap
index f292d199a..5f860150e 100644
--- a/src/tests/__snapshots__/export.test.tsx.snap
+++ b/src/tests/__snapshots__/export.test.tsx.snap
@@ -15,6 +15,7 @@ exports[`export exporting svg containing transformed images: svg export output 1
         src: url(\\"https://excalidraw.com/Cascadia.woff2\\");
       }
     </style>
+    
   </defs>
-  <g transform=\\"translate(30.710678118654755 30.710678118654755) rotate(315 50 50)\\"><use href=\\"#image-file_A\\" width=\\"100\\" height=\\"100\\"></use></g><g transform=\\"translate(130.71067811865476 30.710678118654755) rotate(45 25 25)\\"><use href=\\"#image-file_A\\" width=\\"50\\" height=\\"50\\" transform=\\"scale(-1, 1) translate(-50 0)\\"></use></g><g transform=\\"translate(30.710678118654755 130.71067811865476) rotate(45 50 50)\\"><use href=\\"#image-file_A\\" width=\\"100\\" height=\\"100\\" transform=\\"scale(1, -1) translate(0 -100)\\"></use></g><g transform=\\"translate(130.71067811865476 130.71067811865476) rotate(315 25 25)\\"><use href=\\"#image-file_A\\" width=\\"50\\" height=\\"50\\" transform=\\"scale(-1, -1) translate(-50 -50)\\"></use></g></svg>"
+  <g transform=\\"translate(30.710678118654755 30.710678118654755) rotate(315 50 50)\\"><use href=\\"#image-file_A\\" width=\\"100\\" height=\\"100\\" opacity=\\"1\\"></use></g><g transform=\\"translate(130.71067811865476 30.710678118654755) rotate(45 25 25)\\"><use href=\\"#image-file_A\\" width=\\"50\\" height=\\"50\\" opacity=\\"1\\" transform=\\"scale(-1, 1) translate(-50 0)\\"></use></g><g transform=\\"translate(30.710678118654755 130.71067811865476) rotate(45 50 50)\\"><use href=\\"#image-file_A\\" width=\\"100\\" height=\\"100\\" opacity=\\"1\\" transform=\\"scale(1, -1) translate(0 -100)\\"></use></g><g transform=\\"translate(130.71067811865476 130.71067811865476) rotate(315 25 25)\\"><use href=\\"#image-file_A\\" width=\\"50\\" height=\\"50\\" opacity=\\"1\\" transform=\\"scale(-1, -1) translate(-50 -50)\\"></use></g></svg>"
 `;
diff --git a/src/tests/__snapshots__/linearElementEditor.test.tsx.snap b/src/tests/__snapshots__/linearElementEditor.test.tsx.snap
index a2f142b66..d1a73e72f 100644
--- a/src/tests/__snapshots__/linearElementEditor.test.tsx.snap
+++ b/src/tests/__snapshots__/linearElementEditor.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Test Linear Elements Test bound text element should match styles for te
   class="excalidraw-wysiwyg"
   data-type="wysiwyg"
   dir="auto"
-  style="position: absolute; display: inline-block; min-height: 1em; margin: 0px; padding: 0px; border: 0px; outline: 0; resize: none; background: transparent; overflow: hidden; z-index: var(--zIndex-wysiwyg); word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: content-box; width: 10.5px; height: 25px; left: 35px; top: 7.5px; transform: translate(0px, 0px) scale(1) rotate(0deg); text-align: center; vertical-align: middle; color: rgb(0, 0, 0); opacity: 1; filter: var(--theme-filter); max-height: -7.5px; font: Emoji 20px 20px; line-height: 1.25; font-family: Virgil, Segoe UI Emoji;"
+  style="position: absolute; display: inline-block; min-height: 1em; margin: 0px; padding: 0px; border: 0px; outline: 0; resize: none; background: transparent; overflow: hidden; z-index: var(--zIndex-wysiwyg); word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: content-box; width: 10.5px; height: 25px; left: 35px; top: 7.5px; transform: translate(0px, 0px) scale(1) rotate(0deg); text-align: center; vertical-align: middle; color: rgb(30, 30, 30); opacity: 1; filter: var(--theme-filter); max-height: -7.5px; font: Emoji 20px 20px; line-height: 1.25; font-family: Virgil, Segoe UI Emoji;"
   tabindex="0"
   wrap="off"
 />
diff --git a/src/tests/__snapshots__/move.test.tsx.snap b/src/tests/__snapshots__/move.test.tsx.snap
index 7c0eed29b..5084d1508 100644
--- a/src/tests/__snapshots__/move.test.tsx.snap
+++ b/src/tests/__snapshots__/move.test.tsx.snap
@@ -6,6 +6,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0_copy",
@@ -18,7 +19,7 @@ Object {
     "type": 3,
   },
   "seed": 401146281,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -37,6 +38,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
@@ -49,7 +51,7 @@ Object {
     "type": 3,
   },
   "seed": 337897,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -68,6 +70,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
@@ -80,7 +83,7 @@ Object {
     "type": 3,
   },
   "seed": 337897,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -104,6 +107,7 @@ Object {
     },
   ],
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 100,
   "id": "id0",
@@ -116,7 +120,7 @@ Object {
     "type": 3,
   },
   "seed": 337897,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -140,6 +144,7 @@ Object {
     },
   ],
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 300,
   "id": "id1",
@@ -152,7 +157,7 @@ Object {
     "type": 3,
   },
   "seed": 449462985,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -177,6 +182,7 @@ Object {
     "gap": 10,
   },
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 81.48231043525051,
   "id": "id2",
@@ -206,7 +212,7 @@ Object {
     "focus": -0.6000000000000001,
     "gap": 10,
   },
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "line",
diff --git a/src/tests/__snapshots__/multiPointCreate.test.tsx.snap b/src/tests/__snapshots__/multiPointCreate.test.tsx.snap
index 03ef0d26b..0a6ae0cc8 100644
--- a/src/tests/__snapshots__/multiPointCreate.test.tsx.snap
+++ b/src/tests/__snapshots__/multiPointCreate.test.tsx.snap
@@ -8,6 +8,7 @@ Object {
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 110,
   "id": "id0",
@@ -40,7 +41,7 @@ Object {
   "seed": 337897,
   "startArrowhead": null,
   "startBinding": null,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "arrow",
@@ -61,6 +62,7 @@ Object {
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 110,
   "id": "id0",
@@ -93,7 +95,7 @@ Object {
   "seed": 337897,
   "startArrowhead": null,
   "startBinding": null,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "line",
diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap
index 967a0cf69..03ced1c37 100644
--- a/src/tests/__snapshots__/regressionTests.test.tsx.snap
+++ b/src/tests/__snapshots__/regressionTests.test.tsx.snap
@@ -20,28 +20,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -62,9 +71,6 @@ Object {
     "id0": true,
     "id1": true,
     "id2": true,
-    "id3": true,
-    "id4": true,
-    "id6": true,
   },
   "resizingElement": null,
   "scrollX": 0,
@@ -73,8 +79,8 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
     "id2": true,
-    "id7": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {
     "id5": true,
   },
@@ -98,103 +104,6 @@ Object {
 }
 `;
 
-exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 0,
-  "y": 30,
-}
-`;
-
-exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id5",
-  ],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1014066025,
-  "width": 10,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id5",
-  ],
-  "height": 10,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 401146281,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 238820263,
-  "width": 10,
-  "x": 0,
-  "y": 60,
-}
-`;
-
 exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -228,6 +137,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -240,7 +150,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -270,6 +180,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -282,7 +193,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -298,6 +209,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -310,7 +222,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -340,6 +252,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -352,7 +265,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -368,6 +281,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -380,7 +294,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -396,6 +310,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -408,7 +323,7 @@ Object {
             "type": 3,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -429,8 +344,6 @@ Object {
         "selectedElementIds": Object {
           "id0": true,
           "id2": true,
-          "id3": true,
-          "id4": true,
         },
         "selectedGroupIds": Object {
           "id5": true,
@@ -443,6 +356,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -455,7 +369,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -471,6 +385,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id5",
           ],
@@ -485,7 +400,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -501,6 +416,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id5",
           ],
@@ -515,7 +431,7 @@ Object {
             "type": 3,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -532,7 +448,7 @@ Object {
 }
 `;
 
-exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected: [end of test] number of elements 1`] = `3`;
+exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected: [end of test] number of elements 1`] = `0`;
 
 exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected: [end of test] number of renders 1`] = `28`;
 
@@ -556,28 +472,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -598,28 +523,20 @@ Object {
     "id0": true,
     "id1": true,
     "id2": true,
-    "id3": true,
-    "id5": true,
   },
   "resizingElement": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {
-    "id0": false,
     "id1": true,
-    "id2": false,
-    "id3": true,
-    "id5": true,
-    "id6": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {
     "id0": true,
     "id1": true,
     "id2": true,
-    "id3": true,
     "id4": false,
-    "id5": true,
   },
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -641,103 +558,6 @@ Object {
 }
 `;
 
-exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 100,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 100,
-  "x": 110,
-  "y": 110,
-}
-`;
-
-exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id4",
-  ],
-  "height": 100,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1116226695,
-  "width": 100,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id4",
-  ],
-  "height": 100,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 401146281,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1014066025,
-  "width": 100,
-  "x": 220,
-  "y": 220,
-}
-`;
-
 exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -771,6 +591,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id0",
@@ -783,7 +604,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -813,6 +634,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id0",
@@ -825,7 +647,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -841,6 +663,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id1",
@@ -853,7 +676,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -883,6 +706,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id0",
@@ -895,7 +719,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -911,6 +735,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id1",
@@ -923,7 +748,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -939,6 +764,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id2",
@@ -951,7 +777,7 @@ Object {
             "type": 3,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -972,7 +798,6 @@ Object {
         "selectedElementIds": Object {
           "id0": true,
           "id2": true,
-          "id3": true,
         },
         "selectedGroupIds": Object {
           "id4": true,
@@ -985,6 +810,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id1",
@@ -997,7 +823,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1013,6 +839,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -1027,7 +854,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1043,6 +870,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -1057,7 +885,7 @@ Object {
             "type": 3,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1074,7 +902,7 @@ Object {
 }
 `;
 
-exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected: [end of test] number of elements 1`] = `3`;
+exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected: [end of test] number of elements 1`] = `0`;
 
 exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected: [end of test] number of renders 1`] = `24`;
 
@@ -1098,28 +926,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": "id10",
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": false,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -1142,9 +979,9 @@ Object {
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {
-    "id12": true,
     "id7": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -1166,107 +1003,6 @@ Object {
 }
 `;
 
-exports[`regression tests Cmd/Ctrl-click exclusively select element under pointer: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id4",
-    "id10",
-  ],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 493213705,
-  "width": 10,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`regression tests Cmd/Ctrl-click exclusively select element under pointer: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id4",
-    "id10",
-  ],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 915032327,
-  "width": 10,
-  "x": 30,
-  "y": 0,
-}
-`;
-
-exports[`regression tests Cmd/Ctrl-click exclusively select element under pointer: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id10",
-  ],
-  "height": 10,
-  "id": "id7",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 400692809,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 81784553,
-  "width": 10,
-  "x": 60,
-  "y": 0,
-}
-`;
-
 exports[`regression tests Cmd/Ctrl-click exclusively select element under pointer: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -1300,6 +1036,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -1312,7 +1049,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1342,6 +1079,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -1354,7 +1092,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1370,6 +1108,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -1382,7 +1121,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1403,8 +1142,6 @@ Object {
         "selectedElementIds": Object {
           "id0": true,
           "id1": true,
-          "id2": true,
-          "id3": true,
         },
         "selectedGroupIds": Object {
           "id4": true,
@@ -1417,6 +1154,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -1431,7 +1169,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1447,6 +1185,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -1461,7 +1200,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1481,7 +1220,6 @@ Object {
         "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id0": true,
-          "id5": true,
         },
         "selectedGroupIds": Object {},
         "viewBackgroundColor": "#ffffff",
@@ -1492,6 +1230,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -1506,7 +1245,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1522,6 +1261,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -1536,7 +1276,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1566,6 +1306,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -1580,7 +1321,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1596,6 +1337,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -1610,7 +1352,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1626,6 +1368,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id7",
@@ -1638,7 +1381,7 @@ Object {
             "type": 3,
           },
           "seed": 400692809,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1660,8 +1403,6 @@ Object {
           "id0": true,
           "id1": true,
           "id7": true,
-          "id8": true,
-          "id9": true,
         },
         "selectedGroupIds": Object {
           "id10": true,
@@ -1674,6 +1415,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
             "id10",
@@ -1689,7 +1431,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1705,6 +1447,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
             "id10",
@@ -1720,7 +1463,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1736,6 +1479,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id10",
           ],
@@ -1750,7 +1494,7 @@ Object {
             "type": 3,
           },
           "seed": 400692809,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1770,7 +1514,6 @@ Object {
         "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id0": true,
-          "id11": true,
         },
         "selectedGroupIds": Object {},
         "viewBackgroundColor": "#ffffff",
@@ -1781,6 +1524,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
             "id10",
@@ -1796,7 +1540,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1812,6 +1556,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
             "id10",
@@ -1827,7 +1572,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1843,6 +1588,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id10",
           ],
@@ -1857,7 +1603,7 @@ Object {
             "type": 3,
           },
           "seed": 400692809,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1876,7 +1622,6 @@ Object {
         "editingLinearElement": null,
         "name": "Untitled-201933152653",
         "selectedElementIds": Object {
-          "id12": true,
           "id7": true,
         },
         "selectedGroupIds": Object {},
@@ -1888,6 +1633,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
             "id10",
@@ -1903,7 +1649,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1919,6 +1665,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
             "id10",
@@ -1934,7 +1681,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1950,6 +1697,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id10",
           ],
@@ -1964,7 +1712,7 @@ Object {
             "type": 3,
           },
           "seed": 400692809,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -1981,7 +1729,7 @@ Object {
 }
 `;
 
-exports[`regression tests Cmd/Ctrl-click exclusively select element under pointer: [end of test] number of elements 1`] = `3`;
+exports[`regression tests Cmd/Ctrl-click exclusively select element under pointer: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests Cmd/Ctrl-click exclusively select element under pointer: [end of test] number of renders 1`] = `43`;
 
@@ -2005,28 +1753,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -2052,8 +1809,8 @@ Object {
   "scrolledOutside": false,
   "selectedElementIds": Object {
     "id0": true,
-    "id1": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -2075,37 +1832,6 @@ Object {
 }
 `;
 
-exports[`regression tests Drags selected element when hitting only bounding box and keeps element selected: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 25,
-  "y": 25,
-}
-`;
-
 exports[`regression tests Drags selected element when hitting only bounding box and keeps element selected: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -2139,6 +1865,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -2151,7 +1878,7 @@ Object {
             "type": 2,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
@@ -2171,7 +1898,6 @@ Object {
         "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id0": true,
-          "id1": true,
         },
         "selectedGroupIds": Object {},
         "viewBackgroundColor": "#ffffff",
@@ -2182,6 +1908,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -2194,7 +1921,7 @@ Object {
             "type": 2,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
@@ -2211,7 +1938,7 @@ Object {
 }
 `;
 
-exports[`regression tests Drags selected element when hitting only bounding box and keeps element selected: [end of test] number of elements 1`] = `1`;
+exports[`regression tests Drags selected element when hitting only bounding box and keeps element selected: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests Drags selected element when hitting only bounding box and keeps element selected: [end of test] number of renders 1`] = `12`;
 
@@ -2235,28 +1962,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -2275,7 +2011,6 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {
     "id0": true,
-    "id3": true,
   },
   "resizingElement": null,
   "scrollX": 0,
@@ -2284,9 +2019,8 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
     "id2": true,
-    "id3": true,
-    "id4": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {
     "id5": true,
   },
@@ -2310,103 +2044,6 @@ Object {
 }
 `;
 
-exports[`regression tests adjusts z order when grouping: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 30,
-  "y": 10,
-}
-`;
-
-exports[`regression tests adjusts z order when grouping: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id5",
-  ],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1014066025,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
-exports[`regression tests adjusts z order when grouping: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id5",
-  ],
-  "height": 10,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 401146281,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 238820263,
-  "width": 10,
-  "x": 50,
-  "y": 10,
-}
-`;
-
 exports[`regression tests adjusts z order when grouping: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -2440,6 +2077,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -2452,7 +2090,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2482,6 +2120,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -2494,7 +2133,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2510,6 +2149,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -2522,7 +2162,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2552,6 +2192,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -2564,7 +2205,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2580,6 +2221,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -2592,7 +2234,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2608,6 +2250,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -2620,7 +2263,7 @@ Object {
             "type": 3,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2641,8 +2284,6 @@ Object {
         "selectedElementIds": Object {
           "id0": true,
           "id2": true,
-          "id3": true,
-          "id4": true,
         },
         "selectedGroupIds": Object {
           "id5": true,
@@ -2655,6 +2296,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -2667,7 +2309,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2683,6 +2325,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id5",
           ],
@@ -2697,7 +2340,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2713,6 +2356,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id5",
           ],
@@ -2727,7 +2371,7 @@ Object {
             "type": 3,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2744,7 +2388,7 @@ Object {
 }
 `;
 
-exports[`regression tests adjusts z order when grouping: [end of test] number of elements 1`] = `3`;
+exports[`regression tests adjusts z order when grouping: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests adjusts z order when grouping: [end of test] number of renders 1`] = `22`;
 
@@ -2768,28 +2412,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -2815,8 +2468,8 @@ Object {
   "scrolledOutside": false,
   "selectedElementIds": Object {
     "id0": true,
-    "id1": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -2838,68 +2491,6 @@ Object {
 }
 `;
 
-exports[`regression tests alt-drag duplicates an element: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0_copy",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 401146281,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 2019559783,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
-exports[`regression tests alt-drag duplicates an element: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 20,
-  "y": 20,
-}
-`;
-
 exports[`regression tests alt-drag duplicates an element: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -2933,6 +2524,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -2945,7 +2537,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -2965,7 +2557,6 @@ Object {
         "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id0": true,
-          "id1": true,
         },
         "selectedGroupIds": Object {},
         "viewBackgroundColor": "#ffffff",
@@ -2976,6 +2567,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0_copy",
@@ -2988,7 +2580,7 @@ Object {
             "type": 3,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -3004,6 +2596,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -3016,7 +2609,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -3033,7 +2626,7 @@ Object {
 }
 `;
 
-exports[`regression tests alt-drag duplicates an element: [end of test] number of elements 1`] = `2`;
+exports[`regression tests alt-drag duplicates an element: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests alt-drag duplicates an element: [end of test] number of renders 1`] = `12`;
 
@@ -3057,28 +2650,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -3103,6 +2705,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -3124,37 +2727,6 @@ Object {
 }
 `;
 
-exports[`regression tests arrow keys: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 8,
-  "versionNonce": 1116226695,
-  "width": 10,
-  "x": 9,
-  "y": 9,
-}
-`;
-
 exports[`regression tests arrow keys: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -3188,6 +2760,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -3200,7 +2773,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -3217,7 +2790,7 @@ Object {
 }
 `;
 
-exports[`regression tests arrow keys: [end of test] number of elements 1`] = `1`;
+exports[`regression tests arrow keys: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests arrow keys: [end of test] number of renders 1`] = `21`;
 
@@ -3241,28 +2814,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -3288,8 +2870,8 @@ Object {
   "scrolledOutside": false,
   "selectedElementIds": Object {
     "id1": true,
-    "id3": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -3311,99 +2893,6 @@ Object {
 }
 `;
 
-exports[`regression tests can drag element that covers another element, while another elem is selected: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 200,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 1278240551,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 449462985,
-  "width": 200,
-  "x": 100,
-  "y": 100,
-}
-`;
-
-exports[`regression tests can drag element that covers another element, while another elem is selected: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 200,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 453191,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1014066025,
-  "width": 200,
-  "x": 300,
-  "y": 300,
-}
-`;
-
-exports[`regression tests can drag element that covers another element, while another elem is selected: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 350,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 2019559783,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1150084233,
-  "width": 350,
-  "x": 300,
-  "y": 300,
-}
-`;
-
 exports[`regression tests can drag element that covers another element, while another elem is selected: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -3437,6 +2926,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 200,
           "id": "id0",
@@ -3448,14 +2938,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 1278240551,
-          "strokeColor": "#000000",
+          "seed": 337897,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 449462985,
+          "versionNonce": 1278240551,
           "width": 200,
           "x": 100,
           "y": 100,
@@ -3479,6 +2969,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 200,
           "id": "id0",
@@ -3490,14 +2981,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 1278240551,
-          "strokeColor": "#000000",
+          "seed": 337897,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 449462985,
+          "versionNonce": 1278240551,
           "width": 200,
           "x": 100,
           "y": 100,
@@ -3507,6 +2998,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 200,
           "id": "id1",
@@ -3518,14 +3010,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 453191,
-          "strokeColor": "#000000",
+          "seed": 449462985,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 401146281,
+          "versionNonce": 453191,
           "width": 200,
           "x": 100,
           "y": 100,
@@ -3549,6 +3041,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 200,
           "id": "id0",
@@ -3560,14 +3053,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 1278240551,
-          "strokeColor": "#000000",
+          "seed": 337897,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 449462985,
+          "versionNonce": 1278240551,
           "width": 200,
           "x": 100,
           "y": 100,
@@ -3577,6 +3070,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 200,
           "id": "id1",
@@ -3588,14 +3082,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 453191,
-          "strokeColor": "#000000",
+          "seed": 449462985,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 401146281,
+          "versionNonce": 453191,
           "width": 200,
           "x": 100,
           "y": 100,
@@ -3605,6 +3099,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 350,
           "id": "id2",
@@ -3616,14 +3111,14 @@ Object {
           "roundness": Object {
             "type": 2,
           },
-          "seed": 2019559783,
-          "strokeColor": "#000000",
+          "seed": 401146281,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
           "updated": 1,
           "version": 2,
-          "versionNonce": 1150084233,
+          "versionNonce": 2019559783,
           "width": 350,
           "x": 300,
           "y": 300,
@@ -3637,7 +3132,6 @@ Object {
         "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id1": true,
-          "id3": true,
         },
         "selectedGroupIds": Object {},
         "viewBackgroundColor": "#ffffff",
@@ -3648,6 +3142,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 200,
           "id": "id0",
@@ -3659,14 +3154,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 1278240551,
-          "strokeColor": "#000000",
+          "seed": 337897,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 2,
-          "versionNonce": 449462985,
+          "versionNonce": 1278240551,
           "width": 200,
           "x": 100,
           "y": 100,
@@ -3676,6 +3171,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 200,
           "id": "id1",
@@ -3687,14 +3183,14 @@ Object {
           "roundness": Object {
             "type": 3,
           },
-          "seed": 453191,
-          "strokeColor": "#000000",
+          "seed": 449462985,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 3,
-          "versionNonce": 1014066025,
+          "versionNonce": 1116226695,
           "width": 200,
           "x": 300,
           "y": 300,
@@ -3704,6 +3200,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 350,
           "id": "id2",
@@ -3715,14 +3212,14 @@ Object {
           "roundness": Object {
             "type": 2,
           },
-          "seed": 2019559783,
-          "strokeColor": "#000000",
+          "seed": 401146281,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
           "updated": 1,
           "version": 2,
-          "versionNonce": 1150084233,
+          "versionNonce": 2019559783,
           "width": 350,
           "x": 300,
           "y": 300,
@@ -3733,7 +3230,7 @@ Object {
 }
 `;
 
-exports[`regression tests can drag element that covers another element, while another elem is selected: [end of test] number of elements 1`] = `3`;
+exports[`regression tests can drag element that covers another element, while another elem is selected: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests can drag element that covers another element, while another elem is selected: [end of test] number of renders 1`] = `20`;
 
@@ -3748,7 +3245,7 @@ Object {
   "collaborators": Map {},
   "contextMenu": null,
   "currentChartType": "bar",
-  "currentItemBackgroundColor": "#fa5252",
+  "currentItemBackgroundColor": "#ffc9c9",
   "currentItemEndArrowhead": "arrow",
   "currentItemFillStyle": "hachure",
   "currentItemFontFamily": 1,
@@ -3757,28 +3254,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#5f3dc4",
+  "currentItemStrokeColor": "#1971c2",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -3786,7 +3292,7 @@ Object {
   "offsetTop": 0,
   "openDialog": null,
   "openMenu": null,
-  "openPopup": "strokeColorPicker",
+  "openPopup": "elementStroke",
   "openSidebar": null,
   "pasteDialog": Object {
     "data": null,
@@ -3803,6 +3309,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -3824,37 +3331,6 @@ Object {
 }
 `;
 
-exports[`regression tests change the properties of a shape: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "#fa5252",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#5f3dc4",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests change the properties of a shape: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -3888,6 +3364,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -3900,7 +3377,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -3927,9 +3404,10 @@ Object {
       "elements": Array [
         Object {
           "angle": 0,
-          "backgroundColor": "#fa5252",
+          "backgroundColor": "#ffec99",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -3942,7 +3420,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -3969,9 +3447,10 @@ Object {
       "elements": Array [
         Object {
           "angle": 0,
-          "backgroundColor": "#fa5252",
+          "backgroundColor": "#ffc9c9",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -3984,7 +3463,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#5f3dc4",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -3997,13 +3476,56 @@ Object {
         },
       ],
     },
+    Object {
+      "appState": Object {
+        "editingGroupId": null,
+        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
+        "selectedElementIds": Object {
+          "id0": true,
+        },
+        "selectedGroupIds": Object {},
+        "viewBackgroundColor": "#ffffff",
+      },
+      "elements": Array [
+        Object {
+          "angle": 0,
+          "backgroundColor": "#ffc9c9",
+          "boundElements": null,
+          "fillStyle": "hachure",
+          "frameId": null,
+          "groupIds": Array [],
+          "height": 10,
+          "id": "id0",
+          "isDeleted": false,
+          "link": null,
+          "locked": false,
+          "opacity": 100,
+          "roughness": 1,
+          "roundness": Object {
+            "type": 3,
+          },
+          "seed": 337897,
+          "strokeColor": "#1971c2",
+          "strokeStyle": "solid",
+          "strokeWidth": 1,
+          "type": "rectangle",
+          "updated": 1,
+          "version": 5,
+          "versionNonce": 401146281,
+          "width": 10,
+          "x": 10,
+          "y": 10,
+        },
+      ],
+    },
   ],
 }
 `;
 
-exports[`regression tests change the properties of a shape: [end of test] number of elements 1`] = `1`;
+exports[`regression tests change the properties of a shape: [end of test] number of elements 1`] = `0`;
 
-exports[`regression tests change the properties of a shape: [end of test] number of renders 1`] = `15`;
+exports[`regression tests change the properties of a shape: [end of test] number of renders 1`] = `14`;
 
 exports[`regression tests click on an element and drag it: [dragged] appState 1`] = `
 Object {
@@ -4025,28 +3547,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -4072,8 +3603,8 @@ Object {
   "scrolledOutside": false,
   "selectedElementIds": Object {
     "id0": true,
-    "id1": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -4101,6 +3632,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 10,
   "id": "id0",
@@ -4113,7 +3645,7 @@ Object {
     "type": 3,
   },
   "seed": 337897,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
@@ -4159,6 +3691,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -4171,7 +3704,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -4191,7 +3724,6 @@ Object {
         "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id0": true,
-          "id1": true,
         },
         "selectedGroupIds": Object {},
         "viewBackgroundColor": "#ffffff",
@@ -4202,6 +3734,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -4214,7 +3747,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -4255,28 +3788,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -4295,7 +3837,6 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {
     "id0": true,
-    "id1": true,
   },
   "resizingElement": null,
   "scrollX": 0,
@@ -4303,9 +3844,8 @@ Object {
   "scrolledOutside": false,
   "selectedElementIds": Object {
     "id0": true,
-    "id1": true,
-    "id2": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -4327,37 +3867,6 @@ Object {
 }
 `;
 
-exports[`regression tests click on an element and drag it: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 2019559783,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests click on an element and drag it: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -4391,6 +3900,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -4403,7 +3913,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -4423,7 +3933,6 @@ Object {
         "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id0": true,
-          "id1": true,
         },
         "selectedGroupIds": Object {},
         "viewBackgroundColor": "#ffffff",
@@ -4434,6 +3943,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -4446,7 +3956,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -4466,8 +3976,6 @@ Object {
         "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id0": true,
-          "id1": true,
-          "id2": true,
         },
         "selectedGroupIds": Object {},
         "viewBackgroundColor": "#ffffff",
@@ -4478,6 +3986,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -4490,7 +3999,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -4507,7 +4016,7 @@ Object {
 }
 `;
 
-exports[`regression tests click on an element and drag it: [end of test] number of elements 1`] = `1`;
+exports[`regression tests click on an element and drag it: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests click on an element and drag it: [end of test] number of renders 1`] = `15`;
 
@@ -4531,28 +4040,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -4578,8 +4096,8 @@ Object {
   "scrolledOutside": false,
   "selectedElementIds": Object {
     "id0": true,
-    "id2": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -4601,68 +4119,6 @@ Object {
 }
 `;
 
-exports[`regression tests click to select a shape: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
-exports[`regression tests click to select a shape: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 30,
-  "y": 10,
-}
-`;
-
 exports[`regression tests click to select a shape: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -4696,6 +4152,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -4708,7 +4165,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -4738,6 +4195,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -4750,7 +4208,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -4766,6 +4224,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -4778,7 +4237,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -4795,7 +4254,7 @@ Object {
 }
 `;
 
-exports[`regression tests click to select a shape: [end of test] number of elements 1`] = `2`;
+exports[`regression tests click to select a shape: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests click to select a shape: [end of test] number of renders 1`] = `15`;
 
@@ -4819,28 +4278,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -4867,8 +4335,8 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
     "id1": true,
-    "id3": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -4890,99 +4358,6 @@ Object {
 }
 `;
 
-exports[`regression tests click-drag to select a group: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
-exports[`regression tests click-drag to select a group: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 30,
-  "y": 10,
-}
-`;
-
-exports[`regression tests click-drag to select a group: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 401146281,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 2019559783,
-  "width": 10,
-  "x": 50,
-  "y": 10,
-}
-`;
-
 exports[`regression tests click-drag to select a group: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -5016,6 +4391,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -5028,7 +4404,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -5058,6 +4434,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -5070,7 +4447,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -5086,6 +4463,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -5098,7 +4476,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -5128,6 +4506,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -5140,7 +4519,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -5156,6 +4535,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -5168,7 +4548,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -5184,6 +4564,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -5196,7 +4577,7 @@ Object {
             "type": 3,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -5213,7 +4594,7 @@ Object {
 }
 `;
 
-exports[`regression tests click-drag to select a group: [end of test] number of elements 1`] = `3`;
+exports[`regression tests click-drag to select a group: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests click-drag to select a group: [end of test] number of renders 1`] = `21`;
 
@@ -5237,16 +4618,18 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "down",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": Object {
     "angle": 0,
     "backgroundColor": "transparent",
     "boundElements": null,
     "fillStyle": "hachure",
+    "frameId": null,
     "groupIds": Array [],
     "height": 0,
     "id": "id3",
@@ -5259,7 +4642,7 @@ Object {
       "type": 2,
     },
     "seed": 2019559783,
-    "strokeColor": "#000000",
+    "strokeColor": "#1e1e1e",
     "strokeStyle": "solid",
     "strokeWidth": 1,
     "type": "selection",
@@ -5271,21 +4654,29 @@ Object {
     "y": 500,
   },
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -5305,13 +4696,13 @@ Object {
   "previousSelectedElementIds": Object {
     "id0": true,
     "id1": true,
-    "id2": true,
   },
   "resizingElement": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": Object {
@@ -5319,6 +4710,7 @@ Object {
     "backgroundColor": "transparent",
     "boundElements": null,
     "fillStyle": "hachure",
+    "frameId": null,
     "groupIds": Array [],
     "height": 0,
     "id": "id3",
@@ -5331,7 +4723,7 @@ Object {
       "type": 2,
     },
     "seed": 2019559783,
-    "strokeColor": "#000000",
+    "strokeColor": "#1e1e1e",
     "strokeStyle": "solid",
     "strokeWidth": 1,
     "type": "selection",
@@ -5360,68 +4752,6 @@ Object {
 }
 `;
 
-exports[`regression tests deselects group of selected elements on pointer down when pointer doesn't hit any element: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`regression tests deselects group of selected elements on pointer down when pointer doesn't hit any element: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 449462985,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 110,
-  "y": 110,
-}
-`;
-
 exports[`regression tests deselects group of selected elements on pointer down when pointer doesn't hit any element: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -5455,6 +4785,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -5467,7 +4798,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -5497,6 +4828,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -5509,7 +4841,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -5525,6 +4857,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -5537,7 +4870,7 @@ Object {
             "type": 2,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
@@ -5554,7 +4887,7 @@ Object {
 }
 `;
 
-exports[`regression tests deselects group of selected elements on pointer down when pointer doesn't hit any element: [end of test] number of elements 1`] = `2`;
+exports[`regression tests deselects group of selected elements on pointer down when pointer doesn't hit any element: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests deselects group of selected elements on pointer down when pointer doesn't hit any element: [end of test] number of renders 1`] = `16`;
 
@@ -5578,16 +4911,18 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": Object {
     "angle": 0,
     "backgroundColor": "transparent",
     "boundElements": null,
     "fillStyle": "hachure",
+    "frameId": null,
     "groupIds": Array [],
     "height": 0,
     "id": "id3",
@@ -5600,7 +4935,7 @@ Object {
       "type": 2,
     },
     "seed": 2019559783,
-    "strokeColor": "#000000",
+    "strokeColor": "#1e1e1e",
     "strokeStyle": "solid",
     "strokeWidth": 1,
     "type": "selection",
@@ -5612,21 +4947,29 @@ Object {
     "y": 50,
   },
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -5646,13 +4989,13 @@ Object {
   "previousSelectedElementIds": Object {
     "id0": true,
     "id1": true,
-    "id2": true,
   },
   "resizingElement": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -5674,68 +5017,6 @@ Object {
 }
 `;
 
-exports[`regression tests deselects group of selected elements on pointer up when pointer hits common bounding box without hitting any element: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`regression tests deselects group of selected elements on pointer up when pointer hits common bounding box without hitting any element: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 449462985,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 110,
-  "y": 110,
-}
-`;
-
 exports[`regression tests deselects group of selected elements on pointer up when pointer hits common bounding box without hitting any element: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -5769,6 +5050,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -5781,7 +5063,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -5811,6 +5093,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -5823,7 +5106,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -5839,6 +5122,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -5851,7 +5135,7 @@ Object {
             "type": 2,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
@@ -5868,7 +5152,7 @@ Object {
 }
 `;
 
-exports[`regression tests deselects group of selected elements on pointer up when pointer hits common bounding box without hitting any element: [end of test] number of elements 1`] = `2`;
+exports[`regression tests deselects group of selected elements on pointer up when pointer hits common bounding box without hitting any element: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests deselects group of selected elements on pointer up when pointer hits common bounding box without hitting any element: [end of test] number of renders 1`] = `17`;
 
@@ -5892,16 +5176,18 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "down",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": Object {
     "angle": 0,
     "backgroundColor": "transparent",
     "boundElements": null,
     "fillStyle": "hachure",
+    "frameId": null,
     "groupIds": Array [],
     "height": 0,
     "id": "id1",
@@ -5914,7 +5200,7 @@ Object {
       "type": 2,
     },
     "seed": 449462985,
-    "strokeColor": "#000000",
+    "strokeColor": "#1e1e1e",
     "strokeStyle": "solid",
     "strokeWidth": 1,
     "type": "selection",
@@ -5926,21 +5212,29 @@ Object {
     "y": 110,
   },
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -5965,6 +5259,7 @@ Object {
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": Object {
@@ -5972,6 +5267,7 @@ Object {
     "backgroundColor": "transparent",
     "boundElements": null,
     "fillStyle": "hachure",
+    "frameId": null,
     "groupIds": Array [],
     "height": 0,
     "id": "id1",
@@ -5984,7 +5280,7 @@ Object {
       "type": 2,
     },
     "seed": 449462985,
-    "strokeColor": "#000000",
+    "strokeColor": "#1e1e1e",
     "strokeStyle": "solid",
     "strokeWidth": 1,
     "type": "selection",
@@ -6013,37 +5309,6 @@ Object {
 }
 `;
 
-exports[`regression tests deselects selected element on pointer down when pointer doesn't hit any element: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 0,
-  "y": 0,
-}
-`;
-
 exports[`regression tests deselects selected element on pointer down when pointer doesn't hit any element: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -6077,6 +5342,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -6089,7 +5355,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -6106,7 +5372,7 @@ Object {
 }
 `;
 
-exports[`regression tests deselects selected element on pointer down when pointer doesn't hit any element: [end of test] number of elements 1`] = `1`;
+exports[`regression tests deselects selected element on pointer down when pointer doesn't hit any element: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests deselects selected element on pointer down when pointer doesn't hit any element: [end of test] number of renders 1`] = `10`;
 
@@ -6130,28 +5396,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -6175,9 +5450,8 @@ Object {
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
-  "selectedElementIds": Object {
-    "id1": true,
-  },
+  "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -6199,37 +5473,6 @@ Object {
 }
 `;
 
-exports[`regression tests deselects selected element, on pointer up, when click hits element bounding box but doesn't hit the element: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 100,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 100,
-  "x": 0,
-  "y": 0,
-}
-`;
-
 exports[`regression tests deselects selected element, on pointer up, when click hits element bounding box but doesn't hit the element: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -6263,6 +5506,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id0",
@@ -6275,7 +5519,7 @@ Object {
             "type": 2,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
@@ -6292,7 +5536,7 @@ Object {
 }
 `;
 
-exports[`regression tests deselects selected element, on pointer up, when click hits element bounding box but doesn't hit the element: [end of test] number of elements 1`] = `1`;
+exports[`regression tests deselects selected element, on pointer up, when click hits element bounding box but doesn't hit the element: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests deselects selected element, on pointer up, when click hits element bounding box but doesn't hit the element: [end of test] number of renders 1`] = `11`;
 
@@ -6316,28 +5560,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": "id3",
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -6362,6 +5615,7 @@ Object {
   "selectedElementIds": Object {
     "id2": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -6383,105 +5637,6 @@ Object {
 }
 `;
 
-exports[`regression tests double click to edit a group: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id3",
-  ],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1150084233,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
-exports[`regression tests double click to edit a group: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id3",
-  ],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1116226695,
-  "width": 10,
-  "x": 30,
-  "y": 10,
-}
-`;
-
-exports[`regression tests double click to edit a group: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id3",
-  ],
-  "height": 10,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 401146281,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1014066025,
-  "width": 10,
-  "x": 50,
-  "y": 10,
-}
-`;
-
 exports[`regression tests double click to edit a group: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -6515,6 +5670,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -6527,7 +5683,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -6557,6 +5713,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -6569,7 +5726,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -6585,6 +5742,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -6597,7 +5755,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -6627,6 +5785,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -6639,7 +5798,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -6655,6 +5814,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -6667,7 +5827,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -6683,6 +5843,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -6695,7 +5856,7 @@ Object {
             "type": 3,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -6729,6 +5890,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -6743,7 +5905,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -6759,6 +5921,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -6773,7 +5936,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -6789,6 +5952,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -6803,7 +5967,7 @@ Object {
             "type": 3,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -6820,7 +5984,7 @@ Object {
 }
 `;
 
-exports[`regression tests double click to edit a group: [end of test] number of elements 1`] = `3`;
+exports[`regression tests double click to edit a group: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests double click to edit a group: [end of test] number of renders 1`] = `20`;
 
@@ -6844,28 +6008,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -6885,7 +6058,6 @@ Object {
   "previousSelectedElementIds": Object {
     "id0": true,
     "id1": true,
-    "id2": true,
   },
   "resizingElement": null,
   "scrollX": 0,
@@ -6894,9 +6066,8 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
     "id1": true,
-    "id2": true,
-    "id3": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -6918,68 +6089,6 @@ Object {
 }
 `;
 
-exports[`regression tests drags selected elements from point inside common bounding box that doesn't hit any element and keeps elements selected after dragging: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1150084233,
-  "width": 10,
-  "x": 25,
-  "y": 25,
-}
-`;
-
-exports[`regression tests drags selected elements from point inside common bounding box that doesn't hit any element and keeps elements selected after dragging: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 449462985,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1116226695,
-  "width": 10,
-  "x": 135,
-  "y": 135,
-}
-`;
-
 exports[`regression tests drags selected elements from point inside common bounding box that doesn't hit any element and keeps elements selected after dragging: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -7013,6 +6122,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -7025,7 +6135,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -7055,6 +6165,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -7067,7 +6178,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -7083,6 +6194,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -7095,7 +6207,7 @@ Object {
             "type": 2,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
@@ -7116,8 +6228,6 @@ Object {
         "selectedElementIds": Object {
           "id0": true,
           "id1": true,
-          "id2": true,
-          "id3": true,
         },
         "selectedGroupIds": Object {},
         "viewBackgroundColor": "#ffffff",
@@ -7128,6 +6238,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -7140,7 +6251,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -7156,6 +6267,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -7168,7 +6280,7 @@ Object {
             "type": 2,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
@@ -7185,7 +6297,7 @@ Object {
 }
 `;
 
-exports[`regression tests drags selected elements from point inside common bounding box that doesn't hit any element and keeps elements selected after dragging: [end of test] number of elements 1`] = `2`;
+exports[`regression tests drags selected elements from point inside common bounding box that doesn't hit any element and keeps elements selected after dragging: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests drags selected elements from point inside common bounding box that doesn't hit any element and keeps elements selected after dragging: [end of test] number of renders 1`] = `18`;
 
@@ -7209,28 +6321,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -7252,9 +6373,8 @@ Object {
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
-  "selectedElementIds": Object {
-    "id7": false,
-  },
+  "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -7276,350 +6396,6 @@ Object {
 }
 `;
 
-exports[`regression tests draw every type of shape: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 20,
-  "x": 10,
-  "y": -10,
-}
-`;
-
-exports[`regression tests draw every type of shape: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 449462985,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "diamond",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 20,
-  "x": 40,
-  "y": -10,
-}
-`;
-
-exports[`regression tests draw every type of shape: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 401146281,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 2019559783,
-  "width": 20,
-  "x": 70,
-  "y": -10,
-}
-`;
-
-exports[`regression tests draw every type of shape: [end of test] element 3 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": "arrow",
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id3",
-  "isDeleted": false,
-  "lastCommittedPoint": null,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      50,
-      10,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 1150084233,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "arrow",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1014066025,
-  "width": 50,
-  "x": 130,
-  "y": -10,
-}
-`;
-
-exports[`regression tests draw every type of shape: [end of test] element 4 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": null,
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id4",
-  "isDeleted": false,
-  "lastCommittedPoint": null,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      50,
-      10,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 238820263,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "line",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1604849351,
-  "width": 50,
-  "x": 220,
-  "y": -10,
-}
-`;
-
-exports[`regression tests draw every type of shape: [end of test] element 5 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": "arrow",
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 20,
-  "id": "id5",
-  "isDeleted": false,
-  "lastCommittedPoint": Array [
-    80,
-    20,
-  ],
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      50,
-      10,
-    ],
-    Array [
-      80,
-      20,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 1505387817,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "arrow",
-  "updated": 1,
-  "version": 7,
-  "versionNonce": 1723083209,
-  "width": 80,
-  "x": 310,
-  "y": -10,
-}
-`;
-
-exports[`regression tests draw every type of shape: [end of test] element 6 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": null,
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 20,
-  "id": "id6",
-  "isDeleted": false,
-  "lastCommittedPoint": Array [
-    80,
-    20,
-  ],
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      50,
-      10,
-    ],
-    Array [
-      80,
-      20,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 760410951,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "line",
-  "updated": 1,
-  "version": 7,
-  "versionNonce": 406373543,
-  "width": 80,
-  "x": 430,
-  "y": -10,
-}
-`;
-
-exports[`regression tests draw every type of shape: [end of test] element 7 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id7",
-  "isDeleted": false,
-  "lastCommittedPoint": Array [
-    50,
-    10,
-  ],
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      50,
-      10,
-    ],
-    Array [
-      50,
-      10,
-    ],
-  ],
-  "pressures": Array [
-    0,
-    0,
-    0,
-  ],
-  "roughness": 1,
-  "roundness": null,
-  "seed": 941653321,
-  "simulatePressure": false,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "freedraw",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 1359939303,
-  "width": 50,
-  "x": 550,
-  "y": -10,
-}
-`;
-
 exports[`regression tests draw every type of shape: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -7653,6 +6429,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -7665,7 +6442,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -7695,6 +6472,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -7707,7 +6485,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -7723,6 +6501,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -7735,7 +6514,7 @@ Object {
             "type": 2,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "diamond",
@@ -7765,6 +6544,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -7777,7 +6557,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -7793,6 +6573,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -7805,7 +6586,7 @@ Object {
             "type": 2,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "diamond",
@@ -7821,6 +6602,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -7833,7 +6615,7 @@ Object {
             "type": 2,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
@@ -7863,6 +6645,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -7875,7 +6658,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -7891,6 +6674,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -7903,7 +6687,7 @@ Object {
             "type": 2,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "diamond",
@@ -7919,6 +6703,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -7931,7 +6716,7 @@ Object {
             "type": 2,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
@@ -7949,6 +6734,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id3",
@@ -7974,7 +6760,7 @@ Object {
           "seed": 1150084233,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "arrow",
@@ -8004,6 +6790,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -8016,7 +6803,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -8032,6 +6819,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -8044,7 +6832,7 @@ Object {
             "type": 2,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "diamond",
@@ -8060,6 +6848,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -8072,7 +6861,7 @@ Object {
             "type": 2,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
@@ -8090,6 +6879,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id3",
@@ -8115,7 +6905,7 @@ Object {
           "seed": 1150084233,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "arrow",
@@ -8133,6 +6923,7 @@ Object {
           "endArrowhead": null,
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id4",
@@ -8158,7 +6949,7 @@ Object {
           "seed": 238820263,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "line",
@@ -8188,6 +6979,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -8200,7 +6992,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -8216,6 +7008,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -8228,7 +7021,7 @@ Object {
             "type": 2,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "diamond",
@@ -8244,6 +7037,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -8256,7 +7050,7 @@ Object {
             "type": 2,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
@@ -8274,6 +7068,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id3",
@@ -8299,7 +7094,7 @@ Object {
           "seed": 1150084233,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "arrow",
@@ -8317,6 +7112,7 @@ Object {
           "endArrowhead": null,
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id4",
@@ -8342,7 +7138,7 @@ Object {
           "seed": 238820263,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "line",
@@ -8360,6 +7156,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id5",
@@ -8388,7 +7185,7 @@ Object {
           "seed": 1505387817,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "arrow",
@@ -8418,6 +7215,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -8430,7 +7228,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -8446,6 +7244,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -8458,7 +7257,7 @@ Object {
             "type": 2,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "diamond",
@@ -8474,6 +7273,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -8486,7 +7286,7 @@ Object {
             "type": 2,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
@@ -8504,6 +7304,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id3",
@@ -8529,7 +7330,7 @@ Object {
           "seed": 1150084233,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "arrow",
@@ -8547,6 +7348,7 @@ Object {
           "endArrowhead": null,
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id4",
@@ -8572,7 +7374,7 @@ Object {
           "seed": 238820263,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "line",
@@ -8590,6 +7392,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id5",
@@ -8622,7 +7425,7 @@ Object {
           "seed": 1505387817,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "arrow",
@@ -8652,6 +7455,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -8664,7 +7468,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -8680,6 +7484,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -8692,7 +7497,7 @@ Object {
             "type": 2,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "diamond",
@@ -8708,6 +7513,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -8720,7 +7526,7 @@ Object {
             "type": 2,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
@@ -8738,6 +7544,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id3",
@@ -8763,7 +7570,7 @@ Object {
           "seed": 1150084233,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "arrow",
@@ -8781,6 +7588,7 @@ Object {
           "endArrowhead": null,
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id4",
@@ -8806,7 +7614,7 @@ Object {
           "seed": 238820263,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "line",
@@ -8824,6 +7632,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id5",
@@ -8856,7 +7665,7 @@ Object {
           "seed": 1505387817,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "arrow",
@@ -8874,6 +7683,7 @@ Object {
           "endArrowhead": null,
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id6",
@@ -8902,7 +7712,7 @@ Object {
           "seed": 760410951,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "line",
@@ -8932,6 +7742,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -8944,7 +7755,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -8960,6 +7771,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -8972,7 +7784,7 @@ Object {
             "type": 2,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "diamond",
@@ -8988,6 +7800,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -9000,7 +7813,7 @@ Object {
             "type": 2,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
@@ -9018,6 +7831,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id3",
@@ -9043,7 +7857,7 @@ Object {
           "seed": 1150084233,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "arrow",
@@ -9061,6 +7875,7 @@ Object {
           "endArrowhead": null,
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id4",
@@ -9086,7 +7901,7 @@ Object {
           "seed": 238820263,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "line",
@@ -9104,6 +7919,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id5",
@@ -9136,7 +7952,7 @@ Object {
           "seed": 1505387817,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "arrow",
@@ -9154,6 +7970,7 @@ Object {
           "endArrowhead": null,
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id6",
@@ -9186,7 +8003,7 @@ Object {
           "seed": 760410951,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "line",
@@ -9204,9 +8021,7 @@ Object {
         "editingGroupId": null,
         "editingLinearElement": null,
         "name": "Untitled-201933152653",
-        "selectedElementIds": Object {
-          "id7": false,
-        },
+        "selectedElementIds": Object {},
         "selectedGroupIds": Object {},
         "viewBackgroundColor": "#ffffff",
       },
@@ -9216,6 +8031,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -9228,7 +8044,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -9244,6 +8060,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -9256,7 +8073,7 @@ Object {
             "type": 2,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "diamond",
@@ -9272,6 +8089,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -9284,7 +8102,7 @@ Object {
             "type": 2,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
@@ -9302,6 +8120,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id3",
@@ -9327,7 +8146,7 @@ Object {
           "seed": 1150084233,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "arrow",
@@ -9345,6 +8164,7 @@ Object {
           "endArrowhead": null,
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id4",
@@ -9370,7 +8190,7 @@ Object {
           "seed": 238820263,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "line",
@@ -9388,6 +8208,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id5",
@@ -9420,7 +8241,7 @@ Object {
           "seed": 1505387817,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "arrow",
@@ -9438,6 +8259,7 @@ Object {
           "endArrowhead": null,
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id6",
@@ -9470,7 +8292,7 @@ Object {
           "seed": 760410951,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "line",
@@ -9486,6 +8308,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id7",
@@ -9520,7 +8343,7 @@ Object {
           "roundness": null,
           "seed": 941653321,
           "simulatePressure": false,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "freedraw",
@@ -9537,7 +8360,7 @@ Object {
 }
 `;
 
-exports[`regression tests draw every type of shape: [end of test] number of elements 1`] = `8`;
+exports[`regression tests draw every type of shape: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests draw every type of shape: [end of test] number of renders 1`] = `57`;
 
@@ -9561,28 +8384,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -9602,7 +8434,6 @@ Object {
   "previousSelectedElementIds": Object {
     "id0": true,
     "id2": true,
-    "id3": true,
   },
   "resizingElement": null,
   "scrollX": 0,
@@ -9610,8 +8441,8 @@ Object {
   "scrolledOutside": false,
   "selectedElementIds": Object {
     "id1": true,
-    "id4": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -9633,99 +8464,6 @@ Object {
 }
 `;
 
-exports[`regression tests given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`regression tests given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 100,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 449462985,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 100,
-  "x": 110,
-  "y": 110,
-}
-`;
-
-exports[`regression tests given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 100,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 401146281,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "diamond",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 2019559783,
-  "width": 100,
-  "x": 310,
-  "y": 310,
-}
-`;
-
 exports[`regression tests given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -9759,6 +8497,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -9771,7 +8510,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -9801,6 +8540,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -9813,7 +8553,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -9829,6 +8569,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id1",
@@ -9841,7 +8582,7 @@ Object {
             "type": 2,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
@@ -9871,6 +8612,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -9883,7 +8625,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -9899,6 +8641,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id1",
@@ -9911,7 +8654,7 @@ Object {
             "type": 2,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
@@ -9927,6 +8670,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id2",
@@ -9939,7 +8683,7 @@ Object {
             "type": 2,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "diamond",
@@ -9956,7 +8700,7 @@ Object {
 }
 `;
 
-exports[`regression tests given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up: [end of test] number of elements 1`] = `3`;
+exports[`regression tests given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up: [end of test] number of renders 1`] = `21`;
 
@@ -9971,7 +8715,7 @@ Object {
   "collaborators": Map {},
   "contextMenu": null,
   "currentChartType": "bar",
-  "currentItemBackgroundColor": "#fa5252",
+  "currentItemBackgroundColor": "#ffc9c9",
   "currentItemEndArrowhead": "arrow",
   "currentItemFillStyle": "hachure",
   "currentItemFontFamily": 1,
@@ -9980,28 +8724,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -10009,7 +8762,7 @@ Object {
   "offsetTop": 0,
   "openDialog": null,
   "openMenu": null,
-  "openPopup": null,
+  "openPopup": "elementBackground",
   "openSidebar": null,
   "pasteDialog": Object {
     "data": null,
@@ -10020,7 +8773,6 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {
     "id0": true,
-    "id2": true,
   },
   "resizingElement": null,
   "scrollX": 0,
@@ -10029,9 +8781,8 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
     "id1": true,
-    "id2": true,
-    "id3": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -10053,68 +8804,6 @@ Object {
 }
 `;
 
-exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "#fa5252",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 0,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 1,
-  "versionNonce": 0,
-  "width": 0,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "#fa5252",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 1000,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 1278240551,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 449462985,
-  "width": 1000,
-  "x": 500,
-  "y": 500,
-}
-`;
-
 exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -10136,18 +8825,21 @@ Object {
         "editingGroupId": null,
         "editingLinearElement": null,
         "name": "Untitled-201933152653",
-        "selectedElementIds": Object {},
+        "selectedElementIds": Object {
+          "id0": true,
+        },
         "selectedGroupIds": Object {},
         "viewBackgroundColor": "#ffffff",
       },
       "elements": Array [
         Object {
           "angle": 0,
-          "backgroundColor": "#fa5252",
+          "backgroundColor": "#ffc9c9",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
-          "height": 0,
+          "height": 1000,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -10158,14 +8850,14 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
-          "version": 1,
-          "versionNonce": 0,
-          "width": 0,
+          "version": 2,
+          "versionNonce": 1278240551,
+          "width": 1000,
           "x": 0,
           "y": 0,
         },
@@ -10185,11 +8877,12 @@ Object {
       "elements": Array [
         Object {
           "angle": 0,
-          "backgroundColor": "#fa5252",
+          "backgroundColor": "#ffc9c9",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
-          "height": 0,
+          "height": 1000,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -10200,22 +8893,23 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
-          "version": 1,
-          "versionNonce": 0,
-          "width": 0,
+          "version": 2,
+          "versionNonce": 1278240551,
+          "width": 1000,
           "x": 0,
           "y": 0,
         },
         Object {
           "angle": 0,
-          "backgroundColor": "#fa5252",
+          "backgroundColor": "#ffc9c9",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 1000,
           "id": "id1",
@@ -10227,14 +8921,14 @@ Object {
           "roundness": Object {
             "type": 2,
           },
-          "seed": 1278240551,
-          "strokeColor": "#000000",
+          "seed": 449462985,
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
           "updated": 1,
           "version": 2,
-          "versionNonce": 449462985,
+          "versionNonce": 453191,
           "width": 1000,
           "x": 500,
           "y": 500,
@@ -10245,7 +8939,7 @@ Object {
 }
 `;
 
-exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] number of elements 1`] = `2`;
+exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] number of renders 1`] = `19`;
 
@@ -10269,28 +8963,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -10309,7 +9012,6 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {
     "id0": true,
-    "id2": true,
   },
   "resizingElement": null,
   "scrollX": 0,
@@ -10317,8 +9019,8 @@ Object {
   "scrolledOutside": false,
   "selectedElementIds": Object {
     "id1": true,
-    "id3": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -10340,68 +9042,6 @@ Object {
 }
 `;
 
-exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "red",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 1000,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 1,
-  "versionNonce": 0,
-  "width": 1000,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "red",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 500,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 1278240551,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 1,
-  "versionNonce": 0,
-  "width": 500,
-  "x": 500,
-  "y": 500,
-}
-`;
-
 exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -10425,7 +9065,6 @@ Object {
         "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id0": true,
-          "id2": true,
         },
         "selectedGroupIds": Object {},
         "viewBackgroundColor": "#ffffff",
@@ -10436,6 +9075,7 @@ Object {
           "backgroundColor": "red",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 1000,
           "id": "id0",
@@ -10448,7 +9088,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -10464,6 +9104,7 @@ Object {
           "backgroundColor": "red",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 500,
           "id": "id1",
@@ -10476,7 +9117,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -10493,7 +9134,7 @@ Object {
 }
 `;
 
-exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up: [end of test] number of elements 1`] = `2`;
+exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up: [end of test] number of renders 1`] = `12`;
 
@@ -10517,28 +9158,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -10557,7 +9207,6 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {
     "id0": true,
-    "id2": true,
   },
   "resizingElement": null,
   "scrollX": 0,
@@ -10565,9 +9214,8 @@ Object {
   "scrolledOutside": false,
   "selectedElementIds": Object {
     "id0": true,
-    "id2": true,
-    "id3": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -10589,68 +9237,6 @@ Object {
 }
 `;
 
-exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "red",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 1000,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 401146281,
-  "width": 1000,
-  "x": 100,
-  "y": 100,
-}
-`;
-
-exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "red",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 500,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 1278240551,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 1,
-  "versionNonce": 0,
-  "width": 500,
-  "x": 500,
-  "y": 500,
-}
-`;
-
 exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -10674,7 +9260,6 @@ Object {
         "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id0": true,
-          "id2": true,
         },
         "selectedGroupIds": Object {},
         "viewBackgroundColor": "#ffffff",
@@ -10685,6 +9270,7 @@ Object {
           "backgroundColor": "red",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 1000,
           "id": "id0",
@@ -10697,7 +9283,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -10713,6 +9299,7 @@ Object {
           "backgroundColor": "red",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 500,
           "id": "id1",
@@ -10725,7 +9312,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -10745,8 +9332,6 @@ Object {
         "name": "Untitled-201933152653",
         "selectedElementIds": Object {
           "id0": true,
-          "id2": true,
-          "id3": true,
         },
         "selectedGroupIds": Object {},
         "viewBackgroundColor": "#ffffff",
@@ -10757,6 +9342,7 @@ Object {
           "backgroundColor": "red",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 1000,
           "id": "id0",
@@ -10769,7 +9355,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -10785,6 +9371,7 @@ Object {
           "backgroundColor": "red",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 500,
           "id": "id1",
@@ -10797,7 +9384,7 @@ Object {
             "type": 3,
           },
           "seed": 1278240551,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -10814,7 +9401,7 @@ Object {
 }
 `;
 
-exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected: [end of test] number of elements 1`] = `2`;
+exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected: [end of test] number of renders 1`] = `13`;
 
@@ -10838,28 +9425,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -10884,6 +9480,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -10905,37 +9502,6 @@ Object {
 }
 `;
 
-exports[`regression tests key 2 selects rectangle tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key 2 selects rectangle tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -10969,6 +9535,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -10981,7 +9548,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -10998,7 +9565,7 @@ Object {
 }
 `;
 
-exports[`regression tests key 2 selects rectangle tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key 2 selects rectangle tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key 2 selects rectangle tool: [end of test] number of renders 1`] = `9`;
 
@@ -11022,28 +9589,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -11068,6 +9644,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -11089,37 +9666,6 @@ Object {
 }
 `;
 
-exports[`regression tests key 3 selects diamond tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "diamond",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key 3 selects diamond tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -11153,6 +9699,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -11165,7 +9712,7 @@ Object {
             "type": 2,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "diamond",
@@ -11182,7 +9729,7 @@ Object {
 }
 `;
 
-exports[`regression tests key 3 selects diamond tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key 3 selects diamond tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key 3 selects diamond tool: [end of test] number of renders 1`] = `9`;
 
@@ -11206,28 +9753,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -11252,6 +9808,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -11273,37 +9830,6 @@ Object {
 }
 `;
 
-exports[`regression tests key 4 selects ellipse tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key 4 selects ellipse tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -11337,6 +9863,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -11349,7 +9876,7 @@ Object {
             "type": 2,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
@@ -11366,7 +9893,7 @@ Object {
 }
 `;
 
-exports[`regression tests key 4 selects ellipse tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key 4 selects ellipse tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key 4 selects ellipse tool: [end of test] number of renders 1`] = `9`;
 
@@ -11390,28 +9917,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -11436,6 +9972,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": LinearElementEditor {
     "elementId": "id0",
@@ -11480,52 +10017,6 @@ Object {
 }
 `;
 
-exports[`regression tests key 5 selects arrow tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": "arrow",
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "lastCommittedPoint": null,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      10,
-      10,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 337897,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "arrow",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 449462985,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key 5 selects arrow tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -11561,6 +10052,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -11586,7 +10078,7 @@ Object {
           "seed": 337897,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "arrow",
@@ -11603,7 +10095,7 @@ Object {
 }
 `;
 
-exports[`regression tests key 5 selects arrow tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key 5 selects arrow tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key 5 selects arrow tool: [end of test] number of renders 1`] = `10`;
 
@@ -11627,28 +10119,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -11673,6 +10174,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": LinearElementEditor {
     "elementId": "id0",
@@ -11717,52 +10219,6 @@ Object {
 }
 `;
 
-exports[`regression tests key 6 selects line tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": null,
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "lastCommittedPoint": null,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      10,
-      10,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 337897,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "line",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 449462985,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key 6 selects line tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -11798,6 +10254,7 @@ Object {
           "endArrowhead": null,
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -11823,7 +10280,7 @@ Object {
           "seed": 337897,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "line",
@@ -11840,7 +10297,7 @@ Object {
 }
 `;
 
-exports[`regression tests key 6 selects line tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key 6 selects line tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key 6 selects line tool: [end of test] number of renders 1`] = `9`;
 
@@ -11864,28 +10321,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -11907,9 +10373,8 @@ Object {
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
-  "selectedElementIds": Object {
-    "id0": false,
-  },
+  "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -11931,59 +10396,6 @@ Object {
 }
 `;
 
-exports[`regression tests key 7 selects freedraw tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "lastCommittedPoint": Array [
-    10,
-    10,
-  ],
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      10,
-      10,
-    ],
-    Array [
-      10,
-      10,
-    ],
-  ],
-  "pressures": Array [
-    0,
-    0,
-    0,
-  ],
-  "roughness": 1,
-  "roundness": null,
-  "seed": 337897,
-  "simulatePressure": false,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "freedraw",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key 7 selects freedraw tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -12005,9 +10417,7 @@ Object {
         "editingGroupId": null,
         "editingLinearElement": null,
         "name": "Untitled-201933152653",
-        "selectedElementIds": Object {
-          "id0": false,
-        },
+        "selectedElementIds": Object {},
         "selectedGroupIds": Object {},
         "viewBackgroundColor": "#ffffff",
       },
@@ -12017,6 +10427,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -12051,7 +10462,7 @@ Object {
           "roundness": null,
           "seed": 337897,
           "simulatePressure": false,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "freedraw",
@@ -12068,7 +10479,7 @@ Object {
 }
 `;
 
-exports[`regression tests key 7 selects freedraw tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key 7 selects freedraw tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key 7 selects freedraw tool: [end of test] number of renders 1`] = `9`;
 
@@ -12092,28 +10503,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -12138,6 +10558,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": LinearElementEditor {
     "elementId": "id0",
@@ -12182,52 +10603,6 @@ Object {
 }
 `;
 
-exports[`regression tests key a selects arrow tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": "arrow",
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "lastCommittedPoint": null,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      10,
-      10,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 337897,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "arrow",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 449462985,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key a selects arrow tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -12263,6 +10638,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -12288,7 +10664,7 @@ Object {
           "seed": 337897,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "arrow",
@@ -12305,7 +10681,7 @@ Object {
 }
 `;
 
-exports[`regression tests key a selects arrow tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key a selects arrow tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key a selects arrow tool: [end of test] number of renders 1`] = `10`;
 
@@ -12329,28 +10705,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -12375,6 +10760,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -12396,37 +10782,6 @@ Object {
 }
 `;
 
-exports[`regression tests key d selects diamond tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "diamond",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key d selects diamond tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -12460,6 +10815,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -12472,7 +10828,7 @@ Object {
             "type": 2,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "diamond",
@@ -12489,7 +10845,7 @@ Object {
 }
 `;
 
-exports[`regression tests key d selects diamond tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key d selects diamond tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key d selects diamond tool: [end of test] number of renders 1`] = `9`;
 
@@ -12513,28 +10869,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -12559,6 +10924,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": LinearElementEditor {
     "elementId": "id0",
@@ -12603,52 +10969,6 @@ Object {
 }
 `;
 
-exports[`regression tests key l selects line tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": null,
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "lastCommittedPoint": null,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      10,
-      10,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 337897,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "line",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 449462985,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key l selects line tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -12684,6 +11004,7 @@ Object {
           "endArrowhead": null,
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -12709,7 +11030,7 @@ Object {
           "seed": 337897,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "line",
@@ -12726,7 +11047,7 @@ Object {
 }
 `;
 
-exports[`regression tests key l selects line tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key l selects line tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key l selects line tool: [end of test] number of renders 1`] = `9`;
 
@@ -12750,28 +11071,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -12796,6 +11126,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -12817,37 +11148,6 @@ Object {
 }
 `;
 
-exports[`regression tests key o selects ellipse tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key o selects ellipse tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -12881,6 +11181,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -12893,7 +11194,7 @@ Object {
             "type": 2,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
@@ -12910,7 +11211,7 @@ Object {
 }
 `;
 
-exports[`regression tests key o selects ellipse tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key o selects ellipse tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key o selects ellipse tool: [end of test] number of renders 1`] = `9`;
 
@@ -12934,28 +11235,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -12977,9 +11287,8 @@ Object {
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
-  "selectedElementIds": Object {
-    "id0": false,
-  },
+  "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -13001,59 +11310,6 @@ Object {
 }
 `;
 
-exports[`regression tests key p selects freedraw tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "lastCommittedPoint": Array [
-    10,
-    10,
-  ],
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      10,
-      10,
-    ],
-    Array [
-      10,
-      10,
-    ],
-  ],
-  "pressures": Array [
-    0,
-    0,
-    0,
-  ],
-  "roughness": 1,
-  "roundness": null,
-  "seed": 337897,
-  "simulatePressure": false,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "freedraw",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key p selects freedraw tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -13075,9 +11331,7 @@ Object {
         "editingGroupId": null,
         "editingLinearElement": null,
         "name": "Untitled-201933152653",
-        "selectedElementIds": Object {
-          "id0": false,
-        },
+        "selectedElementIds": Object {},
         "selectedGroupIds": Object {},
         "viewBackgroundColor": "#ffffff",
       },
@@ -13087,6 +11341,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -13121,7 +11376,7 @@ Object {
           "roundness": null,
           "seed": 337897,
           "simulatePressure": false,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "freedraw",
@@ -13138,7 +11393,7 @@ Object {
 }
 `;
 
-exports[`regression tests key p selects freedraw tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key p selects freedraw tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key p selects freedraw tool: [end of test] number of renders 1`] = `9`;
 
@@ -13162,28 +11417,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -13208,6 +11472,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -13229,37 +11494,6 @@ Object {
 }
 `;
 
-exports[`regression tests key r selects rectangle tool: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
 exports[`regression tests key r selects rectangle tool: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -13293,6 +11527,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -13305,7 +11540,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -13322,7 +11557,7 @@ Object {
 }
 `;
 
-exports[`regression tests key r selects rectangle tool: [end of test] number of elements 1`] = `1`;
+exports[`regression tests key r selects rectangle tool: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests key r selects rectangle tool: [end of test] number of renders 1`] = `9`;
 
@@ -13346,28 +11581,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -13388,7 +11632,6 @@ Object {
     "id0": true,
     "id1": true,
     "id2": true,
-    "id3": true,
   },
   "resizingElement": null,
   "scrollX": 0,
@@ -13398,9 +11641,8 @@ Object {
     "id0": true,
     "id1": true,
     "id2": true,
-    "id3": true,
-    "id5": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {
     "id4": true,
   },
@@ -13424,204 +11666,6 @@ Object {
 }
 `;
 
-exports[`regression tests make a group and duplicate it: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id4_copy",
-  ],
-  "height": 10,
-  "id": "id0_copy",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 915032327,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 5,
-  "versionNonce": 81784553,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
-exports[`regression tests make a group and duplicate it: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id4_copy",
-  ],
-  "height": 10,
-  "id": "id1_copy",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 747212839,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 5,
-  "versionNonce": 1723083209,
-  "width": 10,
-  "x": 30,
-  "y": 10,
-}
-`;
-
-exports[`regression tests make a group and duplicate it: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id4_copy",
-  ],
-  "height": 10,
-  "id": "id2_copy",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 760410951,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 5,
-  "versionNonce": 1006504105,
-  "width": 10,
-  "x": 50,
-  "y": 10,
-}
-`;
-
-exports[`regression tests make a group and duplicate it: [end of test] element 3 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id4",
-  ],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 1505387817,
-  "width": 10,
-  "x": 20,
-  "y": 20,
-}
-`;
-
-exports[`regression tests make a group and duplicate it: [end of test] element 4 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id4",
-  ],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 23633383,
-  "width": 10,
-  "x": 40,
-  "y": 20,
-}
-`;
-
-exports[`regression tests make a group and duplicate it: [end of test] element 5 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id4",
-  ],
-  "height": 10,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 401146281,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 493213705,
-  "width": 10,
-  "x": 60,
-  "y": 20,
-}
-`;
-
 exports[`regression tests make a group and duplicate it: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -13655,6 +11699,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -13667,7 +11712,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -13697,6 +11742,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -13709,7 +11755,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -13725,6 +11771,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -13737,7 +11784,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -13767,6 +11814,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -13779,7 +11827,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -13795,6 +11843,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -13807,7 +11856,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -13823,6 +11872,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -13835,7 +11885,7 @@ Object {
             "type": 3,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -13857,7 +11907,6 @@ Object {
           "id0": true,
           "id1": true,
           "id2": true,
-          "id3": true,
         },
         "selectedGroupIds": Object {
           "id4": true,
@@ -13870,6 +11919,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -13884,7 +11934,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -13900,6 +11950,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -13914,7 +11965,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -13930,6 +11981,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -13944,7 +11996,7 @@ Object {
             "type": 3,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -13966,8 +12018,6 @@ Object {
           "id0": true,
           "id1": true,
           "id2": true,
-          "id3": true,
-          "id5": true,
         },
         "selectedGroupIds": Object {
           "id4": true,
@@ -13980,6 +12030,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4_copy",
           ],
@@ -13994,7 +12045,7 @@ Object {
             "type": 3,
           },
           "seed": 915032327,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -14010,6 +12061,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4_copy",
           ],
@@ -14024,7 +12076,7 @@ Object {
             "type": 3,
           },
           "seed": 747212839,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -14040,6 +12092,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4_copy",
           ],
@@ -14054,7 +12107,7 @@ Object {
             "type": 3,
           },
           "seed": 760410951,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -14070,6 +12123,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -14084,7 +12138,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -14100,6 +12154,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -14114,7 +12169,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -14130,6 +12185,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -14144,7 +12200,7 @@ Object {
             "type": 3,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -14161,7 +12217,7 @@ Object {
 }
 `;
 
-exports[`regression tests make a group and duplicate it: [end of test] number of elements 1`] = `6`;
+exports[`regression tests make a group and duplicate it: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests make a group and duplicate it: [end of test] number of renders 1`] = `24`;
 
@@ -14185,28 +12241,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -14225,7 +12290,6 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {
     "id0": true,
-    "id3": true,
   },
   "resizingElement": null,
   "scrollX": 0,
@@ -14233,8 +12297,8 @@ Object {
   "scrolledOutside": false,
   "selectedElementIds": Object {
     "id1": true,
-    "id4": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -14256,68 +12320,6 @@ Object {
 }
 `;
 
-exports[`regression tests noop interaction after undo shouldn't create history entry: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 1116226695,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
-exports[`regression tests noop interaction after undo shouldn't create history entry: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 1014066025,
-  "width": 10,
-  "x": 30,
-  "y": 10,
-}
-`;
-
 exports[`regression tests noop interaction after undo shouldn't create history entry: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -14351,6 +12353,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -14363,7 +12366,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -14393,6 +12396,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -14405,7 +12409,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -14421,6 +12425,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -14433,7 +12438,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -14450,7 +12455,7 @@ Object {
 }
 `;
 
-exports[`regression tests noop interaction after undo shouldn't create history entry: [end of test] number of elements 1`] = `2`;
+exports[`regression tests noop interaction after undo shouldn't create history entry: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests noop interaction after undo shouldn't create history entry: [end of test] number of renders 1`] = `21`;
 
@@ -14474,28 +12479,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "down",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "touch",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -14517,9 +12531,8 @@ Object {
   "scrollX": -2.916666666666668,
   "scrollY": 0,
   "scrolledOutside": false,
-  "selectedElementIds": Object {
-    "id0": true,
-  },
+  "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -14585,28 +12598,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -14629,6 +12651,7 @@ Object {
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -14694,28 +12717,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -14739,10 +12771,8 @@ Object {
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
-  "selectedElementIds": Object {
-    "id0": false,
-    "id1": true,
-  },
+  "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -14764,37 +12794,6 @@ Object {
 }
 `;
 
-exports[`regression tests shift click on selected element should deselect it on pointer up: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 0,
-  "y": 0,
-}
-`;
-
 exports[`regression tests shift click on selected element should deselect it on pointer up: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -14828,6 +12827,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -14840,7 +12840,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -14857,7 +12857,7 @@ Object {
 }
 `;
 
-exports[`regression tests shift click on selected element should deselect it on pointer up: [end of test] number of elements 1`] = `1`;
+exports[`regression tests shift click on selected element should deselect it on pointer up: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests shift click on selected element should deselect it on pointer up: [end of test] number of renders 1`] = `11`;
 
@@ -14881,28 +12881,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -14922,8 +12931,6 @@ Object {
   "previousSelectedElementIds": Object {
     "id0": true,
     "id1": true,
-    "id2": true,
-    "id3": true,
   },
   "resizingElement": null,
   "scrollX": 0,
@@ -14932,10 +12939,8 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
     "id1": true,
-    "id2": true,
-    "id3": true,
-    "id4": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -14957,68 +12962,6 @@ Object {
 }
 `;
 
-exports[`regression tests shift-click to multiselect, then drag: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1116226695,
-  "width": 10,
-  "x": 20,
-  "y": 20,
-}
-`;
-
-exports[`regression tests shift-click to multiselect, then drag: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1014066025,
-  "width": 10,
-  "x": 40,
-  "y": 20,
-}
-`;
-
 exports[`regression tests shift-click to multiselect, then drag: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -15052,6 +12995,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -15064,7 +13008,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -15094,6 +13038,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -15106,7 +13051,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -15122,6 +13067,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -15134,7 +13080,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -15155,9 +13101,6 @@ Object {
         "selectedElementIds": Object {
           "id0": true,
           "id1": true,
-          "id2": true,
-          "id3": true,
-          "id4": true,
         },
         "selectedGroupIds": Object {},
         "viewBackgroundColor": "#ffffff",
@@ -15168,6 +13111,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -15180,7 +13124,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -15196,6 +13140,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -15208,7 +13153,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -15225,7 +13170,7 @@ Object {
 }
 `;
 
-exports[`regression tests shift-click to multiselect, then drag: [end of test] number of elements 1`] = `2`;
+exports[`regression tests shift-click to multiselect, then drag: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests shift-click to multiselect, then drag: [end of test] number of renders 1`] = `20`;
 
@@ -15249,28 +13194,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -15288,6 +13242,8 @@ Object {
   "penMode": false,
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {
+    "id0": true,
+    "id1": true,
     "id2": true,
   },
   "resizingElement": null,
@@ -15298,9 +13254,8 @@ Object {
     "id0": true,
     "id1": true,
     "id2": true,
-    "id3": true,
-    "id5": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -15322,99 +13277,6 @@ Object {
 }
 `;
 
-exports[`regression tests should group elements and ungroup them: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 1505387817,
-  "width": 10,
-  "x": 10,
-  "y": 10,
-}
-`;
-
-exports[`regression tests should group elements and ungroup them: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 23633383,
-  "width": 10,
-  "x": 30,
-  "y": 10,
-}
-`;
-
-exports[`regression tests should group elements and ungroup them: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 401146281,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 493213705,
-  "width": 10,
-  "x": 50,
-  "y": 10,
-}
-`;
-
 exports[`regression tests should group elements and ungroup them: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -15448,6 +13310,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -15460,7 +13323,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -15490,6 +13353,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -15502,7 +13366,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -15518,6 +13382,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -15530,7 +13395,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -15560,6 +13425,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -15572,7 +13438,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -15588,6 +13454,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -15600,7 +13467,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -15616,6 +13483,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -15628,7 +13496,7 @@ Object {
             "type": 3,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -15650,7 +13518,6 @@ Object {
           "id0": true,
           "id1": true,
           "id2": true,
-          "id3": true,
         },
         "selectedGroupIds": Object {
           "id4": true,
@@ -15663,6 +13530,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -15677,7 +13545,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -15693,6 +13561,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -15707,7 +13576,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -15723,6 +13592,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -15737,7 +13607,7 @@ Object {
             "type": 3,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -15759,8 +13629,6 @@ Object {
           "id0": true,
           "id1": true,
           "id2": true,
-          "id3": true,
-          "id5": true,
         },
         "selectedGroupIds": Object {},
         "viewBackgroundColor": "#ffffff",
@@ -15771,6 +13639,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -15783,13 +13652,13 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 4,
-          "versionNonce": 1505387817,
+          "versionNonce": 23633383,
           "width": 10,
           "x": 10,
           "y": 10,
@@ -15799,6 +13668,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -15811,13 +13681,13 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 4,
-          "versionNonce": 23633383,
+          "versionNonce": 493213705,
           "width": 10,
           "x": 30,
           "y": 10,
@@ -15827,6 +13697,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -15839,13 +13710,13 @@ Object {
             "type": 3,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
           "version": 4,
-          "versionNonce": 493213705,
+          "versionNonce": 915032327,
           "width": 10,
           "x": 50,
           "y": 10,
@@ -15856,7 +13727,7 @@ Object {
 }
 `;
 
-exports[`regression tests should group elements and ungroup them: [end of test] number of elements 1`] = `3`;
+exports[`regression tests should group elements and ungroup them: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests should group elements and ungroup them: [end of test] number of renders 1`] = `25`;
 
@@ -15871,7 +13742,7 @@ Object {
   "collaborators": Map {},
   "contextMenu": null,
   "currentChartType": "bar",
-  "currentItemBackgroundColor": "#fa5252",
+  "currentItemBackgroundColor": "#ffc9c9",
   "currentItemEndArrowhead": "arrow",
   "currentItemFillStyle": "hachure",
   "currentItemFontFamily": 1,
@@ -15880,28 +13751,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -15909,7 +13789,7 @@ Object {
   "offsetTop": 0,
   "openDialog": null,
   "openMenu": null,
-  "openPopup": null,
+  "openPopup": "elementBackground",
   "openSidebar": null,
   "pasteDialog": Object {
     "data": null,
@@ -15926,6 +13806,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -15947,37 +13828,6 @@ Object {
 }
 `;
 
-exports[`regression tests should show fill icons when element has non transparent background: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "#fa5252",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 449462985,
-  "width": 10,
-  "x": 0,
-  "y": 0,
-}
-`;
-
 exports[`regression tests should show fill icons when element has non transparent background: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -16011,6 +13861,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -16023,7 +13874,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -16050,9 +13901,10 @@ Object {
       "elements": Array [
         Object {
           "angle": 0,
-          "backgroundColor": "#fa5252",
+          "backgroundColor": "#ffc9c9",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -16065,7 +13917,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -16082,9 +13934,9 @@ Object {
 }
 `;
 
-exports[`regression tests should show fill icons when element has non transparent background: [end of test] number of elements 1`] = `1`;
+exports[`regression tests should show fill icons when element has non transparent background: [end of test] number of elements 1`] = `0`;
 
-exports[`regression tests should show fill icons when element has non transparent background: [end of test] number of renders 1`] = `14`;
+exports[`regression tests should show fill icons when element has non transparent background: [end of test] number of renders 1`] = `13`;
 
 exports[`regression tests single-clicking on a subgroup of a selected group should not alter selection: [end of test] appState 1`] = `
 Object {
@@ -16106,28 +13958,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -16157,10 +14018,10 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
     "id1": true,
-    "id11": true,
     "id5": true,
     "id6": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {
     "id10": true,
   },
@@ -16184,142 +14045,6 @@ Object {
 }
 `;
 
-exports[`regression tests single-clicking on a subgroup of a selected group should not alter selection: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id4",
-    "id10",
-  ],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 81784553,
-  "width": 10,
-  "x": 10,
-  "y": 0,
-}
-`;
-
-exports[`regression tests single-clicking on a subgroup of a selected group should not alter selection: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id4",
-    "id10",
-  ],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 747212839,
-  "width": 10,
-  "x": 50,
-  "y": 0,
-}
-`;
-
-exports[`regression tests single-clicking on a subgroup of a selected group should not alter selection: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id9",
-    "id10",
-  ],
-  "height": 10,
-  "id": "id5",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 1014066025,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 1723083209,
-  "width": 10,
-  "x": 10,
-  "y": 50,
-}
-`;
-
-exports[`regression tests single-clicking on a subgroup of a selected group should not alter selection: [end of test] element 3 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id9",
-    "id10",
-  ],
-  "height": 10,
-  "id": "id6",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 400692809,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 760410951,
-  "width": 10,
-  "x": 50,
-  "y": 50,
-}
-`;
-
 exports[`regression tests single-clicking on a subgroup of a selected group should not alter selection: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -16353,6 +14078,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -16365,7 +14091,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -16395,6 +14121,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -16407,7 +14134,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -16423,6 +14150,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -16435,7 +14163,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -16456,8 +14184,6 @@ Object {
         "selectedElementIds": Object {
           "id0": true,
           "id1": true,
-          "id2": true,
-          "id3": true,
         },
         "selectedGroupIds": Object {
           "id4": true,
@@ -16470,6 +14196,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -16484,7 +14211,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -16500,6 +14227,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -16514,7 +14242,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -16544,6 +14272,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -16558,7 +14287,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -16574,6 +14303,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -16588,7 +14318,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -16604,6 +14334,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id5",
@@ -16616,7 +14347,7 @@ Object {
             "type": 3,
           },
           "seed": 1014066025,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -16646,6 +14377,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -16660,7 +14392,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -16676,6 +14408,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -16690,7 +14423,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -16706,6 +14439,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id5",
@@ -16718,7 +14452,7 @@ Object {
             "type": 3,
           },
           "seed": 1014066025,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -16734,6 +14468,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id6",
@@ -16746,7 +14481,7 @@ Object {
             "type": 3,
           },
           "seed": 400692809,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -16767,8 +14502,6 @@ Object {
         "selectedElementIds": Object {
           "id5": true,
           "id6": true,
-          "id7": true,
-          "id8": true,
         },
         "selectedGroupIds": Object {
           "id9": true,
@@ -16781,6 +14514,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -16795,7 +14529,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -16811,6 +14545,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
           ],
@@ -16825,7 +14560,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -16841,6 +14576,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id9",
           ],
@@ -16855,7 +14591,7 @@ Object {
             "type": 3,
           },
           "seed": 1014066025,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -16871,6 +14607,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id9",
           ],
@@ -16885,7 +14622,7 @@ Object {
             "type": 3,
           },
           "seed": 400692809,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -16920,6 +14657,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
             "id10",
@@ -16935,7 +14673,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -16951,6 +14689,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id4",
             "id10",
@@ -16966,7 +14705,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -16982,6 +14721,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id9",
             "id10",
@@ -16997,7 +14737,7 @@ Object {
             "type": 3,
           },
           "seed": 1014066025,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -17013,6 +14753,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id9",
             "id10",
@@ -17028,7 +14769,7 @@ Object {
             "type": 3,
           },
           "seed": 400692809,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -17045,7 +14786,7 @@ Object {
 }
 `;
 
-exports[`regression tests single-clicking on a subgroup of a selected group should not alter selection: [end of test] number of elements 1`] = `4`;
+exports[`regression tests single-clicking on a subgroup of a selected group should not alter selection: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests single-clicking on a subgroup of a selected group should not alter selection: [end of test] number of renders 1`] = `39`;
 
@@ -17069,28 +14810,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -17113,6 +14863,7 @@ Object {
   "scrollY": 60,
   "scrolledOutside": false,
   "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -17178,28 +14929,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": "id3",
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -17226,6 +14986,7 @@ Object {
   "selectedElementIds": Object {
     "id1": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -17247,107 +15008,6 @@ Object {
 }
 `;
 
-exports[`regression tests supports nested groups: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id3",
-  ],
-  "height": 50,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1116226695,
-  "width": 50,
-  "x": 100,
-  "y": 100,
-}
-`;
-
-exports[`regression tests supports nested groups: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id5",
-    "id3",
-  ],
-  "height": 50,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 400692809,
-  "width": 50,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`regression tests supports nested groups: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [
-    "id5",
-    "id3",
-  ],
-  "height": 50,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 401146281,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 1604849351,
-  "width": 50,
-  "x": 200,
-  "y": 200,
-}
-`;
-
 exports[`regression tests supports nested groups: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -17381,6 +15041,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 50,
           "id": "id0",
@@ -17393,7 +15054,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -17423,6 +15084,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 50,
           "id": "id0",
@@ -17435,7 +15097,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -17451,6 +15113,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 50,
           "id": "id1",
@@ -17463,7 +15126,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -17493,6 +15156,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 50,
           "id": "id0",
@@ -17505,7 +15169,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -17521,6 +15185,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 50,
           "id": "id1",
@@ -17533,7 +15198,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -17549,6 +15214,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 50,
           "id": "id2",
@@ -17561,7 +15227,7 @@ Object {
             "type": 3,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -17595,6 +15261,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -17609,7 +15276,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -17625,6 +15292,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -17639,7 +15307,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -17655,6 +15323,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -17669,7 +15338,7 @@ Object {
             "type": 3,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -17690,7 +15359,6 @@ Object {
         "selectedElementIds": Object {
           "id0": true,
           "id2": true,
-          "id4": true,
         },
         "selectedGroupIds": Object {},
         "viewBackgroundColor": "#ffffff",
@@ -17701,6 +15369,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -17715,7 +15384,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -17731,6 +15400,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -17745,7 +15415,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -17761,6 +15431,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -17775,7 +15446,7 @@ Object {
             "type": 3,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -17796,7 +15467,6 @@ Object {
         "selectedElementIds": Object {
           "id0": true,
           "id2": true,
-          "id4": true,
         },
         "selectedGroupIds": Object {
           "id5": true,
@@ -17809,6 +15479,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -17823,7 +15494,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -17839,6 +15510,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id5",
             "id3",
@@ -17854,7 +15526,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -17870,6 +15542,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id5",
             "id3",
@@ -17885,7 +15558,7 @@ Object {
             "type": 3,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -17907,7 +15580,6 @@ Object {
           "id0": true,
           "id1": true,
           "id2": true,
-          "id7": true,
         },
         "selectedGroupIds": Object {
           "id3": true,
@@ -17920,6 +15592,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id3",
           ],
@@ -17934,7 +15607,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -17950,6 +15623,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id5",
             "id3",
@@ -17965,7 +15639,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -17981,6 +15655,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [
             "id5",
             "id3",
@@ -17996,7 +15671,7 @@ Object {
             "type": 3,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -18013,7 +15688,7 @@ Object {
 }
 `;
 
-exports[`regression tests supports nested groups: [end of test] number of elements 1`] = `3`;
+exports[`regression tests supports nested groups: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests supports nested groups: [end of test] number of renders 1`] = `32`;
 
@@ -18037,16 +15712,18 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "down",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": Object {
     "angle": 0,
     "backgroundColor": "transparent",
     "boundElements": null,
     "fillStyle": "hachure",
+    "frameId": null,
     "groupIds": Array [],
     "height": 0,
     "id": "id4",
@@ -18059,7 +15736,7 @@ Object {
       "type": 2,
     },
     "seed": 1116226695,
-    "strokeColor": "#000000",
+    "strokeColor": "#1e1e1e",
     "strokeStyle": "solid",
     "strokeWidth": 1,
     "type": "selection",
@@ -18071,21 +15748,29 @@ Object {
     "y": 0,
   },
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -18105,7 +15790,6 @@ Object {
   "previousSelectedElementIds": Object {
     "id1": true,
     "id2": true,
-    "id3": true,
   },
   "resizingElement": null,
   "scrollX": 0,
@@ -18114,6 +15798,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": Object {
@@ -18121,6 +15806,7 @@ Object {
     "backgroundColor": "transparent",
     "boundElements": null,
     "fillStyle": "hachure",
+    "frameId": null,
     "groupIds": Array [],
     "height": 0,
     "id": "id4",
@@ -18133,7 +15819,7 @@ Object {
       "type": 2,
     },
     "seed": 1116226695,
-    "strokeColor": "#000000",
+    "strokeColor": "#1e1e1e",
     "strokeStyle": "solid",
     "strokeWidth": 1,
     "type": "selection",
@@ -18162,99 +15848,6 @@ Object {
 }
 `;
 
-exports[`regression tests switches from group of selected elements to another element on pointer down: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`regression tests switches from group of selected elements to another element on pointer down: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 100,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 449462985,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 100,
-  "x": 110,
-  "y": 110,
-}
-`;
-
-exports[`regression tests switches from group of selected elements to another element on pointer down: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 100,
-  "id": "id2",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 401146281,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "diamond",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 2019559783,
-  "width": 100,
-  "x": 310,
-  "y": 310,
-}
-`;
-
 exports[`regression tests switches from group of selected elements to another element on pointer down: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -18288,6 +15881,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -18300,7 +15894,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -18330,6 +15924,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -18342,7 +15937,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -18358,6 +15953,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id1",
@@ -18370,7 +15966,7 @@ Object {
             "type": 2,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
@@ -18400,6 +15996,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -18412,7 +16009,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -18428,6 +16025,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id1",
@@ -18440,7 +16038,7 @@ Object {
             "type": 2,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
@@ -18456,6 +16054,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 100,
           "id": "id2",
@@ -18468,7 +16067,7 @@ Object {
             "type": 2,
           },
           "seed": 401146281,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "diamond",
@@ -18485,7 +16084,7 @@ Object {
 }
 `;
 
-exports[`regression tests switches from group of selected elements to another element on pointer down: [end of test] number of elements 1`] = `3`;
+exports[`regression tests switches from group of selected elements to another element on pointer down: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests switches from group of selected elements to another element on pointer down: [end of test] number of renders 1`] = `20`;
 
@@ -18509,16 +16108,18 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "down",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": Object {
     "angle": 0,
     "backgroundColor": "transparent",
     "boundElements": null,
     "fillStyle": "hachure",
+    "frameId": null,
     "groupIds": Array [],
     "height": 0,
     "id": "id2",
@@ -18531,7 +16132,7 @@ Object {
       "type": 2,
     },
     "seed": 401146281,
-    "strokeColor": "#000000",
+    "strokeColor": "#1e1e1e",
     "strokeStyle": "solid",
     "strokeWidth": 1,
     "type": "selection",
@@ -18543,21 +16144,29 @@ Object {
     "y": 0,
   },
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -18584,6 +16193,7 @@ Object {
   "selectedElementIds": Object {
     "id0": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": Object {
@@ -18591,6 +16201,7 @@ Object {
     "backgroundColor": "transparent",
     "boundElements": null,
     "fillStyle": "hachure",
+    "frameId": null,
     "groupIds": Array [],
     "height": 0,
     "id": "id2",
@@ -18603,7 +16214,7 @@ Object {
       "type": 2,
     },
     "seed": 401146281,
-    "strokeColor": "#000000",
+    "strokeColor": "#1e1e1e",
     "strokeStyle": "solid",
     "strokeWidth": 1,
     "type": "selection",
@@ -18632,68 +16243,6 @@ Object {
 }
 `;
 
-exports[`regression tests switches selected element on pointer down: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 1278240551,
-  "width": 10,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`regression tests switches selected element on pointer down: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 449462985,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 10,
-  "x": 20,
-  "y": 20,
-}
-`;
-
 exports[`regression tests switches selected element on pointer down: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -18727,6 +16276,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -18739,7 +16289,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -18769,6 +16319,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -18781,7 +16332,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -18797,6 +16348,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id1",
@@ -18809,7 +16361,7 @@ Object {
             "type": 2,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "ellipse",
@@ -18826,7 +16378,7 @@ Object {
 }
 `;
 
-exports[`regression tests switches selected element on pointer down: [end of test] number of elements 1`] = `2`;
+exports[`regression tests switches selected element on pointer down: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests switches selected element on pointer down: [end of test] number of renders 1`] = `14`;
 
@@ -18850,28 +16402,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "down",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "touch",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -18893,9 +16454,8 @@ Object {
   "scrollX": 10,
   "scrollY": -10,
   "scrolledOutside": false,
-  "selectedElementIds": Object {
-    "id0": true,
-  },
+  "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -18961,28 +16521,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -19007,6 +16576,7 @@ Object {
   "selectedElementIds": Object {
     "id1": true,
   },
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -19028,117 +16598,6 @@ Object {
 }
 `;
 
-exports[`regression tests undo/redo drawing an element: [end of test] element 0 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 337897,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 6,
-  "versionNonce": 760410951,
-  "width": 20,
-  "x": 10,
-  "y": -10,
-}
-`;
-
-exports[`regression tests undo/redo drawing an element: [end of test] element 1 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 20,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": Object {
-    "type": 3,
-  },
-  "seed": 449462985,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 6,
-  "versionNonce": 1006504105,
-  "width": 30,
-  "x": 40,
-  "y": 0,
-}
-`;
-
-exports[`regression tests undo/redo drawing an element: [end of test] element 2 1`] = `
-Object {
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": "arrow",
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "groupIds": Array [],
-  "height": 10,
-  "id": "id2",
-  "isDeleted": true,
-  "lastCommittedPoint": Array [
-    60,
-    10,
-  ],
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": Array [
-    Array [
-      0,
-      0,
-    ],
-    Array [
-      60,
-      10,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": Object {
-    "type": 2,
-  },
-  "seed": 401146281,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#000000",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "arrow",
-  "updated": 1,
-  "version": 9,
-  "versionNonce": 81784553,
-  "width": 60,
-  "x": 130,
-  "y": 10,
-}
-`;
-
 exports[`regression tests undo/redo drawing an element: [end of test] history 1`] = `
 Object {
   "recording": false,
@@ -19160,6 +16619,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -19172,7 +16632,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -19188,6 +16648,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -19200,7 +16661,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -19218,6 +16679,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id2",
@@ -19250,7 +16712,7 @@ Object {
           "seed": 401146281,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "arrow",
@@ -19280,6 +16742,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -19292,7 +16755,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -19308,6 +16771,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -19320,7 +16784,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -19338,6 +16802,7 @@ Object {
           "endArrowhead": "arrow",
           "endBinding": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id2",
@@ -19366,7 +16831,7 @@ Object {
           "seed": 401146281,
           "startArrowhead": null,
           "startBinding": null,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "arrow",
@@ -19409,6 +16874,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -19421,7 +16887,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -19451,6 +16917,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 10,
           "id": "id0",
@@ -19463,7 +16930,7 @@ Object {
             "type": 3,
           },
           "seed": 337897,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -19479,6 +16946,7 @@ Object {
           "backgroundColor": "transparent",
           "boundElements": null,
           "fillStyle": "hachure",
+          "frameId": null,
           "groupIds": Array [],
           "height": 20,
           "id": "id1",
@@ -19491,7 +16959,7 @@ Object {
             "type": 3,
           },
           "seed": 449462985,
-          "strokeColor": "#000000",
+          "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
@@ -19508,7 +16976,7 @@ Object {
 }
 `;
 
-exports[`regression tests undo/redo drawing an element: [end of test] number of elements 1`] = `3`;
+exports[`regression tests undo/redo drawing an element: [end of test] number of elements 1`] = `0`;
 
 exports[`regression tests undo/redo drawing an element: [end of test] number of renders 1`] = `31`;
 
@@ -19532,28 +17000,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -19576,6 +17053,7 @@ Object {
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -19641,28 +17119,37 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
@@ -19685,6 +17172,7 @@ Object {
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
diff --git a/src/tests/__snapshots__/selection.test.tsx.snap b/src/tests/__snapshots__/selection.test.tsx.snap
index 6379fa0aa..fff176a63 100644
--- a/src/tests/__snapshots__/selection.test.tsx.snap
+++ b/src/tests/__snapshots__/selection.test.tsx.snap
@@ -8,6 +8,7 @@ Object {
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
@@ -33,7 +34,7 @@ Object {
   "seed": 337897,
   "startArrowhead": null,
   "startBinding": null,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "arrow",
@@ -54,6 +55,7 @@ Object {
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
@@ -79,7 +81,7 @@ Object {
   "seed": 337897,
   "startArrowhead": null,
   "startBinding": null,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "line",
@@ -98,6 +100,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
@@ -110,7 +113,7 @@ Object {
     "type": 2,
   },
   "seed": 337897,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "diamond",
@@ -129,6 +132,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
@@ -141,7 +145,7 @@ Object {
     "type": 2,
   },
   "seed": 337897,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "ellipse",
@@ -160,6 +164,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 50,
   "id": "id0",
@@ -172,7 +177,7 @@ Object {
     "type": 3,
   },
   "seed": 337897,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
diff --git a/src/tests/binding.test.tsx b/src/tests/binding.test.tsx
index c615eb925..07af36569 100644
--- a/src/tests/binding.test.tsx
+++ b/src/tests/binding.test.tsx
@@ -4,7 +4,7 @@ import { UI, Pointer, Keyboard } from "./helpers/ui";
 import { getTransformHandles } from "../element/transformHandles";
 import { API } from "./helpers/api";
 import { KEYS } from "../keys";
-import { actionCreateContainerFromText } from "../actions/actionBoundText";
+import { actionWrapTextInContainer } from "../actions/actionBoundText";
 
 const { h } = window;
 
@@ -277,7 +277,7 @@ describe("element binding", () => {
 
     expect(h.state.selectedElementIds[text1.id]).toBe(true);
 
-    h.app.actionManager.executeAction(actionCreateContainerFromText);
+    h.app.actionManager.executeAction(actionWrapTextInContainer);
 
     // new text container will be placed before the text element
     const container = h.elements.at(-2)!;
diff --git a/src/tests/clients.test.ts b/src/tests/clients.test.ts
index a6a6901b1..e78cf1864 100644
--- a/src/tests/clients.test.ts
+++ b/src/tests/clients.test.ts
@@ -1,44 +1,39 @@
-import { getClientInitials } from "../clients";
+import { getNameInitial } from "../clients";
 
 describe("getClientInitials", () => {
   it("returns substring if one name provided", () => {
-    const result = getClientInitials("Alan");
-    expect(result).toBe("A");
+    expect(getNameInitial("Alan")).toBe("A");
   });
 
   it("returns initials", () => {
-    const result = getClientInitials("John Doe");
-    expect(result).toBe("J");
+    expect(getNameInitial("John Doe")).toBe("J");
   });
 
   it("returns correct initials if many names provided", () => {
-    const result = getClientInitials("John Alan Doe");
-    expect(result).toBe("J");
+    expect(getNameInitial("John Alan Doe")).toBe("J");
   });
 
   it("returns single initial if 1 letter provided", () => {
-    const result = getClientInitials("z");
-    expect(result).toBe("Z");
+    expect(getNameInitial("z")).toBe("Z");
   });
 
   it("trims trailing whitespace", () => {
-    const result = getClientInitials("  q    ");
-    expect(result).toBe("Q");
+    expect(getNameInitial("  q    ")).toBe("Q");
   });
 
   it('returns "?" if falsey value provided', () => {
-    let result = getClientInitials("");
-    expect(result).toBe("?");
-
-    result = getClientInitials(undefined);
-    expect(result).toBe("?");
-
-    result = getClientInitials(null);
-    expect(result).toBe("?");
+    expect(getNameInitial("")).toBe("?");
+    expect(getNameInitial(undefined)).toBe("?");
+    expect(getNameInitial(null)).toBe("?");
   });
 
   it('returns "?" when value is blank', () => {
-    const result = getClientInitials(" ");
-    expect(result).toBe("?");
+    expect(getNameInitial(" ")).toBe("?");
+  });
+
+  it("works with multibyte strings", () => {
+    expect(getNameInitial("😀")).toBe("😀");
+    // but doesn't work with emoji ZWJ sequences
+    expect(getNameInitial("👨‍👩‍👦")).toBe("👨");
   });
 });
diff --git a/src/tests/clipboard.test.tsx b/src/tests/clipboard.test.tsx
index 1fdc0f452..bbaa4d179 100644
--- a/src/tests/clipboard.test.tsx
+++ b/src/tests/clipboard.test.tsx
@@ -1,5 +1,10 @@
 import ReactDOM from "react-dom";
-import { render, waitFor, GlobalTestState } from "./test-utils";
+import {
+  render,
+  waitFor,
+  GlobalTestState,
+  createPasteEvent,
+} from "./test-utils";
 import { Pointer, Keyboard } from "./helpers/ui";
 import ExcalidrawApp from "../excalidraw-app";
 import { KEYS } from "../keys";
@@ -9,6 +14,8 @@ import {
 } from "../element/textElement";
 import { getElementBounds } from "../element";
 import { NormalizedZoomValue } from "../types";
+import { API } from "./helpers/api";
+import { copyToClipboard } from "../clipboard";
 
 const { h } = window;
 
@@ -35,38 +42,28 @@ const setClipboardText = (text: string) => {
   });
 };
 
-const sendPasteEvent = () => {
-  const clipboardEvent = new Event("paste", {
-    bubbles: true,
-    cancelable: true,
-    composed: true,
-  });
-
-  // set `clipboardData` properties.
-  // @ts-ignore
-  clipboardEvent.clipboardData = {
-    getData: () => window.navigator.clipboard.readText(),
-    files: [],
-  };
-
+const sendPasteEvent = (text?: string) => {
+  const clipboardEvent = createPasteEvent(
+    text || (() => window.navigator.clipboard.readText()),
+  );
   document.dispatchEvent(clipboardEvent);
 };
 
-const pasteWithCtrlCmdShiftV = () => {
+const pasteWithCtrlCmdShiftV = (text?: string) => {
   Keyboard.withModifierKeys({ ctrl: true, shift: true }, () => {
     //triggering keydown with an empty clipboard
     Keyboard.keyPress(KEYS.V);
     //triggering paste event with faked clipboard
-    sendPasteEvent();
+    sendPasteEvent(text);
   });
 };
 
-const pasteWithCtrlCmdV = () => {
+const pasteWithCtrlCmdV = (text?: string) => {
   Keyboard.withModifierKeys({ ctrl: true }, () => {
     //triggering keydown with an empty clipboard
     Keyboard.keyPress(KEYS.V);
     //triggering paste event with faked clipboard
-    sendPasteEvent();
+    sendPasteEvent(text);
   });
 };
 
@@ -89,6 +86,32 @@ beforeEach(async () => {
   });
 });
 
+describe("general paste behavior", () => {
+  it("should randomize seed on paste", async () => {
+    const rectangle = API.createElement({ type: "rectangle" });
+    const clipboardJSON = (await copyToClipboard([rectangle], null))!;
+
+    pasteWithCtrlCmdV(clipboardJSON);
+
+    await waitFor(() => {
+      expect(h.elements.length).toBe(1);
+      expect(h.elements[0].seed).not.toBe(rectangle.seed);
+    });
+  });
+
+  it("should retain seed on shift-paste", async () => {
+    const rectangle = API.createElement({ type: "rectangle" });
+    const clipboardJSON = (await copyToClipboard([rectangle], null))!;
+
+    // assert we don't randomize seed on shift-paste
+    pasteWithCtrlCmdShiftV(clipboardJSON);
+    await waitFor(() => {
+      expect(h.elements.length).toBe(1);
+      expect(h.elements[0].seed).toBe(rectangle.seed);
+    });
+  });
+});
+
 describe("paste text as single lines", () => {
   it("should create an element for each line when copying with Ctrl/Cmd+V", async () => {
     const text = "sajgfakfn\naaksfnknas\nakefnkasf";
diff --git a/src/tests/contextmenu.test.tsx b/src/tests/contextmenu.test.tsx
index 55841b243..9e89996af 100644
--- a/src/tests/contextmenu.test.tsx
+++ b/src/tests/contextmenu.test.tsx
@@ -9,6 +9,7 @@ import {
   queryByText,
   queryAllByText,
   waitFor,
+  togglePopover,
 } from "./test-utils";
 import ExcalidrawApp from "../excalidraw-app";
 import * as Renderer from "../renderer/renderScene";
@@ -19,7 +20,6 @@ import { ShortcutName } from "../actions/shortcuts";
 import { copiedStyles } from "../actions/actionStyles";
 import { API } from "./helpers/api";
 import { setDateTimeForTests } from "../utils";
-import { t } from "../i18n";
 import { LibraryItem } from "../types";
 
 const checkpoint = (name: string) => {
@@ -125,7 +125,7 @@ describe("contextMenu element", () => {
       "bringToFront",
       "duplicateSelection",
       "hyperlink",
-      "toggleLock",
+      "toggleElementLock",
     ];
 
     expect(contextMenu).not.toBeNull();
@@ -207,12 +207,14 @@ describe("contextMenu element", () => {
       "deleteSelectedElements",
       "group",
       "addToLibrary",
+      "flipHorizontal",
+      "flipVertical",
       "sendBackward",
       "bringForward",
       "sendToBack",
       "bringToFront",
       "duplicateSelection",
-      "toggleLock",
+      "toggleElementLock",
     ];
 
     expect(contextMenu).not.toBeNull();
@@ -258,12 +260,14 @@ describe("contextMenu element", () => {
       "deleteSelectedElements",
       "ungroup",
       "addToLibrary",
+      "flipHorizontal",
+      "flipVertical",
       "sendBackward",
       "bringForward",
       "sendToBack",
       "bringToFront",
       "duplicateSelection",
-      "toggleLock",
+      "toggleElementLock",
     ];
 
     expect(contextMenu).not.toBeNull();
@@ -287,7 +291,7 @@ describe("contextMenu element", () => {
     });
     const contextMenu = UI.queryContextMenu();
     expect(copiedStyles).toBe("{}");
-    fireEvent.click(queryByText(contextMenu as HTMLElement, "Copy styles")!);
+    fireEvent.click(queryByText(contextMenu!, "Copy styles")!);
     expect(copiedStyles).not.toBe("{}");
     const element = JSON.parse(copiedStyles)[0];
     expect(element).toEqual(API.getSelectedElement());
@@ -303,10 +307,10 @@ describe("contextMenu element", () => {
     mouse.up(20, 20);
 
     // Change some styles of second rectangle
-    UI.clickLabeledElement("Stroke");
-    UI.clickLabeledElement(t("colors.c92a2a"));
-    UI.clickLabeledElement("Background");
-    UI.clickLabeledElement(t("colors.e64980"));
+    togglePopover("Stroke");
+    UI.clickOnTestId("color-red");
+    togglePopover("Background");
+    UI.clickOnTestId("color-blue");
     // Fill style
     fireEvent.click(screen.getByTitle("Cross-hatch"));
     // Stroke width
@@ -320,15 +324,22 @@ describe("contextMenu element", () => {
       target: { value: "60" },
     });
 
+    // closing the background popover as this blocks
+    // context menu from rendering after we started focussing
+    // the popover once rendered :/
+    togglePopover("Background");
+
     mouse.reset();
+
     // Copy styles of second rectangle
     fireEvent.contextMenu(GlobalTestState.canvas, {
       button: 2,
       clientX: 40,
       clientY: 40,
     });
+
     let contextMenu = UI.queryContextMenu();
-    fireEvent.click(queryByText(contextMenu as HTMLElement, "Copy styles")!);
+    fireEvent.click(queryByText(contextMenu!, "Copy styles")!);
     const secondRect = JSON.parse(copiedStyles)[0];
     expect(secondRect.id).toBe(h.elements[1].id);
 
@@ -340,12 +351,12 @@ describe("contextMenu element", () => {
       clientY: 10,
     });
     contextMenu = UI.queryContextMenu();
-    fireEvent.click(queryByText(contextMenu as HTMLElement, "Paste styles")!);
+    fireEvent.click(queryByText(contextMenu!, "Paste styles")!);
 
     const firstRect = API.getSelectedElement();
     expect(firstRect.id).toBe(h.elements[0].id);
-    expect(firstRect.strokeColor).toBe("#c92a2a");
-    expect(firstRect.backgroundColor).toBe("#e64980");
+    expect(firstRect.strokeColor).toBe("#e03131");
+    expect(firstRect.backgroundColor).toBe("#a5d8ff");
     expect(firstRect.fillStyle).toBe("cross-hatch");
     expect(firstRect.strokeWidth).toBe(2); // Bold: 2
     expect(firstRect.strokeStyle).toBe("dotted");
@@ -364,7 +375,7 @@ describe("contextMenu element", () => {
       clientY: 1,
     });
     const contextMenu = UI.queryContextMenu();
-    fireEvent.click(queryAllByText(contextMenu as HTMLElement, "Delete")[0]);
+    fireEvent.click(queryAllByText(contextMenu!, "Delete")[0]);
     expect(API.getSelectedElements()).toHaveLength(0);
     expect(h.elements[0].isDeleted).toBe(true);
   });
@@ -380,7 +391,7 @@ describe("contextMenu element", () => {
       clientY: 1,
     });
     const contextMenu = UI.queryContextMenu();
-    fireEvent.click(queryByText(contextMenu as HTMLElement, "Add to library")!);
+    fireEvent.click(queryByText(contextMenu!, "Add to library")!);
 
     await waitFor(() => {
       const library = localStorage.getItem("excalidraw-library");
@@ -401,7 +412,7 @@ describe("contextMenu element", () => {
       clientY: 1,
     });
     const contextMenu = UI.queryContextMenu();
-    fireEvent.click(queryByText(contextMenu as HTMLElement, "Duplicate")!);
+    fireEvent.click(queryByText(contextMenu!, "Duplicate")!);
     expect(h.elements).toHaveLength(2);
     const { id: _id0, seed: _seed0, x: _x0, y: _y0, ...rect1 } = h.elements[0];
     const { id: _id1, seed: _seed1, x: _x1, y: _y1, ...rect2 } = h.elements[1];
@@ -425,7 +436,7 @@ describe("contextMenu element", () => {
     });
     const contextMenu = UI.queryContextMenu();
     const elementsBefore = h.elements;
-    fireEvent.click(queryByText(contextMenu as HTMLElement, "Send backward")!);
+    fireEvent.click(queryByText(contextMenu!, "Send backward")!);
     expect(elementsBefore[0].id).toEqual(h.elements[1].id);
     expect(elementsBefore[1].id).toEqual(h.elements[0].id);
   });
@@ -447,7 +458,7 @@ describe("contextMenu element", () => {
     });
     const contextMenu = UI.queryContextMenu();
     const elementsBefore = h.elements;
-    fireEvent.click(queryByText(contextMenu as HTMLElement, "Bring forward")!);
+    fireEvent.click(queryByText(contextMenu!, "Bring forward")!);
     expect(elementsBefore[0].id).toEqual(h.elements[1].id);
     expect(elementsBefore[1].id).toEqual(h.elements[0].id);
   });
@@ -469,7 +480,7 @@ describe("contextMenu element", () => {
     });
     const contextMenu = UI.queryContextMenu();
     const elementsBefore = h.elements;
-    fireEvent.click(queryByText(contextMenu as HTMLElement, "Send to back")!);
+    fireEvent.click(queryByText(contextMenu!, "Send to back")!);
     expect(elementsBefore[1].id).toEqual(h.elements[0].id);
   });
 
@@ -490,7 +501,7 @@ describe("contextMenu element", () => {
     });
     const contextMenu = UI.queryContextMenu();
     const elementsBefore = h.elements;
-    fireEvent.click(queryByText(contextMenu as HTMLElement, "Bring to front")!);
+    fireEvent.click(queryByText(contextMenu!, "Bring to front")!);
     expect(elementsBefore[0].id).toEqual(h.elements[1].id);
   });
 
@@ -514,9 +525,7 @@ describe("contextMenu element", () => {
       clientY: 1,
     });
     const contextMenu = UI.queryContextMenu();
-    fireEvent.click(
-      queryByText(contextMenu as HTMLElement, "Group selection")!,
-    );
+    fireEvent.click(queryByText(contextMenu!, "Group selection")!);
     const selectedGroupIds = Object.keys(h.state.selectedGroupIds);
     expect(h.elements[0].groupIds).toEqual(selectedGroupIds);
     expect(h.elements[1].groupIds).toEqual(selectedGroupIds);
@@ -548,9 +557,7 @@ describe("contextMenu element", () => {
 
     const contextMenu = UI.queryContextMenu();
     expect(contextMenu).not.toBeNull();
-    fireEvent.click(
-      queryByText(contextMenu as HTMLElement, "Ungroup selection")!,
-    );
+    fireEvent.click(queryByText(contextMenu!, "Ungroup selection")!);
 
     const selectedGroupIds = Object.keys(h.state.selectedGroupIds);
     expect(selectedGroupIds).toHaveLength(0);
diff --git a/src/tests/data/__snapshots__/restore.test.ts.snap b/src/tests/data/__snapshots__/restore.test.ts.snap
index 7e30b9d86..bb2303bc3 100644
--- a/src/tests/data/__snapshots__/restore.test.ts.snap
+++ b/src/tests/data/__snapshots__/restore.test.ts.snap
@@ -8,6 +8,7 @@ Object {
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 100,
   "id": "id-arrow01",
@@ -33,7 +34,7 @@ Object {
   "seed": Any<Number>,
   "startArrowhead": null,
   "startBinding": null,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "arrow",
@@ -52,6 +53,7 @@ Object {
   "backgroundColor": "blue",
   "boundElements": Array [],
   "fillStyle": "cross-hatch",
+  "frameId": null,
   "groupIds": Array [
     "1",
     "2",
@@ -87,6 +89,7 @@ Object {
   "backgroundColor": "blue",
   "boundElements": Array [],
   "fillStyle": "cross-hatch",
+  "frameId": null,
   "groupIds": Array [
     "1",
     "2",
@@ -122,6 +125,7 @@ Object {
   "backgroundColor": "blue",
   "boundElements": Array [],
   "fillStyle": "cross-hatch",
+  "frameId": null,
   "groupIds": Array [
     "1",
     "2",
@@ -157,6 +161,7 @@ Object {
   "backgroundColor": "transparent",
   "boundElements": Array [],
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 0,
   "id": "id-freedraw01",
@@ -173,7 +178,7 @@ Object {
   },
   "seed": Any<Number>,
   "simulatePressure": true,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "freedraw",
@@ -194,6 +199,7 @@ Object {
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 100,
   "id": "id-line01",
@@ -219,7 +225,7 @@ Object {
   "seed": Any<Number>,
   "startArrowhead": null,
   "startBinding": null,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "line",
@@ -240,6 +246,7 @@ Object {
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "hachure",
+  "frameId": null,
   "groupIds": Array [],
   "height": 100,
   "id": "id-draw01",
@@ -265,7 +272,7 @@ Object {
   "seed": Any<Number>,
   "startArrowhead": null,
   "startBinding": null,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "line",
@@ -288,6 +295,7 @@ Object {
   "fillStyle": "hachure",
   "fontFamily": 1,
   "fontSize": 14,
+  "frameId": null,
   "groupIds": Array [],
   "height": 100,
   "id": "id-text01",
@@ -302,7 +310,7 @@ Object {
     "type": 3,
   },
   "seed": Any<Number>,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "text": "text",
@@ -328,6 +336,7 @@ Object {
   "fillStyle": "hachure",
   "fontFamily": 1,
   "fontSize": 10,
+  "frameId": null,
   "groupIds": Array [],
   "height": 100,
   "id": "id-text01",
@@ -342,7 +351,7 @@ Object {
     "type": 3,
   },
   "seed": Any<Number>,
-  "strokeColor": "#000000",
+  "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "text": "",
diff --git a/src/tests/data/restore.test.ts b/src/tests/data/restore.test.ts
index afd5ef918..aaa2f087a 100644
--- a/src/tests/data/restore.test.ts
+++ b/src/tests/data/restore.test.ts
@@ -10,7 +10,7 @@ import { API } from "../helpers/api";
 import { getDefaultAppState } from "../../appState";
 import { ImportedDataState } from "../../data/types";
 import { NormalizedZoomValue } from "../../types";
-import { FONT_FAMILY, ROUNDNESS } from "../../constants";
+import { DEFAULT_SIDEBAR, FONT_FAMILY, ROUNDNESS } from "../../constants";
 import { newElementWith } from "../../element/mutateElement";
 
 describe("restoreElements", () => {
@@ -453,6 +453,29 @@ describe("restoreAppState", () => {
       expect(restoredAppState.zoom).toMatchObject(getDefaultAppState().zoom);
     });
   });
+
+  it("should handle appState.openSidebar legacy values", () => {
+    expect(restore.restoreAppState({}, null).openSidebar).toBe(null);
+    expect(
+      restore.restoreAppState({ openSidebar: "library" } as any, null)
+        .openSidebar,
+    ).toEqual({ name: DEFAULT_SIDEBAR.name });
+    expect(
+      restore.restoreAppState({ openSidebar: "xxx" } as any, null).openSidebar,
+    ).toEqual({ name: DEFAULT_SIDEBAR.name });
+    // while "library" was our legacy sidebar name, we can't assume it's legacy
+    // value as it may be some host app's custom sidebar name ¯\_(ツ)_/¯
+    expect(
+      restore.restoreAppState({ openSidebar: { name: "library" } } as any, null)
+        .openSidebar,
+    ).toEqual({ name: "library" });
+    expect(
+      restore.restoreAppState(
+        { openSidebar: { name: DEFAULT_SIDEBAR.name, tab: "ola" } } as any,
+        null,
+      ).openSidebar,
+    ).toEqual({ name: DEFAULT_SIDEBAR.name, tab: "ola" });
+  });
 });
 
 describe("restore", () => {
diff --git a/src/tests/elementLocking.test.tsx b/src/tests/elementLocking.test.tsx
index 9cf0968d4..a2f6eb11d 100644
--- a/src/tests/elementLocking.test.tsx
+++ b/src/tests/elementLocking.test.tsx
@@ -152,7 +152,7 @@ describe("element locking", () => {
     expect(contextMenu).not.toBeNull();
     expect(
       contextMenu?.querySelector(
-        `li[data-testid="toggleLock"] .context-menu-item__label`,
+        `li[data-testid="toggleElementLock"] .context-menu-item__label`,
       ),
     ).toHaveTextContent(t("labels.elementLock.unlock"));
   });
diff --git a/src/tests/fitToContent.test.tsx b/src/tests/fitToContent.test.tsx
index 6fce7cdcd..fd7a1170b 100644
--- a/src/tests/fitToContent.test.tsx
+++ b/src/tests/fitToContent.test.tsx
@@ -160,19 +160,6 @@ describe("fitToContent animated", () => {
 
     expect(window.requestAnimationFrame).toHaveBeenCalled();
 
-    // Since this is an animation, we expect values to change through time.
-    // We'll verify that the zoom/scroll values change in each animation frame
-
-    // zoom is not animated, it should be set to its final value, which in our
-    // case zooms out to 50% so that th element is fully visible (it's 2x large
-    // as the canvas)
-    expect(h.state.zoom.value).toBeLessThanOrEqual(0.5);
-
-    // FIXME I think this should be [-100, -100] so we may have a bug in our zoom
-    // hadnling, alas
-    expect(h.state.scrollX).toBe(25);
-    expect(h.state.scrollY).toBe(25);
-
     await waitForNextAnimationFrame();
 
     const prevScrollX = h.state.scrollX;
diff --git a/src/tests/fixtures/elementFixture.ts b/src/tests/fixtures/elementFixture.ts
index e9db64891..fb4d559fe 100644
--- a/src/tests/fixtures/elementFixture.ts
+++ b/src/tests/fixtures/elementFixture.ts
@@ -15,6 +15,7 @@ const elementBase: Omit<ExcalidrawElement, "type"> = {
   roughness: 1,
   opacity: 100,
   groupIds: [],
+  frameId: null,
   roundness: null,
   seed: 1041657908,
   version: 120,
diff --git a/src/tests/flip.test.tsx b/src/tests/flip.test.tsx
index 45a5e1477..c90c07834 100644
--- a/src/tests/flip.test.tsx
+++ b/src/tests/flip.test.tsx
@@ -1,5 +1,10 @@
 import ReactDOM from "react-dom";
-import { GlobalTestState, render, waitFor } from "./test-utils";
+import {
+  createPasteEvent,
+  GlobalTestState,
+  render,
+  waitFor,
+} from "./test-utils";
 import { UI, Pointer } from "./helpers/ui";
 import { API } from "./helpers/api";
 import { actionFlipHorizontal, actionFlipVertical } from "../actions";
@@ -190,10 +195,8 @@ const checkElementsBoundingBox = async (
   debugger;
   await waitFor(() => {
     // Check if width and height did not change
-    expect(x1 - toleranceInPx <= x12 && x12 <= x1 + toleranceInPx).toBeTruthy();
-    expect(y1 - toleranceInPx <= y12 && y12 <= y1 + toleranceInPx).toBeTruthy();
-    expect(x2 - toleranceInPx <= x22 && x22 <= x2 + toleranceInPx).toBeTruthy();
-    expect(y2 - toleranceInPx <= y22 && y22 <= y2 + toleranceInPx).toBeTruthy();
+    expect(x2 - x1).toBeCloseTo(x22 - x12, -1);
+    expect(y2 - y1).toBeCloseTo(y22 - y12, -1);
   });
 };
 
@@ -211,14 +214,22 @@ const checkTwoPointsLineHorizontalFlip = async () => {
   h.app.actionManager.executeAction(actionFlipHorizontal);
   const newElement = h.elements[0] as ExcalidrawLinearElement;
   await waitFor(() => {
-    expect(originalElement.points[0][0]).toEqual(
-      newElement.points[0][0] !== 0 ? -newElement.points[0][0] : 0,
+    expect(originalElement.points[0][0]).toBeCloseTo(
+      -newElement.points[0][0],
+      5,
     );
-    expect(originalElement.points[0][1]).toEqual(newElement.points[0][1]);
-    expect(originalElement.points[1][0]).toEqual(
-      newElement.points[1][0] !== 0 ? -newElement.points[1][0] : 0,
+    expect(originalElement.points[0][1]).toBeCloseTo(
+      newElement.points[0][1],
+      5,
+    );
+    expect(originalElement.points[1][0]).toBeCloseTo(
+      -newElement.points[1][0],
+      5,
+    );
+    expect(originalElement.points[1][1]).toBeCloseTo(
+      newElement.points[1][1],
+      5,
     );
-    expect(originalElement.points[1][1]).toEqual(newElement.points[1][1]);
   });
 };
 
@@ -229,14 +240,22 @@ const checkTwoPointsLineVerticalFlip = async () => {
   h.app.actionManager.executeAction(actionFlipVertical);
   const newElement = h.elements[0] as ExcalidrawLinearElement;
   await waitFor(() => {
-    expect(originalElement.points[0][0]).toEqual(
-      newElement.points[0][0] !== 0 ? -newElement.points[0][0] : 0,
+    expect(originalElement.points[0][0]).toBeCloseTo(
+      newElement.points[0][0],
+      5,
     );
-    expect(originalElement.points[0][1]).toEqual(newElement.points[0][1]);
-    expect(originalElement.points[1][0]).toEqual(
-      newElement.points[1][0] !== 0 ? -newElement.points[1][0] : 0,
+    expect(originalElement.points[0][1]).toBeCloseTo(
+      -newElement.points[0][1],
+      5,
+    );
+    expect(originalElement.points[1][0]).toBeCloseTo(
+      newElement.points[1][0],
+      5,
+    );
+    expect(originalElement.points[1][1]).toBeCloseTo(
+      -newElement.points[1][1],
+      5,
     );
-    expect(originalElement.points[1][1]).toEqual(newElement.points[1][1]);
   });
 };
 
@@ -313,7 +332,7 @@ describe("rectangle", () => {
 
   it("flips a rotated rectangle vertically correctly", async () => {
     const originalAngle = (3 * Math.PI) / 4;
-    const expectedAgnle = Math.PI / 4;
+    const expectedAgnle = (5 * Math.PI) / 4;
 
     createAndSelectOneRectangle(originalAngle);
 
@@ -346,7 +365,7 @@ describe("diamond", () => {
 
   it("flips a rotated diamond vertically correctly", async () => {
     const originalAngle = (5 * Math.PI) / 4;
-    const expectedAngle = (7 * Math.PI) / 4;
+    const expectedAngle = (3 * Math.PI) / 4;
 
     createAndSelectOneDiamond(originalAngle);
 
@@ -379,7 +398,7 @@ describe("ellipse", () => {
 
   it("flips a rotated ellipse vertically correctly", async () => {
     const originalAngle = (7 * Math.PI) / 4;
-    const expectedAngle = (5 * Math.PI) / 4;
+    const expectedAngle = Math.PI / 4;
 
     createAndSelectOneEllipse(originalAngle);
 
@@ -411,7 +430,10 @@ describe("arrow", () => {
     const expectedAngle = (7 * Math.PI) / 4;
     const line = createLinearElementWithCurveInsideMinMaxPoints("arrow");
     h.app.scene.replaceAllElements([line]);
-    h.app.state.selectedElementIds[line.id] = true;
+    h.state.selectedElementIds = {
+      ...h.state.selectedElementIds,
+      [line.id]: true,
+    };
     mutateElement(line, {
       angle: originalAngle,
     });
@@ -424,10 +446,13 @@ describe("arrow", () => {
 
   it("flips a rotated arrow vertically with line inside min/max points bounds", async () => {
     const originalAngle = Math.PI / 4;
-    const expectedAngle = (3 * Math.PI) / 4;
+    const expectedAngle = (7 * Math.PI) / 4;
     const line = createLinearElementWithCurveInsideMinMaxPoints("arrow");
     h.app.scene.replaceAllElements([line]);
-    h.app.state.selectedElementIds[line.id] = true;
+    h.state.selectedElementIds = {
+      ...h.state.selectedElementIds,
+      [line.id]: true,
+    };
     mutateElement(line, {
       angle: originalAngle,
     });
@@ -476,7 +501,7 @@ describe("arrow", () => {
   //TODO: elements with curve outside minMax points have a wrong bounding box!!!
   it.skip("flips a rotated arrow vertically with line outside min/max points bounds", async () => {
     const originalAngle = Math.PI / 4;
-    const expectedAngle = (3 * Math.PI) / 4;
+    const expectedAngle = (7 * Math.PI) / 4;
     const line = createLinearElementsWithCurveOutsideMinMaxPoints("arrow");
     mutateElement(line, { angle: originalAngle });
     h.app.scene.replaceAllElements([line]);
@@ -507,7 +532,6 @@ describe("arrow", () => {
 
   it("flips a two points arrow vertically correctly", async () => {
     createAndSelectOneArrow();
-
     await checkTwoPointsLineVerticalFlip();
   });
 });
@@ -576,7 +600,7 @@ describe("line", () => {
   //TODO: elements with curve outside minMax points have a wrong bounding box
   it.skip("flips a rotated line vertically with line outside min/max points bounds", async () => {
     const originalAngle = Math.PI / 4;
-    const expectedAngle = (3 * Math.PI) / 4;
+    const expectedAngle = (7 * Math.PI) / 4;
     const line = createLinearElementsWithCurveOutsideMinMaxPoints("line");
     mutateElement(line, { angle: originalAngle });
     h.app.scene.replaceAllElements([line]);
@@ -598,7 +622,10 @@ describe("line", () => {
     const expectedAngle = (7 * Math.PI) / 4;
     const line = createLinearElementWithCurveInsideMinMaxPoints("line");
     h.app.scene.replaceAllElements([line]);
-    h.app.state.selectedElementIds[line.id] = true;
+    h.state.selectedElementIds = {
+      ...h.state.selectedElementIds,
+      [line.id]: true,
+    };
     mutateElement(line, {
       angle: originalAngle,
     });
@@ -611,10 +638,13 @@ describe("line", () => {
 
   it("flips a rotated line vertically with line inside min/max points bounds", async () => {
     const originalAngle = Math.PI / 4;
-    const expectedAngle = (3 * Math.PI) / 4;
+    const expectedAngle = (7 * Math.PI) / 4;
     const line = createLinearElementWithCurveInsideMinMaxPoints("line");
     h.app.scene.replaceAllElements([line]);
-    h.app.state.selectedElementIds[line.id] = true;
+    h.state.selectedElementIds = {
+      ...h.state.selectedElementIds,
+      [line.id]: true,
+    };
     mutateElement(line, {
       angle: originalAngle,
     });
@@ -641,14 +671,20 @@ describe("freedraw", () => {
   it("flips an unrotated drawing horizontally correctly", async () => {
     const draw = createAndReturnOneDraw();
     // select draw, since not done automatically
-    h.state.selectedElementIds[draw.id] = true;
+    h.state.selectedElementIds = {
+      ...h.state.selectedElementIds,
+      [draw.id]: true,
+    };
     await checkHorizontalFlip();
   });
 
   it("flips an unrotated drawing vertically correctly", async () => {
     const draw = createAndReturnOneDraw();
     // select draw, since not done automatically
-    h.state.selectedElementIds[draw.id] = true;
+    h.state.selectedElementIds = {
+      ...h.state.selectedElementIds,
+      [draw.id]: true,
+    };
     await checkVerticalFlip();
   });
 
@@ -658,18 +694,24 @@ describe("freedraw", () => {
 
     const draw = createAndReturnOneDraw(originalAngle);
     // select draw, since not done automatically
-    h.state.selectedElementIds[draw.id] = true;
+    h.state.selectedElementIds = {
+      ...h.state.selectedElementIds,
+      [draw.id]: true,
+    };
 
     await checkRotatedHorizontalFlip(expectedAngle);
   });
 
   it("flips a rotated drawing vertically correctly", async () => {
     const originalAngle = Math.PI / 4;
-    const expectedAngle = (3 * Math.PI) / 4;
+    const expectedAngle = (7 * Math.PI) / 4;
 
     const draw = createAndReturnOneDraw(originalAngle);
     // select draw, since not done automatically
-    h.state.selectedElementIds[draw.id] = true;
+    h.state.selectedElementIds = {
+      ...h.state.selectedElementIds,
+      [draw.id]: true,
+    };
 
     await checkRotatedVerticalFlip(expectedAngle);
   });
@@ -680,19 +722,7 @@ describe("freedraw", () => {
 describe("image", () => {
   const createImage = async () => {
     const sendPasteEvent = (file?: File) => {
-      const clipboardEvent = new Event("paste", {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-      });
-
-      // set `clipboardData` properties.
-      // @ts-ignore
-      clipboardEvent.clipboardData = {
-        getData: () => window.navigator.clipboard.readText(),
-        files: [file],
-      };
-
+      const clipboardEvent = createPasteEvent("", file ? [file] : []);
       document.dispatchEvent(clipboardEvent);
     };
 
@@ -725,8 +755,8 @@ describe("image", () => {
     });
 
     await checkVerticalFlip();
-    expect((h.elements[0] as ExcalidrawImageElement).scale).toEqual([-1, 1]);
-    expect(h.elements[0].angle).toBeCloseTo(Math.PI);
+    expect((h.elements[0] as ExcalidrawImageElement).scale).toEqual([1, -1]);
+    expect(h.elements[0].angle).toBeCloseTo(0);
   });
 
   it("flips an rotated image horizontally correctly", async () => {
@@ -749,7 +779,7 @@ describe("image", () => {
 
   it("flips an rotated image vertically correctly", async () => {
     const originalAngle = Math.PI / 4;
-    const expectedAngle = (3 * Math.PI) / 4;
+    const expectedAngle = (7 * Math.PI) / 4;
     //paste image
     await createImage();
     await waitFor(() => {
@@ -764,7 +794,7 @@ describe("image", () => {
     });
 
     await checkRotatedVerticalFlip(expectedAngle);
-    expect((h.elements[0] as ExcalidrawImageElement).scale).toEqual([-1, 1]);
+    expect((h.elements[0] as ExcalidrawImageElement).scale).toEqual([1, -1]);
     expect(h.elements[0].angle).toBeCloseTo(expectedAngle);
   });
 
@@ -779,7 +809,7 @@ describe("image", () => {
     });
 
     await checkVerticalHorizontalFlip();
-    expect((h.elements[0] as ExcalidrawImageElement).scale).toEqual([1, 1]);
-    expect(h.elements[0].angle).toBeCloseTo(Math.PI);
+    expect((h.elements[0] as ExcalidrawImageElement).scale).toEqual([-1, -1]);
+    expect(h.elements[0].angle).toBeCloseTo(0);
   });
 });
diff --git a/src/tests/helpers/api.ts b/src/tests/helpers/api.ts
index 705180d6a..7bba8bdd3 100644
--- a/src/tests/helpers/api.ts
+++ b/src/tests/helpers/api.ts
@@ -37,8 +37,12 @@ export class API {
 
   static getSelectedElements = (
     includeBoundTextElement: boolean = false,
+    includeElementsInFrames: boolean = false,
   ): ExcalidrawElement[] => {
-    return getSelectedElements(h.elements, h.state, includeBoundTextElement);
+    return getSelectedElements(h.elements, h.state, {
+      includeBoundTextElement,
+      includeElementsInFrames,
+    });
   };
 
   static getSelectedElement = (): ExcalidrawElement => {
@@ -141,6 +145,7 @@ export class API {
       | "versionNonce"
       | "isDeleted"
       | "groupIds"
+      | "frameId"
       | "link"
       | "updated"
     > = {
diff --git a/src/tests/helpers/ui.ts b/src/tests/helpers/ui.ts
index 1cfdb10a1..c88201133 100644
--- a/src/tests/helpers/ui.ts
+++ b/src/tests/helpers/ui.ts
@@ -237,6 +237,15 @@ export class UI {
     fireEvent.click(element);
   };
 
+  static clickOnTestId = (testId: string) => {
+    const element = document.querySelector(`[data-testid='${testId}']`);
+    // const element = GlobalTestState.renderResult.queryByTestId(testId);
+    if (!element) {
+      throw new Error(`No element with testid "${testId}" found`);
+    }
+    fireEvent.click(element);
+  };
+
   /**
    * Creates an Excalidraw element, and returns a proxy that wraps it so that
    * accessing props will return the latest ones from the object existing in
@@ -321,6 +330,6 @@ export class UI {
   static queryContextMenu = () => {
     return GlobalTestState.renderResult.container.querySelector(
       ".context-menu",
-    );
+    ) as HTMLElement | null;
   };
 }
diff --git a/src/tests/library.test.tsx b/src/tests/library.test.tsx
index 86847aeee..2a2886354 100644
--- a/src/tests/library.test.tsx
+++ b/src/tests/library.test.tsx
@@ -189,10 +189,15 @@ describe("library menu", () => {
     const latestLibrary = await h.app.library.getLatestLibrary();
     expect(latestLibrary.length).toBe(0);
 
-    const libraryButton = container.querySelector(".library-button");
+    const libraryButton = container.querySelector(".sidebar-trigger");
 
     fireEvent.click(libraryButton!);
-    fireEvent.click(container.querySelector(".Sidebar__dropdown-btn")!);
+    fireEvent.click(
+      queryByTestId(
+        container.querySelector(".layer-ui__library")!,
+        "dropdown-menu-button",
+      )!,
+    );
     queryByTestId(container, "lib-dropdown--load")!.click();
 
     const libraryItems = parseLibraryJSON(await libraryJSONPromise);
diff --git a/src/tests/linearElementEditor.test.tsx b/src/tests/linearElementEditor.test.tsx
index 15fd105ec..c71283a4c 100644
--- a/src/tests/linearElementEditor.test.tsx
+++ b/src/tests/linearElementEditor.test.tsx
@@ -20,7 +20,7 @@ import { resize, rotate } from "./utils";
 import {
   getBoundTextElementPosition,
   wrapText,
-  getMaxContainerWidth,
+  getBoundTextMaxWidth,
 } from "../element/textElement";
 import * as textElementUtils from "../element/textElement";
 import { ROUNDNESS, VERTICAL_ALIGN } from "../constants";
@@ -729,7 +729,7 @@ describe("Test Linear Elements", () => {
         type: "text",
         x: 0,
         y: 0,
-        text: wrapText(text, font, getMaxContainerWidth(container)),
+        text: wrapText(text, font, getBoundTextMaxWidth(container)),
         containerId: container.id,
         width: 30,
         height: 20,
@@ -1149,7 +1149,7 @@ describe("Test Linear Elements", () => {
       expect(rect.x).toBe(400);
       expect(rect.y).toBe(0);
       expect(
-        wrapText(textElement.originalText, font, getMaxContainerWidth(arrow)),
+        wrapText(textElement.originalText, font, getBoundTextMaxWidth(arrow)),
       ).toMatchInlineSnapshot(`
         "Online whiteboard collaboration
         made easy"
@@ -1172,7 +1172,7 @@ describe("Test Linear Elements", () => {
         false,
       );
       expect(
-        wrapText(textElement.originalText, font, getMaxContainerWidth(arrow)),
+        wrapText(textElement.originalText, font, getBoundTextMaxWidth(arrow)),
       ).toMatchInlineSnapshot(`
         "Online whiteboard 
         collaboration made 
diff --git a/src/tests/packages/__snapshots__/excalidraw.test.tsx.snap b/src/tests/packages/__snapshots__/excalidraw.test.tsx.snap
index 09402981e..4caa6c6dd 100644
--- a/src/tests/packages/__snapshots__/excalidraw.test.tsx.snap
+++ b/src/tests/packages/__snapshots__/excalidraw.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`<Excalidraw/> <MainMenu/> should render main menu with host menu items
 >
   <div
     class="Island dropdown-menu-container"
-    style="--padding: 2; z-index: 1;"
+    style="--padding: 2; z-index: 2;"
   >
     <button
       class="dropdown-menu-item dropdown-menu-item-base"
@@ -43,7 +43,6 @@ exports[`<Excalidraw/> <MainMenu/> should render main menu with host menu items
       <button
         style="height: 2rem;"
       >
-         
         custom menu item
       </button>
     </div>
@@ -116,7 +115,7 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should render menu
 >
   <div
     class="Island dropdown-menu-container"
-    style="--padding: 2; z-index: 1;"
+    style="--padding: 2; z-index: 2;"
   >
     <button
       aria-label="Open"
@@ -524,38 +523,84 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should render menu
       <div
         style="padding: 0px 0.625rem;"
       >
-        <div
-          style="position: relative;"
-        >
-          <div>
+        <div>
+          <div
+            aria-modal="true"
+            class="color-picker-container"
+            role="dialog"
+          >
             <div
-              class="color-picker-control-container"
+              class="color-picker__top-picks"
             >
-              <div
-                class="color-picker-label-swatch-container"
-              >
-                <button
-                  aria-label="Canvas background"
-                  class="color-picker-label-swatch"
-                  style="--swatch-color: #ffffff;"
-                />
-              </div>
-              <label
-                class="color-input-container"
+              <button
+                class="color-picker__button active"
+                style="--swatch-color: #ffffff;"
+                title="#ffffff"
+                type="button"
               >
                 <div
-                  class="color-picker-hash"
-                >
-                  #
-                </div>
-                <input
-                  aria-label="Canvas background"
-                  class="color-picker-input"
-                  spellcheck="false"
-                  value="ffffff"
+                  class="color-picker__button-outline"
                 />
-              </label>
+              </button>
+              <button
+                class="color-picker__button"
+                style="--swatch-color: #f8f9fa;"
+                title="#f8f9fa"
+                type="button"
+              >
+                <div
+                  class="color-picker__button-outline"
+                />
+              </button>
+              <button
+                class="color-picker__button"
+                style="--swatch-color: #f5faff;"
+                title="#f5faff"
+                type="button"
+              >
+                <div
+                  class="color-picker__button-outline"
+                />
+              </button>
+              <button
+                class="color-picker__button"
+                style="--swatch-color: #fffce8;"
+                title="#fffce8"
+                type="button"
+              >
+                <div
+                  class="color-picker__button-outline"
+                />
+              </button>
+              <button
+                class="color-picker__button"
+                style="--swatch-color: #fdf8f6;"
+                title="#fdf8f6"
+                type="button"
+              >
+                <div
+                  class="color-picker__button-outline"
+                />
+              </button>
             </div>
+            <div
+              style="width: 1px; height: 100%; margin: 0px auto;"
+            />
+            <button
+              aria-controls="radix-:r0:"
+              aria-expanded="false"
+              aria-haspopup="dialog"
+              aria-label="Canvas background"
+              class="color-picker__button active-color"
+              data-state="closed"
+              style="--swatch-color: #ffffff;"
+              title="Show background color picker"
+              type="button"
+            >
+              <div
+                class="color-picker__button-outline"
+              />
+            </button>
           </div>
         </div>
       </div>
diff --git a/src/tests/packages/__snapshots__/utils.test.ts.snap b/src/tests/packages/__snapshots__/utils.test.ts.snap
index b1002a406..34085498f 100644
--- a/src/tests/packages/__snapshots__/utils.test.ts.snap
+++ b/src/tests/packages/__snapshots__/utils.test.ts.snap
@@ -20,15 +20,18 @@ Object {
   "currentItemRoughness": 1,
   "currentItemRoundness": "round",
   "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#000000",
+  "currentItemStrokeColor": "#1e1e1e",
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
   "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
+  "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
+  "elementsToHighlight": null,
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
@@ -36,12 +39,18 @@ Object {
   "exportScale": 1,
   "exportWithDarkMode": false,
   "fileHandle": null,
+  "frameRendering": Object {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
   "gridSize": null,
   "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "isSidebarDocked": false,
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "name",
@@ -62,6 +71,7 @@ Object {
   "scrollY": 0,
   "scrolledOutside": false,
   "selectedElementIds": Object {},
+  "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": Object {},
   "selectedLinearElement": null,
   "selectionElement": null,
diff --git a/src/tests/packages/excalidraw.test.tsx b/src/tests/packages/excalidraw.test.tsx
index a0d495936..91fd9c09f 100644
--- a/src/tests/packages/excalidraw.test.tsx
+++ b/src/tests/packages/excalidraw.test.tsx
@@ -220,7 +220,6 @@ describe("<Excalidraw/>", () => {
                   style={{ height: "2rem" }}
                   onClick={() => window.alert("custom menu item")}
                 >
-                  {" "}
                   custom item
                 </button>
               </MainMenu.ItemCustom>
@@ -291,7 +290,7 @@ describe("<Excalidraw/>", () => {
       toggleMenu(container);
       fireEvent.click(queryByTestId(container, "image-export-button")!);
       const textInput: HTMLInputElement | null = document.querySelector(
-        ".ExportDialog .ProjectName .TextInput",
+        ".ImageExportModal .ImageExportModal__preview__filename .TextInput",
       );
       expect(textInput?.value).toContain(`${t("labels.untitled")}`);
       expect(textInput?.nodeName).toBe("INPUT");
@@ -304,10 +303,11 @@ describe("<Excalidraw/>", () => {
       toggleMenu(container);
       await fireEvent.click(queryByTestId(container, "image-export-button")!);
       const textInput = document.querySelector(
-        ".ExportDialog .ProjectName .TextInput--readonly",
-      );
-      expect(textInput?.textContent).toEqual(name);
-      expect(textInput?.nodeName).toBe("SPAN");
+        ".ImageExportModal .ImageExportModal__preview__filename .TextInput",
+      ) as HTMLInputElement;
+      expect(textInput?.value).toEqual(name);
+      expect(textInput?.nodeName).toBe("INPUT");
+      expect(textInput?.disabled).toBe(true);
     });
   });
 
@@ -345,7 +345,6 @@ describe("<Excalidraw/>", () => {
                 style={{ height: "2rem" }}
                 onClick={() => window.alert("custom menu item")}
               >
-                {" "}
                 custom menu item
               </button>
             </MainMenu.ItemCustom>
diff --git a/src/tests/queries/toolQueries.ts b/src/tests/queries/toolQueries.ts
index bc1e4928d..c20e0d309 100644
--- a/src/tests/queries/toolQueries.ts
+++ b/src/tests/queries/toolQueries.ts
@@ -11,6 +11,7 @@ const toolMap = {
   freedraw: "freedraw",
   text: "text",
   eraser: "eraser",
+  frame: "frame",
 };
 
 export type ToolName = keyof typeof toolMap;
diff --git a/src/tests/regressionTests.test.tsx b/src/tests/regressionTests.test.tsx
index 07a6a449f..2b9094888 100644
--- a/src/tests/regressionTests.test.tsx
+++ b/src/tests/regressionTests.test.tsx
@@ -12,11 +12,11 @@ import {
   fireEvent,
   render,
   screen,
+  togglePopover,
   waitFor,
 } from "./test-utils";
 import { defaultLang } from "../i18n";
 import { FONT_FAMILY } from "../constants";
-import { t } from "../i18n";
 
 const { h } = window;
 
@@ -42,7 +42,6 @@ const checkpoint = (name: string) => {
     expect(element).toMatchSnapshot(`[${name}] element ${i}`),
   );
 };
-
 beforeEach(async () => {
   // Unmount ReactDOM from root
   ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
@@ -159,13 +158,14 @@ describe("regression tests", () => {
     UI.clickTool("rectangle");
     mouse.down(10, 10);
     mouse.up(10, 10);
+    togglePopover("Background");
+    UI.clickOnTestId("color-yellow");
+    UI.clickOnTestId("color-red");
 
-    UI.clickLabeledElement("Background");
-    UI.clickLabeledElement(t("colors.fa5252"));
-    UI.clickLabeledElement("Stroke");
-    UI.clickLabeledElement(t("colors.5f3dc4"));
-    expect(API.getSelectedElement().backgroundColor).toBe("#fa5252");
-    expect(API.getSelectedElement().strokeColor).toBe("#5f3dc4");
+    togglePopover("Stroke");
+    UI.clickOnTestId("color-blue");
+    expect(API.getSelectedElement().backgroundColor).toBe("#ffc9c9");
+    expect(API.getSelectedElement().strokeColor).toBe("#1971c2");
   });
 
   it("click on an element and drag it", () => {
@@ -542,7 +542,7 @@ describe("regression tests", () => {
       expect(element.groupIds.length).toBe(1);
     }
 
-    mouse.reset();
+    mouse.moveTo(-10, -10); // the NW resizing handle is at [0, 0], so moving further
     mouse.down();
     mouse.restorePosition(...end);
     mouse.up();
@@ -988,8 +988,8 @@ describe("regression tests", () => {
       UI.clickTool("rectangle");
       // change background color since default is transparent
       // and transparent elements can't be selected by clicking inside of them
-      UI.clickLabeledElement("Background");
-      UI.clickLabeledElement(t("colors.fa5252"));
+      togglePopover("Background");
+      UI.clickOnTestId("color-red");
       mouse.down();
       mouse.up(1000, 1000);
 
@@ -1088,15 +1088,14 @@ describe("regression tests", () => {
     assertSelectedElements(rect3);
   });
 
-  it("should show fill icons when element has non transparent background", () => {
+  it("should show fill icons when element has non transparent background", async () => {
     UI.clickTool("rectangle");
     expect(screen.queryByText(/fill/i)).not.toBeNull();
     mouse.down();
     mouse.up(10, 10);
     expect(screen.queryByText(/fill/i)).toBeNull();
-
-    UI.clickLabeledElement("Background");
-    UI.clickLabeledElement(t("colors.fa5252"));
+    togglePopover("Background");
+    UI.clickOnTestId("color-red");
     // select rectangle
     mouse.reset();
     mouse.click();
diff --git a/src/tests/scene/__snapshots__/export.test.ts.snap b/src/tests/scene/__snapshots__/export.test.ts.snap
index 8015ebc4c..9f706ca01 100644
--- a/src/tests/scene/__snapshots__/export.test.ts.snap
+++ b/src/tests/scene/__snapshots__/export.test.ts.snap
@@ -32,6 +32,7 @@ exports[`exportToSvg with default arguments 1`] = `
     
     </style>
     
+    
   
   </defs>
   
@@ -88,6 +89,7 @@ exports[`exportToSvg with elements that have a link 1`] = `
         src: url(\\"https://excalidraw.com/Cascadia.woff2\\");
       }
     </style>
+    
   </defs>
   <a href=\\"excalidraw.com\\"><g stroke-linecap=\\"round\\" transform=\\"translate(10 10) rotate(0 107 107)\\"><path d=\\"M0 0 C0 0, 0 0, 0 0 M0 0 C0 0, 0 0, 0 0 M-0.81 6.83 C1.42 4.82, 3.76 1.52, 5.21 0.19 M-0.15 6.66 C1.8 4.06, 3.47 2.78, 5.22 0.73 M-0.29 10.96 C2.44 8.61, 6.86 4.4, 10.93 -0.91 M0.52 11.4 C3.45 8.64, 6.67 5.66, 10.55 0.52 M-0.73 16.51 C7.35 10.86, 13.5 3, 17.44 0.95 M0.2 18.45 C5.73 11.79, 11.18 5.08, 16.02 -0.18 M0.75 25.53 C5.82 17, 10.04 11.07, 20.53 0.11 M0.63 24.62 C6.15 16.7, 12.35 9.33, 21.67 -0.92 M-0.46 31.29 C10.67 19.56, 20.95 6.14, 26.3 0.97 M0.19 30.33 C6.15 22.94, 12.8 16.86, 26.48 0.56 M0.06 38.68 C9.21 29.05, 14.84 21.35, 32.64 0.53 M0.13 37.62 C11.7 22.94, 22.8 8.94, 31.86 0.17 M1.97 42.03 C14.26 29.52, 23.97 12.83, 36.26 1.93 M0.5 42.42 C7.49 34.15, 14.87 25.57, 36.32 -0.12 M-1.55 47.05 C9.52 36.22, 20.47 27.66, 42.25 0.23 M0.07 48.87 C15.17 30.66, 32.72 11.39, 42.55 -0.3 M1 53.34 C15.85 39.16, 30.2 22.36, 47.03 0.12 M0.83 54.24 C13.32 41.61, 24.32 26.03, 48.09 -0.05 M-1.51 60.18 C18.44 42.68, 33.89 21.16, 51.91 1.7 M0.58 61.04 C19.82 38.42, 41.63 15.34, 52.4 -0.74 M-2 68.97 C17.08 50.31, 33.78 31.07, 58 -1.79 M-0.57 67.89 C12.79 53.01, 23.57 38.56, 57.54 0.78 M-0.94 73.26 C17.3 51.99, 37.15 29.16, 63.79 1.79 M-0.34 73.88 C13.12 57.81, 25.23 44.29, 63.24 0.24 M-0.02 80.75 C25.47 53.17, 50.04 23.22, 68.13 1.24 M-0.31 79 C13.15 62.83, 27.89 46.91, 69.58 0.16 M-1.36 83.81 C22.43 62.66, 42.64 36.29, 75.7 -0.26 M0.49 84.94 C20.19 61.39, 38.84 39.35, 74.08 -0.14 M-0.44 93.19 C29.84 56.59, 58.57 21.34, 80.05 0.63 M0.23 91.29 C16.75 73.26, 34.07 51.65, 80.34 -0.29 M-1.32 96.52 C29.7 64.08, 56.68 31.83, 85.06 1.15 M-1.23 98.35 C28.8 63.78, 59.61 29.8, 85.15 -0.85 M1.68 104.37 C24.69 72.49, 52 43.21, 91.99 -1.81 M-0.48 103.54 C31.96 64.64, 64.99 27.22, 89.13 0.87 M-1.77 108.18 C36.54 67.37, 72.5 22.54, 96.92 -1.99 M-0.63 109.78 C22.47 82.36, 45.16 56.53, 95.84 -1.07 M-1.12 114.79 C38.49 70.57, 74.74 30, 101.81 -1.93 M1.19 116.33 C38.03 73.29, 76.06 29.97, 100.42 0.88 M2 120.2 C36.47 78.86, 73.59 37.62, 107.95 0.68 M0.39 120.97 C29.7 88.16, 58.99 53.35, 106.73 -0.13 M-1.32 128.06 C41.12 75.45, 86.81 26, 110.99 -1.18 M-0.57 128.82 C35.82 86.5, 72.74 44.1, 111.91 0.79 M-1.02 135.64 C43.91 82.98, 87.98 32.05, 117.79 -1.37 M-0.27 134.74 C26.27 106.76, 50.22 76.9, 116.93 1.16 M-1.8 139.9 C35.21 104.38, 65.53 62.78, 120.66 1.37 M-0.43 139.71 C38.55 95.61, 78.01 50.56, 122.46 -0.53 M1.76 147.91 C29.11 117.4, 55.37 85.99, 127.68 1.48 M0.53 145.69 C46.44 94.62, 91.7 39.92, 126.74 -0.41 M0.17 150.85 C33.17 115.83, 61.4 80.26, 131.64 0.9 M0.15 151.84 C53.25 90.23, 106.14 30.74, 132.16 -0.36 M-1.84 157.7 C37.59 114.01, 76.78 70.61, 136.63 -0.45 M0.35 158.99 C30.36 122.85, 60.89 88, 137.61 0.03 M-0.23 166.11 C29.43 128.1, 58.73 93.84, 143.89 -0.53 M-0.32 164.8 C28.62 130.08, 57.48 96.97, 144 -0.28 M0.58 169.48 C50.77 111.65, 102.4 55.59, 147.57 0.38 M0.18 171.37 C41.33 123.45, 81.86 77.61, 148.81 0.27 M-0.43 175.5 C42.41 129.13, 83.17 82.4, 153.98 0.49 M-0.38 176.58 C56.14 112.56, 110.58 48.82, 153.05 0 M0.7 184.05 C39.63 137.27, 77.83 89.07, 159.24 -1.15 M-0.04 183.65 C61.15 113.46, 120.25 43.45, 159.1 0.14 M0.78 189.08 C63.86 116.64, 126.59 42.93, 165.06 -0.83 M-0.1 189.24 C43.16 138.18, 87.83 86.83, 164.16 0.56 M1.24 193.84 C36.84 154.67, 72.19 113.57, 170.32 -1.11 M-0.39 194.15 C64.21 119.86, 128.3 45.54, 169.93 0.91 M-0.29 202.73 C49.19 146.43, 96.87 92.17, 176.44 -0.47 M0.13 200.67 C52.92 138.41, 108.19 74.96, 174.6 -0.26 M1.16 206.55 C59.57 139.38, 118.88 71.01, 179.33 -0.46 M-0.07 207.43 C53.03 145.16, 107.35 82.74, 180.4 0.42 M0.22 213.68 C60.95 141.62, 123.88 71.22, 187.21 0.77 M0.6 214.05 C46.1 157.63, 93.55 102.73, 185.97 0.53 M1.26 216.37 C45.53 168.31, 87.98 118.47, 190.76 -1.23 M3.04 216.09 C67.52 139.61, 132.76 63.4, 190.6 -0.35 M7.95 217.48 C67.06 150.79, 124.44 83.38, 196.32 1.03 M7.93 216.35 C53.89 161.92, 100.46 109.21, 196.09 -0.51 M12.62 217.33 C58.21 163, 105.7 107.92, 202.43 -0.59 M13.54 216.66 C71.71 147.52, 130.4 81.02, 201.49 0.82 M18.27 217.27 C66.39 160.5, 115.21 104.07, 208.36 0.27 M18.01 215.72 C58.01 168.33, 99.25 121.93, 206.76 -0.82 M24.9 216.54 C74.66 158.72, 125.24 98.12, 212.06 0.05 M23.39 216.76 C89.76 140.49, 156.61 64.23, 211.91 -0.02 M28.87 215.01 C94.99 140.87, 162.5 64.39, 216.64 2.5 M28.76 215.55 C79.01 159.87, 128.27 103.38, 215.68 1.25 M32.95 216.11 C83.19 160.31, 131.85 106.05, 216.52 8.63 M33.94 217.11 C75.45 168.61, 117.47 121.55, 216.54 8.14 M39.78 217.56 C92.26 159.75, 140.57 102.37, 215.58 12.68 M40.11 216.11 C90.9 157.88, 140.49 99.7, 215.33 14 M43.47 216.97 C104.46 148.92, 163.67 79.54, 215.48 18.1 M44.41 216.74 C89.24 164.57, 133.58 113.45, 215.55 19.53 M50.78 215.1 C93.5 164.92, 139.86 112.9, 214.41 26.53 M49.78 215.99 C110.29 149.66, 168.81 81.69, 215.73 26.76 M57.12 215.58 C107.36 155.81, 157.92 97.78, 215.19 31.92 M54.97 216.03 C113.66 149.14, 173.56 80.85, 215.38 32.06 M61.3 215.31 C95.1 175.75, 132.1 134.8, 216.98 38.89 M61.19 216.77 C109.52 160.05, 158.35 103.94, 216.2 38.35 M67.47 216.77 C115.11 158.21, 167.71 97.2, 216.63 45.21 M66.77 216.96 C102.08 174.52, 137.46 133.67, 215.1 44.3 M70.35 215.08 C103.39 179.45, 138.17 141.98, 216.94 49.42 M72.29 216.59 C103.33 179.45, 132.1 146.13, 215.3 50.78 M77.48 217.53 C112.79 176.25, 148.92 136.21, 214.87 56.96 M76.92 216.34 C126.01 159.84, 176.06 104.61, 216.09 56.89 M83.65 216.59 C109.9 184.76, 137.67 151.42, 216.82 64.24 M81.86 216.8 C115.56 177.43, 148.43 139.03, 215.35 63.31 M86.45 216.6 C117.96 179.57, 150.68 145.05, 215.64 67.24 M86.76 215.76 C133.59 164.04, 179.87 111.6, 216.32 67.66 M92.5 217.18 C130.08 175.3, 164.37 136.62, 217.67 75.31 M93.31 216.93 C121.12 183.96, 149.71 151.9, 216.67 74.37 M97.31 214.67 C122.26 188.24, 148.41 160.47, 217.8 78.71 M97.27 217.16 C133.41 175.31, 167.83 132.89, 216.35 79.87 M102.05 215.76 C128.77 182.73, 159.47 152.36, 217.64 85.73 M103.92 216.03 C140.06 172.81, 177.77 130.15, 216.44 86.54 M108.77 215.29 C145.82 169.8, 184.54 127.33, 214.48 93.3 M108.6 216.14 C152.4 169.17, 193.64 120.21, 215.53 93.61 M113.85 217.99 C138.74 189.67, 160.26 165.2, 215.6 100.97 M113.85 215.19 C144.51 180.53, 176.69 143.07, 215.68 99.56 M119.06 216.26 C139.68 192.15, 161.93 164.32, 216.54 104.97 M120.04 216.13 C141.97 189.71, 164.98 164.4, 216.3 104.47 M124.31 216.62 C147.59 192.15, 170.4 161.51, 217.92 112.68 M123.84 216.01 C151.85 183.74, 178.95 152.19, 216.63 110.91 M130.04 217.74 C153.81 189.32, 176.55 163.35, 216.49 116.35 M130.09 216.38 C146.84 196.06, 166.21 175.33, 216.35 118.08 M135.41 216.47 C160.47 188.02, 182.14 159.88, 213.93 123.66 M135.78 217.64 C155.48 194.76, 172.71 172.66, 216.06 124.66 M139.2 218.28 C157.86 195.92, 177.77 173.69, 215.14 127.67 M140.43 215.93 C161.4 191.88, 182.03 169.94, 215.2 129.17 M146.79 215.06 C162.71 194.09, 180.79 177.42, 214.55 136.84 M144.79 217.28 C160.2 199.12, 174.78 183.05, 215.91 136.41 M151.66 214.81 C171.28 196.29, 187.11 175.48, 216.92 141.52 M151.91 215.67 C176.44 188.45, 199.88 160.32, 215.56 142.26 M154.38 215.47 C172.69 198.01, 192.07 175.16, 216.36 147.74 M155.82 217.21 C174.84 196.04, 193.76 174.8, 215.32 147.85 M160.14 214.61 C179.82 197.41, 195.96 177.17, 217.2 155.66 M162.6 216.26 C174.04 201, 186.86 187.65, 214.67 154.44 M165.72 215.2 C184.79 196.83, 203.71 176.89, 216.23 161.56 M167.04 217.53 C178.06 204.41, 186.16 194.48, 215.28 159.73 M173.01 215.35 C189.21 198.76, 204.39 179.52, 216.99 167.92 M171.74 216.2 C188.55 197.71, 202.6 180.81, 214.93 166.35 M176 218.1 C188.62 206.57, 198.94 193.03, 214.63 173.83 M177.77 216.11 C190.55 201.92, 202.86 186.55, 215.97 172.6 M182.26 217.09 C193.97 201.5, 207.69 185.56, 214.91 176.8 M183.75 215.8 C191.36 207.78, 198.34 197.48, 215.95 178.7 M187.99 218.4 C199.34 205.7, 207.8 191.99, 215.03 183.22 M188.53 216.69 C197.17 205.82, 204.83 195.35, 216.1 185.58 M195.49 214.23 C197.72 209.17, 202.2 205.99, 217.9 190.4 M194.25 215.18 C202.02 207.92, 209.16 198.59, 215.2 191.28 M200.15 216.71 C206.55 209.28, 212.55 200.97, 214.47 196.53 M199.03 216.79 C205.41 210.03, 212.23 201.38, 215.53 197.34 M203.99 215.64 C207.37 213.36, 210.04 206.68, 216.48 203.13 M204.08 216.24 C207 212.46, 211.61 208.42, 215.41 201.74 M209.93 216.23 C210.58 213.66, 212.88 213.24, 215.79 209.03 M209.77 216.09 C211.32 214.48, 213.4 211.72, 215.64 208.76\\" stroke=\\"#15aabf\\" stroke-width=\\"0.5\\" fill=\\"none\\"></path><path d=\\"M-0.39 -0.88 C55.46 -0.97, 113.94 -0.3, 214.26 0.61 M-0.49 0.4 C84.22 -0.65, 169.11 -0.38, 213.87 0.66 M212.35 -0.69 C216.14 81.33, 216.66 160.36, 212.82 212.88 M213.44 -0.28 C214.34 52.63, 212.93 106.93, 213.51 214 M215.36 213.92 C153.36 215.01, 94.72 215.24, 0.66 215.17 M214.59 213.78 C136.22 216.39, 57.75 216.64, 0.1 213.77 M-1.71 215.7 C0.69 160.6, -0.19 109.87, -0.18 1.75 M0.58 213.93 C-0.62 147.47, -0.5 79.36, 0.52 0\\" stroke=\\"#000000\\" stroke-width=\\"1\\" fill=\\"none\\"></path></g></a>"
 `;
@@ -95,7 +97,7 @@ exports[`exportToSvg with elements that have a link 1`] = `
 exports[`exportToSvg with exportEmbedScene 1`] = `
 "
   <!-- svg-source:excalidraw -->
-  <!-- payload-type:application/vnd.excalidraw+json --><!-- payload-version:2 --><!-- payload-start -->eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1SsW7CMFx1MDAxMN35iihdkUjSQChcdTAwMWItVVWpalx1MDAwN1x1MDAwNqRWXHUwMDFkTHxJrFx1MDAxONvEXHUwMDBlXHUwMDEwIf69tlx1MDAwM3GJXHUwMDE4O9aDpXt+7+58945cdTAwMDPP81UjwJ95Plx1MDAxY1JEXHSu0N5cdTAwMWZcdTAwMWF8XHUwMDA3lSSc6afIxpLXVWqZhVJiNlx1MDAxYVGuXHUwMDA1XHUwMDA1l6rlXHUwMDAzhVxyMCU140vHnne0t34h2Kh2q2r7Mc9KwnC0TTfJ22L+8mmllnTQnDiMu7gxhe+TLt5cdTAwMTOsXG6NhUHQYVx1MDAwNZC8UD1cdTAwMTCxnJo2XHUwMDFkXCJVxUt44pRXppG7wFx1MDAxZVd6jdIyr3jNsOOEY4TWmeNkhNKlamg7XHUwMDAwlFx1MDAxNnVcdTAwMDV+r8Lq0mJcdTAwMGbvdJLrXHUwMDAxO5UumVx1MDAxN1xmpLzScIFSoprer0x/4lx1MDAxNdvpfv/OwPA5XHUwMDAzqyl1hVx1MDAwMbDNXHUwMDEwh5Nx8lx1MDAxMEy7XHUwMDE3t9YwXG766DtndsVhOJ1cdTAwMDZBXHUwMDFjJZOOQeRCb1jZtFx1MDAxOaJcdTAwMTLc+ExcdTAwMTPPbvtXjdRcdTAwMDKjVuR+SFx0K/s8babyRu6LOTFBXHUwMDFizrBv8dPw31///vpTf1x1MDAwMaVESDj7S992XHUwMDA2Plx1MDAxMmKpdH5Nad3m71xi7Fx1MDAxZm/sM7PH6K07zT7BNHs8XHJOP7VXYMUifQ==<!-- payload-end -->
+  <!-- payload-type:application/vnd.excalidraw+json --><!-- payload-version:2 --><!-- payload-start -->eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1SPW/CMFx1MDAxMN35XHUwMDE1UbpcIpGk4aNstFRcdTAwMTVS1Vx1MDAwZVxmSK06mPiSWHHsYDtAhPjvtVxyxCVi7oRcdTAwMDdLfvfu7vnuXHUwMDFkep7nq6ZcdTAwMDJ/6vmwT1x1MDAxMCVYoJ3fN/hcdTAwMTaEJJzpUGTfktdcIrHMXFypajpcdTAwMThQrlx1MDAxM3Iu1YlcdTAwMGZcdTAwMTRKYEpqxrd+e97B3jpCsMnarsTmc5ZcdTAwMTaE4WiTlOP3+ezty6Za0l5z4jBu341p/Dhu3zuCVa6xMFxiWixcdTAwMDeS5apcdTAwMDNcIpZRI9MhUlx0XsBcdTAwMGKnXFxcdTAwMTghXHUwMDBmgT2u9Vx1MDAxYSVFJnjNsOOEQ4TWqeOkhNKlauhpXHUwMDAwKMlrXHUwMDAxfqfD6lwisYO3eZLrXHUwMDAxuyzdMstcdTAwMTlIeZXDK5RcdTAwMTDVdH5l9FVcdTAwMGJsp/vjVFx0VMLCjJfVlP4tzPC58FVAXHUwMDAyYFs4XHUwMDBlR8PxUzBpI27bYVx1MDAxNHTRXHUwMDBmzuzmw3AyXHSCOFx1MDAxYY9aXHUwMDA2kXO9eGXLpohKcFM1XCJenSmuhNRcdTAwMTVGpyT3cUpY0eVpj1x1MDAxNTdqXzyLXHQqOcO+xY/9u+3utvtcdTAwMGbbXHUwMDAxpaSScLadvu1ofFRVS6Xra8rJhP6WwO75xppTe0y+Na1ZM1x1MDAxOLGHY+/4XHUwMDBiw1x1MDAwNmzTIn0=<!-- payload-end -->
   <defs>
     <style class=\\"style-fonts\\">
       @font-face {
@@ -107,6 +109,7 @@ exports[`exportToSvg with exportEmbedScene 1`] = `
         src: url(\\"https://excalidraw.com/Cascadia.woff2\\");
       }
     </style>
+    
   </defs>
   <g stroke-linecap=\\"round\\" transform=\\"translate(10 10) rotate(0 50 50)\\"><path d=\\"M0.32 50.63 C0.32 50.63, 0.32 50.63, 0.32 50.63 M0.32 50.63 C0.32 50.63, 0.32 50.63, 0.32 50.63 M1.31 55.08 C15.31 40.32, 29.59 22.37, 41.3 9.81 M2.95 54.67 C16.06 38.64, 28.38 26.08, 41.31 11.16 M5.17 55.28 C18.64 40.54, 34.59 23.3, 53.31 1.2 M6.19 55.83 C19.7 40.85, 33.94 25.36, 52.84 2.99 M8.12 57.33 C28.32 38.18, 46.32 16.69, 57.78 5.54 M9.05 59.26 C25.33 39.84, 41.83 20.42, 56.36 4.41 M12.23 63.33 C23.99 47.5, 34.76 34.04, 58.25 7.72 M12.1 62.42 C25.64 45.74, 39.58 29.47, 59.39 6.7 M14.29 65.31 C33.6 44.37, 51.89 21.73, 61.4 11.6 M14.95 64.35 C25.42 51.41, 36.81 39.88, 61.57 11.19 M17.44 69.69 C30.26 56.06, 39.46 44.26, 65.11 14.18 M17.51 68.63 C34.43 47.57, 51.04 27.25, 64.33 13.82 M21.98 70.02 C37.96 53.4, 51.32 32.51, 66.76 17.85 M20.5 70.41 C29.55 59.82, 39.04 48.82, 66.82 15.79 M21.73 71.26 C33.76 59.36, 45.61 49.75, 69.47 19.91 M23.35 73.09 C39.91 53.14, 58.94 32.17, 69.77 19.39 M26.91 74.54 C41.56 60.59, 55.7 44.03, 72.29 22.07 M26.74 75.44 C39.06 62.99, 49.89 47.62, 73.34 21.9 M27.68 77.61 C45.49 62.49, 58.86 43.36, 74.53 26.67 M29.77 78.46 C46.48 58.69, 65.8 38.46, 75.03 24.23 M29.82 83.37 C45.64 68.39, 59.09 52.88, 78 26.2 M31.24 82.29 C42.16 70.24, 50.48 58.61, 77.54 28.77 M33.5 84.64 C46.6 69.19, 61.43 52.15, 81.17 32.8 M34.1 85.27 C44.17 73.12, 52.8 63.6, 80.62 31.25 M37.69 88.37 C54.96 70.16, 71.4 49.55, 82.89 35.26 M37.41 86.61 C46.27 76.03, 56.22 65.63, 84.34 34.18 M38.98 88.4 C54.78 76.48, 66.88 59.43, 87.83 36.78 M40.83 89.54 C52.97 74.67, 64.21 61.17, 86.21 36.91 M43.18 94 C60.91 72.19, 77.04 51.45, 90.21 39.94 M43.86 92.11 C52.94 82.13, 62.98 68.89, 90.51 39.02 M44.93 94.32 C62.61 77.05, 76.42 59.94, 91.95 44.23 M45.02 96.15 C61.2 76.98, 78.3 58.77, 92.03 42.23 M50.55 99.15 C60.63 81.82, 75.04 67.37, 96.9 43.53 M48.39 98.32 C65.04 78.28, 81.92 59.44, 94.04 46.22 M50.38 99.19 C69.54 81.19, 85.85 58.94, 99.21 46.38 M51.53 100.79 C62.45 87.27, 73.41 74.93, 98.13 47.3\\" stroke=\\"#15aabf\\" stroke-width=\\"0.5\\" fill=\\"none\\"></path><path d=\\"M50.55 -1.01 C62.82 12.44, 78.03 26.68, 100.3 51.7 M50.44 0.46 C69.95 19.26, 89.63 39.73, 99.86 51.76 M98.12 50.21 C82.92 71.13, 65.15 88.19, 49.66 98.72 M99.37 50.68 C88.57 62.94, 74.79 76.37, 50.44 100 M52.55 99.9 C35.86 87.61, 23.16 74.12, 0.75 52.33 M51.67 99.75 C32.82 83.31, 13.73 65.72, 0.11 50.74 M-1.95 52.94 C13.84 37.62, 25.27 26.82, 50.8 2 M0.66 50.92 C16.45 35.71, 32.61 18.7, 51.59 0.01\\" stroke=\\"#000000\\" stroke-width=\\"1\\" fill=\\"none\\"></path></g><g stroke-linecap=\\"round\\" transform=\\"translate(10 10) rotate(0 50 50)\\"><path d=\\"M16.06 13.96 C16.06 13.96, 16.06 13.96, 16.06 13.96 M16.06 13.96 C16.06 13.96, 16.06 13.96, 16.06 13.96 M5.51 34 C13.17 23.26, 20.2 13.31, 28.19 8.96 M5.48 33.35 C12.13 25.41, 19.79 15.96, 26.45 7.6 M5.56 37.62 C16.59 25.63, 28.15 12.22, 38.46 2.39 M5.11 40.5 C16.67 26.96, 28.16 13.15, 36.64 1.59 M4.66 45.59 C13.25 35.02, 21.41 28.15, 39.56 4.69 M4.57 46.97 C11.96 37.32, 20.9 26.56, 40.44 3.42 M5.51 50.51 C13.89 43.35, 21.63 34.54, 46.26 4.75 M4.27 51.77 C16.66 37.46, 28.38 22.96, 44.97 4.33 M0.17 60.65 C18.76 40.92, 37.97 17.6, 49.71 5.16 M0.46 61.18 C19.32 40.86, 37.47 20.77, 50.84 4.21 M2.75 65.39 C21.01 45.29, 37.92 25.46, 57.52 4.43 M3.54 66.52 C18.04 48.78, 32.49 30.26, 55.79 4.21 M4.72 71.04 C27.28 44.43, 49.83 20.12, 62.05 5.19 M4.98 68.42 C25.81 45.48, 47.44 20.41, 60.72 5.33 M5.52 72.07 C22.65 55.25, 37.54 35.66, 64.61 5.49 M7.57 72.36 C23.86 52.77, 40.82 32.55, 67.4 4.05 M9.59 78.6 C21.66 63, 36.06 48.95, 71.76 7.03 M10.08 76.55 C27.55 55.62, 45.62 35.85, 70.49 7 M12.56 81.85 C25.42 62.46, 40.04 46.55, 72.17 9.63 M11.06 79.79 C28.06 60.16, 44.33 40.26, 73.94 7.75 M13.55 82.49 C28.83 65.98, 48.28 43.76, 76.92 11.53 M14.8 84.16 C33.23 60.15, 53.34 38.08, 77.01 9.5 M18.1 87.31 C40.08 56.47, 62.85 30.47, 80.4 12.36 M15.8 86.08 C37.59 61.7, 60.84 34.46, 80.7 12.46 M19 88.26 C40.74 67.47, 58.92 43.28, 83.23 13.91 M19.34 89.69 C44.04 60.94, 70.07 31.37, 84.33 14.92 M24.66 90.68 C46.24 63.97, 68.7 37.2, 88.49 16.36 M23.39 91.54 C41.48 71.33, 57.27 52.46, 87.46 15.92 M26.62 93.33 C42.62 75.25, 55.76 56.91, 91.37 20.55 M25.78 92.9 C44.69 72.7, 64.26 51.51, 91.05 19.89 M29.13 94.58 C54.77 68.16, 76.36 39.34, 89.98 24.69 M29.39 94.36 C49.44 73.98, 66.44 53.75, 91.98 23.72 M33.42 96.74 C47.73 82.49, 62.82 64.22, 92.32 25.67 M34.06 96.57 C55.92 72.5, 76.96 48.57, 93.62 28.4 M36.63 98.74 C60.32 74.26, 79.82 54.48, 97.25 30.51 M37.14 99.24 C54.89 79.32, 74.61 58.8, 96.4 30.94 M40.66 99.17 C55.88 83.45, 65.33 69.82, 99.98 34.12 M41.95 98.58 C59.45 80.37, 76.18 63.41, 98.97 34.44 M49.2 99.75 C62.61 81.39, 76.76 66.6, 99.71 40.34 M48.46 99.18 C68.17 76.49, 88.85 52.13, 101.44 39.52 M53.89 98.89 C65.67 88.12, 73.58 74.8, 99.93 45.65 M53.06 97.85 C64.12 87.68, 74.24 77.45, 101.28 44.38 M58.61 99.36 C71.02 84.02, 84.02 72.64, 100.47 49.9 M58.48 99.78 C74.3 82.44, 89.18 65.6, 101.07 49.98 M64.37 99.36 C78.85 81.75, 90.01 65.78, 99.33 56.12 M62.3 99.9 C77.88 84.17, 91.11 66.99, 99.88 56.12 M72.13 92.65 C79.7 86.54, 88.47 76.42, 98.79 63.47 M73.38 93.43 C80.92 86.16, 85.53 79.8, 99.02 64.85\\" stroke=\\"#15aabf\\" stroke-width=\\"0.5\\" fill=\\"none\\"></path><path d=\\"M38.1 1.46 C45.72 -1.06, 55.49 -0.08, 63.58 2.19 C71.68 4.46, 80.88 9.29, 86.67 15.09 C92.46 20.89, 96.33 29.02, 98.32 36.99 C100.32 44.97, 101 54.87, 98.62 62.96 C96.24 71.05, 90.17 79.66, 84.03 85.55 C77.89 91.43, 69.57 96.06, 61.79 98.28 C54 100.51, 45.12 100.97, 37.32 98.91 C29.52 96.84, 21.11 92.03, 14.99 85.89 C8.88 79.75, 2.75 70.16, 0.63 62.05 C-1.48 53.94, -0.22 45.19, 2.3 37.23 C4.82 29.28, 9.28 20.51, 15.77 14.3 C22.25 8.1, 36.21 2.25, 41.23 0.02 C46.25 -2.21, 45.49 0.09, 45.88 0.91 M40.94 1.53 C48.29 -0.28, 59.04 0.38, 66.96 3.27 C74.89 6.16, 83.12 12.22, 88.48 18.88 C93.85 25.53, 97.82 35.15, 99.18 43.21 C100.54 51.28, 99.41 59.58, 96.65 67.29 C93.89 74.99, 88.87 84.03, 82.63 89.47 C76.39 94.91, 67.44 98.55, 59.2 99.93 C50.97 101.3, 41.25 100.52, 33.2 97.7 C25.15 94.87, 16.16 89.68, 10.9 82.99 C5.64 76.3, 2.84 65.86, 1.64 57.57 C0.45 49.28, 0.99 40.72, 3.74 33.24 C6.5 25.76, 11.77 18.2, 18.18 12.7 C24.59 7.2, 38.36 1.99, 42.22 0.24 C46.09 -1.5, 41.49 1.56, 41.37 2.2\\" stroke=\\"#000000\\" stroke-width=\\"1\\" fill=\\"none\\"></path></g>"
 `;
diff --git a/src/tests/test-utils.ts b/src/tests/test-utils.ts
index c33e80c7d..bb771b196 100644
--- a/src/tests/test-utils.ts
+++ b/src/tests/test-utils.ts
@@ -16,6 +16,7 @@ import { STORAGE_KEYS } from "../excalidraw-app/app_constants";
 import { SceneData } from "../types";
 import { getSelectedElements } from "../scene/selection";
 import { ExcalidrawElement } from "../element/types";
+import { UI } from "./helpers/ui";
 
 const customQueries = {
   ...queries,
@@ -186,7 +187,44 @@ export const assertSelectedElements = (
   expect(selectedElementIds).toEqual(expect.arrayContaining(ids));
 };
 
+export const createPasteEvent = (
+  text:
+    | string
+    | /* getData function */ ((type: string) => string | Promise<string>),
+  files?: File[],
+) => {
+  return Object.assign(
+    new Event("paste", {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }),
+    {
+      clipboardData: {
+        getData: typeof text === "string" ? () => text : text,
+        files: files || [],
+      },
+    },
+  );
+};
+
 export const toggleMenu = (container: HTMLElement) => {
   // open menu
   fireEvent.click(container.querySelector(".dropdown-menu-button")!);
 };
+
+export const togglePopover = (label: string) => {
+  // Needed for radix-ui/react-popover as tests fail due to resize observer not being present
+  (global as any).ResizeObserver = class ResizeObserver {
+    constructor(cb: any) {
+      (this as any).cb = cb;
+    }
+
+    observe() {}
+
+    unobserve() {}
+    disconnect() {}
+  };
+
+  UI.clickLabeledElement(label);
+};
diff --git a/src/tests/zindex.test.tsx b/src/tests/zindex.test.tsx
index a59af77cf..de421338b 100644
--- a/src/tests/zindex.test.tsx
+++ b/src/tests/zindex.test.tsx
@@ -89,6 +89,8 @@ const populateElements = (
     ...selectGroupsForSelectedElements(
       { ...h.state, ...appState, selectedElementIds },
       h.elements,
+      h.state,
+      null,
     ),
     ...appState,
     selectedElementIds,
diff --git a/src/types.ts b/src/types.ts
index 09848df1d..40f54831d 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,3 +1,4 @@
+import React from "react";
 import {
   PointerType,
   ExcalidrawLinearElement,
@@ -14,6 +15,7 @@ import {
   ExcalidrawImageElement,
   Theme,
   StrokeRoundness,
+  ExcalidrawFrameElement,
 } from "./element/types";
 import { SHAPES } from "./shapes";
 import { Point as RoughPoint } from "roughjs/bin/geometry";
@@ -29,10 +31,9 @@ import { isOverScrollBars } from "./scene";
 import { MaybeTransformHandleType } from "./element/transformHandles";
 import Library from "./data/library";
 import type { FileSystemHandle } from "./data/filesystem";
-import type { ALLOWED_IMAGE_MIME_TYPES, MIME_TYPES } from "./constants";
+import type { IMAGE_MIME_TYPES, MIME_TYPES } from "./constants";
 import { ContextMenuItems } from "./components/ContextMenu";
-import { Merge, ForwardRef } from "./utility-types";
-import React from "react";
+import { Merge, ForwardRef, ValueOf } from "./utility-types";
 
 export type Point = Readonly<RoughPoint>;
 
@@ -60,7 +61,7 @@ export type DataURL = string & { _brand: "DataURL" };
 
 export type BinaryFileData = {
   mimeType:
-    | typeof ALLOWED_IMAGE_MIME_TYPES[number]
+    | ValueOf<typeof IMAGE_MIME_TYPES>
     // future user or unknown file type
     | typeof MIME_TYPES.binary;
   id: FileId;
@@ -85,7 +86,7 @@ export type BinaryFiles = Record<ExcalidrawElement["id"], BinaryFileData>;
 
 export type LastActiveTool =
   | {
-      type: typeof SHAPES[number]["value"] | "eraser" | "hand";
+      type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame";
       customType: null;
     }
   | {
@@ -94,6 +95,9 @@ export type LastActiveTool =
     }
   | null;
 
+export type SidebarName = string;
+export type SidebarTabName = string;
+
 export type AppState = {
   contextMenu: {
     items: ContextMenuItems;
@@ -110,6 +114,15 @@ export type AppState = {
   isBindingEnabled: boolean;
   startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
   suggestedBindings: SuggestedBinding[];
+  frameToHighlight: NonDeleted<ExcalidrawFrameElement> | null;
+  frameRendering: {
+    enabled: boolean;
+    name: boolean;
+    outline: boolean;
+    clip: boolean;
+  };
+  editingFrame: string | null;
+  elementsToHighlight: NonDeleted<ExcalidrawElement>[] | null;
   // element being edited, but not necessarily added to elements array yet
   // (e.g. text element when typing into the input)
   editingElement: NonDeletedExcalidrawElement | null;
@@ -123,7 +136,7 @@ export type AppState = {
     locked: boolean;
   } & (
     | {
-        type: typeof SHAPES[number]["value"] | "eraser" | "hand";
+        type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame";
         customType: null;
       }
     | {
@@ -159,20 +172,23 @@ export type AppState = {
   isResizing: boolean;
   isRotating: boolean;
   zoom: Zoom;
-  // mobile-only
   openMenu: "canvas" | "shape" | null;
-  openPopup:
-    | "canvasColorPicker"
-    | "backgroundColorPicker"
-    | "strokeColorPicker"
-    | null;
-  openSidebar: "library" | "customSidebar" | null;
+  openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+  openSidebar: { name: SidebarName; tab?: SidebarTabName } | null;
   openDialog: "imageExport" | "help" | "jsonExport" | null;
-  isSidebarDocked: boolean;
+  /**
+   * Reflects user preference for whether the default sidebar should be docked.
+   *
+   * NOTE this is only a user preference and does not reflect the actual docked
+   * state of the sidebar, because the host apps can override this through
+   * a DefaultSidebar prop, which is not reflected back to the appState.
+   */
+  defaultSidebarDockedPreference: boolean;
 
   lastPointerDownWith: PointerType;
-  selectedElementIds: { [id: string]: boolean };
-  previousSelectedElementIds: { [id: string]: boolean };
+  selectedElementIds: Readonly<{ [id: string]: true }>;
+  previousSelectedElementIds: { [id: string]: true };
+  selectedElementsAreBeingDragged: boolean;
   shouldCacheIgnoreZoom: boolean;
   toast: { message: string; closable?: boolean; duration?: number } | null;
   zenModeEnabled: boolean;
@@ -209,6 +225,15 @@ export type AppState = {
   selectedLinearElement: LinearElementEditor | null;
 };
 
+export type UIAppState = Omit<
+  AppState,
+  | "suggestedBindings"
+  | "startBoundElement"
+  | "cursorButton"
+  | "scrollX"
+  | "scrollY"
+>;
+
 export type NormalizedZoomValue = number & { _brand: "normalizedZoom" };
 
 export type Zoom = Readonly<{
@@ -305,7 +330,7 @@ export interface ExcalidrawProps {
   ) => Promise<boolean> | boolean;
   renderTopRightUI?: (
     isMobile: boolean,
-    appState: AppState,
+    appState: UIAppState,
   ) => JSX.Element | null;
   langCode?: Language["code"];
   viewModeEnabled?: boolean;
@@ -316,7 +341,7 @@ export interface ExcalidrawProps {
   name?: string;
   renderCustomStats?: (
     elements: readonly NonDeletedExcalidrawElement[],
-    appState: AppState,
+    appState: UIAppState,
   ) => JSX.Element;
   UIOptions?: Partial<UIOptions>;
   detectScroll?: boolean;
@@ -335,10 +360,6 @@ export interface ExcalidrawProps {
     pointerDownState: PointerDownState,
   ) => void;
   onScrollChange?: (scrollX: number, scrollY: number) => void;
-  /**
-   * Render function that renders custom <Sidebar /> component.
-   */
-  renderSidebar?: () => JSX.Element | null;
   children?: React.ReactNode;
 }
 
@@ -359,13 +380,13 @@ export type ExportOpts = {
   saveFileToDisk?: boolean;
   onExportToBackend?: (
     exportedElements: readonly NonDeletedExcalidrawElement[],
-    appState: AppState,
+    appState: UIAppState,
     files: BinaryFiles,
     canvas: HTMLCanvasElement | null,
   ) => void;
   renderCustomUI?: (
     exportedElements: readonly NonDeletedExcalidrawElement[],
-    appState: AppState,
+    appState: UIAppState,
     files: BinaryFiles,
     canvas: HTMLCanvasElement | null,
   ) => JSX.Element;
@@ -419,13 +440,17 @@ export type AppClassProperties = {
     FileId,
     {
       image: HTMLImageElement | Promise<HTMLImageElement>;
-      mimeType: typeof ALLOWED_IMAGE_MIME_TYPES[number];
+      mimeType: ValueOf<typeof IMAGE_MIME_TYPES>;
     }
   >;
   files: BinaryFiles;
   device: App["device"];
   scene: App["scene"];
   pasteFromClipboard: App["pasteFromClipboard"];
+  id: App["id"];
+  onInsertElements: App["onInsertElements"];
+  onExportImage: App["onExportImage"];
+  lastViewportPosition: App["lastViewportPosition"];
 };
 
 export type PointerDownState = Readonly<{
@@ -517,7 +542,13 @@ export type ExcalidrawImperativeAPI = {
   setActiveTool: InstanceType<typeof App>["setActiveTool"];
   setCursor: InstanceType<typeof App>["setCursor"];
   resetCursor: InstanceType<typeof App>["resetCursor"];
-  toggleMenu: InstanceType<typeof App>["toggleMenu"];
+  toggleSidebar: InstanceType<typeof App>["toggleSidebar"];
+  /**
+   * Disables rendering of frames (including element clipping), but currently
+   * the frames are still interactive in edit mode. As such, this API should be
+   * used in conjunction with view mode (props.viewModeEnabled).
+   */
+  updateFrameRendering: InstanceType<typeof App>["updateFrameRendering"];
 };
 
 export type Device = Readonly<{
@@ -525,4 +556,24 @@ export type Device = Readonly<{
   isMobile: boolean;
   isTouchScreen: boolean;
   canDeviceFitSidebar: boolean;
+  isLandscape: boolean;
 }>;
+
+type FrameNameBounds = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  angle: number;
+};
+
+export type FrameNameBoundsCache = {
+  get: (frameElement: ExcalidrawFrameElement) => FrameNameBounds | null;
+  _cache: Map<
+    string,
+    FrameNameBounds & {
+      zoom: AppState["zoom"]["value"];
+      versionNonce: ExcalidrawFrameElement["versionNonce"];
+    }
+  >;
+};
diff --git a/src/utility-types.ts b/src/utility-types.ts
index b84eb1994..860d818ef 100644
--- a/src/utility-types.ts
+++ b/src/utility-types.ts
@@ -47,3 +47,10 @@ export type ForwardRef<T, P = any> = Parameters<
 export type ExtractSetType<T extends Set<any>> = T extends Set<infer U>
   ? U
   : never;
+
+export type SameType<T, U> = T extends U ? (U extends T ? true : false) : false;
+export type Assert<T extends true> = T;
+
+export type NestedKeyOf<T, K = keyof T> = K extends keyof T & (string | number)
+  ? `${K}` | (T[K] extends object ? `${K}.${NestedKeyOf<T[K]>}` : never)
+  : never;
diff --git a/src/utils.ts b/src/utils.ts
index 1d545f977..c644efd81 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,6 +1,5 @@
 import oc from "open-color";
-
-import colors from "./colors";
+import { COLOR_PALETTE } from "./colors";
 import {
   CURSOR_TYPE,
   DEFAULT_VERSION,
@@ -11,7 +10,11 @@ import {
   THEME,
   WINDOWS_EMOJI_FALLBACK_FONT,
 } from "./constants";
-import { FontFamilyValues, FontString } from "./element/types";
+import {
+  FontFamilyValues,
+  FontString,
+  NonDeletedExcalidrawElement,
+} from "./element/types";
 import { AppState, DataURL, LastActiveTool, Zoom } from "./types";
 import { unstable_batchedUpdates } from "react-dom";
 import { SHAPES } from "./shapes";
@@ -61,6 +64,13 @@ export const isInputLike = (
   target instanceof HTMLTextAreaElement ||
   target instanceof HTMLSelectElement;
 
+export const isInteractive = (target: Element | EventTarget | null) => {
+  return (
+    isInputLike(target) ||
+    (target instanceof Element && !!target.closest("label, button"))
+  );
+};
+
 export const isWritableElement = (
   target: Element | EventTarget | null,
 ): target is
@@ -187,68 +197,134 @@ export const throttleRAF = <T extends any[]>(
  * @param {number} k - The value to be tweened.
  * @returns {number} The tweened value.
  */
-function easeOut(k: number): number {
+export const easeOut = (k: number) => {
   return 1 - Math.pow(1 - k, 4);
-}
+};
+
+const easeOutInterpolate = (from: number, to: number, progress: number) => {
+  return (to - from) * easeOut(progress) + from;
+};
 
 /**
- * Compute new values based on the same ease function and trigger the
- * callback through a requestAnimationFrame call
+ * Animates values from `fromValues` to `toValues` using the requestAnimationFrame API.
+ * Executes the `onStep` callback on each step with the interpolated values.
+ * Returns a function that can be called to cancel the animation.
  *
- * use `opts` to define a duration and/or an easeFn
+ * @example
+ * // Example usage:
+ * const fromValues = { x: 0, y: 0 };
+ * const toValues = { x: 100, y: 200 };
+ * const onStep = ({x, y}) => {
+ *   setState(x, y)
+ * };
+ * const onCancel = () => {
+ *   console.log("Animation canceled");
+ * };
  *
- * for example:
- * ```ts
- * easeToValuesRAF([10, 20, 10], [0, 0, 0], (a, b, c) => setState(a,b, c))
- * ```
+ * const cancelAnimation = easeToValuesRAF({
+ *   fromValues,
+ *   toValues,
+ *   onStep,
+ *   onCancel,
+ * });
  *
- * @param fromValues The initial values, must be numeric
- * @param toValues The destination values, must also be numeric
- * @param callback The callback receiving the values
- * @param opts default to 250ms duration and the easeOut function
+ * // To cancel the animation:
+ * cancelAnimation();
  */
-export const easeToValuesRAF = (
-  fromValues: number[],
-  toValues: number[],
-  callback: (...values: number[]) => void,
-  opts?: { duration?: number; easeFn?: (value: number) => number },
-) => {
+export const easeToValuesRAF = <
+  T extends Record<keyof T, number>,
+  K extends keyof T,
+>({
+  fromValues,
+  toValues,
+  onStep,
+  duration = 250,
+  interpolateValue,
+  onStart,
+  onEnd,
+  onCancel,
+}: {
+  fromValues: T;
+  toValues: T;
+  /**
+   * Interpolate a single value.
+   * Return undefined to be handled by the default interpolator.
+   */
+  interpolateValue?: (
+    fromValue: number,
+    toValue: number,
+    /** no easing applied  */
+    progress: number,
+    key: K,
+  ) => number | undefined;
+  onStep: (values: T) => void;
+  duration?: number;
+  onStart?: () => void;
+  onEnd?: () => void;
+  onCancel?: () => void;
+}) => {
   let canceled = false;
   let frameId = 0;
   let startTime: number;
 
-  const duration = opts?.duration || 250; // default animation to 0.25 seconds
-  const easeFn = opts?.easeFn || easeOut; // default the easeFn to easeOut
-
   function step(timestamp: number) {
     if (canceled) {
       return;
     }
     if (startTime === undefined) {
       startTime = timestamp;
+      onStart?.();
     }
 
-    const elapsed = timestamp - startTime;
+    const elapsed = Math.min(timestamp - startTime, duration);
+    const factor = easeOut(elapsed / duration);
+
+    const newValues = {} as T;
+
+    Object.keys(fromValues).forEach((key) => {
+      const _key = key as keyof T;
+      const result = ((toValues[_key] - fromValues[_key]) * factor +
+        fromValues[_key]) as T[keyof T];
+      newValues[_key] = result;
+    });
+
+    onStep(newValues);
 
     if (elapsed < duration) {
-      // console.log(elapsed, duration, elapsed / duration);
-      const factor = easeFn(elapsed / duration);
-      const newValues = fromValues.map(
-        (fromValue, index) =>
-          (toValues[index] - fromValue) * factor + fromValue,
-      );
+      const progress = elapsed / duration;
+
+      const newValues = {} as T;
+
+      Object.keys(fromValues).forEach((key) => {
+        const _key = key as K;
+        const startValue = fromValues[_key];
+        const endValue = toValues[_key];
+
+        let result;
+
+        result = interpolateValue
+          ? interpolateValue(startValue, endValue, progress, _key)
+          : easeOutInterpolate(startValue, endValue, progress);
+
+        if (result == null) {
+          result = easeOutInterpolate(startValue, endValue, progress);
+        }
+
+        newValues[_key] = result as T[K];
+      });
+      onStep(newValues);
 
-      callback(...newValues);
       frameId = window.requestAnimationFrame(step);
     } else {
-      // ensure final values are reached at the end of the transition
-      callback(...toValues);
+      onStep(toValues);
+      onEnd?.();
     }
   }
 
   frameId = window.requestAnimationFrame(step);
 
   return () => {
+    onCancel?.();
     canceled = true;
     window.cancelAnimationFrame(frameId);
   };
@@ -293,7 +369,7 @@ export const distance = (x: number, y: number) => Math.abs(x - y);
 export const updateActiveTool = (
   appState: Pick<AppState, "activeTool">,
   data: (
-    | { type: typeof SHAPES[number]["value"] | "eraser" | "hand" }
+    | { type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame" }
     | { type: "custom"; customType: string }
   ) & { lastActiveToolBeforeEraser?: LastActiveTool },
 ): AppState["activeTool"] => {
@@ -372,7 +448,7 @@ export const setEraserCursor = (
 
 export const setCursorForShape = (
   canvas: HTMLCanvasElement | null,
-  appState: AppState,
+  appState: Pick<AppState, "activeTool" | "theme">,
 ) => {
   if (!canvas) {
     return;
@@ -529,7 +605,7 @@ export const isTransparent = (color: string) => {
   return (
     isRGBTransparent ||
     isRRGGBBTransparent ||
-    color === colors.elementBackground[0]
+    color === COLOR_PALETTE.transparent
   );
 };
 
@@ -742,6 +818,8 @@ export const getFrame = () => {
   }
 };
 
+export const isRunningInIframe = () => getFrame() === "iframe";
+
 export const isPromiseLike = (
   value: any,
 ): value is Promise<ResolutionType<typeof value>> => {
@@ -767,16 +845,35 @@ export const queryFocusableElements = (container: HTMLElement | null) => {
     : [];
 };
 
-export const isShallowEqual = <T extends Record<string, any>>(
+export const isShallowEqual = <
+  T extends Record<string, any>,
+  I extends keyof T,
+>(
   objA: T,
   objB: T,
+  comparators?: Record<I, (a: T[I], b: T[I]) => boolean>,
+  debug = false,
 ) => {
   const aKeys = Object.keys(objA);
-  const bKeys = Object.keys(objA);
+  const bKeys = Object.keys(objB);
   if (aKeys.length !== bKeys.length) {
     return false;
   }
-  return aKeys.every((key) => objA[key] === objB[key]);
+  return aKeys.every((key) => {
+    const comparator = comparators?.[key as I];
+    const ret = comparator
+      ? comparator(objA[key], objB[key])
+      : objA[key] === objB[key];
+    if (!ret && debug) {
+      console.info(
+        `%cisShallowEqual: ${key} not equal ->`,
+        "color: #8B4000",
+        objA[key],
+        objB[key],
+      );
+    }
+    return ret;
+  });
 };
 
 // taken from Radix UI
@@ -797,3 +894,16 @@ export const composeEventHandlers = <E>(
     }
   };
 };
+
+export const isOnlyExportingSingleFrame = (
+  elements: readonly NonDeletedExcalidrawElement[],
+) => {
+  const frames = elements.filter((element) => element.type === "frame");
+
+  return (
+    frames.length === 1 &&
+    elements.every(
+      (element) => element.type === "frame" || element.frameId === frames[0].id,
+    )
+  );
+};
diff --git a/src/zindex.ts b/src/zindex.ts
index 4b96c8eb4..a1f051c54 100644
--- a/src/zindex.ts
+++ b/src/zindex.ts
@@ -1,36 +1,52 @@
 import { bumpVersion } from "./element/mutateElement";
+import { isFrameElement } from "./element/typeChecks";
 import { ExcalidrawElement } from "./element/types";
+import { groupByFrames } from "./frame";
 import { getElementsInGroup } from "./groups";
 import { getSelectedElements } from "./scene";
 import Scene from "./scene/Scene";
 import { AppState } from "./types";
 import { arrayToMap, findIndex, findLastIndex } from "./utils";
 
+// elements that do not belong to a frame are considered a root element
+const isRootElement = (element: ExcalidrawElement) => {
+  return !element.frameId;
+};
+
 /**
  * Returns indices of elements to move based on selected elements.
  * Includes contiguous deleted elements that are between two selected elements,
  *  e.g.: [0 (selected), 1 (deleted), 2 (deleted), 3 (selected)]
+ *
+ * Specified elements (elementsToBeMoved) take precedence over
+ * appState.selectedElementsIds
  */
 const getIndicesToMove = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
+  elementsToBeMoved?: readonly ExcalidrawElement[],
 ) => {
   let selectedIndices: number[] = [];
   let deletedIndices: number[] = [];
   let includeDeletedIndex = null;
   let index = -1;
   const selectedElementIds = arrayToMap(
-    getSelectedElements(elements, appState, true),
+    elementsToBeMoved
+      ? elementsToBeMoved
+      : getSelectedElements(elements, appState, {
+          includeBoundTextElement: true,
+        }),
   );
   while (++index < elements.length) {
-    if (selectedElementIds.get(elements[index].id)) {
+    const element = elements[index];
+    if (selectedElementIds.get(element.id)) {
       if (deletedIndices.length) {
         selectedIndices = selectedIndices.concat(deletedIndices);
         deletedIndices = [];
       }
       selectedIndices.push(index);
       includeDeletedIndex = index + 1;
-    } else if (elements[index].isDeleted && includeDeletedIndex === index) {
+    } else if (element.isDeleted && includeDeletedIndex === index) {
       includeDeletedIndex = index + 1;
       deletedIndices.push(index);
     } else {
@@ -168,8 +184,8 @@ const getTargetIndex = (
   return candidateIndex;
 };
 
-const getTargetElementsMap = (
-  elements: readonly ExcalidrawElement[],
+const getTargetElementsMap = <T extends ExcalidrawElement>(
+  elements: readonly T[],
   indices: number[],
 ) => {
   return indices.reduce((acc, index) => {
@@ -179,12 +195,13 @@ const getTargetElementsMap = (
   }, {} as Record<string, ExcalidrawElement>);
 };
 
-const shiftElements = (
-  appState: AppState,
+const _shiftElements = (
   elements: readonly ExcalidrawElement[],
+  appState: AppState,
   direction: "left" | "right",
+  elementsToBeMoved?: readonly ExcalidrawElement[],
 ) => {
-  const indicesToMove = getIndicesToMove(elements, appState);
+  const indicesToMove = getIndicesToMove(elements, appState, elementsToBeMoved);
   const targetElementsMap = getTargetElementsMap(elements, indicesToMove);
   let groupedIndices = toContiguousGroups(indicesToMove);
 
@@ -246,7 +263,22 @@ const shiftElements = (
   });
 };
 
-const shiftElementsToEnd = (
+const shiftElements = (
+  appState: AppState,
+  elements: readonly ExcalidrawElement[],
+  direction: "left" | "right",
+  elementsToBeMoved?: readonly ExcalidrawElement[],
+) => {
+  return shift(
+    elements,
+    appState,
+    direction,
+    _shiftElements,
+    elementsToBeMoved,
+  );
+};
+
+const _shiftElementsToEnd = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
   direction: "left" | "right",
@@ -317,33 +349,121 @@ const shiftElementsToEnd = (
       ];
 };
 
+const shiftElementsToEnd = (
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+  direction: "left" | "right",
+  elementsToBeMoved?: readonly ExcalidrawElement[],
+) => {
+  return shift(
+    elements,
+    appState,
+    direction,
+    _shiftElementsToEnd,
+    elementsToBeMoved,
+  );
+};
+
+function shift(
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+  direction: "left" | "right",
+  shiftFunction: (
+    elements: ExcalidrawElement[],
+    appState: AppState,
+    direction: "left" | "right",
+    elementsToBeMoved?: readonly ExcalidrawElement[],
+  ) => ExcalidrawElement[] | readonly ExcalidrawElement[],
+  elementsToBeMoved?: readonly ExcalidrawElement[],
+) {
+  const elementsMap = arrayToMap(elements);
+  const frameElementsMap = groupByFrames(elements);
+
+  // in case root is non-existent, we promote children elements to root
+  let rootElements = elements.filter(
+    (element) =>
+      isRootElement(element) ||
+      (element.frameId && !elementsMap.has(element.frameId)),
+  );
+  // and remove non-existet root
+  for (const frameId of frameElementsMap.keys()) {
+    if (!elementsMap.has(frameId)) {
+      frameElementsMap.delete(frameId);
+    }
+  }
+
+  // shift the root elements first
+  rootElements = shiftFunction(
+    rootElements,
+    appState,
+    direction,
+    elementsToBeMoved,
+  ) as ExcalidrawElement[];
+
+  // shift the elements in frames if needed
+  frameElementsMap.forEach((frameElements, frameId) => {
+    if (!appState.selectedElementIds[frameId]) {
+      frameElementsMap.set(
+        frameId,
+        shiftFunction(
+          frameElements,
+          appState,
+          direction,
+          elementsToBeMoved,
+        ) as ExcalidrawElement[],
+      );
+    }
+  });
+
+  // return the final elements
+  let finalElements: ExcalidrawElement[] = [];
+
+  rootElements.forEach((element) => {
+    if (isFrameElement(element)) {
+      finalElements = [
+        ...finalElements,
+        ...(frameElementsMap.get(element.id) ?? []),
+        element,
+      ];
+    } else {
+      finalElements = [...finalElements, element];
+    }
+  });
+
+  return finalElements;
+}
+
 // public API
 // -----------------------------------------------------------------------------
 
 export const moveOneLeft = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
+  elementsToBeMoved?: readonly ExcalidrawElement[],
 ) => {
-  return shiftElements(appState, elements, "left");
+  return shiftElements(appState, elements, "left", elementsToBeMoved);
 };
 
 export const moveOneRight = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
+  elementsToBeMoved?: readonly ExcalidrawElement[],
 ) => {
-  return shiftElements(appState, elements, "right");
+  return shiftElements(appState, elements, "right", elementsToBeMoved);
 };
 
 export const moveAllLeft = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
+  elementsToBeMoved?: readonly ExcalidrawElement[],
 ) => {
-  return shiftElementsToEnd(elements, appState, "left");
+  return shiftElementsToEnd(elements, appState, "left", elementsToBeMoved);
 };
 
 export const moveAllRight = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
+  elementsToBeMoved?: readonly ExcalidrawElement[],
 ) => {
-  return shiftElementsToEnd(elements, appState, "right");
+  return shiftElementsToEnd(elements, appState, "right", elementsToBeMoved);
 };
diff --git a/yarn.lock b/yarn.lock
index 1e0bde998..e0501f9aa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,12 +2,12 @@
 # yarn lockfile v1
 
 
-"@ampproject/remapping@^2.1.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
-  integrity sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==
+"@ampproject/remapping@^2.2.0":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"
+  integrity sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==
   dependencies:
-    "@jridgewell/gen-mapping" "^0.1.0"
+    "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
 "@apideck/better-ajv-errors@^0.3.1":
@@ -26,90 +26,56 @@
   dependencies:
     "@babel/highlight" "^7.10.4"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.0", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.8.3":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
-  integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.0", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.21.4", "@babel/code-frame@^7.8.3":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.21.4.tgz#d0fa9e4413aca81f2b23b9442797bda1826edb39"
+  integrity sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==
   dependencies:
     "@babel/highlight" "^7.18.6"
 
-"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.19.4", "@babel/compat-data@^7.20.0":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.0.tgz#9b61938c5f688212c7b9ae363a819df7d29d4093"
-  integrity sha512-Gt9jszFJYq7qzXVK4slhc6NzJXnOVmRECWcVjF/T23rNXD9NtWQ0W3qxdg+p9wWIB+VQw3GYV/U2Ha9bRTfs4w==
+"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.20.5", "@babel/compat-data@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.21.4.tgz#457ffe647c480dff59c2be092fc3acf71195c87f"
+  integrity sha512-/DYyDpeCfaVinT40FPGdkkb+lYSKvsVuMjDAG7jPOWWiM1ibOaB9CXJAlc4d1QpP/U2q2P9jbrSlClKSErd55g==
 
-"@babel/compat-data@^7.20.1":
-  version "7.20.1"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.1.tgz#f2e6ef7790d8c8dbf03d379502dcc246dcce0b30"
-  integrity sha512-EWZ4mE2diW3QALKvDMiXnbZpRvlj+nayZ112nK93SnhqOtpdsbVD4W+2tEoT3YNBAG9RBR0ISY758ZkOgsn6pQ==
-
-"@babel/core@^7.1.0", "@babel/core@^7.12.3", "@babel/core@^7.16.0":
-  version "7.19.6"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.19.6.tgz#7122ae4f5c5a37c0946c066149abd8e75f81540f"
-  integrity sha512-D2Ue4KHpc6Ys2+AxpIx1BZ8+UegLLLE2p3KJEuJRKmokHOtl49jQ5ny1773KsGLZs8MQvBidAF6yWUJxRqtKtg==
+"@babel/core@^7.1.0", "@babel/core@^7.11.1", "@babel/core@^7.12.3", "@babel/core@^7.16.0", "@babel/core@^7.7.2", "@babel/core@^7.8.0":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.21.4.tgz#c6dc73242507b8e2a27fd13a9c1814f9fa34a659"
+  integrity sha512-qt/YV149Jman/6AfmlxJ04LMIu8bMoyl3RB91yTFrxQmgbrSvQMy7cI8Q62FHx1t8wJ8B5fu0UDoLwHAhUo1QA==
   dependencies:
-    "@ampproject/remapping" "^2.1.0"
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.19.6"
-    "@babel/helper-compilation-targets" "^7.19.3"
-    "@babel/helper-module-transforms" "^7.19.6"
-    "@babel/helpers" "^7.19.4"
-    "@babel/parser" "^7.19.6"
-    "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.19.6"
-    "@babel/types" "^7.19.4"
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.21.4"
+    "@babel/generator" "^7.21.4"
+    "@babel/helper-compilation-targets" "^7.21.4"
+    "@babel/helper-module-transforms" "^7.21.2"
+    "@babel/helpers" "^7.21.0"
+    "@babel/parser" "^7.21.4"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.21.4"
+    "@babel/types" "^7.21.4"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
-    json5 "^2.2.1"
-    semver "^6.3.0"
-
-"@babel/core@^7.11.1", "@babel/core@^7.7.2", "@babel/core@^7.8.0":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.20.2.tgz#8dc9b1620a673f92d3624bd926dc49a52cf25b92"
-  integrity sha512-w7DbG8DtMrJcFOi4VrLm+8QM4az8Mo+PuLBKLp2zrYRCow8W/f9xiXm5sN53C8HksCyDQwCKha9JiDoIyPjT2g==
-  dependencies:
-    "@ampproject/remapping" "^2.1.0"
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.20.2"
-    "@babel/helper-compilation-targets" "^7.20.0"
-    "@babel/helper-module-transforms" "^7.20.2"
-    "@babel/helpers" "^7.20.1"
-    "@babel/parser" "^7.20.2"
-    "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.20.1"
-    "@babel/types" "^7.20.2"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.2"
-    json5 "^2.2.1"
+    json5 "^2.2.2"
     semver "^6.3.0"
 
 "@babel/eslint-parser@^7.16.3":
-  version "7.19.1"
-  resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.19.1.tgz#4f68f6b0825489e00a24b41b6a1ae35414ecd2f4"
-  integrity sha512-AqNf2QWt1rtu2/1rLswy6CDP7H9Oh3mMhk177Y67Rg8d7RD9WfOLLv8CGn6tisFvS2htm86yIe1yLF6I1UDaGQ==
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.21.3.tgz#d79e822050f2de65d7f368a076846e7184234af7"
+  integrity sha512-kfhmPimwo6k4P8zxNs8+T7yR44q1LdpsZdE1NkCsVlfiuTPRfnGgjaF8Qgug9q9Pou17u6wneYF0lDCZJATMFg==
   dependencies:
     "@nicolo-ribaudo/eslint-scope-5-internals" "5.1.1-v1"
     eslint-visitor-keys "^2.1.0"
     semver "^6.3.0"
 
-"@babel/generator@^7.19.6", "@babel/generator@^7.20.0":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.20.0.tgz#0bfc5379e0efb05ca6092091261fcdf7ec36249d"
-  integrity sha512-GUPcXxWibClgmYJuIwC2Bc2Lg+8b9VjaJ+HlNdACEVt+Wlr1eoU1OPZjZRm7Hzl0gaTsUZNQfeihvZJhG7oc3w==
+"@babel/generator@^7.21.4", "@babel/generator@^7.7.2":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.21.4.tgz#64a94b7448989f421f919d5239ef553b37bb26bc"
+  integrity sha512-NieM3pVIYW2SwGzKoqfPrQsf4xGs9M9AIG3ThppsSRmO+m7eQhmI6amajKMUeIO37wFfsvnvcxQFx6x6iqxDnA==
   dependencies:
-    "@babel/types" "^7.20.0"
-    "@jridgewell/gen-mapping" "^0.3.2"
-    jsesc "^2.5.1"
-
-"@babel/generator@^7.20.1", "@babel/generator@^7.20.2", "@babel/generator@^7.7.2":
-  version "7.20.4"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.20.4.tgz#4d9f8f0c30be75fd90a0562099a26e5839602ab8"
-  integrity sha512-luCf7yk/cm7yab6CAW1aiFnmEfBJplb/JojV56MYEK7ziWfGmFlTfmL9Ehwfy4gFhbjBfWO1wj7/TuSbVNEEtA==
-  dependencies:
-    "@babel/types" "^7.20.2"
+    "@babel/types" "^7.21.4"
     "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
 
 "@babel/helper-annotate-as-pure@^7.18.6":
@@ -127,36 +93,38 @@
     "@babel/helper-explode-assignable-expression" "^7.18.6"
     "@babel/types" "^7.18.9"
 
-"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9", "@babel/helper-compilation-targets@^7.19.0", "@babel/helper-compilation-targets@^7.19.3", "@babel/helper-compilation-targets@^7.20.0":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.0.tgz#6bf5374d424e1b3922822f1d9bdaa43b1a139d0a"
-  integrity sha512-0jp//vDGp9e8hZzBc6N/KwA5ZK3Wsm/pfm4CrY7vzegkVxc65SgSn6wYOnwHe9Js9HRQ1YTCKLGPzDtaS3RoLQ==
+"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9", "@babel/helper-compilation-targets@^7.20.7", "@babel/helper-compilation-targets@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.4.tgz#770cd1ce0889097ceacb99418ee6934ef0572656"
+  integrity sha512-Fa0tTuOXZ1iL8IeDFUWCzjZcn+sJGd9RZdH9esYVjEejGmzf+FFYQpMi/kZUk2kPy/q1H3/GPw7np8qar/stfg==
   dependencies:
-    "@babel/compat-data" "^7.20.0"
-    "@babel/helper-validator-option" "^7.18.6"
+    "@babel/compat-data" "^7.21.4"
+    "@babel/helper-validator-option" "^7.21.0"
     browserslist "^4.21.3"
+    lru-cache "^5.1.1"
     semver "^6.3.0"
 
-"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.19.0":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.19.0.tgz#bfd6904620df4e46470bae4850d66be1054c404b"
-  integrity sha512-NRz8DwF4jT3UfrmUoZjd0Uph9HQnP30t7Ash+weACcyNkiYTywpIjDBgReJMKgr+n86sn2nPVVmJ28Dm053Kqw==
+"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.21.0":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.4.tgz#3a017163dc3c2ba7deb9a7950849a9586ea24c18"
+  integrity sha512-46QrX2CQlaFRF4TkwfTt6nJD7IHq8539cCL7SDpqWSDeJKY1xylKKY5F/33mJhLZ3mFvKv2gGrVS6NkyF6qs+Q==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.18.6"
     "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.19.0"
-    "@babel/helper-member-expression-to-functions" "^7.18.9"
+    "@babel/helper-function-name" "^7.21.0"
+    "@babel/helper-member-expression-to-functions" "^7.21.0"
     "@babel/helper-optimise-call-expression" "^7.18.6"
-    "@babel/helper-replace-supers" "^7.18.9"
+    "@babel/helper-replace-supers" "^7.20.7"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
     "@babel/helper-split-export-declaration" "^7.18.6"
 
-"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.19.0":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.19.0.tgz#7976aca61c0984202baca73d84e2337a5424a41b"
-  integrity sha512-htnV+mHX32DF81amCDrwIDr8nrp1PTm+3wfBN9/v8QJOLEioOCOG7qNyq0nHeFiWbT3Eb7gsPwEmV64UCQ1jzw==
+"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.20.5":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.21.4.tgz#40411a8ab134258ad2cf3a3d987ec6aa0723cee5"
+  integrity sha512-M00OuhU+0GyZ5iBBN9czjugzWrEq2vDpf/zCYHxxf93ul/Q5rv+a5h+/+0WnI1AebHNVtl5bFV0qsJoH23DbfA==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.18.6"
-    regexpu-core "^5.1.0"
+    regexpu-core "^5.3.1"
 
 "@babel/helper-define-polyfill-provider@^0.3.3":
   version "0.3.3"
@@ -182,13 +150,13 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-function-name@^7.18.9", "@babel/helper-function-name@^7.19.0":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz#941574ed5390682e872e52d3f38ce9d1bef4648c"
-  integrity sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==
+"@babel/helper-function-name@^7.18.9", "@babel/helper-function-name@^7.19.0", "@babel/helper-function-name@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz#d552829b10ea9f120969304023cd0645fa00b1b4"
+  integrity sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==
   dependencies:
-    "@babel/template" "^7.18.10"
-    "@babel/types" "^7.19.0"
+    "@babel/template" "^7.20.7"
+    "@babel/types" "^7.21.0"
 
 "@babel/helper-hoist-variables@^7.18.6":
   version "7.18.6"
@@ -197,47 +165,33 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-member-expression-to-functions@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.18.9.tgz#1531661e8375af843ad37ac692c132841e2fd815"
-  integrity sha512-RxifAh2ZoVU67PyKIO4AMi1wTenGfMR/O/ae0CCRqwgBAt5v7xjdtRw7UoSbsreKrQn5t7r89eruK/9JjYHuDg==
+"@babel/helper-member-expression-to-functions@^7.20.7", "@babel/helper-member-expression-to-functions@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.0.tgz#319c6a940431a133897148515877d2f3269c3ba5"
+  integrity sha512-Muu8cdZwNN6mRRNG6lAYErJ5X3bRevgYR2O8wN0yn7jJSnGDu6eG59RfT29JHxGUovyfrh6Pj0XzmR7drNVL3Q==
   dependencies:
-    "@babel/types" "^7.18.9"
+    "@babel/types" "^7.21.0"
 
-"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
-  integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
+"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz#ac88b2f76093637489e718a90cec6cf8a9b029af"
+  integrity sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==
   dependencies:
-    "@babel/types" "^7.18.6"
+    "@babel/types" "^7.21.4"
 
-"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.19.6":
-  version "7.19.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.19.6.tgz#6c52cc3ac63b70952d33ee987cbee1c9368b533f"
-  integrity sha512-fCmcfQo/KYr/VXXDIyd3CBGZ6AFhPFy1TfSEJ+PilGVlQT6jcbqtHAM4C1EciRqMza7/TpOUZliuSH+U6HAhJw==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-simple-access" "^7.19.4"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/helper-validator-identifier" "^7.19.1"
-    "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.19.6"
-    "@babel/types" "^7.19.4"
-
-"@babel/helper-module-transforms@^7.20.2":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.20.2.tgz#ac53da669501edd37e658602a21ba14c08748712"
-  integrity sha512-zvBKyJXRbmK07XhMuujYoJ48B5yvvmM6+wcpv6Ivj4Yg6qO7NOZOSnvZN9CRl1zz1Z4cKf8YejmCMh8clOoOeA==
+"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.20.11", "@babel/helper-module-transforms@^7.21.2":
+  version "7.21.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz#160caafa4978ac8c00ac66636cb0fa37b024e2d2"
+  integrity sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==
   dependencies:
     "@babel/helper-environment-visitor" "^7.18.9"
     "@babel/helper-module-imports" "^7.18.6"
     "@babel/helper-simple-access" "^7.20.2"
     "@babel/helper-split-export-declaration" "^7.18.6"
     "@babel/helper-validator-identifier" "^7.19.1"
-    "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.20.1"
-    "@babel/types" "^7.20.2"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.21.2"
+    "@babel/types" "^7.21.2"
 
 "@babel/helper-optimise-call-expression@^7.18.6":
   version "7.18.6"
@@ -246,17 +200,12 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.19.0.tgz#4796bb14961521f0f8715990bee2fb6e51ce21bf"
-  integrity sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw==
-
-"@babel/helper-plugin-utils@^7.20.2":
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
   version "7.20.2"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz#d1b9000752b18d0877cff85a5c376ce5c3121629"
   integrity sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==
 
-"@babel/helper-remap-async-to-generator@^7.18.6", "@babel/helper-remap-async-to-generator@^7.18.9":
+"@babel/helper-remap-async-to-generator@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz#997458a0e3357080e54e1d79ec347f8a8cd28519"
   integrity sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==
@@ -266,23 +215,17 @@
     "@babel/helper-wrap-function" "^7.18.9"
     "@babel/types" "^7.18.9"
 
-"@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.18.9", "@babel/helper-replace-supers@^7.19.1":
-  version "7.19.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.19.1.tgz#e1592a9b4b368aa6bdb8784a711e0bcbf0612b78"
-  integrity sha512-T7ahH7wV0Hfs46SFh5Jz3s0B6+o8g3c+7TMxu7xKfmHikg7EAZ3I2Qk9LFhjxXq8sL7UkP5JflezNwoZa8WvWw==
+"@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz#243ecd2724d2071532b2c8ad2f0f9f083bcae331"
+  integrity sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==
   dependencies:
     "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-member-expression-to-functions" "^7.18.9"
+    "@babel/helper-member-expression-to-functions" "^7.20.7"
     "@babel/helper-optimise-call-expression" "^7.18.6"
-    "@babel/traverse" "^7.19.1"
-    "@babel/types" "^7.19.0"
-
-"@babel/helper-simple-access@^7.19.4":
-  version "7.19.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.19.4.tgz#be553f4951ac6352df2567f7daa19a0ee15668e7"
-  integrity sha512-f9Xq6WqBFqaDfbCzn2w85hwklswz5qsKlh7f08w4Y9yhJHpnNC0QemtSkK5YyOY8kPGvyiwdzZksGUhnGdaUIg==
-  dependencies:
-    "@babel/types" "^7.19.4"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.20.7"
+    "@babel/types" "^7.20.7"
 
 "@babel/helper-simple-access@^7.20.2":
   version "7.20.2"
@@ -291,7 +234,7 @@
   dependencies:
     "@babel/types" "^7.20.2"
 
-"@babel/helper-skip-transparent-expression-wrappers@^7.18.9":
+"@babel/helper-skip-transparent-expression-wrappers@^7.20.0":
   version "7.20.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz#fbe4c52f60518cab8140d77101f0e63a8a230684"
   integrity sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==
@@ -315,38 +258,29 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
   integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
 
-"@babel/helper-validator-option@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
-  integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
+"@babel/helper-validator-option@^7.18.6", "@babel/helper-validator-option@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz#8224c7e13ace4bafdc4004da2cf064ef42673180"
+  integrity sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==
 
 "@babel/helper-wrap-function@^7.18.9":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.19.0.tgz#89f18335cff1152373222f76a4b37799636ae8b1"
-  integrity sha512-txX8aN8CZyYGTwcLhlk87KRqncAzhh5TpQamZUa0/u3an36NtDpUP6bQgBCBcLeBs09R/OwQu3OjK0k/HwfNDg==
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz#75e2d84d499a0ab3b31c33bcfe59d6b8a45f62e3"
+  integrity sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==
   dependencies:
     "@babel/helper-function-name" "^7.19.0"
     "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.19.0"
-    "@babel/types" "^7.19.0"
+    "@babel/traverse" "^7.20.5"
+    "@babel/types" "^7.20.5"
 
-"@babel/helpers@^7.19.4":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.20.0.tgz#27c8ffa8cc32a2ed3762fba48886e7654dbcf77f"
-  integrity sha512-aGMjYraN0zosCEthoGLdqot1oRsmxVTQRHadsUPz5QM44Zej2PYRz7XiDE7GqnkZnNtLbOuxqoZw42vkU7+XEQ==
+"@babel/helpers@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.21.0.tgz#9dd184fb5599862037917cdc9eecb84577dc4e7e"
+  integrity sha512-XXve0CBtOW0pd7MRzzmoyuSj0e3SEzj8pgyFxnTT1NJZL38BD1MK7yYrm8yefRPIDvNNe14xR4FdbHwpInD4rA==
   dependencies:
-    "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.20.0"
-    "@babel/types" "^7.20.0"
-
-"@babel/helpers@^7.20.1":
-  version "7.20.1"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.20.1.tgz#2ab7a0fcb0a03b5bf76629196ed63c2d7311f4c9"
-  integrity sha512-J77mUVaDTUJFZ5BpP6mMn6OIl3rEWymk2ZxDBQJUG3P+PbmyMcF3bYWvz0ma69Af1oobDqT/iAsvzhB58xhQUg==
-  dependencies:
-    "@babel/template" "^7.18.10"
-    "@babel/traverse" "^7.20.1"
-    "@babel/types" "^7.20.0"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.21.0"
+    "@babel/types" "^7.21.0"
 
 "@babel/highlight@^7.10.4", "@babel/highlight@^7.18.6":
   version "7.18.6"
@@ -357,15 +291,10 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.18.10", "@babel/parser@^7.19.6", "@babel/parser@^7.20.0":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.0.tgz#b26133c888da4d79b0d3edcf42677bcadc783046"
-  integrity sha512-G9VgAhEaICnz8iiJeGJQyVl6J2nTjbW0xeisva0PK6XcKsga7BIaqm4ZF8Rg1Wbaqmy6znspNqhPaPkyukujzg==
-
-"@babel/parser@^7.20.1", "@babel/parser@^7.20.2":
-  version "7.20.3"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.3.tgz#5358cf62e380cf69efcb87a7bb922ff88bfac6e2"
-  integrity sha512-OP/s5a94frIPXwjzEcv5S/tpQfc6XhxYUnmWpgdqMWGgYCuErA3SzozaRAMQgSZWKeTJxht9aWAkUY+0UzvOFg==
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.4.tgz#94003fdfc520bbe2875d4ae557b43ddb6d880f17"
+  integrity sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw==
 
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
   version "7.18.6"
@@ -374,32 +303,22 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.18.9.tgz#a11af19aa373d68d561f08e0a57242350ed0ec50"
-  integrity sha512-AHrP9jadvH7qlOj6PINbgSuphjQUAK7AOT7DPjBo9EHoLhQTnnK5u45e1Hd4DbSQEO9nqPWtQ89r+XEOWFScKg==
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.20.7.tgz#d9c85589258539a22a901033853101a6198d4ef1"
+  integrity sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
-    "@babel/plugin-proposal-optional-chaining" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
+    "@babel/plugin-proposal-optional-chaining" "^7.20.7"
 
-"@babel/plugin-proposal-async-generator-functions@^7.19.1":
-  version "7.19.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.19.1.tgz#34f6f5174b688529342288cd264f80c9ea9fb4a7"
-  integrity sha512-0yu8vNATgLy4ivqMNBIwb1HebCelqN7YX8SL3FDXORv/RqT0zEEWUCH4GH44JsSrvCu6GqnAdR5EBFAPeNBB4Q==
+"@babel/plugin-proposal-async-generator-functions@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz#bfb7276d2d573cb67ba379984a2334e262ba5326"
+  integrity sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==
   dependencies:
     "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-plugin-utils" "^7.19.0"
-    "@babel/helper-remap-async-to-generator" "^7.18.9"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-
-"@babel/plugin-proposal-async-generator-functions@^7.20.1":
-  version "7.20.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.1.tgz#352f02baa5d69f4e7529bdac39aaa02d41146af9"
-  integrity sha512-Gh5rchzSwE4kC+o/6T8waD0WHEQIsDmjltY8WnWRXHUdH8axZhuH86Ov9M72YhJfDrZseQwuuWaaIT/TmePp3g==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/helper-remap-async-to-generator" "^7.18.9"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
 
@@ -411,25 +330,25 @@
     "@babel/helper-create-class-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-proposal-class-static-block@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.18.6.tgz#8aa81d403ab72d3962fc06c26e222dacfc9b9020"
-  integrity sha512-+I3oIiNxrCpup3Gi8n5IGMwj0gOCAjcJUSQEcotNnCCPMEnixawOQ+KeJPlgfjzx+FKQ1QSyZOWe7wmoJp7vhw==
+"@babel/plugin-proposal-class-static-block@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.21.0.tgz#77bdd66fb7b605f3a61302d224bdfacf5547977d"
+  integrity sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-create-class-features-plugin" "^7.21.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
 
 "@babel/plugin-proposal-decorators@^7.16.4":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.20.0.tgz#3acef1f1206d7a6a1436aa6ccf9ed7b1bd06aff7"
-  integrity sha512-vnuRRS20ygSxclEYikHzVrP9nZDFXaSzvJxGLQNAiBX041TmhS4hOUHWNIpq/q4muENuEP9XPJFXTNFejhemkg==
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.21.0.tgz#70e0c89fdcd7465c97593edb8f628ba6e4199d63"
+  integrity sha512-MfgX49uRrFUTL/HvWtmx3zmpyzMMr4MTj3d527MLlr/4RTT9G/ytFFP7qet2uM2Ve03b+BkpWUpK+lRXnQ+v9w==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.19.0"
-    "@babel/helper-plugin-utils" "^7.19.0"
-    "@babel/helper-replace-supers" "^7.19.1"
+    "@babel/helper-create-class-features-plugin" "^7.21.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-replace-supers" "^7.20.7"
     "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/plugin-syntax-decorators" "^7.19.0"
+    "@babel/plugin-syntax-decorators" "^7.21.0"
 
 "@babel/plugin-proposal-dynamic-import@^7.18.6":
   version "7.18.6"
@@ -455,12 +374,12 @@
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
 
-"@babel/plugin-proposal-logical-assignment-operators@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.18.9.tgz#8148cbb350483bf6220af06fa6db3690e14b2e23"
-  integrity sha512-128YbMpjCrP35IOExw2Fq+x55LMP42DzhOhX2aNNIdI9avSWl2PI0yuBWarr3RYpZBSPtabfadkH2yeRiMD61Q==
+"@babel/plugin-proposal-logical-assignment-operators@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz#dfbcaa8f7b4d37b51e8bfb46d94a5aea2bb89d83"
+  integrity sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
 "@babel/plugin-proposal-nullish-coalescing-operator@^7.16.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.18.6":
@@ -479,27 +398,16 @@
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-proposal-object-rest-spread@^7.19.4":
-  version "7.19.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.19.4.tgz#a8fc86e8180ff57290c91a75d83fe658189b642d"
-  integrity sha512-wHmj6LDxVDnL+3WhXteUBaoM1aVILZODAUjg11kHqG4cOlfgMQGxw6aCgvrXrmaJR3Bn14oZhImyCPZzRpC93Q==
+"@babel/plugin-proposal-object-rest-spread@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz#aa662940ef425779c75534a5c41e9d936edc390a"
+  integrity sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==
   dependencies:
-    "@babel/compat-data" "^7.19.4"
-    "@babel/helper-compilation-targets" "^7.19.3"
-    "@babel/helper-plugin-utils" "^7.19.0"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-transform-parameters" "^7.18.8"
-
-"@babel/plugin-proposal-object-rest-spread@^7.20.2":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.2.tgz#a556f59d555f06961df1e572bb5eca864c84022d"
-  integrity sha512-Ks6uej9WFK+fvIMesSqbAto5dD8Dz4VuuFvGJFKgIGSkJuRGcrwGECPA1fDgQK3/DbExBJpEkTeYeB8geIFCSQ==
-  dependencies:
-    "@babel/compat-data" "^7.20.1"
-    "@babel/helper-compilation-targets" "^7.20.0"
+    "@babel/compat-data" "^7.20.5"
+    "@babel/helper-compilation-targets" "^7.20.7"
     "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-transform-parameters" "^7.20.1"
+    "@babel/plugin-transform-parameters" "^7.20.7"
 
 "@babel/plugin-proposal-optional-catch-binding@^7.18.6":
   version "7.18.6"
@@ -509,13 +417,13 @@
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
-"@babel/plugin-proposal-optional-chaining@^7.16.0", "@babel/plugin-proposal-optional-chaining@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.18.9.tgz#e8e8fe0723f2563960e4bf5e9690933691915993"
-  integrity sha512-v5nwt4IqBXihxGsW2QmCWMDS3B3bzGIk/EQVZz2ei7f3NJl8NzAJVvUmpDW5q1CRNY+Beb/k58UAH1Km1N411w==
+"@babel/plugin-proposal-optional-chaining@^7.16.0", "@babel/plugin-proposal-optional-chaining@^7.20.7", "@babel/plugin-proposal-optional-chaining@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz#886f5c8978deb7d30f678b2e24346b287234d3ea"
+  integrity sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
 
 "@babel/plugin-proposal-private-methods@^7.16.0", "@babel/plugin-proposal-private-methods@^7.18.6":
@@ -526,14 +434,14 @@
     "@babel/helper-create-class-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-proposal-private-property-in-object@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.18.6.tgz#a64137b232f0aca3733a67eb1a144c192389c503"
-  integrity sha512-9Rysx7FOctvT5ouj5JODjAFAkgGoudQuLPamZb0v1TGLpapdNaftzifU8NTWQm0IRjqoYypdrSmyWgkocDQ8Dw==
+"@babel/plugin-proposal-private-property-in-object@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0.tgz#19496bd9883dd83c23c7d7fc45dcd9ad02dfa1dc"
+  integrity sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-create-class-features-plugin" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-create-class-features-plugin" "^7.21.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
 
 "@babel/plugin-proposal-unicode-property-regex@^7.18.6", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
@@ -572,12 +480,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-syntax-decorators@^7.19.0":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.19.0.tgz#5f13d1d8fce96951bea01a10424463c9a5b3a599"
-  integrity sha512-xaBZUEDntt4faL1yN8oIFlhfXeQAWJW7CLKYsHTUqriCUbj8xOra8bfxxKGi/UwExPFBuPdH4XfHc9rGQhrVkQ==
+"@babel/plugin-syntax-decorators@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.21.0.tgz#d2b3f31c3e86fa86e16bb540b7660c55bd7d0e78"
+  integrity sha512-tIoPpGBR8UuM4++ccWN3gifhVvQu7ZizuR1fklhRJrd5ewgbkUS+0KVFeWWxELtn18NTLoW32XV7zyOgIAiz+w==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
 
 "@babel/plugin-syntax-dynamic-import@^7.8.3":
   version "7.8.3"
@@ -594,13 +502,13 @@
     "@babel/helper-plugin-utils" "^7.8.3"
 
 "@babel/plugin-syntax-flow@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.18.6.tgz#774d825256f2379d06139be0c723c4dd444f3ca1"
-  integrity sha512-LUbR+KNTBWCUAqRG9ex5Gnzu2IOkt8jRJbHHXFT9q+L9zm7M/QQbEqXyw1n1pohYvOyWC8CjeyjrSaIwiYjK7A==
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.21.4.tgz#3e37fca4f06d93567c1cd9b75156422e90a67107"
+  integrity sha512-l9xd3N+XG4fZRxEP3vXdK6RW7vN1Uf5dxzRC/09wV86wqZ/YYQooBIGNsiRdfNR3/q2/5pPzV4B54J/9ctX5jw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.20.2"
 
-"@babel/plugin-syntax-import-assertions@^7.18.6", "@babel/plugin-syntax-import-assertions@^7.20.0":
+"@babel/plugin-syntax-import-assertions@^7.20.0":
   version "7.20.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz#bb50e0d4bea0957235390641209394e87bdb9cc4"
   integrity sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==
@@ -621,12 +529,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
-  integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
+"@babel/plugin-syntax-jsx@^7.18.6", "@babel/plugin-syntax-jsx@^7.21.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.21.4.tgz#f264ed7bf40ffc9ec239edabc17a50c4f5b6fea2"
+  integrity sha512-5hewiLct5OKyh6PLKEYaFclcqtIgCb6bmELouxjF6up5q3Sov7rOayW4RwhbaBL0dit8rA80GNfY+UuDp2mBbQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.20.2"
 
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4", "@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
   version "7.10.4"
@@ -685,27 +593,27 @@
     "@babel/helper-plugin-utils" "^7.14.5"
 
 "@babel/plugin-syntax-typescript@^7.20.0", "@babel/plugin-syntax-typescript@^7.7.2":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.20.0.tgz#4e9a0cfc769c85689b77a2e642d24e9f697fc8c7"
-  integrity sha512-rd9TkG+u1CExzS4SM1BlMEhMXwFLKVjOAFFCDx9PbX5ycJWDoWMcwdJH9RhkPu1dOgn5TrxLot/Gx6lWFuAUNQ==
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.21.4.tgz#2751948e9b7c6d771a8efa59340c15d4a2891ff8"
+  integrity sha512-xz0D39NvhQn4t4RNsHmDnnsaQizIlUkdtYvLs8La1BlfjQ6JEwxkJGeqJMW2tAXx+q6H+WFuUTXNdYVpEya0YA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
 
-"@babel/plugin-transform-arrow-functions@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.18.6.tgz#19063fcf8771ec7b31d742339dac62433d0611fe"
-  integrity sha512-9S9X9RUefzrsHZmKMbDXxweEH+YlE8JJEuat9FdvW9Qh1cw7W64jELCtWNkPBPX5En45uy28KGvA/AySqUh8CQ==
+"@babel/plugin-transform-arrow-functions@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.20.7.tgz#bea332b0e8b2dab3dafe55a163d8227531ab0551"
+  integrity sha512-3poA5E7dzDomxj9WXWwuD6A5F3kc7VXwIJO+E+J8qtDtS+pXPAhrgEyh+9GBwBgPq1Z+bB+/JD60lp5jsN7JPQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.20.2"
 
-"@babel/plugin-transform-async-to-generator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.18.6.tgz#ccda3d1ab9d5ced5265fdb13f1882d5476c71615"
-  integrity sha512-ARE5wZLKnTgPW7/1ftQmSi1CmkqqHo2DNmtztFhvgtOWSDfq0Cq9/9L+KnZNYSNrydBekhW3rwShduf59RoXag==
+"@babel/plugin-transform-async-to-generator@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz#dfee18623c8cb31deb796aa3ca84dda9cea94354"
+  integrity sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==
   dependencies:
     "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/helper-remap-async-to-generator" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-remap-async-to-generator" "^7.18.9"
 
 "@babel/plugin-transform-block-scoped-functions@^7.18.6":
   version "7.18.6"
@@ -714,68 +622,40 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-block-scoping@^7.19.4":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.20.0.tgz#91fe5e6ffc9ba13cb6c95ed7f0b1204f68c988c5"
-  integrity sha512-sXOohbpHZSk7GjxK9b3dKB7CfqUD5DwOH+DggKzOQ7TXYP+RCSbRykfjQmn/zq+rBjycVRtLf9pYhAaEJA786w==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.19.0"
-
-"@babel/plugin-transform-block-scoping@^7.20.2":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.20.2.tgz#f59b1767e6385c663fd0bce655db6ca9c8b236ed"
-  integrity sha512-y5V15+04ry69OV2wULmwhEA6jwSWXO1TwAtIwiPXcvHcoOQUqpyMVd2bDsQJMW8AurjulIyUV8kDqtjSwHy1uQ==
+"@babel/plugin-transform-block-scoping@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.21.0.tgz#e737b91037e5186ee16b76e7ae093358a5634f02"
+  integrity sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.20.2"
 
-"@babel/plugin-transform-classes@^7.19.0":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.19.0.tgz#0e61ec257fba409c41372175e7c1e606dc79bb20"
-  integrity sha512-YfeEE9kCjqTS9IitkgfJuxjcEtLUHMqa8yUJ6zdz8vR7hKuo6mOy2C05P0F1tdMmDCeuyidKnlrw/iTppHcr2A==
+"@babel/plugin-transform-classes@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz#f469d0b07a4c5a7dbb21afad9e27e57b47031665"
+  integrity sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-compilation-targets" "^7.19.0"
+    "@babel/helper-compilation-targets" "^7.20.7"
     "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.19.0"
-    "@babel/helper-optimise-call-expression" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.19.0"
-    "@babel/helper-replace-supers" "^7.18.9"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    globals "^11.1.0"
-
-"@babel/plugin-transform-classes@^7.20.2":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.20.2.tgz#c0033cf1916ccf78202d04be4281d161f6709bb2"
-  integrity sha512-9rbPp0lCVVoagvtEyQKSo5L8oo0nQS/iif+lwlAz29MccX2642vWDlSZK+2T2buxbopotId2ld7zZAzRfz9j1g==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.18.6"
-    "@babel/helper-compilation-targets" "^7.20.0"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-function-name" "^7.21.0"
     "@babel/helper-optimise-call-expression" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-replace-supers" "^7.19.1"
+    "@babel/helper-replace-supers" "^7.20.7"
     "@babel/helper-split-export-declaration" "^7.18.6"
     globals "^11.1.0"
 
-"@babel/plugin-transform-computed-properties@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.18.9.tgz#2357a8224d402dad623caf6259b611e56aec746e"
-  integrity sha512-+i0ZU1bCDymKakLxn5srGHrsAPRELC2WIbzwjLhHW9SIE1cPYkLCL0NlnXMZaM1vhfgA2+M7hySk42VBvrkBRw==
+"@babel/plugin-transform-computed-properties@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.20.7.tgz#704cc2fd155d1c996551db8276d55b9d46e4d0aa"
+  integrity sha512-Lz7MvBK6DTjElHAmfu6bfANzKcxpyNPeYBGEafyA6E5HtRpjpZwU+u7Qrgz/2OR0z+5TvKYbPdphfSaAcZBrYQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/template" "^7.20.7"
 
-"@babel/plugin-transform-destructuring@^7.19.4":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.20.0.tgz#712829ef4825d9cc04bb379de316f981e9a6f648"
-  integrity sha512-1dIhvZfkDVx/zn2S1aFwlruspTt4189j7fEkH0Y0VyuDM6bQt7bD6kLcz3l4IlLG+e5OReaBz9ROAbttRtUHqA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.19.0"
-
-"@babel/plugin-transform-destructuring@^7.20.2":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.20.2.tgz#c23741cfa44ddd35f5e53896e88c75331b8b2792"
-  integrity sha512-mENM+ZHrvEgxLTBXUiQ621rRXZes3KWUv6NdQlrnr1TkWVw+hUjQBZuP2X32qKlrlG2BzgR95gkuCRSkJl8vIw==
+"@babel/plugin-transform-destructuring@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.21.3.tgz#73b46d0fd11cd6ef57dea8a381b1215f4959d401"
+  integrity sha512-bp6hwMFzuiE4HqYEyoGJ/V2LeIWn+hLVKc4pnj++E5XQptwhtcGmSayM029d/j2X1bPKGTlsyPwAubuU22KhMA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.20.2"
 
@@ -803,19 +683,19 @@
     "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-transform-flow-strip-types@^7.16.0":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.19.0.tgz#e9e8606633287488216028719638cbbb2f2dde8f"
-  integrity sha512-sgeMlNaQVbCSpgLSKP4ZZKfsJVnFnNQlUSk6gPYzR/q7tzCgQF2t8RBKAP6cKJeZdveei7Q7Jm527xepI8lNLg==
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.21.0.tgz#6aeca0adcb81dc627c8986e770bfaa4d9812aff5"
+  integrity sha512-FlFA2Mj87a6sDkW4gfGrQQqwY/dLlBAyJa2dJEZ+FHXUVHBflO2wyKvg+OOEzXfrKYIa4HWl0mgmbCzt0cMb7w==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-flow" "^7.18.6"
 
-"@babel/plugin-transform-for-of@^7.18.8":
-  version "7.18.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.18.8.tgz#6ef8a50b244eb6a0bdbad0c7c61877e4e30097c1"
-  integrity sha512-yEfTRnjuskWYo0k1mHUqrVWaZwrdq8AYbfrpqULOJOaucGSp4mNMVps+YtA8byoevxS/urwU75vyhQIxcCgiBQ==
+"@babel/plugin-transform-for-of@^7.21.0":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.21.0.tgz#964108c9988de1a60b4be2354a7d7e245f36e86e"
+  integrity sha512-LlUYlydgDkKpIY7mcBWvyPPmMcOphEyYA27Ef4xpbh1IiDNLr0kZsos2nf92vz3IccvJI25QUwp86Eo5s6HmBQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.20.2"
 
 "@babel/plugin-transform-function-name@^7.18.9":
   version "7.18.9"
@@ -840,31 +720,31 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-modules-amd@^7.18.6", "@babel/plugin-transform-modules-amd@^7.19.6":
-  version "7.19.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.19.6.tgz#aca391801ae55d19c4d8d2ebfeaa33df5f2a2cbd"
-  integrity sha512-uG3od2mXvAtIFQIh0xrpLH6r5fpSQN04gIVovl+ODLdUMANokxQLZnPBHcjmv3GxRjnqwLuHvppjjcelqUFZvg==
+"@babel/plugin-transform-modules-amd@^7.20.11":
+  version "7.20.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz#3daccca8e4cc309f03c3a0c4b41dc4b26f55214a"
+  integrity sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==
   dependencies:
-    "@babel/helper-module-transforms" "^7.19.6"
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-module-transforms" "^7.20.11"
+    "@babel/helper-plugin-utils" "^7.20.2"
 
-"@babel/plugin-transform-modules-commonjs@^7.18.6", "@babel/plugin-transform-modules-commonjs@^7.19.6":
-  version "7.19.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.19.6.tgz#25b32feef24df8038fc1ec56038917eacb0b730c"
-  integrity sha512-8PIa1ym4XRTKuSsOUXqDG0YaOlEuTVvHMe5JCfgBMOtHvJKw/4NGovEGN33viISshG/rZNVrACiBmPQLvWN8xQ==
+"@babel/plugin-transform-modules-commonjs@^7.21.2":
+  version "7.21.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.2.tgz#6ff5070e71e3192ef2b7e39820a06fb78e3058e7"
+  integrity sha512-Cln+Yy04Gxua7iPdj6nOV96smLGjpElir5YwzF0LBPKoPlLDNJePNlrGGaybAJkd0zKRnOVXOgizSqPYMNYkzA==
   dependencies:
-    "@babel/helper-module-transforms" "^7.19.6"
-    "@babel/helper-plugin-utils" "^7.19.0"
-    "@babel/helper-simple-access" "^7.19.4"
+    "@babel/helper-module-transforms" "^7.21.2"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-simple-access" "^7.20.2"
 
-"@babel/plugin-transform-modules-systemjs@^7.19.0", "@babel/plugin-transform-modules-systemjs@^7.19.6":
-  version "7.19.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.19.6.tgz#59e2a84064b5736a4471b1aa7b13d4431d327e0d"
-  integrity sha512-fqGLBepcc3kErfR9R3DnVpURmckXP7gj7bAlrTQyBxrigFqszZCkFkcoxzCp2v32XmwXLvbw+8Yq9/b+QqksjQ==
+"@babel/plugin-transform-modules-systemjs@^7.20.11":
+  version "7.20.11"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.20.11.tgz#467ec6bba6b6a50634eea61c9c232654d8a4696e"
+  integrity sha512-vVu5g9BPQKSFEmvt2TA4Da5N+QVS66EX21d8uoOihC+OCpUoGvzVsXeqFdtAEfVa5BILAeFt+U7yVmLbQnAJmw==
   dependencies:
     "@babel/helper-hoist-variables" "^7.18.6"
-    "@babel/helper-module-transforms" "^7.19.6"
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-module-transforms" "^7.20.11"
+    "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/helper-validator-identifier" "^7.19.1"
 
 "@babel/plugin-transform-modules-umd@^7.18.6":
@@ -875,13 +755,13 @@
     "@babel/helper-module-transforms" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.19.1":
-  version "7.19.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.19.1.tgz#ec7455bab6cd8fb05c525a94876f435a48128888"
-  integrity sha512-oWk9l9WItWBQYS4FgXD4Uyy5kq898lvkXpXQxoJEY1RnvPk4R/Dvu2ebXU9q8lP+rlMwUQTFf2Ok6d78ODa0kw==
+"@babel/plugin-transform-named-capturing-groups-regex@^7.20.5":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.20.5.tgz#626298dd62ea51d452c3be58b285d23195ba69a8"
+  integrity sha512-mOW4tTzi5iTLnw+78iEq3gr8Aoq4WNRGpmSlrogqaiCBoR1HFhpU4JkpQFOHfeYx3ReVIFWOQJS4aZBRvuZ6mA==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.19.0"
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-create-regexp-features-plugin" "^7.20.5"
+    "@babel/helper-plugin-utils" "^7.20.2"
 
 "@babel/plugin-transform-new-target@^7.18.6":
   version "7.18.6"
@@ -898,17 +778,10 @@
     "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/helper-replace-supers" "^7.18.6"
 
-"@babel/plugin-transform-parameters@^7.18.8":
-  version "7.18.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.18.8.tgz#ee9f1a0ce6d78af58d0956a9378ea3427cccb48a"
-  integrity sha512-ivfbE3X2Ss+Fj8nnXvKJS6sjRG4gzwPMsP+taZC+ZzEGjAYlvENixmt1sZ5Ca6tWls+BlKSGKPJ6OOXvXCbkFg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-
-"@babel/plugin-transform-parameters@^7.20.1":
-  version "7.20.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.20.3.tgz#7b3468d70c3c5b62e46be0a47b6045d8590fb748"
-  integrity sha512-oZg/Fpx0YDrj13KsLyO8I/CX3Zdw7z0O9qOd95SqcoIzuqy/WTGWvePeHAnZCN54SfdyjHcb1S30gc8zlzlHcA==
+"@babel/plugin-transform-parameters@^7.20.7", "@babel/plugin-transform-parameters@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.21.3.tgz#18fc4e797cf6d6d972cb8c411dbe8a809fa157db"
+  integrity sha512-Wxc+TvppQG9xWFYatvCGPvZ6+SIUxQ2ZdiBP+PHYMIjnPXD+uThCshaz4NZOnODAtBjjcVQQ/3OKs9LW28purQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.20.2"
 
@@ -920,11 +793,11 @@
     "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-transform-react-constant-elements@^7.12.1":
-  version "7.18.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.18.12.tgz#edf3bec47eb98f14e84fa0af137fcc6aad8e0443"
-  integrity sha512-Q99U9/ttiu+LMnRU8psd23HhvwXmKWDQIpocm0JKaICcZHnw+mdQbHm6xnSy7dOl8I5PELakYtNBubNQlBXbZw==
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.21.3.tgz#b32a5556100d424b25e388dd689050d78396884d"
+  integrity sha512-4DVcFeWe/yDYBLp0kBmOGFJ6N2UYg7coGid1gdxb4co62dy/xISDMaYBXBVXEDhfgMk7qkbcYiGtwd5Q/hwDDQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.20.2"
 
 "@babel/plugin-transform-react-display-name@^7.16.0", "@babel/plugin-transform-react-display-name@^7.18.6":
   version "7.18.6"
@@ -941,15 +814,15 @@
     "@babel/plugin-transform-react-jsx" "^7.18.6"
 
 "@babel/plugin-transform-react-jsx@^7.18.6":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.19.0.tgz#b3cbb7c3a00b92ec8ae1027910e331ba5c500eb9"
-  integrity sha512-UVEvX3tXie3Szm3emi1+G63jyw1w5IcMY0FSKM+CRnKRI5Mr1YbCNgsSTwoTwKphQEG9P+QqmuRFneJPZuHNhg==
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.21.0.tgz#656b42c2fdea0a6d8762075d58ef9d4e3c4ab8a2"
+  integrity sha512-6OAWljMvQrZjR2DaNhVfRz6dkCAVV+ymcLUmaf8bccGOHn2v5rHJK3tTpij0BuhdYWP4LLaqj5lwcdlpAAPuvg==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.18.6"
     "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-jsx" "^7.18.6"
-    "@babel/types" "^7.19.0"
+    "@babel/types" "^7.21.0"
 
 "@babel/plugin-transform-react-pure-annotations@^7.18.6":
   version "7.18.6"
@@ -959,13 +832,13 @@
     "@babel/helper-annotate-as-pure" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-regenerator@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.18.6.tgz#585c66cb84d4b4bf72519a34cfce761b8676ca73"
-  integrity sha512-poqRI2+qiSdeldcz4wTSTXBRryoq3Gc70ye7m7UD5Ww0nE29IXqMl6r7Nd15WBgRd74vloEMlShtH6CKxVzfmQ==
+"@babel/plugin-transform-regenerator@^7.20.5":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.20.5.tgz#57cda588c7ffb7f4f8483cc83bdcea02a907f04d"
+  integrity sha512-kW/oO7HPBtntbsahzQ0qSE3tFvkFwnbozz3NWFhLGqH75vLEg+sCGngLlhVkePlCs3Jv0dBBHDzCHxNiFAQKCQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    regenerator-transform "^0.15.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    regenerator-transform "^0.15.1"
 
 "@babel/plugin-transform-reserved-words@^7.18.6":
   version "7.18.6"
@@ -975,12 +848,12 @@
     "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-transform-runtime@^7.16.4":
-  version "7.19.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.19.6.tgz#9d2a9dbf4e12644d6f46e5e75bfbf02b5d6e9194"
-  integrity sha512-PRH37lz4JU156lYFW1p8OxE5i7d6Sl/zV58ooyr+q1J1lnQPyg5tIiXlIwNVhJaY4W3TmOtdc8jqdXQcB1v5Yw==
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.21.4.tgz#2e1da21ca597a7d01fc96b699b21d8d2023191aa"
+  integrity sha512-1J4dhrw1h1PqnNNpzwxQ2UBymJUF8KuPjAAnlLwZcGhHAIqUigFW7cdK6GHoB64ubY4qXQNYknoUeks4Wz7CUA==
   dependencies:
-    "@babel/helper-module-imports" "^7.18.6"
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-module-imports" "^7.21.4"
+    "@babel/helper-plugin-utils" "^7.20.2"
     babel-plugin-polyfill-corejs2 "^0.3.3"
     babel-plugin-polyfill-corejs3 "^0.6.0"
     babel-plugin-polyfill-regenerator "^0.4.1"
@@ -993,13 +866,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-spread@^7.19.0":
-  version "7.19.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.19.0.tgz#dd60b4620c2fec806d60cfaae364ec2188d593b6"
-  integrity sha512-RsuMk7j6n+r752EtzyScnWkQyuJdli6LdO5Klv8Yx0OfPVTcQkIUfS8clx5e9yHXzlnhOZF3CbQ8C2uP5j074w==
+"@babel/plugin-transform-spread@^7.20.7":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz#c2d83e0b99d3bf83e07b11995ee24bf7ca09401e"
+  integrity sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.19.0"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
 
 "@babel/plugin-transform-sticky-regex@^7.18.6":
   version "7.18.6"
@@ -1022,13 +895,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-typescript@^7.18.6":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.20.0.tgz#2c7ec62b8bfc21482f3748789ba294a46a375169"
-  integrity sha512-xOAsAFaun3t9hCwZ13Qe7gq423UgMZ6zAgmLxeGGapFqlT/X3L5qT2btjiVLlFn7gWtMaVyceS5VxGAuKbgizw==
+"@babel/plugin-transform-typescript@^7.21.3":
+  version "7.21.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.21.3.tgz#316c5be579856ea890a57ebc5116c5d064658f2b"
+  integrity sha512-RQxPz6Iqt8T0uw/WsJNReuBpWpBqs/n7mNo18sKLoTbMp+UrEekhH+pKSVC7gWz+DNjo9gryfV8YzCiT45RgMw==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.19.0"
-    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-create-class-features-plugin" "^7.21.0"
+    "@babel/helper-plugin-utils" "^7.20.2"
     "@babel/plugin-syntax-typescript" "^7.20.0"
 
 "@babel/plugin-transform-unicode-escapes@^7.18.10":
@@ -1046,31 +920,31 @@
     "@babel/helper-create-regexp-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/preset-env@^7.11.0":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.20.2.tgz#9b1642aa47bb9f43a86f9630011780dab7f86506"
-  integrity sha512-1G0efQEWR1EHkKvKHqbG+IN/QdgwfByUpM5V5QroDzGV2t3S/WXNQd693cHiHTlCFMpr9B6FkPFXDA2lQcKoDg==
+"@babel/preset-env@^7.11.0", "@babel/preset-env@^7.12.1", "@babel/preset-env@^7.16.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.21.4.tgz#a952482e634a8dd8271a3fe5459a16eb10739c58"
+  integrity sha512-2W57zHs2yDLm6GD5ZpvNn71lZ0B/iypSdIeq25OurDKji6AdzV07qp4s3n1/x5BqtiGaTrPN3nerlSCaC5qNTw==
   dependencies:
-    "@babel/compat-data" "^7.20.1"
-    "@babel/helper-compilation-targets" "^7.20.0"
+    "@babel/compat-data" "^7.21.4"
+    "@babel/helper-compilation-targets" "^7.21.4"
     "@babel/helper-plugin-utils" "^7.20.2"
-    "@babel/helper-validator-option" "^7.18.6"
+    "@babel/helper-validator-option" "^7.21.0"
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.18.6"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.18.9"
-    "@babel/plugin-proposal-async-generator-functions" "^7.20.1"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.20.7"
+    "@babel/plugin-proposal-async-generator-functions" "^7.20.7"
     "@babel/plugin-proposal-class-properties" "^7.18.6"
-    "@babel/plugin-proposal-class-static-block" "^7.18.6"
+    "@babel/plugin-proposal-class-static-block" "^7.21.0"
     "@babel/plugin-proposal-dynamic-import" "^7.18.6"
     "@babel/plugin-proposal-export-namespace-from" "^7.18.9"
     "@babel/plugin-proposal-json-strings" "^7.18.6"
-    "@babel/plugin-proposal-logical-assignment-operators" "^7.18.9"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.20.7"
     "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.6"
     "@babel/plugin-proposal-numeric-separator" "^7.18.6"
-    "@babel/plugin-proposal-object-rest-spread" "^7.20.2"
+    "@babel/plugin-proposal-object-rest-spread" "^7.20.7"
     "@babel/plugin-proposal-optional-catch-binding" "^7.18.6"
-    "@babel/plugin-proposal-optional-chaining" "^7.18.9"
+    "@babel/plugin-proposal-optional-chaining" "^7.21.0"
     "@babel/plugin-proposal-private-methods" "^7.18.6"
-    "@babel/plugin-proposal-private-property-in-object" "^7.18.6"
+    "@babel/plugin-proposal-private-property-in-object" "^7.21.0"
     "@babel/plugin-proposal-unicode-property-regex" "^7.18.6"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
     "@babel/plugin-syntax-class-properties" "^7.12.13"
@@ -1087,121 +961,40 @@
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
     "@babel/plugin-syntax-top-level-await" "^7.14.5"
-    "@babel/plugin-transform-arrow-functions" "^7.18.6"
-    "@babel/plugin-transform-async-to-generator" "^7.18.6"
+    "@babel/plugin-transform-arrow-functions" "^7.20.7"
+    "@babel/plugin-transform-async-to-generator" "^7.20.7"
     "@babel/plugin-transform-block-scoped-functions" "^7.18.6"
-    "@babel/plugin-transform-block-scoping" "^7.20.2"
-    "@babel/plugin-transform-classes" "^7.20.2"
-    "@babel/plugin-transform-computed-properties" "^7.18.9"
-    "@babel/plugin-transform-destructuring" "^7.20.2"
+    "@babel/plugin-transform-block-scoping" "^7.21.0"
+    "@babel/plugin-transform-classes" "^7.21.0"
+    "@babel/plugin-transform-computed-properties" "^7.20.7"
+    "@babel/plugin-transform-destructuring" "^7.21.3"
     "@babel/plugin-transform-dotall-regex" "^7.18.6"
     "@babel/plugin-transform-duplicate-keys" "^7.18.9"
     "@babel/plugin-transform-exponentiation-operator" "^7.18.6"
-    "@babel/plugin-transform-for-of" "^7.18.8"
+    "@babel/plugin-transform-for-of" "^7.21.0"
     "@babel/plugin-transform-function-name" "^7.18.9"
     "@babel/plugin-transform-literals" "^7.18.9"
     "@babel/plugin-transform-member-expression-literals" "^7.18.6"
-    "@babel/plugin-transform-modules-amd" "^7.19.6"
-    "@babel/plugin-transform-modules-commonjs" "^7.19.6"
-    "@babel/plugin-transform-modules-systemjs" "^7.19.6"
+    "@babel/plugin-transform-modules-amd" "^7.20.11"
+    "@babel/plugin-transform-modules-commonjs" "^7.21.2"
+    "@babel/plugin-transform-modules-systemjs" "^7.20.11"
     "@babel/plugin-transform-modules-umd" "^7.18.6"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.19.1"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.20.5"
     "@babel/plugin-transform-new-target" "^7.18.6"
     "@babel/plugin-transform-object-super" "^7.18.6"
-    "@babel/plugin-transform-parameters" "^7.20.1"
+    "@babel/plugin-transform-parameters" "^7.21.3"
     "@babel/plugin-transform-property-literals" "^7.18.6"
-    "@babel/plugin-transform-regenerator" "^7.18.6"
+    "@babel/plugin-transform-regenerator" "^7.20.5"
     "@babel/plugin-transform-reserved-words" "^7.18.6"
     "@babel/plugin-transform-shorthand-properties" "^7.18.6"
-    "@babel/plugin-transform-spread" "^7.19.0"
+    "@babel/plugin-transform-spread" "^7.20.7"
     "@babel/plugin-transform-sticky-regex" "^7.18.6"
     "@babel/plugin-transform-template-literals" "^7.18.9"
     "@babel/plugin-transform-typeof-symbol" "^7.18.9"
     "@babel/plugin-transform-unicode-escapes" "^7.18.10"
     "@babel/plugin-transform-unicode-regex" "^7.18.6"
     "@babel/preset-modules" "^0.1.5"
-    "@babel/types" "^7.20.2"
-    babel-plugin-polyfill-corejs2 "^0.3.3"
-    babel-plugin-polyfill-corejs3 "^0.6.0"
-    babel-plugin-polyfill-regenerator "^0.4.1"
-    core-js-compat "^3.25.1"
-    semver "^6.3.0"
-
-"@babel/preset-env@^7.12.1", "@babel/preset-env@^7.16.4":
-  version "7.19.4"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.19.4.tgz#4c91ce2e1f994f717efb4237891c3ad2d808c94b"
-  integrity sha512-5QVOTXUdqTCjQuh2GGtdd7YEhoRXBMVGROAtsBeLGIbIz3obCBIfRMT1I3ZKkMgNzwkyCkftDXSSkHxnfVf4qg==
-  dependencies:
-    "@babel/compat-data" "^7.19.4"
-    "@babel/helper-compilation-targets" "^7.19.3"
-    "@babel/helper-plugin-utils" "^7.19.0"
-    "@babel/helper-validator-option" "^7.18.6"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.18.6"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.18.9"
-    "@babel/plugin-proposal-async-generator-functions" "^7.19.1"
-    "@babel/plugin-proposal-class-properties" "^7.18.6"
-    "@babel/plugin-proposal-class-static-block" "^7.18.6"
-    "@babel/plugin-proposal-dynamic-import" "^7.18.6"
-    "@babel/plugin-proposal-export-namespace-from" "^7.18.9"
-    "@babel/plugin-proposal-json-strings" "^7.18.6"
-    "@babel/plugin-proposal-logical-assignment-operators" "^7.18.9"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.6"
-    "@babel/plugin-proposal-numeric-separator" "^7.18.6"
-    "@babel/plugin-proposal-object-rest-spread" "^7.19.4"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.18.6"
-    "@babel/plugin-proposal-optional-chaining" "^7.18.9"
-    "@babel/plugin-proposal-private-methods" "^7.18.6"
-    "@babel/plugin-proposal-private-property-in-object" "^7.18.6"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.18.6"
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-    "@babel/plugin-syntax-class-properties" "^7.12.13"
-    "@babel/plugin-syntax-class-static-block" "^7.14.5"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-    "@babel/plugin-syntax-import-assertions" "^7.18.6"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
-    "@babel/plugin-syntax-top-level-await" "^7.14.5"
-    "@babel/plugin-transform-arrow-functions" "^7.18.6"
-    "@babel/plugin-transform-async-to-generator" "^7.18.6"
-    "@babel/plugin-transform-block-scoped-functions" "^7.18.6"
-    "@babel/plugin-transform-block-scoping" "^7.19.4"
-    "@babel/plugin-transform-classes" "^7.19.0"
-    "@babel/plugin-transform-computed-properties" "^7.18.9"
-    "@babel/plugin-transform-destructuring" "^7.19.4"
-    "@babel/plugin-transform-dotall-regex" "^7.18.6"
-    "@babel/plugin-transform-duplicate-keys" "^7.18.9"
-    "@babel/plugin-transform-exponentiation-operator" "^7.18.6"
-    "@babel/plugin-transform-for-of" "^7.18.8"
-    "@babel/plugin-transform-function-name" "^7.18.9"
-    "@babel/plugin-transform-literals" "^7.18.9"
-    "@babel/plugin-transform-member-expression-literals" "^7.18.6"
-    "@babel/plugin-transform-modules-amd" "^7.18.6"
-    "@babel/plugin-transform-modules-commonjs" "^7.18.6"
-    "@babel/plugin-transform-modules-systemjs" "^7.19.0"
-    "@babel/plugin-transform-modules-umd" "^7.18.6"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.19.1"
-    "@babel/plugin-transform-new-target" "^7.18.6"
-    "@babel/plugin-transform-object-super" "^7.18.6"
-    "@babel/plugin-transform-parameters" "^7.18.8"
-    "@babel/plugin-transform-property-literals" "^7.18.6"
-    "@babel/plugin-transform-regenerator" "^7.18.6"
-    "@babel/plugin-transform-reserved-words" "^7.18.6"
-    "@babel/plugin-transform-shorthand-properties" "^7.18.6"
-    "@babel/plugin-transform-spread" "^7.19.0"
-    "@babel/plugin-transform-sticky-regex" "^7.18.6"
-    "@babel/plugin-transform-template-literals" "^7.18.9"
-    "@babel/plugin-transform-typeof-symbol" "^7.18.9"
-    "@babel/plugin-transform-unicode-escapes" "^7.18.10"
-    "@babel/plugin-transform-unicode-regex" "^7.18.6"
-    "@babel/preset-modules" "^0.1.5"
-    "@babel/types" "^7.19.4"
+    "@babel/types" "^7.21.4"
     babel-plugin-polyfill-corejs2 "^0.3.3"
     babel-plugin-polyfill-corejs3 "^0.6.0"
     babel-plugin-polyfill-regenerator "^0.4.1"
@@ -1232,28 +1025,27 @@
     "@babel/plugin-transform-react-pure-annotations" "^7.18.6"
 
 "@babel/preset-typescript@^7.16.0":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.18.6.tgz#ce64be3e63eddc44240c6358daefac17b3186399"
-  integrity sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ==
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.21.4.tgz#b913ac8e6aa8932e47c21b01b4368d8aa239a529"
+  integrity sha512-sMLNWY37TCdRH/bJ6ZeeOH1nPuanED7Ai9Y/vH31IPqalioJ6ZNFUWONsakhv4r4n+I6gm5lmoE0olkgib/j/A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.18.6"
-    "@babel/helper-validator-option" "^7.18.6"
-    "@babel/plugin-transform-typescript" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.20.2"
+    "@babel/helper-validator-option" "^7.21.0"
+    "@babel/plugin-syntax-jsx" "^7.21.4"
+    "@babel/plugin-transform-modules-commonjs" "^7.21.2"
+    "@babel/plugin-transform-typescript" "^7.21.3"
 
-"@babel/runtime-corejs3@^7.10.2":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.20.0.tgz#56ef7af3cd23d1570969809a5a8782e774e0141a"
-  integrity sha512-v1JH7PeAAGBEyTQM9TqojVl+b20zXtesFKCJHu50xMxZKD1fX0TKaKHPsZfFkXfs7D1M9M6Eeqg1FkJ3a0x2dA==
-  dependencies:
-    core-js-pure "^3.25.1"
-    regenerator-runtime "^0.13.10"
+"@babel/regjsgen@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
+  integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.0.tgz#824a9ef325ffde6f78056059db3168c08785e24a"
-  integrity sha512-NDYdls71fTXoU8TZHfbBWg7DiZfNzClcKui/+kyi6ppD2L1qnWW3VV6CjtaBXSUGGhiTWJ6ereOIkUvenif66Q==
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.6", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
+  integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
   dependencies:
-    regenerator-runtime "^0.13.10"
+    regenerator-runtime "^0.13.11"
 
 "@babel/runtime@^7.11.2":
   version "7.20.1"
@@ -1275,54 +1067,29 @@
   integrity sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==
   dependencies:
     "@babel/code-frame" "^7.18.6"
-    "@babel/parser" "^7.18.10"
-    "@babel/types" "^7.18.10"
+    "@babel/parser" "^7.20.7"
+    "@babel/types" "^7.20.7"
 
-"@babel/traverse@^7.19.0", "@babel/traverse@^7.19.1", "@babel/traverse@^7.19.6", "@babel/traverse@^7.20.0":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.0.tgz#538c4c6ce6255f5666eba02252a7b59fc2d5ed98"
-  integrity sha512-5+cAXQNARgjRUK0JWu2UBwja4JLSO/rBMPJzpsKb+oBF5xlUuCfljQepS4XypBQoiigL0VQjTZy6WiONtUdScQ==
+"@babel/traverse@^7.20.5", "@babel/traverse@^7.20.7", "@babel/traverse@^7.21.0", "@babel/traverse@^7.21.2", "@babel/traverse@^7.21.4", "@babel/traverse@^7.7.2":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.21.4.tgz#a836aca7b116634e97a6ed99976236b3282c9d36"
+  integrity sha512-eyKrRHKdyZxqDm+fV1iqL9UAHMoIg0nDaGqfIOd8rKH17m5snv7Gn4qgjBoFfLz9APvjFU/ICT00NVCv1Epp8Q==
   dependencies:
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.20.0"
+    "@babel/code-frame" "^7.21.4"
+    "@babel/generator" "^7.21.4"
     "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-function-name" "^7.21.0"
     "@babel/helper-hoist-variables" "^7.18.6"
     "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/parser" "^7.20.0"
-    "@babel/types" "^7.20.0"
+    "@babel/parser" "^7.21.4"
+    "@babel/types" "^7.21.4"
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/traverse@^7.20.1", "@babel/traverse@^7.7.2":
-  version "7.20.1"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.1.tgz#9b15ccbf882f6d107eeeecf263fbcdd208777ec8"
-  integrity sha512-d3tN8fkVJwFLkHkBN479SOsw4DMZnz8cdbL/gvuDuzy3TS6Nfw80HuQqhw1pITbIruHyh7d1fMA47kWzmcUEGA==
-  dependencies:
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.20.1"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.19.0"
-    "@babel/helper-hoist-variables" "^7.18.6"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/parser" "^7.20.1"
-    "@babel/types" "^7.20.0"
-    debug "^4.1.0"
-    globals "^11.1.0"
-
-"@babel/types@^7.0.0", "@babel/types@^7.12.6", "@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.19.0", "@babel/types@^7.19.4", "@babel/types@^7.20.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
-  version "7.20.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.0.tgz#52c94cf8a7e24e89d2a194c25c35b17a64871479"
-  integrity sha512-Jlgt3H0TajCW164wkTOTzHkZb075tMQMULzrLUoUeKmO7eFL96GgDxf7/Axhc5CAuKE3KFyVW1p6ysKsi2oXAg==
-  dependencies:
-    "@babel/helper-string-parser" "^7.19.4"
-    "@babel/helper-validator-identifier" "^7.19.1"
-    to-fast-properties "^2.0.0"
-
-"@babel/types@^7.20.2":
-  version "7.20.2"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.2.tgz#67ac09266606190f496322dbaff360fdaa5e7842"
-  integrity sha512-FnnvsNWgZCr232sqtXggapvlkk/tuwR/qhGzcmxI0GXLCjmPYQPzio2FbdlWuY6y1sHFfQKk+rRbUZ9VStQMog==
+"@babel/types@^7.0.0", "@babel/types@^7.12.6", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.20.0", "@babel/types@^7.20.2", "@babel/types@^7.20.5", "@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.2", "@babel/types@^7.21.4", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.21.4.tgz#2d5d6bb7908699b3b416409ffd3b5daa25b030d4"
+  integrity sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==
   dependencies:
     "@babel/helper-string-parser" "^7.19.4"
     "@babel/helper-validator-identifier" "^7.19.1"
@@ -1333,6 +1100,11 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@braintree/sanitize-url@6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.2.tgz#6110f918d273fe2af8ea1c4398a88774bb9fc12f"
+  integrity sha512-Tbsj02wXCbqGmzdnXNk0SOF19ChhRU70BsroIi4Pm6Ehp56in6vch94mfbdQ17DozxkL3BAVjbZ4Qc1a0HFRAg==
+
 "@csstools/normalize.css@*":
   version "12.0.0"
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-12.0.0.tgz#a9583a75c3f150667771f30b60d9f059473e62c4"
@@ -1440,16 +1212,21 @@
   integrity sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==
 
 "@csstools/selector-specificity@^2.0.0", "@csstools/selector-specificity@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36"
-  integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz#2cbcf822bf3764c9658c4d2e568bd0c0cb748016"
+  integrity sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==
 
-"@dwelle/tunnel-rat@0.1.1":
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/@dwelle/tunnel-rat/-/tunnel-rat-0.1.1.tgz#0a0b235f8fc22ff1cf47ed102f4cc612eb51bc71"
-  integrity sha512-jb5/ZsT/af1J7tnbBXp7KO1xEyw61lWSDqJ+Bqdc6JlL3vbAvsifNhe+/mRFs6aSBCRaDqp5f2pJDHtA3MUZLw==
+"@eslint-community/eslint-utils@^4.2.0":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
+  integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
   dependencies:
-    zustand "^4.3.2"
+    eslint-visitor-keys "^3.3.0"
+
+"@eslint-community/regexpp@^4.4.0":
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.5.0.tgz#f6f729b02feee2c749f57e334b7a1b5f40a81724"
+  integrity sha512-vITaYzIcNmjn5tF5uxcZ/ft7/RXGrMUIS9HalWckEOF6ESiwXKoMzAQf2UW0aVd6rnOeExTJVd5hmWXucBKGXQ==
 
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
@@ -1466,21 +1243,26 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@eslint/eslintrc@^1.3.3":
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.3.tgz#2b044ab39fdfa75b4688184f9e573ce3c5b0ff95"
-  integrity sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==
+"@eslint/eslintrc@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.0.2.tgz#01575e38707add677cf73ca1589abba8da899a02"
+  integrity sha512-3W4f5tDUra+pA+FzgugqL2pRimUTDJWKr7BINqOpkZrC0uYI0NIc0/JFgBROCU07HR6GieA5m3/rsPIhDmCXTQ==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
-    espree "^9.4.0"
-    globals "^13.15.0"
+    espree "^9.5.1"
+    globals "^13.19.0"
     ignore "^5.2.0"
     import-fresh "^3.2.1"
     js-yaml "^4.1.0"
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@eslint/js@8.38.0":
+  version "8.38.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.38.0.tgz#73a8a0d8aa8a8e6fe270431c5e72ae91b5337892"
+  integrity sha512-IoD2MfUnOV58ghIHCiil01PcohxjbYR/qCxsoC+xNgUwh1EY8jOOrYmu3d3a71+tJJ23uscEV4X2HJWMsPJu4g==
+
 "@excalidraw/eslint-config@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@excalidraw/eslint-config/-/eslint-config-1.0.0.tgz#1cc527a88cfe20fd730496c1b631c3aecf9c825e"
@@ -1491,6 +1273,11 @@
   resolved "https://registry.yarnpkg.com/@excalidraw/prettier-config/-/prettier-config-1.0.2.tgz#b7c061c99cee2f78b9ca470ea1fbd602683bba65"
   integrity sha512-rFIq8+A8WvkEzBsF++Rw6gzxE+hU3ZNkdg8foI+Upz2y/rOC/gUpWJaggPbCkoH3nlREVU59axQjZ1+F6ePRGg==
 
+"@excalidraw/random-username@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@excalidraw/random-username/-/random-username-1.0.0.tgz#6d5293148aee6cd08dcdfcadc0c91276572f4499"
+  integrity sha512-pd4VapWahQ7PIyThGq32+C+JUS73mf3RSdC7BmQiXzhQsCTU4RHc8y9jBi+pb1CFV0iJXvjJRXnVdLCbTj3+HA==
+
 "@firebase/analytics-types@0.4.0":
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/@firebase/analytics-types/-/analytics-types-0.4.0.tgz#d6716f9fa36a6e340bc0ecfe68af325aa6f60508"
@@ -1735,10 +1522,30 @@
     "@floating-ui/dom" "^0.5.3"
     use-isomorphic-layout-effect "^1.1.1"
 
+"@floating-ui/core@^0.7.3":
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-0.7.3.tgz#d274116678ffae87f6b60e90f88cc4083eefab86"
+  integrity sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==
+
+"@floating-ui/dom@^0.5.3":
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-0.5.4.tgz#4eae73f78bcd4bd553ae2ade30e6f1f9c73fe3f1"
+  integrity sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==
+  dependencies:
+    "@floating-ui/core" "^0.7.3"
+
+"@floating-ui/react-dom@0.7.2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-0.7.2.tgz#0bf4ceccb777a140fc535c87eb5d6241c8e89864"
+  integrity sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==
+  dependencies:
+    "@floating-ui/dom" "^0.5.3"
+    use-isomorphic-layout-effect "^1.1.1"
+
 "@grpc/grpc-js@^1.0.0":
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/@grpc/grpc-js/-/grpc-js-1.7.3.tgz#f2ea79f65e31622d7f86d4b4c9ae38f13ccab99a"
-  integrity sha512-H9l79u4kJ2PVSxUNA08HMYAnUBLj9v6KjYQ7SQ71hOZcEXhShE/y5iQCesP8+6/Ik/7i2O0a10bPquIcYfufog==
+  version "1.8.13"
+  resolved "https://registry.yarnpkg.com/@grpc/grpc-js/-/grpc-js-1.8.13.tgz#e775685962909b76f8d4b813833c3d123867165b"
+  integrity sha512-iY3jsdfbc0ARoCLFvbvUB8optgyb0r1XLPb142u+QtgBcKJYkCIFt3Fd/881KqjLYWjsBJF57N3b8Eop9NDfUA==
   dependencies:
     "@grpc/proto-loader" "^0.7.0"
     "@types/node" ">=12.12.47"
@@ -1752,9 +1559,9 @@
     protobufjs "^6.8.6"
 
 "@grpc/proto-loader@^0.7.0":
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/@grpc/proto-loader/-/proto-loader-0.7.3.tgz#75a6f95b51b85c5078ac7394da93850c32d36bb8"
-  integrity sha512-5dAvoZwna2Py3Ef96Ux9jIkp3iZ62TUsV00p3wVBPNX5K178UbNi8Q7gQVqwXT1Yq9RejIGG9G2IPEo93T6RcA==
+  version "0.7.6"
+  resolved "https://registry.yarnpkg.com/@grpc/proto-loader/-/proto-loader-0.7.6.tgz#b71fdf92b184af184b668c4e9395a5ddc23d61de"
+  integrity sha512-QyAXR8Hyh7uMDmveWxDSUcJr9NAWaZ2I6IXgAYvQmfflwouTM+rArE2eEaCtLlRqO81j7pRLCt81IefUei6Zbw==
   dependencies:
     "@types/long" "^4.0.1"
     lodash.camelcase "^4.3.0"
@@ -1762,10 +1569,10 @@
     protobufjs "^7.0.0"
     yargs "^16.2.0"
 
-"@humanwhocodes/config-array@^0.11.6":
-  version "0.11.7"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.7.tgz#38aec044c6c828f6ed51d5d7ae3d9b9faf6dbb0f"
-  integrity sha512-kBbPWzN8oVMLb0hOUYXhmxggL/1cJE6ydvjDIGi9EnAGUyA7cLVKQg+d/Dsm+KZwx2czGHrCmMVLiyg8s5JPKw==
+"@humanwhocodes/config-array@^0.11.8":
+  version "0.11.8"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"
+  integrity sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==
   dependencies:
     "@humanwhocodes/object-schema" "^1.2.1"
     debug "^4.1.1"
@@ -1874,12 +1681,12 @@
     "@types/node" "*"
     jest-mock "^27.5.1"
 
-"@jest/expect-utils@^29.2.2":
-  version "29.2.2"
-  resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-29.2.2.tgz#460a5b5a3caf84d4feb2668677393dd66ff98665"
-  integrity sha512-vwnVmrVhTmGgQzyvcpze08br91OL61t9O0lJMDyb6Y/D8EKQ9V7rGUb/p7PDt0GPzK0zFYqXWFo4EO2legXmkg==
+"@jest/expect-utils@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-29.5.0.tgz#f74fad6b6e20f924582dc8ecbf2cb800fe43a036"
+  integrity sha512-fmKzsidoXQT2KwnrwE0SQq3uj8Z763vzR8LnLBwC2qYWEFpjX8daRsk6rHUM1QvNlEW/UJXNXm59ztmJJWs2Mg==
   dependencies:
-    jest-get-type "^29.2.0"
+    jest-get-type "^29.4.3"
 
 "@jest/fake-timers@^27.5.1":
   version "27.5.1"
@@ -1940,12 +1747,12 @@
   dependencies:
     "@sinclair/typebox" "^0.24.1"
 
-"@jest/schemas@^29.0.0":
-  version "29.0.0"
-  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.0.0.tgz#5f47f5994dd4ef067fb7b4188ceac45f77fe952a"
-  integrity sha512-3Ab5HgYIIAnS0HjqJHQYZS+zXc4tUmTmBH3z83ajI6afXp8X3ZtdLX+nXx+I7LNkJD7uN9LAVhgnjDgZa2z0kA==
+"@jest/schemas@^29.4.3":
+  version "29.4.3"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.4.3.tgz#39cf1b8469afc40b6f5a2baaa146e332c4151788"
+  integrity sha512-VLYKXQmtmuEz6IxJsrZwzG9NvtkQsWNnWMsKxqWNu3+CnfzJQhp0WDDKWLVV9hLKr0l3SLLFRqcYHjhtyuDVxg==
   dependencies:
-    "@sinclair/typebox" "^0.24.1"
+    "@sinclair/typebox" "^0.25.16"
 
 "@jest/source-map@^27.5.1":
   version "27.5.1"
@@ -2030,30 +1837,22 @@
     "@types/yargs" "^17.0.8"
     chalk "^4.0.0"
 
-"@jest/types@^29.2.1":
-  version "29.2.1"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.2.1.tgz#ec9c683094d4eb754e41e2119d8bdaef01cf6da0"
-  integrity sha512-O/QNDQODLnINEPAI0cl9U6zUIDXEWXt6IC1o2N2QENuos7hlGUIthlKyV4p6ki3TvXFX071blj8HUhgLGquPjw==
+"@jest/types@^29.5.0":
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.5.0.tgz#f59ef9b031ced83047c67032700d8c807d6e1593"
+  integrity sha512-qbu7kN6czmVRc3xWFQcAN03RAUamgppVUdXrvl1Wr3jlNF93o9mJbGcDWrwGB6ht44u7efB1qCFgVQmca24Uog==
   dependencies:
-    "@jest/schemas" "^29.0.0"
+    "@jest/schemas" "^29.4.3"
     "@types/istanbul-lib-coverage" "^2.0.0"
     "@types/istanbul-reports" "^3.0.0"
     "@types/node" "*"
     "@types/yargs" "^17.0.8"
     chalk "^4.0.0"
 
-"@jridgewell/gen-mapping@^0.1.0":
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"
-  integrity sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==
-  dependencies:
-    "@jridgewell/set-array" "^1.0.0"
-    "@jridgewell/sourcemap-codec" "^1.4.10"
-
 "@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
-  integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"
+  integrity sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==
   dependencies:
     "@jridgewell/set-array" "^1.0.1"
     "@jridgewell/sourcemap-codec" "^1.4.10"
@@ -2064,28 +1863,33 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
   integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
 
-"@jridgewell/set-array@^1.0.0", "@jridgewell/set-array@^1.0.1":
+"@jridgewell/set-array@^1.0.1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
   integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
 
 "@jridgewell/source-map@^0.3.2":
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.2.tgz#f45351aaed4527a298512ec72f81040c998580fb"
-  integrity sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.3.tgz#8108265659d4c33e72ffe14e33d6cc5eb59f2fda"
+  integrity sha512-b+fsZXeLYi9fEULmfBrhxn4IrPlINf8fiNarzTof004v3lFdntdwa9PF7vFJqm3mg7s+ScJMxXaE3Acp1irZcg==
   dependencies:
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.10":
+"@jridgewell/sourcemap-codec@1.4.14":
   version "1.4.14"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 
-"@jridgewell/trace-mapping@^0.3.14", "@jridgewell/trace-mapping@^0.3.9":
-  version "0.3.17"
-  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985"
-  integrity sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==
+"@jridgewell/sourcemap-codec@^1.4.10":
+  version "1.4.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
+  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+
+"@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.18"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz#25783b2086daf6ff1dcb53c9249ae480e4dd4cd6"
+  integrity sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==
   dependencies:
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
@@ -2124,9 +1928,9 @@
     fastq "^1.6.0"
 
 "@pmmmwh/react-refresh-webpack-plugin@^0.5.3":
-  version "0.5.9"
-  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.9.tgz#35aae6624a6270ca7ad755800b7eec417fa6f830"
-  integrity sha512-7QV4cqUwhkDIHpMAZ9mestSJ2DMIotVTbOUwbiudhjCRTAWWKIaBecELiEM2LT3AHFeOAaHIcFu4dbXjX+9GBA==
+  version "0.5.10"
+  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.10.tgz#2eba163b8e7dbabb4ce3609ab5e32ab63dda3ef8"
+  integrity sha512-j0Ya0hCFZPd4x40qLzbhGsh9TMtdb+CJQiso+WxLOPNasohq9cc5SNUcwsZaRH6++Xh91Xkm/xHCkuIiIu0LUA==
   dependencies:
     ansi-html-community "^0.0.8"
     common-path-prefix "^3.0.0"
@@ -2134,7 +1938,7 @@
     error-stack-parser "^2.0.6"
     find-up "^5.0.0"
     html-entities "^2.1.0"
-    loader-utils "^2.0.3"
+    loader-utils "^2.0.4"
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
@@ -2542,10 +2346,15 @@
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.51.tgz#645f33fe4e02defe26f2f5c0410e1c094eac7f5f"
   integrity sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA==
 
+"@sinclair/typebox@^0.25.16":
+  version "0.25.24"
+  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.24.tgz#8c7688559979f7079aacaf31aa881c3aa410b718"
+  integrity sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ==
+
 "@sinonjs/commons@^1.7.0":
-  version "1.8.3"
-  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"
-  integrity sha512-xkNcLAn/wZaX14RPlwizcKicDk9G3F8m2nU3L7Ukm5zBgTwiT0wsoFAHx9Jq56fJA1z/7uKGtCRu16sOUCLIHQ==
+  version "1.8.6"
+  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.6.tgz#80c516a4dc264c2a69115e7578d62581ff455ed9"
+  integrity sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==
   dependencies:
     type-detect "4.0.8"
 
@@ -2670,13 +2479,13 @@
     loader-utils "^2.0.0"
 
 "@testing-library/dom@^8.0.0":
-  version "8.19.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.19.0.tgz#bd3f83c217ebac16694329e413d9ad5fdcfd785f"
-  integrity sha512-6YWYPPpxG3e/xOo6HIWwB/58HukkwIVTOaZ0VwdMVjhRUX/01E4FtQbck9GazOOj7MXHc5RBzMrU86iBJHbI+A==
+  version "8.20.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.20.0.tgz#914aa862cef0f5e89b98cc48e3445c4c921010f6"
+  integrity sha512-d9ULIT+a4EXLX3UU8FBjauG9NnsZHkHztXoIcTsOKoOw030fyjheN9svkTULjJxtYag9DZz5Jz5qkWZDPxTFwA==
   dependencies:
     "@babel/code-frame" "^7.10.4"
     "@babel/runtime" "^7.12.5"
-    "@types/aria-query" "^4.2.0"
+    "@types/aria-query" "^5.0.1"
     aria-query "^5.0.0"
     chalk "^4.1.0"
     dom-accessibility-api "^0.5.9"
@@ -2722,29 +2531,18 @@
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
-"@types/aria-query@^4.2.0":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.2.tgz#ed4e0ad92306a704f9fb132a0cfcf77486dbe2bc"
-  integrity sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==
+"@types/aria-query@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.1.tgz#3286741fb8f1e1580ac28784add4c7a1d49bdfbc"
+  integrity sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==
 
-"@types/babel__core@^7.0.0":
-  version "7.1.19"
-  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.19.tgz#7b497495b7d1b4812bdb9d02804d0576f43ee460"
-  integrity sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw==
+"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.14":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.0.tgz#61bc5a4cae505ce98e1e36c5445e4bee060d8891"
+  integrity sha512-+n8dL/9GWblDO0iU6eZAwEIJVr5DWigtle+Q6HLOrh/pdbXOhOtqzq8VPPE2zvNJzSKY4vH/z3iT3tn0A3ypiQ==
   dependencies:
-    "@babel/parser" "^7.1.0"
-    "@babel/types" "^7.0.0"
-    "@types/babel__generator" "*"
-    "@types/babel__template" "*"
-    "@types/babel__traverse" "*"
-
-"@types/babel__core@^7.1.14":
-  version "7.1.20"
-  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.20.tgz#e168cdd612c92a2d335029ed62ac94c95b362359"
-  integrity sha512-PVb6Bg2QuscZ30FvOU7z4guG6c926D9YRvOxEaelzndpMsvP+YM74Q/dAFASpg2l6+XLalxSGxcq/lrgYWZtyQ==
-  dependencies:
-    "@babel/parser" "^7.1.0"
-    "@babel/types" "^7.0.0"
+    "@babel/parser" "^7.20.7"
+    "@babel/types" "^7.20.7"
     "@types/babel__generator" "*"
     "@types/babel__template" "*"
     "@types/babel__traverse" "*"
@@ -2765,9 +2563,9 @@
     "@babel/types" "^7.0.0"
 
 "@types/babel__traverse@*", "@types/babel__traverse@^7.0.4", "@types/babel__traverse@^7.0.6":
-  version "7.18.2"
-  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.18.2.tgz#235bf339d17185bdec25e024ca19cce257cc7309"
-  integrity sha512-FcFaxOr2V5KZCviw1TnutEMVUVsGt4D2hP1TAfXZAMKuHYW3xQhe3jTxNPWutgCJ3/X1c5yX8ZoGVEItxKbwBg==
+  version "7.18.3"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.18.3.tgz#dfc508a85781e5698d5b33443416b6268c4b3e8d"
+  integrity sha512-1kbcJ40lLB7MHsj39U4Sh1uTd2E7rLEa79kmDpI6cy+XiXsteB3POdQomoq4FxszMrO3ZYchkhYJw7A2862b3w==
   dependencies:
     "@babel/types" "^7.3.0"
 
@@ -2815,9 +2613,9 @@
     "@types/estree" "*"
 
 "@types/eslint@*", "@types/eslint@^7.29.0 || ^8.4.1":
-  version "8.4.10"
-  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.4.10.tgz#19731b9685c19ed1552da7052b6f668ed7eb64bb"
-  integrity sha512-Sl/HOqN8NKPmhWo2VBEPm0nvHnu2LL3v9vKo8MEq0EtbJ4eVzGPl41VNPvn5E1i5poMk4/XD8UriLHpJvEP/Nw==
+  version "8.37.0"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.37.0.tgz#29cebc6c2a3ac7fea7113207bf5a828fdf4d7ef1"
+  integrity sha512-Piet7dG2JBuDIfohBngQ3rCt7MgO9xCO4xIMKxBThCq5PNRB91IjlJ10eJVwfoNtvTErmxLzwBZ7rHZtbOMmFQ==
   dependencies:
     "@types/estree" "*"
     "@types/json-schema" "*"
@@ -2837,29 +2635,29 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
   integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
 
-"@types/express-serve-static-core@*", "@types/express-serve-static-core@^4.17.18":
-  version "4.17.31"
-  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.31.tgz#a1139efeab4e7323834bb0226e62ac019f474b2f"
-  integrity sha512-DxMhY+NAsTwMMFHBTtJFNp5qiHKJ7TeqOo23zVEM9alT1Ml27Q3xcTH0xwxn7Q0BbMcVEJOs/7aQtUWupUQN3Q==
+"@types/express-serve-static-core@*", "@types/express-serve-static-core@^4.17.33":
+  version "4.17.33"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.33.tgz#de35d30a9d637dc1450ad18dd583d75d5733d543"
+  integrity sha512-TPBqmR/HRYI3eC2E5hmiivIzv+bidAfXofM+sbonAGvyDhySGw9/PQZFt2BLOrjUUR++4eJVpx6KnLQK1Fk9tA==
   dependencies:
     "@types/node" "*"
     "@types/qs" "*"
     "@types/range-parser" "*"
 
 "@types/express@*", "@types/express@^4.17.13":
-  version "4.17.14"
-  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.14.tgz#143ea0557249bc1b3b54f15db4c81c3d4eb3569c"
-  integrity sha512-TEbt+vaPFQ+xpxFLFssxUDXj5cWCxZJjIcB7Yg0k0GMHGtgtQgpvx/MUQUeAkNbA9AAGrwkAsoeItdTgS7FMyg==
+  version "4.17.17"
+  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.17.tgz#01d5437f6ef9cfa8668e616e13c2f2ac9a491ae4"
+  integrity sha512-Q4FmmuLGBG58btUnfS1c1r/NQdlp3DMfGDGig8WhfpA2YRUtEkxAjkZb0yvplJGYdF1fsQ81iMDcH24sSCNC/Q==
   dependencies:
     "@types/body-parser" "*"
-    "@types/express-serve-static-core" "^4.17.18"
+    "@types/express-serve-static-core" "^4.17.33"
     "@types/qs" "*"
     "@types/serve-static" "*"
 
 "@types/graceful-fs@^4.1.2":
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
-  integrity sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.6.tgz#e14b2576a1c25026b7f02ede1de3b84c3a1efeae"
+  integrity sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==
   dependencies:
     "@types/node" "*"
 
@@ -2869,9 +2667,9 @@
   integrity sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==
 
 "@types/http-proxy@^1.17.8":
-  version "1.17.9"
-  resolved "https://registry.yarnpkg.com/@types/http-proxy/-/http-proxy-1.17.9.tgz#7f0e7931343761efde1e2bf48c40f02f3f75705a"
-  integrity sha512-QsbSjA/fSk7xB+UXlCT3wHBy5ai9wOcNDWwZAtud+jXhwOM3l+EYZh8Lng4+/6n8uar0J7xILzqftJdJ/Wdfkw==
+  version "1.17.10"
+  resolved "https://registry.yarnpkg.com/@types/http-proxy/-/http-proxy-1.17.10.tgz#e576c8e4a0cc5c6a138819025a88e167ebb38d6c"
+  integrity sha512-Qs5aULi+zV1bwKAg5z1PWnDXWmsn+LxIvUGv6E2+OOMYhclZMO+OXd9pYVf2gLykf2I7IV2u7oTHwChPNsvJ7g==
   dependencies:
     "@types/node" "*"
 
@@ -2895,9 +2693,9 @@
     "@types/istanbul-lib-report" "*"
 
 "@types/jest@*":
-  version "29.2.0"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.2.0.tgz#fa98e08b46ab119f1a74a9552c48c589f5378a96"
-  integrity sha512-KO7bPV21d65PKwv3LLsD8Jn3E05pjNjRZvkm+YTacWhVmykAb07wW6IkZUmQAltwQafNcDUEUrMO2h3jeBSisg==
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.5.0.tgz#337b90bbcfe42158f39c2fb5619ad044bbb518ac"
+  integrity sha512-3Emr5VOl/aoBwnWcH/EFQvlSAmjV+XtV9GGu5mwdYew5vhQh0IUZx/60x0TzHDu09Bi7HMx10t/namdJw5QIcg==
   dependencies:
     expect "^29.0.0"
     pretty-format "^29.0.0"
@@ -2928,9 +2726,9 @@
     "@types/lodash" "*"
 
 "@types/lodash@*":
-  version "4.14.186"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.186.tgz#862e5514dd7bd66ada6c70ee5fce844b06c8ee97"
-  integrity sha512-eHcVlLXP0c2FlMPm56ITode2AgLMSa6aJ05JTTbYbI+7EMkCEE5qk2E41d5g2lCVTqRe0GnnRFurmlCsDODrPw==
+  version "4.14.192"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.192.tgz#5790406361a2852d332d41635d927f1600811285"
+  integrity sha512-km+Vyn3BYm5ytMO13k9KTp27O75rbQ0NFw+U//g+PX7VZyjCioXaRFisqSIJRECljcTv73G3i6BpglNGHgUQ5A==
 
 "@types/long@^4.0.1":
   version "4.0.2"
@@ -2943,9 +2741,9 @@
   integrity sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA==
 
 "@types/node@*", "@types/node@>=12.12.47", "@types/node@>=13.7.0":
-  version "18.11.8"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.8.tgz#16d222a58d4363a2a359656dd20b28414de5d265"
-  integrity sha512-uGwPWlE0Hj972KkHtCDVwZ8O39GmyjfMane1Z3GUBGGnkZ2USDq7SxLpVIiIHpweY9DS0QTDH0Nw7RNBsAAZ5A==
+  version "18.15.11"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.11.tgz#b3b790f09cb1696cffcec605de025b088fa4225f"
+  integrity sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==
 
 "@types/pako@1.0.3":
   version "1.0.3"
@@ -2963,9 +2761,9 @@
   integrity sha512-13SEyETRE5psd9bE0AmN+0M1tannde2fwHfLVaVIljkbL9V0OfFvKwCicyeDvVYLkmjQWEydbAlsDsmjrdyTOg==
 
 "@types/prettier@^2.1.5":
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.1.tgz#dfd20e2dc35f027cdd6c1908e80a5ddc7499670e"
-  integrity sha512-ri0UmynRRvZiiUJdiz38MmIblKK+oH30MztdBVR95dv/Ubw6neWSb8u1XpRb72L4qsZOhz+L+z9JD40SJmfWow==
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.2.tgz#6c2324641cc4ba050a8c710b2b251b377581fbf0"
+  integrity sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg==
 
 "@types/prop-types@*":
   version "15.7.5"
@@ -2995,16 +2793,16 @@
     "@types/react" "*"
 
 "@types/react-dom@<18.0.0":
-  version "17.0.18"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.18.tgz#8f7af38f5d9b42f79162eea7492e5a1caff70dc2"
-  integrity sha512-rLVtIfbwyur2iFKykP2w0pl/1unw26b5td16d5xMgp7/yjTHomkyxPYChFoCr/FtEX1lN9wY6lFj1qvKdS5kDw==
+  version "17.0.19"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.19.tgz#36feef3aa35d045cacd5ed60fe0eef5272f19492"
+  integrity sha512-PiYG40pnQRdPHnlf7tZnp0aQ6q9tspYr72vD61saO6zFCybLfMqwUCN0va1/P+86DXn18ZWeW30Bk7xlC5eEAQ==
   dependencies:
     "@types/react" "^17"
 
 "@types/react@*":
-  version "18.0.24"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.24.tgz#2f79ed5b27f08d05107aab45c17919754cc44c20"
-  integrity sha512-wRJWT6ouziGUy+9uX0aW4YOJxAY0bG6/AOk5AW5QSvZqI7dk6VBIbXvcVgIw/W5Jrl24f77df98GEKTJGOLx7Q==
+  version "18.0.34"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.34.tgz#e553444a578f023e6e1ac499514688fb80b0a984"
+  integrity sha512-NO1UO8941541CJl1BeOXi8a9dNKFK09Gnru5ZJqkm4Q3/WoQJtHvmwt0VX0SB9YCEwe7TfSSxDuaNmx6H2BAIQ==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -3020,9 +2818,9 @@
     csstype "^3.0.2"
 
 "@types/react@^17":
-  version "17.0.52"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.52.tgz#10d8b907b5c563ac014a541f289ae8eaa9bf2e9b"
-  integrity sha512-vwk8QqVODi0VaZZpDXQCmEmiOuyjEFPY7Ttaw5vjM112LOq37yz1CDJGrRJwA1fYEq4Iitd5rnjd1yWAc/bT+A==
+  version "17.0.57"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.57.tgz#341152f222222075caf020ae6e0e68b9b835404c"
+  integrity sha512-e4msYpu5QDxzNrXDHunU/VPyv2M1XemGG/p7kfCjUiPtlLDCWLGQfgAMng6YyisWYxZ09mYdQlmMnyS0NfZdEg==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -3046,9 +2844,9 @@
   integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
 
 "@types/scheduler@*":
-  version "0.16.2"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
-  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+  version "0.16.3"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"
+  integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==
 
 "@types/semver@^7.3.12":
   version "7.3.13"
@@ -3063,9 +2861,9 @@
     "@types/express" "*"
 
 "@types/serve-static@*", "@types/serve-static@^1.13.10":
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.15.0.tgz#c7930ff61afb334e121a9da780aac0d9b8f34155"
-  integrity sha512-z5xyF6uh8CbjAu9760KDKsH2FcDxZ2tFCsA4HIMWE6IkiYMXfVoa+4f9KX+FN0ZLsaMw1WNG2ETLA6N+/YA+cg==
+  version "1.15.1"
+  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.15.1.tgz#86b1753f0be4f9a1bee68d459fcda5be4ea52b5d"
+  integrity sha512-NUo5XNiAdULrJENtJXZZ3fHtfMolzZwczzBbnAeBbqBwG+LaG6YaJtuwzwGSQZ2wsCrxjEhNNjAkKigy3n8teQ==
   dependencies:
     "@types/mime" "*"
     "@types/node" "*"
@@ -3095,14 +2893,14 @@
     "@types/jest" "*"
 
 "@types/trusted-types@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756"
-  integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.3.tgz#a136f83b0758698df454e328759dbd3d44555311"
+  integrity sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==
 
 "@types/ws@^8.5.1":
-  version "8.5.3"
-  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"
-  integrity sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==
+  version "8.5.4"
+  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.4.tgz#bb10e36116d6e570dd943735f86c933c1587b8a5"
+  integrity sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==
   dependencies:
     "@types/node" "*"
 
@@ -3112,107 +2910,108 @@
   integrity sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==
 
 "@types/yargs@^16.0.0":
-  version "16.0.4"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-16.0.4.tgz#26aad98dd2c2a38e421086ea9ad42b9e51642977"
-  integrity sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==
+  version "16.0.5"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-16.0.5.tgz#12cc86393985735a283e387936398c2f9e5f88e3"
+  integrity sha512-AxO/ADJOBFJScHbWhq2xAhlWP24rY4aCEG/NFaMvbT3X2MgRsLjhjQwsn0Zi5zn0LG9jUhCCZMeX9Dkuw6k+vQ==
   dependencies:
     "@types/yargs-parser" "*"
 
 "@types/yargs@^17.0.8":
-  version "17.0.13"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.13.tgz#34cced675ca1b1d51fcf4d34c3c6f0fa142a5c76"
-  integrity sha512-9sWaruZk2JGxIQU+IhI1fhPYRcQ0UuTNuKuCW9bR5fp7qi2Llf7WDzNa17Cy7TKnh3cdxDOiyTu6gaLS0eDatg==
+  version "17.0.24"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.24.tgz#b3ef8d50ad4aa6aecf6ddc97c580a00f5aa11902"
+  integrity sha512-6i0aC7jV6QzQB8ne1joVZ0eSFIstHsCrobmOtghM11yGlH0j43FKL2UhWdELkyps0zuf7qVTUVCCR+tgSlyLLw==
   dependencies:
     "@types/yargs-parser" "*"
 
 "@typescript-eslint/eslint-plugin@^5.5.0":
-  version "5.43.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.43.0.tgz#4a5248eb31b454715ddfbf8cfbf497529a0a78bc"
-  integrity sha512-wNPzG+eDR6+hhW4yobEmpR36jrqqQv1vxBq5LJO3fBAktjkvekfr4BRl+3Fn1CM/A+s8/EiGUbOMDoYqWdbtXA==
+  version "5.58.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.58.0.tgz#b1d4b0ad20243269d020ef9bbb036a40b0849829"
+  integrity sha512-vxHvLhH0qgBd3/tW6/VccptSfc8FxPQIkmNTVLWcCOVqSBvqpnKkBTYrhcGlXfSnd78azwe+PsjYFj0X34/njA==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.43.0"
-    "@typescript-eslint/type-utils" "5.43.0"
-    "@typescript-eslint/utils" "5.43.0"
+    "@eslint-community/regexpp" "^4.4.0"
+    "@typescript-eslint/scope-manager" "5.58.0"
+    "@typescript-eslint/type-utils" "5.58.0"
+    "@typescript-eslint/utils" "5.58.0"
     debug "^4.3.4"
+    grapheme-splitter "^1.0.4"
     ignore "^5.2.0"
     natural-compare-lite "^1.4.0"
-    regexpp "^3.2.0"
     semver "^7.3.7"
     tsutils "^3.21.0"
 
 "@typescript-eslint/experimental-utils@^5.0.0":
-  version "5.43.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-5.43.0.tgz#2fbea6ea89e59e780e42ca65bc39fc830db95ed4"
-  integrity sha512-WkT637CumTJbm/hRbFfnHBMgfUYTKr08LitVsD7gQId7bi6rnkx3pu3jac67lmp5ObW4MpJ9SNFZAIOUB/Qbsw==
+  version "5.58.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-5.58.0.tgz#157af1376add1a945c4559eef25114f0a29f49e1"
+  integrity sha512-LA/sRPaynZlrlYxdefrZbMx8dqs/1Kc0yNG+XOk5CwwZx7tTv263ix3AJNioF0YBVt7hADpAUR20owl6pv4MIQ==
   dependencies:
-    "@typescript-eslint/utils" "5.43.0"
+    "@typescript-eslint/utils" "5.58.0"
 
 "@typescript-eslint/parser@^5.5.0":
-  version "5.43.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.43.0.tgz#9c86581234b88f2ba406f0b99a274a91c11630fd"
-  integrity sha512-2iHUK2Lh7PwNUlhFxxLI2haSDNyXvebBO9izhjhMoDC+S3XI9qt2DGFUsiJ89m2k7gGYch2aEpYqV5F/+nwZug==
+  version "5.58.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.58.0.tgz#2ac4464cf48bef2e3234cb178ede5af352dddbc6"
+  integrity sha512-ixaM3gRtlfrKzP8N6lRhBbjTow1t6ztfBvQNGuRM8qH1bjFFXIJ35XY+FC0RRBKn3C6cT+7VW1y8tNm7DwPHDQ==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.43.0"
-    "@typescript-eslint/types" "5.43.0"
-    "@typescript-eslint/typescript-estree" "5.43.0"
+    "@typescript-eslint/scope-manager" "5.58.0"
+    "@typescript-eslint/types" "5.58.0"
+    "@typescript-eslint/typescript-estree" "5.58.0"
     debug "^4.3.4"
 
-"@typescript-eslint/scope-manager@5.43.0":
-  version "5.43.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.43.0.tgz#566e46303392014d5d163704724872e1f2dd3c15"
-  integrity sha512-XNWnGaqAtTJsUiZaoiGIrdJYHsUOd3BZ3Qj5zKp9w6km6HsrjPk/TGZv0qMTWyWj0+1QOqpHQ2gZOLXaGA9Ekw==
+"@typescript-eslint/scope-manager@5.58.0":
+  version "5.58.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.58.0.tgz#5e023a48352afc6a87be6ce3c8e763bc9e2f0bc8"
+  integrity sha512-b+w8ypN5CFvrXWQb9Ow9T4/6LC2MikNf1viLkYTiTbkQl46CnR69w7lajz1icW0TBsYmlpg+mRzFJ4LEJ8X9NA==
   dependencies:
-    "@typescript-eslint/types" "5.43.0"
-    "@typescript-eslint/visitor-keys" "5.43.0"
+    "@typescript-eslint/types" "5.58.0"
+    "@typescript-eslint/visitor-keys" "5.58.0"
 
-"@typescript-eslint/type-utils@5.43.0":
-  version "5.43.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.43.0.tgz#91110fb827df5161209ecca06f70d19a96030be6"
-  integrity sha512-K21f+KY2/VvYggLf5Pk4tgBOPs2otTaIHy2zjclo7UZGLyFH86VfUOm5iq+OtDtxq/Zwu2I3ujDBykVW4Xtmtg==
+"@typescript-eslint/type-utils@5.58.0":
+  version "5.58.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.58.0.tgz#f7d5b3971483d4015a470d8a9e5b8a7d10066e52"
+  integrity sha512-FF5vP/SKAFJ+LmR9PENql7fQVVgGDOS+dq3j+cKl9iW/9VuZC/8CFmzIP0DLKXfWKpRHawJiG70rVH+xZZbp8w==
   dependencies:
-    "@typescript-eslint/typescript-estree" "5.43.0"
-    "@typescript-eslint/utils" "5.43.0"
+    "@typescript-eslint/typescript-estree" "5.58.0"
+    "@typescript-eslint/utils" "5.58.0"
     debug "^4.3.4"
     tsutils "^3.21.0"
 
-"@typescript-eslint/types@5.43.0":
-  version "5.43.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.43.0.tgz#e4ddd7846fcbc074325293515fa98e844d8d2578"
-  integrity sha512-jpsbcD0x6AUvV7tyOlyvon0aUsQpF8W+7TpJntfCUWU1qaIKu2K34pMwQKSzQH8ORgUrGYY6pVIh1Pi8TNeteg==
+"@typescript-eslint/types@5.58.0":
+  version "5.58.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.58.0.tgz#54c490b8522c18986004df7674c644ffe2ed77d8"
+  integrity sha512-JYV4eITHPzVQMnHZcYJXl2ZloC7thuUHrcUmxtzvItyKPvQ50kb9QXBkgNAt90OYMqwaodQh2kHutWZl1fc+1g==
 
-"@typescript-eslint/typescript-estree@5.43.0":
-  version "5.43.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.43.0.tgz#b6883e58ba236a602c334be116bfc00b58b3b9f2"
-  integrity sha512-BZ1WVe+QQ+igWal2tDbNg1j2HWUkAa+CVqdU79L4HP9izQY6CNhXfkNwd1SS4+sSZAP/EthI1uiCSY/+H0pROg==
+"@typescript-eslint/typescript-estree@5.58.0":
+  version "5.58.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.58.0.tgz#4966e6ff57eaf6e0fce2586497edc097e2ab3e61"
+  integrity sha512-cRACvGTodA+UxnYM2uwA2KCwRL7VAzo45syNysqlMyNyjw0Z35Icc9ihPJZjIYuA5bXJYiJ2YGUB59BqlOZT1Q==
   dependencies:
-    "@typescript-eslint/types" "5.43.0"
-    "@typescript-eslint/visitor-keys" "5.43.0"
+    "@typescript-eslint/types" "5.58.0"
+    "@typescript-eslint/visitor-keys" "5.58.0"
     debug "^4.3.4"
     globby "^11.1.0"
     is-glob "^4.0.3"
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/utils@5.43.0", "@typescript-eslint/utils@^5.13.0":
-  version "5.43.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.43.0.tgz#00fdeea07811dbdf68774a6f6eacfee17fcc669f"
-  integrity sha512-8nVpA6yX0sCjf7v/NDfeaOlyaIIqL7OaIGOWSPFqUKK59Gnumd3Wa+2l8oAaYO2lk0sO+SbWFWRSvhu8gLGv4A==
+"@typescript-eslint/utils@5.58.0", "@typescript-eslint/utils@^5.43.0":
+  version "5.58.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.58.0.tgz#430d7c95f23ec457b05be5520c1700a0dfd559d5"
+  integrity sha512-gAmLOTFXMXOC+zP1fsqm3VceKSBQJNzV385Ok3+yzlavNHZoedajjS4UyS21gabJYcobuigQPs/z71A9MdJFqQ==
   dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
     "@types/json-schema" "^7.0.9"
     "@types/semver" "^7.3.12"
-    "@typescript-eslint/scope-manager" "5.43.0"
-    "@typescript-eslint/types" "5.43.0"
-    "@typescript-eslint/typescript-estree" "5.43.0"
+    "@typescript-eslint/scope-manager" "5.58.0"
+    "@typescript-eslint/types" "5.58.0"
+    "@typescript-eslint/typescript-estree" "5.58.0"
     eslint-scope "^5.1.1"
-    eslint-utils "^3.0.0"
     semver "^7.3.7"
 
-"@typescript-eslint/visitor-keys@5.43.0":
-  version "5.43.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.43.0.tgz#cbbdadfdfea385310a20a962afda728ea106befa"
-  integrity sha512-icl1jNH/d18OVHLfcwdL3bWUKsBeIiKYTGxMJCoGe7xFht+E4QgzOqoWYrU8XSLJWhVw8nTacbm03v23J/hFTg==
+"@typescript-eslint/visitor-keys@5.58.0":
+  version "5.58.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.58.0.tgz#eb9de3a61d2331829e6761ce7fd13061781168b4"
+  integrity sha512-/fBraTlPj0jwdyTwLyrRTxv/3lnU2H96pNTVM6z3esTWLtA5MZ9ghSMJ7Rb+TtUAdtEw9EyJzJ0EydIMKxQ9gA==
   dependencies:
-    "@typescript-eslint/types" "5.43.0"
+    "@typescript-eslint/types" "5.58.0"
     eslint-visitor-keys "^3.3.0"
 
 "@webassemblyjs/ast@1.11.1":
@@ -3377,34 +3176,25 @@ acorn-jsx@^5.3.1, acorn-jsx@^5.3.2:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn-node@^1.8.2:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
-  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
-  dependencies:
-    acorn "^7.0.0"
-    acorn-walk "^7.0.0"
-    xtend "^4.0.2"
-
-acorn-walk@^7.0.0, acorn-walk@^7.1.1:
+acorn-walk@^7.1.1:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
-acorn@^7.0.0, acorn@^7.1.1, acorn@^7.4.0:
+acorn@^7.1.1, acorn@^7.4.0:
   version "7.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
 acorn@^8.2.4, acorn@^8.5.0, acorn@^8.7.1, acorn@^8.8.0:
-  version "8.8.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.1.tgz#0a3f9cbecc4ec3bea6f0a80b66ae8dd2da250b73"
-  integrity sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==
+  version "8.8.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
+  integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
 
 address@^1.0.1, address@^1.1.2:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/address/-/address-1.2.1.tgz#25bb61095b7522d65b357baa11bc05492d4c8acd"
-  integrity sha512-B+6bi5D34+fDYENiH5qOlA0cV2rAGKuWZ9LeyUUehbXy8e0VS9e498yO0Jeeh+iM+6KbfudHTFjXw2MmJD4QRA==
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/address/-/address-1.2.2.tgz#2b5248dac5485a6390532c6a517fda2e3faac89e"
+  integrity sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==
 
 adjust-sourcemap-loader@^4.0.0:
   version "4.0.0"
@@ -3463,20 +3253,10 @@ ajv@^6.10.0, ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^8.0.0, ajv@^8.6.0, ajv@^8.8.0:
-  version "8.11.2"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.11.2.tgz#aecb20b50607acf2569b6382167b65a96008bb78"
-  integrity sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==
-  dependencies:
-    fast-deep-equal "^3.1.1"
-    json-schema-traverse "^1.0.0"
-    require-from-string "^2.0.2"
-    uri-js "^4.2.2"
-
-ajv@^8.0.1:
-  version "8.11.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.11.0.tgz#977e91dd96ca669f54a11e23e378e33b884a565f"
-  integrity sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==
+ajv@^8.0.0, ajv@^8.0.1, ajv@^8.6.0, ajv@^8.8.0:
+  version "8.12.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.12.0.tgz#d1a0527323e22f53562c567c00991577dfbe19d1"
+  integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
   dependencies:
     fast-deep-equal "^3.1.1"
     json-schema-traverse "^1.0.0"
@@ -3534,10 +3314,15 @@ ansi-styles@^6.0.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
   integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
 
+any-promise@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
 anymatch@^3.0.3, anymatch@~3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
-  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
   dependencies:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
@@ -3571,16 +3356,23 @@ aria-query@^4.2.2:
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
   integrity sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==
   dependencies:
-    "@babel/runtime" "^7.10.2"
-    "@babel/runtime-corejs3" "^7.10.2"
+    tslib "^2.0.0"
 
-aria-query@^5.0.0:
+aria-query@^5.0.0, aria-query@^5.1.3:
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
   integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==
   dependencies:
     deep-equal "^2.0.5"
 
+array-buffer-byte-length@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz#fabe8bc193fea865f317fe7807085ee0dee5aead"
+  integrity sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==
+  dependencies:
+    call-bind "^1.0.2"
+    is-array-buffer "^3.0.1"
+
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
@@ -3591,18 +3383,7 @@ array-flatten@^2.1.2:
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.2.tgz#24ef80a28c1a893617e2149b0c6d0d788293b099"
   integrity sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==
 
-array-includes@^3.1.4, array-includes@^3.1.5:
-  version "3.1.5"
-  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.5.tgz#2c320010db8d31031fd2a5f6b3bbd4b1aad31bdb"
-  integrity sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.19.5"
-    get-intrinsic "^1.1.1"
-    is-string "^1.0.7"
-
-array-includes@^3.1.6:
+array-includes@^3.1.5, array-includes@^3.1.6:
   version "3.1.6"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.6.tgz#9e9e720e194f198266ba9e18c29e6a9b0e4b225f"
   integrity sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==
@@ -3618,14 +3399,14 @@ array-union@^2.1.0:
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
-array.prototype.flat@^1.2.5:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz#0b0c1567bf57b38b56b4c97b8aa72ab45e4adc7b"
-  integrity sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==
+array.prototype.flat@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz#ffc6576a7ca3efc2f46a143b9d1dda9b4b3cf5e2"
+  integrity sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
     es-shim-unscopables "^1.0.0"
 
 array.prototype.flatmap@^1.3.1:
@@ -3638,14 +3419,14 @@ array.prototype.flatmap@^1.3.1:
     es-abstract "^1.20.4"
     es-shim-unscopables "^1.0.0"
 
-array.prototype.reduce@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/array.prototype.reduce/-/array.prototype.reduce-1.0.4.tgz#8167e80089f78bff70a99e20bd4201d4663b0a6f"
-  integrity sha512-WnM+AjG/DvLRLo4DDl+r+SvCzYtD2Jd9oeBYMcEaI7t3fFrHY9M53/wdLcTvmZNQ70IU6Htj0emFkZ5TS+lrdw==
+array.prototype.reduce@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.reduce/-/array.prototype.reduce-1.0.5.tgz#6b20b0daa9d9734dd6bc7ea66b5bbce395471eac"
+  integrity sha512-kDdugMl7id9COE8R7MHF5jWk7Dqt/fs4Pv+JXoICnYwqpjjjbUurz6w5fT5IG6brLdJhv6/VoHB0H7oyIBXd+Q==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
     es-array-method-boxes-properly "^1.0.0"
     is-string "^1.0.7"
 
@@ -3718,12 +3499,12 @@ atob@^2.1.2:
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
 autoprefixer@^10.4.13:
-  version "10.4.13"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.13.tgz#b5136b59930209a321e9fa3dca2e7c4d223e83a8"
-  integrity sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==
+  version "10.4.14"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.14.tgz#e28d49902f8e759dd25b153264e862df2705f79d"
+  integrity sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==
   dependencies:
-    browserslist "^4.21.4"
-    caniuse-lite "^1.0.30001426"
+    browserslist "^4.21.5"
+    caniuse-lite "^1.0.30001464"
     fraction.js "^4.2.0"
     normalize-range "^0.1.2"
     picocolors "^1.0.0"
@@ -3734,15 +3515,17 @@ available-typed-arrays@^1.0.5:
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
   integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
 
-axe-core@^4.4.3:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.5.0.tgz#6efe2ecdba205fcc9d7ddb3d48c2cf630f70eb5e"
-  integrity sha512-4+rr8eQ7+XXS5nZrKcMO/AikHL0hVqy+lHWAnE3xdHl+aguag8SOQ6eEqLexwLNWgXIMfunGuD3ON1/6Kyet0A==
+axe-core@^4.6.2:
+  version "4.6.3"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.6.3.tgz#fc0db6fdb65cc7a80ccf85286d91d64ababa3ece"
+  integrity sha512-/BQzOX780JhsxDnPpH4ZiyrJAzcd8AfzFPkv+89veFSr1rcMjuq2JDCwypKaPeB6ljHp9KjXhPpjgCvQlWYuqg==
 
-axobject-query@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
-  integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
+axobject-query@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.1.1.tgz#3b6e5c6d4e43ca7ba51c5babf99d22a9c68485e1"
+  integrity sha512-goKlv8DZrK9hUh975fnHzhNIO4jUnFCfv/dszV5VwUGDFjI6vQ2VwoyjYjYNEbBE8AH87TduWP5uyDR1D+Iteg==
+  dependencies:
+    deep-equal "^2.0.5"
 
 babel-jest@^27.4.2, babel-jest@^27.5.1:
   version "27.5.1"
@@ -3961,9 +3744,9 @@ body-parser@1.20.1:
     unpipe "1.0.0"
 
 bonjour-service@^1.0.11:
-  version "1.0.14"
-  resolved "https://registry.yarnpkg.com/bonjour-service/-/bonjour-service-1.0.14.tgz#c346f5bc84e87802d08f8d5a60b93f758e514ee7"
-  integrity sha512-HIMbgLnk1Vqvs6B4Wq5ep7mxvj9sGz5d1JJyDNSGNIdA/w2MCz6GTjWTdjqOJV1bEPj+6IkxDvWNFKEBxNt4kQ==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/bonjour-service/-/bonjour-service-1.1.1.tgz#960948fa0e0153f5d26743ab15baf8e33752c135"
+  integrity sha512-Z/5lQRMOG9k7W+FkeGTNjh7htqn/2LMnfOvBZ8pynNZCM9MwkQkI3zeI4oz09uWdcgmgHugVvBqxGg4VQJ5PCg==
   dependencies:
     array-flatten "^2.1.2"
     dns-equal "^1.0.0"
@@ -4007,15 +3790,15 @@ browser-process-hrtime@^1.0.0:
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
   integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
 
-browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.6, browserslist@^4.18.1, browserslist@^4.21.3, browserslist@^4.21.4:
-  version "4.21.4"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.4.tgz#e7496bbc67b9e39dd0f98565feccdcb0d4ff6987"
-  integrity sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==
+browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.18.1, browserslist@^4.21.3, browserslist@^4.21.4, browserslist@^4.21.5:
+  version "4.21.5"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.5.tgz#75c5dae60063ee641f977e00edd3cfb2fb7af6a7"
+  integrity sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==
   dependencies:
-    caniuse-lite "^1.0.30001400"
-    electron-to-chromium "^1.4.251"
-    node-releases "^2.0.6"
-    update-browserslist-db "^1.0.9"
+    caniuse-lite "^1.0.30001449"
+    electron-to-chromium "^1.4.284"
+    node-releases "^2.0.8"
+    update-browserslist-db "^1.0.10"
 
 bser@2.1.1:
   version "2.1.1"
@@ -4090,15 +3873,15 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001400:
-  version "1.0.30001427"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001427.tgz#d3a749f74be7ae0671fbec3a4eea18576e8ad646"
-  integrity sha512-lfXQ73oB9c8DP5Suxaszm+Ta2sr/4tf8+381GkIm1MLj/YdLf+rEDyDSRCzeltuyTVGm+/s18gdZ0q+Wmp8VsQ==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464:
+  version "1.0.30001478"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001478.tgz#0ef8a1cf8b16be47a0f9fc4ecfc952232724b32a"
+  integrity sha512-gMhDyXGItTHipJj2ApIvR+iVB5hd0KP3svMWWXDvZOmjzJJassGLMfxRkQCSYgGd2gtdL/ReeiyvMSFD1Ss6Mw==
 
-caniuse-lite@^1.0.30001426:
-  version "1.0.30001431"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz#e7c59bd1bc518fae03a4656be442ce6c4887a795"
-  integrity sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==
+canvas-roundrect-polyfill@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/canvas-roundrect-polyfill/-/canvas-roundrect-polyfill-0.0.1.tgz#70bf107ebe2037f26d839d7f809a26f4a95f5696"
+  integrity sha512-yWq+R3U3jE+coOeEb3a3GgE2j/0MMiDKM/QpLb6h9ihf5fGY9UXtvK9o4vNqjWXoZz7/3EaSVU3IX53TvFFUOw==
 
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"
@@ -4159,9 +3942,9 @@ check-error@^1.0.2:
   integrity sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==
 
 check-types@^11.1.1:
-  version "11.1.2"
-  resolved "https://registry.yarnpkg.com/check-types/-/check-types-11.1.2.tgz#86a7c12bf5539f6324eb0e70ca8896c0e38f3e2f"
-  integrity sha512-tzWzvgePgLORb9/3a0YenggReLKAIb2owL03H2Xdoe5pKcUyWRSEQ8xfCar8t2SIAuEDwtmx2da1YB52YuHQMQ==
+  version "11.2.2"
+  resolved "https://registry.yarnpkg.com/check-types/-/check-types-11.2.2.tgz#7afc0b6a860d686885062f2dba888ba5710335b4"
+  integrity sha512-HBiYvXvn9Z70Z88XKjz3AEKd4HJhBXsa3j7xFnITAzoS8+q6eIGi8qDB8FKPBAjtuxjI/zFpwuiCb8oDtKOYrA==
 
 "chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.2, chokidar@^3.5.3:
   version "3.5.3"
@@ -4184,9 +3967,9 @@ chrome-trace-event@^1.0.2:
   integrity sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==
 
 ci-info@^3.2.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.5.0.tgz#bfac2a29263de4c829d806b1ab478e35091e171f"
-  integrity sha512-yH4RezKOGlOhxkmhbeNuC4eYZKAUsEaGtBuBzDDP1eFUKiccDWzBABxBfOx31IDwDIXMTxWuwAxUGModvkbuVw==
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.8.0.tgz#81408265a5380c929f0bc665d62256628ce9ef91"
+  integrity sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==
 
 cjs-module-lexer@^1.0.0:
   version "1.2.2"
@@ -4194,9 +3977,9 @@ cjs-module-lexer@^1.0.0:
   integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
 
 clean-css@^5.2.2:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.1.tgz#d0610b0b90d125196a2894d35366f734e5d7aa32"
-  integrity sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.2.tgz#70ecc7d4d4114921f5d298349ff86a31a9975224"
+  integrity sha512-JVJbM+f3d3Q704rF4bqQ5UUyTtuJ0JRKNbTKVEeujCCBoMdkEi+V+e8oktO9qGQNSvHrFTM6JZRXrUvGR1czww==
   dependencies:
     source-map "~0.6.0"
 
@@ -4307,6 +4090,11 @@ commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
 commander@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
@@ -4390,9 +4178,9 @@ content-disposition@0.5.4:
     safe-buffer "5.2.1"
 
 content-type@~1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
-  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
+  integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
 
 convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.9.0"
@@ -4410,36 +4198,26 @@ cookie@0.5.0:
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
 core-js-compat@^3.25.1:
-  version "3.26.0"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.26.0.tgz#94e2cf8ba3e63800c4956ea298a6473bc9d62b44"
-  integrity sha512-piOX9Go+Z4f9ZiBFLnZ5VrOpBl0h7IGCkiFUN11QTe6LjAvOT3ifL/5TdoizMh99hcGy5SoLyWbapIY/PIb/3A==
+  version "3.30.0"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.30.0.tgz#99aa2789f6ed2debfa1df3232784126ee97f4d80"
+  integrity sha512-P5A2h/9mRYZFIAP+5Ab8ns6083IyVpSclU74UNvbGVQ8VM7n3n3/g2yF3AkKQ9NXz2O+ioxLbEWKnDtgsFamhg==
   dependencies:
-    browserslist "^4.21.4"
+    browserslist "^4.21.5"
 
 core-js-pure@^3.23.3:
-  version "3.26.1"
-  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.26.1.tgz#653f4d7130c427820dcecd3168b594e8bb095a33"
-  integrity sha512-VVXcDpp/xJ21KdULRq/lXdLzQAtX7+37LzpyfFM973il0tWSsDEoyzG38G14AjTpK9VTfiNM9jnFauq/CpaWGQ==
-
-core-js-pure@^3.25.1:
-  version "3.26.0"
-  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.26.0.tgz#7ad8a5dd7d910756f3124374b50026e23265ca9a"
-  integrity sha512-LiN6fylpVBVwT8twhhluD9TzXmZQQsr2I2eIKtWNbZI1XMfBT7CV18itaN6RA7EtQd/SDdRx/wzvAShX2HvhQA==
+  version "3.30.0"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.30.0.tgz#41b6c42e5f363bd53d79999bd35093b17e42e1bf"
+  integrity sha512-+2KbMFGeBU0ln/csoPqTe0i/yfHbrd2EUhNMObsGtXMKS/RTtlkYyi+/3twLcevbgNR0yM/r0Psa3TEoQRpFMQ==
 
 core-js@3.6.5:
   version "3.6.5"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
   integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
 
-core-js@^3.19.2:
-  version "3.26.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.26.1.tgz#7a9816dabd9ee846c1c0fe0e8fcad68f3709134e"
-  integrity sha512-21491RRQVzUn0GGM9Z1Jrpr6PNPxPi+Za8OM9q4tksTSnlbXXGKK1nXNg/QvwFYettXvSX6zWKCtHHfjN4puyA==
-
-core-js@^3.4:
-  version "3.26.0"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.26.0.tgz#a516db0ed0811be10eac5d94f3b8463d03faccfe"
-  integrity sha512-+DkDrhoR4Y0PxDz6rurahuB+I45OsEUv8E1maPTB6OuHRohMMcznBq9TMpdpDMm/hUPob/mJJS3PqgbHpMTQgw==
+core-js@^3.19.2, core-js@^3.4:
+  version "3.30.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.30.0.tgz#64ac6f83bc7a49fd42807327051701d4b1478dea"
+  integrity sha512-hQotSSARoNh1mYPi9O2YaWeiq/cEB95kOrFb4NCrO4RIFt1qqNpKsaE+vy/L3oiqvND5cThqXzUU3r9F7Efztg==
 
 core-util-is@~1.0.0:
   version "1.0.3"
@@ -4463,9 +4241,9 @@ cosmiconfig@^6.0.0:
     yaml "^1.7.2"
 
 cosmiconfig@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d"
-  integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
+  integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
   dependencies:
     "@types/parse-json" "^4.0.0"
     import-fresh "^3.2.1"
@@ -4507,9 +4285,9 @@ css-blank-pseudo@^3.0.3:
     postcss-selector-parser "^6.0.9"
 
 css-declaration-sorter@^6.3.1:
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz#be5e1d71b7a992433fb1c542c7a1b835e45682ec"
-  integrity sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.4.0.tgz#630618adc21724484b3e9505bce812def44000ad"
+  integrity sha512-jDfsatwWMWN0MODAFuHszfjphEXfNw9JUAhmY4pLu3TyTU+ohUpsbVtbU+1MZn4a47D9kqh03i4eyOm+74+zew==
 
 css-has-pseudo@^3.0.4:
   version "3.0.4"
@@ -4519,12 +4297,12 @@ css-has-pseudo@^3.0.4:
     postcss-selector-parser "^6.0.9"
 
 css-loader@^6.5.1:
-  version "6.7.2"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.7.2.tgz#26bc22401b5921686a10fbeba75d124228302304"
-  integrity sha512-oqGbbVcBJkm8QwmnNzrFrWTnudnRZC+1eXikLJl0n4ljcfotgRifpg2a1lKy8jTrc4/d9A/ap1GFq1jDKG7J+Q==
+  version "6.7.3"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.7.3.tgz#1e8799f3ccc5874fdd55461af51137fcc5befbcd"
+  integrity sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==
   dependencies:
     icss-utils "^5.1.0"
-    postcss "^8.4.18"
+    postcss "^8.4.19"
     postcss-modules-extract-imports "^3.0.0"
     postcss-modules-local-by-default "^4.0.0"
     postcss-modules-scope "^3.0.0"
@@ -4616,9 +4394,9 @@ css@^3.0.0:
     source-map-resolve "^0.6.0"
 
 cssdb@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-7.1.0.tgz#574f97235a83eb753a29f0b1f2cbacac0d628bb8"
-  integrity sha512-Sd99PrFgx28ez4GHu8yoQIufc/70h9oYowDf4EjeIKi8mac9whxRjhM3IaMr6EllP6KKKWtJrMfN6C7T9tIWvQ==
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-7.5.4.tgz#e34dafee5184d67634604e345e389ca79ac179ea"
+  integrity sha512-fGD+J6Jlq+aurfE1VDXlLS4Pt0VtNlu2+YgfGOdMxRyl/HQ9bDiHTwSck1Yz8A97Dt/82izSK6Bp/4nVqacOsg==
 
 cssesc@^3.0.0:
   version "3.0.0"
@@ -4630,22 +4408,22 @@ cssfontparser@^1.2.1:
   resolved "https://registry.yarnpkg.com/cssfontparser/-/cssfontparser-1.2.1.tgz#f4022fc8f9700c68029d542084afbaf425a3f3e3"
   integrity sha512-6tun4LoZnj7VN6YeegOVb67KBX/7JJsqvj+pv3ZA7F878/eN33AbGa5b/S/wXxS/tcp8nc40xRUrsPlxIyNUPg==
 
-cssnano-preset-default@^5.2.13:
-  version "5.2.13"
-  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-5.2.13.tgz#e7353b0c57975d1bdd97ac96e68e5c1b8c68e990"
-  integrity sha512-PX7sQ4Pb+UtOWuz8A1d+Rbi+WimBIxJTRyBdgGp1J75VU0r/HFQeLnMYgHiCAp6AR4rqrc7Y4R+1Rjk3KJz6DQ==
+cssnano-preset-default@^5.2.14:
+  version "5.2.14"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz#309def4f7b7e16d71ab2438052093330d9ab45d8"
+  integrity sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==
   dependencies:
     css-declaration-sorter "^6.3.1"
     cssnano-utils "^3.1.0"
     postcss-calc "^8.2.3"
-    postcss-colormin "^5.3.0"
+    postcss-colormin "^5.3.1"
     postcss-convert-values "^5.1.3"
     postcss-discard-comments "^5.1.2"
     postcss-discard-duplicates "^5.1.0"
     postcss-discard-empty "^5.1.1"
     postcss-discard-overridden "^5.1.0"
     postcss-merge-longhand "^5.1.7"
-    postcss-merge-rules "^5.1.3"
+    postcss-merge-rules "^5.1.4"
     postcss-minify-font-values "^5.1.0"
     postcss-minify-gradients "^5.1.1"
     postcss-minify-params "^5.1.4"
@@ -4660,7 +4438,7 @@ cssnano-preset-default@^5.2.13:
     postcss-normalize-url "^5.1.0"
     postcss-normalize-whitespace "^5.1.1"
     postcss-ordered-values "^5.1.3"
-    postcss-reduce-initial "^5.1.1"
+    postcss-reduce-initial "^5.1.2"
     postcss-reduce-transforms "^5.1.0"
     postcss-svgo "^5.1.0"
     postcss-unique-selectors "^5.1.1"
@@ -4671,11 +4449,11 @@ cssnano-utils@^3.1.0:
   integrity sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==
 
 cssnano@^5.0.6:
-  version "5.1.14"
-  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-5.1.14.tgz#07b0af6da73641276fe5a6d45757702ebae2eb05"
-  integrity sha512-Oou7ihiTocbKqi0J1bB+TRJIQX5RMR3JghA8hcWSw9mjBLQ5Y3RWqEDoYG3sRNlAbCIXpqMoZGbq5KDR3vdzgw==
+  version "5.1.15"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-5.1.15.tgz#ded66b5480d5127fcb44dac12ea5a983755136bf"
+  integrity sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==
   dependencies:
-    cssnano-preset-default "^5.2.13"
+    cssnano-preset-default "^5.2.14"
     lilconfig "^2.0.3"
     yaml "^1.10.2"
 
@@ -4704,9 +4482,9 @@ cssstyle@^2.3.0:
     cssom "~0.3.6"
 
 csstype@^3.0.2:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
-  integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
@@ -4722,7 +4500,7 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-debug@2.6.9, debug@^2.6.0, debug@^2.6.9:
+debug@2.6.9, debug@^2.6.0:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -4751,9 +4529,9 @@ debug@~3.1.0:
     ms "2.0.0"
 
 decimal.js@^10.2.1:
-  version "10.4.2"
-  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.2.tgz#0341651d1d997d86065a2ce3a441fbd0d8e8b98e"
-  integrity sha512-ic1yEvwT6GuvaYwBLLY6/aFFgjZdySKTE8en/fkU3QICTmRtgtSlFn0u0BXN06InZwtfCelR7j8LRiDI/02iGA==
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23"
+  integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==
 
 decode-uri-component@^0.2.0:
   version "0.2.2"
@@ -4773,25 +4551,27 @@ deep-eql@^3.0.1:
     type-detect "^4.0.0"
 
 deep-equal@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.5.tgz#55cd2fe326d83f9cbf7261ef0e060b3f724c5cb9"
-  integrity sha512-nPiRgmbAtm1a3JsnLCf6/SLfXcjyN5v8L1TXzdCmHrXJ4hx+gW/w1YCcn7z8gJtSiDArZCgYtbao3QqLm/N1Sw==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.2.0.tgz#5caeace9c781028b9ff459f33b779346637c43e6"
+  integrity sha512-RdpzE0Hv4lhowpIUKKMJfeH6C1pXdtT1/it80ubgWqwI3qpuxUBpC1S4hnHg+zjnuOoDkzUtUCEEkG+XG5l3Mw==
   dependencies:
-    call-bind "^1.0.0"
-    es-get-iterator "^1.1.1"
-    get-intrinsic "^1.0.1"
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.2"
-    is-regex "^1.1.1"
+    call-bind "^1.0.2"
+    es-get-iterator "^1.1.2"
+    get-intrinsic "^1.1.3"
+    is-arguments "^1.1.1"
+    is-array-buffer "^3.0.1"
+    is-date-object "^1.0.5"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.2"
     isarray "^2.0.5"
-    object-is "^1.1.4"
+    object-is "^1.1.5"
     object-keys "^1.1.1"
-    object.assign "^4.1.2"
-    regexp.prototype.flags "^1.3.0"
-    side-channel "^1.0.3"
-    which-boxed-primitive "^1.0.1"
+    object.assign "^4.1.4"
+    regexp.prototype.flags "^1.4.3"
+    side-channel "^1.0.4"
+    which-boxed-primitive "^1.0.2"
     which-collection "^1.0.1"
-    which-typed-array "^1.1.2"
+    which-typed-array "^1.1.9"
 
 deep-is@^0.1.3, deep-is@~0.1.3:
   version "0.1.4"
@@ -4799,9 +4579,9 @@ deep-is@^0.1.3, deep-is@~0.1.3:
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
 deepmerge@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
-  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
+  integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
 
 default-gateway@^6.0.3:
   version "6.0.3"
@@ -4816,18 +4596,13 @@ define-lazy-prop@^2.0.0:
   integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
 
 define-properties@^1.1.3, define-properties@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.4.tgz#0b14d7bd7fbeb2f3572c3a7eda80ea5d57fb05b1"
-  integrity sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.0.tgz#52988570670c9eacedd8064f4a990f2405849bd5"
+  integrity sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==
   dependencies:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
-defined@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.1.tgz#c0b9db27bfaffd95d6f61399419b893df0f91ebf"
-  integrity sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==
-
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -4858,6 +4633,11 @@ detect-node-es@^1.1.0:
   resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
   integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
 
+detect-node-es@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
+  integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
+
 detect-node@^2.0.4:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
@@ -4871,15 +4651,6 @@ detect-port-alt@^1.1.6:
     address "^1.0.1"
     debug "^2.6.0"
 
-detective@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.1.tgz#6af01eeda11015acb0e73f933242b70f24f91034"
-  integrity sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==
-  dependencies:
-    acorn-node "^1.8.2"
-    defined "^1.0.0"
-    minimist "^1.2.6"
-
 didyoumean@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
@@ -4890,10 +4661,10 @@ diff-sequences@^27.5.1:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.5.1.tgz#eaecc0d327fd68c8d9672a1e64ab8dccb2ef5327"
   integrity sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==
 
-diff-sequences@^29.2.0:
-  version "29.2.0"
-  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.2.0.tgz#4c55b5b40706c7b5d2c5c75999a50c56d214e8f6"
-  integrity sha512-413SY5JpYeSBZxmenGEmCVQ8mCgtFJF0w9PROdaS6z987XC2Pd2GOKqOITLtMftmyFZqgtCOb/QA7/Z3ZXfzIw==
+diff-sequences@^29.4.3:
+  version "29.4.3"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.4.3.tgz#9314bc1fabe09267ffeca9cbafc457d8499a13f2"
+  integrity sha512-ofrBgwpPhCD85kMKtE9RYFFq6OC1A89oW2vvgWZNCwxrUpRUILopY7lsYyMDSjc8g6U6aiO0Qubg6r4Wgt5ZnA==
 
 dir-glob@^3.0.1:
   version "3.0.1"
@@ -4913,9 +4684,9 @@ dns-equal@^1.0.0:
   integrity sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg==
 
 dns-packet@^5.2.2:
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-5.4.0.tgz#1f88477cf9f27e78a213fb6d118ae38e759a879b"
-  integrity sha512-EgqGeaBB8hLiHLZtp/IbaDQTL8pZ0+IvwzSHA6d7VyMDM+B9hgddEMa9xjK5oYnw0ci0JQ6g2XCD7/f6cafU6g==
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-5.5.0.tgz#f59cbf3396c130957c56a6ad5fd3959ccdc30065"
+  integrity sha512-USawdAUzRkV6xrqTjiAEp6M9YagZEzWcSUaZTcIFAiyQWW1SoI6KyId8y2+/71wbgHKQAKd+iupLv4YvEwYWvA==
   dependencies:
     "@leichtgewicht/ip-codec" "^2.0.1"
 
@@ -4934,9 +4705,9 @@ doctrine@^3.0.0:
     esutils "^2.0.2"
 
 dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
-  version "0.5.14"
-  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz#56082f71b1dc7aac69d83c4285eef39c15d93f56"
-  integrity sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==
+  version "0.5.16"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
+  integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
 
 dom-converter@^0.2.0:
   version "0.2.0"
@@ -5054,16 +4825,16 @@ ee-first@1.1.1:
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
 ejs@^3.1.6:
-  version "3.1.8"
-  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.8.tgz#758d32910c78047585c7ef1f92f9ee041c1c190b"
-  integrity sha512-/sXZeMlhS0ArkfX2Aw780gJzXSMPnKjtspYZv+f3NiKLlubezAHDU5+9xz6gd3/NhG3txQCo6xlglmTS+oTGEQ==
+  version "3.1.9"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.9.tgz#03c9e8777fe12686a9effcef22303ca3d8eeb361"
+  integrity sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==
   dependencies:
     jake "^10.8.5"
 
-electron-to-chromium@^1.4.251:
-  version "1.4.284"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz#61046d1e4cab3a25238f6bf7413795270f125592"
-  integrity sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==
+electron-to-chromium@^1.4.284:
+  version "1.4.359"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.359.tgz#5c4d13cb08032469fcd6bd36457915caa211356b"
+  integrity sha512-OoVcngKCIuNXtZnsYoqlCvr0Cf3NIPzDIgwUfI9bdTFjXCrr79lI0kwQstLPZ7WhCezLlGksZk/BFAzoXC7GDw==
 
 emittery@^0.10.2:
   version "0.10.2"
@@ -5124,9 +4895,9 @@ engine.io-parser@~2.2.0:
     has-binary2 "~1.0.2"
 
 enhanced-resolve@^5.10.0:
-  version "5.10.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz#0dc579c3bb2a1032e357ac45b8f3a6f3ad4fb1e6"
-  integrity sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==
+  version "5.12.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz#300e1c90228f5b570c4d35babf263f6da7155634"
+  integrity sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==
   dependencies:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
@@ -5157,60 +4928,80 @@ error-stack-parser@^2.0.6:
   dependencies:
     stackframe "^1.3.4"
 
-es-abstract@^1.17.2, es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.2, es-abstract@^1.19.5, es-abstract@^1.20.0, es-abstract@^1.20.1, es-abstract@^1.20.4:
-  version "1.20.4"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.20.4.tgz#1d103f9f8d78d4cf0713edcd6d0ed1a46eed5861"
-  integrity sha512-0UtvRN79eMe2L+UNEF1BwRe364sj/DXhQ/k5FmivgoSdpM90b8Jc0mDzKMGo7QS0BVbOP/bTwBKNnDc9rNzaPA==
+es-abstract@^1.17.2, es-abstract@^1.19.0, es-abstract@^1.20.4:
+  version "1.21.2"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.21.2.tgz#a56b9695322c8a185dc25975aa3b8ec31d0e7eff"
+  integrity sha512-y/B5POM2iBnIxCiernH1G7rC9qQoM77lLIMQLuob0zhp8C56Po81+2Nj0WFKnd0pNReDTnkYryc+zhOzpEIROg==
   dependencies:
+    array-buffer-byte-length "^1.0.0"
+    available-typed-arrays "^1.0.5"
     call-bind "^1.0.2"
+    es-set-tostringtag "^2.0.1"
     es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
     function.prototype.name "^1.1.5"
-    get-intrinsic "^1.1.3"
+    get-intrinsic "^1.2.0"
     get-symbol-description "^1.0.0"
+    globalthis "^1.0.3"
+    gopd "^1.0.1"
     has "^1.0.3"
     has-property-descriptors "^1.0.0"
+    has-proto "^1.0.1"
     has-symbols "^1.0.3"
-    internal-slot "^1.0.3"
+    internal-slot "^1.0.5"
+    is-array-buffer "^3.0.2"
     is-callable "^1.2.7"
     is-negative-zero "^2.0.2"
     is-regex "^1.1.4"
     is-shared-array-buffer "^1.0.2"
     is-string "^1.0.7"
+    is-typed-array "^1.1.10"
     is-weakref "^1.0.2"
-    object-inspect "^1.12.2"
+    object-inspect "^1.12.3"
     object-keys "^1.1.1"
     object.assign "^4.1.4"
     regexp.prototype.flags "^1.4.3"
     safe-regex-test "^1.0.0"
-    string.prototype.trimend "^1.0.5"
-    string.prototype.trimstart "^1.0.5"
+    string.prototype.trim "^1.2.7"
+    string.prototype.trimend "^1.0.6"
+    string.prototype.trimstart "^1.0.6"
+    typed-array-length "^1.0.4"
     unbox-primitive "^1.0.2"
+    which-typed-array "^1.1.9"
 
 es-array-method-boxes-properly@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz#873f3e84418de4ee19c5be752990b2e44718d09e"
   integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
 
-es-get-iterator@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.2.tgz#9234c54aba713486d7ebde0220864af5e2b283f7"
-  integrity sha512-+DTO8GYwbMCwbywjimwZMHp8AuYXOS2JZFWoi2AlPOS3ebnII9w/NLpNZtA7A0YLaVDw+O7KFCeoIV7OPvM7hQ==
+es-get-iterator@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.3.tgz#3ef87523c5d464d41084b2c3c9c214f1199763d6"
+  integrity sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==
   dependencies:
     call-bind "^1.0.2"
-    get-intrinsic "^1.1.0"
-    has-symbols "^1.0.1"
-    is-arguments "^1.1.0"
+    get-intrinsic "^1.1.3"
+    has-symbols "^1.0.3"
+    is-arguments "^1.1.1"
     is-map "^2.0.2"
     is-set "^2.0.2"
-    is-string "^1.0.5"
+    is-string "^1.0.7"
     isarray "^2.0.5"
+    stop-iteration-iterator "^1.0.0"
 
 es-module-lexer@^0.9.0:
   version "0.9.3"
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19"
   integrity sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==
 
+es-set-tostringtag@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz#338d502f6f674301d710b80c8592de8a15f09cd8"
+  integrity sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==
+  dependencies:
+    get-intrinsic "^1.1.3"
+    has "^1.0.3"
+    has-tostringtag "^1.0.0"
+
 es-shim-unscopables@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz#702e632193201e3edf8713635d083d378e510241"
@@ -5289,15 +5080,16 @@ eslint-config-react-app@^7.0.1:
     eslint-plugin-react-hooks "^4.3.0"
     eslint-plugin-testing-library "^5.0.1"
 
-eslint-import-resolver-node@^0.3.6:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz#4048b958395da89668252001dbd9eca6b83bacbd"
-  integrity sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==
+eslint-import-resolver-node@^0.3.7:
+  version "0.3.7"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz#83b375187d412324a1963d84fa664377a23eb4d7"
+  integrity sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==
   dependencies:
     debug "^3.2.7"
-    resolve "^1.20.0"
+    is-core-module "^2.11.0"
+    resolve "^1.22.1"
 
-eslint-module-utils@^2.7.3:
+eslint-module-utils@^2.7.4:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz#4f3e41116aaf13a20792261e61d3a2e7e0583974"
   integrity sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==
@@ -5313,22 +5105,24 @@ eslint-plugin-flowtype@^8.0.3:
     string-natural-compare "^3.0.1"
 
 eslint-plugin-import@^2.25.3:
-  version "2.26.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz#f812dc47be4f2b72b478a021605a59fc6fe8b88b"
-  integrity sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==
+  version "2.27.5"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz#876a6d03f52608a3e5bb439c2550588e51dd6c65"
+  integrity sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==
   dependencies:
-    array-includes "^3.1.4"
-    array.prototype.flat "^1.2.5"
-    debug "^2.6.9"
+    array-includes "^3.1.6"
+    array.prototype.flat "^1.3.1"
+    array.prototype.flatmap "^1.3.1"
+    debug "^3.2.7"
     doctrine "^2.1.0"
-    eslint-import-resolver-node "^0.3.6"
-    eslint-module-utils "^2.7.3"
+    eslint-import-resolver-node "^0.3.7"
+    eslint-module-utils "^2.7.4"
     has "^1.0.3"
-    is-core-module "^2.8.1"
+    is-core-module "^2.11.0"
     is-glob "^4.0.3"
     minimatch "^3.1.2"
-    object.values "^1.1.5"
-    resolve "^1.22.0"
+    object.values "^1.1.6"
+    resolve "^1.22.1"
+    semver "^6.3.0"
     tsconfig-paths "^3.14.1"
 
 eslint-plugin-jest@^25.3.0:
@@ -5339,22 +5133,25 @@ eslint-plugin-jest@^25.3.0:
     "@typescript-eslint/experimental-utils" "^5.0.0"
 
 eslint-plugin-jsx-a11y@^6.5.1:
-  version "6.6.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.6.1.tgz#93736fc91b83fdc38cc8d115deedfc3091aef1ff"
-  integrity sha512-sXgFVNHiWffBq23uiS/JaP6eVR622DqwB4yTzKvGZGcPq6/yZ3WmOZfuBks/vHWo9GaFOqC2ZK4i6+C35knx7Q==
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz#fca5e02d115f48c9a597a6894d5bcec2f7a76976"
+  integrity sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==
   dependencies:
-    "@babel/runtime" "^7.18.9"
-    aria-query "^4.2.2"
-    array-includes "^3.1.5"
+    "@babel/runtime" "^7.20.7"
+    aria-query "^5.1.3"
+    array-includes "^3.1.6"
+    array.prototype.flatmap "^1.3.1"
     ast-types-flow "^0.0.7"
-    axe-core "^4.4.3"
-    axobject-query "^2.2.0"
+    axe-core "^4.6.2"
+    axobject-query "^3.1.1"
     damerau-levenshtein "^1.0.8"
     emoji-regex "^9.2.2"
     has "^1.0.3"
-    jsx-ast-utils "^3.3.2"
-    language-tags "^1.0.5"
+    jsx-ast-utils "^3.3.3"
+    language-tags "=1.0.5"
     minimatch "^3.1.2"
+    object.entries "^1.1.6"
+    object.fromentries "^2.0.6"
     semver "^6.3.0"
 
 eslint-plugin-prettier@3.3.1:
@@ -5370,9 +5167,9 @@ eslint-plugin-react-hooks@^4.3.0:
   integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
 
 eslint-plugin-react@^7.27.1:
-  version "7.31.11"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.31.11.tgz#011521d2b16dcf95795df688a4770b4eaab364c8"
-  integrity sha512-TTvq5JsT5v56wPa9OYHzsrOlHzKZKjV+aLgS+55NJP/cuzdiQPC7PfYoUjMoxlffKtvijpk7vA/jmuqRb9nohw==
+  version "7.32.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz#e71f21c7c265ebce01bcbc9d0955170c55571f10"
+  integrity sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==
   dependencies:
     array-includes "^3.1.6"
     array.prototype.flatmap "^1.3.1"
@@ -5386,16 +5183,16 @@ eslint-plugin-react@^7.27.1:
     object.hasown "^1.1.2"
     object.values "^1.1.6"
     prop-types "^15.8.1"
-    resolve "^2.0.0-next.3"
+    resolve "^2.0.0-next.4"
     semver "^6.3.0"
     string.prototype.matchall "^4.0.8"
 
 eslint-plugin-testing-library@^5.0.1:
-  version "5.9.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.9.1.tgz#12e4bd34c48683ee98af4df2e3318ec9f51dcf8a"
-  integrity sha512-6BQp3tmb79jLLasPHJmy8DnxREe+2Pgf7L+7o09TSWPfdqqtQfRZmZNetr5mOs3yqZk/MRNxpN3RUpJe0wB4LQ==
+  version "5.10.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.10.2.tgz#12f231ad9b52b6aef45c801fd00aa129a932e0c2"
+  integrity sha512-f1DmDWcz5SDM+IpCkEX0lbFqrrTs8HRsEElzDEqN/EBI0hpRj8Cns5+IVANXswE8/LeybIJqPAOQIFu2j5Y5sw==
   dependencies:
-    "@typescript-eslint/utils" "^5.13.0"
+    "@typescript-eslint/utils" "^5.43.0"
 
 eslint-scope@5.1.1, eslint-scope@^5.1.1:
   version "5.1.1"
@@ -5420,13 +5217,6 @@ eslint-utils@^2.1.0:
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
-eslint-utils@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672"
-  integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
-  dependencies:
-    eslint-visitor-keys "^2.0.0"
-
 eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
@@ -5437,10 +5227,10 @@ eslint-visitor-keys@^2.0.0, eslint-visitor-keys@^2.1.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
-eslint-visitor-keys@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
-  integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
+eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz#c7f0f956124ce677047ddbc192a68f999454dedc"
+  integrity sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ==
 
 eslint-webpack-plugin@^3.1.1:
   version "3.2.0"
@@ -5500,12 +5290,15 @@ eslint@^7.32.0:
     v8-compile-cache "^2.0.3"
 
 eslint@^8.3.0:
-  version "8.28.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.28.0.tgz#81a680732634677cc890134bcdd9fdfea8e63d6e"
-  integrity sha512-S27Di+EVyMxcHiwDrFzk8dJYAaD+/5SoWKxL1ri/71CRHsnJnRDPNt2Kzj24+MT9FDupf4aqqyqPrvI8MvQ4VQ==
+  version "8.38.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.38.0.tgz#a62c6f36e548a5574dd35728ac3c6209bd1e2f1a"
+  integrity sha512-pIdsD2jwlUGf/U38Jv97t8lq6HpaU/G9NKbYmpWpZGw3LdTNhZLbJePqxOXGB5+JEKfOPU/XLxYxFh03nr1KTg==
   dependencies:
-    "@eslint/eslintrc" "^1.3.3"
-    "@humanwhocodes/config-array" "^0.11.6"
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.4.0"
+    "@eslint/eslintrc" "^2.0.2"
+    "@eslint/js" "8.38.0"
+    "@humanwhocodes/config-array" "^0.11.8"
     "@humanwhocodes/module-importer" "^1.0.1"
     "@nodelib/fs.walk" "^1.2.8"
     ajv "^6.10.0"
@@ -5515,16 +5308,15 @@ eslint@^8.3.0:
     doctrine "^3.0.0"
     escape-string-regexp "^4.0.0"
     eslint-scope "^7.1.1"
-    eslint-utils "^3.0.0"
-    eslint-visitor-keys "^3.3.0"
-    espree "^9.4.0"
-    esquery "^1.4.0"
+    eslint-visitor-keys "^3.4.0"
+    espree "^9.5.1"
+    esquery "^1.4.2"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
     file-entry-cache "^6.0.1"
     find-up "^5.0.0"
     glob-parent "^6.0.2"
-    globals "^13.15.0"
+    globals "^13.19.0"
     grapheme-splitter "^1.0.4"
     ignore "^5.2.0"
     import-fresh "^3.0.0"
@@ -5539,7 +5331,6 @@ eslint@^8.3.0:
     minimatch "^3.1.2"
     natural-compare "^1.4.0"
     optionator "^0.9.1"
-    regexpp "^3.2.0"
     strip-ansi "^6.0.1"
     strip-json-comments "^3.1.0"
     text-table "^0.2.0"
@@ -5553,24 +5344,24 @@ espree@^7.3.0, espree@^7.3.1:
     acorn-jsx "^5.3.1"
     eslint-visitor-keys "^1.3.0"
 
-espree@^9.4.0:
-  version "9.4.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-9.4.1.tgz#51d6092615567a2c2cff7833445e37c28c0065bd"
-  integrity sha512-XwctdmTO6SIvCzd9810yyNzIrOrqNYV9Koizx4C/mRhf9uq0o4yHoCEU/670pOxOL/MSraektvSAji79kX90Vg==
+espree@^9.5.1:
+  version "9.5.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.5.1.tgz#4f26a4d5f18905bf4f2e0bd99002aab807e96dd4"
+  integrity sha512-5yxtHSZXRSW5pvv3hAlXM5+/Oswi1AUFqBmbibKb5s6bp3rGIDkyXU6xCoyuuLhijr4SFwPrXRoZjz0AZDN9tg==
   dependencies:
     acorn "^8.8.0"
     acorn-jsx "^5.3.2"
-    eslint-visitor-keys "^3.3.0"
+    eslint-visitor-keys "^3.4.0"
 
 esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
-  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
+esquery@^1.4.0, esquery@^1.4.2:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
+  integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
   dependencies:
     estraverse "^5.1.0"
 
@@ -5647,15 +5438,15 @@ expect@^27.5.1:
     jest-message-util "^27.5.1"
 
 expect@^29.0.0:
-  version "29.2.2"
-  resolved "https://registry.yarnpkg.com/expect/-/expect-29.2.2.tgz#ba2dd0d7e818727710324a6e7f13dd0e6d086106"
-  integrity sha512-hE09QerxZ5wXiOhqkXy5d2G9ar+EqOyifnCXCpMNu+vZ6DG9TJ6CO2c2kPDSLqERTTWrO7OZj8EkYHQqSd78Yw==
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-29.5.0.tgz#68c0509156cb2a0adb8865d413b137eeaae682f7"
+  integrity sha512-yM7xqUrCO2JdpFo4XpM82t+PJBFybdqoQuJLDGeDX2ij8NZzqRHyu3Hp188/JX7SWqud+7t4MUdvcgGBICMHZg==
   dependencies:
-    "@jest/expect-utils" "^29.2.2"
-    jest-get-type "^29.2.0"
-    jest-matcher-utils "^29.2.2"
-    jest-message-util "^29.2.1"
-    jest-util "^29.2.1"
+    "@jest/expect-utils" "^29.5.0"
+    jest-get-type "^29.4.3"
+    jest-matcher-utils "^29.5.0"
+    jest-message-util "^29.5.0"
+    jest-util "^29.5.0"
 
 express@^4.17.3:
   version "4.18.2"
@@ -5733,9 +5524,9 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
 fastq@^1.6.0:
-  version "1.13.0"
-  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.13.0.tgz#616760f88a7526bdfc596b7cab8c18938c36b98c"
-  integrity sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.15.0.tgz#d04d07c6a2a68fe4599fea8d2e103a937fae6b3a"
+  integrity sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==
   dependencies:
     reusify "^1.0.4"
 
@@ -5885,9 +5676,9 @@ for-each@^0.3.3:
     is-callable "^1.1.3"
 
 fork-ts-checker-webpack-plugin@^6.5.0:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz#4f67183f2f9eb8ba7df7177ce3cf3e75cdafb340"
-  integrity sha512-m5cUmF30xkZ7h4tWUgTAcEaKmUW7tfyUyTqNNOz7OxWJ0v1VWKTcOvH8FWHUwSjlW/356Ijc9vi3XfcPstpQKA==
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.3.tgz#eda2eff6e22476a2688d10661688c47f611b37f3"
+  integrity sha512-SbH/l9ikmMWycd5puHJKTkZJKddF4iRLyW3DeZ08HTI7NGyLS38MXd/KGgeWumQO7YNQbW2u/NtPT2YowbPaGQ==
   dependencies:
     "@babel/code-frame" "^7.8.3"
     "@types/json-schema" "^7.0.5"
@@ -6001,10 +5792,10 @@ get-func-name@^2.0.0:
   resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
   integrity sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==
 
-get-intrinsic@^1.0.1, get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.3.tgz#063c84329ad93e83893c7f4f243ef63ffa351385"
-  integrity sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.0.tgz#7ad1dc0535f3a2904bba075772763e5051f6d05f"
+  integrity sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==
   dependencies:
     function-bind "^1.1.1"
     has "^1.0.3"
@@ -6015,6 +5806,11 @@ get-nonce@^1.0.0:
   resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
   integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
 
+get-nonce@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
+  integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
+
 get-own-enumerable-property-symbols@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
@@ -6057,6 +5853,18 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
+glob@7.1.6:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
@@ -6090,19 +5898,19 @@ globals@^11.1.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
-globals@^13.15.0:
-  version "13.18.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.18.0.tgz#fb224daeeb2bb7d254cd2c640f003528b8d0c1dc"
-  integrity sha512-/mR4KI8Ps2spmoc0Ulu9L7agOF0du1CZNQ3dke8yItYlyKNmGrkONemBbd6V8UTc1Wgcqn21t3WYB7dbRmh6/A==
+globals@^13.19.0, globals@^13.6.0, globals@^13.9.0:
+  version "13.20.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.20.0.tgz#ea276a1e508ffd4f1612888f9d1bad1e2717bf82"
+  integrity sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==
   dependencies:
     type-fest "^0.20.2"
 
-globals@^13.6.0, globals@^13.9.0:
-  version "13.17.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.17.0.tgz#902eb1e680a41da93945adbdcb5a9f361ba69bd4"
-  integrity sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==
+globalthis@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.3.tgz#5852882a52b80dc301b0660273e1ed082f0b6ccf"
+  integrity sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==
   dependencies:
-    type-fest "^0.20.2"
+    define-properties "^1.1.3"
 
 globby@^11.0.4, globby@^11.1.0:
   version "11.1.0"
@@ -6121,10 +5929,17 @@ glur@^1.1.2:
   resolved "https://registry.yarnpkg.com/glur/-/glur-1.1.2.tgz#f20ea36db103bfc292343921f1f91e83c3467689"
   integrity sha512-l+8esYHTKOx2G/Aao4lEQ0bnHWg4fWtJbVoZZT9Knxi01pB8C80BR85nONLFwkkQoFRCmXY+BUcGZN3yZ2QsRA==
 
+gopd@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
+  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
+  dependencies:
+    get-intrinsic "^1.1.3"
+
 graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
-  version "4.2.10"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
-  integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
 
 grapheme-splitter@^1.0.4:
   version "1.0.4"
@@ -6182,6 +5997,11 @@ has-property-descriptors@^1.0.0:
   dependencies:
     get-intrinsic "^1.1.1"
 
+has-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.1.tgz#1885c1305538958aff469fef37937c22795408e0"
+  integrity sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==
+
 has-symbols@^1.0.1, has-symbols@^1.0.2, has-symbols@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
@@ -6432,9 +6252,9 @@ ignore@^4.0.6:
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
 ignore@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
-  integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
+  version "5.2.4"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
+  integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
 
 image-blob-reduce@3.0.1:
   version "3.0.1"
@@ -6449,14 +6269,14 @@ immediate@~3.0.5:
   integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
 
 immer@^9.0.7:
-  version "9.0.16"
-  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.16.tgz#8e7caab80118c2b54b37ad43e05758cdefad0198"
-  integrity sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ==
+  version "9.0.21"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176"
+  integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==
 
 immutable@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef"
-  integrity sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.0.tgz#eb1738f14ffb39fd068b1dbe1296117484dd34be"
+  integrity sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==
 
 import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
   version "3.3.0"
@@ -6512,12 +6332,12 @@ ini@^1.3.5:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
-internal-slot@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
-  integrity sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==
+internal-slot@^1.0.3, internal-slot@^1.0.4, internal-slot@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.5.tgz#f2a2ee21f668f8627a4667f309dc0f4fb6674986"
+  integrity sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==
   dependencies:
-    get-intrinsic "^1.1.0"
+    get-intrinsic "^1.2.0"
     has "^1.0.3"
     side-channel "^1.0.4"
 
@@ -6528,6 +6348,13 @@ invariant@^2.2.4:
   dependencies:
     loose-envify "^1.0.0"
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 ipaddr.js@1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
@@ -6538,7 +6365,7 @@ ipaddr.js@^2.0.1:
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-2.0.1.tgz#eca256a7a877e917aeb368b0a7497ddf42ef81c0"
   integrity sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==
 
-is-arguments@^1.0.4, is-arguments@^1.1.0:
+is-arguments@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
   integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
@@ -6546,6 +6373,15 @@ is-arguments@^1.0.4, is-arguments@^1.1.0:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
+is-array-buffer@^3.0.1, is-array-buffer@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.2.tgz#f2653ced8412081638ecb0ebbd0c41c6e0aecbbe"
+  integrity sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.2.0"
+    is-typed-array "^1.1.10"
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -6578,14 +6414,14 @@ is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
 
-is-core-module@^2.8.1, is-core-module@^2.9.0:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
-  integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==
+is-core-module@^2.11.0, is-core-module@^2.9.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.12.0.tgz#36ad62f6f73c8253fd6472517a12483cf03e7ec4"
+  integrity sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==
   dependencies:
     has "^1.0.3"
 
-is-date-object@^1.0.1, is-date-object@^1.0.2:
+is-date-object@^1.0.1, is-date-object@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
   integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
@@ -6671,7 +6507,7 @@ is-potential-custom-element-name@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
   integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
 
-is-regex@^1.1.1, is-regex@^1.1.4:
+is-regex@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
   integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
@@ -6720,15 +6556,15 @@ is-symbol@^1.0.2, is-symbol@^1.0.3:
   dependencies:
     has-symbols "^1.0.2"
 
-is-typed-array@^1.1.9:
-  version "1.1.9"
-  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.9.tgz#246d77d2871e7d9f5aeb1d54b9f52c71329ece67"
-  integrity sha512-kfrlnTTn8pZkfpJMUgYD7YZ3qzeJgWUn8XfVYBARc4wnmNOmLbmuuaAs3q5fvB0UJOn6yHAKaGTPM7d6ezoD/A==
+is-typed-array@^1.1.10, is-typed-array@^1.1.9:
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.10.tgz#36a5b5cb4189b575d1a3e4b08536bfb485801e3f"
+  integrity sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==
   dependencies:
     available-typed-arrays "^1.0.5"
     call-bind "^1.0.2"
-    es-abstract "^1.20.0"
     for-each "^0.3.3"
+    gopd "^1.0.1"
     has-tostringtag "^1.0.0"
 
 is-typedarray@^1.0.0:
@@ -6935,15 +6771,15 @@ jest-diff@^27.0.0, jest-diff@^27.5.1:
     jest-get-type "^27.5.1"
     pretty-format "^27.5.1"
 
-jest-diff@^29.2.1:
-  version "29.2.1"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.2.1.tgz#027e42f5a18b693fb2e88f81b0ccab533c08faee"
-  integrity sha512-gfh/SMNlQmP3MOUgdzxPOd4XETDJifADpT937fN1iUGz+9DgOu2eUPHH25JDkLVcLwwqxv3GzVyK4VBUr9fjfA==
+jest-diff@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.5.0.tgz#e0d83a58eb5451dcc1fa61b1c3ee4e8f5a290d63"
+  integrity sha512-LtxijLLZBduXnHSniy0WMdaHjmQnt3g5sa16W4p0HqukYTTsyTW3GD1q41TyGl5YFXj/5B2U6dlh5FM1LIMgxw==
   dependencies:
     chalk "^4.0.0"
-    diff-sequences "^29.2.0"
-    jest-get-type "^29.2.0"
-    pretty-format "^29.2.1"
+    diff-sequences "^29.4.3"
+    jest-get-type "^29.4.3"
+    pretty-format "^29.5.0"
 
 jest-docblock@^27.5.1:
   version "27.5.1"
@@ -6993,10 +6829,10 @@ jest-get-type@^27.5.1:
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.5.1.tgz#3cd613c507b0f7ace013df407a1c1cd578bcb4f1"
   integrity sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==
 
-jest-get-type@^29.2.0:
-  version "29.2.0"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-29.2.0.tgz#726646f927ef61d583a3b3adb1ab13f3a5036408"
-  integrity sha512-uXNJlg8hKFEnDgFsrCjznB+sTxdkuqiCL6zMgA75qEbAJjJYTs9XPrvDctrEig2GDow22T/LvHgO57iJhXB/UA==
+jest-get-type@^29.4.3:
+  version "29.4.3"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-29.4.3.tgz#1ab7a5207c995161100b5187159ca82dd48b3dd5"
+  integrity sha512-J5Xez4nRRMjk8emnTpWrlkyb9pfRQQanDrvWHhsR1+VUfbwxi30eVcZFlcdGInRibU4G5LwHXpI7IRHU0CY+gg==
 
 jest-haste-map@^27.5.1:
   version "27.5.1"
@@ -7059,15 +6895,15 @@ jest-matcher-utils@^27.5.1:
     jest-get-type "^27.5.1"
     pretty-format "^27.5.1"
 
-jest-matcher-utils@^29.2.2:
-  version "29.2.2"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.2.2.tgz#9202f8e8d3a54733266784ce7763e9a08688269c"
-  integrity sha512-4DkJ1sDPT+UX2MR7Y3od6KtvRi9Im1ZGLGgdLFLm4lPexbTaCgJW5NN3IOXlQHF7NSHY/VHhflQ+WoKtD/vyCw==
+jest-matcher-utils@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.5.0.tgz#d957af7f8c0692c5453666705621ad4abc2c59c5"
+  integrity sha512-lecRtgm/rjIK0CQ7LPQwzCs2VwW6WAahA55YBuI+xqmhm7LAaxokSB8C97yJeYyT+HvQkH741StzpU41wohhWw==
   dependencies:
     chalk "^4.0.0"
-    jest-diff "^29.2.1"
-    jest-get-type "^29.2.0"
-    pretty-format "^29.2.1"
+    jest-diff "^29.5.0"
+    jest-get-type "^29.4.3"
+    pretty-format "^29.5.0"
 
 jest-message-util@^27.5.1:
   version "27.5.1"
@@ -7099,18 +6935,18 @@ jest-message-util@^28.1.3:
     slash "^3.0.0"
     stack-utils "^2.0.3"
 
-jest-message-util@^29.2.1:
-  version "29.2.1"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-29.2.1.tgz#3a51357fbbe0cc34236f17a90d772746cf8d9193"
-  integrity sha512-Dx5nEjw9V8C1/Yj10S/8ivA8F439VS8vTq1L7hEgwHFn9ovSKNpYW/kwNh7UglaEgXO42XxzKJB+2x0nSglFVw==
+jest-message-util@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-29.5.0.tgz#1f776cac3aca332ab8dd2e3b41625435085c900e"
+  integrity sha512-Kijeg9Dag6CKtIDA7O21zNTACqD5MD/8HfIV8pdD94vFyFuer52SigdC3IQMhab3vACxXMiFk+yMHNdbqtyTGA==
   dependencies:
     "@babel/code-frame" "^7.12.13"
-    "@jest/types" "^29.2.1"
+    "@jest/types" "^29.5.0"
     "@types/stack-utils" "^2.0.0"
     chalk "^4.0.0"
     graceful-fs "^4.2.9"
     micromatch "^4.0.4"
-    pretty-format "^29.2.1"
+    pretty-format "^29.5.0"
     slash "^3.0.0"
     stack-utils "^2.0.3"
 
@@ -7123,9 +6959,9 @@ jest-mock@^27.5.1:
     "@types/node" "*"
 
 jest-pnp-resolver@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
-  integrity sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz#930b1546164d4ad5937d5540e711d4d38d4cad2e"
+  integrity sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==
 
 jest-regex-util@^27.5.1:
   version "27.5.1"
@@ -7277,12 +7113,12 @@ jest-util@^28.1.3:
     graceful-fs "^4.2.9"
     picomatch "^2.2.3"
 
-jest-util@^29.2.1:
-  version "29.2.1"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.2.1.tgz#f26872ba0dc8cbefaba32c34f98935f6cf5fc747"
-  integrity sha512-P5VWDj25r7kj7kl4pN2rG/RN2c1TLfYYYZYULnS/35nFDjBai+hBeo3MDrYZS7p6IoY3YHZnt2vq4L6mKnLk0g==
+jest-util@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.5.0.tgz#24a4d3d92fc39ce90425311b23c27a6e0ef16b8f"
+  integrity sha512-RYMgG/MTadOr5t8KdhejfvUU82MxsCu5MF6KuDUHl+NuwzUt+Sm6jJWxTJVrDR1j5M/gJVCPKQEpWXY+yIQ6lQ==
   dependencies:
-    "@jest/types" "^29.2.1"
+    "@jest/types" "^29.5.0"
     "@types/node" "*"
     chalk "^4.0.0"
     ci-info "^3.2.0"
@@ -7377,15 +7213,20 @@ jest@^27.4.3:
     import-local "^3.0.2"
     jest-cli "^27.5.1"
 
-jotai@1.6.4:
-  version "1.6.4"
-  resolved "https://registry.yarnpkg.com/jotai/-/jotai-1.6.4.tgz#4d9904362c53c4293d32e21fb358d3de34b82912"
-  integrity sha512-XC0ExLhdE6FEBdIjKTe6kMlHaAUV/QiwN7vZond76gNr/WdcdonJOEW79+5t8u38sR41bJXi26B1dRi7cCRz9A==
+jiti@^1.17.2:
+  version "1.18.2"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.18.2.tgz#80c3ef3d486ebf2450d9335122b32d121f2a83cd"
+  integrity sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==
+
+jotai@1.13.1:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/jotai/-/jotai-1.13.1.tgz#20cc46454cbb39096b12fddfa635b873b3668236"
+  integrity sha512-RUmH1S4vLsG3V6fbGlKzGJnLrDcC/HNb5gH2AeA9DzuJknoVxSGvvg8OBB7lke+gDc4oXmdVsaKn/xDUhWZ0vw==
 
 js-sdsl@^4.1.4:
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.1.5.tgz#1ff1645e6b4d1b028cd3f862db88c9d887f26e2a"
-  integrity sha512-08bOAKweV2NUC1wqTtf3qZlnpOX/R2DU9ikpjOHs0H+ibQv3zpncVQg6um4uYtRtrwIX8M4Nh3ytK4HGlYAq7Q==
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.4.0.tgz#8b437dbe642daa95760400b602378ed8ffea8430"
+  integrity sha512-FfVSdx6pJ41Oa+CF7RDaFmTnCaFhua+SNYQX74riGOpl96x+2jQCqEfQ2bnXu/5DPCqlRuiqyvTJM0Qjz26IVg==
 
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
@@ -7475,17 +7316,17 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
-json5@^1.0.1:
+json5@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
   integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.2, json5@^2.2.0, json5@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
-  integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
+json5@^2.1.2, json5@^2.2.0, json5@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
 jsonfile@^6.0.1:
   version "6.1.0"
@@ -7501,7 +7342,7 @@ jsonpointer@^5.0.0:
   resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.1.tgz#2110e0af0900fd37467b5907ecd13a7884a1b559"
   integrity sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==
 
-"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.2:
+"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz#76b3e6e6cece5c69d49a5792c3d01bd1a0cdc7ea"
   integrity sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==
@@ -7520,22 +7361,30 @@ kleur@^3.0.3:
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
 klona@^2.0.4, klona@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
-  integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.6.tgz#85bffbf819c03b2f53270412420a4555ef882e22"
+  integrity sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==
 
 language-subtag-registry@~0.3.2:
   version "0.3.22"
   resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz#2e1500861b2e457eba7e7ae86877cbd08fa1fd1d"
   integrity sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==
 
-language-tags@^1.0.5:
+language-tags@=1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.5.tgz#d321dbc4da30ba8bf3024e040fa5c14661f9193a"
   integrity sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==
   dependencies:
     language-subtag-registry "~0.3.2"
 
+launch-editor@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/launch-editor/-/launch-editor-2.6.0.tgz#4c0c1a6ac126c572bd9ff9a30da1d2cae66defd7"
+  integrity sha512-JpDCcQnyAAzZZaZ7vEiSqL690w7dAEyLao+KC96zBplnYbJS7TYNjvM3M7y3dGz+v7aIsJk3hllWuc0kWAjyRQ==
+  dependencies:
+    picocolors "^1.0.0"
+    shell-quote "^1.7.3"
+
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -7570,9 +7419,9 @@ lilconfig@2.0.4:
   integrity sha512-bfTIN7lEsiooCocSISTWXkiWJkRqtL9wYtYy+8EK3Y41qh3mpwPU0ycTOgjdY9ErwXCc8QyrQp82bdL0Xkm9yA==
 
 lilconfig@^2.0.3, lilconfig@^2.0.5, lilconfig@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4"
-  integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
+  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
 
 lines-and-columns@^1.1.6:
   version "1.2.4"
@@ -7618,7 +7467,7 @@ loader-runner@^4.2.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
   integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
 
-loader-utils@^2.0.0, loader-utils@^2.0.3:
+loader-utils@^2.0.0, loader-utils@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
   integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
@@ -7722,10 +7571,11 @@ long@^4.0.0:
   integrity sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==
 
 long@^5.0.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/long/-/long-5.2.0.tgz#2696dadf4b4da2ce3f6f6b89186085d94d52fd61"
-  integrity sha512-9RTUNjK60eJbx3uz+TEGF7fUr29ZDxR5QzXcyDpeSfeH28S9ycINflOgOlppit5U+4kNTe83KQnMEerw7GmE8w==
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/long/-/long-5.2.1.tgz#e27595d0083d103d2fa2c20c7699f8e0c92b897f"
+  integrity sha512-GKSNGeNAtw8IryjjkhZxuKB3JzlcLTwjtiQCHKvqQet81I93kXslhDQruGI/QsddO83mcDToBVy7GqGS/zYf/A==
 
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -7734,9 +7584,9 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
     js-tokens "^3.0.0 || ^4.0.0"
 
 loupe@^2.3.1:
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/loupe/-/loupe-2.3.4.tgz#7e0b9bffc76f148f9be769cb1321d3dcf3cb25f3"
-  integrity sha512-OvKfgCC2Ndby6aSTREl5aCCPTNIzlDfQZvZxNUrBrihDhL3xcrYegTblhmEiCrg2kKQz4XsFIaemE5BF4ybSaQ==
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/loupe/-/loupe-2.3.6.tgz#76e4af498103c532d1ecc9be102036a21f787b53"
+  integrity sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==
   dependencies:
     get-func-name "^2.0.0"
 
@@ -7747,6 +7597,13 @@ lower-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
+lru-cache@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
+  integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
+  dependencies:
+    yallist "^3.0.2"
+
 lru-cache@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
@@ -7755,9 +7612,9 @@ lru-cache@^6.0.0:
     yallist "^4.0.0"
 
 lz-string@^1.4.4:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
-  integrity sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
+  integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
 
 magic-string@^0.25.0, magic-string@^0.25.7:
   version "0.25.9"
@@ -7796,9 +7653,9 @@ media-typer@0.3.0:
   integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
 
 memfs@^3.1.2, memfs@^3.4.3:
-  version "3.4.11"
-  resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.4.11.tgz#3a34837ade675825d805a2c135e88cefe5e53aaf"
-  integrity sha512-GvsCITGAyDCxxsJ+X6prJexFQEhOCJaIlUbsAvjzSI5o5O7j2dle3jWvz5Z5aOdpOxW6ol3vI1+0ut+641F1+w==
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.5.0.tgz#9da86405fca0a539addafd37dbd452344fd1c0bd"
+  integrity sha512-yK6o8xVJlQerz57kvPROwTMgx5WtGwC2ZxDtOUsnGl49rHjYkfQoPNZPCKH73VdLE1BwBu/+Fx/NL8NYMUw2aA==
   dependencies:
     fs-monkey "^1.0.3"
 
@@ -7858,9 +7715,9 @@ min-indent@^1.0.0:
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
 mini-css-extract-plugin@^2.4.5:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.0.tgz#d7d9ba0c5b596d155e36e2b174082fc7f010dd64"
-  integrity sha512-auqtVo8KhTScMsba7MbijqZTfibbXiBNlPAQbsVt7enQfcDYLdgG57eGxMqwVU3mfeWANY4F1wUg+rMF+ycZgw==
+  version "2.7.5"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.5.tgz#afbb344977659ec0f1f6e050c7aea456b121cfc5"
+  integrity sha512-9HaR++0mlgom81s95vvNjxkg52n2b5s//3ZTI1EtzFb98awsLSivs2LMsVqnQ3ay0PVhqWcGNyDaTE961FOcjQ==
   dependencies:
     schema-utils "^4.0.0"
 
@@ -7877,16 +7734,16 @@ minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
     brace-expansion "^1.1.7"
 
 minimatch@^5.0.1:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.0.tgz#1717b464f4971b144f6aabe8f2d0b8e4511e09c7"
-  integrity sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
+  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
   dependencies:
     brace-expansion "^2.0.1"
 
 minimist@^1.2.0, minimist@^1.2.6:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
-  integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
 mkdirp@^0.5.6, mkdirp@~0.5.1:
   version "0.5.6"
@@ -7933,15 +7790,24 @@ multimath@^2.0.0:
     glur "^1.1.2"
     object-assign "^4.1.1"
 
+mz@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
+  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
+
 nanoid@3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.3.tgz#fd8e8b7aa761fe807dba2d1b98fb7241bb724a25"
   integrity sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==
 
 nanoid@^3.3.4:
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
-  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
+  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
 
 natural-compare-lite@^1.4.0:
   version "1.4.0"
@@ -7986,10 +7852,10 @@ node-int64@^0.4.0:
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
   integrity sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==
 
-node-releases@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
-  integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
+node-releases@^2.0.8:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f"
+  integrity sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==
 
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
@@ -8028,11 +7894,11 @@ nth-check@^2.0.1:
     boolbase "^1.0.0"
 
 nwsapi@^2.2.0:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.2.tgz#e5418863e7905df67d51ec95938d67bf801f0bb0"
-  integrity sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw==
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.3.tgz#00e04dfd5a4a751e5ec2fecdc75dfd2f0db820fa"
+  integrity sha512-jscxIO4/VKScHlbmFBdV1Z6LXnLO+ZR4VMtypudUdfwtKxUN3TQcNFIHLwKtrUbDyHN4/GycY9+oRGZ2XMXYPw==
 
-object-assign@^4.1.1:
+object-assign@^4.0.1, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -8042,12 +7908,12 @@ object-hash@^3.0.0:
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
   integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
 
-object-inspect@^1.12.0, object-inspect@^1.12.2, object-inspect@^1.9.0:
-  version "1.12.2"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
-  integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
+object-inspect@^1.12.0, object-inspect@^1.12.3, object-inspect@^1.9.0:
+  version "1.12.3"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
+  integrity sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==
 
-object-is@^1.1.4:
+object-is@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
   integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
@@ -8060,7 +7926,7 @@ object-keys@^1.1.1:
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
-object.assign@^4.1.2, object.assign@^4.1.3, object.assign@^4.1.4:
+object.assign@^4.1.3, object.assign@^4.1.4:
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.4.tgz#9673c7c7c351ab8c4d0b516f4343ebf4dfb7799f"
   integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
@@ -8089,14 +7955,14 @@ object.fromentries@^2.0.6:
     es-abstract "^1.20.4"
 
 object.getownpropertydescriptors@^2.1.0:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.4.tgz#7965e6437a57278b587383831a9b829455a4bc37"
-  integrity sha512-sccv3L/pMModT6dJAYF3fzGMVcb38ysQ0tEE6ixv2yXJDtEIPph268OlAdJj5/qZMZDq2g/jqvwppt36uS/uQQ==
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.5.tgz#db5a9002489b64eef903df81d6623c07e5b4b4d3"
+  integrity sha512-yDNzckpM6ntyQiGTik1fKV1DcVDRS+w8bvpWNCBanvH5LfRX9O8WTHqQzG4RZwRAM4I0oU7TV11Lj5v0g20ibw==
   dependencies:
-    array.prototype.reduce "^1.0.4"
+    array.prototype.reduce "^1.0.5"
     call-bind "^1.0.2"
     define-properties "^1.1.4"
-    es-abstract "^1.20.1"
+    es-abstract "^1.20.4"
 
 object.hasown@^1.1.2:
   version "1.1.2"
@@ -8106,16 +7972,7 @@ object.hasown@^1.1.2:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
-object.values@^1.1.0, object.values@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.5.tgz#959f63e3ce9ef108720333082131e4a459b716ac"
-  integrity sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
-
-object.values@^1.1.6:
+object.values@^1.1.0, object.values@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.6.tgz#4abbaa71eba47d63589d402856f908243eea9b1d"
   integrity sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==
@@ -8161,9 +8018,9 @@ open-color@1.9.1:
   integrity sha512-vCseG/EQ6/RcvxhUcGJiHViOgrtz4x0XbZepXvKik66TMGkvbmjeJrKFyBEx6daG5rNyyd14zYXhz0hZVwQFOw==
 
 open@^8.0.9, open@^8.4.0:
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/open/-/open-8.4.0.tgz#345321ae18f8138f82565a910fdc6b39e8c244f8"
-  integrity sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==
+  version "8.4.2"
+  resolved "https://registry.yarnpkg.com/open/-/open-8.4.2.tgz#5b5ffe2a8f793dcd2aad73e550cb87b59cb084f9"
+  integrity sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==
   dependencies:
     define-lazy-prop "^2.0.0"
     is-docker "^2.1.1"
@@ -8407,7 +8264,7 @@ pify@^2.3.0:
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
 
-pirates@^4.0.4:
+pirates@^4.0.1, pirates@^4.0.4:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
   integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==
@@ -8516,12 +8373,12 @@ postcss-color-rebeccapurple@^7.1.1:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-colormin@^5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-5.3.0.tgz#3cee9e5ca62b2c27e84fce63affc0cfb5901956a"
-  integrity sha512-WdDO4gOFG2Z8n4P8TWBpshnL3JpmNmJwdnfP2gbk2qBA8PWwOYcmjmI/t3CmMeL72a7Hkd+x/Mg9O2/0rD54Pg==
+postcss-colormin@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-5.3.1.tgz#86c27c26ed6ba00d96c79e08f3ffb418d1d1988f"
+  integrity sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==
   dependencies:
-    browserslist "^4.16.6"
+    browserslist "^4.21.4"
     caniuse-api "^3.0.0"
     colord "^2.9.1"
     postcss-value-parser "^4.2.0"
@@ -8542,9 +8399,9 @@ postcss-custom-media@^8.0.2:
     postcss-value-parser "^4.2.0"
 
 postcss-custom-properties@^12.1.10:
-  version "12.1.10"
-  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-12.1.10.tgz#624517179fd4cf50078a7a60f628d5782e7d4903"
-  integrity sha512-U3BHdgrYhCrwTVcByFHs9EOBoqcKq4Lf3kXwbTi4hhq0qWhl/pDWq2THbv/ICX/Fl9KqeHBb8OVrTf2OaYF07A==
+  version "12.1.11"
+  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-12.1.11.tgz#d14bb9b3989ac4d40aaa0e110b43be67ac7845cf"
+  integrity sha512-0IDJYhgU8xDv1KY6+VgUwuQkVtmYzRwu+dMjnmdMafXYv86SWqfxkc7qdDvWS38vsjaEtv8e0vGOUQrAiMBLpQ==
   dependencies:
     postcss-value-parser "^4.2.0"
 
@@ -8648,9 +8505,9 @@ postcss-initial@^4.0.1:
   integrity sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==
 
 postcss-js@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.0.tgz#31db79889531b80dc7bc9b0ad283e418dce0ac00"
-  integrity sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
+  integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
   dependencies:
     camelcase-css "^2.0.1"
 
@@ -8697,10 +8554,10 @@ postcss-merge-longhand@^5.1.7:
     postcss-value-parser "^4.2.0"
     stylehacks "^5.1.1"
 
-postcss-merge-rules@^5.1.3:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-5.1.3.tgz#8f97679e67cc8d08677a6519afca41edf2220894"
-  integrity sha512-LbLd7uFC00vpOuMvyZop8+vvhnfRGpp2S+IMQKeuOZZapPRY4SMq5ErjQeHbHsjCUgJkRNrlU+LmxsKIqPKQlA==
+postcss-merge-rules@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz#2f26fa5cacb75b1402e213789f6766ae5e40313c"
+  integrity sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==
   dependencies:
     browserslist "^4.21.4"
     caniuse-api "^3.0.0"
@@ -8855,9 +8712,9 @@ postcss-normalize@^10.0.1:
     sanitize.css "*"
 
 postcss-opacity-percentage@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-opacity-percentage/-/postcss-opacity-percentage-1.1.2.tgz#bd698bb3670a0a27f6d657cc16744b3ebf3b1145"
-  integrity sha512-lyUfF7miG+yewZ8EAk9XUBIlrHyUE6fijnesuz+Mj5zrIHIEw6KcIZSOk/elVMqzLvREmXB83Zi/5QpNRYd47w==
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/postcss-opacity-percentage/-/postcss-opacity-percentage-1.1.3.tgz#5b89b35551a556e20c5d23eb5260fbfcf5245da6"
+  integrity sha512-An6Ba4pHBiDtyVpSLymUUERMo2cU7s+Obz6BTrS+gxkbnSBNKSuD0AVUc+CpBMrpVPKKfoVz0WQCX+Tnst0i4A==
 
 postcss-ordered-values@^5.1.3:
   version "5.1.3"
@@ -8948,10 +8805,10 @@ postcss-pseudo-class-any-link@^7.1.6:
   dependencies:
     postcss-selector-parser "^6.0.10"
 
-postcss-reduce-initial@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.1.tgz#c18b7dfb88aee24b1f8e4936541c29adbd35224e"
-  integrity sha512-//jeDqWcHPuXGZLoolFrUXBDyuEGbr9S2rMo19bkTIjBQ4PqkaO+oI8wua5BOUxpfi97i3PCoInsiFIEBfkm9w==
+postcss-reduce-initial@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz#798cd77b3e033eae7105c18c9d371d989e1382d6"
+  integrity sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==
   dependencies:
     browserslist "^4.21.4"
     caniuse-api "^3.0.0"
@@ -8975,10 +8832,10 @@ postcss-selector-not@^6.0.1:
   dependencies:
     postcss-selector-parser "^6.0.10"
 
-postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9:
-  version "6.0.10"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
-  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9:
+  version "6.0.11"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"
+  integrity sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==
   dependencies:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
@@ -9011,10 +8868,10 @@ postcss@^7.0.35:
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.3.5, postcss@^8.4.18, postcss@^8.4.4:
-  version "8.4.19"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.19.tgz#61178e2add236b17351897c8bcc0b4c8ecab56fc"
-  integrity sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==
+postcss@^8.0.9, postcss@^8.3.5, postcss@^8.4.19, postcss@^8.4.4:
+  version "8.4.21"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
+  integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
   dependencies:
     nanoid "^3.3.4"
     picocolors "^1.0.0"
@@ -9074,12 +8931,12 @@ pretty-format@^28.1.3:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
-pretty-format@^29.0.0, pretty-format@^29.2.1:
-  version "29.2.1"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.2.1.tgz#86e7748fe8bbc96a6a4e04fa99172630907a9611"
-  integrity sha512-Y41Sa4aLCtKAXvwuIpTvcFBkyeYp2gdFWzXGA+ZNES3VwURIB165XO/z7CjETwzCCS53MjW/rLMyyqEnTtaOfA==
+pretty-format@^29.0.0, pretty-format@^29.5.0:
+  version "29.5.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.5.0.tgz#283134e74f70e2e3e7229336de0e4fce94ccde5a"
+  integrity sha512-V2mGkI31qdttvTFX7Mt4efOqHXqJWMu4/r66Xh3Z3BwZaPfPJgp6/gbwoujRpPUtfEF6AUUWx3Jim3GCw5g/Qw==
   dependencies:
-    "@jest/schemas" "^29.0.0"
+    "@jest/schemas" "^29.4.3"
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
@@ -9142,9 +8999,9 @@ protobufjs@^6.8.6:
     long "^4.0.0"
 
 protobufjs@^7.0.0:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-7.1.2.tgz#a0cf6aeaf82f5625bffcf5a38b7cd2a7de05890c"
-  integrity sha512-4ZPTPkXCdel3+L81yw3dG6+Kq3umdWKh7Dc7GW/CpNk4SX3hK58iPCWeCyhVTDrbkNeKrYNZ7EojM5WDaEWTLQ==
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-7.2.3.tgz#01af019e40d9c6133c49acbb3ff9e30f4f0f70b2"
+  integrity sha512-TtpvOqwB5Gdz/PQmOjgsrGH1nHjAQVCN7JG4A6r1sXRWESL5rNMAiRcBQlCAdKxZcAbstExQePYG8xof/JVRgg==
   dependencies:
     "@protobufjs/aspromise" "^1.1.2"
     "@protobufjs/base64" "^1.1.2"
@@ -9173,9 +9030,9 @@ psl@^1.1.33:
   integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==
 
 punycode@^2.1.0, punycode@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
-  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
+  integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
 
 pwacompat@2.0.17:
   version "2.0.17"
@@ -9187,13 +9044,20 @@ q@^1.1.2:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==
 
-qs@6.11.0, qs@^6.4.0:
+qs@6.11.0:
   version "6.11.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
   integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
   dependencies:
     side-channel "^1.0.4"
 
+qs@^6.4.0:
+  version "6.11.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.1.tgz#6c29dff97f0c0060765911ba65cbc9764186109f"
+  integrity sha512-0wsrzgTz/kAVIeuxSjnpGC56rzYtr6JT/2BwEvMaPhFIoYa1aGO8LbzuU1R0uUYQkLpWBTOj0l/CLAJB64J6nQ==
+  dependencies:
+    side-channel "^1.0.4"
+
 querystringify@^2.1.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
@@ -9332,6 +9196,25 @@ react-remove-scroll@2.5.5:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-remove-scroll-bar@^2.3.3:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
+  integrity sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==
+  dependencies:
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
+
+react-remove-scroll@2.5.5:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz#1e31a1260df08887a8a0e46d09271b52b3a37e77"
+  integrity sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==
+  dependencies:
+    react-remove-scroll-bar "^2.3.3"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
 react-scripts@5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003"
@@ -9396,6 +9279,15 @@ react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
+react-style-singleton@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
+  integrity sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==
+  dependencies:
+    get-nonce "^1.0.0"
+    invariant "^2.2.4"
+    tslib "^2.0.0"
+
 react@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -9411,9 +9303,9 @@ read-cache@^1.0.0:
     pify "^2.3.0"
 
 readable-stream@^2.0.1:
-  version "2.3.7"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
-  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
+  integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
   dependencies:
     core-util-is "~1.0.0"
     inherits "~2.0.3"
@@ -9424,9 +9316,9 @@ readable-stream@^2.0.1:
     util-deprecate "~1.0.1"
 
 readable-stream@^3.0.6:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
-  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
   dependencies:
     inherits "^2.0.3"
     string_decoder "^1.1.1"
@@ -9486,10 +9378,10 @@ regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.9:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
 
-regenerator-transform@^0.15.0:
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.0.tgz#cbd9ead5d77fae1a48d957cf889ad0586adb6537"
-  integrity sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg==
+regenerator-transform@^0.15.1:
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"
+  integrity sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==
   dependencies:
     "@babel/runtime" "^7.8.4"
 
@@ -9498,7 +9390,7 @@ regex-parser@^2.2.11:
   resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.2.11.tgz#3b37ec9049e19479806e878cabe7c1ca83ccfe58"
   integrity sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==
 
-regexp.prototype.flags@^1.3.0, regexp.prototype.flags@^1.4.3:
+regexp.prototype.flags@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz#87cab30f80f66660181a3bb7bf5981a872b367ac"
   integrity sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==
@@ -9507,27 +9399,22 @@ regexp.prototype.flags@^1.3.0, regexp.prototype.flags@^1.4.3:
     define-properties "^1.1.3"
     functions-have-names "^1.2.2"
 
-regexpp@^3.1.0, regexpp@^3.2.0:
+regexpp@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
-regexpu-core@^5.1.0:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.2.1.tgz#a69c26f324c1e962e9ffd0b88b055caba8089139"
-  integrity sha512-HrnlNtpvqP1Xkb28tMhBUO2EbyUHdQlsnlAhzWcwHy8WJR53UWr7/MAvqrsQKMbV4qdpv03oTMG8iIhfsPFktQ==
+regexpu-core@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.3.2.tgz#11a2b06884f3527aec3e93dbbf4a3b958a95546b"
+  integrity sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==
   dependencies:
+    "@babel/regjsgen" "^0.8.0"
     regenerate "^1.4.2"
     regenerate-unicode-properties "^10.1.0"
-    regjsgen "^0.7.1"
     regjsparser "^0.9.1"
     unicode-match-property-ecmascript "^2.0.0"
-    unicode-match-property-value-ecmascript "^2.0.0"
-
-regjsgen@^0.7.1:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.7.1.tgz#ee5ef30e18d3f09b7c369b76e7c2373ed25546f6"
-  integrity sha512-RAt+8H2ZEzHeYWxZ3H2z6tF18zyyOnlcdaafLrm21Bguj7uZy6ULibiAFdXEtKQY4Sy7wDTwDiOazasMLc4KPA==
+    unicode-match-property-value-ecmascript "^2.1.0"
 
 regjsparser@^0.9.1:
   version "0.9.1"
@@ -9596,20 +9483,20 @@ resolve-url-loader@^4.0.0:
     source-map "0.6.1"
 
 resolve.exports@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.0.tgz#5ce842b94b05146c0e03076985d1d0e7e48c90c9"
-  integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.1.tgz#05cfd5b3edf641571fd46fa608b610dda9ead999"
+  integrity sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ==
 
-resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.22.1:
-  version "1.22.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
-  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
+resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.1:
+  version "1.22.2"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.2.tgz#0ed0943d4e301867955766c9f3e1ae6d01c6845f"
+  integrity sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==
   dependencies:
-    is-core-module "^2.9.0"
+    is-core-module "^2.11.0"
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^2.0.0-next.3:
+resolve@^2.0.0-next.4:
   version "2.0.0-next.4"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"
   integrity sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==
@@ -9689,9 +9576,9 @@ run-parallel@^1.1.9:
     queue-microtask "^1.2.2"
 
 rxjs@^7.5.5:
-  version "7.5.7"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.7.tgz#2ec0d57fdc89ece220d2e702730ae8f1e49def39"
-  integrity sha512-z9MzKh/UcOqB3i20H6rtrlaE/CgjLOvheWK/9ILrbhROGTweAi1BaFsTT9FbwZi5Trr1qNRs+MXkhmR06awzQA==
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.0.tgz#90a938862a82888ff4c7359811a595e14e1e09a4"
+  integrity sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==
   dependencies:
     tslib "^2.1.0"
 
@@ -9825,9 +9712,9 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
 semver@^7.2.1, semver@^7.3.2, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8:
-  version "7.3.8"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
-  integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.4.0.tgz#8481c92feffc531ab1e012a8ffc15bdd3a0f4318"
+  integrity sha512-RgOxM8Mw+7Zus0+zcLEUn8+JfoLpj/huFTItQy2hsM4khuC1HYRDp0cU482Ewn/Fcy6bCjufD8vAj7voC66KQw==
   dependencies:
     lru-cache "^6.0.0"
 
@@ -9857,10 +9744,10 @@ serialize-javascript@^4.0.0:
   dependencies:
     randombytes "^2.1.0"
 
-serialize-javascript@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.0.tgz#efae5d88f45d7924141da8b5c3a7a7e663fefeb8"
-  integrity sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==
+serialize-javascript@^6.0.0, serialize-javascript@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz#b206efb27c3da0b0ab6b52f48d170b7996458e5c"
+  integrity sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==
   dependencies:
     randombytes "^2.1.0"
 
@@ -9910,11 +9797,11 @@ shebang-regex@^3.0.0:
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
 shell-quote@^1.7.3:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.4.tgz#33fe15dee71ab2a81fcbd3a52106c5cfb9fb75d8"
-  integrity sha512-8o/QEhSSRb1a5i7TFR0iM4G16Z0vYB2OQVs4G3aAFXjn3T6yEx8AZxy1PgDF7I00LZHYA3WxaSYIf5e5sAX8Rw==
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.1.tgz#6dbf4db75515ad5bac63b4f1894c3a154c766680"
+  integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==
 
-side-channel@^1.0.3, side-channel@^1.0.4:
+side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
   integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
@@ -10100,9 +9987,9 @@ stable@^0.1.8:
   integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
 
 stack-utils@^2.0.3:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.5.tgz#d25265fca995154659dbbfba3b49254778d2fdd5"
-  integrity sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.6.tgz#aaf0748169c02fc33c8232abccf933f54a1cc34f"
+  integrity sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==
   dependencies:
     escape-string-regexp "^2.0.0"
 
@@ -10121,6 +10008,13 @@ statuses@2.0.1:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
+stop-iteration-iterator@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz#6a60be0b4ee757d1ed5254858ec66b10c49285e4"
+  integrity sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==
+  dependencies:
+    internal-slot "^1.0.4"
+
 string-argv@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
@@ -10179,23 +10073,32 @@ string.prototype.matchall@^4.0.6, string.prototype.matchall@^4.0.8:
     regexp.prototype.flags "^1.4.3"
     side-channel "^1.0.4"
 
-string.prototype.trimend@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz#914a65baaab25fbdd4ee291ca7dde57e869cb8d0"
-  integrity sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==
+string.prototype.trim@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz#a68352740859f6893f14ce3ef1bb3037f7a90533"
+  integrity sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.1.4"
-    es-abstract "^1.19.5"
+    es-abstract "^1.20.4"
 
-string.prototype.trimstart@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz#5466d93ba58cfa2134839f81d7f42437e8c01fef"
-  integrity sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==
+string.prototype.trimend@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz#c4a27fa026d979d79c04f17397f250a462944533"
+  integrity sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.1.4"
-    es-abstract "^1.19.5"
+    es-abstract "^1.20.4"
+
+string.prototype.trimstart@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz#e90ab66aa8e4007d92ef591bbf3cd422c56bdcf4"
+  integrity sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
 
 string_decoder@^1.1.1:
   version "1.3.0"
@@ -10267,9 +10170,9 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
 style-loader@^3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
-  integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.2.tgz#eaebca714d9e462c19aa1e3599057bc363924899"
+  integrity sha512-RHs/vcrKdQK8wZliteNK4NKzxvLBzpuHMqYmUVWeKa6MkaIQ97ZTOS0b+zapZhy6GcrgWnvWYCMHRirC3FsUmw==
 
 stylehacks@^5.1.1:
   version "5.1.1"
@@ -10279,6 +10182,19 @@ stylehacks@^5.1.1:
     browserslist "^4.21.4"
     postcss-selector-parser "^6.0.4"
 
+sucrase@^3.29.0:
+  version "3.32.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.32.0.tgz#c4a95e0f1e18b6847127258a75cf360bc568d4a7"
+  integrity sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "7.1.6"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -10301,9 +10217,9 @@ supports-color@^8.0.0:
     has-flag "^4.0.0"
 
 supports-color@^9.2.1:
-  version "9.2.3"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-9.2.3.tgz#a6e2c97fc20c80abecd69e50aebe4783ff77d45a"
-  integrity sha512-aszYUX/DVK/ed5rFLb/dDinVJrQjG/vmU433wtqVSD800rYsJNWxh2R3USV90aLSU+UsyQkbNeffVLzc6B6foA==
+  version "9.3.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-9.3.1.tgz#34e4ad3c71c9a39dae3254ecc46c9b74e89e15a6"
+  integrity sha512-knBY82pjmnIzK3NifMo3RxEIRD9E0kIzV4BKcyTZ9+9kWgLMxd4PrsTSMoFQUabgRBbF8KOLRDCyKgNV+iK44Q==
 
 supports-hyperlinks@^2.0.0:
   version "2.3.0"
@@ -10361,9 +10277,9 @@ symbol-tree@^3.2.4:
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
 table@^6.0.9:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/table/-/table-6.8.0.tgz#87e28f14fa4321c3377ba286f07b79b281a3b3ca"
-  integrity sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==
+  version "6.8.1"
+  resolved "https://registry.yarnpkg.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf"
+  integrity sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==
   dependencies:
     ajv "^8.0.1"
     lodash.truncate "^4.4.2"
@@ -10372,33 +10288,34 @@ table@^6.0.9:
     strip-ansi "^6.0.1"
 
 tailwindcss@^3.0.2:
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.4.tgz#afe3477e7a19f3ceafb48e4b083e292ce0dc0250"
-  integrity sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.1.tgz#b6662fab6a9b704779e48d083a9fef5a81d2b81e"
+  integrity sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g==
   dependencies:
     arg "^5.0.2"
     chokidar "^3.5.3"
     color-name "^1.1.4"
-    detective "^5.2.1"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
     fast-glob "^3.2.12"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
+    jiti "^1.17.2"
     lilconfig "^2.0.6"
     micromatch "^4.0.5"
     normalize-path "^3.0.0"
     object-hash "^3.0.0"
     picocolors "^1.0.0"
-    postcss "^8.4.18"
+    postcss "^8.0.9"
     postcss-import "^14.1.0"
     postcss-js "^4.0.0"
     postcss-load-config "^3.1.4"
     postcss-nested "6.0.0"
-    postcss-selector-parser "^6.0.10"
+    postcss-selector-parser "^6.0.11"
     postcss-value-parser "^4.2.0"
     quick-lru "^5.1.1"
     resolve "^1.22.1"
+    sucrase "^3.29.0"
 
 tapable@^1.0.0:
   version "1.1.3"
@@ -10434,20 +10351,30 @@ terminal-link@^2.0.0:
     supports-hyperlinks "^2.0.0"
 
 terser-webpack-plugin@^5.1.3, terser-webpack-plugin@^5.2.5:
-  version "5.3.6"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.6.tgz#5590aec31aa3c6f771ce1b1acca60639eab3195c"
-  integrity sha512-kfLFk+PoLUQIbLmB1+PZDMRSZS99Mp+/MHqDNmMA6tOItzRt+Npe3E+fsMs5mfcM0wCtrrdU387UnV+vnSffXQ==
+  version "5.3.7"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.7.tgz#ef760632d24991760f339fe9290deb936ad1ffc7"
+  integrity sha512-AfKwIktyP7Cu50xNjXF/6Qb5lBNzYaWpU6YfoX3uZicTx0zTy0stDDCsvjDapKsSDvOeWo5MEq4TmdBy2cNoHw==
   dependencies:
-    "@jridgewell/trace-mapping" "^0.3.14"
+    "@jridgewell/trace-mapping" "^0.3.17"
     jest-worker "^27.4.5"
     schema-utils "^3.1.1"
-    serialize-javascript "^6.0.0"
-    terser "^5.14.1"
+    serialize-javascript "^6.0.1"
+    terser "^5.16.5"
 
-terser@^5.0.0, terser@^5.10.0, terser@^5.14.1:
-  version "5.15.1"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.15.1.tgz#8561af6e0fd6d839669c73b92bdd5777d870ed6c"
-  integrity sha512-K1faMUvpm/FBxjBXud0LWVAGxmvoPbZbfTCYbSgaaYQaIXI3/TdI7a7ZGA73Zrou6Q8Zmz3oeUTsp/dj+ag2Xw==
+terser@^5.0.0, terser@^5.10.0:
+  version "5.16.9"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.16.9.tgz#7a28cb178e330c484369886f2afd623d9847495f"
+  integrity sha512-HPa/FdTB9XGI2H1/keLFZHxl6WNvAI4YalHGtDQTlMnJcoqSab1UwL4l1hGEhs6/GmLHBZIg/YgB++jcbzoOEg==
+  dependencies:
+    "@jridgewell/source-map" "^0.3.2"
+    acorn "^8.5.0"
+    commander "^2.20.0"
+    source-map-support "~0.5.20"
+
+terser@^5.16.5:
+  version "5.17.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.17.1.tgz#948f10830454761e2eeedc6debe45c532c83fd69"
+  integrity sha512-hVl35zClmpisy6oaoKALOpS0rDYLxRFLHhRuDlEGTKey9qHjS1w9GMORjuwIMt70Wan4lwsLYyWDVnWgF+KUEw==
   dependencies:
     "@jridgewell/source-map" "^0.3.2"
     acorn "^8.5.0"
@@ -10468,10 +10395,24 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
+  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+  dependencies:
+    any-promise "^1.0.0"
+
 throat@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.1.tgz#d514fedad95740c12c2d7fc70ea863eb51ade375"
-  integrity sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.2.tgz#51a3fbb5e11ae72e2cf74861ed5c8020f89f29fe"
+  integrity sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ==
 
 through@^2.3.8:
   version "2.3.8"
@@ -10539,13 +10480,18 @@ tryer@^1.0.1:
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
 tsconfig-paths@^3.14.1:
-  version "3.14.1"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"
-  integrity sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==
+  version "3.14.2"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz#6e32f1f79412decd261f92d633a9dc1cfa99f088"
+  integrity sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==
   dependencies:
     "@types/json5" "^0.0.29"
-    json5 "^1.0.1"
+    json5 "^1.0.2"
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
@@ -10571,12 +10517,12 @@ tsutils@^3.21.0:
   dependencies:
     tslib "^1.8.1"
 
-tunnel-rat@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/tunnel-rat/-/tunnel-rat-0.1.0.tgz#62cfbaf1b24cabac9318fe45ef26d70dc40e86fe"
-  integrity sha512-/FKZLBXCoKhA7Wz+dsqitrItaLXYmT2bkZXod+1UuR4JqHtdb54yHvHhmMgLg+eyH1Od/CCnhA2VQQ2A/54Tcw==
+tunnel-rat@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/tunnel-rat/-/tunnel-rat-0.1.2.tgz#1717efbc474ea2d8aa05a91622457a6e201c0aeb"
+  integrity sha512-lR5VHmkPhzdhrM092lI2nACsLO4QubF0/yoOhzX7c+wIpbN1GjHNzCc91QlpxBi+cnx8vVJ+Ur6vL5cEoQPFpQ==
   dependencies:
-    zustand "^4.1.0"
+    zustand "^4.3.2"
 
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
@@ -10620,6 +10566,15 @@ type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
+typed-array-length@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.4.tgz#89d83785e5c4098bec72e08b319651f0eac9c1bb"
+  integrity sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==
+  dependencies:
+    call-bind "^1.0.2"
+    for-each "^0.3.3"
+    is-typed-array "^1.1.9"
+
 typedarray-to-buffer@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
@@ -10669,10 +10624,10 @@ unicode-match-property-ecmascript@^2.0.0:
     unicode-canonical-property-names-ecmascript "^2.0.0"
     unicode-property-aliases-ecmascript "^2.0.0"
 
-unicode-match-property-value-ecmascript@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz#1a01aa57247c14c568b89775a54938788189a714"
-  integrity sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==
+unicode-match-property-value-ecmascript@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz#cb5fffdcd16a05124f5a4b0bf7c3770208acbbe0"
+  integrity sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==
 
 unicode-property-aliases-ecmascript@^2.0.0:
   version "2.1.0"
@@ -10718,7 +10673,7 @@ upath@^1.2.0:
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
   integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
 
-update-browserslist-db@^1.0.9:
+update-browserslist-db@^1.0.10:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz#0f54b876545726f17d00cd9a2561e6dade943ff3"
   integrity sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==
@@ -10766,6 +10721,26 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
+use-callback-ref@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.0.tgz#772199899b9c9a50526fedc4993fc7fa1f7e32d5"
+  integrity sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==
+  dependencies:
+    tslib "^2.0.0"
+
+use-isomorphic-layout-effect@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
+  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
+
+use-sidecar@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"
+  integrity sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==
+  dependencies:
+    detect-node-es "^1.1.0"
+    tslib "^2.0.0"
+
 use-sync-external-store@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
@@ -10883,9 +10858,9 @@ webpack-dev-middleware@^5.3.1:
     schema-utils "^4.0.0"
 
 webpack-dev-server@^4.6.0:
-  version "4.11.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.11.1.tgz#ae07f0d71ca0438cf88446f09029b92ce81380b5"
-  integrity sha512-lILVz9tAUy1zGFwieuaQtYiadImb5M3d+H+L1zDYalYoDl0cksAB1UNyuE5MMWJrG6zR1tXkCP2fitl7yoUJiw==
+  version "4.13.2"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.13.2.tgz#d97445481d78691efe6d9a3b230833d802fc31f9"
+  integrity sha512-5i6TrGBRxG4vnfDpB6qSQGfnB6skGBXNL5/542w2uRGLimX6qeE5BQMLrzIC3JYV/xlGOv+s+hTleI9AZKUQNw==
   dependencies:
     "@types/bonjour" "^3.5.9"
     "@types/connect-history-api-fallback" "^1.3.5"
@@ -10906,6 +10881,7 @@ webpack-dev-server@^4.6.0:
     html-entities "^2.3.2"
     http-proxy-middleware "^2.0.3"
     ipaddr.js "^2.0.1"
+    launch-editor "^2.6.0"
     open "^8.0.9"
     p-retry "^4.5.0"
     rimraf "^3.0.2"
@@ -10915,7 +10891,7 @@ webpack-dev-server@^4.6.0:
     sockjs "^0.3.24"
     spdy "^4.0.2"
     webpack-dev-middleware "^5.3.1"
-    ws "^8.4.2"
+    ws "^8.13.0"
 
 webpack-manifest-plugin@^4.0.2:
   version "4.1.1"
@@ -10947,9 +10923,9 @@ webpack-sources@^3.2.3:
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
 webpack@^5.64.4:
-  version "5.75.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.75.0.tgz#1e440468647b2505860e94c9ff3e44d5b582c152"
-  integrity sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==
+  version "5.78.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.78.0.tgz#836452a12416af2a7beae906b31644cb2562f9e6"
+  integrity sha512-gT5DP72KInmE/3azEaQrISjTvLYlSM0j1Ezhht/KLVkrqtv10JoP/RXhwmX/frrutOPuSq3o5Vq0ehR/4Vmd1g==
   dependencies:
     "@types/eslint-scope" "^3.7.3"
     "@types/estree" "^0.0.51"
@@ -11042,7 +11018,7 @@ whatwg-url@^8.0.0, whatwg-url@^8.4.0, whatwg-url@^8.5.0:
     tr46 "^2.1.0"
     webidl-conversions "^6.1.0"
 
-which-boxed-primitive@^1.0.1, which-boxed-primitive@^1.0.2:
+which-boxed-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
   integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
@@ -11063,17 +11039,17 @@ which-collection@^1.0.1:
     is-weakmap "^2.0.1"
     is-weakset "^2.0.1"
 
-which-typed-array@^1.1.2:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.8.tgz#0cfd53401a6f334d90ed1125754a42ed663eb01f"
-  integrity sha512-Jn4e5PItbcAHyLoRDwvPj1ypu27DJbtdYXUa5zsinrUx77Uvfb0cXwwnGMTn7cjUfhhqgVQnVJCwF+7cgU7tpw==
+which-typed-array@^1.1.9:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.9.tgz#307cf898025848cf995e795e8423c7f337efbde6"
+  integrity sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==
   dependencies:
     available-typed-arrays "^1.0.5"
     call-bind "^1.0.2"
-    es-abstract "^1.20.0"
     for-each "^0.3.3"
+    gopd "^1.0.1"
     has-tostringtag "^1.0.0"
-    is-typed-array "^1.1.9"
+    is-typed-array "^1.1.10"
 
 which@^1.3.1:
   version "1.3.1"
@@ -11301,10 +11277,10 @@ ws@^7.4.6:
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
   integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
 
-ws@^8.4.2:
-  version "8.11.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"
-  integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==
+ws@^8.13.0:
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"
+  integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==
 
 ws@~6.1.0:
   version "6.1.4"
@@ -11333,16 +11309,16 @@ xmlhttprequest@1.8.0:
   resolved "https://registry.yarnpkg.com/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz#67fe075c5c24fef39f9d65f5f7b7fe75171968fc"
   integrity sha512-58Im/U0mlVBLM38NdZjHyhuMtCqa61469k2YP/AaPbvCoV9aQGUpbJBj1QRm2ytRiVQBD/fsw7L2bJGDVQswBA==
 
-xtend@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
-  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
-
 y18n@^5.0.5:
   version "5.0.8"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
   integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
 
+yallist@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
@@ -11381,9 +11357,9 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-zustand@^4.1.0, zustand@^4.3.2:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.3.2.tgz#bb121fcad84c5a569e94bd1a2695e1a93ba85d39"
-  integrity sha512-rd4haDmlwMTVWVqwvgy00ny8rtti/klRoZjFbL/MAcDnmD5qSw/RZc+Vddstdv90M5Lv6RPgWvm1Hivyn0QgJw==
+zustand@^4.3.2:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.3.7.tgz#501b1f0393a7f1d103332e45ab574be5747fedce"
+  integrity sha512-dY8ERwB9Nd21ellgkBZFhudER8KVlelZm8388B5nDAXhO/+FZDhYMuRnqDgu5SYyRgz/iaf8RKnbUs/cHfOGlQ==
   dependencies:
     use-sync-external-store "1.2.0"