feat: Provide an isActionName type guard.

package.json

@@ -19,7 +19,6 @@
     ]
   },
   "dependencies": {
-    "@dwelle/tunnel-rat": "0.1.1",
     "@sentry/browser": "6.2.5",
     "@sentry/integrations": "6.2.5",
     "@testing-library/jest-dom": "5.16.2",
@@ -56,7 +55,6 @@
     "roughjs": "4.5.2",
     "sass": "1.51.0",
     "socket.io-client": "2.3.1",
-    "tunnel-rat": "0.1.0",
     "typescript": "4.9.4",
     "workbox-background-sync": "^6.5.4",
     "workbox-broadcast-update": "^6.5.4",

public/index.html

@@ -167,6 +167,9 @@
       body,
       html {
         margin: 0;
+        --ui-font: Assistant, system-ui, BlinkMacSystemFont, -apple-system,
+          Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+        font-family: var(--ui-font);
         -webkit-text-size-adjust: 100%;
 
         width: 100%;

src/actions/types.ts

@@ -34,86 +34,92 @@ type ActionFn = (
 export type UpdaterFn = (res: ActionResult) => void;
 export type ActionFilterFn = (action: Action) => void;
 
-export type ActionName =
-  | "copy"
-  | "cut"
-  | "paste"
-  | "copyAsPng"
-  | "copyAsSvg"
-  | "copyText"
-  | "sendBackward"
-  | "bringForward"
-  | "sendToBack"
-  | "bringToFront"
-  | "copyStyles"
-  | "selectAll"
-  | "pasteStyles"
-  | "gridMode"
-  | "zenMode"
-  | "stats"
-  | "changeStrokeColor"
-  | "changeBackgroundColor"
-  | "changeFillStyle"
-  | "changeStrokeWidth"
-  | "changeStrokeShape"
-  | "changeSloppiness"
-  | "changeStrokeStyle"
-  | "changeArrowhead"
-  | "changeOpacity"
-  | "changeFontSize"
-  | "toggleCanvasMenu"
-  | "toggleEditMenu"
-  | "undo"
-  | "redo"
-  | "finalize"
-  | "changeProjectName"
-  | "changeExportBackground"
-  | "changeExportEmbedScene"
-  | "changeExportScale"
-  | "saveToActiveFile"
-  | "saveFileToDisk"
-  | "loadScene"
-  | "duplicateSelection"
-  | "deleteSelectedElements"
-  | "changeViewBackgroundColor"
-  | "clearCanvas"
-  | "zoomIn"
-  | "zoomOut"
-  | "resetZoom"
-  | "zoomToFit"
-  | "zoomToSelection"
-  | "changeFontFamily"
-  | "changeTextAlign"
-  | "changeVerticalAlign"
-  | "toggleFullScreen"
-  | "toggleShortcuts"
-  | "group"
-  | "ungroup"
-  | "goToCollaborator"
-  | "addToLibrary"
-  | "changeRoundness"
-  | "alignTop"
-  | "alignBottom"
-  | "alignLeft"
-  | "alignRight"
-  | "alignVerticallyCentered"
-  | "alignHorizontallyCentered"
-  | "distributeHorizontally"
-  | "distributeVertically"
-  | "flipHorizontal"
-  | "flipVertical"
-  | "viewMode"
-  | "exportWithDarkMode"
-  | "toggleTheme"
-  | "increaseFontSize"
-  | "decreaseFontSize"
-  | "unbindText"
-  | "hyperlink"
-  | "bindText"
-  | "toggleLock"
-  | "toggleLinearEditor"
-  | "toggleEraserTool"
-  | "toggleHandTool";
+const actionNames = [
+  "copy",
+  "cut",
+  "paste",
+  "copyAsPng",
+  "copyAsSvg",
+  "copyText",
+  "sendBackward",
+  "bringForward",
+  "sendToBack",
+  "bringToFront",
+  "copyStyles",
+  "selectAll",
+  "pasteStyles",
+  "gridMode",
+  "zenMode",
+  "stats",
+  "changeStrokeColor",
+  "changeBackgroundColor",
+  "changeFillStyle",
+  "changeStrokeWidth",
+  "changeStrokeShape",
+  "changeSloppiness",
+  "changeStrokeStyle",
+  "changeArrowhead",
+  "changeOpacity",
+  "changeFontSize",
+  "toggleCanvasMenu",
+  "toggleEditMenu",
+  "undo",
+  "redo",
+  "finalize",
+  "changeProjectName",
+  "changeExportBackground",
+  "changeExportEmbedScene",
+  "changeExportScale",
+  "saveToActiveFile",
+  "saveFileToDisk",
+  "loadScene",
+  "duplicateSelection",
+  "deleteSelectedElements",
+  "changeViewBackgroundColor",
+  "clearCanvas",
+  "zoomIn",
+  "zoomOut",
+  "resetZoom",
+  "zoomToFit",
+  "zoomToSelection",
+  "changeFontFamily",
+  "changeTextAlign",
+  "changeVerticalAlign",
+  "toggleFullScreen",
+  "toggleShortcuts",
+  "group",
+  "ungroup",
+  "goToCollaborator",
+  "addToLibrary",
+  "changeRoundness",
+  "alignTop",
+  "alignBottom",
+  "alignLeft",
+  "alignRight",
+  "alignVerticallyCentered",
+  "alignHorizontallyCentered",
+  "distributeHorizontally",
+  "distributeVertically",
+  "flipHorizontal",
+  "flipVertical",
+  "viewMode",
+  "exportWithDarkMode",
+  "toggleTheme",
+  "increaseFontSize",
+  "decreaseFontSize",
+  "unbindText",
+  "hyperlink",
+  "bindText",
+  "toggleLock",
+  "toggleLinearEditor",
+  "toggleEraserTool",
+  "toggleHandTool",
+] as const;
+
+// So we can have the `isActionName` type guard
+export type ActionName = typeof actionNames[number];
+export const isActionName = (n: any): n is ActionName =>
+  actionNames.includes(n);
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];

src/components/App.tsx

@@ -589,6 +589,7 @@ class App extends React.Component<AppProps, AppState> {
                         })
                       }
                       langCode={getLanguage().code}
+                      isCollaborating={this.props.isCollaborating}
                       renderTopRightUI={renderTopRightUI}
                       renderCustomStats={renderCustomStats}
                       renderCustomSidebar={this.props.renderSidebar}
