Experimental Module API Additions (#30863)

* Module API experiments

* Move ResizerNotifier into SDKContext

so we don't have to pass it into RoomView

* Add the MultiRoomViewStore

* Make RoomViewStore able to take a roomId prop

* Different interface to add space panel items

A bit less flexible but probably simpler and will help keep things
actually consistent rather than just allowing modules to stick any
JSX into the space panel (which means they also have to worry about
styling if they *do* want it to be consistent).

* Allow space panel items to be updated

and manage which one is selected, allowing module "spaces" to be
considered spaces

* Remove fetchRoomFn from SpaceNotificationStore

which didn't really seem to have any point as it was only called from
one place

* Switch to using module api via .instance

* Fairly awful workaround

to actually break the dependency nightmare

* Add test for multiroomviewstore

* add test

* Make room names deterministic

So the tests don't fail if you add other tests or run them individually

* Add test for builtinsapi

* Update module api

* RVS is not needed as prop anymore

Since it's passed through context

* Add roomId to prop

* Remove RoomViewStore from state

This is now accessed through class field

* Fix test

* No need to pass RVS from LoggedInView

* Add RoomContextType

* Implement new builtins api

* Add tests

* Fix import

* Fix circular dependency issue

* Fix import

* Add more tests

* Improve comment

* room-id is optional

* Update license

* Add implementation for AccountDataApi

* Add implementation for Room

* Add implementation for ClientApi

* Create ClientApi in Api.ts

* Write tests

* Use nullish coalescing assignment

* Implement openRoom in NavigationApi

* Write tests

* Add implementation for StoresApi

* Write tests

* Fix circular dependency

* Add comments in lieu of type

and fix else block

* Change to class field

---------

Co-authored-by: R Midhun Suresh <hi@midhun.dev>

package.json

@@ -82,7 +82,7 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@element-hq/element-web-module-api": "1.4.1",
+        "@element-hq/element-web-module-api": "1.5.0",
         "@element-hq/web-shared-components": "file:packages/shared-components",
         "@fontsource/inconsolata": "^5",
         "@fontsource/inter": "^5",

res/css/structures/_SpacePanel.pcss

@@ -211,6 +211,10 @@ Please see LICENSE files in the repository root for full details.
             }
         }
 
+        &.mx_SpaceButton_withIcon .mx_SpaceButton_icon {
+            background-color: $panel-actions;
+        }
+
         &.mx_SpaceButton_home .mx_SpaceButton_icon::before {
             mask-image: url("@vector-im/compound-design-tokens/icons/home-solid.svg");
         }

src/PosthogTrackers.ts

@@ -31,7 +31,7 @@ const notLoggedInMap: Record<Exclude<Views, Views.LOGGED_IN>, ScreenName> = {
     [Views.LOCK_STOLEN]: "SessionLockStolen",
 };
 
