docs: release @excalidraw/excalidraw@0.15.3

Co-authored-by: dwelle <luzar.david@gmail.com>

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.15.2",
+    "@excalidraw/excalidraw": "0.15.0",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "docusaurus-plugin-sass": "0.2.3",

dev-docs/yarn.lock

@@ -1631,10 +1631,10 @@
     url-loader "^4.1.1"
     webpack "^5.73.0"
 
-"@excalidraw/excalidraw@0.15.2":
+"@excalidraw/excalidraw@0.15.0":
-  version "0.15.2"
+  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/@excalidraw/excalidraw/-/excalidraw-0.15.2.tgz#7dba4f6e10c52015a007efb75a9fc1afe598574c"
+  resolved "https://registry.yarnpkg.com/@excalidraw/excalidraw/-/excalidraw-0.15.0.tgz#47170de8d3ff006e9d09dfede2815682b0d4485b"
-  integrity sha512-rTI02kgWSTXiUdIkBxt9u/581F3eXcqQgJdIxmz54TFtG3ughoxO5fr4t7Fr2LZIturBPqfocQHGKZ0t2KLKgw==
+  integrity sha512-PJmh1VcuRHG4l+Zgt9qhezxrJ16tYCZFZ8if5IEfmTL9A/7c5mXxY/qrPTqiGlVC7jYs+ciePXQ0YUDzfOfbzw==
 
 "@hapi/hoek@^9.0.0":
   version "9.3.0"

package.json