@@ -604,6 +605,7 @@ class App extends React.Component<AppProps, AppState> {
                       onImageAction={this.onImageAction}
                       renderWelcomeScreen={
                         !this.state.isLoading &&
+                        this.props.UIOptions.welcomeScreen &&
                         this.state.showWelcomeScreen &&
                         this.state.activeTool.type === "selection" &&
                         !this.scene.getElementsIncludingDeleted().length

src/components/LayerUI.tsx

@@ -8,8 +8,15 @@ import { NonDeletedExcalidrawElement } from "../element/types";
 import { Language, t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
 import { ExportType } from "../scene/types";
-import { AppProps, AppState, ExcalidrawProps, BinaryFiles } from "../types";
-import { isShallowEqual, muteFSAbortError } from "../utils";
+import {
+  AppProps,
+  AppState,
+  ExcalidrawProps,
+  BinaryFiles,
+  UIChildrenComponents,
+  UIWelcomeScreenComponents,
+} from "../types";
+import { isShallowEqual, muteFSAbortError, getReactChildren } from "../utils";
 import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { ErrorDialog } from "./ErrorDialog";
 import { ExportCB, ImageExportDialog } from "./ImageExportDialog";
@@ -38,14 +45,14 @@ import { useDevice } from "../components/App";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions/actionToggleStats";
 import Footer from "./footer/Footer";
+import WelcomeScreen from "./welcome-screen/WelcomeScreen";
 import { hostSidebarCountersAtom } from "./Sidebar/Sidebar";
 import { jotaiScope } from "../jotai";
-import { Provider, useAtom } from "jotai";
+import { 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";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -60,6 +67,7 @@ interface LayerUIProps {
   onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
   showExitZenModeBtn: boolean;
   langCode: Language["code"];
+  isCollaborating: boolean;
   renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
   renderCustomStats?: ExcalidrawProps["renderCustomStats"];
   renderCustomSidebar?: ExcalidrawProps["renderSidebar"];
@@ -73,32 +81,6 @@ interface LayerUIProps {
   children?: React.ReactNode;
 }
 
-const DefaultMainMenu: React.FC<{
-  UIOptions: AppProps["UIOptions"];
-}> = ({ UIOptions }) => {
-  return (
-    <MainMenu __fallback>
-      <MainMenu.DefaultItems.LoadScene />
-      <MainMenu.DefaultItems.SaveToActiveFile />
-      {/* FIXME we should to test for this inside the item itself */}
-      {UIOptions.canvasActions.export && <MainMenu.DefaultItems.Export />}
-      {/* FIXME we should to test for this inside the item itself */}
-      {UIOptions.canvasActions.saveAsImage && (
-        <MainMenu.DefaultItems.SaveAsImage />
-      )}
-      <MainMenu.DefaultItems.Help />
-      <MainMenu.DefaultItems.ClearCanvas />
-      <MainMenu.Separator />
-      <MainMenu.Group title="Excalidraw links">
-        <MainMenu.DefaultItems.Socials />
-      </MainMenu.Group>
-      <MainMenu.Separator />
-      <MainMenu.DefaultItems.ToggleTheme />
-      <MainMenu.DefaultItems.ChangeCanvasBackground />
-    </MainMenu>
-  );
-};
-
 const LayerUI = ({
   actionManager,
   appState,
@@ -111,6 +93,7 @@ const LayerUI = ({
   onPenModeToggle,
   onInsertElements,
   showExitZenModeBtn,
+  isCollaborating,
   renderTopRightUI,
   renderCustomStats,
   renderCustomSidebar,
@@ -125,7 +108,27 @@ const LayerUI = ({
 }: LayerUIProps) => {
   const device = useDevice();
 
-  const tunnels = useInitializeTunnels();
+  const [childrenComponents, restChildren] =
+    getReactChildren<UIChildrenComponents>(children, {
+      Menu: true,
+      FooterCenter: true,
+      WelcomeScreen: true,
+    });
+
+  const [WelcomeScreenComponents] = getReactChildren<UIWelcomeScreenComponents>(
+    renderWelcomeScreen
+      ? (
+          childrenComponents?.WelcomeScreen ?? (
+            <WelcomeScreen>
+              <WelcomeScreen.Center />
+              <WelcomeScreen.Hints.MenuHint />
+              <WelcomeScreen.Hints.ToolbarHint />
+              <WelcomeScreen.Hints.HelpHint />
+            </WelcomeScreen>
+          )
+        )?.props?.children
+      : null,
+  );
 
   const renderJSONExportDialog = () => {
     if (!UIOptions.canvasActions.export) {
@@ -194,12 +197,37 @@ const LayerUI = ({
     );
   };
 
+  const renderMenu = () => {
+    return (
+      childrenComponents.Menu || (
+        <MainMenu>
+          <MainMenu.DefaultItems.LoadScene />
+          <MainMenu.DefaultItems.SaveToActiveFile />
+          {/* FIXME we should to test for this inside the item itself */}
+          {UIOptions.canvasActions.export && <MainMenu.DefaultItems.Export />}
+          {/* FIXME we should to test for this inside the item itself */}
+          {UIOptions.canvasActions.saveAsImage && (
+            <MainMenu.DefaultItems.SaveAsImage />
+          )}
+          <MainMenu.DefaultItems.Help />
+          <MainMenu.DefaultItems.ClearCanvas />
+          <MainMenu.Separator />
+          <MainMenu.Group title="Excalidraw links">
+            <MainMenu.DefaultItems.Socials />
+          </MainMenu.Group>
+          <MainMenu.Separator />
+          <MainMenu.DefaultItems.ToggleTheme />
+          <MainMenu.DefaultItems.ChangeCanvasBackground />
+        </MainMenu>
+      )
+    );
+  };
   const renderCanvasActions = () => (
     <div style={{ position: "relative" }}>
+      {WelcomeScreenComponents.MenuHint}
       {/* wrapping to Fragment stops React from occasionally complaining
                 about identical Keys */}
-      <tunnels.mainMenuTunnel.Out />
-      {renderWelcomeScreen && <tunnels.welcomeScreenMenuHintTunnel.Out />}
+      <>{renderMenu()}</>
     </div>
   );
 
@@ -236,6 +264,7 @@ const LayerUI = ({
 
     return (
       <FixedSideContainer side="top">
+        {WelcomeScreenComponents.Center}
         <div className="App-menu App-menu_top">
           <Stack.Col
             gap={6}
@@ -250,9 +279,7 @@ const LayerUI = ({
             <Section heading="shapes" className="shapes-section">
               {(heading: React.ReactNode) => (
                 <div style={{ position: "relative" }}>
-                  {renderWelcomeScreen && (
-                    <tunnels.welcomeScreenToolbarHintTunnel.Out />
-                  )}
+                  {WelcomeScreenComponents.ToolbarHint}
                   <Stack.Col gap={4} align="start">
                     <Stack.Row
                       gap={1}
@@ -351,18 +378,9 @@ const LayerUI = ({
 
   const [hostSidebarCounters] = useAtom(hostSidebarCountersAtom, jotaiScope);
 
-  const layerUIJSX = (
+  return (
     <>
-      {/* ------------------------- tunneled UI ---------------------------- */}
-      {/* make sure we render host app components first so that we can detect
-          them first on initial render to optimize layout shift */}
-      {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. */}
-      <DefaultMainMenu UIOptions={UIOptions} />
-      {/* ------------------------------------------------------------------ */}
-
+      {restChildren}
       {appState.isLoading && <LoadingMessage delay={250} />}
       {appState.errorMessage && (
         <ErrorDialog
@@ -409,6 +427,8 @@ const LayerUI = ({
           renderCustomStats={renderCustomStats}
           renderSidebars={renderSidebars}
           device={device}
+          renderMenu={renderMenu}
+          welcomeScreenCenter={WelcomeScreenComponents.Center}
         />
       )}
 
@@ -431,13 +451,13 @@ const LayerUI = ({
                 : {}
             }
           >
-            {renderWelcomeScreen && <tunnels.welcomeScreenCenterTunnel.Out />}
             {renderFixedSideContainer()}
             <Footer
               appState={appState}
               actionManager={actionManager}
               showExitZenModeBtn={showExitZenModeBtn}
-              renderWelcomeScreen={renderWelcomeScreen}
+              footerCenter={childrenComponents.FooterCenter}
+              welcomeScreenHelp={WelcomeScreenComponents.HelpHint}
             />
             {appState.showStats && (
               <Stats
@@ -468,14 +488,6 @@ const LayerUI = ({
       )}
     </>
   );
-
-  return (
-    <Provider scope={tunnels.jotaiScope}>
-      <TunnelsContext.Provider value={tunnels}>
-        {layerUIJSX}
-      </TunnelsContext.Provider>
-    </Provider>
-  );
 };
 
 const stripIrrelevantAppStateProps = (

src/components/MobileMenu.tsx

@@ -1,5 +1,10 @@
 import React from "react";
-import { AppState, Device, ExcalidrawProps } from "../types";
+import {
+  AppState,
+  Device,
+  ExcalidrawProps,
+  UIWelcomeScreenComponents,
+} from "../types";
 import { ActionManager } from "../actions/manager";
 import { t } from "../i18n";
 import Stack from "./Stack";
@@ -19,7 +24,6 @@ import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions";
 import { HandButton } from "./HandButton";
 import { isHandToolActive } from "../appState";
-import { useTunnels } from "./context/tunnels";
 
 type MobileMenuProps = {
   appState: AppState;
@@ -41,6 +45,8 @@ type MobileMenuProps = {
   renderCustomStats?: ExcalidrawProps["renderCustomStats"];
   renderSidebars: () => JSX.Element | null;
   device: Device;
+  renderMenu: () => React.ReactNode;
+  welcomeScreenCenter: UIWelcomeScreenComponents["Center"];
 };
 
 export const MobileMenu = ({
@@ -57,12 +63,13 @@ export const MobileMenu = ({
   renderCustomStats,
   renderSidebars,
   device,
+  renderMenu,
+  welcomeScreenCenter,
 }: MobileMenuProps) => {
-  const { welcomeScreenCenterTunnel, mainMenuTunnel } = useTunnels();
   const renderToolbar = () => {
     return (
       <FixedSideContainer side="top" className="App-top-bar">
-        <welcomeScreenCenterTunnel.Out />
+        {welcomeScreenCenter}
         <Section heading="shapes">
           {(heading: React.ReactNode) => (
             <Stack.Col gap={4} align="center">
@@ -128,16 +135,12 @@ export const MobileMenu = ({
 
   const renderAppToolbar = () => {
     if (appState.viewModeEnabled) {
-      return (
-        <div className="App-toolbar-content">
-          <mainMenuTunnel.Out />
-        </div>
-      );
+      return <div className="App-toolbar-content">{renderMenu()}</div>;
     }
 
     return (
       <div className="App-toolbar-content">
-        <mainMenuTunnel.Out />
+        {renderMenu()}
         {actionManager.renderAction("toggleEditMenu")}
         {actionManager.renderAction("undo")}
         {actionManager.renderAction("redo")}

src/components/context/tunnels.ts

@@ -1,32 +0,0 @@
-import React from "react";
-import tunnel from "@dwelle/tunnel-rat";
-
-type Tunnel = ReturnType<typeof tunnel>;
-
-type TunnelsContextValue = {
-  mainMenuTunnel: Tunnel;
-  welcomeScreenMenuHintTunnel: Tunnel;
-  welcomeScreenToolbarHintTunnel: Tunnel;
-  welcomeScreenHelpHintTunnel: Tunnel;
-  welcomeScreenCenterTunnel: Tunnel;
-  footerCenterTunnel: Tunnel;
-  jotaiScope: symbol;
-};
-
-export const TunnelsContext = React.createContext<TunnelsContextValue>(null!);
-
-export const useTunnels = () => React.useContext(TunnelsContext);
-
-export const useInitializeTunnels = () => {
-  return React.useMemo((): TunnelsContextValue => {
-    return {
-      mainMenuTunnel: tunnel(),
-      welcomeScreenMenuHintTunnel: tunnel(),
-      welcomeScreenToolbarHintTunnel: tunnel(),
-      welcomeScreenHelpHintTunnel: tunnel(),
-      welcomeScreenCenterTunnel: tunnel(),
-      footerCenterTunnel: tunnel(),
-      jotaiScope: Symbol(),
-    };
-  }, []);
-};

src/components/dropdownMenu/DropdownMenuItem.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {
-  getDropdownMenuItemClassName,
+  getDrodownMenuItemClassName,
   useHandleDropdownMenuItemClick,
 } from "./common";
 import MenuItemContent from "./DropdownMenuItemContent";
@@ -26,7 +26,7 @@ const DropdownMenuItem = ({
       {...rest}
       onClick={handleClick}
       type="button"
-      className={getDropdownMenuItemClassName(className)}
+      className={getDrodownMenuItemClassName(className)}
       title={rest.title ?? rest["aria-label"]}
     >
       <MenuItemContent icon={icon} shortcut={shortcut}>

src/components/dropdownMenu/DropdownMenuItemLink.tsx

@@ -1,7 +1,7 @@
 import MenuItemContent from "./DropdownMenuItemContent";
 import React from "react";
 import {
-  getDropdownMenuItemClassName,
+  getDrodownMenuItemClassName,
   useHandleDropdownMenuItemClick,
 } from "./common";
 
@@ -29,7 +29,7 @@ const DropdownMenuItemLink = ({
       href={href}
       target="_blank"
       rel="noreferrer"
-      className={getDropdownMenuItemClassName(className)}
+      className={getDrodownMenuItemClassName(className)}
       title={rest.title ?? rest["aria-label"]}
       onClick={handleClick}
     >

src/components/dropdownMenu/common.ts

@@ -6,7 +6,7 @@ export const DropdownMenuContentPropsContext = React.createContext<{
   onSelect?: (event: Event) => void;
 }>({});
 
-export const getDropdownMenuItemClassName = (className = "") => {
+export const getDrodownMenuItemClassName = (className = "") => {
   return `dropdown-menu-item dropdown-menu-item-base ${className}`.trim();
 };
 

src/components/footer/Footer.tsx

@@ -1,7 +1,11 @@
 import clsx from "clsx";
 import { actionShortcuts } from "../../actions";
 import { ActionManager } from "../../actions/manager";
-import { AppState } from "../../types";
+import {
+  AppState,
+  UIChildrenComponents,
+  UIWelcomeScreenComponents,
+} from "../../types";
 import {
   ExitZenModeAction,
   FinalizeAction,
@@ -9,7 +13,6 @@ import {
   ZoomActions,
 } from "../Actions";
 import { useDevice } from "../App";
-import { useTunnels } from "../context/tunnels";
 import { HelpButton } from "../HelpButton";
 import { Section } from "../Section";
 import Stack from "../Stack";
@@ -18,15 +21,15 @@ const Footer = ({
   appState,
   actionManager,
   showExitZenModeBtn,
-  renderWelcomeScreen,
+  footerCenter,
+  welcomeScreenHelp,
 }: {
   appState: AppState;
   actionManager: ActionManager;
   showExitZenModeBtn: boolean;
-  renderWelcomeScreen: boolean;
+  footerCenter: UIChildrenComponents["FooterCenter"];
+  welcomeScreenHelp: UIWelcomeScreenComponents["HelpHint"];
 }) => {
-  const { footerCenterTunnel, welcomeScreenHelpHintTunnel } = useTunnels();
-
   const device = useDevice();
   const showFinalize =
     !appState.viewModeEnabled && appState.multiElement && device.isTouchScreen;
@@ -70,14 +73,14 @@ const Footer = ({
           </Section>
         </Stack.Col>
       </div>
-      <footerCenterTunnel.Out />
+      {footerCenter}
       <div
         className={clsx("layer-ui__wrapper__footer-right zen-mode-transition", {
           "transition-right disable-pointerEvents": appState.zenModeEnabled,
         })}
       >
         <div style={{ position: "relative" }}>
-          {renderWelcomeScreen && <welcomeScreenHelpHintTunnel.Out />}
+          {welcomeScreenHelp}
           <HelpButton
             onClick={() => actionManager.executeAction(actionShortcuts)}
           />

src/components/footer/FooterCenter.tsx

@@ -1,22 +1,18 @@
 import clsx from "clsx";
 import { useExcalidrawAppState } from "../App";
-import { useTunnels } from "../context/tunnels";
 import "./FooterCenter.scss";
 
 const FooterCenter = ({ children }: { children?: React.ReactNode }) => {
-  const { footerCenterTunnel } = useTunnels();
   const appState = useExcalidrawAppState();
   return (
-    <footerCenterTunnel.In>
-      <div
-        className={clsx("footer-center zen-mode-transition", {
-          "layer-ui__wrapper__footer-left--transition-bottom":
-            appState.zenModeEnabled,
-        })}
-      >
-        {children}
-      </div>
-    </footerCenterTunnel.In>
+    <div
+      className={clsx("footer-center zen-mode-transition", {
+        "layer-ui__wrapper__footer-left--transition-bottom":
+          appState.zenModeEnabled,
+      })}
+    >
+      {children}
+    </div>
   );
 };
 

src/components/hoc/withInternalFallback.tsx

@@ -1,52 +0,0 @@
-import { atom, useAtom } from "jotai";
-import React, { useLayoutEffect } from "react";
-import { useTunnels } from "../context/tunnels";
-
-export const withInternalFallback = <P,>(
-  componentName: string,
-  Component: React.FC<P>,
-) => {
-  const counterAtom = atom(0);
-  // flag set on initial render to tell the fallback component to skip the
-  // render until mount counter are initialized. This is because the counter
-  // is initialized in an effect, and thus we could end rendering both
-  // components at the same time until counter is initialized.
-  let preferHost = false;
-
-  const WrapperComponent: React.FC<
-    P & {
-      __fallback?: boolean;
-    }
-  > = (props) => {
-    const { jotaiScope } = useTunnels();
-    const [counter, setCounter] = useAtom(counterAtom, jotaiScope);
-
-    useLayoutEffect(() => {
-      setCounter((counter) => counter + 1);
-      return () => {
-        setCounter((counter) => counter - 1);
-      };
-    }, [setCounter]);
-
-    if (!props.__fallback) {
-      preferHost = true;
-    }
-
-    // ensure we don't render fallback and host components at the same time
-    if (
-      // either before the counters are initialized
-      (!counter && props.__fallback && preferHost) ||
-      // or after the counters are initialized, and both are rendered
-      // (this is the default when host renders as well)
-      (counter > 1 && props.__fallback)
-    ) {
-      return null;
-    }
-
-    return <Component {...props} />;
-  };
-
-  WrapperComponent.displayName = componentName;
-
-  return WrapperComponent;
-};

src/components/main-menu/MainMenu.tsx

@@ -11,74 +11,62 @@ import * as DefaultItems from "./DefaultItems";
 import { UserList } from "../UserList";
 import { t } from "../../i18n";
 import { HamburgerMenuIcon } from "../icons";
-import { withInternalFallback } from "../hoc/withInternalFallback";
 import { composeEventHandlers } from "../../utils";
-import { useTunnels } from "../context/tunnels";
 
-const MainMenu = Object.assign(
-  withInternalFallback(
-    "MainMenu",
-    ({
-      children,
-      onSelect,
-    }: {
-      children?: React.ReactNode;
-      /**
-       * Called when any menu item is selected (clicked on).
-       */
-      onSelect?: (event: Event) => void;
-    }) => {
-      const { mainMenuTunnel } = useTunnels();
-      const device = useDevice();
-      const appState = useExcalidrawAppState();
-      const setAppState = useExcalidrawSetAppState();
-      const onClickOutside = device.isMobile
-        ? undefined
-        : () => setAppState({ openMenu: null });
+const MainMenu = ({
+  children,
+  onSelect,
+}: {
+  children?: React.ReactNode;
+  /**
+   * Called when any menu item is selected (clicked on).
+   */
+  onSelect?: (event: Event) => void;
+}) => {
+  const device = useDevice();
+  const appState = useExcalidrawAppState();
+  const setAppState = useExcalidrawSetAppState();
+  const onClickOutside = device.isMobile
+    ? undefined
+    : () => setAppState({ openMenu: null });
 
-      return (
-        <mainMenuTunnel.In>
-          <DropdownMenu open={appState.openMenu === "canvas"}>
-            <DropdownMenu.Trigger
-              onToggle={() => {
-                setAppState({
-                  openMenu: appState.openMenu === "canvas" ? null : "canvas",
-                });
-              }}
-            >
-              {HamburgerMenuIcon}
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content
-              onClickOutside={onClickOutside}
-              onSelect={composeEventHandlers(onSelect, () => {
-                setAppState({ openMenu: null });
-              })}
-            >
-              {children}
-              {device.isMobile && appState.collaborators.size > 0 && (
-                <fieldset className="UserList-Wrapper">
-                  <legend>{t("labels.collaborators")}</legend>
-                  <UserList
-                    mobile={true}
-                    collaborators={appState.collaborators}
-                  />
-                </fieldset>
-              )}
-            </DropdownMenu.Content>
-          </DropdownMenu>
-        </mainMenuTunnel.In>
-      );
-    },
-  ),
-  {
-    Trigger: DropdownMenu.Trigger,
-    Item: DropdownMenu.Item,
-    ItemLink: DropdownMenu.ItemLink,
-    ItemCustom: DropdownMenu.ItemCustom,
-    Group: DropdownMenu.Group,
-    Separator: DropdownMenu.Separator,
-    DefaultItems,
-  },
-);
+  return (
+    <DropdownMenu open={appState.openMenu === "canvas"}>
+      <DropdownMenu.Trigger
+        onToggle={() => {
+          setAppState({
+            openMenu: appState.openMenu === "canvas" ? null : "canvas",
+          });
+        }}
+      >
+        {HamburgerMenuIcon}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content
+        onClickOutside={onClickOutside}
+        onSelect={composeEventHandlers(onSelect, () => {
+          setAppState({ openMenu: null });
+        })}
+      >
+        {children}
+        {device.isMobile && appState.collaborators.size > 0 && (
+          <fieldset className="UserList-Wrapper">
+            <legend>{t("labels.collaborators")}</legend>
+            <UserList mobile={true} collaborators={appState.collaborators} />
+          </fieldset>
+        )}
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  );
+};
+
+MainMenu.Trigger = DropdownMenu.Trigger;
+MainMenu.Item = DropdownMenu.Item;
+MainMenu.ItemLink = DropdownMenu.ItemLink;
+MainMenu.ItemCustom = DropdownMenu.ItemCustom;
+MainMenu.Group = DropdownMenu.Group;
+MainMenu.Separator = DropdownMenu.Separator;
+MainMenu.DefaultItems = DefaultItems;
 
 export default MainMenu;
+
+MainMenu.displayName = "Menu";

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

@@ -6,7 +6,6 @@ import {
   useExcalidrawActionManager,
   useExcalidrawAppState,
 } from "../App";
-import { useTunnels } from "../context/tunnels";
 import { ExcalLogo, HelpIcon, LoadIcon, usersIcon } from "../icons";
 
 const WelcomeScreenMenuItemContent = ({
@@ -89,22 +88,19 @@ const WelcomeScreenMenuItemLink = ({
 WelcomeScreenMenuItemLink.displayName = "WelcomeScreenMenuItemLink";
 
 const Center = ({ children }: { children?: React.ReactNode }) => {
-  const { welcomeScreenCenterTunnel } = useTunnels();
   return (
-    <welcomeScreenCenterTunnel.In>
-      <div className="welcome-screen-center">
-        {children || (
-          <>
-            <Logo />
-            <Heading>{t("welcomeScreen.defaults.center_heading")}</Heading>
-            <Menu>
-              <MenuItemLoadScene />
-              <MenuItemHelp />
-            </Menu>
-          </>
-        )}
-      </div>
-    </welcomeScreenCenterTunnel.In>
+    <div className="welcome-screen-center">
+      {children || (
+        <>
+          <Logo />
+          <Heading>{t("welcomeScreen.defaults.center_heading")}</Heading>
+          <Menu>
+            <MenuItemLoadScene />
+            <MenuItemHelp />
+          </Menu>
+        </>
+      )}
+    </div>
   );
 };
 Center.displayName = "Center";

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

@@ -1,5 +1,4 @@
 import { t } from "../../i18n";
-import { useTunnels } from "../context/tunnels";
 import {
   WelcomeScreenHelpArrow,
   WelcomeScreenMenuArrow,
@@ -7,44 +6,35 @@ import {
 } from "../icons";
 
 const MenuHint = ({ children }: { children?: React.ReactNode }) => {
-  const { welcomeScreenMenuHintTunnel } = useTunnels();
   return (
-    <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 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>
-    </welcomeScreenMenuHintTunnel.In>
+    </div>
   );
 };
 MenuHint.displayName = "MenuHint";
 
 const ToolbarHint = ({ children }: { children?: React.ReactNode }) => {
-  const { welcomeScreenToolbarHintTunnel } = useTunnels();
   return (
-    <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 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>
-    </welcomeScreenToolbarHintTunnel.In>
+      {WelcomeScreenTopToolbarArrow}
+    </div>
   );
 };
 ToolbarHint.displayName = "ToolbarHint";
 
 const HelpHint = ({ children }: { children?: React.ReactNode }) => {
-  const { welcomeScreenHelpHintTunnel } = useTunnels();
   return (
-    <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>
+    <div className="virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--help">
+      <div>{children || t("welcomeScreen.defaults.helpHint")}</div>
+      {WelcomeScreenHelpArrow}
+    </div>
   );
 };
 HelpHint.displayName = "HelpHint";

src/components/welcome-screen/WelcomeScreen.tsx

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

src/constants.ts

@@ -159,6 +159,7 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {
     toggleTheme: null,
     saveAsImage: true,
   },
+  welcomeScreen: true,
 };
 
 // breakpoints

src/css/styles.scss

@@ -8,10 +8,6 @@
 }
 
 .excalidraw {
-  --ui-font: Assistant, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI,
-    Roboto, Helvetica, Arial, sans-serif;
-  font-family: var(--ui-font);
-
   position: relative;
   overflow: hidden;
   color: var(--text-primary-color);

src/element/textElement.test.ts

@@ -12,20 +12,6 @@ describe("Test wrapText", () => {
     expect(res).toBe("Hello whats up    ");
   });
 
-  it("should work with emojis", () => {
-    const text = "😀";
-    const maxWidth = 1;
-    const res = wrapText(text, font, maxWidth);
-    expect(res).toBe("😀");
-  });
-
-  it("should show the text correctly when min width reached", () => {
-    const text = "Hello😀";
-    const maxWidth = 10;
-    const res = wrapText(text, font, maxWidth);
-    expect(res).toBe("H\ne\nl\nl\no\n😀");
-  });
-
   describe("When text doesn't contain new lines", () => {
     const text = "Hello whats up";
     [
@@ -171,7 +157,7 @@ describe("Test measureText", () => {
 
     expect(res.container).toMatchInlineSnapshot(`
       <div
-        style="position: absolute; white-space: pre-wrap; font: Emoji 20px 20px; min-height: 1em; max-width: 191px; overflow: hidden; word-break: break-word; line-height: 0px;"
+        style="position: absolute; white-space: pre-wrap; font: Emoji 20px 20px; min-height: 1em; width: 111px; overflow: hidden; word-break: break-word; line-height: 0px;"
       >
         <span
           style="display: inline-block; overflow: hidden; width: 1px; height: 1px;"

src/element/textElement.ts

@@ -61,29 +61,30 @@ export const redrawTextBoundingBox = (
     if (!isArrowElement(container)) {
       const containerDims = getContainerDims(container);
       let nextHeight = containerDims.height;
+      const boundTextElementPadding = getBoundTextElementOffset(textElement);
       if (textElement.verticalAlign === VERTICAL_ALIGN.TOP) {
-        coordY = container.y;
+        coordY = container.y + boundTextElementPadding;
       } else if (textElement.verticalAlign === VERTICAL_ALIGN.BOTTOM) {
         coordY =
           container.y +
           containerDims.height -
           metrics.height -
-          BOUND_TEXT_PADDING;
+          boundTextElementPadding;
       } else {
         coordY = container.y + containerDims.height / 2 - metrics.height / 2;
         if (metrics.height > getMaxContainerHeight(container)) {
-          nextHeight = metrics.height + BOUND_TEXT_PADDING * 2;
+          nextHeight = metrics.height + boundTextElementPadding * 2;
           coordY = container.y + nextHeight / 2 - metrics.height / 2;
         }
       }
       if (textElement.textAlign === TEXT_ALIGN.LEFT) {
-        coordX = container.x + BOUND_TEXT_PADDING;
+        coordX = container.x + boundTextElementPadding;
       } else if (textElement.textAlign === TEXT_ALIGN.RIGHT) {
         coordX =
           container.x +
           containerDims.width -
           metrics.width -
-          BOUND_TEXT_PADDING;
+          boundTextElementPadding;
       } else {
         coordX = container.x + containerDims.width / 2 - metrics.width / 2;
       }
@@ -270,11 +271,12 @@ export const measureText = (
   container.style.whiteSpace = "pre";
   container.style.font = font;
   container.style.minHeight = "1em";
+  const textWidth = getTextWidth(text, font);
 
   if (maxWidth) {
     const lineHeight = getApproxLineHeight(font);
-    // since we are adding a span of width 1px later
-    container.style.maxWidth = `${maxWidth + 1}px`;
+    container.style.width = `${String(Math.min(textWidth, maxWidth) + 1)}px`;
+
     container.style.overflow = "hidden";
     container.style.wordBreak = "break-word";
     container.style.lineHeight = `${String(lineHeight)}px`;
@@ -291,8 +293,11 @@ export const measureText = (
   container.appendChild(span);
   // Baseline is important for positioning text on canvas
   const baseline = span.offsetTop + span.offsetHeight;
-  // since we are adding a span of width 1px
-  const width = container.offsetWidth + 1;
+  // Since span adds 1px extra width to the container
+  let width = container.offsetWidth;
+  if (maxWidth && textWidth > maxWidth) {
+    width = width - 1;
+  }
   const height = container.offsetHeight;
   document.body.removeChild(container);
   if (isTestEnv()) {
@@ -327,11 +332,8 @@ const getLineWidth = (text: string, font: FontString) => {
   if (isTestEnv()) {
     return metrics.width * 10;
   }
-  // Since measureText behaves differently in different browsers
-  // OS so considering a adjustment factor of 0.2
-  const adjustmentFactor = 0.2;
 
-  return metrics.width + adjustmentFactor;
+  return metrics.width;
 };
 
 export const getTextWidth = (text: string, font: FontString) => {
@@ -357,94 +359,96 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
     // This means its newline so push it
     if (words.length === 1 && words[0] === "") {
       lines.push(words[0]);
-      return; // continue
-    }
-    let currentLine = "";
-    let currentLineWidthTillNow = 0;
+    } else {
+      let currentLine = "";
+      let currentLineWidthTillNow = 0;
 
-    let index = 0;
-    while (index < words.length) {
-      const currentWordWidth = getLineWidth(words[index], font);
+      let index = 0;
+      while (index < words.length) {
+        const currentWordWidth = getLineWidth(words[index], font);
 
-      // Start breaking longer words exceeding max width
-      if (currentWordWidth >= maxWidth) {
-        // push current line since the current word exceeds the max width
-        // so will be appended in next line
-        push(currentLine);
-        currentLine = "";
-        currentLineWidthTillNow = 0;
-        while (words[index].length > 0) {
-          const currentChar = String.fromCodePoint(
-            words[index].codePointAt(0)!,
-          );
-          const width = charWidth.calculate(currentChar, font);
-          currentLineWidthTillNow += width;
-          words[index] = words[index].slice(currentChar.length);
-
-          if (currentLineWidthTillNow >= maxWidth) {
-            // only remove last trailing space which we have added when joining words
-            if (currentLine.slice(-1) === " ") {
-              currentLine = currentLine.slice(0, -1);
-            }
-            push(currentLine);
-            currentLine = currentChar;
-            currentLineWidthTillNow = width;
-          } else {
-            currentLine += currentChar;
-          }
-        }
-        // push current line if appending space exceeds max width
-        if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
+        // Start breaking longer words exceeding max width
+        if (currentWordWidth >= maxWidth) {
+          // push current line since the current word exceeds the max width
+          // so will be appended in next line
           push(currentLine);
           currentLine = "";
           currentLineWidthTillNow = 0;
-        } else {
-          // space needs to be appended before next word
-          // as currentLine contains chars which couldn't be appended
-          // to previous line
-          currentLine += " ";
-          currentLineWidthTillNow += spaceWidth;
-        }
+          while (words[index].length > 0) {
+            const currentChar = words[index][0];
+            const width = charWidth.calculate(currentChar, font);
+            currentLineWidthTillNow += width;
+            words[index] = words[index].slice(1);
 
-        index++;
-      } else {
-        // Start appending words in a line till max width reached
-        while (currentLineWidthTillNow < maxWidth && index < words.length) {
-          const word = words[index];
-          currentLineWidthTillNow = getLineWidth(currentLine + word, font);
-
-          if (currentLineWidthTillNow >= maxWidth) {
-            push(currentLine);
-            currentLineWidthTillNow = 0;
-            currentLine = "";
-
-            break;
+            if (currentLineWidthTillNow >= maxWidth) {
+              // only remove last trailing space which we have added when joining words
+              if (currentLine.slice(-1) === " ") {
+                currentLine = currentLine.slice(0, -1);
+              }
+              push(currentLine);
+              currentLine = currentChar;
+              currentLineWidthTillNow = width;
+              if (currentLineWidthTillNow === maxWidth) {
+                currentLine = "";
+                currentLineWidthTillNow = 0;
+              }
+            } else {
+              currentLine += currentChar;
+            }
           }
-          index++;
-          currentLine += `${word} `;
-
-          // Push the word if appending space exceeds max width
+          // push current line if appending space exceeds max width
           if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
-            const word = currentLine.slice(0, -1);
-            push(word);
+            push(currentLine);
+            currentLine = "";
+            currentLineWidthTillNow = 0;
+          } else {
+            // space needs to be appended before next word
+            // as currentLine contains chars which couldn't be appended
+            // to previous line
+            currentLine += " ";
+            currentLineWidthTillNow += spaceWidth;
+          }
+
+          index++;
+        } else {
+          // Start appending words in a line till max width reached
+          while (currentLineWidthTillNow < maxWidth && index < words.length) {
+            const word = words[index];
+            currentLineWidthTillNow = getLineWidth(currentLine + word, font);
+
+            if (currentLineWidthTillNow >= maxWidth) {
+              push(currentLine);
+              currentLineWidthTillNow = 0;
+              currentLine = "";
+
+              break;
+            }
+            index++;
+            currentLine += `${word} `;
+
+            // Push the word if appending space exceeds max width
+            if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
+              const word = currentLine.slice(0, -1);
+              push(word);
+              currentLine = "";
+              currentLineWidthTillNow = 0;
+              break;
+            }
+          }
+          if (currentLineWidthTillNow === maxWidth) {
             currentLine = "";
             currentLineWidthTillNow = 0;
-            break;
           }
         }
-        if (currentLineWidthTillNow === maxWidth) {
-          currentLine = "";
-          currentLineWidthTillNow = 0;
+      }
+      if (currentLine) {
+        // only remove last trailing space which we have added when joining words
+        if (currentLine.slice(-1) === " ") {
+          currentLine = currentLine.slice(0, -1);
         }
+        push(currentLine);
       }
     }
-    if (currentLine) {
-      // only remove last trailing space which we have added when joining words
-      if (currentLine.slice(-1) === " ") {
-        currentLine = currentLine.slice(0, -1);
-      }
-      push(currentLine);
-    }
   });
   return lines.join("\n");
 };

src/element/textWysiwyg.test.tsx

@@ -862,7 +862,7 @@ describe("textWysiwyg", () => {
       resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
       expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
         Array [
-          109.5,
+          110,
           17,
         ]
       `);
@@ -910,7 +910,7 @@ describe("textWysiwyg", () => {
       resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
       expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
         Array [
-          424,
+          425,
           -539,
         ]
       `);
@@ -1026,7 +1026,7 @@ describe("textWysiwyg", () => {
       mouse.up(rectangle.x + 100, rectangle.y + 50);
       expect(rectangle.x).toBe(80);
       expect(rectangle.y).toBe(85);
-      expect(text.x).toBe(89.5);
+      expect(text.x).toBe(90);
       expect(text.y).toBe(90);
 
       Keyboard.withModifierKeys({ ctrl: true }, () => {
@@ -1165,128 +1165,5 @@ describe("textWysiwyg", () => {
       ).toEqual(36);
       expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);
     });
-
-    describe("should align correctly", () => {
-      let editor: HTMLTextAreaElement;
-
-      beforeEach(async () => {
-        Keyboard.keyPress(KEYS.ENTER);
-        editor = document.querySelector(
-          ".excalidraw-textEditorContainer > textarea",
-        ) as HTMLTextAreaElement;
-        await new Promise((r) => setTimeout(r, 0));
-        fireEvent.change(editor, { target: { value: "Hello" } });
-        editor.blur();
-        mouse.select(rectangle);
-        Keyboard.keyPress(KEYS.ENTER);
-        editor = document.querySelector(
-          ".excalidraw-textEditorContainer > textarea",
-        ) as HTMLTextAreaElement;
-        editor.select();
-      });
-
-      it("when top left", async () => {
-        fireEvent.click(screen.getByTitle("Left"));
-        fireEvent.click(screen.getByTitle("Align top"));
-        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
-          Array [
-            15,
-            20,
-          ]
-        `);
-      });
-
-      it("when top center", async () => {
-        fireEvent.click(screen.getByTitle("Center"));
-        fireEvent.click(screen.getByTitle("Align top"));
-        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
-          Array [
-            94.5,
-            20,
-          ]
-        `);
-      });
-
-      it("when top right", async () => {
-        fireEvent.click(screen.getByTitle("Right"));
-        fireEvent.click(screen.getByTitle("Align top"));
-
-        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
-            Array [
-              174,
-              20,
-            ]
-          `);
-      });
-
-      it("when center left", async () => {
-        fireEvent.click(screen.getByTitle("Center vertically"));
-        fireEvent.click(screen.getByTitle("Left"));
-        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
-            Array [
-              15,
-              25,
-            ]
-          `);
-      });
-
-      it("when center center", async () => {
-        fireEvent.click(screen.getByTitle("Center"));
-        fireEvent.click(screen.getByTitle("Center vertically"));
-
-        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
-            Array [
-              -25,
-              25,
-            ]
-          `);
-      });
-
-      it("when center right", async () => {
-        fireEvent.click(screen.getByTitle("Right"));
-        fireEvent.click(screen.getByTitle("Center vertically"));
-
-        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
-            Array [
-              174,
-              25,
-            ]
-          `);
-      });
-
-      it("when bottom left", async () => {
-        fireEvent.click(screen.getByTitle("Left"));
-        fireEvent.click(screen.getByTitle("Align bottom"));
-
-        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
-            Array [
-              15,
-              25,
-            ]
-          `);
-      });
-
-      it("when bottom center", async () => {
-        fireEvent.click(screen.getByTitle("Center"));
-        fireEvent.click(screen.getByTitle("Align bottom"));
-        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
-            Array [
-              94.5,
-              25,
-            ]
-          `);
-      });
-
-      it("when bottom right", async () => {
-        fireEvent.click(screen.getByTitle("Right"));
-        fireEvent.click(screen.getByTitle("Align bottom"));
-        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
-            Array [
-              174,
-              25,
-            ]
-          `);
-      });
-    });
   });
 });

src/element/textWysiwyg.tsx

@@ -142,11 +142,11 @@ export const textWysiwyg = ({
     const appState = app.state;
     const updatedTextElement =
       Scene.getScene(element)?.getElement<ExcalidrawTextElement>(id);
-
     if (!updatedTextElement) {
       return;
     }
     const { textAlign, verticalAlign } = updatedTextElement;
+
     const approxLineHeight = getApproxLineHeight(
       getFontString(updatedTextElement),
     );
@@ -161,7 +161,6 @@ export const textWysiwyg = ({
       // Set to element height by default since that's
       // what is going to be used for unbounded text
       let textElementHeight = updatedTextElement.height;
-
       if (container && updatedTextElement.containerId) {
         if (isArrowElement(container)) {
           const boundTextCoords =
@@ -207,6 +206,7 @@ export const textWysiwyg = ({
         maxHeight = getMaxContainerHeight(container);
 
         // autogrow container height if text exceeds
+
         if (!isArrowElement(container) && textElementHeight > maxHeight) {
           const diff = Math.min(
             textElementHeight - maxHeight,
@@ -276,6 +276,7 @@ export const textWysiwyg = ({
       // Make sure text editor height doesn't go beyond viewport
       const editorMaxHeight =
         (appState.height - viewportY) / appState.zoom.value;
+
       Object.assign(editable.style, {
         font: getFontString(updatedTextElement),
         // must be defined *after* font ¯\_(ツ)_/¯
@@ -394,12 +395,11 @@ export const textWysiwyg = ({
       // first line as well as setting height to "auto"
       // doubles the height as soon as user starts typing
       if (isBoundToContainer(element) && lines > 1) {
-        const container = getContainerElement(element);
-
         let height = "auto";
         editable.style.height = "0px";
         let heightSet = false;
         if (lines === 2) {
+          const container = getContainerElement(element);
           const actualLineCount = wrapText(
             editable.value,
             font,
@@ -416,14 +416,6 @@ export const textWysiwyg = ({
             heightSet = true;
           }
         }
-        const wrappedText = wrapText(
-          normalizeText(editable.value),
-          font,
-          getMaxContainerWidth(container!),
-        );
-        const width = getTextWidth(wrappedText, font);
-        editable.style.width = `${width}px`;
-
         if (!heightSet) {
           editable.style.height = `${editable.scrollHeight}px`;
         }

src/excalidraw-app/components/AppFooter.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-import { Footer } from "../../packages/excalidraw/index";
-import { EncryptedIcon } from "./EncryptedIcon";
-import { ExcalidrawPlusAppLink } from "./ExcalidrawPlusAppLink";
-
-export const AppFooter = React.memo(() => {
-  return (
-    <Footer>
-      <div
-        style={{
-          display: "flex",
-          gap: ".5rem",
-          alignItems: "center",
-        }}
-      >
-        <ExcalidrawPlusAppLink />
-        <EncryptedIcon />
-      </div>
-    </Footer>
-  );
-});

src/excalidraw-app/components/AppMainMenu.tsx

@@ -1,40 +0,0 @@
-import React from "react";
-import { PlusPromoIcon } from "../../components/icons";
-import { MainMenu } from "../../packages/excalidraw/index";
-import { LanguageList } from "./LanguageList";
-
-export const AppMainMenu: React.FC<{
-  setCollabDialogShown: (toggle: boolean) => any;
-  isCollaborating: boolean;
-}> = React.memo((props) => {
-  return (
-    <MainMenu>
-      <MainMenu.DefaultItems.LoadScene />
-      <MainMenu.DefaultItems.SaveToActiveFile />
-      <MainMenu.DefaultItems.Export />
-      <MainMenu.DefaultItems.SaveAsImage />
-      <MainMenu.DefaultItems.LiveCollaborationTrigger
-        isCollaborating={props.isCollaborating}
-        onSelect={() => props.setCollabDialogShown(true)}
-      />
-
-      <MainMenu.DefaultItems.Help />
-      <MainMenu.DefaultItems.ClearCanvas />
-      <MainMenu.Separator />
-      <MainMenu.ItemLink
-        icon={PlusPromoIcon}
-        href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=hamburger"
-        className="ExcalidrawPlus"
-      >
-        Excalidraw+
-      </MainMenu.ItemLink>
-      <MainMenu.DefaultItems.Socials />
-      <MainMenu.Separator />
-      <MainMenu.DefaultItems.ToggleTheme />
-      <MainMenu.ItemCustom>
-        <LanguageList style={{ width: "100%" }} />
-      </MainMenu.ItemCustom>
-      <MainMenu.DefaultItems.ChangeCanvasBackground />
-    </MainMenu>
-  );
-});

src/excalidraw-app/components/AppWelcomeScreen.tsx

@@ -1,64 +0,0 @@
-import React from "react";
-import { PlusPromoIcon } from "../../components/icons";
-import { t } from "../../i18n";
-import { WelcomeScreen } from "../../packages/excalidraw/index";
-import { isExcalidrawPlusSignedUser } from "../app_constants";
-
-export const AppWelcomeScreen: React.FC<{
-  setCollabDialogShown: (toggle: boolean) => any;
-}> = React.memo((props) => {
-  let headingContent;
-
-  if (isExcalidrawPlusSignedUser) {
-    headingContent = t("welcomeScreen.app.center_heading_plus")
-      .split(/(Excalidraw\+)/)
-      .map((bit, idx) => {
-        if (bit === "Excalidraw+") {
-          return (
-            <a
-              style={{ pointerEvents: "all" }}
-              href={`${process.env.REACT_APP_PLUS_APP}?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenSignedInUser`}
-              key={idx}
-            >
-              Excalidraw+
-            </a>
-          );
-        }
-        return bit;
-      });
-  } else {
-    headingContent = t("welcomeScreen.app.center_heading");
-  }
-
-  return (
-    <WelcomeScreen>
-      <WelcomeScreen.Hints.MenuHint>
-        {t("welcomeScreen.app.menuHint")}
-      </WelcomeScreen.Hints.MenuHint>
-      <WelcomeScreen.Hints.ToolbarHint />
-      <WelcomeScreen.Hints.HelpHint />
-      <WelcomeScreen.Center>
-        <WelcomeScreen.Center.Logo />
-        <WelcomeScreen.Center.Heading>
-          {headingContent}
-        </WelcomeScreen.Center.Heading>
-        <WelcomeScreen.Center.Menu>
-          <WelcomeScreen.Center.MenuItemLoadScene />
-          <WelcomeScreen.Center.MenuItemHelp />
-          <WelcomeScreen.Center.MenuItemLiveCollaborationTrigger
-            onSelect={() => props.setCollabDialogShown(true)}
-          />
-          {!isExcalidrawPlusSignedUser && (
-            <WelcomeScreen.Center.MenuItemLink
-              href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenGuest"
-              shortcut={null}
-              icon={PlusPromoIcon}
-            >
-              Try Excalidraw Plus!
-            </WelcomeScreen.Center.MenuItemLink>
-          )}
-        </WelcomeScreen.Center.Menu>
-      </WelcomeScreen.Center>
-    </WelcomeScreen>
-  );
-});

src/excalidraw-app/index.tsx

@@ -1,6 +1,6 @@
 import polyfill from "../polyfill";
 import LanguageDetector from "i18next-browser-languagedetector";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { trackEvent } from "../analytics";
 import { getDefaultAppState } from "../appState";
 import { ErrorDialog } from "../components/ErrorDialog";
@@ -24,7 +24,10 @@ import { t } from "../i18n";
 import {
   Excalidraw,
   defaultLang,
+  Footer,
+  MainMenu,
   LiveCollaborationTrigger,
+  WelcomeScreen,
 } from "../packages/excalidraw/index";
 import {
   AppState,
@@ -44,6 +47,7 @@ import {
 } from "../utils";
 import {
   FIREBASE_STORAGE_PREFIXES,
+  isExcalidrawPlusSignedUser,
   STORAGE_KEYS,
   SYNC_BROWSER_TABS_TIMEOUT,
 } from "./app_constants";
@@ -81,9 +85,10 @@ import { atom, Provider, useAtom } from "jotai";
 import { jotaiStore, useAtomWithInitialValue } from "../jotai";
 import { reconcileElements } from "./collab/reconciliation";
 import { parseLibraryTokensFromUrl, useHandleLibrary } from "../data/library";
-import { AppMainMenu } from "./components/AppMainMenu";
-import { AppWelcomeScreen } from "./components/AppWelcomeScreen";
-import { AppFooter } from "./components/AppFooter";
+import { EncryptedIcon } from "./components/EncryptedIcon";
+import { ExcalidrawPlusAppLink } from "./components/ExcalidrawPlusAppLink";
+import { LanguageList } from "./components/LanguageList";
+import { PlusPromoIcon } from "../components/icons";
 
 polyfill();
 
@@ -599,6 +604,96 @@ const ExcalidrawWrapper = () => {
     localStorage.setItem(STORAGE_KEYS.LOCAL_STORAGE_LIBRARY, serializedItems);
   };
 
+  const renderMenu = () => {
+    return (
+      <MainMenu>
+        <MainMenu.DefaultItems.LoadScene />
+        <MainMenu.DefaultItems.SaveToActiveFile />
+        <MainMenu.DefaultItems.Export />
+        <MainMenu.DefaultItems.SaveAsImage />
+        <MainMenu.DefaultItems.LiveCollaborationTrigger
+          isCollaborating={isCollaborating}
+          onSelect={() => setCollabDialogShown(true)}
+        />
+
+        <MainMenu.DefaultItems.Help />
+        <MainMenu.DefaultItems.ClearCanvas />
+        <MainMenu.Separator />
+        <MainMenu.ItemLink
+          icon={PlusPromoIcon}
+          href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=hamburger"
+          className="ExcalidrawPlus"
+        >
+          Excalidraw+
+        </MainMenu.ItemLink>
+        <MainMenu.DefaultItems.Socials />
+        <MainMenu.Separator />
+        <MainMenu.DefaultItems.ToggleTheme />
+        <MainMenu.ItemCustom>
+          <LanguageList style={{ width: "100%" }} />
+        </MainMenu.ItemCustom>
+        <MainMenu.DefaultItems.ChangeCanvasBackground />
+      </MainMenu>
+    );
+  };
+
+  const welcomeScreenJSX = useMemo(() => {
+    let headingContent;
+
+    if (isExcalidrawPlusSignedUser) {
+      headingContent = t("welcomeScreen.app.center_heading_plus")
+        .split(/(Excalidraw\+)/)
+        .map((bit, idx) => {
+          if (bit === "Excalidraw+") {
+            return (
+              <a
+                style={{ pointerEvents: "all" }}
+                href={`${process.env.REACT_APP_PLUS_APP}?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenSignedInUser`}
+                key={idx}
+              >
+                Excalidraw+
+              </a>
+            );
+          }
+          return bit;
+        });
+    } else {
+      headingContent = t("welcomeScreen.app.center_heading");
+    }
+
+    return (
+      <WelcomeScreen>
+        <WelcomeScreen.Hints.MenuHint>
+          {t("welcomeScreen.app.menuHint")}
+        </WelcomeScreen.Hints.MenuHint>
+        <WelcomeScreen.Hints.ToolbarHint />
+        <WelcomeScreen.Hints.HelpHint />
+        <WelcomeScreen.Center>
+          <WelcomeScreen.Center.Logo />
+          <WelcomeScreen.Center.Heading>
+            {headingContent}
+          </WelcomeScreen.Center.Heading>
+          <WelcomeScreen.Center.Menu>
+            <WelcomeScreen.Center.MenuItemLoadScene />
+            <WelcomeScreen.Center.MenuItemHelp />
+            <WelcomeScreen.Center.MenuItemLiveCollaborationTrigger
+              onSelect={() => setCollabDialogShown(true)}
+            />
+            {!isExcalidrawPlusSignedUser && (
+              <WelcomeScreen.Center.MenuItemLink
+                href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenGuest"
+                shortcut={null}
+                icon={PlusPromoIcon}
+              >
+                Try Excalidraw Plus!
+              </WelcomeScreen.Center.MenuItemLink>
+            )}
+          </WelcomeScreen.Center.Menu>
+        </WelcomeScreen.Center>
+      </WelcomeScreen>
+    );
+  }, [setCollabDialogShown]);
+
   return (
     <div
       style={{ height: "100%" }}
@@ -655,12 +750,15 @@ const ExcalidrawWrapper = () => {
           );
         }}
       >
-        <AppMainMenu
-          setCollabDialogShown={setCollabDialogShown}
-          isCollaborating={isCollaborating}
-        />
-        <AppWelcomeScreen setCollabDialogShown={setCollabDialogShown} />
-        <AppFooter />
+        {renderMenu()}
+
+        <Footer>
+          <div style={{ display: "flex", gap: ".5rem", alignItems: "center" }}>
+            <ExcalidrawPlusAppLink />
+            <EncryptedIcon />
+          </div>
+        </Footer>
+        {welcomeScreenJSX}
       </Excalidraw>
       {excalidrawAPI && <Collab excalidrawAPI={excalidrawAPI} />}
       {errorMessage && (

src/packages/excalidraw/CHANGELOG.md

@@ -11,53 +11,12 @@ The change should be grouped under one of the below section and must contain PR
 Please add the latest change on the top under the correct section.
 -->
 
-## 0.14.2 (2023-02-01)
+## Unreleased
 
 ### Features
 
-- Welcome screen no longer renders by default, and you need to render it yourself. `UIOptions.welcomeScreen` option is now deprecated. [#6117](https://github.com/excalidraw/excalidraw/pull/6117)
 - `MainMenu`, `MainMenu.Item`, and `MainMenu.ItemLink` components now all support `onSelect(event: Event): void` callback. If you call `event.preventDefault()`, it will prevent the menu from closing when an item is selected (clicked on). [#6152](https://github.com/excalidraw/excalidraw/pull/6152)
 
-### Fixes
-
-- declare css variable for font in excalidraw so its available in host [#6160](https://github.com/excalidraw/excalidraw/pull/6160)
-
-## Excalidraw Library
-
-**_This section lists the updates made to the excalidraw library and will not affect the integration._**
-
-### Features
-
-- Add hand/panning tool [#6141](https://github.com/excalidraw/excalidraw/pull/6141)
-
-- Show copy-as-png export button on firefox and show steps how to enable it [#6125](https://github.com/excalidraw/excalidraw/pull/6125)
-
-### Fixes
-
-- Horizontal padding when aligning bound text containers [#6180](https://github.com/excalidraw/excalidraw/pull/6180)
-
-- Make tunnels work in multi-instance scenarios [#6178](https://github.com/excalidraw/excalidraw/pull/6178)
-
-- Add 1px width to the container to calculate more accurately [#6174](https://github.com/excalidraw/excalidraw/pull/6174)
-
-- Quick typo fix [#6167](https://github.com/excalidraw/excalidraw/pull/6167)
-
-- Set the width correctly using measureText in editor [#6162](https://github.com/excalidraw/excalidraw/pull/6162)
-
-- :bug: broken emojis when wrap text [#6153](https://github.com/excalidraw/excalidraw/pull/6153)
-
-- Button background and svg sizes [#6155](https://github.com/excalidraw/excalidraw/pull/6155)
-
-### Styles
-
-- Change in ExportButton style [#6147](https://github.com/excalidraw/excalidraw/pull/6147) (#6148)
-
-### Build
-
-- Temporarily disable pre-commit [#6132](https://github.com/excalidraw/excalidraw/pull/6132)
-
----
-
 ## 0.14.1 (2023-01-16)
 
 ### Fixes

src/packages/excalidraw/index.tsx

@@ -53,6 +53,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
       ...DEFAULT_UI_OPTIONS.canvasActions,
       ...canvasActions,
     },
+    welcomeScreen: props.UIOptions?.welcomeScreen ?? true,
   };
 
   if (canvasActions?.export) {

src/packages/excalidraw/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@excalidraw/excalidraw",
-  "version": "0.14.2",
+  "version": "0.14.1",
   "main": "main.js",
   "types": "types/packages/excalidraw/index.d.ts",
   "files": [

src/tests/__snapshots__/linearElementEditor.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Test Linear Elements Test bound text element should match styles for te
   class="excalidraw-wysiwyg"
   data-type="wysiwyg"
   dir="auto"
-  style="position: absolute; display: inline-block; min-height: 1em; margin: 0px; padding: 0px; border: 0px; outline: 0; resize: none; background: transparent; overflow: hidden; z-index: var(--zIndex-wysiwyg); word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: content-box; width: 1px; height: 0px; left: 39.5px; top: 20px; transform: translate(0px, 0px) scale(1) rotate(0deg); text-align: center; vertical-align: middle; color: rgb(0, 0, 0); opacity: 1; filter: var(--theme-filter); max-height: -20px; font: Emoji 20px 20px; line-height: 0px; font-family: Virgil, Segoe UI Emoji;"
+  style="position: absolute; display: inline-block; min-height: 1em; margin: 0px; padding: 0px; border: 0px; outline: 0; resize: none; background: transparent; overflow: hidden; z-index: var(--zIndex-wysiwyg); word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: content-box; width: 0px; height: 0px; left: 40px; top: 20px; transform: translate(0px, 0px) scale(1) rotate(0deg); text-align: center; vertical-align: middle; color: rgb(0, 0, 0); opacity: 1; filter: var(--theme-filter); max-height: -20px; font: Emoji 20px 20px; line-height: 0px; font-family: Virgil, Segoe UI Emoji;"
   tabindex="0"
   wrap="off"
 />

src/tests/data/__snapshots__/restore.test.ts.snap

@@ -312,7 +312,7 @@ Object {
   "versionNonce": 0,
   "verticalAlign": "middle",
   "width": 100,
-  "x": -0.5,
+  "x": 0,
   "y": 0,
 }
 `;

src/tests/linearElementEditor.test.tsx

@@ -1036,7 +1036,7 @@ describe("Test Linear Elements", () => {
       expect(getBoundTextElementPosition(container, textElement))
         .toMatchInlineSnapshot(`
         Object {
-          "x": 386.5,
+          "x": 387,
           "y": 70,
         }
       `);
@@ -1095,7 +1095,7 @@ describe("Test Linear Elements", () => {
       expect(getBoundTextElementPosition(container, textElement))
         .toMatchInlineSnapshot(`
         Object {
-          "x": 189.5,
+          "x": 190,
           "y": 20,
         }
       `);

src/types.ts

@@ -385,16 +385,15 @@ type CanvasActions = Partial<{
 
 type UIOptions = Partial<{
   dockedSidebarBreakpoint: number;
+  welcomeScreen: boolean;
   canvasActions: CanvasActions;
-  /** @deprecated does nothing. Will be removed in 0.15 */
-  welcomeScreen?: boolean;
 }>;
 
 export type AppProps = Merge<
   ExcalidrawProps,
   {
     UIOptions: Merge<
-      UIOptions,
+      MarkRequired<UIOptions, "welcomeScreen">,
       {
         canvasActions: Required<CanvasActions> & { export: ExportOpts };
       }
@@ -524,3 +523,33 @@ export type Device = Readonly<{
   isTouchScreen: boolean;
   canDeviceFitSidebar: boolean;
 }>;
+
+export type UIChildrenComponents = {
+  [k in "FooterCenter" | "Menu" | "WelcomeScreen"]?: React.ReactElement<
+    { children?: React.ReactNode },
+    React.JSXElementConstructor<any>
+  >;
+};
+
+export type UIWelcomeScreenComponents = {
+  [k in
+    | "Center"
+    | "MenuHint"
+    | "ToolbarHint"
+    | "HelpHint"]?: React.ReactElement<
+    { children?: React.ReactNode },
+    React.JSXElementConstructor<any>
+  >;
+};
+
+export type UIWelcomeScreenCenterComponents = {
+  [k in
+    | "Logo"
+    | "Heading"
+    | "Menu"
+    | "MenuItemLoadScene"
+    | "MenuItemHelp"]?: React.ReactElement<
+    { children?: React.ReactNode },
+    React.JSXElementConstructor<any>
+  >;
+};

src/utils.ts

@@ -15,6 +15,7 @@ import { FontFamilyValues, FontString } from "./element/types";
 import { AppState, DataURL, LastActiveTool, Zoom } from "./types";
 import { unstable_batchedUpdates } from "react-dom";
 import { SHAPES } from "./shapes";
+import React from "react";
 import { isEraserActive, isHandToolActive } from "./appState";
 
 let mockDateTime: string | null = null;
@@ -689,6 +690,48 @@ export const queryFocusableElements = (container: HTMLElement | null) => {
     : [];
 };
 
+/**
+ * Partitions React children into named components and the rest of children.
+ *
+ * Returns known children as a dictionary of react children keyed by their
+ * displayName, and the rest children as an array.
+ *
+ * NOTE all named react components are included in the dictionary, irrespective
+ * of the supplied type parameter. This means you may be throwing away
+ * children that you aren't expecting, but should nonetheless be rendered.
+ * To guard against this (provided you care about the rest children at all),
+ * supply a second parameter with an object with keys of the expected children.
+ */
+export const getReactChildren = <
+  KnownChildren extends {
+    [k in string]?: React.ReactNode;
+  },
+>(
+  children: React.ReactNode,
+  expectedComponents?: Record<keyof KnownChildren, any>,
+) => {
+  const restChildren: React.ReactNode[] = [];
+
+  const knownChildren = React.Children.toArray(children).reduce(
+    (acc, child) => {
+      if (
+        React.isValidElement(child) &&
+        (!expectedComponents ||
+          ((child.type as any).displayName as string) in expectedComponents)
+      ) {
+        // @ts-ignore
+        acc[child.type.displayName] = child;
+      } else {
+        restChildren.push(child);
+      }
+      return acc;
+    },
+    {} as Partial<KnownChildren>,
+  );
+
+  return [knownChildren, restChildren] as const;
+};
+
 export const isShallowEqual = <T extends Record<string, any>>(
   objA: T,
   objB: T,

yarn.lock

@@ -1437,13 +1437,6 @@
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36"
   integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==
 
-"@dwelle/tunnel-rat@0.1.1":
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/@dwelle/tunnel-rat/-/tunnel-rat-0.1.1.tgz#0a0b235f8fc22ff1cf47ed102f4cc612eb51bc71"
-  integrity sha512-jb5/ZsT/af1J7tnbBXp7KO1xEyw61lWSDqJ+Bqdc6JlL3vbAvsifNhe+/mRFs6aSBCRaDqp5f2pJDHtA3MUZLw==
-  dependencies:
-    zustand "^4.3.2"
-
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -10245,13 +10238,6 @@ tsutils@^3.21.0:
   dependencies:
     tslib "^1.8.1"
 
-tunnel-rat@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/tunnel-rat/-/tunnel-rat-0.1.0.tgz#62cfbaf1b24cabac9318fe45ef26d70dc40e86fe"
-  integrity sha512-/FKZLBXCoKhA7Wz+dsqitrItaLXYmT2bkZXod+1UuR4JqHtdb54yHvHhmMgLg+eyH1Od/CCnhA2VQQ2A/54Tcw==
-  dependencies:
-    zustand "^4.1.0"
-
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
@@ -10420,11 +10406,6 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
-use-sync-external-store@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
-  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
-
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -11034,10 +11015,3 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
-
-zustand@^4.1.0, zustand@^4.3.2:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.3.2.tgz#bb121fcad84c5a569e94bd1a2695e1a93ba85d39"
-  integrity sha512-rd4haDmlwMTVWVqwvgy00ny8rtti/klRoZjFbL/MAcDnmD5qSw/RZc+Vddstdv90M5Lv6RPgWvm1Hivyn0QgJw==
-  dependencies:
-    use-sync-external-store "1.2.0"