-const loggedInPageTypeMap: Record<PageType, ScreenName> = {
+const loggedInPageTypeMap: Record<PageType | string, ScreenName> = {
     [PageType.HomePage]: "Home",
     [PageType.RoomView]: "Room",
     [PageType.UserView]: "User",
@@ -48,10 +48,10 @@ export default class PosthogTrackers {
     }
 
     private view: Views = Views.LOADING;
-    private pageType?: PageType;
+    private pageType?: PageType | string;
     private override?: ScreenName;
 
-    public trackPageChange(view: Views, pageType: PageType | undefined, durationMs: number): void {
+    public trackPageChange(view: Views, pageType: PageType | string | undefined, durationMs: number): void {
         this.view = view;
         this.pageType = pageType;
         if (this.override) return;

src/components/structures/LoggedInView.tsx

@@ -68,7 +68,8 @@ import { monitorSyncedPushRules } from "../../utils/pushRules/monitorSyncedPushR
 import { type ConfigOptions } from "../../SdkConfig";
 import { MatrixClientContextProvider } from "./MatrixClientContextProvider";
 import { Landmark, LandmarkNavigation } from "../../accessibility/LandmarkNavigation";
-import { SDKContext, SdkContextClass } from "../../contexts/SDKContext.ts";
+import { ModuleApi } from "../../modules/Api.ts";
+import { SDKContext } from "../../contexts/SDKContext.ts";
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
@@ -679,6 +680,10 @@ class LoggedInView extends React.Component<IProps, IState> {
     public render(): React.ReactNode {
         let pageElement;
 
+        const moduleRenderer = this.props.page_type
+            ? ModuleApi.instance.navigation.locationRenderers.get(this.props.page_type)
+            : undefined;
+
         switch (this.props.page_type) {
             case PageTypes.RoomView:
                 pageElement = (
@@ -690,7 +695,6 @@ class LoggedInView extends React.Component<IProps, IState> {
                         key={this.props.currentRoomId || "roomview"}
                         justCreatedOpts={this.props.roomJustCreatedOpts}
                         forceTimeline={this.props.forceTimeline}
-                        roomViewStore={SdkContextClass.instance.roomViewStore}
                     />
                 );
                 break;
@@ -706,6 +710,13 @@ class LoggedInView extends React.Component<IProps, IState> {
                     );
                 }
                 break;
+            default: {
+                if (moduleRenderer) {
+                    pageElement = moduleRenderer();
+                } else {
+                    console.warn(`Couldn't render page type "${this.props.page_type}"`);
+                }
+            }
         }
 
         const wrapperClasses = classNames({
@@ -747,20 +758,22 @@ class LoggedInView extends React.Component<IProps, IState> {
                                 )}
                                 <SpacePanel />
                                 {!useNewRoomList && <BackdropPanel backgroundImage={this.state.backgroundImage} />}
-                                <div
+                                {!moduleRenderer && (
-                                    className="mx_LeftPanel_wrapper--user"
+                                    <div
-                                    ref={this._resizeContainer}
+                                        className="mx_LeftPanel_wrapper--user"
-                                    data-collapsed={shouldUseMinimizedUI ? true : undefined}
+                                        ref={this._resizeContainer}
-                                >
+                                        data-collapsed={shouldUseMinimizedUI ? true : undefined}
-                                    <LeftPanel
+                                    >
-                                        pageType={this.props.page_type as PageTypes}
+                                        <LeftPanel
-                                        isMinimized={shouldUseMinimizedUI || false}
+                                            pageType={this.props.page_type as PageTypes}
-                                        resizeNotifier={this.context.resizeNotifier}
+                                            isMinimized={shouldUseMinimizedUI || false}
-                                    />
+                                            resizeNotifier={this.context.resizeNotifier}
-                                </div>
+                                        />
+                                    </div>
+                                )}
                             </div>
                         </div>
-                        <ResizeHandle passRef={this.resizeHandler} id="lp-resizer" />
+                        {!moduleRenderer && <ResizeHandle passRef={this.resizeHandler} id="lp-resizer" />}
                         <div className="mx_RoomView_wrapper">{pageElement}</div>
                     </div>
                 </div>

src/components/structures/MatrixChat.tsx

@@ -140,6 +140,7 @@ import { ShareFormat, type SharePayload } from "../../dispatcher/payloads/ShareP
 import Markdown from "../../Markdown";
 import { sanitizeHtmlParams } from "../../Linkify";
 import { isOnlyAdmin } from "../../utils/membership";
+import { ModuleApi } from "../../modules/Api.ts";
 
 // legacy export
 export { default as Views } from "../../Views";
@@ -175,9 +176,11 @@ interface IProps {
 interface IState {
     // the master view we are showing.
     view: Views;
-    // What the LoggedInView would be showing if visible
+    // What the LoggedInView would be showing if visible.
+    // A member of the enum for standard pages or a string for those provided by
+    // a module.
     // eslint-disable-next-line camelcase
-    page_type?: PageType;
+    page_type?: PageType | string;
     // The ID of the room we're viewing. This is either populated directly
     // in the case where we view a room by ID or by RoomView when it resolves
     // what ID an alias points at.
@@ -1921,8 +1924,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 userId: userId,
                 subAction: params?.action,
             });
-        } else {
+        } else if (ModuleApi.instance.navigation.locationRenderers.get(screen)) {
-            logger.info(`Ignoring showScreen for '${screen}'`);
+            this.setState({ page_type: screen });
         }
     }
 

src/components/structures/RoomView.tsx

@@ -44,6 +44,7 @@ import { type CallState, type MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 import { debounce, throttle } from "lodash";
 import { CryptoEvent } from "matrix-js-sdk/src/crypto-api";
 import { type ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";
+import { type RoomViewProps } from "@element-hq/element-web-module-api";
 
 import shouldHideEvent from "../../shouldHideEvent";
 import { _t } from "../../languageHandler";
@@ -148,7 +149,7 @@ if (DEBUG) {
     debuglog = logger.log.bind(console);
 }
 
-interface IRoomProps {
+interface IRoomProps extends RoomViewProps {
     threepidInvite?: IThreepidInvite;
     oobData?: IOOBData;
 
@@ -158,19 +159,17 @@ interface IRoomProps {
 
     // Called with the credentials of a registered user (if they were a ROU that transitioned to PWLU)
     onRegistered?(credentials: IMatrixClientCreds): void;
+
     /**
-     * The RoomViewStore instance for the room to be displayed.
+     * Only necessary if RoomView should get it's RoomViewStore through the MultiRoomViewStore.
+     * Omitting this will mean that RoomView renders for the room held in SDKContext.RoomViewStore.
      */
-    roomViewStore: RoomViewStore;
+    roomId?: string;
 }
 
 export { MainSplitContentType };
 
 export interface IRoomState {
-    /**
-     * The RoomViewStore instance for the room we are displaying
-     */
-    roomViewStore: RoomViewStore;
     room?: Room;
     roomId?: string;
     roomAlias?: string;
@@ -389,6 +388,8 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     private messagePanel: TimelinePanel | null = null;
     private roomViewBody = createRef<HTMLDivElement>();
 
+    private roomViewStore: RoomViewStore;
+
     public static contextType = SDKContext;
     declare public context: React.ContextType<typeof SDKContext>;
 
@@ -401,9 +402,14 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             throw new Error("Unable to create RoomView without MatrixClient");
         }
 
+        if (props.roomId) {
+            this.roomViewStore = this.context.multiRoomViewStore.getRoomViewStoreForRoom(props.roomId);
+        } else {
+            this.roomViewStore = context.roomViewStore;
+        }
+
         const llMembers = context.client.hasLazyLoadMembersEnabled();
         this.state = {
-            roomViewStore: props.roomViewStore,
             roomId: undefined,
             roomLoading: true,
             peekLoading: false,
@@ -535,7 +541,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     };
 
     private getMainSplitContentType = (room: Room): MainSplitContentType => {
-        if (this.state.roomViewStore.isViewingCall() || isVideoRoom(room)) {
+        if (this.roomViewStore.isViewingCall() || isVideoRoom(room)) {
             return MainSplitContentType.Call;
         }
         if (this.context.widgetLayoutStore.hasMaximisedWidget(room)) {
@@ -549,8 +555,8 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             return;
         }
 
-        const roomLoadError = this.state.roomViewStore.getRoomLoadError() ?? undefined;
+        const roomLoadError = this.roomViewStore.getRoomLoadError() ?? undefined;
-        if (!initial && !roomLoadError && this.state.roomId !== this.state.roomViewStore.getRoomId()) {
+        if (!initial && !roomLoadError && this.state.roomId !== this.roomViewStore.getRoomId()) {
             // RoomView explicitly does not support changing what room
             // is being viewed: instead it should just be re-mounted when
             // switching rooms. Therefore, if the room ID changes, we
@@ -564,7 +570,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             // it was, it means we're about to be unmounted.
             return;
         }
-        const roomViewStore = this.state.roomViewStore;
+        const roomViewStore = this.roomViewStore;
         const roomId = roomViewStore.getRoomId() ?? null;
         const roomAlias = roomViewStore.getRoomAlias() ?? undefined;
         const roomLoading = roomViewStore.isRoomLoading();
@@ -611,7 +617,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             newState.showRightPanel = false;
         }
 
-        const initialEventId = this.state.roomViewStore.getInitialEventId() ?? this.state.initialEventId;
+        const initialEventId = this.roomViewStore.getInitialEventId() ?? this.state.initialEventId;
         if (initialEventId) {
             let initialEvent = room?.findEventById(initialEventId);
             // The event does not exist in the current sync data
@@ -637,13 +643,13 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     action: Action.ShowThread,
                     rootEvent: thread.rootEvent,
                     initialEvent,
-                    highlighted: this.state.roomViewStore.isInitialEventHighlighted(),
+                    highlighted: this.roomViewStore.isInitialEventHighlighted(),
-                    scroll_into_view: this.state.roomViewStore.initialEventScrollIntoView(),
+                    scroll_into_view: this.roomViewStore.initialEventScrollIntoView(),
                 });
             } else {
                 newState.initialEventId = initialEventId;
-                newState.isInitialEventHighlighted = this.state.roomViewStore.isInitialEventHighlighted();
+                newState.isInitialEventHighlighted = this.roomViewStore.isInitialEventHighlighted();
-                newState.initialEventScrollIntoView = this.state.roomViewStore.initialEventScrollIntoView();
+                newState.initialEventScrollIntoView = this.roomViewStore.initialEventScrollIntoView();
             }
         }
 
@@ -903,7 +909,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             this.context.client.on(MatrixEventEvent.Decrypted, this.onEventDecrypted);
         }
         // Start listening for RoomViewStore updates
-        this.state.roomViewStore.on(UPDATE_EVENT, this.onRoomViewStoreUpdate);
+        this.roomViewStore.on(UPDATE_EVENT, this.onRoomViewStoreUpdate);
 
         this.context.rightPanelStore.on(UPDATE_EVENT, this.onRightPanelStoreUpdate);
 
@@ -1020,7 +1026,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
         window.removeEventListener("beforeunload", this.onPageUnload);
 
-        this.state.roomViewStore.off(UPDATE_EVENT, this.onRoomViewStoreUpdate);
+        this.roomViewStore.off(UPDATE_EVENT, this.onRoomViewStoreUpdate);
 
         this.context.rightPanelStore.off(UPDATE_EVENT, this.onRightPanelStoreUpdate);
         WidgetEchoStore.removeListener(UPDATE_EVENT, this.onWidgetEchoStoreUpdate);
@@ -1048,6 +1054,8 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             // clean up if this was a local room
             this.context.client?.store.removeRoom(this.state.room.roomId);
         }
+
+        if (this.props.roomId) this.context.multiRoomViewStore.removeRoomViewStore(this.props.roomId);
     }
 
     private onRightPanelStoreUpdate = (): void => {
@@ -2070,7 +2078,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         if (!this.state.room || !this.context?.client) return null;
         const names = this.state.room.getDefaultRoomName(this.context.client.getSafeUserId());
         return (
-            <ScopedRoomContextProvider {...this.state}>
+            <ScopedRoomContextProvider {...this.state} roomViewStore={this.roomViewStore}>
                 <LocalRoomCreateLoader
                     localRoom={localRoom}
                     names={names}
@@ -2082,7 +2090,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
     private renderLocalRoomView(localRoom: LocalRoom): ReactNode {
         return (
-            <ScopedRoomContextProvider {...this.state}>
+            <ScopedRoomContextProvider {...this.state} roomViewStore={this.roomViewStore}>
                 <LocalRoomView
                     e2eStatus={this.state.e2eStatus}
                     localRoom={localRoom}
@@ -2098,7 +2106,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
     private renderWaitingForThirdPartyRoomView(inviteEvent: MatrixEvent): ReactNode {
         return (
-            <ScopedRoomContextProvider {...this.state}>
+            <ScopedRoomContextProvider {...this.state} roomViewStore={this.roomViewStore}>
                 <WaitingForThirdPartyRoomView
                     resizeNotifier={this.context.resizeNotifier}
                     roomView={this.roomView}
@@ -2640,7 +2648,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         }
 
         return (
-            <ScopedRoomContextProvider {...this.state}>
+            <ScopedRoomContextProvider {...this.state} roomViewStore={this.roomViewStore}>
                 <div className={mainClasses} ref={this.roomView} onKeyDown={this.onReactKeyDown}>
                     {showChatEffects && this.roomView.current && (
                         <EffectsOverlay roomWidth={this.roomView.current.offsetWidth} />

src/components/views/spaces/SpacePanel.tsx

@@ -68,6 +68,8 @@ import { ThreadsActivityCentre } from "./threads-activity-centre/";
 import AccessibleButton from "../elements/AccessibleButton";
 import { Landmark, LandmarkNavigation } from "../../../accessibility/LandmarkNavigation";
 import { KeyboardShortcut } from "../settings/KeyboardShortcut";
+import { ModuleApi } from "../../../modules/Api.ts";
+import { useModuleSpacePanelItems } from "../../../modules/ExtrasApi.ts";
 import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement";
 
 const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => {
@@ -290,6 +292,8 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(
         const [invites, metaSpaces, actualSpaces, activeSpace] = useSpaces();
         const activeSpaces = activeSpace ? [activeSpace] : [];
 
+        const moduleSpaceItems = useModuleSpacePanelItems(ModuleApi.instance.extras);
+
         const metaSpacesSection = metaSpaces
             .filter((key) => !(key === MetaSpace.VideoRooms && !SettingsStore.getValue("feature_video_rooms")))
             .map((key) => {
@@ -341,6 +345,27 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(
                     </Draggable>
                 ))}
                 {children}
+                {moduleSpaceItems.map((item) => (
+                    <li
+                        key={item.spaceKey}
+                        className={classNames("mx_SpaceItem", {
+                            collapsed: isPanelCollapsed,
+                        })}
+                        role="treeitem"
+                        aria-selected={false} // TODO
+                    >
+                        <SpaceButton
+                            {...item}
+                            isNarrow={isPanelCollapsed}
+                            size="32px"
+                            selected={activeSpace === item.spaceKey}
+                            onClick={() => {
+                                SpaceStore.instance.setActiveSpace(item.spaceKey);
+                                item.onSelected?.();
+                            }}
+                        />
+                    </li>
+                ))}
                 {shouldShowComponent(UIComponent.CreateSpaces) && (
                     <CreateSpaceButton isPanelCollapsed={isPanelCollapsed} setPanelCollapsed={setPanelCollapsed} />
                 )}

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -52,6 +52,7 @@ type ButtonProps<T extends keyof HTMLElementTagNameMap> = Omit<
     className?: string;
     selected?: boolean;
     label: string;
+    icon?: JSX.Element;
     contextMenuTooltip?: string;
     notificationState?: NotificationState;
     isNarrow?: boolean;
@@ -65,6 +66,7 @@ export const SpaceButton = <T extends keyof HTMLElementTagNameMap>({
     space,
     spaceKey: _spaceKey,
     className,
+    icon,
     selected,
     label,
     contextMenuTooltip,
@@ -84,7 +86,7 @@ export const SpaceButton = <T extends keyof HTMLElementTagNameMap>({
 
     let avatar = (
         <div className="mx_SpaceButton_avatarPlaceholder">
-            <div className="mx_SpaceButton_icon" />
+            <div className="mx_SpaceButton_icon">{icon}</div>
         </div>
     );
     if (space) {
@@ -143,6 +145,7 @@ export const SpaceButton = <T extends keyof HTMLElementTagNameMap>({
                 mx_SpaceButton_active: selected,
                 mx_SpaceButton_hasMenuOpen: menuDisplayed,
                 mx_SpaceButton_narrow: isNarrow,
+                mx_SpaceButton_withIcon: Boolean(icon),
             })}
             aria-label={label}
             title={!isNarrow || menuDisplayed ? undefined : label}

src/contexts/RoomContext.ts

@@ -10,6 +10,7 @@ import { createContext } from "react";
 
 import { type IRoomState } from "../components/structures/RoomView";
 import { Layout } from "../settings/enums/Layout";
+import { type RoomViewStore } from "../stores/RoomViewStore";
 
 export enum TimelineRenderingType {
     Room = "Room",
@@ -29,11 +30,12 @@ export enum MainSplitContentType {
     Call,
 }
 
-const RoomContext = createContext<
+export interface RoomContextType extends IRoomState {
-    IRoomState & {
+    threadId?: string;
-        threadId?: string;
+    roomViewStore: RoomViewStore;
-    }
+}
->({
+
+const RoomContext = createContext<RoomContextType>({
     roomLoading: true,
     peekLoading: false,
     shouldPeek: true,

src/contexts/SDKContext.ts

@@ -25,6 +25,7 @@ import { WidgetPermissionStore } from "../stores/widgets/WidgetPermissionStore";
 import { OidcClientStore } from "../stores/oidc/OidcClientStore";
 import WidgetStore from "../stores/WidgetStore";
 import ResizeNotifier from "../utils/ResizeNotifier";
+import { MultiRoomViewStore } from "../stores/MultiRoomViewStore";
 
 // This context is available to components under MatrixChat,
 // the context must not be used by components outside a SdkContextClass tree.
@@ -66,6 +67,7 @@ export class SdkContextClass {
     protected _UserProfilesStore?: UserProfilesStore;
     protected _OidcClientStore?: OidcClientStore;
     protected _ResizeNotifier?: ResizeNotifier;
+    protected _MultiRoomViewStore?: MultiRoomViewStore;
 
     /**
      * Automatically construct stores which need to be created eagerly so they can register with
@@ -183,6 +185,13 @@ export class SdkContextClass {
         return this._ResizeNotifier;
     }
 
+    public get multiRoomViewStore(): MultiRoomViewStore {
+        if (!this._MultiRoomViewStore) {
+            this._MultiRoomViewStore = new MultiRoomViewStore(defaultDispatcher, this);
+        }
+        return this._MultiRoomViewStore;
+    }
+
     public onLoggedOut(): void {
         this._UserProfilesStore = undefined;
     }

src/modules/AccountDataApi.ts

@@ -0,0 +1,54 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { Watchable, type AccountDataApi as IAccountDataApi } from "@element-hq/element-web-module-api";
+import { ClientEvent, type MatrixEvent, type MatrixClient } from "matrix-js-sdk/src/matrix";
+
+import { MatrixClientPeg } from "../MatrixClientPeg";
+
+export class AccountDataApi implements IAccountDataApi {
+    public get(eventType: string): Watchable<unknown> {
+        const cli = MatrixClientPeg.safeGet();
+        return new AccountDataWatchable(cli, eventType);
+    }
+
+    public async set(eventType: string, content: any): Promise<void> {
+        const cli = MatrixClientPeg.safeGet();
+        //@ts-expect-error: JS-SDK accepts known event-types, intentionally allow arbitrary types.
+        await cli.setAccountData(eventType, content);
+    }
+
+    public async delete(eventType: string): Promise<void> {
+        const cli = MatrixClientPeg.safeGet();
+        //@ts-expect-error: JS-SDK accepts known event-types, intentionally allow arbitrary types.
+        await cli.deleteAccountData(eventType);
+    }
+}
+
+class AccountDataWatchable extends Watchable<unknown> {
+    public constructor(
+        private cli: MatrixClient,
+        private eventType: string,
+    ) {
+        //@ts-expect-error: JS-SDK accepts known event-types, intentionally allow arbitrary types.
+        super(cli.getAccountData(eventType)?.getContent());
+    }
+
+    private onAccountData = (event: MatrixEvent): void => {
+        if (event.getType() === this.eventType) {
+            this.value = event.getContent();
+        }
+    };
+
+    protected onFirstWatch(): void {
+        this.cli.on(ClientEvent.AccountData, this.onAccountData);
+    }
+
+    protected onLastWatch(): void {
+        this.cli.off(ClientEvent.AccountData, this.onAccountData);
+    }
+}

src/modules/Api.ts

@@ -26,6 +26,10 @@ import { WatchableProfile } from "./Profile.ts";
 import { NavigationApi } from "./Navigation.ts";
 import { openDialog } from "./Dialog.tsx";
 import { overwriteAccountAuth } from "./Auth.ts";
+import { ElementWebExtrasApi } from "./ExtrasApi.ts";
+import { ElementWebBuiltinsApi } from "./BuiltinsApi.tsx";
+import { ClientApi } from "./ClientApi.ts";
+import { StoresApi } from "./StoresApi.ts";
 
 const legacyCustomisationsFactory = <T extends object>(baseCustomisations: T) => {
     let used = false;
@@ -79,7 +83,11 @@ export class ModuleApi implements Api {
     public readonly config = new ConfigApi();
     public readonly i18n = new I18nApi();
     public readonly customComponents = new CustomComponentsApi();
+    public readonly extras = new ElementWebExtrasApi();
+    public readonly builtins = new ElementWebBuiltinsApi();
     public readonly rootNode = document.getElementById("matrixchat")!;
+    public readonly client = new ClientApi();
+    public readonly stores = new StoresApi();
 
     public createRoot(element: Element): Root {
         return createRoot(element);

src/modules/BuiltinsApi.tsx

@@ -0,0 +1,75 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { type RoomViewProps, type BuiltinsApi } from "@element-hq/element-web-module-api";
+
+import { MatrixClientPeg } from "../MatrixClientPeg";
+import type { Room } from "matrix-js-sdk/src/matrix";
+
+interface RoomViewPropsWithRoomId extends RoomViewProps {
+    roomId?: string;
+}
+
+interface RoomAvatarProps {
+    room: Room;
+    size?: string;
+}
+
+interface Components {
+    roomView: React.ComponentType<RoomViewPropsWithRoomId>;
+    roomAvatar: React.ComponentType<RoomAvatarProps>;
+}
+
+export class ElementWebBuiltinsApi implements BuiltinsApi {
+    private _roomView?: React.ComponentType<RoomViewPropsWithRoomId>;
+    private _roomAvatar?: React.ComponentType<RoomAvatarProps>;
+
+    /**
+     * Sets the components used by the API.
+     *
+     * This only really exists here because referencing these components directly causes a nightmare of
+     * circular dependencies that break the whole app, so instead we avoid referencing it here
+     * and pass it in from somewhere it's already referenced (see related comment in app.tsx).
+     *
+     * @param component The components used by the api, see {@link Components}
+     */
+    public setComponents(components: Components): void {
+        this._roomView = components.roomView;
+        this._roomAvatar = components.roomAvatar;
+    }
+
+    public getRoomViewComponent(): React.ComponentType<RoomViewPropsWithRoomId> {
+        if (!this._roomView) {
+            throw new Error("No RoomView component has been set");
+        }
+
+        return this._roomView;
+    }
+
+    public getRoomAvatarComponent(): React.ComponentType<RoomAvatarProps> {
+        if (!this._roomAvatar) {
+            throw new Error("No RoomAvatar component has been set");
+        }
+
+        return this._roomAvatar;
+    }
+
+    public renderRoomView(roomId: string): React.ReactNode {
+        const Component = this.getRoomViewComponent();
+        return <Component roomId={roomId} />;
+    }
+
+    public renderRoomAvatar(roomId: string, size?: string): React.ReactNode {
+        const room = MatrixClientPeg.safeGet().getRoom(roomId);
+        if (!room) {
+            throw new Error(`No room such room: ${roomId}`);
+        }
+        const Component = this.getRoomAvatarComponent();
+        return <Component room={room} size={size} />;
+    }
+}

src/modules/ClientApi.ts

@@ -0,0 +1,20 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+import type { ClientApi as IClientApi, Room } from "@element-hq/element-web-module-api";
+import { Room as ModuleRoom } from "./models/Room";
+import { AccountDataApi } from "./AccountDataApi";
+import { MatrixClientPeg } from "../MatrixClientPeg";
+
+export class ClientApi implements IClientApi {
+    public readonly accountData = new AccountDataApi();
+
+    public getRoom(roomId: string): Room | null {
+        const sdkRoom = MatrixClientPeg.safeGet().getRoom(roomId);
+        if (sdkRoom) return new ModuleRoom(sdkRoom);
+        return null;
+    }
+}

src/modules/ExtrasApi.ts

@@ -0,0 +1,50 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { useState } from "react";
+import { type SpacePanelItemProps, type ExtrasApi } from "@element-hq/element-web-module-api";
+import { TypedEventEmitter } from "matrix-js-sdk/src/matrix";
+
+import { useTypedEventEmitter } from "../hooks/useEventEmitter";
+
+export interface ModuleSpacePanelItem extends SpacePanelItemProps {
+    spaceKey: string;
+}
+
+enum ExtrasApiEvent {
+    SpacePanelItemsChanged = "SpacePanelItemsChanged",
+}
+
+interface EmittedEvents {
+    [ExtrasApiEvent.SpacePanelItemsChanged]: () => void;
+}
+
+export class ElementWebExtrasApi extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents> implements ExtrasApi {
+    public spacePanelItems = new Map<string, SpacePanelItemProps>();
+
+    public setSpacePanelItem(spacekey: string, item: SpacePanelItemProps): void {
+        this.spacePanelItems.set(spacekey, item);
+        this.emit(ExtrasApiEvent.SpacePanelItemsChanged);
+    }
+}
+
+export function useModuleSpacePanelItems(api: ElementWebExtrasApi): ModuleSpacePanelItem[] {
+    const getItems = (): ModuleSpacePanelItem[] => {
+        return Array.from(api.spacePanelItems.entries()).map(([spaceKey, item]) => ({
+            spaceKey,
+            ...item,
+        }));
+    };
+
+    const [items, setItems] = useState<ModuleSpacePanelItem[]>(getItems);
+
+    useTypedEventEmitter(api, ExtrasApiEvent.SpacePanelItemsChanged, () => {
+        setItems(getItems());
+    });
+
+    return items;
+}

src/modules/Navigation.ts

@@ -5,8 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type NavigationApi as INavigationApi } from "@element-hq/element-web-module-api";
+import type {
-
+    LocationRenderFunction,
+    NavigationApi as INavigationApi,
+    OpenRoomOptions,
+} from "@element-hq/element-web-module-api";
 import { navigateToPermalink } from "../utils/permalinks/navigator.ts";
 import { parsePermalink } from "../utils/permalinks/Permalinks.ts";
 import dispatcher from "../dispatcher/dispatcher.ts";
@@ -14,28 +17,32 @@ import { Action } from "../dispatcher/actions.ts";
 import type { ViewRoomPayload } from "../dispatcher/payloads/ViewRoomPayload.ts";
 
 export class NavigationApi implements INavigationApi {
+    public locationRenderers = new Map<string, LocationRenderFunction>();
+
     public async toMatrixToLink(link: string, join = false): Promise<void> {
         navigateToPermalink(link);
 
         const parts = parsePermalink(link);
         if (parts?.roomIdOrAlias) {
-            if (parts.roomIdOrAlias.startsWith("#")) {
+            this.openRoom(parts.roomIdOrAlias, {
-                dispatcher.dispatch<ViewRoomPayload>({
+                viaServers: parts.viaServers ?? undefined,
-                    action: Action.ViewRoom,
+                autoJoin: join,
-                    room_alias: parts.roomIdOrAlias,
+            });
-                    via_servers: parts.viaServers ?? undefined,
-                    auto_join: join,
-                    metricsTrigger: undefined,
-                });
-            } else {
-                dispatcher.dispatch<ViewRoomPayload>({
-                    action: Action.ViewRoom,
-                    room_id: parts.roomIdOrAlias,
-                    via_servers: parts.viaServers ?? undefined,
-                    auto_join: join,
-                    metricsTrigger: undefined,
-                });
-            }
         }
     }
+
+    public registerLocationRenderer(path: string, renderer: LocationRenderFunction): void {
+        this.locationRenderers.set(path, renderer);
+    }
+
+    public openRoom(roomIdOrAlias: string, opts: OpenRoomOptions = {}): void {
+        const key = roomIdOrAlias.startsWith("#") ? "room_alias" : "room_id";
+        dispatcher.dispatch<ViewRoomPayload>({
+            action: Action.ViewRoom,
+            [key]: roomIdOrAlias,
+            via_servers: opts.viaServers,
+            auto_join: opts.autoJoin,
+            metricsTrigger: undefined,
+        });
+    }
 }

src/modules/StoresApi.ts

@@ -0,0 +1,106 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+import {
+    type StoresApi as IStoresApi,
+    type RoomListStoreApi as IRoomListStore,
+    type Room,
+    Watchable,
+} from "@element-hq/element-web-module-api";
+
+import type { RoomListStoreV3Class, RoomListStoreV3Event } from "../stores/room-list-v3/RoomListStoreV3";
+import { Room as ModuleRoom } from "./models/Room";
+
+interface RlsEvents {
+    LISTS_LOADED_EVENT: RoomListStoreV3Event.ListsLoaded;
+    LISTS_UPDATE_EVENT: RoomListStoreV3Event.ListsUpdate;
+}
+
+export class RoomListStoreApi implements IRoomListStore {
+    private rls?: RoomListStoreV3Class;
+    private LISTS_LOADED_EVENT?: RoomListStoreV3Event.ListsLoaded;
+    private LISTS_UPDATE_EVENT?: RoomListStoreV3Event.ListsUpdate;
+    public readonly moduleLoadPromise: Promise<void>;
+
+    public constructor() {
+        this.moduleLoadPromise = this.init();
+    }
+
+    /**
+     * Load the RLS through a dynamic import. This is necessary to prevent
+     * circular dependency issues.
+     */
+    private async init(): Promise<void> {
+        const module = await import("../stores/room-list-v3/RoomListStoreV3");
+        this.rls = module.default.instance;
+        this.LISTS_LOADED_EVENT = module.LISTS_LOADED_EVENT;
+        this.LISTS_UPDATE_EVENT = module.LISTS_UPDATE_EVENT;
+    }
+
+    public getRooms(): RoomsWatchable {
+        return new RoomsWatchable(this.roomListStore, this.events);
+    }
+
+    private get events(): RlsEvents {
+        if (!this.LISTS_LOADED_EVENT || !this.LISTS_UPDATE_EVENT) {
+            throw new Error("Event type was not loaded correctly, did you forget to await waitForReady()?");
+        }
+        return { LISTS_LOADED_EVENT: this.LISTS_LOADED_EVENT, LISTS_UPDATE_EVENT: this.LISTS_UPDATE_EVENT };
+    }
+
+    private get roomListStore(): RoomListStoreV3Class {
+        if (!this.rls) {
+            throw new Error("rls is undefined, did you forget to await waitForReady()?");
+        }
+        return this.rls;
+    }
+
+    public async waitForReady(): Promise<void> {
+        // Wait for the module to load first
+        await this.moduleLoadPromise;
+
+        // Check if RLS is already loaded
+        if (!this.roomListStore.isLoadingRooms) return;
+
+        // Await a promise that resolves when RLS has loaded
+        const { promise, resolve } = Promise.withResolvers<void>();
+        const { LISTS_LOADED_EVENT } = this.events;
+        this.roomListStore.once(LISTS_LOADED_EVENT, resolve);
+        await promise;
+    }
+}
+
+class RoomsWatchable extends Watchable<Room[]> {
+    public constructor(
+        private readonly rls: RoomListStoreV3Class,
+        private readonly events: RlsEvents,
+    ) {
+        super(rls.getSortedRooms().map((sdkRoom) => new ModuleRoom(sdkRoom)));
+    }
+
+    private onRlsUpdate = (): void => {
+        this.value = this.rls.getSortedRooms().map((sdkRoom) => new ModuleRoom(sdkRoom));
+    };
+
+    protected onFirstWatch(): void {
+        this.rls.on(this.events.LISTS_UPDATE_EVENT, this.onRlsUpdate);
+    }
+
+    protected onLastWatch(): void {
+        this.rls.off(this.events.LISTS_UPDATE_EVENT, this.onRlsUpdate);
+    }
+}
+
+export class StoresApi implements IStoresApi {
+    private roomListStoreApi?: IRoomListStore;
+
+    public get roomListStore(): IRoomListStore {
+        if (!this.roomListStoreApi) {
+            this.roomListStoreApi = new RoomListStoreApi();
+        }
+        return this.roomListStoreApi;
+    }
+}

src/modules/models/Room.ts

@@ -0,0 +1,45 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type Room as IRoom, Watchable } from "@element-hq/element-web-module-api";
+import { RoomEvent, type Room as SdkRoom } from "matrix-js-sdk/src/matrix";
+
+export class Room implements IRoom {
+    public name: Watchable<string>;
+
+    public constructor(private sdkRoom: SdkRoom) {
+        this.name = new WatchableName(sdkRoom);
+    }
+
+    public getLastActiveTimestamp(): number {
+        return this.sdkRoom.getLastActiveTimestamp();
+    }
+
+    public get id(): string {
+        return this.sdkRoom.roomId;
+    }
+}
+
+/**
+ * A custom watchable for room name.
+ */
+class WatchableName extends Watchable<string> {
+    public constructor(private sdkRoom: SdkRoom) {
+        super(sdkRoom.name);
+    }
+
+    private onNameUpdate = (): void => {
+        super.value = this.sdkRoom.name;
+    };
+    protected onFirstWatch(): void {
+        this.sdkRoom.on(RoomEvent.Name, this.onNameUpdate);
+    }
+
+    protected onLastWatch(): void {
+        this.sdkRoom.off(RoomEvent.Name, this.onNameUpdate);
+    }
+}

src/stores/MultiRoomViewStore.ts

@@ -0,0 +1,67 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { logger } from "matrix-js-sdk/src/logger";
+
+import { RoomViewStore } from "./RoomViewStore";
+import { type MatrixDispatcher } from "../dispatcher/dispatcher";
+import { type SdkContextClass } from "../contexts/SDKContext";
+import { Action } from "../dispatcher/actions";
+
+/**
+ * Acts as a cache of many RoomViewStore instances, creating them as necessary
+ * given a room ID.
+ */
+export class MultiRoomViewStore {
+    /**
+     * Map from room-id to RVS instance.
+     */
+    private stores: Map<string, RoomViewStore> = new Map();
+
+    public constructor(
+        private dispatcher: MatrixDispatcher,
+        private sdkContextClass: SdkContextClass,
+    ) {}
+
+    /**
+     * Get a RVS instance for the room identified by the given roomId.
+     */
+    public getRoomViewStoreForRoom(roomId: string): RoomViewStore {
+        // Get existing store / create new store
+        const store = this.stores.has(roomId)
+            ? this.stores.get(roomId)!
+            : new RoomViewStore(this.dispatcher, this.sdkContextClass, roomId);
+
+        // RoomView component does not render the room unless you call viewRoom
+        store.viewRoom({
+            action: Action.ViewRoom,
+            room_id: roomId,
+            metricsTrigger: undefined,
+        });
+
+        // Cache the store, okay to do even if the store is already in the map
+        this.stores.set(roomId, store);
+
+        return store;
+    }
+
+    /**
+     * Remove a RVS instance that was created by {@link getRoomViewStoreForRoom}.
+     */
+    public removeRoomViewStore(roomId: string): void {
+        const didRemove = this.stores.delete(roomId);
+        if (!didRemove) {
+            logger.warn(`removeRoomViewStore called with ${roomId} but no store exists for this room.`);
+        }
+    }
+
+    public dispose(): void {
+        for (const id of this.stores.keys()) {
+            this.removeRoomViewStore(id);
+        }
+    }
+}

src/stores/RoomViewStore.tsx

@@ -153,6 +153,7 @@ export class RoomViewStore extends EventEmitter {
     public constructor(
         dis: MatrixDispatcher,
         private readonly stores: SdkContextClass,
+        private readonly lockedToRoomId?: string,
     ) {
         super();
         this.resetDispatcher(dis);
@@ -187,7 +188,7 @@ export class RoomViewStore extends EventEmitter {
 
         const lastRoomId = this.state.roomId;
         this.state = Object.assign(this.state, newState);
-        if (lastRoomId !== this.state.roomId) {
+        if (!this.lockedToRoomId && lastRoomId !== this.state.roomId) {
             if (lastRoomId) this.emitForRoom(lastRoomId, false);
             if (this.state.roomId) this.emitForRoom(this.state.roomId, true);
 
@@ -204,6 +205,9 @@ export class RoomViewStore extends EventEmitter {
     }
 
     private onDispatch(payload: ActionPayload): void {
+        if (this.lockedToRoomId && payload.room_id && this.lockedToRoomId !== payload.room_id) {
+            return;
+        }
         // eslint-disable-line @typescript-eslint/naming-convention
         switch (payload.action) {
             // view_room:
@@ -324,7 +328,7 @@ export class RoomViewStore extends EventEmitter {
         }
     }
 
-    private async viewRoom(payload: ViewRoomPayload): Promise<void> {
+    public async viewRoom(payload: ViewRoomPayload): Promise<void> {
         if (payload.room_id) {
             const room = MatrixClientPeg.safeGet().getRoom(payload.room_id);
 

src/stores/notifications/SpaceNotificationState.ts

@@ -12,15 +12,15 @@ import { NotificationLevel } from "./NotificationLevel";
 import { arrayDiff } from "../../utils/arrays";
 import { type RoomNotificationState } from "./RoomNotificationState";
 import { NotificationState, NotificationStateEvents } from "./NotificationState";
-import { type FetchRoomFn } from "./ListNotificationState";
 import { DefaultTagID } from "../room-list/models";
 import RoomListStore from "../room-list/RoomListStore";
+import { RoomNotificationStateStore } from "./RoomNotificationStateStore";
 
 export class SpaceNotificationState extends NotificationState {
     public rooms: Room[] = []; // exposed only for tests
     private states: { [spaceId: string]: RoomNotificationState } = {};
 
-    public constructor(private getRoomFn: FetchRoomFn) {
+    public constructor() {
         super();
     }
 
@@ -39,7 +39,7 @@ export class SpaceNotificationState extends NotificationState {
             state.off(NotificationStateEvents.Update, this.onRoomNotificationStateUpdate);
         }
         for (const newRoom of diff.added) {
-            const state = this.getRoomFn(newRoom);
+            const state = RoomNotificationStateStore.instance.getRoomState(newRoom);
             state.on(NotificationStateEvents.Update, this.onRoomNotificationStateUpdate);
             this.states[newRoom.roomId] = state;
         }

src/stores/spaces/SpaceStore.ts

@@ -27,7 +27,6 @@ import defaultDispatcher from "../../dispatcher/dispatcher";
 import RoomListStore from "../room-list/RoomListStore";
 import SettingsStore from "../../settings/SettingsStore";
 import DMRoomMap from "../../utils/DMRoomMap";
-import { type FetchRoomFn } from "../notifications/ListNotificationState";
 import { SpaceNotificationState } from "../notifications/SpaceNotificationState";
 import { RoomNotificationStateStore } from "../notifications/RoomNotificationStateStore";
 import { DefaultTagID } from "../room-list/models";
@@ -63,6 +62,7 @@ import { type ViewHomePagePayload } from "../../dispatcher/payloads/ViewHomePage
 import { type SwitchSpacePayload } from "../../dispatcher/payloads/SwitchSpacePayload";
 import { type AfterLeaveRoomPayload } from "../../dispatcher/payloads/AfterLeaveRoomPayload";
 import { SdkContextClass } from "../../contexts/SDKContext";
+import { ModuleApi } from "../../modules/Api.ts";
 
 const ACTIVE_SPACE_LS_KEY = "mx_active_space";
 
@@ -111,10 +111,6 @@ export const getChildOrder = (
     return [validOrder(order) ?? NaN, ts, roomId]; // NaN has lodash sort it at the end in asc
 };
 
-const getRoomFn: FetchRoomFn = (room: Room) => {
-    return RoomNotificationStateStore.instance.getRoomState(room);
-};
-
 type SpaceStoreActions =
     | SettingUpdatedPayload
     | ViewRoomPayload
@@ -258,7 +254,9 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
         if (!space || !this.matrixClient || space === this.activeSpace) return;
 
         let cliSpace: Room | null = null;
-        if (!isMetaSpace(space)) {
+        if (ModuleApi.instance.extras.spacePanelItems.has(space)) {
+            // it's a "space" provided by a module: that's good enough
+        } else if (!isMetaSpace(space)) {
             cliSpace = this.matrixClient.getRoom(space);
             if (!cliSpace?.isSpaceRoom()) return;
         } else if (!this.enabledMetaSpaces.includes(space)) {
@@ -293,6 +291,8 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
                     context_switch: true,
                     metricsTrigger: "WebSpaceContextSwitch",
                 });
+            } else if (ModuleApi.instance.extras.spacePanelItems.has(space)) {
+                // module will handle this
             } else {
                 defaultDispatcher.dispatch<ViewHomePagePayload>({
                     action: Action.ViewHomePage,
@@ -1214,7 +1214,8 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
         const lastSpaceId = window.localStorage.getItem(ACTIVE_SPACE_LS_KEY) as MetaSpace;
         const valid =
             lastSpaceId &&
-            (!isMetaSpace(lastSpaceId) ? this.matrixClient.getRoom(lastSpaceId) : enabledMetaSpaces[lastSpaceId]);
+            (ModuleApi.instance.extras.spacePanelItems.has(lastSpaceId) ||
+                (!isMetaSpace(lastSpaceId) ? this.matrixClient.getRoom(lastSpaceId) : enabledMetaSpaces[lastSpaceId]));
         if (valid) {
             // don't context switch here as it may break permalinks
             this.setActiveSpace(lastSpaceId, false);
@@ -1369,7 +1370,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
             return this.notificationStateMap.get(key)!;
         }
 
-        const state = new SpaceNotificationState(getRoomFn);
+        const state = new SpaceNotificationState();
         this.notificationStateMap.set(key, state);
         return state;
     }

src/stores/spaces/index.ts

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type Room, type HierarchyRoom } from "matrix-js-sdk/src/matrix";
+import { type HierarchyRoom } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../languageHandler";
 
@@ -42,7 +42,15 @@ export const getMetaSpaceName = (spaceKey: MetaSpace, allRoomsInHome = false): s
     }
 };
 
-export type SpaceKey = MetaSpace | Room["roomId"];
+/**
+ * This can be:
+ *  - a MetaSpace
+ *  - space ID (ie. a room ID)
+ *  - A 'custom' space from a module
+ * Unfortunately we can't type the last set as we don't know what modules will define,
+ * so we can't do better than string here.
+ */
+export type SpaceKey = string;
 
 export interface ISuggestedRoom extends HierarchyRoom {
     viaServers: string[];

src/vector/app.tsx

@@ -30,6 +30,9 @@ import { ModuleRunner } from "../modules/ModuleRunner";
 import { parseQs } from "./url_utils";
 import { getInitialScreenAfterLogin, getScreenFromLocation, init as initRouting, onNewScreen } from "./routing";
 import { UserFriendlyError } from "../languageHandler";
+import { ModuleApi } from "../modules/Api";
+import { RoomView } from "../components/structures/RoomView";
+import RoomAvatar from "../components/views/avatars/RoomAvatar";
 
 logger.log(`Application is running in ${process.env.NODE_ENV} mode`);
 
@@ -53,6 +56,10 @@ function onTokenLoginCompleted(): void {
 }
 
 export async function loadApp(fragParams: QueryDict, matrixChatRef: React.Ref<MatrixChat>): Promise<ReactElement> {
+    // XXX: This lives here because certain components import so many things that importing it in a sensible place (eg.
+    // the builtins module or init.tsx) causes a circular dependency.
+    ModuleApi.instance.builtins.setComponents({ roomView: RoomView, roomAvatar: RoomAvatar });
+
     initRouting();
     const platform = PlatformPeg.get();
 

test/test-utils/room.ts

@@ -10,8 +10,8 @@ import { type MockedObject } from "jest-mock";
 import { type EventTimeline, EventType, type MatrixClient, type MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 
-import { type IRoomState, MainSplitContentType } from "../../src/components/structures/RoomView";
+import { MainSplitContentType } from "../../src/components/structures/RoomView";
-import { TimelineRenderingType } from "../../src/contexts/RoomContext";
+import { type RoomContextType, TimelineRenderingType } from "../../src/contexts/RoomContext";
 import { Layout } from "../../src/settings/enums/Layout";
 import { mkEvent } from "./test-utils";
 import { SdkContextClass } from "../../src/contexts/SDKContext";
@@ -43,7 +43,7 @@ export const makeRoomWithStateEvents = (
     return room1;
 };
 
-export function getRoomContext(room: Room, override: Partial<IRoomState>): IRoomState {
+export function getRoomContext(room: Room, override: Partial<RoomContextType>): RoomContextType {
     return {
         roomViewStore: SdkContextClass.instance.roomViewStore,
         room,

test/test-utils/test-utils.ts

@@ -650,6 +650,7 @@ export function mkStubRoom(
         getJoinedMembers: jest.fn().mockReturnValue([]),
         getLiveTimeline: jest.fn().mockReturnValue(stubTimeline),
         getLastLiveEvent: jest.fn().mockReturnValue(undefined),
+        getLastActiveTimestamp: jest.fn().mockReturnValue(1183140000),
         getMember: jest.fn().mockReturnValue({
             userId: "@member:domain.bla",
             name: "Member",

test/unit-tests/components/structures/MessagePanel-test.tsx

@@ -15,7 +15,7 @@ import { render } from "jest-matrix-react";
 
 import MessagePanel, { shouldFormContinuation } from "../../../../src/components/structures/MessagePanel";
 import SettingsStore from "../../../../src/settings/SettingsStore";
-import RoomContext, { TimelineRenderingType } from "../../../../src/contexts/RoomContext";
+import RoomContext, { type RoomContextType, TimelineRenderingType } from "../../../../src/contexts/RoomContext";
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
 import * as TestUtilsMatrix from "../../../test-utils";
 import {
@@ -29,7 +29,6 @@ import {
     mockClientPushProcessor,
 } from "../../../test-utils";
 import type ResizeNotifier from "../../../../src/utils/ResizeNotifier";
-import { type IRoomState } from "../../../../src/components/structures/RoomView";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import { ScopedRoomContextProvider } from "../../../../src/contexts/ScopedRoomContext.tsx";
 import { SdkContextClass } from "../../../../src/contexts/SDKContext.ts";
@@ -92,9 +91,9 @@ describe("MessagePanel", function () {
         showAvatarChanges: false,
         showDisplaynameChanges: true,
         showHiddenEvents: false,
-    } as unknown as IRoomState;
+    } as unknown as RoomContextType;
 
-    const getComponent = (props = {}, roomContext: Partial<IRoomState> = {}) => (
+    const getComponent = (props = {}, roomContext: Partial<RoomContextType> = {}) => (
         <ScopedRoomContextProvider {...defaultRoomContext} {...roomContext}>
             <MessagePanel {...defaultProps} {...props} />
         </ScopedRoomContextProvider>

test/unit-tests/components/structures/RoomView-test.tsx

@@ -89,7 +89,6 @@ describe("RoomView", () => {
     let cli: MockedObject<MatrixClient>;
     let room: Room;
     let rooms: Map<string, Room>;
-    let roomCount = 0;
     let stores: SdkContextClass;
     let crypto: CryptoApi;
 
@@ -100,7 +99,9 @@ describe("RoomView", () => {
         mockPlatformPeg({ reload: () => {} });
         cli = mocked(stubClient());
 
-        room = new Room(`!${roomCount++}:example.org`, cli, "@alice:example.org");
+        const roomName = (expect.getState().currentTestName ?? "").replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
+
+        room = new Room(`!${roomName}:example.org`, cli, "@alice:example.org");
         jest.spyOn(room, "findPredecessor");
         room.getPendingEvents = () => [];
         rooms = new Map();
@@ -158,7 +159,6 @@ describe("RoomView", () => {
                         threepidInvite={undefined as any}
                         forceTimeline={false}
                         ref={ref}
-                        roomViewStore={stores.roomViewStore}
                     />
                 </SDKContext.Provider>
             </MatrixClientContext.Provider>,
@@ -197,7 +197,6 @@ describe("RoomView", () => {
                         threepidInvite={undefined}
                         forceTimeline={false}
                         onRegistered={jest.fn()}
-                        roomViewStore={stores.roomViewStore}
                     />
                 </SDKContext.Provider>
             </MatrixClientContext.Provider>,
@@ -211,6 +210,26 @@ describe("RoomView", () => {
         return ref.current!;
     };
 
+    it("gets a room view store from MultiRoomViewStore when given a room ID", async () => {
+        stores.multiRoomViewStore.getRoomViewStoreForRoom = jest.fn().mockReturnValue(stores.roomViewStore);
+
+        const ref = createRef<RoomView>();
+        render(
+            <MatrixClientContext.Provider value={cli}>
+                <SDKContext.Provider value={stores}>
+                    <RoomView
+                        threepidInvite={undefined as any}
+                        forceTimeline={false}
+                        ref={ref}
+                        roomId="!room:example.dummy"
+                    />
+                </SDKContext.Provider>
+            </MatrixClientContext.Provider>,
+        );
+
+        expect(stores.multiRoomViewStore.getRoomViewStoreForRoom).toHaveBeenCalledWith("!room:example.dummy");
+    });
+
     it("should show member list right panel phase on Action.ViewUser without `payload.member`", async () => {
         const spy = jest.spyOn(stores.rightPanelStore, "showOrHidePhase");
         await renderRoomView(false);
@@ -707,7 +726,7 @@ describe("RoomView", () => {
         });
 
         it("should switch rooms when edit is clicked on a search result for a different room", async () => {
-            const room2 = new Room(`!${roomCount++}:example.org`, cli, "@alice:example.org");
+            const room2 = new Room(`!roomswitchtest:example.org`, cli, "@alice:example.org");
             rooms.set(room2.roomId, room2);
 
             room.getMyMembership = jest.fn().mockReturnValue(KnownMembership.Join);

test/unit-tests/components/structures/ThreadPanel-test.tsx

@@ -26,8 +26,8 @@ import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalink
 import ResizeNotifier from "../../../../src/utils/ResizeNotifier";
 import { createTestClient, getRoomContext, mkRoom, mockPlatformPeg, stubClient } from "../../../test-utils";
 import { mkThread } from "../../../test-utils/threads";
-import { type IRoomState } from "../../../../src/components/structures/RoomView";
 import { ScopedRoomContextProvider } from "../../../../src/contexts/ScopedRoomContext.tsx";
+import type { RoomContextType } from "../../../../src/contexts/RoomContext.ts";
 
 jest.mock("../../../../src/utils/Feedback");
 
@@ -79,7 +79,7 @@ describe("ThreadPanel", () => {
             mockRoom.getLastLiveEvent.mockReturnValue(mockEvent);
             const roomContextObject = {
                 room: mockRoom,
-            } as unknown as IRoomState;
+            } as unknown as RoomContextType;
             const { container } = render(
                 <ScopedRoomContextProvider {...roomContextObject}>
                     <MatrixClientContext.Provider value={mockClient}>

test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -731,12 +731,12 @@ exports[`RoomView invites renders an invite room 1`] = `
         class="mx_RoomPreviewBar_message"
       >
         <h3>
-          Do you want to join !2:example.org?
+          Do you want to join !roomviewinvitesrendersaninviteroom:example.org?
         </h3>
         <p>
           <span
             class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
-            data-color="4"
+            data-color="2"
             data-testid="avatar-img"
             data-type="round"
             role="presentation"
@@ -817,7 +817,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
             aria-label="Open room settings"
             aria-live="off"
             class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
-            data-color="5"
+            data-color="1"
             data-testid="avatar-img"
             data-type="round"
             role="button"
@@ -844,7 +844,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
                 <span
                   class="mx_RoomHeader_truncated mx_lineClamp"
                 >
-                  !12:example.org
+                  !roomviewshouldnotdisplaythetimelinewhentheroomencryptionisloading:example.org
                 </span>
               </div>
             </div>
@@ -1029,7 +1029,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
             aria-label="Open room settings"
             aria-live="off"
             class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
-            data-color="5"
+            data-color="1"
             data-testid="avatar-img"
             data-type="round"
             role="button"
@@ -1056,7 +1056,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
                 <span
                   class="mx_RoomHeader_truncated mx_lineClamp"
                 >
-                  !12:example.org
+                  !roomviewshouldnotdisplaythetimelinewhentheroomencryptionisloading:example.org
                 </span>
               </div>
             </div>
@@ -1419,7 +1419,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
             aria-label="Open room settings"
             aria-live="off"
             class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
-            data-color="4"
+            data-color="2"
             data-testid="avatar-img"
             data-type="round"
             role="button"
@@ -1446,7 +1446,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                 <span
                   class="mx_RoomHeader_truncated mx_lineClamp"
                 >
-                  !17:example.org
+                  !roomviewvideoroomsshouldrenderjoinedvideoroomview:example.org
                 </span>
               </div>
             </div>

test/unit-tests/components/views/audio_messages/RecordingPlayback-test.tsx

@@ -15,10 +15,9 @@ import RecordingPlayback, {
     PlaybackLayout,
 } from "../../../../../src/components/views/audio_messages/RecordingPlayback";
 import { Playback } from "../../../../../src/audio/Playback";
-import { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
+import { type RoomContextType, TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
 import { createAudioContext } from "../../../../../src/audio/compat";
 import { flushPromises } from "../../../../test-utils";
-import { type IRoomState } from "../../../../../src/components/structures/RoomView";
 import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";
 
 jest.mock("../../../../../src/WorkerManager", () => ({
@@ -54,7 +53,10 @@ describe("<RecordingPlayback />", () => {
 
     const mockChannelData = new Float32Array();
 
-    const defaultRoom = { roomId: "!room:server.org", timelineRenderingType: TimelineRenderingType.File } as IRoomState;
+    const defaultRoom = {
+        roomId: "!room:server.org",
+        timelineRenderingType: TimelineRenderingType.File,
+    } as RoomContextType;
     const getComponent = (props: React.ComponentProps<typeof RecordingPlayback>, room = defaultRoom) =>
         render(
             <ScopedRoomContextProvider {...room}>

test/unit-tests/components/views/beacon/RoomCallBanner-test.tsx

@@ -31,8 +31,7 @@ import { WidgetMessagingStore } from "../../../../../src/stores/widgets/WidgetMe
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
 import { ConnectionState } from "../../../../../src/models/Call";
 import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext";
-import { type IRoomState } from "../../../../../src/components/structures/RoomView";
+import RoomContext, { type RoomContextType } from "../../../../../src/contexts/RoomContext";
-import RoomContext from "../../../../../src/contexts/RoomContext";
 
 describe("<RoomCallBanner />", () => {
     let client: Mocked<MatrixClient>;
@@ -51,7 +50,7 @@ describe("<RoomCallBanner />", () => {
         emit: jest.fn(),
     };
 
-    let roomContext: IRoomState;
+    let roomContext: RoomContextType;
 
     beforeEach(() => {
         stubClient();
@@ -79,7 +78,7 @@ describe("<RoomCallBanner />", () => {
             ...RoomContext,
             roomId: room.roomId,
             roomViewStore: mockRoomViewStore,
-        } as unknown as IRoomState;
+        } as unknown as RoomContextType;
     });
 
     afterEach(async () => {

test/unit-tests/components/views/context_menus/MessageContextMenu-test.tsx

@@ -27,8 +27,7 @@ import { mocked } from "jest-mock";
 import userEvent from "@testing-library/user-event";
 
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
-import { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
+import { type RoomContextType, TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
-import { type IRoomState } from "../../../../../src/components/structures/RoomView";
 import { canEditContent } from "../../../../../src/utils/EventUtils";
 import { copyPlaintext, getSelectedText } from "../../../../../src/utils/strings";
 import MessageContextMenu from "../../../../../src/components/views/context_menus/MessageContextMenu";
@@ -711,18 +710,18 @@ describe("MessageContextMenu", () => {
     });
 });
 
-function createRightClickMenuWithContent(eventContent: object, context?: Partial<IRoomState>): RenderResult {
+function createRightClickMenuWithContent(eventContent: object, context?: Partial<RoomContextType>): RenderResult {
     return createMenuWithContent(eventContent, { rightClick: true }, context);
 }
 
-function createRightClickMenu(mxEvent: MatrixEvent, context?: Partial<IRoomState>): RenderResult {
+function createRightClickMenu(mxEvent: MatrixEvent, context?: Partial<RoomContextType>): RenderResult {
     return createMenu(mxEvent, { rightClick: true }, context);
 }
 
 function createMenuWithContent(
     eventContent: object,
     props?: Partial<MessageContextMenu["props"]>,
-    context?: Partial<IRoomState>,
+    context?: Partial<RoomContextType>,
 ): RenderResult {
     // XXX: We probably shouldn't be assuming all events are going to be message events, but considering this
     // test is for the Message context menu, it's a fairly safe assumption.
@@ -739,7 +738,7 @@ function makeDefaultRoom(): Room {
 function createMenu(
     mxEvent: MatrixEvent,
     props?: Partial<MessageContextMenu["props"]>,
-    context: Partial<IRoomState> = {},
+    context: Partial<RoomContextType> = {},
     beacons: Map<BeaconIdentifier, Beacon> = new Map(),
     room: Room = makeDefaultRoom(),
 ): RenderResult {
@@ -755,7 +754,7 @@ function createMenu(
     client.getRoom = jest.fn().mockReturnValue(room);
 
     return render(
-        <ScopedRoomContextProvider {...(context as IRoomState)}>
+        <ScopedRoomContextProvider {...(context as RoomContextType)}>
             <MessageContextMenu mxEvent={mxEvent} onFinished={jest.fn()} {...props} />
         </ScopedRoomContextProvider>,
     );

test/unit-tests/components/views/messages/DateSeparator-test.tsx

@@ -26,8 +26,7 @@ import {
 } from "../../../../test-utils";
 import DateSeparator from "../../../../../src/components/views/messages/DateSeparator";
 import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext";
-import { type IRoomState } from "../../../../../src/components/structures/RoomView";
+import RoomContext, { type RoomContextType } from "../../../../../src/contexts/RoomContext";
-import RoomContext from "../../../../../src/contexts/RoomContext";
 
 jest.mock("../../../../../src/settings/SettingsStore");
 
@@ -50,7 +49,7 @@ describe("DateSeparator", () => {
         ...RoomContext,
         roomId,
         roomViewStore: mockRoomViewStore,
-    } as unknown as IRoomState;
+    } as unknown as RoomContextType;
 
     const mockClient = getMockClientWithEventEmitter({
         timestampToEvent: jest.fn(),

test/unit-tests/components/views/messages/MessageActionBar-test.tsx

@@ -29,8 +29,7 @@ import {
     makeBeaconInfoEvent,
 } from "../../../../test-utils";
 import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
-import RoomContext, { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
+import RoomContext, { type RoomContextType, TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
-import { type IRoomState } from "../../../../../src/components/structures/RoomView";
 import dispatcher from "../../../../../src/dispatcher/dispatcher";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 import { Action } from "../../../../../src/dispatcher/actions";
@@ -115,8 +114,8 @@ describe("<MessageActionBar />", () => {
         canSendMessages: true,
         canReact: true,
         room,
-    } as unknown as IRoomState;
+    } as unknown as RoomContextType;
-    const getComponent = (props = {}, roomContext: Partial<IRoomState> = {}) =>
+    const getComponent = (props = {}, roomContext: Partial<RoomContextType> = {}) =>
         render(
             <ScopedRoomContextProvider {...defaultRoomContext} {...roomContext}>
                 <MessageActionBar {...defaultProps} {...props} />

test/unit-tests/components/views/rooms/EditMessageComposer-test.tsx

@@ -27,12 +27,12 @@ import {
 import DocumentOffset from "../../../../../src/editor/offset";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 import EditorStateTransfer from "../../../../../src/utils/EditorStateTransfer";
-import { type IRoomState } from "../../../../../src/components/structures/RoomView";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import Autocompleter, { type IProviderCompletions } from "../../../../../src/autocomplete/Autocompleter";
 import NotifProvider from "../../../../../src/autocomplete/NotifProvider";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
 import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";
+import type { RoomContextType } from "../../../../../src/contexts/RoomContext.ts";
 
 describe("<EditMessageComposer/>", () => {
     const userId = "@alice:server.org";
@@ -75,7 +75,7 @@ describe("<EditMessageComposer/>", () => {
 
     const defaultRoomContext = getRoomContext(room, {});
 
-    const getComponent = (editState: EditorStateTransfer, roomContext: IRoomState = defaultRoomContext) =>
+    const getComponent = (editState: EditorStateTransfer, roomContext: RoomContextType = defaultRoomContext) =>
         render(<EditMessageComposerWithMatrixClient editState={editState} />, {
             wrapper: ({ children }) => (
                 <MatrixClientContext.Provider value={mockClient}>

test/unit-tests/components/views/rooms/EventTile-test.tsx

@@ -30,14 +30,13 @@ import { mkEncryptedMatrixEvent } from "matrix-js-sdk/src/testing";
 
 import EventTile, { type EventTileProps } from "../../../../../src/components/views/rooms/EventTile";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
-import { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
+import { type RoomContextType, TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
 import { filterConsole, flushPromises, getRoomContext, mkEvent, mkMessage, stubClient } from "../../../../test-utils";
 import { mkThread } from "../../../../test-utils/threads";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
 import dis from "../../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../../src/dispatcher/actions";
-import { type IRoomState } from "../../../../../src/components/structures/RoomView";
 import PinningUtils from "../../../../../src/utils/PinningUtils";
 import { Layout } from "../../../../../src/settings/enums/Layout";
 import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";
@@ -52,7 +51,7 @@ describe("EventTile", () => {
 
     /** wrap the EventTile up in context providers, and with basic properties, as it would be by MessagePanel normally. */
     function WrappedEventTile(props: {
-        roomContext: IRoomState;
+        roomContext: RoomContextType;
         eventTilePropertyOverrides?: Partial<EventTileProps>;
     }) {
         return (
@@ -71,7 +70,7 @@ describe("EventTile", () => {
     function getComponent(
         overrides: Partial<EventTileProps> = {},
         renderingType: TimelineRenderingType = TimelineRenderingType.Room,
-        roomContext: Partial<IRoomState> = {},
+        roomContext: Partial<RoomContextType> = {},
     ) {
         const context = getRoomContext(room, {
             timelineRenderingType: renderingType,

test/unit-tests/components/views/rooms/MessageComposer-test.tsx

@@ -24,7 +24,6 @@ import {
 import MessageComposer from "../../../../../src/components/views/rooms/MessageComposer";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
-import { type IRoomState } from "../../../../../src/components/structures/RoomView";
 import ResizeNotifier from "../../../../../src/utils/ResizeNotifier";
 import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
 import { LocalRoom } from "../../../../../src/models/LocalRoom";
@@ -36,6 +35,7 @@ import { addTextToComposerRTL } from "../../../../test-utils/composer";
 import UIStore, { UI_EVENTS } from "../../../../../src/stores/UIStore";
 import { Action } from "../../../../../src/dispatcher/actions";
 import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";
+import type { RoomContextType } from "../../../../../src/contexts/RoomContext.ts";
 
 const openStickerPicker = async (): Promise<void> => {
     await userEvent.click(screen.getByLabelText("More options"));
@@ -155,7 +155,7 @@ describe("MessageComposer", () => {
         });
 
         describe("when receiving a »reply_to_event«", () => {
-            let roomContext: IRoomState;
+            let roomContext: RoomContextType;
             let resizeNotifier: ResizeNotifier;
 
             beforeEach(() => {
@@ -458,7 +458,7 @@ function wrapAndRender(
         canSendMessages,
         tombstone,
         narrow,
-    } as unknown as IRoomState;
+    } as unknown as RoomContextType;
 
     const defaultProps = {
         room,

test/unit-tests/components/views/rooms/MessageComposerButtons-test.tsx

@@ -11,10 +11,10 @@ import { render, screen, waitFor } from "jest-matrix-react";
 
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import { createTestClient, getRoomContext, mkStubRoom } from "../../../../test-utils";
-import { type IRoomState } from "../../../../../src/components/structures/RoomView";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
 import MessageComposerButtons from "../../../../../src/components/views/rooms/MessageComposerButtons";
 import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";
+import type { RoomContextType } from "../../../../../src/contexts/RoomContext.ts";
 
 describe("MessageComposerButtons", () => {
     // @ts-ignore - we're deliberately not implementing the whole interface here, but
@@ -50,7 +50,7 @@ describe("MessageComposerButtons", () => {
 
     function wrapAndRender(component: React.ReactElement, narrow: boolean) {
         const mockRoom = mkStubRoom("myfakeroom", "myfakeroom", mockClient) as any;
-        const defaultRoomContext: IRoomState = getRoomContext(mockRoom, { narrow });
+        const defaultRoomContext: RoomContextType = getRoomContext(mockRoom, { narrow });
 
         return render(
             <MatrixClientContext.Provider value={mockClient}>

test/unit-tests/components/views/rooms/NewRoomIntro-test.tsx

@@ -22,16 +22,16 @@ import {
 } from "../../../../test-utils";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import NewRoomIntro from "../../../../../src/components/views/rooms/NewRoomIntro";
-import { type IRoomState } from "../../../../../src/components/structures/RoomView";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
 import { DirectoryMember } from "../../../../../src/utils/direct-messages";
 import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";
 import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
+import type { RoomContextType } from "../../../../../src/contexts/RoomContext.ts";
 
 const renderNewRoomIntro = (client: MatrixClient, room: Room | LocalRoom) => {
     render(
         <MatrixClientContext.Provider value={client}>
-            <ScopedRoomContextProvider {...({ room, roomId: room.roomId } as unknown as IRoomState)}>
+            <ScopedRoomContextProvider {...({ room, roomId: room.roomId } as unknown as RoomContextType)}>
                 <NewRoomIntro />
             </ScopedRoomContextProvider>
         </MatrixClientContext.Provider>,

test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx

@@ -41,8 +41,7 @@ import RoomHeader from "../../../../../../src/components/views/rooms/RoomHeader/
 import DMRoomMap from "../../../../../../src/utils/DMRoomMap";
 import { MatrixClientPeg } from "../../../../../../src/MatrixClientPeg";
 import { ScopedRoomContextProvider } from "../../../../../../src/contexts/ScopedRoomContext";
-import { type IRoomState } from "../../../../../../src/components/structures/RoomView";
+import RoomContext, { type RoomContextType } from "../../../../../../src/contexts/RoomContext";
-import RoomContext from "../../../../../../src/contexts/RoomContext";
 import RightPanelStore from "../../../../../../src/stores/right-panel/RightPanelStore";
 import { RightPanelPhases } from "../../../../../../src/stores/right-panel/RightPanelStorePhases";
 import LegacyCallHandler from "../../../../../../src/LegacyCallHandler";
@@ -85,7 +84,7 @@ describe("RoomHeader", () => {
         emit: jest.fn(),
     };
 
-    let roomContext: IRoomState;
+    let roomContext: RoomContextType;
 
     function getWrapper(): RenderOptions {
         return {
@@ -121,7 +120,7 @@ describe("RoomHeader", () => {
             ...RoomContext,
             roomId: ROOM_ID,
             roomViewStore: mockRoomViewStore,
-        } as unknown as IRoomState;
+        } as unknown as RoomContextType;
     });
 
     afterEach(() => {

test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx

@@ -17,7 +17,7 @@ import SendMessageComposer, {
     isQuickReaction,
 } from "../../../../../src/components/views/rooms/SendMessageComposer";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
-import { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
+import { type RoomContextType, TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
 import EditorModel from "../../../../../src/editor/model";
 import { createPartCreator } from "../../../editor/mock";
 import { createTestClient, mkEvent, mkStubRoom, stubClient } from "../../../../test-utils";
@@ -25,7 +25,7 @@ import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
 import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
 import DocumentOffset from "../../../../../src/editor/offset";
 import { Layout } from "../../../../../src/settings/enums/Layout";
-import { type IRoomState, MainSplitContentType } from "../../../../../src/components/structures/RoomView";
+import { MainSplitContentType } from "../../../../../src/components/structures/RoomView";
 import { mockPlatformPeg } from "../../../../test-utils/platform";
 import { doMaybeLocalRoomAction } from "../../../../../src/utils/local-room";
 import { addTextToComposer } from "../../../../test-utils/composer";
@@ -37,7 +37,7 @@ jest.mock("../../../../../src/utils/local-room", () => ({
 }));
 
 describe("<SendMessageComposer/>", () => {
-    const defaultRoomContext: IRoomState = {
+    const defaultRoomContext: RoomContextType = {
         roomViewStore: SdkContextClass.instance.roomViewStore,
         roomLoading: true,
         peekLoading: false,

test/unit-tests/components/views/rooms/wysiwyg_composer/utils.ts

@@ -9,8 +9,8 @@ Please see LICENSE files in the repository root for full details.
 import { type EventTimeline, type MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import { getRoomContext, mkEvent, mkStubRoom, stubClient } from "../../../../../test-utils";
-import { type IRoomState } from "../../../../../../src/components/structures/RoomView";
 import EditorStateTransfer from "../../../../../../src/utils/EditorStateTransfer";
+import type { RoomContextType } from "../../../../../../src/contexts/RoomContext";
 
 export function createMocks(eventContent = "Replying <strong>to</strong> this new content") {
     const mockClient = stubClient();
@@ -31,7 +31,7 @@ export function createMocks(eventContent = "Replying <strong>to</strong> this ne
         return eventId === mockEvent.getId() ? mockEvent : null;
     });
 
-    const defaultRoomContext: IRoomState = getRoomContext(mockRoom, {
+    const defaultRoomContext: RoomContextType = getRoomContext(mockRoom, {
         liveTimeline: { getEvents: (): MatrixEvent[] => [] } as unknown as EventTimeline,
     });
 

test/unit-tests/modules/AccountDataApi-test.ts

@@ -0,0 +1,72 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { ClientEvent } from "matrix-js-sdk/src/matrix";
+
+import { AccountDataApi } from "../../../src/modules/AccountDataApi";
+import { mkEvent, stubClient } from "../../test-utils/test-utils";
+
+describe("AccountDataApi", () => {
+    describe("AccountDataWatchable", () => {
+        it("should return content of account data event on get()", () => {
+            const cli = stubClient();
+            const api = new AccountDataApi();
+            // Mock cli to return a event
+            const content = { foo: "bar" };
+            const event = mkEvent({ content, type: "m.test", user: "@foobar:matrix.org", event: true });
+            cli.getAccountData = () => event;
+            expect(api.get("m.test").value).toStrictEqual(content);
+        });
+
+        it("should update value on event", () => {
+            const cli = stubClient();
+            const api = new AccountDataApi();
+            // Mock cli to return a event
+            const content = { foo: "bar" };
+            const event = mkEvent({ content, type: "m.test", user: "@foobar:matrix.org", event: true });
+            cli.getAccountData = () => event;
+
+            const watchable = api.get("m.test");
+            expect(watchable.value).toStrictEqual(content);
+
+            const fn = jest.fn();
+            watchable.watch(fn);
+
+            // Let's say that the account data event changed
+            const event2 = mkEvent({
+                content: { foo: "abc" },
+                type: "m.test",
+                user: "@foobar:matrix.org",
+                event: true,
+            });
+            cli.emit(ClientEvent.AccountData, event2);
+            // Watchable value should have been updated
+            expect(watchable.value).toStrictEqual({ foo: "abc" });
+            // Watched callbacks should be called
+            expect(fn).toHaveBeenCalledTimes(1);
+
+            // Make sure unwatch removed the event listener
+            cli.off = jest.fn();
+            watchable.unwatch(fn);
+            expect(cli.off).toHaveBeenCalledTimes(1);
+        });
+    });
+
+    it("should set account data via js-sdk on set()", async () => {
+        const cli = stubClient();
+        const api = new AccountDataApi();
+        await api.set("m.test", { foo: "bar" });
+        expect(cli.setAccountData).toHaveBeenCalledTimes(1);
+    });
+
+    it("should delete account data via js-sdk on set()", async () => {
+        const cli = stubClient();
+        const api = new AccountDataApi();
+        await api.delete("m.test");
+        expect(cli.deleteAccountData).toHaveBeenCalledTimes(1);
+    });
+});

test/unit-tests/modules/BuiltinsApi-test.tsx

@@ -0,0 +1,53 @@
+/*
+Copyright 2025 Element Creations Ltd.
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { render } from "jest-matrix-react";
+
+import { ElementWebBuiltinsApi } from "../../../src/modules/BuiltinsApi.tsx";
+import { stubClient } from "../../test-utils/test-utils";
+
+const Avatar: React.FC<{ room: { roomId: string }; size: string }> = ({ room, size }) => {
+    return (
+        <div>
+            Avatar, {room.roomId}, {size}
+        </div>
+    );
+};
+
+describe("ElementWebBuiltinsApi", () => {
+    it("returns the RoomView component thats been set", () => {
+        const builtinsApi = new ElementWebBuiltinsApi();
+        const sentinel = {};
+        builtinsApi.setComponents({ roomView: sentinel, roomAvatar: Avatar } as any);
+        expect(builtinsApi.getRoomViewComponent()).toBe(sentinel);
+    });
+
+    it("returns rendered RoomView component", () => {
+        const builtinsApi = new ElementWebBuiltinsApi();
+        const RoomView = () => <div>hello world</div>;
+        builtinsApi.setComponents({ roomView: RoomView, roomAvatar: Avatar } as any);
+        const { container } = render(<> {builtinsApi.renderRoomView("!foo:m.org")}</>);
+        expect(container).toHaveTextContent("hello world");
+    });
+
+    it("returns rendered RoomAvatar component", () => {
+        stubClient();
+        const builtinsApi = new ElementWebBuiltinsApi();
+        builtinsApi.setComponents({ roomView: {}, roomAvatar: Avatar } as any);
+        const { container } = render(<> {builtinsApi.renderRoomAvatar("!foo:m.org", "50")}</>);
+        expect(container).toHaveTextContent("Avatar");
+        expect(container).toHaveTextContent("!foo:m.org");
+        expect(container).toHaveTextContent("50");
+    });
+
+    it("should throw error if called before components are set", () => {
+        stubClient();
+        const builtinsApi = new ElementWebBuiltinsApi();
+        expect(() => builtinsApi.renderRoomAvatar("!foo:m.org")).toThrow("No RoomAvatar component has been set");
+        expect(() => builtinsApi.renderRoomView("!foo:m.org")).toThrow("No RoomView component has been set");
+    });
+});

test/unit-tests/modules/ClientApi-test.ts

@@ -0,0 +1,20 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { ClientApi } from "../../../src/modules/ClientApi";
+import { Room } from "../../../src/modules/models/Room";
+import { stubClient } from "../../test-utils/test-utils";
+
+describe("ClientApi", () => {
+    it("should return module room from getRoom()", () => {
+        stubClient();
+        const client = new ClientApi();
+        const moduleRoom = client.getRoom("!foo:matrix.org");
+        expect(moduleRoom).toBeInstanceOf(Room);
+        expect(moduleRoom?.id).toStrictEqual("!foo:matrix.org");
+    });
+});

test/unit-tests/modules/Navigation-test.ts

@@ -37,5 +37,25 @@ describe("NavigationApi", () => {
                 }),
             );
         });
+
+        it("should dispatch correct action on openRoom", () => {
+            const spy = jest.spyOn(defaultDispatcher, "dispatch");
+            // Non alias
+            api.openRoom("!foo:m.org");
+            expect(spy).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    action: "view_room",
+                    room_id: "!foo:m.org",
+                }),
+            );
+            // Alias
+            api.openRoom("#bar:m.org");
+            expect(spy).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    action: "view_room",
+                    room_alias: "#bar:m.org",
+                }),
+            );
+        });
     });
 });

test/unit-tests/modules/StoresApi-test.ts

@@ -0,0 +1,84 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { waitFor } from "jest-matrix-react";
+
+import { type RoomListStoreApi, StoresApi } from "../../../src/modules/StoresApi";
+import RoomListStoreV3, {
+    LISTS_LOADED_EVENT,
+    LISTS_UPDATE_EVENT,
+} from "../../../src/stores/room-list-v3/RoomListStoreV3";
+import { mkRoom, stubClient } from "../../test-utils/test-utils";
+import { Room } from "../../../src/modules/models/Room";
+import {} from "../../../src/stores/room-list/algorithms/Algorithm";
+
+describe("StoresApi", () => {
+    describe("RoomListStoreApi", () => {
+        it("should return promise that resolves when RLS is ready", async () => {
+            jest.spyOn(RoomListStoreV3.instance, "isLoadingRooms", "get").mockReturnValue(true);
+            const store = new StoresApi();
+            let hasResolved = false;
+            // The following async function will set hasResolved to false
+            // only when waitForReady resolves.
+            (async () => {
+                await store.roomListStore.waitForReady();
+                hasResolved = true;
+            })();
+            // Shouldn't have resolved yet.
+            expect(hasResolved).toStrictEqual(false);
+
+            // Wait for the module to load so that we can test the listener.
+            await (store.roomListStore as RoomListStoreApi).moduleLoadPromise;
+            // Emit the loaded event.
+            RoomListStoreV3.instance.emit(LISTS_LOADED_EVENT);
+            // Should resolve now.
+            await waitFor(() => {
+                expect(hasResolved).toStrictEqual(true);
+            });
+        });
+
+        describe("getRooms()", () => {
+            it("should return rooms from RLS", async () => {
+                const cli = stubClient();
+                const room1 = mkRoom(cli, "!foo1:m.org");
+                const room2 = mkRoom(cli, "!foo2:m.org");
+                const room3 = mkRoom(cli, "!foo3:m.org");
+                jest.spyOn(RoomListStoreV3.instance, "getSortedRooms").mockReturnValue([room1, room2, room3]);
+                jest.spyOn(RoomListStoreV3.instance, "isLoadingRooms", "get").mockReturnValue(false);
+
+                const store = new StoresApi();
+                await store.roomListStore.waitForReady();
+                const watchable = store.roomListStore.getRooms();
+                expect(watchable.value).toHaveLength(3);
+                expect(watchable.value[0]).toBeInstanceOf(Room);
+            });
+
+            it("should update from RLS", async () => {
+                const cli = stubClient();
+                const room1 = mkRoom(cli, "!foo1:m.org");
+                const room2 = mkRoom(cli, "!foo2:m.org");
+                const rooms = [room1, room2];
+
+                jest.spyOn(RoomListStoreV3.instance, "getSortedRooms").mockReturnValue(rooms);
+                jest.spyOn(RoomListStoreV3.instance, "isLoadingRooms", "get").mockReturnValue(false);
+
+                const store = new StoresApi();
+                await store.roomListStore.waitForReady();
+                const watchable = store.roomListStore.getRooms();
+                const fn = jest.fn();
+                watchable.watch(fn);
+                expect(watchable.value).toHaveLength(2);
+
+                const room3 = mkRoom(cli, "!foo3:m.org");
+                rooms.push(room3);
+                RoomListStoreV3.instance.emit(LISTS_UPDATE_EVENT);
+                expect(fn).toHaveBeenCalledTimes(1);
+                expect(watchable.value).toHaveLength(3);
+            });
+        });
+    });
+});

test/unit-tests/modules/models/Room-test.ts

@@ -0,0 +1,50 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { Room } from "../../../../src/modules/models/Room";
+import { mkRoom, stubClient } from "../../../test-utils";
+
+describe("Room", () => {
+    it("should return id from sdk room", () => {
+        const cli = stubClient();
+        const sdkRoom = mkRoom(cli, "!foo:m.org");
+        const room = new Room(sdkRoom);
+        expect(room.id).toStrictEqual("!foo:m.org");
+    });
+
+    it("should return last timestamp from sdk room", () => {
+        const cli = stubClient();
+        const sdkRoom = mkRoom(cli, "!foo:m.org");
+        const room = new Room(sdkRoom);
+        expect(room.getLastActiveTimestamp()).toStrictEqual(sdkRoom.getLastActiveTimestamp());
+    });
+
+    describe("watchableName", () => {
+        it("should return name from sdkRoom", () => {
+            const cli = stubClient();
+            const sdkRoom = mkRoom(cli, "!foo:m.org");
+            sdkRoom.name = "Foo Name";
+            const room = new Room(sdkRoom);
+            expect(room.name.value).toStrictEqual("Foo Name");
+        });
+
+        it("should add/remove event listener on sdk room", () => {
+            const cli = stubClient();
+            const sdkRoom = mkRoom(cli, "!foo:m.org");
+            sdkRoom.name = "Foo Name";
+
+            const room = new Room(sdkRoom);
+            const fn = jest.fn();
+
+            room.name.watch(fn);
+            expect(sdkRoom.on).toHaveBeenCalledTimes(1);
+
+            room.name.unwatch(fn);
+            expect(sdkRoom.off).toHaveBeenCalledTimes(1);
+        });
+    });
+});

test/unit-tests/stores/MultiRoomViewStore-test.ts

@@ -0,0 +1,101 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { MultiRoomViewStore } from "../../../src/stores/MultiRoomViewStore";
+import { RoomViewStore } from "../../../src/stores/RoomViewStore";
+import { Action } from "../../../src/dispatcher/actions";
+import type { MatrixDispatcher } from "../../../src/dispatcher/dispatcher";
+import { TestSdkContext } from "../TestSdkContext";
+
+jest.mock("../../../src/stores/RoomViewStore");
+
+describe("MultiRoomViewStore", () => {
+    let multiRoomViewStore: MultiRoomViewStore;
+    let mockDispatcher: MatrixDispatcher;
+    let mockSdkContext: TestSdkContext;
+    let mockRoomViewStore: jest.Mocked<RoomViewStore>;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+
+        // Create mock dispatcher
+        mockDispatcher = {
+            dispatch: jest.fn(),
+            register: jest.fn(),
+            unregister: jest.fn(),
+        } as unknown as MatrixDispatcher;
+
+        // Create mock SDK context
+        mockSdkContext = new TestSdkContext();
+
+        // Create mock RoomViewStore instance
+        mockRoomViewStore = {
+            viewRoom: jest.fn(),
+            dispose: jest.fn(),
+        } as any;
+
+        (RoomViewStore as jest.MockedClass<typeof RoomViewStore>).mockImplementation(() => mockRoomViewStore as any);
+
+        // Create the MultiRoomViewStore instance
+        multiRoomViewStore = new MultiRoomViewStore(mockDispatcher, mockSdkContext);
+    });
+
+    describe("getRoomViewStoreForRoom", () => {
+        it("should create a new RoomViewStore for a room that doesn't exist in cache", () => {
+            const roomId = "!room1:example.com";
+
+            const result = multiRoomViewStore.getRoomViewStoreForRoom(roomId);
+
+            expect(RoomViewStore).toHaveBeenCalledWith(mockDispatcher, mockSdkContext, roomId);
+            expect(mockRoomViewStore.viewRoom).toHaveBeenCalledWith({
+                action: Action.ViewRoom,
+                room_id: roomId,
+                metricsTrigger: undefined,
+            });
+            expect(result).toBe(mockRoomViewStore);
+        });
+
+        it("should return existing RoomViewStore for a room that exists in cache", () => {
+            const roomId = "!room1:example.com";
+
+            // First call creates the store
+            const firstResult = multiRoomViewStore.getRoomViewStoreForRoom(roomId);
+
+            jest.clearAllMocks();
+
+            // Should return the same store
+            const secondResult = multiRoomViewStore.getRoomViewStoreForRoom(roomId);
+
+            expect(RoomViewStore).not.toHaveBeenCalled();
+            expect(mockRoomViewStore.viewRoom).toHaveBeenCalledWith({
+                action: Action.ViewRoom,
+                room_id: roomId,
+                metricsTrigger: undefined,
+            });
+            expect(secondResult).toBe(firstResult);
+            expect(secondResult).toBe(mockRoomViewStore);
+        });
+    });
+
+    describe("removeRoomViewStore", () => {
+        it("should remove an existing RoomViewStore from cache", () => {
+            const roomId = "!room1:example.com";
+
+            multiRoomViewStore.getRoomViewStoreForRoom(roomId);
+            multiRoomViewStore.removeRoomViewStore(roomId);
+
+            // New store should be created now
+            jest.clearAllMocks();
+            (RoomViewStore as jest.MockedClass<typeof RoomViewStore>).mockImplementation(
+                () => mockRoomViewStore as any,
+            );
+
+            multiRoomViewStore.getRoomViewStoreForRoom(roomId);
+            expect(RoomViewStore).toHaveBeenCalledWith(mockDispatcher, mockSdkContext, roomId);
+        });
+    });
+});

yarn.lock

@@ -1579,10 +1579,10 @@
   resolved "https://registry.yarnpkg.com/@element-hq/element-call-embedded/-/element-call-embedded-0.16.1.tgz#28bdbde426051cc2a3228a36e7196e0a254569d3"
   integrity sha512-g3v/QFuNy8YVRGrKC5SxjIYvgBh6biOHgejhJT2Jk/yjOOUEuP0y2PBaADm+suPD9BB/Vk1jPxFk2uEIpEzhpA==
 
-"@element-hq/element-web-module-api@1.4.1":
+"@element-hq/element-web-module-api@1.5.0":
-  version "1.4.1"
+  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@element-hq/element-web-module-api/-/element-web-module-api-1.4.1.tgz#a46526d58985190f9989bf1686ea872687d3c6e1"
+  resolved "https://registry.yarnpkg.com/@element-hq/element-web-module-api/-/element-web-module-api-1.5.0.tgz#077a528917f4eb558059a2a5286b9bb6a2fb1690"
-  integrity sha512-A8yaQtX7QoKThzzZVU+VYOFhpiNyppEMuIQijK48RvhVp1nwmy0cTD6u/6Yn64saNwJjtna+Oy+Qzo/TfwwhxQ==
+  integrity sha512-WI/iMADRouXp9WhQy5jov6Z4eKKlHEPh20DKoCsKZ9dWaYcW/MiBhzi09PZxay+o0RLZXA6aDPxpxaIX3lZXag==
 
 "@element-hq/element-web-playwright-common@^2.0.0":
   version "2.0.0"