@@ -19,7 +19,8 @@
     ]
   },
   "dependencies": {
-    "@radix-ui/react-tabs": "1.0.2",
+    "@dwelle/tunnel-rat": "0.1.1",
+    "@braintree/sanitize-url": "6.0.2",
     "@sentry/browser": "6.2.5",
     "@sentry/integrations": "6.2.5",
     "@testing-library/jest-dom": "5.16.2",
@@ -50,8 +51,8 @@
     "react-scripts": "5.0.1",
     "roughjs": "4.5.2",
     "sass": "1.51.0",
-    "socket.io-client": "4.6.1",
+    "socket.io-client": "2.3.1",
-    "tunnel-rat": "0.1.2",
+    "tunnel-rat": "0.1.0",
     "workbox-background-sync": "^6.5.4",
     "workbox-broadcast-update": "^6.5.4",
     "workbox-cacheable-response": "^6.5.4",

public/index.html

@@ -150,14 +150,6 @@
     </script>
     <% if (process.env.REACT_APP_DISABLE_TRACKING !== 'true') { %>
 
-    <!-- Fathom - privacy-friendly analytics -->
-    <script
-      src="https://cdn.usefathom.com/script.js"
-      data-site="VMSBUEYA"
-      defer
-    ></script>
-    <!-- / Fathom -->
-
     <!-- LEGACY GOOGLE ANALYTICS -->
     <% if (process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
     <script
@@ -174,6 +166,31 @@
     </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) -->
@@ -227,17 +244,5 @@
       <h1 class="visually-hidden">Excalidraw</h1>
     </header>
     <div id="root"></div>
-    <!-- 100% privacy friendly analytics -->
-    <script
-      async
-      defer
-      src="https://scripts.simpleanalyticscdn.com/latest.js"
-    ></script>
-    <noscript
-      ><img
-        src="https://queue.simpleanalyticscdn.com/noscript.gif"
-        alt=""
-        referrerpolicy="no-referrer-when-downgrade"
-    /></noscript>
   </body>
 </html>

src/actions/actionClipboard.tsx

@@ -18,7 +18,7 @@ export const actionCopy = register({
   perform: (elements, appState, _, app) => {
     const selectedElements = getSelectedElements(elements, appState, true);
 
-    copyToClipboard(selectedElements, app.files);
+    copyToClipboard(selectedElements, appState, app.files);
 
     return {
       commitToHistory: false,

src/analytics.ts

@@ -20,20 +20,9 @@ export const trackEvent = (
       });
     }
 
-    if (window.sa_event) {
+    // MATOMO event tracking _paq must be same as the one in index.html
-      window.sa_event(action, {
+    if (window._paq) {
-        category,
+      window._paq.push(["trackEvent", category, action, label, value]);
-        label,
-        value,
-      });
-    }
-
-    if (window.fathom) {
-      window.fathom.trackEvent(action, {
-        category,
-        label,
-        value,
-      });
     }
   } catch (error) {
     console.error("error during analytics", error);

src/appState.ts

@@ -58,7 +58,7 @@ export const getDefaultAppState = (): Omit<
     fileHandle: null,
     gridSize: null,
     isBindingEnabled: true,
-    defaultSidebarDockedPreference: false,
+    isSidebarDocked: false,
     isLoading: false,
     isResizing: false,
     isRotating: false,
@@ -150,11 +150,7 @@ 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 },
-  defaultSidebarDockedPreference: {
+  isSidebarDocked: { browser: true, export: false, server: false },
-    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 },

src/clipboard.ts

@@ -2,12 +2,12 @@ import {
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
 } from "./element/types";
-import { BinaryFiles } from "./types";
+import { AppState, 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, isTestEnv } from "./utils";
+import { isPromiseLike } from "./utils";
 
 type ElementsClipboard = {
   type: typeof EXPORT_DATA_TYPES.excalidrawClipboard;
@@ -55,40 +55,24 @@ const clipboardContainsElements = (
 
 export const copyToClipboard = async (
   elements: readonly NonDeletedExcalidrawElement[],
+  appState: AppState,
   files: BinaryFiles | null,
 ) => {
-  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 ? _files : undefined,
+    files: files
+      ? elements.reduce((acc, element) => {
+          if (isInitializedImageElement(element) && files[element.fileId]) {
+            acc[element.fileId] = files[element.fileId];
+          }
+          return acc;
+        }, {} as BinaryFiles)
+      : undefined,
   };
   const json = JSON.stringify(contents);
-
-  if (isTestEnv()) {
-    return json;
-  }
-
   CLIPBOARD = json;
-
   try {
     PREFER_APP_CLIPBOARD = false;
     await copyTextToSystemClipboard(json);

src/components/Actions.tsx

@@ -14,7 +14,7 @@ import {
   hasText,
 } from "../scene";
 import { SHAPES } from "../shapes";
-import { UIAppState, Zoom } from "../types";
+import { AppState, Zoom } from "../types";
 import {
   capitalizeString,
   isTransparent,
@@ -28,20 +28,19 @@ 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";
-
 export const SelectedShapeActions = ({
   appState,
   elements,
   renderAction,
 }: {
-  appState: UIAppState;
+  appState: AppState;
   elements: readonly ExcalidrawElement[];
   renderAction: ActionManager["renderAction"];
 }) => {
@@ -216,10 +215,10 @@ export const ShapesSwitcher = ({
   appState,
 }: {
   canvas: HTMLCanvasElement | null;
-  activeTool: UIAppState["activeTool"];
+  activeTool: AppState["activeTool"];
-  setAppState: React.Component<any, UIAppState>["setState"];
+  setAppState: React.Component<any, AppState>["setState"];
   onImageAction: (data: { pointerType: PointerType | null }) => void;
-  appState: UIAppState;
+  appState: AppState;
 }) => (
   <>
     {SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {

src/components/App.tsx

@@ -60,7 +60,6 @@ import {
   ENV,
   EVENT,
   GRID_SIZE,
-  IMAGE_MIME_TYPES,
   IMAGE_RENDER_TIMEOUT,
   isAndroid,
   isBrave,
@@ -210,8 +209,6 @@ import {
   PointerDownState,
   SceneData,
   Device,
-  SidebarName,
-  SidebarTabName,
 } from "../types";
 import {
   debounce,
@@ -282,13 +279,12 @@ 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 { Fonts } from "../scene/Fonts";
 import { actionPaste } from "../actions/actionClipboard";
@@ -301,9 +297,6 @@ import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
 import { actionWrapTextInContainer } from "../actions/actionBoundText";
 import BraveMeasureTextError from "./BraveMeasureTextError";
 
-const AppContext = React.createContext<AppClassProperties>(null!);
-const AppPropsContext = React.createContext<AppProps>(null!);
-
 const deviceContextInitialValue = {
   isSmScreen: false,
   isMobile: false,
@@ -345,8 +338,6 @@ 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);
@@ -407,7 +398,7 @@ class App extends React.Component<AppProps, AppState> {
   private nearestScrollableContainer: HTMLElement | Document | undefined;
   public library: AppClassProperties["library"];
   public libraryItemsFromStorage: LibraryItems | undefined;
-  public id: string;
+  private id: string;
   private history: History;
   private excalidrawContainerValue: {
     container: HTMLDivElement | null;
@@ -445,7 +436,7 @@ class App extends React.Component<AppProps, AppState> {
       width: window.innerWidth,
       height: window.innerHeight,
       showHyperlinkPopup: false,
-      defaultSidebarDockedPreference: false,
+      isSidebarDocked: false,
     };
 
     this.id = nanoid();
@@ -476,7 +467,7 @@ class App extends React.Component<AppProps, AppState> {
         setActiveTool: this.setActiveTool,
         setCursor: this.setCursor,
         resetCursor: this.resetCursor,
-        toggleSidebar: this.toggleSidebar,
+        toggleMenu: this.toggleMenu,
       } as const;
       if (typeof excalidrawRef === "function") {
         excalidrawRef(api);
@@ -584,91 +575,101 @@ class App extends React.Component<AppProps, AppState> {
           this.props.handleKeyboardGlobally ? undefined : this.onKeyDown
         }
       >
-        <AppContext.Provider value={this}>
+        <ExcalidrawContainerContext.Provider
-          <AppPropsContext.Provider value={this.props}>
+          value={this.excalidrawContainerValue}
-            <ExcalidrawContainerContext.Provider
+        >
-              value={this.excalidrawContainerValue}
+          <DeviceContext.Provider value={this.device}>
-            >
+            <ExcalidrawSetAppStateContext.Provider value={this.setAppState}>
-              <DeviceContext.Provider value={this.device}>
+              <ExcalidrawAppStateContext.Provider value={this.state}>
-                <ExcalidrawSetAppStateContext.Provider value={this.setAppState}>
+                <ExcalidrawElementsContext.Provider
-                  <ExcalidrawAppStateContext.Provider value={this.state}>
+                  value={this.scene.getNonDeletedElements()}
-                    <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
+                      }
                     >
-                      <ExcalidrawActionManagerContext.Provider
+                      {this.props.children}
-                        value={this.actionManager}
+                    </LayerUI>
-                      >
+                    <div className="excalidraw-textEditorContainer" />
-                        <LayerUI
+                    <div className="excalidraw-contextMenuContainer" />
-                          canvas={this.canvas}
+                    {selectedElement.length === 1 &&
-                          appState={this.state}
+                      !this.state.contextMenu &&
-                          files={this.files}
+                      this.state.showHyperlinkPopup && (
+                        <Hyperlink
+                          key={selectedElement[0].id}
+                          element={selectedElement[0]}
                           setAppState={this.setAppState}
-                          actionManager={this.actionManager}
+                          onLinkOpen={this.props.onLinkOpen}
-                          elements={this.scene.getNonDeletedElements()}
+                        />
-                          onLockToggle={this.toggleLock}
+                      )}
-                          onPenModeToggle={this.togglePenMode}
+                    {this.state.toast !== null && (
-                          onHandToolToggle={this.onHandToolToggle}
+                      <Toast
-                          langCode={getLanguage().code}
+                        message={this.state.toast.message}
-                          renderTopRightUI={renderTopRightUI}
+                        onClose={() => this.setToast(null)}
-                          renderCustomStats={renderCustomStats}
+                        duration={this.state.toast.duration}
-                          showExitZenModeBtn={
+                        closable={this.state.toast.closable}
-                            typeof this.props?.zenModeEnabled === "undefined" &&
+                      />
-                            this.state.zenModeEnabled
+                    )}
-                          }
+                    {this.state.contextMenu && (
-                          UIOptions={this.props.UIOptions}
+                      <ContextMenu
-                          onImageAction={this.onImageAction}
+                        items={this.state.contextMenu.items}
-                          renderWelcomeScreen={
+                        top={this.state.contextMenu.top}
-                            !this.state.isLoading &&
+                        left={this.state.contextMenu.left}
-                            this.state.showWelcomeScreen &&
+                        actionManager={this.actionManager}
-                            this.state.activeTool.type === "selection" &&
+                      />
-                            !this.scene.getElementsIncludingDeleted().length
+                    )}
-                          }
+                    <main>{this.renderCanvas()}</main>
-                        >
+                  </ExcalidrawActionManagerContext.Provider>
-                          {this.props.children}
+                </ExcalidrawElementsContext.Provider>{" "}
-                        </LayerUI>
+              </ExcalidrawAppStateContext.Provider>
-                        <div className="excalidraw-textEditorContainer" />
+            </ExcalidrawSetAppStateContext.Provider>
-                        <div className="excalidraw-contextMenuContainer" />
+          </DeviceContext.Provider>
-                        {selectedElement.length === 1 &&
+        </ExcalidrawContainerContext.Provider>
-                          !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>
-                      </ExcalidrawActionManagerContext.Provider>
-                    </ExcalidrawElementsContext.Provider>{" "}
-                  </ExcalidrawAppStateContext.Provider>
-                </ExcalidrawSetAppStateContext.Provider>
-              </DeviceContext.Provider>
-            </ExcalidrawContainerContext.Provider>
-          </AppPropsContext.Provider>
-        </AppContext.Provider>
       </div>
     );
   }
 
   public focusContainer: AppClassProperties["focusContainer"] = () => {
-    this.excalidrawContainerRef.current?.focus();
+    if (this.props.autoFocus) {
+      this.excalidrawContainerRef.current?.focus();
+    }
   };
 
   public getSceneElementsIncludingDeleted = () => {
@@ -679,14 +680,6 @@ class App extends React.Component<AppProps, AppState> {
     return this.scene.getNonDeletedElements();
   };
 
-  public onInsertElements = (elements: readonly ExcalidrawElement[]) => {
-    this.addElementsFromPasteOrLibrary({
-      elements,
-      position: "center",
-      files: null,
-    });
-  };
-
   private syncActionResult = withBatchedUpdates(
     (actionResult: ActionResult) => {
       if (this.unmounted || actionResult === false) {
@@ -956,7 +949,7 @@ class App extends React.Component<AppProps, AppState> {
     this.scene.addCallback(this.onSceneUpdated);
     this.addEventListeners();
 
-    if (this.props.autoFocus && this.excalidrawContainerRef.current) {
+    if (this.excalidrawContainerRef.current) {
       this.focusContainer();
     }
 
@@ -1595,7 +1588,6 @@ 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);
@@ -1609,7 +1601,6 @@ 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);
@@ -1647,9 +1638,6 @@ class App extends React.Component<AppProps, AppState> {
           y: element.y + gridY - minY,
         });
       }),
-      {
-        randomizeSeed: !opts.retainSeed,
-      },
     );
 
     const nextElements = [
@@ -1684,7 +1672,7 @@ class App extends React.Component<AppProps, AppState> {
           openSidebar:
             this.state.openSidebar &&
             this.device.canDeviceFitSidebar &&
-            this.state.defaultSidebarDockedPreference
+            this.state.isSidebarDocked
               ? this.state.openSidebar
               : null,
           selectedElementIds: newElements.reduce(
@@ -2022,24 +2010,30 @@ class App extends React.Component<AppProps, AppState> {
   /**
    * @returns whether the menu was toggled on or off
    */
-  public toggleSidebar = ({
+  public toggleMenu = (
-    name,
+    type: "library" | "customSidebar",
-    tab,
+    force?: boolean,
-    force,
+  ): boolean => {
-  }: {
+    if (type === "customSidebar" && !this.props.renderSidebar) {
-    name: SidebarName;
+      console.warn(
-    tab?: SidebarTabName;
+        `attempting to toggle "customSidebar", but no "props.renderSidebar" is defined`,
-    force?: boolean;
+      );
-  }): boolean => {
+      return false;
-    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 });
 
-    return !!nextName;
+    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;
   };
 
   private updateCurrentCursorPosition = withBatchedUpdates(
@@ -2952,12 +2946,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";
@@ -2965,7 +2966,7 @@ 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;
           }
         }
       }
@@ -4725,12 +4726,7 @@ class App extends React.Component<AppProps, AppState> {
         pointerDownState.drag.hasOccurred = true;
         // prevent dragging even if we're no longer holding cmd/ctrl otherwise
         // it would have weird results (stuff jumping all over the screen)
-        // Checking for editingElement to avoid jump while editing on mobile #6503
+        if (selectedElements.length > 0 && !pointerDownState.withCmdOrCtrl) {
-        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,
@@ -5753,9 +5749,7 @@ class App extends React.Component<AppProps, AppState> {
 
       const imageFile = await fileOpen({
         description: "Image",
-        extensions: Object.keys(
+        extensions: ["jpg", "png", "svg", "gif"],
-          IMAGE_MIME_TYPES,
-        ) as (keyof typeof IMAGE_MIME_TYPES)[],
       });
 
       const imageElement = this.createImageElement({

src/components/BraveMeasureTextError.tsx

@@ -1,40 +1,39 @@
-import Trans from "./Trans";
+import { t } from "../i18n";
-
 const BraveMeasureTextError = () => {
   return (
     <div data-testid="brave-measure-text-error">
       <p>
-        <Trans
+        {t("errors.brave_measure_text_error.start")} &nbsp;
-          i18nKey="errors.brave_measure_text_error.line1"
+        <span style={{ fontWeight: 600 }}>
-          bold={(el) => <span style={{ fontWeight: 600 }}>{el}</span>}
+          {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")}.
       </p>
       <p>
-        <Trans
+        {t("errors.brave_measure_text_error.strongly_recommend")}{" "}
-          i18nKey="errors.brave_measure_text_error.line2"
+        <a href="http://docs.excalidraw.com/docs/@excalidraw/excalidraw/faq#turning-off-aggresive-block-fingerprinting-in-brave-browser">
-          bold={(el) => <span style={{ fontWeight: 600 }}>{el}</span>}
+          {" "}
-        />
+          {t("errors.brave_measure_text_error.steps")}
+        </a>{" "}
+        {t("errors.brave_measure_text_error.how")}.
       </p>
       <p>
-        <Trans
+        {t("errors.brave_measure_text_error.disable_setting")}{" "}
-          i18nKey="errors.brave_measure_text_error.line3"
+        <a href="https://github.com/excalidraw/excalidraw/issues/new">
-          link={(el) => (
+          {t("errors.brave_measure_text_error.issue")}
-            <a href="http://docs.excalidraw.com/docs/@excalidraw/excalidraw/faq#turning-off-aggresive-block-fingerprinting-in-brave-browser">
+        </a>{" "}
-              {el}
+        {t("errors.brave_measure_text_error.write")}{" "}
-            </a>
+        <a href="https://discord.gg/UexuTaE">
-          )}
+          {t("errors.brave_measure_text_error.discord")}
-        />
+        </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>
   );

src/components/Button.tsx

@@ -1,12 +1,8 @@
-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;
 }
@@ -19,18 +15,18 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
 export const Button = ({
   type = "button",
   onSelect,
-  selected,
   children,
   className = "",
   ...rest
 }: ButtonProps) => {
   return (
     <button
-      onClick={composeEventHandlers(rest.onClick, (event) => {
+      onClick={(event) => {
         onSelect();
-      })}
+        rest.onClick?.(event);
+      }}
       type={type}
-      className={clsx("excalidraw-button", className, { selected })}
+      className={`excalidraw-button ${className}`}
       {...rest}
     >
       {children}

src/components/ColorPicker.scss

@@ -183,7 +183,6 @@
     width: 100%;
     margin: 0;
     font-size: 0.875rem;
-    font-family: inherit;
     background-color: transparent;
     color: var(--text-primary-color);
     border: 0;

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 "./LibraryMenu";
+import { isLibraryMenuOpenAtom } from "./LibraryMenuHeaderContent";
-import { useExcalidrawContainer, useExcalidrawSetAppState } from "./App";
+import { useExcalidrawSetAppState } from "./App";
 import { jotaiScope } from "../jotai";
 
 interface Props extends Omit<DialogProps, "onCloseRequest"> {
@@ -26,7 +26,6 @@ const ConfirmDialog = (props: Props) => {
   } = props;
   const setAppState = useExcalidrawSetAppState();
   const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom, jotaiScope);
-  const { container } = useExcalidrawContainer();
 
   return (
     <Dialog
@@ -43,7 +42,6 @@ const ConfirmDialog = (props: Props) => {
             setAppState({ openMenu: null });
             setIsLibraryMenuOpen(false);
             onCancel();
-            container?.focus();
           }}
         />
         <DialogActionButton
@@ -52,7 +50,6 @@ const ConfirmDialog = (props: Props) => {
             setAppState({ openMenu: null });
             setIsLibraryMenuOpen(false);
             onConfirm();
-            container?.focus();
           }}
           actionType="danger"
         />

src/components/ContextMenu.scss

@@ -30,7 +30,6 @@
     background-color: transparent;
     border: none;
     white-space: nowrap;
-    font-family: inherit;
 
     display: grid;
     grid-template-columns: 1fr 0.2fr;

src/components/DefaultSidebar.test.tsx

@@ -1,144 +0,0 @@
-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");
-      },
-    );
-  });
-});

src/components/DefaultSidebar.tsx

@@ -1,118 +0,0 @@
-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,
-  },
-);

src/components/Dialog.tsx

@@ -15,7 +15,7 @@ import { Modal } from "./Modal";
 import { AppState } from "../types";
 import { queryFocusableElements } from "../utils";
 import { useSetAtom } from "jotai";
-import { isLibraryMenuOpenAtom } from "./LibraryMenu";
+import { isLibraryMenuOpenAtom } from "./LibraryMenuHeaderContent";
 import { jotaiScope } from "../jotai";
 
 export interface DialogProps {

src/components/HintViewer.tsx

@@ -1,7 +1,9 @@
 import { t } from "../i18n";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { getSelectedElements } from "../scene";
-import { Device, UIAppState } from "../types";
+
+import "./HintViewer.scss";
+import { AppState, Device } from "../types";
 import {
   isImageElement,
   isLinearElement,
@@ -11,10 +13,8 @@ import {
 import { getShortcutKey } from "../utils";
 import { isEraserActive } from "../appState";
 
-import "./HintViewer.scss";
-
 interface HintViewerProps {
-  appState: UIAppState;
+  appState: AppState;
   elements: readonly NonDeletedExcalidrawElement[];
   isMobile: boolean;
   device: Device;
@@ -29,7 +29,7 @@ const getHints = ({
   const { activeTool, isResizing, isRotating, lastPointerDownWith } = appState;
   const multiMode = appState.multiElement !== null;
 
-  if (appState.openSidebar && !device.canDeviceFitSidebar) {
+  if (appState.openSidebar === "library" && !device.canDeviceFitSidebar) {
     return null;
   }
 

src/components/ImageExportDialog.tsx

@@ -4,10 +4,11 @@ import { canvasToBlob } from "../data/blob";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
-import { BinaryFiles, UIAppState } from "../types";
+import { AppState, BinaryFiles } from "../types";
 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";
@@ -15,8 +16,6 @@ import { nativeFileSystemSupported } from "../data/filesystem";
 import { ActionManager } from "../actions/manager";
 import { exportToCanvas } from "../packages/utils";
 
-import "./ExportDialog.scss";
-
 const supportsContextFilters =
   "filter" in document.createElement("canvas").getContext("2d")!;
 
@@ -71,7 +70,7 @@ const ImageExportModal = ({
   onExportToSvg,
   onExportToClipboard,
 }: {
-  appState: UIAppState;
+  appState: AppState;
   elements: readonly NonDeletedExcalidrawElement[];
   files: BinaryFiles;
   exportPadding?: number;
@@ -217,8 +216,8 @@ export const ImageExportDialog = ({
   onExportToSvg,
   onExportToClipboard,
 }: {
-  appState: UIAppState;
+  appState: AppState;
-  setAppState: React.Component<any, UIAppState>["setState"];
+  setAppState: React.Component<any, AppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
   files: BinaryFiles;
   exportPadding?: number;

src/components/JSONExportDialog.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 
-import { ExportOpts, BinaryFiles, UIAppState } from "../types";
+import { AppState, ExportOpts, BinaryFiles } from "../types";
 import { Dialog } from "./Dialog";
 import { exportToFileIcon, LinkIcon } from "./icons";
 import { ToolButton } from "./ToolButton";
@@ -28,7 +28,7 @@ const JSONExportModal = ({
   exportOpts,
   canvas,
 }: {
-  appState: UIAppState;
+  appState: AppState;
   files: BinaryFiles;
   elements: readonly NonDeletedExcalidrawElement[];
   actionManager: ActionManager;
@@ -96,12 +96,12 @@ export const JSONExportDialog = ({
   setAppState,
 }: {
   elements: readonly NonDeletedExcalidrawElement[];
-  appState: UIAppState;
+  appState: AppState;
   files: BinaryFiles;
   actionManager: ActionManager;
   exportOpts: ExportOpts;
   canvas: HTMLCanvasElement | null;
-  setAppState: React.Component<any, UIAppState>["setState"];
+  setAppState: React.Component<any, AppState>["setState"];
 }) => {
   const handleClose = React.useCallback(() => {
     setAppState({ openDialog: null });

src/components/LayerUI.tsx

@@ -1,21 +1,15 @@
 import clsx from "clsx";
 import React from "react";
 import { ActionManager } from "../actions/manager";
-import { CLASSES, DEFAULT_SIDEBAR, LIBRARY_SIDEBAR_WIDTH } from "../constants";
+import { CLASSES, LIBRARY_SIDEBAR_WIDTH } from "../constants";
 import { exportCanvas } from "../data";
 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 {
+import { AppProps, AppState, ExcalidrawProps, BinaryFiles } from "../types";
-  AppProps,
+import { isShallowEqual, muteFSAbortError } from "../utils";
-  AppState,
-  ExcalidrawProps,
-  BinaryFiles,
-  UIAppState,
-} from "../types";
-import { capitalizeString, isShallowEqual, muteFSAbortError } from "../utils";
 import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { ErrorDialog } from "./ErrorDialog";
 import { ExportCB, ImageExportDialog } from "./ImageExportDialog";
@@ -30,32 +24,32 @@ 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 { isSidebarDockedAtom } from "./Sidebar/Sidebar";
+import { hostSidebarCountersAtom } from "./Sidebar/Sidebar";
 import { jotaiScope } from "../jotai";
-import { Provider, useAtomValue } from "jotai";
+import { Provider, useAtom } from "jotai";
 import MainMenu from "./main-menu/MainMenu";
 import { ActiveConfirmDialog } from "./ActiveConfirmDialog";
 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 "./LayerUI.scss";
-import "./Toolbar.scss";
 
 interface LayerUIProps {
   actionManager: ActionManager;
-  appState: UIAppState;
+  appState: AppState;
   files: BinaryFiles;
   canvas: HTMLCanvasElement | null;
   setAppState: React.Component<any, AppState>["setState"];
@@ -63,11 +57,17 @@ 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;
   renderWelcomeScreen: boolean;
   children?: React.ReactNode;
@@ -109,10 +109,16 @@ const LayerUI = ({
   onLockToggle,
   onHandToolToggle,
   onPenModeToggle,
+  onInsertElements,
   showExitZenModeBtn,
   renderTopRightUI,
   renderCustomStats,
+  renderCustomSidebar,
+  libraryReturnUrl,
   UIOptions,
+  focusContainer,
+  library,
+  id,
   onImageAction,
   renderWelcomeScreen,
   children,
@@ -150,8 +156,7 @@ const LayerUI = ({
         const fileHandle = await exportCanvas(
           type,
           exportedElements,
-          // FIXME once we split UI canvas from element canvas
+          appState,
-          appState as AppState,
           files,
           {
             exportBackground: appState.exportBackground,
@@ -192,8 +197,8 @@ const LayerUI = ({
     <div style={{ position: "relative" }}>
       {/* wrapping to Fragment stops React from occasionally complaining
                 about identical Keys */}
-      <tunnels.MainMenuTunnel.Out />
+      <tunnels.mainMenuTunnel.Out />
-      {renderWelcomeScreen && <tunnels.WelcomeScreenMenuHintTunnel.Out />}
+      {renderWelcomeScreen && <tunnels.welcomeScreenMenuHintTunnel.Out />}
     </div>
   );
 
@@ -245,7 +250,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
@@ -319,12 +324,9 @@ const LayerUI = ({
           >
             <UserList collaborators={appState.collaborators} />
             {renderTopRightUI?.(device.isMobile, appState)}
-            {!appState.viewModeEnabled &&
+            {!appState.viewModeEnabled && (
-              // hide button when sidebar docked
+              <LibraryButton appState={appState} setAppState={setAppState} />
-              (!isSidebarDocked ||
+            )}
-                appState.openSidebar?.name !== DEFAULT_SIDEBAR.name) && (
-                <tunnels.DefaultSidebarTriggerTunnel.Out />
-              )}
           </div>
         </div>
       </FixedSideContainer>
@@ -332,21 +334,21 @@ const LayerUI = ({
   };
 
   const renderSidebars = () => {
-    return (
+    return appState.openSidebar === "customSidebar" ? (
-      <DefaultSidebar
+      renderCustomSidebar?.() || null
-        __fallback
+    ) : appState.openSidebar === "library" ? (
-        onDock={(docked) => {
+      <LibraryMenu
-          trackEvent(
+        appState={appState}
-            "sidebar",
+        onInsertElements={onInsertElements}
-            `toggleDock (${docked ? "dock" : "undock"})`,
+        libraryReturnUrl={libraryReturnUrl}
-            `(${device.isMobile ? "mobile" : "desktop"})`,
+        focusContainer={focusContainer}
-          );
+        library={library}
-        }}
+        id={id}
       />
-    );
+    ) : null;
   };
 
-  const isSidebarDocked = useAtomValue(isSidebarDockedAtom, jotaiScope);
+  const [hostSidebarCounters] = useAtom(hostSidebarCountersAtom, jotaiScope);
 
   const layerUIJSX = (
     <>
@@ -356,25 +358,8 @@ 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>
       {/* ------------------------------------------------------------------ */}
 
       {appState.isLoading && <LoadingMessage delay={250} />}
@@ -397,6 +382,7 @@ const LayerUI = ({
         <PasteChartDialog
           setAppState={setAppState}
           appState={appState}
+          onInsertChart={onInsertElements}
           onClose={() =>
             setAppState({
               pasteDialog: { shown: false, data: null },
@@ -424,6 +410,7 @@ const LayerUI = ({
           renderWelcomeScreen={renderWelcomeScreen}
         />
       )}
+
       {!device.isMobile && (
         <>
           <div
@@ -435,14 +422,15 @@ const LayerUI = ({
                   !isTextElement(appState.editingElement)),
             })}
             style={
-              appState.openSidebar &&
+              ((appState.openSidebar === "library" &&
-              isSidebarDocked &&
+                appState.isSidebarDocked) ||
+                hostSidebarCounters.docked) &&
               device.canDeviceFitSidebar
                 ? { width: `calc(100% - ${LIBRARY_SIDEBAR_WIDTH}px)` }
                 : {}
             }
           >
-            {renderWelcomeScreen && <tunnels.WelcomeScreenCenterTunnel.Out />}
+            {renderWelcomeScreen && <tunnels.welcomeScreenCenterTunnel.Out />}
             {renderFixedSideContainer()}
             <Footer
               appState={appState}
@@ -465,9 +453,9 @@ const LayerUI = ({
               <button
                 className="scroll-back-to-content"
                 onClick={() => {
-                  setAppState((appState) => ({
+                  setAppState({
                     ...calculateScrollCenter(elements, appState, canvas),
-                  }));
+                  });
                 }}
               >
                 {t("buttons.scrollBackToContent")}
@@ -481,25 +469,19 @@ const LayerUI = ({
   );
 
   return (
-    <UIAppStateContext.Provider value={appState}>
+    <Provider scope={tunnels.jotaiScope}>
-      <Provider scope={tunnels.jotaiScope}>
+      <TunnelsContext.Provider value={tunnels}>
-        <TunnelsContext.Provider value={tunnels}>
+        {layerUIJSX}
-          {layerUIJSX}
+      </TunnelsContext.Provider>
-        </TunnelsContext.Provider>
+    </Provider>
-      </Provider>
-    </UIAppStateContext.Provider>
   );
 };
 
-const stripIrrelevantAppStateProps = (appState: AppState): UIAppState => {
+const stripIrrelevantAppStateProps = (
-  const {
+  appState: AppState,
-    suggestedBindings,
+): Partial<AppState> => {
-    startBoundElement,
+  const { suggestedBindings, startBoundElement, cursorButton, ...ret } =
-    cursorButton,
+    appState;
-    scrollX,
-    scrollY,
-    ...ret
-  } = appState;
   return ret;
 };
 
@@ -509,19 +491,24 @@ const areEqual = (prevProps: LayerUIProps, nextProps: LayerUIProps) => {
     return false;
   }
 
-  const { canvas: _prevCanvas, appState: prevAppState, ...prev } = prevProps;
+  const {
-  const { canvas: _nextCanvas, appState: nextAppState, ...next } = nextProps;
+    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;
 
   return (
     isShallowEqual(
-      // asserting AppState because we're being passed the whole AppState
+      stripIrrelevantAppStateProps(prevAppState),
-      // but resolve to only the UI-relevant props
+      stripIrrelevantAppStateProps(nextAppState),
-      stripIrrelevantAppStateProps(prevAppState as AppState),
-      stripIrrelevantAppStateProps(nextAppState as AppState),
-      {
-        selectedElementIds: isShallowEqual,
-        selectedGroupIds: isShallowEqual,
-      },
     ) && isShallowEqual(prev, next)
   );
 };

src/components/LibraryButton.scss

@@ -0,0 +1,32 @@
+@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;
+    }
+  }
+}

src/components/LibraryButton.tsx

@@ -0,0 +1,57 @@
+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>
+  );
+};

src/components/LibraryMenu.scss

@@ -1,9 +1,9 @@
 @import "open-color/open-color";
 
 .excalidraw {
-  .library-menu-items-container {
+  .layer-ui__library-sidebar {
-    height: 100%;
+    display: flex;
-    width: 100%;
+    flex-direction: column;
   }
 
   .layer-ui__library {
@@ -11,6 +11,28 @@
     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 {
@@ -65,17 +87,10 @@
     }
   }
 
-  .library-menu-control-buttons {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.625rem;
-  }
-
   .library-menu-browse-button {
-    flex: 1;
+    margin: 1rem auto;
 
-    height: var(--lg-button-size);
+    padding: 0.875rem 1rem;
 
     display: flex;
     align-items: center;
@@ -107,19 +122,30 @@
     }
   }
 
-  &.excalidraw--mobile .library-menu-browse-button {
+  .library-menu-browse-button--mobile {
-    height: var(--default-button-size);
+    min-height: 22px;
+    margin-left: auto;
+    a {
+      padding-right: 0;
+    }
   }
 
-  .layer-ui__library .dropdown-menu {
+  .layer-ui__sidebar__header .dropdown-menu {
-    width: auto;
+    &.dropdown-menu--mobile {
-    top: initial;
+      top: 100%;
-    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);

src/components/LibraryMenu.tsx

@@ -1,39 +1,77 @@
-import React, { useState, useCallback } from "react";
+import {
+  useRef,
+  useState,
+  useEffect,
+  useCallback,
+  RefObject,
+  forwardRef,
+} from "react";
 import Library, {
   distributeLibraryItemsOnSquareGrid,
   libraryItemsAtom,
 } from "../data/library";
 import { t } from "../i18n";
 import { randomId } from "../random";
-import {
+import { LibraryItems, LibraryItem, AppState, ExcalidrawProps } from "../types";
-  LibraryItems,
+
-  LibraryItem,
+import "./LibraryMenu.scss";
-  ExcalidrawProps,
-  UIAppState,
-} from "../types";
 import LibraryMenuItems from "./LibraryMenuItems";
+import { EVENT } from "../constants";
+import { KEYS } from "../keys";
 import { trackEvent } from "../analytics";
-import { atom, useAtom } from "jotai";
+import { useAtom } from "jotai";
 import { jotaiScope } from "../jotai";
 import Spinner from "./Spinner";
 import {
-  useApp,
+  useDevice,
-  useAppProps,
   useExcalidrawElements,
   useExcalidrawSetAppState,
 } from "./App";
+import { Sidebar } from "./Sidebar/Sidebar";
 import { getSelectedElements } from "../scene";
-import { useUIAppState } from "../context/ui-appState";
+import { NonDeletedExcalidrawElement } from "../element/types";
+import { LibraryMenuHeader } from "./LibraryMenuHeaderContent";
+import LibraryMenuBrowseButton from "./LibraryMenuBrowseButton";
 
-import "./LibraryMenu.scss";
+const useOnClickOutside = (
-import { LibraryMenuControlButtons } from "./LibraryMenuControlButtons";
+  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;
+      }
 
-const LibraryMenuWrapper = ({ children }: { children: React.ReactNode }) => {
+      cb(event);
-  return <div className="layer-ui__library">{children}</div>;
+    };
+    document.addEventListener("pointerdown", listener, false);
+
+    return () => {
+      document.removeEventListener("pointerdown", listener);
+    };
+  }, [ref, cb]);
 };
 
+const LibraryMenuWrapper = forwardRef<
+  HTMLDivElement,
+  { children: React.ReactNode }
+>(({ children }, ref) => {
+  return (
+    <div ref={ref} className="layer-ui__library">
+      {children}
+    </div>
+  );
+});
+
 export const LibraryMenuContent = ({
   onInsertLibraryItems,
   pendingElements,
@@ -49,11 +87,11 @@ export const LibraryMenuContent = ({
   pendingElements: LibraryItem["elements"];
   onInsertLibraryItems: (libraryItems: LibraryItems) => void;
   onAddToLibrary: () => void;
-  setAppState: React.Component<any, UIAppState>["setState"];
+  setAppState: React.Component<any, AppState>["setState"];
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
   library: Library;
   id: string;
-  appState: UIAppState;
+  appState: AppState;
   selectedItems: LibraryItem["id"][];
   onSelectItems: (id: LibraryItem["id"][]) => void;
 }) => {
@@ -120,31 +158,81 @@ export const LibraryMenuContent = ({
         theme={appState.theme}
       />
       {showBtn && (
-        <LibraryMenuControlButtons
+        <LibraryMenuBrowseButton
-          style={{ padding: "16px 12px 0 12px" }}
           id={id}
           libraryReturnUrl={libraryReturnUrl}
           theme={appState.theme}
-          selectedItems={selectedItems}
-          onSelectItems={onSelectItems}
         />
       )}
     </LibraryMenuWrapper>
   );
 };
 
-/**
+export const LibraryMenu: React.FC<{
- * This component is meant to be rendered inside <Sidebar.Tab/> inside our
+  appState: AppState;
- * <DefaultSidebar/> or host apps Sidebar components.
+  onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
- */
+  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
-export const LibraryMenu = () => {
+  focusContainer: () => void;
-  const { library, id, onInsertElements } = useApp();
+  library: Library;
-  const appProps = useAppProps();
+  id: string;
-  const appState = useUIAppState();
+}> = ({
+  appState,
+  onInsertElements,
+  libraryReturnUrl,
+  focusContainer,
+  library,
+  id,
+}) => {
   const setAppState = useExcalidrawSetAppState();
   const elements = useExcalidrawElements();
+  const device = useDevice();
 
   const [selectedItems, setSelectedItems] = useState<LibraryItem["id"][]>([]);
+  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
+
+  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],
+    ),
+  );
+
+  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({
@@ -153,20 +241,69 @@ export const LibraryMenu = () => {
     });
   }, [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 (
-    <LibraryMenuContent
+    <Sidebar
-      pendingElements={getSelectedElements(elements, appState, true)}
+      __isInternal
-      onInsertLibraryItems={(libraryItems) => {
+      // necessary to remount when switching between internal
-        onInsertElements(distributeLibraryItemsOnSquareGrid(libraryItems));
+      // 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"})`,
+        );
       }}
-      onAddToLibrary={deselectItems}
+      ref={ref}
-      setAppState={setAppState}
+    >
-      libraryReturnUrl={appProps.libraryReturnUrl}
+      <Sidebar.Header className="layer-ui__library-header">
-      library={library}
+        <LibraryMenuHeader
-      id={id}
+          appState={appState}
-      appState={appState}
+          setAppState={setAppState}
-      selectedItems={selectedItems}
+          selectedItems={selectedItems}
-      onSelectItems={setSelectedItems}
+          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>
   );
 };

src/components/LibraryMenuBrowseButton.tsx

@@ -1,6 +1,6 @@
 import { VERSIONS } from "../constants";
 import { t } from "../i18n";
-import { ExcalidrawProps, UIAppState } from "../types";
+import { AppState, ExcalidrawProps } from "../types";
 
 const LibraryMenuBrowseButton = ({
   theme,
@@ -8,7 +8,7 @@ const LibraryMenuBrowseButton = ({
   libraryReturnUrl,
 }: {
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
-  theme: UIAppState["theme"];
+  theme: AppState["theme"];
   id: string;
 }) => {
   const referrer =

src/components/LibraryMenuControlButtons.tsx

@@ -1,33 +0,0 @@
-import { LibraryItem, ExcalidrawProps, UIAppState } from "../types";
-import LibraryMenuBrowseButton from "./LibraryMenuBrowseButton";
-import { LibraryDropdownMenu } from "./LibraryMenuHeaderContent";
-
-export const LibraryMenuControlButtons = ({
-  selectedItems,
-  onSelectItems,
-  libraryReturnUrl,
-  theme,
-  id,
-  style,
-}: {
-  selectedItems: LibraryItem["id"][];
-  onSelectItems: (id: LibraryItem["id"][]) => void;
-  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
-  theme: UIAppState["theme"];
-  id: string;
-  style: React.CSSProperties;
-}) => {
-  return (
-    <div className="library-menu-control-buttons" style={style}>
-      <LibraryMenuBrowseButton
-        id={id}
-        libraryReturnUrl={libraryReturnUrl}
-        theme={theme}
-      />
-      <LibraryDropdownMenu
-        selectedItems={selectedItems}
-        onSelectItems={onSelectItems}
-      />
-    </div>
-  );
-};

src/components/LibraryMenuHeaderContent.tsx

@@ -1,11 +1,8 @@
-import { useCallback, useState } from "react";
+import React, { 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,
@@ -16,27 +13,29 @@ import {
 import { ToolButton } from "./ToolButton";
 import { fileOpen } from "../data/filesystem";
 import { muteFSAbortError } from "../utils";
-import { useAtom } from "jotai";
+import { atom, useAtom } from "jotai";
+import { jotaiScope } from "../jotai";
 import ConfirmDialog from "./ConfirmDialog";
 import PublishLibrary from "./PublishLibrary";
 import { Dialog } from "./Dialog";
+
 import DropdownMenu from "./dropdownMenu/DropdownMenu";
-import { isLibraryMenuOpenAtom } from "./LibraryMenu";
+
-import { useUIAppState } from "../context/ui-appState";
+export const isLibraryMenuOpenAtom = atom(false);
 
 const getSelectedItems = (
   libraryItems: LibraryItems,
   selectedItems: LibraryItem["id"][],
 ) => libraryItems.filter((item) => selectedItems.includes(item.id));
 
-export const LibraryDropdownMenuButton: React.FC<{
+export const LibraryMenuHeader: React.FC<{
-  setAppState: React.Component<any, UIAppState>["setState"];
+  setAppState: React.Component<any, AppState>["setState"];
   selectedItems: LibraryItem["id"][];
   library: Library;
   onRemoveFromLibrary: () => void;
   resetLibrary: () => void;
   onSelectItems: (items: LibraryItem["id"][]) => void;
-  appState: UIAppState;
+  appState: AppState;
 }> = ({
   setAppState,
   selectedItems,
@@ -51,7 +50,6 @@ export const LibraryDropdownMenuButton: React.FC<{
     isLibraryMenuOpenAtom,
     jotaiScope,
   );
-
   const renderRemoveLibAlert = useCallback(() => {
     const content = selectedItems.length
       ? t("alerts.removeItemsFromsLibrary", { count: selectedItems.length })
@@ -106,19 +104,16 @@ export const LibraryDropdownMenuButton: React.FC<{
         small={true}
       >
         <p>
-          <Trans
+          {t("publishSuccessDialog.content", {
-            i18nKey="publishSuccessDialog.content"
+            authorName: publishLibSuccess!.authorName,
-            authorName={publishLibSuccess!.authorName}
+          })}{" "}
-            link={(el) => (
+          <a
-              <a
+            href={publishLibSuccess?.url}
-                href={publishLibSuccess?.url}
+            target="_blank"
-                target="_blank"
+            rel="noopener noreferrer"
-                rel="noopener noreferrer"
+          >
-              >
+            {t("publishSuccessDialog.link")}
-                {el}
+          </a>
-              </a>
-            )}
-          />
         </p>
         <ToolButton
           type="button"
@@ -186,6 +181,7 @@ export const LibraryDropdownMenuButton: React.FC<{
     return (
       <DropdownMenu open={isLibraryMenuOpen}>
         <DropdownMenu.Trigger
+          className="Sidebar__dropdown-btn"
           onToggle={() => setIsLibraryMenuOpen(!isLibraryMenuOpen)}
         >
           {DotsIcon}
@@ -234,7 +230,6 @@ export const LibraryDropdownMenuButton: React.FC<{
       </DropdownMenu>
     );
   };
-
   return (
     <div style={{ position: "relative" }}>
       {renderLibraryMenu()}
@@ -266,48 +261,3 @@ export const LibraryDropdownMenuButton: React.FC<{
     </div>
   );
 };
-
-export const LibraryDropdownMenu = ({
-  selectedItems,
-  onSelectItems,
-}: {
-  selectedItems: LibraryItem["id"][];
-  onSelectItems: (id: LibraryItem["id"][]) => void;
-}) => {
-  const { library } = useApp();
-  const appState = useUIAppState();
-  const setAppState = useExcalidrawSetAppState();
-
-  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
-
-  const removeFromLibrary = useCallback(
-    async (libraryItems: LibraryItems) => {
-      const nextItems = libraryItems.filter(
-        (item) => !selectedItems.includes(item.id),
-      );
-      library.setLibrary(nextItems).catch(() => {
-        setAppState({ errorMessage: t("alerts.errorRemovingFromLibrary") });
-      });
-      onSelectItems([]);
-    },
-    [library, setAppState, selectedItems, onSelectItems],
-  );
-
-  const resetLibrary = useCallback(() => {
-    library.resetLibrary();
-  }, [library]);
-
-  return (
-    <LibraryDropdownMenuButton
-      appState={appState}
-      setAppState={setAppState}
-      selectedItems={selectedItems}
-      onSelectItems={onSelectItems}
-      library={library}
-      onRemoveFromLibrary={() =>
-        removeFromLibrary(libraryItemsData.libraryItems)
-      }
-      resetLibrary={resetLibrary}
-    />
-  );
-};

src/components/LibraryMenuItems.scss

@@ -47,7 +47,7 @@
 
     &__items {
       row-gap: 0.5rem;
-      padding: var(--container-padding-y) 0;
+      padding: var(--container-padding-y) var(--container-padding-x);
       flex: 1;
       overflow-y: auto;
       overflow-x: hidden;
@@ -61,7 +61,7 @@
       margin-bottom: 0.75rem;
 
       &--excal {
-        margin-top: 2rem;
+        margin-top: 2.5rem;
       }
     }
 

src/components/LibraryMenuItems.tsx

@@ -2,21 +2,17 @@ import React, { useState } from "react";
 import { serializeLibraryAsJSON } from "../data/json";
 import { ExcalidrawElement, NonDeleted } from "../element/types";
 import { t } from "../i18n";
-import {
+import { AppState, ExcalidrawProps, LibraryItem, LibraryItems } from "../types";
-  ExcalidrawProps,
-  LibraryItem,
-  LibraryItems,
-  UIAppState,
-} from "../types";
 import { arrayToMap, chunk } from "../utils";
 import { LibraryUnit } from "./LibraryUnit";
 import Stack from "./Stack";
-import { MIME_TYPES } from "../constants";
-import Spinner from "./Spinner";
-import { duplicateElements } from "../element/newElement";
-import { LibraryMenuControlButtons } from "./LibraryMenuControlButtons";
 
 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";
 
 const CELLS_PER_ROW = 4;
 
@@ -40,7 +36,7 @@ const LibraryMenuItems = ({
   selectedItems: LibraryItem["id"][];
   onSelectItems: (id: LibraryItem["id"][]) => void;
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
-  theme: UIAppState["theme"];
+  theme: AppState["theme"];
   id: string;
 }) => {
   const [lastSelectedItem, setLastSelectedItem] = useState<
@@ -106,7 +102,7 @@ const LibraryMenuItems = ({
         ...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 }),
+        elements: duplicateElements(item.elements),
       };
     });
   };
@@ -205,7 +201,11 @@ const LibraryMenuItems = ({
     (item) => item.status === "published",
   );
 
-  const showBtn = !libraryItems.length && !pendingElements.length;
+  const showBtn =
+    !libraryItems.length &&
+    !unpublishedItems.length &&
+    !publishedItems.length &&
+    !pendingElements.length;
 
   return (
     <div
@@ -215,7 +215,7 @@ const LibraryMenuItems = ({
         unpublishedItems.length ||
         publishedItems.length
           ? { justifyContent: "flex-start" }
-          : { borderBottom: 0 }
+          : {}
       }
     >
       <Stack.Col
@@ -251,7 +251,11 @@ const LibraryMenuItems = ({
           </div>
           {!pendingElements.length && !unpublishedItems.length ? (
             <div className="library-menu-items__no-items">
-              <div className="library-menu-items__no-items__label">
+              <div
+                className={clsx({
+                  "library-menu-items__no-items__label": showBtn,
+                })}
+              >
                 {t("library.noItems")}
               </div>
               <div className="library-menu-items__no-items__hint">
@@ -299,13 +303,10 @@ const LibraryMenuItems = ({
         </>
 
         {showBtn && (
-          <LibraryMenuControlButtons
+          <LibraryMenuBrowseButton
-            style={{ padding: "16px 0", width: "100%" }}
             id={id}
             libraryReturnUrl={libraryReturnUrl}
             theme={theme}
-            selectedItems={selectedItems}
-            onSelectItems={onSelectItems}
           />
         )}
       </Stack.Col>

src/components/MobileMenu.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AppState, Device, ExcalidrawProps, UIAppState } from "../types";
+import { AppState, Device, ExcalidrawProps } from "../types";
 import { ActionManager } from "../actions/manager";
 import { t } from "../i18n";
 import Stack from "./Stack";
@@ -13,15 +13,16 @@ 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: UIAppState;
+  appState: AppState;
   actionManager: ActionManager;
   renderJSONExportDialog: () => React.ReactNode;
   renderImageExportDialog: () => React.ReactNode;
@@ -35,7 +36,7 @@ type MobileMenuProps = {
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
   renderTopRightUI?: (
     isMobile: boolean,
-    appState: UIAppState,
+    appState: AppState,
   ) => JSX.Element | null;
   renderCustomStats?: ExcalidrawProps["renderCustomStats"];
   renderSidebars: () => JSX.Element | null;
@@ -59,15 +60,11 @@ export const MobileMenu = ({
   device,
   renderWelcomeScreen,
 }: MobileMenuProps) => {
-  const {
+  const { welcomeScreenCenterTunnel, mainMenuTunnel } = useTunnels();
-    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">
@@ -91,7 +88,11 @@ export const MobileMenu = ({
                 {renderTopRightUI && renderTopRightUI(true, appState)}
                 <div className="mobile-misc-tools-container">
                   {!appState.viewModeEnabled && (
-                    <DefaultSidebarTriggerTunnel.Out />
+                    <LibraryButton
+                      appState={appState}
+                      setAppState={setAppState}
+                      isMobile
+                    />
                   )}
                   <PenModeButton
                     checked={appState.penMode}
@@ -131,14 +132,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")}
@@ -189,13 +190,13 @@ export const MobileMenu = ({
             {renderAppToolbar()}
             {appState.scrolledOutside &&
               !appState.openMenu &&
-              !appState.openSidebar && (
+              appState.openSidebar !== "library" && (
                 <button
                   className="scroll-back-to-content"
                   onClick={() => {
-                    setAppState((appState) => ({
+                    setAppState({
                       ...calculateScrollCenter(elements, appState, canvas),
-                    }));
+                    });
                   }}
                 >
                   {t("buttons.scrollBackToContent")}

src/components/PasteChartDialog.tsx

@@ -5,10 +5,8 @@ import { ChartElements, renderSpreadsheet, Spreadsheet } from "../charts";
 import { ChartType } from "../element/types";
 import { t } from "../i18n";
 import { exportToSvg } from "../scene/export";
-import { UIAppState } from "../types";
+import { AppState, LibraryItem } from "../types";
-import { useApp } from "./App";
 import { Dialog } from "./Dialog";
-
 import "./PasteChartDialog.scss";
 
 type OnInsertChart = (chartType: ChartType, elements: ChartElements) => void;
@@ -80,12 +78,13 @@ export const PasteChartDialog = ({
   setAppState,
   appState,
   onClose,
+  onInsertChart,
 }: {
-  appState: UIAppState;
+  appState: AppState;
   onClose: () => void;
-  setAppState: React.Component<any, UIAppState>["setState"];
+  setAppState: React.Component<any, AppState>["setState"];
+  onInsertChart: (elements: LibraryItem["elements"]) => void;
 }) => {
-  const { onInsertElements } = useApp();
   const handleClose = React.useCallback(() => {
     if (onClose) {
       onClose();
@@ -93,7 +92,7 @@ export const PasteChartDialog = ({
   }, [onClose]);
 
   const handleChartClick = (chartType: ChartType, elements: ChartElements) => {
-    onInsertElements(elements);
+    onInsertChart(elements);
     trackEvent("magic", "chart", chartType);
     setAppState({
       currentChartType: chartType,

src/components/PublishLibrary.tsx

@@ -3,9 +3,8 @@ import OpenColor from "open-color";
 
 import { Dialog } from "./Dialog";
 import { t } from "../i18n";
-import Trans from "./Trans";
 
-import { LibraryItems, LibraryItem, UIAppState } from "../types";
+import { AppState, LibraryItems, LibraryItem } from "../types";
 import { exportToCanvas, exportToSvg } from "../packages/utils";
 import {
   EXPORT_DATA_TYPES,
@@ -136,7 +135,7 @@ const SingleLibraryItem = ({
   onRemove,
 }: {
   libItem: LibraryItem;
-  appState: UIAppState;
+  appState: AppState;
   index: number;
   onChange: (val: string, index: number) => void;
   onRemove: (id: string) => void;
@@ -232,7 +231,7 @@ const PublishLibrary = ({
 }: {
   onClose: () => void;
   libraryItems: LibraryItems;
-  appState: UIAppState;
+  appState: AppState;
   onSuccess: (data: {
     url: string;
     authorName: string;
@@ -403,32 +402,26 @@ const PublishLibrary = ({
       {shouldRenderForm ? (
         <form onSubmit={onSubmit}>
           <div className="publish-library-note">
-            <Trans
+            {t("publishDialog.noteDescription.pre")}
-              i18nKey="publishDialog.noteDescription"
+            <a
-              link={(el) => (
+              href="https://libraries.excalidraw.com"
-                <a
+              target="_blank"
-                  href="https://libraries.excalidraw.com"
+              rel="noopener noreferrer"
-                  target="_blank"
+            >
-                  rel="noopener noreferrer"
+              {t("publishDialog.noteDescription.link")}
-                >
+            </a>{" "}
-                  {el}
+            {t("publishDialog.noteDescription.post")}
-                </a>
-              )}
-            />
           </div>
           <span className="publish-library-note">
-            <Trans
+            {t("publishDialog.noteGuidelines.pre")}
-              i18nKey="publishDialog.noteGuidelines"
+            <a
-              link={(el) => (
+              href="https://github.com/excalidraw/excalidraw-libraries#guidelines"
-                <a
+              target="_blank"
-                  href="https://github.com/excalidraw/excalidraw-libraries#guidelines"
+              rel="noopener noreferrer"
-                  target="_blank"
+            >
-                  rel="noopener noreferrer"
+              {t("publishDialog.noteGuidelines.link")}
-                >
+            </a>
-                  {el}
+            {t("publishDialog.noteGuidelines.post")}
-                </a>
-              )}
-            />
           </span>
 
           <div className="publish-library-note">
@@ -522,18 +515,15 @@ const PublishLibrary = ({
               />
             </label>
             <span className="publish-library-note">
-              <Trans
+              {t("publishDialog.noteLicense.pre")}
-                i18nKey="publishDialog.noteLicense"
+              <a
-                link={(el) => (
+                href="https://github.com/excalidraw/excalidraw-libraries/blob/main/LICENSE"
-                  <a
+                target="_blank"
-                    href="https://github.com/excalidraw/excalidraw-libraries/blob/main/LICENSE"
+                rel="noopener noreferrer"
-                    target="_blank"
+              >
-                    rel="noopener noreferrer"
+                {t("publishDialog.noteLicense.link")}
-                  >
+              </a>
-                    {el}
+              {t("publishDialog.noteLicense.post")}
-                  </a>
-                )}
-              />
             </span>
           </div>
           <div className="publish-library__buttons">

src/components/Sidebar/Sidebar.scss

@@ -2,26 +2,67 @@
 @import "../../css/variables.module";
 
 .excalidraw {
-  .sidebar {
+  .Sidebar {
-    display: flex;
+    &__close-btn,
-    flex-direction: column;
+    &__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 {
     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;
     }
@@ -36,134 +77,52 @@
       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;
+    }
   }
 
-  // ---------------------------- sidebar header ------------------------------
+  .layer-ui__sidebar__header {
-
-  .sidebar__header {
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    padding-top: 1rem;
+    padding: 1rem;
-    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--sidebar-border-color);
   }
 
-  .sidebar__header__buttons {
+  .layer-ui__sidebar__header__buttons {
-    gap: 0;
     display: flex;
     align-items: center;
-    margin-left: auto;
+    gap: 0.625rem;
-
-    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.75rem;
-
-    [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;
-      }
-    }
-
-    .sidebar__header {
-      border-bottom: 1px solid var(--sidebar-border-color);
-    }
   }
 }

src/components/Sidebar/Sidebar.test.tsx

@@ -1,9 +1,8 @@
 import React from "react";
-import { DEFAULT_SIDEBAR } from "../../constants";
 import { Excalidraw, Sidebar } from "../../packages/excalidraw/index";
 import {
+  act,
   fireEvent,
-  GlobalTestState,
   queryAllByTestId,
   queryByTestId,
   render,
@@ -11,321 +10,346 @@ 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", () => {
-  describe("General behavior", () => {
+  it("should render custom sidebar", async () => {
-    it("should render custom sidebar", async () => {
+    const { container } = await render(
-      const { container } = await render(
+      <Excalidraw
-        <Excalidraw
+        initialData={{ appState: { openSidebar: "customSidebar" } }}
-          initialData={{ appState: { openSidebar: { name: "customSidebar" } } }}
+        renderSidebar={() => (
-        >
+          <Sidebar>
-          <Sidebar name="customSidebar">
             <div id="test-sidebar-content">42</div>
           </Sidebar>
-        </Excalidraw>,
+        )}
-      );
+      />,
+    );
 
-      const node = container.querySelector("#test-sidebar-content");
+    const node = container.querySelector("#test-sidebar-content");
-      expect(node).not.toBe(null);
+    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);
-      });
-    });
   });
 
-  describe("<Sidebar.Header/>", () => {
+  it("should render custom sidebar header", async () => {
-    it("should render custom sidebar header", async () => {
+    const { container } = await render(
-      const { container } = await render(
+      <Excalidraw
-        <Excalidraw
+        initialData={{ appState: { openSidebar: "customSidebar" } }}
-          initialData={{ appState: { openSidebar: { name: "customSidebar" } } }}
+        renderSidebar={() => (
-        >
+          <Sidebar>
-          <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");
+    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");
       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 not render <Sidebar.Header> for custom sidebars by default", async () => {
+      // make sure only one sidebar is rendered
-      const CustomExcalidraw = () => {
+      const sidebars = container.querySelectorAll(".layer-ui__sidebar");
-        return (
+      expect(sidebars.length).toBe(1);
-          <Excalidraw
+    });
-            initialData={{
+  });
-              appState: { openSidebar: { name: "customSidebar" } },
+
-            }}
+  it("should always render custom sidebar with close button & close on click", async () => {
-          >
+    const onClose = jest.fn();
-            <Sidebar name="customSidebar" className="test-sidebar">
+    const CustomExcalidraw = () => {
+      return (
+        <Excalidraw
+          initialData={{ appState: { openSidebar: "customSidebar" } }}
+          renderSidebar={() => (
+            <Sidebar className="test-sidebar" onClose={onClose}>
               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-close");
+      const closeButton = queryByTestId(sidebar!, "sidebar-dock");
-      expect(closeButton).toBe(null);
+      expect(closeButton).not.toBe(null);
     });
 
-    it("<Sidebar.Header> should render close button", async () => {
+    // should not show dock button when the sidebar does not fit to be docked
-      const onStateChange = jest.fn();
+    // -------------------------------------------------------------------------
-      const CustomExcalidraw = () => {
-        return (
-          <Excalidraw
-            initialData={{
-              appState: { openSidebar: { name: "customSidebar" } },
-            }}
-          >
-            <Sidebar
-              name="customSidebar"
-              className="test-sidebar"
-              onStateChange={onStateChange}
-            >
-              <Sidebar.Header />
-            </Sidebar>
-          </Excalidraw>
-        );
-      };
-
-      const { container } = await render(<CustomExcalidraw />);
-
-      // initial open
-      expect(onStateChange).toHaveBeenCalledWith({ name: "customSidebar" });
 
+    await withExcalidrawDimensions({ width: 400, height: 1080 }, () => {
       const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
       expect(sidebar).not.toBe(null);
-      const closeButton = queryByTestId(sidebar!, "sidebar-close")!;
+      const closeButton = queryByTestId(sidebar!, "sidebar-dock");
-      expect(closeButton).not.toBe(null);
+      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={() => (
+            <Sidebar
+              className="test-sidebar"
+              docked={false}
+              dockable={dockable}
+            >
+              hello
+            </Sidebar>
+          )}
+        />
+      );
+    };
+
+    const { container } = await render(<CustomExcalidraw />);
+
+    await withExcalidrawDimensions({ width: 1920, height: 1080 }, async () => {
+      // should not show dock button when `dockable` is `false`
+      // -------------------------------------------------------------------------
+
+      act(() => {
+        _setDockable(false);
+      });
 
-      fireEvent.click(closeButton);
       await waitFor(() => {
-        expect(container.querySelector<HTMLElement>(".test-sidebar")).toBe(
+        const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
-          null,
+        expect(sidebar).not.toBe(null);
-        );
+        const closeButton = queryByTestId(sidebar!, "sidebar-dock");
-        expect(onStateChange).toHaveBeenCalledWith(null);
+        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);
       });
     });
   });
 
-  describe("Docking behavior", () => {
+  it("should support controlled docking", async () => {
-    it("shouldn't be user-dockable if `onDock` not supplied", async () => {
+    let _setDocked: (docked?: boolean) => void = null!;
-      await assertExcalidrawWithSidebar(
-        <Sidebar name="customSidebar">
-          <Sidebar.Header />
-        </Sidebar>,
-        "customSidebar",
-        async () => {
-          await assertSidebarDockButton(false);
-        },
-      );
-    });
 
-    it("shouldn't be user-dockable if `onDock` not supplied & `docked={true}`", async () => {
+    const CustomExcalidraw = () => {
-      await assertExcalidrawWithSidebar(
+      const [docked, setDocked] = React.useState<boolean | undefined>();
-        <Sidebar name="customSidebar" docked={true}>
+      _setDocked = setDocked;
-          <Sidebar.Header />
+      return (
-        </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: { name: "customSidebar" } } }}
+          initialData={{ appState: { openSidebar: "customSidebar" } }}
-        >
+          renderSidebar={() => (
-          <Sidebar
+            <Sidebar className="test-sidebar" docked={docked}>
-            name="customSidebar"
+              hello
-            className="test-sidebar"
+            </Sidebar>
-            onDock={() => {}}
+          )}
-            docked
+        />
-          >
-            <Sidebar.Header />
-          </Sidebar>
-        </Excalidraw>,
       );
+    };
 
-      await withExcalidrawDimensions(
+    const { container } = await render(<CustomExcalidraw />);
-        { width: 1920, height: 1080 },
+
-        async () => {
+    const { h } = window;
-          await assertSidebarDockButton(true);
+
-        },
+    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>
+          </Sidebar>
+        )}
+      />,
+    );
+
+    // sidebar isn't rendered initially
+    // -------------------------------------------------------------------------
+    await waitFor(() => {
+      const node = container.querySelector("#test-sidebar-content");
+      expect(node).toBe(null);
     });
 
-    it("shouldn't be user-dockable when only `onDock` supplied w/o `docked`", async () => {
+    // toggle sidebar on
-      await render(
+    // -------------------------------------------------------------------------
-        <Excalidraw
+    expect(window.h.app.toggleMenu("customSidebar")).toBe(true);
-          initialData={{ appState: { openSidebar: { name: "customSidebar" } } }}
-        >
-          <Sidebar
-            name="customSidebar"
-            className="test-sidebar"
-            onDock={() => {}}
-          >
-            <Sidebar.Header />
-          </Sidebar>
-        </Excalidraw>,
-      );
 
-      await withExcalidrawDimensions(
+    await waitFor(() => {
-        { width: 1920, height: 1080 },
+      const node = container.querySelector("#test-sidebar-content");
-        async () => {
+      expect(node).not.toBe(null);
-          await assertSidebarDockButton(false);
+    });
-        },
+
-      );
+    // 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);
     });
   });
 });

src/components/Sidebar/Sidebar.tsx

@@ -1,246 +1,151 @@
-import React, {
+import {
   useEffect,
   useLayoutEffect,
   useRef,
   useState,
   forwardRef,
-  useImperativeHandle,
-  useCallback,
-  RefObject,
 } from "react";
 import { Island } from ".././Island";
-import { atom, useSetAtom } from "jotai";
+import { atom, useAtom } from "jotai";
 import { jotaiScope } from "../../jotai";
 import {
   SidebarPropsContext,
   SidebarProps,
   SidebarPropsContextValue,
 } from "./common";
-import { SidebarHeader } from "./SidebarHeader";
+
-import clsx from "clsx";
+import { SidebarHeaderComponents } from "./SidebarHeader";
-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 "./Sidebar.scss";
-import { useUIAppState } from "../../context/ui-appState";
+import clsx from "clsx";
+import { useExcalidrawSetAppState } from "../App";
+import { updateObject } from "../../utils";
 
-// FIXME replace this with the implem from ColorPicker once it's merged
+/** using a counter instead of boolean to handle race conditions where
-const useOnClickOutside = (
+ * the host app may render (mount/unmount) multiple different sidebar */
-  ref: RefObject<HTMLElement>,
+export const hostSidebarCountersAtom = atom({ rendered: 0, docked: 0 });
-  cb: (event: MouseEvent) => void,
-) => {
-  useEffect(() => {
-    const listener = (event: MouseEvent) => {
-      if (!ref.current) {
-        return;
-      }
-
-      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]);
-};
-
-/**
- * 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 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 setIsSidebarDockedAtom = useSetAtom(isSidebarDockedAtom, jotaiScope);
-
-    useLayoutEffect(() => {
-      setIsSidebarDockedAtom(!!docked);
-      return () => {
-        setIsSidebarDockedAtom(false);
-      };
-    }, [setIsSidebarDockedAtom, docked]);
-
-    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]);
-
-    useOnClickOutside(
-      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>) => {
+  forwardRef(
-    const appState = useUIAppState();
+    (
+      {
+        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,
+      );
 
-    const { onStateChange } = props;
+      const setAppState = useExcalidrawSetAppState();
 
-    const refPrevOpenSidebar = useRef(appState.openSidebar);
+      const [isDockedFallback, setIsDockedFallback] = useState(
-    useEffect(() => {
+        docked ?? initialDockedState ?? false,
-      if (
+      );
-        // closing sidebar
+
-        ((!appState.openSidebar &&
+      useLayoutEffect(() => {
-          refPrevOpenSidebar?.current?.name === props.name) ||
+        if (docked === undefined) {
-          // opening current sidebar
+          // ugly hack to get initial state out of AppState without subscribing
-          (appState.openSidebar?.name === props.name &&
+          // to it as a whole (once we have granular subscriptions, we'll move
-            refPrevOpenSidebar?.current?.name !== props.name) ||
+          // to that)
-          // switching tabs or switching to a different sidebar
+          //
-          refPrevOpenSidebar.current?.name === props.name) &&
+          // NOTE this means that is updated `state.isSidebarDocked` changes outside
-        appState.openSidebar !== refPrevOpenSidebar.current
+          // of this compoent, it won't be reflected here. Currently doesn't happen.
-      ) {
+          setAppState((state) => {
-        onStateChange?.(
+            setIsDockedFallback(state.isSidebarDocked);
-          appState.openSidebar?.name !== props.name
+            // bail from update
-            ? null
+            return null;
-            : appState.openSidebar,
+          });
-        );
+        }
+      }, [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 });
+      };
+      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,
+      });
+
+      if (hostSidebarCounters.rendered > 0 && __isInternal) {
+        return null;
       }
-      refPrevOpenSidebar.current = appState.openSidebar;
-    }, [appState.openSidebar, onStateChange, props.name]);
 
-    const [mounted, setMounted] = useState(false);
+      return (
-    useLayoutEffect(() => {
+        <Island
-      setMounted(true);
+          className={clsx(
-      return () => setMounted(false);
+            "layer-ui__sidebar",
-    }, []);
+            { "layer-ui__sidebar--docked": isDockedFallback },
-
+            className,
-    // 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
+          ref={ref}
-    // previous sidebar is mounted after the next one). This is necessary to
+        >
-    // prevent flicker of subcomponents that support fallbacks
+          <SidebarPropsContext.Provider value={headerPropsRef.current}>
-    // (e.g. SidebarHeader). This is because we're using flags to determine
+            <SidebarHeaderComponents.Context>
-    // whether prefer the fallback component or not (otherwise both will render
+              <SidebarHeaderComponents.Component __isFallback />
-    // initially), and the flag won't be reset in time if the unmount order
+              {children}
-    // it not correct.
+            </SidebarHeaderComponents.Context>
-    //
+          </SidebarPropsContext.Provider>
-    // Alternative, and more general solution would be to namespace the fallback
+        </Island>
-    // 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,
+    Header: SidebarHeaderComponents.Component,
-    TabTriggers: SidebarTabTriggers,
-    TabTrigger: SidebarTabTrigger,
-    Tabs: SidebarTabs,
-    Tab: SidebarTab,
-    Trigger: SidebarTrigger,
   },
 );
-Sidebar.displayName = "Sidebar";

src/components/Sidebar/SidebarHeader.tsx

@@ -4,54 +4,86 @@ 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 SidebarHeader = ({
+export const SidebarDockButton = (props: {
-  children,
+  checked: boolean;
-  className,
+  onChange?(): void;
-}: {
-  children?: React.ReactNode;
-  className?: string;
 }) => {
-  const device = useDevice();
-  const props = useContext(SidebarPropsContext);
-
-  const renderDockButton = !!(
-    device.canDeviceFitSidebar && props.shouldRenderDockButton
-  );
-
   return (
-    <div
+    <div className="layer-ui__sidebar-dock-button" data-testid="sidebar-dock">
-      className={clsx("sidebar__header", className)}
+      <Tooltip label={t("labels.sidebarLock")}>
-      data-testid="sidebar-header"
+        <label
-    >
+          className={clsx(
-      {children}
+            "ToolIcon ToolIcon__lock ToolIcon_type_floating",
-      <div className="sidebar__header__buttons">
+            `ToolIcon_size_medium`,
-        {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")}
-            >
-              {PinIcon}
-            </Button>
-          </Tooltip>
-        )}
-        <Button
-          data-testid="sidebar-close"
-          className="sidebar__close"
-          onSelect={props.onCloseRequest}
-          aria-label={t("buttons.close")}
         >
-          {CloseIcon}
+          <input
-        </Button>
+            className="ToolIcon_type_checkbox"
-      </div>
+            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>
   );
 };
 
-SidebarHeader.displayName = "SidebarHeader";
+const _SidebarHeader: React.FC<{
+  children?: React.ReactNode;
+  className?: string;
+}> = ({ children, className }) => {
+  const device = useDevice();
+  const props = useContext(SidebarPropsContext);
+
+  const renderDockButton = !!(device.canDeviceFitSidebar && props.dockable);
+  const renderCloseButton = !!props.onClose;
+
+  return (
+    <div
+      className={clsx("layer-ui__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")}
+            >
+              {CloseIcon}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const [Context, Component] = withUpstreamOverride(_SidebarHeader);
+
+/** @private */
+export const SidebarHeaderComponents = { Context, Component };

src/components/Sidebar/SidebarTab.tsx

@@ -1,18 +0,0 @@
-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";

src/components/Sidebar/SidebarTabTrigger.tsx

@@ -1,26 +0,0 @@
-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";

src/components/Sidebar/SidebarTabTriggers.tsx

@@ -1,16 +0,0 @@
-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";

src/components/Sidebar/SidebarTabs.tsx

@@ -1,36 +0,0 @@
-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";

src/components/Sidebar/SidebarTrigger.scss

@@ -1,34 +0,0 @@
-@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;
-    }
-  }
-}

src/components/Sidebar/SidebarTrigger.tsx

@@ -1,45 +0,0 @@
-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";

src/components/Sidebar/common.ts

@@ -1,41 +1,23 @@
 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 open/close or tab change.
+   * Called on sidebar close (either by user action or by the editor).
-   */
-  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,
-  "onDock" | "docked"
+  "onClose" | "onDock" | "docked" | "dockable"
-> & { onCloseRequest: () => void; shouldRenderDockButton: boolean };
+>;
 
 export const SidebarPropsContext =
-  React.createContext<SidebarPropsContextValue>({} as SidebarPropsContextValue);
+  React.createContext<SidebarPropsContextValue>({});

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 { ExcalidrawProps, UIAppState } from "../types";
+import { AppState, ExcalidrawProps } from "../types";
 import { CloseIcon } from "./icons";
 import { Island } from "./Island";
 import "./Stats.scss";
 
 export const Stats = (props: {
-  appState: UIAppState;
+  appState: AppState;
-  setAppState: React.Component<any, UIAppState>["setState"];
+  setAppState: React.Component<any, AppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
   onClose: () => void;
   renderCustomStats: ExcalidrawProps["renderCustomStats"];

src/components/Tooltip.scss

@@ -2,9 +2,6 @@
 
 // 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;
 

src/components/TopErrorBoundary.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import * as Sentry from "@sentry/browser";
 import { t } from "../i18n";
-import Trans from "./Trans";
 
 interface TopErrorBoundaryState {
   hasError: boolean;
@@ -75,31 +74,25 @@ export class TopErrorBoundary extends React.Component<
       <div className="ErrorSplash excalidraw">
         <div className="ErrorSplash-messageContainer">
           <div className="ErrorSplash-paragraph bigger align-center">
-            <Trans
+            {t("errorSplash.headingMain_pre")}
-              i18nKey="errorSplash.headingMain"
+            <button onClick={() => window.location.reload()}>
-              button={(el) => (
+              {t("errorSplash.headingMain_button")}
-                <button onClick={() => window.location.reload()}>{el}</button>
+            </button>
-              )}
-            />
           </div>
           <div className="ErrorSplash-paragraph align-center">
-            <Trans
+            {t("errorSplash.clearCanvasMessage")}
-              i18nKey="errorSplash.clearCanvasMessage"
+            <button
-              button={(el) => (
+              onClick={() => {
-                <button
+                try {
-                  onClick={() => {
+                  localStorage.clear();
-                    try {
+                  window.location.reload();
-                      localStorage.clear();
+                } catch (error: any) {
-                      window.location.reload();
+                  console.error(error);
-                    } catch (error: any) {
+                }
-                      console.error(error);
+              }}
-                    }
+            >
-                  }}
+              {t("errorSplash.clearCanvasMessage_button")}
-                >
+            </button>
-                  {el}
-                </button>
-              )}
-            />
             <br />
             <div className="smaller">
               <span role="img" aria-label="warning">
@@ -113,17 +106,16 @@ export class TopErrorBoundary extends React.Component<
           </div>
           <div>
             <div className="ErrorSplash-paragraph">
-              {t("errorSplash.trackedToSentry", {
+              {t("errorSplash.trackedToSentry_pre")}
-                eventId: this.state.sentryEventId,
+              {this.state.sentryEventId}
-              })}
+              {t("errorSplash.trackedToSentry_post")}
             </div>
             <div className="ErrorSplash-paragraph">
-              <Trans
+              {t("errorSplash.openIssueMessage_pre")}
-                i18nKey="errorSplash.openIssueMessage"
+              <button onClick={() => this.createGithubIssue()}>
-                button={(el) => (
+                {t("errorSplash.openIssueMessage_button")}
-                  <button onClick={() => this.createGithubIssue()}>{el}</button>
+              </button>
-                )}
+              {t("errorSplash.openIssueMessage_post")}
-              />
             </div>
             <div className="ErrorSplash-paragraph">
               <div className="ErrorSplash-details">

src/components/Trans.test.tsx

@@ -1,67 +0,0 @@
-import { render } from "@testing-library/react";
-
-import fallbackLangData from "../locales/en.json";
-
-import Trans from "./Trans";
-
-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" audience="world" />
-        </div>
-        <div data-testid="test2">
-          <Trans
-            i18nKey="transTest.key2"
-            link={(el) => <a href="https://example.com">{el}</a>}
-          />
-        </div>
-        <div data-testid="test3">
-          <Trans
-            i18nKey="transTest.key3"
-            link={(el) => <a href="https://example.com">{el}</a>}
-            location="the button"
-          />
-        </div>
-        <div data-testid="test4">
-          <Trans
-            i18nKey="transTest.key4"
-            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"
-            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.`,
-    );
-  });
-});

src/components/Trans.tsx

@@ -1,169 +0,0 @@
-import React from "react";
-
-import { 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: string;
-  [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;

src/components/__snapshots__/App.test.tsx.snap

@@ -5,46 +5,59 @@ 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.
+     
-  </p>
+    setting enabled
-  <p>
+    .
-    This could result in breaking the 
+    <br />
+    <br />
+    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>
 `;

src/components/context/tunnels.ts

@@ -0,0 +1,32 @@
+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(),
+    };
+  }, []);
+};

src/components/dropdownMenu/DropdownMenuContent.tsx

@@ -1,4 +1,4 @@
-import { useOutsideClick } from "../../hooks/useOutsideClick";
+import { useOutsideClickHook } from "../../hooks/useOutsideClick";
 import { Island } from "../Island";
 
 import { useDevice } from "../App";
@@ -24,7 +24,7 @@ const MenuContent = ({
   style?: React.CSSProperties;
 }) => {
   const device = useDevice();
-  const menuRef = useOutsideClick(() => {
+  const menuRef = useOutsideClickHook(() => {
     onClickOutside?.();
   });
 

src/components/dropdownMenu/DropdownMenuTrigger.tsx

@@ -1,6 +1,5 @@
 import clsx from "clsx";
-import { useUIAppState } from "../../context/ui-appState";
+import { useDevice, useExcalidrawAppState } from "../App";
-import { useDevice } from "../App";
 
 const MenuTrigger = ({
   className = "",
@@ -11,7 +10,7 @@ const MenuTrigger = ({
   children: React.ReactNode;
   onToggle: () => void;
 }) => {
-  const appState = useUIAppState();
+  const appState = useExcalidrawAppState();
   const device = useDevice();
   const classNames = clsx(
     `dropdown-menu-button ${className}`,

src/components/footer/Footer.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { actionShortcuts } from "../../actions";
 import { ActionManager } from "../../actions/manager";
+import { AppState } from "../../types";
 import {
   ExitZenModeAction,
   FinalizeAction,
@@ -8,11 +9,10 @@ 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: UIAppState;
+  appState: AppState;
   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)}
           />

src/components/footer/FooterCenter.tsx

@@ -1,13 +1,13 @@
 import clsx from "clsx";
-import { useTunnels } from "../../context/tunnels";
+import { useExcalidrawAppState } from "../App";
+import { useTunnels } from "../context/tunnels";
 import "./FooterCenter.scss";
-import { useUIAppState } from "../../context/ui-appState";
 
 const FooterCenter = ({ children }: { children?: React.ReactNode }) => {
-  const { FooterCenterTunnel } = useTunnels();
+  const { footerCenterTunnel } = useTunnels();
-  const appState = useUIAppState();
+  const appState = useExcalidrawAppState();
   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>
   );
 };
 

src/components/hoc/withInternalFallback.tsx

@@ -1,46 +1,32 @@
 import { atom, useAtom } from "jotai";
 import React, { useLayoutEffect } from "react";
-import { useTunnels } from "../../context/tunnels";
+import { useTunnels } from "../context/tunnels";
 
 export const withInternalFallback = <P,>(
   componentName: string,
   Component: React.FC<P>,
 ) => {
-  const renderAtom = atom(0);
+  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;
 
-  let counter = 0;
-
   const WrapperComponent: React.FC<
     P & {
       __fallback?: boolean;
     }
   > = (props) => {
     const { jotaiScope } = useTunnels();
-    const [, setRender] = useAtom(renderAtom, jotaiScope);
+    const [counter, setCounter] = useAtom(counterAtom, jotaiScope);
 
     useLayoutEffect(() => {
-      setRender((c) => {
+      setCounter((counter) => counter + 1);
-        const next = c + 1;
-        counter = next;
-
-        return next;
-      });
       return () => {
-        setRender((c) => {
+        setCounter((counter) => counter - 1);
-          const next = c - 1;
-          counter = next;
-          if (!next) {
-            preferHost = false;
-          }
-          return next;
-        });
       };
-    }, [setRender]);
+    }, [setCounter]);
 
     if (!props.__fallback) {
       preferHost = true;

src/components/hoc/withUpstreamOverride.tsx

@@ -0,0 +1,63 @@
+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;
+};

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 = useUIAppState();
+  const appState = useExcalidrawAppState();
 
   return (
     <Button

src/components/main-menu/DefaultItems.tsx

@@ -1,6 +1,10 @@
 import { getShortcutFromShortcutName } from "../../actions/shortcuts";
 import { useI18n } from "../../i18n";
-import { useExcalidrawSetAppState, useExcalidrawActionManager } from "../App";
+import {
+  useExcalidrawAppState,
+  useExcalidrawSetAppState,
+  useExcalidrawActionManager,
+} from "../App";
 import {
   ExportIcon,
   ExportImageIcon,
@@ -28,7 +32,6 @@ import clsx from "clsx";
 import { useSetAtom } from "jotai";
 import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
 import { jotaiScope } from "../../jotai";
-import { useUIAppState } from "../../context/ui-appState";
 
 export const LoadScene = () => {
   const { t } = useI18n();
@@ -136,7 +139,7 @@ ClearCanvas.displayName = "ClearCanvas";
 
 export const ToggleTheme = () => {
   const { t } = useI18n();
-  const appState = useUIAppState();
+  const appState = useExcalidrawAppState();
   const actionManager = useExcalidrawActionManager();
 
   if (!actionManager.isActionEnabled(actionToggleTheme)) {
@@ -169,7 +172,7 @@ ToggleTheme.displayName = "ToggleTheme";
 
 export const ChangeCanvasBackground = () => {
   const { t } = useI18n();
-  const appState = useUIAppState();
+  const appState = useExcalidrawAppState();
   const actionManager = useExcalidrawActionManager();
 
   if (appState.viewModeEnabled) {

src/components/main-menu/MainMenu.tsx

@@ -1,5 +1,9 @@
 import React from "react";
-import { useDevice, useExcalidrawSetAppState } from "../App";
+import {
+  useDevice,
+  useExcalidrawAppState,
+  useExcalidrawSetAppState,
+} from "../App";
 import DropdownMenu from "../dropdownMenu/DropdownMenu";
 
 import * as DefaultItems from "./DefaultItems";
@@ -9,8 +13,7 @@ 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";
 
 const MainMenu = Object.assign(
   withInternalFallback(
@@ -25,16 +28,16 @@ const MainMenu = Object.assign(
        */
       onSelect?: (event: Event) => void;
     }) => {
-      const { MainMenuTunnel } = useTunnels();
+      const { mainMenuTunnel } = useTunnels();
       const device = useDevice();
-      const appState = useUIAppState();
+      const appState = useExcalidrawAppState();
       const setAppState = useExcalidrawSetAppState();
       const onClickOutside = device.isMobile
         ? undefined
         : () => setAppState({ openMenu: null });
 
       return (
-        <MainMenuTunnel.In>
+        <mainMenuTunnel.In>
           <DropdownMenu open={appState.openMenu === "canvas"}>
             <DropdownMenu.Trigger
               onToggle={() => {
@@ -63,7 +66,7 @@ const MainMenu = Object.assign(
               )}
             </DropdownMenu.Content>
           </DropdownMenu>
-        </MainMenuTunnel.In>
+        </mainMenuTunnel.In>
       );
     },
   ),

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

@@ -1,10 +1,13 @@
 import { actionLoadScene, actionShortcuts } from "../../actions";
 import { getShortcutFromShortcutName } from "../../actions/shortcuts";
 import { t, useI18n } from "../../i18n";
-import { useDevice, useExcalidrawActionManager } from "../App";
+import {
-import { useTunnels } from "../../context/tunnels";
+  useDevice,
+  useExcalidrawActionManager,
+  useExcalidrawAppState,
+} from "../App";
+import { useTunnels } from "../context/tunnels";
 import { ExcalLogo, HelpIcon, LoadIcon, usersIcon } from "../icons";
-import { useUIAppState } from "../../context/ui-appState";
 
 const WelcomeScreenMenuItemContent = ({
   icon,
@@ -86,9 +89,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 || (
           <>
@@ -101,7 +104,7 @@ const Center = ({ children }: { children?: React.ReactNode }) => {
           </>
         )}
       </div>
-    </WelcomeScreenCenterTunnel.In>
+    </welcomeScreenCenterTunnel.In>
   );
 };
 Center.displayName = "Center";
@@ -145,7 +148,7 @@ const MenuItemHelp = () => {
 MenuItemHelp.displayName = "MenuItemHelp";
 
 const MenuItemLoadScene = () => {
-  const appState = useUIAppState();
+  const appState = useExcalidrawAppState();
   const actionManager = useExcalidrawActionManager();
 
   if (appState.viewModeEnabled) {

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

src/constants.ts

@@ -105,30 +105,20 @@ export const CANVAS_ONLY_ACTIONS = ["selectAll"];
 
 export const GRID_SIZE = 20; // TODO make it configurable?
 
-export const IMAGE_MIME_TYPES = {
+export const MIME_TYPES = {
+  excalidraw: "application/vnd.excalidraw+json",
+  excalidrawlib: "application/vnd.excalidrawlib+json",
+  json: "application/json",
   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_DATA_TYPES = {
@@ -199,6 +189,16 @@ 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";
@@ -275,10 +275,3 @@ export const DEFAULT_ELEMENT_PROPS: {
   opacity: 100,
   locked: false,
 };
-
-export const LIBRARY_SIDEBAR_TAB = "library";
-
-export const DEFAULT_SIDEBAR = {
-  name: "default",
-  defaultTab: LIBRARY_SIDEBAR_TAB,
-} as const;

src/context/tunnels.ts

@@ -1,36 +0,0 @@
-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;
-  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(),
-      jotaiScope: Symbol(),
-    };
-  }, []);
-};

src/context/ui-appState.ts

@@ -1,5 +0,0 @@
-import React from "react";
-import { UIAppState } from "../types";
-
-export const UIAppStateContext = React.createContext<UIAppState>(null!);
-export const useUIAppState = () => React.useContext(UIAppStateContext);

src/css/styles.scss

@@ -354,7 +354,6 @@
     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);
@@ -414,7 +413,6 @@
     bottom: 30px;
     transform: translateX(-50%);
     pointer-events: all;
-    font-family: inherit;
 
     &:hover {
       background-color: var(--button-hover-bg);
@@ -567,7 +565,7 @@
       border-radius: 0;
     }
 
-    .default-sidebar-trigger {
+    .library-button {
       border: 0;
     }
   }

src/css/theme.scss

@@ -78,13 +78,10 @@
 
   --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;
@@ -164,13 +161,10 @@
     // 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);
 

src/css/variables.module.scss

@@ -72,14 +72,7 @@
 
   &:hover {
     background-color: var(--button-hover-bg, var(--island-bg-color));
-    border-color: var(
+    border-color: var(--button-hover-border, var(--default-border-color));
-      --button-hover-border,
-      var(--button-border, var(--default-border-color))
-    );
-    color: var(
-      --button-hover-color,
-      var(--button-color, var(--text-primary-color, inherit))
-    );
   }
 
   &:active {
@@ -88,14 +81,11 @@
   }
 
   &.active {
-    background-color: var(--button-selected-bg, var(--color-primary-light));
+    background-color: var(--color-primary-light);
-    border-color: var(--button-selected-border, var(--color-primary-light));
+    border-color: var(--color-primary-light);
 
     &:hover {
-      background-color: var(
+      background-color: var(--color-primary-light);
-        --button-selected-hover-bg,
-        var(--color-primary-light)
-      );
     }
 
     svg {

src/data/blob.ts

@@ -1,6 +1,6 @@
 import { nanoid } from "nanoid";
 import { cleanAppStateForExport } from "../appState";
-import { IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
+import { ALLOWED_IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
 import { clearElementsForExport } from "../element";
 import { ExcalidrawElement, FileId } from "../element/types";
 import { CanvasError } from "../errors";
@@ -117,9 +117,11 @@ export const isImageFileHandle = (handle: FileSystemHandle | null) => {
 
 export const isSupportedImageFile = (
   blob: Blob | null | undefined,
-): blob is Blob & { type: ValueOf<typeof IMAGE_MIME_TYPES> } => {
+): blob is Blob & { type: typeof ALLOWED_IMAGE_MIME_TYPES[number] } => {
   const { type } = blob || {};
-  return !!type && (Object.values(IMAGE_MIME_TYPES) as string[]).includes(type);
+  return (
+    !!type && (ALLOWED_IMAGE_MIME_TYPES as readonly string[]).includes(type)
+  );
 };
 
 export const loadSceneOrLibraryFromBlob = async (
@@ -155,7 +157,7 @@ export const loadSceneOrLibraryFromBlob = async (
           },
           localAppState,
           localElements,
-          { repairBindings: true, refreshDimensions: false },
+          { repairBindings: true, refreshDimensions: true },
         ),
       };
     } else if (isValidLibrary(data)) {

src/data/filesystem.ts

@@ -8,7 +8,16 @@ import { EVENT, MIME_TYPES } from "../constants";
 import { AbortError } from "../errors";
 import { debounce } from "../utils";
 
-type FILE_EXTENSION = Exclude<keyof typeof MIME_TYPES, "binary">;
+type FILE_EXTENSION =
+  | "gif"
+  | "jpg"
+  | "png"
+  | "excalidraw.png"
+  | "svg"
+  | "excalidraw.svg"
+  | "json"
+  | "excalidraw"
+  | "excalidrawlib";
 
 const INPUT_CHANGE_INTERVAL_MS = 500;
 

src/data/library.ts

@@ -14,14 +14,7 @@ import { getCommonBoundingBox } from "../element/bounds";
 import { AbortError } from "../errors";
 import { t } from "../i18n";
 import { useEffect, useRef } from "react";
-import {
+import { URL_HASH_KEYS, URL_QUERY_KEYS, APP_NAME, EVENT } from "../constants";
-  URL_HASH_KEYS,
-  URL_QUERY_KEYS,
-  APP_NAME,
-  EVENT,
-  DEFAULT_SIDEBAR,
-  LIBRARY_SIDEBAR_TAB,
-} from "../constants";
 
 export const libraryItemsAtom = atom<{
   status: "loading" | "loaded";
@@ -155,9 +148,7 @@ class Library {
     defaultStatus?: "unpublished" | "published";
   }): Promise<LibraryItems> => {
     if (openLibraryMenu) {
-      this.app.setState({
+      this.app.setState({ openSidebar: "library" });
-        openSidebar: { name: DEFAULT_SIDEBAR.name, tab: LIBRARY_SIDEBAR_TAB },
-      });
     }
 
     return this.setLibrary(() => {
@@ -183,13 +174,6 @@ 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 {
@@ -202,6 +186,8 @@ class Library {
           reject(error);
         }
       });
+    }).finally(() => {
+      this.app.focusContainer();
     });
   };
 

src/data/restore.ts

@@ -27,7 +27,6 @@ import {
   PRECEDING_ELEMENT_KEY,
   FONT_FAMILY,
   ROUNDNESS,
-  DEFAULT_SIDEBAR,
 } from "../constants";
 import { getDefaultAppState } from "../appState";
 import { LinearElementEditor } from "../element/linearElementEditor";
@@ -41,6 +40,7 @@ import {
   getDefaultLineHeight,
   measureBaseline,
 } from "../element/textElement";
+import { normalizeLink } from "./url";
 
 type RestoredAppState = Omit<
   AppState,
@@ -140,7 +140,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,
   };
 
@@ -432,15 +432,21 @@ const LegacyAppStateMigrations: {
     defaultAppState: ReturnType<typeof getDefaultAppState>,
   ) => [LegacyAppState[K][1], AppState[LegacyAppState[K][1]]];
 } = {
-  isSidebarDocked: (appState, defaultAppState) => {
+  isLibraryOpen: (appState, defaultAppState) => {
     return [
-      "defaultSidebarDockedPreference",
+      "openSidebar",
-      appState.isSidebarDocked ??
+      "isLibraryOpen" in appState
-        coalesceAppStateValue(
+        ? appState.isLibraryOpen
-          "defaultSidebarDockedPreference",
+          ? "library"
-          appState,
+          : null
-          defaultAppState,
+        : coalesceAppStateValue("openSidebar", appState, defaultAppState),
-        ),
+    ];
+  },
+  isLibraryMenuDocked: (appState, defaultAppState) => {
+    return [
+      "isSidebarDocked",
+      appState.isLibraryMenuDocked ??
+        coalesceAppStateValue("isSidebarDocked", appState, defaultAppState),
     ];
   },
 };
@@ -512,10 +518,13 @@ 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:
-      // string (legacy)
+      nextAppState.openSidebar === "library"
-      typeof (appState.openSidebar as any as string) === "string"
+        ? nextAppState.isSidebarDocked
-        ? { name: DEFAULT_SIDEBAR.name }
+          ? "library"
+          : null
         : nextAppState.openSidebar,
   };
 };

src/data/types.ts

@@ -25,8 +25,10 @@ export interface ExportedDataState {
  * Don't consume on its own.
  */
 export type LegacyAppState = {
-  /** @deprecated #6213 TODO remove 23-06-01 */
+  /** @deprecated #5663 TODO remove 22-12-15 */
-  isSidebarDocked: [boolean, "defaultSidebarDockedPreference"];
+  isLibraryOpen: [boolean, "openSidebar"];
+  /** @deprecated #5663 TODO remove 22-12-15 */
+  isLibraryMenuDocked: [boolean, "isSidebarDocked"];
 };
 
 export interface ImportedDataState {

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>");
+  });
+});

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("/"));
+};

src/element/Hyperlink.tsx

@@ -1,4 +1,4 @@
-import { AppState, ExcalidrawProps, Point, UIAppState } from "../types";
+import { AppState, ExcalidrawProps, Point } 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,11 +289,10 @@ export const getContextMenuLabel = (
     : "labels.link.create";
   return label;
 };
-
 export const getLinkHandleFromCoords = (
   [x1, y1, x2, y2]: Bounds,
   angle: number,
-  appState: UIAppState,
+  appState: AppState,
 ): [x: number, y: number, width: number, height: number] => {
   const size = DEFAULT_LINK_SIZE;
   const linkWidth = size / appState.zoom.value;

src/element/newElement.ts

@@ -20,7 +20,7 @@ import {
   isTestEnv,
 } from "../utils";
 import { randomInteger, randomId } from "../random";
-import { bumpVersion, mutateElement, newElementWith } from "./mutateElement";
+import { mutateElement, newElementWith } from "./mutateElement";
 import { getNewGroupIdsForDuplication } from "../groups";
 import { AppState } from "../types";
 import { getElementAbsoluteCoords } from ".";
@@ -33,7 +33,7 @@ import {
   measureText,
   normalizeText,
   wrapText,
-  getBoundTextMaxWidth,
+  getMaxContainerWidth,
   getDefaultLineHeight,
 } from "./textElement";
 import {
@@ -310,7 +310,7 @@ export const refreshTextDimensions = (
     text = wrapText(
       text,
       getFontString(textElement),
-      getBoundTextMaxWidth(container),
+      getMaxContainerWidth(container),
     );
   }
   const dimensions = getAdjustedDimensions(textElement, text);
@@ -539,16 +539,8 @@ 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 = (
+export const duplicateElements = (elements: readonly ExcalidrawElement[]) => {
-  elements: readonly ExcalidrawElement[],
-  opts?: {
-    /** NOTE also updates version flags and `updated` */
-    randomizeSeed: boolean;
-  },
-) => {
   const clonedElements: ExcalidrawElement[] = [];
 
   const origElementsMap = arrayToMap(elements);
@@ -582,11 +574,6 @@ export const duplicateElements = (
 
     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)) {

src/element/resizeElements.ts

@@ -44,10 +44,10 @@ import {
   getBoundTextElementId,
   getContainerElement,
   handleBindTextResize,
-  getBoundTextMaxWidth,
+  getMaxContainerWidth,
   getApproxMinLineHeight,
   measureText,
-  getBoundTextMaxHeight,
+  getMaxContainerHeight,
 } from "./textElement";
 
 export const normalizeAngle = (angle: number): number => {
@@ -204,7 +204,7 @@ const measureFontSizeFromWidth = (
   if (hasContainer) {
     const container = getContainerElement(element);
     if (container) {
-      width = getBoundTextMaxWidth(container);
+      width = getMaxContainerWidth(container);
     }
   }
   const nextFontSize = element.fontSize * (nextWidth / width);
@@ -435,8 +435,8 @@ export const resizeSingleElement = (
 
       const nextFont = measureFontSizeFromWidth(
         boundTextElement,
-        getBoundTextMaxWidth(updatedElement),
+        getMaxContainerWidth(updatedElement),
-        getBoundTextMaxHeight(updatedElement, boundTextElement),
+        getMaxContainerHeight(updatedElement),
       );
       if (nextFont === null) {
         return;
@@ -718,10 +718,10 @@ const resizeMultipleElements = (
       const metrics = measureFontSizeFromWidth(
         boundTextElement ?? (element.orig as ExcalidrawTextElement),
         boundTextElement
-          ? getBoundTextMaxWidth(updatedElement)
+          ? getMaxContainerWidth(updatedElement)
           : updatedElement.width,
         boundTextElement
-          ? getBoundTextMaxHeight(updatedElement, boundTextElement)
+          ? getMaxContainerHeight(updatedElement)
           : updatedElement.height,
       );
 

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: UIAppState,
+  appState: AppState,
   elements: readonly NonDeletedExcalidrawElement[],
 ) =>
   Boolean(

src/element/textElement.test.ts

@@ -3,15 +3,15 @@ import { API } from "../tests/helpers/api";
 import {
   computeContainerDimensionForBoundText,
   getContainerCoords,
-  getBoundTextMaxWidth,
+  getMaxContainerWidth,
-  getBoundTextMaxHeight,
+  getMaxContainerHeight,
   wrapText,
   detectLineHeight,
   getLineHeightInPx,
   getDefaultLineHeight,
   parseTokens,
 } from "./textElement";
-import { ExcalidrawTextElementWithContainer, FontString } from "./types";
+import { FontString } from "./types";
 
 describe("Test wrapText", () => {
   const font = "20px Cascadia, width: Segoe UI Emoji" as FontString;
@@ -311,7 +311,7 @@ describe("Test measureText", () => {
     });
   });
 
-  describe("Test getBoundTextMaxWidth", () => {
+  describe("Test getMaxContainerWidth", () => {
     const params = {
       width: 178,
       height: 194,
@@ -319,76 +319,39 @@ describe("Test measureText", () => {
 
     it("should return max width when container is rectangle", () => {
       const container = API.createElement({ type: "rectangle", ...params });
-      expect(getBoundTextMaxWidth(container)).toBe(168);
+      expect(getMaxContainerWidth(container)).toBe(168);
     });
 
     it("should return max width when container is ellipse", () => {
       const container = API.createElement({ type: "ellipse", ...params });
-      expect(getBoundTextMaxWidth(container)).toBe(116);
+      expect(getMaxContainerWidth(container)).toBe(116);
     });
 
     it("should return max width when container is diamond", () => {
       const container = API.createElement({ type: "diamond", ...params });
-      expect(getBoundTextMaxWidth(container)).toBe(79);
+      expect(getMaxContainerWidth(container)).toBe(79);
     });
   });
 
-  describe("Test getBoundTextMaxHeight", () => {
+  describe("Test getMaxContainerHeight", () => {
     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(getBoundTextMaxHeight(container, boundTextElement)).toBe(184);
+      expect(getMaxContainerHeight(container)).toBe(184);
     });
 
     it("should return max height when container is ellipse", () => {
       const container = API.createElement({ type: "ellipse", ...params });
-      expect(getBoundTextMaxHeight(container, boundTextElement)).toBe(127);
+      expect(getMaxContainerHeight(container)).toBe(127);
     });
 
     it("should return max height when container is diamond", () => {
       const container = API.createElement({ type: "diamond", ...params });
-      expect(getBoundTextMaxHeight(container, boundTextElement)).toBe(87);
+      expect(getMaxContainerHeight(container)).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,
-      );
     });
   });
 });

src/element/textElement.ts

@@ -65,7 +65,7 @@ export const redrawTextBoundingBox = (
   boundTextUpdates.text = textElement.text;
 
   if (container) {
-    maxWidth = getBoundTextMaxWidth(container);
+    maxWidth = getMaxContainerWidth(container);
     boundTextUpdates.text = wrapText(
       textElement.originalText,
       getFontString(textElement),
@@ -83,28 +83,35 @@ export const redrawTextBoundingBox = (
   boundTextUpdates.baseline = metrics.baseline;
 
   if (container) {
-    const containerDims = getContainerDims(container);
+    if (isArrowElement(container)) {
-    const maxContainerHeight = getBoundTextMaxHeight(
+      const centerX = textElement.x + textElement.width / 2;
-      container,
+      const centerY = textElement.y + textElement.height / 2;
-      textElement as ExcalidrawTextElementWithContainer,
+      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);
 
-    let nextHeight = containerDims.height;
+      let nextHeight = containerDims.height;
-    if (metrics.height > maxContainerHeight) {
+      if (metrics.height > maxContainerHeight) {
-      nextHeight = computeContainerDimensionForBoundText(
+        nextHeight = computeContainerDimensionForBoundText(
-        metrics.height,
+          metrics.height,
-        container.type,
+          container.type,
-      );
+        );
-      mutateElement(container, { height: nextHeight });
+        mutateElement(container, { height: nextHeight });
-      updateOriginalContainerCache(container.id, 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;
     }
-    const updatedTextElement = {
-      ...textElement,
-      ...boundTextUpdates,
-    } as ExcalidrawTextElementWithContainer;
-    const { x, y } = computeBoundTextPosition(container, updatedTextElement);
-    boundTextUpdates.x = x;
-    boundTextUpdates.y = y;
   }
 
   mutateElement(textElement, boundTextUpdates);
@@ -176,11 +183,8 @@ export const handleBindTextResize = (
     let nextHeight = textElement.height;
     let nextWidth = textElement.width;
     const containerDims = getContainerDims(container);
-    const maxWidth = getBoundTextMaxWidth(container);
+    const maxWidth = getMaxContainerWidth(container);
-    const maxHeight = getBoundTextMaxHeight(
+    const maxHeight = getMaxContainerHeight(container);
-      container,
-      textElement as ExcalidrawTextElementWithContainer,
-    );
     let containerHeight = containerDims.height;
     let nextBaseLine = textElement.baseline;
     if (transformHandleType !== "n" && transformHandleType !== "s") {
@@ -252,8 +256,8 @@ export const computeBoundTextPosition = (
     );
   }
   const containerCoords = getContainerCoords(container);
-  const maxContainerHeight = getBoundTextMaxHeight(container, boundTextElement);
+  const maxContainerHeight = getMaxContainerHeight(container);
-  const maxContainerWidth = getBoundTextMaxWidth(container);
+  const maxContainerWidth = getMaxContainerWidth(container);
 
   let x;
   let y;
@@ -886,10 +890,18 @@ export const computeContainerDimensionForBoundText = (
   return dimension + padding;
 };
 
-export const getBoundTextMaxWidth = (container: ExcalidrawElement) => {
+export const getMaxContainerWidth = (container: ExcalidrawElement) => {
   const width = getContainerDims(container).width;
   if (isArrowElement(container)) {
-    return width - BOUND_TEXT_PADDING * 8 * 2;
+    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;
   }
 
   if (container.type === "ellipse") {
@@ -906,15 +918,16 @@ export const getBoundTextMaxWidth = (container: ExcalidrawElement) => {
   return width - BOUND_TEXT_PADDING * 2;
 };
 
-export const getBoundTextMaxHeight = (
+export const getMaxContainerHeight = (container: ExcalidrawElement) => {
-  container: ExcalidrawElement,
-  boundTextElement: ExcalidrawTextElementWithContainer,
-) => {
   const height = getContainerDims(container).height;
   if (isArrowElement(container)) {
     const containerHeight = height - BOUND_TEXT_PADDING * 8 * 2;
     if (containerHeight <= 0) {
-      return boundTextElement.height;
+      const boundText = getBoundTextElement(container);
+      if (boundText) {
+        return boundText.height;
+      }
+      return BOUND_TEXT_PADDING * 8 * 2;
     }
     return height;
   }

src/element/textWysiwyg.tsx

@@ -32,8 +32,8 @@ import {
   normalizeText,
   redrawTextBoundingBox,
   wrapText,
-  getBoundTextMaxHeight,
+  getMaxContainerHeight,
-  getBoundTextMaxWidth,
+  getMaxContainerWidth,
   computeContainerDimensionForBoundText,
   detectLineHeight,
 } from "./textElement";
@@ -205,11 +205,8 @@ export const textWysiwyg = ({
           }
         }
 
-        maxWidth = getBoundTextMaxWidth(container);
+        maxWidth = getMaxContainerWidth(container);
-        maxHeight = getBoundTextMaxHeight(
+        maxHeight = getMaxContainerHeight(container);
-          container,
-          updatedTextElement as ExcalidrawTextElementWithContainer,
-        );
 
         // autogrow container height if text exceeds
         if (!isArrowElement(container) && textElementHeight > maxHeight) {
@@ -380,7 +377,7 @@ export const textWysiwyg = ({
         const wrappedText = wrapText(
           `${editable.value}${data}`,
           font,
-          getBoundTextMaxWidth(container),
+          getMaxContainerWidth(container),
         );
         const width = getTextWidth(wrappedText, font);
         editable.style.width = `${width}px`;
@@ -397,7 +394,7 @@ export const textWysiwyg = ({
         const wrappedText = wrapText(
           normalizeText(editable.value),
           font,
-          getBoundTextMaxWidth(container!),
+          getMaxContainerWidth(container!),
         );
         const { width, height } = measureText(
           wrappedText,

src/excalidraw-app/CustomStats.tsx

@@ -7,9 +7,8 @@ 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;
@@ -24,7 +23,7 @@ const getStorageSizes = debounce((cb: (sizes: StorageSizes) => void) => {
 type Props = {
   setToast: (message: string) => void;
   elements: readonly NonDeletedExcalidrawElement[];
-  appState: UIAppState;
+  appState: AppState;
 };
 const CustomStats = (props: Props) => {
   const [storageSizes, setStorageSizes] = useState<StorageSizes>({

src/excalidraw-app/app_constants.ts

@@ -7,8 +7,6 @@ export const SYNC_FULL_SCENE_INTERVAL_MS = 20000;
 export const SYNC_BROWSER_TABS_TIMEOUT = 50;
 export const CURSOR_SYNC_TIMEOUT = 33; // ~30fps
 export const DELETED_ELEMENT_TIMEOUT = 24 * 60 * 60 * 1000; // 1 day
-export const HIDDEN_DISCONNECT_TIMEOUT = 5 * 60 * 1000; // 5 minutes
-export const RECONNECT_TOAST_DURATION = 2000;
 
 export const FILE_UPLOAD_MAX_BYTES = 3 * 1024 * 1024; // 3 MiB
 // 1 year (https://stackoverflow.com/a/25201898/927631)

src/excalidraw-app/components/ExportToExcalidrawPlus.tsx

@@ -18,7 +18,7 @@ import { getFrame } from "../../utils";
 
 const exportToExcalidrawPlus = async (
   elements: readonly NonDeletedExcalidrawElement[],
-  appState: Partial<AppState>,
+  appState: AppState,
   files: BinaryFiles,
 ) => {
   const firebase = await loadFirebaseStorage();
@@ -75,7 +75,7 @@ const exportToExcalidrawPlus = async (
 
 export const ExportToExcalidrawPlus: React.FC<{
   elements: readonly NonDeletedExcalidrawElement[];
-  appState: Partial<AppState>;
+  appState: AppState;
   files: BinaryFiles;
   onError: (error: Error) => void;
 }> = ({ elements, appState, files, onError }) => {

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: false },
+      { repairBindings: true, refreshDimensions: true },
     );
   } else {
     data = restore(localDataState || null, null, null, {
@@ -284,7 +284,7 @@ export const loadScene = async (
 
 export const exportToBackend = async (
   elements: readonly ExcalidrawElement[],
-  appState: Partial<AppState>,
+  appState: AppState,
   files: BinaryFiles,
 ) => {
   const encryptionKey = await generateEncryptionKey("string");

src/excalidraw-app/index.tsx

@@ -32,7 +32,6 @@ import {
   ExcalidrawImperativeAPI,
   BinaryFiles,
   ExcalidrawInitialDataState,
-  UIAppState,
 } from "../types";
 import {
   debounce,
@@ -45,8 +44,6 @@ import {
 } from "../utils";
 import {
   FIREBASE_STORAGE_PREFIXES,
-  HIDDEN_DISCONNECT_TIMEOUT,
-  RECONNECT_TOAST_DURATION,
   STORAGE_KEYS,
   SYNC_BROWSER_TABS_TIMEOUT,
 } from "./app_constants";
@@ -186,8 +183,9 @@ const initializeScene = async (opts: {
   }
 
   if (roomLinkData) {
-    const { excalidrawAPI, collabAPI } = opts;
+    const { excalidrawAPI } = opts;
-    const scene = await collabAPI.startCollaboration(roomLinkData);
+
+    const scene = await opts.collabAPI.startCollaboration(roomLinkData);
 
     return {
       // when collaborating, the state may have already been updated at this
@@ -239,9 +237,6 @@ const ExcalidrawWrapper = () => {
   const [errorMessage, setErrorMessage] = useState("");
   const [langCode, setLangCode] = useAtom(appLangCodeAtom);
 
-  const disconnectRef = useRef(false);
-  const toastRef = useRef<AppState["toast"]>(null);
-
   // initial state
   // ---------------------------------------------------------------------------
 
@@ -441,9 +436,7 @@ const ExcalidrawWrapper = () => {
       LocalData.flushSave();
     };
 
-    let disconnectTimeout: ReturnType<typeof setTimeout>;
+    const visibilityChange = (event: FocusEvent | Event) => {
-
-    const visibilityChange = async (event: FocusEvent | Event) => {
       if (event.type === EVENT.BLUR || document.hidden) {
         LocalData.flushSave();
       }
@@ -452,56 +445,6 @@ const ExcalidrawWrapper = () => {
         event.type === EVENT.FOCUS
       ) {
         syncData();
-
-        const disconnect = () => {
-          disconnectTimeout = setTimeout(
-            () => collabAPI.stopCollaboration(false),
-            HIDDEN_DISCONNECT_TIMEOUT,
-          );
-          disconnectRef.current = true;
-        };
-        const cancelPrevDisconnect = () => clearTimeout(disconnectTimeout);
-
-        if (document.hidden && collabAPI.isCollaborating()) {
-          if (!disconnectTimeout) {
-            disconnect();
-          } else {
-            cancelPrevDisconnect();
-            disconnect();
-          }
-        } else {
-          cancelPrevDisconnect();
-          if (!collabAPI.isCollaborating()) {
-            if (!toastRef.current && disconnectRef.current) {
-              toastRef.current = {
-                message: t("toast.reconnectRoomServer"),
-                duration: RECONNECT_TOAST_DURATION,
-                closable: true,
-              };
-            }
-            disconnectRef.current &&
-              (await initializeScene({ collabAPI, excalidrawAPI }).then(
-                async (data) => {
-                  loadImages(data, /* isInitialLoad */ true);
-                  initialStatePromiseRef.current.promise.resolve(data.scene);
-                  if (data.scene) {
-                    excalidrawAPI.updateScene({
-                      ...data.scene,
-                      ...restore(data.scene, null, null),
-                      commitToHistory: true,
-                      appState: {
-                        ...excalidrawAPI.getAppState(),
-                        toast: toastRef.current,
-                      },
-                    });
-                    excalidrawAPI.scrollToContent();
-                  }
-                },
-              ));
-            toastRef.current = null;
-            disconnectRef.current = false;
-          }
-        }
       }
     };
 
@@ -607,7 +550,7 @@ const ExcalidrawWrapper = () => {
 
   const onExportToBackend = async (
     exportedElements: readonly NonDeletedExcalidrawElement[],
-    appState: Partial<AppState>,
+    appState: AppState,
     files: BinaryFiles,
     canvas: HTMLCanvasElement | null,
   ) => {
@@ -638,7 +581,7 @@ const ExcalidrawWrapper = () => {
 
   const renderCustomStats = (
     elements: readonly NonDeletedExcalidrawElement[],
-    appState: UIAppState,
+    appState: AppState,
   ) => {
     return (
       <CustomStats

src/global.d.ts

@@ -18,8 +18,8 @@ interface Window {
   EXCALIDRAW_EXPORT_SOURCE: string;
   EXCALIDRAW_THROTTLE_RENDER: boolean | undefined;
   gtag: Function;
-  sa_event: Function;
+  _paq: any[];
-  fathom: { trackEvent: Function };
+  _mtm: any[];
 }
 
 interface CanvasRenderingContext2D {

src/hooks/useOutsideClick.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 
-export const useOutsideClick = (handler: (event: Event) => void) => {
+export const useOutsideClickHook = (handler: (event: Event) => void) => {
   const ref = useRef(null);
 
   useEffect(

src/locales/ar-SA.json

@@ -54,7 +54,6 @@
     "veryLarge": "كبير جدا",
     "solid": "كامل",
     "hachure": "خطوط",
-    "zigzag": "",
     "crossHatch": "خطوط متقطعة",
     "thin": "نحيف",
     "bold": "داكن",
@@ -208,10 +207,19 @@
     "collabSaveFailed": "تعذر الحفظ في قاعدة البيانات. إذا استمرت المشاكل، يفضل أن تحفظ ملفك محليا كي لا تفقد عملك.",
     "collabSaveFailed_sizeExceeded": "تعذر الحفظ في قاعدة البيانات، يبدو أن القماش كبير للغاية، يفضّل حفظ الملف محليا كي لا تفقد عملك.",
     "brave_measure_text_error": {
-      "line1": "",
+      "start": "",
-      "line2": "",
+      "aggressive_block_fingerprint": "",
-      "line3": "",
+      "setting_enabled": "",
-      "line4": ""
+      "break": "",
+      "text_elements": "",
+      "in_your_drawings": "",
+      "strongly_recommend": "",
+      "steps": "",
+      "how": "",
+      "disable_setting": "",
+      "issue": "",
+      "write": "",
+      "discord": ""
     }
   },
   "toolBar": {

src/locales/bg-BG.json

@@ -54,7 +54,6 @@
     "veryLarge": "Много голям",
     "solid": "Солиден",
     "hachure": "Хералдика",
-    "zigzag": "",
     "crossHatch": "Двойно-пресечено",
     "thin": "Тънък",
     "bold": "Ясно очертан",
@@ -208,10 +207,19 @@
     "collabSaveFailed": "",
     "collabSaveFailed_sizeExceeded": "",
     "brave_measure_text_error": {
-      "line1": "",
+      "start": "",
-      "line2": "",
+      "aggressive_block_fingerprint": "",
-      "line3": "",
+      "setting_enabled": "",
-      "line4": ""
+      "break": "",
+      "text_elements": "",
+      "in_your_drawings": "",
+      "strongly_recommend": "",
+      "steps": "",
+      "how": "",
+      "disable_setting": "",
+      "issue": "",
+      "write": "",
+      "discord": ""
     }
   },
   "toolBar": {
@@ -264,11 +272,16 @@
     "canvasTooBigTip": "Подсказка: пробвайте да приближите далечните елементи по-близко."
   },
   "errorSplash": {
-    "headingMain": "Среща грешка. Опитайте <button>презареждане на страницата.</button>",
+    "headingMain_pre": "Среща грешка. Опитайте ",
-    "clearCanvasMessage": "Ако презареждането не работи, опитайте <button>изчистване на платното.</button>",
+    "headingMain_button": "презареждане на страницата.",
+    "clearCanvasMessage": "Ако презареждането не работи, опитайте ",
+    "clearCanvasMessage_button": "изчистване на платното.",
     "clearCanvasCaveat": " Това ще доведе до загуба на работа ",
-    "trackedToSentry": "Грешката с идентификатор {{eventId}} беше проследен в нашата система.",
+    "trackedToSentry_pre": "Грешката с идентификатор ",
-    "openIssueMessage": "Бяхме много предпазливи да не включите информацията за вашата сцена при грешката. Ако сцената ви не е частна, моля, помислете за последващи действия на нашата <button>тракер за грешки.</button> Моля, включете информация по-долу, като я копирате и добавите в GitHub.",
+    "trackedToSentry_post": " беше проследен в нашата система.",
+    "openIssueMessage_pre": "Бяхме много предпазливи да не включите информацията за вашата сцена при грешката. Ако сцената ви не е частна, моля, помислете за последващи действия на нашата ",
+    "openIssueMessage_button": "тракер за грешки.",
+    "openIssueMessage_post": " Моля, включете информация по-долу, като я копирате и добавите в GitHub.",
     "sceneContent": "Съдържание на сцената:"
   },
   "roomDialog": {
@@ -348,16 +361,29 @@
       "required": "",
       "website": ""
     },
-    "noteDescription": "",
+    "noteDescription": {
-    "noteGuidelines": "",
+      "pre": "",
-    "noteLicense": "",
+      "link": "",
+      "post": ""
+    },
+    "noteGuidelines": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteLicense": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
     "noteItems": "",
     "atleastOneLibItem": "",
     "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "",
-    "content": ""
+    "content": "",
+    "link": ""
   },
   "confirmDialog": {
     "resetLibrary": "",

src/locales/bn-BD.json

@@ -1,7 +1,7 @@
 {
   "labels": {
     "paste": "পেস্ট করুন",
-    "pasteAsPlaintext": "প্লেইনটেক্সট হিসাবে পেস্ট করুন",
+    "pasteAsPlaintext": "",
     "pasteCharts": "চার্ট পেস্ট করুন",
     "selectAll": "সবটা সিলেক্ট করুন",
     "multiSelect": "একাধিক সিলেক্ট করুন",
@@ -54,7 +54,6 @@
     "veryLarge": "অনেক বড়",
     "solid": "দৃঢ়",
     "hachure": "ভ্রুলেখা",
-    "zigzag": "আঁকাবাঁকা",
     "crossHatch": "ক্রস হ্যাচ",
     "thin": "পাতলা",
     "bold": "পুরু",
@@ -73,7 +72,7 @@
     "layers": "মাত্রা",
     "actions": "ক্রিয়া",
     "language": "ভাষা",
-    "liveCollaboration": "সরাসরি পারস্পরিক সহযোগিতা...",
+    "liveCollaboration": "",
     "duplicateSelection": "সদৃশ সিলেক্ট",
     "untitled": "অনামী",
     "name": "নাম",
@@ -208,10 +207,19 @@
     "collabSaveFailed": "",
     "collabSaveFailed_sizeExceeded": "",
     "brave_measure_text_error": {
-      "line1": "",
+      "start": "",
-      "line2": "",
+      "aggressive_block_fingerprint": "",
-      "line3": "",
+      "setting_enabled": "",
-      "line4": ""
+      "break": "",
+      "text_elements": "",
+      "in_your_drawings": "",
+      "strongly_recommend": "",
+      "steps": "",
+      "how": "",
+      "disable_setting": "",
+      "issue": "",
+      "write": "",
+      "discord": ""
     }
   },
   "toolBar": {
@@ -264,11 +272,16 @@
     "canvasTooBigTip": "বিশেষ্য: দূরতম উপাদানগুলোকে একটু কাছাকাছি নিয়ে যাওয়ার চেষ্টা করুন।"
   },
   "errorSplash": {
-    "headingMain": "একটি ত্রুটির সম্মুখীন হয়েছে৷ চেষ্টা করুন <button>পৃষ্ঠাটি পুনরায় লোড করার।</button>",
+    "headingMain_pre": "একটি ত্রুটির সম্মুখীন হয়েছে৷ চেষ্টা করুন ",
-    "clearCanvasMessage": "যদি পুনরায় লোড করা কাজ না করে, চেষ্টা করুন <button>ক্যানভাস পরিষ্কার করার।</button>",
+    "headingMain_button": "পৃষ্ঠাটি পুনরায় লোড করার।",
+    "clearCanvasMessage": "যদি পুনরায় লোড করা কাজ না করে, চেষ্টা করুন ",
+    "clearCanvasMessage_button": "ক্যানভাস পরিষ্কার করার।",
     "clearCanvasCaveat": " এর ফলে কাজের ক্ষতি হবে ",
-    "trackedToSentry": "ত্রুটি {{eventId}} আমাদের সিস্টেমে ট্র্যাক করা হয়েছিল।",
+    "trackedToSentry_pre": "ত্রুটি ",
-    "openIssueMessage": "আমরা ত্রুটিতে আপনার দৃশ্যের তথ্য অন্তর্ভুক্ত না করার জন্য খুব সতর্ক ছিলাম। আপনার দৃশ্য ব্যক্তিগত না হলে, আমাদের অনুসরণ করার কথা বিবেচনা করুন <button>ত্রুটি ইতিবৃত্ত।</button> অনুগ্রহ করে GitHub ইস্যুতে অনুলিপি এবং পেস্ট করে নীচের তথ্য অন্তর্ভুক্ত করুন।",
+    "trackedToSentry_post": " আমাদের সিস্টেমে ট্র্যাক করা হয়েছিল।",
+    "openIssueMessage_pre": "আমরা ত্রুটিতে আপনার দৃশ্যের তথ্য অন্তর্ভুক্ত না করার জন্য খুব সতর্ক ছিলাম। আপনার দৃশ্য ব্যক্তিগত না হলে, আমাদের অনুসরণ করার কথা বিবেচনা করুন ",
+    "openIssueMessage_button": "ত্রুটি ইতিবৃত্ত।",
+    "openIssueMessage_post": " অনুগ্রহ করে GitHub ইস্যুতে অনুলিপি এবং পেস্ট করে নীচের তথ্য অন্তর্ভুক্ত করুন।",
     "sceneContent": "দৃশ্য বিষয়বস্তু:"
   },
   "roomDialog": {
@@ -348,16 +361,29 @@
       "required": "",
       "website": ""
     },
-    "noteDescription": "",
+    "noteDescription": {
-    "noteGuidelines": "",
+      "pre": "",
-    "noteLicense": "",
+      "link": "",
+      "post": ""
+    },
+    "noteGuidelines": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteLicense": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
     "noteItems": "",
     "atleastOneLibItem": "",
     "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "",
-    "content": ""
+    "content": "",
+    "link": ""
   },
   "confirmDialog": {
     "resetLibrary": "",

src/locales/ca-ES.json

@@ -54,7 +54,6 @@
     "veryLarge": "Molt gran",
     "solid": "Sòlid",
     "hachure": "Ratlletes",
-    "zigzag": "",
     "crossHatch": "Ratlletes creuades",
     "thin": "Fi",
     "bold": "Negreta",
@@ -208,10 +207,19 @@
     "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": {
-      "line1": "",
+      "start": "",
-      "line2": "",
+      "aggressive_block_fingerprint": "",
-      "line3": "",
+      "setting_enabled": "",
-      "line4": ""
+      "break": "",
+      "text_elements": "",
+      "in_your_drawings": "",
+      "strongly_recommend": "",
+      "steps": "",
+      "how": "",
+      "disable_setting": "",
+      "issue": "",
+      "write": "",
+      "discord": ""
     }
   },
   "toolBar": {
@@ -264,11 +272,16 @@
     "canvasTooBigTip": "Consell: proveu d’acostar una mica els elements més allunyats."
   },
   "errorSplash": {
-    "headingMain": "S'ha produït un error. Proveu <button>recarregar la pàgina.</button>",
+    "headingMain_pre": "S'ha produït un error. Proveu ",
-    "clearCanvasMessage": "Si la recàrrega no funciona, proveu <button>esborrar el llenç.</button>",
+    "headingMain_button": "recarregar la pàgina.",
+    "clearCanvasMessage": "Si la recàrrega no funciona, proveu ",
+    "clearCanvasMessage_button": "esborrar el llenç.",
     "clearCanvasCaveat": " Això resultarà en la pèrdua de feina ",
-    "trackedToSentry": "L'error amb l'identificador {{eventId}} s'ha rastrejat en el nostre sistema.",
+    "trackedToSentry_pre": "L'error amb l'identificador ",
-    "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.",
+    "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.",
     "sceneContent": "Contingut de l'escena:"
   },
   "roomDialog": {
@@ -348,16 +361,29 @@
       "required": "Requerit",
       "website": "Introduïu una URL vàlida"
     },
-    "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.",
+    "noteDescription": {
-    "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.",
+      "pre": "Envieu la vostra biblioteca perquè sigui inclosa al ",
-    "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.",
+      "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."
+    },
     "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í</link>"
+    "content": "Gràcies, {{authorName}}. La vostra biblioteca ha estat enviada per a ser revisada. Podeu comprovar-ne l'estat",
+    "link": "aquí"
   },
   "confirmDialog": {
     "resetLibrary": "Restableix la biblioteca",

src/locales/cs-CZ.json

@@ -54,7 +54,6 @@
     "veryLarge": "Velmi velké",
     "solid": "Plný",
     "hachure": "",
-    "zigzag": "",
     "crossHatch": "",
     "thin": "Tenký",
     "bold": "Tlustý",
@@ -208,10 +207,19 @@
     "collabSaveFailed": "",
     "collabSaveFailed_sizeExceeded": "",
     "brave_measure_text_error": {
-      "line1": "",
+      "start": "",
-      "line2": "",
+      "aggressive_block_fingerprint": "",
-      "line3": "",
+      "setting_enabled": "",
-      "line4": ""
+      "break": "",
+      "text_elements": "",
+      "in_your_drawings": "",
+      "strongly_recommend": "",
+      "steps": "",
+      "how": "",
+      "disable_setting": "",
+      "issue": "",
+      "write": "",
+      "discord": ""
     }
   },
   "toolBar": {
@@ -264,11 +272,16 @@
     "canvasTooBigTip": ""
   },
   "errorSplash": {
-    "headingMain": "",
+    "headingMain_pre": "",
+    "headingMain_button": "",
     "clearCanvasMessage": "",
+    "clearCanvasMessage_button": "",
     "clearCanvasCaveat": "",
-    "trackedToSentry": "Chyba identifikátoru {{eventId}} byl zaznamenán v našem systému.",
+    "trackedToSentry_pre": "Chyba identifikátoru ",
-    "openIssueMessage": "",
+    "trackedToSentry_post": " byl zaznamenán v našem systému.",
+    "openIssueMessage_pre": "",
+    "openIssueMessage_button": "",
+    "openIssueMessage_post": "",
     "sceneContent": ""
   },
   "roomDialog": {
@@ -348,16 +361,29 @@
       "required": "Povinné",
       "website": "Zadejte platnou URL adresu"
     },
-    "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é.",
+    "noteDescription": {
-    "noteGuidelines": "Knihovna musí být nejdříve ručně schválena. Přečtěte si prosím <link>pokyny</link>",
+      "pre": "Odešlete svou knihovnu, pro zařazení do ",
-    "noteLicense": "",
+      "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": ""
   },
   "publishSuccessDialog": {
     "title": "Knihovna byla odeslána",
-    "content": ""
+    "content": "",
+    "link": ""
   },
   "confirmDialog": {
     "resetLibrary": "",

src/locales/da-DK.json

@@ -54,7 +54,6 @@
     "veryLarge": "Meget stor",
     "solid": "Solid",
     "hachure": "Skravering",
-    "zigzag": "",
     "crossHatch": "Krydsskravering",
     "thin": "Tynd",
     "bold": "Fed",
@@ -208,10 +207,19 @@
     "collabSaveFailed": "",
     "collabSaveFailed_sizeExceeded": "",
     "brave_measure_text_error": {
-      "line1": "",
+      "start": "",
-      "line2": "",
+      "aggressive_block_fingerprint": "",
-      "line3": "",
+      "setting_enabled": "",
-      "line4": ""
+      "break": "",
+      "text_elements": "",
+      "in_your_drawings": "",
+      "strongly_recommend": "",
+      "steps": "",
+      "how": "",
+      "disable_setting": "",
+      "issue": "",
+      "write": "",
+      "discord": ""
     }
   },
   "toolBar": {
@@ -264,11 +272,16 @@
     "canvasTooBigTip": ""
   },
   "errorSplash": {
-    "headingMain": "",
+    "headingMain_pre": "",
+    "headingMain_button": "",
     "clearCanvasMessage": "",
+    "clearCanvasMessage_button": "",
     "clearCanvasCaveat": "",
-    "trackedToSentry": "",
+    "trackedToSentry_pre": "",
-    "openIssueMessage": "<button></button> Kopiere og indsæt venligst oplysningerne nedenfor i et GitHub problem.",
+    "trackedToSentry_post": "",
+    "openIssueMessage_pre": "",
+    "openIssueMessage_button": "",
+    "openIssueMessage_post": " Kopiere og indsæt venligst oplysningerne nedenfor i et GitHub problem.",
     "sceneContent": "Scene indhold:"
   },
   "roomDialog": {
@@ -348,16 +361,29 @@
       "required": "",
       "website": ""
     },
-    "noteDescription": "",
+    "noteDescription": {
-    "noteGuidelines": "",
+      "pre": "",
-    "noteLicense": "",
+      "link": "",
+      "post": ""
+    },
+    "noteGuidelines": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteLicense": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
     "noteItems": "",
     "atleastOneLibItem": "",
     "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "",
-    "content": ""
+    "content": "",
+    "link": ""
   },
   "confirmDialog": {
     "resetLibrary": "",

src/locales/de-DE.json

@@ -54,7 +54,6 @@
     "veryLarge": "Sehr groß",
     "solid": "Deckend",
     "hachure": "Schraffiert",
-    "zigzag": "Zickzack",
     "crossHatch": "Kreuzschraffiert",
     "thin": "Dünn",
     "bold": "Fett",
@@ -208,10 +207,19 @@
     "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": {
-      "line1": "Sieht so aus, als ob Du den Brave-Browser verwendest und die <bold>aggressive Blockierung von Fingerabdrücken</bold> aktiviert hast.",
+      "start": "Sieht so aus, als ob du den Brave Browser benutzt mit der",
-      "line2": "Dies könnte dazu führen, dass die <bold>Textelemente</bold> in Ihren Zeichnungen zerstört werden.",
+      "aggressive_block_fingerprint": "\"Fingerprinting aggressiv blockieren\"",
-      "line3": "Wir empfehlen dringend, diese Einstellung zu deaktivieren. Dazu kannst Du <link>diesen Schritten</link> folgen.",
+      "setting_enabled": "Einstellung aktiviert",
-      "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>"
+      "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"
     }
   },
   "toolBar": {
@@ -264,11 +272,16 @@
     "canvasTooBigTip": "Tipp: Schiebe die am weitesten entfernten Elemente ein wenig näher zusammen."
   },
   "errorSplash": {
-    "headingMain": "Es ist ein Fehler aufgetreten. Versuche <button>die Seite neu zu laden.</button>",
+    "headingMain_pre": "Es ist ein Fehler aufgetreten. Versuche ",
-    "clearCanvasMessage": "Wenn das Neuladen nicht funktioniert, versuche <button>die Zeichenfläche zu löschen.</button>",
+    "headingMain_button": "die Seite neu zu laden.",
+    "clearCanvasMessage": "Wenn das Neuladen nicht funktioniert, versuche ",
+    "clearCanvasMessage_button": "die Zeichenfläche zu löschen.",
     "clearCanvasCaveat": " Dies wird zum Verlust von Daten führen ",
-    "trackedToSentry": "Der Fehler mit der Kennung {{eventId}} wurde in unserem System registriert.",
+    "trackedToSentry_pre": "Der Fehler mit der Kennung ",
-    "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).",
+    "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).",
     "sceneContent": "Zeichnungsinhalt:"
   },
   "roomDialog": {
@@ -348,16 +361,29 @@
       "required": "Erforderlich",
       "website": "Gültige URL eingeben"
     },
-    "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.",
+    "noteDescription": {
-    "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.",
+      "pre": "Sende deine Bibliothek ein, um in die ",
-    "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.",
+      "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."
+    },
     "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</link>"
+    "content": "Vielen Dank {{authorName}}. Deine Bibliothek wurde zur Überprüfung eingereicht. Du kannst den Status verfolgen",
+    "link": "hier"
   },
   "confirmDialog": {
     "resetLibrary": "Bibliothek zurücksetzen",

src/locales/el-GR.json

@@ -54,7 +54,6 @@
     "veryLarge": "Πολύ μεγάλο",
     "solid": "Συμπαγής",
     "hachure": "Εκκόλαψη",
-    "zigzag": "",
     "crossHatch": "Διασταυρούμενη εκκόλαψη",
     "thin": "Λεπτή",
     "bold": "Έντονη",
@@ -208,10 +207,19 @@
     "collabSaveFailed": "Η αποθήκευση στη βάση δεδομένων δεν ήταν δυνατή. Αν το προβλήματα παραμείνει, θα πρέπει να αποθηκεύσετε το αρχείο σας τοπικά για να βεβαιωθείτε ότι δεν χάνετε την εργασία σας.",
     "collabSaveFailed_sizeExceeded": "Η αποθήκευση στη βάση δεδομένων δεν ήταν δυνατή, ο καμβάς φαίνεται να είναι πολύ μεγάλος. Θα πρέπει να αποθηκεύσετε το αρχείο τοπικά για να βεβαιωθείτε ότι δεν θα χάσετε την εργασία σας.",
     "brave_measure_text_error": {
-      "line1": "",
+      "start": "Φαίνεται ότι χρησιμοποιείτε το Brave browser με το",
-      "line2": "",
+      "aggressive_block_fingerprint": "Αποκλεισμός \"Δακτυλικών Αποτυπωμάτων\"",
-      "line3": "",
+      "setting_enabled": "ρύθμιση ενεργοποιημένη",
-      "line4": ""
+      "break": "Αυτό θα μπορούσε να σπάσει το",
+      "text_elements": "Στοιχεία Κειμένου",
+      "in_your_drawings": "στα σχέδιά σας",
+      "strongly_recommend": "Συνιστούμε να απενεργοποιήσετε αυτή τη ρύθμιση. Μπορείτε να ακολουθήσετε",
+      "steps": "αυτά τα βήματα",
+      "how": "για το πώς να το κάνετε",
+      "disable_setting": " Εάν η απενεργοποίηση αυτής της ρύθμισης δεν διορθώνει την εμφάνιση των στοιχείων κειμένου, παρακαλώ ανοίξτε ένα",
+      "issue": "πρόβλημα",
+      "write": "στο GitHub, ή γράψτε μας στο",
+      "discord": "Discord"
     }
   },
   "toolBar": {
@@ -264,11 +272,16 @@
     "canvasTooBigTip": "Συμβουλή: προσπαθήστε να μετακινήσετε τα πιο απομακρυσμένα στοιχεία λίγο πιο κοντά μαζί."
   },
   "errorSplash": {
-    "headingMain": "Συνέβη κάποιο σφάλμα. Προσπάθησε <button>φόρτωσε ξανά την σελίδα.</button>",
+    "headingMain_pre": "Συνέβη κάποιο σφάλμα. Προσπάθησε ",
-    "clearCanvasMessage": "Εάν το παραπάνω δεν δουλέψει, προσπάθησε <button>καθαρίσετε τον κανβά.</button>",
+    "headingMain_button": "φόρτωσε ξανά την σελίδα.",
+    "clearCanvasMessage": "Εάν το παραπάνω δεν δουλέψει, προσπάθησε ",
+    "clearCanvasMessage_button": "καθαρίσετε τον κανβά.",
     "clearCanvasCaveat": " Αυτό θα προκαλέσει απώλεια της δουλειάς σου ",
-    "trackedToSentry": "Το σφάλμα με αναγνωριστικό {{eventId}} παρακολουθήθηκε στο σύστημά μας.",
+    "trackedToSentry_pre": "Το σφάλμα με αναγνωριστικό ",
-    "openIssueMessage": "Ήμασταν πολύ προσεκτικοί για να μην συμπεριλάβουμε τις πληροφορίες της σκηνής σου στο σφάλμα. Αν η σκηνή σου δεν είναι ιδιωτική, παρακαλώ σκέψου να ακολουθήσεις το δικό μας <button>ανιχνευτής σφαλμάτων.</button> Παρακαλώ να συμπεριλάβετε τις παρακάτω πληροφορίες, αντιγράφοντας και επικολλώντας το ζήτημα στο GitHub.",
+    "trackedToSentry_post": " παρακολουθήθηκε στο σύστημά μας.",
+    "openIssueMessage_pre": "Ήμασταν πολύ προσεκτικοί για να μην συμπεριλάβουμε τις πληροφορίες της σκηνής σου στο σφάλμα. Αν η σκηνή σου δεν είναι ιδιωτική, παρακαλώ σκέψου να ακολουθήσεις το δικό μας ",
+    "openIssueMessage_button": "ανιχνευτής σφαλμάτων.",
+    "openIssueMessage_post": " Παρακαλώ να συμπεριλάβετε τις παρακάτω πληροφορίες, αντιγράφοντας και επικολλώντας το ζήτημα στο GitHub.",
     "sceneContent": "Περιεχόμενο σκηνής:"
   },
   "roomDialog": {
@@ -348,16 +361,29 @@
       "required": "Απαιτείται",
       "website": "Εισάγετε μια έγκυρη διεύθυνση URL"
     },
-    "noteDescription": "Υποβάλετε τη βιβλιοθήκη σας για να συμπεριληφθεί στο <link>δημόσιο αποθετήριο βιβλιοθήκης</link>ώστε να χρησιμοποιηθεί από άλλα άτομα στα σχέδιά τους.",
+    "noteDescription": {
-    "noteGuidelines": "Η βιβλιοθήκη πρέπει πρώτα να εγκριθεί χειροκίνητα. Παρακαλώ διαβάστε τους <link>οδηγίες</link> πριν την υποβολή. Θα χρειαστείτε έναν λογαριασμό GitHub για την επικοινωνία και για να προβείτε σε αλλαγές εφ' όσον χρειαστεί, αλλά δεν είναι αυστηρή απαίτηση.",
+      "pre": "Υποβάλετε τη βιβλιοθήκη σας για να συμπεριληφθεί στο ",
-    "noteLicense": "Με την υποβολή, συμφωνείτε ότι η βιβλιοθήκη θα δημοσιευθεί υπό την <link>Άδεια MIT, </link>που εν συντομία σημαίνει ότι ο καθένας μπορεί να τα χρησιμοποιήσει χωρίς περιορισμούς.",
+      "link": "δημόσιο αποθετήριο βιβλιοθήκης",
+      "post": "ώστε να χρησιμοποιηθεί από άλλα άτομα στα σχέδιά τους."
+    },
+    "noteGuidelines": {
+      "pre": "Η βιβλιοθήκη πρέπει πρώτα να εγκριθεί χειροκίνητα. Παρακαλώ διαβάστε τους ",
+      "link": "οδηγίες",
+      "post": " πριν την υποβολή. Θα χρειαστείτε έναν λογαριασμό GitHub για την επικοινωνία και για να προβείτε σε αλλαγές εφ' όσον χρειαστεί, αλλά δεν είναι αυστηρή απαίτηση."
+    },
+    "noteLicense": {
+      "pre": "Με την υποβολή, συμφωνείτε ότι η βιβλιοθήκη θα δημοσιευθεί υπό την ",
+      "link": "Άδεια MIT, ",
+      "post": "που εν συντομία σημαίνει ότι ο καθένας μπορεί να τα χρησιμοποιήσει χωρίς περιορισμούς."
+    },
     "noteItems": "Κάθε αντικείμενο της βιβλιοθήκης πρέπει να έχει το δικό του όνομα ώστε να μπορεί να φιλτραριστεί. Θα συμπεριληφθούν τα ακόλουθα αντικείμενα βιβλιοθήκης:",
     "atleastOneLibItem": "Παρακαλώ επιλέξτε τουλάχιστον ένα αντικείμενο βιβλιοθήκης για να ξεκινήσετε",
     "republishWarning": "Σημείωση: μερικά από τα επιλεγμένα αντικέιμενα έχουν ήδη επισημανθεί ως δημοσιευμένα/υποβεβλημένα. Θα πρέπει να υποβάλετε αντικείμενα εκ νέου μόνο για να ενημερώσετε μία ήδη υπάρχουσα βιβλιοθήκη ή υποβολή."
   },
   "publishSuccessDialog": {
     "title": "Η βιβλιοθήκη υποβλήθηκε",
-    "content": "Ευχαριστούμε {{authorName}}. Η βιβλιοθήκη σας έχει υποβληθεί για αξιολόγηση. Μπορείτε να παρακολουθείτε τη διαδικασία<link>εδώ</link>"
+    "content": "Ευχαριστούμε {{authorName}}. Η βιβλιοθήκη σας έχει υποβληθεί για αξιολόγηση. Μπορείτε να παρακολουθείτε τη διαδικασία",
+    "link": "εδώ"
   },
   "confirmDialog": {
     "resetLibrary": "Καθαρισμός βιβλιοθήκης",

src/locales/en.json

@@ -208,10 +208,19 @@
     "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": {
-      "line1": "Looks like you are using Brave browser with the <bold>Aggressively Block Fingerprinting</bold> setting enabled.",
+      "start": "Looks like you are using Brave browser with the",
-      "line2": "This could result in breaking the <bold>Text Elements</bold> in your drawings.",
+      "aggressive_block_fingerprint": "Aggressively Block Fingerprinting",
-      "line3": "We strongly recommend disabling this setting. You can follow <link>these steps</link> on how to do so.",
+      "setting_enabled": "setting enabled",
-      "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>"
+      "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"
     }
   },
   "toolBar": {
@@ -264,11 +273,16 @@
     "canvasTooBigTip": "Tip: try moving the farthest elements a bit closer together."
   },
   "errorSplash": {
-    "headingMain": "Encountered an error. Try <button>reloading the page</button>.",
+    "headingMain_pre": "Encountered an error. Try ",
-    "clearCanvasMessage": "If reloading doesn't work, try <button>clearing the canvas</button>.",
+    "headingMain_button": "reloading the page.",
+    "clearCanvasMessage": "If reloading doesn't work, try ",
+    "clearCanvasMessage_button": "clearing the canvas.",
     "clearCanvasCaveat": " This will result in loss of work ",
-    "trackedToSentry": "The error with identifier {{eventId}} was tracked on our system.",
+    "trackedToSentry_pre": "The error with identifier ",
-    "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.",
+    "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.",
     "sceneContent": "Scene content:"
   },
   "roomDialog": {
@@ -348,16 +362,29 @@
       "required": "Required",
       "website": "Enter a valid URL"
     },
-    "noteDescription": "Submit your library to be included in the <link>public library repository</link> for other people to use in their drawings.",
+    "noteDescription": {
-    "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.",
+      "pre": "Submit your library to be included in the ",
-    "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.",
+      "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."
+    },
     "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</link>"
+    "content": "Thank you {{authorName}}. Your library has been submitted for review. You can track the status",
+    "link": "here"
   },
   "confirmDialog": {
     "resetLibrary": "Reset library",
@@ -391,8 +418,7 @@
     "fileSavedToFilename": "Saved to {filename}",
     "canvas": "canvas",
     "selection": "selection",
-    "pasteAsSingleElement": "Use {{shortcut}} to paste as a single element,\nor paste into an existing text editor",
+    "pasteAsSingleElement": "Use {{shortcut}} to paste as a single element,\nor paste into an existing text editor"
-    "reconnectRoomServer": "Reconnecting to server"
   },
   "colors": {
     "ffffff": "White",

src/locales/es-ES.json

@@ -54,7 +54,6 @@
     "veryLarge": "Muy grande",
     "solid": "Sólido",
     "hachure": "Folleto",
-    "zigzag": "Zigzag",
     "crossHatch": "Rayado transversal",
     "thin": "Fino",
     "bold": "Grueso",
@@ -208,10 +207,19 @@
     "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": {
-      "line1": "",
+      "start": "",
-      "line2": "",
+      "aggressive_block_fingerprint": "",
-      "line3": "",
+      "setting_enabled": "ajuste activado",
-      "line4": ""
+      "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"
     }
   },
   "toolBar": {
@@ -264,11 +272,16 @@
     "canvasTooBigTip": "Sugerencia: intenta acercar un poco más los elementos más lejanos."
   },
   "errorSplash": {
-    "headingMain": "Se encontró un error. Intente <button>recargando la página.</button>",
+    "headingMain_pre": "Se encontró un error. Intente ",
-    "clearCanvasMessage": "Si la recarga no funciona, intente <button>limpiando el lienzo.</button>",
+    "headingMain_button": "recargando la página.",
+    "clearCanvasMessage": "Si la recarga no funciona, intente ",
+    "clearCanvasMessage_button": "limpiando el lienzo.",
     "clearCanvasCaveat": " Esto provocará la pérdida de su trabajo ",
-    "trackedToSentry": "El error con el identificador {{eventId}} fue rastreado en nuestro sistema.",
+    "trackedToSentry_pre": "El error con el identificador ",
-    "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.",
+    "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.",
     "sceneContent": "Contenido de la escena:"
   },
   "roomDialog": {
@@ -306,8 +319,8 @@
     "doubleClick": "doble clic",
     "drag": "arrastrar",
     "editor": "Editor",
-    "editLineArrowPoints": "Editar puntos de línea/flecha",
+    "editLineArrowPoints": "",
-    "editText": "Editar texto / añadir etiqueta",
+    "editText": "",
     "github": "¿Ha encontrado un problema? Envíelo",
     "howto": "Siga nuestras guías",
     "or": "o",
@@ -348,16 +361,29 @@
       "required": "Requerido",
       "website": "Introduce una URL válida"
     },
-    "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.",
+    "noteDescription": {
-    "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.",
+      "pre": "Envía tu biblioteca para ser incluida en el ",
-    "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.",
+      "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."
+    },
     "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í</link>"
+    "content": "Gracias {{authorName}}. Su biblioteca ha sido enviada para ser revisada. Puede seguir el estado",
+    "link": "aquí"
   },
   "confirmDialog": {
     "resetLibrary": "Reiniciar biblioteca",