From a56e934841a995f6dfa8b34028d5c3a96a900b96 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Sat, 29 Aug 2026 02:25:08 +0000
Subject: [PATCH 001/154] Update ghcr.io/element-hq/element-web:develop Docker
 digest to e29b408 (#4215)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 docker-compose-playwright.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index 3ed06606..514bb757 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -13,7 +13,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:133160c3c1e506276145cbb8ccaf48253f0a96af635129d785826265e4f3ca10
+    image: ghcr.io/element-hq/element-web:develop@sha256:e29b408ce1959506962952356e6772cb8052dc6a04dcc8e0b3572026ee8fad6f
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:133160c3c1e506276145cbb8ccaf48253f0a96af635129d785826265e4f3ca10
+    image: ghcr.io/element-hq/element-web:develop@sha256:e29b408ce1959506962952356e6772cb8052dc6a04dcc8e0b3572026ee8fad6f

From 6ddcc15206632eccb2410d7fa34f3cdd48f5ad6a Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Sun, 30 Aug 2026 01:09:28 +0000
Subject: [PATCH 002/154] Update ghcr.io/element-hq/element-web:develop Docker
 digest to e8727bb (#4216)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 docker-compose-playwright.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index 514bb757..46ea4699 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -13,7 +13,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:e29b408ce1959506962952356e6772cb8052dc6a04dcc8e0b3572026ee8fad6f
+    image: ghcr.io/element-hq/element-web:develop@sha256:e8727bbb67bbde23c2abf3b0f29ac005379ffe40de5e1f34591177ca17538fc0
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:e29b408ce1959506962952356e6772cb8052dc6a04dcc8e0b3572026ee8fad6f
+    image: ghcr.io/element-hq/element-web:develop@sha256:e8727bbb67bbde23c2abf3b0f29ac005379ffe40de5e1f34591177ca17538fc0

From 256ff7a0b6ea8ffd9d13866d531df635131de88d Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 31 Aug 2026 00:40:41 +0000
Subject: [PATCH 003/154] Update dependency matrix-widget-api to v1.19.0

---
 pnpm-lock.yaml | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5d8f89ca..4cfb3ccd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -195,7 +195,7 @@ importers:
         version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a
       matrix-widget-api:
         specifier: ^1.18.0
-        version: 1.18.0
+        version: 1.19.0
       node-stdlib-browser:
         specifier: ^1.3.1
         version: 1.3.1
@@ -4690,8 +4690,8 @@ packages:
     version: 42.2.0
     engines: {node: '>=22.0.0'}
 
-  matrix-widget-api@1.18.0:
-    resolution: {integrity: sha512-4T2f2koWmx05p1BLcT/9YGGGPSXpPT+PA4Oap/5fjhXsWPxMGJiGL97YpANMYLKsnE1sScYFeuyxIgdc1Qo+Ew==}
+  matrix-widget-api@1.19.0:
+    resolution: {integrity: sha512-Qe7L6G1mQJphBC47/Bzp5ljPIK1UARgLiuGgS+/KmEs/eaNHkQ3+ArD0/0kvMV+d6kCGAZ9OKRqsnuPjizI+tw==}
 
   md5.js@1.3.5:
     resolution: {integrity: sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==}
@@ -10284,12 +10284,12 @@ snapshots:
       content-type: 3.0.0
       loglevel: 1.9.2
       matrix-events-sdk: 0.0.1
-      matrix-widget-api: 1.18.0
+      matrix-widget-api: 1.19.0
       p-retry: 8.0.0
       sdp-transform: 3.0.0
       unhomoglyph: 1.0.6
 
-  matrix-widget-api@1.18.0:
+  matrix-widget-api@1.19.0:
     dependencies:
       '@types/events': 3.0.3
       events: 3.3.0

From 9330b907fc621a68610a5ff092d90dec589fdfe3 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 31 Aug 2026 00:49:32 +0000
Subject: [PATCH 004/154] Update ghcr.io/element-hq/element-web:develop Docker
 digest to 7c5eb96 (#4218)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 docker-compose-playwright.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index 46ea4699..3a87c4b2 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -13,7 +13,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:e8727bbb67bbde23c2abf3b0f29ac005379ffe40de5e1f34591177ca17538fc0
+    image: ghcr.io/element-hq/element-web:develop@sha256:7c5eb96364aea52a107bad92f332ba6e9091c601b89da369ddbbf6df35d1d672
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:e8727bbb67bbde23c2abf3b0f29ac005379ffe40de5e1f34591177ca17538fc0
+    image: ghcr.io/element-hq/element-web:develop@sha256:7c5eb96364aea52a107bad92f332ba6e9091c601b89da369ddbbf6df35d1d672

From efdee7dcdbba49d8b06b8e030e7cd9fcbe867783 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 1 Sep 2026 02:53:52 +0000
Subject: [PATCH 005/154] Update ghcr.io/element-hq/element-web:develop Docker
 digest to c107ec3 (#4221)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 docker-compose-playwright.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index 3a87c4b2..edc88cd8 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -13,7 +13,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:7c5eb96364aea52a107bad92f332ba6e9091c601b89da369ddbbf6df35d1d672
+    image: ghcr.io/element-hq/element-web:develop@sha256:c107ec33fa349cb5c14fd03a4e13352d64ef264416dac96d273aa07b4004171f
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:7c5eb96364aea52a107bad92f332ba6e9091c601b89da369ddbbf6df35d1d672
+    image: ghcr.io/element-hq/element-web:develop@sha256:c107ec33fa349cb5c14fd03a4e13352d64ef264416dac96d273aa07b4004171f

From 7485b3d71f49fe21a9d64352f19c3d2ba33709d2 Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Tue, 1 Sep 2026 18:30:05 +0200
Subject: [PATCH 006/154] Use a dedicated i18next instance instead of the
 global singleton

Element Call configured the global i18next singleton. When Element Call
runs embedded in a host application rather than as its own page, that
singleton belongs to the host, so configuring it would clobber the
host's translations.

Create Element Call's own instance in utils/i18n.ts, configure it in the
initializer, and pass it to components via <I18nextProvider>. Drop
.use(initReactI18next) from the initializer: it registers the instance
as react-i18next's global default, which is the global we are trying to
avoid. Tests and stories keep using it, so that they do not need to wrap
every render in a provider.

Two modules imported `t` directly from "i18next" and so were bound to
the global instance: utils/errors.ts now calls i18n.t() on the instance
(reached at call time, since i18next only assigns `t` during init), and
QrCode uses useTranslation() like every other component.

No functional change.
---
 .storybook/preview.tsx |  6 ++++--
 src/App.tsx            | 34 +++++++++++++++++--------------
 src/QrCode.tsx         |  3 ++-
 src/initializer.tsx    |  8 +++++---
 src/utils/errors.ts    | 45 +++++++++++++++++++++---------------------
 src/utils/i18n.ts      | 21 ++++++++++++++++++++
 src/vitest.setup.ts    |  6 ++++--
 7 files changed, 77 insertions(+), 46 deletions(-)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 757c1f8a..5b841b82 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -7,14 +7,16 @@ Please see LICENSE in the repository root for full details.
 
 import type { Preview } from "@storybook/react-vite";
 import { TooltipProvider } from "@vector-im/compound-web";
-import i18n from "i18next";
 import { logger } from "matrix-js-sdk/lib/logger";
 
 import EN from "../locales/en/app.json";
 import { initReactI18next } from "react-i18next";
+import { i18n } from "../src/utils/i18n";
 import "../src/index.css";
 
-// Bare-minimum i18n config
+// Bare-minimum i18n config.
+// Unlike the app, stories register the instance as react-i18next's default
+// rather than wrapping every story in an <I18nextProvider>.
 i18n
   .use(initReactI18next)
   .init({
diff --git a/src/App.tsx b/src/App.tsx
index 8f6ef21a..36afc4c2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,6 +17,7 @@ import { BrowserRouter, Route, useLocation, Routes } from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/lib/logger";
+import { I18nextProvider } from "react-i18next";
 
 import { HomePage } from "./home/HomePage";
 import { LoginPage } from "./auth/LoginPage";
@@ -32,6 +33,7 @@ import { type AppViewModel } from "./state/AppViewModel";
 import { MediaDevicesContext } from "./MediaDevicesContext";
 import { getUrlParams, HeaderStyle, useUrlParams } from "./UrlParams";
 import { AppBar } from "./AppBar";
+import { i18n } from "./utils/i18n";
 
 const SentryRoute = Sentry.withSentryReactRouterV7Routing(Route);
 
@@ -98,20 +100,22 @@ export const App: FC<Props> = ({ vm }) => {
   );
 
   return (
-    <BrowserRouter>
-      <BackgroundProvider>
-        <ThemeProvider>
-          <TooltipProvider>
-            <Suspense fallback={null}>
-              {header === HeaderStyle.AppBar ? (
-                <AppBar>{content}</AppBar>
-              ) : (
-                content
-              )}
-            </Suspense>
-          </TooltipProvider>
-        </ThemeProvider>
-      </BackgroundProvider>
-    </BrowserRouter>
+    <I18nextProvider i18n={i18n}>
+      <BrowserRouter>
+        <BackgroundProvider>
+          <ThemeProvider>
+            <TooltipProvider>
+              <Suspense fallback={null}>
+                {header === HeaderStyle.AppBar ? (
+                  <AppBar>{content}</AppBar>
+                ) : (
+                  content
+                )}
+              </Suspense>
+            </TooltipProvider>
+          </ThemeProvider>
+        </BackgroundProvider>
+      </BrowserRouter>
+    </I18nextProvider>
   );
 };
diff --git a/src/QrCode.tsx b/src/QrCode.tsx
index 09bd92ea..da569395 100644
--- a/src/QrCode.tsx
+++ b/src/QrCode.tsx
@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { type FC, useEffect, useState } from "react";
 import { toDataURL } from "qrcode";
 import classNames from "classnames";
-import { t } from "i18next";
+import { useTranslation } from "react-i18next";
 
 import styles from "./QrCode.module.css";
 
@@ -18,6 +18,7 @@ interface Props {
 }
 
 export const QrCode: FC<Props> = ({ data, className }) => {
+  const { t } = useTranslation();
   const [url, setUrl] = useState<string | null>(null);
 
   useEffect(() => {
diff --git a/src/initializer.tsx b/src/initializer.tsx
index 91436d10..c0e8407e 100644
--- a/src/initializer.tsx
+++ b/src/initializer.tsx
@@ -6,12 +6,11 @@ Please see LICENSE in the repository root for full details.
 */
 
 import React from "react";
-import i18n, {
+import {
   type BackendModule,
   type ReadCallback,
   type ResourceKey,
 } from "i18next";
-import { initReactI18next } from "react-i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import * as Sentry from "@sentry/react";
 import { logger } from "matrix-js-sdk/lib/logger";
@@ -35,6 +34,7 @@ import { platform } from "./Platform";
 import { isFailure } from "./utils/fetch";
 import { initializeWidget } from "./widget";
 import { enableExtendedLivekitLogs } from "./settings/settings.ts";
+import { i18n } from "./utils/i18n.ts";
 
 // This generates a map of locale names to their URL (based on import.meta.url), which looks like this:
 // {
@@ -148,10 +148,12 @@ export class Initializer {
       document.documentElement.lang = lng;
     });
 
+    // Note: deliberately no `.use(initReactI18next)` — that would register this
+    // instance as react-i18next's global default, which is the very global we
+    // are avoiding. Components receive it through `<I18nextProvider>` instead.
     await i18n
       .use(Backend)
       .use(languageDetector)
-      .use(initReactI18next)
       .init({
         fallbackLng: "en",
         defaultNS: "app",
diff --git a/src/utils/errors.ts b/src/utils/errors.ts
index 0ac56927..73b904c9 100644
--- a/src/utils/errors.ts
+++ b/src/utils/errors.ts
@@ -5,10 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { t } from "i18next";
 import { type ConnectionError } from "livekit-client";
 
-import { i18nKey } from "./i18n";
+import { i18n, i18nKey } from "./i18n";
 
 export enum ErrorCode {
   /**
@@ -78,10 +77,10 @@ export class MatrixRTCTransportMissingError extends ElementCallError {
    */
   public constructor(domain: string) {
     super(
-      t("error.call_is_not_supported"),
+      i18n.t("error.call_is_not_supported"),
       ErrorCode.MISSING_MATRIX_RTC_TRANSPORT,
       ErrorCategory.CONFIGURATION_ISSUE,
-      t("error.matrix_rtc_transport_missing", {
+      i18n.t("error.matrix_rtc_transport_missing", {
         domain,
         brand: import.meta.env.VITE_PRODUCT_NAME || "Element Call",
         errorCode: ErrorCode.MISSING_MATRIX_RTC_TRANSPORT,
@@ -97,10 +96,10 @@ export class MatrixRTCTransportMissingError extends ElementCallError {
 export class ConnectionLostError extends ElementCallError {
   public constructor() {
     super(
-      t("error.connection_lost"),
+      i18n.t("error.connection_lost"),
       ErrorCode.CONNECTION_LOST_ERROR,
       ErrorCategory.NETWORK_CONNECTIVITY,
-      t("error.connection_lost_description"),
+      i18n.t("error.connection_lost_description"),
     );
   }
 }
@@ -117,10 +116,10 @@ export class MembershipManagerError extends ElementCallError {
    */
   public constructor(error: Error) {
     super(
-      t("error.membership_manager"),
+      i18n.t("error.membership_manager"),
       ErrorCode.INTERNAL_MEMBERSHIP_MANAGER,
       ErrorCategory.SYSTEM_FAILURE,
-      t("error.membership_manager_description"),
+      i18n.t("error.membership_manager_description"),
       error,
     );
   }
@@ -134,10 +133,10 @@ export class MembershipManagerError extends ElementCallError {
 export class StickyEventsRequiredError extends ElementCallError {
   public constructor() {
     super(
-      t("error.sticky_events_required"),
+      i18n.t("error.sticky_events_required"),
       ErrorCode.STICKY_EVENTS_NOT_SUPPORTED,
       ErrorCategory.CONFIGURATION_ISSUE,
-      t("error.sticky_events_required_description"),
+      i18n.t("error.sticky_events_required_description"),
     );
   }
 }
@@ -148,10 +147,10 @@ export class StickyEventsRequiredError extends ElementCallError {
 export class E2EENotSupportedError extends ElementCallError {
   public constructor() {
     super(
-      t("error.e2ee_unsupported"),
+      i18n.t("error.e2ee_unsupported"),
       ErrorCode.E2EE_NOT_SUPPORTED,
       ErrorCategory.CLIENT_CONFIGURATION,
-      t("error.e2ee_unsupported_description"),
+      i18n.t("error.e2ee_unsupported_description"),
     );
   }
 }
@@ -166,7 +165,7 @@ export class UnknownCallError extends ElementCallError {
    */
   public constructor(error: Error) {
     super(
-      t("error.generic"),
+      i18n.t("error.generic"),
       ErrorCode.UNKNOWN_ERROR,
       ErrorCategory.UNKNOWN,
       undefined,
@@ -186,7 +185,7 @@ export class FailToGetOpenIdToken extends ElementCallError {
    */
   public constructor(error: Error) {
     super(
-      t("error.generic"),
+      i18n.t("error.generic"),
       ErrorCode.OPEN_ID_ERROR,
       ErrorCategory.CONFIGURATION_ISSUE,
       undefined,
@@ -203,10 +202,10 @@ export class NoMatrix2AuthorizationService extends ElementCallError {
    */
   public constructor(error: Error) {
     super(
-      t("error.generic"),
+      i18n.t("error.generic"),
       ErrorCode.NO_MATRIX_2_AUTHORIZATION_SERVICE,
       ErrorCategory.CONFIGURATION_ISSUE,
-      t("error.no_matrix_2_authorization_service"),
+      i18n.t("error.no_matrix_2_authorization_service"),
       // Properly set it as a cause for a better reporting on sentry
       error,
     );
@@ -223,7 +222,7 @@ export class FailToStartLivekitConnection extends ElementCallError {
    */
   public constructor(e?: string) {
     super(
-      t("error.failed_to_start_livekit"),
+      i18n.t("error.failed_to_start_livekit"),
       ErrorCode.FAILED_TO_START_LIVEKIT,
       ErrorCategory.NETWORK_CONNECTIVITY,
       e,
@@ -237,10 +236,10 @@ export class FailToStartLivekitConnection extends ElementCallError {
 export class InsufficientCapacityError extends ElementCallError {
   public constructor() {
     super(
-      t("error.insufficient_capacity"),
+      i18n.t("error.insufficient_capacity"),
       ErrorCode.INSUFFICIENT_CAPACITY_ERROR,
       ErrorCategory.UNKNOWN,
-      t("error.insufficient_capacity_description"),
+      i18n.t("error.insufficient_capacity_description"),
     );
   }
 }
@@ -252,10 +251,10 @@ export class InsufficientCapacityError extends ElementCallError {
 export class SFURoomCreationRestrictedError extends ElementCallError {
   public constructor() {
     super(
-      t("error.room_creation_restricted"),
+      i18n.t("error.room_creation_restricted"),
       ErrorCode.SFU_ERROR,
       ErrorCategory.CONFIGURATION_ISSUE,
-      t("error.room_creation_restricted_description"),
+      i18n.t("error.room_creation_restricted_description"),
     );
   }
 }
@@ -266,7 +265,7 @@ export class SFURoomCreationRestrictedError extends ElementCallError {
 export class PeerConnectionTimeoutError extends ElementCallError {
   public constructor() {
     super(
-      t("error.peer_connection_timeout"),
+      i18n.t("error.peer_connection_timeout"),
       ErrorCode.SFU_ERROR,
       ErrorCategory.NETWORK_CONNECTIVITY,
     );
@@ -283,7 +282,7 @@ export class PeerConnectionTimeoutError extends ElementCallError {
 export class LivekitConnectionError extends ElementCallError {
   public constructor(cause: ConnectionError) {
     super(
-      t("error.livekit_connection_error"),
+      i18n.t("error.livekit_connection_error"),
       ErrorCode.SFU_ERROR,
       ErrorCategory.NETWORK_CONNECTIVITY,
     );
diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts
index 51bf2fb6..abe28f54 100644
--- a/src/utils/i18n.ts
+++ b/src/utils/i18n.ts
@@ -5,5 +5,26 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
+import i18next, { type i18n as I18nInstance } from "i18next";
+
 // Custom marker function to allow i18next extraction
 export const i18nKey = (key: string): string => key;
+
+/**
+ * Element Call's own i18next instance.
+ *
+ * We deliberately do not use the global i18next singleton: when Element Call is
+ * embedded in a host application (rather than running as its own page), that
+ * singleton belongs to the host, and configuring it would clobber the host's
+ * translations.
+ *
+ * It is configured by `Initializer.initBeforeReact` and made available to
+ * components via `<I18nextProvider>`; tests and stories configure it directly.
+ *
+ * Non-React code should call `i18n.t(...)` on this instance. Components should
+ * use `useTranslation()` instead, so that they re-render on a language change.
+ * Note that `t` must be reached through the instance at call time — i18next
+ * only assigns it during `init()`, so destructuring it at module scope would
+ * capture an uninitialised function.
+ */
+export const i18n: I18nInstance = i18next.createInstance();
diff --git a/src/vitest.setup.ts b/src/vitest.setup.ts
index be7179de..00d289b5 100644
--- a/src/vitest.setup.ts
+++ b/src/vitest.setup.ts
@@ -7,7 +7,6 @@ Please see LICENSE in the repository root for full details.
 
 import "@formatjs/intl-durationformat/polyfill.js";
 import "@formatjs/intl-segmenter/polyfill";
-import i18n from "i18next";
 import posthog from "posthog-js";
 import { initReactI18next } from "react-i18next";
 import { afterEach } from "vitest";
@@ -18,8 +17,11 @@ import "@testing-library/jest-dom/vitest";
 
 import EN from "../locales/en/app.json";
 import { Config } from "./config/Config";
+import { i18n } from "./utils/i18n";
 
-// Bare-minimum i18n config
+// Bare-minimum i18n config.
+// Unlike the app, tests register the instance as react-i18next's default rather
+// than wrapping every render in an <I18nextProvider>.
 i18n
   .use(initReactI18next)
   .init({

From 0a8c24bca86870862c37ac1139e8d2cd13fac71d Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Tue, 1 Sep 2026 18:40:53 +0200
Subject: [PATCH 007/154] Allow the config to be supplied by an embedder

Config.init() derives the location of config.json from window.location,
which only makes sense while Element Call owns the page. When it is
embedded in a host application the host owns the configuration, so add
Config.initWith() to accept it directly.

Share the defaulting and validation between both paths via resolveConfig(),
so that an injected config behaves identically to a fetched one, and mark
initialization as complete so that the init() calls already on the startup
path resolve immediately instead of fetching over the top of it.

initDefault() becomes initWith({}), which also stops it handing out a
shallow copy of DEFAULT_CONFIG whose nested objects were shared with the
module-level default.
---
 src/config/Config.test.ts | 53 +++++++++++++++++++++++++++++++++++++--
 src/config/Config.ts      | 49 ++++++++++++++++++++++++++++++------
 2 files changed, 93 insertions(+), 9 deletions(-)

diff --git a/src/config/Config.test.ts b/src/config/Config.test.ts
index 34dd44cb..5f8b09a2 100644
--- a/src/config/Config.test.ts
+++ b/src/config/Config.test.ts
@@ -8,8 +8,8 @@ Please see LICENSE in the repository root for full details.
 import { describe, expect, it, vi, afterEach } from "vitest";
 import { logger } from "matrix-js-sdk/lib/logger";
 
-import { validateConfig } from "./Config";
-import { MatrixRTCMode } from "./ConfigOptions";
+import { Config, validateConfig } from "./Config";
+import { DEFAULT_CONFIG, MatrixRTCMode } from "./ConfigOptions";
 
 describe("validateConfig", () => {
   afterEach(() => {
@@ -52,3 +52,52 @@ describe("validateConfig", () => {
     expect(result.ssla).toBe("https://example.invalid/ssla");
   });
 });
+
+describe("Config.initWith", () => {
+  // vitest.setup.ts has already called initDefault(), so every test here is
+  // free to re-initialize; the last call wins.
+  afterEach(() => {
+    vi.restoreAllMocks();
+    Config.initDefault();
+  });
+
+  it("makes the supplied config readable", () => {
+    Config.initWith({ ssla: "https://example.invalid/ssla" });
+    expect(Config.get().ssla).toBe("https://example.invalid/ssla");
+  });
+
+  it("fills in defaults for keys the embedder did not supply", () => {
+    Config.initWith({ ssla: "https://example.invalid/ssla" });
+    expect(Config.get().media_quality).toEqual(DEFAULT_CONFIG.media_quality);
+  });
+
+  it("validates the supplied config just as a fetched one would be", () => {
+    const warnSpy = vi.spyOn(logger, "warn").mockImplementation(() => {});
+    Config.initWith({
+      matrix_rtc_mode: "nonsense" as unknown as MatrixRTCMode,
+    });
+    expect(Config.get().matrix_rtc_mode).toBeUndefined();
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not share nested state with DEFAULT_CONFIG", () => {
+    Config.initWith({});
+    expect(Config.get().media_quality).not.toBe(DEFAULT_CONFIG.media_quality);
+  });
+
+  it("stops a later init() from fetching over the top of it", async () => {
+    const fetchSpy = vi.spyOn(globalThis, "fetch");
+    Config.initWith({ ssla: "https://example.invalid/ssla" });
+
+    await Config.init();
+
+    expect(fetchSpy).not.toHaveBeenCalled();
+    expect(Config.get().ssla).toBe("https://example.invalid/ssla");
+  });
+
+  it("replaces a config initialized earlier", () => {
+    Config.initWith({ ssla: "https://first.invalid/ssla" });
+    Config.initWith({ ssla: "https://second.invalid/ssla" });
+    expect(Config.get().ssla).toBe("https://second.invalid/ssla");
+  });
+});
diff --git a/src/config/Config.ts b/src/config/Config.ts
index f52b28fd..37cdfc61 100644
--- a/src/config/Config.ts
+++ b/src/config/Config.ts
@@ -30,6 +30,14 @@ export class Config {
     return this.internalInstance.config;
   }
 
+  /**
+   * Initializes the config by fetching `config.json`, locating it relative to
+   * the current page.
+   *
+   * Does nothing if the config has already been initialized, including by
+   * {@link Config.initWith}, so that the regular startup path can run unchanged
+   * when an embedder has already supplied the config.
+   */
   public static async init(): Promise<void> {
     if (!Config.internalInstance?.initPromise) {
       const internalInstance = new Config();
@@ -50,17 +58,36 @@ export class Config {
 
       Config.internalInstance.initPromise = downloadConfig(fetchTarget).then(
         (config) => {
-          internalInstance.config = merge(
-            {},
-            DEFAULT_CONFIG,
-            validateConfig(config),
-          );
+          internalInstance.config = resolveConfig(config);
         },
       );
     }
     return Config.internalInstance.initPromise;
   }
 
+  /**
+   * Initializes the config from an object supplied by the embedder, instead of
+   * fetching `config.json`.
+   *
+   * {@link Config.init} derives the location of `config.json` from
+   * `window.location`, which only makes sense while Element Call owns the page.
+   * When it is embedded in a host application the host owns the configuration
+   * and passes it in here.
+   *
+   * The config goes through the same validation and defaulting as a fetched
+   * one, so that an injected config behaves identically to a hosted one.
+   *
+   * Replaces any config initialized earlier.
+   */
+  public static initWith(config: ConfigOptions): void {
+    const internalInstance = new Config();
+    internalInstance.config = resolveConfig(config);
+    // Mark initialization as already done, so that a later init() resolves
+    // immediately rather than fetching config.json over the top of this.
+    internalInstance.initPromise = Promise.resolve();
+    Config.internalInstance = internalInstance;
+  }
+
   /**
    * This is a alternative initializer that does not load anything
    * from a hosted config file but instead just initializes the config using the
@@ -69,8 +96,7 @@ export class Config {
    * It is supposed to only be used in tests. (It is executed in `vite.setup.js`)
    */
   public static initDefault(): void {
-    Config.internalInstance = new Config();
-    Config.internalInstance.config = { ...DEFAULT_CONFIG };
+    Config.initWith({});
   }
 
   // Convenience accessors
@@ -94,6 +120,15 @@ export class Config {
   private initPromise?: Promise<void>;
 }
 
+/**
+ * Applies validation and the built-in defaults to a config, however it was
+ * obtained. Deep-merges onto a fresh object so that the result never shares
+ * nested state with {@link DEFAULT_CONFIG}.
+ */
+function resolveConfig(config: ConfigOptions): ResolvedConfigOptions {
+  return merge({}, DEFAULT_CONFIG, validateConfig(config));
+}
+
 export function validateConfig(config: ConfigOptions): ConfigOptions {
   const mode = config.matrix_rtc_mode;
   if (mode !== undefined && !VALID_MATRIX_RTC_MODES.has(mode)) {

From 0dca5835f6087f0b2df0ab989ac4c96adb83b759 Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Tue, 1 Sep 2026 18:54:27 +0200
Subject: [PATCH 008/154] Route Element Call's DOM decoration through an
 injectable root element

Element Call writes its theme classes, background and layout attributes
straight onto document.body, and portals its modals there too. That is
only correct while it owns the page; embedded in a host application it
has to confine itself to the container it was mounted into.

Add a RootElementContext, defaulting to document.body so that the
standalone and widget builds are unaffected, and point the theme classes,
data-background, no-scroll-body and the fullscreen target at it.

Give the Modal and Toast portals an explicit container as well. Radix and
vaul both default to document.body, so without this every modal, drawer
and toast would render outside the container and lose the theme and
platform attributes set on it.

No functional change: the root element is document.body until an embedder
provides otherwise.
---
 src/App.tsx                |  8 ++++----
 src/Modal.tsx              |  6 ++++--
 src/RootElementContext.ts  | 30 ++++++++++++++++++++++++++++++
 src/Toast.tsx              |  8 +++++++-
 src/room/GroupCallView.tsx |  8 +++++---
 src/tile/SpotlightTile.tsx |  8 ++++----
 src/useTheme.ts            | 12 +++++++-----
 7 files changed, 61 insertions(+), 19 deletions(-)
 create mode 100644 src/RootElementContext.ts

diff --git a/src/App.tsx b/src/App.tsx
index 36afc4c2..55703f4c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -34,6 +34,7 @@ import { MediaDevicesContext } from "./MediaDevicesContext";
 import { getUrlParams, HeaderStyle, useUrlParams } from "./UrlParams";
 import { AppBar } from "./AppBar";
 import { i18n } from "./utils/i18n";
+import { useRootElement } from "./RootElementContext";
 
 const SentryRoute = Sentry.withSentryReactRouterV7Routing(Route);
 
@@ -44,12 +45,11 @@ interface SimpleProviderProps {
 const BackgroundProvider: FC<SimpleProviderProps> = ({ children }) => {
   const { pathname } = useLocation();
   const { background } = useUrlParams();
+  const rootElement = useRootElement();
 
   useEffect(() => {
-    document
-      .getElementsByTagName("body")[0]
-      .setAttribute("data-background", background);
-  }, [pathname, background]);
+    rootElement.setAttribute("data-background", background);
+  }, [pathname, background, rootElement]);
 
   return children;
 };
diff --git a/src/Modal.tsx b/src/Modal.tsx
index e6ffdf45..46316d37 100644
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -24,6 +24,7 @@ import { Heading, Glass } from "@vector-im/compound-web";
 import styles from "./Modal.module.css";
 import overlayStyles from "./Overlay.module.css";
 import { useMediaQuery } from "./useMediaQuery";
+import { useRootElement } from "./RootElementContext";
 
 export interface Props {
   title: string;
@@ -78,6 +79,7 @@ export const Modal: FC<Props> = ({
   ...rest
 }) => {
   const { t } = useTranslation();
+  const rootElement = useRootElement();
   // Empirically, Chrome on Android can end up not matching (hover: none), but
   // still matching (pointer: coarse) :/
   const touchscreen = useMediaQuery("(hover: none) or (pointer: coarse)");
@@ -100,7 +102,7 @@ export const Modal: FC<Props> = ({
         onOpenChange={onOpenChange}
         dismissible={onDismiss !== undefined}
       >
-        <Drawer.Portal>
+        <Drawer.Portal container={rootElement}>
           <Drawer.Overlay className={classNames(overlayStyles.bg)} />
           <Drawer.Content
             className={classNames(
@@ -155,7 +157,7 @@ export const Modal: FC<Props> = ({
 
     return (
       <DialogRoot open={open} onOpenChange={onOpenChange}>
-        <DialogPortal>
+        <DialogPortal container={rootElement}>
           <DialogOverlay
             className={classNames(overlayStyles.bg, overlayStyles.animate)}
           />
diff --git a/src/RootElementContext.ts b/src/RootElementContext.ts
new file mode 100644
index 00000000..b97b1779
--- /dev/null
+++ b/src/RootElementContext.ts
@@ -0,0 +1,30 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { createContext, use } from "react";
+
+/**
+ * The element that Element Call treats as the root of its own interface.
+ *
+ * Element Call decorates this element with the theme, layout and background
+ * attributes its stylesheets key off, and portals its modals into it. When
+ * Element Call owns the page this is simply the document body; when it is
+ * embedded in a host application it is the container the host mounted it into,
+ * so that Element Call does not reach outside its own subtree.
+ */
+const RootElementContext = createContext<HTMLElement | null>(null);
+
+export const RootElementProvider = RootElementContext.Provider;
+
+/**
+ * The element Element Call should decorate and portal into.
+ *
+ * Defaults to the document body, so that the standalone and widget builds work
+ * without a provider.
+ */
+export const useRootElement = (): HTMLElement =>
+  use(RootElementContext) ?? document.body;
diff --git a/src/Toast.tsx b/src/Toast.tsx
index 83e220bc..0a2a2f1b 100644
--- a/src/Toast.tsx
+++ b/src/Toast.tsx
@@ -25,6 +25,7 @@ import { Text } from "@vector-im/compound-web";
 
 import styles from "./Toast.module.css";
 import overlayStyles from "./Overlay.module.css";
+import { useRootElement } from "./RootElementContext";
 
 interface Props {
   /**
@@ -64,6 +65,7 @@ export const Toast: FC<Props> = ({
   Icon,
   modal = true,
 }) => {
+  const rootElement = useRootElement();
   const onOpenChange = useCallback(
     (open: boolean) => {
       if (!open) onDismiss();
@@ -104,7 +106,11 @@ export const Toast: FC<Props> = ({
 
   return (
     <DialogRoot open={open} onOpenChange={onOpenChange} modal={modal}>
-      {modal ? <DialogPortal>{content}</DialogPortal> : content}
+      {modal ? (
+        <DialogPortal container={rootElement}>{content}</DialogPortal>
+      ) : (
+        content
+      )}
     </DialogRoot>
   );
 };
diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx
index fbd589e7..dfeb0866 100644
--- a/src/room/GroupCallView.tsx
+++ b/src/room/GroupCallView.tsx
@@ -80,6 +80,7 @@ import { useTypedEventEmitter } from "../useEvents";
 import { muteAllAudio$ } from "../state/MuteAllAudioModel.ts";
 import { useAppBarTitle } from "../AppBar.tsx";
 import { useBehavior } from "../useBehavior.ts";
+import { useRootElement } from "../RootElementContext.ts";
 
 /**
  * If there already are this many participants in the call, we automatically mute
@@ -123,6 +124,7 @@ export const GroupCallView: FC<Props> = ({
     null,
   );
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
+  const rootElement = useRootElement();
 
   const muteAllAudio = useBehavior(muteAllAudio$);
   const leaveSoundContext = useLatest(
@@ -150,11 +152,11 @@ export const GroupCallView: FC<Props> = ({
   // viewport sizes smaller than 122px width. (It is actually this exact number: 122px
   // tested on different devices...)
   useEffect(() => {
-    document.body.classList.add("no-scroll-body");
+    rootElement.classList.add("no-scroll-body");
     return (): void => {
-      document.body.classList.remove("no-scroll-body");
+      rootElement.classList.remove("no-scroll-body");
     };
-  }, []);
+  }, [rootElement]);
 
   useEffect(() => {
     window.rtcSession = rtcSession;
diff --git a/src/tile/SpotlightTile.tsx b/src/tile/SpotlightTile.tsx
index 036e044f..97e1f4a6 100644
--- a/src/tile/SpotlightTile.tsx
+++ b/src/tile/SpotlightTile.tsx
@@ -54,6 +54,7 @@ import { Slider } from "../Slider";
 import { platform } from "../Platform";
 import { type RingingMediaViewModel } from "../state/media/RingingMediaViewModel";
 import { RingingStatus } from "./RingingStatus";
+import { useRootElement } from "../RootElementContext";
 
 interface SpotlightItemBaseProps {
   ref?: Ref<HTMLDivElement>;
@@ -414,6 +415,7 @@ export const SpotlightTile: FC<Props> = ({
   style,
 }) => {
   const { t } = useTranslation();
+  const rootElement = useRootElement();
   const [ourRef, root$] = useObservableRef<HTMLDivElement | null>(null);
   const ref = useMergedRefs(ourRef, theirRef);
   const maximised = useBehavior(vm.maximised$);
@@ -428,24 +430,22 @@ export const SpotlightTile: FC<Props> = ({
   const canGoToNext = visibleIndex !== -1 && visibleIndex < media.length - 1;
 
   const isFullscreen = useCallback((): boolean => {
-    const rootElement = document.body;
     if (rootElement && document.fullscreenElement) return true;
     return false;
-  }, []);
+  }, [rootElement]);
 
   const FullScreenIcon = isFullscreen()
     ? FullScreenMinimiseIcon
     : FullScreenMaximiseIcon;
 
   const onToggleFullscreen = useCallback(() => {
-    const rootElement = document.body;
     if (!rootElement) return;
     if (isFullscreen()) {
       void document?.exitFullscreen();
     } else {
       void rootElement.requestFullscreen();
     }
-  }, [isFullscreen]);
+  }, [isFullscreen, rootElement]);
 
   // To keep track of which item is visible, we need an intersection observer
   // hooked up to the root element and the items. Because the items will run
diff --git a/src/useTheme.ts b/src/useTheme.ts
index e992aee7..5bac2898 100644
--- a/src/useTheme.ts
+++ b/src/useTheme.ts
@@ -11,12 +11,14 @@ import { type IThemeChangeActionRequest } from "matrix-widget-api";
 
 import { getUrlParams } from "./UrlParams";
 import { widget } from "./widget";
+import { useRootElement } from "./RootElementContext";
 
 export const useTheme = (): void => {
+  const rootElement = useRootElement();
   const [requestedTheme, setRequestedTheme] = useState(
     () => getUrlParams().theme,
   );
-  const previousTheme = useRef<string | null>(document.body.classList.item(0));
+  const previousTheme = useRef<string | null>(rootElement.classList.item(0));
 
   useEffect(() => {
     if (widget) {
@@ -47,15 +49,15 @@ export const useTheme = (): void => {
       : "";
     const themeString = "cpd-theme-" + theme + themeHighContrast;
     if (themeString !== previousTheme.current) {
-      document.body.classList.remove(
+      rootElement.classList.remove(
         "cpd-theme-light",
         "cpd-theme-dark",
         "cpd-theme-light-hc",
         "cpd-theme-dark-hc",
       );
-      document.body.classList.add(themeString);
+      rootElement.classList.add(themeString);
       previousTheme.current = themeString;
     }
-    document.body.classList.remove("no-theme");
-  }, [previousTheme, requestedTheme]);
+    rootElement.classList.remove("no-theme");
+  }, [previousTheme, requestedTheme, rootElement]);
 };

From bc6015eff2454b0735b78d4a3f0c1e61522a6791 Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Wed, 2 Sep 2026 09:58:34 +0200
Subject: [PATCH 009/154] Supply Element Call's parameters through a context

Element Call's parameters come from its URL, which works while it owns
the page but leaves an embedder with nowhere to put them. Add a context
so they can be provided directly, falling back to parsing
window.location when no provider is present.

This also decouples the thirteen consumers from react-router: useUrlParams
called useLocation, so each of them required a router ancestor, which the
embedded build will not have. The standalone and widget builds keep their
URL-derived behaviour via useUrlParamsFromLocation, provided in App.

No functional change.
---
 src/App.tsx      | 46 ++++++++++++++++++++++++++++++++--------------
 src/UrlParams.ts | 33 +++++++++++++++++++++++++++++----
 2 files changed, 61 insertions(+), 18 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 55703f4c..511577de 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -31,7 +31,13 @@ import { useTheme } from "./useTheme";
 import { ProcessorProvider } from "./livekit/TrackProcessorContext";
 import { type AppViewModel } from "./state/AppViewModel";
 import { MediaDevicesContext } from "./MediaDevicesContext";
-import { getUrlParams, HeaderStyle, useUrlParams } from "./UrlParams";
+import {
+  getUrlParams,
+  HeaderStyle,
+  UrlParamsProvider,
+  useUrlParams,
+  useUrlParamsFromLocation,
+} from "./UrlParams";
 import { AppBar } from "./AppBar";
 import { i18n } from "./utils/i18n";
 import { useRootElement } from "./RootElementContext";
@@ -42,6 +48,16 @@ interface SimpleProviderProps {
   children: JSX.Element;
 }
 
+/**
+ * Supplies the URL-derived params to the rest of the app. Only the standalone
+ * and widget builds own the URL, so this lives here in the app shell rather
+ * than alongside the context itself.
+ */
+const LocationUrlParamsProvider: FC<SimpleProviderProps> = ({ children }) => {
+  const urlParams = useUrlParamsFromLocation();
+  return <UrlParamsProvider value={urlParams}>{children}</UrlParamsProvider>;
+};
+
 const BackgroundProvider: FC<SimpleProviderProps> = ({ children }) => {
   const { pathname } = useLocation();
   const { background } = useUrlParams();
@@ -102,19 +118,21 @@ export const App: FC<Props> = ({ vm }) => {
   return (
     <I18nextProvider i18n={i18n}>
       <BrowserRouter>
-        <BackgroundProvider>
-          <ThemeProvider>
-            <TooltipProvider>
-              <Suspense fallback={null}>
-                {header === HeaderStyle.AppBar ? (
-                  <AppBar>{content}</AppBar>
-                ) : (
-                  content
-                )}
-              </Suspense>
-            </TooltipProvider>
-          </ThemeProvider>
-        </BackgroundProvider>
+        <LocationUrlParamsProvider>
+          <BackgroundProvider>
+            <ThemeProvider>
+              <TooltipProvider>
+                <Suspense fallback={null}>
+                  {header === HeaderStyle.AppBar ? (
+                    <AppBar>{content}</AppBar>
+                  ) : (
+                    content
+                  )}
+                </Suspense>
+              </TooltipProvider>
+            </ThemeProvider>
+          </BackgroundProvider>
+        </LocationUrlParamsProvider>
       </BrowserRouter>
     </I18nextProvider>
   );
diff --git a/src/UrlParams.ts b/src/UrlParams.ts
index 805cab71..dd83a496 100644
--- a/src/UrlParams.ts
+++ b/src/UrlParams.ts
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { useMemo } from "react";
+import { createContext, use, useMemo } from "react";
 import { useLocation } from "react-router-dom";
 import { logger } from "matrix-js-sdk/lib/logger";
 import {
@@ -519,11 +519,36 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
   };
 };
 
+const UrlParamsContext = createContext<UrlParams | null>(null);
+
 /**
- * Hook to simplify use of getUrlParams.
- * @returns The app parameters for the current URL
+ * Supplies the parameters Element Call should run with.
+ *
+ * The standalone and widget builds derive these from the URL, but an embedder
+ * has no URL of its own to put them in, so it provides them directly instead.
+ *
+ * TODO: `UrlParams` is no longer an accurate name now that these need not come
+ * from a URL. Renaming it touches every consumer, so it is left until the rest
+ * of the de-globalisation work has settled.
  */
-export const useUrlParams = (): UrlParams => {
+export const UrlParamsProvider = UrlParamsContext.Provider;
+
+/**
+ * The parameters Element Call is running with.
+ *
+ * Falls back to parsing `window.location` when no provider is present, so that
+ * tests and stories keep working without one.
+ */
+export const useUrlParams = (): UrlParams =>
+  use(UrlParamsContext) ?? getUrlParams();
+
+/**
+ * Derives {@link UrlParams} from the current router location.
+ *
+ * Only meaningful when Element Call owns the URL; embedders provide the params
+ * directly through {@link UrlParamsProvider}.
+ */
+export const useUrlParamsFromLocation = (): UrlParams => {
   const { search, hash } = useLocation();
   return useMemo(() => getUrlParams(search, hash), [search, hash]);
 };

From 6e44332fd1ada38406a6890f0b77fe7267ea50b6 Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Wed, 2 Sep 2026 10:31:48 +0200
Subject: [PATCH 010/154] Stop reading URL parameters from inside the call path
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The view models reached for getUrlParams() — and so window.location —
from deep inside the call path: CallViewModel, MediaDevices, Publisher,
LocalMember and the footer view model. An embedded Element Call has no URL
of its own, so these values have to arrive as arguments instead.

Add the relevant options to CallViewModelOptions, to the MediaDevices and
Publisher constructors, to createLocalMembership$ and enterRTCSession, and
to createCallFooterViewModel. The remaining React consumers read the
context added in the previous commit. AppViewModel now takes its audio
output options too, moving that URL read out to main.tsx, where the app
shell can act as the adapter.

The new CallViewModelOptions fields are optional, defaulting to what the
URL parameters resolve to outside widget mode; the MediaDevices and
Publisher arguments are required, so that every construction site has to
be explicit.

useTheme.test.ts mocked the UrlParams module with a factory, so it needed
updating to mock the hook rather than getUrlParams.

No functional change.
---
 sdk/main.ts                                   | 13 ++++--
 src/App.tsx                                   | 25 ++++-------
 src/components/CallFooter.stories.tsx         |  4 +-
 src/components/CallFooterViewModel.test.ts    |  3 ++
 src/components/CallFooterViewModel.tsx        |  7 ++-
 .../MediaMuteAndSwitchButton.stories.tsx      |  4 +-
 src/main.tsx                                  | 11 ++++-
 src/room/GroupCallView.tsx                    | 10 ++---
 src/room/InCallView.tsx                       | 19 +++++++-
 src/state/AppViewModel.ts                     | 12 +++--
 src/state/CallViewModel/CallViewModel.test.ts |  5 ++-
 src/state/CallViewModel/CallViewModel.ts      | 44 ++++++++++++++++---
 .../localMember/LocalMember.test.ts           |  1 +
 .../CallViewModel/localMember/LocalMember.ts  | 26 ++++++++---
 .../localMember/Publisher.test.ts             |  3 ++
 .../CallViewModel/localMember/Publisher.ts    |  6 ++-
 src/state/MediaDevices.ts                     | 31 ++++++++++---
 src/useTheme.test.ts                          |  8 ++--
 src/useTheme.ts                               |  7 ++-
 src/utils/test-viewmodel.ts                   |  2 +
 20 files changed, 176 insertions(+), 65 deletions(-)

diff --git a/sdk/main.ts b/sdk/main.ts
index a001af65..55aa4a02 100644
--- a/sdk/main.ts
+++ b/sdk/main.ts
@@ -116,7 +116,7 @@ export async function createMatrixRTCSdk(
   logger.info("client created");
 
   // url params
-  const { roomId } = getUrlParams();
+  const { roomId, controlledAudioDevices, callIntent } = getUrlParams();
   if (roomId === null) throw Error("could not get roomId from url params");
   const room = client.getRoom(roomId);
   if (room === null) throw Error("could not get room from client");
@@ -128,7 +128,10 @@ export async function createMatrixRTCSdk(
   const rtcSession = rtcSessionManager.getRoomSession(room);
 
   // media devices
-  const mediaDevices = new MediaDevices(scope);
+  const mediaDevices = new MediaDevices(scope, {
+    controlledAudioDevices,
+    callIntent,
+  });
   const muteStates = new MuteStates(scope, mediaDevices, {
     audioEnabled: false,
     videoEnabled: false,
@@ -141,7 +144,11 @@ export async function createMatrixRTCSdk(
     room,
     mediaDevices,
     muteStates,
-    { encryptionSystem: { kind: E2eeType.PER_PARTICIPANT } },
+    {
+      encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
+      controlledAudioDevices,
+      callIntent,
+    },
     of({}),
     of({}),
     constant({ supported: false, processor: undefined }),
diff --git a/src/App.tsx b/src/App.tsx
index 511577de..238815a7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,14 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import {
-  type FC,
-  type JSX,
-  Suspense,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import { type FC, type JSX, Suspense, useEffect, useState } from "react";
 import { BrowserRouter, Route, useLocation, Routes } from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { TooltipProvider } from "@vector-im/compound-web";
@@ -32,7 +25,6 @@ import { ProcessorProvider } from "./livekit/TrackProcessorContext";
 import { type AppViewModel } from "./state/AppViewModel";
 import { MediaDevicesContext } from "./MediaDevicesContext";
 import {
-  getUrlParams,
   HeaderStyle,
   UrlParamsProvider,
   useUrlParams,
@@ -75,6 +67,12 @@ const ThemeProvider: FC<SimpleProviderProps> = ({ children }) => {
   return children;
 };
 
+/** Wraps the app in an {@link AppBar}, if the params ask for one. */
+const MaybeAppBar: FC<SimpleProviderProps> = ({ children }) => {
+  const { header } = useUrlParams();
+  return header === HeaderStyle.AppBar ? <AppBar>{children}</AppBar> : children;
+};
+
 interface Props {
   vm: AppViewModel;
 }
@@ -91,9 +89,6 @@ export const App: FC<Props> = ({ vm }) => {
       .catch(logger.error);
   });
 
-  // Since we are outside the router component, we cannot use useUrlParams here
-  const { header } = useMemo(getUrlParams, []);
-
   const content = loaded ? (
     <ClientProvider>
       <MediaDevicesContext value={vm.mediaDevices}>
@@ -123,11 +118,7 @@ export const App: FC<Props> = ({ vm }) => {
             <ThemeProvider>
               <TooltipProvider>
                 <Suspense fallback={null}>
-                  {header === HeaderStyle.AppBar ? (
-                    <AppBar>{content}</AppBar>
-                  ) : (
-                    content
-                  )}
+                  <MaybeAppBar>{content}</MaybeAppBar>
                 </Suspense>
               </TooltipProvider>
             </ThemeProvider>
diff --git a/src/components/CallFooter.stories.tsx b/src/components/CallFooter.stories.tsx
index 667cb607..3c3f4607 100644
--- a/src/components/CallFooter.stories.tsx
+++ b/src/components/CallFooter.stories.tsx
@@ -29,7 +29,9 @@ const reactionData = {
   reactions$: new BehaviorSubject({}),
 };
 
-const mediaDevices = new MediaDevices(globalScope);
+const mediaDevices = new MediaDevices(globalScope, {
+  controlledAudioDevices: false,
+});
 
 /**
  * A wrapper component that is used for:
diff --git a/src/components/CallFooterViewModel.test.ts b/src/components/CallFooterViewModel.test.ts
index 1fc9187a..9e73393b 100644
--- a/src/components/CallFooterViewModel.test.ts
+++ b/src/components/CallFooterViewModel.test.ts
@@ -15,6 +15,7 @@ import type { Alignment, Layout } from "../state/layout-types";
 import type { SpotlightTileViewModel } from "../state/TileViewModel";
 import type { DeviceLabel } from "../state/MediaDevices";
 import { createCallFooterViewModel } from "./CallFooterViewModel";
+import { HeaderStyle } from "../UrlParams";
 
 const platformMock = vi.hoisted(() => vi.fn(() => "desktop"));
 vi.mock("../Platform", () => ({
@@ -105,6 +106,7 @@ describe("createCallFooterViewModel", () => {
         mockMuteStates(),
         twoMicsAndOneCamMediaDevices,
         /* reactionIdentifier */ undefined,
+        { showControls: true, header: HeaderStyle.Standard },
       );
 
       expect(vm.audioOptions$.value).toEqual([]);
@@ -126,6 +128,7 @@ describe("createCallFooterViewModel", () => {
         mockMuteStates(),
         twoMicsAndOneCamMediaDevices,
         /* reactionIdentifier */ undefined,
+        { showControls: true, header: HeaderStyle.Standard },
       );
 
       expect(vm.audioOptions$?.value).toEqual([
diff --git a/src/components/CallFooterViewModel.tsx b/src/components/CallFooterViewModel.tsx
index 7e391b16..a2ca6c88 100644
--- a/src/components/CallFooterViewModel.tsx
+++ b/src/components/CallFooterViewModel.tsx
@@ -19,7 +19,7 @@ import { type Behavior, constant } from "../state/Behavior";
 import type { ObservableScope } from "../state/ObservableScope";
 import { type MuteStates } from "../state/MuteStates";
 import { createStaticViewModel, type ViewModel } from "../state/ViewModel";
-import { getUrlParams, HeaderStyle } from "../UrlParams";
+import { HeaderStyle } from "../UrlParams";
 import { platform } from "../Platform";
 import { type FooterSnapshot } from "./CallFooter";
 
@@ -138,6 +138,8 @@ function buildDeviceBehaviors(
  * @param mediaDevices - Available and selected input devices.
  * @param reactionIdentifier - The local user's reaction identifier string, or
  *   undefined when reactions are not supported (hides the reaction button).
+ * @param options - `showControls`: whether the call controls should be shown.
+ *   `header`: the style of header, which decides whether to show the logo.
  */
 export function createCallFooterViewModel(
   scope: ObservableScope,
@@ -145,8 +147,9 @@ export function createCallFooterViewModel(
   muteStates: MuteStates,
   mediaDevices: MediaDevices,
   reactionIdentifier: string | undefined,
+  options: { showControls: boolean; header: HeaderStyle },
 ): ViewModel<FooterSnapshot> {
-  const { showControls, header: headerStyle } = getUrlParams();
+  const { showControls, header: headerStyle } = options;
   const showLogo = headerStyle === HeaderStyle.Standard;
 
   const isPip$ = scope.behavior(
diff --git a/src/components/MediaMuteAndSwitchButton.stories.tsx b/src/components/MediaMuteAndSwitchButton.stories.tsx
index 89c12392..21def400 100644
--- a/src/components/MediaMuteAndSwitchButton.stories.tsx
+++ b/src/components/MediaMuteAndSwitchButton.stories.tsx
@@ -14,7 +14,9 @@ import { MediaDevicesContext } from "../MediaDevicesContext";
 import { MediaDevices } from "../state/MediaDevices";
 import { globalScope } from "../state/ObservableScope";
 
-const mediaDevices = new MediaDevices(globalScope);
+const mediaDevices = new MediaDevices(globalScope, {
+  controlledAudioDevices: false,
+});
 
 const meta = {
   component: MediaMuteAndSwitchButton,
diff --git a/src/main.tsx b/src/main.tsx
index 8f64c680..03c74c94 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -21,6 +21,7 @@ import { init as initRageshake } from "./settings/rageshake";
 import { Initializer } from "./initializer";
 import { AppViewModel } from "./state/AppViewModel";
 import { globalScope } from "./state/ObservableScope";
+import { getUrlParams } from "./UrlParams";
 
 initRageshake().catch((e) => {
   logger.error("Failed to initialize rageshake", e);
@@ -49,9 +50,17 @@ if (fatalError !== null) {
 
 Initializer.initBeforeReact()
   .then(() => {
+    const { controlledAudioDevices, callIntent } = getUrlParams();
     root.render(
       <StrictMode>
-        <App vm={new AppViewModel(globalScope)} />
+        <App
+          vm={
+            new AppViewModel(globalScope, {
+              controlledAudioDevices,
+              callIntent,
+            })
+          }
+        />
       </StrictMode>,
     );
   })
diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx
index dfeb0866..57e9205f 100644
--- a/src/room/GroupCallView.tsx
+++ b/src/room/GroupCallView.tsx
@@ -54,12 +54,7 @@ import { useRoomAvatar } from "./useRoomAvatar";
 import { useRoomName } from "./useRoomName";
 import { useJoinRule } from "./useJoinRule";
 import { InviteModal } from "./InviteModal";
-import {
-  getUrlParams,
-  HeaderStyle,
-  type UrlParams,
-  useUrlParams,
-} from "../UrlParams";
+import { HeaderStyle, type UrlParams, useUrlParams } from "../UrlParams";
 import { E2eeType } from "../e2ee/e2eeType";
 import { useAudioContext } from "../useAudioContext";
 import {
@@ -406,7 +401,7 @@ export const GroupCallView: FC<Props> = ({
             }
             // On a normal user hangup we can shut down and close the widget. But if an
             // error occurs we should keep the widget open until the user reads it.
-            if (reason != "error" && !getUrlParams().returnToLobby) {
+            if (reason != "error" && !returnToLobby) {
               try {
                 await widget.api.transport.send(ElementWidgetActions.Close, {});
               } catch (e) {
@@ -425,6 +420,7 @@ export const GroupCallView: FC<Props> = ({
       rtcSession,
       isPasswordlessUser,
       confineToRoom,
+      returnToLobby,
       navigate,
     ],
   );
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index a57dcce2..e291e001 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -122,8 +122,16 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     rootLogger.info("START CALL VIEW SCOPE");
     const scope = new ObservableScope();
     const reactionsReader = new ReactionsReader(scope, props.rtcSession);
-    const { autoLeaveWhenOthersLeft, waitForCallPickup, sendNotificationType } =
-      urlParams;
+    const {
+      autoLeaveWhenOthersLeft,
+      waitForCallPickup,
+      sendNotificationType,
+      controlledAudioDevices,
+      header,
+      showControls,
+      hideScreensharing,
+      callIntent,
+    } = urlParams;
 
     const vm = createCallViewModel$(
       scope,
@@ -136,6 +144,12 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
         autoLeaveWhenOthersLeft,
         waitForCallPickup: waitForCallPickup && sendNotificationType === "ring",
         matrixRTCMode$: matrixRTCModeSetting.value$,
+        controlledAudioDevices,
+        header,
+        showControls,
+        hideScreensharing,
+        sendNotificationType,
+        callIntent,
       },
       reactionsReader.raisedHands$,
       reactionsReader.reactions$,
@@ -172,6 +186,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
       props.muteStates,
       mediaDevices,
       `${props.client.getUserId()}:${props.client.getDeviceId()}`,
+      { showControls: urlParams.showControls, header: urlParams.header },
     );
     setFooterVm(footerVm);
     setDeveloperSettingsVm(createDeveloperSettingsTabViewModel(scope, vm));
diff --git a/src/state/AppViewModel.ts b/src/state/AppViewModel.ts
index 7ad91e9d..3f69515b 100644
--- a/src/state/AppViewModel.ts
+++ b/src/state/AppViewModel.ts
@@ -5,17 +5,23 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { MediaDevices } from "./MediaDevices";
+import { type AudioOutputOptions, MediaDevices } from "./MediaDevices";
 import { type ObservableScope } from "./ObservableScope";
 
 /**
  * The top-level state holder for the application.
  */
 export class AppViewModel {
-  public readonly mediaDevices = new MediaDevices(this.scope);
+  public readonly mediaDevices = new MediaDevices(
+    this.scope,
+    this.audioOutputOptions,
+  );
 
   // TODO: Move more application logic here. The CallViewModel, at the very
   // least, ought to be accessible from this object.
 
-  public constructor(private readonly scope: ObservableScope) {}
+  public constructor(
+    private readonly scope: ObservableScope,
+    private readonly audioOutputOptions: AudioOutputOptions,
+  ) {}
 }
diff --git a/src/state/CallViewModel/CallViewModel.test.ts b/src/state/CallViewModel/CallViewModel.test.ts
index 18154917..7a27fd3e 100644
--- a/src/state/CallViewModel/CallViewModel.test.ts
+++ b/src/state/CallViewModel/CallViewModel.test.ts
@@ -1593,12 +1593,13 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
 
   it.skip("audio output changes when toggling earpiece mode", () => {
     withTestScheduler(({ schedule, expectObservable }) => {
-      getUrlParams.mockReturnValue({ controlledAudioDevices: true });
       vi.mocked(ComponentsCore.createMediaDeviceObserver).mockReturnValue(
         of([]),
       );
 
-      const devices = new MediaDevices(testScope());
+      const devices = new MediaDevices(testScope(), {
+        controlledAudioDevices: true,
+      });
 
       window.controls.setAvailableAudioDevices([
         { id: "speaker", name: "Speaker", isSpeaker: true },
diff --git a/src/state/CallViewModel/CallViewModel.ts b/src/state/CallViewModel/CallViewModel.ts
index 09f73d1a..e9abeae5 100644
--- a/src/state/CallViewModel/CallViewModel.ts
+++ b/src/state/CallViewModel/CallViewModel.ts
@@ -45,6 +45,8 @@ import {
   MembershipManagerEvent,
   type LivekitTransportConfig,
   type MatrixRTCSession,
+  type RTCCallIntent,
+  type RTCNotificationType,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { type IWidgetApiRequest } from "matrix-widget-api";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
@@ -85,7 +87,7 @@ import { constant, type Behavior } from "../Behavior";
 import { E2eeType } from "../../e2ee/e2eeType";
 import { MatrixKeyProvider } from "../../e2ee/matrixKeyProvider";
 import { type MuteStates } from "../MuteStates";
-import { getUrlParams, HeaderStyle } from "../../UrlParams";
+import { HeaderStyle } from "../../UrlParams";
 import { type ProcessorState } from "../../livekit/TrackProcessorContext";
 import { ElementWidgetActions, widget } from "../../widget";
 import {
@@ -171,6 +173,23 @@ import { type GridTileViewModel } from "../TileViewModel.ts";
 // callMembership -> rtcMembership
 export interface CallViewModelOptions {
   encryptionSystem: EncryptionSystem;
+  /**
+   * Whether the app hosting Element Call controls the audio output devices,
+   * rather than the browser. Defaults to false.
+   */
+  controlledAudioDevices?: boolean;
+  /** The style of header to show. Defaults to {@link HeaderStyle.Standard}. */
+  header?: HeaderStyle;
+  /** Whether the call controls should be shown. Defaults to true. */
+  showControls?: boolean;
+  /** Whether to hide the screen-sharing button. Defaults to false. */
+  hideScreensharing?: boolean;
+  /**
+   * Whether and what kind of notification to send when joining the call.
+   */
+  sendNotificationType?: RTCNotificationType;
+  /** The kind of call being placed. */
+  callIntent?: RTCCallIntent;
   autoLeaveWhenOthersLeft?: boolean;
   /**
    * If the call is started in a way where we want it to behave like a telephone usecase
@@ -435,6 +454,17 @@ export function createCallViewModel$(
   if (!(userId && deviceId))
     throw new UnknownCallError(new Error("userId and deviceId are required"));
 
+  // Defaults match what the URL parameters resolve to outside of widget mode,
+  // so that callers which don't care (chiefly tests) behave as they always have.
+  const {
+    controlledAudioDevices = false,
+    header = HeaderStyle.Standard,
+    showControls = true,
+    hideScreensharing = false,
+    sendNotificationType,
+    callIntent,
+  } = options;
+
   const livekitKeyProvider = getE2eeKeyProvider(
     options.encryptionSystem,
     matrixRTCSession,
@@ -523,7 +553,7 @@ export function createCallViewModel$(
       mediaDevices,
       trackProcessorState$,
       livekitKeyProvider,
-      getUrlParams().controlledAudioDevices,
+      controlledAudioDevices,
       options.livekitRoomFactory,
     );
 
@@ -563,6 +593,8 @@ export function createCallViewModel$(
         encryptMedia: livekitKeyProvider !== undefined,
         // TODO. This might need to get called again on each change of matrixRTCMode...
         matrixRTCMode: mode,
+        sendNotificationType,
+        callIntent,
       })),
     ),
   );
@@ -592,12 +624,14 @@ export function createCallViewModel$(
         logger.getChild(
           "[Publisher " + connection.transport.livekit_service_url + "]",
         ),
+        controlledAudioDevices,
       );
     },
     connectionManager,
     matrixRTCSession,
     localTransport$,
     roomId: matrixRoom.roomId,
+    hideScreensharing,
     logger: logger.getChild(`[${Date.now()}]`),
   });
 
@@ -1457,9 +1491,8 @@ export function createCallViewModel$(
     ),
   );
 
-  const urlParams = getUrlParams();
   const showFooterUrlParams = !(
-    urlParams.header === HeaderStyle.None && urlParams.showControls === false
+    header === HeaderStyle.None && showControls === false
   );
   const showFooter$ = scope.behavior(
     naturallyShowFooter$.pipe(
@@ -1778,8 +1811,7 @@ export function createCallViewModel$(
   return {
     autoLeave$: autoLeave$,
     ringingVm$: ringingMedia$,
-    ringingStatusLocation:
-      urlParams.header === HeaderStyle.AppBar ? "app_bar" : "tile",
+    ringingStatusLocation: header === HeaderStyle.AppBar ? "app_bar" : "tile",
     leave$: leave$,
     hangup: (): void => userHangup$.next(),
     join: localMembership.requestJoinAndPublish,
diff --git a/src/state/CallViewModel/localMember/LocalMember.test.ts b/src/state/CallViewModel/localMember/LocalMember.test.ts
index 9ea6bb72..2b89d50b 100644
--- a/src/state/CallViewModel/localMember/LocalMember.test.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.test.ts
@@ -199,6 +199,7 @@ describe("LocalMembership", () => {
       rtsSession$: constant(RTCMemberStatus.Connected),
     },
     roomId: "!test-room-id:example.org",
+    hideScreensharing: false,
   };
 
   it("throws error on missing RTC config error", () => {
diff --git a/src/state/CallViewModel/localMember/LocalMember.ts b/src/state/CallViewModel/localMember/LocalMember.ts
index 2f4fde26..844b66de 100644
--- a/src/state/CallViewModel/localMember/LocalMember.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.ts
@@ -20,6 +20,8 @@ import {
   type LivekitTransport,
   type LivekitTransportConfig,
   type MatrixRTCSession,
+  type RTCCallIntent,
+  type RTCNotificationType,
 } from "matrix-js-sdk/lib/matrixrtc";
 import {
   BehaviorSubject,
@@ -52,7 +54,7 @@ import {
   UnknownCallError,
 } from "../../../utils/errors.ts";
 import { ElementWidgetActions, widget } from "../../../widget.ts";
-import { getUrlParams } from "../../../UrlParams.ts";
+
 import { PosthogAnalytics } from "../../../analytics/PosthogAnalytics.ts";
 import {
   advancedScreenShare,
@@ -141,6 +143,8 @@ interface Props {
     MatrixRTCSession,
     "updateCallIntent" | "leaveRoomSession"
   >;
+  /** Whether to hide the screen-sharing button. */
+  hideScreensharing: boolean;
   logger: Logger;
 }
 
@@ -160,6 +164,7 @@ interface Props {
  * @param props.muteStates The mute states for video and audio.
  * @param props.matrixRTCSession The matrix RTC session to join.
  * @param props.roomId The room ID used as the call identifier in analytics events.
+ * @param props.hideScreensharing Whether to hide the screen-sharing button.
  * @returns
  *  - publisher: The handle to create tracks and publish them to the room.
  *  - connected$: the current connection state. Including matrix server and livekit server connection. (only considering the livekit server we are using for our own media publication)
@@ -178,6 +183,7 @@ export const createLocalMembership$ = ({
   muteStates,
   matrixRTCSession,
   roomId,
+  hideScreensharing,
 }: Props): {
   /**
    * This request to start audio and video tracks.
@@ -709,7 +715,7 @@ export const createLocalMembership$ = ({
   let toggleScreenSharing: (() => void) | null = null;
   if (
     "getDisplayMedia" in (navigator.mediaDevices ?? {}) &&
-    !getUrlParams().hideScreensharing
+    !hideScreensharing
   ) {
     toggleScreenSharing = (): void => {
       const screenshareSettings: ScreenShareCaptureOptions = {
@@ -820,6 +826,10 @@ export function observeSharingScreen$(p: Participant): Observable<boolean> {
 interface EnterRTCSessionOptions {
   encryptMedia: boolean;
   matrixRTCMode: MatrixRTCMode;
+  /** Whether and what kind of notification to send when joining. */
+  sendNotificationType?: RTCNotificationType;
+  /** The kind of call being placed. */
+  callIntent?: RTCCallIntent;
 }
 
 /**
@@ -832,7 +842,9 @@ interface EnterRTCSessionOptions {
  * @param rtcSession - The MatrixRTCSession to join.
  * @param ownMembershipIdentity - Options for entering the RTC session.
  * @param transport - The LivekitTransport to use for this session.
- * @param options - `encryptMedia`: Whether to encrypt media `matrixRTCMode`: The Matrix RTC mode to use.
+ * @param options - `encryptMedia`: Whether to encrypt media. `matrixRTCMode`: The
+ *   Matrix RTC mode to use. `sendNotificationType`: Whether and what kind of
+ *   notification to send on join. `callIntent`: The kind of call being placed.
  * @throws If the widget could not send ElementWidgetActions.JoinCall action.
  */
 // Exported for unit testing
@@ -842,7 +854,12 @@ export function enterRTCSession(
   transport: LivekitTransportConfig,
   options: EnterRTCSessionOptions,
 ): void {
-  const { encryptMedia, matrixRTCMode } = options;
+  const {
+    encryptMedia,
+    matrixRTCMode,
+    sendNotificationType: notificationType,
+    callIntent,
+  } = options;
   PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
   PosthogAnalytics.instance.eventCallStarted.track(rtcSession.room.roomId);
 
@@ -851,7 +868,6 @@ export function enterRTCSession(
   // groupCallOTelMembership?.onJoinCall();
 
   const { matrix_rtc_session: matrixRtcSessionConfig } = Config.get();
-  const { sendNotificationType: notificationType, callIntent } = getUrlParams();
   const multiSFU =
     matrixRTCMode === MatrixRTCMode.Compatibility ||
     matrixRTCMode === MatrixRTCMode.Matrix_2_0;
diff --git a/src/state/CallViewModel/localMember/Publisher.test.ts b/src/state/CallViewModel/localMember/Publisher.test.ts
index 21775c58..5d9f0378 100644
--- a/src/state/CallViewModel/localMember/Publisher.test.ts
+++ b/src/state/CallViewModel/localMember/Publisher.test.ts
@@ -192,6 +192,7 @@ describe("Publisher", () => {
       muteStates,
       constant({ supported: false, processor: undefined }),
       logger,
+      false,
     );
   });
 
@@ -309,6 +310,7 @@ describe("Publisher", () => {
         muteStates,
         constant({ supported: false, processor: undefined }),
         logger,
+        false,
       );
     });
     afterEach(async () => {
@@ -364,6 +366,7 @@ describe("Bug fix", () => {
       muteStates,
       constant({ supported: false, processor: undefined }),
       logger,
+      false,
     );
     audioEnabled$.next(true);
 
diff --git a/src/state/CallViewModel/localMember/Publisher.ts b/src/state/CallViewModel/localMember/Publisher.ts
index 0d5f263a..5353a98d 100644
--- a/src/state/CallViewModel/localMember/Publisher.ts
+++ b/src/state/CallViewModel/localMember/Publisher.ts
@@ -29,7 +29,7 @@ import {
   type ProcessorState,
   trackProcessorSync,
 } from "../../../livekit/TrackProcessorContext.tsx";
-import { getUrlParams } from "../../../UrlParams.ts";
+
 import { observeTrackReference$ } from "../../observeTrackReference";
 import { type Connection } from "../remoteMembers/Connection.ts";
 import { ObservableScope } from "../../ObservableScope.ts";
@@ -56,6 +56,8 @@ export class Publisher {
    * @param muteStates - The mute states for audio and video.
    * @param trackerProcessorState$ - The processor state for the video track processor (e.g. background blur).
    * @param logger - The logger to use for logging :D.
+   * @param controlledAudioDevices - Whether the app hosting Element Call
+   *   controls the audio output devices, rather than the browser.
    */
   public constructor(
     private connection: Pick<Connection, "livekitRoom" | "state$">, //setE2EEEnabled,
@@ -63,8 +65,8 @@ export class Publisher {
     private readonly muteStates: MuteStates,
     trackerProcessorState$: Behavior<ProcessorState>,
     private logger: Logger,
+    controlledAudioDevices: boolean,
   ) {
-    const { controlledAudioDevices } = getUrlParams();
     const room = connection.livekitRoom;
 
     room.setE2EEEnabled(room.options.e2ee !== undefined)?.catch((e: Error) => {
diff --git a/src/state/MediaDevices.ts b/src/state/MediaDevices.ts
index 70a676cf..4610bab6 100644
--- a/src/state/MediaDevices.ts
+++ b/src/state/MediaDevices.ts
@@ -16,6 +16,7 @@ import {
 } from "rxjs";
 import { createMediaDeviceObserver } from "@livekit/components-core";
 import { type Logger, logger as rootLogger } from "matrix-js-sdk/lib/logger";
+import { type RTCCallIntent } from "matrix-js-sdk/lib/matrixrtc";
 
 import {
   alwaysShowIphoneEarpiece as alwaysShowIphoneEarpieceSetting,
@@ -25,7 +26,6 @@ import {
 } from "../settings/settings";
 import { type ObservableScope } from "./ObservableScope";
 import { availableOutputDevices$ as controlledAvailableOutputDevices$ } from "../controls";
-import { getUrlParams } from "../UrlParams";
 import { platform } from "../Platform";
 import { switchWhen } from "../utils/observable";
 import { type Behavior, constant } from "./Behavior";
@@ -338,6 +338,22 @@ class VideoInput implements MediaDevice<DeviceLabel, SelectedDevice> {
   }
 }
 
+/**
+ * How Element Call should manage audio output.
+ */
+export interface AudioOutputOptions {
+  /**
+   * Whether the list of output devices is controlled by the app hosting Element
+   * Call, through the global JS controls, rather than by the browser.
+   */
+  controlledAudioDevices: boolean;
+  /**
+   * The kind of call being placed, which decides the initial output route when
+   * the host controls the devices.
+   */
+  callIntent?: RTCCallIntent;
+}
+
 export class MediaDevices {
   private readonly deviceNamesRequest$ = new Subject<void>();
   /**
@@ -368,23 +384,28 @@ export class MediaDevices {
   public readonly audioOutput: MediaDevice<
     AudioOutputDeviceLabel,
     SelectedAudioOutputDevice
-  > = getUrlParams().controlledAudioDevices
+  > = this.audioOutputOptions.controlledAudioDevices
     ? platform == "android"
       ? new AndroidControlledAudioOutput(
           controlledAvailableOutputDevices$,
           this.scope,
-          getUrlParams().callIntent,
+          this.audioOutputOptions.callIntent,
           window.controls,
         )
       : new IOSControlledAudioOutput(
           this.usingNames$,
           this.scope,
-          getUrlParams().callIntent,
+          this.audioOutputOptions.callIntent,
         )
     : new AudioOutput(this.usingNames$, this.scope);
 
   public readonly videoInput: MediaDevice<DeviceLabel, SelectedDevice> =
     new VideoInput(this.usingNames$, this.scope);
 
-  public constructor(private readonly scope: ObservableScope) {}
+  // Note: both parameters are read by the field initializers above, which is
+  // safe because TypeScript assigns parameter properties before running them.
+  public constructor(
+    private readonly scope: ObservableScope,
+    private readonly audioOutputOptions: AudioOutputOptions,
+  ) {}
 }
diff --git a/src/useTheme.test.ts b/src/useTheme.test.ts
index 6e471462..4078ed34 100644
--- a/src/useTheme.test.ts
+++ b/src/useTheme.test.ts
@@ -19,10 +19,10 @@ import EventEmitter from "events";
 import { WidgetApiToWidgetAction } from "matrix-widget-api";
 
 import { useTheme } from "./useTheme";
-import { getUrlParams } from "./UrlParams";
+import { useUrlParams } from "./UrlParams";
 import { widget } from "./widget";
 
-vi.mock("./UrlParams", () => ({ getUrlParams: vi.fn() }));
+vi.mock("./UrlParams", () => ({ useUrlParams: vi.fn() }));
 vi.mock("./widget", () => ({
   widget: {
     api: { transport: { reply: vi.fn() } },
@@ -39,7 +39,7 @@ describe("useTheme", () => {
     vi.spyOn(originalClassList, "add");
     vi.spyOn(originalClassList, "remove");
     vi.spyOn(originalClassList, "item").mockReturnValue(null);
-    (getUrlParams as Mock).mockReturnValue({ theme: "dark" });
+    (useUrlParams as Mock).mockReturnValue({ theme: "dark" });
   });
 
   afterEach(() => {
@@ -53,7 +53,7 @@ describe("useTheme", () => {
     { setTheme: "light-high-contrast", add: ["cpd-theme-light-hc"] },
   ])("apply procedure", ({ setTheme, add }) => {
     test(`should apply ${add[0]} theme when ${setTheme} theme is specified`, () => {
-      (getUrlParams as Mock).mockReturnValue({ theme: setTheme });
+      (useUrlParams as Mock).mockReturnValue({ theme: setTheme });
 
       renderHook(() => useTheme());
 
diff --git a/src/useTheme.ts b/src/useTheme.ts
index 5bac2898..85dace2a 100644
--- a/src/useTheme.ts
+++ b/src/useTheme.ts
@@ -9,15 +9,14 @@ import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { WidgetApiToWidgetAction } from "matrix-widget-api";
 import { type IThemeChangeActionRequest } from "matrix-widget-api";
 
-import { getUrlParams } from "./UrlParams";
+import { useUrlParams } from "./UrlParams";
 import { widget } from "./widget";
 import { useRootElement } from "./RootElementContext";
 
 export const useTheme = (): void => {
   const rootElement = useRootElement();
-  const [requestedTheme, setRequestedTheme] = useState(
-    () => getUrlParams().theme,
-  );
+  const { theme } = useUrlParams();
+  const [requestedTheme, setRequestedTheme] = useState(theme);
   const previousTheme = useRef<string | null>(rootElement.classList.item(0));
 
   useEffect(() => {
diff --git a/src/utils/test-viewmodel.ts b/src/utils/test-viewmodel.ts
index f5391002..8e88e720 100644
--- a/src/utils/test-viewmodel.ts
+++ b/src/utils/test-viewmodel.ts
@@ -40,6 +40,7 @@ import { type RaisedHandInfo, type ReactionInfo } from "../reactions";
 import { constant } from "../state/Behavior";
 import { MatrixRTCMode } from "../config/ConfigOptions";
 import { createCallFooterViewModel } from "../components/CallFooterViewModel";
+import { HeaderStyle } from "../UrlParams";
 import { type FooterSnapshot } from "../components/CallFooter";
 import { type ViewModel } from "../state/ViewModel";
 import { createDeveloperSettingsTabViewModel } from "../settings/DeveloperSettingsTabViewModel";
@@ -187,6 +188,7 @@ export function getBasicCallViewModelEnvironment(
     muteStates,
     mediaDevices,
     "reactionId",
+    { showControls: true, header: HeaderStyle.Standard },
   );
   return {
     vm,

From d8d70812b847fa54c3b1adc9e3d787d5a3270443 Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Wed, 2 Sep 2026 11:00:42 +0200
Subject: [PATCH 011/154] Read the shared room key from the parameters context

useRoomEncryptionSystem is used from GroupCallView, inside the part of
Element Call that will become the embeddable component, but it reached for
getUrlParams() via getKeyForRoom(). Extract the lookup into a helper taking
the room ID and password explicitly: the hook supplies them from the
parameters context, while getKeyForRoom keeps reading the URL for its one
remaining caller in the app shell.

No functional change.
---
 src/e2ee/sharedKeyManagement.ts | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/e2ee/sharedKeyManagement.ts b/src/e2ee/sharedKeyManagement.ts
index 18d007e2..b29ede31 100644
--- a/src/e2ee/sharedKeyManagement.ts
+++ b/src/e2ee/sharedKeyManagement.ts
@@ -12,7 +12,7 @@ import {
   setLocalStorageItemReactive,
   useLocalStorage,
 } from "../useLocalStorage";
-import { getUrlParams } from "../UrlParams";
+import { getUrlParams, useUrlParams } from "../UrlParams";
 import { E2eeType } from "./e2eeType";
 import { useClient } from "../ClientContext";
 
@@ -57,19 +57,31 @@ const useRoomSharedKey = (
   return [setInitialValue ?? roomSharedKey, setRoomSharedKey];
 };
 
-export function getKeyForRoom(roomId: string): string | null {
-  const { roomId: urlRoomId, password } = getUrlParams();
-  if (roomId !== urlRoomId)
+/**
+ * The shared key for a room, preferring one supplied in the parameters Element
+ * Call was started with over whatever is in local storage.
+ */
+function keyForRoom(
+  roomId: string,
+  paramsRoomId: string | null,
+  password: string | null,
+): string | null {
+  if (roomId !== paramsRoomId)
     logger.warn(
       "requested key for a roomId which is not the current call room id (from the URL)",
       roomId,
-      urlRoomId,
+      paramsRoomId,
     );
   return (
     password ?? localStorage.getItem(getRoomSharedKeyLocalStorageKey(roomId))
   );
 }
 
+export function getKeyForRoom(roomId: string): string | null {
+  const { roomId: paramsRoomId, password } = getUrlParams();
+  return keyForRoom(roomId, paramsRoomId, password);
+}
+
 export type Unencrypted = { kind: E2eeType.NONE };
 export type SharedSecret = { kind: E2eeType.SHARED_KEY; secret: string };
 export type PerParticipantE2EE = { kind: E2eeType.PER_PARTICIPANT };
@@ -77,10 +89,15 @@ export type EncryptionSystem = Unencrypted | SharedSecret | PerParticipantE2EE;
 
 export function useRoomEncryptionSystem(roomId: string): EncryptionSystem {
   const { client } = useClient();
+  const { roomId: paramsRoomId, password } = useUrlParams();
 
   const [storedPassword] = useRoomSharedKey(
+    // TODO: this passes an already-prefixed key where a room ID is expected, so
+    // the local storage key ends up prefixed twice and never matches what
+    // saveKeyForRoom writes. Preserved as-is here to keep this commit a pure
+    // refactor; the reactive read is effectively dead until it is fixed.
     getRoomSharedKeyLocalStorageKey(roomId),
-    getKeyForRoom(roomId) ?? undefined,
+    keyForRoom(roomId, paramsRoomId, password) ?? undefined,
   );
 
   const room = client?.getRoom(roomId);

From 8e78ac76bd8df8631763e4e9af23901352c08000 Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Wed, 2 Sep 2026 13:03:23 +0200
Subject: [PATCH 012/154] Drop ErrorView's widget prop in favour of the host
 bridge
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ErrorView needed a widget only to decide whether to offer a close button
or a link home. That prop was threaded down through ErrorPage, RichError
and GroupCallErrorBoundary from seven call sites, to answer the single
question of whether the host can dismiss Element Call — which the host
bridge now answers directly through the presence of close().

Read the bridge from context in ErrorView and remove the prop, along with
the plumbing that carried it.

No functional change: the rendered output is unchanged, as the existing
snapshot confirms.

Move GroupCallView onto the host bridge

GroupCallView asked the widget API to keep it on screen, to close it, and
to tell it when a preloaded call should join. Route all three through the
host bridge and drop the widget prop.
---
 src/App.tsx                                   |  43 ++--
 src/Avatar.test.tsx                           |  63 ++----
 src/Avatar.tsx                                |  34 +--
 src/ClientContext.tsx                         |   2 +-
 src/ErrorView.tsx                             |  32 ++-
 src/FullScreenView.tsx                        |   5 +-
 src/HostBridge.test.ts                        | 101 +++++++++
 src/HostBridge.ts                             | 214 ++++++++++++++++++
 src/RichError.tsx                             |   7 +-
 src/home/HomePage.tsx                         |   3 +-
 src/room/GroupCallErrorBoundary.test.tsx      |  58 ++---
 src/room/GroupCallErrorBoundary.tsx           |   9 +-
 src/room/GroupCallView.test.tsx               | 132 ++++-------
 src/room/GroupCallView.tsx                    | 120 +++++-----
 src/room/RoomPage.tsx                         |   7 +-
 .../GroupCallErrorBoundary.test.tsx.snap      |   2 +-
 src/useTheme.test.ts                          |  43 ++--
 src/useTheme.ts                               |  32 +--
 18 files changed, 542 insertions(+), 365 deletions(-)
 create mode 100644 src/HostBridge.test.ts
 create mode 100644 src/HostBridge.ts

diff --git a/src/App.tsx b/src/App.tsx
index 238815a7..1d51f959 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -33,6 +33,12 @@ import {
 import { AppBar } from "./AppBar";
 import { i18n } from "./utils/i18n";
 import { useRootElement } from "./RootElementContext";
+import {
+  createWidgetHostBridge,
+  HostBridgeProvider,
+  nullHostBridge,
+} from "./HostBridge";
+import { useInitial } from "./useInitial";
 
 const SentryRoute = Sentry.withSentryReactRouterV7Routing(Route);
 
@@ -78,13 +84,18 @@ interface Props {
 }
 
 export const App: FC<Props> = ({ vm }) => {
+  // The standalone build has no host; the widget build's host is the client it
+  // is a widget of.
+  const hostBridge = useInitial(() =>
+    widget === null ? nullHostBridge : createWidgetHostBridge(widget),
+  );
   const [loaded, setLoaded] = useState(false);
   useEffect(() => {
     Initializer.init()
       ?.then(async () => {
         if (loaded) return;
         setLoaded(true);
-        await widget?.api.sendContentLoaded();
+        await hostBridge.contentLoaded();
       })
       .catch(logger.error);
   });
@@ -94,7 +105,7 @@ export const App: FC<Props> = ({ vm }) => {
       <MediaDevicesContext value={vm.mediaDevices}>
         <ProcessorProvider>
           <Sentry.ErrorBoundary
-            fallback={(error) => <ErrorPage error={error} widget={widget} />}
+            fallback={(error) => <ErrorPage error={error} />}
           >
             <Routes>
               <SentryRoute path="/" element={<HomePage />} />
@@ -112,19 +123,21 @@ export const App: FC<Props> = ({ vm }) => {
 
   return (
     <I18nextProvider i18n={i18n}>
-      <BrowserRouter>
-        <LocationUrlParamsProvider>
-          <BackgroundProvider>
-            <ThemeProvider>
-              <TooltipProvider>
-                <Suspense fallback={null}>
-                  <MaybeAppBar>{content}</MaybeAppBar>
-                </Suspense>
-              </TooltipProvider>
-            </ThemeProvider>
-          </BackgroundProvider>
-        </LocationUrlParamsProvider>
-      </BrowserRouter>
+      <HostBridgeProvider value={hostBridge}>
+        <BrowserRouter>
+          <LocationUrlParamsProvider>
+            <BackgroundProvider>
+              <ThemeProvider>
+                <TooltipProvider>
+                  <Suspense fallback={null}>
+                    <MaybeAppBar>{content}</MaybeAppBar>
+                  </Suspense>
+                </TooltipProvider>
+              </ThemeProvider>
+            </BackgroundProvider>
+          </LocationUrlParamsProvider>
+        </BrowserRouter>
+      </HostBridgeProvider>
     </I18nextProvider>
   );
 };
diff --git a/src/Avatar.test.tsx b/src/Avatar.test.tsx
index 1e32de0e..c5d5e25a 100644
--- a/src/Avatar.test.tsx
+++ b/src/Avatar.test.tsx
@@ -9,18 +9,22 @@ import { afterEach, expect, test, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { type MatrixClient } from "matrix-js-sdk";
 import { type FC, type PropsWithChildren } from "react";
-import { type WidgetApi } from "matrix-widget-api";
 
 import { ClientContextProvider } from "./ClientContext";
-import { Avatar, getAvatarFromWidgetAPI } from "./Avatar";
+import { Avatar } from "./Avatar";
 import { mockMatrixRoomMember, mockRtcMembership } from "./utils/test";
-import { widget } from "./widget";
+import {
+  type HostBridge,
+  HostBridgeProvider,
+  nullHostBridge,
+} from "./HostBridge";
 
 const TestComponent: FC<
   PropsWithChildren<{
     client: MatrixClient;
+    hostBridge?: HostBridge;
   }>
-> = ({ client, children }) => {
+> = ({ client, hostBridge = nullHostBridge, children }) => {
   return (
     <ClientContextProvider
       value={{
@@ -38,17 +42,11 @@ const TestComponent: FC<
         },
       }}
     >
-      {children}
+      <HostBridgeProvider value={hostBridge}>{children}</HostBridgeProvider>
     </ClientContextProvider>
   );
 };
 
-vi.mock("./widget", () => ({
-  widget: {
-    api: null, // Ideally we'd only mock this in the as a widget test so the whole module is otherwise null, but just nulling `api` by default works well enough
-  },
-}));
-
 afterEach(() => {
   vi.unstubAllGlobals();
 });
@@ -135,7 +133,7 @@ test("should attempt to fetch authenticated media from the server", async () =>
   });
 });
 
-test("should attempt to use widget API if running as a widget", async () => {
+test("should download media through the host when it offers to", async () => {
   const expectedMXCUrl = "mxc://example.org/alice-avatar";
   const expectedObjectURL = "my-object-url";
   const theBlob = new Blob([]);
@@ -151,8 +149,8 @@ test("should attempt to use widget API if running as a widget", async () => {
     getAccessToken: () => undefined,
   } as unknown as MatrixClient);
 
-  widget!.api = { downloadFile: vi.fn() } as unknown as WidgetApi;
-  vi.spyOn(widget!.api, "downloadFile").mockResolvedValue({ file: theBlob });
+  const downloadMedia = vi.fn().mockResolvedValue(theBlob);
+  const hostBridge: HostBridge = { ...nullHostBridge, downloadMedia };
   const member = mockMatrixRoomMember(
     mockRtcMembership("@alice:example.org", "AAAA"),
     {
@@ -161,7 +159,7 @@ test("should attempt to use widget API if running as a widget", async () => {
   );
   const displayName = "Alice";
   render(
-    <TestComponent client={client}>
+    <TestComponent client={client} hostBridge={hostBridge}>
       <Avatar
         id={member.userId}
         name={displayName}
@@ -176,38 +174,5 @@ test("should attempt to use widget API if running as a widget", async () => {
     document.querySelector(`img[src='${expectedObjectURL}']`),
   );
 
-  expect(widget!.api.downloadFile).toBeCalledWith(expectedMXCUrl);
-});
-
-test("Supports download files as base64", async () => {
-  const expectedMXCUrl = "mxc://example.org/alice-avatar";
-  const expectedBase64 =
-    "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAADIElEQVR4nAAQA+/8ApxhEfFNuwna" +
-    "+DO1pFMx5YDg6gb8p1WFkbFSox9H6r5c8jp1gxlHXrDfA/oQFi4A0gTXH9YBNgwRm12xO68QP6lv" +
-    "ZLKH9qW1VM6kz6zA3T1Ui8J+Xbnh2BZ7oXDe/2gajzoA6j1JGotpz99xO+T2NR634Nhx3zhuera/" +
-    "UdrpMLdEpwWXLnSqZRasGsrl93FjdTwRBMaqsx6vJksnPOmV9ttbXFIOb0XDGPbVythSC2n7P/bS" +
-    "Zv0U0QqbBLk/5Wu1werYzAHiz11Bj8bEylQ92Pxvo+PwF6/KbGnIHTvGZkFzDkMnqz3g7Pw3NOSP" +
-    "oV+qfyJuSI0AeZmrPejFQ8kzBSDWO8D7lr4+6ePRBRmZtKCf+fNjSCOyb5jqwhBnD2cycbJtQQbR" +
-    "A4qdPG2ONfTPeQgi96+zT7grBI0JwvgFBceJdLJd4BX1VQIyY+j7OYueNWqEpf8iYgMj78I95eRt" +
-    "nfPLwlxhVns84iL4Yvw8jDrB9vQi8ktpsdJOMiDwKrBGD3q56COD2oIA96CCBgiro4tkvkumZSAc" +
-    "ZKXRLsziUFGytWJLaPjwnzXv2hicPy6k9AXsF3QkysOZAkB3m9XPpixhq9b0OKqV/zZx3L79o6wZ" +
-    "Dr40J7sj7f+ARd545CP01r5omHt94tbnjgA46HsM2OhP+qQ882LN+Bhscq2WSHGSHT4J9MQcsWZP" +
-    "2+N2LdPy61MN4/1++BJHmDcDLQBUEwLvjZp1fRfzxV7yirwIiOA7Vr8z+1yvS/pSkfUzkjswybOd" +
-    "M5i0I8Q69MTXAKxqtR0/tyGkfCmHfupGASp/SAT9J8f3aQV+gDbpva592v4w8Cv5EMm7CzZPwThF" +
-    "kgTChNPts7F03ccxpblfIz0EiAON1DKk71rX07BvDlLHY1ItPuqZ7hjy19jrAgl+QqEE1btHVA5R" +
-    "uAnRXpEWc6rjARlJY5G1wbMk12rrqpr8rhR3YpFgLgOx4BtQ0D/hGe7KANSGBMQojmObId0asCmd" +
-    "XzmnQI9P8QnwsO9vtqZlgIoU4g+f2/G8Q3/nVMX7dujniwEAAP//KmiQs7P8MeIAAAAASUVORK5C" +
-    "YII=";
-  const mockWidgetAPI = {
-    downloadFile: vi.fn().mockImplementation(async (contentUri) => {
-      if (contentUri !== expectedMXCUrl) {
-        return Promise.reject(new Error("Unexpected content URI"));
-      }
-      return { file: expectedBase64 };
-    }),
-  } as unknown as WidgetApi;
-
-  const blob = await getAvatarFromWidgetAPI(mockWidgetAPI, expectedMXCUrl);
-
-  expect(blob).toBeInstanceOf(Blob);
+  expect(downloadMedia).toBeCalledWith(expectedMXCUrl);
 });
diff --git a/src/Avatar.tsx b/src/Avatar.tsx
index 99940540..185ae97b 100644
--- a/src/Avatar.tsx
+++ b/src/Avatar.tsx
@@ -14,10 +14,9 @@ import {
 } from "react";
 import { Avatar as CompoundAvatar } from "@vector-im/compound-web";
 import { type MatrixClient } from "matrix-js-sdk";
-import { type WidgetApi } from "matrix-widget-api";
 
 import { useClientState } from "./ClientContext";
-import { widget } from "./widget";
+import { useHostBridge } from "./HostBridge";
 
 export enum Size {
   XS = "xs",
@@ -76,6 +75,7 @@ export const Avatar: FC<Props> = ({
   ...props
 }) => {
   const clientState = useClientState();
+  const hostBridge = useHostBridge();
 
   const sizePx = useMemo(
     () =>
@@ -87,7 +87,8 @@ export const Avatar: FC<Props> = ({
 
   const [avatarUrl, setAvatarUrl] = useState<string | undefined>(undefined);
 
-  // In theory, a change in `clientState` or `sizePx` could run extra getAvatarFromWidgetAPI calls, but in practice they should be stable long before this code runs.
+  // In theory, a change in `clientState` or `sizePx` could run extra media
+  // downloads, but in practice they should be stable long before this code runs.
   useEffect(() => {
     if (!src) {
       setAvatarUrl(undefined);
@@ -96,8 +97,8 @@ export const Avatar: FC<Props> = ({
 
     let blob: Promise<Blob>;
 
-    if (widget?.api) {
-      blob = getAvatarFromWidgetAPI(widget.api, src);
+    if (hostBridge.downloadMedia) {
+      blob = hostBridge.downloadMedia(src);
     } else if (
       clientState?.state === "valid" &&
       clientState.authenticated?.client &&
@@ -132,7 +133,7 @@ export const Avatar: FC<Props> = ({
         URL.revokeObjectURL(objectUrl);
       }
     };
-  }, [clientState, src, sizePx]);
+  }, [clientState, hostBridge, src, sizePx]);
 
   return (
     <CompoundAvatar
@@ -172,24 +173,3 @@ async function getAvatarFromServer(
 
   return blob;
 }
-
-// export for testing
-export async function getAvatarFromWidgetAPI(
-  api: WidgetApi,
-  src: string,
-): Promise<Blob> {
-  const response = await api.downloadFile(src);
-  const file = response.file;
-
-  // element-web sends a Blob, and the MSC4039 is considering changing the spec to strictly Blob, so only handling that
-  if (file instanceof Blob) {
-    return file;
-  } else if (typeof file === "string") {
-    // it is a base64 string
-    const bytes = Uint8Array.from(atob(file), (c) => c.charCodeAt(0));
-    return new Blob([bytes]);
-  }
-  throw new Error(
-    "Downloaded file format is not supported: " + typeof file + "",
-  );
-}
diff --git a/src/ClientContext.tsx b/src/ClientContext.tsx
index f2ff3dd4..288665c5 100644
--- a/src/ClientContext.tsx
+++ b/src/ClientContext.tsx
@@ -339,7 +339,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
   }, [initClientState, onSync]);
 
   if (alreadyOpenedErr) {
-    return <ErrorPage widget={widget} error={alreadyOpenedErr} />;
+    return <ErrorPage error={alreadyOpenedErr} />;
   }
 
   return <ClientContext value={state}>{children}</ClientContext>;
diff --git a/src/ErrorView.tsx b/src/ErrorView.tsx
index 1309ae04..51908983 100644
--- a/src/ErrorView.tsx
+++ b/src/ErrorView.tsx
@@ -21,7 +21,7 @@ import { RageshakeButton } from "./settings/RageshakeButton";
 import styles from "./ErrorView.module.css";
 import { useUrlParams } from "./UrlParams";
 import { LinkButton } from "./button";
-import { ElementWidgetActions, type WidgetHelpers } from "./widget.ts";
+import { useHostBridge } from "./HostBridge.ts";
 
 interface Props {
   Icon: ComponentType<SVGAttributes<SVGElement>>;
@@ -38,7 +38,6 @@ interface Props {
    */
   fatal?: boolean;
   children: ReactNode;
-  widget: WidgetHelpers | null;
 }
 
 export const ErrorView: FC<Props> = ({
@@ -47,32 +46,27 @@ export const ErrorView: FC<Props> = ({
   rageshake,
   fatal,
   children,
-  widget,
 }) => {
   const { t } = useTranslation();
   const { confineToRoom } = useUrlParams();
+  const hostBridge = useHostBridge();
 
   const onReload = useCallback(() => {
     window.location.href = "/";
   }, []);
 
-  const CloseWidgetButton: FC<{ widget: WidgetHelpers }> = ({
-    widget,
+  const CloseButton: FC<{ close: () => Promise<void> }> = ({
+    close,
   }): ReactElement => {
-    // in widget mode we don't want to show the return home button but a close button
-    const closeWidget = (): void => {
-      widget.api.transport
-        .send(ElementWidgetActions.Close, {})
-        .catch((e) => {
-          // What to do here?
-          logger.error("Failed to send close action", e);
-        })
-        .finally(() => {
-          widget.api.transport.stop();
-        });
+    // When the host can dismiss us, offer that instead of a link home
+    const onClose = (): void => {
+      close().catch((e) => {
+        // What to do here?
+        logger.error("Failed to ask the host to close Element Call", e);
+      });
     };
     return (
-      <Button kind="primary" onClick={closeWidget}>
+      <Button kind="primary" onClick={onClose}>
         {t("action.close")}
       </Button>
     );
@@ -108,8 +102,8 @@ export const ErrorView: FC<Props> = ({
       {rageshake && (
         <RageshakeButton description={`***Error View***: ${title}`} />
       )}
-      {widget ? (
-        <CloseWidgetButton widget={widget} />
+      {hostBridge.close ? (
+        <CloseButton close={hostBridge.close} />
       ) : (
         !confineToRoom && <ReturnToHomeButton />
       )}
diff --git a/src/FullScreenView.tsx b/src/FullScreenView.tsx
index eb84010e..ea2a4a0d 100644
--- a/src/FullScreenView.tsx
+++ b/src/FullScreenView.tsx
@@ -17,7 +17,6 @@ import styles from "./FullScreenView.module.css";
 import { useUrlParams } from "./UrlParams";
 import { RichError } from "./RichError";
 import { ErrorView } from "./ErrorView";
-import { type WidgetHelpers } from "./widget.ts";
 
 interface FullScreenViewProps {
   className?: string;
@@ -48,12 +47,11 @@ export const FullScreenView: FC<FullScreenViewProps> = ({
 
 interface ErrorPageProps {
   error: unknown;
-  widget: WidgetHelpers | null;
 }
 
 // Due to this component being used as the crash fallback for Sentry, which has
 // weird type requirements, we can't just give this a type of FC<ErrorPageProps>
-export const ErrorPage = ({ error, widget }: ErrorPageProps): ReactElement => {
+export const ErrorPage = ({ error }: ErrorPageProps): ReactElement => {
   const { t } = useTranslation();
   useEffect(() => {
     logger.error(error);
@@ -66,7 +64,6 @@ export const ErrorPage = ({ error, widget }: ErrorPageProps): ReactElement => {
         error.richMessage
       ) : (
         <ErrorView
-          widget={widget}
           Icon={ErrorSolidIcon}
           title={t("error.generic")}
           rageshake
diff --git a/src/HostBridge.test.ts b/src/HostBridge.test.ts
new file mode 100644
index 00000000..2ddee989
--- /dev/null
+++ b/src/HostBridge.test.ts
@@ -0,0 +1,101 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, test, vi } from "vitest";
+import { type WidgetApi } from "matrix-widget-api";
+import EventEmitter from "events";
+
+import { createWidgetHostBridge, nullHostBridge } from "./HostBridge";
+import { type WidgetHelpers } from "./widget";
+
+function mockWidget(api: Partial<WidgetApi>): WidgetHelpers {
+  return {
+    api: api as WidgetApi,
+    lazyActions: new EventEmitter(),
+    client: Promise.resolve(),
+  } as unknown as WidgetHelpers;
+}
+
+describe("createWidgetHostBridge", () => {
+  describe("downloadMedia", () => {
+    const mxcUri = "mxc://example.org/alice-avatar";
+
+    test("passes a Blob through unchanged", async () => {
+      const file = new Blob([]);
+      const bridge = createWidgetHostBridge(
+        mockWidget({ downloadFile: vi.fn().mockResolvedValue({ file }) }),
+      );
+
+      await expect(bridge.downloadMedia!(mxcUri)).resolves.toBe(file);
+    });
+
+    test("decodes a base64 string into a Blob", async () => {
+      const bridge = createWidgetHostBridge(
+        mockWidget({
+          // "hello" in base64
+          downloadFile: vi.fn().mockResolvedValue({ file: "aGVsbG8=" }),
+        }),
+      );
+
+      const blob = await bridge.downloadMedia!(mxcUri);
+
+      expect(blob).toBeInstanceOf(Blob);
+      // The five decoded bytes, rather than the eight characters of base64 —
+      // which is what we'd get if the string were stored verbatim.
+      expect(blob.size).toBe(5);
+    });
+
+    test("rejects a file format it does not understand", async () => {
+      const bridge = createWidgetHostBridge(
+        mockWidget({ downloadFile: vi.fn().mockResolvedValue({ file: 42 }) }),
+      );
+
+      await expect(bridge.downloadMedia!(mxcUri)).rejects.toThrow(
+        "Downloaded file format is not supported",
+      );
+    });
+  });
+
+  describe("supportsReactions", () => {
+    const capabilities = [
+      "org.matrix.msc2762.send.event:m.reaction",
+      "org.matrix.msc2762.send.event:m.room.redaction",
+      "org.matrix.msc2762.receive.event:m.reaction",
+      "org.matrix.msc2762.receive.event:m.room.redaction",
+    ];
+
+    test("is true when the host grants every reaction capability", () => {
+      const bridge = createWidgetHostBridge(
+        mockWidget({ hasCapability: () => true }),
+      );
+
+      expect(bridge.supportsReactions).toBe(true);
+    });
+
+    test.each(capabilities)("is false without %s", (missing) => {
+      const bridge = createWidgetHostBridge(
+        mockWidget({ hasCapability: (c) => c !== missing }),
+      );
+
+      expect(bridge.supportsReactions).toBe(false);
+    });
+  });
+});
+
+describe("nullHostBridge", () => {
+  test("offers no way to close, so the interface falls back to navigation", () => {
+    expect(nullHostBridge.close).toBeUndefined();
+  });
+
+  test("offers no media download, so Element Call uses its own client", () => {
+    expect(nullHostBridge.downloadMedia).toBeUndefined();
+  });
+
+  test("supports reactions, since nothing is mediating its homeserver access", () => {
+    expect(nullHostBridge.supportsReactions).toBe(true);
+  });
+});
diff --git a/src/HostBridge.ts b/src/HostBridge.ts
new file mode 100644
index 00000000..f31b5a4a
--- /dev/null
+++ b/src/HostBridge.ts
@@ -0,0 +1,214 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { createContext, use } from "react";
+import { fromEvent, map, NEVER, type Observable } from "rxjs";
+import {
+  type IWidgetApiRequest,
+  type IWidgetApiRequestData,
+  WidgetApiToWidgetAction,
+} from "matrix-widget-api";
+
+import {
+  ElementWidgetActions,
+  type JoinCallData,
+  type WidgetHelpers,
+} from "./widget";
+
+// Note: these are type aliases rather than interfaces so that they satisfy the
+// widget API's index-signature payload types.
+
+/** The mute state Element Call and its host exchange. */
+export type DeviceMuteState = {
+  audio_enabled: boolean;
+  video_enabled: boolean;
+};
+
+/**
+ * A mute state change requested by the host. An absent field means "leave this
+ * one as it is".
+ */
+export type DeviceMuteRequest = {
+  audio_enabled?: boolean;
+  video_enabled?: boolean;
+};
+
+/**
+ * Something the host has asked of Element Call, which it is expected to
+ * acknowledge.
+ */
+export interface HostRequest<Data, Reply = void> {
+  data: Data;
+  /** Acknowledges the request. Should be called exactly once. */
+  reply(reply: Reply): void;
+}
+
+/**
+ * Element Call's view of the application hosting it.
+ *
+ * Element Call can run as its own page, as a widget inside a Matrix client, or
+ * embedded directly into one. Only the last two give it a host, and each of
+ * them reaches it by a different route — so everything Element Call needs from
+ * whatever is hosting it goes through this interface, rather than being
+ * expressed in terms of the widget API.
+ *
+ * This covers the interactions Element Call has with its host while running.
+ * The Matrix client it talks to is supplied separately, at startup.
+ */
+export interface HostBridge {
+  // What Element Call tells the host.
+
+  /**
+   * Asks the host to keep Element Call on screen (or stop doing so), so that a
+   * call in progress is not torn down when the user navigates elsewhere.
+   */
+  setAlwaysOnScreen(alwaysOnScreen: boolean): Promise<void>;
+  /** Tells the host that Element Call has finished loading. */
+  contentLoaded(): Promise<void>;
+  /** Tells the host that the user has joined the call. */
+  notifyJoined(): Promise<void>;
+  /** Tells the host that the user has hung up. */
+  notifyHungUp(): Promise<void>;
+  /** Tells the host the user's current audio and video mute state. */
+  notifyDeviceMute(state: DeviceMuteState): Promise<void>;
+  /**
+   * Asks the host to close Element Call, and stops communicating with it. No
+   * further calls should be made on this bridge afterwards.
+   *
+   * Absent when the host has no way to dismiss Element Call — standalone, the
+   * user navigates away instead — so its presence is what tells the interface
+   * whether to offer a close affordance.
+   */
+  close?(): Promise<void>;
+
+  // What the host asks of Element Call.
+
+  /** The host has changed the theme Element Call should use. */
+  themeChange$: Observable<HostRequest<{ name?: string }>>;
+  /** The host wants a preloaded Element Call to join the call now. */
+  join$: Observable<HostRequest<JoinCallData>>;
+  /** The host wants Element Call to leave the call. */
+  hangUp$: Observable<HostRequest<Record<string, never>>>;
+  /** The host wants to change, or read back, the device mute state. */
+  deviceMute$: Observable<HostRequest<DeviceMuteRequest, DeviceMuteState>>;
+
+  // What the host is capable of.
+
+  /** Whether the host permits Element Call to send and receive reactions. */
+  readonly supportsReactions: boolean;
+  /**
+   * Fetches media on Element Call's behalf, for hosts that do not give it
+   * direct access to the homeserver. Absent when Element Call should fetch
+   * media itself using its own client.
+   */
+  downloadMedia?(mxcUri: string): Promise<Blob>;
+}
+
+/**
+ * A bridge to nowhere, for when Element Call has no host — that is, when it is
+ * running as its own page and talks to the homeserver directly.
+ */
+export const nullHostBridge: HostBridge = {
+  setAlwaysOnScreen: async () => {},
+  contentLoaded: async () => {},
+  notifyJoined: async () => {},
+  notifyHungUp: async () => {},
+  notifyDeviceMute: async () => {},
+  themeChange$: NEVER,
+  join$: NEVER,
+  hangUp$: NEVER,
+  deviceMute$: NEVER,
+  // Standalone Element Call reaches the homeserver itself, so nothing is
+  // withholding these from it.
+  supportsReactions: true,
+};
+
+/** Bridges to a host that Element Call is a widget of. */
+export function createWidgetHostBridge(widget: WidgetHelpers): HostBridge {
+  const requests = <Data, Reply>(
+    action: string,
+  ): Observable<HostRequest<Data, Reply>> =>
+    (
+      fromEvent(widget.lazyActions, action) as Observable<
+        CustomEvent<IWidgetApiRequest>
+      >
+    ).pipe(
+      map((ev) => ({
+        data: ev.detail.data as Data,
+        // The widget API requires a reply for every request, and carries the
+        // payload as a plain object, so an empty reply becomes {}.
+        reply: (reply: Reply): void =>
+          widget.api.transport.reply(ev.detail, reply ?? {}),
+      })),
+    );
+
+  const send = async (
+    action: ElementWidgetActions,
+    data: IWidgetApiRequestData = {},
+  ): Promise<void> => {
+    await widget.api.transport.send(action, data);
+  };
+
+  return {
+    setAlwaysOnScreen: async (alwaysOnScreen) => {
+      await widget.api.setAlwaysOnScreen(alwaysOnScreen);
+    },
+    contentLoaded: async () => widget.api.sendContentLoaded(),
+    notifyJoined: async () => send(ElementWidgetActions.JoinCall),
+    notifyHungUp: async () => send(ElementWidgetActions.HangupCall),
+    notifyDeviceMute: async (state) =>
+      send(ElementWidgetActions.DeviceMute, state),
+    close: async () => {
+      await send(ElementWidgetActions.Close);
+      widget.api.transport.stop();
+    },
+    themeChange$: requests(WidgetApiToWidgetAction.ThemeChange),
+    join$: requests(ElementWidgetActions.JoinCall),
+    hangUp$: requests(ElementWidgetActions.HangupCall),
+    deviceMute$: requests(ElementWidgetActions.DeviceMute),
+    // Element Call needs the host's permission to send reactions on its behalf.
+    // Read on access rather than up front: the widget API negotiates its
+    // capabilities asynchronously, and the bridge is built before that settles.
+    get supportsReactions(): boolean {
+      return (
+        widget.api.hasCapability("org.matrix.msc2762.send.event:m.reaction") &&
+        widget.api.hasCapability(
+          "org.matrix.msc2762.send.event:m.room.redaction",
+        ) &&
+        widget.api.hasCapability(
+          "org.matrix.msc2762.receive.event:m.reaction",
+        ) &&
+        widget.api.hasCapability(
+          "org.matrix.msc2762.receive.event:m.room.redaction",
+        )
+      );
+    },
+    downloadMedia: async (mxcUri) => {
+      const { file } = await widget.api.downloadFile(mxcUri);
+      if (file instanceof Blob) return file;
+      if (typeof file === "string")
+        // it is a base64 string
+        return new Blob([Uint8Array.from(atob(file), (c) => c.charCodeAt(0))]);
+      throw new Error(
+        `Downloaded file format is not supported: ${typeof file}`,
+      );
+    },
+  };
+}
+
+const HostBridgeContext = createContext<HostBridge | null>(null);
+
+export const HostBridgeProvider = HostBridgeContext.Provider;
+
+/**
+ * The application hosting Element Call.
+ *
+ * Defaults to {@link nullHostBridge}, so that tests and stories, which have no
+ * host, need no provider.
+ */
+export const useHostBridge = (): HostBridge =>
+  use(HostBridgeContext) ?? nullHostBridge;
diff --git a/src/RichError.tsx b/src/RichError.tsx
index 699486e2..abacf0b3 100644
--- a/src/RichError.tsx
+++ b/src/RichError.tsx
@@ -10,7 +10,6 @@ import { PopOutIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import type { FC, ReactNode } from "react";
 import { ErrorView } from "./ErrorView";
-import { widget } from "./widget.ts";
 
 /**
  * An error consisting of a terse message to be logged to the console and a
@@ -32,11 +31,7 @@ const OpenElsewhere: FC = () => {
   const { t } = useTranslation();
 
   return (
-    <ErrorView
-      widget={widget}
-      Icon={PopOutIcon}
-      title={t("error.open_elsewhere")}
-    >
+    <ErrorView Icon={PopOutIcon} title={t("error.open_elsewhere")}>
       <p>
         {t("error.open_elsewhere_description", {
           brand: import.meta.env.VITE_PRODUCT_NAME || "Element Call",
diff --git a/src/home/HomePage.tsx b/src/home/HomePage.tsx
index ca1f0ea8..e6136855 100644
--- a/src/home/HomePage.tsx
+++ b/src/home/HomePage.tsx
@@ -13,7 +13,6 @@ import { ErrorPage, LoadingPage } from "../FullScreenView";
 import { UnauthenticatedView } from "./UnauthenticatedView";
 import { RegisteredView } from "./RegisteredView";
 import { usePageTitle } from "../usePageTitle";
-import { widget } from "../widget.ts";
 
 export const HomePage: FC = () => {
   const { t } = useTranslation();
@@ -24,7 +23,7 @@ export const HomePage: FC = () => {
   if (!clientState) {
     return <LoadingPage />;
   } else if (clientState.state === "error") {
-    return <ErrorPage widget={widget} error={clientState.error} />;
+    return <ErrorPage error={clientState.error} />;
   } else {
     return clientState.authenticated ? (
       <RegisteredView client={clientState.authenticated.client} />
diff --git a/src/room/GroupCallErrorBoundary.test.tsx b/src/room/GroupCallErrorBoundary.test.tsx
index e10044ae..a70b3180 100644
--- a/src/room/GroupCallErrorBoundary.test.tsx
+++ b/src/room/GroupCallErrorBoundary.test.tsx
@@ -36,7 +36,11 @@ import {
   UnknownCallError,
 } from "../utils/errors.ts";
 import { mockConfig } from "../utils/test.ts";
-import { ElementWidgetActions, type WidgetHelpers } from "../widget.ts";
+import {
+  type HostBridge,
+  HostBridgeProvider,
+  nullHostBridge,
+} from "../HostBridge.ts";
 
 test.each([
   {
@@ -79,7 +83,6 @@ test.each([
         <GroupCallErrorBoundary
           onError={onErrorMock}
           recoveryActionHandler={vi.fn()}
-          widget={null}
         >
           <TestComponent />
         </GroupCallErrorBoundary>
@@ -108,7 +111,6 @@ test("should render the error page with link back to home", async () => {
       <GroupCallErrorBoundary
         onError={onErrorMock}
         recoveryActionHandler={vi.fn()}
-        widget={null}
       >
         <TestComponent />
       </GroupCallErrorBoundary>
@@ -154,10 +156,7 @@ test("ConnectionLostError: Action handling should reset error state", async () =
 
     return (
       <BrowserRouter>
-        <GroupCallErrorBoundary
-          recoveryActionHandler={reconnectCallback}
-          widget={null}
-        >
+        <GroupCallErrorBoundary recoveryActionHandler={reconnectCallback}>
           <TestComponent fail={failState} />
         </GroupCallErrorBoundary>
       </BrowserRouter>
@@ -199,7 +198,6 @@ describe("Rageshake button", () => {
         <GroupCallErrorBoundary
           onError={vi.fn()}
           recoveryActionHandler={vi.fn()}
-          widget={null}
         >
           <TestComponent />
         </GroupCallErrorBoundary>
@@ -224,29 +222,27 @@ describe("Rageshake button", () => {
   });
 });
 
-test("should have a close button in widget mode", async () => {
+test("should have a close button when the host can dismiss us", async () => {
   const error = new MatrixRTCTransportMissingError("example.com");
   const TestComponent = (): ReactNode => {
     throw error;
   };
 
-  const mockWidget = {
-    api: {
-      transport: { send: vi.fn().mockResolvedValue(undefined), stop: vi.fn() },
-    },
-  } as unknown as WidgetHelpers;
+  const close = vi.fn().mockResolvedValue(undefined);
+  const hostBridge: HostBridge = { ...nullHostBridge, close };
 
   const user = userEvent.setup();
   const onErrorMock = vi.fn();
   const { asFragment } = render(
     <BrowserRouter>
-      <GroupCallErrorBoundary
-        widget={mockWidget}
-        onError={onErrorMock}
-        recoveryActionHandler={vi.fn()}
-      >
-        <TestComponent />
-      </GroupCallErrorBoundary>
+      <HostBridgeProvider value={hostBridge}>
+        <GroupCallErrorBoundary
+          onError={onErrorMock}
+          recoveryActionHandler={vi.fn()}
+        >
+          <TestComponent />
+        </GroupCallErrorBoundary>
+      </HostBridgeProvider>
     </BrowserRouter>,
   );
 
@@ -258,11 +254,7 @@ test("should have a close button in widget mode", async () => {
 
   await user.click(screen.getByRole("button", { name: "Close" }));
 
-  expect(mockWidget.api.transport.send).toHaveBeenCalledWith(
-    ElementWidgetActions.Close,
-    expect.anything(),
-  );
-  expect(mockWidget.api.transport.stop).toHaveBeenCalled();
+  expect(close).toHaveBeenCalled();
 });
 
 test("should show technical details when error has a matrixError cause", async () => {
@@ -282,11 +274,7 @@ test("should show technical details when error has a matrixError cause", async (
 
   render(
     <BrowserRouter>
-      <GroupCallErrorBoundary
-        onError={vi.fn()}
-        recoveryActionHandler={vi.fn()}
-        widget={null}
-      >
+      <GroupCallErrorBoundary onError={vi.fn()} recoveryActionHandler={vi.fn()}>
         <TestComponent />
       </GroupCallErrorBoundary>
     </BrowserRouter>,
@@ -315,11 +303,7 @@ test("should not show technical details when error has no matrix error cause", a
 
   render(
     <BrowserRouter>
-      <GroupCallErrorBoundary
-        onError={vi.fn()}
-        recoveryActionHandler={vi.fn()}
-        widget={null}
-      >
+      <GroupCallErrorBoundary onError={vi.fn()} recoveryActionHandler={vi.fn()}>
         <TestComponent />
       </GroupCallErrorBoundary>
     </BrowserRouter>,
@@ -376,7 +360,6 @@ describe("LiveKit ConnectionError variants", () => {
           <GroupCallErrorBoundary
             onError={vi.fn()}
             recoveryActionHandler={vi.fn()}
-            widget={null}
           >
             <TestComponent />
           </GroupCallErrorBoundary>
@@ -406,7 +389,6 @@ describe("LiveKit ConnectionError variants", () => {
         <GroupCallErrorBoundary
           onError={vi.fn()}
           recoveryActionHandler={vi.fn()}
-          widget={null}
         >
           <TestComponent />
         </GroupCallErrorBoundary>
diff --git a/src/room/GroupCallErrorBoundary.tsx b/src/room/GroupCallErrorBoundary.tsx
index 390a5a8c..6d43cf78 100644
--- a/src/room/GroupCallErrorBoundary.tsx
+++ b/src/room/GroupCallErrorBoundary.tsx
@@ -34,7 +34,6 @@ import {
 } from "../utils/errors.ts";
 import { FullScreenView } from "../FullScreenView.tsx";
 import { ErrorView } from "../ErrorView.tsx";
-import { type WidgetHelpers } from "../widget.ts";
 import styles from "../ErrorView.module.css";
 
 export type CallErrorRecoveryAction = "reconnect"; // | "retry" ;
@@ -47,13 +46,11 @@ interface ErrorPageProps {
   error: ElementCallError;
   recoveryActionHandler: RecoveryActionHandler;
   resetError: () => void;
-  widget: WidgetHelpers | null;
 }
 
 const ErrorPage: FC<ErrorPageProps> = ({
   error,
   recoveryActionHandler,
-  widget,
 }: ErrorPageProps): ReactElement => {
   const { t } = useTranslation();
   logger.error("Error boundary caught:", error);
@@ -89,7 +86,6 @@ const ErrorPage: FC<ErrorPageProps> = ({
         Icon={icon}
         title={error.localisedTitle}
         rageshake={error.code == ErrorCode.UNKNOWN_ERROR}
-        widget={widget}
       >
         <p>
           {error.localisedMessageKey ? (
@@ -148,14 +144,12 @@ interface BoundaryProps {
   children: ReactNode | (() => ReactNode);
   recoveryActionHandler: RecoveryActionHandler;
   onError?: (error: unknown) => void;
-  widget: WidgetHelpers | null;
 }
 
 export const GroupCallErrorBoundary = ({
   recoveryActionHandler,
   onError,
   children,
-  widget,
 }: BoundaryProps): ReactElement => {
   const fallbackRenderer: FallbackRender = useCallback(
     ({ error, resetError }): ReactElement => {
@@ -165,7 +159,6 @@ export const GroupCallErrorBoundary = ({
           : new UnknownCallError(error instanceof Error ? error : new Error());
       return (
         <ErrorPage
-          widget={widget ?? null}
           error={callError}
           resetError={resetError}
           recoveryActionHandler={async (action: CallErrorRecoveryAction) => {
@@ -175,7 +168,7 @@ export const GroupCallErrorBoundary = ({
         />
       );
     },
-    [recoveryActionHandler, widget],
+    [recoveryActionHandler],
   );
 
   return (
diff --git a/src/room/GroupCallView.test.tsx b/src/room/GroupCallView.test.tsx
index a5c3b0d8..a53288c2 100644
--- a/src/room/GroupCallView.test.tsx
+++ b/src/room/GroupCallView.test.tsx
@@ -36,7 +36,6 @@ import userEvent, {
 import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-container";
 import { useState } from "react";
 import { TooltipProvider } from "@vector-im/compound-web";
-import { type ITransport } from "matrix-widget-api";
 
 import { prefetchSounds } from "../soundUtils";
 import { useAudioContext } from "../useAudioContext";
@@ -52,8 +51,11 @@ import {
 } from "../utils/test";
 import { GroupCallView } from "./GroupCallView";
 import { GroupCallErrorBoundary } from "./GroupCallErrorBoundary";
-import { ElementWidgetActions, type WidgetHelpers } from "../widget";
-import { LazyEventEmitter } from "../LazyEventEmitter";
+import {
+  type HostBridge,
+  HostBridgeProvider,
+  nullHostBridge,
+} from "../HostBridge";
 import { MatrixRTCTransportMissingError } from "../utils/errors";
 import { ProcessorProvider } from "../livekit/TrackProcessorContext";
 import { MediaDevicesContext } from "../MediaDevicesContext";
@@ -134,7 +136,7 @@ beforeEach(() => {
 });
 
 function createGroupCallView(
-  widget: WidgetHelpers | null,
+  hostBridge: HostBridge,
   joined = true,
   options: {
     withErrorBoundary?: boolean;
@@ -184,7 +186,6 @@ function createGroupCallView(
       skipLobby={false}
       rtcSession={rtcSession.asMockedSession()}
       muteStates={muteState}
-      widget={widget}
       // TODO-MULTI-SFU: Make joined and setJoined work
       joined={true}
       setJoined={function (value: boolean): void {}}
@@ -192,22 +193,21 @@ function createGroupCallView(
   );
   const { getByText } = render(
     <BrowserRouter>
-      <TooltipProvider>
-        <MediaDevicesContext value={mockMediaDevices({})}>
-          <ProcessorProvider>
-            {options.withErrorBoundary ? (
-              <GroupCallErrorBoundary
-                recoveryActionHandler={vi.fn()}
-                widget={null}
-              >
-                {groupCallView}
-              </GroupCallErrorBoundary>
-            ) : (
-              groupCallView
-            )}
-          </ProcessorProvider>
-        </MediaDevicesContext>
-      </TooltipProvider>
+      <HostBridgeProvider value={hostBridge}>
+        <TooltipProvider>
+          <MediaDevicesContext value={mockMediaDevices({})}>
+            <ProcessorProvider>
+              {options.withErrorBoundary ? (
+                <GroupCallErrorBoundary recoveryActionHandler={vi.fn()}>
+                  {groupCallView}
+                </GroupCallErrorBoundary>
+              ) : (
+                groupCallView
+              )}
+            </ProcessorProvider>
+          </MediaDevicesContext>
+        </TooltipProvider>
+      </HostBridgeProvider>
     </BrowserRouter>,
   );
   return {
@@ -218,7 +218,7 @@ function createGroupCallView(
 
 test.skip("GroupCallView plays a leave sound asynchronously in SPA mode", async () => {
   const user = userEvent.setup();
-  const { getByText, rtcSession } = createGroupCallView(null);
+  const { getByText, rtcSession } = createGroupCallView(nullHostBridge);
   const leaveButton = getByText("Leave");
   await user.click(leaveButton);
   expect(playSound).toHaveBeenCalledWith("left");
@@ -235,12 +235,7 @@ test.skip("GroupCallView plays a leave sound asynchronously in SPA mode", async
 
 test.skip("GroupCallView plays a leave sound synchronously in widget mode", async () => {
   const user = userEvent.setup();
-  const widget = {
-    api: {
-      setAlwaysOnScreen: async () => Promise.resolve(true),
-    } as Partial<WidgetHelpers["api"]>,
-    lazyActions: new LazyEventEmitter(),
-  };
+  const hostBridge: HostBridge = { ...nullHostBridge, close: vi.fn() };
   let resolvePlaySound: () => void;
   playSound = vi
     .fn()
@@ -253,9 +248,7 @@ test.skip("GroupCallView plays a leave sound synchronously in widget mode", asyn
     soundDuration: {},
   });
 
-  const { getByText, rtcSession } = createGroupCallView(
-    widget as WidgetHelpers,
-  );
+  const { getByText, rtcSession } = createGroupCallView(hostBridge);
   const leaveButton = getByText("Leave");
   await user.click(leaveButton);
   await flushPromises();
@@ -272,28 +265,13 @@ test.skip("GroupCallView plays a leave sound synchronously in widget mode", asyn
   expect(leaveRTCSession).toHaveBeenCalledOnce();
 });
 
-test("Should close widget when all other left and play a sound", async () => {
+test("Should ask the host to close when all other left and play a sound", async () => {
   const user = userEvent.setup();
-  let widgetClosedCalled = false;
-  const { promise: widgetClosedPromise, resolve: widgetClosedResolver } =
-    Promise.withResolvers<void>();
-  const widgetSendMock = vi.fn().mockImplementation((action: string) => {
-    if (action === ElementWidgetActions.Close) {
-      widgetClosedCalled = true;
-      widgetClosedResolver();
-    }
-  });
-  const widgetStopMock = vi.fn().mockResolvedValue(undefined);
-  const widget = {
-    api: {
-      setAlwaysOnScreen: vi.fn().mockResolvedValue(true),
-      transport: {
-        send: widgetSendMock,
-        reply: vi.fn().mockResolvedValue(undefined),
-        stop: widgetStopMock,
-      } as unknown as ITransport,
-    } as Partial<WidgetHelpers["api"]>,
-    lazyActions: new LazyEventEmitter(),
+  const close = vi.fn().mockResolvedValue(undefined);
+  const hostBridge: HostBridge = {
+    ...nullHostBridge,
+    setAlwaysOnScreen: vi.fn().mockResolvedValue(undefined),
+    close,
   };
   const resolvePlaySound = Promise.withResolvers<void>();
   playSound = vi.fn().mockReturnValue(resolvePlaySound.promise);
@@ -303,50 +281,38 @@ test("Should close widget when all other left and play a sound", async () => {
     soundDuration: {},
   });
 
-  const { getByText } = createGroupCallView(widget as WidgetHelpers);
+  const { getByText } = createGroupCallView(hostBridge);
   const leaveButton = getByText("SimulateOtherLeft");
   await user.click(leaveButton);
   await flushPromises();
-  expect(widgetClosedCalled).toBeFalsy();
+  expect(close).not.toHaveBeenCalled();
   resolvePlaySound.resolve();
 
   expect(playSound).toHaveBeenCalledWith("left", 0);
-  await widgetClosedPromise;
-  await flushPromises();
-  expect(widgetClosedCalled).toBeTruthy();
-  expect(widgetStopMock).toHaveBeenCalledOnce();
+  await waitFor(() => expect(close).toHaveBeenCalledOnce());
 }, 80000);
 
-test("Should not close widget when auto leave due to error", async () => {
+test("Should not ask the host to close when auto leave due to error", async () => {
   const user = userEvent.setup();
 
-  const widgetStopMock = vi.fn().mockResolvedValue(undefined);
-  const widgetSendMock = vi.fn().mockResolvedValue(undefined);
-  const widget = {
-    api: {
-      setAlwaysOnScreen: vi.fn().mockResolvedValue(true),
-      transport: {
-        send: widgetSendMock,
-        reply: vi.fn().mockResolvedValue(undefined),
-        stop: widgetStopMock,
-      } as unknown as ITransport,
-    } as Partial<WidgetHelpers["api"]>,
-    lazyActions: new LazyEventEmitter(),
+  const close = vi.fn().mockResolvedValue(undefined);
+  const setAlwaysOnScreen = vi.fn().mockResolvedValue(undefined);
+  const hostBridge: HostBridge = {
+    ...nullHostBridge,
+    setAlwaysOnScreen,
+    close,
   };
 
-  const alwaysOnScreenSpy = vi.spyOn(widget.api, "setAlwaysOnScreen");
-
-  const { getByText } = createGroupCallView(widget as WidgetHelpers);
+  const { getByText } = createGroupCallView(hostBridge);
   const leaveButton = getByText("SimulateErrorLeft");
   await user.click(leaveButton);
   await flushPromises();
 
   // When onLeft is called, we first set always on screen to false
-  await waitFor(() => expect(alwaysOnScreenSpy).toHaveBeenCalledWith(false));
+  await waitFor(() => expect(setAlwaysOnScreen).toHaveBeenCalledWith(false));
   await flushPromises();
-  // But then we do not close the widget automatically
-  expect(widgetStopMock).not.toHaveBeenCalledOnce();
-  expect(widgetSendMock).not.toHaveBeenCalledOnce();
+  // But then we do not ask to be closed automatically
+  expect(close).not.toHaveBeenCalled();
 });
 
 test.skip("GroupCallView leaves the session when an error occurs", async () => {
@@ -360,7 +326,7 @@ test.skip("GroupCallView leaves the session when an error occurs", async () => {
     );
   });
   const user = userEvent.setup();
-  const { rtcSession } = createGroupCallView(null);
+  const { rtcSession } = createGroupCallView(nullHostBridge);
   await user.click(screen.getByRole("button", { name: "Panic!" }));
   screen.getByText("Something went wrong");
   expect(leaveRTCSession).toHaveBeenCalledWith(
@@ -377,7 +343,7 @@ test.skip("GroupCallView shows errors that occur during joining", async () => {
   onTestFinished(() => {
     enterRTCSession.mockReset();
   });
-  createGroupCallView(null, false);
+  createGroupCallView(nullHostBridge, false);
   await user.click(screen.getByRole("button", { name: "Join call" }));
   screen.getByText("Call is not supported");
 });
@@ -396,7 +362,7 @@ test("translates wrapped UnsupportedStickyEventsEndpointError to the StickyEvent
     { cause: stickyError },
   );
 
-  const { rtcSession } = createGroupCallView(null, true, {
+  const { rtcSession } = createGroupCallView(nullHostBridge, true, {
     withErrorBoundary: true,
   });
 
@@ -408,7 +374,7 @@ test("translates wrapped UnsupportedStickyEventsEndpointError to the StickyEvent
 });
 
 test("falls back to ConnectionLostError for unrecognised membership manager errors", async () => {
-  const { rtcSession } = createGroupCallView(null, true, {
+  const { rtcSession } = createGroupCallView(nullHostBridge, true, {
     withErrorBoundary: true,
   });
 
@@ -424,7 +390,7 @@ test("falls back to ConnectionLostError for unrecognised membership manager erro
 
 test("user can reconnect after a membership manager error", async () => {
   const user = userEvent.setup();
-  const { rtcSession } = createGroupCallView(null, true);
+  const { rtcSession } = createGroupCallView(nullHostBridge, true);
   await act(() =>
     rtcSession.emit(MatrixRTCSessionEvent.MembershipManagerError, undefined),
   );
diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx
index 57e9205f..623b8839 100644
--- a/src/room/GroupCallView.tsx
+++ b/src/room/GroupCallView.tsx
@@ -30,12 +30,7 @@ import {
 } from "matrix-js-sdk/lib/matrixrtc";
 import { useNavigate } from "react-router-dom";
 
-import type { IWidgetApiRequest } from "matrix-widget-api";
-import {
-  ElementWidgetActions,
-  type JoinCallData,
-  type WidgetHelpers,
-} from "../widget";
+import { type JoinCallData } from "../widget";
 import { LobbyView } from "./LobbyView";
 import { type MatrixInfo } from "./VideoPreview";
 import { CallEndedView } from "./CallEndedView";
@@ -76,6 +71,7 @@ import { muteAllAudio$ } from "../state/MuteAllAudioModel.ts";
 import { useAppBarTitle } from "../AppBar.tsx";
 import { useBehavior } from "../useBehavior.ts";
 import { useRootElement } from "../RootElementContext.ts";
+import { useHostBridge } from "../HostBridge.ts";
 
 /**
  * If there already are this many participants in the call, we automatically mute
@@ -99,7 +95,6 @@ interface Props {
   joined: boolean;
   setJoined: (value: boolean) => void;
   muteStates: MuteStates;
-  widget: WidgetHelpers | null;
 }
 
 export const GroupCallView: FC<Props> = ({
@@ -112,7 +107,6 @@ export const GroupCallView: FC<Props> = ({
   joined,
   setJoined,
   muteStates,
-  widget,
 }) => {
   // Used to thread through any errors that occur outside the error boundary
   const [externalError, setExternalError] = useState<ElementCallError | null>(
@@ -120,6 +114,14 @@ export const GroupCallView: FC<Props> = ({
   );
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
   const rootElement = useRootElement();
+  const hostBridge = useHostBridge();
+  // A host that can close us is a host that decides when we stop existing, so
+  // we neither show our own post-call screens nor assume we have time to
+  // finish what we are doing.
+  // TODO: this reads a capability as a proxy for who owns our lifetime. Worth
+  // finding a more direct way to express it — see the guidance in UrlParams.ts
+  // on naming behaviours rather than situations.
+  const hostControlsLifetime = hostBridge.close !== undefined;
 
   const muteAllAudio = useBehavior(muteAllAudio$);
   const leaveSoundContext = useLatest(
@@ -294,28 +296,26 @@ export const GroupCallView: FC<Props> = ({
     };
 
     if (skipLobby) {
-      if (widget && preload) {
+      // `preload` is only ever set when we have a host to be preloaded by.
+      if (preload) {
         // In preload mode without lobby we wait for a join action before entering
-        const onJoin = (ev: CustomEvent<IWidgetApiRequest>): void => {
+        const subscription = hostBridge.join$.subscribe(({ data, reply }) => {
           (async (): Promise<void> => {
-            await defaultDeviceSetup(ev.detail.data as unknown as JoinCallData);
+            await defaultDeviceSetup(data);
             setJoined(true);
-            widget.api.transport.reply(ev.detail, {});
+            reply();
           })().catch((e) => {
             logger.error("Error joining RTC session on preload", e);
           });
-        };
-        widget.lazyActions.on(ElementWidgetActions.JoinCall, onJoin);
-        return (): void => {
-          widget.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
-        };
+        });
+        return (): void => subscription.unsubscribe();
       } else {
         // No lobby and no preload: we enter the rtc session right away
         setJoined(true);
       }
     }
   }, [
-    widget,
+    hostBridge,
     rtcSession,
     preload,
     skipLobby,
@@ -341,7 +341,7 @@ export const GroupCallView: FC<Props> = ({
           // When "allOthersLeft", the leaveSoundEffect$ in CallEventAudioRenderer
           // already plays the "left" sound when the remote participant's media
           // disappears. We play it here silenced (volumeOverwrite = 0) so we have the right duration in the audioPromise.
-          // (used to destory the widget)
+          // (which is what delays asking the host to close us)
           audioPromise = leaveSoundContext.current?.playSound("left", 0);
           break;
         case "timeout":
@@ -356,12 +356,12 @@ export const GroupCallView: FC<Props> = ({
       setLeft(true);
 
       // We need to wait until the callEnded event is tracked on PostHog,
-      // otherwise the iframe may get killed first.
+      // otherwise we may be torn down first.
       const posthogRequest = new Promise((resolve) => {
-        // To increase the likelihood of the PostHog event being sent out in
-        // widget mode before the iframe is killed, we ask it to skip the
-        // usual queuing/batching of requests.
-        const sendInstantly = widget !== null;
+        // To increase the likelihood of the PostHog event being sent out
+        // before the host disposes of us, we ask it to skip the usual
+        // queuing/batching of requests.
+        const sendInstantly = hostControlsLifetime;
         PosthogAnalytics.instance.eventCallEnded.track(
           room.roomId,
           rtcSession.memberships.length,
@@ -369,8 +369,8 @@ export const GroupCallView: FC<Props> = ({
           rtcSession,
         );
         // Unfortunately the PostHog library provides no way to await the
-        // tracking of an event, but we don't really want it to hold up the
-        // closing of the widget that long anyway, so giving it 10 ms will do.
+        // tracking of an event, but we don't really want it to hold up our
+        // disposal that long anyway, so giving it 10 ms will do.
         window.setTimeout(resolve, 10);
       });
 
@@ -389,25 +389,19 @@ export const GroupCallView: FC<Props> = ({
           )
             void navigate("/");
 
-          if (widget) {
-            // After this point the iframe could die at any moment!
+          // After this point the host could dispose of us at any moment!
+          try {
+            await hostBridge.setAlwaysOnScreen(false);
+          } catch (e) {
+            logger.error("Failed to set `alwaysOnScreen` to false", e);
+          }
+          // On a normal user hangup we can shut down and ask to be closed. But
+          // if an error occurs we should stay open until the user reads it.
+          if (reason != "error" && !returnToLobby) {
             try {
-              await widget.api.setAlwaysOnScreen(false);
+              await hostBridge.close?.();
             } catch (e) {
-              logger.error(
-                "Failed to set call widget `alwaysOnScreen` to false",
-                e,
-              );
-            }
-            // On a normal user hangup we can shut down and close the widget. But if an
-            // error occurs we should keep the widget open until the user reads it.
-            if (reason != "error" && !returnToLobby) {
-              try {
-                await widget.api.transport.send(ElementWidgetActions.Close, {});
-              } catch (e) {
-                logger.error("Failed to send close action", e);
-              }
-              widget.api.transport.stop();
+              logger.error("Failed to ask the host to close Element Call", e);
             }
           }
         });
@@ -415,7 +409,8 @@ export const GroupCallView: FC<Props> = ({
     [
       setJoined,
       leaveSoundContext,
-      widget,
+      hostBridge,
+      hostControlsLifetime,
       room.roomId,
       rtcSession,
       isPasswordlessUser,
@@ -426,12 +421,12 @@ export const GroupCallView: FC<Props> = ({
   );
 
   useEffect(() => {
-    if (widget && joined)
-      // set widget to sticky once joined.
-      widget.api.setAlwaysOnScreen(true).catch((e) => {
+    if (joined)
+      // ask to be kept on screen once joined.
+      hostBridge.setAlwaysOnScreen(true).catch((e) => {
         logger.error("Error calling setAlwaysOnScreen(true)", e);
       });
-  }, [widget, joined, rtcSession]);
+  }, [hostBridge, joined, rtcSession]);
 
   const joinRule = useJoinRule(room);
 
@@ -501,19 +496,16 @@ export const GroupCallView: FC<Props> = ({
         />
       </>
     );
-  } else if (left && widget === null) {
-    // Left in SPA mode:
+  } else if (left && !hostControlsLifetime) {
+    // Left, and it is up to us what to show next:
 
     // The call ended view is shown for two reasons: prompting guests to create
     // an account, and prompting users that have opted into analytics to provide
-    // feedback. We don't show a feedback prompt to widget users however (at
-    // least for now), because we don't yet have designs that would allow widget
-    // users to dismiss the feedback prompt and close the call window without
-    // submitting anything.
-    if (
-      isPasswordlessUser ||
-      (PosthogAnalytics.instance.isEnabled() && widget === null)
-    ) {
+    // feedback. We don't show a feedback prompt when a host owns our lifetime
+    // however (at least for now), because we don't yet have designs that would
+    // allow those users to dismiss the feedback prompt and close the call
+    // window without submitting anything.
+    if (isPasswordlessUser || PosthogAnalytics.instance.isEnabled()) {
       body = (
         <CallEndedView
           endedCallId={rtcSession.room.roomId}
@@ -529,8 +521,8 @@ export const GroupCallView: FC<Props> = ({
       // LobbyView again which would open capture devices again.
       body = null;
     }
-  } else if (left && widget !== null) {
-    // Left in widget mode:
+  } else if (left && hostControlsLifetime) {
+    // Left, and the host decides what happens next:
     body = returnToLobby ? lobbyView : null;
   } else if (preload || skipLobby) {
     // The RTC session is not joined to yet (`isJoined`), but enterRTCSessionOrError should have been called.
@@ -541,7 +533,6 @@ export const GroupCallView: FC<Props> = ({
 
   return (
     <GroupCallErrorBoundary
-      widget={widget}
       recoveryActionHandler={async (action) => {
         setExternalError(null);
         if (action == "reconnect") {
@@ -553,9 +544,10 @@ export const GroupCallView: FC<Props> = ({
       }}
       onError={(_error) => {
         if (rtcSession.isJoined()) onLeft("error");
-        // If there is an error we need to be able to close the widget. This is done in `onLeft` as well
-        // We need it here explicitly in case rtcSession.isJoined is false.
-        void widget?.api.setAlwaysOnScreen(false);
+        // If there is an error we need to be dismissible again. This is done in
+        // `onLeft` as well; we need it here explicitly in case
+        // rtcSession.isJoined is false.
+        void hostBridge.setAlwaysOnScreen(false);
       }}
     >
       {body}
diff --git a/src/room/RoomPage.tsx b/src/room/RoomPage.tsx
index b1ffb3ba..b5f943ce 100644
--- a/src/room/RoomPage.tsx
+++ b/src/room/RoomPage.tsx
@@ -123,7 +123,6 @@ export const RoomPage: FC = (): ReactNode => {
         return (
           muteStates && (
             <GroupCallView
-              widget={widget}
               client={client!}
               rtcSession={groupCallState.rtcSession}
               joined={joined}
@@ -198,7 +197,6 @@ export const RoomPage: FC = (): ReactNode => {
               <ErrorView
                 Icon={UnknownSolidIcon}
                 title={t("error.call_not_found")}
-                widget={widget}
               >
                 <Trans i18nKey="error.call_not_found_description">
                   <p>
@@ -216,7 +214,6 @@ export const RoomPage: FC = (): ReactNode => {
               <ErrorView
                 Icon={groupCallState.error.icon}
                 title={groupCallState.error.message}
-                widget={widget}
               >
                 <p>{groupCallState.error.messageBody}</p>
                 {groupCallState.error.reason && (
@@ -230,7 +227,7 @@ export const RoomPage: FC = (): ReactNode => {
             </FullScreenView>
           );
         } else {
-          return <ErrorPage widget={widget} error={groupCallState.error} />;
+          return <ErrorPage error={groupCallState.error} />;
         }
       default:
         return <> </>;
@@ -238,7 +235,7 @@ export const RoomPage: FC = (): ReactNode => {
   };
 
   if (loading || isRegistering) return <LoadingPage />;
-  if (error) return <ErrorPage widget={widget} error={error} />;
+  if (error) return <ErrorPage error={error} />;
   if (!client) return <RoomAuthView />;
   // TODO: This doesn't belong here, the app routes need to be reworked
   if (!roomIdOrAlias) return <HomePage />;
diff --git a/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap b/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap
index 4239cee1..0194dfc4 100644
--- a/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap
+++ b/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap
@@ -1100,7 +1100,7 @@ exports[`LiveKit ConnectionError variants > should link to troubleshoot guide wh
 </DocumentFragment>
 `;
 
-exports[`should have a close button in widget mode 1`] = `
+exports[`should have a close button when the host can dismiss us 1`] = `
 <DocumentFragment>
   <div
     class="_page_4be5c0"
diff --git a/src/useTheme.test.ts b/src/useTheme.test.ts
index 4078ed34..e5accd15 100644
--- a/src/useTheme.test.ts
+++ b/src/useTheme.test.ts
@@ -6,6 +6,8 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { act, renderHook } from "@testing-library/react";
+import { createElement, type FC, type PropsWithChildren } from "react";
+import { Subject } from "rxjs";
 import {
   afterEach,
   beforeEach,
@@ -15,24 +17,28 @@ import {
   test,
   vi,
 } from "vitest";
-import EventEmitter from "events";
-import { WidgetApiToWidgetAction } from "matrix-widget-api";
 
 import { useTheme } from "./useTheme";
 import { useUrlParams } from "./UrlParams";
-import { widget } from "./widget";
+import {
+  type HostBridge,
+  HostBridgeProvider,
+  type HostRequest,
+  nullHostBridge,
+} from "./HostBridge";
 
 vi.mock("./UrlParams", () => ({ useUrlParams: vi.fn() }));
-vi.mock("./widget", () => ({
-  widget: {
-    api: { transport: { reply: vi.fn() } },
-    lazyActions: new EventEmitter(),
-  },
-}));
 
 describe("useTheme", () => {
   let originalClassList: DOMTokenList;
+  let themeChange$: Subject<HostRequest<{ name?: string }>>;
+  let wrapper: FC<PropsWithChildren>;
+
   beforeEach(() => {
+    themeChange$ = new Subject();
+    const hostBridge: HostBridge = { ...nullHostBridge, themeChange$ };
+    wrapper = ({ children }) =>
+      createElement(HostBridgeProvider, { value: hostBridge }, children);
     // Save the original classList to setup spies
     originalClassList = document.body.classList;
 
@@ -55,7 +61,7 @@ describe("useTheme", () => {
     test(`should apply ${add[0]} theme when ${setTheme} theme is specified`, () => {
       (useUrlParams as Mock).mockReturnValue({ theme: setTheme });
 
-      renderHook(() => useTheme());
+      renderHook(() => useTheme(), { wrapper });
 
       expect(originalClassList.remove).toHaveBeenCalledWith(
         "cpd-theme-light",
@@ -71,7 +77,7 @@ describe("useTheme", () => {
     // Simulate a previous theme
     originalClassList.item = vi.fn().mockReturnValue("cpd-theme-dark");
 
-    renderHook(() => useTheme());
+    renderHook(() => useTheme(), { wrapper });
 
     expect(document.body.classList.add).not.toHaveBeenCalledWith(
       "cpd-theme-dark",
@@ -82,18 +88,13 @@ describe("useTheme", () => {
     expect(originalClassList.add).not.toHaveBeenCalled();
   });
 
-  test("theme changes in response to widget actions", async () => {
-    renderHook(() => useTheme());
+  test("theme changes in response to host requests", () => {
+    renderHook(() => useTheme(), { wrapper });
 
     expect(originalClassList.add).toHaveBeenCalledWith("cpd-theme-dark");
-    await act(() =>
-      widget!.lazyActions.emit(
-        WidgetApiToWidgetAction.ThemeChange,
-        new CustomEvent(WidgetApiToWidgetAction.ThemeChange, {
-          detail: { data: { name: "light" } },
-        }),
-      ),
-    );
+    const reply = vi.fn();
+    act(() => themeChange$.next({ data: { name: "light" }, reply }));
+    expect(reply).toHaveBeenCalledOnce();
     expect(originalClassList.remove).toHaveBeenCalledWith(
       "cpd-theme-light",
       "cpd-theme-dark",
diff --git a/src/useTheme.ts b/src/useTheme.ts
index 85dace2a..3c02745a 100644
--- a/src/useTheme.ts
+++ b/src/useTheme.ts
@@ -6,39 +6,27 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { WidgetApiToWidgetAction } from "matrix-widget-api";
-import { type IThemeChangeActionRequest } from "matrix-widget-api";
 
 import { useUrlParams } from "./UrlParams";
-import { widget } from "./widget";
 import { useRootElement } from "./RootElementContext";
+import { useHostBridge } from "./HostBridge";
 
 export const useTheme = (): void => {
   const rootElement = useRootElement();
+  const hostBridge = useHostBridge();
   const { theme } = useUrlParams();
   const [requestedTheme, setRequestedTheme] = useState(theme);
   const previousTheme = useRef<string | null>(rootElement.classList.item(0));
 
   useEffect(() => {
-    if (widget) {
-      const onThemeChange = (
-        ev: CustomEvent<IThemeChangeActionRequest>,
-      ): void => {
-        ev.preventDefault();
-        if ("name" in ev.detail.data && typeof ev.detail.data.name === "string")
-          setRequestedTheme(ev.detail.data.name);
-        widget!.api.transport.reply(ev.detail, {});
-      };
-
-      widget.lazyActions.on(WidgetApiToWidgetAction.ThemeChange, onThemeChange);
-      return (): void => {
-        widget!.lazyActions.off(
-          WidgetApiToWidgetAction.ThemeChange,
-          onThemeChange,
-        );
-      };
-    }
-  }, []);
+    const subscription = hostBridge.themeChange$.subscribe(
+      ({ data, reply }) => {
+        if (typeof data.name === "string") setRequestedTheme(data.name);
+        reply();
+      },
+    );
+    return (): void => subscription.unsubscribe();
+  }, [hostBridge]);
 
   useLayoutEffect(() => {
     // If no theme has been explicitly requested we default to dark

From bc6c232ef092d721500693e95f8793945d13c5dd Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Wed, 2 Sep 2026 13:23:01 +0200
Subject: [PATCH 013/154] Move the state layer onto the host bridge

MuteStates, CallViewModel and LocalMember reached the host through the
widget global. None of them are React components, so they take the bridge
as an explicit parameter: a constructor argument for MuteStates, a field
on CallViewModelOptions, and one on createLocalMembership$'s props.

src/state no longer refers to the widget API.

The conditionals around it mostly disappear: nullHostBridge's observables
are NEVER, so there is nothing to guard, and a request carries its own
reply rather than needing the transport and the original event.

CallViewModelWidget.test.ts drove hangup by emitting on the mocked
widget's action emitter, so it now injects a bridge instead, and checks
that the request is acknowledged.
---
 sdk/main.ts                                   | 13 ++-
 src/room/InCallView.tsx                       |  4 +
 src/room/RoomPage.tsx                         |  5 +-
 src/state/CallViewModel/CallViewModel.ts      | 30 +++---
 .../localMember/LocalMember.test.ts           |  2 +
 .../CallViewModel/localMember/LocalMember.ts  | 27 +++--
 src/state/CallViewModelWidget.test.ts         | 46 +++------
 src/state/MuteStates.test.ts                  | 11 ++-
 src/state/MuteStates.ts                       | 99 +++++++++----------
 src/utils/test.ts                             | 11 ++-
 10 files changed, 120 insertions(+), 128 deletions(-)

diff --git a/sdk/main.ts b/sdk/main.ts
index 55aa4a02..de15a575 100644
--- a/sdk/main.ts
+++ b/sdk/main.ts
@@ -60,6 +60,7 @@ import {
   initializeWidget,
 } from "../src/widget";
 import { type Connection } from "../src/state/CallViewModel/remoteMembers/Connection";
+import { createWidgetHostBridge } from "../src/HostBridge";
 
 interface MatrixRTCSdk {
   /**
@@ -113,6 +114,7 @@ export async function createMatrixRTCSdk(
   const widget = _widget;
   if (!widget) throw Error("No widget. This webapp can only start as a widget");
   const client = await widget.client;
+  const hostBridge = createWidgetHostBridge(widget);
   logger.info("client created");
 
   // url params
@@ -132,10 +134,12 @@ export async function createMatrixRTCSdk(
     controlledAudioDevices,
     callIntent,
   });
-  const muteStates = new MuteStates(scope, mediaDevices, {
-    audioEnabled: false,
-    videoEnabled: false,
-  });
+  const muteStates = new MuteStates(
+    scope,
+    mediaDevices,
+    { audioEnabled: false, videoEnabled: false },
+    hostBridge,
+  );
 
   // call view model
   const callViewModel = createCallViewModel$(
@@ -146,6 +150,7 @@ export async function createMatrixRTCSdk(
     muteStates,
     {
       encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
+      hostBridge,
       controlledAudioDevices,
       callIntent,
     },
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index e291e001..e2edde84 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -29,6 +29,7 @@ import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { HeaderStyle, useUrlParams } from "../UrlParams";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
 import { widget } from "../widget";
+import { useHostBridge } from "../HostBridge.ts";
 import styles from "./InCallView.module.css";
 import { GridTile } from "../tile/GridTile";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
@@ -116,6 +117,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     useState<ViewModel<DeveloperSettingsSnapshot> | null>(null);
 
   const urlParams = useUrlParams();
+  const hostBridge = useHostBridge();
   const mediaDevices = useMediaDevices();
   const trackProcessorState$ = useTrackProcessorObservable$();
   useEffect(() => {
@@ -141,6 +143,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
       props.muteStates,
       {
         encryptionSystem: props.e2eeSystem,
+        hostBridge,
         autoLeaveWhenOthersLeft,
         waitForCallPickup: waitForCallPickup && sendNotificationType === "ring",
         matrixRTCMode$: matrixRTCModeSetting.value$,
@@ -171,6 +174,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     props.e2eeSystem,
     props.onLeft,
     urlParams,
+    hostBridge,
     mediaDevices,
     trackProcessorState$,
     props.client,
diff --git a/src/room/RoomPage.tsx b/src/room/RoomPage.tsx
index b5f943ce..00905ac4 100644
--- a/src/room/RoomPage.tsx
+++ b/src/room/RoomPage.tsx
@@ -30,6 +30,7 @@ import { useRoomIdentifier, useUrlParams } from "../UrlParams";
 import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
 import { HomePage } from "../home/HomePage";
 import { widget } from "../widget";
+import { useHostBridge } from "../HostBridge.ts";
 import { CallTerminatedMessage, useLoadGroupCall } from "./useLoadGroupCall";
 import { LobbyView } from "./LobbyView";
 import { E2eeType } from "../e2ee/e2eeType";
@@ -44,6 +45,7 @@ import { calculateInitialMuteState } from "../state/initialMuteState.ts";
 
 export const RoomPage: FC = (): ReactNode => {
   const urlParams = useUrlParams();
+  const hostBridge = useHostBridge();
   const { confineToRoom, preload, header, displayName, skipLobby } = urlParams;
   const { t } = useTranslation();
   const { roomAlias, roomId, viaServers } = useRoomIdentifier();
@@ -77,10 +79,11 @@ export const RoomPage: FC = (): ReactNode => {
           urlParams.callIntent,
           widget !== null,
         ),
+        hostBridge,
       ),
     );
     return (): void => scope.end();
-  }, [devices, urlParams]);
+  }, [devices, urlParams, hostBridge]);
 
   useEffect(() => {
     // If we've finished loading, are not already authed and we've been given a display name as
diff --git a/src/state/CallViewModel/CallViewModel.ts b/src/state/CallViewModel/CallViewModel.ts
index e9abeae5..b40a4523 100644
--- a/src/state/CallViewModel/CallViewModel.ts
+++ b/src/state/CallViewModel/CallViewModel.ts
@@ -48,7 +48,6 @@ import {
   type RTCCallIntent,
   type RTCNotificationType,
 } from "matrix-js-sdk/lib/matrixrtc";
-import { type IWidgetApiRequest } from "matrix-widget-api";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
 import { v4 as uuidv4 } from "uuid";
 import { type IMembershipManager } from "matrix-js-sdk/lib/matrixrtc/IMembershipManager";
@@ -89,7 +88,7 @@ import { MatrixKeyProvider } from "../../e2ee/matrixKeyProvider";
 import { type MuteStates } from "../MuteStates";
 import { HeaderStyle } from "../../UrlParams";
 import { type ProcessorState } from "../../livekit/TrackProcessorContext";
-import { ElementWidgetActions, widget } from "../../widget";
+import { type HostBridge, nullHostBridge } from "../../HostBridge";
 import {
   layoutShallowEquals,
   type Alignment,
@@ -173,6 +172,11 @@ import { type GridTileViewModel } from "../TileViewModel.ts";
 // callMembership -> rtcMembership
 export interface CallViewModelOptions {
   encryptionSystem: EncryptionSystem;
+  /**
+   * The application hosting Element Call, which can ask it to hang up and wants
+   * to know when the user joins or leaves. Defaults to no host.
+   */
+  hostBridge?: HostBridge;
   /**
    * Whether the app hosting Element Call controls the audio output devices,
    * rather than the browser. Defaults to false.
@@ -457,6 +461,7 @@ export function createCallViewModel$(
   // Defaults match what the URL parameters resolve to outside of widget mode,
   // so that callers which don't care (chiefly tests) behave as they always have.
   const {
+    hostBridge = nullHostBridge,
     controlledAudioDevices = false,
     header = HeaderStyle.Standard,
     showControls = true,
@@ -632,6 +637,7 @@ export function createCallViewModel$(
     localTransport$,
     roomId: matrixRoom.roomId,
     hideScreensharing,
+    hostBridge,
     logger: logger.getChild(`[${Date.now()}]`),
   });
 
@@ -923,24 +929,16 @@ export function createCallViewModel$(
 
   const userHangup$ = new Subject<void>();
 
-  const widgetHangup$ =
-    widget === null
-      ? NEVER
-      : (
-          fromEvent(
-            widget.lazyActions,
-            ElementWidgetActions.HangupCall,
-          ) as Observable<CustomEvent<IWidgetApiRequest>>
-        ).pipe(
-          tap((ev) => {
-            widget!.api.transport.reply(ev.detail, {});
-          }),
-        );
+  const hostHangup$ = hostBridge.hangUp$.pipe(
+    tap((request) => {
+      request.reply();
+    }),
+  );
 
   const leave$: Observable<"user" | "timeout" | "decline" | "allOthersLeft"> =
     merge(
       autoLeave$,
-      merge(userHangup$, widgetHangup$).pipe(map(() => "user" as const)),
+      merge(userHangup$, hostHangup$).pipe(map(() => "user" as const)),
     ).pipe(scope.share);
 
   const spotlightSpeaker$ = scope.behavior<UserMediaViewModel | undefined>(
diff --git a/src/state/CallViewModel/localMember/LocalMember.test.ts b/src/state/CallViewModel/localMember/LocalMember.test.ts
index 2b89d50b..4826dcdd 100644
--- a/src/state/CallViewModel/localMember/LocalMember.test.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.test.ts
@@ -52,6 +52,7 @@ import { ConnectionManagerData } from "../remoteMembers/ConnectionManager";
 import { ConnectionState, type Connection } from "../remoteMembers/Connection";
 import { type Publisher } from "./Publisher";
 import { initializeWidget } from "../../../widget";
+import { nullHostBridge } from "../../../HostBridge";
 import {
   type LocalTransport,
   type LocalTransportWithSFUConfig,
@@ -200,6 +201,7 @@ describe("LocalMembership", () => {
     },
     roomId: "!test-room-id:example.org",
     hideScreensharing: false,
+    hostBridge: nullHostBridge,
   };
 
   it("throws error on missing RTC config error", () => {
diff --git a/src/state/CallViewModel/localMember/LocalMember.ts b/src/state/CallViewModel/localMember/LocalMember.ts
index 844b66de..e28f5fe5 100644
--- a/src/state/CallViewModel/localMember/LocalMember.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.ts
@@ -53,7 +53,7 @@ import {
   MembershipManagerError,
   UnknownCallError,
 } from "../../../utils/errors.ts";
-import { ElementWidgetActions, widget } from "../../../widget.ts";
+import { type HostBridge } from "../../../HostBridge.ts";
 
 import { PosthogAnalytics } from "../../../analytics/PosthogAnalytics.ts";
 import {
@@ -145,6 +145,8 @@ interface Props {
   >;
   /** Whether to hide the screen-sharing button. */
   hideScreensharing: boolean;
+  /** The application hosting Element Call, to be kept informed of join/leave. */
+  hostBridge: HostBridge;
   logger: Logger;
 }
 
@@ -165,6 +167,7 @@ interface Props {
  * @param props.matrixRTCSession The matrix RTC session to join.
  * @param props.roomId The room ID used as the call identifier in analytics events.
  * @param props.hideScreensharing Whether to hide the screen-sharing button.
+ * @param props.hostBridge The application hosting Element Call.
  * @returns
  *  - publisher: The handle to create tracks and publish them to the room.
  *  - connected$: the current connection state. Including matrix server and livekit server connection. (only considering the livekit server we are using for our own media publication)
@@ -184,6 +187,7 @@ export const createLocalMembership$ = ({
   matrixRTCSession,
   roomId,
   hideScreensharing,
+  hostBridge,
 }: Props): {
   /**
    * This request to start audio and video tracks.
@@ -576,29 +580,24 @@ export const createLocalMembership$ = ({
       }
     });
 
-  // inform the widget about the connect and disconnect intent from the user.
+  // inform the host about the connect and disconnect intent from the user.
   scope
     .behavior(joinAndPublishRequested$.pipe(pairwise(), scope.bind()), [
       undefined,
       joinAndPublishRequested$.value,
     ])
     .subscribe(([prev, current]) => {
-      if (!widget) return;
       // JOIN prev=false (was left) => current-true (now joiend)
       if (!prev && current) {
-        widget.api.transport
-          .send(ElementWidgetActions.JoinCall, {})
-          .catch((e) => {
-            logger.error("Failed to send join action", e);
-          });
+        hostBridge.notifyJoined().catch((e) => {
+          logger.error("Failed to notify the host that we joined", e);
+        });
       }
       // LEAVE prev=false (was joined) => current-true (now left)
       if (prev && !current) {
-        widget.api.transport
-          .send(ElementWidgetActions.HangupCall, {})
-          .catch((e) => {
-            logger.error("Failed to send hangup action", e);
-          });
+        hostBridge.notifyHungUp().catch((e) => {
+          logger.error("Failed to notify the host that we hung up", e);
+        });
       }
     });
 
@@ -845,7 +844,7 @@ interface EnterRTCSessionOptions {
  * @param options - `encryptMedia`: Whether to encrypt media. `matrixRTCMode`: The
  *   Matrix RTC mode to use. `sendNotificationType`: Whether and what kind of
  *   notification to send on join. `callIntent`: The kind of call being placed.
- * @throws If the widget could not send ElementWidgetActions.JoinCall action.
+ * @throws If the host could not be told that we are joining.
  */
 // Exported for unit testing
 export function enterRTCSession(
diff --git a/src/state/CallViewModelWidget.test.ts b/src/state/CallViewModelWidget.test.ts
index 2f331bd3..dd2e75ab 100644
--- a/src/state/CallViewModelWidget.test.ts
+++ b/src/state/CallViewModelWidget.test.ts
@@ -6,39 +6,31 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { it, vi, expect } from "vitest";
-import EventEmitter from "events";
+import { Subject } from "rxjs";
 
 // import * as ComponentsCore from "@livekit/components-core";
 import { withCallViewModel } from "./CallViewModel/CallViewModelTestUtils.ts";
 import { type CallViewModel } from "./CallViewModel/CallViewModel.ts";
 import { constant } from "./Behavior.ts";
 import { aliceParticipant, localRtcMember } from "../utils/test-fixtures.ts";
-import { ElementWidgetActions, widget } from "../widget.ts";
+import {
+  type HostBridge,
+  type HostRequest,
+  nullHostBridge,
+} from "../HostBridge.ts";
 import { E2eeType } from "../e2ee/e2eeType.ts";
 import { MatrixRTCMode } from "../config/ConfigOptions.ts";
 
 vi.mock("@livekit/components-core", { spy: true });
 
-vi.mock("../widget", () => ({
-  ElementWidgetActions: {
-    HangupCall: "HangupCall",
-    // Add other actions if needed
-  },
-  widget: {
-    api: {
-      transport: {
-        send: vi.fn().mockResolvedValue(undefined),
-        reply: vi.fn().mockResolvedValue(undefined),
-      },
-    },
-    lazyActions: new EventEmitter(),
-  },
-}));
-
 it.each([[MatrixRTCMode.Compatibility], [MatrixRTCMode.Matrix_2_0]])(
-  "expect leave when ElementWidgetActions.HangupCall is called (%s mode)",
+  "expect leave when the host asks us to hang up (%s mode)",
   async (mode) => {
     const pr = Promise.withResolvers<string>();
+    const hangUp$ = new Subject<HostRequest<Record<string, never>>>();
+    const hostBridge: HostBridge = { ...nullHostBridge, hangUp$ };
+    const reply = vi.fn();
+
     withCallViewModel(mode)(
       {
         remoteParticipants$: constant([aliceParticipant]),
@@ -49,25 +41,17 @@ it.each([[MatrixRTCMode.Compatibility], [MatrixRTCMode.Matrix_2_0]])(
           pr.resolve(s);
         });
 
-        widget!.lazyActions!.emit(
-          ElementWidgetActions.HangupCall,
-          new CustomEvent(ElementWidgetActions.HangupCall, {
-            detail: {
-              action: "im.vector.hangup",
-              api: "toWidget",
-              data: {},
-              requestId: "widgetapi-1761237395918",
-              widgetId: "mrUjS9T6uKUOWHMxXvLbSv0F",
-            },
-          }),
-        );
+        hangUp$.next({ data: {}, reply });
       },
       {
         encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
+        hostBridge,
       },
     );
 
     const source = await pr.promise;
     expect(source).toBe("user");
+    // The host expects to hear back that we acted on its request
+    expect(reply).toHaveBeenCalledOnce();
   },
 );
diff --git a/src/state/MuteStates.test.ts b/src/state/MuteStates.test.ts
index f594cb05..239f0381 100644
--- a/src/state/MuteStates.test.ts
+++ b/src/state/MuteStates.test.ts
@@ -9,6 +9,7 @@ import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { BehaviorSubject } from "rxjs";
 import { logger } from "matrix-js-sdk/lib/logger";
 
+import { nullHostBridge } from "../HostBridge";
 import { MuteStates, MuteState } from "./MuteStates";
 import {
   type AudioOutputDeviceLabel,
@@ -228,10 +229,12 @@ describe("MuteStates", () => {
       videoInput: aVideoInput(),
       // other devices are not relevant for this test
     });
-    const muteStates = new MuteStates(testScope, mediaDevices, {
-      audioEnabled: false,
-      videoEnabled: false,
-    });
+    const muteStates = new MuteStates(
+      testScope,
+      mediaDevices,
+      { audioEnabled: false, videoEnabled: false },
+      nullHostBridge,
+    );
 
     let latestSyncedState: boolean | null = null;
     muteStates.video.setHandler(async (enabled: boolean): Promise<boolean> => {
diff --git a/src/state/MuteStates.ts b/src/state/MuteStates.ts
index d89cb844..59413b03 100644
--- a/src/state/MuteStates.ts
+++ b/src/state/MuteStates.ts
@@ -6,14 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type IWidgetApiRequest } from "matrix-widget-api";
 import { logger } from "matrix-js-sdk/lib/logger";
 import {
   BehaviorSubject,
   combineLatest,
   distinctUntilChanged,
   firstValueFrom,
-  fromEvent,
   map,
   merge,
   Observable,
@@ -24,7 +22,7 @@ import {
 } from "rxjs";
 
 import { type MediaDevices, type MediaDevice } from "../state/MediaDevices";
-import { ElementWidgetActions, widget } from "../widget";
+import { type DeviceMuteState, type HostBridge } from "../HostBridge";
 import { type ObservableScope } from "./ObservableScope";
 import { type Behavior, constant } from "./Behavior";
 
@@ -216,58 +214,51 @@ export class MuteStates {
       audioEnabled: boolean;
       videoEnabled: boolean;
     },
+    hostBridge: HostBridge,
   ) {
-    if (widget !== null) {
-      // Sync our mute states with the hosting client
-      const widgetApiState$ = combineLatest(
-        [this.audio.enabled$, this.video.enabled$],
-        (audio, video) => ({ audio_enabled: audio, video_enabled: video }),
-      );
-      widgetApiState$.pipe(this.scope.bind()).subscribe((state) => {
-        widget!.api.transport
-          .send(ElementWidgetActions.DeviceMute, state)
-          .catch((e) =>
-            logger.warn("Could not send DeviceMute action to widget", e),
-          );
-      });
+    // Keep the host informed of our mute state
+    const muteState$ = combineLatest(
+      [this.audio.enabled$, this.video.enabled$],
+      (audio, video): DeviceMuteState => ({
+        audio_enabled: audio,
+        video_enabled: video,
+      }),
+    );
+    muteState$.pipe(this.scope.bind()).subscribe((state) => {
+      hostBridge
+        .notifyDeviceMute(state)
+        .catch((e) => logger.warn("Could not send mute state to the host", e));
+    });
 
-      // Also sync the hosting client's mute states back with ours
-      const muteActions$ = fromEvent(
-        widget.lazyActions,
-        ElementWidgetActions.DeviceMute,
-      ) as Observable<CustomEvent<IWidgetApiRequest>>;
-      muteActions$
-        .pipe(
-          withLatestFrom(
-            widgetApiState$,
-            this.audio.setEnabled$,
-            this.video.setEnabled$,
-          ),
-          this.scope.bind(),
-        )
-        .subscribe(([ev, state, setAudioEnabled, setVideoEnabled]) => {
-          // First copy the current state into our new state
-          const newState = { ...state };
-          // Update new state if there are any requested changes from the widget
-          // action in `ev.detail.data`.
-          if (
-            ev.detail.data.audio_enabled != null &&
-            typeof ev.detail.data.audio_enabled === "boolean" &&
-            setAudioEnabled !== null
-          ) {
-            newState.audio_enabled = ev.detail.data.audio_enabled;
-            setAudioEnabled(newState.audio_enabled);
-          }
-          if (
-            ev.detail.data.video_enabled != null &&
-            typeof ev.detail.data.video_enabled === "boolean" &&
-            setVideoEnabled !== null
-          ) {
-            newState.video_enabled = ev.detail.data.video_enabled;
-            setVideoEnabled(newState.video_enabled);
-          }
-          widget!.api.transport.reply(ev.detail, newState);
-        });
-    }
+    // And apply the changes the host asks for
+    hostBridge.deviceMute$
+      .pipe(
+        withLatestFrom(
+          muteState$,
+          this.audio.setEnabled$,
+          this.video.setEnabled$,
+        ),
+        this.scope.bind(),
+      )
+      .subscribe(([request, state, setAudioEnabled, setVideoEnabled]) => {
+        // First copy the current state into our new state
+        const newState = { ...state };
+        // Then apply whichever changes the host asked for
+        if (
+          typeof request.data.audio_enabled === "boolean" &&
+          setAudioEnabled !== null
+        ) {
+          newState.audio_enabled = request.data.audio_enabled;
+          setAudioEnabled(newState.audio_enabled);
+        }
+        if (
+          typeof request.data.video_enabled === "boolean" &&
+          setVideoEnabled !== null
+        ) {
+          newState.video_enabled = request.data.video_enabled;
+          setVideoEnabled(newState.video_enabled);
+        }
+        request.reply(newState);
+      });
   }
 }
diff --git a/src/utils/test.ts b/src/utils/test.ts
index de74ac53..49ae0a3f 100644
--- a/src/utils/test.ts
+++ b/src/utils/test.ts
@@ -63,6 +63,7 @@ import { type MediaDevices } from "../state/MediaDevices";
 import { type Behavior, constant } from "../state/Behavior";
 import { ObservableScope } from "../state/ObservableScope";
 import { MuteStates } from "../state/MuteStates";
+import { nullHostBridge } from "../HostBridge";
 import {
   createLocalUserMedia,
   type LocalUserMediaViewModel,
@@ -577,10 +578,12 @@ export function mockMuteStates(
   joined$: Observable<boolean> = of(true),
 ): MuteStates {
   const observableScope = new ObservableScope();
-  return new MuteStates(observableScope, mockMediaDevices({}), {
-    audioEnabled: false,
-    videoEnabled: false,
-  });
+  return new MuteStates(
+    observableScope,
+    mockMediaDevices({}),
+    { audioEnabled: false, videoEnabled: false },
+    nullHostBridge,
+  );
 }
 
 export class MockConnection extends Connection {

From f28d9e9b06693276b7fe1fc0b5bffe53e5afb4f6 Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Wed, 2 Sep 2026 15:04:24 +0200
Subject: [PATCH 014/154] Stop asking whether Element Call is a widget
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The remaining reads of the widget global were all asking one of two
different questions, so they get two different answers.

The app shell — the auth hooks, automatic guest registration, the group
call loader's diagnostic and the initial mute state — wants to know
whether Element Call was launched as a widget. That is a property of the
URL it was launched with, so expose the isWidget that computeUrlParams
already computed internally, documented as being for shell use only.

The call interface — whether to offer the profile settings tab — wants to
know something about its host, so it asks the bridge. A host that can
dismiss Element Call owns the user's account, so their profile is not ours
to edit; this reuses the close capability as a proxy, with a TODO
alongside the others.

ClientContext also takes supportsReactions from the bridge rather than
checking four widget capabilities itself, which removes widgetApi from
InitResult — a field that was always null outside widget mode.

Note this changes behaviour for a malformed widget URL: one carrying a
widget ID and parent URL but missing the room, user, device or base URL
would previously have fallen back to registering a guest user, and will
now not.
---
 src/ClientContext.tsx                   | 34 +++++--------------------
 src/UrlParams.ts                        | 12 +++++++++
 src/auth/useInteractiveRegistration.ts  |  7 ++---
 src/auth/useRegisterPasswordlessUser.ts |  7 ++---
 src/room/InCallView.tsx                 | 11 +++++---
 src/room/RoomPage.tsx                   |  6 ++---
 src/room/useLoadGroupCall.ts            |  6 +++--
 src/settings/SettingsModal.tsx          |  7 +++--
 src/utils/spa.ts                        |  1 -
 9 files changed, 45 insertions(+), 46 deletions(-)

diff --git a/src/ClientContext.tsx b/src/ClientContext.tsx
index 288665c5..a0d65e64 100644
--- a/src/ClientContext.tsx
+++ b/src/ClientContext.tsx
@@ -21,9 +21,9 @@ import { logger } from "matrix-js-sdk/lib/logger";
 import { type ISyncStateData, type SyncState } from "matrix-js-sdk/lib/sync";
 import { ClientEvent, type MatrixClient } from "matrix-js-sdk";
 
-import type { WidgetApi } from "matrix-widget-api";
 import { ErrorPage } from "./FullScreenView";
 import { widget } from "./widget";
+import { useHostBridge } from "./HostBridge";
 import {
   PosthogAnalytics,
   RegistrationType,
@@ -138,6 +138,7 @@ interface Props {
 
 export const ClientProvider: FC<Props> = ({ children }) => {
   const navigate = useNavigate();
+  const hostBridge = useHostBridge();
 
   // null = signed out, undefined = loading
   const [initClientState, setInitClientState] = useState<
@@ -201,7 +202,6 @@ export const ClientProvider: FC<Props> = ({ children }) => {
 
       saveSession(session);
       setInitClientState({
-        widgetApi: null,
         client,
         passwordlessUser: session.passwordlessUser,
       });
@@ -307,36 +307,16 @@ export const ClientProvider: FC<Props> = ({ children }) => {
       initClientState.client.on(ClientEvent.Sync, onSync);
     }
 
-    if (initClientState.widgetApi) {
-      const reactSend = initClientState.widgetApi.hasCapability(
-        "org.matrix.msc2762.send.event:m.reaction",
-      );
-      const redactSend = initClientState.widgetApi.hasCapability(
-        "org.matrix.msc2762.send.event:m.room.redaction",
-      );
-      const reactRcv = initClientState.widgetApi.hasCapability(
-        "org.matrix.msc2762.receive.event:m.reaction",
-      );
-      const redactRcv = initClientState.widgetApi.hasCapability(
-        "org.matrix.msc2762.receive.event:m.room.redaction",
-      );
-
-      if (!reactSend || !reactRcv || !redactSend || !redactRcv) {
-        logger.warn("Widget does not support reactions");
-        setSupportsReactions(false);
-      } else {
-        setSupportsReactions(true);
-      }
-    } else {
-      setSupportsReactions(true);
-    }
+    if (!hostBridge.supportsReactions)
+      logger.warn("The host does not permit reactions");
+    setSupportsReactions(hostBridge.supportsReactions);
 
     return (): void => {
       if (initClientState.client) {
         initClientState.client.removeListener(ClientEvent.Sync, onSync);
       }
     };
-  }, [initClientState, onSync]);
+  }, [initClientState, onSync, hostBridge]);
 
   if (alreadyOpenedErr) {
     return <ErrorPage error={alreadyOpenedErr} />;
@@ -346,7 +326,6 @@ export const ClientProvider: FC<Props> = ({ children }) => {
 };
 
 export type InitResult = {
-  widgetApi: WidgetApi | null;
   client: MatrixClient;
   passwordlessUser: boolean;
 };
@@ -357,7 +336,6 @@ async function loadClient(): Promise<InitResult | null> {
     logger.log("Using a matryoshka client");
     const client = await widget.client;
     return {
-      widgetApi: widget.api,
       client,
       passwordlessUser: false,
     };
diff --git a/src/UrlParams.ts b/src/UrlParams.ts
index dd83a496..422163fc 100644
--- a/src/UrlParams.ts
+++ b/src/UrlParams.ts
@@ -59,6 +59,17 @@ export interface UrlProperties {
   // Widget api related params
   widgetId: string | null;
   parentUrl: string | null;
+  /**
+   * Whether Element Call was started as a widget of a Matrix client, which is
+   * to say whether it was given a widget ID and a parent to talk to.
+   *
+   * Only meaningful to the standalone and widget builds, which own the URL —
+   * so use it for decisions that belong to the app shell, such as whether
+   * Element Call is responsible for authenticating the user. Anything the call
+   * interface itself needs to know about its host should come from the host
+   * bridge instead.
+   */
+  isWidget: boolean;
   /**
    * Anything about what room we're pointed to should be from useRoomIdentifier which
    * parses the path and resolves alias with respect to the default server name, however
@@ -448,6 +459,7 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
   const properties: UrlProperties = {
     widgetId,
     parentUrl,
+    isWidget,
     // NB. we don't validate roomId here as we do in getRoomIdentifierFromUrl:
     // what would we do if it were invalid? If the widget API says that's what
     // the room ID is, then that's what it is.
diff --git a/src/auth/useInteractiveRegistration.ts b/src/auth/useInteractiveRegistration.ts
index 4972c031..7314c9e4 100644
--- a/src/auth/useInteractiveRegistration.ts
+++ b/src/auth/useInteractiveRegistration.ts
@@ -17,7 +17,7 @@ import { logger } from "matrix-js-sdk/lib/logger";
 import { initClient } from "../utils/matrix";
 import { type Session } from "../ClientContext";
 import { Config } from "../config/Config";
-import { widget } from "../widget";
+import { useUrlParams } from "../UrlParams";
 
 export const useInteractiveRegistration = (
   oldClient?: MatrixClient,
@@ -32,6 +32,7 @@ export const useInteractiveRegistration = (
     passwordlessUser: boolean,
   ) => Promise<[MatrixClient, Session]>;
 } => {
+  const { isWidget } = useUrlParams();
   const [privacyPolicyUrl, setPrivacyPolicyUrl] = useState<string | undefined>(
     undefined,
   );
@@ -47,7 +48,7 @@ export const useInteractiveRegistration = (
   }
 
   useEffect(() => {
-    if (widget) return;
+    if (isWidget) return;
     // An empty registerRequest is used to get the privacy policy and recaptcha key.
     authClient.current!.registerRequest({}).catch((error) => {
       setPrivacyPolicyUrl(
@@ -55,7 +56,7 @@ export const useInteractiveRegistration = (
       );
       setRecaptchaKey(error.data?.params["m.login.recaptcha"]?.public_key);
     });
-  }, []);
+  }, [isWidget]);
 
   const register = useCallback(
     async (
diff --git a/src/auth/useRegisterPasswordlessUser.ts b/src/auth/useRegisterPasswordlessUser.ts
index c2cbe2d3..27674c62 100644
--- a/src/auth/useRegisterPasswordlessUser.ts
+++ b/src/auth/useRegisterPasswordlessUser.ts
@@ -12,7 +12,7 @@ import { useClient } from "../ClientContext";
 import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
 import { generateRandomName } from "../auth/generateRandomName";
 import { useRecaptcha } from "../auth/useRecaptcha";
-import { widget } from "../widget";
+import { useUrlParams } from "../UrlParams";
 
 interface UseRegisterPasswordlessUserType {
   privacyPolicyUrl?: string;
@@ -22,6 +22,7 @@ interface UseRegisterPasswordlessUserType {
 
 export function useRegisterPasswordlessUser(): UseRegisterPasswordlessUserType {
   const { setClient } = useClient();
+  const { isWidget } = useUrlParams();
   const { privacyPolicyUrl, recaptchaKey, register } =
     useInteractiveRegistration();
   const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);
@@ -31,7 +32,7 @@ export function useRegisterPasswordlessUser(): UseRegisterPasswordlessUserType {
       if (!setClient) {
         throw new Error("No client context");
       }
-      if (widget) {
+      if (isWidget) {
         throw new Error(
           "Registration was skipped: We should never try to register password-less user in embedded mode.",
         );
@@ -53,7 +54,7 @@ export function useRegisterPasswordlessUser(): UseRegisterPasswordlessUserType {
         throw e;
       }
     },
-    [execute, reset, register, setClient],
+    [execute, reset, register, setClient, isWidget],
   );
 
   return { privacyPolicyUrl, registerPasswordlessUser, recaptchaId };
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index e2edde84..ef1e1f98 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -28,7 +28,6 @@ import { useTranslation } from "react-i18next";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { HeaderStyle, useUrlParams } from "../UrlParams";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
-import { widget } from "../widget";
 import { useHostBridge } from "../HostBridge.ts";
 import styles from "./InCallView.module.css";
 import { GridTile } from "../tile/GridTile";
@@ -251,6 +250,7 @@ export const InCallView: FC<InCallViewProps> = ({
 }) => {
   const logger = rootLogger.getChild("[InCallView]");
   const { t } = useTranslation();
+  const hostBridge = useHostBridge();
   const { sendReaction, toggleRaisedHand } = useReactionsSender();
 
   useWakeLock();
@@ -334,14 +334,17 @@ export const InCallView: FC<InCallViewProps> = ({
 
   const openProfile = useMemo(
     () =>
-      // Profile settings are unavailable in widget mode
-      widget === null
+      // A host that can dismiss us is a host that owns the user's account, so
+      // their profile is not ours to edit.
+      // TODO: another use of the close capability as a proxy — see the note in
+      // GroupCallView.
+      hostBridge.close === undefined
         ? (): void => {
             setSettingsTab("profile");
             setSettingsOpen(true);
           }
         : null,
-    [setSettingsTab, setSettingsOpen],
+    [setSettingsTab, setSettingsOpen, hostBridge],
   );
 
   const [headerRef, headerBounds] = useMeasure();
diff --git a/src/room/RoomPage.tsx b/src/room/RoomPage.tsx
index 00905ac4..33eb80dd 100644
--- a/src/room/RoomPage.tsx
+++ b/src/room/RoomPage.tsx
@@ -29,7 +29,6 @@ import { GroupCallView } from "./GroupCallView";
 import { useRoomIdentifier, useUrlParams } from "../UrlParams";
 import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
 import { HomePage } from "../home/HomePage";
-import { widget } from "../widget";
 import { useHostBridge } from "../HostBridge.ts";
 import { CallTerminatedMessage, useLoadGroupCall } from "./useLoadGroupCall";
 import { LobbyView } from "./LobbyView";
@@ -77,7 +76,7 @@ export const RoomPage: FC = (): ReactNode => {
         calculateInitialMuteState(
           urlParams.skipLobby,
           urlParams.callIntent,
-          widget !== null,
+          urlParams.isWidget,
         ),
         hostBridge,
       ),
@@ -88,7 +87,7 @@ export const RoomPage: FC = (): ReactNode => {
   useEffect(() => {
     // If we've finished loading, are not already authed and we've been given a display name as
     // a URL param, automatically register a passwordless user
-    if (!loading && !authenticated && displayName && !widget) {
+    if (!loading && !authenticated && displayName && !urlParams.isWidget) {
       setIsRegistering(true);
       registerPasswordlessUser(displayName)
         .catch((e) => {
@@ -102,6 +101,7 @@ export const RoomPage: FC = (): ReactNode => {
     loading,
     authenticated,
     displayName,
+    urlParams.isWidget,
     setIsRegistering,
     registerPasswordlessUser,
   ]);
diff --git a/src/room/useLoadGroupCall.ts b/src/room/useLoadGroupCall.ts
index 8a7617d8..42464bb2 100644
--- a/src/room/useLoadGroupCall.ts
+++ b/src/room/useLoadGroupCall.ts
@@ -34,7 +34,7 @@ import {
   EndCallIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import { widget } from "../widget";
+import { useUrlParams } from "../UrlParams";
 
 export type GroupCallLoaded = {
   kind: "loaded";
@@ -132,6 +132,7 @@ export const useLoadGroupCall = (
   const [state, setState] = useState<GroupCallStatus>({ kind: "loading" });
   const activeRoom = useRef<Room | undefined>(undefined);
   const { t } = useTranslation();
+  const { isWidget } = useUrlParams();
 
   const bannedError = useCallback(
     (): CallTerminatedMessage =>
@@ -249,7 +250,7 @@ export const useLoadGroupCall = (
           // room already joined so we are done here already.
           return room!;
         }
-        if (widget)
+        if (isWidget)
           // in widget mode we never should reach this point. (getRoom should return the room.)
           throw new Error(
             "Room not found. The widget-api did not pass over the relevant room events/information.",
@@ -373,6 +374,7 @@ export const useLoadGroupCall = (
   }, [
     bannedError,
     client,
+    isWidget,
     knockRejectError,
     removeNoticeError,
     roomIdOrAlias,
diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx
index b2ffef4a..35604d98 100644
--- a/src/settings/SettingsModal.tsx
+++ b/src/settings/SettingsModal.tsx
@@ -18,7 +18,7 @@ import { ProfileSettingsTab } from "./ProfileSettingsTab";
 import { FeedbackSettingsTab } from "./FeedbackSettingsTab";
 import { iosDeviceMenu$ } from "../state/MediaDevices";
 import { useMediaDevices } from "../MediaDevicesContext";
-import { widget } from "../widget";
+import { useHostBridge } from "../HostBridge";
 import {
   useSetting,
   soundEffectVolume as soundEffectVolumeSetting,
@@ -123,6 +123,7 @@ export const SettingsModal: FC<Props> = ({
   // On EC, we decided that it is less confusing for the user if they see those options in the output section
   // rather than the input section.
   const { controlledAudioDevices } = useUrlParams();
+  const hostBridge = useHostBridge();
   // If we are on iOS we will show a button to open the native audio device picker.
   const iosDeviceMenu = useBehavior(iosDeviceMenu$);
 
@@ -234,7 +235,9 @@ export const SettingsModal: FC<Props> = ({
   };
 
   const tabs = [audioTab, videoTab];
-  if (widget === null) tabs.push(profileTab);
+  // A host that can dismiss us is a host that owns the user's account, so their
+  // profile is not ours to edit.
+  if (hostBridge.close === undefined) tabs.push(profileTab);
   tabs.push(preferencesTab);
   if (isRageshakeAvailable || import.meta.env.VITE_PACKAGE === "full") {
     // for full package we want to show the analytics consent checkbox
diff --git a/src/utils/spa.ts b/src/utils/spa.ts
index e97d7810..b8e959f8 100644
--- a/src/utils/spa.ts
+++ b/src/utils/spa.ts
@@ -40,7 +40,6 @@ export async function initSPA(
     try {
       const client = await initClient(initClientParams, true);
       return {
-        widgetApi: null,
         client,
         passwordlessUser,
       };

From eb117249d18fb5f087e7d4ef338d8857c409c1dd Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Wed, 2 Sep 2026 15:05:12 +0200
Subject: [PATCH 015/154] Configure analytics explicitly instead of discovering
 it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PosthogAnalytics read its own configuration out of the environment on
first use: the URL parameters, config.json, and the widget global. An
embedded Element Call has none of those to offer, and analytics that
configure themselves cannot be switched off by a host that does its own
reporting.

Take an AnalyticsConfig through PosthogAnalytics.configure() instead,
called from the initializer once the config has loaded. Unconfigured
analytics stay off.

Note the two halves of that config are decided differently, and have to
be: where the credentials come from depends on the package, but who owns
the user's analytics identity depends on how Element Call is running,
since the full package can be used as a widget too.

Drop the widget check around cryptoVersion, which never did anything —
widget mode never initialises crypto, so getCrypto() is already undefined
there.

Move the tests covering which package reads which credential source onto
analyticsConfigFromEnvironment, where that decision now lives.
---
 src/analytics/PosthogAnalytics.test.ts | 147 ++++++++++++++++---------
 src/analytics/PosthogAnalytics.ts      |  85 +++++++++-----
 src/initializer.tsx                    |  35 ++++++
 3 files changed, 185 insertions(+), 82 deletions(-)

diff --git a/src/analytics/PosthogAnalytics.test.ts b/src/analytics/PosthogAnalytics.test.ts
index 7c1128ad..ba51ba27 100644
--- a/src/analytics/PosthogAnalytics.test.ts
+++ b/src/analytics/PosthogAnalytics.test.ts
@@ -22,75 +22,121 @@ import {
   PosthogAnalytics,
 } from "./PosthogAnalytics";
 import { mockConfig } from "../utils/test";
+import { analyticsConfigFromEnvironment } from "../initializer";
 
 describe("PosthogAnalytics", () => {
-  describe("embedded package", () => {
-    beforeAll(() => {
-      vi.stubEnv("VITE_PACKAGE", "embedded");
-    });
-
+  describe("enablement", () => {
     beforeEach(() => {
-      mockConfig({});
-      window.location.hash = "#";
       PosthogAnalytics.resetInstance();
     });
 
-    afterAll(() => {
-      vi.unstubAllEnvs();
-    });
-
-    it("does not create instance without config value or URL params", () => {
+    it("stays off until it is configured", () => {
       expect(PosthogAnalytics.instance.isEnabled()).toBe(false);
     });
 
-    it("ignores config value and does not create instance", () => {
-      mockConfig({
-        posthog: {
-          api_host: "https://api.example.com.localhost",
-          api_key: "api_key",
-        },
+    it("stays off when configured without credentials", () => {
+      PosthogAnalytics.configure({ matrixBackend: "jssdk" });
+      expect(PosthogAnalytics.instance.isEnabled()).toBe(false);
+    });
+
+    it("stays off when given only a key", () => {
+      PosthogAnalytics.configure({
+        matrixBackend: "jssdk",
+        apiKey: "api_key",
       });
       expect(PosthogAnalytics.instance.isEnabled()).toBe(false);
     });
 
-    it("uses URL params if both set", () => {
-      window.location.hash = `#?posthogApiHost=${encodeURIComponent("https://url.example.com.localhost")}&posthogApiKey=api_key`;
+    it("turns on when given both a key and a host", () => {
+      PosthogAnalytics.configure({
+        matrixBackend: "jssdk",
+        apiKey: "api_key",
+        apiHost: "https://api.example.com.localhost",
+      });
       expect(PosthogAnalytics.instance.isEnabled()).toBe(true);
     });
   });
 
-  describe("full package", () => {
-    beforeAll(() => {
-      vi.stubEnv("VITE_PACKAGE", "full");
-    });
-
+  // Which of the URL and config.json the credentials come from is a deliberate
+  // policy: an embedder is responsible for its own users' telemetry, so it must
+  // not pick up the deployment's, and vice versa.
+  describe("analyticsConfigFromEnvironment", () => {
     beforeEach(() => {
       mockConfig({});
       window.location.hash = "#";
-      PosthogAnalytics.resetInstance();
     });
 
     afterAll(() => {
       vi.unstubAllEnvs();
     });
 
-    it("does not create instance without config value", () => {
-      expect(PosthogAnalytics.instance.isEnabled()).toBe(false);
-    });
+    const urlCredentials = `posthogApiHost=${encodeURIComponent("https://url.example.com.localhost")}&posthogApiKey=url_key`;
+    const configCredentials = {
+      posthog: {
+        api_host: "https://config.example.com.localhost",
+        api_key: "config_key",
+      },
+    };
 
-    it("ignores URL params and does not create instance", () => {
-      window.location.hash = `#?posthogApiHost=${encodeURIComponent("https://url.example.com.localhost")}&posthogApiKey=api_key`;
-      expect(PosthogAnalytics.instance.isEnabled()).toBe(false);
-    });
-
-    it("creates instance with config value", () => {
-      mockConfig({
-        posthog: {
-          api_host: "https://api.example.com.localhost",
-          api_key: "api_key",
-        },
+    describe("embedded package", () => {
+      beforeAll(() => {
+        vi.stubEnv("VITE_PACKAGE", "embedded");
       });
-      expect(PosthogAnalytics.instance.isEnabled()).toBe(true);
+
+      it("has no credentials without URL params", () => {
+        expect(analyticsConfigFromEnvironment().apiKey).toBeUndefined();
+      });
+
+      it("takes the credentials from the URL", () => {
+        window.location.hash = `#?${urlCredentials}`;
+        expect(analyticsConfigFromEnvironment()).toMatchObject({
+          apiKey: "url_key",
+          apiHost: "https://url.example.com.localhost",
+        });
+      });
+
+      it("ignores the deployment's config", () => {
+        mockConfig(configCredentials);
+        expect(analyticsConfigFromEnvironment().apiKey).toBeUndefined();
+      });
+    });
+
+    describe("full package", () => {
+      beforeAll(() => {
+        vi.stubEnv("VITE_PACKAGE", "full");
+      });
+
+      it("has no credentials without config", () => {
+        expect(analyticsConfigFromEnvironment().apiKey).toBeUndefined();
+      });
+
+      it("takes the credentials from the config", () => {
+        mockConfig(configCredentials);
+        expect(analyticsConfigFromEnvironment()).toMatchObject({
+          apiKey: "config_key",
+          apiHost: "https://config.example.com.localhost",
+        });
+      });
+
+      it("ignores the URL params", () => {
+        window.location.hash = `#?${urlCredentials}`;
+        expect(analyticsConfigFromEnvironment().apiKey).toBeUndefined();
+      });
+    });
+
+    // Who owns the user's analytics identity depends on how Element Call is
+    // running, not on which package it was built as.
+    it("reports the embedded backend when running as a widget", () => {
+      vi.stubEnv("VITE_PACKAGE", "full");
+      window.location.hash = `#?widgetId=id&parentUrl=${encodeURIComponent("https://host.example.com.localhost")}&posthogUserId=given_id`;
+      expect(analyticsConfigFromEnvironment()).toMatchObject({
+        matrixBackend: "embedded",
+        hostAnalyticsId: "given_id",
+      });
+    });
+
+    it("reports the jssdk backend when running standalone", () => {
+      expect(analyticsConfigFromEnvironment().matrixBackend).toBe("jssdk");
     });
   });
 
@@ -204,22 +250,13 @@ describe("PosthogAnalytics", () => {
   // posthog-js bumps renaming/removing the hook. The filter logic itself is
   // covered by the applyPrivacyFilters block above.
   describe("posthog.init wiring", () => {
-    beforeAll(() => {
-      vi.stubEnv("VITE_PACKAGE", "full");
-    });
-
     beforeEach(() => {
-      mockConfig({
-        posthog: {
-          api_host: "https://api.example.com.localhost",
-          api_key: "api_key",
-        },
-      });
       PosthogAnalytics.resetInstance();
-    });
-
-    afterAll(() => {
-      vi.unstubAllEnvs();
+      PosthogAnalytics.configure({
+        matrixBackend: "jssdk",
+        apiKey: "api_key",
+        apiHost: "https://api.example.com.localhost",
+      });
     });
 
     it("passes events through the privacy filter via before_send", () => {
diff --git a/src/analytics/PosthogAnalytics.ts b/src/analytics/PosthogAnalytics.ts
index 01a146e0..01a05bfb 100644
--- a/src/analytics/PosthogAnalytics.ts
+++ b/src/analytics/PosthogAnalytics.ts
@@ -15,7 +15,6 @@ import { logger } from "matrix-js-sdk/lib/logger";
 import { type MatrixClient } from "matrix-js-sdk";
 import { type Subscription } from "rxjs";
 
-import { widget } from "../widget";
 import {
   CallEndedTracker,
   CallStartedTracker,
@@ -29,8 +28,6 @@ import {
   CallConnectDurationTracker,
   CallReconnectingTracker,
 } from "./PosthogEvents";
-import { Config } from "../config/Config";
-import { getUrlParams } from "../UrlParams";
 import { optInAnalytics } from "../settings/settings";
 
 /* Posthog analytics tracking.
@@ -140,6 +137,27 @@ interface PlatformProperties {
   cryptoVersion?: string;
 }
 
+/**
+ * How analytics reporting should be set up, supplied by whoever is starting
+ * Element Call rather than discovered from the page it happens to be on.
+ */
+export interface AnalyticsConfig {
+  /** The PostHog project key. Without one, analytics stay switched off. */
+  apiKey?: string;
+  apiHost?: string;
+  /**
+   * How Element Call reaches Matrix. When `embedded`, the host owns the user's
+   * identity: it supplies the analytics ID, and Element Call must not store one
+   * in the user's account data.
+   */
+  matrixBackend: "embedded" | "jssdk";
+  /** The analytics ID the host has assigned to this user, when embedded. */
+  hostAnalyticsId?: string | null;
+}
+
+/** Analytics are off until someone asks for them. */
+const analyticsDisabled: AnalyticsConfig = { matrixBackend: "jssdk" };
+
 export class PosthogAnalytics {
   /* Wrapper for Posthog analytics.
    * 3 modes of anonymity are supported, governed by this.anonymity
@@ -167,13 +185,32 @@ export class PosthogAnalytics {
   private registrationType: RegistrationType = RegistrationType.Guest;
   private optInListener: Subscription | null = null;
 
+  private static analyticsConfig: AnalyticsConfig = analyticsDisabled;
+
+  /**
+   * Sets up analytics reporting. Must be called before the instance is first
+   * used; without it, analytics stay switched off.
+   */
+  public static configure(config: AnalyticsConfig): void {
+    if (this.internalInstance)
+      // Configuration is read once, when the instance is built, so arriving
+      // late means analytics are already running unconfigured.
+      logger.warn(
+        "Analytics were configured after they had already been started; the new configuration will not take effect",
+      );
+    this.analyticsConfig = config;
+  }
+
   public static hasInstance(): boolean {
     return Boolean(this.internalInstance);
   }
 
   public static get instance(): PosthogAnalytics {
     if (!this.internalInstance) {
-      this.internalInstance = new PosthogAnalytics(posthog);
+      this.internalInstance = new PosthogAnalytics(
+        posthog,
+        PosthogAnalytics.analyticsConfig,
+      );
     }
     return this.internalInstance;
   }
@@ -181,20 +218,14 @@ export class PosthogAnalytics {
   public static resetInstance(): void {
     // Reset the singleton instance
     this.internalInstance = null;
+    this.analyticsConfig = analyticsDisabled;
   }
 
-  private constructor(private readonly posthog: PostHog) {
-    let apiKey: string | undefined;
-    let apiHost: string | undefined;
-    if (import.meta.env.VITE_PACKAGE === "embedded") {
-      // for the embedded package we always use the values from the URL as the widget host is responsible for analytics configuration
-      apiKey = getUrlParams().posthogApiKey ?? undefined;
-      apiHost = getUrlParams().posthogApiHost ?? undefined;
-    } else if (import.meta.env.VITE_PACKAGE === "full") {
-      // in full package it is the server responsible for the analytics
-      apiKey = Config.get().posthog?.api_key;
-      apiHost = Config.get().posthog?.api_host;
-    }
+  private constructor(
+    private readonly posthog: PostHog,
+    private readonly config: AnalyticsConfig,
+  ) {
+    const { apiKey, apiHost } = config;
 
     if (apiKey && apiHost) {
       const beforeSend = (event: CaptureResult | null): CaptureResult | null =>
@@ -225,15 +256,15 @@ export class PosthogAnalytics {
     }
   }
 
-  private static getPlatformProperties(): PlatformProperties {
+  private getPlatformProperties(): PlatformProperties {
     const appVersion = import.meta.env.VITE_APP_VERSION || "dev";
     return {
       appVersion,
-      matrixBackend: widget ? "embedded" : "jssdk",
+      matrixBackend: this.config.matrixBackend,
       callBackend: "livekit",
-      cryptoVersion: widget
-        ? undefined
-        : window.matrixclient?.getCrypto()?.getVersion(),
+      // Undefined when Element Call has no crypto of its own, which is the case
+      // whenever a host is doing the encrypting for it.
+      cryptoVersion: window.matrixclient?.getCrypto()?.getVersion(),
     };
   }
 
@@ -283,8 +314,8 @@ export class PosthogAnalytics {
       // different devices to send the same ID.
       let analyticsID = await this.getAnalyticsId();
       try {
-        if (!analyticsID && !widget) {
-          // only try setting up a new analytics ID in the standalone app.
+        if (!analyticsID && this.config.matrixBackend !== "embedded") {
+          // only mint an analytics ID when we are the ones storing it.
 
           // Couldn't retrieve an analytics ID from user settings, so create one and set it on the server.
           // Note there's a race condition here - if two devices do these steps at the same time, last write
@@ -313,8 +344,8 @@ export class PosthogAnalytics {
 
   private async getAnalyticsId(): Promise<string | null> {
     const client: MatrixClient = window.matrixclient;
-    if (widget) {
-      return getUrlParams().posthogUserId;
+    if (this.config.matrixBackend === "embedded") {
+      return this.config.hostAnalyticsId ?? null;
     } else {
       const accountData = await client.getAccountDataFromServer(
         PosthogAnalytics.ANALYTICS_EVENT_TYPE,
@@ -324,7 +355,7 @@ export class PosthogAnalytics {
   }
 
   private async setAccountAnalyticsId(analyticsID: string): Promise<void> {
-    if (!widget) {
+    if (this.config.matrixBackend !== "embedded") {
       const client = window.matrixclient;
 
       // the analytics ID only needs to be set in the standalone version.
@@ -362,7 +393,7 @@ export class PosthogAnalytics {
     // These properties will be subsequently passed in every event.
     //
     // This only needs to be done once per page lifetime. Note that getPlatformProperties
-    this.platformSuperProperties = PosthogAnalytics.getPlatformProperties();
+    this.platformSuperProperties = this.getPlatformProperties();
     this.registerSuperProperties({
       ...this.platformSuperProperties,
       registrationType:
diff --git a/src/initializer.tsx b/src/initializer.tsx
index c0e8407e..0927d7ab 100644
--- a/src/initializer.tsx
+++ b/src/initializer.tsx
@@ -34,6 +34,10 @@ import { platform } from "./Platform";
 import { isFailure } from "./utils/fetch";
 import { initializeWidget } from "./widget";
 import { enableExtendedLivekitLogs } from "./settings/settings.ts";
+import {
+  type AnalyticsConfig,
+  PosthogAnalytics,
+} from "./analytics/PosthogAnalytics.ts";
 import { i18n } from "./utils/i18n.ts";
 
 // This generates a map of locale names to their URL (based on import.meta.url), which looks like this:
@@ -98,6 +102,36 @@ const Backend = {
   },
 } satisfies BackendModule;
 
+/**
+ * Where analytics reporting is configured from.
+ *
+ * Note the two halves are decided differently, and deliberately so. *Where the
+ * PostHog credentials come from* depends on the package: an embedder passes
+ * them in through the URL because it is responsible for its own users'
+ * telemetry, whereas a standalone deployment is configured by whoever operates
+ * it. *Who owns the user's analytics identity*, on the other hand, depends on
+ * how Element Call is actually running right now — the full package can be used
+ * as a widget too.
+ */
+// Exported for testing
+export function analyticsConfigFromEnvironment(): AnalyticsConfig {
+  const { posthogApiKey, posthogApiHost, posthogUserId, isWidget } =
+    getUrlParams();
+  return {
+    matrixBackend: isWidget ? "embedded" : "jssdk",
+    hostAnalyticsId: posthogUserId,
+    ...(import.meta.env.VITE_PACKAGE === "embedded"
+      ? {
+          apiKey: posthogApiKey ?? undefined,
+          apiHost: posthogApiHost ?? undefined,
+        }
+      : {
+          apiKey: Config.get().posthog?.api_key,
+          apiHost: Config.get().posthog?.api_host,
+        }),
+  };
+}
+
 enum LoadState {
   None,
   Loading,
@@ -241,6 +275,7 @@ export class Initializer {
       Config.init().then(
         () => {
           seedSettingsFromConfig(Config.get().media_quality);
+          PosthogAnalytics.configure(analyticsConfigFromEnvironment());
           this.loadStates.config = LoadState.Loaded;
           this.initStep(resolve);
         },

From f6f47ede62bda74609ff96860760c1223a6e2b75 Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Wed, 2 Sep 2026 15:14:10 +0200
Subject: [PATCH 016/154] Let a host supply Element Call's client
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ClientProvider found its own client: from the widget API, or by restoring
or creating a session. A host that embeds Element Call already has one,
and owns the user's session, so accept it as a prop and skip all of that.

A supplied client seeds the state synchronously, since there is no session
of ours to restore and so nothing to wait for.

Also guard the broadcast that shuts down other instances of the app. It
protects Element Call's own session and crypto stores, which is why it was
already skipped in widget mode — a host's client has the same property, so
without this an embedded Element Call would close down the user's other
tabs on mount.

Adds the first tests for ClientContext, covering both
---
 src/ClientContext.test.tsx | 69 ++++++++++++++++++++++++++++++++++++++
 src/ClientContext.tsx      | 33 ++++++++++++++----
 2 files changed, 95 insertions(+), 7 deletions(-)
 create mode 100644 src/ClientContext.test.tsx

diff --git a/src/ClientContext.test.tsx b/src/ClientContext.test.tsx
new file mode 100644
index 00000000..909635d8
--- /dev/null
+++ b/src/ClientContext.test.tsx
@@ -0,0 +1,69 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, test, vi } from "vitest";
+import { render } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import { type MatrixClient } from "matrix-js-sdk";
+import { type FC } from "react";
+
+import { ClientProvider, useClientState } from "./ClientContext";
+
+const mockClient = (): MatrixClient =>
+  ({
+    on: vi.fn(),
+    removeListener: vi.fn(),
+    getUserId: () => "@alice:example.org",
+    getDeviceId: () => "AAAA",
+    stopClient: vi.fn(),
+  }) as Partial<MatrixClient> as MatrixClient;
+
+/** Reports what the context says, so a test can assert on it. */
+const ShowClientState: FC = () => {
+  const state = useClientState();
+  if (state === undefined) return <span>loading</span>;
+  if (state.state === "error") return <span>error</span>;
+  return (
+    <span>{state.authenticated?.client.getUserId() ?? "unauthenticated"}</span>
+  );
+};
+
+test("uses a client supplied by the host without waiting", () => {
+  const client = mockClient();
+
+  const { container } = render(
+    <BrowserRouter>
+      <ClientProvider client={client}>
+        <ShowClientState />
+      </ClientProvider>
+    </BrowserRouter>,
+  );
+
+  // Available on the very first render: a supplied client needs no session
+  // restoring, so there is no loading state to pass through.
+  expect(container.textContent).toBe("@alice:example.org");
+});
+
+test("does not claim exclusive use of storage when given a client", () => {
+  // The channel is created when the module loads, so spy on the prototype
+  // rather than trying to replace the global.
+  const postMessage = vi.spyOn(BroadcastChannel.prototype, "postMessage");
+
+  render(
+    <BrowserRouter>
+      <ClientProvider client={mockClient()}>
+        <ShowClientState />
+      </ClientProvider>
+    </BrowserRouter>,
+  );
+
+  // The broadcast shuts down other instances to protect Element Call's own
+  // stores. A host's client brings its own, so there is nothing to protect.
+  expect(postMessage).not.toHaveBeenCalled();
+
+  postMessage.mockRestore();
+});
diff --git a/src/ClientContext.tsx b/src/ClientContext.tsx
index a0d65e64..6ad017f1 100644
--- a/src/ClientContext.tsx
+++ b/src/ClientContext.tsx
@@ -134,19 +134,36 @@ const loadChannel =
 
 interface Props {
   children: JSX.Element;
+  /**
+   * The client Element Call should use.
+   *
+   * When a host embeds Element Call it already has a client, and owns the
+   * user's session; supplying it here means Element Call neither authenticates
+   * anyone nor manages their session. Left out, Element Call finds a client
+   * itself — from the widget API, or by restoring or creating a session of its
+   * own.
+   */
+  client?: MatrixClient;
 }
 
-export const ClientProvider: FC<Props> = ({ children }) => {
+export const ClientProvider: FC<Props> = ({ children, client }) => {
   const navigate = useNavigate();
   const hostBridge = useHostBridge();
 
   // null = signed out, undefined = loading
   const [initClientState, setInitClientState] = useState<
     InitResult | null | undefined
-  >(undefined);
+  >(
+    client === undefined
+      ? undefined
+      : // A supplied client belongs to the host, so there is no session of ours
+        // to restore and nothing to wait for.
+        { client, passwordlessUser: false },
+  );
 
   const initializing = useRef(false);
   useEffect(() => {
+    if (client !== undefined) return;
     // In case the component is mounted, unmounted, and remounted quickly (as
     // React does in strict mode), we need to make sure not to doubly initialize
     // the client.
@@ -161,7 +178,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
       })
       .catch((err) => logger.error(err))
       .finally(() => (initializing.current = false));
-  }, []);
+  }, [client]);
 
   const changePassword = useCallback(
     async (password: string) => {
@@ -228,11 +245,13 @@ export const ClientProvider: FC<Props> = ({ children }) => {
 
   // To protect against multiple sessions writing to the same storage
   // simultaneously, we send a broadcast message that shuts down all other
-  // running instances of the app. This isn't necessary if the app is running in
-  // a widget though, since then it'll be mostly stateless.
+  // running instances of the app. Element Call only has storage of its own to
+  // protect when it created the session itself; given a client, or running as a
+  // widget, it is mostly stateless.
+  const ownsSession = client === undefined && widget === null;
   useEffect(() => {
-    if (!widget) loadChannel?.postMessage({});
-  }, []);
+    if (ownsSession) loadChannel?.postMessage({});
+  }, [ownsSession]);
 
   const [alreadyOpenedErr, setAlreadyOpenedErr] = useState<Error | undefined>(
     undefined,

From 182be8676d06df99256efda7414542d9efbca490 Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Wed, 2 Sep 2026 16:56:09 +0200
Subject: [PATCH 017/154] Return the widget from initializeWidget instead of
 assigning a global

Element Call reached the widget API through a mutable module-level
binding, which every consumer imported directly. Nothing outside the app
shell needs it any more, so hand it back from initializeWidget and thread
it through: the initializer returns it, main passes it to App, and App
uses it to build the host bridge and to await the client the host is
lending us.

ClientContext's loadClient is now only about restoring or creating a
session of Element Call's own, since a widget's client arrives as a prop
like any other host's would.

Also fixes an early return added in the previous commit, which skipped
starting the analytics settings listener when a client was supplied. That
was harmless until now, but would have stopped analytics following the
user's choices in widget mode.

sdk/main.ts asked the host to close by hand; it now uses the bridge, which
also stops the transport as the app does.
---
 sdk/main.ts           | 26 ++++++++-----------
 src/App.tsx           | 59 ++++++++++++++++++++++++++++---------------
 src/ClientContext.tsx | 32 +++++++++++------------
 src/initializer.tsx   |  8 +++---
 src/main.tsx          |  3 ++-
 src/widget.test.ts    |  4 +--
 src/widget.ts         | 24 +++++++++---------
 7 files changed, 84 insertions(+), 72 deletions(-)

diff --git a/sdk/main.ts b/sdk/main.ts
index de15a575..4a7926a1 100644
--- a/sdk/main.ts
+++ b/sdk/main.ts
@@ -54,11 +54,7 @@ import { MediaDevices } from "../src/state/MediaDevices";
 import { E2eeType } from "../src/e2ee/e2eeType";
 import { currentAndPrev, TEXT_LK_TOPIC, tryMakeSticky } from "./helper";
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
-import {
-  ElementWidgetActions,
-  widget as _widget,
-  initializeWidget,
-} from "../src/widget";
+import { initializeWidget } from "../src/widget";
 import { type Connection } from "../src/state/CallViewModel/remoteMembers/Connection";
 import { createWidgetHostBridge } from "../src/HostBridge";
 
@@ -110,8 +106,7 @@ export async function createMatrixRTCSdk(
   const scope = new ObservableScope();
 
   // widget client
-  initializeWidget(application, true);
-  const widget = _widget;
+  const widget = initializeWidget(application, true);
   if (!widget) throw Error("No widget. This webapp can only start as a widget");
   const client = await widget.client;
   const hostBridge = createWidgetHostBridge(widget);
@@ -294,18 +289,17 @@ export async function createMatrixRTCSdk(
       });
       await leaveResolver.promise;
       logger.info("send Unstick");
-      await widget.api
+      await hostBridge
         .setAlwaysOnScreen(false)
-        .catch((e) =>
-          logger.error(
-            "Failed to set call widget `alwaysOnScreen` to false",
-            e,
-          ),
+        .catch((e: unknown) =>
+          logger.error("Failed to set `alwaysOnScreen` to false", e),
         );
       logger.info("send Close");
-      await widget.api.transport
-        .send(ElementWidgetActions.Close, {})
-        .catch((e) => logger.error("Failed to send close action", e));
+      await hostBridge
+        .close?.()
+        .catch((e: unknown) =>
+          logger.error("Failed to ask the host to close", e),
+        );
     };
 
     // schedule close first and then leave (scope.end)
diff --git a/src/App.tsx b/src/App.tsx
index 1d51f959..8d272989 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,6 +10,7 @@ import { BrowserRouter, Route, useLocation, Routes } from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/lib/logger";
+import { type MatrixClient } from "matrix-js-sdk";
 import { I18nextProvider } from "react-i18next";
 
 import { HomePage } from "./home/HomePage";
@@ -19,7 +20,7 @@ import { RoomPage } from "./room/RoomPage";
 import { ClientProvider } from "./ClientContext";
 import { ErrorPage, LoadingPage } from "./FullScreenView";
 import { Initializer } from "./initializer";
-import { widget } from "./widget";
+import { type WidgetHelpers } from "./widget";
 import { useTheme } from "./useTheme";
 import { ProcessorProvider } from "./livekit/TrackProcessorContext";
 import { type AppViewModel } from "./state/AppViewModel";
@@ -81,9 +82,11 @@ const MaybeAppBar: FC<SimpleProviderProps> = ({ children }) => {
 
 interface Props {
   vm: AppViewModel;
+  /** A point of access to the widget API, if running as a widget. */
+  widget: WidgetHelpers | null;
 }
 
-export const App: FC<Props> = ({ vm }) => {
+export const App: FC<Props> = ({ vm, widget }) => {
   // The standalone build has no host; the widget build's host is the client it
   // is a widget of.
   const hostBridge = useInitial(() =>
@@ -100,26 +103,40 @@ export const App: FC<Props> = ({ vm }) => {
       .catch(logger.error);
   });
 
-  const content = loaded ? (
-    <ClientProvider>
-      <MediaDevicesContext value={vm.mediaDevices}>
-        <ProcessorProvider>
-          <Sentry.ErrorBoundary
-            fallback={(error) => <ErrorPage error={error} />}
-          >
-            <Routes>
-              <SentryRoute path="/" element={<HomePage />} />
-              <SentryRoute path="/login" element={<LoginPage />} />
-              <SentryRoute path="/register" element={<RegisterPage />} />
-              <SentryRoute path="*" element={<RoomPage />} />
-            </Routes>
-          </Sentry.ErrorBoundary>
-        </ProcessorProvider>
-      </MediaDevicesContext>
-    </ClientProvider>
-  ) : (
-    <LoadingPage />
+  // As a widget, the client comes from the host over the widget API. Standalone,
+  // Element Call finds one itself, so there is nothing to wait for here.
+  const [widgetClient, setWidgetClient] = useState<MatrixClient | undefined>(
+    undefined,
   );
+  useEffect(() => {
+    if (widget === null) return;
+    widget.client
+      .then(setWidgetClient)
+      .catch((e) => logger.error("Failed to obtain the host's client", e));
+  }, [widget]);
+  const clientReady = widget === null || widgetClient !== undefined;
+
+  const content =
+    loaded && clientReady ? (
+      <ClientProvider client={widgetClient}>
+        <MediaDevicesContext value={vm.mediaDevices}>
+          <ProcessorProvider>
+            <Sentry.ErrorBoundary
+              fallback={(error) => <ErrorPage error={error} />}
+            >
+              <Routes>
+                <SentryRoute path="/" element={<HomePage />} />
+                <SentryRoute path="/login" element={<LoginPage />} />
+                <SentryRoute path="/register" element={<RegisterPage />} />
+                <SentryRoute path="*" element={<RoomPage />} />
+              </Routes>
+            </Sentry.ErrorBoundary>
+          </ProcessorProvider>
+        </MediaDevicesContext>
+      </ClientProvider>
+    ) : (
+      <LoadingPage />
+    );
 
   return (
     <I18nextProvider i18n={i18n}>
diff --git a/src/ClientContext.tsx b/src/ClientContext.tsx
index 6ad017f1..388beb8b 100644
--- a/src/ClientContext.tsx
+++ b/src/ClientContext.tsx
@@ -22,7 +22,6 @@ import { type ISyncStateData, type SyncState } from "matrix-js-sdk/lib/sync";
 import { ClientEvent, type MatrixClient } from "matrix-js-sdk";
 
 import { ErrorPage } from "./FullScreenView";
-import { widget } from "./widget";
 import { useHostBridge } from "./HostBridge";
 import {
   PosthogAnalytics,
@@ -163,7 +162,12 @@ export const ClientProvider: FC<Props> = ({ children, client }) => {
 
   const initializing = useRef(false);
   useEffect(() => {
-    if (client !== undefined) return;
+    if (client !== undefined) {
+      // Nothing to load, but analytics still need to follow the user's choices.
+      if (PosthogAnalytics.instance.isEnabled())
+        PosthogAnalytics.instance.startListeningToSettingsChanges();
+      return;
+    }
     // In case the component is mounted, unmounted, and remounted quickly (as
     // React does in strict mode), we need to make sure not to doubly initialize
     // the client.
@@ -246,9 +250,9 @@ export const ClientProvider: FC<Props> = ({ children, client }) => {
   // To protect against multiple sessions writing to the same storage
   // simultaneously, we send a broadcast message that shuts down all other
   // running instances of the app. Element Call only has storage of its own to
-  // protect when it created the session itself; given a client, or running as a
-  // widget, it is mostly stateless.
-  const ownsSession = client === undefined && widget === null;
+  // protect when it created the session itself; given a client — by a host, or
+  // over the widget API — it is mostly stateless.
+  const ownsSession = client === undefined;
   useEffect(() => {
     if (ownsSession) loadChannel?.postMessage({});
   }, [ownsSession]);
@@ -349,19 +353,13 @@ export type InitResult = {
   passwordlessUser: boolean;
 };
 
+/**
+ * Restores or creates a session of Element Call's own. Only reached when no
+ * client was supplied for it to use.
+ */
 async function loadClient(): Promise<InitResult | null> {
-  if (widget) {
-    // We're inside a widget, so let's engage *matryoshka mode*
-    logger.log("Using a matryoshka client");
-    const client = await widget.client;
-    return {
-      client,
-      passwordlessUser: false,
-    };
-  } else {
-    const { initSPA } = await import("./utils/spa");
-    return initSPA(loadSession, clearSession);
-  }
+  const { initSPA } = await import("./utils/spa");
+  return initSPA(loadSession, clearSession);
 }
 
 export interface Session {
diff --git a/src/initializer.tsx b/src/initializer.tsx
index 0927d7ab..ee3ee9bd 100644
--- a/src/initializer.tsx
+++ b/src/initializer.tsx
@@ -32,7 +32,7 @@ import { Config } from "./config/Config";
 import { seedSettingsFromConfig } from "./settings/settings";
 import { platform } from "./Platform";
 import { isFailure } from "./utils/fetch";
-import { initializeWidget } from "./widget";
+import { initializeWidget, type WidgetHelpers } from "./widget";
 import { enableExtendedLivekitLogs } from "./settings/settings.ts";
 import {
   type AnalyticsConfig,
@@ -155,8 +155,8 @@ export class Initializer {
     return !!Initializer.internalInstance?.isInitialized;
   }
 
-  public static async initBeforeReact(): Promise<void> {
-    initializeWidget();
+  public static async initBeforeReact(): Promise<WidgetHelpers | null> {
+    const widget = initializeWidget();
 
     const polyfills: Promise<unknown>[] = [];
     if (shouldPolyfillSegmenter()) {
@@ -243,6 +243,8 @@ export class Initializer {
     });
 
     window.setLKLogLevel = setLKLogLevel;
+
+    return widget;
   }
 
   public static init(): Promise<void> | null {
diff --git a/src/main.tsx b/src/main.tsx
index 03c74c94..b2f79f34 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -49,7 +49,7 @@ if (fatalError !== null) {
 }
 
 Initializer.initBeforeReact()
-  .then(() => {
+  .then((widget) => {
     const { controlledAudioDevices, callIntent } = getUrlParams();
     root.render(
       <StrictMode>
@@ -60,6 +60,7 @@ Initializer.initBeforeReact()
               callIntent,
             })
           }
+          widget={widget}
         />
       </StrictMode>,
     );
diff --git a/src/widget.test.ts b/src/widget.test.ts
index 3618fb50..c645c3b3 100644
--- a/src/widget.test.ts
+++ b/src/widget.test.ts
@@ -9,7 +9,7 @@ import { describe, expect, vi, it, beforeEach } from "vitest";
 import { createRoomWidgetClient, EventType } from "matrix-js-sdk";
 
 import { getUrlParams } from "./UrlParams";
-import { initializeWidget, widget } from "./widget";
+import { initializeWidget } from "./widget";
 import { Config } from "./config/Config";
 import { ElementCallReactionEventType } from "./reactions";
 
@@ -42,7 +42,7 @@ beforeEach(() => {
 
 describe("widget", () => {
   it("should create an embedded client with the correct params", () => {
-    initializeWidget("ANYRTCAPP");
+    const widget = initializeWidget("ANYRTCAPP");
 
     expect(getUrlParams()).toStrictEqual({
       widgetId: "id",
diff --git a/src/widget.ts b/src/widget.ts
index af6f28b6..b35e335b 100644
--- a/src/widget.ts
+++ b/src/widget.ts
@@ -58,21 +58,21 @@ export interface WidgetHelpers {
 }
 
 /**
- * A point of access to the widget API, if the app is running as a widget. This
- * is initialized with `initializeWidget`. This should happen at the top level because the widget messaging
- * needs to be set up ASAP on load to ensure it doesn't miss any requests.
- */
-export let widget: WidgetHelpers | null = null;
-
-/**
- * Should be called as soon as possible on app start. (In the initilizer before react)
+ * Connects to the widget API, if Element Call is running as a widget.
+ *
+ * Should be called as soon as possible on app start (in the initializer, before
+ * React), because the widget messaging needs to be set up ASAP on load to
+ * ensure it doesn't miss any requests.
+ *
+ * @returns A point of access to the widget API, or null if Element Call is not
+ *   running as a widget.
  */
 // this needs to be a seperate call and cannot be done on import to allow us to spy on methods in here before
 // execution.
 export const initializeWidget = (
   rtcApplication: string = "m.call",
   sendRoomEvents = false,
-): void => {
+): WidgetHelpers | null => {
   try {
     const {
       widgetId,
@@ -202,14 +202,14 @@ export const initializeWidget = (
         return client;
       };
 
-      widget = { api, lazyActions, client: clientPromise() };
+      return { api, lazyActions, client: clientPromise() };
     } else {
       if (import.meta.env.MODE !== "test")
         logger.info("No widget API available");
-      widget = null;
+      return null;
     }
   } catch (e) {
     logger.warn("Continuing without the widget API", e);
-    widget = null;
+    return null;
   }
 };

From 6b5f396e1ebb3a6476bc182c090aa5af7c8a4cf9 Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Wed, 2 Sep 2026 19:26:33 +0200
Subject: [PATCH 018/154] Share the mapping from parameters to call view model
 options
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The SDK stopped sending join notifications: it threaded callIntent into
createCallViewModel$ but not its pair sendNotificationType, which
enterRTCSession used to read for itself, so an explicit
?sendNotificationType=ring — or an intent that implies one — no longer
reached joinRTCSession.

The mechanism is worth fixing rather than the instance. The defaults on
CallViewModelOptions describe a standalone Element Call, so a widget
caller that misses a field gets standalone behaviour rather than an error,
and the SDK is only ever a widget. Give both callers one shared mapping so
they cannot drift, and cover the whole chain from URL to options in tests.

autoLeaveWhenOthersLeft and waitForCallPickup stay out of it: the view
model never read those from the parameters, so enabling them for the SDK
would be a change in its behaviour rather than a fix.
---
 sdk/main.ts                                   | 11 +++--
 src/room/InCallView.tsx                       | 20 ++-------
 src/state/CallViewModel/CallViewModel.test.ts | 44 +++++++++++++++++--
 src/state/CallViewModel/CallViewModel.ts      | 36 ++++++++++++++-
 4 files changed, 87 insertions(+), 24 deletions(-)

diff --git a/sdk/main.ts b/sdk/main.ts
index 4a7926a1..6347d142 100644
--- a/sdk/main.ts
+++ b/sdk/main.ts
@@ -46,7 +46,10 @@ import {
 // Can this be done in the tsconfig.json
 import { type TextStreamInfo } from "../node_modules/livekit-client/dist/src/room/types";
 import { type Behavior, constant } from "../src/state/Behavior";
-import { createCallViewModel$ } from "../src/state/CallViewModel/CallViewModel";
+import {
+  callViewModelOptionsFromParams,
+  createCallViewModel$,
+} from "../src/state/CallViewModel/CallViewModel";
 import { ObservableScope } from "../src/state/ObservableScope";
 import { getUrlParams } from "../src/UrlParams";
 import { MuteStates } from "../src/state/MuteStates";
@@ -113,7 +116,8 @@ export async function createMatrixRTCSdk(
   logger.info("client created");
 
   // url params
-  const { roomId, controlledAudioDevices, callIntent } = getUrlParams();
+  const urlParams = getUrlParams();
+  const { roomId, controlledAudioDevices, callIntent } = urlParams;
   if (roomId === null) throw Error("could not get roomId from url params");
   const room = client.getRoom(roomId);
   if (room === null) throw Error("could not get room from client");
@@ -144,10 +148,9 @@ export async function createMatrixRTCSdk(
     mediaDevices,
     muteStates,
     {
+      ...callViewModelOptionsFromParams(urlParams),
       encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
       hostBridge,
-      controlledAudioDevices,
-      callIntent,
     },
     of({}),
     of({}),
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index ef1e1f98..97fb7543 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -41,6 +41,7 @@ import { type MatrixInfo } from "./VideoPreview";
 import { InviteButton } from "../button/InviteButton";
 import {
   type CallViewModel,
+  callViewModelOptionsFromParams,
   createCallViewModel$,
 } from "../state/CallViewModel/CallViewModel.ts";
 import { Grid, type TileProps } from "../grid/Grid";
@@ -123,16 +124,8 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     rootLogger.info("START CALL VIEW SCOPE");
     const scope = new ObservableScope();
     const reactionsReader = new ReactionsReader(scope, props.rtcSession);
-    const {
-      autoLeaveWhenOthersLeft,
-      waitForCallPickup,
-      sendNotificationType,
-      controlledAudioDevices,
-      header,
-      showControls,
-      hideScreensharing,
-      callIntent,
-    } = urlParams;
+    const { autoLeaveWhenOthersLeft, waitForCallPickup, sendNotificationType } =
+      urlParams;
 
     const vm = createCallViewModel$(
       scope,
@@ -141,17 +134,12 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
       mediaDevices,
       props.muteStates,
       {
+        ...callViewModelOptionsFromParams(urlParams),
         encryptionSystem: props.e2eeSystem,
         hostBridge,
         autoLeaveWhenOthersLeft,
         waitForCallPickup: waitForCallPickup && sendNotificationType === "ring",
         matrixRTCMode$: matrixRTCModeSetting.value$,
-        controlledAudioDevices,
-        header,
-        showControls,
-        hideScreensharing,
-        sendNotificationType,
-        callIntent,
       },
       reactionsReader.raisedHands$,
       reactionsReader.reactions$,
diff --git a/src/state/CallViewModel/CallViewModel.test.ts b/src/state/CallViewModel/CallViewModel.test.ts
index 7a27fd3e..c7783d15 100644
--- a/src/state/CallViewModel/CallViewModel.test.ts
+++ b/src/state/CallViewModel/CallViewModel.test.ts
@@ -68,6 +68,8 @@ import {
 } from "./CallViewModelTestUtils.ts";
 import { MatrixRTCMode } from "../../config/ConfigOptions.ts";
 import { initializeWidget } from "../../widget.ts";
+import { computeUrlParams } from "../../UrlParams.ts";
+import { callViewModelOptionsFromParams } from "./CallViewModel.ts";
 
 initializeWidget();
 
@@ -83,9 +85,6 @@ vi.mock("livekit-client/e2ee-worker?worker");
 
 vi.mock("../e2ee/matrixKeyProvider");
 
-const getUrlParams = vi.hoisted(() => vi.fn(() => ({})));
-vi.mock("../UrlParams", () => ({ getUrlParams }));
-
 const getPlatform = vi.hoisted(() => vi.fn(() => "desktop"));
 vi.mock("../../Platform", () => ({
   get platform(): string {
@@ -1701,3 +1700,42 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
     });
   });
 });
+
+describe("callViewModelOptionsFromParams", () => {
+  // The defaults on CallViewModelOptions describe a standalone Element Call, so
+  // a widget caller that drops one of these gets standalone behaviour rather
+  // than an error. These check the whole chain from URL to options, which is
+  // where that went wrong for the SDK.
+  const widgetUrl = (extra: string): string =>
+    `#?widgetId=id&parentUrl=${encodeURIComponent("http://parent")}&${extra}`;
+
+  it("carries an explicitly requested notification type", () => {
+    const params = computeUrlParams("", widgetUrl("sendNotificationType=ring"));
+    expect(callViewModelOptionsFromParams(params).sendNotificationType).toBe(
+      "ring",
+    );
+  });
+
+  it("carries the notification type an intent implies", () => {
+    const params = computeUrlParams("", widgetUrl("intent=start_call_dm"));
+    expect(callViewModelOptionsFromParams(params).sendNotificationType).toBe(
+      "ring",
+    );
+  });
+
+  it("carries hideScreensharing", () => {
+    const params = computeUrlParams("", widgetUrl("hideScreensharing=true"));
+    expect(callViewModelOptionsFromParams(params).hideScreensharing).toBe(true);
+  });
+
+  it("carries controlledAudioDevices and the call intent", () => {
+    const params = computeUrlParams(
+      "",
+      widgetUrl("controlledAudioDevices=true&intent=start_call_voice"),
+    );
+    expect(callViewModelOptionsFromParams(params)).toMatchObject({
+      controlledAudioDevices: true,
+      callIntent: "audio",
+    });
+  });
+});
diff --git a/src/state/CallViewModel/CallViewModel.ts b/src/state/CallViewModel/CallViewModel.ts
index b40a4523..85ba2757 100644
--- a/src/state/CallViewModel/CallViewModel.ts
+++ b/src/state/CallViewModel/CallViewModel.ts
@@ -86,7 +86,7 @@ import { constant, type Behavior } from "../Behavior";
 import { E2eeType } from "../../e2ee/e2eeType";
 import { MatrixKeyProvider } from "../../e2ee/matrixKeyProvider";
 import { type MuteStates } from "../MuteStates";
-import { HeaderStyle } from "../../UrlParams";
+import { HeaderStyle, type UrlParams } from "../../UrlParams";
 import { type ProcessorState } from "../../livekit/TrackProcessorContext";
 import { type HostBridge, nullHostBridge } from "../../HostBridge";
 import {
@@ -216,6 +216,40 @@ export interface CallViewModelOptions {
   toggleScreensharing?: () => void;
 }
 
+/**
+ * The options {@link createCallViewModel$} takes from the parameters Element
+ * Call was started with.
+ *
+ * Callers share this rather than picking the fields out themselves. The
+ * defaults on {@link CallViewModelOptions} describe a standalone Element Call,
+ * so a widget or embedded caller that misses one does not get an error — it
+ * quietly gets standalone behaviour instead.
+ *
+ * Note `autoLeaveWhenOthersLeft` and `waitForCallPickup` are deliberately not
+ * here: unlike these, the view model never read them from the parameters
+ * itself, so they remain the caller's decision.
+ */
+export function callViewModelOptionsFromParams(
+  params: UrlParams,
+): Pick<
+  CallViewModelOptions,
+  | "controlledAudioDevices"
+  | "header"
+  | "showControls"
+  | "hideScreensharing"
+  | "sendNotificationType"
+  | "callIntent"
+> {
+  return {
+    controlledAudioDevices: params.controlledAudioDevices,
+    header: params.header,
+    showControls: params.showControls,
+    hideScreensharing: params.hideScreensharing,
+    sendNotificationType: params.sendNotificationType,
+    callIntent: params.callIntent,
+  };
+}
+
 // Do not play any sounds if the participant count has exceeded this
 // number.
 export const MAX_PARTICIPANT_COUNT_FOR_SOUND = 8;

From c807b8ef7d20f37aa86eb1aa1c110d73eef12ad0 Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Wed, 2 Sep 2026 19:26:59 +0200
Subject: [PATCH 019/154] Always stop the widget transport when closing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

close() sent io.element.close and then stopped the transport, so a
rejected send skipped the stop. Both call sites this replaced stopped it
unconditionally — ErrorView in a finally, GroupCallView outside its
try/catch — because a host that never acknowledges the request would
otherwise leave the messaging live and the close button doing nothing.

Restore that with a finally.
---
 src/HostBridge.test.ts | 32 +++++++++++++++++++++++++++++++-
 src/HostBridge.ts      | 10 ++++++++--
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/HostBridge.test.ts b/src/HostBridge.test.ts
index 2ddee989..e93fcfb1 100644
--- a/src/HostBridge.test.ts
+++ b/src/HostBridge.test.ts
@@ -10,7 +10,7 @@ import { type WidgetApi } from "matrix-widget-api";
 import EventEmitter from "events";
 
 import { createWidgetHostBridge, nullHostBridge } from "./HostBridge";
-import { type WidgetHelpers } from "./widget";
+import { ElementWidgetActions, type WidgetHelpers } from "./widget";
 
 function mockWidget(api: Partial<WidgetApi>): WidgetHelpers {
   return {
@@ -60,6 +60,36 @@ describe("createWidgetHostBridge", () => {
     });
   });
 
+  describe("close", () => {
+    test("asks the host to close, then stops the transport", async () => {
+      const transport = {
+        send: vi.fn().mockResolvedValue(undefined),
+        stop: vi.fn(),
+      };
+      const bridge = createWidgetHostBridge(mockWidget({ transport } as never));
+
+      await bridge.close!();
+
+      expect(transport.send).toHaveBeenCalledWith(
+        ElementWidgetActions.Close,
+        {},
+      );
+      expect(transport.stop).toHaveBeenCalledOnce();
+    });
+
+    test("stops the transport even when the host refuses to close", async () => {
+      const transport = {
+        send: vi.fn().mockRejectedValue(new Error("no")),
+        stop: vi.fn(),
+      };
+      const bridge = createWidgetHostBridge(mockWidget({ transport } as never));
+
+      // Leaving the messaging live would leave the close affordance dead
+      await expect(bridge.close!()).rejects.toThrow("no");
+      expect(transport.stop).toHaveBeenCalledOnce();
+    });
+  });
+
   describe("supportsReactions", () => {
     const capabilities = [
       "org.matrix.msc2762.send.event:m.reaction",
diff --git a/src/HostBridge.ts b/src/HostBridge.ts
index f31b5a4a..bb078672 100644
--- a/src/HostBridge.ts
+++ b/src/HostBridge.ts
@@ -163,8 +163,14 @@ export function createWidgetHostBridge(widget: WidgetHelpers): HostBridge {
     notifyDeviceMute: async (state) =>
       send(ElementWidgetActions.DeviceMute, state),
     close: async () => {
-      await send(ElementWidgetActions.Close);
-      widget.api.transport.stop();
+      try {
+        await send(ElementWidgetActions.Close);
+      } finally {
+        // Stop regardless of whether the host acknowledged the request. A host
+        // that rejects or never answers would otherwise leave the messaging
+        // live, and the close affordance doing nothing at all.
+        widget.api.transport.stop();
+      }
     },
     themeChange$: requests(WidgetApiToWidgetAction.ThemeChange),
     join$: requests(ElementWidgetActions.JoinCall),

From b7efa02adcc3bc9de04716842050435b6d3bb5a8 Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Wed, 2 Sep 2026 19:27:44 +0200
Subject: [PATCH 020/154] review: Follow a swapped client

---
 src/ClientContext.test.tsx | 29 +++++++++++++++++++++++++++--
 src/ClientContext.tsx      |  9 ++++++++-
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/ClientContext.test.tsx b/src/ClientContext.test.tsx
index 909635d8..d279a87e 100644
--- a/src/ClientContext.test.tsx
+++ b/src/ClientContext.test.tsx
@@ -13,11 +13,11 @@ import { type FC } from "react";
 
 import { ClientProvider, useClientState } from "./ClientContext";
 
-const mockClient = (): MatrixClient =>
+const mockClient = (userId = "@alice:example.org"): MatrixClient =>
   ({
     on: vi.fn(),
     removeListener: vi.fn(),
-    getUserId: () => "@alice:example.org",
+    getUserId: () => userId,
     getDeviceId: () => "AAAA",
     stopClient: vi.fn(),
   }) as Partial<MatrixClient> as MatrixClient;
@@ -67,3 +67,28 @@ test("does not claim exclusive use of storage when given a client", () => {
 
   postMessage.mockRestore();
 });
+
+test("follows the client when the host swaps it", () => {
+  const first = mockClient();
+  const second = mockClient("@bob:example.org");
+
+  const { container, rerender } = render(
+    <BrowserRouter>
+      <ClientProvider client={first}>
+        <ShowClientState />
+      </ClientProvider>
+    </BrowserRouter>,
+  );
+  expect(container.textContent).toBe("@alice:example.org");
+
+  // A host that re-authenticates hands us a new client on a mounted component
+  rerender(
+    <BrowserRouter>
+      <ClientProvider client={second}>
+        <ShowClientState />
+      </ClientProvider>
+    </BrowserRouter>,
+  );
+
+  expect(container.textContent).toBe("@bob:example.org");
+});
diff --git a/src/ClientContext.tsx b/src/ClientContext.tsx
index 388beb8b..ced48d44 100644
--- a/src/ClientContext.tsx
+++ b/src/ClientContext.tsx
@@ -163,7 +163,14 @@ export const ClientProvider: FC<Props> = ({ children, client }) => {
   const initializing = useRef(false);
   useEffect(() => {
     if (client !== undefined) {
-      // Nothing to load, but analytics still need to follow the user's choices.
+      // Nothing to load, but a host may hand us a different client later — on
+      // re-authenticating, say — so follow whichever one it has given us.
+      setInitClientState((current) =>
+        current?.client === client
+          ? current
+          : { client, passwordlessUser: false },
+      );
+      // Analytics still need to follow the user's choices.
       if (PosthogAnalytics.instance.isEnabled())
         PosthogAnalytics.instance.startListeningToSettingsChanges();
       return;

From e68d1d1b5fe819b96b3db1452bfe74f107881d36 Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Wed, 2 Sep 2026 19:28:14 +0200
Subject: [PATCH 021/154] Say what the root element seam cannot do yet

RootElementContext's documentation promised that Element Call confines its
decoration to the given element, but several selectors still name body
directly and the initializer writes data-platform onto it. A non-body root
is decorated correctly and styled incorrectly, with no error to show for
it, so the documentation should say so until the stylesheets are scoped.
---
 src/RootElementContext.ts | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/RootElementContext.ts b/src/RootElementContext.ts
index b97b1779..b46573d3 100644
--- a/src/RootElementContext.ts
+++ b/src/RootElementContext.ts
@@ -12,9 +12,17 @@ import { createContext, use } from "react";
  *
  * Element Call decorates this element with the theme, layout and background
  * attributes its stylesheets key off, and portals its modals into it. When
- * Element Call owns the page this is simply the document body; when it is
- * embedded in a host application it is the container the host mounted it into,
- * so that Element Call does not reach outside its own subtree.
+ * Element Call owns the page this is simply the document body; the intent is
+ * that when embedded in a host application it becomes the container the host
+ * mounted it into, so that Element Call does not reach outside its own subtree.
+ *
+ * That intent is not yet achievable: several selectors still name `body`
+ * directly — `body[data-background="gradient"]` and `body[data-platform=…]` in
+ * `index.css`, and `body[data-platform="ios"]` in `AppBar.module.css` and
+ * `Modal.module.css` — and `Initializer.initBeforeReact` writes
+ * `data-platform` straight onto the body. So anything other than the body will
+ * be decorated correctly and styled incorrectly, silently. Until those are
+ * scoped, treat this as preparation rather than a working seam.
  */
 const RootElementContext = createContext<HTMLElement | null>(null);
 

From 2db24e28687e4c0b65bf67e799a19ebc4fff02b1 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 2 Sep 2026 18:46:12 +0100
Subject: [PATCH 022/154] Fix periodic rageshake log flush never running

The throttled flush callback returned this.flush instead of calling it
(regressed in #2607), so logs were only persisted to IndexedDB on
rageshake submission or beforeunload. When the host removes the widget
iframe at hangup, the whole call's logs were lost, so a rageshake filed
from a later call carries nothing from the affected one.
---
 src/settings/rageshake.ts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/settings/rageshake.ts b/src/settings/rageshake.ts
index b9ecbff5..8fe759a8 100644
--- a/src/settings/rageshake.ts
+++ b/src/settings/rageshake.ts
@@ -204,10 +204,13 @@ class IndexedDBLogStore {
   // Throttled function to flush logs. We use throttle rather
   // than debounce as we want logs to be written regularly, otherwise
   // if there's a constant stream of logging, we'd never write anything.
-  private throttledFlush = throttle(() => this.flush, MAX_FLUSH_INTERVAL_MS, {
-    leading: false,
-    trailing: true,
-  });
+  private throttledFlush = throttle(
+    () => {
+      this.flush().catch((e) => logger.error("Failed to flush logs", e));
+    },
+    MAX_FLUSH_INTERVAL_MS,
+    { leading: false, trailing: true },
+  );
 
   /**
    * Flush logs to disk.

From 873dfdbfbd77e0d80dfba7d29e35223ee251d336 Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Wed, 2 Sep 2026 19:46:44 +0200
Subject: [PATCH 023/154] Drop the unused root element provider

RootElementProvider was exported but never used: nothing supplies a root
element, so every consumer falls back to the document body. Knip reports
it, which is what is failing CI.

M1 adds a provider back along with the component that mounts Element Call
into a container. Until then there is nothing to provide.
---
 src/RootElementContext.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/RootElementContext.ts b/src/RootElementContext.ts
index b46573d3..d8211c74 100644
--- a/src/RootElementContext.ts
+++ b/src/RootElementContext.ts
@@ -24,10 +24,11 @@ import { createContext, use } from "react";
  * be decorated correctly and styled incorrectly, silently. Until those are
  * scoped, treat this as preparation rather than a working seam.
  */
+// No provider is exported yet: nothing supplies a root element, so every
+// consumer falls back to the document body. M1 adds one along with the
+// component that mounts Element Call into a container.
 const RootElementContext = createContext<HTMLElement | null>(null);
 
-export const RootElementProvider = RootElementContext.Provider;
-
 /**
  * The element Element Call should decorate and portal into.
  *

From 698a98a9c8869ddafc5b2d20f218d2ec58a571c3 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 2 Sep 2026 18:55:18 +0100
Subject: [PATCH 024/154] Test that logs are flushed to IndexedDB periodically

---
 src/settings/rageshake.flush.test.ts | 52 ++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 src/settings/rageshake.flush.test.ts

diff --git a/src/settings/rageshake.flush.test.ts b/src/settings/rageshake.flush.test.ts
new file mode 100644
index 00000000..2bbe120c
--- /dev/null
+++ b/src/settings/rageshake.flush.test.ts
@@ -0,0 +1,52 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { afterEach, expect, it, vi } from "vitest";
+
+import { init as initRageshake } from "./rageshake";
+
+afterEach(() => {
+  vi.useRealTimers();
+  vi.unstubAllGlobals();
+});
+
+it("flushes logs to IndexedDB periodically without an explicit flush", async () => {
+  vi.useFakeTimers();
+  const add = vi.fn();
+  const txn = {
+    oncomplete: undefined as (() => void) | undefined,
+    onerror: undefined,
+    objectStore: (name: string) =>
+      name === "logs"
+        ? {
+            add: (entry: unknown): void => {
+              add(entry);
+              queueMicrotask(() => txn.oncomplete?.());
+            },
+          }
+        : { put: vi.fn() },
+  };
+  const open = (): unknown => {
+    const req = {
+      result: { transaction: () => txn },
+      onsuccess: undefined as (() => void) | undefined,
+    };
+    queueMicrotask(() => req.onsuccess?.());
+    return req;
+  };
+  vi.stubGlobal("indexedDB", { open });
+
+  await initRageshake();
+  global.mx_rage_logger.log(1, "test", "hello from the buffer");
+  expect(add).not.toHaveBeenCalled();
+
+  await vi.advanceTimersByTimeAsync(2000);
+  expect(add).toHaveBeenCalledOnce();
+  expect(add.mock.calls[0][0]).toMatchObject({
+    lines: expect.stringContaining("hello from the buffer"),
+  });
+});

From ebb7fe07b749a935aa5498657dc5e278d0ba96d9 Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Thu, 3 Sep 2026 11:47:35 +0200
Subject: [PATCH 025/154] add more test

---
 src/ClientContext.test.tsx             |  23 +++-
 src/HostBridge.test.ts                 | 161 ++++++++++++++++++++++++-
 src/analytics/PosthogAnalytics.test.ts |  85 +++++++++++++
 src/e2ee/sharedKeyManagement.test.ts   |  36 ++++++
 src/state/MediaDevices.test.ts         |  59 +++++++++
 src/utils/errors.test.ts               |  62 ++++++++++
 6 files changed, 423 insertions(+), 3 deletions(-)
 create mode 100644 src/e2ee/sharedKeyManagement.test.ts
 create mode 100644 src/state/MediaDevices.test.ts
 create mode 100644 src/utils/errors.test.ts

diff --git a/src/ClientContext.test.tsx b/src/ClientContext.test.tsx
index d279a87e..65ff03d0 100644
--- a/src/ClientContext.test.tsx
+++ b/src/ClientContext.test.tsx
@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { expect, test, vi } from "vitest";
-import { render } from "@testing-library/react";
+import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
 import { type MatrixClient } from "matrix-js-sdk";
 import { type FC } from "react";
@@ -92,3 +92,24 @@ test("follows the client when the host swaps it", () => {
 
   expect(container.textContent).toBe("@bob:example.org");
 });
+
+test("finds a client of its own when the host supplies none", async () => {
+  const client = mockClient();
+  vi.doMock("./utils/spa", () => ({
+    initSPA: vi.fn().mockResolvedValue({ client, passwordlessUser: true }),
+  }));
+
+  const { container } = render(
+    <BrowserRouter>
+      <ClientProvider>
+        <ShowClientState />
+      </ClientProvider>
+    </BrowserRouter>,
+  );
+
+  // Nothing to show until a session has been restored or created
+  expect(container.textContent).toBe("loading");
+  await waitFor(() => expect(container.textContent).toBe("@alice:example.org"));
+
+  vi.doUnmock("./utils/spa");
+});
diff --git a/src/HostBridge.test.ts b/src/HostBridge.test.ts
index e93fcfb1..4ab42a13 100644
--- a/src/HostBridge.test.ts
+++ b/src/HostBridge.test.ts
@@ -6,10 +6,16 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { describe, expect, test, vi } from "vitest";
-import { type WidgetApi } from "matrix-widget-api";
+import { type WidgetApi, WidgetApiToWidgetAction } from "matrix-widget-api";
 import EventEmitter from "events";
 
-import { createWidgetHostBridge, nullHostBridge } from "./HostBridge";
+import { type Observable } from "rxjs";
+
+import {
+  createWidgetHostBridge,
+  type HostBridge,
+  nullHostBridge,
+} from "./HostBridge";
 import { ElementWidgetActions, type WidgetHelpers } from "./widget";
 
 function mockWidget(api: Partial<WidgetApi>): WidgetHelpers {
@@ -20,7 +26,158 @@ function mockWidget(api: Partial<WidgetApi>): WidgetHelpers {
   } as unknown as WidgetHelpers;
 }
 
+/** A widget whose transport records what Element Call sends it. */
+function mockTransport(): {
+  send: ReturnType<typeof vi.fn>;
+  reply: ReturnType<typeof vi.fn>;
+  stop: ReturnType<typeof vi.fn>;
+} {
+  return {
+    send: vi.fn().mockResolvedValue(undefined),
+    reply: vi.fn(),
+    stop: vi.fn(),
+  };
+}
+
 describe("createWidgetHostBridge", () => {
+  describe("telling the host what Element Call is doing", () => {
+    test("asks to be kept on screen, and to stop being", async () => {
+      const setAlwaysOnScreen = vi.fn().mockResolvedValue(true);
+      const bridge = createWidgetHostBridge(mockWidget({ setAlwaysOnScreen }));
+
+      await bridge.setAlwaysOnScreen(true);
+      await bridge.setAlwaysOnScreen(false);
+
+      expect(setAlwaysOnScreen).toHaveBeenNthCalledWith(1, true);
+      expect(setAlwaysOnScreen).toHaveBeenNthCalledWith(2, false);
+    });
+
+    test("reports that it has loaded", async () => {
+      const sendContentLoaded = vi.fn().mockResolvedValue(undefined);
+      const bridge = createWidgetHostBridge(mockWidget({ sendContentLoaded }));
+
+      await bridge.contentLoaded();
+
+      expect(sendContentLoaded).toHaveBeenCalledOnce();
+    });
+
+    test.each([
+      ["notifyJoined", ElementWidgetActions.JoinCall, {}],
+      ["notifyHungUp", ElementWidgetActions.HangupCall, {}],
+    ] as const)("sends %s as %s", async (method, action, payload) => {
+      const transport = mockTransport();
+      const bridge = createWidgetHostBridge(mockWidget({ transport } as never));
+
+      await bridge[method]();
+
+      expect(transport.send).toHaveBeenCalledWith(action, payload);
+    });
+
+    test("sends the mute state the host needs to mirror", async () => {
+      const transport = mockTransport();
+      const bridge = createWidgetHostBridge(mockWidget({ transport } as never));
+
+      await bridge.notifyDeviceMute({
+        audio_enabled: true,
+        video_enabled: false,
+      });
+
+      expect(transport.send).toHaveBeenCalledWith(
+        ElementWidgetActions.DeviceMute,
+        { audio_enabled: true, video_enabled: false },
+      );
+    });
+  });
+
+  describe("relaying what the host asks for", () => {
+    /** Emits a widget action the way widget.ts does, and returns the event. */
+    function askHost(
+      widget: WidgetHelpers,
+      action: string,
+      data: unknown,
+    ): CustomEvent {
+      const ev = new CustomEvent(action, { detail: { action, data } });
+      widget.lazyActions.emit(action, ev);
+      return ev;
+    }
+
+    // Selectors rather than keys, so each stream keeps its own request type
+    const inboundStreams: [
+      name: string,
+      select: (bridge: HostBridge) => Observable<{ data: unknown }>,
+      action: string,
+    ][] = [
+      [
+        "themeChange$",
+        (bridge) => bridge.themeChange$,
+        WidgetApiToWidgetAction.ThemeChange,
+      ],
+      ["join$", (bridge) => bridge.join$, ElementWidgetActions.JoinCall],
+      ["hangUp$", (bridge) => bridge.hangUp$, ElementWidgetActions.HangupCall],
+      [
+        "deviceMute$",
+        (bridge) => bridge.deviceMute$,
+        ElementWidgetActions.DeviceMute,
+      ],
+    ];
+
+    test.each(inboundStreams)(
+      "surfaces %s with the host's data",
+      (_name, select, action) => {
+        const widget = mockWidget({ transport: mockTransport() } as never);
+        const bridge = createWidgetHostBridge(widget);
+        const seen: unknown[] = [];
+        select(bridge).subscribe((request) => seen.push(request.data));
+
+        askHost(widget, action, { some: "payload" });
+
+        expect(seen).toEqual([{ some: "payload" }]);
+      },
+    );
+
+    test("replies to the host against the request it made", () => {
+      const transport = mockTransport();
+      const widget = mockWidget({ transport } as never);
+      const bridge = createWidgetHostBridge(widget);
+      bridge.deviceMute$.subscribe((request) =>
+        request.reply({ audio_enabled: false, video_enabled: true }),
+      );
+
+      const ev = askHost(widget, ElementWidgetActions.DeviceMute, {
+        audio_enabled: false,
+      });
+
+      expect(transport.reply).toHaveBeenCalledWith(ev.detail, {
+        audio_enabled: false,
+        video_enabled: true,
+      });
+    });
+
+    test("still replies when there is nothing to say", () => {
+      const transport = mockTransport();
+      const widget = mockWidget({ transport } as never);
+      const bridge = createWidgetHostBridge(widget);
+      bridge.hangUp$.subscribe((request) => request.reply());
+
+      const ev = askHost(widget, ElementWidgetActions.HangupCall, {});
+
+      // The widget API requires an answer, so an empty reply becomes {}
+      expect(transport.reply).toHaveBeenCalledWith(ev.detail, {});
+    });
+
+    test("stops listening once unsubscribed", () => {
+      const widget = mockWidget({ transport: mockTransport() } as never);
+      const bridge = createWidgetHostBridge(widget);
+      const seen: unknown[] = [];
+      const subscription = bridge.hangUp$.subscribe((r) => seen.push(r.data));
+
+      subscription.unsubscribe();
+      askHost(widget, ElementWidgetActions.HangupCall, {});
+
+      expect(seen).toEqual([]);
+    });
+  });
+
   describe("downloadMedia", () => {
     const mxcUri = "mxc://example.org/alice-avatar";
 
diff --git a/src/analytics/PosthogAnalytics.test.ts b/src/analytics/PosthogAnalytics.test.ts
index ba51ba27..cd821c17 100644
--- a/src/analytics/PosthogAnalytics.test.ts
+++ b/src/analytics/PosthogAnalytics.test.ts
@@ -15,6 +15,7 @@ import {
   afterAll,
 } from "vitest";
 import posthog, { type CaptureResult } from "posthog-js";
+import { type MatrixClient } from "matrix-js-sdk";
 
 import {
   Anonymity,
@@ -23,6 +24,7 @@ import {
 } from "./PosthogAnalytics";
 import { mockConfig } from "../utils/test";
 import { analyticsConfigFromEnvironment } from "../initializer";
+import { optInAnalytics } from "../settings/settings";
 
 describe("PosthogAnalytics", () => {
   describe("enablement", () => {
@@ -281,3 +283,86 @@ describe("PosthogAnalytics", () => {
     });
   });
 });
+
+describe("identifying the user", () => {
+  const credentials = {
+    apiKey: "api_key",
+    apiHost: "https://api.example.com.localhost",
+  };
+
+  function mockClient(accountDataId: string | null): MatrixClient {
+    return {
+      isGuest: () => false,
+      getCrypto: () => undefined,
+      getAccountDataFromServer: vi
+        .fn()
+        .mockResolvedValue(
+          accountDataId === null ? null : { id: accountDataId },
+        ),
+      setAccountData: vi.fn().mockResolvedValue({}),
+    } as Partial<MatrixClient> as MatrixClient;
+  }
+
+  beforeEach(() => {
+    PosthogAnalytics.resetInstance();
+    optInAnalytics.setValue(true);
+  });
+
+  it("reports under the ID its host assigned, and stores nothing", async () => {
+    const client = mockClient(null);
+    window.matrixclient = client;
+    PosthogAnalytics.configure({
+      ...credentials,
+      matrixBackend: "embedded",
+      hostAnalyticsId: "assigned-by-host",
+    });
+    const identify = vi.spyOn(posthog, "identify");
+
+    PosthogAnalytics.instance.startListeningToSettingsChanges();
+    await vi.waitFor(() =>
+      expect(identify).toHaveBeenCalledWith("assigned-by-host"),
+    );
+
+    // The host owns the user's account, so Element Call must not write to it
+    expect(client.setAccountData).not.toHaveBeenCalled();
+  });
+
+  it("keeps its own ID in account data when it owns the session", async () => {
+    const client = mockClient(null);
+    window.matrixclient = client;
+    PosthogAnalytics.configure({ ...credentials, matrixBackend: "jssdk" });
+
+    PosthogAnalytics.instance.startListeningToSettingsChanges();
+
+    // No ID on the server yet, so one is minted and stored for other devices
+    await vi.waitFor(() => expect(client.setAccountData).toHaveBeenCalled());
+  });
+
+  it("reuses the ID already in account data", async () => {
+    const client = mockClient("stored-earlier");
+    window.matrixclient = client;
+    PosthogAnalytics.configure({ ...credentials, matrixBackend: "jssdk" });
+    const identify = vi.spyOn(posthog, "identify");
+
+    PosthogAnalytics.instance.startListeningToSettingsChanges();
+    await vi.waitFor(() =>
+      expect(identify).toHaveBeenCalledWith("stored-earlier"),
+    );
+
+    expect(client.setAccountData).not.toHaveBeenCalled();
+  });
+
+  it("records how it reaches Matrix as a super property", async () => {
+    window.matrixclient = mockClient("stored-earlier");
+    PosthogAnalytics.configure({ ...credentials, matrixBackend: "embedded" });
+    const register = vi.spyOn(posthog, "register");
+
+    PosthogAnalytics.instance.startListeningToSettingsChanges();
+
+    await vi.waitFor(() =>
+      expect(register).toHaveBeenCalledWith(
+        expect.objectContaining({ matrixBackend: "embedded" }),
+      ),
+    );
+  });
+});
diff --git a/src/e2ee/sharedKeyManagement.test.ts b/src/e2ee/sharedKeyManagement.test.ts
new file mode 100644
index 00000000..9d037530
--- /dev/null
+++ b/src/e2ee/sharedKeyManagement.test.ts
@@ -0,0 +1,36 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { afterEach, describe, expect, test } from "vitest";
+
+import { getKeyForRoom, saveKeyForRoom } from "./sharedKeyManagement";
+
+const roomId = "!room:example.org";
+
+describe("getKeyForRoom", () => {
+  afterEach(() => {
+    window.location.hash = "#";
+    localStorage.clear();
+  });
+
+  test("prefers a key given in the parameters over the stored one", () => {
+    saveKeyForRoom(roomId, "stored");
+    window.location.hash = `#?roomId=${encodeURIComponent(roomId)}&password=from-the-link`;
+
+    expect(getKeyForRoom(roomId)).toBe("from-the-link");
+  });
+
+  test("falls back to the stored key", () => {
+    saveKeyForRoom(roomId, "stored");
+
+    expect(getKeyForRoom(roomId)).toBe("stored");
+  });
+
+  test("has no key to offer for a room it has never seen", () => {
+    expect(getKeyForRoom(roomId)).toBeNull();
+  });
+});
diff --git a/src/state/MediaDevices.test.ts b/src/state/MediaDevices.test.ts
new file mode 100644
index 00000000..f65b024e
--- /dev/null
+++ b/src/state/MediaDevices.test.ts
@@ -0,0 +1,59 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, test, vi } from "vitest";
+import { of } from "rxjs";
+
+const getPlatform = vi.hoisted(() => vi.fn(() => "desktop"));
+vi.mock("../Platform", () => ({
+  get platform(): string {
+    return getPlatform();
+  },
+  isFirefox: (): boolean => false,
+}));
+vi.mock("@livekit/components-core", () => ({
+  createMediaDeviceObserver: () => of([]),
+}));
+
+import { AudioOutput, MediaDevices } from "./MediaDevices";
+import { AndroidControlledAudioOutput } from "./AndroidControlledAudioOutput";
+import { IOSControlledAudioOutput } from "./IOSControlledAudioOutput";
+import { ObservableScope } from "./ObservableScope";
+
+// Which audio output implementation is used is decided by what the app hosting
+// Element Call told it, rather than being discovered from the environment.
+describe("MediaDevices audio output", () => {
+  test("uses the browser's own output when nobody else is controlling it", () => {
+    const devices = new MediaDevices(new ObservableScope(), {
+      controlledAudioDevices: false,
+    });
+
+    expect(devices.audioOutput).toBeInstanceOf(AudioOutput);
+  });
+
+  test("hands control to the host on Android", () => {
+    getPlatform.mockReturnValue("android");
+
+    const devices = new MediaDevices(new ObservableScope(), {
+      controlledAudioDevices: true,
+      callIntent: "audio",
+    });
+
+    expect(devices.audioOutput).toBeInstanceOf(AndroidControlledAudioOutput);
+  });
+
+  test("hands control to the host elsewhere too", () => {
+    getPlatform.mockReturnValue("ios");
+
+    const devices = new MediaDevices(new ObservableScope(), {
+      controlledAudioDevices: true,
+      callIntent: "video",
+    });
+
+    expect(devices.audioOutput).toBeInstanceOf(IOSControlledAudioOutput);
+  });
+});
diff --git a/src/utils/errors.test.ts b/src/utils/errors.test.ts
new file mode 100644
index 00000000..306aa3cf
--- /dev/null
+++ b/src/utils/errors.test.ts
@@ -0,0 +1,62 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, test } from "vitest";
+
+import {
+  ErrorCategory,
+  ErrorCode,
+  FailToStartLivekitConnection,
+  MembershipManagerError,
+  NoMatrix2AuthorizationService,
+  SFURoomCreationRestrictedError,
+} from "./errors";
+
+// These errors take their wording from Element Call's own i18next instance
+// rather than the global one, so each needs to come out translated rather than
+// as a raw key.
+describe("localised errors", () => {
+  test("MembershipManagerError describes the failure and keeps its cause", () => {
+    const cause = new Error("the underlying problem");
+    const error = new MembershipManagerError(cause);
+
+    expect(error.code).toBe(ErrorCode.INTERNAL_MEMBERSHIP_MANAGER);
+    expect(error.category).toBe(ErrorCategory.SYSTEM_FAILURE);
+    expect(error.localisedTitle).not.toContain("error.");
+    expect(error.localisedMessage).not.toContain("error.");
+    expect(error.cause).toBe(cause);
+  });
+
+  test("NoMatrix2AuthorizationService is a configuration problem", () => {
+    const cause = new Error("404");
+    const error = new NoMatrix2AuthorizationService(cause);
+
+    expect(error.code).toBe(ErrorCode.NO_MATRIX_2_AUTHORIZATION_SERVICE);
+    expect(error.category).toBe(ErrorCategory.CONFIGURATION_ISSUE);
+    expect(error.localisedTitle).not.toContain("error.");
+    expect(error.localisedMessage).not.toContain("error.");
+    expect(error.cause).toBe(cause);
+  });
+
+  test("FailToStartLivekitConnection passes its detail through", () => {
+    const error = new FailToStartLivekitConnection("could not publish");
+
+    expect(error.code).toBe(ErrorCode.FAILED_TO_START_LIVEKIT);
+    expect(error.category).toBe(ErrorCategory.NETWORK_CONNECTIVITY);
+    expect(error.localisedTitle).not.toContain("error.");
+    expect(error.localisedMessage).toBe("could not publish");
+  });
+
+  test("SFURoomCreationRestrictedError explains the restriction", () => {
+    const error = new SFURoomCreationRestrictedError();
+
+    expect(error.code).toBe(ErrorCode.SFU_ERROR);
+    expect(error.category).toBe(ErrorCategory.CONFIGURATION_ISSUE);
+    expect(error.localisedTitle).not.toContain("error.");
+    expect(error.localisedMessage).not.toContain("error.");
+  });
+});

From 1bfb018d907e2630eead5226ee5b9613552ad696 Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Thu, 3 Sep 2026 12:10:04 +0200
Subject: [PATCH 026/154] Introduce ElementCallView
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Being in a call and deciding to show one are different jobs, but RoomPage
did both: routing, authentication, resolving room aliases and knocking, and
then the call itself. Only the first set belongs to whatever is hosting
Element Call.

Add ElementCallView as the seam between them. It takes a client and a call
to join, and owns whether the user has joined — which is the call's own
business rather than its host's. RoomPage keeps everything about arriving
at a call and renders this for the call itself.

Nothing else moves yet. muteStates is still passed in, because the
standalone shell shares one with the lobby it shows while waiting to be let
into a room, and two instances would both report the user's mute state to
the host.
---
 src/ElementCallView.tsx | 73 +++++++++++++++++++++++++++++++++++++++++
 src/room/RoomPage.tsx   |  7 ++--
 2 files changed, 75 insertions(+), 5 deletions(-)
 create mode 100644 src/ElementCallView.tsx

diff --git a/src/ElementCallView.tsx b/src/ElementCallView.tsx
new file mode 100644
index 00000000..72cf9dda
--- /dev/null
+++ b/src/ElementCallView.tsx
@@ -0,0 +1,73 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { type FC, type ReactNode, useState } from "react";
+import { type MatrixClient } from "matrix-js-sdk";
+import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
+
+import { GroupCallView } from "./room/GroupCallView";
+import { type MuteStates } from "./state/MuteStates";
+import { type UrlParams } from "./UrlParams";
+
+interface Props {
+  /** The client to place the call with. */
+  client: MatrixClient;
+  /** The call to join. */
+  rtcSession: MatrixRTCSession;
+  /** The audio and video mute state to start from, and keep in step with. */
+  muteStates: MuteStates;
+  /**
+   * Whether the user is signed in as a guest, and so should be offered the
+   * chance to create an account when the call ends.
+   */
+  isPasswordlessUser: boolean;
+  /** Whether to keep the user in this call rather than letting them navigate. */
+  confineToRoom: boolean;
+  /** Whether to wait for the host to ask us to join. */
+  preload: UrlParams["preload"];
+  /** Whether to enter the call directly, without showing the lobby first. */
+  skipLobby: UrlParams["skipLobby"];
+}
+
+/**
+ * A call, as a component.
+ *
+ * This owns being in a call, and nothing about how Element Call came to be
+ * showing one: no routing, no authentication, no resolving of room aliases.
+ * Those belong to whatever is hosting it — the standalone app's own shell, or
+ * an application embedding Element Call directly.
+ *
+ * TODO: `muteStates` is still passed in, because the standalone shell shares
+ * one with the lobby it shows while waiting to be let into a room. Ownership
+ * moves here once that lobby has its own.
+ */
+export const ElementCallView: FC<Props> = ({
+  client,
+  rtcSession,
+  muteStates,
+  isPasswordlessUser,
+  confineToRoom,
+  preload,
+  skipLobby,
+}): ReactNode => {
+  // Whether the user is in the call is the call's own business, not its host's.
+  const [joined, setJoined] = useState(false);
+
+  return (
+    <GroupCallView
+      client={client}
+      rtcSession={rtcSession}
+      joined={joined}
+      setJoined={setJoined}
+      isPasswordlessUser={isPasswordlessUser}
+      confineToRoom={confineToRoom}
+      preload={preload}
+      skipLobby={skipLobby}
+      muteStates={muteStates}
+    />
+  );
+};
diff --git a/src/room/RoomPage.tsx b/src/room/RoomPage.tsx
index 33eb80dd..604840e5 100644
--- a/src/room/RoomPage.tsx
+++ b/src/room/RoomPage.tsx
@@ -25,7 +25,7 @@ import {
 import { useClientLegacy } from "../ClientContext";
 import { ErrorPage, FullScreenView, LoadingPage } from "../FullScreenView";
 import { RoomAuthView } from "./RoomAuthView";
-import { GroupCallView } from "./GroupCallView";
+import { ElementCallView } from "../ElementCallView";
 import { useRoomIdentifier, useUrlParams } from "../UrlParams";
 import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
 import { HomePage } from "../home/HomePage";
@@ -62,7 +62,6 @@ export const RoomPage: FC = (): ReactNode => {
   const { avatarUrl, displayName: userDisplayName } = useProfile(client);
 
   const groupCallState = useLoadGroupCall(client, roomIdOrAlias, viaServers);
-  const [joined, setJoined] = useState(false);
 
   const devices = useMediaDevices();
   const [muteStates, setMuteStates] = useState<MuteStates | null>(null);
@@ -125,11 +124,9 @@ export const RoomPage: FC = (): ReactNode => {
       case "loaded":
         return (
           muteStates && (
-            <GroupCallView
+            <ElementCallView
               client={client!}
               rtcSession={groupCallState.rtcSession}
-              joined={joined}
-              setJoined={setJoined}
               isPasswordlessUser={passwordlessUser}
               confineToRoom={confineToRoom}
               preload={preload}

From 856e055d30d0ca08b5ad5601bdb370654f5a7e38 Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Thu, 3 Sep 2026 12:55:52 +0200
Subject: [PATCH 027/154] Find Element Call's root by attribute, not by being
 the body
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Six selectors named `body` directly — the gradient backdrop and the
platform font overrides in index.css, and the iOS adjustments in
AppBar.module.css and Modal.module.css — so they only applied when Element
Call owned the page. A host mounting it into a container would have got an
interface decorated correctly and styled incorrectly, with nothing to show
that anything was wrong.

Mark the root element with data-element-call-root and match on that
instead. Scoping this way keeps the selectors more specific than they were,
rather than less: widening them to a bare [data-platform=…] would have
dropped specificity from (0,1,1) to (0,1,0) and changed which rules win.

The platform attribute moves with them, from the initializer's write onto
document.body to a layout effect on the root, alongside the theme — so it
still lands before anything is painted.

No visual change while Element Call owns the page: the root is the body,
which now carries the attribute, so every rewritten selector matches the
element it always did.
---
 src/AppBar.module.css     |  2 +-
 src/Modal.module.css      |  2 +-
 src/RootElementContext.ts | 19 ++++++++++---------
 src/index.css             |  8 ++++----
 src/initializer.tsx       |  4 ----
 src/useTheme.test.ts      | 15 +++++++++++++++
 src/useTheme.ts           |  9 +++++++++
 7 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/src/AppBar.module.css b/src/AppBar.module.css
index cc63854e..faf2b0bf 100644
--- a/src/AppBar.module.css
+++ b/src/AppBar.module.css
@@ -131,7 +131,7 @@
   }
 }
 
-body[data-platform="ios"] {
+[data-element-call-root][data-platform="ios"] {
   .bar > header {
     grid-template-rows: minmax(var(--cpd-space-11x), auto) var(--cpd-space-4x);
     grid-template-areas: "primaryButton title secondaryButton";
diff --git a/src/Modal.module.css b/src/Modal.module.css
index ae8006a5..30327209 100644
--- a/src/Modal.module.css
+++ b/src/Modal.module.css
@@ -48,7 +48,7 @@ Please see LICENSE in the repository root for full details.
   --handle-inset-block-end: var(--cpd-space-4x);
 }
 
-body[data-platform="ios"] .drawer {
+[data-element-call-root][data-platform="ios"] .drawer {
   --border-radius: 10px;
   --handle-block-size: 5px;
   --handle-inline-size: 36px;
diff --git a/src/RootElementContext.ts b/src/RootElementContext.ts
index d8211c74..48dc2613 100644
--- a/src/RootElementContext.ts
+++ b/src/RootElementContext.ts
@@ -16,17 +16,18 @@ import { createContext, use } from "react";
  * that when embedded in a host application it becomes the container the host
  * mounted it into, so that Element Call does not reach outside its own subtree.
  *
- * That intent is not yet achievable: several selectors still name `body`
- * directly — `body[data-background="gradient"]` and `body[data-platform=…]` in
- * `index.css`, and `body[data-platform="ios"]` in `AppBar.module.css` and
- * `Modal.module.css` — and `Initializer.initBeforeReact` writes
- * `data-platform` straight onto the body. So anything other than the body will
- * be decorated correctly and styled incorrectly, silently. Until those are
- * scoped, treat this as preparation rather than a working seam.
+ * The stylesheets find this element by its `data-element-call-root` attribute,
+ * which {@link useTheme} sets along with the platform and theme, so they no
+ * longer depend on it being the body.
+ *
+ * What remains body-specific is the standalone page's own furniture: the
+ * `body` rule in `index.css` still sets the page background and margin, and
+ * `index.html` starts the body hidden with `no-theme` until the theme lands.
+ * Neither applies when a host mounts Element Call into a container of its own.
  */
 // No provider is exported yet: nothing supplies a root element, so every
-// consumer falls back to the document body. M1 adds one along with the
-// component that mounts Element Call into a container.
+// consumer falls back to the document body. One arrives with the entry point
+// that mounts Element Call into a container.
 const RootElementContext = createContext<HTMLElement | null>(null);
 
 /**
diff --git a/src/index.css b/src/index.css
index 77db3394..12f3951d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -75,7 +75,7 @@ body {
 }
 
 @media (min-height: 330px) {
-  body[data-background="gradient"]::before {
+  [data-element-call-root][data-background="gradient"]::before {
     content: "";
     position: fixed;
     /* Chromium abruptly fades our images to fully transparent at the edge of
@@ -88,7 +88,7 @@ body {
     background-repeat: no-repeat;
   }
 
-  body[data-background="gradient"][data-platform="desktop"]::before {
+  [data-element-call-root][data-background="gradient"][data-platform="desktop"]::before {
     background-image: url("graphics/desktop-gradient.png");
     background-size: max(1440px, 100vw) max(1440px, 100vh);
     background-position: center;
@@ -126,11 +126,11 @@ body,
 /* On Android and iOS, prefer native system fonts. The global.css file of
 Compound Web is where these variables ultimately get consumed to set the page's
 font-family. */
-body[data-platform="android"] {
+[data-element-call-root][data-platform="android"] {
   --cpd-font-family-sans: "Roboto", "Noto", "Inter", sans-serif;
 }
 
-body[data-platform="ios"] {
+[data-element-call-root][data-platform="ios"] {
   --cpd-font-family-sans:
     -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
 }
diff --git a/src/initializer.tsx b/src/initializer.tsx
index ee3ee9bd..253dcbc4 100644
--- a/src/initializer.tsx
+++ b/src/initializer.tsx
@@ -30,7 +30,6 @@ import {
 import { getUrlParams } from "./UrlParams";
 import { Config } from "./config/Config";
 import { seedSettingsFromConfig } from "./settings/settings";
-import { platform } from "./Platform";
 import { isFailure } from "./utils/fetch";
 import { initializeWidget, type WidgetHelpers } from "./widget";
 import { enableExtendedLivekitLogs } from "./settings/settings.ts";
@@ -229,9 +228,6 @@ export class Initializer {
       );
     }
 
-    // Add the platform to the DOM, so CSS can query it
-    document.body.setAttribute("data-platform", platform);
-
     // livekit logging configuration
     setLKLogExtension((level, msg, context) => {
       // we pass a synthetic logger name of "livekit" to the rageshake to make it easier to read
diff --git a/src/useTheme.test.ts b/src/useTheme.test.ts
index e5accd15..fe0cbffb 100644
--- a/src/useTheme.test.ts
+++ b/src/useTheme.test.ts
@@ -19,6 +19,7 @@ import {
 } from "vitest";
 
 import { useTheme } from "./useTheme";
+import { platform } from "./Platform";
 import { useUrlParams } from "./UrlParams";
 import {
   type HostBridge,
@@ -88,6 +89,20 @@ describe("useTheme", () => {
     expect(originalClassList.add).not.toHaveBeenCalled();
   });
 
+  test("marks the element as Element Call's root, for the stylesheets", () => {
+    renderHook(() => useTheme(), { wrapper });
+
+    // The stylesheets find the root by this rather than by naming `body`, so
+    // that they still apply when Element Call is mounted into a container
+    expect(document.body.hasAttribute("data-element-call-root")).toBe(true);
+  });
+
+  test("records the platform on the root, for the stylesheets", () => {
+    renderHook(() => useTheme(), { wrapper });
+
+    expect(document.body.getAttribute("data-platform")).toBe(platform);
+  });
+
   test("theme changes in response to host requests", () => {
     renderHook(() => useTheme(), { wrapper });
 
diff --git a/src/useTheme.ts b/src/useTheme.ts
index 3c02745a..86a6f63f 100644
--- a/src/useTheme.ts
+++ b/src/useTheme.ts
@@ -9,6 +9,7 @@ import { useEffect, useLayoutEffect, useRef, useState } from "react";
 
 import { useUrlParams } from "./UrlParams";
 import { useRootElement } from "./RootElementContext";
+import { platform } from "./Platform";
 import { useHostBridge } from "./HostBridge";
 
 export const useTheme = (): void => {
@@ -28,6 +29,14 @@ export const useTheme = (): void => {
     return (): void => subscription.unsubscribe();
   }, [hostBridge]);
 
+  // Mark the element as Element Call's root and record the platform on it, so
+  // that the stylesheets can find both without naming `body`. A layout effect,
+  // like the theme below, so that it lands before anything is painted.
+  useLayoutEffect(() => {
+    rootElement.setAttribute("data-element-call-root", "");
+    rootElement.setAttribute("data-platform", platform);
+  }, [rootElement]);
+
   useLayoutEffect(() => {
     // If no theme has been explicitly requested we default to dark
     const theme = requestedTheme?.includes("light") ? "light" : "dark";

From a166fbbd08384b241e54bc470df8cedc55fe5a59 Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Thu, 3 Sep 2026 15:15:51 +0200
Subject: [PATCH 028/154] Let the component own its mute state

ElementCallView took muteStates as a prop, which would have meant an
embedder building one before it could show a call. It could not simply make
its own: RoomPage created one on mount whichever branch it went on to
render, and two would both report the user's mute state to the host,
talking over each other.

Move the construction into a useMuteStates hook, and give the lobby shown
while waiting to be let into a room its own component. Each lobby now holds
mute state only while it is on screen, so there is never a second one, and
the component can own the call's.

KnockLobbyView also takes the room summary and label handling that RoomPage
was assembling on its behalf, leaving the page with arriving at a call
rather than being in one.
---
 src/ElementCallView.tsx     |  12 ++--
 src/room/KnockLobbyView.tsx |  92 +++++++++++++++++++++++++++++
 src/room/RoomPage.tsx       | 115 ++++++++----------------------------
 src/state/useMuteStates.ts  |  51 ++++++++++++++++
 4 files changed, 171 insertions(+), 99 deletions(-)
 create mode 100644 src/room/KnockLobbyView.tsx
 create mode 100644 src/state/useMuteStates.ts

diff --git a/src/ElementCallView.tsx b/src/ElementCallView.tsx
index 72cf9dda..d0b3e4f3 100644
--- a/src/ElementCallView.tsx
+++ b/src/ElementCallView.tsx
@@ -10,7 +10,7 @@ import { type MatrixClient } from "matrix-js-sdk";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 
 import { GroupCallView } from "./room/GroupCallView";
-import { type MuteStates } from "./state/MuteStates";
+import { useMuteStates } from "./state/useMuteStates";
 import { type UrlParams } from "./UrlParams";
 
 interface Props {
@@ -18,8 +18,6 @@ interface Props {
   client: MatrixClient;
   /** The call to join. */
   rtcSession: MatrixRTCSession;
-  /** The audio and video mute state to start from, and keep in step with. */
-  muteStates: MuteStates;
   /**
    * Whether the user is signed in as a guest, and so should be offered the
    * chance to create an account when the call ends.
@@ -40,15 +38,10 @@ interface Props {
  * showing one: no routing, no authentication, no resolving of room aliases.
  * Those belong to whatever is hosting it — the standalone app's own shell, or
  * an application embedding Element Call directly.
- *
- * TODO: `muteStates` is still passed in, because the standalone shell shares
- * one with the lobby it shows while waiting to be let into a room. Ownership
- * moves here once that lobby has its own.
  */
 export const ElementCallView: FC<Props> = ({
   client,
   rtcSession,
-  muteStates,
   isPasswordlessUser,
   confineToRoom,
   preload,
@@ -56,6 +49,9 @@ export const ElementCallView: FC<Props> = ({
 }): ReactNode => {
   // Whether the user is in the call is the call's own business, not its host's.
   const [joined, setJoined] = useState(false);
+  const muteStates = useMuteStates();
+
+  if (muteStates === null) return null;
 
   return (
     <GroupCallView
diff --git a/src/room/KnockLobbyView.tsx b/src/room/KnockLobbyView.tsx
new file mode 100644
index 00000000..39643b20
--- /dev/null
+++ b/src/room/KnockLobbyView.tsx
@@ -0,0 +1,92 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { type FC, type JSX, type ReactNode } from "react";
+import { type MatrixClient, type RoomSummary } from "matrix-js-sdk";
+import { useTranslation } from "react-i18next";
+import { CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { LobbyView } from "./LobbyView";
+import { E2eeType } from "../e2ee/e2eeType";
+import { useMuteStates } from "../state/useMuteStates";
+
+interface Props {
+  client: MatrixClient;
+  /** What we know about the room from peeking at it. */
+  roomSummary: RoomSummary;
+  /** The user's own name and avatar, to show in their own tile. */
+  profile: { displayName: string; avatarUrl: string };
+  /**
+   * Asks to be let in, if the room allows it. Absent once we have asked and
+   * are waiting for an answer.
+   */
+  knock: (() => void) | null;
+  confineToRoom: boolean;
+  hideHeader: boolean;
+}
+
+/**
+ * The lobby shown while the user is outside a room they want to call in —
+ * either able to ask to join, or waiting for someone to answer.
+ *
+ * This belongs to the app shell rather than to the call: it exists precisely
+ * because there is no call to be in yet. It keeps its own mute state, which is
+ * why it is a component rather than part of the page — so that the call's mute
+ * state and this one are never alive at the same time, reporting over each
+ * other to the host.
+ */
+export const KnockLobbyView: FC<Props> = ({
+  client,
+  roomSummary,
+  profile,
+  knock,
+  confineToRoom,
+  hideHeader,
+}): ReactNode => {
+  const { t } = useTranslation();
+  const muteStates = useMuteStates();
+
+  if (muteStates === null) return null;
+
+  const waitingForInvite = knock === null;
+  const enterLabel: string | JSX.Element = waitingForInvite ? (
+    <>
+      {t("lobby.waiting_for_invite")}
+      <CheckIcon />
+    </>
+  ) : (
+    t("lobby.ask_to_join")
+  );
+
+  return (
+    <LobbyView
+      client={client}
+      matrixInfo={{
+        userId: client.getUserId() ?? "",
+        displayName: profile.displayName,
+        avatarUrl: profile.avatarUrl,
+        roomAlias: null,
+        roomId: roomSummary.room_id,
+        roomName: roomSummary.name ?? "",
+        roomAvatar: roomSummary.avatar_url ?? null,
+        e2eeSystem: {
+          kind: roomSummary["im.nheko.summary.encryption"]
+            ? E2eeType.PER_PARTICIPANT
+            : E2eeType.NONE,
+        },
+      }}
+      onEnter={(): void => knock?.()}
+      enterLabel={enterLabel}
+      waitingForInvite={waitingForInvite}
+      confineToRoom={confineToRoom}
+      hideHeader={hideHeader}
+      participantCount={null}
+      muteStates={muteStates}
+      onShareClick={null}
+    />
+  );
+};
diff --git a/src/room/RoomPage.tsx b/src/room/RoomPage.tsx
index 604840e5..f49509e3 100644
--- a/src/room/RoomPage.tsx
+++ b/src/room/RoomPage.tsx
@@ -6,21 +6,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import {
-  type FC,
-  useEffect,
-  useState,
-  type ReactNode,
-  useRef,
-  type JSX,
-} from "react";
+import { type FC, useEffect, useState, type ReactNode, useRef } from "react";
 import { type MatrixError } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { Trans, useTranslation } from "react-i18next";
-import {
-  CheckIcon,
-  UnknownSolidIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { UnknownSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { useClientLegacy } from "../ClientContext";
 import { ErrorPage, FullScreenView, LoadingPage } from "../FullScreenView";
@@ -29,22 +19,15 @@ import { ElementCallView } from "../ElementCallView";
 import { useRoomIdentifier, useUrlParams } from "../UrlParams";
 import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
 import { HomePage } from "../home/HomePage";
-import { useHostBridge } from "../HostBridge.ts";
 import { CallTerminatedMessage, useLoadGroupCall } from "./useLoadGroupCall";
-import { LobbyView } from "./LobbyView";
-import { E2eeType } from "../e2ee/e2eeType";
+import { KnockLobbyView } from "./KnockLobbyView";
 import { useProfile } from "../profile/useProfile";
 import { useOptInAnalytics } from "../settings/settings";
 import { Link } from "../button/Link";
 import { ErrorView } from "../ErrorView";
-import { useMediaDevices } from "../MediaDevicesContext";
-import { MuteStates } from "../state/MuteStates";
-import { ObservableScope } from "../state/ObservableScope";
-import { calculateInitialMuteState } from "../state/initialMuteState.ts";
 
 export const RoomPage: FC = (): ReactNode => {
   const urlParams = useUrlParams();
-  const hostBridge = useHostBridge();
   const { confineToRoom, preload, header, displayName, skipLobby } = urlParams;
   const { t } = useTranslation();
   const { roomAlias, roomId, viaServers } = useRoomIdentifier();
@@ -63,26 +46,6 @@ export const RoomPage: FC = (): ReactNode => {
 
   const groupCallState = useLoadGroupCall(client, roomIdOrAlias, viaServers);
 
-  const devices = useMediaDevices();
-  const [muteStates, setMuteStates] = useState<MuteStates | null>(null);
-
-  useEffect(() => {
-    const scope = new ObservableScope();
-    setMuteStates(
-      new MuteStates(
-        scope,
-        devices,
-        calculateInitialMuteState(
-          urlParams.skipLobby,
-          urlParams.callIntent,
-          urlParams.isWidget,
-        ),
-        hostBridge,
-      ),
-    );
-    return (): void => scope.end();
-  }, [devices, urlParams, hostBridge]);
-
   useEffect(() => {
     // If we've finished loading, are not already authed and we've been given a display name as
     // a URL param, automatically register a passwordless user
@@ -123,64 +86,34 @@ export const RoomPage: FC = (): ReactNode => {
     switch (groupCallState.kind) {
       case "loaded":
         return (
-          muteStates && (
-            <ElementCallView
-              client={client!}
-              rtcSession={groupCallState.rtcSession}
-              isPasswordlessUser={passwordlessUser}
-              confineToRoom={confineToRoom}
-              preload={preload}
-              skipLobby={skipLobby || wasInWaitForInviteState.current}
-              muteStates={muteStates}
-            />
-          )
+          <ElementCallView
+            client={client!}
+            rtcSession={groupCallState.rtcSession}
+            isPasswordlessUser={passwordlessUser}
+            confineToRoom={confineToRoom}
+            preload={preload}
+            skipLobby={skipLobby || wasInWaitForInviteState.current}
+          />
         );
       case "waitForInvite":
       case "canKnock": {
         wasInWaitForInviteState.current =
           wasInWaitForInviteState.current ||
           groupCallState.kind === "waitForInvite";
-        const knock =
-          groupCallState.kind === "canKnock" ? groupCallState.knock : null;
-        const label: string | JSX.Element =
-          groupCallState.kind === "canKnock" ? (
-            t("lobby.ask_to_join")
-          ) : (
-            <>
-              {t("lobby.waiting_for_invite")}
-              <CheckIcon />
-            </>
-          );
         return (
-          muteStates && (
-            <LobbyView
-              client={client!}
-              matrixInfo={{
-                userId: client!.getUserId() ?? "",
-                displayName: userDisplayName ?? "",
-                avatarUrl: avatarUrl ?? "",
-                roomAlias: null,
-                roomId: groupCallState.roomSummary.room_id,
-                roomName: groupCallState.roomSummary.name ?? "",
-                roomAvatar: groupCallState.roomSummary.avatar_url ?? null,
-                e2eeSystem: {
-                  kind: groupCallState.roomSummary[
-                    "im.nheko.summary.encryption"
-                  ]
-                    ? E2eeType.PER_PARTICIPANT
-                    : E2eeType.NONE,
-                },
-              }}
-              onEnter={(): void => knock?.()}
-              enterLabel={label}
-              waitingForInvite={groupCallState.kind === "waitForInvite"}
-              confineToRoom={confineToRoom}
-              hideHeader={header !== "standard"}
-              participantCount={null}
-              muteStates={muteStates}
-              onShareClick={null}
-            />
-          )
+          <KnockLobbyView
+            client={client!}
+            roomSummary={groupCallState.roomSummary}
+            profile={{
+              displayName: userDisplayName ?? "",
+              avatarUrl: avatarUrl ?? "",
+            }}
+            knock={
+              groupCallState.kind === "canKnock" ? groupCallState.knock : null
+            }
+            confineToRoom={confineToRoom}
+            hideHeader={header !== "standard"}
+          />
         );
       }
       case "loading":
diff --git a/src/state/useMuteStates.ts b/src/state/useMuteStates.ts
new file mode 100644
index 00000000..ab35169f
--- /dev/null
+++ b/src/state/useMuteStates.ts
@@ -0,0 +1,51 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { useEffect, useState } from "react";
+
+import { MuteStates } from "./MuteStates";
+import { ObservableScope } from "./ObservableScope";
+import { calculateInitialMuteState } from "./initialMuteState";
+import { useMediaDevices } from "../MediaDevicesContext";
+import { useHostBridge } from "../HostBridge";
+import { useUrlParams } from "../UrlParams";
+
+/**
+ * Audio and video mute state, kept in step with the host.
+ *
+ * `null` until the media devices have been looked at, since what the user
+ * starts muted depends on what they have.
+ *
+ * Whoever shows the user their own camera owns one of these. Note there should
+ * only ever be one alive at a time: each reports the user's mute state to the
+ * host, so two would have them talking over each other.
+ */
+export function useMuteStates(): MuteStates | null {
+  const urlParams = useUrlParams();
+  const hostBridge = useHostBridge();
+  const devices = useMediaDevices();
+  const [muteStates, setMuteStates] = useState<MuteStates | null>(null);
+
+  useEffect(() => {
+    const scope = new ObservableScope();
+    setMuteStates(
+      new MuteStates(
+        scope,
+        devices,
+        calculateInitialMuteState(
+          urlParams.skipLobby,
+          urlParams.callIntent,
+          urlParams.isWidget,
+        ),
+        hostBridge,
+      ),
+    );
+    return (): void => scope.end();
+  }, [devices, urlParams, hostBridge]);
+
+  return muteStates;
+}

From 979b5215631b1841fd056e7ec2edf90d0d8eefaf Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Thu, 3 Sep 2026 15:18:03 +0200
Subject: [PATCH 029/154] Build Element Call as a component a host can import
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds component/index.tsx as a fourth build target: <ElementCall client
roomId /> and an initializeElementCall to await once beforehand. It gives
Element Call everything it would otherwise take from the page it is on —
the parameters, the host bridge, media devices, translations, a container
to confine itself to — and hands it the host's client rather than finding
one of its own.

React, the Matrix SDK and LiveKit stay external, since the host has them
and a second copy of any would not merely be wasteful: React would hold
two sets of hooks and the client would run two sync loops. Every subpath
has to be listed by name, because the pattern and callback forms of
rollupOptions.external are silently ignored here — a lesson worth the
comment that records it.

Element Call's own navigation runs in a MemoryRouter, so being embedded
cannot disturb the host's URL. ClientContext and GroupCallView both
navigate, so some router has to be present.

The bundle is not yet a reasonable size: library mode base64-inlines
assets referenced through import.meta.url, so MediaPipe's vision runtime
lands in it whole. Left for its own change, since the fix — loading the
background blur transformer lazily — is worth doing for the standalone app
too.
---
 component/ElementCall.module.css |  24 ++++
 component/index.tsx              | 185 +++++++++++++++++++++++++++++++
 knip.ts                          |   7 +-
 package.json                     |   3 +
 pnpm-workspace.yaml              |   4 +
 src/RootElementContext.ts        |   9 +-
 tsconfig.json                    |   4 +-
 vite-component.config.ts         |  65 +++++++++++
 8 files changed, 296 insertions(+), 5 deletions(-)
 create mode 100644 component/ElementCall.module.css
 create mode 100644 component/index.tsx
 create mode 100644 vite-component.config.ts

diff --git a/component/ElementCall.module.css b/component/ElementCall.module.css
new file mode 100644
index 00000000..399178ae
--- /dev/null
+++ b/component/ElementCall.module.css
@@ -0,0 +1,24 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+/* The container a host mounts us into. It fills whatever space the host gives
+it, and establishes a stacking context of its own so that our overlays and
+modals cannot escape it — which is the whole reason for embedding rather than
+using an iframe. */
+.root {
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  block-size: 100%;
+  isolation: isolate;
+  position: relative;
+  background-color: var(--cpd-color-bg-canvas-default);
+  color: var(--cpd-color-text-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-tap-highlight-color: transparent;
+}
diff --git a/component/index.tsx b/component/index.tsx
new file mode 100644
index 00000000..e904c8be
--- /dev/null
+++ b/component/index.tsx
@@ -0,0 +1,185 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+/**
+ * EXPERIMENTAL
+ *
+ * Element Call as a React component, for an application that wants to show a
+ * call inside itself rather than in an iframe.
+ *
+ * The host supplies the client and says which room to call in; Element Call
+ * supplies the call. Everything it would otherwise take from the page it is on
+ * — the URL, the document body, a Matrix session of its own — comes from the
+ * host instead, or is confined to the container it is mounted in.
+ */
+
+import { type FC, type JSX, type ReactNode, useMemo, useState } from "react";
+import { type MatrixClient } from "matrix-js-sdk";
+import { logger } from "matrix-js-sdk/lib/logger";
+import { MemoryRouter } from "react-router-dom";
+import { I18nextProvider } from "react-i18next";
+import { TooltipProvider } from "@vector-im/compound-web";
+import { shouldPolyfill as shouldPolyfillSegmenter } from "@formatjs/intl-segmenter/should-polyfill";
+import { shouldPolyfill as shouldPolyfillDurationFormat } from "@formatjs/intl-durationformat/should-polyfill.js";
+
+import { ElementCallView } from "../src/ElementCallView";
+import { ClientProvider } from "../src/ClientContext";
+import {
+  type HostBridge,
+  HostBridgeProvider,
+  nullHostBridge,
+} from "../src/HostBridge";
+import { RootElementProvider } from "../src/RootElementContext";
+import {
+  computeUrlParams,
+  type UrlParams,
+  UrlParamsProvider,
+} from "../src/UrlParams";
+import { MediaDevicesContext } from "../src/MediaDevicesContext";
+import { MediaDevices } from "../src/state/MediaDevices";
+import { ObservableScope } from "../src/state/ObservableScope";
+import { ProcessorProvider } from "../src/livekit/TrackProcessorContext";
+import { Config } from "../src/config/Config";
+import { type ConfigOptions } from "../src/config/ConfigOptions";
+import { i18n } from "../src/utils/i18n";
+import { useTheme } from "../src/useTheme";
+import { useInitial } from "../src/useInitial";
+import styles from "./ElementCall.module.css";
+
+export { type HostBridge } from "../src/HostBridge";
+
+/**
+ * How Element Call should behave. Everything is optional; anything left out
+ * takes the same default it would in the standalone app.
+ */
+export type ElementCallConfiguration = Partial<UrlParams>;
+
+export interface ElementCallProps {
+  /**
+   * The client to place the call with. Element Call does not authenticate
+   * anyone or manage a session of its own; this one is the host's.
+   */
+  client: MatrixClient;
+  /** The room to call in. The host's client must already know about it. */
+  roomId: string;
+  /** How Element Call should behave. */
+  config?: ElementCallConfiguration;
+  /**
+   * How to reach the host while the call is running — to be told the user has
+   * joined or hung up, to be asked to keep the call on screen, and so on.
+   * Without one, Element Call assumes it has no host to talk to.
+   */
+  hostBridge?: HostBridge;
+}
+
+/**
+ * Prepares the things Element Call needs before it can be shown: translations,
+ * `Intl` polyfills for older browsers, and its configuration.
+ *
+ * Await this once, before rendering {@link ElementCall}.
+ */
+export async function initializeElementCall(
+  config: ConfigOptions = {},
+): Promise<void> {
+  const polyfills: Promise<unknown>[] = [];
+  if (shouldPolyfillSegmenter())
+    polyfills.push(import("@formatjs/intl-segmenter/polyfill-force"));
+  if (shouldPolyfillDurationFormat())
+    polyfills.push(import("@formatjs/intl-durationformat/polyfill-force.js"));
+  await Promise.all(polyfills);
+
+  Config.initWith(config);
+  await i18n.init({
+    fallbackLng: "en",
+    defaultNS: "app",
+    keySeparator: ".",
+    nsSeparator: false,
+    pluralSeparator: "_",
+    contextSeparator: "|",
+    lng: "en",
+    interpolation: { escapeValue: false },
+  });
+}
+
+/** Applies the theme to the container, before it is painted. */
+const Decoration: FC<{ children: JSX.Element }> = ({ children }) => {
+  useTheme();
+  return children;
+};
+
+export const ElementCall: FC<ElementCallProps> = ({
+  client,
+  roomId,
+  config,
+  hostBridge = nullHostBridge,
+}): ReactNode => {
+  // The container is what Element Call decorates and portals into, so nothing
+  // inside can render until we have it.
+  const [container, setContainer] = useState<HTMLDivElement | null>(null);
+
+  // The defaults are the standalone app's, with the host's wishes over the top
+  const params = useMemo(
+    (): UrlParams => ({ ...computeUrlParams(), ...config }),
+    [config],
+  );
+
+  const mediaDevices = useInitial(
+    () =>
+      new MediaDevices(new ObservableScope(), {
+        controlledAudioDevices: params.controlledAudioDevices,
+        callIntent: params.callIntent,
+      }),
+  );
+
+  const room = client.getRoom(roomId);
+  const rtcSession = useMemo(
+    () => (room === null ? null : client.matrixRTC.getRoomSession(room)),
+    [client, room],
+  );
+
+  if (rtcSession === null)
+    logger.error(
+      `Element Call was asked to call in ${roomId}, which its host's client does not know about`,
+    );
+
+  return (
+    <I18nextProvider i18n={i18n}>
+      <HostBridgeProvider value={hostBridge}>
+        <UrlParamsProvider value={params}>
+          {/* Element Call's own navigation stays in memory, so that being
+          embedded cannot disturb the host's URL. */}
+          <MemoryRouter>
+            <div ref={setContainer} className={styles.root}>
+              {container !== null && rtcSession !== null && (
+                <RootElementProvider value={container}>
+                  <Decoration>
+                    <TooltipProvider>
+                      <ClientProvider client={client}>
+                        <MediaDevicesContext value={mediaDevices}>
+                          <ProcessorProvider>
+                            <ElementCallView
+                              client={client}
+                              rtcSession={rtcSession}
+                              isPasswordlessUser={false}
+                              confineToRoom={params.confineToRoom}
+                              preload={params.preload}
+                              skipLobby={params.skipLobby}
+                            />
+                          </ProcessorProvider>
+                        </MediaDevicesContext>
+                      </ClientProvider>
+                    </TooltipProvider>
+                  </Decoration>
+                </RootElementProvider>
+              )}
+            </div>
+          </MemoryRouter>
+        </UrlParamsProvider>
+      </HostBridgeProvider>
+    </I18nextProvider>
+  );
+};
diff --git a/knip.ts b/knip.ts
index 8412d591..97ecc090 100644
--- a/knip.ts
+++ b/knip.ts
@@ -9,7 +9,12 @@ import { type KnipConfig } from "knip";
 
 export default {
   vite: {
-    config: ["vite.config.ts", "vite-embedded.config.ts", "vite-sdk.config.ts"],
+    config: [
+      "vite.config.ts",
+      "vite-embedded.config.ts",
+      "vite-sdk.config.ts",
+      "vite-component.config.ts",
+    ],
   },
   entry: ["src/main.tsx", "eslint/index.js", "i18next.config.ts"],
   ignoreBinaries: [
diff --git a/package.json b/package.json
index 2f4faa60..91ba49de 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,9 @@
     "build:sdk:development": "pnpm build:sdk --mode development",
     "build:sdk": "pnpm build:full --config vite-sdk.config.js",
     "build:sdk:production": "pnpm build:sdk",
+    "build:component": "pnpm build:full --config vite-component.config.js",
+    "build:component:production": "pnpm build:component",
+    "build:component:development": "pnpm build:component --mode development",
     "serve": "vite preview",
     "format": "oxfmt",
     "format:check": "oxfmt --check; rc=$?; [[ $rc -ne 0 ]] && printf '\\033[46;30m INFO \\033[0m To fix, run: pnpm format\\n' >&2; exit $rc",
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index c32736ca..9e4f0fd6 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,3 +1,7 @@
+supportedArchitectures:
+  os: [current, linux]
+  cpu: [current, arm64]
+  libc: [current, glibc]
 minimumReleaseAgeExclude:
   - "@vector-im/compound-design-tokens"
   - "@vector-im/compound-web"
diff --git a/src/RootElementContext.ts b/src/RootElementContext.ts
index 48dc2613..906a90d6 100644
--- a/src/RootElementContext.ts
+++ b/src/RootElementContext.ts
@@ -25,11 +25,14 @@ import { createContext, use } from "react";
  * `index.html` starts the body hidden with `no-theme` until the theme lands.
  * Neither applies when a host mounts Element Call into a container of its own.
  */
-// No provider is exported yet: nothing supplies a root element, so every
-// consumer falls back to the document body. One arrives with the entry point
-// that mounts Element Call into a container.
 const RootElementContext = createContext<HTMLElement | null>(null);
 
+/**
+ * Supplies the element Element Call should confine itself to. The standalone
+ * and widget builds need no provider, since for them that element is the body.
+ */
+export const RootElementProvider = RootElementContext.Provider;
+
 /**
  * The element Element Call should decorate and portal into.
  *
diff --git a/tsconfig.json b/tsconfig.json
index 74c27025..aba6c5ec 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -53,7 +53,9 @@
     "./src/**/*.ts",
     "./src/**/*.tsx",
     "./playwright/**/*.ts",
-    "./sdk/**/*.ts"
+    "./sdk/**/*.ts",
+    "./component/**/*.ts",
+    "./component/**/*.tsx"
   ],
   "exclude": ["**.test.ts"]
 }
diff --git a/vite-component.config.ts b/vite-component.config.ts
new file mode 100644
index 00000000..1a57abe6
--- /dev/null
+++ b/vite-component.config.ts
@@ -0,0 +1,65 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { defineConfig } from "vite";
+
+import { vitePluginsConfig } from "./vite.config";
+
+// Config for Element Call as a React component, to be imported by an
+// application embedding it rather than served as a page of its own.
+//
+// Deliberately not built on top of the full app's config, which exists to
+// produce a page and brings an HTML entry point along with it.
+export default defineConfig(({ mode }) => ({
+  ...vitePluginsConfig({ mode }),
+  build: {
+    minify: mode === "production",
+    sourcemap: true,
+    // One stylesheet rather than one per chunk, so a host has a single file to
+    // include
+    cssCodeSplit: false,
+    lib: {
+      formats: ["es" as const],
+      entry: "./component/index.tsx",
+      fileName: "element-call",
+    },
+    rollupOptions: {
+      // The host already has these, and a second copy of any of them does not
+      // merely bloat the bundle: React would hold two sets of hooks, and the
+      // Matrix client would run two sync loops.
+      //
+      // Every subpath has to be named. Element Call reaches most of the Matrix
+      // SDK as `matrix-js-sdk/lib/…`, and a bare "matrix-js-sdk" would not
+      // catch those — while the pattern and callback forms of this option are
+      // silently ignored by the bundler, so they cannot be used to cover them.
+      // `pnpm lint:externals` fails if an import appears that is not listed.
+      external: [
+        "react",
+        "react/jsx-runtime",
+        "react-dom",
+        "react-dom/client",
+        "livekit-client",
+        "matrix-js-sdk",
+        "matrix-js-sdk/lib/client",
+        "matrix-js-sdk/lib/crypto-api",
+        "matrix-js-sdk/lib/logger",
+        "matrix-js-sdk/lib/matrix",
+        "matrix-js-sdk/lib/matrixrtc",
+        "matrix-js-sdk/lib/matrixrtc/EncryptionManager",
+        "matrix-js-sdk/lib/matrixrtc/IKeyTransport",
+        "matrix-js-sdk/lib/matrixrtc/IMembershipManager",
+        "matrix-js-sdk/lib/models/relations-container",
+        "matrix-js-sdk/lib/models/room",
+        "matrix-js-sdk/lib/models/typed-event-emitter",
+        "matrix-js-sdk/lib/randomstring",
+        "matrix-js-sdk/lib/sync",
+        "matrix-js-sdk/lib/types",
+        "matrix-js-sdk/lib/utils",
+      ],
+    },
+  },
+}));

From 8060d10fccb62ac2153313d9c877e31106f2278a Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 3 Sep 2026 14:46:49 +0100
Subject: [PATCH 030/154] Don't report an aborted connect as a connection error

When the ConnectionManager stops a Connection while livekitRoom.connect()
is still pending (which happens on every join, because the local
membership emits twice in quick succession and the connection set is
recomputed), livekit-client rejects the pending connect with "Client
initiated disconnect". Connection.start() then treated that as a failure:
it pushed an UnknownCallError into the state of a connection that was
already stopped and rethrew, and since start() is fire-and-forget the
throw surfaced as

    Unhandled promise rejection: Error: Failed to connect to Livekit server

in every rageshake, right after a "livekitRoom.connect FAILED ... Client
initiated disconnect" line. Nothing was actually wrong: the replacement
connection connects fine a moment later.

Mark the connection as stopped before disconnecting, and have start()
return quietly when the rejection is the abort we asked for.
---
 .../remoteMembers/Connection.test.ts          | 28 +++++++++++++++++++
 .../CallViewModel/remoteMembers/Connection.ts | 13 ++++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/state/CallViewModel/remoteMembers/Connection.test.ts b/src/state/CallViewModel/remoteMembers/Connection.test.ts
index 72329585..ae87e98c 100644
--- a/src/state/CallViewModel/remoteMembers/Connection.test.ts
+++ b/src/state/CallViewModel/remoteMembers/Connection.test.ts
@@ -391,6 +391,34 @@ describe("Start connection states", () => {
     expect(connectedState).toEqual(ConnectionState.LivekitConnected);
   });
 
+  it("stopping while connecting does not report an error", async () => {
+    setupTest();
+    const connection = setupRemoteConnection();
+
+    const capturedStates: (ConnectionState | Error)[] = [];
+    const s = connection.state$.subscribe((value) => {
+      capturedStates.push(value);
+    });
+    onTestFinished(() => s.unsubscribe());
+
+    // livekit-client rejects a pending connect() when disconnect() is called.
+    const pendingConnect = Promise.withResolvers<void>();
+    fakeLivekitRoom.connect.mockReturnValue(pendingConnect.promise);
+    fakeLivekitRoom.disconnect.mockResolvedValue(undefined);
+
+    const started = connection.start();
+    await vi.waitFor(() => expect(fakeLivekitRoom.connect).toHaveBeenCalled());
+    const stopping = connection.stop();
+    pendingConnect.reject(new Error("Client initiated disconnect"));
+    await stopping;
+
+    // start() resolves rather than rejecting (it is not awaited by the
+    // ConnectionManager, so a rejection would be unhandled).
+    await expect(started).resolves.toBeUndefined();
+    expect(capturedStates.at(-1)).toEqual(ConnectionState.Stopped);
+    expect(capturedStates.some((st) => st instanceof Error)).toBe(false);
+  });
+
   it("shutting down the scope should stop the connection", async () => {
     setupTest();
     vi.useFakeTimers();
diff --git a/src/state/CallViewModel/remoteMembers/Connection.ts b/src/state/CallViewModel/remoteMembers/Connection.ts
index f320e630..84ea98ee 100644
--- a/src/state/CallViewModel/remoteMembers/Connection.ts
+++ b/src/state/CallViewModel/remoteMembers/Connection.ts
@@ -258,6 +258,15 @@ export class Connection {
       // If we were stopped while connecting, don't proceed to update state.
       if (this.stopped) return;
     } catch (error) {
+      if (this.stopped) {
+        // stop() was called while we were connecting, which makes the pending
+        // connect reject. That is the abort we asked for, not a failure, so
+        // don't record an error state on a stopped connection or rethrow it
+        // (start() is not awaited by the ConnectionManager, so a throw here
+        // becomes an unhandled promise rejection).
+        this.logger.debug(`Connect aborted because the connection was stopped`);
+        return;
+      }
       this.logger.debug(`Failed to connect to LiveKit room: ${error}`);
       this._state$.next(
         error instanceof ElementCallError
@@ -296,9 +305,11 @@ export class Connection {
       `stop: disconnecing from lk room ${this.transport.livekit_service_url}`,
     );
     if (this.stopped) return;
+    // Mark as stopped before disconnecting so that a connect() aborted by the
+    // disconnect sees the flag and does not report the abort as an error.
+    this.stopped = true;
     await this.livekitRoom.disconnect();
     this._state$.next(ConnectionState.Stopped);
-    this.stopped = true;
     this.logger.debug(
       `stop: DONE disconnecing from lk room ${this.transport.livekit_service_url}`,
     );

From 2e5b5cb186468e8f9eaa48b2ab165b068f82282d Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 3 Sep 2026 14:50:28 +0100
Subject: [PATCH 031/154] Don't attach the background blur processor to an
 ended camera track

If the camera track has already ended by the time the blur processor is
applied to it, MediaStreamTrackProcessor cannot be constructed and
setProcessor rejects. Both call sites used `void`, so this surfaced as

    Unhandled promise rejection: TypeError: Failed to construct
    'MediaStreamTrackProcessor': Input track cannot be ended

(element-call-rageshakes#17225). Skip ended tracks, and catch and log
processor attach/detach failures instead of leaking them.
---
 src/livekit/TrackProcessorContext.test.ts | 62 +++++++++++++++++++++++
 src/livekit/TrackProcessorContext.tsx     | 44 +++++++++++-----
 2 files changed, 93 insertions(+), 13 deletions(-)
 create mode 100644 src/livekit/TrackProcessorContext.test.ts

diff --git a/src/livekit/TrackProcessorContext.test.ts b/src/livekit/TrackProcessorContext.test.ts
new file mode 100644
index 00000000..732fa530
--- /dev/null
+++ b/src/livekit/TrackProcessorContext.test.ts
@@ -0,0 +1,62 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, it, vi } from "vitest";
+import { type LocalVideoTrack } from "livekit-client";
+import {
+  type BackgroundOptions,
+  type ProcessorWrapper,
+} from "@livekit/track-processors";
+
+import { applyProcessor } from "./TrackProcessorContext";
+
+const processor = {} as ProcessorWrapper<BackgroundOptions>;
+
+function mockTrack(
+  readyState: MediaStreamTrackState,
+  current?: ProcessorWrapper<BackgroundOptions>,
+): LocalVideoTrack {
+  return {
+    mediaStreamTrack: { readyState },
+    getProcessor: vi.fn().mockReturnValue(current),
+    setProcessor: vi.fn().mockResolvedValue(undefined),
+    stopProcessor: vi.fn().mockResolvedValue(undefined),
+  } as unknown as LocalVideoTrack;
+}
+
+describe("applyProcessor", () => {
+  it("attaches the processor to a live track", () => {
+    const track = mockTrack("live");
+    applyProcessor(track, processor);
+    expect(track.setProcessor).toHaveBeenCalledWith(processor);
+  });
+
+  it("does not attach the processor to an ended track", () => {
+    const track = mockTrack("ended");
+    applyProcessor(track, processor);
+    expect(track.setProcessor).not.toHaveBeenCalled();
+  });
+
+  it("does not surface a rejected setProcessor", async () => {
+    const track = mockTrack("live");
+    vi.mocked(track.setProcessor).mockRejectedValue(
+      new TypeError("Input track cannot be ended"),
+    );
+    const unhandled = vi.fn();
+    process.on("unhandledRejection", unhandled);
+    applyProcessor(track, processor);
+    await new Promise((r) => setTimeout(r, 0));
+    process.off("unhandledRejection", unhandled);
+    expect(unhandled).not.toHaveBeenCalled();
+  });
+
+  it("stops the processor when none is wanted", () => {
+    const track = mockTrack("live", processor);
+    applyProcessor(track, undefined);
+    expect(track.stopProcessor).toHaveBeenCalled();
+  });
+});
diff --git a/src/livekit/TrackProcessorContext.tsx b/src/livekit/TrackProcessorContext.tsx
index 21cd609e..96897929 100644
--- a/src/livekit/TrackProcessorContext.tsx
+++ b/src/livekit/TrackProcessorContext.tsx
@@ -19,6 +19,7 @@ import {
   useMemo,
 } from "react";
 import { type LocalVideoTrack } from "livekit-client";
+import { logger } from "matrix-js-sdk/lib/logger";
 import { combineLatest, map, type Observable } from "rxjs";
 import { useObservable } from "observable-hooks";
 
@@ -65,6 +66,34 @@ export function useTrackProcessorObservable$(): Observable<ProcessorState> {
   return state$;
 }
 
+/**
+ * Attaches or detaches the processor so that the track matches the desired
+ * state, without throwing.
+ */
+export function applyProcessor(
+  videoTrack: LocalVideoTrack,
+  processor: ProcessorWrapper<BackgroundOptions> | undefined,
+): void {
+  if (processor && !videoTrack.getProcessor()) {
+    // A MediaStreamTrackProcessor cannot be constructed on an ended track
+    // (e.g. the camera was stopped while the processor was being applied),
+    // and setProcessor rejects with a TypeError. The track is going away
+    // anyway, so there is nothing to attach to.
+    if (videoTrack.mediaStreamTrack.readyState === "ended") {
+      logger.debug("Not attaching video processor to an ended track");
+      return;
+    }
+    videoTrack.setProcessor(processor).catch((e) => {
+      logger.warn("Failed to attach video processor", e);
+    });
+  }
+  if (!processor && videoTrack.getProcessor()) {
+    videoTrack.stopProcessor().catch((e) => {
+      logger.warn("Failed to stop video processor", e);
+    });
+  }
+}
+
 /**
  * Updates your video tracks to always use the given processor.
  */
@@ -78,13 +107,7 @@ export const trackProcessorSync = (
     .subscribe(([videoTrack, processorState]) => {
       if (!processorState) return;
       if (!videoTrack) return;
-      const { processor } = processorState;
-      if (processor && !videoTrack.getProcessor()) {
-        void videoTrack.setProcessor(processor);
-      }
-      if (!processor && videoTrack.getProcessor()) {
-        void videoTrack.stopProcessor();
-      }
+      applyProcessor(videoTrack, processorState.processor);
     });
 };
 
@@ -94,12 +117,7 @@ export const useTrackProcessorSync = (
   const { processor } = useTrackProcessor();
   useEffect(() => {
     if (!videoTrack) return;
-    if (processor && !videoTrack.getProcessor()) {
-      void videoTrack.setProcessor(processor);
-    }
-    if (!processor && videoTrack.getProcessor()) {
-      void videoTrack.stopProcessor();
-    }
+    applyProcessor(videoTrack, processor);
   }, [processor, videoTrack]);
 };
 

From bf5482db8c742a7c6729b167e70b2a5a5d2ca81b Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 3 Sep 2026 14:55:31 +0100
Subject: [PATCH 032/154] Surface screen share failures instead of silently
 doing nothing

toggleScreenSharing only had `.catch(logger.error)`, so a getDisplayMedia
request that hangs (element-call-rageshakes#17152: Element Desktop on
Windows, the user pressed the screen share button 14 times in 25 seconds
and the log shows nothing but the toggle lines and livekit-client's
"waiting for pending publication promise timed out") left the user with
a button that does nothing and us with no evidence of why.

Log when a toggle is requested and when it completes or fails, with the
elapsed time, so a hang is visible in the logs. Explicit failures other
than the user cancelling the picker show as a non-modal "Could not start
screen sharing" toast. Nothing is inferred from a toggle taking a long
time: the user may simply be choosing what to share.
---
 locales/en/app.json                           |  1 +
 src/room/InCallView.tsx                       | 17 ++++++
 .../__snapshots__/InCallView.test.tsx.snap    | 20 +++----
 src/state/CallViewModel/CallViewModel.ts      |  7 +++
 .../localMember/LocalMember.test.ts           | 26 ++++++++++
 .../CallViewModel/localMember/LocalMember.ts  | 52 +++++++++++++++++--
 6 files changed, 109 insertions(+), 14 deletions(-)

diff --git a/locales/en/app.json b/locales/en/app.json
index 543942e2..f3d568bb 100644
--- a/locales/en/app.json
+++ b/locales/en/app.json
@@ -116,6 +116,7 @@
     "peer_connection_timeout_description": "Connection to the media server timed out. Try switching to a different network or disabling your VPN. If the problem persists, see our <0>troubleshooting guide</0> or contact your server administrator.",
     "room_creation_restricted": "Failed to create call",
     "room_creation_restricted_description": "Call creation might be restricted to authorized users only. Try again later, or contact your server admin if the problem persists.",
+    "screen_share_failed": "Could not start screen sharing",
     "sticky_events_required": "Homeserver does not support Matrix 2.0 calls",
     "sticky_events_required_description": "This deployment is configured to use Matrix 2.0 call mode, but the homeserver does not advertise support for sticky events (MSC4354). Ask your server admin to upgrade, or switch the deployment to a compatible mode.",
     "unexpected_ec_error": "An unexpected error occurred (<0>Error Code:</0> <1>{{ errorCode }}</1>). Please contact your server admin."
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index a57dcce2..3ea88f81 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -270,6 +270,7 @@ export const InCallView: FC<InCallViewProps> = ({
   const audioParticipants = useBehavior(vm.livekitRoomItems$);
   const participantCount = useBehavior(vm.participantCount$);
   const reconnecting = useBehavior(vm.reconnecting$);
+  const screenShareError = useBehavior(vm.screenShareError$);
   const layout = useBehavior(vm.layout$);
   const edgeToEdge = useBehavior(vm.edgeToEdge$);
   const overflowing = useBehavior(vm.overflowing$);
@@ -399,6 +400,21 @@ export const InCallView: FC<InCallViewProps> = ({
       );
   }
 
+  const onDismissScreenShareToast = useCallback(
+    () => vm.dismissScreenShareError(),
+    [vm],
+  );
+  const screenShareToast = (
+    <Toast
+      onDismiss={onDismissScreenShareToast}
+      open={screenShareError !== null}
+      autoDismiss={5000}
+      modal={false}
+    >
+      {t("error.screen_share_failed")}
+    </Toast>
+  );
+
   // The reconnecting toast cannot be dismissed
   const onDismissReconnectingToast = useCallback(() => {}, []);
   // We need to use a non-modal toast to avoid trapping focus within the toast.
@@ -634,6 +650,7 @@ export const InCallView: FC<InCallViewProps> = ({
       <ReactionsAudioRenderer vm={vm} muted={muteAllAudio} />
       <RingingAudioRenderer vm={ringingVm} muted={muteAllAudio} />
       {reconnectingToast}
+      {screenShareToast}
       {earpieceOverlay}
       <ReactionsOverlay vm={vm} />
       {footer}
diff --git a/src/room/__snapshots__/InCallView.test.tsx.snap b/src/room/__snapshots__/InCallView.test.tsx.snap
index 984e2b12..7cd044bf 100644
--- a/src/room/__snapshots__/InCallView.test.tsx.snap
+++ b/src/room/__snapshots__/InCallView.test.tsx.snap
@@ -171,7 +171,7 @@ exports[`InCallView > rendering > renders 1`] = `
         class="_settingsLogoContainer_20b7b4"
       >
         <button
-          aria-labelledby="_r_8_"
+          aria-labelledby="_r_b_"
           class="_icon-button_1215g_8 _settingsOnlyShowWide_20b7b4"
           data-kind="secondary"
           data-testid="settings-bottom-left"
@@ -306,7 +306,7 @@ exports[`InCallView > rendering > renders 1`] = `
         class="_buttons_20b7b4"
       >
         <button
-          aria-labelledby="_r_d_"
+          aria-labelledby="_r_g_"
           class="_button_1nw83_8 _settingsOnlyShowNarrow_20b7b4 _has-icon_1nw83_60 _icon-only_1nw83_53"
           data-kind="secondary"
           data-size="lg"
@@ -331,7 +331,7 @@ exports[`InCallView > rendering > renders 1`] = `
           aria-busy="false"
           aria-checked="false"
           aria-disabled="true"
-          aria-labelledby="_r_i_"
+          aria-labelledby="_r_l_"
           class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
           data-kind="primary"
           data-size="lg"
@@ -356,7 +356,7 @@ exports[`InCallView > rendering > renders 1`] = `
           aria-busy="false"
           aria-checked="false"
           aria-disabled="true"
-          aria-labelledby="_r_n_"
+          aria-labelledby="_r_q_"
           class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
           data-kind="primary"
           data-size="lg"
@@ -381,7 +381,7 @@ exports[`InCallView > rendering > renders 1`] = `
           aria-disabled="false"
           aria-expanded="false"
           aria-haspopup="true"
-          aria-labelledby="_r_s_"
+          aria-labelledby="_r_v_"
           class="_button_1nw83_8 _raiseHand_20b7b4 _has-icon_1nw83_60 _icon-only_1nw83_53"
           data-kind="secondary"
           data-size="lg"
@@ -404,7 +404,7 @@ exports[`InCallView > rendering > renders 1`] = `
           </svg>
         </button>
         <button
-          aria-labelledby="_r_14_"
+          aria-labelledby="_r_17_"
           class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
           data-kind="primary"
           data-size="lg"
@@ -432,8 +432,8 @@ exports[`InCallView > rendering > renders 1`] = `
         data-size="lg"
       >
         <input
-          aria-labelledby="_r_1a_"
-          name="_r_19_"
+          aria-labelledby="_r_1d_"
+          name="_r_1c_"
           type="radio"
           value="spotlight"
         />
@@ -452,9 +452,9 @@ exports[`InCallView > rendering > renders 1`] = `
           />
         </svg>
         <input
-          aria-labelledby="_r_1f_"
+          aria-labelledby="_r_1i_"
           checked=""
-          name="_r_19_"
+          name="_r_1c_"
           type="radio"
           value="grid"
         />
diff --git a/src/state/CallViewModel/CallViewModel.ts b/src/state/CallViewModel/CallViewModel.ts
index 09f73d1a..c854363b 100644
--- a/src/state/CallViewModel/CallViewModel.ts
+++ b/src/state/CallViewModel/CallViewModel.ts
@@ -267,6 +267,11 @@ export interface CallViewModel {
    * Whether we are sharing our screen.
    */
   sharingScreen$: Behavior<boolean>;
+  /**
+   * The last error from toggling screen sharing, until dismissed.
+   */
+  screenShareError$: Behavior<Error | null>;
+  dismissScreenShareError: () => void;
 
   // UI interactions
   /**
@@ -1858,6 +1863,8 @@ export function createCallViewModel$(
     reconnecting$: localMembership.reconnecting$,
     livekitRoomItems$,
     connected$: localMembership.connected$,
+    screenShareError$: localMembership.screenShareError$,
+    dismissScreenShareError: localMembership.dismissScreenShareError,
   };
 }
 
diff --git a/src/state/CallViewModel/localMember/LocalMember.test.ts b/src/state/CallViewModel/localMember/LocalMember.test.ts
index 9ea6bb72..09d863aa 100644
--- a/src/state/CallViewModel/localMember/LocalMember.test.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.test.ts
@@ -41,6 +41,7 @@ import {
   enterRTCSession,
   PublishState,
   TrackState,
+  watchScreenShareToggle,
 } from "./LocalMember";
 import {
   FailToGetOpenIdToken,
@@ -68,6 +69,31 @@ vi.mock("@livekit/components-core", () => ({
     .mockReturnValue(of({ isScreenShareEnabled: false })),
 }));
 
+describe("watchScreenShareToggle", () => {
+  it("reports nothing when the toggle completes", async () => {
+    const onError = vi.fn();
+    watchScreenShareToggle(Promise.resolve(), true, logger, onError);
+    await flushPromises();
+    expect(onError).not.toHaveBeenCalled();
+  });
+
+  it("reports failures other than the user cancelling", async () => {
+    const onError = vi.fn();
+    const e = new Error("NotReadableError");
+    watchScreenShareToggle(Promise.reject(e), true, logger, onError);
+    await flushPromises();
+    expect(onError).toHaveBeenCalledWith(e);
+  });
+
+  it("does not report the user cancelling the picker", async () => {
+    const onError = vi.fn();
+    const cancelled = new DOMException("Permission denied", "NotAllowedError");
+    watchScreenShareToggle(Promise.reject(cancelled), true, logger, onError);
+    await flushPromises();
+    expect(onError).not.toHaveBeenCalled();
+  });
+});
+
 describe("LocalMembership", () => {
   describe("enterRTCSession", () => {
     it("It joins the correct Session", () => {
diff --git a/src/state/CallViewModel/localMember/LocalMember.ts b/src/state/CallViewModel/localMember/LocalMember.ts
index 2f4fde26..dfe8936a 100644
--- a/src/state/CallViewModel/localMember/LocalMember.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.ts
@@ -196,6 +196,11 @@ export const createLocalMembership$ = ({
    * Callback to toggle screen sharing. If null, screen sharing is not possible.
    */
   toggleScreenSharing: (() => void) | null;
+  /**
+   * The last error from toggling screen sharing, until dismissed.
+   */
+  screenShareError$: Behavior<Error | null>;
+  dismissScreenShareError: () => void;
   // tracks$: Behavior<LocalTrack[]>;
   participant$: Behavior<LocalParticipant | null>;
   connection$: Behavior<Connection | null>;
@@ -706,6 +711,7 @@ export const createLocalMembership$ = ({
     ),
   );
 
+  const screenShareError$ = new BehaviorSubject<Error | null>(null);
   let toggleScreenSharing: (() => void) | null = null;
   if (
     "getDisplayMedia" in (navigator.mediaDevices ?? {}) &&
@@ -777,13 +783,18 @@ export const createLocalMembership$ = ({
       // We also allow screen sharing to be toggled even if the connection
       // is still initializing or publishing tracks, because there's no
       // technical reason to disallow this. LiveKit will publish if it can.
-      participant$.value
-        ?.setScreenShareEnabled(
+      const participant = participant$.value;
+      if (!participant) return;
+      watchScreenShareToggle(
+        participant.setScreenShareEnabled(
           targetScreenshareState,
           screenshareSettings,
           publishOptions,
-        )
-        .catch(logger.error);
+        ),
+        targetScreenshareState,
+        logger,
+        (e) => screenShareError$.next(e),
+      );
     };
   }
 
@@ -802,11 +813,44 @@ export const createLocalMembership$ = ({
     ),
     sharingScreen$,
     toggleScreenSharing,
+    screenShareError$,
+    dismissScreenShareError: () => screenShareError$.next(null),
     connection$: localConnection$,
     internalLoggerRef: logger,
   };
 };
 
+/**
+ * Logs the outcome of a screen share toggle and reports failures.
+ *
+ * getDisplayMedia may legitimately take a long time (the user is choosing
+ * what to share) or never settle at all, so nothing is inferred from silence:
+ * the request and its completion are logged with the elapsed time so that a
+ * hang is visible in the logs, and only an explicit rejection is reported.
+ *
+ * The user cancelling the picker rejects with a NotAllowedError; that is
+ * logged but not reported.
+ */
+export function watchScreenShareToggle(
+  toggle: Promise<unknown>,
+  enable: boolean,
+  logger: Logger,
+  onError: (e: Error) => void,
+): void {
+  const what = `Screen share ${enable ? "start" : "stop"}`;
+  const started = Date.now();
+  const elapsed = (): string => `${Date.now() - started} ms`;
+  logger.info(`${what} requested`);
+  toggle.then(
+    () => logger.info(`${what} completed in ${elapsed()}`),
+    (e: unknown) => {
+      logger.error(`${what} failed after ${elapsed()}:`, e);
+      if (e instanceof DOMException && e.name === "NotAllowedError") return;
+      onError(e instanceof Error ? e : new Error(String(e)));
+    },
+  );
+}
+
 export function observeSharingScreen$(p: Participant): Observable<boolean> {
   return observeParticipantEvents(
     p,

From db0f6837ce4fd8d0b3b5d627b2b430c466bf4740 Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Thu, 3 Sep 2026 16:10:26 +0200
Subject: [PATCH 033/154] Give the component what the app shell was providing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The component built and typechecked in the previous commit, but only because
nothing had rendered it. Everything Element Call needs that `src/main.tsx`
side-loads was missing from it.

Its stylesheet: only main.tsx imported index.css, so the library build emitted
CSS-module styles with every `--cpd-*` and `--font-size-*` unresolved. Split
into base.css, which both the app and the component import, and the rules that
are about owning a page, which only the app does. The split is a straight move
— comment-stripped and sorted, the old file and the two new ones differ by
exactly one line — and that line is the deliberate part: `.no-scroll-body`
becomes `body.no-scroll-body`. Element Call adds that class to whatever it
treats as its root, and since the root can now be a container, `position:
fixed` would have taken that container out of the host's layout. Pinning the
page is what it always meant.

Its translations: `initializeElementCall` called `i18n.init` with neither
resources nor a backend, so every key would have rendered as itself. English is
bundled in. The app fetches locale files from URLs its own build emits, which a
host serving the library from somewhere else could not resolve, so how a host
picks a language is left open.

And the types a host needs: `HostBridge` alone is not enough to implement
`HostBridge` — `HostRequest`, `DeviceMuteState`, `DeviceMuteRequest` and
`JoinCallData` all appear in its signatures, and `ConfigOptions` in
`initializeElementCall`'s.
---
 component/ElementCall.module.css |   8 ++
 component/index.tsx              |  31 ++++-
 src/base.css                     | 203 +++++++++++++++++++++++++++++++
 src/index.css                    | 191 ++---------------------------
 4 files changed, 250 insertions(+), 183 deletions(-)
 create mode 100644 src/base.css

diff --git a/component/ElementCall.module.css b/component/ElementCall.module.css
index 399178ae..461ad9b0 100644
--- a/component/ElementCall.module.css
+++ b/component/ElementCall.module.css
@@ -22,3 +22,11 @@ using an iframe. */
   -moz-osx-font-smoothing: grayscale;
   -webkit-tap-highlight-color: transparent;
 }
+
+/* Compound's overlay container, which holds tooltips and popovers, has to fill
+the container for the elements inside it to be positioned against it. The
+standalone page does the same for the container under `#root`. */
+.root > [data-overlay-container] {
+  position: relative;
+  block-size: 100%;
+}
diff --git a/component/index.tsx b/component/index.tsx
index e904c8be..1d3155d3 100644
--- a/component/index.tsx
+++ b/component/index.tsx
@@ -17,6 +17,18 @@ Please see LICENSE in the repository root for full details.
  * host instead, or is confined to the container it is mounted in.
  */
 
+// The design tokens, fonts and element defaults every Element Call stylesheet
+// builds on.
+//
+// Where these land relative to the component stylesheets is the bundler's
+// choice — the standalone app puts them first, this build puts them in the
+// middle — so nothing in base.css may depend on winning or losing against a
+// component's own rules at equal specificity. It currently does not: what it
+// declares unlayered is custom properties on Element Call's root, which
+// components inherit rather than compete with, and everything from Compound
+// sits in a `@layer`, which loses to unlayered rules either way.
+import "../src/base.css";
+
 import { type FC, type JSX, type ReactNode, useMemo, useState } from "react";
 import { type MatrixClient } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/lib/logger";
@@ -26,6 +38,7 @@ import { TooltipProvider } from "@vector-im/compound-web";
 import { shouldPolyfill as shouldPolyfillSegmenter } from "@formatjs/intl-segmenter/should-polyfill";
 import { shouldPolyfill as shouldPolyfillDurationFormat } from "@formatjs/intl-durationformat/should-polyfill.js";
 
+import EN from "../locales/en/app.json";
 import { ElementCallView } from "../src/ElementCallView";
 import { ClientProvider } from "../src/ClientContext";
 import {
@@ -50,7 +63,17 @@ import { useTheme } from "../src/useTheme";
 import { useInitial } from "../src/useInitial";
 import styles from "./ElementCall.module.css";
 
-export { type HostBridge } from "../src/HostBridge";
+// Everything needed to implement a HostBridge, not just the interface itself
+export {
+  type DeviceMuteRequest,
+  type DeviceMuteState,
+  type HostBridge,
+  type HostRequest,
+} from "../src/HostBridge";
+export { type JoinCallData } from "../src/widget";
+// The deployment-wide configuration, as distinct from ElementCallConfiguration
+// above, which is per call
+export { type ConfigOptions } from "../src/config/ConfigOptions";
 
 /**
  * How Element Call should behave. Everything is optional; anything left out
@@ -102,6 +125,12 @@ export async function initializeElementCall(
     contextSeparator: "|",
     lng: "en",
     interpolation: { escapeValue: false },
+    // English only, bundled in. The standalone app fetches its locale files at
+    // runtime from URLs its own build emits, which a host serving the library
+    // from elsewhere could not resolve; bundling one language at least keeps
+    // the component self-contained. Letting a host supply the rest, or its own
+    // translations, is still to do.
+    resources: { en: { app: EN } },
   });
 }
 
diff --git a/src/base.css b/src/base.css
new file mode 100644
index 00000000..0d424e64
--- /dev/null
+++ b/src/base.css
@@ -0,0 +1,203 @@
+/*
+Copyright 2021-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+/* The styles Element Call needs wherever it is shown: the design tokens, fonts
+and element defaults its own stylesheets build on top of.
+
+Split out from index.css so that Element Call embedded in a host application
+can have these without also being given the standalone page's layout, which
+would style the host's own document. What remains here does still reach outside
+Element Call's container — normalize.css and the typography below use bare
+element selectors, and the custom properties are declared on `:root` — so a
+host gets those too. Narrowing them needs a real host to check against, so it
+waits for the Element Web integration rather than being guessed at here.
+
+Nothing here should depend on where it lands relative to Element Call's
+component stylesheets: the bundler decides that, and it decides differently for
+the app and for the component build. */
+
+@layer normalize, compound-legacy, compound;
+
+@import url("@fontsource/inter/400.css");
+@import url("@fontsource/inter/500.css");
+@import url("@fontsource/inter/600.css");
+@import url("@fontsource/inter/700.css");
+@import url("@fontsource/inconsolata/400.css");
+@import url("@fontsource/inconsolata/700.css");
+
+@import url("normalize.css/normalize.css") layer(normalize);
+@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
+@import url("@vector-im/compound-web/dist/style.css") layer(compound.components);
+
+:root {
+  --font-scale: 1;
+  --font-size-micro: calc(10px * var(--font-scale));
+  --font-size-caption: calc(12px * var(--font-scale));
+  --font-size-body: calc(15px * var(--font-scale));
+  --font-size-subtitle: calc(18px * var(--font-scale));
+  --font-size-title: calc(24px * var(--font-scale));
+  --font-size-headline: calc(32px * var(--font-scale));
+
+  --cpd-color-border-accent: var(--cpd-color-green-800);
+  /* The distance to inset non-full-width content from the edge of the window
+  along the inline axis. This ramps up from 16px for typical mobile windows, to
+  96px for typical desktop windows, and accounts for the safe area. */
+  --content-inset-left: calc(
+    env(safe-area-inset-left) +
+      min(
+        var(--cpd-space-24x),
+        max(var(--cpd-space-4x), calc((100vw - 900px) / 3))
+      )
+  );
+  --content-inset-right: calc(
+    env(safe-area-inset-right) +
+      min(
+        var(--cpd-space-24x),
+        max(var(--cpd-space-4x), calc((100vw - 900px) / 3))
+      )
+  );
+  --small-drop-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
+  --big-drop-shadow: 0px 0px 24px 0px #1b1d221a;
+  --subtle-drop-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+
+  --call-view-overlay-layer: 1;
+  --call-view-header-footer-layer: 2;
+}
+
+:root,
+[class*="cpd-theme-"] {
+  --video-tile-background: var(--cpd-color-bg-subtle-secondary);
+}
+
+.cpd-theme-dark {
+  --cpd-color-border-accent: var(--cpd-color-green-1100);
+  --stopgap-color-on-solid-accent: var(--cpd-color-text-primary);
+  --stopgap-background-85: rgba(16, 19, 23, 0.85);
+}
+
+@media (min-height: 330px) {
+  [data-element-call-root][data-background="gradient"]::before {
+    content: "";
+    position: fixed;
+    /* Chromium abruptly fades our images to fully transparent at the edge of
+    the element. If we just make the element a little bigger than the viewport,
+    this is no longer visible. */
+    inset: -20px;
+    background-image: url("graphics/mobile-gradient.png");
+    background-size: 1400px 305px;
+    background-position: bottom;
+    background-repeat: no-repeat;
+  }
+
+  [data-element-call-root][data-background="gradient"][data-platform="desktop"]::before {
+    background-image: url("graphics/desktop-gradient.png");
+    background-size: max(1440px, 100vw) max(1440px, 100vh);
+    background-position: center;
+  }
+}
+
+/* We use this to not render the page at all until we know the theme.*/
+.no-theme {
+  opacity: 0;
+}
+
+/* On Android and iOS, prefer native system fonts. The global.css file of
+Compound Web is where these variables ultimately get consumed to set the page's
+font-family. */
+[data-element-call-root][data-platform="android"] {
+  --cpd-font-family-sans: "Roboto", "Noto", "Inter", sans-serif;
+}
+
+[data-element-call-root][data-platform="ios"] {
+  --cpd-font-family-sans:
+    -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
+}
+
+@layer compound-legacy {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  a {
+    margin-top: 0;
+  }
+
+  /* Headline Semi Bold */
+  h1 {
+    font-weight: 600;
+    font-size: var(--font-size-headline);
+  }
+
+  /* Title */
+  h2 {
+    font-weight: 600;
+    font-size: var(--font-size-title);
+  }
+
+  /* Subtitle */
+  h3 {
+    font-weight: 600;
+    font-size: var(--font-size-subtitle);
+  }
+
+  /* Body Semi Bold */
+  h4 {
+    font-weight: 600;
+    font-size: var(--font-size-body);
+  }
+
+  h1,
+  h2,
+  h3 {
+    line-height: 1.2;
+  }
+
+  /* Body */
+  p {
+    font-size: var(--font-size-body);
+    line-height: var(--font-size-title);
+  }
+
+  hr {
+    width: calc(100% - 24px);
+    border: none;
+    border-top: 1px solid var(--cpd-color-border-interactive-secondary);
+    color: var(--cpd-color-border-interactive-secondary);
+    overflow: visible;
+    text-align: center;
+    height: 5px;
+    font-weight: 600;
+    font-size: var(--font-size-body);
+    line-height: 24px;
+    margin: 0 12px;
+  }
+
+  summary {
+    font-size: var(--font-size-body);
+  }
+
+  details > :not(summary) {
+    margin-left: var(--font-size-body);
+  }
+
+  details[open] > summary {
+    margin-bottom: var(--font-size-body);
+  }
+}
+
+/* normalize.css sets the focus rings on buttons in Firefox to an unusual custom
+outline, which is inconsistent with our other components and is not sufficiently
+visible to be accessible. This resets it back to 'auto'. */
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: auto;
+}
diff --git a/src/index.css b/src/index.css
index 12f3951d..7188f5e7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,64 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-@layer normalize, compound-legacy, compound;
+/* Styles for Element Call as a page of its own. The parts that apply wherever
+Element Call is shown live in base.css; these are about owning the document,
+and are not loaded when a host embeds Element Call as a component. */
 
-@import url("@fontsource/inter/400.css");
-@import url("@fontsource/inter/500.css");
-@import url("@fontsource/inter/600.css");
-@import url("@fontsource/inter/700.css");
-@import url("@fontsource/inconsolata/400.css");
-@import url("@fontsource/inconsolata/700.css");
-
-@import url("normalize.css/normalize.css") layer(normalize);
-@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
-@import url("@vector-im/compound-web/dist/style.css") layer(compound.components);
-
-:root {
-  --font-scale: 1;
-  --font-size-micro: calc(10px * var(--font-scale));
-  --font-size-caption: calc(12px * var(--font-scale));
-  --font-size-body: calc(15px * var(--font-scale));
-  --font-size-subtitle: calc(18px * var(--font-scale));
-  --font-size-title: calc(24px * var(--font-scale));
-  --font-size-headline: calc(32px * var(--font-scale));
-
-  --cpd-color-border-accent: var(--cpd-color-green-800);
-  /* The distance to inset non-full-width content from the edge of the window
-  along the inline axis. This ramps up from 16px for typical mobile windows, to
-  96px for typical desktop windows, and accounts for the safe area. */
-  --content-inset-left: calc(
-    env(safe-area-inset-left) +
-      min(
-        var(--cpd-space-24x),
-        max(var(--cpd-space-4x), calc((100vw - 900px) / 3))
-      )
-  );
-  --content-inset-right: calc(
-    env(safe-area-inset-right) +
-      min(
-        var(--cpd-space-24x),
-        max(var(--cpd-space-4x), calc((100vw - 900px) / 3))
-      )
-  );
-  --small-drop-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
-  --big-drop-shadow: 0px 0px 24px 0px #1b1d221a;
-  --subtle-drop-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-
-  --call-view-overlay-layer: 1;
-  --call-view-header-footer-layer: 2;
-}
-
-:root,
-[class*="cpd-theme-"] {
-  --video-tile-background: var(--cpd-color-bg-subtle-secondary);
-}
-
-.cpd-theme-dark {
-  --cpd-color-border-accent: var(--cpd-color-green-1100);
-  --stopgap-color-on-solid-accent: var(--cpd-color-text-primary);
-  --stopgap-background-85: rgba(16, 19, 23, 0.85);
-}
+@import url("./base.css");
 
 body {
   background-color: var(--cpd-color-bg-canvas-default);
@@ -74,39 +21,16 @@ body {
   -webkit-tap-highlight-color: transparent;
 }
 
-@media (min-height: 330px) {
-  [data-element-call-root][data-background="gradient"]::before {
-    content: "";
-    position: fixed;
-    /* Chromium abruptly fades our images to fully transparent at the edge of
-    the element. If we just make the element a little bigger than the viewport,
-    this is no longer visible. */
-    inset: -20px;
-    background-image: url("graphics/mobile-gradient.png");
-    background-size: 1400px 305px;
-    background-position: bottom;
-    background-repeat: no-repeat;
-  }
-
-  [data-element-call-root][data-background="gradient"][data-platform="desktop"]::before {
-    background-image: url("graphics/desktop-gradient.png");
-    background-size: max(1440px, 100vw) max(1440px, 100vh);
-    background-position: center;
-  }
-}
-
 /* This prohibits the view to scroll for pages smaller than 122px in width
-we use this for mobile pip webviews */
-.no-scroll-body {
+we use this for mobile pip webviews. Element Call adds this class to whatever
+it treats as its root, but it is only ever the page that should be pinned like
+this — done to a container inside a host application it would take that
+container out of the host's layout — so the selector says so. */
+body.no-scroll-body {
   position: fixed;
   width: 100%;
 }
 
-/* We use this to not render the page at all until we know the theme.*/
-.no-theme {
-  opacity: 0;
-}
-
 html,
 body,
 #root {
@@ -123,104 +47,7 @@ body,
   isolation: isolate;
 }
 
-/* On Android and iOS, prefer native system fonts. The global.css file of
-Compound Web is where these variables ultimately get consumed to set the page's
-font-family. */
-[data-element-call-root][data-platform="android"] {
-  --cpd-font-family-sans: "Roboto", "Noto", "Inter", sans-serif;
-}
-
-[data-element-call-root][data-platform="ios"] {
-  --cpd-font-family-sans:
-    -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
-}
-
-@layer compound-legacy {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p,
-  a {
-    margin-top: 0;
-  }
-
-  /* Headline Semi Bold */
-  h1 {
-    font-weight: 600;
-    font-size: var(--font-size-headline);
-  }
-
-  /* Title */
-  h2 {
-    font-weight: 600;
-    font-size: var(--font-size-title);
-  }
-
-  /* Subtitle */
-  h3 {
-    font-weight: 600;
-    font-size: var(--font-size-subtitle);
-  }
-
-  /* Body Semi Bold */
-  h4 {
-    font-weight: 600;
-    font-size: var(--font-size-body);
-  }
-
-  h1,
-  h2,
-  h3 {
-    line-height: 1.2;
-  }
-
-  /* Body */
-  p {
-    font-size: var(--font-size-body);
-    line-height: var(--font-size-title);
-  }
-
-  hr {
-    width: calc(100% - 24px);
-    border: none;
-    border-top: 1px solid var(--cpd-color-border-interactive-secondary);
-    color: var(--cpd-color-border-interactive-secondary);
-    overflow: visible;
-    text-align: center;
-    height: 5px;
-    font-weight: 600;
-    font-size: var(--font-size-body);
-    line-height: 24px;
-    margin: 0 12px;
-  }
-
-  summary {
-    font-size: var(--font-size-body);
-  }
-
-  details > :not(summary) {
-    margin-left: var(--font-size-body);
-  }
-
-  details[open] > summary {
-    margin-bottom: var(--font-size-body);
-  }
-}
-
 #root > [data-overlay-container] {
   position: relative;
   height: 100%;
 }
-
-/* normalize.css sets the focus rings on buttons in Firefox to an unusual custom
-outline, which is inconsistent with our other components and is not sufficiently
-visible to be accessible. This resets it back to 'auto'. */
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: auto;
-}

From 9f5fa6049fbce218bcd65df9fdf77970b6e3f212 Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Thu, 3 Sep 2026 16:11:39 +0200
Subject: [PATCH 034/154] Add a harness for Element Call embedded as a
 component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`pnpm dev:component` serves a page that stands in for a host application: it
signs in twice against the development backend and shows two calls side by
side, in resizable boxes, with furniture of its own around them. Two devices of
one account, so a real call happens between the two components and anything
Element Call keeps once per process rather than once per call shows itself.

The host bridge is driven by hand and reports both directions in a log along
the bottom, which is the first exercise the theme, hang-up and device-mute
requests have had outside widget mode. Each pane can be unmounted and remounted
to see what Element Call leaves behind, and there is a `position: fixed` dialog
belonging to the host to see whether it covers the calls. The page uses none of
Element Call's design tokens, so anything that looks styled outside a pane came
from Element Call reaching out of its container. It reaches Element Call only
through the component's public interface, which is how the exports missing from
that interface came to light.

Three things about the component build the harness turned up on the way, all
too small to be worth their own commits:

- It copied `public/` into `dist/`, including the developer's own gitignored
  config.json, into output we would publish. `publicDir: false`, as the
  embedded build already does. The sdk build has the same leak; untouched.
- `pnpm lint:externals` now exists, which the build config already claimed it
  did. It reads the external list out of that config and fails if the source
  imports React, the Matrix SDK or LiveKit by a path the list does not name.
  Since the bundler silently ignores the pattern form of that option, an
  unnamed subpath is bundled with no warning at all — which is how a host would
  end up with a second React.
- `lint:oxlint` ran over `src playwright`, so nothing in `component/` had ever
  been linted.

Serving a page also meant the shared plugin list could no longer inject the
app's HTML entry point unconditionally, so that is now optional — and off for
the library build too, which never had an HTML page to inject it into.
---
 README.md                             |  17 ++
 component/dev/DevHostBridge.ts        | 103 +++++++++
 component/dev/Harness.module.css      | 140 ++++++++++++
 component/dev/Harness.tsx             | 298 ++++++++++++++++++++++++++
 component/dev/host.css                |  23 ++
 component/dev/index.html              |  21 ++
 component/dev/main.tsx                |  42 ++++
 component/dev/session.ts              |  79 +++++++
 knip.ts                               |   1 +
 package.json                          |   8 +-
 scripts/check-component-externals.mjs | 140 ++++++++++++
 vite-component-dev.config.ts          |  77 +++++++
 vite-component.config.ts              |  13 +-
 vite.config.ts                        |  12 +-
 14 files changed, 967 insertions(+), 7 deletions(-)
 create mode 100644 component/dev/DevHostBridge.ts
 create mode 100644 component/dev/Harness.module.css
 create mode 100644 component/dev/Harness.tsx
 create mode 100644 component/dev/host.css
 create mode 100644 component/dev/index.html
 create mode 100644 component/dev/main.tsx
 create mode 100644 component/dev/session.ts
 create mode 100644 scripts/check-component-externals.mjs
 create mode 100644 vite-component-dev.config.ts

diff --git a/README.md b/README.md
index ecbabcf2..792665f9 100644
--- a/README.md
+++ b/README.md
@@ -213,6 +213,23 @@ See also:
 
 - [Developing with linked packages](./docs/linking.md)
 
+#### Element Call as a component (experimental)
+
+Element Call can also be embedded directly into another React application
+rather than being loaded in an iframe as a widget. `pnpm build:component`
+builds it as a library, and
+
+```sh
+pnpm dev:component
+```
+
+serves a harness on port 3001 that stands in for such an application: it signs
+in twice against the development backend and shows two calls side by side, in
+resizable boxes, with page furniture of its own around them. Use it to see how
+Element Call behaves when it does not own the page — the size it is given,
+whether it stays inside its container, and what it says to its host, which is
+logged along the bottom.
+
 ### Backend
 
 A docker compose file `docker-compose-dev.yml` is provided to start the
diff --git a/component/dev/DevHostBridge.ts b/component/dev/DevHostBridge.ts
new file mode 100644
index 00000000..417e4833
--- /dev/null
+++ b/component/dev/DevHostBridge.ts
@@ -0,0 +1,103 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { NEVER, Subject } from "rxjs";
+
+import {
+  type DeviceMuteRequest,
+  type DeviceMuteState,
+  type HostBridge,
+  type HostRequest,
+} from "../index";
+
+/**
+ * A host bridge that reports everything it is told and can be driven by hand,
+ * so that the harness can watch both directions of the conversation between
+ * Element Call and its host.
+ */
+export interface DevHostBridge extends HostBridge {
+  /** Tells Element Call the host has changed theme. */
+  requestTheme(name: string): void;
+  /** Tells Element Call to leave the call. */
+  requestHangUp(): void;
+  /** Asks Element Call to change, and report back, its mute state. */
+  requestDeviceMute(request: DeviceMuteRequest): void;
+}
+
+export function createDevHostBridge(
+  log: (message: string) => void,
+  /** What the host does when Element Call asks to be closed. */
+  onClose: () => void,
+): DevHostBridge {
+  const themeChange$ = new Subject<HostRequest<{ name?: string }>>();
+  const hangUp$ = new Subject<HostRequest<Record<string, never>>>();
+  const deviceMute$ = new Subject<
+    HostRequest<DeviceMuteRequest, DeviceMuteState>
+  >();
+
+  const ask = <Data, Reply>(
+    subject: Subject<HostRequest<Data, Reply>>,
+    name: string,
+    data: Data,
+  ): void => {
+    // Worth saying out loud: a request nobody is subscribed to is silently
+    // dropped, and that is exactly the sort of thing the harness is for.
+    if (!subject.observed) {
+      log(`← ${name}: nothing is listening`);
+      return;
+    }
+    log(`← ${name}`);
+    subject.next({
+      data,
+      reply: (reply): void =>
+        log(
+          `→ ${name} acknowledged${reply === undefined ? "" : `: ${JSON.stringify(reply)}`}`,
+        ),
+    });
+  };
+
+  /**
+   * Records something Element Call told the host. Nothing is sent anywhere, so
+   * this is only asynchronous because a real host's answer would have to be.
+   */
+  const told = async (message: string): Promise<void> => {
+    log(`→ ${message}`);
+    await Promise.resolve();
+  };
+
+  return {
+    setAlwaysOnScreen: async (alwaysOnScreen): Promise<void> =>
+      await told(`setAlwaysOnScreen(${alwaysOnScreen})`),
+    contentLoaded: async (): Promise<void> => await told("contentLoaded"),
+    notifyJoined: async (): Promise<void> => await told("notifyJoined"),
+    notifyHungUp: async (): Promise<void> => await told("notifyHungUp"),
+    notifyDeviceMute: async (state): Promise<void> =>
+      await told(
+        `notifyDeviceMute(audio: ${state.audio_enabled}, video: ${state.video_enabled})`,
+      ),
+    // Present because this host really can dismiss Element Call, which is what
+    // makes it offer a close affordance at all
+    close: async (): Promise<void> => {
+      await told("close");
+      onClose();
+    },
+
+    themeChange$,
+    // The harness does not preload a call, so this is never asked for
+    join$: NEVER,
+    hangUp$,
+    deviceMute$,
+
+    supportsReactions: true,
+
+    requestTheme: (name): void =>
+      ask(themeChange$, `themeChange(${name})`, { name }),
+    requestHangUp: (): void => ask(hangUp$, "hangUp", {}),
+    requestDeviceMute: (request): void =>
+      ask(deviceMute$, `deviceMute(${JSON.stringify(request)})`, request),
+  };
+}
diff --git a/component/dev/Harness.module.css b/component/dev/Harness.module.css
new file mode 100644
index 00000000..0b116a24
--- /dev/null
+++ b/component/dev/Harness.module.css
@@ -0,0 +1,140 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+.credentials {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-inline-size: 420px;
+  margin: 48px auto;
+  padding: 24px;
+  background-color: #ffffff;
+  border: 1px solid #d4d4d8;
+  border-radius: 8px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.error {
+  color: #b91c1c;
+}
+
+.harness {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  block-size: 100%;
+}
+
+.header,
+.paneBar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  border-block-end: 1px solid #d4d4d8;
+  background-color: #ffffff;
+}
+
+.header h1 {
+  font-size: 16px;
+  margin: 0;
+}
+
+.middle {
+  display: flex;
+  min-block-size: 0;
+}
+
+.sidebar {
+  flex: 0 0 220px;
+  padding: 12px;
+  border-inline-end: 1px solid #d4d4d8;
+  background-color: #ffffff;
+  overflow-y: auto;
+}
+
+.panes {
+  display: flex;
+  flex-wrap: wrap;
+  /* So that a pane is the size it was dragged to, rather than being stretched
+  to fill the row */
+  align-items: flex-start;
+  align-content: flex-start;
+  gap: 16px;
+  padding: 16px;
+  flex: 1;
+  min-inline-size: 0;
+  overflow: auto;
+}
+
+.pane {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #d4d4d8;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: #ffffff;
+}
+
+.paneBar {
+  flex-wrap: wrap;
+  gap: 6px;
+  border-block-end: none;
+}
+
+/* The space the host gives Element Call. Resizable so that the sizes it has to
+cope with can be found by dragging rather than by rebuilding, and `overflow:
+hidden` both to enable the resize handle and to show up anything inside Element
+Call that does not fit the box it was given. */
+.paneCall {
+  inline-size: 560px;
+  block-size: 420px;
+  min-inline-size: 180px;
+  min-block-size: 180px;
+  resize: both;
+  overflow: hidden;
+}
+
+.log {
+  max-block-size: 180px;
+  overflow-y: auto;
+  padding: 8px 12px;
+  border-block-start: 1px solid #d4d4d8;
+  background-color: #ffffff;
+  font-size: 12px;
+}
+
+.log h2 {
+  font-size: 13px;
+  margin: 0 0 4px;
+}
+
+.log ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* A host overlay, which Element Call must not be able to draw over */
+.dialogScrim {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background-color: rgb(0 0 0 / 50%);
+  z-index: 10;
+}
+
+.dialog {
+  padding: 24px;
+  border-radius: 8px;
+  background-color: #ffffff;
+}
diff --git a/component/dev/Harness.tsx b/component/dev/Harness.tsx
new file mode 100644
index 00000000..ddb69d32
--- /dev/null
+++ b/component/dev/Harness.tsx
@@ -0,0 +1,298 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  type FC,
+  type FormEvent,
+  type ReactNode,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
+import { type MatrixClient } from "matrix-js-sdk";
+import { logger } from "matrix-js-sdk/lib/logger";
+
+import { ElementCall } from "../index";
+import { createDevHostBridge } from "./DevHostBridge";
+import { createSession, joinRoom } from "./session";
+import styles from "./Harness.module.css";
+
+interface Credentials {
+  homeserver: string;
+  username: string;
+  password: string;
+  room: string;
+}
+
+const CREDENTIALS_KEY = "element-call-component-harness";
+
+const DEFAULT_CREDENTIALS: Credentials = {
+  homeserver: "https://synapse.m.localhost",
+  username: "",
+  password: "",
+  room: "",
+};
+
+/** The last credentials used, so that a reload does not mean typing them again. */
+function loadCredentials(): Credentials {
+  try {
+    const stored = localStorage.getItem(CREDENTIALS_KEY);
+    if (stored !== null)
+      return { ...DEFAULT_CREDENTIALS, ...(JSON.parse(stored) as Credentials) };
+  } catch (e) {
+    logger.warn("Could not read the stored harness credentials", e);
+  }
+  return DEFAULT_CREDENTIALS;
+}
+
+interface Session {
+  label: string;
+  client: MatrixClient;
+}
+
+type State =
+  | { phase: "credentials" }
+  | { phase: "starting"; progress: string }
+  | { phase: "started"; roomId: string; sessions: Session[] }
+  | { phase: "failed"; error: string };
+
+interface LogEntry {
+  pane: string;
+  message: string;
+  at: string;
+}
+
+/**
+ * One embedded Element Call, with the controls a host would have over it: the
+ * requests it can make of Element Call, and the ability to take it off screen
+ * altogether.
+ */
+const Pane: FC<{
+  session: Session;
+  roomId: string;
+  log: (pane: string, message: string) => void;
+}> = ({ session, roomId, log }): ReactNode => {
+  const [mounted, setMounted] = useState(true);
+
+  const bridge = useMemo(
+    () =>
+      createDevHostBridge(
+        (message) => log(session.label, message),
+        () => setMounted(false),
+      ),
+    [log, session.label],
+  );
+
+  return (
+    <section className={styles.pane}>
+      <div className={styles.paneBar}>
+        <strong>{session.label}</strong>
+        <code>{session.client.getDeviceId()}</code>
+        <button onClick={(): void => setMounted((m) => !m)}>
+          {mounted ? "Unmount" : "Mount"}
+        </button>
+        <button onClick={(): void => bridge.requestTheme("light")}>
+          Light
+        </button>
+        <button onClick={(): void => bridge.requestTheme("dark")}>Dark</button>
+        <button
+          onClick={(): void =>
+            bridge.requestDeviceMute({ audio_enabled: false })
+          }
+        >
+          Mute
+        </button>
+        <button onClick={(): void => bridge.requestHangUp()}>Hang up</button>
+      </div>
+      {/* Resizable, because how Element Call copes with the size it is given is
+      one of the things we cannot find out from the standalone app */}
+      <div className={styles.paneCall}>
+        {mounted && (
+          <ElementCall
+            client={session.client}
+            roomId={roomId}
+            hostBridge={bridge}
+          />
+        )}
+      </div>
+    </section>
+  );
+};
+
+/** Host furniture, to make it visible if Element Call styles anything but itself. */
+const HostChrome: FC = (): ReactNode => (
+  <nav className={styles.sidebar}>
+    <h2>Host chrome</h2>
+    <p>
+      This column belongs to the host. If Element Call&apos;s stylesheet reaches
+      outside its own container, it shows up here.
+    </p>
+    <hr />
+    <ul>
+      <li>Some room</li>
+      <li>Another room</li>
+    </ul>
+    <button>A host button</button>
+  </nav>
+);
+
+/**
+ * A dialog of the host's own, over the top of the calls. Element Call embedded
+ * in a host has to sit underneath this — being unable to is one of the reasons
+ * for embedding it rather than putting it in an iframe.
+ */
+const HostDialog: FC<{ onClose: () => void }> = ({ onClose }): ReactNode => (
+  <div className={styles.dialogScrim}>
+    <div className={styles.dialog}>
+      <h2>A dialog belonging to the host</h2>
+      <p>This should cover the calls completely.</p>
+      <button onClick={onClose}>Close</button>
+    </div>
+  </div>
+);
+
+/**
+ * Stands in for a host application embedding Element Call: it owns the Matrix
+ * clients, the page and the space each call is given, and reaches Element Call
+ * only through the component's public interface.
+ *
+ * Two calls at once, from two devices of the same account, so that a real call
+ * happens between them and anything Element Call keeps once per process rather
+ * than once per call shows itself.
+ */
+export const Harness: FC = (): ReactNode => {
+  const [credentials, setCredentials] = useState(loadCredentials);
+  const [state, setState] = useState<State>({ phase: "credentials" });
+  const [entries, setEntries] = useState<LogEntry[]>([]);
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  const log = useCallback((pane: string, message: string): void => {
+    setEntries((entries) =>
+      [
+        ...entries,
+        { pane, message, at: new Date().toLocaleTimeString() },
+      ].slice(-100),
+    );
+  }, []);
+
+  const start = useCallback(
+    (event: FormEvent): void => {
+      event.preventDefault();
+      localStorage.setItem(CREDENTIALS_KEY, JSON.stringify(credentials));
+      const { homeserver, username, password, room } = credentials;
+
+      const progress = (message: string): void =>
+        setState({ phase: "starting", progress: message });
+      progress("Starting");
+
+      void (async (): Promise<void> => {
+        try {
+          // One at a time: two logins at once from the same account is the
+          // shape of request homeservers rate limit
+          const sessions: Session[] = [];
+          for (const label of ["Call A", "Call B"])
+            sessions.push({
+              label,
+              client: await createSession(
+                homeserver,
+                username,
+                password,
+                (message) => progress(`${label}: ${message}`),
+              ),
+            });
+
+          progress("Joining the room");
+          let roomId = room;
+          for (const { client } of sessions)
+            roomId = await joinRoom(client, roomId);
+
+          setState({ phase: "started", roomId, sessions });
+        } catch (e) {
+          logger.error("The harness could not start", e);
+          setState({ phase: "failed", error: `${e}` });
+        }
+      })();
+    },
+    [credentials],
+  );
+
+  const field = (
+    name: keyof Credentials,
+    label: string,
+    type = "text",
+  ): ReactNode => (
+    <label className={styles.field}>
+      {label}
+      <input
+        type={type}
+        value={credentials[name]}
+        onChange={(e): void =>
+          setCredentials((c) => ({ ...c, [name]: e.target.value }))
+        }
+      />
+    </label>
+  );
+
+  if (state.phase !== "started")
+    return (
+      <form className={styles.credentials} onSubmit={start}>
+        <h1>Element Call component harness</h1>
+        <p>
+          Signs in twice and shows Element Call embedded twice, in a page that
+          is not Element Call&apos;s own.
+        </p>
+        {field("homeserver", "Homeserver")}
+        {field("username", "Username")}
+        {field("password", "Password", "password")}
+        {field("room", "Room ID or alias")}
+        <button type="submit" disabled={state.phase === "starting"}>
+          Start
+        </button>
+        {state.phase === "starting" && <p>{state.progress}</p>}
+        {state.phase === "failed" && (
+          <p className={styles.error}>{state.error}</p>
+        )}
+      </form>
+    );
+
+  return (
+    <div className={styles.harness}>
+      <header className={styles.header}>
+        <h1>Element Call component harness</h1>
+        <code>{state.roomId}</code>
+        <button onClick={(): void => setDialogOpen(true)}>
+          Open a host dialog
+        </button>
+      </header>
+      <div className={styles.middle}>
+        <HostChrome />
+        <main className={styles.panes}>
+          {state.sessions.map((session) => (
+            <Pane
+              key={session.label}
+              session={session}
+              roomId={state.roomId}
+              log={log}
+            />
+          ))}
+        </main>
+      </div>
+      <section className={styles.log}>
+        <h2>Host bridge</h2>
+        <ol>
+          {entries.map((entry, i) => (
+            <li key={i}>
+              <code>{entry.at}</code> <strong>{entry.pane}</strong>{" "}
+              {entry.message}
+            </li>
+          ))}
+        </ol>
+      </section>
+      {dialogOpen && <HostDialog onClose={(): void => setDialogOpen(false)} />}
+    </div>
+  );
+};
diff --git a/component/dev/host.css b/component/dev/host.css
new file mode 100644
index 00000000..76e70f60
--- /dev/null
+++ b/component/dev/host.css
@@ -0,0 +1,23 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+/* The host page's own styles. Deliberately plain, and deliberately not using
+Element Call's design tokens: the harness should look like it does because of
+this file, not because Element Call styled it. */
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, sans-serif;
+  background-color: #f4f4f5;
+  color: #18181b;
+}
diff --git a/component/dev/index.html b/component/dev/index.html
new file mode 100644
index 00000000..7174e935
--- /dev/null
+++ b/component/dev/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<!--
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Element Call component harness</title>
+  </head>
+  <body>
+    <!-- Deliberately plain: this page stands in for a host application, so
+    anything it looks like must have come from the host's own styles or from
+    Element Call reaching outside its container. -->
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/component/dev/main.tsx b/component/dev/main.tsx
new file mode 100644
index 00000000..9150678d
--- /dev/null
+++ b/component/dev/main.tsx
@@ -0,0 +1,42 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { logger } from "matrix-js-sdk/lib/logger";
+
+import { type ConfigOptions, initializeElementCall } from "../index";
+import { Harness } from "./Harness";
+// After Element Call's, so that the host has the last word on its own page
+import "./host.css";
+
+/**
+ * The development app's own `config.json`, so that the harness runs Element
+ * Call the way `pnpm dev` does. It is not in the repository — developers copy
+ * it from `config/config.devenv.json` — so its absence is expected rather than
+ * an error.
+ */
+async function loadConfig(): Promise<ConfigOptions> {
+  try {
+    const response = await fetch("/config.json");
+    if (response.ok) return (await response.json()) as ConfigOptions;
+    logger.warn(
+      `No config.json (${response.status}); running with Element Call's defaults`,
+    );
+  } catch (e) {
+    logger.warn("Could not read config.json", e);
+  }
+  return {};
+}
+
+await initializeElementCall(await loadConfig());
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <Harness />
+  </StrictMode>,
+);
diff --git a/component/dev/session.ts b/component/dev/session.ts
new file mode 100644
index 00000000..5a424a40
--- /dev/null
+++ b/component/dev/session.ts
@@ -0,0 +1,79 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  ClientEvent,
+  createClient,
+  type MatrixClient,
+  MemoryStore,
+  SyncState,
+} from "matrix-js-sdk";
+
+/**
+ * Logs in and brings up a client the way a host application would, so that the
+ * component is handed a real one rather than something Element Call built for
+ * itself.
+ *
+ * Everything is kept in memory and a fresh login happens on every reload. That
+ * costs a device on the development homeserver each time, which is harmless,
+ * and buys the harness two clients that cannot tread on each other's storage.
+ * Persisting the login to make reloads quicker would mean persisting the
+ * crypto store too: reusing a device ID with a fresh crypto store generates new
+ * device keys, and uploading them conflicts with the ones the server already
+ * holds.
+ */
+export async function createSession(
+  homeserver: string,
+  username: string,
+  password: string,
+  onProgress: (message: string) => void,
+): Promise<MatrixClient> {
+  onProgress("Logging in");
+  const login = await createClient({ baseUrl: homeserver }).login(
+    "m.login.password",
+    { identifier: { type: "m.id.user", user: username }, password },
+  );
+
+  const client = createClient({
+    baseUrl: homeserver,
+    accessToken: login.access_token,
+    userId: login.user_id,
+    deviceId: login.device_id,
+    store: new MemoryStore(),
+    useAuthorizationHeader: true,
+    fallbackICEServerAllowed: true,
+  });
+
+  onProgress(`Setting up crypto for ${login.device_id}`);
+  await client.initRustCrypto({ useIndexedDB: false });
+
+  onProgress(`Syncing ${login.device_id}`);
+  await client.startClient();
+  await new Promise<void>((resolve) => {
+    const onSync = (state: SyncState): void => {
+      if (state !== SyncState.Prepared && state !== SyncState.Syncing) return;
+      client.off(ClientEvent.Sync, onSync);
+      resolve();
+    };
+    client.on(ClientEvent.Sync, onSync);
+  });
+
+  return client;
+}
+
+/**
+ * The room to call in, joining it if this session is not in it yet — a host
+ * hands Element Call a room it already knows about, so the harness has to get
+ * itself into that position first.
+ */
+export async function joinRoom(
+  client: MatrixClient,
+  roomIdOrAlias: string,
+): Promise<string> {
+  const room = await client.joinRoom(roomIdOrAlias);
+  return room.roomId;
+}
diff --git a/knip.ts b/knip.ts
index 97ecc090..d9de80c8 100644
--- a/knip.ts
+++ b/knip.ts
@@ -14,6 +14,7 @@ export default {
       "vite-embedded.config.ts",
       "vite-sdk.config.ts",
       "vite-component.config.ts",
+      "vite-component-dev.config.ts",
     ],
   },
   entry: ["src/main.tsx", "eslint/index.js", "i18next.config.ts"],
diff --git a/package.json b/package.json
index 91ba49de..cf1e1f71 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "dev": "pnpm dev:full",
     "dev:full": "vite",
     "dev:embedded": "vite --config vite-embedded.config.js",
+    "dev:component": "vite --config vite-component-dev.config.ts",
     "build": "pnpm build:full",
     "build:full": "NODE_OPTIONS=--max-old-space-size=16384 vite build",
     "build:full:production": "pnpm build:full",
@@ -22,10 +23,11 @@
     "serve": "vite preview",
     "format": "oxfmt",
     "format:check": "oxfmt --check; rc=$?; [[ $rc -ne 0 ]] && printf '\\033[46;30m INFO \\033[0m To fix, run: pnpm format\\n' >&2; exit $rc",
-    "lint": "pnpm lint:types && pnpm lint:oxlint && pnpm lint:knip",
-    "lint:oxlint": "oxlint src playwright",
-    "lint:oxlint-fix": "oxlint --fix src playwright",
+    "lint": "pnpm lint:types && pnpm lint:oxlint && pnpm lint:knip && pnpm lint:externals",
+    "lint:oxlint": "oxlint src component playwright",
+    "lint:oxlint-fix": "oxlint --fix src component playwright",
     "lint:knip": "knip",
+    "lint:externals": "node scripts/check-component-externals.mjs",
     "lint:types": "tsc",
     "i18n": "npx i18next-cli extract",
     "i18n:check": "npx i18next-cli extract --ci",
diff --git a/scripts/check-component-externals.mjs b/scripts/check-component-externals.mjs
new file mode 100644
index 00000000..ee7d57da
--- /dev/null
+++ b/scripts/check-component-externals.mjs
@@ -0,0 +1,140 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+/**
+ * Checks that the component build leaves the packages a host must supply to
+ * the host.
+ *
+ * A host application already has React, the Matrix SDK and LiveKit, and a
+ * second copy of any of them is worse than dead weight: React would hold two
+ * sets of hooks, and the Matrix client would run two sync loops. So the
+ * component build lists them as external — but that list has to name every
+ * subpath, since the bundler silently ignores the pattern and callback forms
+ * of the option, and an import it does not cover is bundled with no warning at
+ * all. That is the failure this guards against.
+ *
+ * It reads the list from the build config itself, so there is one copy of it,
+ * and compares it against every import of those packages in the source.
+ *
+ * The comparison is deliberately over-approximate: it looks at all of `src`
+ * rather than only the modules the component actually pulls in, so it will
+ * sometimes ask for a subpath that only the standalone app imports. Listing
+ * one the component never imports costs nothing — the bundler ignores it —
+ * whereas missing one costs a duplicate package.
+ */
+
+import { readdir, readFile } from "node:fs/promises";
+import { join } from "node:path";
+import { loadConfigFromFile } from "vite";
+
+const CONFIG = "vite-component.config.ts";
+const SOURCES = ["src", "component"];
+
+/** The packages whose duplication would break a host, rather than merely enlarge it. */
+const MUST_BE_EXTERNAL = [
+  "react",
+  "react-dom",
+  "matrix-js-sdk",
+  "livekit-client",
+];
+
+const isTestFile = (name) =>
+  name.includes(".test.") || name.includes(".stories.");
+
+/** Every source file under the given directories, recursively. */
+async function* sourceFiles(dir) {
+  for (const entry of await readdir(dir, { withFileTypes: true })) {
+    const path = join(dir, entry.name);
+    if (entry.isDirectory()) yield* sourceFiles(path);
+    else if (/\.(ts|tsx)$/.test(entry.name) && !isTestFile(entry.name))
+      yield path;
+  }
+}
+
+/**
+ * The module specifiers a source file imports. Covers `from "…"` (which is
+ * both static imports and re-exports), bare `import "…"` for side effects, and
+ * dynamic `import("…")`.
+ */
+function imports(source) {
+  const specifiers = [];
+  for (const pattern of [
+    /\bfrom\s*["']([^"']+)["']/g,
+    /\bimport\s*\(\s*["']([^"']+)["']\s*\)/g,
+    /^\s*import\s+["']([^"']+)["']/gm,
+  ])
+    for (const [, specifier] of source.matchAll(pattern))
+      specifiers.push(specifier);
+  return specifiers;
+}
+
+/**
+ * Whether a specifier is an import of one of the packages we care about.
+ *
+ * Imports carrying a resource query — `?worker`, `?inline` and friends — are
+ * not, whatever package they name. Those ask the bundler for a script to run
+ * in a context of its own, which has to be self-contained and shares no state
+ * with the host's copy of anything. Worker sub-builds do not inherit this
+ * option anyway.
+ */
+const mustBeExternal = (specifier) =>
+  !specifier.includes("?") &&
+  MUST_BE_EXTERNAL.some(
+    (pkg) => specifier === pkg || specifier.startsWith(`${pkg}/`),
+  );
+
+const loaded = await loadConfigFromFile(
+  { command: "build", mode: "production" },
+  CONFIG,
+);
+if (loaded === null) {
+  console.error(`Could not load ${CONFIG}`);
+  process.exit(1);
+}
+const declared = new Set(loaded.config.build?.rollupOptions?.external ?? []);
+if (declared.size === 0) {
+  console.error(
+    `${CONFIG} declares nothing external. Either the option moved, or the ` +
+      `list is empty; either way this check is not looking at what it thinks.`,
+  );
+  process.exit(1);
+}
+
+// Where each missing specifier is imported, so the message can point at it
+const missing = new Map();
+const seen = new Set();
+for (const dir of SOURCES)
+  for await (const file of sourceFiles(dir)) {
+    const source = await readFile(file, "utf8");
+    for (const specifier of imports(source)) {
+      if (!mustBeExternal(specifier)) continue;
+      seen.add(specifier);
+      if (declared.has(specifier)) continue;
+      const files = missing.get(specifier) ?? [];
+      files.push(file);
+      missing.set(specifier, files);
+    }
+  }
+
+if (missing.size > 0) {
+  console.error(
+    `${CONFIG} does not declare these imports external, so the component ` +
+      `build would bundle its own copy of them:\n`,
+  );
+  for (const [specifier, files] of [...missing].sort())
+    console.error(`  ${specifier}\n    imported by ${files.join(", ")}`);
+  console.error(`\nAdd each one to the \`external\` list in ${CONFIG}.`);
+  process.exit(1);
+}
+
+// Deliberately no complaint about declarations nothing imports. Some of them
+// cannot be seen from the source at all — `react/jsx-runtime` is injected by
+// the JSX transform — and an extra declaration is inert, so there is nothing
+// to warn about.
+console.log(
+  `${declared.size} external declarations cover all ${seen.size} imports of ${MUST_BE_EXTERNAL.join(", ")}.`,
+);
diff --git a/vite-component-dev.config.ts b/vite-component-dev.config.ts
new file mode 100644
index 00000000..61cb5e51
--- /dev/null
+++ b/vite-component-dev.config.ts
@@ -0,0 +1,77 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { defineConfig, searchForWorkspaceRoot } from "vite";
+import { realpathSync } from "node:fs";
+import * as fs from "node:fs";
+
+import { vitePluginsConfig } from "./vite.config";
+
+// Serves the harness under `component/dev`, which embeds Element Call as a
+// component the way a host application would. Development only: this is not
+// something we build or ship.
+//
+// It shares the plugins with the standalone app but not its HTML entry point,
+// since the harness has a page of its own — and it deliberately does not build
+// on the app's config, which would also bring the app's build output along.
+export default defineConfig(({ mode }) => {
+  // The crypto WASM module is imported dynamically, so Vite has to be told
+  // that reading it is legitimate — including from a linked copy, which is why
+  // the paths are resolved rather than assumed. Same as the standalone app.
+  const allow = [searchForWorkspaceRoot(process.cwd())];
+  for (const path of [
+    "node_modules/matrix-js-sdk/node_modules/@matrix-org/matrix-sdk-crypto-wasm",
+    "node_modules/@matrix-org/matrix-sdk-crypto-wasm",
+  ]) {
+    try {
+      allow.push(realpathSync(path));
+    } catch {}
+  }
+
+  return {
+    ...vitePluginsConfig({ mode, html: false }),
+    root: "component/dev",
+    // So that the harness can read the same config.json the standalone app
+    // does, if the developer has written one
+    publicDir: "../../public",
+    server: {
+      host: true,
+      // One up from the standalone app's, so both can run at once — the point
+      // of the harness is to compare them
+      port: 3001,
+      fs: { allow },
+      // The same certificate the app uses, so that the harness is served from
+      // a `m.localhost` name the development homeserver's certificate covers
+      https: {
+        key: fs.readFileSync("./backend/dev_tls_m.localhost.key"),
+        cert: fs.readFileSync("./backend/dev_tls_m.localhost.crt"),
+      },
+    },
+    worker: {
+      format: "es",
+    },
+    resolve: {
+      alias: {
+        // matrix-widget-api has its transpiled lib/index.js as its entry point,
+        // which Vite for some reason refuses to work with, so we point it to
+        // src/index.ts instead
+        "matrix-widget-api": "matrix-widget-api/src/index.ts",
+      },
+      dedupe: [
+        "react",
+        "react-dom",
+        "matrix-js-sdk",
+        "react-use-measure",
+        // These packages modify the document based on some module-level global
+        // state, and don't play nicely with duplicate copies of themselves
+        // https://github.com/radix-ui/primitives/issues/1241#issuecomment-1847837850
+        "@radix-ui/react-focus-guards",
+        "@radix-ui/react-dismissable-layer",
+      ],
+    },
+  };
+});
diff --git a/vite-component.config.ts b/vite-component.config.ts
index 1a57abe6..17f62562 100644
--- a/vite-component.config.ts
+++ b/vite-component.config.ts
@@ -15,7 +15,11 @@ import { vitePluginsConfig } from "./vite.config";
 // Deliberately not built on top of the full app's config, which exists to
 // produce a page and brings an HTML entry point along with it.
 export default defineConfig(({ mode }) => ({
-  ...vitePluginsConfig({ mode }),
+  ...vitePluginsConfig({ mode, html: false }),
+  // A library has no public directory to serve. Without this the build copies
+  // whatever is in `public` — including the developer's own config.json, which
+  // is not in the repository — into the output we would publish.
+  publicDir: false,
   build: {
     minify: mode === "production",
     sourcemap: true,
@@ -36,7 +40,10 @@ export default defineConfig(({ mode }) => ({
       // SDK as `matrix-js-sdk/lib/…`, and a bare "matrix-js-sdk" would not
       // catch those — while the pattern and callback forms of this option are
       // silently ignored by the bundler, so they cannot be used to cover them.
-      // `pnpm lint:externals` fails if an import appears that is not listed.
+      // `pnpm lint:externals` reads this list and fails if the source imports
+      // one of these packages by a path it does not name; a few entries below
+      // are there only because the standalone app imports them, which costs
+      // nothing.
       external: [
         "react",
         "react/jsx-runtime",
@@ -44,8 +51,10 @@ export default defineConfig(({ mode }) => ({
         "react-dom/client",
         "livekit-client",
         "matrix-js-sdk",
+        "matrix-js-sdk/lib/browser-index",
         "matrix-js-sdk/lib/client",
         "matrix-js-sdk/lib/crypto-api",
+        "matrix-js-sdk/lib/indexeddb-worker",
         "matrix-js-sdk/lib/logger",
         "matrix-js-sdk/lib/matrix",
         "matrix-js-sdk/lib/matrixrtc",
diff --git a/vite.config.ts b/vite.config.ts
index 61936cfd..678a86fa 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -26,7 +26,15 @@ import * as fs from "node:fs";
 
 export const vitePluginsConfig = ({
   mode,
-}: Pick<ConfigEnv, "mode">): UserConfig => {
+  html = true,
+}: Pick<ConfigEnv, "mode"> & {
+  /**
+   * Whether to inject Element Call's entry point into the HTML page. Builds
+   * that produce a library, or serve a page of their own, must not have this:
+   * it would pull the standalone app in alongside whatever they are building.
+   */
+  html?: boolean;
+}): UserConfig => {
   const env = loadEnv(mode, process.cwd());
   const plugins: PluginOption[] = [
     babel({
@@ -67,7 +75,7 @@ export const vitePluginsConfig = ({
     );
   }
 
-  if (!process.env.STORYBOOK && !process.env.VITEST) {
+  if (html && !process.env.STORYBOOK && !process.env.VITEST) {
     plugins.push(
       createHtmlPlugin({
         entry: "src/main.tsx",

From c0a54dcaf938c4e28dbe231ebc8e743d0caed32a Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Thu, 3 Sep 2026 16:39:14 +0200
Subject: [PATCH 035/154] Derive the component's defaults from an intent, not
 the host's URL
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The component seeded its parameters with `computeUrlParams()`, which reads
`window.location`. Element Call is not the page any more, so what it found
there was the host's URL: no `widgetId`, therefore not a widget, therefore no
intent, therefore the standalone app's preset.

The visible symptom was the Element Call logo in the footer of a call embedded
in someone else's application, since `showLogo` follows `header ===
HeaderStyle.Standard`. The rest of that preset mattered more. A hosted call
defaulted to `perParticipantE2EE: false` and `confineToRoom: false` — so
unencrypted, and willing to take the user out of the room a host had put them
in — and a host could not correct either without naming every parameter
itself, nor even name `header`, since the enums were not exported.

So the intent presets move out of `computeUrlParams` into
`configurationForIntent`, and the component builds its parameters from an
intent plus the properties a host has no URL to supply. `intent` becomes a
prop, defaulting to joining an existing group call: the lobby first, confined
to the room, encrypted per participant, and no Element Call branding in
someone else's interface. A host that knows which button the user pressed
should say which.

One deliberate difference from the widget presets: the background defaults to
solid rather than the gradient, which is drawn by a `position: fixed`
pseudo-element and would escape the container to cover the host.

`UserIntent.Unknown` still means the standalone preset, so the app and widget
are unchanged — including a widget that names no intent, which has always been
given those defaults.
---
 component/index.tsx   |  43 +++++++--
 src/UrlParams.test.ts |  48 ++++++++++
 src/UrlParams.ts      | 202 +++++++++++++++++++++++++++---------------
 3 files changed, 215 insertions(+), 78 deletions(-)

diff --git a/component/index.tsx b/component/index.tsx
index 1d3155d3..55e2f996 100644
--- a/component/index.tsx
+++ b/component/index.tsx
@@ -48,9 +48,11 @@ import {
 } from "../src/HostBridge";
 import { RootElementProvider } from "../src/RootElementContext";
 import {
-  computeUrlParams,
+  configurationForIntent,
+  hostedProperties,
   type UrlParams,
   UrlParamsProvider,
+  UserIntent,
 } from "../src/UrlParams";
 import { MediaDevicesContext } from "../src/MediaDevicesContext";
 import { MediaDevices } from "../src/state/MediaDevices";
@@ -74,10 +76,17 @@ export { type JoinCallData } from "../src/widget";
 // The deployment-wide configuration, as distinct from ElementCallConfiguration
 // above, which is per call
 export { type ConfigOptions } from "../src/config/ConfigOptions";
+// The values that appear in ElementCallConfiguration and in the intent
+export {
+  BackgroundStyle,
+  HeaderStyle,
+  UserIntent,
+  type UrlConfiguration,
+} from "../src/UrlParams";
 
 /**
  * How Element Call should behave. Everything is optional; anything left out
- * takes the same default it would in the standalone app.
+ * takes the default that {@link ElementCallProps.intent} implies.
  */
 export type ElementCallConfiguration = Partial<UrlParams>;
 
@@ -89,7 +98,21 @@ export interface ElementCallProps {
   client: MatrixClient;
   /** The room to call in. The host's client must already know about it. */
   roomId: string;
-  /** How Element Call should behave. */
+  /**
+   * What the user asked for — whether they started the call or joined one that
+   * was already running, and whether it is a call in a group or a DM. Element
+   * Call decides what each of those means: whether to show the lobby first,
+   * whether to ring, and so on.
+   *
+   * Defaults to joining an existing group call, which is the most conservative
+   * reading, but a host that knows which button the user pressed should say so.
+   */
+  intent?: UserIntent;
+  /**
+   * How Element Call should behave, overriding whatever {@link intent} implies.
+   * A host that finds itself setting a lot of these probably wants a different
+   * intent instead.
+   */
   config?: ElementCallConfiguration;
   /**
    * How to reach the host while the call is running — to be told the user has
@@ -143,6 +166,7 @@ const Decoration: FC<{ children: JSX.Element }> = ({ children }) => {
 export const ElementCall: FC<ElementCallProps> = ({
   client,
   roomId,
+  intent = UserIntent.JoinExistingCall,
   config,
   hostBridge = nullHostBridge,
 }): ReactNode => {
@@ -150,10 +174,17 @@ export const ElementCall: FC<ElementCallProps> = ({
   // inside can render until we have it.
   const [container, setContainer] = useState<HTMLDivElement | null>(null);
 
-  // The defaults are the standalone app's, with the host's wishes over the top
+  // Element Call has no URL of its own to read any of this from, and the
+  // host's URL is not Element Call's business, so the defaults come from the
+  // intent with the host's wishes over the top.
   const params = useMemo(
-    (): UrlParams => ({ ...computeUrlParams(), ...config }),
-    [config],
+    (): UrlParams => ({
+      ...hostedProperties,
+      roomId,
+      ...configurationForIntent(intent),
+      ...config,
+    }),
+    [roomId, intent, config],
   );
 
   const mediaDevices = useInitial(
diff --git a/src/UrlParams.test.ts b/src/UrlParams.test.ts
index 3a61a76b..63c4e2c8 100644
--- a/src/UrlParams.test.ts
+++ b/src/UrlParams.test.ts
@@ -11,10 +11,14 @@ import { logger } from "matrix-js-sdk/lib/logger";
 
 import * as PlatformMod from "../src/Platform";
 import {
+  BackgroundStyle,
+  configurationForIntent,
   getRoomIdentifierFromUrl,
   computeUrlParams,
   HeaderStyle,
   getUrlParams,
+  hostedProperties,
+  UserIntent,
 } from "../src/UrlParams";
 import { mockConfig } from "./utils/test";
 
@@ -424,4 +428,48 @@ describe("UrlParams", () => {
       );
     });
   });
+
+  // What Element Call runs with when a host embeds it as a component, which
+  // has no URL of its own for any of this to come from
+  describe("hosted defaults", () => {
+    it("assume nothing about a session or a page", () => {
+      expect(hostedProperties).toMatchObject({
+        // The host is not a widget host, and supplies the client itself, so
+        // none of the widget or session plumbing applies
+        isWidget: false,
+        widgetId: null,
+        parentUrl: null,
+        userId: null,
+        deviceId: null,
+        baseUrl: null,
+        homeserver: null,
+        // The gradient is drawn by a `position: fixed` pseudo-element, which
+        // would escape the container and cover the host's own interface
+        background: BackgroundStyle.Solid,
+      });
+    });
+
+    it("keep a hosted call inside its room", () => {
+      const hosted = configurationForIntent(UserIntent.JoinExistingCall);
+      expect(hosted).toMatchObject({
+        // A host owns navigation, so Element Call must not offer a way out of
+        // the room
+        confineToRoom: true,
+        perParticipantE2EE: true,
+        // The lobby first, so that the user picks their devices rather than
+        // being thrown into the call by the act of being rendered
+        skipLobby: false,
+      });
+      // No Element Call branding inside someone else's application
+      expect(hosted.header).not.toBe(HeaderStyle.Standard);
+    });
+
+    it("fall back to the standalone app's when no intent is stated", () => {
+      expect(configurationForIntent(UserIntent.Unknown)).toMatchObject({
+        confineToRoom: false,
+        header: HeaderStyle.Standard,
+        perParticipantE2EE: false,
+      });
+    });
+  });
 });
diff --git a/src/UrlParams.ts b/src/UrlParams.ts
index 422163fc..25b60dbd 100644
--- a/src/UrlParams.ts
+++ b/src/UrlParams.ts
@@ -354,6 +354,135 @@ export const getUrlParams = (
   return params;
 };
 
+/**
+ * The configuration implied by what the user meant to do — if they pressed a
+ * Start Call button this would be `start_call`, and if they pressed Join Call,
+ * `join_existing`.
+ *
+ * These are platform-specific defaults, so that a host can start a call by
+ * saying what the user asked for rather than by setting every parameter itself,
+ * and so that what each intent means is Element Call's decision, made in one
+ * place. A host that wants something else states it alongside the intent.
+ *
+ * {@link UserIntent.Unknown} means no intent was stated, and gives the
+ * standalone app's defaults: Element Call owns the whole page, so it offers the
+ * way out of the room that a hosted call must not.
+ */
+export function configurationForIntent(intent: UserIntent): UrlConfiguration {
+  // Only constants and `platform` here, so that this depends on nothing but
+  // the intent.
+  let preset: UrlConfiguration = {
+    confineToRoom: true,
+    preload: false,
+    header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
+    showControls: true,
+    hideScreensharing: false,
+    allowIceFallback: true,
+    perParticipantE2EE: true,
+    controlledAudioDevices: platform === "desktop" ? false : true,
+    skipLobby: true,
+    returnToLobby: false,
+    sendNotificationType: "notification",
+    autoLeaveWhenOthersLeft: false,
+    waitForCallPickup: false,
+  };
+  switch (intent) {
+    case UserIntent.StartNewCall:
+      preset.skipLobby = false;
+      preset.callIntent = "video";
+      break;
+    case UserIntent.JoinExistingCall:
+      // On desktop this will be overridden based on which button was used to join the call
+      preset.skipLobby = false;
+      preset.callIntent = "video";
+      break;
+    case UserIntent.StartNewCallVoice:
+      preset.skipLobby = false;
+      preset.callIntent = "audio";
+      break;
+    case UserIntent.JoinExistingCallVoice:
+      // On desktop this will be overridden based on which button was used to join the call
+      preset.skipLobby = false;
+      preset.callIntent = "audio";
+      break;
+    case UserIntent.StartNewCallDMVoice:
+      preset.callIntent = "audio";
+    // Fall through
+    case UserIntent.StartNewCallDM:
+      preset.skipLobby = true;
+      preset.sendNotificationType = "ring";
+      preset.autoLeaveWhenOthersLeft = true;
+      preset.waitForCallPickup = true;
+      preset.callIntent = preset.callIntent ?? "video";
+      break;
+    case UserIntent.JoinExistingCallDMVoice:
+      preset.callIntent = "audio";
+    // Fall through
+    case UserIntent.JoinExistingCallDM:
+      // On desktop this will be overridden based on which button was used to join the call
+      preset.skipLobby = true;
+      preset.autoLeaveWhenOthersLeft = true;
+      preset.callIntent = preset.callIntent ?? "video";
+      break;
+    // Non widget usecase defaults
+    default:
+      preset = {
+        confineToRoom: false,
+        preload: false,
+        header: HeaderStyle.Standard,
+        showControls: true,
+        hideScreensharing: false,
+        allowIceFallback: false,
+        perParticipantE2EE: false,
+        controlledAudioDevices: false,
+        skipLobby: false,
+        returnToLobby: false,
+        sendNotificationType: undefined,
+        autoLeaveWhenOthersLeft: false,
+        waitForCallPickup: false,
+      };
+  }
+  return preset;
+}
+
+/**
+ * The {@link UrlProperties} for Element Call embedded in a host application.
+ *
+ * It has no URL of its own to read these from, and it does not need most of
+ * them: the widget plumbing does not apply, the Matrix client and the analytics
+ * configuration come from the host by other routes, and what is left is either
+ * the host's to state through the component's props or Element Call's own
+ * default.
+ */
+export const hostedProperties: UrlProperties = {
+  widgetId: null,
+  parentUrl: null,
+  isWidget: false,
+  roomId: null,
+  userId: null,
+  displayName: null,
+  deviceId: null,
+  baseUrl: null,
+  lang: null,
+  fonts: [],
+  fontScale: null,
+  posthogUserId: null,
+  posthogApiHost: null,
+  posthogApiKey: null,
+  e2eEnabled: true,
+  password: null,
+  viaServers: null,
+  homeserver: null,
+  rageshakeSubmitUrl: null,
+  sentryDsn: null,
+  sentryEnvironment: null,
+  theme: null,
+  // Solid rather than the gradient the standalone app defaults to: the gradient
+  // is drawn by a `position: fixed` pseudo-element, which would escape the
+  // container Element Call was given and cover the host's own interface.
+  background: BackgroundStyle.Solid,
+};
+
 /**
  * Gets the app parameters for the current URL.
  * @param search The URL search string
@@ -383,78 +512,7 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
   const intent = !isWidget
     ? UserIntent.Unknown
     : (parser.getEnumParam("intent", UserIntent) ?? UserIntent.Unknown);
-  // Here we only use constants and `platform` to determine the intent preset.
-  let intentPreset: UrlConfiguration = {
-    confineToRoom: true,
-    preload: false,
-    header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
-    showControls: true,
-    hideScreensharing: false,
-    allowIceFallback: true,
-    perParticipantE2EE: true,
-    controlledAudioDevices: platform === "desktop" ? false : true,
-    skipLobby: true,
-    returnToLobby: false,
-    sendNotificationType: "notification",
-    autoLeaveWhenOthersLeft: false,
-    waitForCallPickup: false,
-  };
-  switch (intent) {
-    case UserIntent.StartNewCall:
-      intentPreset.skipLobby = false;
-      intentPreset.callIntent = "video";
-      break;
-    case UserIntent.JoinExistingCall:
-      // On desktop this will be overridden based on which button was used to join the call
-      intentPreset.skipLobby = false;
-      intentPreset.callIntent = "video";
-      break;
-    case UserIntent.StartNewCallVoice:
-      intentPreset.skipLobby = false;
-      intentPreset.callIntent = "audio";
-      break;
-    case UserIntent.JoinExistingCallVoice:
-      // On desktop this will be overridden based on which button was used to join the call
-      intentPreset.skipLobby = false;
-      intentPreset.callIntent = "audio";
-      break;
-    case UserIntent.StartNewCallDMVoice:
-      intentPreset.callIntent = "audio";
-    // Fall through
-    case UserIntent.StartNewCallDM:
-      intentPreset.skipLobby = true;
-      intentPreset.sendNotificationType = "ring";
-      intentPreset.autoLeaveWhenOthersLeft = true;
-      intentPreset.waitForCallPickup = true;
-      intentPreset.callIntent = intentPreset.callIntent ?? "video";
-      break;
-    case UserIntent.JoinExistingCallDMVoice:
-      intentPreset.callIntent = "audio";
-    // Fall through
-    case UserIntent.JoinExistingCallDM:
-      // On desktop this will be overridden based on which button was used to join the call
-      intentPreset.skipLobby = true;
-      intentPreset.autoLeaveWhenOthersLeft = true;
-      intentPreset.callIntent = intentPreset.callIntent ?? "video";
-      break;
-    // Non widget usecase defaults
-    default:
-      intentPreset = {
-        confineToRoom: false,
-        preload: false,
-        header: HeaderStyle.Standard,
-        showControls: true,
-        hideScreensharing: false,
-        allowIceFallback: false,
-        perParticipantE2EE: false,
-        controlledAudioDevices: false,
-        skipLobby: false,
-        returnToLobby: false,
-        sendNotificationType: undefined,
-        autoLeaveWhenOthersLeft: false,
-        waitForCallPickup: false,
-      };
-  }
+  const intentPreset = configurationForIntent(intent);
 
   const properties: UrlProperties = {
     widgetId,

From 3361ce2b609b70b473e3d6cf811866ef1d5d5840 Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Thu, 3 Sep 2026 17:30:16 +0200
Subject: [PATCH 036/154] Keep what the component draws inside the container it
 was given
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Opening settings in an embedded call put the dialog in the middle of the host's
window, spilling outside the container, and with two calls on a page the second
drew over the first's dialog.

The container established a stacking context but not a containing block, which
are two different things and only the first had been done. `position: fixed`
resolves against the viewport unless an ancestor makes itself the containing
block, so the modal scrim and dialog in Overlay.module.css — `fixed`, `inset:
0`, centred, because in the standalone app they are meant to cover the page —
were positioned and sized against the window. Layout and paint containment
makes the container the containing block for those descendants and clips what
we paint to our own box. The second-call-on-top symptom goes with it, since the
dialog now stays inside the first call's box and there is nothing to overlap.
Two sibling components still cannot draw over one another by construction,
neither being able to leave its own stacking context, but that only shows if a
host overlaps them.

Containment clips a box measured in viewport units but cannot resize it, so
anything positioned that way is simply put somewhere outside the container and
disappears. That applied to the reactions overlay, a `100vw` by `100vh` box, and
to the reaction picker, which sits at `82vh` so as to appear near the footer it
belongs to. Both are positioned against whatever Element Call treats as its
root — `[data-overlay-container]` in the app, which is the size of the page, and
the host's container when embedded — so percentages mean the same thing there
and the right thing here. The earpiece overlay is `inset: 0` with no viewport
units, so containment is enough for it.

Three viewport-relative sizes remain, all of which need more than a change of
unit: the lobby's video preview is `50vh` on a flex item with an aspect ratio,
`--content-inset-*` ramps up to a desktop inset from the window width, and the
picker's `max-width` cap is the window's.

The clipping cuts both ways: a menu near the edge of a small container is
trimmed rather than overflowing into the host. That is the trade an embedded
component makes.
---
 component/ElementCall.module.css           | 17 ++++++++++++++---
 src/button/ReactionToggleButton.module.css |  7 ++++++-
 src/room/ReactionsOverlay.module.css       | 15 +++++++++------
 3 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/component/ElementCall.module.css b/component/ElementCall.module.css
index 461ad9b0..f99dccb1 100644
--- a/component/ElementCall.module.css
+++ b/component/ElementCall.module.css
@@ -6,15 +6,26 @@ Please see LICENSE in the repository root for full details.
 */
 
 /* The container a host mounts us into. It fills whatever space the host gives
-it, and establishes a stacking context of its own so that our overlays and
-modals cannot escape it — which is the whole reason for embedding rather than
-using an iframe. */
+it, and nothing we draw may leave it.
+
+That takes two separate things, which are easy to mistake for one. `isolation`
+gives us a stacking context, so nothing inside can be layered above the host's
+own interface. Containment makes us the containing block for `position: fixed`
+descendants, and clips what we paint to our own box: without it, the modal
+scrim and dialog — which are positioned `fixed` and centred, since in the app
+they are meant to cover the page — resolve against the viewport and appear in
+the middle of the host's window rather than in the middle of the call.
+
+The clipping cuts both ways: a menu near the edge of a small container is
+trimmed rather than overflowing into the host. That is the trade being an
+embedded component makes. */
 .root {
   display: flex;
   flex-direction: column;
   inline-size: 100%;
   block-size: 100%;
   isolation: isolate;
+  contain: layout paint;
   position: relative;
   background-color: var(--cpd-color-bg-canvas-default);
   color: var(--cpd-color-text-primary);
diff --git a/src/button/ReactionToggleButton.module.css b/src/button/ReactionToggleButton.module.css
index 90c6af02..705d4d9e 100644
--- a/src/button/ReactionToggleButton.module.css
+++ b/src/button/ReactionToggleButton.module.css
@@ -19,7 +19,12 @@
 }
 
 div.reactionPopupMenuRoot.reactionPopupMenuModal {
-  --overlay-top: 82vh;
+  /* Down near the footer it belongs to, rather than centred like other modals.
+  A percentage, not a viewport unit: the overlay is positioned `fixed`, so this
+  resolves against the page in the standalone app and against the container
+  when a host embeds us — where 82vh would put it below the container
+  entirely. */
+  --overlay-top: 82%;
   width: fit-content;
 }
 
diff --git a/src/room/ReactionsOverlay.module.css b/src/room/ReactionsOverlay.module.css
index 3738dc09..618adbf3 100644
--- a/src/room/ReactionsOverlay.module.css
+++ b/src/room/ReactionsOverlay.module.css
@@ -3,8 +3,11 @@
   display: inline;
   z-index: 2;
   pointer-events: none;
-  width: 100vw;
-  height: 100vh;
+  /* Percentages, not viewport units: the containing block is the element
+  Element Call treats as its root, which is the page in the standalone app but
+  the container a host gave us when embedded. */
+  width: 100%;
+  height: 100%;
   left: 0;
   top: 0;
 }
@@ -16,7 +19,7 @@
   animation-name: reaction-up;
   width: fit-content;
   position: relative;
-  top: 80vh;
+  top: 80%;
 }
 
 @keyframes reaction-up {
@@ -24,7 +27,7 @@
     opacity: 1;
     translate: 0 0;
     scale: 200%;
-    top: 80vh;
+    top: 80%;
   }
 
   to {
@@ -48,7 +51,7 @@
   .reaction {
     font-size: 48pt;
     animation-name: reaction-up-reduced;
-    top: calc(-50vh + (48pt / 2));
-    left: calc(50vw - (48pt / 2)) !important;
+    top: calc(-50% + (48pt / 2));
+    left: calc(50% - (48pt / 2)) !important;
   }
 }

From f8f5caaa0990096b45ae39343ec9b525808ac7fe Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 3 Sep 2026 16:50:30 +0100
Subject: [PATCH 037/154] Log remote participant and track events per LiveKit
 connection

Rageshakes contained nothing about the state of remote tracks, so a tile
showing the wrong mute or video state for a member could not be
diagnosed. Log connect/disconnect, publish/unpublish, subscribe/
unsubscribe, subscription failures, remote mute/unmute and stream state
changes on each Connection's logger, and remove the listeners when the
connection scope ends.
---
 .../remoteMembers/Connection.test.ts          | 78 +++++++++++++++-
 .../CallViewModel/remoteMembers/Connection.ts | 88 +++++++++++++++++++
 2 files changed, 165 insertions(+), 1 deletion(-)

diff --git a/src/state/CallViewModel/remoteMembers/Connection.test.ts b/src/state/CallViewModel/remoteMembers/Connection.test.ts
index 72329585..9d098d44 100644
--- a/src/state/CallViewModel/remoteMembers/Connection.test.ts
+++ b/src/state/CallViewModel/remoteMembers/Connection.test.ts
@@ -19,14 +19,17 @@ import {
 import {
   type LocalParticipant,
   type RemoteParticipant,
+  type RemoteTrack,
+  type RemoteTrackPublication,
   type Room as LivekitRoom,
   RoomEvent,
+  Track,
   ConnectionState as LivekitConnectionState,
 } from "livekit-client";
 import fetchMock from "fetch-mock";
 import EventEmitter from "events";
 import { type IOpenIDToken } from "matrix-js-sdk";
-import { logger } from "matrix-js-sdk/lib/logger";
+import { logger, type Logger } from "matrix-js-sdk/lib/logger";
 import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
 
 import {
@@ -509,6 +512,79 @@ describe("remote participants", () => {
   });
 });
 
+describe("remote track logging", () => {
+  it("logs remote participant and track events on the connection logger", () => {
+    setupTest();
+    const info = vi.fn();
+    const testLogger = {
+      getChild: (): unknown => testLogger,
+      info,
+      debug: vi.fn(),
+      warn: vi.fn(),
+      error: vi.fn(),
+    } as unknown as Logger;
+    new Connection(
+      {
+        client,
+        roomId: ROOM_ID,
+        transport: livekitFocus,
+        scope: testScope,
+        ownMembershipIdentity: ownMemberMock,
+        livekitRoomFactory: () => fakeLivekitRoom,
+      },
+      testLogger,
+    );
+    info.mockClear(); // drop the constructor log line
+
+    const bob = mockRemoteParticipant({
+      identity: "@bob:example.org:DEV111",
+      sid: "PA_bob",
+    });
+    const pub = {
+      kind: "audio",
+      source: "microphone",
+      trackSid: "TR_mic",
+      isMuted: false,
+    } as unknown as RemoteTrackPublication;
+    const messages = (): string[] => info.mock.calls.map((c) => c[0] as string);
+
+    fakeLivekitRoom.emit(RoomEvent.ParticipantConnected, bob);
+    fakeLivekitRoom.emit(
+      RoomEvent.TrackSubscribed,
+      {} as RemoteTrack,
+      pub,
+      bob,
+    );
+    fakeLivekitRoom.emit(RoomEvent.TrackMuted, pub, bob);
+    fakeLivekitRoom.emit(
+      RoomEvent.TrackStreamStateChanged,
+      pub,
+      Track.StreamState.Paused,
+      bob,
+    );
+    expect(messages()).toEqual([
+      "Participant connected: @bob:example.org:DEV111 (PA_bob)",
+      "Subscribed: audio microphone TR_mic of @bob:example.org:DEV111 muted=false",
+      "Muted: audio microphone TR_mic of @bob:example.org:DEV111",
+      "Stream paused: audio microphone TR_mic of @bob:example.org:DEV111",
+    ]);
+
+    // Local mute events are already logged by the Publisher
+    fakeLivekitRoom.emit(RoomEvent.TrackMuted, pub, {
+      ...fakeLocalParticipant,
+      isLocal: true,
+    } as unknown as LocalParticipant);
+    expect(messages().filter((m) => m.startsWith("Muted"))).toHaveLength(1);
+
+    // Listeners are removed when the scope ends
+    testScope.end();
+    fakeLivekitRoom.emit(RoomEvent.ParticipantDisconnected, bob);
+    expect(
+      messages().filter((m) => m.startsWith("Participant disconnected")),
+    ).toHaveLength(0);
+  });
+});
+
 //
 // NOT USED ANYMORE ?
 //
diff --git a/src/state/CallViewModel/remoteMembers/Connection.ts b/src/state/CallViewModel/remoteMembers/Connection.ts
index f320e630..9310c9b8 100644
--- a/src/state/CallViewModel/remoteMembers/Connection.ts
+++ b/src/state/CallViewModel/remoteMembers/Connection.ts
@@ -13,8 +13,14 @@ import {
 import {
   ConnectionError,
   ConnectionErrorReason,
+  type Participant,
   type RemoteParticipant,
+  type RemoteTrackPublication,
   type Room as LivekitRoom,
+  RoomEvent,
+  type SubscriptionError,
+  type Track,
+  type TrackPublication,
 } from "livekit-client";
 import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
 import { BehaviorSubject, map } from "rxjs";
@@ -164,6 +170,7 @@ export class Connection {
       // Only tracks remote participants
       connectedParticipantsObserver(this.livekitRoom),
     );
+    this.logRemoteTrackEvents();
 
     scope.onEnd(() => {
       this.logger.info(`Connection scope ended, stopping connection`);
@@ -171,6 +178,87 @@ export class Connection {
     });
   }
 
+  /**
+   * Logs the lifecycle of remote participants and their tracks as seen by
+   * livekit-client, so that rageshakes show what a tile should have been
+   * rendering (published, subscribed, muted, paused) for each remote member.
+   */
+  private logRemoteTrackEvents(): void {
+    const room = this.livekitRoom;
+    const log = this.logger.getChild("[RemoteTracks]");
+    const track = (pub: TrackPublication, p: Participant): string =>
+      `${pub.kind} ${pub.source} ${pub.trackSid} of ${p.identity}`;
+
+    const onParticipantConnected = (p: RemoteParticipant): void =>
+      log.info(`Participant connected: ${p.identity} (${p.sid})`);
+    const onParticipantDisconnected = (p: RemoteParticipant): void =>
+      log.info(`Participant disconnected: ${p.identity} (${p.sid})`);
+    const onTrackPublished = (
+      pub: RemoteTrackPublication,
+      p: RemoteParticipant,
+    ): void => log.info(`Published: ${track(pub, p)} muted=${pub.isMuted}`);
+    const onTrackUnpublished = (
+      pub: RemoteTrackPublication,
+      p: RemoteParticipant,
+    ): void => log.info(`Unpublished: ${track(pub, p)}`);
+    const onTrackSubscribed = (
+      _t: Track,
+      pub: RemoteTrackPublication,
+      p: RemoteParticipant,
+    ): void => log.info(`Subscribed: ${track(pub, p)} muted=${pub.isMuted}`);
+    const onTrackUnsubscribed = (
+      _t: Track,
+      pub: RemoteTrackPublication,
+      p: RemoteParticipant,
+    ): void => log.info(`Unsubscribed: ${track(pub, p)}`);
+    const onTrackSubscriptionFailed = (
+      trackSid: string,
+      p: RemoteParticipant,
+      reason?: SubscriptionError,
+    ): void =>
+      log.warn(
+        `Subscription failed: ${trackSid} of ${p.identity} reason=${reason}`,
+      );
+    // Mute events also fire for the local participant, which the Publisher
+    // already logs.
+    const onTrackMuted = (pub: TrackPublication, p: Participant): void => {
+      if (!p.isLocal) log.info(`Muted: ${track(pub, p)}`);
+    };
+    const onTrackUnmuted = (pub: TrackPublication, p: Participant): void => {
+      if (!p.isLocal) log.info(`Unmuted: ${track(pub, p)}`);
+    };
+    const onTrackStreamStateChanged = (
+      pub: RemoteTrackPublication,
+      state: Track.StreamState,
+      p: RemoteParticipant,
+    ): void => log.info(`Stream ${state}: ${track(pub, p)}`);
+
+    room
+      .on(RoomEvent.ParticipantConnected, onParticipantConnected)
+      .on(RoomEvent.ParticipantDisconnected, onParticipantDisconnected)
+      .on(RoomEvent.TrackPublished, onTrackPublished)
+      .on(RoomEvent.TrackUnpublished, onTrackUnpublished)
+      .on(RoomEvent.TrackSubscribed, onTrackSubscribed)
+      .on(RoomEvent.TrackUnsubscribed, onTrackUnsubscribed)
+      .on(RoomEvent.TrackSubscriptionFailed, onTrackSubscriptionFailed)
+      .on(RoomEvent.TrackMuted, onTrackMuted)
+      .on(RoomEvent.TrackUnmuted, onTrackUnmuted)
+      .on(RoomEvent.TrackStreamStateChanged, onTrackStreamStateChanged);
+    this.scope.onEnd(() => {
+      room
+        .off(RoomEvent.ParticipantConnected, onParticipantConnected)
+        .off(RoomEvent.ParticipantDisconnected, onParticipantDisconnected)
+        .off(RoomEvent.TrackPublished, onTrackPublished)
+        .off(RoomEvent.TrackUnpublished, onTrackUnpublished)
+        .off(RoomEvent.TrackSubscribed, onTrackSubscribed)
+        .off(RoomEvent.TrackUnsubscribed, onTrackUnsubscribed)
+        .off(RoomEvent.TrackSubscriptionFailed, onTrackSubscriptionFailed)
+        .off(RoomEvent.TrackMuted, onTrackMuted)
+        .off(RoomEvent.TrackUnmuted, onTrackUnmuted)
+        .off(RoomEvent.TrackStreamStateChanged, onTrackStreamStateChanged);
+    });
+  }
+
   /**
    * Starts the connection.
    *

From 0b95fd5a65a87b03a4d52e1d97f5b3cc622adbc4 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 3 Sep 2026 17:07:08 +0100
Subject: [PATCH 038/154] Log remote member participant matching and tile
 waiting state

A tile shows "Waiting for media" for as long as its MatrixRTC member
cannot be matched to a LiveKit participant. Log each transition of that
match and of the tile's waitingForMedia state so rageshakes can tie a
stuck tile to the LiveKit participant and track events.
---
 .../MatrixLivekitMembers.test.ts              |  7 ++++-
 .../remoteMembers/MatrixLivekitMembers.ts     | 10 ++++++-
 src/state/media/RemoteUserMediaViewModel.ts   | 26 ++++++++++++-------
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.test.ts b/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.test.ts
index 244d70ae..09c82789 100644
--- a/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.test.ts
+++ b/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.test.ts
@@ -5,7 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { describe, test, expect, beforeEach, afterEach } from "vitest";
+import { describe, test, expect, beforeEach, afterEach, vi } from "vitest";
+import { logger } from "matrix-js-sdk/lib/logger";
 import {
   type CallMembership,
   type LivekitTransport,
@@ -77,6 +78,7 @@ function epochMeWith$<T, U>(
 }
 
 test("should signal participant not yet connected to livekit", async () => {
+  const info = vi.spyOn(logger, "info");
   const mockedMemberships$ = new BehaviorSubject([bobMembership]);
   const mockConnectionManagerData$ = new BehaviorSubject(
     new ConnectionManagerData(),
@@ -108,6 +110,9 @@ test("should signal participant not yet connected to livekit", async () => {
       return true;
     },
   );
+  expect(info).toHaveBeenCalledWith(
+    "[RemoteMatrixLivekitMembers] @bob:example.org:DEV000: LiveKit participant missing",
+  );
 });
 
 // Helper to create epoch'ed memberships$ and membershipsWithTransport$ from memberships observable.
diff --git a/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.ts b/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.ts
index 0b93a274..e884d382 100644
--- a/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.ts
+++ b/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.ts
@@ -11,6 +11,7 @@ import {
   type LivekitTransportConfig,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { combineLatest, filter, map } from "rxjs";
+import { logger } from "matrix-js-sdk/lib/logger";
 
 import { type Behavior } from "../../Behavior";
 import { type IConnectionManager } from "./ConnectionManager";
@@ -133,8 +134,15 @@ export function createRemoteMatrixLivekitMembers$({
           }
         },
         // Each update where the key of the generator array do not change will result in updates to the `data$` behavior.
-        (scope, data$, userId, _deviceId, _memberId, _rtcBackendIdentity) => {
+        (scope, data$, userId, _deviceId, _memberId, rtcBackendIdentity) => {
           const { participant$, ...rest } = scope.splitBehavior(data$);
+          // Log whether the member could be matched to a LiveKit participant,
+          // since a tile shows "waiting for media" for as long as it cannot.
+          participant$.pipe(scope.bind()).subscribe((p) => {
+            logger.info(
+              `[RemoteMatrixLivekitMembers] ${rtcBackendIdentity}: LiveKit participant ${p ? `matched (${p.sid})` : "missing"}`,
+            );
+          });
           // will only get called once per backend identity.
           // updates to data$ and as a result to displayName$ and mxcAvatarUrl$ are more frequent.
           return {
diff --git a/src/state/media/RemoteUserMediaViewModel.ts b/src/state/media/RemoteUserMediaViewModel.ts
index 4307dea4..6daa381a 100644
--- a/src/state/media/RemoteUserMediaViewModel.ts
+++ b/src/state/media/RemoteUserMediaViewModel.ts
@@ -8,6 +8,7 @@ Please see LICENSE in the repository root for full details.
 
 import { type RemoteParticipant } from "livekit-client";
 import { combineLatest, map, of, switchMap } from "rxjs";
+import { logger } from "matrix-js-sdk/lib/logger";
 
 import { type Behavior } from "../Behavior";
 import { createVolumeControls, type VolumeControls } from "../VolumeControls";
@@ -45,6 +46,20 @@ export function createRemoteUserMedia(
     statsType: "inbound-rtp",
   });
 
+  const waitingForMedia$ = scope.behavior(
+    combineLatest(
+      [inputs.livekitRoom$, inputs.participant$],
+      (livekitRoom, participant) =>
+        // If livekitRoom is undefined, the user is not attempting to publish on
+        // any transport and so we shouldn't expect a participant. (They might
+        // be a subscribe-only bot for example.)
+        livekitRoom !== undefined && participant === null,
+    ),
+  );
+  waitingForMedia$.pipe(scope.bind()).subscribe((waiting) => {
+    logger.info(`[RemoteUserMedia ${inputs.id}] waitingForMedia=${waiting}`);
+  });
+
   return {
     ...baseUserMedia,
     ...createVolumeControls(scope, {
@@ -68,15 +83,6 @@ export function createRemoteUserMedia(
         ),
       ),
     ),
-    waitingForMedia$: scope.behavior(
-      combineLatest(
-        [inputs.livekitRoom$, inputs.participant$],
-        (livekitRoom, participant) =>
-          // If livekitRoom is undefined, the user is not attempting to publish on
-          // any transport and so we shouldn't expect a participant. (They might
-          // be a subscribe-only bot for example.)
-          livekitRoom !== undefined && participant === null,
-      ),
-    ),
+    waitingForMedia$,
   };
 }

From ace78de749ebb067cd258cd6be61610b14ca969a Mon Sep 17 00:00:00 2001
From: Valere <bill.carson@valrsoft.com>
Date: Thu, 3 Sep 2026 18:09:12 +0200
Subject: [PATCH 039/154] Cover Element Call as a component with end-to-end
 tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The widget tests cannot reach what makes a component different, because the
iframe used to guarantee it: that Element Call stays inside the space it was
given, and that two of them can exist in one page. So the development harness
gets driven by Playwright.

Three tests. Two components in one page holding a real call between two devices
of one account. The settings dialog and the reaction picker staying inside the
container the host gave, asserted by bounding box. And the host bridge
reporting in both directions, including a host-initiated mute coming back as a
report of the new state.

The containment test is the one worth having: both of the escapes found by
running the harness by hand — the settings dialog centred on the window, and
the reaction picker at 82vh landing below the container — would have failed it,
and neither was visible to typechecking, linting or the unit tests.

Users and rooms are created through the Synapse admin and client-server APIs
rather than by driving an interface, and the harness now takes its credentials
from its own query string so that a test can say which account and room to use.
A host reading its own URL is proper; it was Element Call doing so that was the
mistake.

Playwright gains a second web server for the harness on port 3001, a Vite dev
server whether or not the app itself is served from Docker, since the harness is
a development page with nothing to build.
---
 component/dev/Harness.tsx                   |  31 ++++--
 playwright.config.ts                        |  35 +++++--
 playwright/component/component-call.spec.ts | 102 ++++++++++++++++++
 playwright/component/harness.ts             | 110 ++++++++++++++++++++
 4 files changed, 261 insertions(+), 17 deletions(-)
 create mode 100644 playwright/component/component-call.spec.ts
 create mode 100644 playwright/component/harness.ts

diff --git a/component/dev/Harness.tsx b/component/dev/Harness.tsx
index ddb69d32..141f9492 100644
--- a/component/dev/Harness.tsx
+++ b/component/dev/Harness.tsx
@@ -37,16 +37,31 @@ const DEFAULT_CREDENTIALS: Credentials = {
   room: "",
 };
 
-/** The last credentials used, so that a reload does not mean typing them again. */
+/**
+ * The credentials to start with: the last ones used, so that a reload does not
+ * mean typing them again, overridden by anything in the query string.
+ *
+ * A host reading its own URL is entirely proper — it was Element Call doing so
+ * that was the mistake. It lets the end-to-end tests, or a shared link, say
+ * which account and room to use.
+ */
 function loadCredentials(): Credentials {
+  let stored: Partial<Credentials> = {};
   try {
-    const stored = localStorage.getItem(CREDENTIALS_KEY);
-    if (stored !== null)
-      return { ...DEFAULT_CREDENTIALS, ...(JSON.parse(stored) as Credentials) };
+    const json = localStorage.getItem(CREDENTIALS_KEY);
+    if (json !== null) stored = JSON.parse(json) as Credentials;
   } catch (e) {
     logger.warn("Could not read the stored harness credentials", e);
   }
-  return DEFAULT_CREDENTIALS;
+
+  const query = new URLSearchParams(location.search);
+  const fromUrl = Object.fromEntries(
+    (["homeserver", "username", "password", "room"] as const)
+      .map((name) => [name, query.get(name)])
+      .filter(([, value]) => value !== null),
+  ) as Partial<Credentials>;
+
+  return { ...DEFAULT_CREDENTIALS, ...stored, ...fromUrl };
 }
 
 interface Session {
@@ -88,7 +103,7 @@ const Pane: FC<{
   );
 
   return (
-    <section className={styles.pane}>
+    <section className={styles.pane} data-testid="call-pane">
       <div className={styles.paneBar}>
         <strong>{session.label}</strong>
         <code>{session.client.getDeviceId()}</code>
@@ -110,7 +125,7 @@ const Pane: FC<{
       </div>
       {/* Resizable, because how Element Call copes with the size it is given is
       one of the things we cannot find out from the standalone app */}
-      <div className={styles.paneCall}>
+      <div className={styles.paneCall} data-testid="call-container">
         {mounted && (
           <ElementCall
             client={session.client}
@@ -281,7 +296,7 @@ export const Harness: FC = (): ReactNode => {
           ))}
         </main>
       </div>
-      <section className={styles.log}>
+      <section className={styles.log} data-testid="bridge-log">
         <h2>Host bridge</h2>
         <ol>
           {entries.map((entry, i) => (
diff --git a/playwright.config.ts b/playwright.config.ts
index 85e65e13..73112c7a 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -11,6 +11,8 @@ import { join } from "path";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 
+import { COMPONENT_HARNESS_URL } from "./playwright/component/harness.ts";
+
 const baseURL = process.env.USE_DOCKER
   ? "http://localhost:8080"
   : "https://localhost:3000";
@@ -115,14 +117,29 @@ export default defineConfig({
   ],
 
   /* Run your local dev server before starting the tests */
-  webServer: {
-    command: "./scripts/playwright-webserver-command.sh",
-    url: baseURL,
-    reuseExistingServer: !process.env.CI,
-    ignoreHTTPSErrors: true,
-    gracefulShutdown: {
-      signal: "SIGTERM",
-      timeout: 500,
+  webServer: [
+    {
+      command: "./scripts/playwright-webserver-command.sh",
+      url: baseURL,
+      reuseExistingServer: !process.env.CI,
+      ignoreHTTPSErrors: true,
+      gracefulShutdown: {
+        signal: "SIGTERM",
+        timeout: 500,
+      },
     },
-  },
+    {
+      // The harness that embeds Element Call as a component. Always a Vite dev
+      // server, whether or not the app itself is being served from Docker,
+      // since there is nothing to build: it is a development page only.
+      command: "pnpm dev:component",
+      url: COMPONENT_HARNESS_URL,
+      reuseExistingServer: !process.env.CI,
+      ignoreHTTPSErrors: true,
+      gracefulShutdown: {
+        signal: "SIGTERM",
+        timeout: 500,
+      },
+    },
+  ],
 });
diff --git a/playwright/component/component-call.spec.ts b/playwright/component/component-call.spec.ts
new file mode 100644
index 00000000..233b826a
--- /dev/null
+++ b/playwright/component/component-call.spec.ts
@@ -0,0 +1,102 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, type Locator, test } from "@playwright/test";
+
+import { createUserAndRoom, expectWithin, startHarness } from "./harness.ts";
+
+/**
+ * Element Call embedded as a React component, driven through the development
+ * harness in `component/dev`.
+ *
+ * What these cover that the widget tests cannot is everything that follows from
+ * sharing a page with a host: whether Element Call stays inside the space it
+ * was given, and whether two of it can exist at once. As a widget, the iframe
+ * guaranteed both.
+ */
+
+/** The settings button, whichever of the two the footer is currently showing. */
+function settingsButton(pane: Locator): Locator {
+  return pane
+    .getByTestId("settings-bottom-left")
+    .or(pane.getByTestId("settings-bottom-center"))
+    .filter({ visible: true })
+    .first();
+}
+
+test("holds a call between two components on one page", async ({ page }) => {
+  const { username, roomId } = await createUserAndRoom("twocomponents");
+  const panes = await startHarness(page, username, roomId);
+
+  // Each component shows a lobby of its own, and neither has joined anything
+  // just by being rendered
+  for (const index of [0, 1])
+    await expect(panes.nth(index).getByTestId("lobby_joinCall")).toBeVisible({
+      timeout: 60_000,
+    });
+
+  for (const index of [0, 1])
+    await panes.nth(index).getByTestId("lobby_joinCall").click();
+
+  // Two devices of one account, so each component should see itself and the
+  // other. This is the part that proves two Element Calls in one page are two
+  // calls, and not one shared thing wearing two hats.
+  for (const index of [0, 1])
+    await expect(panes.nth(index).getByTestId("videoTile")).toHaveCount(2, {
+      timeout: 60_000,
+    });
+});
+
+test("keeps its modals inside the container it was given", async ({ page }) => {
+  const { username, roomId } = await createUserAndRoom("containment");
+  const panes = await startHarness(page, username, roomId);
+  const pane = panes.first();
+  const container = pane.getByTestId("call-container");
+
+  await pane.getByTestId("lobby_joinCall").click({ timeout: 60_000 });
+  await expect(pane.getByTestId("footer-container")).toBeVisible({
+    timeout: 60_000,
+  });
+
+  // Both of these are positioned `fixed`, and were centred on the window
+  // rather than the container until it was made a containing block. The
+  // settings dialog spilled over the host's interface; the reaction picker sat
+  // at 82vh, which put it below the container entirely and so out of sight.
+  await settingsButton(pane).click();
+  await expectWithin(pane.getByRole("dialog"), container);
+  await pane.getByTestId("modal_close").click();
+
+  await pane.getByRole("button", { name: "Reactions" }).click();
+  await expectWithin(
+    pane.getByRole("dialog", { name: "Pick reaction" }),
+    container,
+  );
+});
+
+test("tells its host what it is doing", async ({ page }) => {
+  const { username, roomId } = await createUserAndRoom("hostbridge");
+  const panes = await startHarness(page, username, roomId);
+  const pane = panes.first();
+  const log = page.getByTestId("bridge-log");
+
+  // Every component reports to its host through the bridge, whether that host
+  // is a widget container or an application embedding it directly
+  await expect(log).toContainText("contentLoaded", { timeout: 60_000 });
+
+  await pane.getByTestId("lobby_joinCall").click({ timeout: 60_000 });
+  await expect(log).toContainText("notifyJoined", { timeout: 60_000 });
+  await expect(log).toContainText("setAlwaysOnScreen(true)", {
+    timeout: 60_000,
+  });
+
+  // And takes instructions back: the host asking for a mute should come back
+  // as the component reporting the new state
+  await pane.getByRole("button", { name: "Mute" }).click();
+  await expect(log).toContainText("notifyDeviceMute(audio: false", {
+    timeout: 30_000,
+  });
+});
diff --git a/playwright/component/harness.ts b/playwright/component/harness.ts
new file mode 100644
index 00000000..4602f22d
--- /dev/null
+++ b/playwright/component/harness.ts
@@ -0,0 +1,110 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, type Locator, type Page } from "@playwright/test";
+
+import { SynapseAdmin } from "../utils/synapse-admin.ts";
+
+/**
+ * Where the component harness is served — `component/dev`, which embeds Element
+ * Call the way a host application would. Not the `baseURL` the rest of the
+ * suite uses: these tests drive a page that contains Element Call rather than
+ * Element Call itself.
+ */
+export const COMPONENT_HARNESS_URL = "https://localhost:3001";
+
+const HOMESERVER_URL = "https://synapse.m.localhost";
+const PASSWORD = "foobarbaz1!";
+
+/**
+ * Registers a user through the Synapse admin API and creates a room for it to
+ * call in, without touching a browser. The harness signs into this account
+ * twice, giving two devices in one page and so a real call between the two
+ * components.
+ */
+export async function createUserAndRoom(
+  name: string,
+): Promise<{ username: string; roomId: string }> {
+  const username = `${name}_${Date.now()}`;
+  const { access_token: accessToken } = await SynapseAdmin.forHomeserver(
+    HOMESERVER_URL,
+  ).registerUser(username, PASSWORD, name);
+
+  const response = await fetch(
+    `${HOMESERVER_URL}/_matrix/client/v3/createRoom`,
+    {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ name: `${name}'s call`, preset: "private_chat" }),
+    },
+  );
+  if (!response.ok)
+    throw new Error(
+      `Could not create a room: ${response.status} ${await response.text()}`,
+    );
+  const { room_id: roomId } = (await response.json()) as { room_id: string };
+
+  return { username, roomId };
+}
+
+/**
+ * Opens the harness signed in as the given user, and waits for both embedded
+ * calls to appear.
+ *
+ * @returns The two containers the host gave Element Call, in order.
+ */
+export async function startHarness(
+  page: Page,
+  username: string,
+  roomId: string,
+): Promise<Locator> {
+  const query = new URLSearchParams({
+    homeserver: HOMESERVER_URL,
+    username,
+    password: PASSWORD,
+    room: roomId,
+  });
+  await page.goto(`${COMPONENT_HARNESS_URL}/?${query.toString()}`);
+  await page.getByRole("button", { name: "Start" }).click();
+
+  const panes = page.getByTestId("call-pane");
+  // Two logins, two crypto setups and two initial syncs happen first
+  await expect(panes).toHaveCount(2, { timeout: 120_000 });
+  return panes;
+}
+
+/**
+ * Asserts that one element is drawn entirely inside another.
+ *
+ * This is the check that being a component rather than an iframe costs us: an
+ * iframe could not paint outside itself whatever its stylesheets said, whereas
+ * a component shares the page and has to be made to stay put.
+ */
+export async function expectWithin(
+  inner: Locator,
+  outer: Locator,
+): Promise<void> {
+  await expect(inner).toBeVisible();
+  const innerBox = await inner.boundingBox();
+  const outerBox = await outer.boundingBox();
+  if (innerBox === null || outerBox === null)
+    throw new Error("Expected both elements to be laid out");
+
+  // A pixel of slack, for subpixel layout
+  const slack = 1;
+  expect(innerBox.x).toBeGreaterThanOrEqual(outerBox.x - slack);
+  expect(innerBox.y).toBeGreaterThanOrEqual(outerBox.y - slack);
+  expect(innerBox.x + innerBox.width).toBeLessThanOrEqual(
+    outerBox.x + outerBox.width + slack,
+  );
+  expect(innerBox.y + innerBox.height).toBeLessThanOrEqual(
+    outerBox.y + outerBox.height + slack,
+  );
+}

From 2ab2197c01d23d51bd3a6ade455f7b14c919bdf3 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 3 Sep 2026 17:26:38 +0100
Subject: [PATCH 040/154] Warn when a behavior is re-entered while delivering a
 value

rxjs delivers a nested emission to every subscriber and then resumes
delivering the outer, older value to the remaining subscribers, which
leaves them permanently out of sync. Log the first occurrence per
behavior with a stack trace so the re-entrant path can be identified
from a rageshake.
---
 src/state/ObservableScope.test.ts | 27 +++++++++++++++++++++++++++
 src/state/ObservableScope.ts      | 24 +++++++++++++++++++++++-
 2 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/src/state/ObservableScope.test.ts b/src/state/ObservableScope.test.ts
index 31728f39..353ecaed 100644
--- a/src/state/ObservableScope.test.ts
+++ b/src/state/ObservableScope.test.ts
@@ -237,3 +237,30 @@ describe("Reconcile", () => {
     expect(setup).toHaveBeenCalledWith(1);
   });
 });
+
+describe("behavior", () => {
+  it("warns when a subscriber re-enters the behavior synchronously", () => {
+    const warn = vi.spyOn(logger, "warn").mockImplementation(() => {});
+    const scope = new ObservableScope();
+    const source$ = new Subject<number>();
+    const behavior$ = scope.behavior(source$, 0);
+    // A subscriber that reacts to the value 1 by synchronously emitting 2
+    behavior$.subscribe((v) => {
+      if (v === 1) source$.next(2);
+    });
+    const seen: number[] = [];
+    behavior$.subscribe((v) => seen.push(v));
+
+    source$.next(1);
+
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining("Behavior re-entered"),
+      expect.any(String),
+    );
+    // Documents the hazard the warning is about: the later subscriber ends up
+    // with the stale value 1 even though the behavior's value is 2.
+    expect(behavior$.value).toBe(2);
+    expect(seen.at(-1)).toBe(1);
+    scope.end();
+  });
+});
diff --git a/src/state/ObservableScope.ts b/src/state/ObservableScope.ts
index e3fc644f..0a64e2a4 100644
--- a/src/state/ObservableScope.ts
+++ b/src/state/ObservableScope.ts
@@ -20,6 +20,8 @@ import {
   takeUntil,
 } from "rxjs";
 
+import { logger } from "matrix-js-sdk/lib/logger";
+
 import { type Behavior } from "./Behavior";
 
 type MonoTypeOperator = <T>(o: Observable<T>) => Observable<T>;
@@ -73,9 +75,29 @@ export class ObservableScope {
     // they will no longer re-emit their current value upon subscription. We want
     // to support Observables that complete (for example `of({})`), so we have to
     // take care to not propagate the completion event.
+    // If a subscriber synchronously causes this same behavior to emit again,
+    // rxjs delivers the nested value to every subscriber first and then
+    // resumes delivering the outer (older) value to the remaining subscribers,
+    // leaving them permanently out of sync with the others. Log the first
+    // occurrence with a stack trace so that the re-entrant path can be found.
+    let delivering = false;
+    let reentryReported = false;
     setValue$.pipe(this.bind(), distinctUntilChanged()).subscribe({
       next(value) {
-        subject$.next(value);
+        if (delivering && !reentryReported) {
+          reentryReported = true;
+          logger.warn(
+            "Behavior re-entered while delivering a value; later subscribers will be left with a stale value",
+            new Error().stack,
+          );
+        }
+        const wasDelivering = delivering;
+        delivering = true;
+        try {
+          subject$.next(value);
+        } finally {
+          delivering = wasDelivering;
+        }
       },
       error(err: unknown) {
         subject$.error(err);

From b1393998a7f7282cb7f4a4727edc2e91bca61378 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 3 Sep 2026 18:08:53 +0100
Subject: [PATCH 041/154] Report re-entrancy depth and tag torn behaviors

A single re-entrant emission can only strand a contiguous run of a
behavior's subscribers, so a tile that is both 'speaking' and 'waiting
for media' (a middle subscriber stranded) implies a nested re-entry.
Report the nesting depth and log each new depth once instead of only the
first re-entry, and tag splitBehavior-derived behaviors with their field
name so the warning identifies which behavior tore.
---
 src/state/ObservableScope.test.ts | 26 ++++++++++++++----------
 src/state/ObservableScope.ts      | 33 ++++++++++++++++++++-----------
 2 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/src/state/ObservableScope.test.ts b/src/state/ObservableScope.test.ts
index 353ecaed..24b5d268 100644
--- a/src/state/ObservableScope.test.ts
+++ b/src/state/ObservableScope.test.ts
@@ -239,27 +239,33 @@ describe("Reconcile", () => {
 });
 
 describe("behavior", () => {
-  it("warns when a subscriber re-enters the behavior synchronously", () => {
+  it("warns with the tag and nesting depth, logging each new depth once", () => {
     const warn = vi.spyOn(logger, "warn").mockImplementation(() => {});
     const scope = new ObservableScope();
     const source$ = new Subject<number>();
-    const behavior$ = scope.behavior(source$, 0);
-    // A subscriber that reacts to the value 1 by synchronously emitting 2
+    const behavior$ = scope.behavior(source$, 0, "tagged");
+    // Re-enter once on value 1 (depth 2), then a nested re-entry on value 2
+    // (depth 3), which is the shape needed to strand a middle subscriber.
     behavior$.subscribe((v) => {
       if (v === 1) source$.next(2);
     });
+    behavior$.subscribe((v) => {
+      if (v === 2) source$.next(3);
+    });
     const seen: number[] = [];
     behavior$.subscribe((v) => seen.push(v));
 
     source$.next(1);
 
-    expect(warn).toHaveBeenCalledWith(
-      expect.stringContaining("Behavior re-entered"),
-      expect.any(String),
-    );
-    // Documents the hazard the warning is about: the later subscriber ends up
-    // with the stale value 1 even though the behavior's value is 2.
-    expect(behavior$.value).toBe(2);
+    const messages = warn.mock.calls.map((c) => c[0] as string);
+    expect(messages).toEqual([
+      expect.stringContaining("Behavior (tagged) re-entered at depth 2"),
+      expect.stringContaining("Behavior (tagged) re-entered at depth 3"),
+    ]);
+    warn.mock.calls.forEach((c) => expect(c[1]).toEqual(expect.any(String)));
+    // The behavior settles on the newest value while the last subscriber is
+    // left stranded on the oldest.
+    expect(behavior$.value).toBe(3);
     expect(seen.at(-1)).toBe(1);
     scope.end();
   });
diff --git a/src/state/ObservableScope.ts b/src/state/ObservableScope.ts
index 0a64e2a4..d0cfb7e9 100644
--- a/src/state/ObservableScope.ts
+++ b/src/state/ObservableScope.ts
@@ -68,6 +68,9 @@ export class ObservableScope {
   public behavior<T>(
     setValue$: Observable<T>,
     initialValue: T | typeof nothing = nothing,
+    // An optional label used only in the re-entrancy warning below, so that a
+    // torn behavior can be identified from a rageshake.
+    tag?: string,
   ): Behavior<T> {
     const subject$ = new BehaviorSubject(initialValue);
     // Push values from the Observable into the BehaviorSubject.
@@ -78,25 +81,29 @@ export class ObservableScope {
     // If a subscriber synchronously causes this same behavior to emit again,
     // rxjs delivers the nested value to every subscriber first and then
     // resumes delivering the outer (older) value to the remaining subscribers,
-    // leaving them permanently out of sync with the others. Log the first
-    // occurrence with a stack trace so that the re-entrant path can be found.
-    let delivering = false;
-    let reentryReported = false;
+    // leaving them permanently out of sync with the others. A single such
+    // re-entry can only strand a contiguous run of subscribers; stranding a
+    // subscriber in the middle of the list needs a nested (deeper) re-entry, so
+    // we report the depth and log each new depth (with a stack trace) rather
+    // than only the first occurrence, to make a nested re-entry visible.
+    let depth = 0;
+    let maxReportedDepth = 1;
     setValue$.pipe(this.bind(), distinctUntilChanged()).subscribe({
       next(value) {
-        if (delivering && !reentryReported) {
-          reentryReported = true;
+        if (depth > 0 && depth + 1 > maxReportedDepth) {
+          maxReportedDepth = depth + 1;
           logger.warn(
-            "Behavior re-entered while delivering a value; later subscribers will be left with a stale value",
+            `Behavior${tag ? ` (${tag})` : ""} re-entered at depth ${
+              depth + 1
+            } while delivering a value; later subscribers will be left with a stale value`,
             new Error().stack,
           );
         }
-        const wasDelivering = delivering;
-        delivering = true;
+        depth++;
         try {
           subject$.next(value);
         } finally {
-          delivering = wasDelivering;
+          depth--;
         }
       },
       error(err: unknown) {
@@ -193,7 +200,11 @@ export class ObservableScope {
     return Object.fromEntries(
       Object.keys(input$.value).map((key) => [
         `${key}$`,
-        this.behavior(input$.pipe(map((input) => input[key as keyof T]))),
+        this.behavior(
+          input$.pipe(map((input) => input[key as keyof T])),
+          nothing,
+          key,
+        ),
       ]),
     ) as SplitBehavior<T>;
   }

From dee4b05695dc9ead77c912d6dec7e3310e3963c7 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 3 Sep 2026 18:43:18 +0100
Subject: [PATCH 042/154] Diagnostics for duplicate participant matches and
 mid-delivery scope teardown

Warn when ConnectionManagerData merges participants from a second
connection to the same SFU URL, when more than one LiveKit participant
matches a member's backend identity, and when a scope is ended while one
of its behaviors is still delivering a value (which strands the later
bound subscribers on the old value). The per-member match log now also
names the connection the participant came from.
---
 .../remoteMembers/ConnectionManager.test.ts   | 20 ++++++++++++++++-
 .../remoteMembers/ConnectionManager.ts        |  9 ++++++--
 .../MatrixLivekitMembers.test.ts              |  2 +-
 .../remoteMembers/MatrixLivekitMembers.ts     | 15 ++++++++-----
 src/state/ObservableScope.test.ts             | 22 +++++++++++++++++++
 src/state/ObservableScope.ts                  | 17 ++++++++++++--
 6 files changed, 74 insertions(+), 11 deletions(-)

diff --git a/src/state/CallViewModel/remoteMembers/ConnectionManager.test.ts b/src/state/CallViewModel/remoteMembers/ConnectionManager.test.ts
index fada34be..809c8bcc 100644
--- a/src/state/CallViewModel/remoteMembers/ConnectionManager.test.ts
+++ b/src/state/CallViewModel/remoteMembers/ConnectionManager.test.ts
@@ -14,7 +14,7 @@ import { logger } from "matrix-js-sdk/lib/logger";
 import { Epoch, mapEpoch, ObservableScope } from "../../ObservableScope.ts";
 import {
   createConnectionManager$,
-  type ConnectionManagerData,
+  ConnectionManagerData,
 } from "./ConnectionManager.ts";
 import { type ConnectionFactory } from "./ConnectionFactory.ts";
 import { type Connection } from "./Connection.ts";
@@ -203,6 +203,24 @@ describe("connections$ stream", () => {
   });
 });
 
+describe("ConnectionManagerData", () => {
+  test("warns when a second connection to the same URL is merged", () => {
+    const warn = vi.spyOn(logger, "warn").mockImplementation(() => {});
+    const data = new ConnectionManagerData(logger);
+    const connection = { transport: TRANSPORT_1 } as unknown as Connection;
+    const p = (identity: string): RemoteParticipant =>
+      ({ identity }) as unknown as RemoteParticipant;
+    data.add(connection, [p("a")]);
+    data.add({ ...connection } as Connection, [p("b")]);
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining(
+        "second connection to https://lk.example.org: existing [a], adding [b]",
+      ),
+    );
+    expect(data.getParticipantsForTransport(TRANSPORT_1)).toHaveLength(2);
+  });
+});
+
 describe("connectionManagerData$ stream", () => {
   // Used in test to control fake connections' remoteParticipants$ streams
   let fakeRemoteParticipantsStreams: Map<string, Behavior<RemoteParticipant[]>>;
diff --git a/src/state/CallViewModel/remoteMembers/ConnectionManager.ts b/src/state/CallViewModel/remoteMembers/ConnectionManager.ts
index 727f68bc..5ebd2ce6 100644
--- a/src/state/CallViewModel/remoteMembers/ConnectionManager.ts
+++ b/src/state/CallViewModel/remoteMembers/ConnectionManager.ts
@@ -30,7 +30,7 @@ export class ConnectionManagerData {
     { connection: Connection; participants: RemoteParticipant[] }
   > = new Map();
 
-  public constructor() {}
+  public constructor(private readonly logger?: Logger) {}
 
   public add(connection: Connection, participants: RemoteParticipant[]): void {
     const key = this.getKey(connection.transport);
@@ -38,6 +38,11 @@ export class ConnectionManagerData {
     if (!existing) {
       this.store.set(key, { connection, participants });
     } else {
+      // Transports are deduplicated by URL upstream, so this should never
+      // happen; if it does, members may be matched against the wrong room.
+      this.logger?.warn(
+        `Merging participants from a second connection to ${key}: existing [${existing.participants.map((p) => p.identity).join(", ")}], adding [${participants.map((p) => p.identity).join(", ")}]`,
+      );
       existing.participants.push(...participants);
     }
   }
@@ -239,7 +244,7 @@ export function createConnectionManager$({
                 lists.reduce((data, { connection, participants }) => {
                   data.add(connection, participants);
                   return data;
-                }, new ConnectionManagerData()),
+                }, new ConnectionManagerData(logger)),
                 epoch,
               ),
           ),
diff --git a/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.test.ts b/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.test.ts
index 09c82789..fe762112 100644
--- a/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.test.ts
+++ b/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.test.ts
@@ -111,7 +111,7 @@ test("should signal participant not yet connected to livekit", async () => {
     },
   );
   expect(info).toHaveBeenCalledWith(
-    "[RemoteMatrixLivekitMembers] @bob:example.org:DEV000: LiveKit participant missing",
+    "[RemoteMatrixLivekitMembers] @bob:example.org:DEV000: LiveKit participant missing on no connection",
   );
 });
 
diff --git a/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.ts b/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.ts
index e884d382..76f4670e 100644
--- a/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.ts
+++ b/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.ts
@@ -111,13 +111,17 @@ export function createRemoteMatrixLivekitMembers$({
             const participants = transport
               ? managerData.getParticipantsForTransport(transport)
               : [];
-            const participant =
-              participants.find(
-                (p) => p.identity == membership.rtcBackendIdentity,
-              ) ?? null;
+            const matches = participants.filter(
+              (p) => p.identity == membership.rtcBackendIdentity,
+            );
+            const participant = matches[0] ?? null;
             const connection = transport
               ? managerData.getConnectionForTransport(transport)
               : null;
+            if (matches.length > 1)
+              logger.warn(
+                `[RemoteMatrixLivekitMembers] ${membership.rtcBackendIdentity}: ${matches.length} LiveKit participants match (sids ${matches.map((p) => p.sid).join(", ")}), using ${participant?.sid}`,
+              );
 
             yield {
               // This could just be the backend identity without the other keys.
@@ -139,8 +143,9 @@ export function createRemoteMatrixLivekitMembers$({
           // Log whether the member could be matched to a LiveKit participant,
           // since a tile shows "waiting for media" for as long as it cannot.
           participant$.pipe(scope.bind()).subscribe((p) => {
+            const url = data$.value.connection?.transport.livekit_service_url;
             logger.info(
-              `[RemoteMatrixLivekitMembers] ${rtcBackendIdentity}: LiveKit participant ${p ? `matched (${p.sid})` : "missing"}`,
+              `[RemoteMatrixLivekitMembers] ${rtcBackendIdentity}: LiveKit participant ${p ? `matched (${p.sid})` : "missing"} on ${url ?? "no connection"}`,
             );
           });
           // will only get called once per backend identity.
diff --git a/src/state/ObservableScope.test.ts b/src/state/ObservableScope.test.ts
index 24b5d268..12bd39ce 100644
--- a/src/state/ObservableScope.test.ts
+++ b/src/state/ObservableScope.test.ts
@@ -269,4 +269,26 @@ describe("behavior", () => {
     expect(seen.at(-1)).toBe(1);
     scope.end();
   });
+
+  it("warns when the scope is ended while a behavior is mid-delivery", () => {
+    const warn = vi.spyOn(logger, "warn").mockImplementation(() => {});
+    const scope = new ObservableScope();
+    const source$ = new Subject<number>();
+    const behavior$ = scope.behavior(source$, 0);
+    behavior$.subscribe((v) => {
+      if (v === 1) scope.end();
+    });
+    // A derived behavior is bound to the scope, so ending the scope
+    // mid-delivery unsubscribes it before the value reaches it.
+    const derived$ = scope.behavior(behavior$);
+
+    source$.next(1);
+
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining("Scope ended while 1 of its behaviors"),
+      expect.any(String),
+    );
+    expect(behavior$.value).toBe(1);
+    expect(derived$.value).toBe(0);
+  });
 });
diff --git a/src/state/ObservableScope.ts b/src/state/ObservableScope.ts
index d0cfb7e9..8f09cb6e 100644
--- a/src/state/ObservableScope.ts
+++ b/src/state/ObservableScope.ts
@@ -36,6 +36,12 @@ const nothing = Symbol("nothing");
  * A scope which limits the execution lifetime of its bound Observables.
  */
 export class ObservableScope {
+  /**
+   * Number of this scope's behaviors currently mid-delivery. Used to detect a
+   * scope being torn down synchronously from within one of its own emissions.
+   */
+  private delivering = 0;
+
   private readonly ended$ = new BehaviorSubject(false);
 
   private readonly bindImpl: MonoTypeOperator = takeUntil(
@@ -89,7 +95,7 @@ export class ObservableScope {
     let depth = 0;
     let maxReportedDepth = 1;
     setValue$.pipe(this.bind(), distinctUntilChanged()).subscribe({
-      next(value) {
+      next: (value) => {
         if (depth > 0 && depth + 1 > maxReportedDepth) {
           maxReportedDepth = depth + 1;
           logger.warn(
@@ -100,13 +106,15 @@ export class ObservableScope {
           );
         }
         depth++;
+        this.delivering++;
         try {
           subject$.next(value);
         } finally {
           depth--;
+          this.delivering--;
         }
       },
-      error(err: unknown) {
+      error: (err: unknown) => {
         subject$.error(err);
       },
     });
@@ -119,6 +127,11 @@ export class ObservableScope {
    * Ends the scope, causing any bound Observables to complete.
    */
   public end(): void {
+    if (this.delivering > 0)
+      logger.warn(
+        `Scope ended while ${this.delivering} of its behaviors were still delivering a value; later subscribers will be left with a stale value`,
+        new Error().stack,
+      );
     this.ended$.next(true);
   }
 

From 054913d17d1ad8e13b0aec221c0a9a2d9f315153 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Thu, 3 Sep 2026 20:11:18 +0200
Subject: [PATCH 043/154] Use testScope in ObservableScope tests

---
 src/state/ObservableScope.test.ts | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/state/ObservableScope.test.ts b/src/state/ObservableScope.test.ts
index 12bd39ce..25bb1432 100644
--- a/src/state/ObservableScope.test.ts
+++ b/src/state/ObservableScope.test.ts
@@ -16,7 +16,7 @@ import {
   ObservableScope,
   trackEpoch,
 } from "./ObservableScope";
-import { withTestScheduler } from "../utils/test";
+import { testScope, withTestScheduler } from "../utils/test";
 
 describe("Epoch", () => {
   it("should map the value correctly", () => {
@@ -87,7 +87,7 @@ describe("Epoch", () => {
   });
 
   it("behavior test", () => {
-    const scope = new ObservableScope();
+    const scope = testScope();
     const s$ = new Subject();
     const behavior$ = scope.behavior(s$, 0);
     behavior$.subscribe((value) => {
@@ -115,7 +115,7 @@ describe("Reconcile", () => {
 
   it("should wait clean up before processing next", async () => {
     vi.useFakeTimers();
-    const scope = new ObservableScope();
+    const scope = testScope();
     const behavior$ = new BehaviorSubject<number>(0);
 
     const setup = vi.fn().mockImplementation(async () => await sleep(100));
@@ -149,7 +149,7 @@ describe("Reconcile", () => {
 
   it("should skip intermediates values that are not setup", async () => {
     vi.useFakeTimers();
-    const scope = new ObservableScope();
+    const scope = testScope();
     const behavior$ = new BehaviorSubject<number>(0);
 
     const setup = vi
@@ -194,7 +194,7 @@ describe("Reconcile", () => {
 
   it("should wait for setup to complete before starting cleanup", async () => {
     vi.useFakeTimers();
-    const scope = new ObservableScope();
+    const scope = testScope();
     const behavior$ = new BehaviorSubject<number>(0);
 
     const setup = vi
@@ -241,7 +241,7 @@ describe("Reconcile", () => {
 describe("behavior", () => {
   it("warns with the tag and nesting depth, logging each new depth once", () => {
     const warn = vi.spyOn(logger, "warn").mockImplementation(() => {});
-    const scope = new ObservableScope();
+    const scope = testScope();
     const source$ = new Subject<number>();
     const behavior$ = scope.behavior(source$, 0, "tagged");
     // Re-enter once on value 1 (depth 2), then a nested re-entry on value 2
@@ -267,7 +267,6 @@ describe("behavior", () => {
     // left stranded on the oldest.
     expect(behavior$.value).toBe(3);
     expect(seen.at(-1)).toBe(1);
-    scope.end();
   });
 
   it("warns when the scope is ended while a behavior is mid-delivery", () => {

From b22eba7af92a03fc1bd8bd59999fca7da9b7934e Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Fri, 4 Sep 2026 07:39:58 +0200
Subject: [PATCH 044/154] Add further tests

---
 .../localMember/LocalMember.test.ts           | 96 +++++++++++++++++++
 1 file changed, 96 insertions(+)

diff --git a/src/state/CallViewModel/localMember/LocalMember.test.ts b/src/state/CallViewModel/localMember/LocalMember.test.ts
index 09d863aa..b270db13 100644
--- a/src/state/CallViewModel/localMember/LocalMember.test.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.test.ts
@@ -31,6 +31,7 @@ import {
   flushPromises,
   mockConfig,
   mockLivekitRoom,
+  mockLocalParticipant,
   mockMuteStates,
   withTestScheduler,
   ownMemberMock,
@@ -880,4 +881,99 @@ describe("LocalMembership", () => {
       scope.end();
     });
   });
+
+  describe("toggleScreenSharing", () => {
+    let originalMediaDevices: MediaDevices | undefined;
+
+    beforeAll(() => {
+      mockConfig();
+      // Screen sharing is only offered when getDisplayMedia is available.
+      originalMediaDevices = navigator.mediaDevices;
+      Object.defineProperty(navigator, "mediaDevices", {
+        configurable: true,
+        value: { getDisplayMedia: vi.fn() },
+      });
+    });
+
+    afterAll(() => {
+      Object.defineProperty(navigator, "mediaDevices", {
+        configurable: true,
+        value: originalMediaDevices,
+      });
+    });
+
+    const createMembershipWithConnection = (
+      connection: Connection | null,
+    ): {
+      scope: ObservableScope;
+      localMembership: ReturnType<typeof createLocalMembership$>;
+    } => {
+      const scope = new ObservableScope();
+      const connectionManagerData = new ConnectionManagerData();
+      if (connection) connectionManagerData.add(connection, []);
+      const localMembership = createLocalMembership$({
+        scope,
+        ...defaultCreateLocalMemberValues,
+        connectionManager: {
+          connectionManagerData$: constant(new Epoch(connectionManagerData)),
+        },
+        localTransport$: new BehaviorSubject({
+          advertised$: new BehaviorSubject(aTransport),
+          active$: new BehaviorSubject(aTransportWithSFUConfig),
+        }),
+      });
+      return { scope, localMembership };
+    };
+
+    it("surfaces a failure and clears it on dismiss", async () => {
+      const error = new Error("NotReadableError");
+      const setScreenShareEnabled = vi.fn().mockRejectedValue(error);
+      const connection = {
+        state$: constant(ConnectionState.LivekitConnected),
+        transport: aTransport,
+        livekitRoom: mockLivekitRoom({
+          localParticipant: mockLocalParticipant({
+            isScreenShareEnabled: false,
+            setScreenShareEnabled,
+          }),
+        }),
+      } as unknown as Connection;
+      const { scope, localMembership } =
+        createMembershipWithConnection(connection);
+      await flushPromises();
+
+      expect(localMembership.toggleScreenSharing).not.toBeNull();
+      expect(localMembership.screenShareError$.value).toBeNull();
+
+      localMembership.toggleScreenSharing!();
+      await flushPromises();
+
+      expect(setScreenShareEnabled).toHaveBeenCalledWith(
+        true,
+        expect.any(Object),
+        undefined,
+      );
+      expect(localMembership.screenShareError$.value).toBe(error);
+
+      localMembership.dismissScreenShareError();
+      expect(localMembership.screenShareError$.value).toBeNull();
+
+      scope.end();
+    });
+
+    it("does nothing when there is no local participant", async () => {
+      // No connection means participant$ never resolves to a participant.
+      const { scope, localMembership } =
+        createMembershipWithConnection(null);
+      await flushPromises();
+
+      expect(localMembership.toggleScreenSharing).not.toBeNull();
+      localMembership.toggleScreenSharing!();
+      await flushPromises();
+
+      expect(localMembership.screenShareError$.value).toBeNull();
+
+      scope.end();
+    });
+  });
 });

From bae8da3ddc0b6e367bbbae622b741b03b3b0c543 Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Fri, 4 Sep 2026 07:44:16 +0200
Subject: [PATCH 045/154] Reformat

---
 src/state/CallViewModel/localMember/LocalMember.test.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/state/CallViewModel/localMember/LocalMember.test.ts b/src/state/CallViewModel/localMember/LocalMember.test.ts
index b270db13..aec64177 100644
--- a/src/state/CallViewModel/localMember/LocalMember.test.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.test.ts
@@ -963,8 +963,7 @@ describe("LocalMembership", () => {
 
     it("does nothing when there is no local participant", async () => {
       // No connection means participant$ never resolves to a participant.
-      const { scope, localMembership } =
-        createMembershipWithConnection(null);
+      const { scope, localMembership } = createMembershipWithConnection(null);
       await flushPromises();
 
       expect(localMembership.toggleScreenSharing).not.toBeNull();

From 70f6e785cea83520b9a06404dc2ac6120568b97b Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Fri, 4 Sep 2026 09:18:19 +0000
Subject: [PATCH 046/154] Update ghcr.io/element-hq/element-web:develop Docker
 digest to 724b468 (#4226)

* Update ghcr.io/element-hq/element-web:develop Docker digest to a9bd290

* Fix Element Web integration tests

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Robin <robin@robin.town>
---
 docker-compose-playwright.yml      | 4 ++--
 playwright/fixtures/widget-user.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index edc88cd8..6ea4b672 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -13,7 +13,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:c107ec33fa349cb5c14fd03a4e13352d64ef264416dac96d273aa07b4004171f
+    image: ghcr.io/element-hq/element-web:develop@sha256:a9bd290646110ee185337aa591fb35ddbd7397c5a6221efc8d12da74c28309fe
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:c107ec33fa349cb5c14fd03a4e13352d64ef264416dac96d273aa07b4004171f
+    image: ghcr.io/element-hq/element-web:develop@sha256:a9bd290646110ee185337aa591fb35ddbd7397c5a6221efc8d12da74c28309fe
diff --git a/playwright/fixtures/widget-user.ts b/playwright/fixtures/widget-user.ts
index 2c43ee1b..74d9ad8e 100644
--- a/playwright/fixtures/widget-user.ts
+++ b/playwright/fixtures/widget-user.ts
@@ -153,7 +153,7 @@ export const widgetTest = test.extend<MyFixtures>({
 
       // Accept the DM invite from brooks
       // This how playwright record selects the DM invite in the room list
-      await ewPage2.getByRole("option", { name: "Open room" }).click();
+      await ewPage2.getByRole("button", { name: "Open room" }).click();
       await ewPage2.getByRole("button", { name: "Start chatting" }).click();
     }
 

From f5458bb03e93bda8128b96e0225c178fc614e0e6 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Fri, 4 Sep 2026 13:51:47 +0200
Subject: [PATCH 047/154] de-globalise styles

---
 README.md                                    |   6 +
 component/build/scopeStylesToRoot.test.ts    | 112 +++++++++++++
 component/build/scopeStylesToRoot.ts         | 161 +++++++++++++++++++
 component/index.tsx                          |   5 +-
 package.json                                 |   1 +
 playwright/component/component-call.spec.ts  |  32 ++++
 pnpm-lock.yaml                               |   3 +
 src/base.css                                 |  13 +-
 src/settings/DeveloperSettingsTab.module.css |   2 +-
 src/settings/DeveloperSettingsTab.tsx        |   4 +-
 vite-component-dev.config.ts                 |   4 +
 vite-component.config.ts                     | 133 ++++++++-------
 vitest.config.ts                             |   6 +-
 13 files changed, 416 insertions(+), 66 deletions(-)
 create mode 100644 component/build/scopeStylesToRoot.test.ts
 create mode 100644 component/build/scopeStylesToRoot.ts

diff --git a/README.md b/README.md
index 792665f9..248609e5 100644
--- a/README.md
+++ b/README.md
@@ -230,6 +230,12 @@ Element Call behaves when it does not own the page — the size it is given,
 whether it stays inside its container, and what it says to its host, which is
 logged along the bottom.
 
+The component's stylesheet is confined to the element it is mounted in: the
+build rewrites every selector so that it matches only Element Call's root or
+what is inside it, with `html`, `body` and `:root` standing for that root (see
+`component/build/scopeStylesToRoot.ts`). A host's own page keeps its styles,
+and Element Call brings its own fonts and design tokens along.
+
 ### Backend
 
 A docker compose file `docker-compose-dev.yml` is provided to start the
diff --git a/component/build/scopeStylesToRoot.test.ts b/component/build/scopeStylesToRoot.test.ts
new file mode 100644
index 00000000..ae42062c
--- /dev/null
+++ b/component/build/scopeStylesToRoot.test.ts
@@ -0,0 +1,112 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, it } from "vitest";
+import postcss from "postcss";
+
+import { ROOT_SELECTOR, scopeStylesToRoot } from "./scopeStylesToRoot";
+
+const inRoot = `:where(${ROOT_SELECTOR}, ${ROOT_SELECTOR} *)`;
+const isRoot = `:where(${ROOT_SELECTOR})`;
+
+async function scope(css: string, file = "base.css"): Promise<string> {
+  const result = await postcss([scopeStylesToRoot()]).process(css, {
+    from: file,
+  });
+  return result.css;
+}
+
+describe("scopeStylesToRoot", () => {
+  it("makes the root stand in for the document", async () => {
+    expect(await scope("html { line-height: 1.15 }")).toBe(
+      `${isRoot} { line-height: 1.15 }`,
+    );
+    expect(await scope("body { margin: 0 }")).toBe(`${isRoot} { margin: 0 }`);
+    expect(await scope(":root { --a: 1 }")).toBe(`${isRoot} { --a: 1 }`);
+    expect(await scope("body.no-scroll-body { position: fixed }")).toBe(
+      `${isRoot}.no-scroll-body { position: fixed }`,
+    );
+    expect(await scope("body .x { color: red }")).toBe(
+      `${isRoot} .x { color: red }`,
+    );
+  });
+
+  it("collapses selectors that all became the root", async () => {
+    expect(await scope("html, body, input { font: inherit }")).toBe(
+      `${isRoot},input${inRoot} { font: inherit }`,
+    );
+  });
+
+  it("confines everything else to the root and what is inside it", async () => {
+    expect(await scope("h1 { margin: 0 }")).toBe(`h1${inRoot} { margin: 0 }`);
+    expect(await scope(".cpd-theme-dark { --a: 1 }")).toBe(
+      `.cpd-theme-dark${inRoot} { --a: 1 }`,
+    );
+    expect(await scope("* { box-sizing: border-box }")).toBe(
+      `*${inRoot} { box-sizing: border-box }`,
+    );
+    expect(await scope(".a > .b + .c { color: red }")).toBe(
+      `.a>.b+.c${inRoot} { color: red }`,
+    );
+  });
+
+  it("keeps pseudo-elements last", async () => {
+    expect(await scope("button::-moz-focus-inner { border: 0 }")).toBe(
+      `button${inRoot}::-moz-focus-inner { border: 0 }`,
+    );
+    expect(await scope(".a .b:hover::after { content: '' }")).toBe(
+      `.a .b:hover${inRoot}::after { content: '' }`,
+    );
+    expect(await scope("p:first-letter { color: red }")).toBe(
+      `p${inRoot}:first-letter { color: red }`,
+    );
+  });
+
+  it("leaves alone what already names the root", async () => {
+    const css = `${ROOT_SELECTOR}[data-platform="ios"] { --a: 1 }`;
+    expect(await scope(css)).toBe(css);
+  });
+
+  it("reaches into layers and media queries", async () => {
+    expect(
+      await scope(
+        "@layer normalize { h1 { margin: 0 } } @media (min-width: 1px) { p { margin: 0 } }",
+      ),
+    ).toBe(
+      `@layer normalize { h1${inRoot} { margin: 0 } } @media (min-width: 1px) { p${inRoot} { margin: 0 } }`,
+    );
+  });
+
+  it("does not touch keyframes or nested rules", async () => {
+    expect(
+      await scope("@keyframes spin { from { opacity: 0 } to { opacity: 1 } }"),
+    ).toBe("@keyframes spin { from { opacity: 0 } to { opacity: 1 } }");
+    expect(
+      await scope(
+        ".a { color: red; &:hover { color: blue } .b { color: green } }",
+      ),
+    ).toBe(
+      `.a${inRoot} { color: red; &:hover { color: blue } .b { color: green } }`,
+    );
+  });
+
+  it("only touches the bare selectors of a CSS module", async () => {
+    const file = "Settings.module.css";
+    expect(await scope("pre { font-size: 1px }", file)).toBe(
+      `pre${inRoot} { font-size: 1px }`,
+    );
+    expect(await scope(".modal pre { font-size: 1px }", file)).toBe(
+      `.modal pre${inRoot} { font-size: 1px }`,
+    );
+    expect(await scope(".box_abc12 { border: 0 }", file)).toBe(
+      ".box_abc12 { border: 0 }",
+    );
+    expect(await scope(".a .b_abc12:hover { border: 0 }", file)).toBe(
+      ".a .b_abc12:hover { border: 0 }",
+    );
+  });
+});
diff --git a/component/build/scopeStylesToRoot.ts b/component/build/scopeStylesToRoot.ts
new file mode 100644
index 00000000..29532d53
--- /dev/null
+++ b/component/build/scopeStylesToRoot.ts
@@ -0,0 +1,161 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  type AtRule,
+  type Container,
+  type Document,
+  type Plugin,
+  type Rule,
+} from "postcss";
+import selectorParser, {
+  type Node,
+  type Pseudo,
+  type Selector,
+} from "postcss-selector-parser";
+
+/**
+ * How the stylesheets find Element Call's root element. The attribute is put
+ * there by `useTheme`, on the container the host gives the component.
+ */
+export const ROOT_SELECTOR = "[data-element-call-root]";
+
+// Both are `:where()`, which has no specificity of its own, so the rules keep
+// exactly the weight they had before being scoped and nothing in Element Call's
+// cascade changes — only where it applies.
+//
+// The root, or anything inside it. Appended to the element a rule is about,
+// rather than prepended to the whole selector, so that a rule about the root
+// itself (its theme class, say) still matches.
+const IN_ROOT = `:where(${ROOT_SELECTOR}, ${ROOT_SELECTOR} *)`;
+// The root itself, standing in for the document.
+const IS_ROOT = `:where(${ROOT_SELECTOR})`;
+
+/**
+ * Confines a stylesheet to Element Call's root element, for the build of
+ * Element Call as a component.
+ *
+ * As a page of its own, Element Call can style the document: normalize.css and
+ * Compound speak of `html`, `body` and bare elements, and the design tokens are
+ * declared on `:root`. Embedded in a host, all of that would land on the host's
+ * document too. This rewrites every selector so that it matches only the root
+ * or its descendants:
+ *
+ * - `html`, `body` and `:root` become the root element, which is what stands in
+ *   for the document inside a host.
+ * - Everything else keeps its selector and gains `:where([data-element-call-root],
+ *   [data-element-call-root] *)` on the element it styles.
+ * - Selectors that already name the root are left alone, as are keyframe
+ *   selectors and rules nested inside another rule, which are relative to it.
+ *
+ * CSS modules are scoped by their class names already, so only their selectors
+ * that would match by element alone — `pre` rather than `.pre` — are touched.
+ *
+ * The root's fonts and design tokens are still inherited by everything inside
+ * it, the way they were from `body` and `:root`, and `@font-face` declarations
+ * stay global, which they are by nature.
+ */
+export function scopeStylesToRoot(): Plugin {
+  return {
+    postcssPlugin: "element-call-scope-styles-to-root",
+    Once(root) {
+      const isModule =
+        root.source?.input.file?.endsWith(".module.css") ?? false;
+      root.walkRules((rule) => {
+        if (isRelative(rule)) return;
+        rule.selector = (isModule ? scopeBare : scopeAll).processSync(
+          rule.selector,
+          { lossless: false },
+        );
+      });
+    },
+  };
+}
+
+/** Whether a rule's selectors are relative to something other than the document. */
+function isRelative(rule: Rule): boolean {
+  let parent: Container | Document | undefined = rule.parent;
+  while (parent !== undefined) {
+    if (parent.type === "rule") return true;
+    if (parent.type === "atrule") {
+      const { name } = parent as AtRule;
+      if (name.endsWith("keyframes") || name === "page") return true;
+    }
+    parent = parent.parent;
+  }
+  return false;
+}
+
+const processor = (isModule: boolean): ReturnType<typeof selectorParser> =>
+  selectorParser((selectors) => {
+    selectors.each((selector) => {
+      scopeSelector(selector, isModule);
+    });
+    // Mapping `html, body` onto the root leaves the same selector twice
+    const seen = new Set<string>();
+    selectors.each((selector) => {
+      const text = String(selector).trim();
+      if (seen.has(text)) selector.remove();
+      else seen.add(text);
+    });
+  });
+
+// Everything, for stylesheets that speak of the document; only what a class
+// does not already confine, for CSS modules
+const scopeAll = processor(false);
+const scopeBare = processor(true);
+
+function scopeSelector(selector: Selector, isModule: boolean): void {
+  if (String(selector).includes(ROOT_SELECTOR)) return;
+
+  const compounds = splitCompounds(selector);
+  if (compounds.length === 0) return;
+
+  // Something said of the document is said of the root instead
+  const document = compounds[0].find(isDocumentSelector);
+  if (document !== undefined) {
+    document.replaceWith(pseudo(IS_ROOT));
+    return;
+  }
+
+  const subject = compounds.at(-1)!;
+  if (isModule && subject.some((node) => node.type === "class")) return;
+
+  // Pseudo-elements have to come last in a compound selector
+  const pseudoElement = subject.find(isPseudoElement);
+  if (pseudoElement === undefined) selector.append(pseudo(IN_ROOT));
+  else selector.insertBefore(pseudoElement, pseudo(IN_ROOT));
+}
+
+/** The compound selectors making up a complex selector, in order. */
+function splitCompounds(selector: Selector): Node[][] {
+  const compounds: Node[][] = [[]];
+  for (const node of selector.nodes) {
+    if (node.type === "combinator") compounds.push([]);
+    else if (node.type !== "comment") compounds.at(-1)!.push(node);
+  }
+  return compounds.filter((compound) => compound.length > 0);
+}
+
+function isDocumentSelector(node: Node): boolean {
+  return (
+    (node.type === "tag" && (node.value === "html" || node.value === "body")) ||
+    (node.type === "pseudo" && node.value === ":root")
+  );
+}
+
+function isPseudoElement(node: Node): node is Pseudo {
+  if (node.type !== "pseudo") return false;
+  return (
+    node.value.startsWith("::") ||
+    [":before", ":after", ":first-line", ":first-letter"].includes(node.value)
+  );
+}
+
+function pseudo(text: string): Pseudo {
+  return selectorParser().astSync(text).nodes[0].nodes[0].clone() as Pseudo;
+}
diff --git a/component/index.tsx b/component/index.tsx
index 55e2f996..84a18353 100644
--- a/component/index.tsx
+++ b/component/index.tsx
@@ -18,7 +18,10 @@ Please see LICENSE in the repository root for full details.
  */
 
 // The design tokens, fonts and element defaults every Element Call stylesheet
-// builds on.
+// builds on. Written for a page, they speak of `html`, `body` and bare
+// elements; the component build confines them, and every other stylesheet in
+// this bundle, to the root element below (see build/scopeStylesToRoot.ts), so
+// that the host's document is left as it was.
 //
 // Where these land relative to the component stylesheets is the bundler's
 // choice — the standalone app puts them first, this build puts them in the
diff --git a/package.json b/package.json
index cf1e1f71..471cd28b 100644
--- a/package.json
+++ b/package.json
@@ -112,6 +112,7 @@
     "pako": "^2.0.4",
     "postcss": "^8.4.41",
     "postcss-preset-env": "^10.0.0",
+    "postcss-selector-parser": "^7.1.1",
     "posthog-js": "1.408.2",
     "qrcode": "^1.5.4",
     "react": "19",
diff --git a/playwright/component/component-call.spec.ts b/playwright/component/component-call.spec.ts
index 233b826a..d679fbb2 100644
--- a/playwright/component/component-call.spec.ts
+++ b/playwright/component/component-call.spec.ts
@@ -77,6 +77,38 @@ test("keeps its modals inside the container it was given", async ({ page }) => {
   );
 });
 
+test("leaves the host's own page unstyled", async ({ page }) => {
+  const { username, roomId } = await createUserAndRoom("hoststyles");
+  const panes = await startHarness(page, username, roomId);
+  await expect(panes.first().getByTestId("lobby_joinCall")).toBeVisible({
+    timeout: 60_000,
+  });
+
+  // Element Call's stylesheet is written for a page of its own: normalize.css
+  // gives `html` a line height, Compound gives `body` its font and feature
+  // settings, and the design tokens live on `:root`. None of that may reach the
+  // host's document — the harness sets none of these itself, so anything other
+  // than the browser's defaults here came from us.
+  const host = await page.evaluate(() => {
+    const html = getComputedStyle(document.documentElement);
+    const body = getComputedStyle(document.body);
+    return {
+      lineHeight: html.lineHeight,
+      fontFeatureSettings: body.fontFeatureSettings,
+      token: html.getPropertyValue("--cpd-color-text-primary"),
+    };
+  });
+  expect(host).toEqual({
+    lineHeight: "normal",
+    fontFeatureSettings: "normal",
+    token: "",
+  });
+
+  // While inside the container, the same rules do apply
+  const root = panes.first().locator("[data-element-call-root]");
+  await expect(root).toHaveCSS("font-feature-settings", /"kern"/);
+});
+
 test("tells its host what it is doing", async ({ page }) => {
   const { username, roomId } = await createUserAndRoom("hostbridge");
   const panes = await startHarness(page, username, roomId);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4cfb3ccd..b50a25f7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -223,6 +223,9 @@ importers:
       postcss-preset-env:
         specifier: ^10.0.0
         version: 10.6.1(postcss@8.5.25)
+      postcss-selector-parser:
+        specifier: ^7.1.1
+        version: 7.1.1
       posthog-js:
         specifier: 1.408.2
         version: 1.408.2
diff --git a/src/base.css b/src/base.css
index 0d424e64..ae09f492 100644
--- a/src/base.css
+++ b/src/base.css
@@ -10,11 +10,14 @@ and element defaults its own stylesheets build on top of.
 
 Split out from index.css so that Element Call embedded in a host application
 can have these without also being given the standalone page's layout, which
-would style the host's own document. What remains here does still reach outside
-Element Call's container — normalize.css and the typography below use bare
-element selectors, and the custom properties are declared on `:root` — so a
-host gets those too. Narrowing them needs a real host to check against, so it
-waits for the Element Web integration rather than being guessed at here.
+would style the host's own document. What remains here still speaks of the
+document — normalize.css and the typography below use bare element selectors,
+and the custom properties are declared on `:root` — which is right for the
+page, and is why the component build rewrites it: there every selector is
+confined to Element Call's root element (see component/build/scopeStylesToRoot.ts),
+with `html`, `body` and `:root` becoming that element. Nothing needs to be
+written differently here for that to work, but nothing here may rely on
+reaching the host's document either.
 
 Nothing here should depend on where it lands relative to Element Call's
 component stylesheets: the bundler decides that, and it decides differently for
diff --git a/src/settings/DeveloperSettingsTab.module.css b/src/settings/DeveloperSettingsTab.module.css
index 29f4211b..369bec3b 100644
--- a/src/settings/DeveloperSettingsTab.module.css
+++ b/src/settings/DeveloperSettingsTab.module.css
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-pre {
+.pre {
   font-size: var(--font-size-micro);
 }
 
diff --git a/src/settings/DeveloperSettingsTab.tsx b/src/settings/DeveloperSettingsTab.tsx
index 25b3c81c..ec5bf7b0 100644
--- a/src/settings/DeveloperSettingsTab.tsx
+++ b/src/settings/DeveloperSettingsTab.tsx
@@ -680,9 +680,9 @@ export const DeveloperSettingsTab: FC<Props> = ({
       <AudioProcessingSettings />
       <Separator />
       <p>{t("developer_mode.environment_variables")}</p>
-      <pre>{JSON.stringify(env, null, 2)}</pre>
+      <pre className={styles.pre}>{JSON.stringify(env, null, 2)}</pre>
       <p>{t("developer_mode.url_params")}</p>
-      <pre>{JSON.stringify(urlParams, null, 2)}</pre>
+      <pre className={styles.pre}>{JSON.stringify(urlParams, null, 2)}</pre>
     </>
   );
 };
diff --git a/vite-component-dev.config.ts b/vite-component-dev.config.ts
index 61cb5e51..2e678382 100644
--- a/vite-component-dev.config.ts
+++ b/vite-component-dev.config.ts
@@ -10,6 +10,7 @@ import { realpathSync } from "node:fs";
 import * as fs from "node:fs";
 
 import { vitePluginsConfig } from "./vite.config";
+import { scopeStylesToRoot } from "./component/build/scopeStylesToRoot";
 
 // Serves the harness under `component/dev`, which embeds Element Call as a
 // component the way a host application would. Development only: this is not
@@ -35,6 +36,9 @@ export default defineConfig(({ mode }) => {
   return {
     ...vitePluginsConfig({ mode, html: false }),
     root: "component/dev",
+    // The same scoping the library build applies, so the harness shows what a
+    // host will get — including whether its own page is left alone
+    css: { postcss: { plugins: [scopeStylesToRoot()] } },
     // So that the harness can read the same config.json the standalone app
     // does, if the developer has written one
     publicDir: "../../public",
diff --git a/vite-component.config.ts b/vite-component.config.ts
index 17f62562..127f599f 100644
--- a/vite-component.config.ts
+++ b/vite-component.config.ts
@@ -8,67 +8,88 @@ Please see LICENSE in the repository root for full details.
 import { defineConfig } from "vite";
 
 import { vitePluginsConfig } from "./vite.config";
+import { scopeStylesToRoot } from "./component/build/scopeStylesToRoot";
 
 // Config for Element Call as a React component, to be imported by an
 // application embedding it rather than served as a page of its own.
 //
 // Deliberately not built on top of the full app's config, which exists to
 // produce a page and brings an HTML entry point along with it.
-export default defineConfig(({ mode }) => ({
-  ...vitePluginsConfig({ mode, html: false }),
-  // A library has no public directory to serve. Without this the build copies
-  // whatever is in `public` — including the developer's own config.json, which
-  // is not in the repository — into the output we would publish.
-  publicDir: false,
-  build: {
-    minify: mode === "production",
-    sourcemap: true,
-    // One stylesheet rather than one per chunk, so a host has a single file to
-    // include
-    cssCodeSplit: false,
-    lib: {
-      formats: ["es" as const],
-      entry: "./component/index.tsx",
-      fileName: "element-call",
+export default defineConfig(({ mode }) => {
+  const base = vitePluginsConfig({ mode, html: false });
+  return {
+    ...base,
+    resolve: {
+      ...base.resolve,
+      alias: {
+        ...base.resolve?.alias,
+        // react-i18next depends on the CommonJS `use-sync-external-store/shim`, whose
+        // `require("react")` cannot be bundled against an external React: rolldown leaves a
+        // `require` shim that throws in the browser. React 18+ provides `useSyncExternalStore`
+        // itself, so point the shim at React.
+        "use-sync-external-store/shim": "react",
+      },
     },
-    rollupOptions: {
-      // The host already has these, and a second copy of any of them does not
-      // merely bloat the bundle: React would hold two sets of hooks, and the
-      // Matrix client would run two sync loops.
-      //
-      // Every subpath has to be named. Element Call reaches most of the Matrix
-      // SDK as `matrix-js-sdk/lib/…`, and a bare "matrix-js-sdk" would not
-      // catch those — while the pattern and callback forms of this option are
-      // silently ignored by the bundler, so they cannot be used to cover them.
-      // `pnpm lint:externals` reads this list and fails if the source imports
-      // one of these packages by a path it does not name; a few entries below
-      // are there only because the standalone app imports them, which costs
-      // nothing.
-      external: [
-        "react",
-        "react/jsx-runtime",
-        "react-dom",
-        "react-dom/client",
-        "livekit-client",
-        "matrix-js-sdk",
-        "matrix-js-sdk/lib/browser-index",
-        "matrix-js-sdk/lib/client",
-        "matrix-js-sdk/lib/crypto-api",
-        "matrix-js-sdk/lib/indexeddb-worker",
-        "matrix-js-sdk/lib/logger",
-        "matrix-js-sdk/lib/matrix",
-        "matrix-js-sdk/lib/matrixrtc",
-        "matrix-js-sdk/lib/matrixrtc/EncryptionManager",
-        "matrix-js-sdk/lib/matrixrtc/IKeyTransport",
-        "matrix-js-sdk/lib/matrixrtc/IMembershipManager",
-        "matrix-js-sdk/lib/models/relations-container",
-        "matrix-js-sdk/lib/models/room",
-        "matrix-js-sdk/lib/models/typed-event-emitter",
-        "matrix-js-sdk/lib/randomstring",
-        "matrix-js-sdk/lib/sync",
-        "matrix-js-sdk/lib/types",
-        "matrix-js-sdk/lib/utils",
-      ],
+    // A library has no public directory to serve. Without this the build copies
+    // whatever is in `public` — including the developer's own config.json, which
+    // is not in the repository — into the output we would publish.
+    publicDir: false,
+    // A host's document is not ours to style: everything in the stylesheet is
+    // confined to the element Element Call is mounted in
+    css: { postcss: { plugins: [scopeStylesToRoot()] } },
+    build: {
+      minify: mode === "production",
+      sourcemap: true,
+      // One stylesheet rather than one per chunk, so a host has a single file to
+      // include
+      cssCodeSplit: false,
+      lib: {
+        formats: ["es" as const],
+        entry: "./component/index.tsx",
+        fileName: "element-call",
+      },
+      rollupOptions: {
+        // The host already has these, and a second copy of any of them does not
+        // merely bloat the bundle: React would hold two sets of hooks, and the
+        // Matrix client would run two sync loops.
+        //
+        // Every subpath has to be named. Element Call reaches most of the Matrix
+        // SDK as `matrix-js-sdk/lib/…`, and a bare "matrix-js-sdk" would not
+        // catch those — while the pattern and callback forms of this option are
+        // silently ignored by the bundler, so they cannot be used to cover them.
+        // `pnpm lint:externals` reads this list and fails if the source imports
+        // one of these packages by a path it does not name; a few entries below
+        // are there only because the standalone app imports them, which costs
+        // nothing.
+        external: [
+          "react",
+          "react/jsx-runtime",
+          // Emitted by the React Compiler for every compiled component; part of React, so it must be
+          // the host's copy too (bundled, its CommonJS `require("react")` throws in the browser).
+          "react/compiler-runtime",
+          "react-dom",
+          "react-dom/client",
+          "livekit-client",
+          "matrix-js-sdk",
+          "matrix-js-sdk/lib/browser-index",
+          "matrix-js-sdk/lib/client",
+          "matrix-js-sdk/lib/crypto-api",
+          "matrix-js-sdk/lib/indexeddb-worker",
+          "matrix-js-sdk/lib/logger",
+          "matrix-js-sdk/lib/matrix",
+          "matrix-js-sdk/lib/matrixrtc",
+          "matrix-js-sdk/lib/matrixrtc/EncryptionManager",
+          "matrix-js-sdk/lib/matrixrtc/IKeyTransport",
+          "matrix-js-sdk/lib/matrixrtc/IMembershipManager",
+          "matrix-js-sdk/lib/models/relations-container",
+          "matrix-js-sdk/lib/models/room",
+          "matrix-js-sdk/lib/models/typed-event-emitter",
+          "matrix-js-sdk/lib/randomstring",
+          "matrix-js-sdk/lib/sync",
+          "matrix-js-sdk/lib/types",
+          "matrix-js-sdk/lib/utils",
+        ],
+      },
     },
-  },
-}));
+  };
+});
diff --git a/vitest.config.ts b/vitest.config.ts
index c5e908e4..81519325 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -21,7 +21,11 @@ export default defineConfig((configEnv) =>
               css: { include: /.+/ },
               setupFiles: ["src/vitest.setup.ts"],
               environment: "jsdom",
-              include: ["src/**/*.test.ts", "src/**/*.test.tsx"],
+              include: [
+                "src/**/*.test.ts",
+                "src/**/*.test.tsx",
+                "component/**/*.test.ts",
+              ],
             },
           },
           {

From 38c28a1c8ffb8c7f26706e22f8845808de0ad311 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Fri, 4 Sep 2026 14:16:40 +0200
Subject: [PATCH 048/154] scaling based on component size instead webview size

---
 README.md                                     |   4 +
 playwright/component/component-call.spec.ts   |  33 ++++++
 sdk/main.ts                                   |   3 +
 src/room/InCallView.test.tsx                  |  70 +++++++++++-
 src/room/InCallView.tsx                       |  10 ++
 .../__snapshots__/InCallView.test.tsx.snap    |   1 +
 src/state/CallViewModel/CallViewModel.ts      |  30 ++---
 src/utils/elementSize.test.ts                 | 104 ++++++++++++++++++
 src/utils/elementSize.ts                      |  42 +++++++
 src/utils/test-viewmodel.ts                   |   1 +
 src/vitest.setup.ts                           |   9 ++
 11 files changed, 293 insertions(+), 14 deletions(-)
 create mode 100644 src/utils/elementSize.test.ts
 create mode 100644 src/utils/elementSize.ts

diff --git a/README.md b/README.md
index 248609e5..48b9bbc8 100644
--- a/README.md
+++ b/README.md
@@ -230,6 +230,10 @@ Element Call behaves when it does not own the page — the size it is given,
 whether it stays inside its container, and what it says to its host, which is
 logged along the bottom.
 
+The call lays itself out for the size of the element it is mounted in, not the
+window: a host that shrinks the container to a corner of its page gets the
+picture-in-picture layout, just as a host that shrank the whole iframe used to.
+
 The component's stylesheet is confined to the element it is mounted in: the
 build rewrites every selector so that it matches only Element Call's root or
 what is inside it, with `html`, `body` and `:root` standing for that root (see
diff --git a/playwright/component/component-call.spec.ts b/playwright/component/component-call.spec.ts
index d679fbb2..97a00267 100644
--- a/playwright/component/component-call.spec.ts
+++ b/playwright/component/component-call.spec.ts
@@ -132,3 +132,36 @@ test("tells its host what it is doing", async ({ page }) => {
     timeout: 30_000,
   });
 });
+
+test("lays itself out for the space it is given, not the page", async ({
+  page,
+}) => {
+  const { username, roomId } = await createUserAndRoom("containersize");
+  const panes = await startHarness(page, username, roomId);
+  const pane = panes.first();
+  const container = pane.getByTestId("call-container");
+  const call = pane.locator("[data-layout]");
+
+  await pane.getByTestId("lobby_joinCall").click({ timeout: 60_000 });
+  await expect(call).toBeVisible({ timeout: 60_000 });
+  await expect(call).not.toHaveAttribute("data-layout", "pip");
+
+  // As a widget, Element Call's container and its window were one and the same:
+  // a host wanting a picture-in-picture made the iframe small, and Element Call
+  // saw the window shrink. A component gets no such signal from the window,
+  // which stays as large as it ever was; only the container changes.
+  const resize = async (width: number, height: number): Promise<void> =>
+    container.evaluate(
+      (element, size) => {
+        element.style.width = `${size.width}px`;
+        element.style.height = `${size.height}px`;
+      },
+      { width, height },
+    );
+
+  await resize(300, 300);
+  await expect(call).toHaveAttribute("data-layout", "pip");
+
+  await resize(900, 700);
+  await expect(call).not.toHaveAttribute("data-layout", "pip");
+});
diff --git a/sdk/main.ts b/sdk/main.ts
index 6347d142..6cd37032 100644
--- a/sdk/main.ts
+++ b/sdk/main.ts
@@ -60,6 +60,7 @@ import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import { initializeWidget } from "../src/widget";
 import { type Connection } from "../src/state/CallViewModel/remoteMembers/Connection";
 import { createWidgetHostBridge } from "../src/HostBridge";
+import { observeElementSize$ } from "../src/utils/elementSize";
 
 interface MatrixRTCSdk {
   /**
@@ -151,6 +152,8 @@ export async function createMatrixRTCSdk(
       ...callViewModelOptionsFromParams(urlParams),
       encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
       hostBridge,
+      // The SDK owns its page, so the body is the space it has
+      windowSize$: scope.behavior(observeElementSize$(document.body)),
     },
     of({}),
     of({}),
diff --git a/src/room/InCallView.test.tsx b/src/room/InCallView.test.tsx
index 3113c072..357bc186 100644
--- a/src/room/InCallView.test.tsx
+++ b/src/room/InCallView.test.tsx
@@ -14,7 +14,7 @@ import {
   type MockedFunction,
   vi,
 } from "vitest";
-import { render, type RenderResult } from "@testing-library/react";
+import { act, render, type RenderResult } from "@testing-library/react";
 import { type LocalParticipant } from "livekit-client";
 import { BehaviorSubject, of } from "rxjs";
 import { BrowserRouter } from "react-router-dom";
@@ -51,6 +51,7 @@ import { AppBar } from "../AppBar";
 import { type MatrixInfo } from "./VideoPreview";
 import { ProcessorProvider } from "../livekit/TrackProcessorContext";
 import { initializeWidget } from "../widget";
+import { RootElementProvider } from "../RootElementContext";
 
 initializeWidget();
 vi.hoisted(
@@ -263,4 +264,71 @@ describe("ActiveCall", () => {
     // Rendering at all proves ActiveCall created all of its view models
     expect(await findByTestId("incall_leave")).toBeVisible();
   });
+
+  it("lays the call out for the size of its root element", async () => {
+    // jsdom has no layout and no ResizeObserver: the root reports whatever
+    // size we say, and the observer notifies whenever we tell it to
+    let size = { width: 1000, height: 800 };
+    const root = document.createElement("div");
+    Object.defineProperty(root, "clientWidth", { get: () => size.width });
+    Object.defineProperty(root, "clientHeight", { get: () => size.height });
+    document.body.appendChild(root);
+
+    const observers: (() => void)[] = [];
+    const originalResizeObserver = window.ResizeObserver;
+    window.ResizeObserver = class {
+      public constructor(private readonly callback: ResizeObserverCallback) {}
+      public observe(): void {
+        observers.push(() => this.callback([], this as ResizeObserver));
+      }
+      public unobserve(): void {}
+      public disconnect(): void {}
+    } as unknown as typeof ResizeObserver;
+
+    try {
+      const mediaDevices = mockMediaDevices({});
+      const { rtcSession, matrixRoom } = getBasicRTCSession([local, alice]);
+      const { findByTestId, container } = render(
+        <BrowserRouter>
+          <RootElementProvider value={root}>
+            <MediaDevicesContext value={mediaDevices}>
+              <ProcessorProvider>
+                <TooltipProvider>
+                  <RoomContext value={mockLivekitRoom({ localParticipant })}>
+                    <ActiveCall
+                      client={matrixRoom.client}
+                      rtcSession={rtcSession.asMockedSession()}
+                      matrixRoom={matrixRoom}
+                      muteStates={mockMuteStates()}
+                      matrixInfo={matrixInfo}
+                      onShareClick={null}
+                      e2eeSystem={{ kind: E2eeType.NONE }}
+                      onLeft={(): void => {}}
+                    />
+                  </RoomContext>
+                </TooltipProvider>
+              </ProcessorProvider>
+            </MediaDevicesContext>
+          </RootElementProvider>
+        </BrowserRouter>,
+        { container: root },
+      );
+      await findByTestId("incall_leave");
+      const call = container.querySelector("[data-layout]")!;
+      expect(call.getAttribute("data-layout")).not.toBe("pip");
+
+      // The host shrinks the container to a corner of its page. The window has
+      // not changed at all — what matters is the element we were given.
+      size = { width: 300, height: 300 };
+      act(() => observers.forEach((notify) => notify()));
+      expect(call.getAttribute("data-layout")).toBe("pip");
+
+      size = { width: 1000, height: 800 };
+      act(() => observers.forEach((notify) => notify()));
+      expect(call.getAttribute("data-layout")).not.toBe("pip");
+    } finally {
+      window.ResizeObserver = originalResizeObserver;
+      root.remove();
+    }
+  });
 });
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 97fb7543..e2df7529 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -29,6 +29,8 @@ import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { HeaderStyle, useUrlParams } from "../UrlParams";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
 import { useHostBridge } from "../HostBridge.ts";
+import { useRootElement } from "../RootElementContext";
+import { observeElementSize$ } from "../utils/elementSize";
 import styles from "./InCallView.module.css";
 import { GridTile } from "../tile/GridTile";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
@@ -120,6 +122,9 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   const hostBridge = useHostBridge();
   const mediaDevices = useMediaDevices();
   const trackProcessorState$ = useTrackProcessorObservable$();
+  // The element we have to draw the call in: the page, or the container a host
+  // gave us. Its size, not the window's, decides how the call is laid out.
+  const rootElement = useRootElement();
   useEffect(() => {
     rootLogger.info("START CALL VIEW SCOPE");
     const scope = new ObservableScope();
@@ -140,6 +145,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
         autoLeaveWhenOthersLeft,
         waitForCallPickup: waitForCallPickup && sendNotificationType === "ring",
         matrixRTCMode$: matrixRTCModeSetting.value$,
+        windowSize$: scope.behavior(observeElementSize$(rootElement)),
       },
       reactionsReader.raisedHands$,
       reactionsReader.reactions$,
@@ -165,6 +171,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     mediaDevices,
     trackProcessorState$,
     props.client,
+    rootElement,
   ]);
 
   useEffect(() => {
@@ -625,6 +632,9 @@ export const InCallView: FC<InCallViewProps> = ({
         [styles.overflowing]: overflowing,
       })}
       ref={containerRef}
+      // Which layout the call has settled on, for tests and for anyone
+      // wondering why the call looks the way it does at the size it was given
+      data-layout={layout.type}
       onPointerUp={onViewPointerUp}
       onPointerMove={onPointerMove}
       onPointerOut={onPointerOut}
diff --git a/src/room/__snapshots__/InCallView.test.tsx.snap b/src/room/__snapshots__/InCallView.test.tsx.snap
index 984e2b12..cdf5d17b 100644
--- a/src/room/__snapshots__/InCallView.test.tsx.snap
+++ b/src/room/__snapshots__/InCallView.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`InCallView > rendering > renders 1`] = `
 <div>
   <div
     class="_inRoom_4e7ff8"
+    data-layout="one-on-one-desktop"
   >
     <header
       class="_header_e4b327 _header_4e7ff8"
diff --git a/src/state/CallViewModel/CallViewModel.ts b/src/state/CallViewModel/CallViewModel.ts
index 85ba2757..80d2bea1 100644
--- a/src/state/CallViewModel/CallViewModel.ts
+++ b/src/state/CallViewModel/CallViewModel.ts
@@ -204,8 +204,15 @@ export interface CallViewModelOptions {
   livekitRoomFactory?: (options?: RoomOptions) => LivekitRoom;
   /** Optional behavior overriding the local connection state, mainly for testing purposes. */
   connectionState$?: Behavior<ConnectionState>;
-  /** Optional behavior overriding the computed window size, mainly for testing purposes. */
-  windowSize$?: Behavior<{ width: number; height: number }>;
+  /**
+   * The size of the space the call is drawn in: the page when Element Call
+   * owns it, or the container a host mounted it in when it is a component.
+   * The layout — whether the call is shown full size, flat, narrow or as a
+   * picture-in-picture — follows this rather than the size of the window, so
+   * that a component shrunk by its host adapts even though the window has not
+   * changed.
+   */
+  windowSize$: Behavior<{ width: number; height: number }>;
   /** Optional value overriding the local transport, for testing purposes. */
   localTransport?: LocalTransport;
   /** Optional value overriding the connection factory, for testing purposes. */
@@ -263,6 +270,11 @@ const smallMobileCallThreshold = 3;
 // with the interface
 const showFooterMs = 4000;
 
+/**
+ * The general shape of the space the call is drawn in. Called a window because
+ * that is what it is in the standalone app; for a component it is the container
+ * the host gave us, which may be a small corner of a large window.
+ */
 export type WindowMode = "normal" | "narrow" | "flat" | "pip";
 
 interface LayoutScanState {
@@ -1097,18 +1109,10 @@ export function createCallViewModel$(
 
   const pipEnabled$ = scope.behavior(setPipEnabled$, false);
 
-  const windowSize$ =
-    options.windowSize$ ??
-    scope.behavior<{ width: number; height: number }>(
-      fromEvent(window, "resize").pipe(
-        startWith(null),
-        map(() => ({ width: window.innerWidth, height: window.innerHeight })),
-      ),
-    );
-
-  // A guess at what the window's mode should be based on its size and shape.
+  // A guess at what the window's mode should be based on the size and shape of
+  // the space we have to draw in.
   const naturalWindowMode$ = scope.behavior<WindowMode>(
-    windowSize$.pipe(
+    options.windowSize$.pipe(
       map(({ width, height }) => {
         if (height <= 400 && width <= 340) return "pip";
         // Our layouts for flat windows are better at adapting to a small width
diff --git a/src/utils/elementSize.test.ts b/src/utils/elementSize.test.ts
new file mode 100644
index 00000000..854da6f1
--- /dev/null
+++ b/src/utils/elementSize.test.ts
@@ -0,0 +1,104 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { observeElementSize$ } from "./elementSize";
+
+/**
+ * A ResizeObserver whose notifications the test triggers itself, and which
+ * keeps track of what it is watching. jsdom does not ship one.
+ */
+class MockResizeObserver {
+  public static instances: MockResizeObserver[] = [];
+  public observed: Element[] = [];
+  public disconnected = false;
+
+  public constructor(private readonly callback: ResizeObserverCallback) {
+    MockResizeObserver.instances.push(this);
+  }
+
+  public observe(element: Element): void {
+    this.observed.push(element);
+    // Real observers report the initial size once observation starts
+    this.fire();
+  }
+
+  public unobserve(): void {}
+
+  public disconnect(): void {
+    this.disconnected = true;
+  }
+
+  public fire(): void {
+    this.callback([], this as unknown as ResizeObserver);
+  }
+}
+
+describe("observeElementSize$", () => {
+  const originalResizeObserver = window.ResizeObserver;
+  let element: HTMLDivElement;
+  let size: { width: number; height: number };
+
+  beforeEach(() => {
+    MockResizeObserver.instances = [];
+    window.ResizeObserver =
+      MockResizeObserver as unknown as typeof ResizeObserver;
+    // jsdom does no layout, so the element reports whatever we say it does
+    size = { width: 800, height: 600 };
+    element = document.createElement("div");
+    Object.defineProperty(element, "clientWidth", { get: () => size.width });
+    Object.defineProperty(element, "clientHeight", { get: () => size.height });
+  });
+
+  afterEach(() => {
+    window.ResizeObserver = originalResizeObserver;
+  });
+
+  it("emits the current size synchronously on subscription", () => {
+    const next = vi.fn();
+    observeElementSize$(element).subscribe(next);
+    expect(next).toHaveBeenCalledTimes(1);
+    expect(next).toHaveBeenCalledWith({ width: 800, height: 600 });
+    expect(MockResizeObserver.instances[0].observed).toEqual([element]);
+  });
+
+  it("emits again whenever the element is resized", () => {
+    const next = vi.fn();
+    observeElementSize$(element).subscribe(next);
+    const [observer] = MockResizeObserver.instances;
+
+    size = { width: 300, height: 300 };
+    observer.fire();
+    size = { width: 1000, height: 700 };
+    observer.fire();
+
+    expect(next.mock.calls.map(([s]) => s)).toEqual([
+      { width: 800, height: 600 },
+      { width: 300, height: 300 },
+      { width: 1000, height: 700 },
+    ]);
+  });
+
+  it("does not repeat a size that has not changed", () => {
+    const next = vi.fn();
+    observeElementSize$(element).subscribe(next);
+    // The initial report the observer makes on observe() carried the same size
+    // as the synchronous measurement, and so did not count
+    expect(next).toHaveBeenCalledTimes(1);
+    MockResizeObserver.instances[0].fire();
+    expect(next).toHaveBeenCalledTimes(1);
+  });
+
+  it("stops observing when unsubscribed", () => {
+    const subscription = observeElementSize$(element).subscribe();
+    const [observer] = MockResizeObserver.instances;
+    expect(observer.disconnected).toBe(false);
+    subscription.unsubscribe();
+    expect(observer.disconnected).toBe(true);
+  });
+});
diff --git a/src/utils/elementSize.ts b/src/utils/elementSize.ts
new file mode 100644
index 00000000..c2d5e921
--- /dev/null
+++ b/src/utils/elementSize.ts
@@ -0,0 +1,42 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { Observable, distinctUntilChanged } from "rxjs";
+
+export interface ElementSize {
+  width: number;
+  height: number;
+}
+
+/**
+ * Observes the size of an element, starting with the size it currently has and
+ * following it through every change for as long as the subscription lasts.
+ *
+ * Measured with `clientWidth`/`clientHeight`, so borders, scrollbars and any
+ * transforms a host might animate the element with are left out: this is the
+ * space there is to draw in, not where the element happens to be painted.
+ */
+export function observeElementSize$(element: Element): Observable<ElementSize> {
+  return new Observable<ElementSize>((subscriber) => {
+    const measure = (): void =>
+      subscriber.next({
+        width: element.clientWidth,
+        height: element.clientHeight,
+      });
+    // Synchronously, so that a Behavior built on this has an initial value
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return (): void => observer.disconnect();
+  }).pipe(
+    // A ResizeObserver reports once on observe(), which repeats the first
+    // measurement above, and again for changes to dimensions we do not read
+    distinctUntilChanged(
+      (a, b) => a.width === b.width && a.height === b.height,
+    ),
+  );
+}
diff --git a/src/utils/test-viewmodel.ts b/src/utils/test-viewmodel.ts
index 8e88e720..c1feb03e 100644
--- a/src/utils/test-viewmodel.ts
+++ b/src/utils/test-viewmodel.ts
@@ -176,6 +176,7 @@ export function getBasicCallViewModelEnvironment(
         }),
       connectionState$: constant(ConnectionState.Connected),
       matrixRTCMode$: constant(MatrixRTCMode.Compatibility),
+      windowSize$: constant({ width: 1000, height: 800 }),
       ...callViewModelOptions,
     },
     handRaisedSubject$,
diff --git a/src/vitest.setup.ts b/src/vitest.setup.ts
index 00d289b5..373f08c9 100644
--- a/src/vitest.setup.ts
+++ b/src/vitest.setup.ts
@@ -53,6 +53,15 @@ window.matchMedia = global.matchMedia = (): MediaQueryList =>
     removeEventListener: () => {},
   }) as Partial<MediaQueryList> as MediaQueryList;
 
+// jsdom does no layout and has no ResizeObserver. The call view observes the
+// size of its root element; this one reports nothing, so that element stays at
+// whatever size jsdom says it is (zero) unless a test says otherwise.
+window.ResizeObserver ??= class ResizeObserver {
+  public observe(): void {}
+  public unobserve(): void {}
+  public disconnect(): void {}
+};
+
 const storage: Record<string, string> = {};
 const localStoragePolyfill = {
   getItem(key: string) {

From 218ee46b7d86a01b3344c05f4309af06406d2af1 Mon Sep 17 00:00:00 2001
From: "Timo K." <timok@element.io>
Date: Fri, 4 Sep 2026 14:35:44 +0200
Subject: [PATCH 049/154] Make the component installable as a git dependency

`component/package.json` describes the built component as a package
(`@element-hq/element-call-component`: entry, stylesheet subpath, types,
peer dependencies) so that a host can depend on
`github:element-hq/element-call#<ref>&path:/component`. Its `prepare`
script builds on install, since nothing is published yet.

For that the component build now lands in `component/dist` instead of the
repository's `dist`, and `pnpm build:component` also emits the type
declarations (`component/tsconfig.build.json`, `build:component:types`),
which previously had to be produced by hand.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 README.md                     | 17 +++++++++++++-
 component/package.json        | 42 +++++++++++++++++++++++++++++++++++
 component/pnpm-lock.yaml      |  9 ++++++++
 component/pnpm-workspace.yaml | 14 ++++++++++++
 component/tsconfig.build.json | 20 +++++++++++++++++
 package.json                  |  6 +++--
 vite-component.config.ts      |  4 ++++
 7 files changed, 109 insertions(+), 3 deletions(-)
 create mode 100644 component/package.json
 create mode 100644 component/pnpm-lock.yaml
 create mode 100644 component/pnpm-workspace.yaml
 create mode 100644 component/tsconfig.build.json

diff --git a/README.md b/README.md
index 48b9bbc8..0732ff41 100644
--- a/README.md
+++ b/README.md
@@ -217,7 +217,8 @@ See also:
 
 Element Call can also be embedded directly into another React application
 rather than being loaded in an iframe as a widget. `pnpm build:component`
-builds it as a library, and
+builds it as a library into `component/dist` (the bundle, its stylesheet and
+type declarations), and
 
 ```sh
 pnpm dev:component
@@ -240,6 +241,20 @@ what is inside it, with `html`, `body` and `:root` standing for that root (see
 `component/build/scopeStylesToRoot.ts`). A host's own page keeps its styles,
 and Element Call brings its own fonts and design tokens along.
 
+The package is not published yet. A host installs it as a git dependency on the
+`component` directory of this repository,
+
+```json
+"@element-hq/element-call-component": "github:element-hq/element-call#main&path:/component"
+```
+
+whose `prepare` script runs the build on install (the host's pnpm has to allow
+that: `allowBuilds` in its `pnpm-workspace.yaml`). It imports the component from
+`@element-hq/element-call-component` and the stylesheet from
+`@element-hq/element-call-component/style.css`, and has to provide `react`,
+`react-dom`, `matrix-js-sdk` and `livekit-client` itself, since the bundle leaves
+them external.
+
 ### Backend
 
 A docker compose file `docker-compose-dev.yml` is provided to start the
diff --git a/component/package.json b/component/package.json
new file mode 100644
index 00000000..9ed81e02
--- /dev/null
+++ b/component/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@element-hq/element-call-component",
+  "version": "0.0.0",
+  "description": "Element Call as a React component. Consumed straight from the repository as a git dependency (github:element-hq/element-call#<ref>&path:/component): the host's package manager runs `prepare`, which builds `dist/`.",
+  "license": "SEE LICENSE IN ../README.md",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/element-hq/element-call",
+    "directory": "component"
+  },
+  "type": "module",
+  "devEngines": {
+    "packageManager": {
+      "name": "pnpm"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/element-call.js",
+  "module": "./dist/element-call.js",
+  "types": "./dist/types/component/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/component/index.d.ts",
+      "default": "./dist/element-call.js"
+    },
+    "./style.css": "./dist/element-call.css"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "prepare": "cd .. && pnpm install --frozen-lockfile && pnpm build:component"
+  },
+  "peerDependencies": {
+    "livekit-client": "^2.18.1",
+    "matrix-js-sdk": "*",
+    "react": "^19",
+    "react-dom": "^19"
+  }
+}
diff --git a/component/pnpm-lock.yaml b/component/pnpm-lock.yaml
new file mode 100644
index 00000000..490c2e4f
--- /dev/null
+++ b/component/pnpm-lock.yaml
@@ -0,0 +1,9 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: false
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .: {}
diff --git a/component/pnpm-workspace.yaml b/component/pnpm-workspace.yaml
new file mode 100644
index 00000000..d6c26ac6
--- /dev/null
+++ b/component/pnpm-workspace.yaml
@@ -0,0 +1,14 @@
+# Makes `component/` a pnpm project of its own rather than a directory inside
+# the repository's workspace. That matters when a host installs the component
+# straight from this repository (`github:element-hq/element-call#…&path:/component`):
+# pnpm prepares such a dependency by running `pnpm install` in this directory,
+# and only a project root gets its `prepare` script (see package.json) run, which
+# is what builds `dist/`. Inside the repository's own workspace the install
+# would silently target the repository instead and build nothing.
+#
+# Consequence for development: pnpm commands run from within this directory see
+# this project, not the repository; run them from the repository root.
+
+# Nothing to install here: the peers in package.json are the host's, and the
+# build runs against the repository's own node_modules (see `prepare`).
+autoInstallPeers: false
diff --git a/component/tsconfig.build.json b/component/tsconfig.build.json
new file mode 100644
index 00000000..18af65d8
--- /dev/null
+++ b/component/tsconfig.build.json
@@ -0,0 +1,20 @@
+{
+  // Declaration output for the component package (`pnpm build:component:types`).
+  // The root tsconfig only type-checks; this one emits `.d.ts` files, and nothing
+  // else, for everything the component's entry point reaches. The layout under
+  // `dist/types` mirrors the repository (`component/index.d.ts`, `src/…`), which
+  // is what `package.json` points its `types` at.
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "declarationMap": false,
+    "rootDir": "..",
+    "outDir": "./dist/types"
+  },
+  // The entry point, plus the ambient declarations (CSS modules, `?react` SVGs,
+  // `import.meta.env`, …) that the sources it reaches rely on.
+  "include": ["./index.tsx", "../src/@types/*.d.ts"],
+  "exclude": []
+}
diff --git a/package.json b/package.json
index 471cd28b..fc556093 100644
--- a/package.json
+++ b/package.json
@@ -17,9 +17,11 @@
     "build:sdk:development": "pnpm build:sdk --mode development",
     "build:sdk": "pnpm build:full --config vite-sdk.config.js",
     "build:sdk:production": "pnpm build:sdk",
-    "build:component": "pnpm build:full --config vite-component.config.js",
+    "build:component": "pnpm build:component:js && pnpm build:component:types",
+    "build:component:js": "pnpm build:full --config vite-component.config.js",
+    "build:component:types": "tsc -p component/tsconfig.build.json",
     "build:component:production": "pnpm build:component",
-    "build:component:development": "pnpm build:component --mode development",
+    "build:component:development": "pnpm build:component:js --mode development && pnpm build:component:types",
     "serve": "vite preview",
     "format": "oxfmt",
     "format:check": "oxfmt --check; rc=$?; [[ $rc -ne 0 ]] && printf '\\033[46;30m INFO \\033[0m To fix, run: pnpm format\\n' >&2; exit $rc",
diff --git a/vite-component.config.ts b/vite-component.config.ts
index 127f599f..ae0ac150 100644
--- a/vite-component.config.ts
+++ b/vite-component.config.ts
@@ -38,6 +38,10 @@ export default defineConfig(({ mode }) => {
     // confined to the element Element Call is mounted in
     css: { postcss: { plugins: [scopeStylesToRoot()] } },
     build: {
+      // Into the package directory, so that `component/package.json` describes
+      // what sits next to it and the directory can be installed as a package
+      // (see its `files` and `exports`).
+      outDir: "component/dist",
       minify: mode === "production",
       sourcemap: true,
       // One stylesheet rather than one per chunk, so a host has a single file to

From 210d94af18f3bbfd7211c27ffe9b2ffce7d3eae6 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Sat, 5 Sep 2026 02:55:22 +0000
Subject: [PATCH 050/154] Update ghcr.io/element-hq/element-web:develop Docker
 digest to 3221e92 (#4237)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 docker-compose-playwright.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index 6ea4b672..6028982e 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -13,7 +13,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:a9bd290646110ee185337aa591fb35ddbd7397c5a6221efc8d12da74c28309fe
+    image: ghcr.io/element-hq/element-web:develop@sha256:3221e922389406f62e896d452891a9eae59d34c8c97c7adb65894873087e883c
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:a9bd290646110ee185337aa591fb35ddbd7397c5a6221efc8d12da74c28309fe
+    image: ghcr.io/element-hq/element-web:develop@sha256:3221e922389406f62e896d452891a9eae59d34c8c97c7adb65894873087e883c

From a03f23e7206fa7d45911ec3da6af988452804614 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Sun, 6 Sep 2026 02:02:35 +0000
Subject: [PATCH 051/154] Update ghcr.io/element-hq/element-web:develop Docker
 digest to a4e9c8c (#4238)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 docker-compose-playwright.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index 6028982e..54eb8104 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -13,7 +13,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:3221e922389406f62e896d452891a9eae59d34c8c97c7adb65894873087e883c
+    image: ghcr.io/element-hq/element-web:develop@sha256:a4e9c8cb178fcabd9495da86fab32d218550747c2ef6f9baf0afca2be3436820
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:3221e922389406f62e896d452891a9eae59d34c8c97c7adb65894873087e883c
+    image: ghcr.io/element-hq/element-web:develop@sha256:a4e9c8cb178fcabd9495da86fab32d218550747c2ef6f9baf0afca2be3436820

From d204b36b5574b8e4b03d811de2cf48c037b5cf32 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 7 Sep 2026 01:56:21 +0000
Subject: [PATCH 052/154] Update dependency livekit-client to v2.22.2

---
 pnpm-lock.yaml | 43 +++++++++++++++++++++++++------------------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4cfb3ccd..0d5550f4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -39,13 +39,13 @@ importers:
         version: 11.7.12
       '@livekit/components-core':
         specifier: ^0.12.0
-        version: 0.12.15(livekit-client@2.22.0(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)
+        version: 0.12.15(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)
       '@livekit/components-react':
         specifier: ^2.0.0
-        version: 2.9.24(livekit-client@2.22.0(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tslib@2.8.1)
+        version: 2.9.24(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tslib@2.8.1)
       '@livekit/track-processors':
         specifier: ^0.7.1
-        version: 0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.22.0(@types/dom-mediacapture-record@1.0.22))
+        version: 0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))
       '@mediapipe/tasks-vision':
         specifier: ^0.10.18
         version: 0.10.35
@@ -183,7 +183,7 @@ importers:
         version: 5.88.1(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)(@types/node@24.13.3)(typescript@5.9.3)
       livekit-client:
         specifier: ^2.18.1
-        version: 2.22.0(@types/dom-mediacapture-record@1.0.22)
+        version: 2.22.2(@types/dom-mediacapture-record@1.0.22)
       lodash-es:
         specifier: ^4.17.21
         version: 4.18.1
@@ -4465,8 +4465,8 @@ packages:
     resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
     hasBin: true
 
-  jose@6.2.10:
-    resolution: {integrity: sha512-iiW7J9qRFlGxvCOIBDBDxFePQSn7ZMAnrYGhrrOo6siO/MIqwfyilLR27pkfDgUk+raLuzADS8A3S/KLBisc0g==}
+  jose@6.2.12:
+    resolution: {integrity: sha512-9NiFmJEex0sy2Dk58j2UGBSHgUs2ypF9eZSu4L6vjOX3Dp96Sw1F3uL+H+D1sx02jZZdzUT0HgvCy59CuvXcWw==}
 
   jose@6.2.9:
     resolution: {integrity: sha512-XrchZOFZUl/T3vTwRe8XK+cJrGtMF4th1ARnDfwbBXFKThGhlsxEE4Zu03AD/bjJSt/9jT/mxrOCkJWOg77aPA==}
@@ -4614,8 +4614,8 @@ packages:
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
-  livekit-client@2.22.0:
-    resolution: {integrity: sha512-GLtYQfRh/RsvXaOX1x609bFZ17yyKmKWDqu9JmkMKn9vIFLi2GsapRv9gT8OJO/1R2dsitrkbGmloyUfxWQsaA==}
+  livekit-client@2.22.2:
+    resolution: {integrity: sha512-o3yLYoH2eHVR/DmIZzgC96FMvtR4+g/DjeqNwS5zp12EjqrqiRULxm6Oq/YsTE97WnA6fhy23+a2hGkbce5SPA==}
     peerDependencies:
       '@types/dom-mediacapture-record': ^1
 
@@ -4664,6 +4664,10 @@ packages:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
 
+  machina@7.0.1:
+    resolution: {integrity: sha512-0Xkgs8NeBvO2hW6bjJT8ewLWrMfh1haMPstaghpASWjXkLjRhtDiaJG1Kb7mslaOHxZYxpH7PIjpmirRVYbMMA==}
+    engines: {node: '>=22.22'}
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -7070,21 +7074,21 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@livekit/components-core@0.12.15(livekit-client@2.22.0(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)':
+  '@livekit/components-core@0.12.15(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)':
     dependencies:
       '@floating-ui/dom': 1.7.6
-      livekit-client: 2.22.0(@types/dom-mediacapture-record@1.0.22)
+      livekit-client: 2.22.2(@types/dom-mediacapture-record@1.0.22)
       loglevel: 1.9.1
       rxjs: 7.8.2
       tslib: 2.8.1
 
-  '@livekit/components-react@2.9.24(livekit-client@2.22.0(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tslib@2.8.1)':
+  '@livekit/components-react@2.9.24(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tslib@2.8.1)':
     dependencies:
-      '@livekit/components-core': 0.12.15(livekit-client@2.22.0(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)
+      '@livekit/components-core': 0.12.15(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)
       clsx: 2.1.1
       events: 3.3.0
       jose: 6.2.9
-      livekit-client: 2.22.0(@types/dom-mediacapture-record@1.0.22)
+      livekit-client: 2.22.2(@types/dom-mediacapture-record@1.0.22)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
       tslib: 2.8.1
@@ -7096,11 +7100,11 @@ snapshots:
     dependencies:
       '@bufbuild/protobuf': 1.10.1
 
-  '@livekit/track-processors@0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.22.0(@types/dom-mediacapture-record@1.0.22))':
+  '@livekit/track-processors@0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))':
     dependencies:
       '@mediapipe/tasks-vision': 0.10.35
       '@types/dom-mediacapture-transform': 0.1.11
-      livekit-client: 2.22.0(@types/dom-mediacapture-record@1.0.22)
+      livekit-client: 2.22.2(@types/dom-mediacapture-record@1.0.22)
 
   '@matrix-org/matrix-sdk-crypto-wasm@18.5.0': {}
 
@@ -10059,7 +10063,7 @@ snapshots:
 
   jiti@2.7.0: {}
 
-  jose@6.2.10: {}
+  jose@6.2.12: {}
 
   jose@6.2.9: {}
 
@@ -10203,14 +10207,15 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
-  livekit-client@2.22.0(@types/dom-mediacapture-record@1.0.22):
+  livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22):
     dependencies:
       '@livekit/mutex': 1.1.1
       '@livekit/protocol': 1.50.4
       '@types/dom-mediacapture-record': 1.0.22
       events: 3.3.0
-      jose: 6.2.10
+      jose: 6.2.12
       loglevel: 1.9.2
+      machina: 7.0.1
       sdp-transform: 2.15.0
       tslib: 2.8.1
       typed-emitter: 2.1.0
@@ -10253,6 +10258,8 @@ snapshots:
 
   lz-string@1.5.0: {}
 
+  machina@7.0.1: {}
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5

From 1e9a5cfa20d7c0e75506607bc2c7f3c97c02df73 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 7 Sep 2026 02:04:08 +0000
Subject: [PATCH 053/154] Update ghcr.io/element-hq/element-web:develop Docker
 digest to 6ed62b2 (#4239)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 docker-compose-playwright.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index 54eb8104..0c7f5a89 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -13,7 +13,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:a4e9c8cb178fcabd9495da86fab32d218550747c2ef6f9baf0afca2be3436820
+    image: ghcr.io/element-hq/element-web:develop@sha256:6ed62b2963ae098a1f79521eb516834dcf29452168e281cc359d9cfb4380adf6
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:a4e9c8cb178fcabd9495da86fab32d218550747c2ef6f9baf0afca2be3436820
+    image: ghcr.io/element-hq/element-web:develop@sha256:6ed62b2963ae098a1f79521eb516834dcf29452168e281cc359d9cfb4380adf6

From eddd95ba41f284250bc85776e780de94bf5b812a Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 7 Sep 2026 11:53:01 +0100
Subject: [PATCH 054/154] Log track encryption flag and cryptor events for
 remote tracks

Extends the [RemoteTracks] logging from #4235 with the per-publication
encryption flag and the ParticipantEncryptionStatusChanged /
EncryptionError room events.

If a publisher encrypts frames while the subscriber believes the
publication is unencrypted, livekit-client bypasses the cryptor and hands
raw ciphertext to the decoder, which is audible as loud noise bursts.
The reverse mismatch (or a missing/invalid key) drops frames instead.
Neither case is visible in a rageshake today.
---
 .../remoteMembers/Connection.test.ts          | 26 ++++++++++++---
 .../CallViewModel/remoteMembers/Connection.ts | 33 +++++++++++++++++--
 2 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/src/state/CallViewModel/remoteMembers/Connection.test.ts b/src/state/CallViewModel/remoteMembers/Connection.test.ts
index 9d098d44..248d66fb 100644
--- a/src/state/CallViewModel/remoteMembers/Connection.test.ts
+++ b/src/state/CallViewModel/remoteMembers/Connection.test.ts
@@ -516,11 +516,12 @@ describe("remote track logging", () => {
   it("logs remote participant and track events on the connection logger", () => {
     setupTest();
     const info = vi.fn();
+    const warn = vi.fn();
     const testLogger = {
       getChild: (): unknown => testLogger,
       info,
       debug: vi.fn(),
-      warn: vi.fn(),
+      warn,
       error: vi.fn(),
     } as unknown as Logger;
     new Connection(
@@ -545,6 +546,7 @@ describe("remote track logging", () => {
       source: "microphone",
       trackSid: "TR_mic",
       isMuted: false,
+      isEncrypted: true,
     } as unknown as RemoteTrackPublication;
     const messages = (): string[] => info.mock.calls.map((c) => c[0] as string);
 
@@ -564,11 +566,27 @@ describe("remote track logging", () => {
     );
     expect(messages()).toEqual([
       "Participant connected: @bob:example.org:DEV111 (PA_bob)",
-      "Subscribed: audio microphone TR_mic of @bob:example.org:DEV111 muted=false",
-      "Muted: audio microphone TR_mic of @bob:example.org:DEV111",
-      "Stream paused: audio microphone TR_mic of @bob:example.org:DEV111",
+      "Subscribed: audio microphone TR_mic of @bob:example.org:DEV111 encrypted=true muted=false",
+      "Muted: audio microphone TR_mic of @bob:example.org:DEV111 encrypted=true",
+      "Stream paused: audio microphone TR_mic of @bob:example.org:DEV111 encrypted=true",
     ]);
 
+    // Encryption status changes are logged; cryptor errors are warnings
+    fakeLivekitRoom.emit(
+      RoomEvent.ParticipantEncryptionStatusChanged,
+      false,
+      bob,
+    );
+    expect(messages().at(-1)).toBe(
+      "Encryption status of @bob:example.org:DEV111: encrypted=false",
+    );
+    const cryptorError = new Error("missing key at index 3");
+    fakeLivekitRoom.emit(RoomEvent.EncryptionError, cryptorError, bob);
+    expect(warn).toHaveBeenCalledWith(
+      "Encryption error for @bob:example.org:DEV111:",
+      cryptorError,
+    );
+
     // Local mute events are already logged by the Publisher
     fakeLivekitRoom.emit(RoomEvent.TrackMuted, pub, {
       ...fakeLocalParticipant,
diff --git a/src/state/CallViewModel/remoteMembers/Connection.ts b/src/state/CallViewModel/remoteMembers/Connection.ts
index 9310c9b8..10478cb7 100644
--- a/src/state/CallViewModel/remoteMembers/Connection.ts
+++ b/src/state/CallViewModel/remoteMembers/Connection.ts
@@ -186,8 +186,11 @@ export class Connection {
   private logRemoteTrackEvents(): void {
     const room = this.livekitRoom;
     const log = this.logger.getChild("[RemoteTracks]");
+    // The encryption flag matters: if the publisher encrypts but this client
+    // believes the track is unencrypted, the cryptor is bypassed and raw
+    // ciphertext reaches the decoder (audible as loud noise bursts).
     const track = (pub: TrackPublication, p: Participant): string =>
-      `${pub.kind} ${pub.source} ${pub.trackSid} of ${p.identity}`;
+      `${pub.kind} ${pub.source} ${pub.trackSid} of ${p.identity} encrypted=${pub.isEncrypted}`;
 
     const onParticipantConnected = (p: RemoteParticipant): void =>
       log.info(`Participant connected: ${p.identity} (${p.sid})`);
@@ -232,6 +235,20 @@ export class Connection {
       state: Track.StreamState,
       p: RemoteParticipant,
     ): void => log.info(`Stream ${state}: ${track(pub, p)}`);
+    const onEncryptionStatusChanged = (
+      encrypted: boolean,
+      p?: Participant,
+    ): void =>
+      log.info(
+        `Encryption status of ${p?.identity ?? "unknown participant"}: encrypted=${encrypted}`,
+      );
+    // livekit-client throttles these per cryptor; they indicate frames being
+    // dropped (missing/invalid key), which is the other half of the picture.
+    const onEncryptionError = (error: Error, p?: Participant): void =>
+      log.warn(
+        `Encryption error for ${p?.identity ?? "unknown participant"}:`,
+        error,
+      );
 
     room
       .on(RoomEvent.ParticipantConnected, onParticipantConnected)
@@ -243,7 +260,12 @@ export class Connection {
       .on(RoomEvent.TrackSubscriptionFailed, onTrackSubscriptionFailed)
       .on(RoomEvent.TrackMuted, onTrackMuted)
       .on(RoomEvent.TrackUnmuted, onTrackUnmuted)
-      .on(RoomEvent.TrackStreamStateChanged, onTrackStreamStateChanged);
+      .on(RoomEvent.TrackStreamStateChanged, onTrackStreamStateChanged)
+      .on(
+        RoomEvent.ParticipantEncryptionStatusChanged,
+        onEncryptionStatusChanged,
+      )
+      .on(RoomEvent.EncryptionError, onEncryptionError);
     this.scope.onEnd(() => {
       room
         .off(RoomEvent.ParticipantConnected, onParticipantConnected)
@@ -255,7 +277,12 @@ export class Connection {
         .off(RoomEvent.TrackSubscriptionFailed, onTrackSubscriptionFailed)
         .off(RoomEvent.TrackMuted, onTrackMuted)
         .off(RoomEvent.TrackUnmuted, onTrackUnmuted)
-        .off(RoomEvent.TrackStreamStateChanged, onTrackStreamStateChanged);
+        .off(RoomEvent.TrackStreamStateChanged, onTrackStreamStateChanged)
+        .off(
+          RoomEvent.ParticipantEncryptionStatusChanged,
+          onEncryptionStatusChanged,
+        )
+        .off(RoomEvent.EncryptionError, onEncryptionError);
     });
   }
 

From 6a9583a2ce2738c6b1aa95e29e47e35662c97685 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Mon, 7 Sep 2026 12:53:47 +0200
Subject: [PATCH 055/154] Adapt delayed leave timings when delegation is
 available

Splits the config options for the timings of a delayed leave event into two sets: one for when delegation is available (as you can relax the timings and get more stable calls this way), and another for when it's unavailable (as we must continue to gracefully downgrade even after Matrix 2.0 is fully rolled out).

This works by bluntly hitting the delegation endpoints without auth before joining to check for a 404.
---
 config/config.devenv.json                     |   2 -
 config/config.sample.json                     |   2 -
 config/config_netlify_preview.json            |   2 -
 config/config_netlify_preview_sdk.json        |   2 -
 src/config/ConfigOptions.ts                   |  88 +++---
 src/livekit/openIDSFU.test.ts                 |   8 +-
 src/livekit/openIDSFU.ts                      |  10 +-
 src/state/CallViewModel/CallViewModel.ts      |  29 +-
 .../localMember/LocalMember.test.ts           | 270 +++++++++++-------
 .../CallViewModel/localMember/LocalMember.ts  | 123 +++++---
 src/utils/observable.test.ts                  |  23 +-
 src/utils/observable.ts                       |  10 +-
 vite-embedded.config.ts                       |   2 -
 13 files changed, 363 insertions(+), 208 deletions(-)

diff --git a/config/config.devenv.json b/config/config.devenv.json
index 48602406..294209a6 100644
--- a/config/config.devenv.json
+++ b/config/config.devenv.json
@@ -9,8 +9,6 @@
   "matrix_rtc_session": {
     "wait_for_key_rotation_ms": 3000,
     "membership_event_expiry_ms": 180000000,
-    "delayed_leave_event_delay_ms": 18000,
-    "delayed_leave_event_restart_ms": 4000,
     "network_error_retry_ms": 100
   }
 }
diff --git a/config/config.sample.json b/config/config.sample.json
index 0baa522e..9f7ab61a 100644
--- a/config/config.sample.json
+++ b/config/config.sample.json
@@ -13,8 +13,6 @@
   "matrix_rtc_session": {
     "wait_for_key_rotation_ms": 3000,
     "membership_event_expiry_ms": 180000000,
-    "delayed_leave_event_delay_ms": 18000,
-    "delayed_leave_event_restart_ms": 4000,
     "network_error_retry_ms": 100
   }
 }
diff --git a/config/config_netlify_preview.json b/config/config_netlify_preview.json
index 313f0d02..179177ba 100644
--- a/config/config_netlify_preview.json
+++ b/config/config_netlify_preview.json
@@ -9,8 +9,6 @@
   "matrix_rtc_session": {
     "wait_for_key_rotation_ms": 3000,
     "membership_event_expiry_ms": 180000000,
-    "delayed_leave_event_delay_ms": 18000,
-    "delayed_leave_event_restart_ms": 4000,
     "network_error_retry_ms": 100
   },
   "posthog": {
diff --git a/config/config_netlify_preview_sdk.json b/config/config_netlify_preview_sdk.json
index 784f0c7e..fa60fe8d 100644
--- a/config/config_netlify_preview_sdk.json
+++ b/config/config_netlify_preview_sdk.json
@@ -9,8 +9,6 @@
   "matrix_rtc_session": {
     "wait_for_key_rotation_ms": 3000,
     "membership_event_expiry_ms": 180000000,
-    "delayed_leave_event_delay_ms": 18000,
-    "delayed_leave_event_restart_ms": 4000,
     "network_error_retry_ms": 100
   }
 }
diff --git a/src/config/ConfigOptions.ts b/src/config/ConfigOptions.ts
index 536966e0..872e3516 100644
--- a/src/config/ConfigOptions.ts
+++ b/src/config/ConfigOptions.ts
@@ -24,6 +24,35 @@ export enum MatrixRTCMode {
   Matrix_2_0 = "matrix_2_0",
 }
 
+export interface DelayedLeaveTimings {
+  /**
+   * The delay (in milliseconds) with which delayed leave events are sent.
+   *
+   * If the server receives no keep-alives from the client for any longer than
+   * this duration, it will send the leave event, automatically removing the
+   * user from the call.
+   */
+  delay_ms?: number;
+
+  /**
+   * How frequently (in milliseconds) the client sends keep-alives to the server
+   * to restart the timer for a delayed leave event. Should be less than
+   * {@link DelayedLeaveTimings.delay_ms}.
+   */
+  restart_ms?: number;
+
+  /**
+   * The time (in milliseconds) after which we consider a delayed event restart HTTP request to have failed.
+   * Setting this to a lower value will result in more frequent retries, but then we will also give up earlier.
+   *
+   * In the presence of network packet loss (hurting TCP connections), the custom delayedEventRestartLocalTimeoutMs
+   * helps by keeping more delayed event reset candidates in flight,
+   * improving the chances of a successful reset. (its is equivalent to the js-sdk `localTimeout` configuration,
+   * but only applies to calls to the `_unstable_updateDelayedEvent` endpoint with a body of `{action:"restart"}`.)
+   */
+  restart_timeout_ms?: number;
+}
+
 export interface ConfigOptions {
   /**
    * The Posthog endpoint to which analytics data will be sent.
@@ -184,29 +213,6 @@ export interface ConfigOptions {
      */
     wait_for_key_rotation_ms?: number;
 
-    /**
-     * The duration (in milliseconds) after the most recent keep-alive (delayed leave event restart)
-     * that the server waits before sending the leave MatrixRTC membership event.
-     */
-    delayed_leave_event_delay_ms?: number;
-
-    /**
-     * The time (in milliseconds) after which we consider a delayed event restart http request to have failed.
-     * Setting this to a lower value will result in more frequent retries but also a higher chance of failiour.
-     *
-     * In the presence of network packet loss (hurting TCP connections), the custom delayedEventRestartLocalTimeoutMs
-     * helps by keeping more delayed event reset candidates in flight,
-     * improving the chances of a successful reset. (its is equivalent to the js-sdk `localTimeout` configuration,
-     * but only applies to calls to the `_unstable_updateDelayedEvent` endpoint with a body of `{action:"restart"}`.)
-     */
-    delayed_leave_event_restart_local_timeout_ms?: number;
-
-    /**
-     * The time interval (in milliseconds) at which the client sends membership keep-alive
-     * messages to the server by restarting the timer for the delayed leave event.
-     */
-    delayed_leave_event_restart_ms?: number;
-
     /**
      * How long we wait before retrying after a network error on any of the requests.
      */
@@ -231,9 +237,28 @@ export interface ConfigOptions {
      * Defaults to the js-sdk default (undefined). Which means that rotation will always happen.
      */
     key_rotation_participant_limit?: number;
+
+    /**
+     * Timing options for delayed leave events, which are used to remove a user
+     * from a call when they lose connection.
+     */
+    delayed_leave?: DelayedLeaveTimings;
+
+    /**
+     * Timing options for delayed leave events, in cases where the ability to
+     * send the event can be delegated to the SFU.
+     *
+     * We recommend setting {@link DelayedLeaveTimings.delay_ms} >>
+     * {@link sync_disconnect_grace_period_ms} here.
+     */
+    delegated_delayed_leave?: DelayedLeaveTimings;
   };
 }
 
+export interface ResolvedDelayedLeaveTimings extends DelayedLeaveTimings {
+  delay_ms: number; // Required
+}
+
 // Overrides members from ConfigOptions that are always provided by the
 // default config and are therefore non-optional.
 export interface ResolvedConfigOptions extends ConfigOptions {
@@ -257,19 +282,15 @@ export interface ResolvedConfigOptions extends ConfigOptions {
       >
     >;
   };
-  matrix_rtc_session: {
-    wait_for_key_rotation_ms?: number;
-    delayed_leave_event_delay_ms: number;
-    delayed_leave_event_restart_local_timeout_ms?: number;
-    delayed_leave_event_restart_ms?: number;
+  matrix_rtc_session: ConfigOptions["matrix_rtc_session"] & {
     network_error_retry_ms: number;
-    membership_event_expiry_ms?: number;
-    key_rotation_participant_limit?: number;
+    delayed_leave: ResolvedDelayedLeaveTimings;
+    delegated_delayed_leave: ResolvedDelayedLeaveTimings;
   };
 }
 
 export const DEFAULT_CONFIG: ResolvedConfigOptions = {
-  sync_disconnect_grace_period_ms: 10000,
+  sync_disconnect_grace_period_ms: 10_000,
   ssla: "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
   media_quality: {
     video_codec: "vp8",
@@ -285,7 +306,8 @@ export const DEFAULT_CONFIG: ResolvedConfigOptions = {
     },
   },
   matrix_rtc_session: {
-    delayed_leave_event_delay_ms: 10000,
-    network_error_retry_ms: 1000,
+    network_error_retry_ms: 1_000,
+    delayed_leave: { delay_ms: 18_000, restart_ms: 4_000 },
+    delegated_delayed_leave: { delay_ms: 3_600_000, restart_ms: 300_000 },
   },
 };
diff --git a/src/livekit/openIDSFU.test.ts b/src/livekit/openIDSFU.test.ts
index 2ddb6c95..f759a3aa 100644
--- a/src/livekit/openIDSFU.test.ts
+++ b/src/livekit/openIDSFU.test.ts
@@ -148,7 +148,7 @@ describe("getSFUConfigWithOpenID", () => {
         // Verify, that the request contains the expected delay parameters
         if (
           body.delay_id === "mock_delay_id" &&
-          body.delay_timeout === 10000 &&
+          body.delay_timeout === 3600000 &&
           body.delay_cs_api_url === "https://homeserverserver.org/cs_api"
         ) {
           return {
@@ -229,7 +229,7 @@ describe("getSFUConfigWithOpenID", () => {
     expect(calls[0][0]).toStrictEqual("https://sfu.example.org/get_token");
     expect(calls[0][1]).toStrictEqual({
       // check if it uses correct delayID!
-      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":10000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
+      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":3600000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -239,7 +239,7 @@ describe("getSFUConfigWithOpenID", () => {
     expect(calls[1][0]).toStrictEqual("https://sfu.example.org/sfu/get");
 
     expect(calls[1][1]).toStrictEqual({
-      body: '{"room":"!example_room_id","device_id":"DEVICE","delay_id":"mock_delay_id","delay_timeout":10000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
+      body: '{"room":"!example_room_id","device_id":"DEVICE","delay_id":"mock_delay_id","delay_timeout":3600000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
       headers: {
         "Content-Type": "application/json",
       },
@@ -284,7 +284,7 @@ describe("getSFUConfigWithOpenID", () => {
     expect(calls[0][0]).toStrictEqual("https://sfu.example.org/get_token");
     expect(calls[0][1]).toStrictEqual({
       // check if it uses correct delayID!
-      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":10000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
+      body: '{"room_id":"!example_room_id","slot_id":"m.call#ROOM","member":{"id":"@alice:example.org:DEVICE","claimed_user_id":"@alice:example.org","claimed_device_id":"DEVICE"},"delay_id":"mock_delay_id","delay_timeout":3600000,"delay_cs_api_url":"https://matrix.homeserverserver.org"}',
       method: "POST",
       headers: {
         "Content-Type": "application/json",
diff --git a/src/livekit/openIDSFU.ts b/src/livekit/openIDSFU.ts
index 00cf69b1..67dd5e9e 100644
--- a/src/livekit/openIDSFU.ts
+++ b/src/livekit/openIDSFU.ts
@@ -204,11 +204,10 @@ async function getLiveKitJWT(
   let bodyDalayParts: IDelayParams = {};
   // Also check for empty string
   if (delayId && delayEndpointBaseUrl) {
-    const delayTimeoutMs =
-      Config.get().matrix_rtc_session?.delayed_leave_event_delay_ms;
     bodyDalayParts = {
       delay_id: delayId,
-      delay_timeout: delayTimeoutMs,
+      delay_timeout:
+        Config.get().matrix_rtc_session.delegated_delayed_leave.delay_ms,
       delay_cs_api_url: delayEndpointBaseUrl,
     };
   }
@@ -288,11 +287,10 @@ export async function getLiveKitJWTWithDelayDelegation(
   let bodyDalayParts = {};
   // Also check for empty string
   if (delayId && delayEndpointBaseUrl) {
-    const delayTimeoutMs =
-      Config.get().matrix_rtc_session?.delayed_leave_event_delay_ms;
     bodyDalayParts = {
       delay_id: delayId,
-      delay_timeout: delayTimeoutMs,
+      delay_timeout:
+        Config.get().matrix_rtc_session.delegated_delayed_leave.delay_ms,
       delay_cs_api_url: delayEndpointBaseUrl,
     };
   }
diff --git a/src/state/CallViewModel/CallViewModel.ts b/src/state/CallViewModel/CallViewModel.ts
index c854363b..62f05a47 100644
--- a/src/state/CallViewModel/CallViewModel.ts
+++ b/src/state/CallViewModel/CallViewModel.ts
@@ -64,7 +64,10 @@ import {
   showReactions,
 } from "../../settings/settings";
 import { Config } from "../../config/Config";
-import { MatrixRTCMode } from "../../config/ConfigOptions";
+import {
+  MatrixRTCMode,
+  type ResolvedDelayedLeaveTimings,
+} from "../../config/ConfigOptions";
 import { isFirefox, platform } from "../../Platform";
 import { setPipEnabled$ } from "../../controls";
 import { TileStore } from "../TileStore";
@@ -562,16 +565,6 @@ export function createCallViewModel$(
     localUser: { userId, deviceId },
   });
 
-  const connectOptions$ = scope.behavior(
-    matrixRTCMode$.pipe(
-      map((mode) => ({
-        encryptMedia: livekitKeyProvider !== undefined,
-        // TODO. This might need to get called again on each change of matrixRTCMode...
-        matrixRTCMode: mode,
-      })),
-    ),
-  );
-
   const localMembership = createLocalMembership$({
     scope,
     homeserverConnected: createHomeserverConnected$(
@@ -580,12 +573,21 @@ export function createCallViewModel$(
       matrixRTCSession,
     ),
     muteStates,
-    joinMatrixRTC: (transport: LivekitTransportConfig) => {
+    joinMatrixRTC: (
+      transport: LivekitTransportConfig,
+      delayedLeaveTimings: ResolvedDelayedLeaveTimings,
+    ) => {
       return enterRTCSession(
         matrixRTCSession,
         ownMembershipIdentity,
         transport,
-        connectOptions$.value,
+        {
+          encryptMedia: livekitKeyProvider !== undefined,
+          // We merely sample the current mode here, so the user would need to
+          // manually rejoin to switch to a different one
+          matrixRTCMode: matrixRTCMode$.value,
+          delayedLeaveTimings,
+        },
       );
     },
     createPublisherFactory: (connection: Connection) => {
@@ -603,6 +605,7 @@ export function createCallViewModel$(
     matrixRTCSession,
     localTransport$,
     roomId: matrixRoom.roomId,
+    baseUrl: client.baseUrl,
     logger: logger.getChild(`[${Date.now()}]`),
   });
 
diff --git a/src/state/CallViewModel/localMember/LocalMember.test.ts b/src/state/CallViewModel/localMember/LocalMember.test.ts
index aec64177..66cd8cda 100644
--- a/src/state/CallViewModel/localMember/LocalMember.test.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.test.ts
@@ -19,13 +19,18 @@ import {
   beforeAll,
   afterAll,
   beforeEach,
+  afterEach,
 } from "vitest";
 import { BehaviorSubject, map, of } from "rxjs";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { type LocalParticipant, type LocalTrack } from "livekit-client";
+import fetchMock from "fetch-mock";
 
 import { PosthogAnalytics } from "../../../analytics/PosthogAnalytics";
-import { MatrixRTCMode } from "../../../config/ConfigOptions";
+import {
+  MatrixRTCMode,
+  type ResolvedDelayedLeaveTimings,
+} from "../../../config/ConfigOptions";
 import { type HomeserverDisconnectReason } from "./HomeserverConnected";
 import {
   flushPromises,
@@ -35,6 +40,7 @@ import {
   mockMuteStates,
   withTestScheduler,
   ownMemberMock,
+  testScope,
 } from "../../../utils/test";
 import {
   TransportState,
@@ -95,112 +101,109 @@ describe("watchScreenShareToggle", () => {
   });
 });
 
-describe("LocalMembership", () => {
-  describe("enterRTCSession", () => {
-    it("It joins the correct Session", () => {
-      mockConfig({
-        livekit: { livekit_service_url: "http://my-default-service-url.com" },
-      });
+const timings: ResolvedDelayedLeaveTimings = {
+  delay_ms: 10000,
+  restart_ms: 4000,
+  restart_timeout_ms: 1000,
+};
 
-      const mockedSession = vi.mocked({
-        room: {
-          roomId: "roomId",
-          client: {
-            getDomain: vi.fn().mockReturnValue("example.org"),
-            getOpenIdToken: vi.fn().mockResolvedValue({
-              access_token: "ACCCESS_TOKEN",
-              token_type: "Bearer",
-              matrix_server_name: "localhost",
-              expires_in: 10000,
-            }),
-          },
-        },
-        memberships: [],
-        joinRTCSession: vi.fn(),
-      }) as unknown as MatrixRTCSession;
+const delegatedTimings: ResolvedDelayedLeaveTimings = {
+  delay_ms: timings.delay_ms * 10,
+  restart_ms: timings.restart_ms! * 10,
+  restart_timeout_ms: timings.restart_timeout_ms! * 10,
+};
 
-      enterRTCSession(
-        mockedSession,
-        ownMemberMock,
-        {
-          livekit_alias: "roomId",
-          livekit_service_url: "http://my-livekit-service-url.com",
-          type: "livekit",
-        },
-        {
-          encryptMedia: true,
-          matrixRTCMode: MATRIX_RTC_MODE,
-        },
-      );
+describe("enterRTCSession", () => {
+  const transport: LivekitTransportConfig = {
+    livekit_alias: "roomId",
+    livekit_service_url: "http://my-livekit-service-url.com",
+    type: "livekit",
+  };
 
-      expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
-        {
-          deviceId: "DEVICE",
-          memberId: "@alice:example.org:DEVICE",
-          userId: "@alice:example.org",
-        },
-        [],
-        {
-          livekit_alias: "roomId",
-          livekit_service_url: "http://my-livekit-service-url.com",
-          type: "livekit",
-        },
-        expect.objectContaining({ manageMediaKeys: true }),
-      );
-    });
+  const options = {
+    encryptMedia: true,
+    matrixRTCMode: MATRIX_RTC_MODE,
+    delayedLeaveTimings: timings,
+  };
 
-    it("passes keyRotationParticipantLimit from config to joinRTCSession", () => {
-      mockConfig({
-        livekit: { livekit_service_url: "http://my-default-service-url.com" },
-        matrix_rtc_session: {
-          delayed_leave_event_delay_ms: 0,
-          network_error_retry_ms: 0,
-          key_rotation_participant_limit: 50,
-        },
-      });
-
-      const mockedSession = vi.mocked({
-        room: {
-          roomId: "roomId",
-          client: {
-            getDomain: vi.fn().mockReturnValue("example.org"),
-            getOpenIdToken: vi.fn().mockResolvedValue({
-              access_token: "ACCCESS_TOKEN",
-              token_type: "Bearer",
-              matrix_server_name: "localhost",
-              expires_in: 10000,
-            }),
-          },
-        },
-        memberships: [],
-        joinRTCSession: vi.fn(),
-      }) as unknown as MatrixRTCSession;
-
-      enterRTCSession(
-        mockedSession,
-        ownMemberMock,
-        {
-          livekit_alias: "roomId",
-          livekit_service_url: "http://my-livekit-service-url.com",
-          type: "livekit",
-        },
-        {
-          encryptMedia: true,
-          matrixRTCMode: MATRIX_RTC_MODE,
-        },
-      );
-
-      expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
-        expect.any(Object),
-        [],
-        expect.any(Object),
-        expect.objectContaining({
-          keyRotationParticipantLimit: 50,
+  const mockedSession = vi.mocked({
+    room: {
+      roomId: "roomId",
+      client: {
+        getDomain: vi.fn().mockReturnValue("example.org"),
+        getOpenIdToken: vi.fn().mockResolvedValue({
+          access_token: "ACCCESS_TOKEN",
+          token_type: "Bearer",
+          matrix_server_name: "localhost",
+          expires_in: 10000,
         }),
-      );
-    });
+      },
+    },
+    memberships: [],
+    joinRTCSession: vi.fn(),
+  }) as unknown as MatrixRTCSession;
+
+  beforeEach(() =>
+    mockConfig({
+      livekit: { livekit_service_url: "http://my-default-service-url.com" },
+    }),
+  );
+
+  it("It joins the correct Session", () => {
+    enterRTCSession(mockedSession, ownMemberMock, transport, options);
+
+    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
+      {
+        deviceId: "DEVICE",
+        memberId: "@alice:example.org:DEVICE",
+        userId: "@alice:example.org",
+      },
+      [],
+      transport,
+      expect.objectContaining({ manageMediaKeys: true }),
+    );
   });
 
+  it("passes keyRotationParticipantLimit from config to joinRTCSession", () => {
+    mockConfig({
+      livekit: { livekit_service_url: "http://my-default-service-url.com" },
+      matrix_rtc_session: {
+        network_error_retry_ms: 0,
+        key_rotation_participant_limit: 50,
+        delayed_leave: timings,
+        delegated_delayed_leave: timings,
+      },
+    });
+
+    enterRTCSession(mockedSession, ownMemberMock, transport, options);
+
+    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
+      expect.any(Object),
+      [],
+      expect.any(Object),
+      expect.objectContaining({
+        keyRotationParticipantLimit: 50,
+      }),
+    );
+  });
+
+  it("uses the specified delayed leave timings", () => {
+    enterRTCSession(mockedSession, ownMemberMock, transport, options);
+
+    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
+      expect.anything(),
+      expect.anything(),
+      expect.anything(),
+      expect.objectContaining({
+        delayedLeaveEventRestartMs: timings.restart_ms,
+        delayedLeaveEventDelayMs: timings.delay_ms,
+        delayedLeaveEventRestartLocalTimeoutMs: timings.restart_timeout_ms,
+      }),
+    );
+  });
+});
+
+describe("LocalMembership", () => {
   const defaultCreateLocalMemberValues = {
     options: constant({
       encryptMedia: false,
@@ -226,8 +229,26 @@ describe("LocalMembership", () => {
       rtsSession$: constant(RTCMemberStatus.Connected),
     },
     roomId: "!test-room-id:example.org",
+    baseUrl: "https://matrix.example.org",
   };
 
+  beforeEach(() => {
+    mockConfig({
+      livekit: { livekit_service_url: "http://my-default-service-url.com" },
+      matrix_rtc_session: {
+        network_error_retry_ms: 1000,
+        delayed_leave: timings,
+        delegated_delayed_leave: delegatedTimings,
+      },
+    });
+    fetchMock.catch(404);
+  });
+
+  afterEach(async () => {
+    void (await fetchMock.flush());
+    fetchMock.reset();
+  });
+
   it("throws error on missing RTC config error", () => {
     withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
       const localTransport$ = scope.behavior<null | LivekitTransportConfig>(
@@ -256,7 +277,6 @@ describe("LocalMembership", () => {
         connectionManager: mockConnectionManager,
         localTransport$: behavior("a", { a: aLocalTransport }),
       });
-      localMembership.requestJoinAndPublish();
 
       expectObservable(localMembership.localMemberState$).toBe("ne", {
         n: TransportState.Waiting,
@@ -299,9 +319,8 @@ describe("LocalMembership", () => {
         scope,
         ...defaultCreateLocalMemberValues,
         connectionManager: mockConnectionManager,
-        localTransport$: behavior("a", { a: aLocalTransport }),
+        localTransport$: constant(aLocalTransport),
       });
-      localMembership.requestJoinAndPublish();
 
       expectObservable(localMembership.localMemberState$).toBe("n-e", {
         n: TransportState.Waiting,
@@ -397,6 +416,51 @@ describe("LocalMembership", () => {
     livekitRoom: mockLivekitRoom({}),
   } as unknown as Connection;
 
+  it.each([
+    ["no", null, timings],
+    [
+      "homeserver",
+      "https://matrix.example.org/_matrix/client/unstable/io.element.msc4195/rtc/livekit/delegate_delayed_leave",
+      delegatedTimings,
+    ],
+    ["transport", "/a/delegate_delayed_leave", delegatedTimings],
+  ])(
+    "joins session with %s delegation support",
+    async (_serviceName, delegationUrl, delayedLeaveTimings) => {
+      const scope = testScope();
+
+      const activeTransport$ = constant(aTransportWithSFUConfig);
+      const aLocalTransport: LocalTransport = {
+        advertised$: constant(aTransport),
+        active$: activeTransport$,
+      };
+      const connectionManagerData = new ConnectionManagerData();
+      const joinMatrixRTC = vi.fn();
+
+      if (delegationUrl !== null)
+        fetchMock.post(delegationUrl, () => ({ status: 401, body: {} }));
+
+      const localMembership = createLocalMembership$({
+        scope,
+        ...defaultCreateLocalMemberValues,
+        connectionManager: {
+          connectionManagerData$: constant(new Epoch(connectionManagerData)),
+        },
+        localTransport$: constant(aLocalTransport),
+        joinMatrixRTC,
+      });
+
+      localMembership.requestJoinAndPublish();
+      void (await fetchMock.flush());
+      await flushPromises();
+      // Joins with timings appropriate for the level of delegation support
+      expect(joinMatrixRTC).toHaveBeenCalledWith(
+        aTransport,
+        delayedLeaveTimings,
+      );
+    },
+  );
+
   it("recreates publisher if new connection is used, always unpublish and end tracks", async () => {
     const scope = new ObservableScope();
 
diff --git a/src/state/CallViewModel/localMember/LocalMember.ts b/src/state/CallViewModel/localMember/LocalMember.ts
index dfe8936a..838b14ee 100644
--- a/src/state/CallViewModel/localMember/LocalMember.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.ts
@@ -62,7 +62,10 @@ import {
   screenShareCodec,
   parseResolution,
 } from "../../../settings/settings.ts";
-import { MatrixRTCMode } from "../../../config/ConfigOptions.ts";
+import {
+  MatrixRTCMode,
+  type ResolvedDelayedLeaveTimings,
+} from "../../../config/ConfigOptions.ts";
 import { Config } from "../../../config/Config.ts";
 import {
   ConnectionState,
@@ -72,6 +75,8 @@ import {
 import { type HomeserverConnected } from "./HomeserverConnected.ts";
 import { type LocalTransport } from "./LocalTransport.ts";
 import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers.ts";
+import { doNetworkOperationWithRetry } from "../../../utils/matrix.ts";
+import { or$ } from "../../../utils/observable.ts";
 
 export enum TransportState {
   /** Not even a transport is available to the LocalMembership */
@@ -133,7 +138,10 @@ interface Props {
   muteStates: MuteStates;
   connectionManager: IConnectionManager;
   createPublisherFactory: (connection: Connection) => Publisher;
-  joinMatrixRTC: (transport: LivekitTransportConfig) => void;
+  joinMatrixRTC: (
+    transport: LivekitTransportConfig,
+    delayedLeaveTimings: ResolvedDelayedLeaveTimings,
+  ) => void;
   homeserverConnected: HomeserverConnected;
   roomId: string;
   localTransport$: Behavior<LocalTransport>;
@@ -141,6 +149,7 @@ interface Props {
     MatrixRTCSession,
     "updateCallIntent" | "leaveRoomSession"
   >;
+  baseUrl: string;
   logger: Logger;
 }
 
@@ -159,6 +168,7 @@ interface Props {
  * @param props.logger The logger to use.
  * @param props.muteStates The mute states for video and audio.
  * @param props.matrixRTCSession The matrix RTC session to join.
+ * @param props.baseUrl Base URL of the homeserver.
  * @param props.roomId The room ID used as the call identifier in analytics events.
  * @returns
  *  - publisher: The handle to create tracks and publish them to the room.
@@ -177,6 +187,7 @@ export const createLocalMembership$ = ({
   logger: parentLogger,
   muteStates,
   matrixRTCSession,
+  baseUrl,
   roomId,
 }: Props): {
   /**
@@ -236,11 +247,58 @@ export const createLocalMembership$ = ({
     return of(null);
   };
 
-  // This is the transport that we will advertise in our membership.
-  const advertisedTransport$ = localTransport$.pipe(
+  async function checkDelegationSupport(
+    endpointUrl: string,
+    serviceName: string,
+  ): Promise<boolean> {
+    logger.info(`Checking whether ${serviceName} supports delegation…`);
+    try {
+      // Bluntly hit the endpoint without auth to check for a 404
+      const res = await doNetworkOperationWithRetry(async () =>
+        fetch(endpointUrl, { method: "POST" }),
+      );
+      if (res.status === 404) {
+        logger.warn(`${serviceName} does not support delegation`);
+        return false;
+      } else {
+        logger.info(`${serviceName} supports delegation`);
+        return true;
+      }
+    } catch (e) {
+      logger.warn(
+        `Failed to determine whether ${serviceName} supports delegation, assuming no support`,
+        e,
+      );
+      return false;
+    }
+  }
+
+  const homeserverSupportsDelegation = checkDelegationSupport(
+    baseUrl +
+      "/_matrix/client/unstable/io.element.msc4195/rtc/livekit/delegate_delayed_leave",
+    "homeserver",
+  );
+
+  // The transport that we will advertise in our membership, paired with info as
+  // to whether delayed event delegation is supported
+  const joinParams$ = localTransport$.pipe(
     switchMap((lt) => lt.advertised$),
     catchError(handleTransportError),
     distinctUntilChanged(areLivekitTransportsEqual),
+    switchMap((transport) => {
+      if (transport === null) return of(null);
+      const transportSupportsDelegation = checkDelegationSupport(
+        transport.livekit_service_url + "/delegate_delayed_leave",
+        `transport ${transport.livekit_service_url}`,
+      );
+      return or$(
+        from(homeserverSupportsDelegation),
+        from(transportSupportsDelegation),
+      ).pipe(
+        map((delegationSupported) => ({ transport, delegationSupported })),
+        startWith(null),
+      );
+    }),
   );
 
   // Unwrap the local transport and set the state of the LocalMembership to error in case the transport is an error.
@@ -617,16 +675,20 @@ export const createLocalMembership$ = ({
 
   // Keep matrix rtc session in sync with advertisedTransport$, connectRequested$
   scope.reconcile(
-    scope.behavior(
-      combineLatest([advertisedTransport$, joinAndPublishRequested$]),
-    ),
-    async ([transport, shouldConnect]) => {
-      if (!transport) return;
+    scope.behavior(combineLatest([joinParams$, joinAndPublishRequested$])),
+    async ([joinParams, shouldConnect]) => {
+      if (!joinParams) return;
       // if shouldConnect=false we will do the disconnect as the cleanup from the previous reconcile iteration.
       if (!shouldConnect) return;
+      const sessionConfig = Config.get().matrix_rtc_session;
 
       try {
-        joinMatrixRTC(transport);
+        joinMatrixRTC(
+          joinParams.transport,
+          joinParams.delegationSupported
+            ? sessionConfig.delegated_delayed_leave
+            : sessionConfig.delayed_leave,
+        );
       } catch (error) {
         logger.error("Error entering RTC session", error);
         if (error instanceof Error)
@@ -864,6 +926,7 @@ export function observeSharingScreen$(p: Participant): Observable<boolean> {
 interface EnterRTCSessionOptions {
   encryptMedia: boolean;
   matrixRTCMode: MatrixRTCMode;
+  delayedLeaveTimings: ResolvedDelayedLeaveTimings;
 }
 
 /**
@@ -876,6 +939,7 @@ interface EnterRTCSessionOptions {
  * @param rtcSession - The MatrixRTCSession to join.
  * @param ownMembershipIdentity - Options for entering the RTC session.
  * @param transport - The LivekitTransport to use for this session.
+ * @param delayedLeaveTimings - The preferred timings for delayed leave events.
  * @param options - `encryptMedia`: Whether to encrypt media `matrixRTCMode`: The Matrix RTC mode to use.
  * @throws If the widget could not send ElementWidgetActions.JoinCall action.
  */
@@ -884,9 +948,8 @@ export function enterRTCSession(
   rtcSession: MatrixRTCSession,
   ownMembershipIdentity: CallMembershipIdentityParts,
   transport: LivekitTransportConfig,
-  options: EnterRTCSessionOptions,
+  { encryptMedia, matrixRTCMode, delayedLeaveTimings }: EnterRTCSessionOptions,
 ): void {
-  const { encryptMedia, matrixRTCMode } = options;
   PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
   PosthogAnalytics.instance.eventCallStarted.track(rtcSession.room.roomId);
 
@@ -894,7 +957,11 @@ export function enterRTCSession(
   // have started tracking by the time calls start getting created.
   // groupCallOTelMembership?.onJoinCall();
 
-  const { matrix_rtc_session: matrixRtcSessionConfig } = Config.get();
+  const {
+    sync_disconnect_grace_period_ms: gracePeriod,
+    matrix_rtc_session: sessionConfig,
+  } = Config.get();
+  const retryInterval = sessionConfig.network_error_retry_ms;
   const { sendNotificationType: notificationType, callIntent } = getUrlParams();
   const multiSFU =
     matrixRTCMode === MatrixRTCMode.Compatibility ||
@@ -912,16 +979,11 @@ export function enterRTCSession(
     };
   }
 
-  // Calculates `maximumNetworkErrorRetryCount`. The connection is failed if EITHER:
-  // - The /sync loop is unresponsive for > `gracePeriod` ms, or
-  // - A delayed leave event is emitted (after `leaveDelay` ms period).
-  // Note: Use leaveDelay >> gracePeriod for delegated leave events.
-  const gracePeriod = Config.get().sync_disconnect_grace_period_ms;
-  const leaveDelay = matrixRtcSessionConfig?.delayed_leave_event_delay_ms;
-  const retryInterval = matrixRtcSessionConfig?.network_error_retry_ms;
-
+  // Set maximumNetworkErrorRetryCount such that we will consider the client
+  // disconnected as soon as either it fails to sync for longer than the grace
+  // period, or it is likely that a delayed leave event has been sent.
   // Math.min is used to account for the respective worst case: /sync not available or leave event emitted.
-  const maxWaitTime = Math.min(gracePeriod, leaveDelay);
+  const maxWaitTime = Math.min(gracePeriod, delayedLeaveTimings.delay_ms);
   const maximumNetworkErrorRetryCount =
     Math.ceil(maxWaitTime / retryInterval) + 1;
 
@@ -936,18 +998,15 @@ export function enterRTCSession(
       notificationType,
       callIntent,
       manageMediaKeys: encryptMedia,
-      delayedLeaveEventRestartMs:
-        matrixRtcSessionConfig?.delayed_leave_event_restart_ms,
-      delayedLeaveEventDelayMs:
-        matrixRtcSessionConfig?.delayed_leave_event_delay_ms,
+      delayedLeaveEventRestartMs: delayedLeaveTimings.restart_ms,
+      delayedLeaveEventDelayMs: delayedLeaveTimings.delay_ms,
       delayedLeaveEventRestartLocalTimeoutMs:
-        matrixRtcSessionConfig?.delayed_leave_event_restart_local_timeout_ms,
-      networkErrorRetryMs: matrixRtcSessionConfig?.network_error_retry_ms,
-      makeKeyDelay: matrixRtcSessionConfig?.wait_for_key_rotation_ms,
-      membershipEventExpiryMs:
-        matrixRtcSessionConfig?.membership_event_expiry_ms,
+        delayedLeaveTimings.restart_timeout_ms,
+      networkErrorRetryMs: sessionConfig?.network_error_retry_ms,
+      makeKeyDelay: sessionConfig?.wait_for_key_rotation_ms,
+      membershipEventExpiryMs: sessionConfig?.membership_event_expiry_ms,
       keyRotationParticipantLimit:
-        matrixRtcSessionConfig?.key_rotation_participant_limit,
+        sessionConfig?.key_rotation_participant_limit,
       unstableSendStickyEvents: matrixRTCMode === MatrixRTCMode.Matrix_2_0,
       maximumNetworkErrorRetryCount: maximumNetworkErrorRetryCount,
     },
diff --git a/src/utils/observable.test.ts b/src/utils/observable.test.ts
index 80cbb3c8..392f742a 100644
--- a/src/utils/observable.test.ts
+++ b/src/utils/observable.test.ts
@@ -9,9 +9,30 @@ import { expect, test } from "vitest";
 import { type Observable, of, Subject, switchMap } from "rxjs";
 
 import { withTestScheduler } from "./test";
-import { filterBehavior, generateItems, pauseWhen } from "./observable";
+import { or$, filterBehavior, generateItems, pauseWhen } from "./observable";
 import { type Behavior } from "../state/Behavior";
 
+const yesNo = {
+  y: true,
+  n: false,
+};
+
+test("or$", () => {
+  withTestScheduler(({ behavior, expectObservable }) => {
+    const input1Marbles = "ny--n--";
+    const input2Marbles = "n-y--n-";
+    const input3Marbles = "n--y--n";
+    const outputMarbles = "nyyyyyn";
+    expectObservable(
+      or$(
+        behavior(input1Marbles, yesNo),
+        behavior(input2Marbles, yesNo),
+        behavior(input3Marbles, yesNo),
+      ),
+    ).toBe(outputMarbles, yesNo);
+  });
+});
+
 test("pauseWhen", () => {
   withTestScheduler(({ behavior, expectObservable }) => {
     const inputMarbles = " abcdefgh-i-jk-";
diff --git a/src/utils/observable.ts b/src/utils/observable.ts
index c32254db..d4ea90b2 100644
--- a/src/utils/observable.ts
+++ b/src/utils/observable.ts
@@ -114,13 +114,11 @@ export function getValue<T>(state$: Observable<T>): T {
 }
 
 /**
- * Creates an Observable that has a value of true whenever all its inputs are
- * true.
- *
- * @public
+ * Creates an Observable that has a value of true whenever some of its inputs
+ * are true.
  */
-export function and$(...inputs: Observable<boolean>[]): Observable<boolean> {
-  return combineLatest(inputs, (...flags) => flags.every((flag) => flag));
+export function or$(...inputs: Observable<boolean>[]): Observable<boolean> {
+  return combineLatest(inputs, (...flags) => flags.some((flag) => flag));
 }
 
 /**
diff --git a/vite-embedded.config.ts b/vite-embedded.config.ts
index 27a42fbb..228d2cf8 100644
--- a/vite-embedded.config.ts
+++ b/vite-embedded.config.ts
@@ -27,8 +27,6 @@ export default defineConfig((env) =>
             data: {
               matrix_rtc_session: {
                 wait_for_key_rotation_ms: 5000,
-                delayed_leave_event_restart_ms: 4000,
-                delayed_leave_event_delay_ms: 18000,
               },
             },
           },

From 65e1b845a79aa9fd16e767db68d4109bd8dcae4e Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Mon, 7 Sep 2026 13:18:00 +0200
Subject: [PATCH 056/154] Apply suggestion from @Johennes

---
 src/state/CallViewModel/remoteMembers/Connection.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/state/CallViewModel/remoteMembers/Connection.ts b/src/state/CallViewModel/remoteMembers/Connection.ts
index 10478cb7..faacc28b 100644
--- a/src/state/CallViewModel/remoteMembers/Connection.ts
+++ b/src/state/CallViewModel/remoteMembers/Connection.ts
@@ -243,7 +243,7 @@ export class Connection {
         `Encryption status of ${p?.identity ?? "unknown participant"}: encrypted=${encrypted}`,
       );
     // livekit-client throttles these per cryptor; they indicate frames being
-    // dropped (missing/invalid key), which is the other half of the picture.
+    // dropped (missing/invalid key).
     const onEncryptionError = (error: Error, p?: Participant): void =>
       log.warn(
         `Encryption error for ${p?.identity ?? "unknown participant"}:`,

From 365204d04ca99169ca21c8bb393024196292db76 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Mon, 7 Sep 2026 14:50:36 +0200
Subject: [PATCH 057/154] fix media queries in component based element call.

---
 README.md                                   |  3 +
 playwright/component/component-call.spec.ts | 82 ++++++++++++++++++++-
 src/AppBar.module.css                       |  4 +-
 src/Header.module.css                       |  2 +-
 src/base.css                                | 12 ++-
 src/button/ReactionToggleButton.module.css  |  2 +-
 src/components/CallFooter.module.css        | 16 ++--
 src/grid/OneOnOneMobileLayout.module.css    |  2 +-
 src/grid/SpotlightExpandedLayout.module.css |  2 +-
 src/room/CallEndedView.module.css           |  2 +-
 src/room/InCallView.module.css              |  2 +-
 src/room/LobbyView.module.css               |  4 +-
 src/room/VideoPreview.module.css            |  2 +-
 13 files changed, 114 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index 0732ff41..273846af 100644
--- a/README.md
+++ b/README.md
@@ -234,6 +234,9 @@ logged along the bottom.
 The call lays itself out for the size of the element it is mounted in, not the
 window: a host that shrinks the container to a corner of its page gets the
 picture-in-picture layout, just as a host that shrank the whole iframe used to.
+The breakpoints in Element Call's stylesheets are `@container element-call`
+queries against its root element for the same reason; for the standalone app
+the root is the page, so they mean what the media queries they replaced did.
 
 The component's stylesheet is confined to the element it is mounted in: the
 build rewrites every selector so that it matches only Element Call's root or
diff --git a/playwright/component/component-call.spec.ts b/playwright/component/component-call.spec.ts
index 97a00267..784158ad 100644
--- a/playwright/component/component-call.spec.ts
+++ b/playwright/component/component-call.spec.ts
@@ -5,9 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { expect, type Locator, test } from "@playwright/test";
+import { expect, type Locator, type Page, test } from "@playwright/test";
 
 import { createUserAndRoom, expectWithin, startHarness } from "./harness.ts";
+import { SpaHelpers } from "../spa-helpers.ts";
 
 /**
  * Element Call embedded as a React component, driven through the development
@@ -165,3 +166,82 @@ test("lays itself out for the space it is given, not the page", async ({
   await resize(900, 700);
   await expect(call).not.toHaveAttribute("data-layout", "pip");
 });
+
+/**
+ * The shape of a call at whatever size it has been given: the layout it chose,
+ * how much of the height the tile and the footer take, and which controls the
+ * footer shows. Two calls with the same shape look the same, participants aside.
+ */
+async function callShape(scope: Page | Locator): Promise<{
+  layout: string | null;
+  tileHeight: number;
+  footerHeight: number;
+  buttons: (string | null)[];
+}> {
+  const call = scope.locator("[data-layout]");
+  const footer = scope.getByTestId("footer-container");
+  await expect(footer).toBeVisible();
+  const tile = scope.getByTestId("videoTile").first();
+  await expect(tile).toBeVisible();
+  const tileBox = (await tile.boundingBox())!;
+  const footerBox = (await footer.boundingBox())!;
+  const buttons = await footer
+    .getByRole("button")
+    .filter({ visible: true })
+    .evaluateAll((elements) =>
+      elements.map((element) => element.getAttribute("aria-label")),
+    );
+  return {
+    layout: await call.getAttribute("data-layout"),
+    tileHeight: Math.round(tileBox.height),
+    footerHeight: Math.round(footerBox.height),
+    buttons,
+  };
+}
+
+test("looks the same in a small container as in a small window", async ({
+  page,
+  browser,
+}) => {
+  // Two calls to set up, one of them through the harness's two logins
+  test.setTimeout(240_000);
+  const size = { width: 300, height: 300 };
+
+  // The reference is Element Call owning a window of that size, which is what
+  // a mobile app's webview or a browser's picture-in-picture gives it, and
+  // what its small-window styling was written for.
+  const referenceContext = await browser.newContext({
+    viewport: size,
+    ignoreHTTPSErrors: true,
+    permissions: ["microphone", "camera"],
+  });
+  const referencePage = await referenceContext.newPage();
+  await referencePage.goto("/");
+  await SpaHelpers.createCall(referencePage, "Reference", "smallwindow", true);
+  const reference = await callShape(referencePage);
+  await referencePage.screenshot({
+    path: test.info().outputPath("small-window.png"),
+  });
+
+  // The component gets a container of that size, in a window that is far larger
+  const { username, roomId } = await createUserAndRoom("smallcontainer");
+  const panes = await startHarness(page, username, roomId);
+  const pane = panes.first();
+  const container = pane.getByTestId("call-container");
+  await container.evaluate((element, { width, height }) => {
+    element.style.width = `${width}px`;
+    element.style.height = `${height}px`;
+  }, size);
+  await pane.getByTestId("lobby_joinCall").click({ timeout: 60_000 });
+  await expect(pane.locator("[data-layout]")).toBeVisible({ timeout: 60_000 });
+  const component = await callShape(pane);
+  await container.screenshot({
+    path: test.info().outputPath("small-container.png"),
+  });
+  await referenceContext.close();
+
+  // The breakpoints in Element Call's stylesheets are container queries, so a
+  // small container gets the compact footer a small window does, rather than
+  // the full-width one the window's own size would call for
+  expect(component).toEqual(reference);
+});
diff --git a/src/AppBar.module.css b/src/AppBar.module.css
index faf2b0bf..1b234a22 100644
--- a/src/AppBar.module.css
+++ b/src/AppBar.module.css
@@ -68,7 +68,7 @@
 }
 
 /* Hide everything but the subtitle in small windows */
-@media (max-height: 450px) {
+@container element-call (max-height: 450px) {
   .bar {
     display: none;
   }
@@ -166,7 +166,7 @@
   }
 
   /* Hide everything but the subtitle in small windows */
-  @media (max-height: 450px) {
+  @container element-call (max-height: 450px) {
     .bar:has(.subtitle) > header {
       grid-template-rows: var(--cpd-space-4x) minmax(var(--cpd-space-5x), auto);
       grid-template-areas: "." "subtitle";
diff --git a/src/Header.module.css b/src/Header.module.css
index f82f5fbd..07a3e724 100644
--- a/src/Header.module.css
+++ b/src/Header.module.css
@@ -107,7 +107,7 @@ Please see LICENSE in the repository root for full details.
   gap: var(--cpd-space-1-5x);
 }
 
-@media (min-width: 800px) {
+@container element-call (min-width: 800px) {
   .headerLogo,
   .leftNav.hideMobile,
   .rightNav.hideMobile {
diff --git a/src/base.css b/src/base.css
index ae09f492..d31622fb 100644
--- a/src/base.css
+++ b/src/base.css
@@ -33,7 +33,8 @@ the app and for the component build. */
 @import url("@fontsource/inconsolata/700.css");
 
 @import url("normalize.css/normalize.css") layer(normalize);
-@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
+@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css")
+layer(compound);
 @import url("@vector-im/compound-web/dist/style.css") layer(compound.components);
 
 :root {
@@ -76,6 +77,15 @@ the app and for the component build. */
   --video-tile-background: var(--cpd-color-bg-subtle-secondary);
 }
 
+/* The breakpoints in Element Call's stylesheets are container queries against
+this element rather than media queries against the viewport. For the standalone
+app the two are the same thing, since the root is the page; for a host that
+embeds Element Call in a corner of its own page they are not, and it is the
+corner that the layout has to fit. */
+[data-element-call-root] {
+  container: element-call / size;
+}
+
 .cpd-theme-dark {
   --cpd-color-border-accent: var(--cpd-color-green-1100);
   --stopgap-color-on-solid-accent: var(--cpd-color-text-primary);
diff --git a/src/button/ReactionToggleButton.module.css b/src/button/ReactionToggleButton.module.css
index 705d4d9e..3be0fd35 100644
--- a/src/button/ReactionToggleButton.module.css
+++ b/src/button/ReactionToggleButton.module.css
@@ -10,7 +10,7 @@
   width: fit-content;
 }
 
-@media (max-width: 420px) {
+@container element-call (max-width: 420px) {
   .reactionPopupMenu {
     --reaction-button-padding: 8px;
     --reaction-button-fontsize: 16px;
diff --git a/src/components/CallFooter.module.css b/src/components/CallFooter.module.css
index d919b33e..e006a5f7 100644
--- a/src/components/CallFooter.module.css
+++ b/src/components/CallFooter.module.css
@@ -77,7 +77,7 @@ Please see LICENSE in the repository root for full details.
 }
 
 /*First hide the logo*/
-@media (max-width: 750px) {
+@container element-call (max-width: 750px) {
   .logo {
     display: none;
   }
@@ -94,7 +94,7 @@ Please see LICENSE in the repository root for full details.
 With the logo hidden >500px is enough space to show overflow, buttons, layout.
 Once we exceed 500 we hide everything except the buttons.
 */
-@media (max-width: 500px) {
+@container element-call (max-width: 500px) {
   .footer {
     grid-template-areas: "buttons buttons buttons";
   }
@@ -115,27 +115,27 @@ Once we exceed 500 we hide everything except the buttons.
   }
 }
 
-@media (max-height: 800px) {
+@container element-call (max-height: 800px) {
   .footer {
     padding-block: var(--cpd-space-8x)
       calc(env(safe-area-inset-bottom) + var(--cpd-space-8x));
   }
 }
 
-@media (max-height: 400px) {
+@container element-call (max-height: 400px) {
   .footer {
     padding-block: var(--cpd-space-4x)
       calc(env(safe-area-inset-bottom) + var(--cpd-space-4x));
   }
 }
 
-@media (max-width: 370px) {
+@container element-call (max-width: 370px) {
   .shareScreen {
     display: none;
   }
 
   /* PIP custom css */
-  @media (max-height: 400px) {
+  @container element-call (max-height: 400px) {
     .shareScreen {
       display: flex;
     }
@@ -148,13 +148,13 @@ Once we exceed 500 we hide everything except the buttons.
   }
 }
 
-@media (max-width: 320px) {
+@container element-call (max-width: 320px) {
   .raiseHand {
     display: none;
   }
 }
 
-@media (min-width: 800px) {
+@container element-call (min-width: 800px) {
   .buttons {
     gap: var(--cpd-space-4x);
   }
diff --git a/src/grid/OneOnOneMobileLayout.module.css b/src/grid/OneOnOneMobileLayout.module.css
index e781726c..d07520f5 100644
--- a/src/grid/OneOnOneMobileLayout.module.css
+++ b/src/grid/OneOnOneMobileLayout.module.css
@@ -30,7 +30,7 @@ Please see LICENSE in the repository root for full details.
   block-size: 140px;
 }
 
-@media (max-width: 600px) {
+@container element-call (max-width: 600px) {
   /* Give the PiP a portrait aspect ratio */
   .pip[data-size="sm"] {
     inline-size: 88px;
diff --git a/src/grid/SpotlightExpandedLayout.module.css b/src/grid/SpotlightExpandedLayout.module.css
index d765c6fc..570b6266 100644
--- a/src/grid/SpotlightExpandedLayout.module.css
+++ b/src/grid/SpotlightExpandedLayout.module.css
@@ -25,7 +25,7 @@ Please see LICENSE in the repository root for full details.
     var(--content-inset-left);
 }
 
-@media (min-width: 600px) {
+@container element-call (min-width: 600px) {
   .pip {
     inline-size: 180px;
     block-size: 135px;
diff --git a/src/room/CallEndedView.module.css b/src/room/CallEndedView.module.css
index e62e93d0..7b2dbee0 100644
--- a/src/room/CallEndedView.module.css
+++ b/src/room/CallEndedView.module.css
@@ -74,7 +74,7 @@ Please see LICENSE in the repository root for full details.
   margin-bottom: 44px;
 }
 
-@media (min-width: 800px) {
+@container element-call (min-width: 800px) {
   .logo {
     display: none;
   }
diff --git a/src/room/InCallView.module.css b/src/room/InCallView.module.css
index 736a915a..3c393cd6 100644
--- a/src/room/InCallView.module.css
+++ b/src/room/InCallView.module.css
@@ -75,7 +75,7 @@ spotlight tile is maximised and displaying video, apply a gradient background. *
   background: none;
 }
 
-@media (max-width: 320px) {
+@container element-call (max-width: 320px) {
   .invite {
     display: none;
   }
diff --git a/src/room/LobbyView.module.css b/src/room/LobbyView.module.css
index b66d483c..b112cdf2 100644
--- a/src/room/LobbyView.module.css
+++ b/src/room/LobbyView.module.css
@@ -28,13 +28,13 @@ Please see LICENSE in the repository root for full details.
   color: var(--cpd-color-theme-primary) !important;
 }
 
-@media (max-width: 500px) {
+@container element-call (max-width: 500px) {
   .join {
     width: 100%;
   }
 }
 
-@media (min-height: 650px) {
+@container element-call (min-height: 650px) {
   .content {
     gap: var(--cpd-space-10x);
   }
diff --git a/src/room/VideoPreview.module.css b/src/room/VideoPreview.module.css
index 67eae10b..44c43faf 100644
--- a/src/room/VideoPreview.module.css
+++ b/src/room/VideoPreview.module.css
@@ -71,7 +71,7 @@ video.mirror {
   );
 }
 
-@media (max-width: 550px) {
+@container element-call (max-width: 550px) {
   .preview {
     margin-inline: 0;
     border-radius: 0;

From 489c1af4265a6a053e21be36c4ae38d913caf7c7 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Mon, 7 Sep 2026 17:35:25 +0200
Subject: [PATCH 058/154] test resizing via @container

---
 playwright/component/component-call.spec.ts | 41 ++++++++++++---------
 playwright/component/harness.ts             | 16 ++++++++
 2 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/playwright/component/component-call.spec.ts b/playwright/component/component-call.spec.ts
index 784158ad..54e1a22a 100644
--- a/playwright/component/component-call.spec.ts
+++ b/playwright/component/component-call.spec.ts
@@ -7,7 +7,12 @@ Please see LICENSE in the repository root for full details.
 
 import { expect, type Locator, type Page, test } from "@playwright/test";
 
-import { createUserAndRoom, expectWithin, startHarness } from "./harness.ts";
+import {
+  createUserAndRoom,
+  expectWithin,
+  resizeContainer,
+  startHarness,
+} from "./harness.ts";
 import { SpaHelpers } from "../spa-helpers.ts";
 
 /**
@@ -58,6 +63,10 @@ test("keeps its modals inside the container it was given", async ({ page }) => {
   const pane = panes.first();
   const container = pane.getByTestId("call-container");
 
+  // In the flat container the harness gives it by default, Element Call hides
+  // its controls a few seconds after the call starts, as it would in a flat
+  // window. A full-size container keeps them on screen to be clicked.
+  await resizeContainer(container, { width: 900, height: 640 });
   await pane.getByTestId("lobby_joinCall").click({ timeout: 60_000 });
   await expect(pane.getByTestId("footer-container")).toBeVisible({
     timeout: 60_000,
@@ -151,19 +160,10 @@ test("lays itself out for the space it is given, not the page", async ({
   // a host wanting a picture-in-picture made the iframe small, and Element Call
   // saw the window shrink. A component gets no such signal from the window,
   // which stays as large as it ever was; only the container changes.
-  const resize = async (width: number, height: number): Promise<void> =>
-    container.evaluate(
-      (element, size) => {
-        element.style.width = `${size.width}px`;
-        element.style.height = `${size.height}px`;
-      },
-      { width, height },
-    );
-
-  await resize(300, 300);
+  await resizeContainer(container, { width: 300, height: 300 });
   await expect(call).toHaveAttribute("data-layout", "pip");
 
-  await resize(900, 700);
+  await resizeContainer(container, { width: 900, height: 700 });
   await expect(call).not.toHaveAttribute("data-layout", "pip");
 });
 
@@ -181,12 +181,14 @@ async function callShape(scope: Page | Locator): Promise<{
   const call = scope.locator("[data-layout]");
   const footer = scope.getByTestId("footer-container");
   await expect(footer).toBeVisible();
+  // The tile arrives with the media connection, which can take a while
   const tile = scope.getByTestId("videoTile").first();
-  await expect(tile).toBeVisible();
+  await expect(tile).toBeVisible({ timeout: 60_000 });
   const tileBox = (await tile.boundingBox())!;
   const footerBox = (await footer.boundingBox())!;
+  // Buttons and switches alike: the mute controls are switches
   const buttons = await footer
-    .getByRole("button")
+    .locator("button")
     .filter({ visible: true })
     .evaluateAll((elements) =>
       elements.map((element) => element.getAttribute("aria-label")),
@@ -228,10 +230,7 @@ test("looks the same in a small container as in a small window", async ({
   const panes = await startHarness(page, username, roomId);
   const pane = panes.first();
   const container = pane.getByTestId("call-container");
-  await container.evaluate((element, { width, height }) => {
-    element.style.width = `${width}px`;
-    element.style.height = `${height}px`;
-  }, size);
+  await resizeContainer(container, size);
   await pane.getByTestId("lobby_joinCall").click({ timeout: 60_000 });
   await expect(pane.locator("[data-layout]")).toBeVisible({ timeout: 60_000 });
   const component = await callShape(pane);
@@ -244,4 +243,10 @@ test("looks the same in a small container as in a small window", async ({
   // small container gets the compact footer a small window does, rather than
   // the full-width one the window's own size would call for
   expect(component).toEqual(reference);
+  // And that footer is the compact one: a single row of controls, not the
+  // full-height bar with its logo and layout switch that a large window gets
+  expect(component.footerHeight).toBeLessThan(size.height / 3);
+  expect(component.tileHeight + component.footerHeight).toBeLessThanOrEqual(
+    size.height,
+  );
 });
diff --git a/playwright/component/harness.ts b/playwright/component/harness.ts
index 4602f22d..8e1a6e58 100644
--- a/playwright/component/harness.ts
+++ b/playwright/component/harness.ts
@@ -108,3 +108,19 @@ export async function expectWithin(
     outerBox.y + outerBox.height + slack,
   );
 }
+
+/**
+ * Gives one of the harness's containers a new size. Element Call lays itself
+ * out for the size of its container, so this is how a test puts it into a
+ * particular mode: a flat or narrow one, a picture-in-picture, or a full-size
+ * window, without the window itself changing at all.
+ */
+export async function resizeContainer(
+  container: Locator,
+  size: { width: number; height: number },
+): Promise<void> {
+  await container.evaluate((element, { width, height }) => {
+    element.style.width = `${width}px`;
+    element.style.height = `${height}px`;
+  }, size);
+}

From 27734a1a029a2be3aa71b548ebec78ca68e50ad7 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 8 Sep 2026 06:13:17 +0000
Subject: [PATCH 059/154] Update all non-major dependencies

---
 package.json   |    4 +-
 pnpm-lock.yaml | 2908 ++++++++++++++++++++++++------------------------
 2 files changed, 1452 insertions(+), 1460 deletions(-)

diff --git a/package.json b/package.json
index 2f4faa60..bb28b67c 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,7 @@
     "@vitejs/plugin-react": "^6.0.2",
     "@vitest/browser-playwright": "^4.1.5",
     "@vitest/coverage-v8": "^4.0.18",
-    "@vitest/ui": "4.1.10",
+    "@vitest/ui": "4.1.11",
     "babel-plugin-react-compiler": "^1.0.0",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.3",
@@ -101,7 +101,7 @@
     "node-stdlib-browser": "^1.3.1",
     "normalize.css": "^8.0.1",
     "observable-hooks": "^4.2.3",
-    "oxfmt": "^0.61.0",
+    "oxfmt": "^0.66.0",
     "oxlint": "^1.70.0",
     "oxlint-tsgolint": "^0.25.0",
     "pako": "^2.0.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0d5550f4..3d35a87f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,7 +24,7 @@ importers:
     devDependencies:
       '@codecov/vite-plugin':
         specifier: ^1.3.0
-        version: 1.9.1(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+        version: 1.9.1(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
       '@fontsource/inconsolata':
         specifier: ^5.1.0
         version: 5.3.0
@@ -51,22 +51,22 @@ importers:
         version: 0.10.35
       '@playwright/test':
         specifier: ^1.60.0
-        version: 1.62.0
+        version: 1.62.1
       '@radix-ui/react-dialog':
         specifier: ^1.0.4
-        version: 1.1.23(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        version: 1.1.23(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-slider':
         specifier: ^1.1.2
-        version: 1.4.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        version: 1.4.7(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-visually-hidden':
         specifier: ^1.0.3
-        version: 1.2.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        version: 1.2.11(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@react-spring/web':
         specifier: ^10.0.0
         version: 10.1.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@rolldown/plugin-babel':
         specifier: ^0.2.3
-        version: 0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+        version: 0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.2.7)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
       '@sentry/react':
         specifier: ^8.0.0
         version: 8.55.2(react@19.2.8)
@@ -75,13 +75,13 @@ importers:
         version: 3.6.1(supports-color@7.2.0)
       '@storybook/addon-docs':
         specifier: ^10.3.6
-        version: 10.5.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(rollup@4.60.1)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+        version: 10.6.0(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))
       '@storybook/addon-vitest':
         specifier: ^10.3.6
-        version: 10.5.5(@vitest/browser-playwright@4.1.10)(@vitest/browser@4.1.10)(@vitest/runner@4.1.10)(react@19.2.8)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(vitest@4.1.10)
+        version: 10.6.0(@vitest/browser-playwright@4.1.11)(@vitest/browser@4.1.11)(@vitest/runner@4.1.11)(react@19.2.8)(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))(vitest@4.1.11)
       '@storybook/react-vite':
         specifier: ^10.3.6
-        version: 10.5.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(rollup@4.60.1)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(supports-color@7.2.0)(typescript@5.9.3)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+        version: 10.6.0(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(rollup@4.60.1)(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))(supports-color@7.2.0)(typescript@5.9.3)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
       '@testing-library/dom':
         specifier: ^10.1.0
         version: 10.4.1
@@ -90,10 +90,10 @@ importers:
         version: 6.9.1
       '@testing-library/react':
         specifier: ^16.0.0
-        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        version: 16.3.3(@testing-library/dom@10.4.1)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@testing-library/user-event':
         specifier: ^14.5.1
-        version: 14.6.1(@testing-library/dom@10.4.1)
+        version: 14.6.7(@testing-library/dom@10.4.1)
       '@types/eslint':
         specifier: ^9.6.1
         version: 9.6.1
@@ -117,37 +117,37 @@ importers:
         version: 1.5.6
       '@types/react':
         specifier: ^19.0.0
-        version: 19.2.17
+        version: 19.2.18
       '@types/react-dom':
         specifier: ^19.0.0
-        version: 19.2.3(@types/react@19.2.17)
+        version: 19.2.5(@types/react@19.2.18)
       '@types/sdp-transform':
         specifier: ^2.4.5
         version: 2.15.0
       '@typescript-eslint/utils':
         specifier: ^8.61.0
-        version: 8.65.0(eslint@8.57.1(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)
+        version: 8.69.0(eslint@8.57.1(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)
       '@use-gesture/react':
         specifier: ^10.2.11
         version: 10.3.1(react@19.2.8)
       '@vector-im/compound-design-tokens':
         specifier: ^10.0.0
-        version: 10.2.4(@types/react@19.2.17)(react@19.2.8)
+        version: 10.2.4(@types/react@19.2.18)(react@19.2.8)
       '@vector-im/compound-web':
         specifier: ^10.0.0
-        version: 10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.17)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        version: 10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@vitejs/plugin-react':
         specifier: ^6.0.2
-        version: 6.0.5(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+        version: 6.1.1(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.2.7)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
       '@vitest/browser-playwright':
         specifier: ^4.1.5
-        version: 4.1.10(playwright@1.62.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.10)
+        version: 4.1.11(playwright@1.62.1)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.11)
       '@vitest/coverage-v8':
         specifier: ^4.0.18
-        version: 4.1.10(@vitest/browser@4.1.10)(vitest@4.1.10)
+        version: 4.1.11(@vitest/browser@4.1.11)(vitest@4.1.11)
       '@vitest/ui':
-        specifier: 4.1.10
-        version: 4.1.10(vitest@4.1.10)
+        specifier: 4.1.11
+        version: 4.1.11(vitest@4.1.11)
       babel-plugin-react-compiler:
         specifier: ^1.0.0
         version: 1.0.0
@@ -162,19 +162,19 @@ importers:
         version: link:eslint
       eslint-plugin-storybook:
         specifier: ^10.3.6
-        version: 10.5.5(eslint@8.57.1(supports-color@7.2.0))(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(supports-color@7.2.0)(typescript@5.9.3)
+        version: 10.6.0(eslint@8.57.1(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)
       fetch-mock:
         specifier: 11.1.5
         version: 11.1.5(node-fetch@2.7.0)
       i18next:
         specifier: ^26.0.0
-        version: 26.3.6(typescript@5.9.3)
+        version: 26.4.1(typescript@5.9.3)
       i18next-browser-languagedetector:
         specifier: ^8.0.0
         version: 8.2.1
       i18next-cli:
         specifier: ^1.61.0
-        version: 1.67.3(@types/node@24.13.3)(react-dom@19.2.8(react@19.2.8))(typescript@5.9.3)
+        version: 1.72.4(@types/node@24.13.3)(react-dom@19.2.8(react@19.2.8))(typescript@5.9.3)
       jsdom:
         specifier: ^26.0.0
         version: 26.1.0(supports-color@7.2.0)
@@ -206,11 +206,11 @@ importers:
         specifier: ^4.2.3
         version: 4.2.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(rxjs@7.8.2)
       oxfmt:
-        specifier: ^0.61.0
-        version: 0.61.0
+        specifier: ^0.66.0
+        version: 0.66.0
       oxlint:
         specifier: ^1.70.0
-        version: 1.76.0(oxlint-tsgolint@0.25.0)
+        version: 1.81.0(oxlint-tsgolint@0.25.0)
       oxlint-tsgolint:
         specifier: ^0.25.0
         version: 0.25.0
@@ -219,10 +219,10 @@ importers:
         version: 2.2.0
       postcss:
         specifier: ^8.4.41
-        version: 8.5.25
+        version: 8.5.26
       postcss-preset-env:
         specifier: ^10.0.0
-        version: 10.6.1(postcss@8.5.25)
+        version: 10.6.1(postcss@8.5.26)
       posthog-js:
         specifier: 1.408.2
         version: 1.408.2
@@ -237,10 +237,10 @@ importers:
         version: 19.2.8(react@19.2.8)
       react-i18next:
         specifier: ^16.0.0 <16.7.0
-        version: 16.6.6(i18next@26.3.6(typescript@5.9.3))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(typescript@5.9.3)
+        version: 16.6.6(i18next@26.4.1(typescript@5.9.3))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(typescript@5.9.3)
       react-router-dom:
         specifier: ^7.0.0
-        version: 7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        version: 7.18.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react-use-measure:
         specifier: ^2.1.1
         version: 2.1.7(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -249,10 +249,10 @@ importers:
         version: 7.8.2
       sass:
         specifier: ^1.42.1
-        version: 1.102.0
+        version: 1.103.1
       storybook:
         specifier: ^10.3.6
-        version: 10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8)
+        version: 10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8)
       typescript:
         specifier: ^5.8.3
         version: 5.9.3
@@ -261,37 +261,37 @@ importers:
         version: 4.7.1
       uuid:
         specifier: ^14.0.0
-        version: 14.0.1
+        version: 14.0.2
       vaul:
         specifier: ^1.0.0
-        version: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        version: 1.1.2(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       vite:
         specifier: ^8.0.0
-        version: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)
+        version: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)
       vite-plugin-generate-file:
         specifier: ^0.3.0
         version: 0.3.1
       vite-plugin-html:
         specifier: ^3.2.2
-        version: 3.2.2(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+        version: 3.2.2(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
       vite-plugin-node-polyfills:
         specifier: ^0.28.0
-        version: 0.28.0(rollup@4.60.1)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+        version: 0.28.0(rollup@4.60.1)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
       vite-plugin-node-stdlib-browser:
         specifier: ^0.2.1
-        version: 0.2.1(node-stdlib-browser@1.3.1)(rollup@4.60.1)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+        version: 0.2.1(node-stdlib-browser@1.3.1)(rollup@4.60.1)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
       vite-plugin-svgr:
         specifier: ^4.0.0
-        version: 4.5.0(rollup@4.60.1)(supports-color@7.2.0)(typescript@5.9.3)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+        version: 4.5.0(rollup@4.60.1)(supports-color@7.2.0)(typescript@5.9.3)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
       vite-plugin-wasm:
         specifier: ^3.6.0
-        version: 3.6.0(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+        version: 3.6.0(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
       vitest:
         specifier: ^4.1.5
-        version: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+        version: 4.1.11(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(@vitest/ui@4.1.11)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
       vitest-axe:
         specifier: ^1.0.0-pre.3
-        version: 1.0.0-pre.5(vitest@4.1.10)
+        version: 1.0.0-pre.5(vitest@4.1.11)
 
 packages:
 
@@ -728,8 +728,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  '@emnapi/core@1.11.1':
-    resolution: {integrity: sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==}
+  '@emnapi/core@1.11.0':
+    resolution: {integrity: sha512-l9Oo58x0HOP5znGzVhYW9U3e5wVuA4LAZU2AGezTmkhO1CgQRFDhDg4nneHsu/t3WniXg9QrG2nIXL/ZS8ln8Q==}
 
   '@emnapi/core@1.11.2':
     resolution: {integrity: sha512-TC8MkTuZUtcTSiFeuC0ksCh9QIJ5+F21MvZ4Wn4ORfYaFJ/0dsiudv5tVkejgwZlwQ39jL9WWDe2lz8x0WglOA==}
@@ -737,8 +737,8 @@ packages:
   '@emnapi/core@1.9.2':
     resolution: {integrity: sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==}
 
-  '@emnapi/runtime@1.11.1':
-    resolution: {integrity: sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==}
+  '@emnapi/runtime@1.11.0':
+    resolution: {integrity: sha512-55coeOFKHv1ywEcUXJtWU5f+Jr/W5tZDvZig8DLKSwUN1JpROQ4rk/SNOQiFWmaR/VKF4zuFyW1B8JduOSv6Pg==}
 
   '@emnapi/runtime@1.11.2':
     resolution: {integrity: sha512-kyOl3X0DuTiT1h2ft8r2fYO8JYtU9a9Xis/zBSiGArNaagCOWx90N1k2wxp18czFDH+OgcWGb5ZP/XMt3dcyPA==}
@@ -752,158 +752,158 @@ packages:
   '@emnapi/wasi-threads@1.2.2':
     resolution: {integrity: sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==}
 
-  '@esbuild/aix-ppc64@0.28.1':
-    resolution: {integrity: sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==}
+  '@esbuild/aix-ppc64@0.28.2':
+    resolution: {integrity: sha512-XExcO+dvLKvVtNTibSTBej1NCAbaGhWn9Ww1ZPx80qsahhPFe/8jgWP0IchNe0F3HwkU7n8ejhH8bjonqht8mQ==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/android-arm64@0.28.1':
-    resolution: {integrity: sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==}
+  '@esbuild/android-arm64@0.28.2':
+    resolution: {integrity: sha512-5YfKeeI8qWfBZIX+u2xZC3Zlb3Os/gLS2sbEKM+I4ZOcsWmHS2WLysCcQZDAFRslDUU5Oiq44gf6PYN1vGwG5A==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm@0.28.1':
-    resolution: {integrity: sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==}
+  '@esbuild/android-arm@0.28.2':
+    resolution: {integrity: sha512-kXXoiPVVGQcnIYGOeaovwOURpniDBpSq4A03qkQ+BMQqtGG6HYap3xne9C1O1yo4TR3qxlCX5IqqmX6fFo2Lqg==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-x64@0.28.1':
-    resolution: {integrity: sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==}
+  '@esbuild/android-x64@0.28.2':
+    resolution: {integrity: sha512-O387ite7SzUyCcy3JQX4P4bLtEA7bLLkx+esve5JHnyYfNTxcVpXZo9jhdB0lTKN44gztELTdU7nS8Nr16Fs1Q==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
 
-  '@esbuild/darwin-arm64@0.28.1':
-    resolution: {integrity: sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==}
+  '@esbuild/darwin-arm64@0.28.2':
+    resolution: {integrity: sha512-n4KqkOQrraxHJcgjM1RvwbigfQKIKJVpM7xp+KsxiyUSrRdIXnt73VhrPAx0fV44hgfmIVKjxMN9J1t5jySVkw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.28.1':
-    resolution: {integrity: sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==}
+  '@esbuild/darwin-x64@0.28.2':
+    resolution: {integrity: sha512-uq6suIWYP37qzGddBKPw5QEQPi6HiLGsO7UmkpfyaYNQ3D+rN6w6WfwH+nuqcGXWvawGwxOEroO4YGnFh95azw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/freebsd-arm64@0.28.1':
-    resolution: {integrity: sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==}
+  '@esbuild/freebsd-arm64@0.28.2':
+    resolution: {integrity: sha512-n+I0BTSRIoy+d6RPKnEVwql5UwBJolytvY4mAOIEJorKlqgPII8ix6slVVrfZ5Tnj7glIZvloylbB/EJPMWEXw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.28.1':
-    resolution: {integrity: sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==}
+  '@esbuild/freebsd-x64@0.28.2':
+    resolution: {integrity: sha512-78XJTJkvPs0kz2w61301PJjXl4g7q3JqiYMZ/M/yVI73EHBrCRTgkhu9oqG7vPqq+a/yadEW8aD+agKlk5xrmg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/linux-arm64@0.28.1':
-    resolution: {integrity: sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==}
+  '@esbuild/linux-arm64@0.28.2':
+    resolution: {integrity: sha512-pW4AC0P3it8c7do9MVM4p51FzHzdM/TZrerurgRcHJ2WTa1VQ1CIq18xncfpBJw4ojkiZZrKW2yIBWBP92j6Ug==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm@0.28.1':
-    resolution: {integrity: sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==}
+  '@esbuild/linux-arm@0.28.2':
+    resolution: {integrity: sha512-XlDnu2q5yoqems+xay6wSAcg9DDD7K9RLKZEBOMZm3ckNpJBvOX20tSfby8KfrrhINDyv9V2YVZKY/SpoGJI8w==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.28.1':
-    resolution: {integrity: sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==}
+  '@esbuild/linux-ia32@0.28.2':
+    resolution: {integrity: sha512-CYbnj78HsIeA+DhgUKgFCfvNsTHFhMMrinUrMZpDXJXKN8T3XViTZ/+wtHeVxEWY8ewSzTFN+nRmSwO2tZaLUQ==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.28.1':
-    resolution: {integrity: sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==}
+  '@esbuild/linux-loong64@0.28.2':
+    resolution: {integrity: sha512-buwkd8nsph4R+ajRvw0qM5Hja/TXQow3ptzWO2EbG/cqcIkHloRrdlBtQlshyYGTNFvfkfJ5tpPLVkY4DtsPfQ==}
     engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.28.1':
-    resolution: {integrity: sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==}
+  '@esbuild/linux-mips64el@0.28.2':
+    resolution: {integrity: sha512-ZVykbDyk7519VwiNb9Lcj9m8XM6v5V9uKPvrEMkkEedVewf+0itkhahp4HDpgERXhwLRpWFypsGbG/J8s0QjJA==}
     engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.28.1':
-    resolution: {integrity: sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==}
+  '@esbuild/linux-ppc64@0.28.2':
+    resolution: {integrity: sha512-CAXl+Dtd9UUuJd8pKKdwh6MLm3MUMiqMPmhZ3tTSXPqfyQ3vDl6R5hZdZ/kYojK4ofXtdfSv1tFq8XzWx3heNQ==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.28.1':
-    resolution: {integrity: sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==}
+  '@esbuild/linux-riscv64@0.28.2':
+    resolution: {integrity: sha512-GeXCej4IQtU1B+QlDV8W/RRvbzI3O/Stss+/bCXv4lZls5WGRtu2a+3JkA3i4qIUlMXpcHebWpF8AkJhATowuA==}
     engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.28.1':
-    resolution: {integrity: sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==}
+  '@esbuild/linux-s390x@0.28.2':
+    resolution: {integrity: sha512-3H1weTYZPxt/WOhByszQZybS9w5lKzUn1FDMsgEChbHWQwHYQQRfBxgCcZvPhjHfKyJjIievvMmEUawJrdY9Dg==}
     engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-x64@0.28.1':
-    resolution: {integrity: sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==}
+  '@esbuild/linux-x64@0.28.2':
+    resolution: {integrity: sha512-4xTZr1FUmSoQW4XIWmit3tzQrUTZM+N3P0XV8xROKYF50XfI7xeO90+1bZvNwxIufQ9hDQVRJH5YhgPVF8A/HQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/netbsd-arm64@0.28.1':
-    resolution: {integrity: sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==}
+  '@esbuild/netbsd-arm64@0.28.2':
+    resolution: {integrity: sha512-sSATRjPeDBg3pdgHoQfoYBob11Kk1FGa9lui5RIHZCoCkJa9QKlvl3/vKz2usCmYYjs7ymJR/2Nnsqe+Hjt5nw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.28.1':
-    resolution: {integrity: sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==}
+  '@esbuild/netbsd-x64@0.28.2':
+    resolution: {integrity: sha512-lqnzCV+mM0gIADaKihiCg6ifgfU2L3h5E33rNQBN1Y4MaVGnzryzmvvf7UHxprpQdE8hpqLolJ9Rl+SkIRDpyw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/openbsd-arm64@0.28.1':
-    resolution: {integrity: sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==}
+  '@esbuild/openbsd-arm64@0.28.2':
+    resolution: {integrity: sha512-AL2qJILH7lNjrDmCQDvdxMfAUIv8KMNZOvrwAQ8i8//ntL9FflhOyMJ8OZSMBb8/AWXe3/5v5S20y3zCoZWKoQ==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.28.1':
-    resolution: {integrity: sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==}
+  '@esbuild/openbsd-x64@0.28.2':
+    resolution: {integrity: sha512-QtiuPytchRyC4rwUKhexJdQKvDuZ6hWloi3igqPQNUJCS1/v9EiO3UTOXR6A3FoMo4fnAKbWJdqaIwhOzh8qEw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/openharmony-arm64@0.28.1':
-    resolution: {integrity: sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==}
+  '@esbuild/openharmony-arm64@0.28.2':
+    resolution: {integrity: sha512-WkhYDmpTjLvGlScA1rwjRUmhl4k8oXR3cIbtqWmELgU/dFeHHlEllxDvdWcNJV9rbzCexB5vz8gtNewWLgCT7Q==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openharmony]
 
-  '@esbuild/sunos-x64@0.28.1':
-    resolution: {integrity: sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==}
+  '@esbuild/sunos-x64@0.28.2':
+    resolution: {integrity: sha512-GPMSkTOtMnv2U2F8gxe4Io6qmVs+YKyp832Etqqxr0hFngmXQ3rzwytelm3GIn7T4VviRUlf3sOgBOiTdvaf7g==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/win32-arm64@0.28.1':
-    resolution: {integrity: sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==}
+  '@esbuild/win32-arm64@0.28.2':
+    resolution: {integrity: sha512-PIhhEkE9uPBleRBrQEJpUn7MBnibZzbGzYWPmY3x+YoVg/95zbjB4CxPPOQ8l5tYYM4mMaCthF8/1DIfBQQyWQ==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.28.1':
-    resolution: {integrity: sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==}
+  '@esbuild/win32-ia32@0.28.2':
+    resolution: {integrity: sha512-YmJbfTlvU7Sdn9BB+4PRES4oB6pxgS37MAONj+hBr/cpXS1aBPKXxNnDbu+QCWPj0o9dgyxeq79g6c5P8KeuYA==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-x64@0.28.1':
-    resolution: {integrity: sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==}
+  '@esbuild/win32-x64@0.28.2':
+    resolution: {integrity: sha512-5ebpxr3nWMzrL/rnUI755Jkuee0bHL/Gq0WTF9lvcpv73wAp5eu8MfBUgWK9bhWvZjj7yX8etf/8tI8Ney695g==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
@@ -993,12 +993,12 @@ packages:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
     deprecated: Use @eslint/object-schema instead
 
-  '@inquirer/ansi@2.0.7':
-    resolution: {integrity: sha512-3eTuUO1vH2cZm2ZKHeQxnOqlTi9EfZDGgIe3BL3I4u+rJHocr9Fz86M4fjYABPvFnQG/gGK551HqDiIcETwU6Q==}
+  '@inquirer/ansi@2.0.8':
+    resolution: {integrity: sha512-WpQM+Ti6Z40EFwwt+uL2p4UabT+W179zHp6HhLVOzfbwnVn05IPO/eXIZXGNqcT1jbQ15SujNLzQ39k4QPPxBQ==}
     engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
 
-  '@inquirer/checkbox@5.2.1':
-    resolution: {integrity: sha512-b6xmA/VlTe0ZgDQHDui+Nav470u7u49nRd8/iuhOcQPO9Ch7lGuogydhi2VOmNlZ+zXcM8IcPuNSwQcdJaF/kw==}
+  '@inquirer/checkbox@5.2.4':
+    resolution: {integrity: sha512-oKT5RNeO9oKYizSyOxKb66IrKUsYVMQD2tnjllYW4wmSOe9WawfL3OE2p82JuvAyo+/nDIEem5P4Bm/ZIVYVew==}
     engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
@@ -1006,8 +1006,8 @@ packages:
       '@types/node':
         optional: true
 
-  '@inquirer/confirm@6.1.1':
-    resolution: {integrity: sha512-eb8DBZcz/2qHWQda4rk2JiQk5h9QV/cVHi1yjt0f69WFZMRFn0sJTye3EAP8icut8UDMjQPsaH5KbcOogefrFQ==}
+  '@inquirer/confirm@6.3.1':
+    resolution: {integrity: sha512-HvnOHal39DTenOVoRpIy8Z+n4YYfNa3Qhi/P8zFqn9/d1crpmQG0DPx34rwOeOFvotgKr9Vov/14OmKR/Iwfjw==}
     engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
@@ -1015,8 +1015,8 @@ packages:
       '@types/node':
         optional: true
 
-  '@inquirer/core@11.2.1':
-    resolution: {integrity: sha512-Qd6GJT1yVyrZZCfN8W2qKF5ApmqryXRhRKCuip8h01x2w/esJQ2XIYc6f9abMIHgKQdBfFTSOdbHRLAhuM09UA==}
+  '@inquirer/core@12.0.2':
+    resolution: {integrity: sha512-9pBhkxE14uUlnHhs8lOt7qVPtS4caRY6CjADl8COejl9Mf7w8i6Uoe3DrljCqYtmYM3Iv2Q6EmPxx/oTYbvTAQ==}
     engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
@@ -1024,8 +1024,8 @@ packages:
       '@types/node':
         optional: true
 
-  '@inquirer/editor@5.2.2':
-    resolution: {integrity: sha512-ZRVd/oD+sYsUd5zVm0NflqEzlqfYCyHNsqkHl2oWXEUHs12tCbcSFi+wVFEvD8+LGRaMUsVrE7qeo6lSG/S1Vg==}
+  '@inquirer/editor@5.3.2':
+    resolution: {integrity: sha512-7ruKO5d/wxhGHxdCQ3eyP/aBNrPTZ+Ju7ERtnAwuIsu0RSLs6kotlTRkOxHatbD6sDaEEdwsD82pzFiT9ESIyQ==}
     engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
@@ -1033,8 +1033,8 @@ packages:
       '@types/node':
         optional: true
 
-  '@inquirer/expand@5.1.1':
-    resolution: {integrity: sha512-YmQpenjbFSHAK3sOd44puHh3V1KXXr+JiNpUztoSQ4drLh2rTVzTap/YtlAVu/5xavifIlBfNEzJ/neZJ1a/1g==}
+  '@inquirer/expand@5.1.4':
+    resolution: {integrity: sha512-12o4aYnjWouoq0fyVhYIL+hwXAaga+kntA/wrijFmVvn2heinkdvkbEXRt1Ob/9IOJ285US5tntjfI/Ukt2YkA==}
     engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
@@ -1042,8 +1042,8 @@ packages:
       '@types/node':
         optional: true
 
-  '@inquirer/external-editor@3.0.3':
-    resolution: {integrity: sha512-6thf5I8q7lZwzGLAxPaaGEREEkZ3nyePPDQ1oyobblxmEE8mqTLguScP7pDjUTAibiyb4hfXl+qjUEJ+di/aNA==}
+  '@inquirer/external-editor@3.0.5':
+    resolution: {integrity: sha512-f3QQJRIX5ZEneBHNUIuPjmbdzHnmRFJA8r2dkcb8q+OM5Uv5KtnuAttQumnrjcBVBM3mcTX1CkmtAkU58VRZxg==}
     engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
@@ -1051,12 +1051,12 @@ packages:
       '@types/node':
         optional: true
 
-  '@inquirer/figures@2.0.7':
-    resolution: {integrity: sha512-aJ8TBPOGB6f/2qziPfElISTCEd5XOYTFckA2SGjhNmiKzfK/u4ot3v0DUzGVdUnKjN10EqnnEPck36BkyfLnJw==}
+  '@inquirer/figures@2.0.9':
+    resolution: {integrity: sha512-EAWgUTGQ/Umgga51dE3B2PUHbufuXarDfg86uVgoSgNHNNQnyFKcOrQLWVqYMghuSyHh8+2HUH0Js9cTC1WAdg==}
     engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
 
-  '@inquirer/input@5.1.2':
-    resolution: {integrity: sha512-9K/DDBSQpOyZSkt6sOVP9Vo0TR7atX2kuILsUu0x3wVcVbe97lJwIJKMLdMw25tDYuXl/qp6erT0Xs1rfmcfZg==}
+  '@inquirer/input@5.1.5':
+    resolution: {integrity: sha512-2MkYYFD1Owt1eRBwHhsLSutysRodWasA4DVpl42KJKGmzwBTXRYAIXujisrt0UW0UohUlMjNjLfMDbw4emRbfw==}
     engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
@@ -1064,8 +1064,8 @@ packages:
       '@types/node':
         optional: true
 
-  '@inquirer/number@4.1.1':
-    resolution: {integrity: sha512-XF4IXAbPnGPgw0wsbC/i2tPcyfdZgDpUlhsqU0SfT4IRIGWha6Xm9VRgN5yYxJq+jnyXlfXI/nQ3ulfk0iEICA==}
+  '@inquirer/number@4.2.2':
+    resolution: {integrity: sha512-tjW1gMIQsFb/9Ie11i8SpuPARBdyCVfC5XOeVugWovrdm8CpjzN+A1CBX5QwCCN2mtNmpgDDCnuLCCT94cQ5zA==}
     engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
@@ -1073,8 +1073,8 @@ packages:
       '@types/node':
         optional: true
 
-  '@inquirer/password@5.1.1':
-    resolution: {integrity: sha512-3XBfF7DAsp5qeDsvN5Rd1HmbNokVvEQoUM0QLrRcybC9nX96w3Pbmu7qUsb3IT3J3jBvs2+mTXaKHOUsgHMLzg==}
+  '@inquirer/password@5.2.1':
+    resolution: {integrity: sha512-InA6nJxMCXPavPBiTKYHIsYiWz/mkIsk1rkI6pKp5w18gVawqrZOj7eSzSmPJa3j0pVxXm6RlrFP1BE9YeOixA==}
     engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
@@ -1082,8 +1082,8 @@ packages:
       '@types/node':
         optional: true
 
-  '@inquirer/prompts@8.5.2':
-    resolution: {integrity: sha512-IYR/3C/paEVVQYQvdDlFZVjRCJVYHHON0XXMH91KO9GSxs0TdKYWlUdvfQl2EfAHDxUaN3IBffkE/BDTh5nJ6g==}
+  '@inquirer/prompts@8.7.1':
+    resolution: {integrity: sha512-xJIKWyrFNUKj3R5VEub/iKodG9Sh/MbCeApZUbATJgHTw8YoAJ2gOT78HlvO6NMFiRvjm6ySM7aiAew/zVY0Sw==}
     engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
@@ -1091,8 +1091,8 @@ packages:
       '@types/node':
         optional: true
 
-  '@inquirer/rawlist@5.3.1':
-    resolution: {integrity: sha512-QqdTqQddL3qPX/PPrjobpsO25NZ4dWXgTLenrR445L2ptLEYE6Z+PD5c5CNDJNx4ugRgELAIpSIJxZaO2jJ2Og==}
+  '@inquirer/rawlist@5.3.4':
+    resolution: {integrity: sha512-c4fDwOpQsjJDHjXdHJE1/xXH6w9/BAiyu3QKzH9Ww5Xm1q37mzyUNa20L7qdtM1ECi4e+oUEKjhK8hR37OMAMQ==}
     engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
@@ -1100,8 +1100,8 @@ packages:
       '@types/node':
         optional: true
 
-  '@inquirer/search@4.2.1':
-    resolution: {integrity: sha512-xJj8QWKRSrfKoBIITLZK61dD3zwo0Rz11fgDImku30/Oe81zMdIdGgrLY2h6RkJ+KZ/GhNYIRMKnH/62qBTA5g==}
+  '@inquirer/search@4.3.2':
+    resolution: {integrity: sha512-YIaEhWmfkdHEWOKwhF/oJar35FFTTrAdzNbJDo9lSsRT6E/obRPx9oVm4rkTMtlcJSqGYttNtLbcHQef9Qw2yw==}
     engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
@@ -1109,8 +1109,8 @@ packages:
       '@types/node':
         optional: true
 
-  '@inquirer/select@5.2.1':
-    resolution: {integrity: sha512-FlDndEUww8m7BfukO2nJa25vhD+H5jxxCv4oGioKqzyWz3nPHhhw4LKdYRSlXuAx7DsdWia7iyaBPKKS95Evfw==}
+  '@inquirer/select@5.2.4':
+    resolution: {integrity: sha512-L9ubNaJdoBsiom/AfPKq0QLHTkhhCFCtszzdVidGremrlJjPZfGlmvp+IULKIbnYjtVFWnvb4mhiEdNTZ12ugA==}
     engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
@@ -1118,8 +1118,8 @@ packages:
       '@types/node':
         optional: true
 
-  '@inquirer/type@4.0.7':
-    resolution: {integrity: sha512-t28inv14nMQ1PhKpsJPY+kEs/c00qzeCOS2gTNRyTjG5d6qsVA2fItxW4hkvGZ5lvanGLdtCzVIx5dwdRpN1+g==}
+  '@inquirer/type@4.1.1':
+    resolution: {integrity: sha512-yJoHYrMnxIsJZCY+0Vb66Dy3he3kL3e2wOBKhoSwWWAzZAY82emlxwgprCtp6yRixvNRNq9ztfRWQYPNr3Go7A==}
     engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
@@ -1156,6 +1156,9 @@ packages:
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
+  '@jridgewell/sourcemap-codec@1.6.0':
+    resolution: {integrity: sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==}
+
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
@@ -1210,12 +1213,12 @@ packages:
       '@emnapi/core': ^1.7.1
       '@emnapi/runtime': ^1.7.1
 
-  '@napi-rs/wasm-runtime@1.2.2':
-    resolution: {integrity: sha512-JfB4kuJQjaoHuCTseIINHtHWeJnvgEcxjwA5t/Y00ZgaOO1Crz3fjT/p8kT28zA/Caz7oiUMn3d6H2yOVCVwuw==}
+  '@napi-rs/wasm-runtime@1.2.3':
+    resolution: {integrity: sha512-UMduMbqO5s5zF2NkNacMT/yK5Y5QiKvWr2+50bzIIxFDwVJ2h49b+oyjaCGPhJxd2/gC2x39EHv/gHVuu36x2Q==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=23.5.0}
     peerDependencies:
-      '@emnapi/core': ^1.7.1 || ^2.0.0-alpha.3
-      '@emnapi/runtime': ^1.7.1 || ^2.0.0-alpha.3
+      '@emnapi/core': ^1.7.1 || ^2.0.0-alpha.4
+      '@emnapi/runtime': ^1.7.1 || ^2.0.0-alpha.4
 
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
@@ -1411,16 +1414,16 @@ packages:
   '@oxc-project/types@0.127.0':
     resolution: {integrity: sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ==}
 
-  '@oxc-project/types@0.139.0':
-    resolution: {integrity: sha512-r9gHphtCs+1M7J0pw6Sn/hh/Wpa/iQrOOkrNAlVLF/gHq+/CJmHIWKKUUhdWjcD6CIa8idarspCsASiXCXvFUw==}
+  '@oxc-project/types@0.148.0':
+    resolution: {integrity: sha512-Nm4s/jB+4FpFsPhWGEC4h7rzksesmtnMXomo6rCMcg/b8zLQuOziRgkCS1fxDCXOlJB/6Q8oABOZ/OP6RIPj9A==}
 
   '@oxc-resolver/binding-android-arm-eabi@11.19.1':
     resolution: {integrity: sha512-aUs47y+xyXHUKlbhqHUjBABjvycq6YSD7bpxSW7vplUmdzAlJ93yXY6ZR0c1o1x5A/QKbENCvs3+NlY8IpIVzg==}
     cpu: [arm]
     os: [android]
 
-  '@oxc-resolver/binding-android-arm-eabi@11.24.2':
-    resolution: {integrity: sha512-y09e0L0SRI2OA2tUIrjBgoV3eH5hvUKXNkJqXmNo5V2WxIjyC7I7aJfRLMEVpA8yi95f90gFDvO0VMgrDw+vwA==}
+  '@oxc-resolver/binding-android-arm-eabi@11.21.2':
+    resolution: {integrity: sha512-xQoCRv+gKax9KTdwdaQNnAFOai8neay7g3jExDIORzhbrejwGSJaZNTdOJHR5ziLg2joMxOCMOFMo4zuxza2uQ==}
     cpu: [arm]
     os: [android]
 
@@ -1429,8 +1432,8 @@ packages:
     cpu: [arm64]
     os: [android]
 
-  '@oxc-resolver/binding-android-arm64@11.24.2':
-    resolution: {integrity: sha512-cl4icWaZFnLdg8m6qtnh5rBMuGbxc/ptStFHLeCNwr+2cZjkjNwQu/jYRS0CHlnPecOJMpuS5M6/BH+0J/YkEg==}
+  '@oxc-resolver/binding-android-arm64@11.21.2':
+    resolution: {integrity: sha512-HF5oiE2L05yInPYCFD/4uxSrEZW4SuIfn99Y6L1xnJnzl066JR+MJs2rIdstw8A2MPlAKH+13dpFPNycjqzvGg==}
     cpu: [arm64]
     os: [android]
 
@@ -1439,8 +1442,8 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@oxc-resolver/binding-darwin-arm64@11.24.2':
-    resolution: {integrity: sha512-At29QEMF6HajbQvgY8K6OXnHD1x9rad74xBEfmCB6ZqCGsdq75aK7tOYcTbOanMy8qdIBrfL3SMr3p/lfSlb9w==}
+  '@oxc-resolver/binding-darwin-arm64@11.21.2':
+    resolution: {integrity: sha512-UX4u49CVCAD8QZNELaW8eMGgMAGwFWYEPbvNsh+3r/gs4NX3KfpiACMVwRQT0EuH3uat9hM5Zl+Ppm9pJD8tgg==}
     cpu: [arm64]
     os: [darwin]
 
@@ -1449,8 +1452,8 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@oxc-resolver/binding-darwin-x64@11.24.2':
-    resolution: {integrity: sha512-A5Kqr1EUj4oIL5CF4WRssq/o5P0Y11cwoFouMRmQ7YnC/A8V93nv1nb7aSU8HwcgmXropjLNkVTl4MN87cu28Q==}
+  '@oxc-resolver/binding-darwin-x64@11.21.2':
+    resolution: {integrity: sha512-J9xPx7YBkrRmJ+xl561ztnMWEc1aOyjEIxBiGX1dVb3u7bGSnfObfcZk+Pd+uM0HZAPNsQ1xvD8j52A/uOSqNQ==}
     cpu: [x64]
     os: [darwin]
 
@@ -1459,8 +1462,8 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
-  '@oxc-resolver/binding-freebsd-x64@11.24.2':
-    resolution: {integrity: sha512-R5xkRBRRz7ceH/P5Jrc6G7FmdUdgpLYyESFAUDVTNQ9K0sGPxcp4ljiwEwEqsvNcQ4sYbMRrWcHHBCu7ksAJVw==}
+  '@oxc-resolver/binding-freebsd-x64@11.21.2':
+    resolution: {integrity: sha512-fRlt7OvSaQkWj6+EDTVxawVxOlqJB2QSnBfkeCyK4RTvsGctbw3BiH2Tb7DzMs7bikc4BRBpvWP5zF9K8b54Zg==}
     cpu: [x64]
     os: [freebsd]
 
@@ -1469,8 +1472,8 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@oxc-resolver/binding-linux-arm-gnueabihf@11.24.2':
-    resolution: {integrity: sha512-k/RuYL4L/R58IBn3wT5ma3Wh4k62bp1eYCFRWCmMsasUOqL+H6sW0VGFadEzKWXFFlz+2uIMoeMk9ySSZJHgbg==}
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.21.2':
+    resolution: {integrity: sha512-gK+vPUcPQITkGwBKpZGrcDHSlU6eDGl7AQacxS2CEKAZIBHWkOVFeJwLZ4tYnA1acJqRM5lt7yYwPCVqGHIJ7A==}
     cpu: [arm]
     os: [linux]
 
@@ -1479,8 +1482,8 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@oxc-resolver/binding-linux-arm-musleabihf@11.24.2':
-    resolution: {integrity: sha512-bnHAak3ujYfH5pKk4NieFNbvYvernfoQDgwLddbZ3OtMYrem87/qjlA+u+aKG0oZcqSLGCful/6/CEA+aeAgaA==}
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.21.2':
+    resolution: {integrity: sha512-L/Rgas7SrOKy/z7IH+HxSFRqVO4PuLDKLEGKvnhoCBBq3UJ0YzGBou3qMzaAGgkJwsIvX2pBF+7ojzfUhLiZxQ==}
     cpu: [arm]
     os: [linux]
 
@@ -1490,8 +1493,8 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@oxc-resolver/binding-linux-arm64-gnu@11.24.2':
-    resolution: {integrity: sha512-vDT3KHgzYp47gmtNOqL2VNhCyl5Zv643eyxm//A68J8DeUGXrvD1pZFiaT4jSfe+RInfnn1R2yVHye4enx6RnA==}
+  '@oxc-resolver/binding-linux-arm64-gnu@11.21.2':
+    resolution: {integrity: sha512-CUEYvlX1Fk7E9kUMzuswru1J9HLxMwnpDeQGjQuI4ZH+iNCoa2X9T+pvyzrbsgl7WnIeTFTlNlHsRfVdf5g9/g==}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
@@ -1502,8 +1505,8 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@oxc-resolver/binding-linux-arm64-musl@11.24.2':
-    resolution: {integrity: sha512-+kMlQvbzfyEYtu5FcjE4p+ttBLpKW4d/AsAsuE69BxV6V4twZJeIQZFfD8gh/wqglY0MkPSezWXQH0jBV13MUw==}
+  '@oxc-resolver/binding-linux-arm64-musl@11.21.2':
+    resolution: {integrity: sha512-ViN1ZibQyxwC67GpoP33oo+S9UyUnkog13vzQb9+v9bCNvrVzJuk0MRdacjtv/9xfRMVF/eqHFyl8YOeykI10Q==}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
@@ -1514,8 +1517,8 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@oxc-resolver/binding-linux-ppc64-gnu@11.24.2':
-    resolution: {integrity: sha512-shjfMhmZ3gq9fv/w7bi3PnZlgOPG+2QAOFf0BJF0EgBSIGZ6PMLN2zbGEblTUYB/NKVDRyYhE2ff3dJ1QqNPkA==}
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.21.2':
+    resolution: {integrity: sha512-CU1sCqWnhGqYD5I1HedHk5pujrn7ssDkNB/AEQd/pd3D/EojVSgJUlpbafwIbyhia3PgIfkvdFpRPWSALzVumA==}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
@@ -1526,8 +1529,8 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@oxc-resolver/binding-linux-riscv64-gnu@11.24.2':
-    resolution: {integrity: sha512-zGelwFR5oRo+b69k8Lrzun86DyUHzfKN6cnjbR9l7Z7NIRznOE/2ZvPa1IUKqAL2PzAXOdwkfVqNvO1H2RlpAw==}
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.21.2':
+    resolution: {integrity: sha512-jWVyZtIHca4Gb96x7dag+y69vlei7ffjrsveLkmf2ZhqEAz6ZSBnY1GWvgZUaZlwZP62A3xD092BW97Q5VGc+g==}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
@@ -1538,8 +1541,8 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@oxc-resolver/binding-linux-riscv64-musl@11.24.2':
-    resolution: {integrity: sha512-qxZ1SWCXJY0eyhAlP6Lmo9F2Nrtx7EkYj9oCgL8apDPCwXwCEDA2U697bbT81JIc2IrVjxO4KX6WU2N+oN9Z4w==}
+  '@oxc-resolver/binding-linux-riscv64-musl@11.21.2':
+    resolution: {integrity: sha512-LF29obFqNgBUgDX7rmUK7M4D0JQG5LxhYzn3xXmECcHU9aQAdWG7NiY052qybtesEdwHQXKNTWYQ7mTsybNvWg==}
     cpu: [riscv64]
     os: [linux]
     libc: [musl]
@@ -1550,8 +1553,8 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@oxc-resolver/binding-linux-s390x-gnu@11.24.2':
-    resolution: {integrity: sha512-sGCecF3cx2DFlH4t/z7ApnOnXqN48p5p5mlHDEnHTAukQa2P+qMVE4CwyWE9W+q/m3QJ7kKfGrIjax31f44oFQ==}
+  '@oxc-resolver/binding-linux-s390x-gnu@11.21.2':
+    resolution: {integrity: sha512-+NYcm+cCHBbtdQQ3A4phQTSuVRYnNHz7wrl9XRAPEovcdoqi0mb1K5ZOl+jN54ZD+q1zz3V0vltbFJmzecJKmw==}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
@@ -1562,8 +1565,8 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@oxc-resolver/binding-linux-x64-gnu@11.24.2':
-    resolution: {integrity: sha512-k/VlMMcSzMlahb3/fENM4rTlsJ0s3fFROA0KXPBmKggqmTSaE383sl8F3KCOXPLmVsYfW6hCitMhXCEtNeZxxg==}
+  '@oxc-resolver/binding-linux-x64-gnu@11.21.2':
+    resolution: {integrity: sha512-UQqZDdG2r2HhAOsZEgufkIWHPQ886IUyuJQkoZByvzhW8j51R4UNzGBJFkTiTnLhQnggwJRdJgFWK4uY6ZVIMw==}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
@@ -1574,8 +1577,8 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@oxc-resolver/binding-linux-x64-musl@11.24.2':
-    resolution: {integrity: sha512-8hbnZyNi97b/8wapYaIF9+t9GmZKBW2vunaOc3h9HGJptH7b7XpvZqOTBSm/MpTjr7H497BlgOaSfLUdhmy2bw==}
+  '@oxc-resolver/binding-linux-x64-musl@11.21.2':
+    resolution: {integrity: sha512-3Q9PMRjalWkT6NZ4jfujuqTCFwoWErg3y3BnOgb544B8IMw4PktiwWOigMfOHNRLMghZeJ7hpfpZf4CP7rV7Og==}
     cpu: [x64]
     os: [linux]
     libc: [musl]
@@ -1585,8 +1588,8 @@ packages:
     cpu: [arm64]
     os: [openharmony]
 
-  '@oxc-resolver/binding-openharmony-arm64@11.24.2':
-    resolution: {integrity: sha512-MvyGik3a6pVgZ0t/kWlbmFxFLmXQJwgLsY2eYFHLpy0wGwRbfzeIGgDwQ3kXqE30z+kSXennRkCrT7TUvkptNg==}
+  '@oxc-resolver/binding-openharmony-arm64@11.21.2':
+    resolution: {integrity: sha512-Eljeq3ndtyKhM+Es8LITi4Zl2htzuRZcrPMF3kMCsrILztvU6AjZ3FuEhHHKobPUB9rMpzLpJP5bDqXI7r+iog==}
     cpu: [arm64]
     os: [openharmony]
 
@@ -1595,8 +1598,8 @@ packages:
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
-  '@oxc-resolver/binding-wasm32-wasi@11.24.2':
-    resolution: {integrity: sha512-vHcssMPwO08RTvj/c0iOBz90attxyG3wQJ0dTcyEQK43LRpcdLWZlV5feBhv6Isn6ahbQIzHbCgfa81+RiML0Q==}
+  '@oxc-resolver/binding-wasm32-wasi@11.21.2':
+    resolution: {integrity: sha512-HGDbNsIywqc4LxU38+CTJNnB/6BF7rheWOJ259b4eE0aEnelYblC8x+1tEd63bp31fYne63RQz9Jb4yVnC7Yig==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
@@ -1605,8 +1608,8 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@oxc-resolver/binding-win32-arm64-msvc@11.24.2':
-    resolution: {integrity: sha512-uokJqro2iBqkFvJdKQLP7d8/BUmFwESQFVmIJUQKj1Xn1a/LysJoe1vmeECLF5b3jsV8CAL5sEMJXX6SdK9Nhg==}
+  '@oxc-resolver/binding-win32-arm64-msvc@11.21.2':
+    resolution: {integrity: sha512-iWx25CBEgH49iE9q5coEGI/jb1jl5kkCY9z6U5Og67xCkQ/WFMDc2J5U78+AE91SUxM2NqSLhJC8/PLfWnImww==}
     cpu: [arm64]
     os: [win32]
 
@@ -1620,129 +1623,129 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@oxc-resolver/binding-win32-x64-msvc@11.24.2':
-    resolution: {integrity: sha512-UqGPmo56KDfLlfXFAFIrNflHT8tFxWGEivWg3Zeyp4Uy2NlKN1FGPr6/BxcLGG3+kZ6Wp14g5Uj+n71boqZfiw==}
+  '@oxc-resolver/binding-win32-x64-msvc@11.21.2':
+    resolution: {integrity: sha512-VPoCAhKvCQTlG7vxqaBXcmuvbh77BfnGXj8g0pbvVXpm1F/R8rDVwqIWcEbMzrI1JvJlm8v7T9uMVQb6UctMRg==}
     cpu: [x64]
     os: [win32]
 
-  '@oxfmt/binding-android-arm-eabi@0.61.0':
-    resolution: {integrity: sha512-BaS+1OVvg9sr+Xav0+KdWedQRcAzrdoEcwMZeqoc2F6ieC1s/t5eM35YQoRPQ7vAqkZ+p3tbQb1r9I9mrV5oGA==}
+  '@oxfmt/binding-android-arm-eabi@0.66.0':
+    resolution: {integrity: sha512-2Me9eoptv6ERdEuI2P8AOlYdHHraXebJaM6SC0kc2Dfb+mLrep2db+fedBPKaYn673h/vBgvP4tkOdAbaudX6w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [android]
 
-  '@oxfmt/binding-android-arm64@0.61.0':
-    resolution: {integrity: sha512-of8atAV0M1egGcVOMbgZCvc10sFOP3ayQBNQV5h5G3fNq8gACdEswfFk9bzGrdbM23rtg0Coxi7np7oPLcueNw==}
+  '@oxfmt/binding-android-arm64@0.66.0':
+    resolution: {integrity: sha512-u7O+bSSF0HGsDKkQQxBqvLGVepu93RA+JKu+ONqvfh4sCnCEbj31wZj4iG5gk3XfRwrmYj0/8catkO2LcblQKQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@oxfmt/binding-darwin-arm64@0.61.0':
-    resolution: {integrity: sha512-7l8+5ov4BGwtAcmpzvEik/TG3bciwyw/S3e6j5GKH7pcQqcgCVxD3AuJeP6upto+SOTBKQ4wrrdbMt0gq8fHSQ==}
+  '@oxfmt/binding-darwin-arm64@0.66.0':
+    resolution: {integrity: sha512-/ikyMIVjX/sdo7KtjxoEsSUosfPzveVhT9RWMx9yGqFDKFJ89JAEKuEeLBmurDjrkb4w8tOnAdSO3SBaplY3bw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxfmt/binding-darwin-x64@0.61.0':
-    resolution: {integrity: sha512-Fnz4dDDXBb7udk+DmwelNjxbD6yptyxwCqwCH2ebo4RVLxVsRfFsn/AHJC49KIltPrVokamGv4SSOsiV50DTxQ==}
+  '@oxfmt/binding-darwin-x64@0.66.0':
+    resolution: {integrity: sha512-q5xUsKeFqawa9NXa6ZGXWimFV19m8MogKPdTaSVDAAk2EQKBmBZRDeluwcl1p8ty/OFc9s9888OKEh3xfPVH0g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@oxfmt/binding-freebsd-x64@0.61.0':
-    resolution: {integrity: sha512-mddOebKNCP+AucmzfNsk3jgbr681qAUvgMqi865GW5gWLJ/AnzXbvjQRrny0e++NAN8aphav/aRSrfFxNsNjpA==}
+  '@oxfmt/binding-freebsd-x64@0.66.0':
+    resolution: {integrity: sha512-CR+x4VzMY0pRXLK/xFQ/RzsSFkP5t2Z2mef0QY6OP/rTRcMUoMLCOM62/3Fp/t0K+UDoBKxvMyeb6D0zPMjleA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@oxfmt/binding-linux-arm-gnueabihf@0.61.0':
-    resolution: {integrity: sha512-svx59iYL+DbaZGZUIoice4W0CjRXGExnbz7Re+awIb60rVxBS2KrU7Hnlx+nZYanLGLpjneUEgo/VFEKkSZAyQ==}
+  '@oxfmt/binding-linux-arm-gnueabihf@0.66.0':
+    resolution: {integrity: sha512-ZEYmO/LbH9tTQCADILHGZE4GeOXOAj2VzedHkASNwjmwlwtutJCLpCJbIs37wRGTFgWRoEcD72jpMX+IBJUGjQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxfmt/binding-linux-arm-musleabihf@0.61.0':
-    resolution: {integrity: sha512-BYK9MPJPCf6d+fLKMTruThmEyCtHzQ1zLcsrTlUVkmnoXIaHAbfpeLYQwX1tkjs7W11dyzoi6HFvKcdnvX1zNg==}
+  '@oxfmt/binding-linux-arm-musleabihf@0.66.0':
+    resolution: {integrity: sha512-hNtR9/oU0CeTkq7JnRkmBQwqe17v2ZaAMLC4VcN7IIOWeRyWDk0knSPWS9iiLmtbZ2RRBBtsG01jQgkZmKCJeQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxfmt/binding-linux-arm64-gnu@0.61.0':
-    resolution: {integrity: sha512-QUaCNLq2/EC6G5ljOuFanl9Lgw6ZWp4co7rs4+KOMUzbGfA4Lq58FHRjjF9sVIG+93XSbo343MxFATrOU1qctA==}
+  '@oxfmt/binding-linux-arm64-gnu@0.66.0':
+    resolution: {integrity: sha512-uwOVQ8i6I1LT/+eDzfsgrrcZp8Fn6NPVUPn8fF5gdFGekFf0PddF+LEuwsD0/pbNUcKZhDj2rQ5UpITh9gF4iQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@oxfmt/binding-linux-arm64-musl@0.61.0':
-    resolution: {integrity: sha512-S6uvJ6MXnRXl+zTs0CARNDvkE+cymj0EVWEKKsyKnlLlqTyQJBjw5s4D2pSIOZc+S46cy4STefzcr/sm0VzVPA==}
+  '@oxfmt/binding-linux-arm64-musl@0.66.0':
+    resolution: {integrity: sha512-tTkF2Dmx4nGAjmBlZb+UtTGqR/EK4ZrW9qBfzte07a9XWqzoGGKzpFFlyNDhQe+Uwql94+ReCTeNbhOXscw1Dg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@oxfmt/binding-linux-ppc64-gnu@0.61.0':
-    resolution: {integrity: sha512-6VDlRcytvZG6UlSIdAFKDLbppo9tvPxrWzle6vHldYFMeuDPQEfMKrkwezp7FaBq1wik9ra554ZZeRPsyIkFpg==}
+  '@oxfmt/binding-linux-ppc64-gnu@0.66.0':
+    resolution: {integrity: sha512-F3cKHUav4yXOHn6GFnwpBhSYsJOYKKf9eqO/9jlEuqPxNw9zb98E9ZFct79gcg8pibUGkbveEu9WDlmXJpDzKw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@oxfmt/binding-linux-riscv64-gnu@0.61.0':
-    resolution: {integrity: sha512-KkBTYbzExpbmn15XjKPLu2fRV2PVlq+KWt+brad5rwIa03vdYoaDRWiS7raHII/dCTR6Ro4UpYUCH4t6lif4WQ==}
+  '@oxfmt/binding-linux-riscv64-gnu@0.66.0':
+    resolution: {integrity: sha512-K5fDaNZfDyQMYA/3qL21bqyN0X9T15LLwwbFPt2aHc94+ZG7bh0vZEsy2y7NlRnjjHFSwN+Hzg6ldJtbOriH4Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@oxfmt/binding-linux-riscv64-musl@0.61.0':
-    resolution: {integrity: sha512-69tzIq7sJLVB9dxYYtvMzcSSsnZHSO+U2U19O2RqDqgj6+Q4O7HjSXdaszbcgqzhsUwzSH7z5kWvk8nmf6BHTg==}
+  '@oxfmt/binding-linux-riscv64-musl@0.66.0':
+    resolution: {integrity: sha512-44Yc+I+qOmTElRcEhm5hUKIUJEQIOugymz4ua4tB0Wox7tGAfIbjzmXz/HDAtw1Ij6gmBwZlzh4hc9679RhWeA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
     libc: [musl]
 
-  '@oxfmt/binding-linux-s390x-gnu@0.61.0':
-    resolution: {integrity: sha512-Oqi/N0OvtOVXsPKAOOhKgGH3msRYF8BLJaNBbWiupRiKoKVyc8JRKPCfarkQJC+RgP9U8raUKLe+bNwd0HUMiA==}
+  '@oxfmt/binding-linux-s390x-gnu@0.66.0':
+    resolution: {integrity: sha512-1e29Eg9hEj2kRBB19M0seIehPbbXHCk35GvImjDvb79rjjYjXCRmtbUNHJcgoktZAMIzXrTbxDBKmTc1V4bg3A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@oxfmt/binding-linux-x64-gnu@0.61.0':
-    resolution: {integrity: sha512-3TKwv/ed4uwJSemAA8P9XcoqETpjQI4waquF9UilhA9Mn/dhr1PdUEXWlL74mtc6ZNfmKPA9+NEJm01nRF8CVA==}
+  '@oxfmt/binding-linux-x64-gnu@0.66.0':
+    resolution: {integrity: sha512-vODY1UQo10gngn0+D4xHKU84F1Twm1LqrzV4SqPXvmQKSd87paehvZ6jqA5wKs6XQrlWul9clYMDVHcoW9CPMA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@oxfmt/binding-linux-x64-musl@0.61.0':
-    resolution: {integrity: sha512-uFso4u4nLkVSlMCpgjyvWV60Gt7GvDQHnk1mmRxHIkZTMB0ljpUKwCD9FYGgN9H97x2wYl0UwEjgRZaPIuhEhw==}
+  '@oxfmt/binding-linux-x64-musl@0.66.0':
+    resolution: {integrity: sha512-YDzXx2JsT4+HL4MdkVrYjO55NS5lUKNm8rLC4ZPou8+seu0v0jhecSh+ufoO6+xEa8gccEezMlI2WHJi4ApUgw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@oxfmt/binding-openharmony-arm64@0.61.0':
-    resolution: {integrity: sha512-keGLkzeOvkMpNmPp4hffXWpfoSsY6e1K8++KXD4mSSfxdvM8q9QUDsYY689TB1k6Co832DZn1MnaaVx6cIBMWQ==}
+  '@oxfmt/binding-openharmony-arm64@0.66.0':
+    resolution: {integrity: sha512-mJjUYd8lj0+j4JkYyEM+5qKBf1Rnrpgjn/SVYKJhicVDqLz566ooa7Fs8zflPqt+dnZDV7X054rVIQX6ZcQNlQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@oxfmt/binding-win32-arm64-msvc@0.61.0':
-    resolution: {integrity: sha512-VzsAISkFxmNhJ5LBDEL9VuH6tJsVJMtqYit2LyIUf/HLnsCe4Pg9SMOjjVQzGWt0bnpyfJ94CrqTqcpNZzK+ug==}
+  '@oxfmt/binding-win32-arm64-msvc@0.66.0':
+    resolution: {integrity: sha512-soV+0vESv7e5ntCHWC61x4gg8OSak6IHHnWsZmHrJFlvMj2AK+kmldErCNkVkrvc1Ts2/++rJXn+IuAb2WMXhw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@oxfmt/binding-win32-ia32-msvc@0.61.0':
-    resolution: {integrity: sha512-xv4t7yzwJoYaLB6Zv28B3W+j7brEjsyv50rLTAQgmxJzddce9fAMCxed8dSAkbWES0zz2J29nYK5FaTuD2YBHg==}
+  '@oxfmt/binding-win32-ia32-msvc@0.66.0':
+    resolution: {integrity: sha512-YCPi23uRIEYuIKTZohAkKbPFpujQ5QBuUM5iDv+UqbCmTPAkaFsxjsSuB8xlBpRT0G7eP/4HMF+cPDSqHtOD9A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ia32]
     os: [win32]
 
-  '@oxfmt/binding-win32-x64-msvc@0.61.0':
-    resolution: {integrity: sha512-6EZXFkqOwxdDYjIn3TSNnPk3ST5E5GiYd4FiM6UF/mCL/LZSfr6D6UygTfW3R1PCQP2quCKpCEGRlij8E3VYbg==}
+  '@oxfmt/binding-win32-x64-msvc@0.66.0':
+    resolution: {integrity: sha512-bwTQcv/JVRPkOqQtMF0X7vpvpncDQiBcXHxZ9S2hR12Hlo8bvBdUR5x5XnxzDZ3kM0qoZw1rv7KaD66Ly+pFWA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
@@ -1777,124 +1780,124 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@oxlint/binding-android-arm-eabi@1.76.0':
-    resolution: {integrity: sha512-ZHIE5Zt9AsPDcY4nOlofXt0YfneEeo+QrKMPcPzLf2Z6Q8VtV2W73d7SFJ920WUwyik783u/doKCs3KXdwG+7w==}
+  '@oxlint/binding-android-arm-eabi@1.81.0':
+    resolution: {integrity: sha512-IcCRsXiedJoJopY6mpZUBEeVFsUrutmrG7dZ87zMuKJlhg70Ora9bBl1WcCxZQtyI10YpnVdEso5oCg7YcfSHw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [android]
 
-  '@oxlint/binding-android-arm64@1.76.0':
-    resolution: {integrity: sha512-shm/ngQilHK6bs+ElJWa4oHfNj5vL1Gl/iVEJldTQjpr0/67oSgr0KUpbmcnLig5Fo0v/l6j2567A7TOL89ONA==}
+  '@oxlint/binding-android-arm64@1.81.0':
+    resolution: {integrity: sha512-GRrIPyTGVhx3L3h+0T5xT2A0jFAcdPv4+IfuXpGDLIdl6XeYhgg/zw72A5ILZoUgRqZuM8F1y+V/gfDriXSxzQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@oxlint/binding-darwin-arm64@1.76.0':
-    resolution: {integrity: sha512-rvJmrAPKSQ9aWJ6wIS6CK2tJjwzfW0ApQH9qokq6sfDvmHwoyIHxHFMq7z7i7GiV6fdE6s8qvBqWKPTu8RmT6Q==}
+  '@oxlint/binding-darwin-arm64@1.81.0':
+    resolution: {integrity: sha512-qNQ9tXRgLuKbqSV1S2h9h4KPHjbovO7RRR2/enUOtHzTkFZ7B9X5zqqHJua8dRyc7dBy7Aoyq5pqTSLFVcAzGQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxlint/binding-darwin-x64@1.76.0':
-    resolution: {integrity: sha512-U/zYdb7VYKGY6pA9Vd2rYl9O/HlCylcOlb5PGPvVLtg+oLGsk6H3XGKEMHKyqD3nmmtmlmwb/8SwU2vfSAtvMw==}
+  '@oxlint/binding-darwin-x64@1.81.0':
+    resolution: {integrity: sha512-q0QTm32jWga2Gv4j7IaVZN0jYMi9UV73sWVgFtDA4iIfqwMCLLZ3ve+9KwfYtsaKZSgQhmPaogeZWqDZpcY1Pw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@oxlint/binding-freebsd-x64@1.76.0':
-    resolution: {integrity: sha512-WvKG9CAriuo0XNiFzpXjDngUZcRGFNpaK2kLyMUsnJlShxkT96u+BpJQ3KqdQwGOrvI14L6V8bAwXwAYNNY6Jg==}
+  '@oxlint/binding-freebsd-x64@1.81.0':
+    resolution: {integrity: sha512-/+8wVWDXEC7wHVAhOc59Fw/SkMc1arLkFD8iQCaSsmzenK1X4doFqquL9H1wrtGUzaiycVqkf/sSpcILK6W1UA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@oxlint/binding-linux-arm-gnueabihf@1.76.0':
-    resolution: {integrity: sha512-qJ5+RH99TqFRq3UCDxkW0zJJu9c+OAHFY72vGlxZLEpuO+MpKo3POgqb8sYipL9KYm8XY6ofb0HsOuvY6hQNqQ==}
+  '@oxlint/binding-linux-arm-gnueabihf@1.81.0':
+    resolution: {integrity: sha512-4xt422FEgioRq9hAL4Tq7fujGUWnc8z1BJ+Oi8RN8vB8axaP+sdK6a2xdlcQCCYnJg9QMuMFS0AucuIFx/EacA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxlint/binding-linux-arm-musleabihf@1.76.0':
-    resolution: {integrity: sha512-PvPCVptkgVARsucgIqFQQcSmJ6xc6GtnVB5bRBekRahTc9eObMtjHfMjy5M+C2tHt5UCMttWM9RuSk/H9NqYeg==}
+  '@oxlint/binding-linux-arm-musleabihf@1.81.0':
+    resolution: {integrity: sha512-u3vna8KdGplH4DRCW9K54D68fcMo7IxVrkCJWwXnIhwtBdnDnYrmzOUA/XjmBlPpcLsgw9Z5BNdY4za9+Dj+MQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxlint/binding-linux-arm64-gnu@1.76.0':
-    resolution: {integrity: sha512-3KeFDx8Bu4HPAXbuHZOr/oHvN+QT+JQhMw/NYPz7Z071xLSsG27Jfh9PIQVEY7hk1I+jr43ExqRIeJ6VKk2yLw==}
+  '@oxlint/binding-linux-arm64-gnu@1.81.0':
+    resolution: {integrity: sha512-3j9k+gsYsE7nv71GWotXsqsa2l9/aJenD7dVHNt/CBvsb0SgRjSMnHFeP59IXUAl1wvVFhqGl2wJNMwWU3UBlA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@oxlint/binding-linux-arm64-musl@1.76.0':
-    resolution: {integrity: sha512-oPFkkKTgl0K/EIg9fQ8oA3IGcI05/Mq1en04iFa41mmNPT+6KEiByVazTOZZJiHMBBrbsns1YJ2e1Scqwzesjw==}
+  '@oxlint/binding-linux-arm64-musl@1.81.0':
+    resolution: {integrity: sha512-k5iAp3dNxW0/uDCBY+WSm8jKB2szu7SkEQZdgRRpDXvuDd69vvDcqhB3A/pWCfCwXyenjNjFn9Td1fVoyAc+Yg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@oxlint/binding-linux-ppc64-gnu@1.76.0':
-    resolution: {integrity: sha512-gN7yZ0eqflA5Fhf1wvHxGUltIV3FsvmB1zhNMDEK9vSHhc7E6qg9CuPeBgPZab66Tjzq6w6kHAtNEvnTHf4cyw==}
+  '@oxlint/binding-linux-ppc64-gnu@1.81.0':
+    resolution: {integrity: sha512-TFqLja3uYmVSte6nof9GWrex9Z8WgdZrNiLC6Te5rXGDqXB2y4j/26iFhwosXiAFqDhE9JJVuuCkDKLwptTn1g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@oxlint/binding-linux-riscv64-gnu@1.76.0':
-    resolution: {integrity: sha512-S/HqMbn22mQrjtErUxEoS/a55u8kIeXvreIxiJu5G7Le3UecEd6SQZxrDIpuhtgaFnsY/nVra3ytP+pRljDilA==}
+  '@oxlint/binding-linux-riscv64-gnu@1.81.0':
+    resolution: {integrity: sha512-UEcySvGS0NOVo7h7n7CYyJL9+6gFAh7Zc/ToDXVScFvzHSTIxtzkMVU30rmQ6+nQ1LF+UdiRDdJajpDu+OylLg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@oxlint/binding-linux-riscv64-musl@1.76.0':
-    resolution: {integrity: sha512-ZIga3097VJZolGZk6SrIAUokIGfRkxRlhiHDUznZptGBfwrhD7pNfD1rzEzsCwvk/1DX0A1bLz+liuNh5QKIVQ==}
+  '@oxlint/binding-linux-riscv64-musl@1.81.0':
+    resolution: {integrity: sha512-H+diDbhD00+wI1IRP8Kz88x/lat+DgtoBJzoTthS16xkTJGNaEkfb8gzmd1rzc/2uDQQMl7GNl+JFUacVeWxIA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
     libc: [musl]
 
-  '@oxlint/binding-linux-s390x-gnu@1.76.0':
-    resolution: {integrity: sha512-ZGiiA7pFzMJSyMWYZTVlPgbTsx+Vl8ihLGMIujPwaslUF7kIPPWAbVmAlTc+9lWDV+DCiB8Ikixu+lSHeOIIWQ==}
+  '@oxlint/binding-linux-s390x-gnu@1.81.0':
+    resolution: {integrity: sha512-8znJ/5TekjOKg1j1Acho4PJMdiAHLtlcXuWEiipOhAMV6rQcXdmDdXCbheyDczN6TjBwiNfjcP81k4AthrKRzw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@oxlint/binding-linux-x64-gnu@1.76.0':
-    resolution: {integrity: sha512-JLiy5WuvEBFTT6ErIFV35SLzi0R7Iri6MKU6dZbTxfIx8pndbbPs3Mj780nMipBFcPkti+okAPOJ9POKkHFEgg==}
+  '@oxlint/binding-linux-x64-gnu@1.81.0':
+    resolution: {integrity: sha512-Q2Wj70yFsvn5QjlmifFzbj4H+kJy53bwqc41o1fzoM7MpLV1NIbhg/LpWXRfC6KOkSAdUx1Wd8VJsdPmhp/HRA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@oxlint/binding-linux-x64-musl@1.76.0':
-    resolution: {integrity: sha512-z7lgKQtbo/I1NIe8G5NHLesxJDv0tRSUWTpXKb9Pm3E9nKFKfO4IOSDtFroKgXtOYb0jQbcdH+0wzTyMXVes+A==}
+  '@oxlint/binding-linux-x64-musl@1.81.0':
+    resolution: {integrity: sha512-cPInHp/ddEe5qkyK2IiyQ8Q3Mp2oLLEhhsGgTK2oZx4L6+llGam1H1yBvJZ7qHfOXj8N3hxBS8sj4tO+gtFlIg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@oxlint/binding-openharmony-arm64@1.76.0':
-    resolution: {integrity: sha512-JOjKymIpb9QcYfEhZsN6h4V9Ivd474W38cNIBRv6bg2TbIvogbMTH0Mg6YWW9TiRDqfcX+/Hyfsbo5vcSE5guQ==}
+  '@oxlint/binding-openharmony-arm64@1.81.0':
+    resolution: {integrity: sha512-0CQxSX4ajqm07AHBf5U33qQzXKdd7wtq/oTL/7vpY6RNNuxrRi8W4bqUV1Jyu/vj+9KmxQyDhxfeVX1nQL6kfg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@oxlint/binding-win32-arm64-msvc@1.76.0':
-    resolution: {integrity: sha512-pqDWZiwcmByWUEm1NFUBNiT6aentCcaoMWJv0HbXEmuYermJ4sg8ppVrshubYP2MZ6SHccJJcpr6x469PuDFIw==}
+  '@oxlint/binding-win32-arm64-msvc@1.81.0':
+    resolution: {integrity: sha512-l0hbeISm9673hVrrQU8j/p2M7YH9Ouoj7p7E/QM55NTrKVLP+P3PF8hLu+OY+x0VtGRW+ggiQKZqmdYps9H+TA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@oxlint/binding-win32-ia32-msvc@1.76.0':
-    resolution: {integrity: sha512-Ba0O659kgMv6pwO3z9PdO+K3aMxQRaw9HnG+e6AtOfgwcKFvYilciQYBoUBmxfQvOCKZe1SwjMkuB542NkuDMQ==}
+  '@oxlint/binding-win32-ia32-msvc@1.81.0':
+    resolution: {integrity: sha512-ksqPP5jbFXcYreEQ7zdJh06rJQBymCTyGRCdaXjfcf2aG4f8KxUWY5wcgYHmaTK+FJ4bPG5sUAdOX+6trnH1JA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ia32]
     os: [win32]
 
-  '@oxlint/binding-win32-x64-msvc@1.76.0':
-    resolution: {integrity: sha512-5qcirPHO8nKfkoowEVWtpAoVTcYDy6g0UT0NGic450Qv8J2NrOqg4uQ8QppRP4MDTC7Xx47lbZnmadTH03CGGA==}
+  '@oxlint/binding-win32-x64-msvc@1.81.0':
+    resolution: {integrity: sha512-IZuUCwGw9emG5JtCp+fYGB+Z4OWEoeEcM8R5BA1pYw63/ieYFVdcU2ylxTpHbVHSenZnsYE+ZZ20uHAJszQ4cA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
@@ -1985,8 +1988,8 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
-  '@playwright/test@1.62.0':
-    resolution: {integrity: sha512-9zOJ6ZQRAena31MpOH9VSzIz8Ou3YJ/wtY/eQm5T2uhfhG7/U3COrMS8xOtUrZrp9OgdmzEnIYODye3nY1VqzA==}
+  '@playwright/test@1.62.1':
+    resolution: {integrity: sha512-DTcUc8qii+cpHvtOwggMtBRMjKZHXYWdw8syRYu2vtzuq4Wxphqq4NfCs5Zt44L6mA8rfDfj+PHnxFc/FeK6mQ==}
     engines: {node: '>=20'}
     hasBin: true
 
@@ -2411,97 +2414,98 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  '@rolldown/binding-android-arm64@1.1.5':
-    resolution: {integrity: sha512-lZg8fqIv2v7FF237bwMgzGZEJvGL79/s5knJ/i6FmsGF4XXlzccZ4jb+TrFIxtSSxFtIpdsgrPZeMk1I9AFcyQ==}
+  '@rolldown/binding-android-arm-eabi@1.2.7':
+    resolution: {integrity: sha512-EypzgnYCwyVY4NDHKzGmNJT5b+XaQEBniHxsMdeIQLB/tcCzZnhqrzHpZFbX9iaxx+5RiB8caATBtfvZP7zVxQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@rolldown/binding-android-arm64@1.2.7':
+    resolution: {integrity: sha512-l17HE9EweWaqJZhuUuNBN/FzM62xw+DECVnJyvMsxn8vJFAGLy5QfLDoYAcronkAN8VxKZHezDpulHDPx95vFw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@rolldown/binding-darwin-arm64@1.1.5':
-    resolution: {integrity: sha512-51Bnx9pNiMRKSUNtBfySkNJ9vMU9Hh3I1ozDd6gyPPYzaXCfnptUcEZxXGYFn+ul2dtcMUiqGR1Yai2K10uoTw==}
+  '@rolldown/binding-darwin-arm64@1.2.7':
+    resolution: {integrity: sha512-8ED8ELFvHXc6OCETIn4gXObPiaR6bckM/ipXtbzlPVDRMBfEGjCKgO90F9YtfdpDatVx/ZQw7aZ1vUMf/+T3Mw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@rolldown/binding-darwin-x64@1.1.5':
-    resolution: {integrity: sha512-Tm+gbfC0aHu1tBA/JvKQh32S0K6YgCHkiAF4/W6xX0K0RmNuc94VeK419dJoE65R5aRxmo+noZQSWrAMF6yb6g==}
+  '@rolldown/binding-darwin-x64@1.2.7':
+    resolution: {integrity: sha512-/WPripjtiAIZ2tWY7ddijORT0Ujg87wxWW/qcoFVCKAWVDPhtY0xr7Dj0M3GyNGz60jGwTElhro/mkF9dT7dDQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@rolldown/binding-freebsd-x64@1.1.5':
-    resolution: {integrity: sha512-JMzDKCCXq93YccG5gz3hvOs1oXRKAf0XYpfOS88e+wZrC8Iugj6j68867vrYZkvpDDpKn/KoKORThmchMpF6TA==}
+  '@rolldown/binding-freebsd-x64@1.2.7':
+    resolution: {integrity: sha512-14DI4NcqpvbICxSnGLx3PmtDaWqRP/KGSGb6C+JLLVPeZRl6dKdHba3pGsqT3vpdTqhEYIPG0MMQ8c0xYqoJxA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.1.5':
-    resolution: {integrity: sha512-uML21j2K5TfPGutKxub+M+nLjZIrWjXQ5Grx4lCe/nimTj9B4L63zHpjXLl4y0L3mcm2htEQIb06oCG/szerNw==}
+  '@rolldown/binding-linux-arm-gnueabihf@1.2.7':
+    resolution: {integrity: sha512-bxrWIRvHWQvbJwi+VIie/kDJmQxcNE6xxWwZdqF/ExVAigtHkv54WTLQPb+QsZdnFy18fg7JPfWGL0RH6vwIlQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@rolldown/binding-linux-arm64-gnu@1.1.5':
-    resolution: {integrity: sha512-navSiuTMogvnQoZoM/v+l3ZWo50/NTwSHSzheABx/RCnmUPaKwq9qSo4Br2OYRs21+Fz8uFqITZM3H4opOB0/Q==}
+  '@rolldown/binding-linux-arm64-gnu@1.2.7':
+    resolution: {integrity: sha512-toOY2BChBZyuxU7OYX6Tn389di4IzAqPTycVcci0O7FSfBqzRB3RZn+K5Is6ANf4tmgRd/K1yZTsNTXbkXsnLg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-arm64-musl@1.1.5':
-    resolution: {integrity: sha512-lAryqH7IteztmCXQXk0etKj4wBQ7Gx5S6LjKhsgp9zb8I5bsuvU/2llH1hDQcjsFeqIsovMVN339/8pUDDBXxA==}
+  '@rolldown/binding-linux-arm64-musl@1.2.7':
+    resolution: {integrity: sha512-lAIXTH/aiLRLxsTgQvfhjo4K1ydWIp00+V0voOr9beb/9ZmkUFrSIb03dXNFRgMNvkE6oGsF10ioQ6UsI+vS5Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@rolldown/binding-linux-ppc64-gnu@1.1.5':
-    resolution: {integrity: sha512-fsK/sNBnxzBlL4O1JNrZakVQxPspqpED5dLtNsZS9oOKmtSpdNIzxH2kkol5HYTWJN47sE20ztMJPxfZ89qGOg==}
+  '@rolldown/binding-linux-ppc64-gnu@1.2.7':
+    resolution: {integrity: sha512-kdnwS28Pkenp/mZMRwjXXXwxQ7pIsm+bF919LUK93BOyhcLsrVKdP2p9fxpiPNPAbNuch8ypQt0pm2P2LYCAGg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-s390x-gnu@1.1.5':
-    resolution: {integrity: sha512-gLYb4BIadlfTOYT5gO503n8zQjXflgzpD0FcyKh0Mzx3rqCZKnHoJWV9xe1KXUJ5lx2JfcSHr/mhzS0PC/McAA==}
+  '@rolldown/binding-linux-s390x-gnu@1.2.7':
+    resolution: {integrity: sha512-516OdsyLdr5E65paF3yBF55t8mfm9+gmtCsK3xI7XKXIT7EfRlHhxL8K/NR6Hu8BWSgF5+1w74lTL0+nxcc8Qw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-x64-gnu@1.1.5':
-    resolution: {integrity: sha512-FjcpEKUyJygHgs1o50VYNvkt5+7Le/VEdYt0AkRpkL33MnyQfwr8l5mXwMmfmTbyMPr5vJLC+8/Gd9gXnwU1QQ==}
+  '@rolldown/binding-linux-x64-gnu@1.2.7':
+    resolution: {integrity: sha512-r8/z8n7GFaYRln3xmP1Cxy0HH/HLM0uBUPkEuSVEfKGDA89M0FsZRZJRSwe/tJjRx+fpH/gjorfhB8tmEbSFLA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-x64-musl@1.1.5':
-    resolution: {integrity: sha512-Me+PfPI2TMeOQk0gYWfLQZtTktrmzbr8cDboqX83XKc7UrgAi55gF+2dUkWdxd19n55Essp2yeca+O9N5rBxHg==}
+  '@rolldown/binding-linux-x64-musl@1.2.7':
+    resolution: {integrity: sha512-pAsE8iiDxUg1xBqdhrTfg45AVDVpirjz00sblEYClGNNcMnDb+e8beQgqIAw6LvauX/APvgxUnwrgun/YYGBhw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@rolldown/binding-openharmony-arm64@1.1.5':
-    resolution: {integrity: sha512-yc5WrLzXks6zCQfn9Oxr8pORKyl/pF+QjHmW/Qx3qu0oyrrNC+y2JLTU1E2rcWYAmzlnqngWXHQjy51VzW70Vw==}
+  '@rolldown/binding-openharmony-arm64@1.2.7':
+    resolution: {integrity: sha512-lTcIYmmnQQA8Or/2DatS6oSqcdLHvendjS+zLu+FwgToynWMRSmQdpM65fTANJgIS4mjbMOo5KT2lnT9SAb96w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rolldown/binding-wasm32-wasi@1.1.5':
-    resolution: {integrity: sha512-VbQGPX2b4r48TAMIM2cjgluIM1HYutm4pcTEJsle7iEP7sB1dFqtPLBVbdLAZCxy1txCcPxf4QFf4v8uvltPqA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [wasm32]
-
-  '@rolldown/binding-win32-arm64-msvc@1.1.5':
-    resolution: {integrity: sha512-gHv82k63z4qpV5+Q1y/12KrK0ltWBukVDI8nZcbT7Tt/ZlOIVwppazneq0F93oDxTo3IgAMEDIoQh3E2n6mVsw==}
+  '@rolldown/binding-win32-arm64-msvc@1.2.7':
+    resolution: {integrity: sha512-e3Gu3WxbNk/UqQhxqU7YIYO+9ZBvWNz3U+h/qRFosscMFzdRPbXYSaSWgSnklv2fz1TgzBTcti2z35c/7irsHw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@rolldown/binding-win32-x64-msvc@1.1.5':
-    resolution: {integrity: sha512-tTZuDBPw85tEN5PQi1pnEBzDy0Z49HtScLAbD5t6hyeU92A95pRWaSMw1GZZi/RwgSgUIl0xrSlXIT/9QzvYSA==}
+  '@rolldown/binding-win32-x64-msvc@1.2.7':
+    resolution: {integrity: sha512-W/jg5qoRSqjsEv0+dZi4e687mcHqmVuU0P4fK6qS/xjetW2Gmc1W8j//z5nAeNcC8Ttm0hV46IjcYeuVwYhuiw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
@@ -2799,22 +2803,22 @@ packages:
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
-  '@storybook/addon-docs@10.5.5':
-    resolution: {integrity: sha512-0YpKlimS4XE0kQ8Maa5coeefQxdyDrBHg1wOP3WTPuBe4FolFSCDveR0ge2+vuUBk+fZfn2+l+3Q2jmAWaRGDg==}
+  '@storybook/addon-docs@10.6.0':
+    resolution: {integrity: sha512-Fk3rUQWeGyCfL170OkmRp6Ruyv7MHPb/xrKa6YNk7FlGmlVLi5tKzh2T/0J13vWEy8wiu2MV3IBu8iRsaUR+Cw==}
     peerDependencies:
       '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      storybook: ^10.5.5
+      storybook: ^10.6.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@storybook/addon-vitest@10.5.5':
-    resolution: {integrity: sha512-Ymq9ErkSkYiIDuqpJ2+hE5GCQ5J6TCLOWhutqArvwaeAO+HAibM82XNExpJ1/kvPqk9y961GDPkv2W15I88JIw==}
+  '@storybook/addon-vitest@10.6.0':
+    resolution: {integrity: sha512-GY2SwSXLNgyMqjQ59J7YTkEQTHdEbBMggOvbbuhuPUBhWo97OGSDCmn1UW3nXDZvkoWyWhF9T9628m1uei7FbA==}
     peerDependencies:
       '@vitest/browser': ^3.0.0 || ^4.0.0
       '@vitest/browser-playwright': ^4.0.0
       '@vitest/runner': ^3.0.0 || ^4.0.0
-      storybook: ^10.5.5
+      storybook: ^10.6.0
       vitest: ^3.0.0 || ^4.0.0
     peerDependenciesMeta:
       '@vitest/browser':
@@ -2826,30 +2830,12 @@ packages:
       vitest:
         optional: true
 
-  '@storybook/builder-vite@10.5.5':
-    resolution: {integrity: sha512-dQoJ7gUl8y0z5rV9cE0mz6qTBNmN9R4GOLIZk98rJ8CwduNJOb9eGZXusDzzvnYcp8TnNkqDtyx4tXQSUDInPQ==}
+  '@storybook/builder-vite@10.6.0':
+    resolution: {integrity: sha512-7zt8tYB6dnSO8fbjUz91MHexGDpf9HrLlA3FAmlVb+2ZL3eWUs499L3I6BDUymcWu7oW5WCBJlB8ERj8ZLLzig==}
     peerDependencies:
-      storybook: ^10.5.5
+      storybook: ^10.6.0
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  '@storybook/csf-plugin@10.5.5':
-    resolution: {integrity: sha512-/euibhRFqklYCZqUseokojmfYcQpXshVY2QmA1qCuxMz9SzVFD3iSTw+aFLTxpsJGGdcZJk8fnm/rEthLzZ9jA==}
-    peerDependencies:
-      esbuild: ^0.28.0
-      rollup: '*'
-      storybook: ^10.5.5
-      vite: '*'
-      webpack: '*'
-    peerDependenciesMeta:
-      esbuild:
-        optional: true
-      rollup:
-        optional: true
-      vite:
-        optional: true
-      webpack:
-        optional: true
-
   '@storybook/global@5.0.0':
     resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
 
@@ -2858,40 +2844,40 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  '@storybook/react-dom-shim@10.5.5':
-    resolution: {integrity: sha512-PIk7N3LLrZIxfNxmkvmQN1d5UQ70XEedT8n0GhBiXnM6XL09xPGB8n8TZXeJBRYluKhDQcAyQeT0/OZmcDVQJg==}
+  '@storybook/react-dom-shim@10.6.0':
+    resolution: {integrity: sha512-ZE0l4xL6d00rKFeJhRDuh0t3r+/2ffhx47lIyaSWrTD5kuM3nDjKDxCIWwX4E3gLV+oNX8E1prXRMuEWJUJwJg==}
     peerDependencies:
       '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       '@types/react-dom': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      storybook: ^10.5.5
+      storybook: ^10.6.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@storybook/react-vite@10.5.5':
-    resolution: {integrity: sha512-Uy7VV72kVSkw6aDTAPQupXUeZX5LF6e4zqNvTZ+36qxsXAkaFgw7HPEm7L1tsaRfiV+s9anU7UvX47tfJpYGuQ==}
+  '@storybook/react-vite@10.6.0':
+    resolution: {integrity: sha512-nc1dqnmjGOcDJvPCkAn4Hmu1gi7dNHHoibNmlBp0d1adosejELZxuNjHBkPl/KxZjbzP3jljQHnHB/guxd8e2g==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      storybook: ^10.5.5
+      storybook: ^10.6.0
       typescript: '>= 4.9.x'
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
     peerDependenciesMeta:
       typescript:
         optional: true
 
-  '@storybook/react@10.5.5':
-    resolution: {integrity: sha512-T2Xj0ey7a9RHU6coYLC0L5lhjcdyhLCs9wNv15FvHvgmrRobkynEV72kq5vGW8tFkahNWI1X9+GZPQ6r8Nm38w==}
+  '@storybook/react@10.6.0':
+    resolution: {integrity: sha512-0xfYYPRHcr5ta1hmXJCSezH4JGuUHJ+xVF9f1j+Y/MWEMOQE4wnaKWKsk/HLrDjZkT5hKfvmogt9b0yduP6zEQ==}
     peerDependencies:
       '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       '@types/react-dom': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      storybook: ^10.5.5
+      storybook: ^10.6.0
       typescript: '>= 4.9.x'
     peerDependenciesMeta:
       '@types/react':
@@ -2969,86 +2955,86 @@ packages:
     peerDependencies:
       '@svgr/core': '*'
 
-  '@swc/core-darwin-arm64@1.15.47':
-    resolution: {integrity: sha512-GsoMtan3ojGGMGFbl31mmRu5ctZ56re8grGE8mO/OHJ8O+JRkzod02fe7X6ZQ8JvamA3imkEkx/h3u+vsOgPgA==}
+  '@swc/core-darwin-arm64@1.16.2':
+    resolution: {integrity: sha512-i/j0HNbnn79qnTVPicvay92Nark8fW8NQqn1e2mGERjUXNpBV0+SwQxlRpk2zBhn6laJ8PDI6Kn1nHZhnz3LCA==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@swc/core-darwin-x64@1.15.47':
-    resolution: {integrity: sha512-leTi7Rx3KF4zcC637iqWgk9SoV8VXAD8ppQYXsep63px5A/UftOcxLN1pmr8Z1si/YvX90ompP/rHgpYkgwXWg==}
+  '@swc/core-darwin-x64@1.16.2':
+    resolution: {integrity: sha512-HrwqHyEyHVXO3qTk8EkNK7/b6sOZSEoNh+pot6RdE5x0LbNqfo8LtJUvi3UTXr+5ja/o5HbJdW80eCXo+NjbiA==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [darwin]
 
-  '@swc/core-linux-arm-gnueabihf@1.15.47':
-    resolution: {integrity: sha512-hBqHuoWKKIsKmDBn9qVeWqj5GWZhtlcczVaqQmNRXsDfq+voR5CxKRfamA367QjJXtceYuliLFfEL8QsskRM2g==}
+  '@swc/core-linux-arm-gnueabihf@1.16.2':
+    resolution: {integrity: sha512-MdXi83Z/gGp1LIrg+h7HKxiul/z/Bty/ZJSvYAFqDl9zteC1XLSAZdScquKtXPp50rdyXqritTDCqQBhwVfZKA==}
     engines: {node: '>=10'}
     cpu: [arm]
     os: [linux]
 
-  '@swc/core-linux-arm64-gnu@1.15.47':
-    resolution: {integrity: sha512-TBxvRz+B4K205TWHHZxWVxkC2RFNP/Mz3PNcECBos5PsKwxjg3QSJzdoebr0VCf0Bfh8HOPldKxAP/8XkFe9gA==}
+  '@swc/core-linux-arm64-gnu@1.16.2':
+    resolution: {integrity: sha512-/jcTmK6Ktz3owM3YtiKvjofV6p3VpHnYzTIrOGwDIOsDigRAAVuZ8east33wYO/7UTdKYFlyHNnJNT0WJqOA3Q==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@swc/core-linux-arm64-musl@1.15.47':
-    resolution: {integrity: sha512-3Yu3Uq/VgytqsPjTMbkPU1ExADytbdWbruJYhA584E9jrpE2Ki+R6VVPoZCeAVk1Cb7QxcRTgblw6bSa6a/R+w==}
+  '@swc/core-linux-arm64-musl@1.16.2':
+    resolution: {integrity: sha512-4gFarKaFnlJTSlJYKmMhV4u+3YE4uYfiydpBoYjmgQhCf9lAieOq+WilZaK9vVSHeqLuQpTEiGULZqAdsRX5Dw==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@swc/core-linux-ppc64-gnu@1.15.47':
-    resolution: {integrity: sha512-wfdMi5IaOaNtmh2/6geRoxIdNfqylUZFdtzTKS655y1axWfIWyx7As74vv0wVdjeCIZ3WmCI9odDd4rUttXOSQ==}
+  '@swc/core-linux-ppc64-gnu@1.16.2':
+    resolution: {integrity: sha512-syqSLGd6KlZ1PciNzs6bIUlhOuFztZufebOHaERjc4N4SqNZxyqYd4I+jj/EfOYnpe0kNjccn9HJLN1p5dz3+w==}
     engines: {node: '>=10'}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@swc/core-linux-s390x-gnu@1.15.47':
-    resolution: {integrity: sha512-3hHYBY0yx8Ez7GMRrkhXHQzMdR5IZA6Wq5Ee4svlgwvSECLpnAJ9+0AimEGUFDvuLwE7nV/2+PYe8+Nm4rvNcQ==}
+  '@swc/core-linux-s390x-gnu@1.16.2':
+    resolution: {integrity: sha512-ZBBLK+ewGyXLzWeMS7wbKtWBdnif6etn7xvPY/iOfbdsjX/+bgkp1pQt2lWF2wlu2hXYZuhJ/tHZE/QR8/apzg==}
     engines: {node: '>=10'}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@swc/core-linux-x64-gnu@1.15.47':
-    resolution: {integrity: sha512-TjfhjgP/jGCfFHYC3JQPhJA1HwErbIJ9JfREDc1KNkvY6P0LodCgKVIlQ5deeTbkG7ih3bF5PHJLuLpaZjdRyQ==}
+  '@swc/core-linux-x64-gnu@1.16.2':
+    resolution: {integrity: sha512-LyHJgxCA4Tje0ysBMbEb0tt/ie8kgUKoFE3JAKFhpevmTmhYEoC0H9s47WuDsqiFckF1ITUguZIXJG6K5e0dvg==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@swc/core-linux-x64-musl@1.15.47':
-    resolution: {integrity: sha512-CQpS8Ge/avfjZd0UEwG/sds83Uu32deQXcV1Jo3jD0mmvQQqtYAjpsDZXugmheeAwmt+YIuoVtVHro8LMYHqsQ==}
+  '@swc/core-linux-x64-musl@1.16.2':
+    resolution: {integrity: sha512-PghXJlVM1cgtLfNUR1vxFo1z+PDRAe8cWAJlZZ7spmeiN7BospGXg/MHUg7oNSgwSX7Zo//YKv9P5yD9apsFJQ==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@swc/core-win32-arm64-msvc@1.15.47':
-    resolution: {integrity: sha512-0W8IKHsUTYiT7G2RqtOoVWk+89yzZikIiDUb/sCK6BmQDBhN91hQSfyUtW12jhEWLzYgcfmisfsZrmZE+84U1A==}
+  '@swc/core-win32-arm64-msvc@1.16.2':
+    resolution: {integrity: sha512-StTOSefYBxemvNYYUI3UmO1a8y+hSPjjfHogC2TEHL+Z1PlEBim/XtLas5rS04jAzT9RrNmbtX911SZ42H9jSQ==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [win32]
 
-  '@swc/core-win32-ia32-msvc@1.15.47':
-    resolution: {integrity: sha512-ZIp49d2Z4/ka2jO9otOg4hDvTdPmp86kVOgS2M5FCPI7eKKZ1W0boxWn+8XeZrfERtFGW0AlMRm4JhlJa7l3NA==}
+  '@swc/core-win32-ia32-msvc@1.16.2':
+    resolution: {integrity: sha512-fycER209DYIzsibpTMC+chND05OfOjgztWL9U8OE6/uUlsOUZH3eh98isBLEnOymYUhlJLEt5++W1+KL/FOh5Q==}
     engines: {node: '>=10'}
     cpu: [ia32]
     os: [win32]
 
-  '@swc/core-win32-x64-msvc@1.15.47':
-    resolution: {integrity: sha512-2h8Iek95vnixkBRCo+H8p09+Q5ll2NgSMFrWTy0iKt7+/t+8/T5mBpiT6c0ZxSS7wcWjwZ9sGZkK70tTSYHdDw==}
+  '@swc/core-win32-x64-msvc@1.16.2':
+    resolution: {integrity: sha512-cSd1z6ivSrJPVr+moVwOHWjeKy6TpO4/Shwcv5KCrKYXCccxwh4pRy1C3fDioNx2PF1jPZWHKZjtXt+Be9VbaQ==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [win32]
 
-  '@swc/core@1.15.47':
-    resolution: {integrity: sha512-FbsO5JcfOjfH38W/rohBRBweJeERsAuIP4f377lmkmxTcq9exjtx4SkRuZY5CdfhR2CBVwDIJegBpJDffwNsOg==}
+  '@swc/core@1.16.2':
+    resolution: {integrity: sha512-95I4kiSMeveI/Mhi+tE4fiWcWLUMfzfKrk0jtr8LRMqHgOgq+xHS+zExkDqoO4b5OeeuXHMWVdD5MeP3X6sULw==}
     engines: {node: '>=10'}
     peerDependencies:
       '@swc/helpers': '>=0.5.17'
@@ -3070,8 +3056,8 @@ packages:
     resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
     engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
 
-  '@testing-library/react@16.3.2':
-    resolution: {integrity: sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==}
+  '@testing-library/react@16.3.3':
+    resolution: {integrity: sha512-Uo193NgQbPMz6lrrhtRQQFcMC6Re/ELLFbbuVL30WDlZxlpZf9/lMHTAVxPRLw1q1iu9OJmR1c2BLiENRstdBg==}
     engines: {node: '>=18'}
     peerDependencies:
       '@testing-library/dom': ^10.0.0
@@ -3085,8 +3071,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@testing-library/user-event@14.6.1':
-    resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
+  '@testing-library/user-event@14.6.7':
+    resolution: {integrity: sha512-MPCpX8bxe8zS+JmmTwLp8jd0dy1rAm60Te/SL8JrQM3qvQJcBOs1d7IefJMyZzqM3EWBrDn/LWDt1BCGu4ASfg==}
     engines: {node: '>=12', npm: '>=6'}
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
@@ -3172,13 +3158,13 @@ packages:
   '@types/qrcode@1.5.6':
     resolution: {integrity: sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==}
 
-  '@types/react-dom@19.2.3':
-    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
+  '@types/react-dom@19.2.5':
+    resolution: {integrity: sha512-fMPwH9v7r/pp43yUd2/Mbiex5KouJwwR3dzHkhLREUC6764VyDsqxhAxv6OFEYR1RhjOyD1naqba8ECDBe7ZQg==}
     peerDependencies:
       '@types/react': ^19.2.0
 
-  '@types/react@19.2.17':
-    resolution: {integrity: sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==}
+  '@types/react@19.2.18':
+    resolution: {integrity: sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==}
 
   '@types/resolve@1.20.6':
     resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
@@ -3192,41 +3178,41 @@ packages:
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
-  '@typescript-eslint/project-service@8.65.0':
-    resolution: {integrity: sha512-SxnPhbTsGahizDgbu7oqFH/xVtzIqMd/s+WtnSxNxJZJpLbdT5IPdzg8EZxO3+PoKahXmwJLeNQOpKJb3/bi7Q==}
+  '@typescript-eslint/project-service@8.69.0':
+    resolution: {integrity: sha512-yi4obFrHMmnsesWehHbkg9zMA7Jt8cXT+mKM08G999pH1yT6nqgsHx7MYm0uY1wAj8CqiBXYRJ7WAT0QdQHQXg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/scope-manager@8.65.0':
-    resolution: {integrity: sha512-Esbl8OSYiVxBokYgWPf7VVWg/BE798wXhimnn9ML9Pt5qoDf8bfQlgjlKXR/k98+AcNzlLKYrpCcrcuZ9DZLgg==}
+  '@typescript-eslint/scope-manager@8.69.0':
+    resolution: {integrity: sha512-ewfspqWvSxKSOaplqAUNbaSFO0eB6w1EtQ+esfYFRm3614Ty4uNtExkcbgd6nWsXphbqKyf9ZYdbZdv2xEoWEQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/tsconfig-utils@8.65.0':
-    resolution: {integrity: sha512-j6GzGqCiRdA7Qhur2VVmKZAkBLfnHFQfx4TaJGL9RMveZqCo48jSHHO0DTgizEnGhtWnqmbtCUSrqSkdiY/0Hg==}
+  '@typescript-eslint/tsconfig-utils@8.69.0':
+    resolution: {integrity: sha512-xNqK7YTDZsLniQMV/4rpFR8Z5JlqeRvVjuG1YgF/mdPVH84HSD19L8CczMA0qg2RfwEV231GHH3VnToJDo4MfQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/types@8.65.0':
-    resolution: {integrity: sha512-JSSwWNy+H0E/01jJEM+hrX6N0OFDzFzeIhHFSAS01tlVaevpG8cFyYRPhS5yjGOvBUx3sqQHVMjCL1CAZZMxBg==}
+  '@typescript-eslint/types@8.69.0':
+    resolution: {integrity: sha512-K3VrubUPhlo9VDBS6QdI8YB5j7ClpqLRdefcz6PFrhnwicehBweqQ9Evhl4l+FYz0HdDmMqIiSX0aldGRYtDCA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.65.0':
-    resolution: {integrity: sha512-JboAE2swaYt4tb1fHhHTABE2K+OLy09XfcTbhnk4Pw96f9dd2e9iYsJ28gBggHlo5z5x1rkyWvcPoTuNTd4oGg==}
+  '@typescript-eslint/typescript-estree@8.69.0':
+    resolution: {integrity: sha512-AdFkgqck3Vudb/kWnxlyafU/4aBhHrbQ9locP2N4psXTy5mOBg0SHJumnLvx7r6g1gV4DKvUFwV2nJZBoqOD8w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/utils@8.65.0':
-    resolution: {integrity: sha512-gXiwIHsYreboxeJucHKPvgwl7dXt50mF8s1/c00cP/WoVTyWKFdtfhRWwZiXYFU5H2O8vVoSLNrexFZjYS/SGA==}
+  '@typescript-eslint/utils@8.69.0':
+    resolution: {integrity: sha512-tUbx60BBqQa31kXF5MCsOOLL5E/WzUuxIn7YpAvq+eaUlqvk8/NXnXMBNAdLCr0icjkzem7iUA5QqWHe/hJ1aw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/visitor-keys@8.65.0':
-    resolution: {integrity: sha512-8C71BQkGjiMmXtop7pHVJu1l2NNShFdkCyD6a2ezzs5vU/L3LRtb69EtcteFwz0mYMPzIgOw0n6OV4VBUWZd7A==}
+  '@typescript-eslint/visitor-keys@8.69.0':
+    resolution: {integrity: sha512-+rmdgPA+EXkNgKYvHvFfhrs35utXbwaC5PGpDquSXcoXQDKUA5UjV0LmTucG/4JXkM31BTu4TilHtrN8IVBe8w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@ungap/structured-clone@1.3.3':
@@ -3269,35 +3255,38 @@ packages:
       '@types/react':
         optional: true
 
-  '@vitejs/plugin-react@6.0.5':
-    resolution: {integrity: sha512-BOVzne/NL162sMdResB25mUv+vWMF5NoAjNf09TeGlE7ZpszZWSD3winycicLJw72yeVsoCn/2kOhEuCvEShMA==}
+  '@vitejs/plugin-react@6.1.1':
+    resolution: {integrity: sha512-yxLaQV9gkhS8ezJqCM6+ndU7mDY6gqAg75NQ+0IjwEI8IYOmQCgkRwHKVSfWXW076DsqMo0Dk+0FK1U+M5RgFw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     peerDependencies:
       '@rolldown/plugin-babel': ^0.1.7 || ^0.2.0
       babel-plugin-react-compiler: ^1.0.0
+      oxc-transform-react: ^0.145.0
       vite: ^8.0.0
     peerDependenciesMeta:
       '@rolldown/plugin-babel':
         optional: true
       babel-plugin-react-compiler:
         optional: true
+      oxc-transform-react:
+        optional: true
 
-  '@vitest/browser-playwright@4.1.10':
-    resolution: {integrity: sha512-nMoXGEiRpT7m3W7NsbvrM2aKNwiNHZf+zEpUCvMteGjZFvfT96Q9fh7QyB98dvDWXiKvrLxA7bJ1mCOOv+JQPw==}
+  '@vitest/browser-playwright@4.1.11':
+    resolution: {integrity: sha512-riLBxPqwnJ0lWs2DN2WeUfYeKLoAjbP2Xx8cLQdSddzMi20sksIa6K2mPz79DyMZKKVKH2ksOC2yJvtNcZg8cg==}
     peerDependencies:
       playwright: '*'
-      vitest: 4.1.10
+      vitest: 4.1.11
 
-  '@vitest/browser@4.1.10':
-    resolution: {integrity: sha512-UDwuWGwXj646CBx/bQHOaJSX7np0I8JL/UKQYa1e4QrVHH8VdWtx8eaOuf8sy0ShwDgR6NjJAsp5eF6vjF6qng==}
+  '@vitest/browser@4.1.11':
+    resolution: {integrity: sha512-bwMovvAeuTFOK5kIFevw4VEf+1gVEICv4SYK4k3knJOxl6b1zEWud8mYKD73e1B0odAn174h1MofURy2TPWf3w==}
     peerDependencies:
-      vitest: 4.1.10
+      vitest: 4.1.11
 
-  '@vitest/coverage-v8@4.1.10':
-    resolution: {integrity: sha512-IM49HmthevbgAO4anp1hwtoT9wYe59w0LR00gr+eagHE+ZJ5lK4sLPeO0ubgoJcwLk6dehU3R24N+FbEEKDc8g==}
+  '@vitest/coverage-v8@4.1.11':
+    resolution: {integrity: sha512-8MVGEFnJIcdGjcbfKmeq8z0pZHH0JlVtoVZH9Q/qwUp6wyFnEJUBMrw9DCaj+ra3vShGmhavjalMIhPNxZAUcw==}
     peerDependencies:
-      '@vitest/browser': 4.1.10
-      vitest: 4.1.10
+      '@vitest/browser': 4.1.11
+      vitest: 4.1.11
     peerDependenciesMeta:
       '@vitest/browser':
         optional: true
@@ -3305,11 +3294,11 @@ packages:
   '@vitest/expect@3.2.4':
     resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
 
-  '@vitest/expect@4.1.10':
-    resolution: {integrity: sha512-YsCn+qAk1GWjQOWFEsEcL2gNQ0zmVmQu3T03qP6UyjhtmdtwtbuI+DASn/7iQB3HGTXkdBwGddzxPlmiql5vlA==}
+  '@vitest/expect@4.1.11':
+    resolution: {integrity: sha512-VX2x5vNJXET47KAFzwERI+KRMtTTCSWTfSMKsW7JsUsXV4psq++e3DvZpuTDOpHcxytiDs6p2nhVb2tVDiiUYw==}
 
-  '@vitest/mocker@4.1.10':
-    resolution: {integrity: sha512-v0xaezt+DKEmKfaxg133ldzADrwLGd7Ze1MfQQTYfvs8OqZIwbxyxaYURivwV7sWy5fqn3rH5uOrSp07bp44Ow==}
+  '@vitest/mocker@4.1.11':
+    resolution: {integrity: sha512-2XJVD55d1o5AZous5CCGKS74g/riOj9odEt2bQpCVZeblHyHdnMeFl4jl0XjU21stf4mbjUkew2eXQZt65g5CQ==}
     peerDependencies:
       msw: ^2.4.9
       vite: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -3322,31 +3311,31 @@ packages:
   '@vitest/pretty-format@3.2.4':
     resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
 
-  '@vitest/pretty-format@4.1.10':
-    resolution: {integrity: sha512-W1HsjSH4MXQ9YfmmhLAoIYf1HRfekQCGngeIgcei6MP5QQGWUe0gkopdZQaVCFO+JDJMrAJGwa5pRpNpvy4P8Q==}
+  '@vitest/pretty-format@4.1.11':
+    resolution: {integrity: sha512-yiZzPbGTS9Sr/JpFl8zHrcIkAofNbFV6k21vIgQN/cY/oxZeXhJv5sc/MBJ5jFKWmWs+oJHw0UXLZjmf931+Vw==}
 
-  '@vitest/runner@4.1.10':
-    resolution: {integrity: sha512-IKI6kpIH+LmpROplyLwBBaCfMgOZOMsygVa6BARD6ahA04VRuJSa6OaVG7kRvSEMD870Vd91rSSw0eegtWyLGg==}
+  '@vitest/runner@4.1.11':
+    resolution: {integrity: sha512-LztvUgdwMNJMIkj3hQnnxiC2Xy1zNxq928W/xhjCLaNCzqTZOudjwbQf6v9IntZGPw132i2Lq2rgTRZHD3JHNw==}
 
-  '@vitest/snapshot@4.1.10':
-    resolution: {integrity: sha512-xRkfOT1qpTAi/Ti4Y1LtfRc3kEuqxGw59eN2jN9pRWMtS/XDevekhcFSqvQqjUNGksfjMJu3Y+oJ+4Ypn2OaJw==}
+  '@vitest/snapshot@4.1.11':
+    resolution: {integrity: sha512-pN7ikn1ON7h8ee4gIAp4AzyK+zBtJPzVbqOgu5LCEh4VaJVbPQcgYQYJIMGQPXVeJJq1fnfazis7a5pFNPahog==}
 
   '@vitest/spy@3.2.4':
     resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
 
-  '@vitest/spy@4.1.10':
-    resolution: {integrity: sha512-PLf/Ugvoq5wO/b4rwYCR1h2PSIdXz7wnkQFMiUpLdtM7l6pqVFcQIBEHyT1+l+cj7mNwAfZHzqXqDyjvOuwbDw==}
+  '@vitest/spy@4.1.11':
+    resolution: {integrity: sha512-apNa/prQy2qCeywhnixOHPRCgGNhvg7T4Dapfl1GahLp/R+uhBm5cPyFoNVyqsNd2h1nJxL6BqqdIjiABL60YA==}
 
-  '@vitest/ui@4.1.10':
-    resolution: {integrity: sha512-EOUqfXHTXtpSHsyLHH40ts3Ue+hRhSGwzwzMlK0dTEOLSDYyOXLyr5JDGmHQWhN2DYI30gw6dVx3cdgM9FZl+Q==}
+  '@vitest/ui@4.1.11':
+    resolution: {integrity: sha512-r/rwyKoev21mWdRGSEkZOqkQ2BYy68mwjihg9M90nNRbf4NGrgzZ4cj6JNCEwlOGJkbKeMgsjlykvwKUbRr7gw==}
     peerDependencies:
-      vitest: 4.1.10
+      vitest: 4.1.11
 
   '@vitest/utils@3.2.4':
     resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
 
-  '@vitest/utils@4.1.10':
-    resolution: {integrity: sha512-fy9am/HWxbaGt/Sawrp90vt6Y6jQwf1RX77cz3uwoJwJVMli/e1IEwRPnMNJ7vKfPTwo0diXifkpPvwH9v7nGA==}
+  '@vitest/utils@4.1.11':
+    resolution: {integrity: sha512-zTCVGpyFsGWBhllOyKlTw/vnr6D9qxsfSDyfbyZmTyjHw5N/VuvzHpHoQjm2ZJzn4RJgx5w4r7V0er69CmLgPQ==}
 
   '@webcontainer/env@1.1.1':
     resolution: {integrity: sha512-6aN99yL695Hi9SuIk1oC88l9o0gmxL1nGWWQ/kNy81HigJ0FoaoTXpytCj6ItzgyCEwA9kF1wixsTuv5cjsgng==}
@@ -3384,8 +3373,8 @@ packages:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
 
-  ansi-regex@6.2.2:
-    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
+  ansi-regex@6.3.0:
+    resolution: {integrity: sha512-WpDfL7NO6j7tH88IDBNVdUJxDh9nmCteAVW9dsep846XdwF4naCBK+/tGLX3KJgcpgMRXCFlTM2hKGoK9FsdrQ==}
     engines: {node: '>=12'}
 
   ansi-styles@4.3.0:
@@ -3428,8 +3417,8 @@ packages:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
-  ast-types@0.16.1:
-    resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
+  ast-types@0.16.3:
+    resolution: {integrity: sha512-FvWoWYfSCM6kRxCSH+MGLHIKKGRL6A6AW7Zek2O32REPQRdg131428uRTKMBYAeRd3XXAaHDS60Wpri7CdKDrA==}
     engines: {node: '>=4'}
 
   ast-v8-to-istanbul@1.0.5:
@@ -3646,9 +3635,9 @@ packages:
   colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
 
-  commander@14.0.3:
-    resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
-    engines: {node: '>=20'}
+  commander@15.0.0:
+    resolution: {integrity: sha512-z67u4ZhzCL/Tydu1lJARtEZYWbWaN7oYLHbsuzocr6y4N6WZAagG3RQ4FW61V1/0+jImpj293XfrcYnd1qxtPg==}
+    engines: {node: '>=22.12.0'}
 
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
@@ -3793,8 +3782,8 @@ packages:
     resolution: {integrity: sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==}
     engines: {node: '>=18'}
 
-  default-browser@5.5.0:
-    resolution: {integrity: sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==}
+  default-browser@5.5.1:
+    resolution: {integrity: sha512-m1pAzaJgZ/gssEqlOhJkPJp8Xly7QyW6xcrkUa2KKcDeDSEMP7X8xipU3snUcfisTQx0w1AGae+9UtJSfVnXGw==}
     engines: {node: '>=18'}
 
   define-data-property@1.1.4:
@@ -3923,15 +3912,15 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
-  es-module-lexer@2.3.1:
-    resolution: {integrity: sha512-shc1dbU90Yl/xq1QrC7QRtfcwURZuVRfPhZbDoldJ1cn1gzDvBaBWlv0eFolj5+0znnPJz5TXLxsN77X/12KTA==}
+  es-module-lexer@2.3.2:
+    resolution: {integrity: sha512-poHGpORABojJJucnV9KbOavETW8lBVnphkW77ER5/BQ5Fz7oXSoCNek7IH3vR5nRjdsEz926ibFYX8KtLQmdyw==}
 
   es-object-atoms@1.1.1:
     resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
     engines: {node: '>= 0.4'}
 
-  esbuild@0.28.1:
-    resolution: {integrity: sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==}
+  esbuild@0.28.2:
+    resolution: {integrity: sha512-HKVLS8dvII+xoKW9kmqxbRKrnWEXfJJr/FZhhJmiqIB0e053QNYFqOBouTMO/k5sID4MvCiUCvv8b9M4h32wIA==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -3943,11 +3932,10 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
-  eslint-plugin-storybook@10.5.5:
-    resolution: {integrity: sha512-xGCrddoZ8pMmwc7M5mp+habWbvqBjRuyGVTJ6RpavpoAP6NBUfGSRXHuBs7cHRDpDSuErYeDiEo4XHTonRp68g==}
+  eslint-plugin-storybook@10.6.0:
+    resolution: {integrity: sha512-HK3yD5Nslv97buJ5JfT1xFkTOoyJgGIENmBoZZI3F8t2UpBzb/dHpKyCh5bQ8AvJWnhoM/WAtDNqyd9nq6xgcg==}
     peerDependencies:
       eslint: '>=8'
-      storybook: ^10.5.5
 
   eslint-scope@7.2.2:
     resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
@@ -4005,9 +3993,9 @@ packages:
   evp_bytestokey@1.0.3:
     resolution: {integrity: sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==}
 
-  execa@9.6.1:
-    resolution: {integrity: sha512-9Be3ZoN4LmYR90tUoVu2te2BsbzHfhJyfEiAVfz7N5/zv+jduIfLrV2xdQXOHbaD6KgpGdO9PRPM1Y4Q9QkPkA==}
-    engines: {node: ^18.19.0 || >=20.5.0}
+  execa@10.0.1:
+    resolution: {integrity: sha512-ge98qjkRK4IB7tL7Ju/6qmm5LHoH1eEMt5FNZrz3f4UIYhF28lggX20z3FaX1sgc67msLEn0N0BscOs29iuwyw==}
+    engines: {node: '>=22'}
 
   expect-type@1.4.0:
     resolution: {integrity: sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==}
@@ -4270,8 +4258,8 @@ packages:
   i18next-browser-languagedetector@8.2.1:
     resolution: {integrity: sha512-bZg8+4bdmaOiApD7N7BPT9W8MLZG+nPTOFlLiJiT8uzKXFjhxw4v2ierCXOwB5sFDMtuA5G4kgYZ0AznZxQ/cw==}
 
-  i18next-cli@1.67.3:
-    resolution: {integrity: sha512-kW5Hq0kzOGoZQCxOLqtrcj4NqIGmQJkBr5c78XQz3WqBgZuJ1PzvLEEjoXdyDkX1IwPO19OTEv3sOeCCWU+Igg==}
+  i18next-cli@1.72.4:
+    resolution: {integrity: sha512-YnyjYSasqZbZCLYQOvk9pvSYZy1ANjq7yG4cJ5Rd2WF99sALUKCCIzvfPXu9OfBgSy4CosSnjg8GZI1c0CrrNA==}
     engines: {node: '>=22'}
     hasBin: true
 
@@ -4279,8 +4267,8 @@ packages:
     resolution: {integrity: sha512-n5UexwEVt0OoIAhG2MWpSnAVJW1U8mQrQTmXyxc5DMAx+NLhcLZhSMJo/FnUsA5JQ3obTYqTgB7YIuZKWpDgow==}
     hasBin: true
 
-  i18next@26.3.6:
-    resolution: {integrity: sha512-Bu5Z2nAXgfVyM8xvW3jk9EKRIuX37PudsrBViThNFx7CR7aaYTpP01cxNB/E4c4UUzTDiAZRstEhsRfPOL/8xA==}
+  i18next@26.4.1:
+    resolution: {integrity: sha512-9YbX5E6gd1H+yaOSX3izCsPj5iWXyH7X4oC+iuHHJJw8AeHglzOK5SJf+1CHxaYKYigcea+8jvzSxqYx46YvyA==}
     peerDependencies:
       typescript: ^5 || ^6 || ^7
     peerDependenciesMeta:
@@ -4320,8 +4308,8 @@ packages:
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
-  inquirer@14.0.2:
-    resolution: {integrity: sha512-VsSx1JneSNp3ld1veMTLe+UDcUD8Tw2/jjOthhkX3/IX2q+xHhVELifeb/hsb1fBw31pabEPNUf/xUOyb+KZjA==}
+  inquirer@14.2.1:
+    resolution: {integrity: sha512-jLO8986l0/jW+K2Y5BHAhrD6ztnm8MHQgnTI5BwKV6can/LN6xYBcLbtUSvDt1jXNTASwCZszZk0ZBUT5YmH6Q==}
     engines: {node: '>=23.5.0 || ^22.13.0 || ^20.17.0'}
     peerDependencies:
       '@types/node': '>=18'
@@ -4675,6 +4663,9 @@ packages:
     resolution: {integrity: sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==}
     engines: {node: '>=12'}
 
+  magic-string@1.2.3:
+    resolution: {integrity: sha512-Bpb0W2TbLKOZ7vJnOUnVRGq3WL2p+ISV29M6hYPL1AFCpyKZpdr5ytiXoTSSxRVhg8YW7f65+6gbG8WG6PCa/g==}
+
   magicast@0.5.4:
     resolution: {integrity: sha512-llBEhWm1SacoRwgHUoQJYtwp4PBLF4faQi5TCpIGyGs9n4y5+juI0tDgyKIfpqxckRHaHzouUEph3THklWh03w==}
 
@@ -4756,8 +4747,8 @@ packages:
     resolution: {integrity: sha512-dkEJPVvun4FryqBmZ5KhDo0K9iDXAwn08tMLDinNdRBNPcYEDiWYysLcc6k3mjTMlbP9KyylvRpd4wFtwrT9rw==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
-  nanoid@3.3.17:
-    resolution: {integrity: sha512-xQLf0A3HOMlgHq0n247/LRuAOYmB7dXJ/DvAxGvsSBij45XtBSmQycu+F8ODbHwns/XyFZagyL1+J0Offw1E0g==}
+  nanoid@3.3.18:
+    resolution: {integrity: sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
@@ -4862,11 +4853,11 @@ packages:
   oxc-resolver@11.19.1:
     resolution: {integrity: sha512-qE/CIg/spwrTBFt5aKmwe3ifeDdLfA2NESN30E42X/lII5ClF8V7Wt6WIJhcGZjp0/Q+nQ+9vgxGk//xZNX2hg==}
 
-  oxc-resolver@11.24.2:
-    resolution: {integrity: sha512-FY91FiDBj7ls5MsFS9jN3tjz2o0/zsdSsymlakySaBwVJZorHhkWyICLZMKxlu1R9vYo+sd3z1jwb4J8x7bNDw==}
+  oxc-resolver@11.21.2:
+    resolution: {integrity: sha512-w5tLwYN3Zo24w5EeWJjJWZOwhYqTtC8PS2B1tIt7BZUuqTIcU07sQValbDw+rq7+AuAGzOHklgK+ifsy4lpXfw==}
 
-  oxfmt@0.61.0:
-    resolution: {integrity: sha512-DxdHBEMYpcEnHoUHjjOigUqV2TYKsvxLwUPXnVYBjgFdqrcQ/91OtwubtZ2PUodCs3sStI8R5Qw3fKNGK4e8wQ==}
+  oxfmt@0.66.0:
+    resolution: {integrity: sha512-FfvqR8RFtV6JJpRrpkfqyVCQ7HDvZ/VriWFx7veftCgL1B5ZO9qNr+1rvPieycMQnNfVG0PWyJQiy7p0hq1I5w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
@@ -4882,8 +4873,8 @@ packages:
     resolution: {integrity: sha512-7DBpqyLZCfyoXiivyfzt9Xmju/K1RcN+Y1W7buEwrgRCWWF11v9alypPqWGZBmh2erDkKL/kVyhKUH2Px+t13A==}
     hasBin: true
 
-  oxlint@1.76.0:
-    resolution: {integrity: sha512-6QoFioEU4fNdiUx/2Eo6TRd6NG7H7njnRCz8rhB66cZmMHDTqcm1Rjvl8Wry+ZTQMBAmyb4Mlf62Mk5X+eHSOw==}
+  oxlint@1.81.0:
+    resolution: {integrity: sha512-HyrJYqeoOCL0iqaLEzGewGT48ZX99P3hxYh8udAF9RGGIghSamkXE4ClUyBpEDNqasamThgmlPbuMOe7SAZmHg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
@@ -5008,17 +4999,21 @@ packages:
     resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==}
     engines: {node: '>=12'}
 
+  picomatch@4.0.7:
+    resolution: {integrity: sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==}
+    engines: {node: '>=12'}
+
   pkg-dir@5.0.0:
     resolution: {integrity: sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==}
     engines: {node: '>=10'}
 
-  playwright-core@1.62.0:
-    resolution: {integrity: sha512-nsNRyq0r2zsG8AcRHWknc9QRA5XCueC7gWMrs+Gx2tlZn9hcl8zudfh00lhJPY1DE7NmZ6bDsT9g2yey8mXljA==}
+  playwright-core@1.62.1:
+    resolution: {integrity: sha512-wPYSwEBJY9GHraISXqyqtx0na0LpO3XEX7jNDhntbex7tzUS7kLnZsOlFruFJB4Hi/rhDMjXGqHewDZ68nYZVw==}
     engines: {node: '>=20'}
     hasBin: true
 
-  playwright@1.62.0:
-    resolution: {integrity: sha512-Z14dG305dgaLu6foB1TXQagFiW8JfSUIUaUuPaKQ6NtBPKF1P/qXcqfh6c6K/icPqdy37JmjbiBXf6JNg6Sylw==}
+  playwright@1.62.1:
+    resolution: {integrity: sha512-0M+L3LAD8/nm554LOla9Ayx0j0tmFZ0FBcoQ7F1VuVHpM/XpiC8RcDzBQB8W5+hA8L22THxELzeF+2WcUzvcLg==}
     engines: {node: '>=20'}
     hasBin: true
 
@@ -5194,8 +5189,8 @@ packages:
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  postcss@8.5.25:
-    resolution: {integrity: sha512-DTPx3RWSSnWyzLxQnlH0rJP+EW5ekl16ZU4/psbIhA0e53kJfdgaN5vKM+xP7yJtXVu+nfdVFmlgFDEKAe4Pyw==}
+  postcss@8.5.26:
+    resolution: {integrity: sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==}
     engines: {node: ^10 || ^12 || >=14}
 
   posthog-js@1.408.2:
@@ -5222,8 +5217,8 @@ packages:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
-  pretty-ms@9.3.0:
-    resolution: {integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==}
+  pretty-ms@9.3.1:
+    resolution: {integrity: sha512-HzMy3Geq23nVALD/M2LliU+F+M+gVNsvkQWWqeBZ8HDiCgzo6YPJ/Omrmtq24EFrIsk0a3EkQGEd7bDOo+IhGA==}
     engines: {node: '>=18'}
 
   process-nextick-args@2.0.1:
@@ -5305,8 +5300,8 @@ packages:
       typescript:
         optional: true
 
-  react-i18next@17.0.11:
-    resolution: {integrity: sha512-cDtkXgxjuFTWUH6V+aQn1Ve5vDiUztCNPWW5GtSHDccsgRXO1nE6QFWCEmc1KAutrb3OUv87wFShJL5RhUwPXg==}
+  react-i18next@17.0.13:
+    resolution: {integrity: sha512-Cc1PscmblIHA1kljTqDwrcVMI21ydgmUzw0UAeQBe7pAOgfuRLfzXze4EUBQoeDiICzFIXXhHFoZxuetNg5D0Q==}
     peerDependencies:
       i18next: '>= 26.2.0'
       react: '>= 16.8.0'
@@ -5347,15 +5342,15 @@ packages:
       '@types/react':
         optional: true
 
-  react-router-dom@7.18.2:
-    resolution: {integrity: sha512-AIKJ/jgGlFb3EbfCXk5Gzshiwt+l3mqbCrNjmEWMMjqQxNJ3svBa6bgzFyCC2Sw3RA0VWF1kg3uQf2OFhxb8hw==}
+  react-router-dom@7.18.3:
+    resolution: {integrity: sha512-ytVbyBBM7vMfRCam25r0WMhSVSom909A8p+8m0/f1w853dz/xfFu6etAT2SEbVoSnI+ZoPRDqIsQXVT89gp7kg==}
     engines: {node: '>=20.0.0'}
     peerDependencies:
       react: '>=18'
       react-dom: '>=18'
 
-  react-router@7.18.2:
-    resolution: {integrity: sha512-aUVMjFm3GAPTTZL7oYr5E7ETiqfQCHRLH+B+5afnICvf0r7kkK4eR6SMuwbSTJw/7t+12khT/Kahij49fqOCIg==}
+  react-router@7.18.3:
+    resolution: {integrity: sha512-gyXgtdr5uACJ5b1Q4udzjVV+tb/rlHIMJKuJ0e89R4Kzgz47z/rgP0dIKxktqIEUhDHluGTPJJH/wRha7CyqsA==}
     engines: {node: '>=20.0.0'}
     peerDependencies:
       react: '>=18'
@@ -5398,12 +5393,12 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
-  readdirp@5.0.0:
-    resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
+  readdirp@5.1.1:
+    resolution: {integrity: sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==}
     engines: {node: '>= 20.19.0'}
 
-  recast@0.23.19:
-    resolution: {integrity: sha512-T98lym7kH+pnZmRaD8yDRdaNqyUbwnbEBx0MuchrzMFOEMray4AO3ZJoTUZ5r78Ao78X/OhzW0DL8GB85w/I2w==}
+  recast@0.23.21:
+    resolution: {integrity: sha512-mFAyJq9vUbSTARLZUvAEf1z3YxlvAwswbmxMx2mPA/MSm4KmpwvwvhsH/NIrZhyOuwD60Lzyw2qh83uCbgTPYw==}
     engines: {node: '>= 4'}
 
   redent@3.0.0:
@@ -5451,8 +5446,8 @@ packages:
     resolution: {integrity: sha512-5Di9UC0+8h1L6ZD2d7awM7E/T4uA1fJRlx6zk/NvdCCVEoAnFqvHmCuNeIKoCeIixBX/q8uM+6ycDvF8woqosA==}
     engines: {node: '>= 0.8'}
 
-  rolldown@1.1.5:
-    resolution: {integrity: sha512-t9z29cJjXf/vxQ8dyhCSpt6H6aSwHTk8cT5I3iy6SMXuFpk5mB6PL6XfC8PCwrPTx93udwKUm9HRteAlTGBLiA==}
+  rolldown@1.2.7:
+    resolution: {integrity: sha512-g0EtLvBjTUB7jhyV0S/TCup3v/XSVl45vUIGbOGU4QPiyjTenCe4mKuFvW9fEgYmS2Fo42AUssRmNuMziXdrig==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
@@ -5491,8 +5486,8 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  sass@1.102.0:
-    resolution: {integrity: sha512-NSOyTnaQF7rTAEOtI2fwb386vL+akyiQLBZu8Na7hXCb+umJy0GAqlcMIaqACZ6Z1VgTBS4K9PG6B3IdjHGJsw==}
+  sass@1.103.1:
+    resolution: {integrity: sha512-9icZURbP51S6S0QGoyaeqk9uB06GNWxsFYWfH5RgpFgqK5FA8tJcM3AdVxrZEVJ7dz+L87nG95gBKf4VuaMHGw==}
     engines: {node: '>=20.19.0'}
     hasBin: true
 
@@ -5609,8 +5604,8 @@ packages:
     resolution: {integrity: sha512-eCPu1qRxPVkl5605OTWF8Wz40b4Mf45NY5LQmVPQ599knfs5QhASUm9GbJ5BDMDOXgrnh0wyEdvzmL//YMlw0A==}
     engines: {node: '>=18'}
 
-  storybook@10.5.5:
-    resolution: {integrity: sha512-UscBIBJDloUeqntukHOhP1a5W/vouePDJbzPSxj466WK801FZtzQiMffMtkjzJiWSuj20wfaYlB2QQKh9aOYAg==}
+  storybook@10.6.0:
+    resolution: {integrity: sha512-H48X6AURAFTpfN2zEux6vNesee5Oq8Gxj1IanYmblPZ218sfKSeyyerF1NC7GD7BrruoC8L4/cU0zII4y+d6zw==}
     hasBin: true
     peerDependencies:
       '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -5715,8 +5710,8 @@ packages:
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
-  tinyexec@1.3.0:
-    resolution: {integrity: sha512-QKAl9m8gWWGHV8jZcPeym6j+XULi6tOf1mT83WYJ4Lk2ytW/uwAWkrP0uFsdoYMdueVJ0qs26wZ+23xeB4ibNQ==}
+  tinyexec@1.3.1:
+    resolution: {integrity: sha512-GCvB3aoys96IuDFBMcTB46JOR6mdMtAToqwiW8JlWhsoh1mhHi/xn9ss/Dg7N555GiJyEt2qzoG/NHCwM6h1EA==}
     engines: {node: '>=18'}
 
   tinyglobby@0.2.17:
@@ -5735,8 +5730,8 @@ packages:
     resolution: {integrity: sha512-yau8yJdTt989Mm0Bd/236QnzEiPf2xLLTqUZRUJOo/3CB078LSwzei343DgtJVmfJKJE3TMINY1u42SQsP6mXw==}
     engines: {node: '>=14.0.0'}
 
-  tinyspy@4.0.4:
-    resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==}
+  tinyspy@4.0.6:
+    resolution: {integrity: sha512-u8KszXvGfU68hVcZpRHKG28T0krMuv2G5nDhiHaMLen/gIuFEgIJhaJuO69qjnXg5paSrbPMFfx3brNuN8eVSg==}
     engines: {node: '>=14.0.0'}
 
   tldts-core@6.1.86:
@@ -5906,8 +5901,8 @@ packages:
   util@0.12.5:
     resolution: {integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==}
 
-  uuid@14.0.1:
-    resolution: {integrity: sha512-6ZxzVpzDXDa3bJWaHilVayA+BH/1zmxCJoVgvmqJnid/gPoKHxUrS/aC/T6LGQtNHT+XHG9fXPJB4d+IrU30Ew==}
+  uuid@14.0.2:
+    resolution: {integrity: sha512-xZe/16rV4aa+HGSOCiY2YeLT1OybRLrrkL/Rqaq7p7GMVXjFh+6wN4oMYgjFmnSnhY8t6Xpdl2l9qmnHYuMHwQ==}
     hasBin: true
 
   vaul@1.1.2:
@@ -5945,13 +5940,13 @@ packages:
     peerDependencies:
       vite: ^2 || ^3 || ^4 || ^5 || ^6 || ^7 || ^8
 
-  vite@8.1.5:
-    resolution: {integrity: sha512-7ULLwsCdYx/nRyrpiEwvqb5TFHrMVZyBt+rg/OAXT7rgj/z+DtTDyKFeLAdDkubDVDKD8jOsndmy7m55XcfUsw==}
+  vite@8.2.2:
+    resolution: {integrity: sha512-cFKLV/PRgAUlIRm5WjMjJ86jrftzpqcgH+Us+DS8mI3CDNiH30Whrz8uHL3+MOLPAgqbMBAqWdAHAphOAM+z/Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
       '@types/node': ^20.19.0 || >=22.12.0
-      '@vitejs/devtools': ^0.3.0
+      '@vitejs/devtools': ^0.4.0 || ^0.5.0
       esbuild: ^0.28.0
       jiti: '>=1.21.0'
       less: ^4.0.0
@@ -5993,20 +5988,20 @@ packages:
     peerDependencies:
       vitest: '>=1'
 
-  vitest@4.1.10:
-    resolution: {integrity: sha512-R9jUTe5S4Qb0HCd4TNqpC7oGcrMssMRGXLW80ubjWsW9VH5GF8y1Y0SFLY9AbqSk6nt0PnOx4H4WNJYZ13GUPw==}
+  vitest@4.1.11:
+    resolution: {integrity: sha512-fhACrNXUidIbGSBr5FlbuBkO7VWC1ZyLl0DO4CU2DrQoAPxX84Ysxs+HeGQpii5lZWV1Q4gBZTTu49mF+A6Edw==}
     engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
       '@opentelemetry/api': ^1.9.0
       '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
-      '@vitest/browser-playwright': 4.1.10
-      '@vitest/browser-preview': 4.1.10
-      '@vitest/browser-webdriverio': 4.1.10
-      '@vitest/coverage-istanbul': 4.1.10
-      '@vitest/coverage-v8': 4.1.10
-      '@vitest/ui': 4.1.10
+      '@vitest/browser-playwright': 4.1.11
+      '@vitest/browser-preview': 4.1.11
+      '@vitest/browser-webdriverio': 4.1.11
+      '@vitest/coverage-istanbul': 4.1.11
+      '@vitest/coverage-v8': 4.1.11
+      '@vitest/ui': 4.1.11
       happy-dom: '*'
       jsdom: '*'
       vite: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -6089,6 +6084,11 @@ packages:
   whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
 
+  which-command@0.1.0:
+    resolution: {integrity: sha512-XZyoF5/5hZtXitIwzrU4NKK+Wtbb9aB9CezUEw2Q0wlYK8NUYQxC1rRXgNueYLtBAJwXIb+/tFVk4dozciNJMA==}
+    engines: {node: '>=22'}
+    hasBin: true
+
   which-module@2.0.1:
     resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
 
@@ -6149,6 +6149,18 @@ packages:
       utf-8-validate:
         optional: true
 
+  ws@8.21.3:
+    resolution: {integrity: sha512-201TZ/kPWxoPr/OKWjquZR1SWKXcvxdH+e1xrx89b3YbmzLMFCLfnaG1HFIgWzJOEWZ7MvpK++odZufgYR50Rw==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   wsl-utils@0.1.0:
     resolution: {integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==}
     engines: {node: '>=18'}
@@ -6369,11 +6381,11 @@ snapshots:
       unplugin: 1.16.1
       zod: 3.25.76
 
-  '@codecov/vite-plugin@1.9.1(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))':
+  '@codecov/vite-plugin@1.9.1(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))':
     dependencies:
       '@codecov/bundler-plugin-core': 1.9.1
       unplugin: 1.16.1
-      vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)
+      vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)
 
   '@croct/json5-parser@0.2.2':
     dependencies:
@@ -6411,272 +6423,272 @@ snapshots:
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
 
-  '@csstools/postcss-alpha-function@1.0.1(postcss@8.5.25)':
+  '@csstools/postcss-alpha-function@1.0.1(postcss@8.5.26)':
     dependencies:
       '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25)
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26)
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
 
-  '@csstools/postcss-cascade-layers@5.0.2(postcss@8.5.25)':
+  '@csstools/postcss-cascade-layers@5.0.2(postcss@8.5.26)':
     dependencies:
       '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1)
-      postcss: 8.5.25
+      postcss: 8.5.26
       postcss-selector-parser: 7.1.1
 
-  '@csstools/postcss-color-function-display-p3-linear@1.0.1(postcss@8.5.25)':
+  '@csstools/postcss-color-function-display-p3-linear@1.0.1(postcss@8.5.26)':
     dependencies:
       '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25)
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26)
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
 
-  '@csstools/postcss-color-function@4.0.12(postcss@8.5.25)':
+  '@csstools/postcss-color-function@4.0.12(postcss@8.5.26)':
     dependencies:
       '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25)
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26)
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
 
-  '@csstools/postcss-color-mix-function@3.0.12(postcss@8.5.25)':
+  '@csstools/postcss-color-mix-function@3.0.12(postcss@8.5.26)':
     dependencies:
       '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25)
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26)
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
 
-  '@csstools/postcss-color-mix-variadic-function-arguments@1.0.2(postcss@8.5.25)':
+  '@csstools/postcss-color-mix-variadic-function-arguments@1.0.2(postcss@8.5.26)':
     dependencies:
       '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25)
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26)
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
 
-  '@csstools/postcss-content-alt-text@2.0.8(postcss@8.5.25)':
+  '@csstools/postcss-content-alt-text@2.0.8(postcss@8.5.26)':
     dependencies:
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25)
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26)
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
 
-  '@csstools/postcss-contrast-color-function@2.0.12(postcss@8.5.25)':
+  '@csstools/postcss-contrast-color-function@2.0.12(postcss@8.5.26)':
     dependencies:
       '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25)
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26)
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
 
-  '@csstools/postcss-exponential-functions@2.0.9(postcss@8.5.25)':
+  '@csstools/postcss-exponential-functions@2.0.9(postcss@8.5.26)':
     dependencies:
       '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  '@csstools/postcss-font-format-keywords@4.0.0(postcss@8.5.25)':
+  '@csstools/postcss-font-format-keywords@4.0.0(postcss@8.5.26)':
     dependencies:
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-gamut-mapping@2.0.11(postcss@8.5.25)':
+  '@csstools/postcss-gamut-mapping@2.0.11(postcss@8.5.26)':
     dependencies:
       '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  '@csstools/postcss-gradients-interpolation-method@5.0.12(postcss@8.5.25)':
+  '@csstools/postcss-gradients-interpolation-method@5.0.12(postcss@8.5.26)':
     dependencies:
       '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25)
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26)
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
 
-  '@csstools/postcss-hwb-function@4.0.12(postcss@8.5.25)':
+  '@csstools/postcss-hwb-function@4.0.12(postcss@8.5.26)':
     dependencies:
       '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25)
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26)
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
 
-  '@csstools/postcss-ic-unit@4.0.4(postcss@8.5.25)':
+  '@csstools/postcss-ic-unit@4.0.4(postcss@8.5.26)':
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25)
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26)
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-initial@2.0.1(postcss@8.5.25)':
+  '@csstools/postcss-initial@2.0.1(postcss@8.5.26)':
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  '@csstools/postcss-is-pseudo-class@5.0.3(postcss@8.5.25)':
+  '@csstools/postcss-is-pseudo-class@5.0.3(postcss@8.5.26)':
     dependencies:
       '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1)
-      postcss: 8.5.25
+      postcss: 8.5.26
       postcss-selector-parser: 7.1.1
 
-  '@csstools/postcss-light-dark-function@2.0.11(postcss@8.5.25)':
+  '@csstools/postcss-light-dark-function@2.0.11(postcss@8.5.26)':
     dependencies:
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25)
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26)
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
 
-  '@csstools/postcss-logical-float-and-clear@3.0.0(postcss@8.5.25)':
+  '@csstools/postcss-logical-float-and-clear@3.0.0(postcss@8.5.26)':
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  '@csstools/postcss-logical-overflow@2.0.0(postcss@8.5.25)':
+  '@csstools/postcss-logical-overflow@2.0.0(postcss@8.5.26)':
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  '@csstools/postcss-logical-overscroll-behavior@2.0.0(postcss@8.5.25)':
+  '@csstools/postcss-logical-overscroll-behavior@2.0.0(postcss@8.5.26)':
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  '@csstools/postcss-logical-resize@3.0.0(postcss@8.5.25)':
+  '@csstools/postcss-logical-resize@3.0.0(postcss@8.5.26)':
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-logical-viewport-units@3.0.4(postcss@8.5.25)':
+  '@csstools/postcss-logical-viewport-units@3.0.4(postcss@8.5.26)':
     dependencies:
       '@csstools/css-tokenizer': 3.0.4
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
 
-  '@csstools/postcss-media-minmax@2.0.9(postcss@8.5.25)':
+  '@csstools/postcss-media-minmax@2.0.9(postcss@8.5.26)':
     dependencies:
       '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
       '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  '@csstools/postcss-media-queries-aspect-ratio-number-values@3.0.5(postcss@8.5.25)':
+  '@csstools/postcss-media-queries-aspect-ratio-number-values@3.0.5(postcss@8.5.26)':
     dependencies:
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
       '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  '@csstools/postcss-nested-calc@4.0.0(postcss@8.5.25)':
+  '@csstools/postcss-nested-calc@4.0.0(postcss@8.5.26)':
     dependencies:
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-normalize-display-values@4.0.1(postcss@8.5.25)':
+  '@csstools/postcss-normalize-display-values@4.0.1(postcss@8.5.26)':
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-oklab-function@4.0.12(postcss@8.5.25)':
+  '@csstools/postcss-oklab-function@4.0.12(postcss@8.5.26)':
     dependencies:
       '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25)
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26)
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
 
-  '@csstools/postcss-position-area-property@1.0.0(postcss@8.5.25)':
+  '@csstools/postcss-position-area-property@1.0.0(postcss@8.5.26)':
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  '@csstools/postcss-progressive-custom-properties@4.2.1(postcss@8.5.25)':
+  '@csstools/postcss-progressive-custom-properties@4.2.1(postcss@8.5.26)':
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-property-rule-prelude-list@1.0.0(postcss@8.5.25)':
+  '@csstools/postcss-property-rule-prelude-list@1.0.0(postcss@8.5.26)':
     dependencies:
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  '@csstools/postcss-random-function@2.0.1(postcss@8.5.25)':
+  '@csstools/postcss-random-function@2.0.1(postcss@8.5.26)':
     dependencies:
       '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  '@csstools/postcss-relative-color-syntax@3.0.12(postcss@8.5.25)':
+  '@csstools/postcss-relative-color-syntax@3.0.12(postcss@8.5.26)':
     dependencies:
       '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25)
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26)
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
 
-  '@csstools/postcss-scope-pseudo-class@4.0.1(postcss@8.5.25)':
+  '@csstools/postcss-scope-pseudo-class@4.0.1(postcss@8.5.26)':
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
       postcss-selector-parser: 7.1.1
 
-  '@csstools/postcss-sign-functions@1.1.4(postcss@8.5.25)':
+  '@csstools/postcss-sign-functions@1.1.4(postcss@8.5.26)':
     dependencies:
       '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  '@csstools/postcss-stepped-value-functions@4.0.9(postcss@8.5.25)':
+  '@csstools/postcss-stepped-value-functions@4.0.9(postcss@8.5.26)':
     dependencies:
       '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  '@csstools/postcss-syntax-descriptor-syntax-production@1.0.1(postcss@8.5.25)':
+  '@csstools/postcss-syntax-descriptor-syntax-production@1.0.1(postcss@8.5.26)':
     dependencies:
       '@csstools/css-tokenizer': 3.0.4
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  '@csstools/postcss-system-ui-font-family@1.0.0(postcss@8.5.25)':
+  '@csstools/postcss-system-ui-font-family@1.0.0(postcss@8.5.26)':
     dependencies:
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  '@csstools/postcss-text-decoration-shorthand@4.0.3(postcss@8.5.25)':
+  '@csstools/postcss-text-decoration-shorthand@4.0.3(postcss@8.5.26)':
     dependencies:
       '@csstools/color-helpers': 5.1.0
-      postcss: 8.5.25
+      postcss: 8.5.26
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-trigonometric-functions@4.0.9(postcss@8.5.25)':
+  '@csstools/postcss-trigonometric-functions@4.0.9(postcss@8.5.26)':
     dependencies:
       '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  '@csstools/postcss-unset-value@4.0.0(postcss@8.5.25)':
+  '@csstools/postcss-unset-value@4.0.0(postcss@8.5.26)':
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
 
   '@csstools/selector-resolve-nested@3.1.0(postcss-selector-parser@7.1.1)':
     dependencies:
@@ -6686,11 +6698,11 @@ snapshots:
     dependencies:
       postcss-selector-parser: 7.1.1
 
-  '@csstools/utilities@2.0.0(postcss@8.5.25)':
+  '@csstools/utilities@2.0.0(postcss@8.5.26)':
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  '@emnapi/core@1.11.1':
+  '@emnapi/core@1.11.0':
     dependencies:
       '@emnapi/wasi-threads': 1.2.2
       tslib: 2.8.1
@@ -6708,7 +6720,7 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/runtime@1.11.1':
+  '@emnapi/runtime@1.11.0':
     dependencies:
       tslib: 2.8.1
     optional: true
@@ -6733,82 +6745,82 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@esbuild/aix-ppc64@0.28.1':
+  '@esbuild/aix-ppc64@0.28.2':
     optional: true
 
-  '@esbuild/android-arm64@0.28.1':
+  '@esbuild/android-arm64@0.28.2':
     optional: true
 
-  '@esbuild/android-arm@0.28.1':
+  '@esbuild/android-arm@0.28.2':
     optional: true
 
-  '@esbuild/android-x64@0.28.1':
+  '@esbuild/android-x64@0.28.2':
     optional: true
 
-  '@esbuild/darwin-arm64@0.28.1':
+  '@esbuild/darwin-arm64@0.28.2':
     optional: true
 
-  '@esbuild/darwin-x64@0.28.1':
+  '@esbuild/darwin-x64@0.28.2':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.28.1':
+  '@esbuild/freebsd-arm64@0.28.2':
     optional: true
 
-  '@esbuild/freebsd-x64@0.28.1':
+  '@esbuild/freebsd-x64@0.28.2':
     optional: true
 
-  '@esbuild/linux-arm64@0.28.1':
+  '@esbuild/linux-arm64@0.28.2':
     optional: true
 
-  '@esbuild/linux-arm@0.28.1':
+  '@esbuild/linux-arm@0.28.2':
     optional: true
 
-  '@esbuild/linux-ia32@0.28.1':
+  '@esbuild/linux-ia32@0.28.2':
     optional: true
 
-  '@esbuild/linux-loong64@0.28.1':
+  '@esbuild/linux-loong64@0.28.2':
     optional: true
 
-  '@esbuild/linux-mips64el@0.28.1':
+  '@esbuild/linux-mips64el@0.28.2':
     optional: true
 
-  '@esbuild/linux-ppc64@0.28.1':
+  '@esbuild/linux-ppc64@0.28.2':
     optional: true
 
-  '@esbuild/linux-riscv64@0.28.1':
+  '@esbuild/linux-riscv64@0.28.2':
     optional: true
 
-  '@esbuild/linux-s390x@0.28.1':
+  '@esbuild/linux-s390x@0.28.2':
     optional: true
 
-  '@esbuild/linux-x64@0.28.1':
+  '@esbuild/linux-x64@0.28.2':
     optional: true
 
-  '@esbuild/netbsd-arm64@0.28.1':
+  '@esbuild/netbsd-arm64@0.28.2':
     optional: true
 
-  '@esbuild/netbsd-x64@0.28.1':
+  '@esbuild/netbsd-x64@0.28.2':
     optional: true
 
-  '@esbuild/openbsd-arm64@0.28.1':
+  '@esbuild/openbsd-arm64@0.28.2':
     optional: true
 
-  '@esbuild/openbsd-x64@0.28.1':
+  '@esbuild/openbsd-x64@0.28.2':
     optional: true
 
-  '@esbuild/openharmony-arm64@0.28.1':
+  '@esbuild/openharmony-arm64@0.28.2':
     optional: true
 
-  '@esbuild/sunos-x64@0.28.1':
+  '@esbuild/sunos-x64@0.28.2':
     optional: true
 
-  '@esbuild/win32-arm64@0.28.1':
+  '@esbuild/win32-arm64@0.28.2':
     optional: true
 
-  '@esbuild/win32-ia32@0.28.1':
+  '@esbuild/win32-ia32@0.28.2':
     optional: true
 
-  '@esbuild/win32-x64@0.28.1':
+  '@esbuild/win32-x64@0.28.2':
     optional: true
 
   '@eslint-community/eslint-utils@4.10.1(eslint@8.57.1(supports-color@7.2.0))':
@@ -6914,29 +6926,29 @@ snapshots:
 
   '@humanwhocodes/object-schema@2.0.3': {}
 
-  '@inquirer/ansi@2.0.7': {}
+  '@inquirer/ansi@2.0.8': {}
 
-  '@inquirer/checkbox@5.2.1(@types/node@24.13.3)':
+  '@inquirer/checkbox@5.2.4(@types/node@24.13.3)':
     dependencies:
-      '@inquirer/ansi': 2.0.7
-      '@inquirer/core': 11.2.1(@types/node@24.13.3)
-      '@inquirer/figures': 2.0.7
-      '@inquirer/type': 4.0.7(@types/node@24.13.3)
+      '@inquirer/ansi': 2.0.8
+      '@inquirer/core': 12.0.2(@types/node@24.13.3)
+      '@inquirer/figures': 2.0.9
+      '@inquirer/type': 4.1.1(@types/node@24.13.3)
     optionalDependencies:
       '@types/node': 24.13.3
 
-  '@inquirer/confirm@6.1.1(@types/node@24.13.3)':
+  '@inquirer/confirm@6.3.1(@types/node@24.13.3)':
     dependencies:
-      '@inquirer/core': 11.2.1(@types/node@24.13.3)
-      '@inquirer/type': 4.0.7(@types/node@24.13.3)
+      '@inquirer/core': 12.0.2(@types/node@24.13.3)
+      '@inquirer/type': 4.1.1(@types/node@24.13.3)
     optionalDependencies:
       '@types/node': 24.13.3
 
-  '@inquirer/core@11.2.1(@types/node@24.13.3)':
+  '@inquirer/core@12.0.2(@types/node@24.13.3)':
     dependencies:
-      '@inquirer/ansi': 2.0.7
-      '@inquirer/figures': 2.0.7
-      '@inquirer/type': 4.0.7(@types/node@24.13.3)
+      '@inquirer/ansi': 2.0.8
+      '@inquirer/figures': 2.0.9
+      '@inquirer/type': 4.1.1(@types/node@24.13.3)
       cli-width: 4.1.0
       fast-wrap-ansi: 0.2.2
       mute-stream: 3.0.0
@@ -6944,92 +6956,92 @@ snapshots:
     optionalDependencies:
       '@types/node': 24.13.3
 
-  '@inquirer/editor@5.2.2(@types/node@24.13.3)':
+  '@inquirer/editor@5.3.2(@types/node@24.13.3)':
     dependencies:
-      '@inquirer/core': 11.2.1(@types/node@24.13.3)
-      '@inquirer/external-editor': 3.0.3(@types/node@24.13.3)
-      '@inquirer/type': 4.0.7(@types/node@24.13.3)
+      '@inquirer/core': 12.0.2(@types/node@24.13.3)
+      '@inquirer/external-editor': 3.0.5(@types/node@24.13.3)
+      '@inquirer/type': 4.1.1(@types/node@24.13.3)
     optionalDependencies:
       '@types/node': 24.13.3
 
-  '@inquirer/expand@5.1.1(@types/node@24.13.3)':
+  '@inquirer/expand@5.1.4(@types/node@24.13.3)':
     dependencies:
-      '@inquirer/core': 11.2.1(@types/node@24.13.3)
-      '@inquirer/type': 4.0.7(@types/node@24.13.3)
+      '@inquirer/core': 12.0.2(@types/node@24.13.3)
+      '@inquirer/type': 4.1.1(@types/node@24.13.3)
     optionalDependencies:
       '@types/node': 24.13.3
 
-  '@inquirer/external-editor@3.0.3(@types/node@24.13.3)':
+  '@inquirer/external-editor@3.0.5(@types/node@24.13.3)':
     dependencies:
       chardet: 2.2.0
       iconv-lite: 0.7.3
     optionalDependencies:
       '@types/node': 24.13.3
 
-  '@inquirer/figures@2.0.7': {}
+  '@inquirer/figures@2.0.9': {}
 
-  '@inquirer/input@5.1.2(@types/node@24.13.3)':
+  '@inquirer/input@5.1.5(@types/node@24.13.3)':
     dependencies:
-      '@inquirer/core': 11.2.1(@types/node@24.13.3)
-      '@inquirer/type': 4.0.7(@types/node@24.13.3)
+      '@inquirer/core': 12.0.2(@types/node@24.13.3)
+      '@inquirer/type': 4.1.1(@types/node@24.13.3)
     optionalDependencies:
       '@types/node': 24.13.3
 
-  '@inquirer/number@4.1.1(@types/node@24.13.3)':
+  '@inquirer/number@4.2.2(@types/node@24.13.3)':
     dependencies:
-      '@inquirer/core': 11.2.1(@types/node@24.13.3)
-      '@inquirer/type': 4.0.7(@types/node@24.13.3)
+      '@inquirer/core': 12.0.2(@types/node@24.13.3)
+      '@inquirer/type': 4.1.1(@types/node@24.13.3)
     optionalDependencies:
       '@types/node': 24.13.3
 
-  '@inquirer/password@5.1.1(@types/node@24.13.3)':
+  '@inquirer/password@5.2.1(@types/node@24.13.3)':
     dependencies:
-      '@inquirer/ansi': 2.0.7
-      '@inquirer/core': 11.2.1(@types/node@24.13.3)
-      '@inquirer/type': 4.0.7(@types/node@24.13.3)
+      '@inquirer/ansi': 2.0.8
+      '@inquirer/core': 12.0.2(@types/node@24.13.3)
+      '@inquirer/type': 4.1.1(@types/node@24.13.3)
     optionalDependencies:
       '@types/node': 24.13.3
 
-  '@inquirer/prompts@8.5.2(@types/node@24.13.3)':
+  '@inquirer/prompts@8.7.1(@types/node@24.13.3)':
     dependencies:
-      '@inquirer/checkbox': 5.2.1(@types/node@24.13.3)
-      '@inquirer/confirm': 6.1.1(@types/node@24.13.3)
-      '@inquirer/editor': 5.2.2(@types/node@24.13.3)
-      '@inquirer/expand': 5.1.1(@types/node@24.13.3)
-      '@inquirer/input': 5.1.2(@types/node@24.13.3)
-      '@inquirer/number': 4.1.1(@types/node@24.13.3)
-      '@inquirer/password': 5.1.1(@types/node@24.13.3)
-      '@inquirer/rawlist': 5.3.1(@types/node@24.13.3)
-      '@inquirer/search': 4.2.1(@types/node@24.13.3)
-      '@inquirer/select': 5.2.1(@types/node@24.13.3)
+      '@inquirer/checkbox': 5.2.4(@types/node@24.13.3)
+      '@inquirer/confirm': 6.3.1(@types/node@24.13.3)
+      '@inquirer/editor': 5.3.2(@types/node@24.13.3)
+      '@inquirer/expand': 5.1.4(@types/node@24.13.3)
+      '@inquirer/input': 5.1.5(@types/node@24.13.3)
+      '@inquirer/number': 4.2.2(@types/node@24.13.3)
+      '@inquirer/password': 5.2.1(@types/node@24.13.3)
+      '@inquirer/rawlist': 5.3.4(@types/node@24.13.3)
+      '@inquirer/search': 4.3.2(@types/node@24.13.3)
+      '@inquirer/select': 5.2.4(@types/node@24.13.3)
     optionalDependencies:
       '@types/node': 24.13.3
 
-  '@inquirer/rawlist@5.3.1(@types/node@24.13.3)':
+  '@inquirer/rawlist@5.3.4(@types/node@24.13.3)':
     dependencies:
-      '@inquirer/core': 11.2.1(@types/node@24.13.3)
-      '@inquirer/type': 4.0.7(@types/node@24.13.3)
+      '@inquirer/core': 12.0.2(@types/node@24.13.3)
+      '@inquirer/type': 4.1.1(@types/node@24.13.3)
     optionalDependencies:
       '@types/node': 24.13.3
 
-  '@inquirer/search@4.2.1(@types/node@24.13.3)':
+  '@inquirer/search@4.3.2(@types/node@24.13.3)':
     dependencies:
-      '@inquirer/core': 11.2.1(@types/node@24.13.3)
-      '@inquirer/figures': 2.0.7
-      '@inquirer/type': 4.0.7(@types/node@24.13.3)
+      '@inquirer/core': 12.0.2(@types/node@24.13.3)
+      '@inquirer/figures': 2.0.9
+      '@inquirer/type': 4.1.1(@types/node@24.13.3)
     optionalDependencies:
       '@types/node': 24.13.3
 
-  '@inquirer/select@5.2.1(@types/node@24.13.3)':
+  '@inquirer/select@5.2.4(@types/node@24.13.3)':
     dependencies:
-      '@inquirer/ansi': 2.0.7
-      '@inquirer/core': 11.2.1(@types/node@24.13.3)
-      '@inquirer/figures': 2.0.7
-      '@inquirer/type': 4.0.7(@types/node@24.13.3)
+      '@inquirer/ansi': 2.0.8
+      '@inquirer/core': 12.0.2(@types/node@24.13.3)
+      '@inquirer/figures': 2.0.9
+      '@inquirer/type': 4.1.1(@types/node@24.13.3)
     optionalDependencies:
       '@types/node': 24.13.3
 
-  '@inquirer/type@4.0.7(@types/node@24.13.3)':
+  '@inquirer/type@4.1.1(@types/node@24.13.3)':
     optionalDependencies:
       '@types/node': 24.13.3
 
@@ -7042,11 +7054,11 @@ snapshots:
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: wrap-ansi@7.0.0
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0(typescript@5.9.3)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))':
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0(typescript@5.9.3)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))':
     dependencies:
       glob: 10.5.0
       react-docgen-typescript: 2.4.0(typescript@5.9.3)
-      vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)
+      vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)
     optionalDependencies:
       typescript: 5.9.3
 
@@ -7069,6 +7081,8 @@ snapshots:
 
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
+  '@jridgewell/sourcemap-codec@1.6.0': {}
+
   '@jridgewell/trace-mapping@0.3.31':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
@@ -7108,10 +7122,10 @@ snapshots:
 
   '@matrix-org/matrix-sdk-crypto-wasm@18.5.0': {}
 
-  '@mdx-js/react@3.1.1(@types/react@19.2.17)(react@19.2.8)':
+  '@mdx-js/react@3.1.1(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
       '@types/mdx': 2.0.14
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
       react: 19.2.8
 
   '@mediapipe/tasks-vision@0.10.35': {}
@@ -7123,21 +7137,14 @@ snapshots:
       '@tybys/wasm-util': 0.10.2
     optional: true
 
-  '@napi-rs/wasm-runtime@1.2.2(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
+  '@napi-rs/wasm-runtime@1.2.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)':
     dependencies:
-      '@emnapi/core': 1.11.1
-      '@emnapi/runtime': 1.11.1
+      '@emnapi/core': 1.11.0
+      '@emnapi/runtime': 1.11.0
       '@tybys/wasm-util': 0.10.3
     optional: true
 
-  '@napi-rs/wasm-runtime@1.2.2(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)':
-    dependencies:
-      '@emnapi/core': 1.11.2
-      '@emnapi/runtime': 1.11.2
-      '@tybys/wasm-util': 0.10.3
-    optional: true
-
-  '@napi-rs/wasm-runtime@1.2.2(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
+  '@napi-rs/wasm-runtime@1.2.3(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
     dependencies:
       '@emnapi/core': 1.9.2
       '@emnapi/runtime': 1.9.2
@@ -7269,7 +7276,7 @@ snapshots:
     dependencies:
       '@emnapi/core': 1.9.2
       '@emnapi/runtime': 1.9.2
-      '@napi-rs/wasm-runtime': 1.2.2(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
+      '@napi-rs/wasm-runtime': 1.2.3(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
     optional: true
 
   '@oxc-parser/binding-win32-arm64-msvc@0.127.0':
@@ -7283,102 +7290,102 @@ snapshots:
 
   '@oxc-project/types@0.127.0': {}
 
-  '@oxc-project/types@0.139.0': {}
+  '@oxc-project/types@0.148.0': {}
 
   '@oxc-resolver/binding-android-arm-eabi@11.19.1':
     optional: true
 
-  '@oxc-resolver/binding-android-arm-eabi@11.24.2':
+  '@oxc-resolver/binding-android-arm-eabi@11.21.2':
     optional: true
 
   '@oxc-resolver/binding-android-arm64@11.19.1':
     optional: true
 
-  '@oxc-resolver/binding-android-arm64@11.24.2':
+  '@oxc-resolver/binding-android-arm64@11.21.2':
     optional: true
 
   '@oxc-resolver/binding-darwin-arm64@11.19.1':
     optional: true
 
-  '@oxc-resolver/binding-darwin-arm64@11.24.2':
+  '@oxc-resolver/binding-darwin-arm64@11.21.2':
     optional: true
 
   '@oxc-resolver/binding-darwin-x64@11.19.1':
     optional: true
 
-  '@oxc-resolver/binding-darwin-x64@11.24.2':
+  '@oxc-resolver/binding-darwin-x64@11.21.2':
     optional: true
 
   '@oxc-resolver/binding-freebsd-x64@11.19.1':
     optional: true
 
-  '@oxc-resolver/binding-freebsd-x64@11.24.2':
+  '@oxc-resolver/binding-freebsd-x64@11.21.2':
     optional: true
 
   '@oxc-resolver/binding-linux-arm-gnueabihf@11.19.1':
     optional: true
 
-  '@oxc-resolver/binding-linux-arm-gnueabihf@11.24.2':
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.21.2':
     optional: true
 
   '@oxc-resolver/binding-linux-arm-musleabihf@11.19.1':
     optional: true
 
-  '@oxc-resolver/binding-linux-arm-musleabihf@11.24.2':
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.21.2':
     optional: true
 
   '@oxc-resolver/binding-linux-arm64-gnu@11.19.1':
     optional: true
 
-  '@oxc-resolver/binding-linux-arm64-gnu@11.24.2':
+  '@oxc-resolver/binding-linux-arm64-gnu@11.21.2':
     optional: true
 
   '@oxc-resolver/binding-linux-arm64-musl@11.19.1':
     optional: true
 
-  '@oxc-resolver/binding-linux-arm64-musl@11.24.2':
+  '@oxc-resolver/binding-linux-arm64-musl@11.21.2':
     optional: true
 
   '@oxc-resolver/binding-linux-ppc64-gnu@11.19.1':
     optional: true
 
-  '@oxc-resolver/binding-linux-ppc64-gnu@11.24.2':
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.21.2':
     optional: true
 
   '@oxc-resolver/binding-linux-riscv64-gnu@11.19.1':
     optional: true
 
-  '@oxc-resolver/binding-linux-riscv64-gnu@11.24.2':
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.21.2':
     optional: true
 
   '@oxc-resolver/binding-linux-riscv64-musl@11.19.1':
     optional: true
 
-  '@oxc-resolver/binding-linux-riscv64-musl@11.24.2':
+  '@oxc-resolver/binding-linux-riscv64-musl@11.21.2':
     optional: true
 
   '@oxc-resolver/binding-linux-s390x-gnu@11.19.1':
     optional: true
 
-  '@oxc-resolver/binding-linux-s390x-gnu@11.24.2':
+  '@oxc-resolver/binding-linux-s390x-gnu@11.21.2':
     optional: true
 
   '@oxc-resolver/binding-linux-x64-gnu@11.19.1':
     optional: true
 
-  '@oxc-resolver/binding-linux-x64-gnu@11.24.2':
+  '@oxc-resolver/binding-linux-x64-gnu@11.21.2':
     optional: true
 
   '@oxc-resolver/binding-linux-x64-musl@11.19.1':
     optional: true
 
-  '@oxc-resolver/binding-linux-x64-musl@11.24.2':
+  '@oxc-resolver/binding-linux-x64-musl@11.21.2':
     optional: true
 
   '@oxc-resolver/binding-openharmony-arm64@11.19.1':
     optional: true
 
-  '@oxc-resolver/binding-openharmony-arm64@11.24.2':
+  '@oxc-resolver/binding-openharmony-arm64@11.21.2':
     optional: true
 
   '@oxc-resolver/binding-wasm32-wasi@11.19.1(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)':
@@ -7389,17 +7396,17 @@ snapshots:
       - '@emnapi/runtime'
     optional: true
 
-  '@oxc-resolver/binding-wasm32-wasi@11.24.2':
+  '@oxc-resolver/binding-wasm32-wasi@11.21.2':
     dependencies:
-      '@emnapi/core': 1.11.2
-      '@emnapi/runtime': 1.11.2
-      '@napi-rs/wasm-runtime': 1.2.2(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)
+      '@emnapi/core': 1.11.0
+      '@emnapi/runtime': 1.11.0
+      '@napi-rs/wasm-runtime': 1.2.3(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)
     optional: true
 
   '@oxc-resolver/binding-win32-arm64-msvc@11.19.1':
     optional: true
 
-  '@oxc-resolver/binding-win32-arm64-msvc@11.24.2':
+  '@oxc-resolver/binding-win32-arm64-msvc@11.21.2':
     optional: true
 
   '@oxc-resolver/binding-win32-ia32-msvc@11.19.1':
@@ -7408,64 +7415,64 @@ snapshots:
   '@oxc-resolver/binding-win32-x64-msvc@11.19.1':
     optional: true
 
-  '@oxc-resolver/binding-win32-x64-msvc@11.24.2':
+  '@oxc-resolver/binding-win32-x64-msvc@11.21.2':
     optional: true
 
-  '@oxfmt/binding-android-arm-eabi@0.61.0':
+  '@oxfmt/binding-android-arm-eabi@0.66.0':
     optional: true
 
-  '@oxfmt/binding-android-arm64@0.61.0':
+  '@oxfmt/binding-android-arm64@0.66.0':
     optional: true
 
-  '@oxfmt/binding-darwin-arm64@0.61.0':
+  '@oxfmt/binding-darwin-arm64@0.66.0':
     optional: true
 
-  '@oxfmt/binding-darwin-x64@0.61.0':
+  '@oxfmt/binding-darwin-x64@0.66.0':
     optional: true
 
-  '@oxfmt/binding-freebsd-x64@0.61.0':
+  '@oxfmt/binding-freebsd-x64@0.66.0':
     optional: true
 
-  '@oxfmt/binding-linux-arm-gnueabihf@0.61.0':
+  '@oxfmt/binding-linux-arm-gnueabihf@0.66.0':
     optional: true
 
-  '@oxfmt/binding-linux-arm-musleabihf@0.61.0':
+  '@oxfmt/binding-linux-arm-musleabihf@0.66.0':
     optional: true
 
-  '@oxfmt/binding-linux-arm64-gnu@0.61.0':
+  '@oxfmt/binding-linux-arm64-gnu@0.66.0':
     optional: true
 
-  '@oxfmt/binding-linux-arm64-musl@0.61.0':
+  '@oxfmt/binding-linux-arm64-musl@0.66.0':
     optional: true
 
-  '@oxfmt/binding-linux-ppc64-gnu@0.61.0':
+  '@oxfmt/binding-linux-ppc64-gnu@0.66.0':
     optional: true
 
-  '@oxfmt/binding-linux-riscv64-gnu@0.61.0':
+  '@oxfmt/binding-linux-riscv64-gnu@0.66.0':
     optional: true
 
-  '@oxfmt/binding-linux-riscv64-musl@0.61.0':
+  '@oxfmt/binding-linux-riscv64-musl@0.66.0':
     optional: true
 
-  '@oxfmt/binding-linux-s390x-gnu@0.61.0':
+  '@oxfmt/binding-linux-s390x-gnu@0.66.0':
     optional: true
 
-  '@oxfmt/binding-linux-x64-gnu@0.61.0':
+  '@oxfmt/binding-linux-x64-gnu@0.66.0':
     optional: true
 
-  '@oxfmt/binding-linux-x64-musl@0.61.0':
+  '@oxfmt/binding-linux-x64-musl@0.66.0':
     optional: true
 
-  '@oxfmt/binding-openharmony-arm64@0.61.0':
+  '@oxfmt/binding-openharmony-arm64@0.66.0':
     optional: true
 
-  '@oxfmt/binding-win32-arm64-msvc@0.61.0':
+  '@oxfmt/binding-win32-arm64-msvc@0.66.0':
     optional: true
 
-  '@oxfmt/binding-win32-ia32-msvc@0.61.0':
+  '@oxfmt/binding-win32-ia32-msvc@0.66.0':
     optional: true
 
-  '@oxfmt/binding-win32-x64-msvc@0.61.0':
+  '@oxfmt/binding-win32-x64-msvc@0.66.0':
     optional: true
 
   '@oxlint-tsgolint/darwin-arm64@0.25.0':
@@ -7486,61 +7493,61 @@ snapshots:
   '@oxlint-tsgolint/win32-x64@0.25.0':
     optional: true
 
-  '@oxlint/binding-android-arm-eabi@1.76.0':
+  '@oxlint/binding-android-arm-eabi@1.81.0':
     optional: true
 
-  '@oxlint/binding-android-arm64@1.76.0':
+  '@oxlint/binding-android-arm64@1.81.0':
     optional: true
 
-  '@oxlint/binding-darwin-arm64@1.76.0':
+  '@oxlint/binding-darwin-arm64@1.81.0':
     optional: true
 
-  '@oxlint/binding-darwin-x64@1.76.0':
+  '@oxlint/binding-darwin-x64@1.81.0':
     optional: true
 
-  '@oxlint/binding-freebsd-x64@1.76.0':
+  '@oxlint/binding-freebsd-x64@1.81.0':
     optional: true
 
-  '@oxlint/binding-linux-arm-gnueabihf@1.76.0':
+  '@oxlint/binding-linux-arm-gnueabihf@1.81.0':
     optional: true
 
-  '@oxlint/binding-linux-arm-musleabihf@1.76.0':
+  '@oxlint/binding-linux-arm-musleabihf@1.81.0':
     optional: true
 
-  '@oxlint/binding-linux-arm64-gnu@1.76.0':
+  '@oxlint/binding-linux-arm64-gnu@1.81.0':
     optional: true
 
-  '@oxlint/binding-linux-arm64-musl@1.76.0':
+  '@oxlint/binding-linux-arm64-musl@1.81.0':
     optional: true
 
-  '@oxlint/binding-linux-ppc64-gnu@1.76.0':
+  '@oxlint/binding-linux-ppc64-gnu@1.81.0':
     optional: true
 
-  '@oxlint/binding-linux-riscv64-gnu@1.76.0':
+  '@oxlint/binding-linux-riscv64-gnu@1.81.0':
     optional: true
 
-  '@oxlint/binding-linux-riscv64-musl@1.76.0':
+  '@oxlint/binding-linux-riscv64-musl@1.81.0':
     optional: true
 
-  '@oxlint/binding-linux-s390x-gnu@1.76.0':
+  '@oxlint/binding-linux-s390x-gnu@1.81.0':
     optional: true
 
-  '@oxlint/binding-linux-x64-gnu@1.76.0':
+  '@oxlint/binding-linux-x64-gnu@1.81.0':
     optional: true
 
-  '@oxlint/binding-linux-x64-musl@1.76.0':
+  '@oxlint/binding-linux-x64-musl@1.81.0':
     optional: true
 
-  '@oxlint/binding-openharmony-arm64@1.76.0':
+  '@oxlint/binding-openharmony-arm64@1.81.0':
     optional: true
 
-  '@oxlint/binding-win32-arm64-msvc@1.76.0':
+  '@oxlint/binding-win32-arm64-msvc@1.81.0':
     optional: true
 
-  '@oxlint/binding-win32-ia32-msvc@1.76.0':
+  '@oxlint/binding-win32-ia32-msvc@1.81.0':
     optional: true
 
-  '@oxlint/binding-win32-x64-msvc@1.76.0':
+  '@oxlint/binding-win32-x64-msvc@1.81.0':
     optional: true
 
   '@parcel/watcher-android-arm64@2.6.0':
@@ -7584,7 +7591,7 @@ snapshots:
       detect-libc: 2.1.2
       is-glob: 4.0.3
       node-addon-api: 7.1.1
-      picomatch: 4.0.5
+      picomatch: 4.0.7
     optionalDependencies:
       '@parcel/watcher-android-arm64': 2.6.0
       '@parcel/watcher-darwin-arm64': 2.6.0
@@ -7603,9 +7610,9 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
-  '@playwright/test@1.62.0':
+  '@playwright/test@1.62.1':
     dependencies:
-      playwright: 1.62.0
+      playwright: 1.62.1
 
   '@polka/url@1.0.0-next.29': {}
 
@@ -7624,354 +7631,354 @@ snapshots:
 
   '@radix-ui/primitive@1.1.7': {}
 
-  '@radix-ui/react-arrow@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-arrow@1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.5(@types/react@19.2.18)
 
-  '@radix-ui/react-collection@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-collection@1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.5(@types/react@19.2.18)
 
-  '@radix-ui/react-compose-refs@1.1.5(@types/react@19.2.17)(react@19.2.8)':
+  '@radix-ui/react-compose-refs@1.1.5(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
       react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-context-menu@2.3.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-context-menu@2.3.7(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-context': 1.2.2(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.5(@types/react@19.2.18)
 
-  '@radix-ui/react-context@1.2.2(@types/react@19.2.17)(react@19.2.8)':
+  '@radix-ui/react-context@1.2.2(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
       react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-dialog@1.1.23(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-dialog@1.1.23(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-id': 1.1.4(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       aria-hidden: 1.2.6
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
-      react-remove-scroll: 2.7.2(@types/react@19.2.17)(react@19.2.8)
+      react-remove-scroll: 2.7.2(@types/react@19.2.18)(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.5(@types/react@19.2.18)
 
-  '@radix-ui/react-direction@1.1.4(@types/react@19.2.17)(react@19.2.8)':
+  '@radix-ui/react-direction@1.1.4(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
       react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-dismissable-layer@1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-dismissable-layer@1.1.19(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.5(@types/react@19.2.18)
 
-  '@radix-ui/react-dropdown-menu@2.1.24(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-dropdown-menu@2.1.24(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-id': 1.1.4(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.5(@types/react@19.2.18)
 
-  '@radix-ui/react-focus-guards@1.1.6(@types/react@19.2.17)(react@19.2.8)':
+  '@radix-ui/react-focus-guards@1.1.6(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
       react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-focus-scope@1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-focus-scope@1.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.5(@types/react@19.2.18)
 
-  '@radix-ui/react-form@0.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-form@0.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-id': 1.1.4(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-label': 2.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-label': 2.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.5(@types/react@19.2.18)
 
-  '@radix-ui/react-id@1.1.4(@types/react@19.2.17)(react@19.2.8)':
+  '@radix-ui/react-id@1.1.4(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-label@2.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-label@2.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.5(@types/react@19.2.18)
 
-  '@radix-ui/react-menu@2.1.24(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-menu@2.1.24(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-id': 1.1.4(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       aria-hidden: 1.2.6
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
-      react-remove-scroll: 2.7.2(@types/react@19.2.17)(react@19.2.8)
+      react-remove-scroll: 2.7.2(@types/react@19.2.18)(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.5(@types/react@19.2.18)
 
-  '@radix-ui/react-popper@1.3.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-popper@1.3.7(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-arrow': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-use-rect': 1.1.4(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-arrow': 1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-rect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/rect': 1.1.3
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.5(@types/react@19.2.18)
 
-  '@radix-ui/react-portal@1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-portal@1.1.17(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.5(@types/react@19.2.18)
 
-  '@radix-ui/react-presence@1.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-presence@1.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.5(@types/react@19.2.18)
 
-  '@radix-ui/react-primitive@2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-primitive@2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.5(@types/react@19.2.18)
 
-  '@radix-ui/react-progress@1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-progress@1.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-context': 1.2.2(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.5(@types/react@19.2.18)
 
-  '@radix-ui/react-roving-focus@1.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-roving-focus@1.1.19(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-id': 1.1.4(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.5(@types/react@19.2.18)
 
-  '@radix-ui/react-separator@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-separator@1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.5(@types/react@19.2.18)
 
-  '@radix-ui/react-slider@1.4.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-slider@1.4.7(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@radix-ui/number': 1.1.3
       '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-use-previous': 1.1.4(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-previous': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.5(@types/react@19.2.18)
 
-  '@radix-ui/react-slot@1.3.3(@types/react@19.2.17)(react@19.2.8)':
+  '@radix-ui/react-slot@1.3.3(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-use-callback-ref@1.1.4(@types/react@19.2.17)(react@19.2.8)':
+  '@radix-ui/react-use-callback-ref@1.1.4(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
       react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-use-controllable-state@1.2.6(@types/react@19.2.17)(react@19.2.8)':
+  '@radix-ui/react-use-controllable-state@1.2.6(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.17)(react@19.2.8)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-use-effect-event@0.0.5(@types/react@19.2.17)(react@19.2.8)':
+  '@radix-ui/react-use-effect-event@0.0.5(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-use-is-hydrated@0.1.3(@types/react@19.2.17)(react@19.2.8)':
+  '@radix-ui/react-use-is-hydrated@0.1.3(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
       react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-use-layout-effect@1.1.4(@types/react@19.2.17)(react@19.2.8)':
+  '@radix-ui/react-use-layout-effect@1.1.4(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
       react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-use-previous@1.1.4(@types/react@19.2.17)(react@19.2.8)':
+  '@radix-ui/react-use-previous@1.1.4(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
       react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-use-rect@1.1.4(@types/react@19.2.17)(react@19.2.8)':
+  '@radix-ui/react-use-rect@1.1.4(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
       '@radix-ui/rect': 1.1.3
       react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-use-size@1.1.4(@types/react@19.2.17)(react@19.2.8)':
+  '@radix-ui/react-use-size@1.1.4(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-visually-hidden@1.2.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@radix-ui/react-visually-hidden@1.2.11(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.5(@types/react@19.2.18)
 
   '@radix-ui/rect@1.1.3': {}
 
@@ -8008,63 +8015,59 @@ snapshots:
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
 
-  '@rolldown/binding-android-arm64@1.1.5':
+  '@rolldown/binding-android-arm-eabi@1.2.7':
     optional: true
 
-  '@rolldown/binding-darwin-arm64@1.1.5':
+  '@rolldown/binding-android-arm64@1.2.7':
     optional: true
 
-  '@rolldown/binding-darwin-x64@1.1.5':
+  '@rolldown/binding-darwin-arm64@1.2.7':
     optional: true
 
-  '@rolldown/binding-freebsd-x64@1.1.5':
+  '@rolldown/binding-darwin-x64@1.2.7':
     optional: true
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.1.5':
+  '@rolldown/binding-freebsd-x64@1.2.7':
     optional: true
 
-  '@rolldown/binding-linux-arm64-gnu@1.1.5':
+  '@rolldown/binding-linux-arm-gnueabihf@1.2.7':
     optional: true
 
-  '@rolldown/binding-linux-arm64-musl@1.1.5':
+  '@rolldown/binding-linux-arm64-gnu@1.2.7':
     optional: true
 
-  '@rolldown/binding-linux-ppc64-gnu@1.1.5':
+  '@rolldown/binding-linux-arm64-musl@1.2.7':
     optional: true
 
-  '@rolldown/binding-linux-s390x-gnu@1.1.5':
+  '@rolldown/binding-linux-ppc64-gnu@1.2.7':
     optional: true
 
-  '@rolldown/binding-linux-x64-gnu@1.1.5':
+  '@rolldown/binding-linux-s390x-gnu@1.2.7':
     optional: true
 
-  '@rolldown/binding-linux-x64-musl@1.1.5':
+  '@rolldown/binding-linux-x64-gnu@1.2.7':
     optional: true
 
-  '@rolldown/binding-openharmony-arm64@1.1.5':
+  '@rolldown/binding-linux-x64-musl@1.2.7':
     optional: true
 
-  '@rolldown/binding-wasm32-wasi@1.1.5':
-    dependencies:
-      '@emnapi/core': 1.11.1
-      '@emnapi/runtime': 1.11.1
-      '@napi-rs/wasm-runtime': 1.2.2(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)
+  '@rolldown/binding-openharmony-arm64@1.2.7':
     optional: true
 
-  '@rolldown/binding-win32-arm64-msvc@1.1.5':
+  '@rolldown/binding-win32-arm64-msvc@1.2.7':
     optional: true
 
-  '@rolldown/binding-win32-x64-msvc@1.1.5':
+  '@rolldown/binding-win32-x64-msvc@1.2.7':
     optional: true
 
-  '@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))':
+  '@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.2.7)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))':
     dependencies:
       '@babel/core': 7.29.7(supports-color@7.2.0)
       picomatch: 4.0.4
-      rolldown: 1.1.5
+      rolldown: 1.2.7
     optionalDependencies:
       '@babel/runtime': 8.0.0
-      vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)
+      vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)
 
   '@rolldown/pluginutils@1.0.1': {}
 
@@ -8093,7 +8096,7 @@ snapshots:
     dependencies:
       '@types/estree': 1.0.9
       estree-walker: 2.0.2
-      picomatch: 4.0.5
+      picomatch: 4.0.7
     optionalDependencies:
       rollup: 4.60.1
 
@@ -8281,57 +8284,39 @@ snapshots:
 
   '@standard-schema/spec@1.1.0': {}
 
-  '@storybook/addon-docs@10.5.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(rollup@4.60.1)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))':
+  '@storybook/addon-docs@10.6.0(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))':
     dependencies:
-      '@mdx-js/react': 3.1.1(@types/react@19.2.17)(react@19.2.8)
-      '@storybook/csf-plugin': 10.5.5(esbuild@0.28.1)(rollup@4.60.1)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+      '@mdx-js/react': 3.1.1(@types/react@19.2.18)(react@19.2.8)
       '@storybook/icons': 2.1.0(react@19.2.8)
-      '@storybook/react-dom-shim': 10.5.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))
+      '@storybook/react-dom-shim': 10.6.0(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
-      storybook: 10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8)
+      storybook: 10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8)
       ts-dedent: 2.3.0
+      unplugin: 2.3.11
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
     transitivePeerDependencies:
       - '@types/react-dom'
-      - esbuild
-      - rollup
-      - vite
-      - webpack
 
-  '@storybook/addon-vitest@10.5.5(@vitest/browser-playwright@4.1.10)(@vitest/browser@4.1.10)(@vitest/runner@4.1.10)(react@19.2.8)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(vitest@4.1.10)':
+  '@storybook/addon-vitest@10.6.0(@vitest/browser-playwright@4.1.11)(@vitest/browser@4.1.11)(@vitest/runner@4.1.11)(react@19.2.8)(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))(vitest@4.1.11)':
     dependencies:
       '@storybook/global': 5.0.0
       '@storybook/icons': 2.1.0(react@19.2.8)
-      storybook: 10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8)
+      storybook: 10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8)
     optionalDependencies:
-      '@vitest/browser': 4.1.10(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.10)
-      '@vitest/browser-playwright': 4.1.10(playwright@1.62.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.10)
-      '@vitest/runner': 4.1.10
-      vitest: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+      '@vitest/browser': 4.1.11(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.11)
+      '@vitest/browser-playwright': 4.1.11(playwright@1.62.1)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.11)
+      '@vitest/runner': 4.1.11
+      vitest: 4.1.11(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(@vitest/ui@4.1.11)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
     transitivePeerDependencies:
       - react
 
-  '@storybook/builder-vite@10.5.5(esbuild@0.28.1)(rollup@4.60.1)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))':
+  '@storybook/builder-vite@10.6.0(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))':
     dependencies:
-      '@storybook/csf-plugin': 10.5.5(esbuild@0.28.1)(rollup@4.60.1)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
-      storybook: 10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8)
+      storybook: 10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8)
       ts-dedent: 2.3.0
-      vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)
-    transitivePeerDependencies:
-      - esbuild
-      - rollup
-      - webpack
-
-  '@storybook/csf-plugin@10.5.5(esbuild@0.28.1)(rollup@4.60.1)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))':
-    dependencies:
-      storybook: 10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8)
-      unplugin: 2.3.11
-    optionalDependencies:
-      esbuild: 0.28.1
-      rollup: 4.60.1
-      vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)
+      vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)
 
   '@storybook/global@5.0.0': {}
 
@@ -8339,52 +8324,50 @@ snapshots:
     dependencies:
       react: 19.2.8
 
-  '@storybook/react-dom-shim@10.5.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))':
+  '@storybook/react-dom-shim@10.6.0(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))':
     dependencies:
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
-      storybook: 10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8)
+      storybook: 10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.5(@types/react@19.2.18)
 
-  '@storybook/react-vite@10.5.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(rollup@4.60.1)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(supports-color@7.2.0)(typescript@5.9.3)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))':
+  '@storybook/react-vite@10.6.0(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(rollup@4.60.1)(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))(supports-color@7.2.0)(typescript@5.9.3)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))':
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(typescript@5.9.3)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(typescript@5.9.3)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
       '@rollup/pluginutils': 5.4.0(rollup@4.60.1)
-      '@storybook/builder-vite': 10.5.5(esbuild@0.28.1)(rollup@4.60.1)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
-      '@storybook/react': 10.5.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(supports-color@7.2.0)(typescript@5.9.3)
+      '@storybook/builder-vite': 10.6.0(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
+      '@storybook/react': 10.6.0(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))(supports-color@7.2.0)(typescript@5.9.3)
       empathic: 2.0.1
-      magic-string: 0.30.21
+      magic-string: 1.2.3
       react: 19.2.8
       react-docgen: 8.0.3(supports-color@7.2.0)
       react-dom: 19.2.8(react@19.2.8)
       resolve: 1.22.12
-      storybook: 10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8)
+      storybook: 10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8)
       tsconfig-paths: 4.2.0
-      vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)
+      vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)
     optionalDependencies:
       typescript: 5.9.3
     transitivePeerDependencies:
       - '@types/react'
       - '@types/react-dom'
-      - esbuild
       - rollup
       - supports-color
-      - webpack
 
-  '@storybook/react@10.5.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(supports-color@7.2.0)(typescript@5.9.3)':
+  '@storybook/react@10.6.0(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))(supports-color@7.2.0)(typescript@5.9.3)':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 10.5.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))
+      '@storybook/react-dom-shim': 10.6.0(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8))
       react: 19.2.8
       react-docgen: 8.0.3(supports-color@7.2.0)
       react-docgen-typescript: 2.4.0(typescript@5.9.3)
       react-dom: 19.2.8(react@19.2.8)
-      storybook: 10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8)
+      storybook: 10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.5(@types/react@19.2.18)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
@@ -8459,59 +8442,59 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@swc/core-darwin-arm64@1.15.47':
+  '@swc/core-darwin-arm64@1.16.2':
     optional: true
 
-  '@swc/core-darwin-x64@1.15.47':
+  '@swc/core-darwin-x64@1.16.2':
     optional: true
 
-  '@swc/core-linux-arm-gnueabihf@1.15.47':
+  '@swc/core-linux-arm-gnueabihf@1.16.2':
     optional: true
 
-  '@swc/core-linux-arm64-gnu@1.15.47':
+  '@swc/core-linux-arm64-gnu@1.16.2':
     optional: true
 
-  '@swc/core-linux-arm64-musl@1.15.47':
+  '@swc/core-linux-arm64-musl@1.16.2':
     optional: true
 
-  '@swc/core-linux-ppc64-gnu@1.15.47':
+  '@swc/core-linux-ppc64-gnu@1.16.2':
     optional: true
 
-  '@swc/core-linux-s390x-gnu@1.15.47':
+  '@swc/core-linux-s390x-gnu@1.16.2':
     optional: true
 
-  '@swc/core-linux-x64-gnu@1.15.47':
+  '@swc/core-linux-x64-gnu@1.16.2':
     optional: true
 
-  '@swc/core-linux-x64-musl@1.15.47':
+  '@swc/core-linux-x64-musl@1.16.2':
     optional: true
 
-  '@swc/core-win32-arm64-msvc@1.15.47':
+  '@swc/core-win32-arm64-msvc@1.16.2':
     optional: true
 
-  '@swc/core-win32-ia32-msvc@1.15.47':
+  '@swc/core-win32-ia32-msvc@1.16.2':
     optional: true
 
-  '@swc/core-win32-x64-msvc@1.15.47':
+  '@swc/core-win32-x64-msvc@1.16.2':
     optional: true
 
-  '@swc/core@1.15.47':
+  '@swc/core@1.16.2':
     dependencies:
       '@swc/counter': 0.1.3
       '@swc/types': 0.1.28
     optionalDependencies:
-      '@swc/core-darwin-arm64': 1.15.47
-      '@swc/core-darwin-x64': 1.15.47
-      '@swc/core-linux-arm-gnueabihf': 1.15.47
-      '@swc/core-linux-arm64-gnu': 1.15.47
-      '@swc/core-linux-arm64-musl': 1.15.47
-      '@swc/core-linux-ppc64-gnu': 1.15.47
-      '@swc/core-linux-s390x-gnu': 1.15.47
-      '@swc/core-linux-x64-gnu': 1.15.47
-      '@swc/core-linux-x64-musl': 1.15.47
-      '@swc/core-win32-arm64-msvc': 1.15.47
-      '@swc/core-win32-ia32-msvc': 1.15.47
-      '@swc/core-win32-x64-msvc': 1.15.47
+      '@swc/core-darwin-arm64': 1.16.2
+      '@swc/core-darwin-x64': 1.16.2
+      '@swc/core-linux-arm-gnueabihf': 1.16.2
+      '@swc/core-linux-arm64-gnu': 1.16.2
+      '@swc/core-linux-arm64-musl': 1.16.2
+      '@swc/core-linux-ppc64-gnu': 1.16.2
+      '@swc/core-linux-s390x-gnu': 1.16.2
+      '@swc/core-linux-x64-gnu': 1.16.2
+      '@swc/core-linux-x64-musl': 1.16.2
+      '@swc/core-win32-arm64-msvc': 1.16.2
+      '@swc/core-win32-ia32-msvc': 1.16.2
+      '@swc/core-win32-x64-msvc': 1.16.2
 
   '@swc/counter@0.1.3': {}
 
@@ -8539,17 +8522,17 @@ snapshots:
       picocolors: 1.1.1
       redent: 3.0.0
 
-  '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@testing-library/react@16.3.3(@testing-library/dom@10.4.1)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
-      '@babel/runtime': 7.29.2
+      '@babel/runtime': 7.29.7
       '@testing-library/dom': 10.4.1
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.5(@types/react@19.2.18)
 
-  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
+  '@testing-library/user-event@14.6.7(@testing-library/dom@10.4.1)':
     dependencies:
       '@testing-library/dom': 10.4.1
 
@@ -8644,11 +8627,11 @@ snapshots:
     dependencies:
       '@types/node': 24.13.3
 
-  '@types/react-dom@19.2.3(@types/react@19.2.17)':
+  '@types/react-dom@19.2.5(@types/react@19.2.18)':
     dependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
 
-  '@types/react@19.2.17':
+  '@types/react@19.2.18':
     dependencies:
       csstype: 3.2.3
 
@@ -8661,32 +8644,32 @@ snapshots:
   '@types/trusted-types@2.0.7':
     optional: true
 
-  '@typescript-eslint/project-service@8.65.0(supports-color@7.2.0)(typescript@5.9.3)':
+  '@typescript-eslint/project-service@8.69.0(supports-color@7.2.0)(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.65.0(typescript@5.9.3)
-      '@typescript-eslint/types': 8.65.0
+      '@typescript-eslint/tsconfig-utils': 8.69.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.69.0
       debug: 4.4.3(supports-color@7.2.0)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.65.0':
+  '@typescript-eslint/scope-manager@8.69.0':
     dependencies:
-      '@typescript-eslint/types': 8.65.0
-      '@typescript-eslint/visitor-keys': 8.65.0
+      '@typescript-eslint/types': 8.69.0
+      '@typescript-eslint/visitor-keys': 8.69.0
 
-  '@typescript-eslint/tsconfig-utils@8.65.0(typescript@5.9.3)':
+  '@typescript-eslint/tsconfig-utils@8.69.0(typescript@5.9.3)':
     dependencies:
       typescript: 5.9.3
 
-  '@typescript-eslint/types@8.65.0': {}
+  '@typescript-eslint/types@8.69.0': {}
 
-  '@typescript-eslint/typescript-estree@8.65.0(supports-color@7.2.0)(typescript@5.9.3)':
+  '@typescript-eslint/typescript-estree@8.69.0(supports-color@7.2.0)(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.65.0(supports-color@7.2.0)(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.65.0(typescript@5.9.3)
-      '@typescript-eslint/types': 8.65.0
-      '@typescript-eslint/visitor-keys': 8.65.0
+      '@typescript-eslint/project-service': 8.69.0(supports-color@7.2.0)(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.69.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.69.0
+      '@typescript-eslint/visitor-keys': 8.69.0
       debug: 4.4.3(supports-color@7.2.0)
       minimatch: 10.2.6
       semver: 7.8.5
@@ -8696,20 +8679,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.65.0(eslint@8.57.1(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.69.0(eslint@8.57.1(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.10.1(eslint@8.57.1(supports-color@7.2.0))
-      '@typescript-eslint/scope-manager': 8.65.0
-      '@typescript-eslint/types': 8.65.0
-      '@typescript-eslint/typescript-estree': 8.65.0(supports-color@7.2.0)(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.69.0
+      '@typescript-eslint/types': 8.69.0
+      '@typescript-eslint/typescript-estree': 8.69.0(supports-color@7.2.0)(typescript@5.9.3)
       eslint: 8.57.1(supports-color@7.2.0)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@8.65.0':
+  '@typescript-eslint/visitor-keys@8.69.0':
     dependencies:
-      '@typescript-eslint/types': 8.65.0
+      '@typescript-eslint/types': 8.69.0
       eslint-visitor-keys: 5.0.1
 
   '@ungap/structured-clone@1.3.3': {}
@@ -8721,64 +8704,64 @@ snapshots:
       '@use-gesture/core': 10.3.1
       react: 19.2.8
 
-  '@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.17)(react@19.2.8)':
+  '@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.18)(react@19.2.8)':
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
       react: 19.2.8
 
-  '@vector-im/compound-web@10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.17)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@vector-im/compound-web@10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@floating-ui/react': 0.27.20(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@fontsource/inconsolata': 5.3.0
       '@fontsource/inter': 5.3.0
-      '@radix-ui/react-context-menu': 2.3.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-dropdown-menu': 2.1.24(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-form': 0.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-progress': 1.1.16(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-separator': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
-      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.17)(react@19.2.8)
-      '@vector-im/compound-design-tokens': 10.2.4(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context-menu': 2.3.7(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-dropdown-menu': 2.1.24(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-form': 0.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-progress': 1.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-separator': 1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      '@vector-im/compound-design-tokens': 10.2.4(@types/react@19.2.18)(react@19.2.8)
       classnames: 2.5.1
       react: 19.2.8
-      vaul: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      vaul: 1.1.2(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
     transitivePeerDependencies:
       - '@types/react-dom'
       - react-dom
 
-  '@vitejs/plugin-react@6.0.5(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))':
+  '@vitejs/plugin-react@6.1.1(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.2.7)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))':
     dependencies:
       '@rolldown/pluginutils': 1.0.1
-      vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)
+      vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)
     optionalDependencies:
-      '@rolldown/plugin-babel': 0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.1.5)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+      '@rolldown/plugin-babel': 0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.2.7)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
       babel-plugin-react-compiler: 1.0.0
 
-  '@vitest/browser-playwright@4.1.10(playwright@1.62.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.10)':
+  '@vitest/browser-playwright@4.1.11(playwright@1.62.1)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.11)':
     dependencies:
-      '@vitest/browser': 4.1.10(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.10)
-      '@vitest/mocker': 4.1.10(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
-      playwright: 1.62.0
+      '@vitest/browser': 4.1.11(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.11)
+      '@vitest/mocker': 4.1.11(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
+      playwright: 1.62.1
       tinyrainbow: 3.1.1
-      vitest: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+      vitest: 4.1.11(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(@vitest/ui@4.1.11)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
     transitivePeerDependencies:
       - bufferutil
       - msw
       - utf-8-validate
       - vite
 
-  '@vitest/browser@4.1.10(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.10)':
+  '@vitest/browser@4.1.11(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.11)':
     dependencies:
       '@blazediff/core': 1.9.1
-      '@vitest/mocker': 4.1.10(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
-      '@vitest/utils': 4.1.10
+      '@vitest/mocker': 4.1.11(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
+      '@vitest/utils': 4.1.11
       magic-string: 0.30.21
       pngjs: 7.0.0
       sirv: 3.0.2
       tinyrainbow: 3.1.1
-      vitest: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+      vitest: 4.1.11(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(@vitest/ui@4.1.11)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
       ws: 8.21.1
     transitivePeerDependencies:
       - bufferutil
@@ -8786,10 +8769,10 @@ snapshots:
       - utf-8-validate
       - vite
 
-  '@vitest/coverage-v8@4.1.10(@vitest/browser@4.1.10)(vitest@4.1.10)':
+  '@vitest/coverage-v8@4.1.11(@vitest/browser@4.1.11)(vitest@4.1.11)':
     dependencies:
       '@bcoe/v8-coverage': 1.0.2
-      '@vitest/utils': 4.1.10
+      '@vitest/utils': 4.1.11
       ast-v8-to-istanbul: 1.0.5
       istanbul-lib-coverage: 3.2.2
       istanbul-lib-report: 3.0.1
@@ -8798,9 +8781,9 @@ snapshots:
       obug: 2.1.4
       std-env: 4.2.0
       tinyrainbow: 3.1.1
-      vitest: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+      vitest: 4.1.11(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(@vitest/ui@4.1.11)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
     optionalDependencies:
-      '@vitest/browser': 4.1.10(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.10)
+      '@vitest/browser': 4.1.11(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.11)
 
   '@vitest/expect@3.2.4':
     dependencies:
@@ -8810,59 +8793,59 @@ snapshots:
       chai: 5.3.3
       tinyrainbow: 2.0.0
 
-  '@vitest/expect@4.1.10':
+  '@vitest/expect@4.1.11':
     dependencies:
       '@standard-schema/spec': 1.1.0
       '@types/chai': 5.2.3
-      '@vitest/spy': 4.1.10
-      '@vitest/utils': 4.1.10
+      '@vitest/spy': 4.1.11
+      '@vitest/utils': 4.1.11
       chai: 6.2.2
       tinyrainbow: 3.1.1
 
-  '@vitest/mocker@4.1.10(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))':
+  '@vitest/mocker@4.1.11(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))':
     dependencies:
-      '@vitest/spy': 4.1.10
+      '@vitest/spy': 4.1.11
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)
+      vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)
 
   '@vitest/pretty-format@3.2.4':
     dependencies:
       tinyrainbow: 2.0.0
 
-  '@vitest/pretty-format@4.1.10':
+  '@vitest/pretty-format@4.1.11':
     dependencies:
       tinyrainbow: 3.1.1
 
-  '@vitest/runner@4.1.10':
+  '@vitest/runner@4.1.11':
     dependencies:
-      '@vitest/utils': 4.1.10
+      '@vitest/utils': 4.1.11
       pathe: 2.0.3
 
-  '@vitest/snapshot@4.1.10':
+  '@vitest/snapshot@4.1.11':
     dependencies:
-      '@vitest/pretty-format': 4.1.10
-      '@vitest/utils': 4.1.10
+      '@vitest/pretty-format': 4.1.11
+      '@vitest/utils': 4.1.11
       magic-string: 0.30.21
       pathe: 2.0.3
 
   '@vitest/spy@3.2.4':
     dependencies:
-      tinyspy: 4.0.4
+      tinyspy: 4.0.6
 
-  '@vitest/spy@4.1.10': {}
+  '@vitest/spy@4.1.11': {}
 
-  '@vitest/ui@4.1.10(vitest@4.1.10)':
+  '@vitest/ui@4.1.11(vitest@4.1.11)':
     dependencies:
-      '@vitest/utils': 4.1.10
+      '@vitest/utils': 4.1.11
       fflate: 0.8.2
       flatted: 3.4.4
       pathe: 2.0.3
       sirv: 3.0.2
       tinyglobby: 0.2.17
       tinyrainbow: 3.1.1
-      vitest: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+      vitest: 4.1.11(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(@vitest/ui@4.1.11)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
 
   '@vitest/utils@3.2.4':
     dependencies:
@@ -8870,9 +8853,9 @@ snapshots:
       loupe: 3.2.1
       tinyrainbow: 2.0.0
 
-  '@vitest/utils@4.1.10':
+  '@vitest/utils@4.1.11':
     dependencies:
-      '@vitest/pretty-format': 4.1.10
+      '@vitest/pretty-format': 4.1.11
       convert-source-map: 2.0.0
       tinyrainbow: 3.1.1
 
@@ -8905,7 +8888,7 @@ snapshots:
 
   ansi-regex@5.0.1: {}
 
-  ansi-regex@6.2.2: {}
+  ansi-regex@6.3.0: {}
 
   ansi-styles@4.3.0:
     dependencies:
@@ -8948,7 +8931,7 @@ snapshots:
 
   assertion-error@2.0.1: {}
 
-  ast-types@0.16.1:
+  ast-types@0.16.3:
     dependencies:
       tslib: 2.8.1
 
@@ -8960,13 +8943,13 @@ snapshots:
 
   async@3.2.6: {}
 
-  autoprefixer@10.5.0(postcss@8.5.25):
+  autoprefixer@10.5.0(postcss@8.5.26):
     dependencies:
       browserslist: 4.28.2
       caniuse-lite: 1.0.30001788
       fraction.js: 5.3.4
       picocolors: 1.1.1
-      postcss: 8.5.25
+      postcss: 8.5.26
       postcss-value-parser: 4.2.0
 
   available-typed-arrays@1.0.7:
@@ -9147,7 +9130,7 @@ snapshots:
 
   chokidar@5.0.0:
     dependencies:
-      readdirp: 5.0.0
+      readdirp: 5.1.1
 
   cipher-base@1.0.7:
     dependencies:
@@ -9185,7 +9168,7 @@ snapshots:
 
   colorette@2.0.20: {}
 
-  commander@14.0.3: {}
+  commander@15.0.0: {}
 
   commander@2.20.3: {}
 
@@ -9267,21 +9250,21 @@ snapshots:
       randombytes: 2.1.0
       randomfill: 1.0.4
 
-  css-blank-pseudo@7.0.1(postcss@8.5.25):
+  css-blank-pseudo@7.0.1(postcss@8.5.26):
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
       postcss-selector-parser: 7.1.1
 
-  css-has-pseudo@7.0.3(postcss@8.5.25):
+  css-has-pseudo@7.0.3(postcss@8.5.26):
     dependencies:
       '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1)
-      postcss: 8.5.25
+      postcss: 8.5.26
       postcss-selector-parser: 7.1.1
       postcss-value-parser: 4.2.0
 
-  css-prefers-color-scheme@10.0.0(postcss@8.5.25):
+  css-prefers-color-scheme@10.0.0(postcss@8.5.26):
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
 
   css-select@4.3.0:
     dependencies:
@@ -9327,7 +9310,7 @@ snapshots:
 
   default-browser-id@5.0.1: {}
 
-  default-browser@5.5.0:
+  default-browser@5.5.1:
     dependencies:
       bundle-name: 4.1.0
       default-browser-id: 5.0.1
@@ -9452,51 +9435,50 @@ snapshots:
 
   es-errors@1.3.0: {}
 
-  es-module-lexer@2.3.1: {}
+  es-module-lexer@2.3.2: {}
 
   es-object-atoms@1.1.1:
     dependencies:
       es-errors: 1.3.0
 
-  esbuild@0.28.1:
+  esbuild@0.28.2:
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.28.1
-      '@esbuild/android-arm': 0.28.1
-      '@esbuild/android-arm64': 0.28.1
-      '@esbuild/android-x64': 0.28.1
-      '@esbuild/darwin-arm64': 0.28.1
-      '@esbuild/darwin-x64': 0.28.1
-      '@esbuild/freebsd-arm64': 0.28.1
-      '@esbuild/freebsd-x64': 0.28.1
-      '@esbuild/linux-arm': 0.28.1
-      '@esbuild/linux-arm64': 0.28.1
-      '@esbuild/linux-ia32': 0.28.1
-      '@esbuild/linux-loong64': 0.28.1
-      '@esbuild/linux-mips64el': 0.28.1
-      '@esbuild/linux-ppc64': 0.28.1
-      '@esbuild/linux-riscv64': 0.28.1
-      '@esbuild/linux-s390x': 0.28.1
-      '@esbuild/linux-x64': 0.28.1
-      '@esbuild/netbsd-arm64': 0.28.1
-      '@esbuild/netbsd-x64': 0.28.1
-      '@esbuild/openbsd-arm64': 0.28.1
-      '@esbuild/openbsd-x64': 0.28.1
-      '@esbuild/openharmony-arm64': 0.28.1
-      '@esbuild/sunos-x64': 0.28.1
-      '@esbuild/win32-arm64': 0.28.1
-      '@esbuild/win32-ia32': 0.28.1
-      '@esbuild/win32-x64': 0.28.1
+      '@esbuild/aix-ppc64': 0.28.2
+      '@esbuild/android-arm': 0.28.2
+      '@esbuild/android-arm64': 0.28.2
+      '@esbuild/android-x64': 0.28.2
+      '@esbuild/darwin-arm64': 0.28.2
+      '@esbuild/darwin-x64': 0.28.2
+      '@esbuild/freebsd-arm64': 0.28.2
+      '@esbuild/freebsd-x64': 0.28.2
+      '@esbuild/linux-arm': 0.28.2
+      '@esbuild/linux-arm64': 0.28.2
+      '@esbuild/linux-ia32': 0.28.2
+      '@esbuild/linux-loong64': 0.28.2
+      '@esbuild/linux-mips64el': 0.28.2
+      '@esbuild/linux-ppc64': 0.28.2
+      '@esbuild/linux-riscv64': 0.28.2
+      '@esbuild/linux-s390x': 0.28.2
+      '@esbuild/linux-x64': 0.28.2
+      '@esbuild/netbsd-arm64': 0.28.2
+      '@esbuild/netbsd-x64': 0.28.2
+      '@esbuild/openbsd-arm64': 0.28.2
+      '@esbuild/openbsd-x64': 0.28.2
+      '@esbuild/openharmony-arm64': 0.28.2
+      '@esbuild/sunos-x64': 0.28.2
+      '@esbuild/win32-arm64': 0.28.2
+      '@esbuild/win32-ia32': 0.28.2
+      '@esbuild/win32-x64': 0.28.2
 
   escalade@3.2.0: {}
 
   escape-string-regexp@4.0.0: {}
 
-  eslint-plugin-storybook@10.5.5(eslint@8.57.1(supports-color@7.2.0))(storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8))(supports-color@7.2.0)(typescript@5.9.3):
+  eslint-plugin-storybook@10.6.0(eslint@8.57.1(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/types': 8.65.0
-      '@typescript-eslint/utils': 8.65.0(eslint@8.57.1(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)
+      '@typescript-eslint/types': 8.69.0
+      '@typescript-eslint/utils': 8.69.0(eslint@8.57.1(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.9.3)
       eslint: 8.57.1(supports-color@7.2.0)
-      storybook: 10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -9586,19 +9568,19 @@ snapshots:
       md5.js: 1.3.5
       safe-buffer: 5.2.1
 
-  execa@9.6.1:
+  execa@10.0.1:
     dependencies:
       '@sindresorhus/merge-streams': 4.0.0
-      cross-spawn: 7.0.6
       figures: 6.1.0
       get-stream: 9.0.1
       human-signals: 8.0.1
       is-plain-obj: 4.1.0
       is-stream: 4.0.1
       npm-run-path: 6.0.0
-      pretty-ms: 9.3.0
+      pretty-ms: 9.3.1
       signal-exit: 4.1.0
       strip-final-newline: 4.0.0
+      which-command: 0.1.0
       yoctocolors: 2.2.0
 
   expect-type@1.4.0: {}
@@ -9874,24 +9856,24 @@ snapshots:
     dependencies:
       '@babel/runtime': 7.29.2
 
-  i18next-cli@1.67.3(@types/node@24.13.3)(react-dom@19.2.8(react@19.2.8))(typescript@5.9.3):
+  i18next-cli@1.72.4(@types/node@24.13.3)(react-dom@19.2.8(react@19.2.8))(typescript@5.9.3):
     dependencies:
       '@croct/json5-parser': 0.2.2
-      '@swc/core': 1.15.47
+      '@swc/core': 1.16.2
       chokidar: 5.0.0
-      commander: 14.0.3
-      execa: 9.6.1
+      commander: 15.0.0
+      execa: 10.0.1
       glob: 10.5.0
-      i18next: 26.3.6(typescript@5.9.3)
+      i18next: 26.4.1(typescript@5.9.3)
       i18next-resources-for-ts: 2.1.0
-      inquirer: 14.0.2(@types/node@24.13.3)
+      inquirer: 14.2.1(@types/node@24.13.3)
       jiti: 2.7.0
       jsonc-parser: 3.3.1
-      magic-string: 0.30.21
+      magic-string: 1.2.3
       minimatch: 10.2.6
       ora: 9.4.1
       react: 19.2.8
-      react-i18next: 17.0.11(i18next@26.3.6(typescript@5.9.3))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(typescript@5.9.3)
+      react-i18next: 17.0.13(i18next@26.4.1(typescript@5.9.3))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(typescript@5.9.3)
       yaml: 2.9.0
     transitivePeerDependencies:
       - '@swc/helpers'
@@ -9903,13 +9885,13 @@ snapshots:
   i18next-resources-for-ts@2.1.0:
     dependencies:
       '@babel/runtime': 7.29.7
-      '@swc/core': 1.15.47
+      '@swc/core': 1.16.2
       chokidar: 5.0.0
       yaml: 2.9.0
     transitivePeerDependencies:
       - '@swc/helpers'
 
-  i18next@26.3.6(typescript@5.9.3):
+  i18next@26.4.1(typescript@5.9.3):
     optionalDependencies:
       typescript: 5.9.3
 
@@ -9938,12 +9920,12 @@ snapshots:
 
   inherits@2.0.4: {}
 
-  inquirer@14.0.2(@types/node@24.13.3):
+  inquirer@14.2.1(@types/node@24.13.3):
     dependencies:
-      '@inquirer/ansi': 2.0.7
-      '@inquirer/core': 11.2.1(@types/node@24.13.3)
-      '@inquirer/prompts': 8.5.2(@types/node@24.13.3)
-      '@inquirer/type': 4.0.7(@types/node@24.13.3)
+      '@inquirer/ansi': 2.0.8
+      '@inquirer/core': 12.0.2(@types/node@24.13.3)
+      '@inquirer/prompts': 8.7.1(@types/node@24.13.3)
+      '@inquirer/type': 4.1.1(@types/node@24.13.3)
       mute-stream: 3.0.0
       run-async: 4.0.6
     optionalDependencies:
@@ -10268,6 +10250,10 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  magic-string@1.2.3:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.6.0
+
   magicast@0.5.4:
     dependencies:
       '@babel/parser': 7.29.8
@@ -10347,7 +10333,7 @@ snapshots:
 
   mute-stream@3.0.0: {}
 
-  nanoid@3.3.17: {}
+  nanoid@3.3.18: {}
 
   natural-compare@1.4.0: {}
 
@@ -10451,7 +10437,7 @@ snapshots:
 
   open@10.2.0:
     dependencies:
-      default-browser: 5.5.0
+      default-browser: 5.5.1
       define-lazy-prop: 3.0.0
       is-inside-container: 1.0.0
       wsl-utils: 0.1.0
@@ -10529,51 +10515,51 @@ snapshots:
       - '@emnapi/core'
       - '@emnapi/runtime'
 
-  oxc-resolver@11.24.2:
+  oxc-resolver@11.21.2:
     optionalDependencies:
-      '@oxc-resolver/binding-android-arm-eabi': 11.24.2
-      '@oxc-resolver/binding-android-arm64': 11.24.2
-      '@oxc-resolver/binding-darwin-arm64': 11.24.2
-      '@oxc-resolver/binding-darwin-x64': 11.24.2
-      '@oxc-resolver/binding-freebsd-x64': 11.24.2
-      '@oxc-resolver/binding-linux-arm-gnueabihf': 11.24.2
-      '@oxc-resolver/binding-linux-arm-musleabihf': 11.24.2
-      '@oxc-resolver/binding-linux-arm64-gnu': 11.24.2
-      '@oxc-resolver/binding-linux-arm64-musl': 11.24.2
-      '@oxc-resolver/binding-linux-ppc64-gnu': 11.24.2
-      '@oxc-resolver/binding-linux-riscv64-gnu': 11.24.2
-      '@oxc-resolver/binding-linux-riscv64-musl': 11.24.2
-      '@oxc-resolver/binding-linux-s390x-gnu': 11.24.2
-      '@oxc-resolver/binding-linux-x64-gnu': 11.24.2
-      '@oxc-resolver/binding-linux-x64-musl': 11.24.2
-      '@oxc-resolver/binding-openharmony-arm64': 11.24.2
-      '@oxc-resolver/binding-wasm32-wasi': 11.24.2
-      '@oxc-resolver/binding-win32-arm64-msvc': 11.24.2
-      '@oxc-resolver/binding-win32-x64-msvc': 11.24.2
+      '@oxc-resolver/binding-android-arm-eabi': 11.21.2
+      '@oxc-resolver/binding-android-arm64': 11.21.2
+      '@oxc-resolver/binding-darwin-arm64': 11.21.2
+      '@oxc-resolver/binding-darwin-x64': 11.21.2
+      '@oxc-resolver/binding-freebsd-x64': 11.21.2
+      '@oxc-resolver/binding-linux-arm-gnueabihf': 11.21.2
+      '@oxc-resolver/binding-linux-arm-musleabihf': 11.21.2
+      '@oxc-resolver/binding-linux-arm64-gnu': 11.21.2
+      '@oxc-resolver/binding-linux-arm64-musl': 11.21.2
+      '@oxc-resolver/binding-linux-ppc64-gnu': 11.21.2
+      '@oxc-resolver/binding-linux-riscv64-gnu': 11.21.2
+      '@oxc-resolver/binding-linux-riscv64-musl': 11.21.2
+      '@oxc-resolver/binding-linux-s390x-gnu': 11.21.2
+      '@oxc-resolver/binding-linux-x64-gnu': 11.21.2
+      '@oxc-resolver/binding-linux-x64-musl': 11.21.2
+      '@oxc-resolver/binding-openharmony-arm64': 11.21.2
+      '@oxc-resolver/binding-wasm32-wasi': 11.21.2
+      '@oxc-resolver/binding-win32-arm64-msvc': 11.21.2
+      '@oxc-resolver/binding-win32-x64-msvc': 11.21.2
 
-  oxfmt@0.61.0:
+  oxfmt@0.66.0:
     dependencies:
       tinypool: 2.1.0
     optionalDependencies:
-      '@oxfmt/binding-android-arm-eabi': 0.61.0
-      '@oxfmt/binding-android-arm64': 0.61.0
-      '@oxfmt/binding-darwin-arm64': 0.61.0
-      '@oxfmt/binding-darwin-x64': 0.61.0
-      '@oxfmt/binding-freebsd-x64': 0.61.0
-      '@oxfmt/binding-linux-arm-gnueabihf': 0.61.0
-      '@oxfmt/binding-linux-arm-musleabihf': 0.61.0
-      '@oxfmt/binding-linux-arm64-gnu': 0.61.0
-      '@oxfmt/binding-linux-arm64-musl': 0.61.0
-      '@oxfmt/binding-linux-ppc64-gnu': 0.61.0
-      '@oxfmt/binding-linux-riscv64-gnu': 0.61.0
-      '@oxfmt/binding-linux-riscv64-musl': 0.61.0
-      '@oxfmt/binding-linux-s390x-gnu': 0.61.0
-      '@oxfmt/binding-linux-x64-gnu': 0.61.0
-      '@oxfmt/binding-linux-x64-musl': 0.61.0
-      '@oxfmt/binding-openharmony-arm64': 0.61.0
-      '@oxfmt/binding-win32-arm64-msvc': 0.61.0
-      '@oxfmt/binding-win32-ia32-msvc': 0.61.0
-      '@oxfmt/binding-win32-x64-msvc': 0.61.0
+      '@oxfmt/binding-android-arm-eabi': 0.66.0
+      '@oxfmt/binding-android-arm64': 0.66.0
+      '@oxfmt/binding-darwin-arm64': 0.66.0
+      '@oxfmt/binding-darwin-x64': 0.66.0
+      '@oxfmt/binding-freebsd-x64': 0.66.0
+      '@oxfmt/binding-linux-arm-gnueabihf': 0.66.0
+      '@oxfmt/binding-linux-arm-musleabihf': 0.66.0
+      '@oxfmt/binding-linux-arm64-gnu': 0.66.0
+      '@oxfmt/binding-linux-arm64-musl': 0.66.0
+      '@oxfmt/binding-linux-ppc64-gnu': 0.66.0
+      '@oxfmt/binding-linux-riscv64-gnu': 0.66.0
+      '@oxfmt/binding-linux-riscv64-musl': 0.66.0
+      '@oxfmt/binding-linux-s390x-gnu': 0.66.0
+      '@oxfmt/binding-linux-x64-gnu': 0.66.0
+      '@oxfmt/binding-linux-x64-musl': 0.66.0
+      '@oxfmt/binding-openharmony-arm64': 0.66.0
+      '@oxfmt/binding-win32-arm64-msvc': 0.66.0
+      '@oxfmt/binding-win32-ia32-msvc': 0.66.0
+      '@oxfmt/binding-win32-x64-msvc': 0.66.0
 
   oxlint-tsgolint@0.25.0:
     optionalDependencies:
@@ -10584,27 +10570,27 @@ snapshots:
       '@oxlint-tsgolint/win32-arm64': 0.25.0
       '@oxlint-tsgolint/win32-x64': 0.25.0
 
-  oxlint@1.76.0(oxlint-tsgolint@0.25.0):
+  oxlint@1.81.0(oxlint-tsgolint@0.25.0):
     optionalDependencies:
-      '@oxlint/binding-android-arm-eabi': 1.76.0
-      '@oxlint/binding-android-arm64': 1.76.0
-      '@oxlint/binding-darwin-arm64': 1.76.0
-      '@oxlint/binding-darwin-x64': 1.76.0
-      '@oxlint/binding-freebsd-x64': 1.76.0
-      '@oxlint/binding-linux-arm-gnueabihf': 1.76.0
-      '@oxlint/binding-linux-arm-musleabihf': 1.76.0
-      '@oxlint/binding-linux-arm64-gnu': 1.76.0
-      '@oxlint/binding-linux-arm64-musl': 1.76.0
-      '@oxlint/binding-linux-ppc64-gnu': 1.76.0
-      '@oxlint/binding-linux-riscv64-gnu': 1.76.0
-      '@oxlint/binding-linux-riscv64-musl': 1.76.0
-      '@oxlint/binding-linux-s390x-gnu': 1.76.0
-      '@oxlint/binding-linux-x64-gnu': 1.76.0
-      '@oxlint/binding-linux-x64-musl': 1.76.0
-      '@oxlint/binding-openharmony-arm64': 1.76.0
-      '@oxlint/binding-win32-arm64-msvc': 1.76.0
-      '@oxlint/binding-win32-ia32-msvc': 1.76.0
-      '@oxlint/binding-win32-x64-msvc': 1.76.0
+      '@oxlint/binding-android-arm-eabi': 1.81.0
+      '@oxlint/binding-android-arm64': 1.81.0
+      '@oxlint/binding-darwin-arm64': 1.81.0
+      '@oxlint/binding-darwin-x64': 1.81.0
+      '@oxlint/binding-freebsd-x64': 1.81.0
+      '@oxlint/binding-linux-arm-gnueabihf': 1.81.0
+      '@oxlint/binding-linux-arm-musleabihf': 1.81.0
+      '@oxlint/binding-linux-arm64-gnu': 1.81.0
+      '@oxlint/binding-linux-arm64-musl': 1.81.0
+      '@oxlint/binding-linux-ppc64-gnu': 1.81.0
+      '@oxlint/binding-linux-riscv64-gnu': 1.81.0
+      '@oxlint/binding-linux-riscv64-musl': 1.81.0
+      '@oxlint/binding-linux-s390x-gnu': 1.81.0
+      '@oxlint/binding-linux-x64-gnu': 1.81.0
+      '@oxlint/binding-linux-x64-musl': 1.81.0
+      '@oxlint/binding-openharmony-arm64': 1.81.0
+      '@oxlint/binding-win32-arm64-msvc': 1.81.0
+      '@oxlint/binding-win32-ia32-msvc': 1.81.0
+      '@oxlint/binding-win32-x64-msvc': 1.81.0
       oxlint-tsgolint: 0.25.0
 
   p-limit@2.3.0:
@@ -10710,15 +10696,17 @@ snapshots:
 
   picomatch@4.0.5: {}
 
+  picomatch@4.0.7: {}
+
   pkg-dir@5.0.0:
     dependencies:
       find-up: 5.0.0
 
-  playwright-core@1.62.0: {}
+  playwright-core@1.62.1: {}
 
-  playwright@1.62.0:
+  playwright@1.62.1:
     dependencies:
-      playwright-core: 1.62.0
+      playwright-core: 1.62.1
     optionalDependencies:
       fsevents: 2.3.2
 
@@ -10728,224 +10716,224 @@ snapshots:
 
   possible-typed-array-names@1.1.0: {}
 
-  postcss-attribute-case-insensitive@7.0.1(postcss@8.5.25):
+  postcss-attribute-case-insensitive@7.0.1(postcss@8.5.26):
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
       postcss-selector-parser: 7.1.1
 
-  postcss-clamp@4.1.0(postcss@8.5.25):
+  postcss-clamp@4.1.0(postcss@8.5.26):
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
       postcss-value-parser: 4.2.0
 
-  postcss-color-functional-notation@7.0.12(postcss@8.5.25):
+  postcss-color-functional-notation@7.0.12(postcss@8.5.26):
     dependencies:
       '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25)
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26)
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
 
-  postcss-color-hex-alpha@10.0.0(postcss@8.5.25):
+  postcss-color-hex-alpha@10.0.0(postcss@8.5.26):
     dependencies:
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
       postcss-value-parser: 4.2.0
 
-  postcss-color-rebeccapurple@10.0.0(postcss@8.5.25):
+  postcss-color-rebeccapurple@10.0.0(postcss@8.5.26):
     dependencies:
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
       postcss-value-parser: 4.2.0
 
-  postcss-custom-media@11.0.6(postcss@8.5.25):
+  postcss-custom-media@11.0.6(postcss@8.5.26):
     dependencies:
       '@csstools/cascade-layer-name-parser': 2.0.5(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
       '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  postcss-custom-properties@14.0.6(postcss@8.5.25):
+  postcss-custom-properties@14.0.6(postcss@8.5.26):
     dependencies:
       '@csstools/cascade-layer-name-parser': 2.0.5(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
       postcss-value-parser: 4.2.0
 
-  postcss-custom-selectors@8.0.5(postcss@8.5.25):
+  postcss-custom-selectors@8.0.5(postcss@8.5.26):
     dependencies:
       '@csstools/cascade-layer-name-parser': 2.0.5(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      postcss: 8.5.25
+      postcss: 8.5.26
       postcss-selector-parser: 7.1.1
 
-  postcss-dir-pseudo-class@9.0.1(postcss@8.5.25):
+  postcss-dir-pseudo-class@9.0.1(postcss@8.5.26):
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
       postcss-selector-parser: 7.1.1
 
-  postcss-double-position-gradients@6.0.4(postcss@8.5.25):
+  postcss-double-position-gradients@6.0.4(postcss@8.5.26):
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25)
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26)
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
       postcss-value-parser: 4.2.0
 
-  postcss-focus-visible@10.0.1(postcss@8.5.25):
+  postcss-focus-visible@10.0.1(postcss@8.5.26):
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
       postcss-selector-parser: 7.1.1
 
-  postcss-focus-within@9.0.1(postcss@8.5.25):
+  postcss-focus-within@9.0.1(postcss@8.5.26):
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
       postcss-selector-parser: 7.1.1
 
-  postcss-font-variant@5.0.0(postcss@8.5.25):
+  postcss-font-variant@5.0.0(postcss@8.5.26):
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  postcss-gap-properties@6.0.0(postcss@8.5.25):
+  postcss-gap-properties@6.0.0(postcss@8.5.26):
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  postcss-image-set-function@7.0.0(postcss@8.5.25):
+  postcss-image-set-function@7.0.0(postcss@8.5.26):
     dependencies:
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
       postcss-value-parser: 4.2.0
 
-  postcss-lab-function@7.0.12(postcss@8.5.25):
+  postcss-lab-function@7.0.12(postcss@8.5.26):
     dependencies:
       '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
-      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25)
-      '@csstools/utilities': 2.0.0(postcss@8.5.25)
-      postcss: 8.5.25
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26)
+      '@csstools/utilities': 2.0.0(postcss@8.5.26)
+      postcss: 8.5.26
 
-  postcss-logical@8.1.0(postcss@8.5.25):
+  postcss-logical@8.1.0(postcss@8.5.26):
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
       postcss-value-parser: 4.2.0
 
-  postcss-nesting@13.0.2(postcss@8.5.25):
+  postcss-nesting@13.0.2(postcss@8.5.26):
     dependencies:
       '@csstools/selector-resolve-nested': 3.1.0(postcss-selector-parser@7.1.1)
       '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1)
-      postcss: 8.5.25
+      postcss: 8.5.26
       postcss-selector-parser: 7.1.1
 
-  postcss-opacity-percentage@3.0.0(postcss@8.5.25):
+  postcss-opacity-percentage@3.0.0(postcss@8.5.26):
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  postcss-overflow-shorthand@6.0.0(postcss@8.5.25):
+  postcss-overflow-shorthand@6.0.0(postcss@8.5.26):
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
       postcss-value-parser: 4.2.0
 
-  postcss-page-break@3.0.4(postcss@8.5.25):
+  postcss-page-break@3.0.4(postcss@8.5.26):
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  postcss-place@10.0.0(postcss@8.5.25):
+  postcss-place@10.0.0(postcss@8.5.26):
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
       postcss-value-parser: 4.2.0
 
-  postcss-preset-env@10.6.1(postcss@8.5.25):
+  postcss-preset-env@10.6.1(postcss@8.5.26):
     dependencies:
-      '@csstools/postcss-alpha-function': 1.0.1(postcss@8.5.25)
-      '@csstools/postcss-cascade-layers': 5.0.2(postcss@8.5.25)
-      '@csstools/postcss-color-function': 4.0.12(postcss@8.5.25)
-      '@csstools/postcss-color-function-display-p3-linear': 1.0.1(postcss@8.5.25)
-      '@csstools/postcss-color-mix-function': 3.0.12(postcss@8.5.25)
-      '@csstools/postcss-color-mix-variadic-function-arguments': 1.0.2(postcss@8.5.25)
-      '@csstools/postcss-content-alt-text': 2.0.8(postcss@8.5.25)
-      '@csstools/postcss-contrast-color-function': 2.0.12(postcss@8.5.25)
-      '@csstools/postcss-exponential-functions': 2.0.9(postcss@8.5.25)
-      '@csstools/postcss-font-format-keywords': 4.0.0(postcss@8.5.25)
-      '@csstools/postcss-gamut-mapping': 2.0.11(postcss@8.5.25)
-      '@csstools/postcss-gradients-interpolation-method': 5.0.12(postcss@8.5.25)
-      '@csstools/postcss-hwb-function': 4.0.12(postcss@8.5.25)
-      '@csstools/postcss-ic-unit': 4.0.4(postcss@8.5.25)
-      '@csstools/postcss-initial': 2.0.1(postcss@8.5.25)
-      '@csstools/postcss-is-pseudo-class': 5.0.3(postcss@8.5.25)
-      '@csstools/postcss-light-dark-function': 2.0.11(postcss@8.5.25)
-      '@csstools/postcss-logical-float-and-clear': 3.0.0(postcss@8.5.25)
-      '@csstools/postcss-logical-overflow': 2.0.0(postcss@8.5.25)
-      '@csstools/postcss-logical-overscroll-behavior': 2.0.0(postcss@8.5.25)
-      '@csstools/postcss-logical-resize': 3.0.0(postcss@8.5.25)
-      '@csstools/postcss-logical-viewport-units': 3.0.4(postcss@8.5.25)
-      '@csstools/postcss-media-minmax': 2.0.9(postcss@8.5.25)
-      '@csstools/postcss-media-queries-aspect-ratio-number-values': 3.0.5(postcss@8.5.25)
-      '@csstools/postcss-nested-calc': 4.0.0(postcss@8.5.25)
-      '@csstools/postcss-normalize-display-values': 4.0.1(postcss@8.5.25)
-      '@csstools/postcss-oklab-function': 4.0.12(postcss@8.5.25)
-      '@csstools/postcss-position-area-property': 1.0.0(postcss@8.5.25)
-      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.25)
-      '@csstools/postcss-property-rule-prelude-list': 1.0.0(postcss@8.5.25)
-      '@csstools/postcss-random-function': 2.0.1(postcss@8.5.25)
-      '@csstools/postcss-relative-color-syntax': 3.0.12(postcss@8.5.25)
-      '@csstools/postcss-scope-pseudo-class': 4.0.1(postcss@8.5.25)
-      '@csstools/postcss-sign-functions': 1.1.4(postcss@8.5.25)
-      '@csstools/postcss-stepped-value-functions': 4.0.9(postcss@8.5.25)
-      '@csstools/postcss-syntax-descriptor-syntax-production': 1.0.1(postcss@8.5.25)
-      '@csstools/postcss-system-ui-font-family': 1.0.0(postcss@8.5.25)
-      '@csstools/postcss-text-decoration-shorthand': 4.0.3(postcss@8.5.25)
-      '@csstools/postcss-trigonometric-functions': 4.0.9(postcss@8.5.25)
-      '@csstools/postcss-unset-value': 4.0.0(postcss@8.5.25)
-      autoprefixer: 10.5.0(postcss@8.5.25)
+      '@csstools/postcss-alpha-function': 1.0.1(postcss@8.5.26)
+      '@csstools/postcss-cascade-layers': 5.0.2(postcss@8.5.26)
+      '@csstools/postcss-color-function': 4.0.12(postcss@8.5.26)
+      '@csstools/postcss-color-function-display-p3-linear': 1.0.1(postcss@8.5.26)
+      '@csstools/postcss-color-mix-function': 3.0.12(postcss@8.5.26)
+      '@csstools/postcss-color-mix-variadic-function-arguments': 1.0.2(postcss@8.5.26)
+      '@csstools/postcss-content-alt-text': 2.0.8(postcss@8.5.26)
+      '@csstools/postcss-contrast-color-function': 2.0.12(postcss@8.5.26)
+      '@csstools/postcss-exponential-functions': 2.0.9(postcss@8.5.26)
+      '@csstools/postcss-font-format-keywords': 4.0.0(postcss@8.5.26)
+      '@csstools/postcss-gamut-mapping': 2.0.11(postcss@8.5.26)
+      '@csstools/postcss-gradients-interpolation-method': 5.0.12(postcss@8.5.26)
+      '@csstools/postcss-hwb-function': 4.0.12(postcss@8.5.26)
+      '@csstools/postcss-ic-unit': 4.0.4(postcss@8.5.26)
+      '@csstools/postcss-initial': 2.0.1(postcss@8.5.26)
+      '@csstools/postcss-is-pseudo-class': 5.0.3(postcss@8.5.26)
+      '@csstools/postcss-light-dark-function': 2.0.11(postcss@8.5.26)
+      '@csstools/postcss-logical-float-and-clear': 3.0.0(postcss@8.5.26)
+      '@csstools/postcss-logical-overflow': 2.0.0(postcss@8.5.26)
+      '@csstools/postcss-logical-overscroll-behavior': 2.0.0(postcss@8.5.26)
+      '@csstools/postcss-logical-resize': 3.0.0(postcss@8.5.26)
+      '@csstools/postcss-logical-viewport-units': 3.0.4(postcss@8.5.26)
+      '@csstools/postcss-media-minmax': 2.0.9(postcss@8.5.26)
+      '@csstools/postcss-media-queries-aspect-ratio-number-values': 3.0.5(postcss@8.5.26)
+      '@csstools/postcss-nested-calc': 4.0.0(postcss@8.5.26)
+      '@csstools/postcss-normalize-display-values': 4.0.1(postcss@8.5.26)
+      '@csstools/postcss-oklab-function': 4.0.12(postcss@8.5.26)
+      '@csstools/postcss-position-area-property': 1.0.0(postcss@8.5.26)
+      '@csstools/postcss-progressive-custom-properties': 4.2.1(postcss@8.5.26)
+      '@csstools/postcss-property-rule-prelude-list': 1.0.0(postcss@8.5.26)
+      '@csstools/postcss-random-function': 2.0.1(postcss@8.5.26)
+      '@csstools/postcss-relative-color-syntax': 3.0.12(postcss@8.5.26)
+      '@csstools/postcss-scope-pseudo-class': 4.0.1(postcss@8.5.26)
+      '@csstools/postcss-sign-functions': 1.1.4(postcss@8.5.26)
+      '@csstools/postcss-stepped-value-functions': 4.0.9(postcss@8.5.26)
+      '@csstools/postcss-syntax-descriptor-syntax-production': 1.0.1(postcss@8.5.26)
+      '@csstools/postcss-system-ui-font-family': 1.0.0(postcss@8.5.26)
+      '@csstools/postcss-text-decoration-shorthand': 4.0.3(postcss@8.5.26)
+      '@csstools/postcss-trigonometric-functions': 4.0.9(postcss@8.5.26)
+      '@csstools/postcss-unset-value': 4.0.0(postcss@8.5.26)
+      autoprefixer: 10.5.0(postcss@8.5.26)
       browserslist: 4.28.2
-      css-blank-pseudo: 7.0.1(postcss@8.5.25)
-      css-has-pseudo: 7.0.3(postcss@8.5.25)
-      css-prefers-color-scheme: 10.0.0(postcss@8.5.25)
+      css-blank-pseudo: 7.0.1(postcss@8.5.26)
+      css-has-pseudo: 7.0.3(postcss@8.5.26)
+      css-prefers-color-scheme: 10.0.0(postcss@8.5.26)
       cssdb: 8.8.0
-      postcss: 8.5.25
-      postcss-attribute-case-insensitive: 7.0.1(postcss@8.5.25)
-      postcss-clamp: 4.1.0(postcss@8.5.25)
-      postcss-color-functional-notation: 7.0.12(postcss@8.5.25)
-      postcss-color-hex-alpha: 10.0.0(postcss@8.5.25)
-      postcss-color-rebeccapurple: 10.0.0(postcss@8.5.25)
-      postcss-custom-media: 11.0.6(postcss@8.5.25)
-      postcss-custom-properties: 14.0.6(postcss@8.5.25)
-      postcss-custom-selectors: 8.0.5(postcss@8.5.25)
-      postcss-dir-pseudo-class: 9.0.1(postcss@8.5.25)
-      postcss-double-position-gradients: 6.0.4(postcss@8.5.25)
-      postcss-focus-visible: 10.0.1(postcss@8.5.25)
-      postcss-focus-within: 9.0.1(postcss@8.5.25)
-      postcss-font-variant: 5.0.0(postcss@8.5.25)
-      postcss-gap-properties: 6.0.0(postcss@8.5.25)
-      postcss-image-set-function: 7.0.0(postcss@8.5.25)
-      postcss-lab-function: 7.0.12(postcss@8.5.25)
-      postcss-logical: 8.1.0(postcss@8.5.25)
-      postcss-nesting: 13.0.2(postcss@8.5.25)
-      postcss-opacity-percentage: 3.0.0(postcss@8.5.25)
-      postcss-overflow-shorthand: 6.0.0(postcss@8.5.25)
-      postcss-page-break: 3.0.4(postcss@8.5.25)
-      postcss-place: 10.0.0(postcss@8.5.25)
-      postcss-pseudo-class-any-link: 10.0.1(postcss@8.5.25)
-      postcss-replace-overflow-wrap: 4.0.0(postcss@8.5.25)
-      postcss-selector-not: 8.0.1(postcss@8.5.25)
+      postcss: 8.5.26
+      postcss-attribute-case-insensitive: 7.0.1(postcss@8.5.26)
+      postcss-clamp: 4.1.0(postcss@8.5.26)
+      postcss-color-functional-notation: 7.0.12(postcss@8.5.26)
+      postcss-color-hex-alpha: 10.0.0(postcss@8.5.26)
+      postcss-color-rebeccapurple: 10.0.0(postcss@8.5.26)
+      postcss-custom-media: 11.0.6(postcss@8.5.26)
+      postcss-custom-properties: 14.0.6(postcss@8.5.26)
+      postcss-custom-selectors: 8.0.5(postcss@8.5.26)
+      postcss-dir-pseudo-class: 9.0.1(postcss@8.5.26)
+      postcss-double-position-gradients: 6.0.4(postcss@8.5.26)
+      postcss-focus-visible: 10.0.1(postcss@8.5.26)
+      postcss-focus-within: 9.0.1(postcss@8.5.26)
+      postcss-font-variant: 5.0.0(postcss@8.5.26)
+      postcss-gap-properties: 6.0.0(postcss@8.5.26)
+      postcss-image-set-function: 7.0.0(postcss@8.5.26)
+      postcss-lab-function: 7.0.12(postcss@8.5.26)
+      postcss-logical: 8.1.0(postcss@8.5.26)
+      postcss-nesting: 13.0.2(postcss@8.5.26)
+      postcss-opacity-percentage: 3.0.0(postcss@8.5.26)
+      postcss-overflow-shorthand: 6.0.0(postcss@8.5.26)
+      postcss-page-break: 3.0.4(postcss@8.5.26)
+      postcss-place: 10.0.0(postcss@8.5.26)
+      postcss-pseudo-class-any-link: 10.0.1(postcss@8.5.26)
+      postcss-replace-overflow-wrap: 4.0.0(postcss@8.5.26)
+      postcss-selector-not: 8.0.1(postcss@8.5.26)
 
-  postcss-pseudo-class-any-link@10.0.1(postcss@8.5.25):
+  postcss-pseudo-class-any-link@10.0.1(postcss@8.5.26):
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
       postcss-selector-parser: 7.1.1
 
-  postcss-replace-overflow-wrap@4.0.0(postcss@8.5.25):
+  postcss-replace-overflow-wrap@4.0.0(postcss@8.5.26):
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
 
-  postcss-selector-not@8.0.1(postcss@8.5.25):
+  postcss-selector-not@8.0.1(postcss@8.5.26):
     dependencies:
-      postcss: 8.5.25
+      postcss: 8.5.26
       postcss-selector-parser: 7.1.1
 
   postcss-selector-parser@7.1.1:
@@ -10955,9 +10943,9 @@ snapshots:
 
   postcss-value-parser@4.2.0: {}
 
-  postcss@8.5.25:
+  postcss@8.5.26:
     dependencies:
-      nanoid: 3.3.17
+      nanoid: 3.3.18
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
@@ -10988,7 +10976,7 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 17.0.2
 
-  pretty-ms@9.3.0:
+  pretty-ms@9.3.1:
     dependencies:
       parse-ms: 4.0.0
 
@@ -11063,22 +11051,22 @@ snapshots:
       react: 19.2.8
       scheduler: 0.27.0
 
-  react-i18next@16.6.6(i18next@26.3.6(typescript@5.9.3))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(typescript@5.9.3):
+  react-i18next@16.6.6(i18next@26.4.1(typescript@5.9.3))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(typescript@5.9.3):
     dependencies:
       '@babel/runtime': 7.29.2
       html-parse-stringify: 3.0.1
-      i18next: 26.3.6(typescript@5.9.3)
+      i18next: 26.4.1(typescript@5.9.3)
       react: 19.2.8
       use-sync-external-store: 1.6.0(react@19.2.8)
     optionalDependencies:
       react-dom: 19.2.8(react@19.2.8)
       typescript: 5.9.3
 
-  react-i18next@17.0.11(i18next@26.3.6(typescript@5.9.3))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(typescript@5.9.3):
+  react-i18next@17.0.13(i18next@26.4.1(typescript@5.9.3))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(typescript@5.9.3):
     dependencies:
       '@babel/runtime': 7.29.7
       html-parse-stringify: 4.0.1
-      i18next: 26.3.6(typescript@5.9.3)
+      i18next: 26.4.1(typescript@5.9.3)
       react: 19.2.8
       use-sync-external-store: 1.6.0(react@19.2.8)
     optionalDependencies:
@@ -11089,32 +11077,32 @@ snapshots:
 
   react-is@17.0.2: {}
 
-  react-remove-scroll-bar@2.3.8(@types/react@19.2.17)(react@19.2.8):
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.18)(react@19.2.8):
     dependencies:
       react: 19.2.8
-      react-style-singleton: 2.2.3(@types/react@19.2.17)(react@19.2.8)
+      react-style-singleton: 2.2.3(@types/react@19.2.18)(react@19.2.8)
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
 
-  react-remove-scroll@2.7.2(@types/react@19.2.17)(react@19.2.8):
+  react-remove-scroll@2.7.2(@types/react@19.2.18)(react@19.2.8):
     dependencies:
       react: 19.2.8
-      react-remove-scroll-bar: 2.3.8(@types/react@19.2.17)(react@19.2.8)
-      react-style-singleton: 2.2.3(@types/react@19.2.17)(react@19.2.8)
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.18)(react@19.2.8)
+      react-style-singleton: 2.2.3(@types/react@19.2.18)(react@19.2.8)
       tslib: 2.8.1
-      use-callback-ref: 1.3.3(@types/react@19.2.17)(react@19.2.8)
-      use-sidecar: 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      use-callback-ref: 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      use-sidecar: 1.1.3(@types/react@19.2.18)(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
 
-  react-router-dom@7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+  react-router-dom@7.18.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
     dependencies:
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
-      react-router: 7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react-router: 7.18.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
 
-  react-router@7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+  react-router@7.18.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
     dependencies:
       cookie: 1.1.1
       react: 19.2.8
@@ -11122,13 +11110,13 @@ snapshots:
     optionalDependencies:
       react-dom: 19.2.8(react@19.2.8)
 
-  react-style-singleton@2.2.3(@types/react@19.2.17)(react@19.2.8):
+  react-style-singleton@2.2.3(@types/react@19.2.18)(react@19.2.8):
     dependencies:
       get-nonce: 1.0.1
       react: 19.2.8
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
 
   react-use-measure@2.1.7(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
     dependencies:
@@ -11158,11 +11146,11 @@ snapshots:
     dependencies:
       picomatch: 2.3.2
 
-  readdirp@5.0.0: {}
+  readdirp@5.1.1: {}
 
-  recast@0.23.19:
+  recast@0.23.21:
     dependencies:
-      ast-types: 0.16.1
+      ast-types: 0.16.3
       esprima: 4.0.1
       source-map: 0.6.1
       tiny-invariant: 1.3.3
@@ -11206,26 +11194,26 @@ snapshots:
       hash-base: 3.1.2
       inherits: 2.0.4
 
-  rolldown@1.1.5:
+  rolldown@1.2.7:
     dependencies:
-      '@oxc-project/types': 0.139.0
+      '@oxc-project/types': 0.148.0
       '@rolldown/pluginutils': 1.0.1
     optionalDependencies:
-      '@rolldown/binding-android-arm64': 1.1.5
-      '@rolldown/binding-darwin-arm64': 1.1.5
-      '@rolldown/binding-darwin-x64': 1.1.5
-      '@rolldown/binding-freebsd-x64': 1.1.5
-      '@rolldown/binding-linux-arm-gnueabihf': 1.1.5
-      '@rolldown/binding-linux-arm64-gnu': 1.1.5
-      '@rolldown/binding-linux-arm64-musl': 1.1.5
-      '@rolldown/binding-linux-ppc64-gnu': 1.1.5
-      '@rolldown/binding-linux-s390x-gnu': 1.1.5
-      '@rolldown/binding-linux-x64-gnu': 1.1.5
-      '@rolldown/binding-linux-x64-musl': 1.1.5
-      '@rolldown/binding-openharmony-arm64': 1.1.5
-      '@rolldown/binding-wasm32-wasi': 1.1.5
-      '@rolldown/binding-win32-arm64-msvc': 1.1.5
-      '@rolldown/binding-win32-x64-msvc': 1.1.5
+      '@rolldown/binding-android-arm-eabi': 1.2.7
+      '@rolldown/binding-android-arm64': 1.2.7
+      '@rolldown/binding-darwin-arm64': 1.2.7
+      '@rolldown/binding-darwin-x64': 1.2.7
+      '@rolldown/binding-freebsd-x64': 1.2.7
+      '@rolldown/binding-linux-arm-gnueabihf': 1.2.7
+      '@rolldown/binding-linux-arm64-gnu': 1.2.7
+      '@rolldown/binding-linux-arm64-musl': 1.2.7
+      '@rolldown/binding-linux-ppc64-gnu': 1.2.7
+      '@rolldown/binding-linux-s390x-gnu': 1.2.7
+      '@rolldown/binding-linux-x64-gnu': 1.2.7
+      '@rolldown/binding-linux-x64-musl': 1.2.7
+      '@rolldown/binding-openharmony-arm64': 1.2.7
+      '@rolldown/binding-win32-arm64-msvc': 1.2.7
+      '@rolldown/binding-win32-x64-msvc': 1.2.7
 
   rollup@4.60.1:
     dependencies:
@@ -11285,7 +11273,7 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
-  sass@1.102.0:
+  sass@1.103.1:
     dependencies:
       chokidar: 5.0.0
       immutable: 5.1.9
@@ -11398,27 +11386,27 @@ snapshots:
 
   stdin-discarder@0.3.2: {}
 
-  storybook@10.5.5(@types/react@19.2.17)(prettier@3.8.3)(react@19.2.8):
+  storybook@10.6.0(@types/react@19.2.18)(prettier@3.8.3)(react@19.2.8):
     dependencies:
       '@storybook/global': 5.0.0
       '@storybook/icons': 2.1.0(react@19.2.8)
       '@testing-library/dom': 10.4.1
       '@testing-library/jest-dom': 6.9.1
-      '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.1)
+      '@testing-library/user-event': 14.6.7(@testing-library/dom@10.4.1)
       '@vitest/expect': 3.2.4
       '@vitest/spy': 3.2.4
       '@webcontainer/env': 1.1.1
-      esbuild: 0.28.1
+      esbuild: 0.28.2
       jsonc-parser: 3.3.1
       open: 10.2.0
       oxc-parser: 0.127.0
-      oxc-resolver: 11.24.2
-      recast: 0.23.19
+      oxc-resolver: 11.21.2
+      recast: 0.23.21
       semver: 7.8.5
       use-sync-external-store: 1.6.0(react@19.2.8)
-      ws: 8.21.1
+      ws: 8.21.3
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
       prettier: 3.8.3
     transitivePeerDependencies:
       - bufferutil
@@ -11468,7 +11456,7 @@ snapshots:
 
   strip-ansi@7.2.0:
     dependencies:
-      ansi-regex: 6.2.2
+      ansi-regex: 6.3.0
 
   strip-bom@3.0.0: {}
 
@@ -11513,7 +11501,7 @@ snapshots:
 
   tinybench@2.9.0: {}
 
-  tinyexec@1.3.0: {}
+  tinyexec@1.3.1: {}
 
   tinyglobby@0.2.17:
     dependencies:
@@ -11526,7 +11514,7 @@ snapshots:
 
   tinyrainbow@3.1.1: {}
 
-  tinyspy@4.0.4: {}
+  tinyspy@4.0.6: {}
 
   tldts-core@6.1.86: {}
 
@@ -11626,7 +11614,7 @@ snapshots:
     dependencies:
       '@jridgewell/remapping': 2.3.5
       acorn: 8.18.0
-      picomatch: 4.0.5
+      picomatch: 4.0.7
       webpack-virtual-modules: 0.6.2
 
   update-browserslist-db@1.2.3(browserslist@4.28.2):
@@ -11644,20 +11632,20 @@ snapshots:
       punycode: 1.4.1
       qs: 6.15.3
 
-  use-callback-ref@1.3.3(@types/react@19.2.17)(react@19.2.8):
+  use-callback-ref@1.3.3(@types/react@19.2.18)(react@19.2.8):
     dependencies:
       react: 19.2.8
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
 
-  use-sidecar@1.1.3(@types/react@19.2.17)(react@19.2.8):
+  use-sidecar@1.1.3(@types/react@19.2.18)(react@19.2.8):
     dependencies:
       detect-node-es: 1.1.0
       react: 19.2.8
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.17
+      '@types/react': 19.2.18
 
   use-sync-external-store@1.6.0(react@19.2.8):
     dependencies:
@@ -11678,11 +11666,11 @@ snapshots:
       is-typed-array: 1.1.15
       which-typed-array: 1.1.20
 
-  uuid@14.0.1: {}
+  uuid@14.0.2: {}
 
-  vaul@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+  vaul@1.1.2(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
     dependencies:
-      '@radix-ui/react-dialog': 1.1.23(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-dialog': 1.1.23(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
     transitivePeerDependencies:
@@ -11696,7 +11684,7 @@ snapshots:
       mime-types: 2.1.35
       picocolors: 1.1.1
 
-  vite-plugin-html@3.2.2(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)):
+  vite-plugin-html@3.2.2(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)):
     dependencies:
       '@rollup/pluginutils': 4.2.1
       colorette: 2.0.20
@@ -11710,91 +11698,91 @@ snapshots:
       html-minifier-terser: 6.1.0
       node-html-parser: 5.4.2
       pathe: 0.2.0
-      vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)
+      vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)
 
-  vite-plugin-node-polyfills@0.28.0(rollup@4.60.1)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)):
+  vite-plugin-node-polyfills@0.28.0(rollup@4.60.1)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)):
     dependencies:
       '@rollup/plugin-inject': 5.0.5(rollup@4.60.1)
       node-stdlib-browser: 1.3.1
-      vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)
+      vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)
     transitivePeerDependencies:
       - rollup
 
-  vite-plugin-node-stdlib-browser@0.2.1(node-stdlib-browser@1.3.1)(rollup@4.60.1)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)):
+  vite-plugin-node-stdlib-browser@0.2.1(node-stdlib-browser@1.3.1)(rollup@4.60.1)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)):
     dependencies:
       '@rollup/plugin-inject': 5.0.5(rollup@4.60.1)
       node-stdlib-browser: 1.3.1
-      vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)
+      vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)
     transitivePeerDependencies:
       - rollup
 
-  vite-plugin-svgr@4.5.0(rollup@4.60.1)(supports-color@7.2.0)(typescript@5.9.3)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)):
+  vite-plugin-svgr@4.5.0(rollup@4.60.1)(supports-color@7.2.0)(typescript@5.9.3)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)):
     dependencies:
       '@rollup/pluginutils': 5.3.0(rollup@4.60.1)
       '@svgr/core': 8.1.0(supports-color@7.2.0)(typescript@5.9.3)
       '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(supports-color@7.2.0)(typescript@5.9.3))(supports-color@7.2.0)
-      vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)
+      vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)
     transitivePeerDependencies:
       - rollup
       - supports-color
       - typescript
 
-  vite-plugin-wasm@3.6.0(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)):
+  vite-plugin-wasm@3.6.0(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)):
     dependencies:
-      vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)
+      vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)
 
-  vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0):
+  vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0):
     dependencies:
       lightningcss: 1.33.0
-      picomatch: 4.0.5
-      postcss: 8.5.25
-      rolldown: 1.1.5
+      picomatch: 4.0.7
+      postcss: 8.5.26
+      rolldown: 1.2.7
       tinyglobby: 0.2.17
     optionalDependencies:
       '@types/node': 24.13.3
-      esbuild: 0.28.1
+      esbuild: 0.28.2
       fsevents: 2.3.3
       jiti: 2.7.0
-      sass: 1.102.0
+      sass: 1.103.1
       terser: 5.46.1
       yaml: 2.9.0
 
-  vitest-axe@1.0.0-pre.5(vitest@4.1.10):
+  vitest-axe@1.0.0-pre.5(vitest@4.1.11):
     dependencies:
       '@vitest/pretty-format': 3.2.4
       axe-core: 4.11.3
       chalk: 5.6.2
       lodash-es: 4.18.1
-      vitest: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
+      vitest: 4.1.11(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(@vitest/ui@4.1.11)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
 
-  vitest@4.1.10(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(@vitest/ui@4.1.10)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)):
+  vitest@4.1.11(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(@vitest/ui@4.1.11)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)):
     dependencies:
-      '@vitest/expect': 4.1.10
-      '@vitest/mocker': 4.1.10(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))
-      '@vitest/pretty-format': 4.1.10
-      '@vitest/runner': 4.1.10
-      '@vitest/snapshot': 4.1.10
-      '@vitest/spy': 4.1.10
-      '@vitest/utils': 4.1.10
-      es-module-lexer: 2.3.1
+      '@vitest/expect': 4.1.11
+      '@vitest/mocker': 4.1.11(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
+      '@vitest/pretty-format': 4.1.11
+      '@vitest/runner': 4.1.11
+      '@vitest/snapshot': 4.1.11
+      '@vitest/spy': 4.1.11
+      '@vitest/utils': 4.1.11
+      es-module-lexer: 2.3.2
       expect-type: 1.4.0
       magic-string: 0.30.21
       obug: 2.1.4
       pathe: 2.0.3
-      picomatch: 4.0.5
+      picomatch: 4.0.7
       std-env: 4.2.0
       tinybench: 2.9.0
-      tinyexec: 1.3.0
+      tinyexec: 1.3.1
       tinyglobby: 0.2.17
       tinyrainbow: 3.1.1
-      vite: 8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0)
+      vite: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@opentelemetry/api': 1.9.1
       '@types/node': 24.13.3
-      '@vitest/browser-playwright': 4.1.10(playwright@1.62.0)(vite@8.1.5(@types/node@24.13.3)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.102.0)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.10)
-      '@vitest/coverage-v8': 4.1.10(@vitest/browser@4.1.10)(vitest@4.1.10)
-      '@vitest/ui': 4.1.10(vitest@4.1.10)
+      '@vitest/browser-playwright': 4.1.11(playwright@1.62.1)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))(vitest@4.1.11)
+      '@vitest/coverage-v8': 4.1.11(@vitest/browser@4.1.11)(vitest@4.1.11)
+      '@vitest/ui': 4.1.11(vitest@4.1.11)
       jsdom: 26.1.0(supports-color@7.2.0)
     transitivePeerDependencies:
       - msw
@@ -11841,6 +11829,8 @@ snapshots:
       tr46: 0.0.3
       webidl-conversions: 3.0.1
 
+  which-command@0.1.0: {}
+
   which-module@2.0.1: {}
 
   which-typed-array@1.1.20:
@@ -11888,6 +11878,8 @@ snapshots:
 
   ws@8.21.1: {}
 
+  ws@8.21.3: {}
+
   wsl-utils@0.1.0:
     dependencies:
       is-wsl: 3.1.1

From ddc5a505293fa8657f6e19ecc28480c8f77cbbc7 Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Tue, 8 Sep 2026 11:29:36 +0200
Subject: [PATCH 060/154] Disable new react compiler rules

---
 .oxlintrc.json | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/.oxlintrc.json b/.oxlintrc.json
index d06f2a47..c89ab8a2 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -39,6 +39,17 @@
     "jsdoc/check-property-names": "error",
     "jsdoc/require-param-description": "warn",
     "react/display-name": "error",
+    // TODO: These React Compiler-based rules joined oxlint's correctness
+    // category in v1.81 and flag many pre-existing patterns, including hooks
+    // like useLatest/useInitial/useReactiveState that intentionally access
+    // refs during render. Re-evaluate them when adopting the React Compiler.
+    "react/immutability": "off",
+    "react/no-deriving-state-in-effects": "off",
+    "react/preserve-manual-memoization": "off",
+    "react/refs": "off",
+    "react/set-state-in-effect": "off",
+    "react/static-components": "off",
+    "react/use-memo": "off",
     // TODO: Re-enable once oxlint supports lint rules that rely on TypeScript type-awareness.
     // "rxjs/no-exposed-subjects": "error",
     // "rxjs/finnish": [

From a010cc983f588b602cf67baecd267a71d5bc571e Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Tue, 8 Sep 2026 13:49:19 +0200
Subject: [PATCH 061/154] Compare the component's config by value
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Everything downstream of the component's params — the mute state, the
call view model and with it the media connection — is keyed on the
identity of the params object, which was memoised on the identity of
the `config` prop. A host writing `config={{ ... }}` inline, which is
the natural way to write it, therefore tore the whole call down on
every render. The harness happened to pass a constant, so nothing
noticed.

`useStableValue` hands out the same object for as long as a deep
comparison says nothing changed, so an inline config costs nothing.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 component/index.tsx        | 14 +++++++--
 src/useStableValue.test.ts | 64 ++++++++++++++++++++++++++++++++++++++
 src/useStableValue.ts      | 29 +++++++++++++++++
 3 files changed, 105 insertions(+), 2 deletions(-)
 create mode 100644 src/useStableValue.test.ts
 create mode 100644 src/useStableValue.ts

diff --git a/component/index.tsx b/component/index.tsx
index 84a18353..b58782be 100644
--- a/component/index.tsx
+++ b/component/index.tsx
@@ -66,6 +66,7 @@ import { type ConfigOptions } from "../src/config/ConfigOptions";
 import { i18n } from "../src/utils/i18n";
 import { useTheme } from "../src/useTheme";
 import { useInitial } from "../src/useInitial";
+import { useStableValue } from "../src/useStableValue";
 import styles from "./ElementCall.module.css";
 
 // Everything needed to implement a HostBridge, not just the interface itself
@@ -115,6 +116,9 @@ export interface ElementCallProps {
    * How Element Call should behave, overriding whatever {@link intent} implies.
    * A host that finds itself setting a lot of these probably wants a different
    * intent instead.
+   *
+   * Compared by value, so it is fine to write this inline; only a change to
+   * what it says restarts anything.
    */
   config?: ElementCallConfiguration;
   /**
@@ -180,14 +184,20 @@ export const ElementCall: FC<ElementCallProps> = ({
   // Element Call has no URL of its own to read any of this from, and the
   // host's URL is not Element Call's business, so the defaults come from the
   // intent with the host's wishes over the top.
+  //
+  // Everything downstream — the mute state, the call view model and with it
+  // the media connection — is keyed on the identity of this object, so it has
+  // to be stable for as long as its contents are. A host writing `config`
+  // inline would otherwise tear the call down on every render.
+  const stableConfig = useStableValue(config);
   const params = useMemo(
     (): UrlParams => ({
       ...hostedProperties,
       roomId,
       ...configurationForIntent(intent),
-      ...config,
+      ...stableConfig,
     }),
-    [roomId, intent, config],
+    [roomId, intent, stableConfig],
   );
 
   const mediaDevices = useInitial(
diff --git a/src/useStableValue.test.ts b/src/useStableValue.test.ts
new file mode 100644
index 00000000..8759cbaf
--- /dev/null
+++ b/src/useStableValue.test.ts
@@ -0,0 +1,64 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { renderHook } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+
+import { useStableValue } from "./useStableValue";
+
+describe("useStableValue", () => {
+  test("keeps the first identity while the contents stay equal", () => {
+    const first = { skipLobby: true, fonts: ["Inter"] };
+    const { result, rerender } = renderHook(
+      ({ value }) => useStableValue(value),
+      { initialProps: { value: first } },
+    );
+    expect(result.current).toBe(first);
+
+    rerender({ value: { skipLobby: true, fonts: ["Inter"] } });
+    expect(result.current).toBe(first);
+  });
+
+  test("takes the new identity once the contents change", () => {
+    const first = { skipLobby: true };
+    const second = { skipLobby: false };
+    const { result, rerender } = renderHook(
+      ({ value }) => useStableValue(value),
+      { initialProps: { value: first } },
+    );
+
+    rerender({ value: second });
+    expect(result.current).toBe(second);
+
+    // And that identity is then the stable one
+    rerender({ value: { skipLobby: false } });
+    expect(result.current).toBe(second);
+  });
+
+  test("handles undefined, for an optional prop left out", () => {
+    const { result, rerender } = renderHook(
+      ({ value }) => useStableValue(value),
+      { initialProps: { value: undefined as { a: number } | undefined } },
+    );
+    expect(result.current).toBeUndefined();
+
+    const given = { a: 1 };
+    rerender({ value: given });
+    expect(result.current).toBe(given);
+  });
+
+  test("accepts its own notion of equality", () => {
+    const first = { id: 1, label: "a" };
+    const { result, rerender } = renderHook(
+      ({ value }) => useStableValue(value, (a, b) => a.id === b.id),
+      { initialProps: { value: first } },
+    );
+
+    rerender({ value: { id: 1, label: "b" } });
+    expect(result.current).toBe(first);
+  });
+});
diff --git a/src/useStableValue.ts b/src/useStableValue.ts
new file mode 100644
index 00000000..89083216
--- /dev/null
+++ b/src/useStableValue.ts
@@ -0,0 +1,29 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { useState } from "react";
+import { isEqual } from "lodash-es";
+
+/**
+ * Returns a value whose identity only changes when its contents do.
+ *
+ * For a prop that a caller is likely to write inline — an options object, say
+ * — so that a fresh but equal object on every render does not restart whatever
+ * depends on it. Deep equality by default.
+ */
+export function useStableValue<T>(
+  value: T,
+  equals: (a: T, b: T) => boolean = isEqual,
+): T {
+  const [stable, setStable] = useState(value);
+  if (equals(stable, value)) return stable;
+  // Setting state during render makes React re-run this render immediately
+  // with the new state, at which point the two are identical and the stored
+  // one is returned — so the identity handed out is consistent.
+  setStable(value);
+  return value;
+}

From 608f107f8d59a5be925467238023b95b745fa7b2 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Tue, 8 Sep 2026 13:50:17 +0200
Subject: [PATCH 062/154] End the component's media device scope on unmount
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The component built its `MediaDevices` once, in a scope nothing ever
ended, so every mount left device observers running for the rest of the
page's life. Building it in an effect ties the scope to the component's
lifetime — and to the options it was built with, which were previously
frozen at first render.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 component/index.tsx | 79 +++++++++++++++++++++++++++------------------
 1 file changed, 48 insertions(+), 31 deletions(-)

diff --git a/component/index.tsx b/component/index.tsx
index b58782be..a64cee65 100644
--- a/component/index.tsx
+++ b/component/index.tsx
@@ -32,7 +32,14 @@ Please see LICENSE in the repository root for full details.
 // sits in a `@layer`, which loses to unlayered rules either way.
 import "../src/base.css";
 
-import { type FC, type JSX, type ReactNode, useMemo, useState } from "react";
+import {
+  type FC,
+  type JSX,
+  type ReactNode,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { type MatrixClient } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { MemoryRouter } from "react-router-dom";
@@ -65,7 +72,6 @@ import { Config } from "../src/config/Config";
 import { type ConfigOptions } from "../src/config/ConfigOptions";
 import { i18n } from "../src/utils/i18n";
 import { useTheme } from "../src/useTheme";
-import { useInitial } from "../src/useInitial";
 import { useStableValue } from "../src/useStableValue";
 import styles from "./ElementCall.module.css";
 
@@ -200,13 +206,22 @@ export const ElementCall: FC<ElementCallProps> = ({
     [roomId, intent, stableConfig],
   );
 
-  const mediaDevices = useInitial(
-    () =>
-      new MediaDevices(new ObservableScope(), {
-        controlledAudioDevices: params.controlledAudioDevices,
-        callIntent: params.callIntent,
-      }),
-  );
+  // Created in an effect so that the scope it lives in ends when the component
+  // is unmounted (or these options change), rather than keeping its device
+  // observers running for the rest of the page's life. Null until then, which
+  // is one render.
+  const { controlledAudioDevices, callIntent } = params;
+  const [mediaDevices, setMediaDevices] = useState<MediaDevices | null>(null);
+  useEffect(() => {
+    const scope = new ObservableScope();
+    setMediaDevices(
+      new MediaDevices(scope, { controlledAudioDevices, callIntent }),
+    );
+    return (): void => {
+      setMediaDevices(null);
+      scope.end();
+    };
+  }, [controlledAudioDevices, callIntent]);
 
   const room = client.getRoom(roomId);
   const rtcSession = useMemo(
@@ -227,28 +242,30 @@ export const ElementCall: FC<ElementCallProps> = ({
           embedded cannot disturb the host's URL. */}
           <MemoryRouter>
             <div ref={setContainer} className={styles.root}>
-              {container !== null && rtcSession !== null && (
-                <RootElementProvider value={container}>
-                  <Decoration>
-                    <TooltipProvider>
-                      <ClientProvider client={client}>
-                        <MediaDevicesContext value={mediaDevices}>
-                          <ProcessorProvider>
-                            <ElementCallView
-                              client={client}
-                              rtcSession={rtcSession}
-                              isPasswordlessUser={false}
-                              confineToRoom={params.confineToRoom}
-                              preload={params.preload}
-                              skipLobby={params.skipLobby}
-                            />
-                          </ProcessorProvider>
-                        </MediaDevicesContext>
-                      </ClientProvider>
-                    </TooltipProvider>
-                  </Decoration>
-                </RootElementProvider>
-              )}
+              {container !== null &&
+                rtcSession !== null &&
+                mediaDevices !== null && (
+                  <RootElementProvider value={container}>
+                    <Decoration>
+                      <TooltipProvider>
+                        <ClientProvider client={client}>
+                          <MediaDevicesContext value={mediaDevices}>
+                            <ProcessorProvider>
+                              <ElementCallView
+                                client={client}
+                                rtcSession={rtcSession}
+                                isPasswordlessUser={false}
+                                confineToRoom={params.confineToRoom}
+                                preload={params.preload}
+                                skipLobby={params.skipLobby}
+                              />
+                            </ProcessorProvider>
+                          </MediaDevicesContext>
+                        </ClientProvider>
+                      </TooltipProvider>
+                    </Decoration>
+                  </RootElementProvider>
+                )}
             </div>
           </MemoryRouter>
         </UrlParamsProvider>

From bc58aed0d7443bc5cbdcf22a56d6cbd4efa4339f Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Tue, 8 Sep 2026 13:52:34 +0200
Subject: [PATCH 063/154] Keep keyboard shortcuts within Element Call's root
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The call's shortcuts were listened for on the window and allowed
whenever focus was inside the standalone app's `#root` — which, for a
component embedded in a host, is the host's own root, or nothing. So m,
v and space fired while the user typed in the host's composer, and two
Element Calls on one page both answered every key.

Listen on the element Element Call treats as its root instead (the body
standalone, so nothing changes there), and judge whether a key press is
spoken for by what has focus — a dialog or a text field — rather than by
where it sits in the DOM, since the modals are now portalled to that
same root.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 src/useCallViewKeyboardShortcuts.test.tsx | 63 +++++++++++++++++-
 src/useCallViewKeyboardShortcuts.ts       | 80 ++++++++++++++---------
 2 files changed, 109 insertions(+), 34 deletions(-)

diff --git a/src/useCallViewKeyboardShortcuts.test.tsx b/src/useCallViewKeyboardShortcuts.test.tsx
index b002c23e..fddba503 100644
--- a/src/useCallViewKeyboardShortcuts.test.tsx
+++ b/src/useCallViewKeyboardShortcuts.test.tsx
@@ -18,6 +18,7 @@ import {
   ReactionsRowSize,
 } from "./reactions";
 import { type Controls } from "./controls";
+import { RootElementProvider } from "./RootElementContext";
 
 // Test Explanation:
 // - The main objective is to test `useCallViewKeyboardShortcuts`.
@@ -48,10 +49,11 @@ const TestComponent: FC<TestComponentProps> = ({
   );
   return (
     <>
-      <div id={initialModalOpen ? "root" : undefined}>
+      <div>
         <Button onClick={onButtonClick}>TEST</Button>
       </div>
-      {/*// modal lives outside of the root*/}
+      {/* A dialog, which is what claims key presses for itself; where it
+      lives in the DOM does not matter */}
       {modalOpen && (
         <dialog
           open
@@ -165,7 +167,7 @@ test("unmuting happens in place of the default action", async () => {
   // container element that can be interactive and receive focus / keydown
   // events. <video> is kind of a weird choice, but it'll do the job.
   render(
-    <div id="root">
+    <div>
       <video
         tabIndex={0}
         onKeyDown={(e) => defaultPrevented(e.isDefaultPrevented())}
@@ -210,3 +212,58 @@ test("escape button does not trigger back if sth else is focused", async () => {
   await user.keyboard("[Escape]");
   expect(window.controls.onBackButtonPressed).toHaveBeenCalled();
 });
+
+test("typing in a text field is not a shortcut", async () => {
+  const user = userEvent.setup();
+  const toggleHandRaised = vi.fn();
+  const { getByRole } = render(
+    <>
+      <input type="text" aria-label="Name" />
+      <TestComponent toggleHandRaised={toggleHandRaised} />
+    </>,
+  );
+
+  getByRole("textbox", { name: "Name" }).focus();
+  await user.keyboard("h");
+  expect(toggleHandRaised).not.toHaveBeenCalled();
+});
+
+/**
+ * Element Call embedded in a host's page: the root is a container, with the
+ * rest of the page around it.
+ */
+const Embedded: FC<{ toggleHandRaised: () => void }> = ({
+  toggleHandRaised,
+}) => {
+  const [root, setRoot] = useState<HTMLDivElement | null>(null);
+  return (
+    <>
+      <button>Host button</button>
+      <div ref={setRoot} data-testid="root">
+        {root !== null && (
+          <RootElementProvider value={root}>
+            <TestComponent toggleHandRaised={toggleHandRaised} />
+          </RootElementProvider>
+        )}
+      </div>
+    </>
+  );
+};
+
+test("only hears keys pressed within its root element", async () => {
+  const user = userEvent.setup();
+  const toggleHandRaised = vi.fn();
+  const { getByRole } = render(
+    <Embedded toggleHandRaised={toggleHandRaised} />,
+  );
+
+  // Focus on the host's page: none of Element Call's business
+  getByRole("button", { name: "Host button" }).focus();
+  await user.keyboard("h");
+  expect(toggleHandRaised).not.toHaveBeenCalled();
+
+  // Focus inside the root: a shortcut
+  getByRole("button", { name: "TEST" }).focus();
+  await user.keyboard("h");
+  expect(toggleHandRaised).toHaveBeenCalledOnce();
+});
diff --git a/src/useCallViewKeyboardShortcuts.ts b/src/useCallViewKeyboardShortcuts.ts
index 9022d22f..b95f643b 100644
--- a/src/useCallViewKeyboardShortcuts.ts
+++ b/src/useCallViewKeyboardShortcuts.ts
@@ -9,6 +9,7 @@ import { useCallback, useMemo, useRef } from "react";
 import { logger } from "matrix-js-sdk/lib/logger";
 
 import { useEventTarget } from "./useEvents";
+import { useRootElement } from "./RootElementContext";
 import {
   type ReactionOption,
   ReactionSet,
@@ -16,28 +17,37 @@ import {
 } from "./reactions";
 
 /**
- * Determines whether focus is in the same part of the tree as the given
- * element (specifically, if the element or an ancestor of it is focused).
+ * Whether what has focus is something a key press belongs to, rather than
+ * being free for a shortcut: a dialog (the settings, the invite modal, the
+ * reaction picker), or anything the user types into.
+ *
+ * Judged by what the focused element is, not by where it sits in the DOM:
+ * Element Call's modals are portalled to whatever it treats as its root, which
+ * is the body for the standalone app but a container inside the host's page
+ * for the component.
  */
-const mayReceiveKeyEvents = (): boolean => {
-  const root = document.getElementById("root");
-  if (root === null) {
-    logger.warn(
-      "[mayReceiveKeyEvents] Root element not found, always allow keyboard shortcuts (m,v,esc...)",
-    );
-    return true;
-  }
-  const focusElement = document.activeElement;
-  const nothingInFocus = focusElement === null;
-  const focusOnBody = focusElement === document.body;
-  const noPrimaryFocus =
-    nothingInFocus || root.contains(focusElement) || focusOnBody;
+const focusIsClaimed = (): boolean => {
+  const active = document.activeElement;
+  if (active === null || active === document.body) return false;
+  if (active.closest("dialog, [role='dialog']") !== null) return true;
+  return isTextEntry(active);
+};
 
-  logger.warn(
-    `[mayReceiveKeyEvents] nothingInFocus ${nothingInFocus}, focusOnBody ${focusOnBody}, noPrimaryFocus ${noPrimaryFocus}`,
-  );
-  // Only if we do not have a primary focus we allow keyboard shortcut events.
-  return noPrimaryFocus;
+const textInputTypes = new Set([
+  "text",
+  "search",
+  "email",
+  "url",
+  "password",
+  "number",
+  "tel",
+]);
+
+const isTextEntry = (element: Element): boolean => {
+  if (element instanceof HTMLTextAreaElement) return true;
+  if (element instanceof HTMLInputElement)
+    return textInputTypes.has(element.type);
+  return element instanceof HTMLElement && element.isContentEditable;
 };
 
 /**
@@ -54,10 +64,15 @@ const KeyToReactionMap: Record<string, ReactionOption> = Object.fromEntries(
 );
 
 /**
- * This hook sets up gloabl keyboard shortcuts. It will filter for keyboard presses that should be ignored due to user
- * currently focussing on a modal.
- * This is achieved by using the fact, that all modal inputs are outside the #root element and use react portals to get rendered.
- * The following shortcuts are auspported (optional):
+ * Sets up the call's keyboard shortcuts.
+ *
+ * They are listened for on the element Element Call treats as its root — the
+ * page, standalone, or the container a host mounted it in — so that a key
+ * pressed anywhere else on a host's page is none of Element Call's business,
+ * and two Element Calls on one page each only hear their own. Key presses that
+ * belong to something else — a dialog, a text field — are left alone.
+ *
+ * The following shortcuts are supported (optional):
  * @param toggleAudio - triggered on (m)
  * @param toggleVideo - triggered on (v)
  * @param setAudioEnabled - push to talk behavior controlled via (space)
@@ -76,17 +91,19 @@ export function useCallViewKeyboardShortcuts(
   toggleHandRaised: (() => void) | null,
 ): void {
   const spacebarHeld = useRef(false);
+  const rootElement = useRootElement();
 
-  // These event handlers are set on the window because we want users to be able
-  // to trigger them without going to the trouble of focusing something
+  // Listened for on the root rather than on what has focus, so that the user
+  // need not focus anything in particular for a shortcut to work: a key pressed
+  // with nothing focused reaches the body, which is the root standalone.
 
   useEventTarget(
-    window,
+    rootElement,
     "keydown",
     useCallback(
       (event: KeyboardEvent) => {
         logger.info("Keydown event", event);
-        if (!mayReceiveKeyEvents()) return;
+        if (focusIsClaimed()) return;
         if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
           return;
 
@@ -121,18 +138,18 @@ export function useCallViewKeyboardShortcuts(
         toggleHandRaised,
       ],
     ),
-    // Because this is set on the window, to prevent shortcuts from activating
+    // Because this is set on an ancestor, to prevent shortcuts from activating
     // another event callback at the same time, we need to preventDefault
     // *before* child elements receive the event by using capture mode
     useMemo(() => ({ capture: true }), []),
   );
 
   useEventTarget(
-    window,
+    rootElement,
     "keyup",
     useCallback(
       (event: KeyboardEvent) => {
-        if (!mayReceiveKeyEvents() || !mayReceiveSpaceKeyEvents()) return;
+        if (focusIsClaimed() || !mayReceiveSpaceKeyEvents()) return;
         if (event.key === " ") {
           spacebarHeld.current = false;
           setAudioEnabled?.(false);
@@ -142,6 +159,7 @@ export function useCallViewKeyboardShortcuts(
     ),
   );
 
+  // Losing the window is what releases a held spacebar, wherever we are in it
   useEventTarget(
     window,
     "blur",

From 6ae4f0539a5b41c2a97a5dfaf7d2500005126fd7 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Tue, 8 Sep 2026 13:53:50 +0200
Subject: [PATCH 064/154] Leave the page title to the page

The call and the lobby each set `document.title`, so a component
embedded in a host renamed the host's tab to "Element Call | <room>".
The title belongs to whoever owns the page: the standalone app's
RoomPage now sets it, for whichever room it has got as far as knowing
about, and the call itself no longer touches it.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 src/room/GroupCallView.tsx |  2 --
 src/room/LobbyView.tsx     |  2 --
 src/room/RoomPage.tsx      | 16 ++++++++++++++++
 src/room/useRoomName.ts    | 29 +++++++++++++++++++++--------
 4 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx
index 623b8839..054ff450 100644
--- a/src/room/GroupCallView.tsx
+++ b/src/room/GroupCallView.tsx
@@ -57,7 +57,6 @@ import {
   type CallEventSounds,
 } from "./CallEventAudioRenderer";
 import { useLatest } from "../useLatest";
-import { usePageTitle } from "../usePageTitle";
 import {
   ConnectionLostError,
   E2EENotSupportedError,
@@ -208,7 +207,6 @@ export const GroupCallView: FC<Props> = ({
     if (passwordFromUrl) saveKeyForRoom(room.roomId, passwordFromUrl);
   }, [passwordFromUrl, room.roomId]);
 
-  usePageTitle(roomName);
   useAppBarTitle(roomName);
 
   const matrixInfo = useMemo((): MatrixInfo => {
diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx
index e122b3f2..60fb715e 100644
--- a/src/room/LobbyView.tsx
+++ b/src/room/LobbyView.tsx
@@ -44,7 +44,6 @@ import {
   useTrackProcessor,
   useTrackProcessorSync,
 } from "../livekit/TrackProcessorContext";
-import { usePageTitle } from "../usePageTitle";
 import { getValue } from "../utils/observable";
 import { useBehavior } from "../useBehavior";
 import { CallFooter, type FooterSnapshot } from "../components/CallFooter";
@@ -87,7 +86,6 @@ export const LobbyView: FC<Props> = ({
 
   const { t } = useTranslation();
 
-  usePageTitle(matrixInfo.roomName);
   useAppBarPrimaryButtonIconKind("back");
   const audioEnabled = useBehavior(muteStates.audio.enabled$);
   const videoEnabled = useBehavior(muteStates.video.enabled$);
diff --git a/src/room/RoomPage.tsx b/src/room/RoomPage.tsx
index f49509e3..8d974ee4 100644
--- a/src/room/RoomPage.tsx
+++ b/src/room/RoomPage.tsx
@@ -25,6 +25,8 @@ import { useProfile } from "../profile/useProfile";
 import { useOptInAnalytics } from "../settings/settings";
 import { Link } from "../button/Link";
 import { ErrorView } from "../ErrorView";
+import { usePageTitle } from "../usePageTitle";
+import { useRoomName } from "./useRoomName";
 
 export const RoomPage: FC = (): ReactNode => {
   const urlParams = useUrlParams();
@@ -46,6 +48,20 @@ export const RoomPage: FC = (): ReactNode => {
 
   const groupCallState = useLoadGroupCall(client, roomIdOrAlias, viaServers);
 
+  // The page title is the page's to set, not the call's: a host embedding the
+  // call has a title of its own. So it is set here, for whichever room we have
+  // got as far as knowing about.
+  const roomName = useRoomName(
+    groupCallState.kind === "loaded" ? groupCallState.rtcSession.room : null,
+  );
+  usePageTitle(
+    roomName ??
+      (groupCallState.kind === "canKnock" ||
+      groupCallState.kind === "waitForInvite"
+        ? groupCallState.roomSummary.name
+        : undefined),
+  );
+
   useEffect(() => {
     // If we've finished loading, are not already authed and we've been given a display name as
     // a URL param, automatically register a passwordless user
diff --git a/src/room/useRoomName.ts b/src/room/useRoomName.ts
index 83857857..f20b3b2a 100644
--- a/src/room/useRoomName.ts
+++ b/src/room/useRoomName.ts
@@ -6,14 +6,27 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type Room, RoomEvent } from "matrix-js-sdk";
-import { useCallback } from "react";
+import { useCallback, useSyncExternalStore } from "react";
 
-import { useTypedEventEmitterState } from "../useEvents";
-
-export function useRoomName(room: Room): string {
-  return useTypedEventEmitterState(
-    room,
-    RoomEvent.Name,
-    useCallback(() => room.name, [room]),
+/**
+ * The room's name, kept up to date. Null when there is no room yet, for a
+ * caller that only sometimes has one.
+ */
+export function useRoomName(room: Room): string;
+export function useRoomName(room: Room | null): string | null;
+export function useRoomName(room: Room | null): string | null {
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      if (room === null) return (): void => {};
+      room.on(RoomEvent.Name, onChange);
+      return (): void => {
+        room.off(RoomEvent.Name, onChange);
+      };
+    },
+    [room],
+  );
+  return useSyncExternalStore(
+    subscribe,
+    useCallback(() => room?.name ?? null, [room]),
   );
 }

From 7137e6ec1446bba6381a36daa48dba3305369100 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Tue, 8 Sep 2026 13:56:10 +0200
Subject: [PATCH 065/154] Update the developer settings snapshot for the scoped
 pre style

"de-globalise styles" gave the tab's <pre> elements a class instead of
styling the bare element, but did not update the snapshot.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../DeveloperSettingsTab.test.tsx.snap        | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap b/src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap
index 6e3f87d2..63a68ac4 100644
--- a/src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap
+++ b/src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap
@@ -380,7 +380,9 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       local
       )
     </p>
-    <pre>
+    <pre
+      class="_pre_2ddec4"
+    >
       {
   "region": "local",
   "version": "1.2.3"
@@ -390,7 +392,9 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     <p>
       Local Participant
     </p>
-    <pre>
+    <pre
+      class="_pre_2ddec4"
+    >
       localParticipantIdentity
     </pre>
     <p>
@@ -417,7 +421,9 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
       remote
       )
     </p>
-    <pre>
+    <pre
+      class="_pre_2ddec4"
+    >
       {
   "region": "remote",
   "version": "4.5.6"
@@ -427,7 +433,9 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
     <p>
       Local Participant
     </p>
-    <pre>
+    <pre
+      class="_pre_2ddec4"
+    >
       localParticipantIdentity
     </pre>
     <p>
@@ -674,7 +682,9 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
   <p>
     Environment variables
   </p>
-  <pre>
+  <pre
+    class="_pre_2ddec4"
+  >
     {
   "MY_MOCK_ENV": 10,
   "ENV": "test"
@@ -683,7 +693,9 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
   <p>
     URL parameters
   </p>
-  <pre>
+  <pre
+    class="_pre_2ddec4"
+  >
     {
   "mocked": true,
   "answer": 42

From f0359259f9694a37a30a84d9cb751f1900bd4f0d Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Tue, 8 Sep 2026 15:38:59 +0200
Subject: [PATCH 066/154] Format base.css

The formatter wants the layered import of the Compound design tokens on
one line; "de-globalise styles" left it wrapped.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 src/base.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/base.css b/src/base.css
index d31622fb..e566fed2 100644
--- a/src/base.css
+++ b/src/base.css
@@ -33,8 +33,7 @@ the app and for the component build. */
 @import url("@fontsource/inconsolata/700.css");
 
 @import url("normalize.css/normalize.css") layer(normalize);
-@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css")
-layer(compound);
+@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
 @import url("@vector-im/compound-web/dist/style.css") layer(compound.components);
 
 :root {

From 7cd21476f7542583ffae7552b48f26986f499d8b Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Tue, 8 Sep 2026 15:38:59 +0200
Subject: [PATCH 067/154] Say outright whether the profile is ours to change
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Whether to offer the profile settings was inferred from whether the host
could close Element Call. For a component with no host bridge — the
default — nothing could, so an embedded Element Call let the user edit
the profile of an account that belongs to the host application.

`HostBridge.supportsProfileChanges` states it directly: true standalone,
where Element Call signed the user in itself; false for a widget's host
and for anything embedding the component (which sets it itself, since
the client it hands over is its own). The profile tab and the profile
shortcut follow that. What a host's ability to close us still decides —
what to show after the call ends — is a question about who owns our
lifetime, and stays keyed on `close`.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 component/dev/DevHostBridge.ts |  4 ++--
 component/index.tsx            | 23 +++++++++++++++++++++--
 src/HostBridge.test.ts         |  9 +++++++++
 src/HostBridge.ts              | 16 +++++++++++++++-
 src/room/GroupCallView.tsx     |  6 ++----
 src/room/InCallView.tsx        |  7 ++-----
 src/settings/SettingsModal.tsx |  5 ++---
 7 files changed, 53 insertions(+), 17 deletions(-)

diff --git a/component/dev/DevHostBridge.ts b/component/dev/DevHostBridge.ts
index 417e4833..83707920 100644
--- a/component/dev/DevHostBridge.ts
+++ b/component/dev/DevHostBridge.ts
@@ -10,7 +10,7 @@ import { NEVER, Subject } from "rxjs";
 import {
   type DeviceMuteRequest,
   type DeviceMuteState,
-  type HostBridge,
+  type ElementCallHostBridge,
   type HostRequest,
 } from "../index";
 
@@ -19,7 +19,7 @@ import {
  * so that the harness can watch both directions of the conversation between
  * Element Call and its host.
  */
-export interface DevHostBridge extends HostBridge {
+export interface DevHostBridge extends ElementCallHostBridge {
   /** Tells Element Call the host has changed theme. */
   requestTheme(name: string): void;
   /** Tells Element Call to leave the call. */
diff --git a/component/index.tsx b/component/index.tsx
index a64cee65..75420d0f 100644
--- a/component/index.tsx
+++ b/component/index.tsx
@@ -100,6 +100,14 @@ export {
  */
 export type ElementCallConfiguration = Partial<UrlParams>;
 
+/**
+ * What a host embedding Element Call implements to talk to it. This is the
+ * {@link HostBridge} less what Element Call already knows about such a host:
+ * the account is the host's, since the client is, so the profile is not
+ * Element Call's to change.
+ */
+export type ElementCallHostBridge = Omit<HostBridge, "supportsProfileChanges">;
+
 export interface ElementCallProps {
   /**
    * The client to place the call with. Element Call does not authenticate
@@ -132,7 +140,7 @@ export interface ElementCallProps {
    * joined or hung up, to be asked to keep the call on screen, and so on.
    * Without one, Element Call assumes it has no host to talk to.
    */
-  hostBridge?: HostBridge;
+  hostBridge?: ElementCallHostBridge;
 }
 
 /**
@@ -181,8 +189,19 @@ export const ElementCall: FC<ElementCallProps> = ({
   roomId,
   intent = UserIntent.JoinExistingCall,
   config,
-  hostBridge = nullHostBridge,
+  hostBridge: suppliedHostBridge = nullHostBridge,
 }): ReactNode => {
+  // Whatever the host says or does not say, the account is its own: it signed
+  // the user in and handed us the client. So Element Call never offers to edit
+  // the profile from inside a component.
+  const hostBridge = useMemo(
+    (): HostBridge => ({
+      ...suppliedHostBridge,
+      supportsProfileChanges: false,
+    }),
+    [suppliedHostBridge],
+  );
+
   // The container is what Element Call decorates and portals into, so nothing
   // inside can render until we have it.
   const [container, setContainer] = useState<HTMLDivElement | null>(null);
diff --git a/src/HostBridge.test.ts b/src/HostBridge.test.ts
index 4ab42a13..41410eca 100644
--- a/src/HostBridge.test.ts
+++ b/src/HostBridge.test.ts
@@ -247,6 +247,11 @@ describe("createWidgetHostBridge", () => {
     });
   });
 
+  test("does not offer profile changes, since the host signed the user in", () => {
+    const bridge = createWidgetHostBridge(mockWidget({}));
+    expect(bridge.supportsProfileChanges).toBe(false);
+  });
+
   describe("supportsReactions", () => {
     const capabilities = [
       "org.matrix.msc2762.send.event:m.reaction",
@@ -278,6 +283,10 @@ describe("nullHostBridge", () => {
     expect(nullHostBridge.close).toBeUndefined();
   });
 
+  test("supports profile changes, since Element Call signed the user in itself", () => {
+    expect(nullHostBridge.supportsProfileChanges).toBe(true);
+  });
+
   test("offers no media download, so Element Call uses its own client", () => {
     expect(nullHostBridge.downloadMedia).toBeUndefined();
   });
diff --git a/src/HostBridge.ts b/src/HostBridge.ts
index bb078672..66586643 100644
--- a/src/HostBridge.ts
+++ b/src/HostBridge.ts
@@ -96,8 +96,16 @@ export interface HostBridge {
   /** The host wants to change, or read back, the device mute state. */
   deviceMute$: Observable<HostRequest<DeviceMuteRequest, DeviceMuteState>>;
 
-  // What the host is capable of.
+  // What the host is, and is capable of.
 
+  /**
+   * Whether Element Call may offer to change the user's profile — their
+   * display name and avatar. Only when the account is Element Call's own,
+   * which is to say standalone: a widget's host and an application embedding
+   * Element Call both signed the user in themselves, so the profile is theirs
+   * to manage and Element Call must not offer to edit it.
+   */
+  readonly supportsProfileChanges: boolean;
   /** Whether the host permits Element Call to send and receive reactions. */
   readonly supportsReactions: boolean;
   /**
@@ -122,6 +130,9 @@ export const nullHostBridge: HostBridge = {
   join$: NEVER,
   hangUp$: NEVER,
   deviceMute$: NEVER,
+  // Standalone, the account is Element Call's own: it signed the user in, so
+  // it may offer to change the profile.
+  supportsProfileChanges: true,
   // Standalone Element Call reaches the homeserver itself, so nothing is
   // withholding these from it.
   supportsReactions: true,
@@ -176,6 +187,9 @@ export function createWidgetHostBridge(widget: WidgetHelpers): HostBridge {
     join$: requests(ElementWidgetActions.JoinCall),
     hangUp$: requests(ElementWidgetActions.HangupCall),
     deviceMute$: requests(ElementWidgetActions.DeviceMute),
+    // The client we are a widget of signed the user in, so the profile is its
+    // to manage
+    supportsProfileChanges: false,
     // Element Call needs the host's permission to send reactions on its behalf.
     // Read on access rather than up front: the widget API negotiates its
     // capabilities asynchronously, and the bridge is built before that settles.
diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx
index 054ff450..e3cbea32 100644
--- a/src/room/GroupCallView.tsx
+++ b/src/room/GroupCallView.tsx
@@ -116,10 +116,8 @@ export const GroupCallView: FC<Props> = ({
   const hostBridge = useHostBridge();
   // A host that can close us is a host that decides when we stop existing, so
   // we neither show our own post-call screens nor assume we have time to
-  // finish what we are doing.
-  // TODO: this reads a capability as a proxy for who owns our lifetime. Worth
-  // finding a more direct way to express it — see the guidance in UrlParams.ts
-  // on naming behaviours rather than situations.
+  // finish what we are doing. (Whose account the user's is, by contrast, is
+  // stated outright: see `HostBridge.supportsProfileChanges`.)
   const hostControlsLifetime = hostBridge.close !== undefined;
 
   const muteAllAudio = useBehavior(muteAllAudio$);
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index e2df7529..9482d66c 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -329,11 +329,8 @@ export const InCallView: FC<InCallViewProps> = ({
 
   const openProfile = useMemo(
     () =>
-      // A host that can dismiss us is a host that owns the user's account, so
-      // their profile is not ours to edit.
-      // TODO: another use of the close capability as a proxy — see the note in
-      // GroupCallView.
-      hostBridge.close === undefined
+      // The profile is only ours to edit when the account is ours
+      hostBridge.supportsProfileChanges
         ? (): void => {
             setSettingsTab("profile");
             setSettingsOpen(true);
diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx
index 35604d98..933ac66f 100644
--- a/src/settings/SettingsModal.tsx
+++ b/src/settings/SettingsModal.tsx
@@ -235,9 +235,8 @@ export const SettingsModal: FC<Props> = ({
   };
 
   const tabs = [audioTab, videoTab];
-  // A host that can dismiss us is a host that owns the user's account, so their
-  // profile is not ours to edit.
-  if (hostBridge.close === undefined) tabs.push(profileTab);
+  // The profile is only ours to edit when the account is ours
+  if (hostBridge.supportsProfileChanges) tabs.push(profileTab);
   tabs.push(preferencesTab);
   if (isRageshakeAvailable || import.meta.env.VITE_PACKAGE === "full") {
     // for full package we want to show the analytics consent checkbox

From 779ee7a008f496397a8031e7137771510fa0fc1d Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Tue, 8 Sep 2026 14:59:51 +0200
Subject: [PATCH 068/154] Finish measuring the root rather than the viewport

The move from media queries to `@container element-call` queries left a
few places still asking the viewport: the room header's compact size
and the lobby's footer placement went through `useMediaQuery`, the
lobby's video preview was `50vh` tall, the reaction picker was capped at
`100vw`, and the content insets and the gradient background were sized
from `100vw`/`100vh`. Embedded in a corner of a host's page, each of
those answered for the page rather than the corner.

`useRootSizeMatches` is `useMediaQuery` for the root element, built on
the same `observeElementSize$` the layout uses; the lengths become
container units. Container units resolve against the nearest query
container, and there are others in the tree (the spotlight layouts, the
media tiles), so base.css says when they may be used.

jsdom gives the body no size at all, which would have every such query
read as a tiny window; the test setup now gives it a desktop's, matching
what the media query mock already answered.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 src/Header.tsx                             |   4 +-
 src/base.css                               |  22 ++--
 src/button/ReactionToggleButton.module.css |   2 +-
 src/room/LobbyView.tsx                     |   6 +-
 src/room/VideoPreview.module.css           |   4 +-
 src/useRootSize.test.tsx                   | 115 +++++++++++++++++++++
 src/useRootSize.ts                         |  50 +++++++++
 src/vitest.setup.ts                        |  16 ++-
 8 files changed, 205 insertions(+), 14 deletions(-)
 create mode 100644 src/useRootSize.test.tsx
 create mode 100644 src/useRootSize.ts

diff --git a/src/Header.tsx b/src/Header.tsx
index cffc3402..a963f16b 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -16,7 +16,7 @@ import styles from "./Header.module.css";
 import Logo from "./icons/Logo.svg?react";
 import { Avatar, Size } from "./Avatar";
 import { EncryptionLock } from "./room/EncryptionLock";
-import { useMediaQuery } from "./useMediaQuery";
+import { useRootSizeMatches } from "./useRootSize";
 import { DisconnectedBanner } from "./DisconnectedBanner";
 
 interface HeaderProps extends HTMLAttributes<HTMLElement> {
@@ -142,7 +142,7 @@ export const RoomHeaderInfo: FC<RoomHeaderInfoProps> = ({
   participantCount,
 }) => {
   const { t } = useTranslation();
-  const size = useMediaQuery("(max-width: 550px)") ? "sm" : "lg";
+  const size = useRootSizeMatches(({ width }) => width <= 550) ? "sm" : "lg";
 
   return (
     <div className={styles.roomHeaderInfo} data-size={size}>
diff --git a/src/base.css b/src/base.css
index e566fed2..8287f01d 100644
--- a/src/base.css
+++ b/src/base.css
@@ -46,21 +46,23 @@ the app and for the component build. */
   --font-size-headline: calc(32px * var(--font-scale));
 
   --cpd-color-border-accent: var(--cpd-color-green-800);
-  /* The distance to inset non-full-width content from the edge of the window
-  along the inline axis. This ramps up from 16px for typical mobile windows, to
-  96px for typical desktop windows, and accounts for the safe area. */
+  /* The distance to inset non-full-width content from the edge of Element
+  Call's root along the inline axis. This ramps up from 16px for typical mobile
+  windows, to 96px for typical desktop windows, and accounts for the safe area.
+  Container units resolve where the property is used, so this must only be used
+  by elements whose nearest query container is the root. */
   --content-inset-left: calc(
     env(safe-area-inset-left) +
       min(
         var(--cpd-space-24x),
-        max(var(--cpd-space-4x), calc((100vw - 900px) / 3))
+        max(var(--cpd-space-4x), calc((100cqw - 900px) / 3))
       )
   );
   --content-inset-right: calc(
     env(safe-area-inset-right) +
       min(
         var(--cpd-space-24x),
-        max(var(--cpd-space-4x), calc((100vw - 900px) / 3))
+        max(var(--cpd-space-4x), calc((100cqw - 900px) / 3))
       )
   );
   --small-drop-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
@@ -80,7 +82,13 @@ the app and for the component build. */
 this element rather than media queries against the viewport. For the standalone
 app the two are the same thing, since the root is the page; for a host that
 embeds Element Call in a corner of its own page they are not, and it is the
-corner that the layout has to fit. */
+corner that the layout has to fit.
+
+For the same reason, lengths that were once a share of the viewport (`100vw`)
+are a share of the nearest query container (`100cqw`). Container units cannot
+name their container, so they only mean this element where no other query
+container — a spotlight layout, a media tile — lies in between; check that
+before using one further down the tree. */
 [data-element-call-root] {
   container: element-call / size;
 }
@@ -107,7 +115,7 @@ corner that the layout has to fit. */
 
   [data-element-call-root][data-background="gradient"][data-platform="desktop"]::before {
     background-image: url("graphics/desktop-gradient.png");
-    background-size: max(1440px, 100vw) max(1440px, 100vh);
+    background-size: max(1440px, 100cqw) max(1440px, 100cqh);
     background-position: center;
   }
 }
diff --git a/src/button/ReactionToggleButton.module.css b/src/button/ReactionToggleButton.module.css
index 3be0fd35..4a2bd8ba 100644
--- a/src/button/ReactionToggleButton.module.css
+++ b/src/button/ReactionToggleButton.module.css
@@ -35,7 +35,7 @@ div.reactionPopupMenuRoot {
 
 .reactionPopupMenuRoot > div {
   width: fit-content;
-  max-width: 100vw;
+  max-width: 100cqw;
 }
 
 div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div {
diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx
index 60fb715e..89018691 100644
--- a/src/room/LobbyView.tsx
+++ b/src/room/LobbyView.tsx
@@ -34,7 +34,7 @@ import { type MatrixInfo, VideoPreview } from "./VideoPreview";
 import { type MuteStates } from "../state/MuteStates";
 import { InviteButton } from "../button/InviteButton";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
-import { useMediaQuery } from "../useMediaQuery";
+import { useRootSizeMatches } from "../useRootSize";
 import { E2eeType } from "../e2ee/e2eeType";
 import { Link } from "../button/Link";
 import { useMediaDevices } from "../MediaDevicesContext";
@@ -117,7 +117,9 @@ export const LobbyView: FC<Props> = ({
   }, [navigate]);
   const hangup = confineToRoom ? undefined : onLeaveClick;
 
-  const recentsButtonInFooter = useMediaQuery("(max-height: 500px)");
+  const recentsButtonInFooter = useRootSizeMatches(
+    ({ height }) => height <= 500,
+  );
   const recentsButton = !confineToRoom && (
     <Link className={styles.recents} to="/">
       {t("lobby.leave_button")}
diff --git a/src/room/VideoPreview.module.css b/src/room/VideoPreview.module.css
index 44c43faf..4d3d0562 100644
--- a/src/room/VideoPreview.module.css
+++ b/src/room/VideoPreview.module.css
@@ -9,7 +9,9 @@ Please see LICENSE in the repository root for full details.
   margin-left: var(--content-inset-left);
   margin-right: var(--content-inset-right);
   min-block-size: 0;
-  block-size: 50vh;
+  /* Half the height of Element Call's root, not of the viewport: embedded,
+  the two differ (see the note on container units in base.css) */
+  block-size: 50cqh;
   aspect-ratio: 16 / 9;
   max-width: 100%;
   border-radius: var(--cpd-space-4x);
diff --git a/src/useRootSize.test.tsx b/src/useRootSize.test.tsx
new file mode 100644
index 00000000..6afa7adc
--- /dev/null
+++ b/src/useRootSize.test.tsx
@@ -0,0 +1,115 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { act, renderHook } from "@testing-library/react";
+import { createElement, type FC, type PropsWithChildren } from "react";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import { useRootSizeMatches } from "./useRootSize";
+import { RootElementProvider } from "./RootElementContext";
+
+/** A ResizeObserver the test fires itself. jsdom does not ship one. */
+class MockResizeObserver {
+  public static instances: MockResizeObserver[] = [];
+
+  public constructor(private readonly callback: ResizeObserverCallback) {
+    MockResizeObserver.instances.push(this);
+  }
+
+  public observe(): void {
+    this.fire();
+  }
+
+  public unobserve(): void {}
+
+  public disconnect(): void {}
+
+  public fire(): void {
+    this.callback([], this as unknown as ResizeObserver);
+  }
+}
+
+describe("useRootSizeMatches", () => {
+  const originalResizeObserver = window.ResizeObserver;
+  let root: HTMLDivElement;
+  let size: { width: number; height: number };
+  let Wrapper: FC<PropsWithChildren>;
+
+  beforeEach(() => {
+    MockResizeObserver.instances = [];
+    window.ResizeObserver =
+      MockResizeObserver as unknown as typeof ResizeObserver;
+    size = { width: 800, height: 600 };
+    root = document.createElement("div");
+    Object.defineProperty(root, "clientWidth", { get: () => size.width });
+    Object.defineProperty(root, "clientHeight", { get: () => size.height });
+    Wrapper = ({ children }) =>
+      createElement(RootElementProvider, { value: root }, children);
+  });
+
+  afterEach(() => {
+    window.ResizeObserver = originalResizeObserver;
+  });
+
+  const resize = (to: { width: number; height: number }): void => {
+    size = to;
+    act(() => {
+      for (const observer of MockResizeObserver.instances) observer.fire();
+    });
+  };
+
+  test("answers for the root's current size straight away", () => {
+    const { result } = renderHook(
+      () => useRootSizeMatches(({ width }) => width <= 550),
+      { wrapper: Wrapper },
+    );
+    expect(result.current).toBe(false);
+  });
+
+  test("follows the root as it is resized", () => {
+    const { result } = renderHook(
+      () => useRootSizeMatches(({ width }) => width <= 550),
+      { wrapper: Wrapper },
+    );
+
+    resize({ width: 300, height: 600 });
+    expect(result.current).toBe(true);
+
+    resize({ width: 900, height: 600 });
+    expect(result.current).toBe(false);
+  });
+
+  test("only re-renders when the answer changes", () => {
+    const renders = vi.fn();
+    renderHook(
+      () => {
+        renders();
+        return useRootSizeMatches(({ height }) => height <= 500);
+      },
+      { wrapper: Wrapper },
+    );
+    const before = renders.mock.calls.length;
+
+    // Still tall enough either way
+    resize({ width: 800, height: 700 });
+    resize({ width: 500, height: 650 });
+    expect(renders.mock.calls.length).toBe(before);
+
+    resize({ width: 500, height: 400 });
+    expect(renders.mock.calls.length).toBe(before + 1);
+  });
+
+  test("keeps one subscription across renders with an inline predicate", () => {
+    const { rerender } = renderHook(
+      () => useRootSizeMatches(({ width }) => width <= 550),
+      { wrapper: Wrapper },
+    );
+    rerender();
+    rerender();
+    expect(MockResizeObserver.instances).toHaveLength(1);
+  });
+});
diff --git a/src/useRootSize.ts b/src/useRootSize.ts
new file mode 100644
index 00000000..9db159a0
--- /dev/null
+++ b/src/useRootSize.ts
@@ -0,0 +1,50 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { useEffect, useState } from "react";
+import { distinctUntilChanged, map } from "rxjs";
+
+import { useRootElement } from "./RootElementContext";
+import { useLatest } from "./useLatest";
+import { type ElementSize, observeElementSize$ } from "./utils/elementSize";
+
+/**
+ * Whether the space Element Call is drawn in satisfies a condition on its
+ * size: the counterpart of {@link useMediaQuery} for the container rather than
+ * the viewport, and of the `@container element-call` queries in the
+ * stylesheets. The two are the same thing standalone, where the root is the
+ * page; for a component in a corner of a host's page they are not, and it is
+ * the corner that matters.
+ *
+ * Re-renders only when the answer changes, not on every pixel of resize.
+ */
+export function useRootSizeMatches(
+  matches: (size: ElementSize) => boolean,
+): boolean {
+  const rootElement = useRootElement();
+  // The latest predicate, so that an inline arrow does not resubscribe on
+  // every render
+  const latestMatches = useLatest(matches);
+  const [result, setResult] = useState(() =>
+    matches({
+      width: rootElement.clientWidth,
+      height: rootElement.clientHeight,
+    }),
+  );
+
+  useEffect(() => {
+    const subscription = observeElementSize$(rootElement)
+      .pipe(
+        map((size) => latestMatches.current(size)),
+        distinctUntilChanged(),
+      )
+      .subscribe(setResult);
+    return (): void => subscription.unsubscribe();
+  }, [rootElement, latestMatches]);
+
+  return result;
+}
diff --git a/src/vitest.setup.ts b/src/vitest.setup.ts
index 373f08c9..965f4247 100644
--- a/src/vitest.setup.ts
+++ b/src/vitest.setup.ts
@@ -55,13 +55,27 @@ window.matchMedia = global.matchMedia = (): MediaQueryList =>
 
 // jsdom does no layout and has no ResizeObserver. The call view observes the
 // size of its root element; this one reports nothing, so that element stays at
-// whatever size jsdom says it is (zero) unless a test says otherwise.
+// whatever size jsdom says it is unless a test says otherwise.
 window.ResizeObserver ??= class ResizeObserver {
   public observe(): void {}
   public unobserve(): void {}
   public disconnect(): void {}
 };
 
+// And what jsdom says is zero, for everything — which would have every size
+// query against Element Call's root (the body, with no provider) read as a tiny
+// window. Give the body the size of a typical desktop window instead, the same
+// answer the media query mock above gives. A test that wants another size
+// supplies a root element of its own.
+for (const [property, value] of [
+  ["clientWidth", 1024],
+  ["clientHeight", 768],
+] as const)
+  Object.defineProperty(document.body, property, {
+    get: () => value,
+    configurable: true,
+  });
+
 const storage: Record<string, string> = {};
 const localStoragePolyfill = {
   getItem(key: string) {

From d18e82c54674289f73236c0107d9c2f7d0de850b Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Tue, 8 Sep 2026 15:00:49 +0200
Subject: [PATCH 069/154] Catch the component's errors inside the component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Only the call body sat inside an error boundary; anything thrown in the
lobby, the mute state or the providers propagated into the host's React
tree, where React unmounts everything up to the nearest boundary — the
host's, or the host's whole application. The standalone app has a
boundary at its top; the component now has the same, showing the error
page inside its container and asking the host to stop keeping it on
screen.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 component/index.tsx | 46 +++++++++++++++++++++++++++------------------
 1 file changed, 28 insertions(+), 18 deletions(-)

diff --git a/component/index.tsx b/component/index.tsx
index 75420d0f..5a0be5d1 100644
--- a/component/index.tsx
+++ b/component/index.tsx
@@ -45,11 +45,13 @@ import { logger } from "matrix-js-sdk/lib/logger";
 import { MemoryRouter } from "react-router-dom";
 import { I18nextProvider } from "react-i18next";
 import { TooltipProvider } from "@vector-im/compound-web";
+import { ErrorBoundary } from "@sentry/react";
 import { shouldPolyfill as shouldPolyfillSegmenter } from "@formatjs/intl-segmenter/should-polyfill";
 import { shouldPolyfill as shouldPolyfillDurationFormat } from "@formatjs/intl-durationformat/should-polyfill.js";
 
 import EN from "../locales/en/app.json";
 import { ElementCallView } from "../src/ElementCallView";
+import { ErrorPage } from "../src/FullScreenView";
 import { ClientProvider } from "../src/ClientContext";
 import {
   type HostBridge,
@@ -265,24 +267,32 @@ export const ElementCall: FC<ElementCallProps> = ({
                 rtcSession !== null &&
                 mediaDevices !== null && (
                   <RootElementProvider value={container}>
-                    <Decoration>
-                      <TooltipProvider>
-                        <ClientProvider client={client}>
-                          <MediaDevicesContext value={mediaDevices}>
-                            <ProcessorProvider>
-                              <ElementCallView
-                                client={client}
-                                rtcSession={rtcSession}
-                                isPasswordlessUser={false}
-                                confineToRoom={params.confineToRoom}
-                                preload={params.preload}
-                                skipLobby={params.skipLobby}
-                              />
-                            </ProcessorProvider>
-                          </MediaDevicesContext>
-                        </ClientProvider>
-                      </TooltipProvider>
-                    </Decoration>
+                    {/* Whatever goes wrong in here is shown in here. Left to
+                    propagate, an error would unmount the host's own tree. */}
+                    <ErrorBoundary
+                      fallback={(error) => <ErrorPage error={error} />}
+                      // A broken call should not hold the host on screen
+                      onError={() => void hostBridge.setAlwaysOnScreen(false)}
+                    >
+                      <Decoration>
+                        <TooltipProvider>
+                          <ClientProvider client={client}>
+                            <MediaDevicesContext value={mediaDevices}>
+                              <ProcessorProvider>
+                                <ElementCallView
+                                  client={client}
+                                  rtcSession={rtcSession}
+                                  isPasswordlessUser={false}
+                                  confineToRoom={params.confineToRoom}
+                                  preload={params.preload}
+                                  skipLobby={params.skipLobby}
+                                />
+                              </ProcessorProvider>
+                            </MediaDevicesContext>
+                          </ClientProvider>
+                        </TooltipProvider>
+                      </Decoration>
+                    </ErrorBoundary>
                   </RootElementProvider>
                 )}
             </div>

From 8e8bc5ddde4e8f003d1909841234adb6b42ee099 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Tue, 8 Sep 2026 15:05:01 +0200
Subject: [PATCH 070/154] Talk to a component host in callbacks, not
 observables
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The component exposed the internal HostBridge to hosts as-is, which
carried the host's requests as rxjs observables. That made rxjs part of
the public API of a package that bundles its own copy of it, so a host
would build bridges with a different rxjs than the one Element Call
consumed them with — and asked every host to learn rxjs to change the
theme.

A component host now implements plain async callbacks for what Element
Call tells it (`ElementCallHostBridge`, all optional), and makes its own
requests through an imperative handle on the component's `ref`
(`ElementCallHandle`: setTheme, join, hangUp, setDeviceMute), each
resolving once Element Call has acted and rejecting when nothing in
Element Call can. `component/host.ts` adapts that to the HostBridge the
rest of Element Call still speaks, with a bridge whose identity never
changes, so a host re-creating its callbacks on render restarts nothing.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 component/dev/DevHostBridge.ts |  67 +-----------
 component/dev/Harness.tsx      |  56 ++++++++--
 component/host.test.ts         | 122 +++++++++++++++++++++
 component/host.ts              | 194 +++++++++++++++++++++++++++++++++
 component/index.tsx            |  50 ++++-----
 5 files changed, 390 insertions(+), 99 deletions(-)
 create mode 100644 component/host.test.ts
 create mode 100644 component/host.ts

diff --git a/component/dev/DevHostBridge.ts b/component/dev/DevHostBridge.ts
index 83707920..b69779a9 100644
--- a/component/dev/DevHostBridge.ts
+++ b/component/dev/DevHostBridge.ts
@@ -5,61 +5,18 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { NEVER, Subject } from "rxjs";
-
-import {
-  type DeviceMuteRequest,
-  type DeviceMuteState,
-  type ElementCallHostBridge,
-  type HostRequest,
-} from "../index";
+import { type ElementCallHostBridge } from "../index";
 
 /**
- * A host bridge that reports everything it is told and can be driven by hand,
- * so that the harness can watch both directions of the conversation between
- * Element Call and its host.
+ * A host bridge that reports everything it is told, so that the harness can
+ * watch what Element Call says to its host. (What the host says to Element
+ * Call goes through the component's handle, and is logged by the pane.)
  */
-export interface DevHostBridge extends ElementCallHostBridge {
-  /** Tells Element Call the host has changed theme. */
-  requestTheme(name: string): void;
-  /** Tells Element Call to leave the call. */
-  requestHangUp(): void;
-  /** Asks Element Call to change, and report back, its mute state. */
-  requestDeviceMute(request: DeviceMuteRequest): void;
-}
-
 export function createDevHostBridge(
   log: (message: string) => void,
   /** What the host does when Element Call asks to be closed. */
   onClose: () => void,
-): DevHostBridge {
-  const themeChange$ = new Subject<HostRequest<{ name?: string }>>();
-  const hangUp$ = new Subject<HostRequest<Record<string, never>>>();
-  const deviceMute$ = new Subject<
-    HostRequest<DeviceMuteRequest, DeviceMuteState>
-  >();
-
-  const ask = <Data, Reply>(
-    subject: Subject<HostRequest<Data, Reply>>,
-    name: string,
-    data: Data,
-  ): void => {
-    // Worth saying out loud: a request nobody is subscribed to is silently
-    // dropped, and that is exactly the sort of thing the harness is for.
-    if (!subject.observed) {
-      log(`← ${name}: nothing is listening`);
-      return;
-    }
-    log(`← ${name}`);
-    subject.next({
-      data,
-      reply: (reply): void =>
-        log(
-          `→ ${name} acknowledged${reply === undefined ? "" : `: ${JSON.stringify(reply)}`}`,
-        ),
-    });
-  };
-
+): ElementCallHostBridge {
   /**
    * Records something Element Call told the host. Nothing is sent anywhere, so
    * this is only asynchronous because a real host's answer would have to be.
@@ -85,19 +42,5 @@ export function createDevHostBridge(
       await told("close");
       onClose();
     },
-
-    themeChange$,
-    // The harness does not preload a call, so this is never asked for
-    join$: NEVER,
-    hangUp$,
-    deviceMute$,
-
-    supportsReactions: true,
-
-    requestTheme: (name): void =>
-      ask(themeChange$, `themeChange(${name})`, { name }),
-    requestHangUp: (): void => ask(hangUp$, "hangUp", {}),
-    requestDeviceMute: (request): void =>
-      ask(deviceMute$, `deviceMute(${JSON.stringify(request)})`, request),
   };
 }
diff --git a/component/dev/Harness.tsx b/component/dev/Harness.tsx
index 141f9492..ba68c410 100644
--- a/component/dev/Harness.tsx
+++ b/component/dev/Harness.tsx
@@ -11,12 +11,13 @@ import {
   type ReactNode,
   useCallback,
   useMemo,
+  useRef,
   useState,
 } from "react";
 import { type MatrixClient } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/lib/logger";
 
-import { ElementCall } from "../index";
+import { ElementCall, type ElementCallHandle } from "../index";
 import { createDevHostBridge } from "./DevHostBridge";
 import { createSession, joinRoom } from "./session";
 import styles from "./Harness.module.css";
@@ -102,6 +103,29 @@ const Pane: FC<{
     [log, session.label],
   );
 
+  // What the host asks of Element Call goes through the component's handle.
+  // Worth saying out loud when a request is refused — asking to hang up when
+  // there is no call, say — since that is the sort of thing the harness is for.
+  const handle = useRef<ElementCallHandle>(null);
+  const ask = (
+    name: string,
+    make: (handle: ElementCallHandle) => Promise<unknown>,
+  ): void => {
+    if (handle.current === null) {
+      log(session.label, `← ${name}: not mounted`);
+      return;
+    }
+    log(session.label, `← ${name}`);
+    make(handle.current).then(
+      (reply) =>
+        log(
+          session.label,
+          `→ ${name} acknowledged${reply === undefined ? "" : `: ${JSON.stringify(reply)}`}`,
+        ),
+      (e: unknown) => log(session.label, `→ ${name} refused: ${e}`),
+    );
+  };
+
   return (
     <section className={styles.pane} data-testid="call-pane">
       <div className={styles.paneBar}>
@@ -110,24 +134,42 @@ const Pane: FC<{
         <button onClick={(): void => setMounted((m) => !m)}>
           {mounted ? "Unmount" : "Mount"}
         </button>
-        <button onClick={(): void => bridge.requestTheme("light")}>
-          Light
-        </button>
-        <button onClick={(): void => bridge.requestTheme("dark")}>Dark</button>
         <button
           onClick={(): void =>
-            bridge.requestDeviceMute({ audio_enabled: false })
+            ask("setTheme(light)", async (h) => await h.setTheme("light"))
+          }
+        >
+          Light
+        </button>
+        <button
+          onClick={(): void =>
+            ask("setTheme(dark)", async (h) => await h.setTheme("dark"))
+          }
+        >
+          Dark
+        </button>
+        <button
+          onClick={(): void =>
+            ask(
+              "setDeviceMute(audio: false)",
+              async (h) => await h.setDeviceMute({ audio_enabled: false }),
+            )
           }
         >
           Mute
         </button>
-        <button onClick={(): void => bridge.requestHangUp()}>Hang up</button>
+        <button
+          onClick={(): void => ask("hangUp", async (h) => await h.hangUp())}
+        >
+          Hang up
+        </button>
       </div>
       {/* Resizable, because how Element Call copes with the size it is given is
       one of the things we cannot find out from the standalone app */}
       <div className={styles.paneCall} data-testid="call-container">
         {mounted && (
           <ElementCall
+            ref={handle}
             client={session.client}
             roomId={roomId}
             hostBridge={bridge}
diff --git a/component/host.test.ts b/component/host.test.ts
new file mode 100644
index 00000000..dd788367
--- /dev/null
+++ b/component/host.test.ts
@@ -0,0 +1,122 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { renderHook } from "@testing-library/react";
+import { createRef } from "react";
+import { describe, expect, test, vi } from "vitest";
+
+import {
+  type ElementCallHandle,
+  type ElementCallHostBridge,
+  useComponentHostBridge,
+} from "./host";
+
+describe("useComponentHostBridge", () => {
+  test("keeps one identity while the host supplies new objects", () => {
+    const { result, rerender } = renderHook(
+      ({ supplied }: { supplied: ElementCallHostBridge }) =>
+        useComponentHostBridge(supplied, undefined),
+      { initialProps: { supplied: {} } },
+    );
+    const first = result.current;
+    rerender({ supplied: { notifyJoined: async () => {} } });
+    expect(result.current).toBe(first);
+  });
+
+  test("forwards to whatever the host most recently supplied", async () => {
+    const before = vi.fn().mockResolvedValue(undefined);
+    const after = vi.fn().mockResolvedValue(undefined);
+    const { result, rerender } = renderHook(
+      ({ supplied }: { supplied: ElementCallHostBridge }) =>
+        useComponentHostBridge(supplied, undefined),
+      { initialProps: { supplied: { notifyJoined: before } } },
+    );
+    rerender({ supplied: { notifyJoined: after } });
+
+    await result.current.notifyJoined();
+    expect(before).not.toHaveBeenCalled();
+    expect(after).toHaveBeenCalledOnce();
+  });
+
+  test("is quiet about what the host did not implement", async () => {
+    const { result } = renderHook(() =>
+      useComponentHostBridge(undefined, undefined),
+    );
+    await expect(result.current.contentLoaded()).resolves.toBeUndefined();
+    await expect(
+      result.current.notifyDeviceMute({
+        audio_enabled: true,
+        video_enabled: false,
+      }),
+    ).resolves.toBeUndefined();
+    expect(result.current.supportsReactions).toBe(true);
+  });
+
+  test("only has a close when the host has one, since that is a signal", () => {
+    const { result, rerender } = renderHook(
+      ({ supplied }: { supplied: ElementCallHostBridge }) =>
+        useComponentHostBridge(supplied, undefined),
+      { initialProps: { supplied: {} } },
+    );
+    expect(result.current.close).toBeUndefined();
+
+    const close = vi.fn().mockResolvedValue(undefined);
+    rerender({ supplied: { close } });
+    expect(result.current.close).toBeDefined();
+  });
+
+  test("never offers profile changes, since the account is the host's", () => {
+    const { result } = renderHook(() =>
+      useComponentHostBridge(undefined, undefined),
+    );
+    expect(result.current.supportsProfileChanges).toBe(false);
+  });
+
+  describe("the handle", () => {
+    test("delivers a request to what is listening and resolves on its reply", async () => {
+      const ref = createRef<ElementCallHandle>();
+      const { result } = renderHook(() =>
+        useComponentHostBridge(undefined, ref),
+      );
+
+      const received = vi.fn();
+      result.current.deviceMute$.subscribe(({ data, reply }) => {
+        received(data);
+        reply({ audio_enabled: data.audio_enabled!, video_enabled: true });
+      });
+
+      await expect(
+        ref.current!.setDeviceMute({ audio_enabled: false }),
+      ).resolves.toEqual({ audio_enabled: false, video_enabled: true });
+      expect(received).toHaveBeenCalledWith({ audio_enabled: false });
+    });
+
+    test("refuses a request nothing in Element Call is listening for", async () => {
+      const ref = createRef<ElementCallHandle>();
+      renderHook(() => useComponentHostBridge(undefined, ref));
+
+      await expect(ref.current!.hangUp()).rejects.toThrow(
+        "Nothing in Element Call can hang up right now",
+      );
+    });
+
+    test("passes the theme name through", async () => {
+      const ref = createRef<ElementCallHandle>();
+      const { result } = renderHook(() =>
+        useComponentHostBridge(undefined, ref),
+      );
+      const names: (string | undefined)[] = [];
+      result.current.themeChange$.subscribe(({ data, reply }) => {
+        names.push(data.name);
+        reply();
+      });
+
+      await ref.current!.setTheme("light");
+      expect(names).toEqual(["light"]);
+    });
+  });
+});
diff --git a/component/host.ts b/component/host.ts
new file mode 100644
index 00000000..640aaf22
--- /dev/null
+++ b/component/host.ts
@@ -0,0 +1,194 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+/**
+ * How a host application and the Element Call component talk to each other.
+ *
+ * Inside Element Call the host is a {@link HostBridge}, which carries the
+ * host's requests as rxjs observables because that is what the widget API and
+ * the view models work in. A host should not have to know about rxjs, or agree
+ * with us on a version of it, so a component host sees neither: it implements
+ * plain async callbacks for what Element Call tells it, and makes its own
+ * requests through an imperative handle on the component, the way it would
+ * call `play()` on a video element. This module adapts the one to the other.
+ */
+
+import { type Ref, useImperativeHandle } from "react";
+import { Subject } from "rxjs";
+
+import {
+  type DeviceMuteRequest,
+  type DeviceMuteState,
+  type HostBridge,
+  type HostRequest,
+} from "../src/HostBridge";
+import { type JoinCallData } from "../src/widget";
+import { useInitial } from "../src/useInitial";
+import { useLatest } from "../src/useLatest";
+
+/**
+ * What Element Call tells the application embedding it. Everything is
+ * optional: a host implements what it wants to hear about.
+ *
+ * Compared by nothing — Element Call always calls whichever one it was most
+ * recently given, so this may be written inline.
+ */
+export interface ElementCallHostBridge {
+  /**
+   * Asks the host to keep Element Call on screen (or stop doing so), so that a
+   * call in progress is not torn down when the user navigates elsewhere.
+   */
+  setAlwaysOnScreen?(alwaysOnScreen: boolean): Promise<void>;
+  /** Tells the host that Element Call has finished loading. */
+  contentLoaded?(): Promise<void>;
+  /** Tells the host that the user has joined the call. */
+  notifyJoined?(): Promise<void>;
+  /** Tells the host that the user has hung up. */
+  notifyHungUp?(): Promise<void>;
+  /** Tells the host the user's current audio and video mute state. */
+  notifyDeviceMute?(state: DeviceMuteState): Promise<void>;
+  /**
+   * Asks the host to close Element Call: to unmount the component. Its
+   * presence is what makes Element Call offer a close button on its error
+   * screens, and leave the host to decide what is shown once a call has ended.
+   * Without it, Element Call shows its own post-call screen, if it has one for
+   * the situation, or nothing.
+   */
+  close?(): Promise<void>;
+  /**
+   * Whether Element Call may send and receive reactions in this room.
+   * Defaults to true.
+   */
+  readonly supportsReactions?: boolean;
+  /**
+   * Fetches media on Element Call's behalf, for hosts that do not want it
+   * touching the homeserver's media endpoints itself. Absent, Element Call
+   * fetches media with the client it was given.
+   */
+  downloadMedia?(mxcUri: string): Promise<Blob>;
+}
+
+/**
+ * What a host can ask of a mounted Element Call, reached through the
+ * component's `ref`. Each request resolves once Element Call has acted on it,
+ * and rejects if nothing in Element Call is in a position to act: hanging up
+ * when there is no call, say.
+ */
+export interface ElementCallHandle {
+  /** Switches Element Call to the named theme, `light` or `dark`. */
+  setTheme(name: string): Promise<void>;
+  /**
+   * Joins the call, when Element Call was configured to `preload` and is
+   * waiting to be told to. Says which devices to join with.
+   */
+  join(devices: JoinCallData): Promise<void>;
+  /** Leaves the call. */
+  hangUp(): Promise<void>;
+  /**
+   * Changes the mute state, for whichever of audio and video is given, and
+   * reports the state that results.
+   */
+  setDeviceMute(request: DeviceMuteRequest): Promise<DeviceMuteState>;
+}
+
+/** Hands a request to Element Call and waits for it to be acknowledged. */
+async function request<Data, Reply>(
+  listeners: Subject<HostRequest<Data, Reply>>,
+  what: string,
+  data: Data,
+): Promise<Reply> {
+  if (!listeners.observed)
+    throw new Error(`Nothing in Element Call can ${what} right now`);
+  return await new Promise((resolve) =>
+    listeners.next({ data, reply: resolve }),
+  );
+}
+
+/**
+ * The {@link HostBridge} the rest of Element Call sees, built from what a
+ * component host supplies and wired to the handle it is given.
+ *
+ * The bridge is created once and never changes identity — everything that
+ * depends on it would otherwise restart when the host re-rendered with a new
+ * object — and forwards each call to whatever the host most recently passed.
+ */
+export function useComponentHostBridge(
+  supplied: ElementCallHostBridge | undefined,
+  ref: Ref<ElementCallHandle> | undefined,
+): HostBridge {
+  const latest = useLatest(supplied ?? {});
+
+  const requests = useInitial(() => ({
+    themeChange$: new Subject<HostRequest<{ name?: string }>>(),
+    join$: new Subject<HostRequest<JoinCallData>>(),
+    hangUp$: new Subject<HostRequest<Record<string, never>>>(),
+    deviceMute$: new Subject<HostRequest<DeviceMuteRequest, DeviceMuteState>>(),
+  }));
+
+  const bridge = useInitial(
+    (): HostBridge => ({
+      setAlwaysOnScreen: async (alwaysOnScreen) => {
+        await latest.current.setAlwaysOnScreen?.(alwaysOnScreen);
+      },
+      contentLoaded: async () => {
+        await latest.current.contentLoaded?.();
+      },
+      notifyJoined: async () => {
+        await latest.current.notifyJoined?.();
+      },
+      notifyHungUp: async () => {
+        await latest.current.notifyHungUp?.();
+      },
+      notifyDeviceMute: async (state) => {
+        await latest.current.notifyDeviceMute?.(state);
+      },
+      // Whether these exist is itself information, so they are read through
+      // rather than wrapped unconditionally
+      get close() {
+        const close = latest.current.close;
+        return close === undefined
+          ? undefined
+          : async (): Promise<void> => await close();
+      },
+      get downloadMedia() {
+        const downloadMedia = latest.current.downloadMedia;
+        return downloadMedia === undefined
+          ? undefined
+          : async (mxcUri: string): Promise<Blob> =>
+              await downloadMedia(mxcUri);
+      },
+      get supportsReactions(): boolean {
+        return latest.current.supportsReactions ?? true;
+      },
+      // Whatever the host says or does not say, the account is its own: it
+      // signed the user in and handed us the client. So Element Call never
+      // offers to edit the profile from inside a component.
+      supportsProfileChanges: false,
+      ...requests,
+    }),
+  );
+
+  useImperativeHandle(
+    ref,
+    (): ElementCallHandle => ({
+      setTheme: async (name) =>
+        await request(requests.themeChange$, "change theme", { name }),
+      join: async (devices) =>
+        await request(requests.join$, "join a call", devices),
+      hangUp: async () => await request(requests.hangUp$, "hang up", {}),
+      setDeviceMute: async (muteRequest) =>
+        await request(
+          requests.deviceMute$,
+          "change the mute state",
+          muteRequest,
+        ),
+    }),
+    [requests],
+  );
+
+  return bridge;
+}
diff --git a/component/index.tsx b/component/index.tsx
index 5a0be5d1..7e89f89d 100644
--- a/component/index.tsx
+++ b/component/index.tsx
@@ -36,6 +36,7 @@ import {
   type FC,
   type JSX,
   type ReactNode,
+  type Ref,
   useEffect,
   useMemo,
   useState,
@@ -53,11 +54,7 @@ import EN from "../locales/en/app.json";
 import { ElementCallView } from "../src/ElementCallView";
 import { ErrorPage } from "../src/FullScreenView";
 import { ClientProvider } from "../src/ClientContext";
-import {
-  type HostBridge,
-  HostBridgeProvider,
-  nullHostBridge,
-} from "../src/HostBridge";
+import { HostBridgeProvider } from "../src/HostBridge";
 import { RootElementProvider } from "../src/RootElementContext";
 import {
   configurationForIntent,
@@ -76,13 +73,17 @@ import { i18n } from "../src/utils/i18n";
 import { useTheme } from "../src/useTheme";
 import { useStableValue } from "../src/useStableValue";
 import styles from "./ElementCall.module.css";
+import {
+  type ElementCallHandle,
+  type ElementCallHostBridge,
+  useComponentHostBridge,
+} from "./host";
 
-// Everything needed to implement a HostBridge, not just the interface itself
+// How the host and Element Call talk to each other, and what they say
+export { type ElementCallHandle, type ElementCallHostBridge } from "./host";
 export {
   type DeviceMuteRequest,
   type DeviceMuteState,
-  type HostBridge,
-  type HostRequest,
 } from "../src/HostBridge";
 export { type JoinCallData } from "../src/widget";
 // The deployment-wide configuration, as distinct from ElementCallConfiguration
@@ -102,14 +103,6 @@ export {
  */
 export type ElementCallConfiguration = Partial<UrlParams>;
 
-/**
- * What a host embedding Element Call implements to talk to it. This is the
- * {@link HostBridge} less what Element Call already knows about such a host:
- * the account is the host's, since the client is, so the profile is not
- * Element Call's to change.
- */
-export type ElementCallHostBridge = Omit<HostBridge, "supportsProfileChanges">;
-
 export interface ElementCallProps {
   /**
    * The client to place the call with. Element Call does not authenticate
@@ -138,11 +131,16 @@ export interface ElementCallProps {
    */
   config?: ElementCallConfiguration;
   /**
-   * How to reach the host while the call is running — to be told the user has
-   * joined or hung up, to be asked to keep the call on screen, and so on.
-   * Without one, Element Call assumes it has no host to talk to.
+   * What Element Call tells the host while the call is running: that the user
+   * has joined or hung up, that it would like to be kept on screen, and so on.
+   * Without one, Element Call assumes nobody is listening.
    */
   hostBridge?: ElementCallHostBridge;
+  /**
+   * What the host tells Element Call: to change theme, to hang up, to mute.
+   * Available once the component has rendered.
+   */
+  ref?: Ref<ElementCallHandle>;
 }
 
 /**
@@ -191,18 +189,10 @@ export const ElementCall: FC<ElementCallProps> = ({
   roomId,
   intent = UserIntent.JoinExistingCall,
   config,
-  hostBridge: suppliedHostBridge = nullHostBridge,
+  hostBridge: suppliedHostBridge,
+  ref,
 }): ReactNode => {
-  // Whatever the host says or does not say, the account is its own: it signed
-  // the user in and handed us the client. So Element Call never offers to edit
-  // the profile from inside a component.
-  const hostBridge = useMemo(
-    (): HostBridge => ({
-      ...suppliedHostBridge,
-      supportsProfileChanges: false,
-    }),
-    [suppliedHostBridge],
-  );
+  const hostBridge = useComponentHostBridge(suppliedHostBridge, ref);
 
   // The container is what Element Call decorates and portals into, so nothing
   // inside can render until we have it.

From f70fba1dd61d686add8e67d51809d5371bdbdcfd Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Tue, 8 Sep 2026 15:07:34 +0200
Subject: [PATCH 071/154] Rename GroupCallView to CallView, and fold
 ElementCallView into it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three layers stood between a shell and the call: `ElementCall` (the
component), `ElementCallView` and `GroupCallView`. The middle one only
held the `joined` flag and the mute state, both of which nothing outside
the call reads any more, so it is folded into the view it wrapped. That
view is now `CallView`, since "group call" is a name from before
Element Call handled anything else.

Its docstring says what it is: the whole lifecycle of a call — lobby,
the call itself, and what comes after — with the lobby and the post-call
screen each present or skipped depending on the parameters and the host.
Both the standalone RoomPage and the component render it directly.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 component/index.tsx                           |  4 +-
 src/ElementCallView.tsx                       | 69 -------------------
 ...oupCallView.test.tsx => CallView.test.tsx} | 55 +++++++--------
 src/room/{GroupCallView.tsx => CallView.tsx}  | 64 +++++++++++++++--
 src/room/RoomPage.tsx                         |  4 +-
 5 files changed, 84 insertions(+), 112 deletions(-)
 delete mode 100644 src/ElementCallView.tsx
 rename src/room/{GroupCallView.test.tsx => CallView.test.tsx} (87%)
 rename src/room/{GroupCallView.tsx => CallView.tsx} (89%)

diff --git a/component/index.tsx b/component/index.tsx
index 7e89f89d..06b5631d 100644
--- a/component/index.tsx
+++ b/component/index.tsx
@@ -51,7 +51,7 @@ import { shouldPolyfill as shouldPolyfillSegmenter } from "@formatjs/intl-segmen
 import { shouldPolyfill as shouldPolyfillDurationFormat } from "@formatjs/intl-durationformat/should-polyfill.js";
 
 import EN from "../locales/en/app.json";
-import { ElementCallView } from "../src/ElementCallView";
+import { CallView } from "../src/room/CallView";
 import { ErrorPage } from "../src/FullScreenView";
 import { ClientProvider } from "../src/ClientContext";
 import { HostBridgeProvider } from "../src/HostBridge";
@@ -269,7 +269,7 @@ export const ElementCall: FC<ElementCallProps> = ({
                           <ClientProvider client={client}>
                             <MediaDevicesContext value={mediaDevices}>
                               <ProcessorProvider>
-                                <ElementCallView
+                                <CallView
                                   client={client}
                                   rtcSession={rtcSession}
                                   isPasswordlessUser={false}
diff --git a/src/ElementCallView.tsx b/src/ElementCallView.tsx
deleted file mode 100644
index d0b3e4f3..00000000
--- a/src/ElementCallView.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { type FC, type ReactNode, useState } from "react";
-import { type MatrixClient } from "matrix-js-sdk";
-import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
-
-import { GroupCallView } from "./room/GroupCallView";
-import { useMuteStates } from "./state/useMuteStates";
-import { type UrlParams } from "./UrlParams";
-
-interface Props {
-  /** The client to place the call with. */
-  client: MatrixClient;
-  /** The call to join. */
-  rtcSession: MatrixRTCSession;
-  /**
-   * Whether the user is signed in as a guest, and so should be offered the
-   * chance to create an account when the call ends.
-   */
-  isPasswordlessUser: boolean;
-  /** Whether to keep the user in this call rather than letting them navigate. */
-  confineToRoom: boolean;
-  /** Whether to wait for the host to ask us to join. */
-  preload: UrlParams["preload"];
-  /** Whether to enter the call directly, without showing the lobby first. */
-  skipLobby: UrlParams["skipLobby"];
-}
-
-/**
- * A call, as a component.
- *
- * This owns being in a call, and nothing about how Element Call came to be
- * showing one: no routing, no authentication, no resolving of room aliases.
- * Those belong to whatever is hosting it — the standalone app's own shell, or
- * an application embedding Element Call directly.
- */
-export const ElementCallView: FC<Props> = ({
-  client,
-  rtcSession,
-  isPasswordlessUser,
-  confineToRoom,
-  preload,
-  skipLobby,
-}): ReactNode => {
-  // Whether the user is in the call is the call's own business, not its host's.
-  const [joined, setJoined] = useState(false);
-  const muteStates = useMuteStates();
-
-  if (muteStates === null) return null;
-
-  return (
-    <GroupCallView
-      client={client}
-      rtcSession={rtcSession}
-      joined={joined}
-      setJoined={setJoined}
-      isPasswordlessUser={isPasswordlessUser}
-      confineToRoom={confineToRoom}
-      preload={preload}
-      skipLobby={skipLobby}
-      muteStates={muteStates}
-    />
-  );
-};
diff --git a/src/room/GroupCallView.test.tsx b/src/room/CallView.test.tsx
similarity index 87%
rename from src/room/GroupCallView.test.tsx
rename to src/room/CallView.test.tsx
index a53288c2..522a4161 100644
--- a/src/room/GroupCallView.test.tsx
+++ b/src/room/CallView.test.tsx
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-// TODO-MULTI-SFU: Restore or discard these tests. The role of GroupCallView has
+// TODO-MULTI-SFU: Restore or discard these tests. The role of CallView has
 // changed (it no longer manages the connection to the same extent), so they may
 // need extra work to adapt.
 
@@ -49,7 +49,7 @@ import {
   mockRtcMembership,
   MockRTCSession,
 } from "../utils/test";
-import { GroupCallView } from "./GroupCallView";
+import { CallView } from "./CallView";
 import { GroupCallErrorBoundary } from "./GroupCallErrorBoundary";
 import {
   type HostBridge,
@@ -60,7 +60,6 @@ import { MatrixRTCTransportMissingError } from "../utils/errors";
 import { ProcessorProvider } from "../livekit/TrackProcessorContext";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { constant } from "../state/Behavior";
-import { type MuteStates } from "../state/MuteStates.ts";
 
 vi.mock("../soundUtils");
 vi.mock("../useAudioContext");
@@ -119,7 +118,7 @@ beforeEach(() => {
     playSoundLooping: vi.fn(),
     soundDuration: {},
   });
-  // A trivial implementation of Active call to ensure we are testing GroupCallView exclusively here.
+  // A trivial implementation of Active call to ensure we are testing CallView exclusively here.
   (ActiveCall as MockedFunction<typeof ActiveCall>).mockImplementation(
     ({ onLeft: onLeave }) => {
       return (
@@ -135,7 +134,7 @@ beforeEach(() => {
   );
 });
 
-function createGroupCallView(
+function createCallView(
   hostBridge: HostBridge,
   joined = true,
   options: {
@@ -172,23 +171,15 @@ function createGroupCallView(
     constant([localRtcMember]),
   );
   rtcSession.joined = joined;
-  const muteState = {
-    audio: { enabled: false },
-    video: { enabled: false },
-    // TODO-MULTI-SFU: This cast isn't valid, it's likely the cause of some current test failures
-  } as unknown as MuteStates;
-  const groupCallView = (
-    <GroupCallView
+  const callView = (
+    <CallView
       client={client}
       isPasswordlessUser={false}
       confineToRoom={false}
       preload={false}
-      skipLobby={false}
+      // Straight into the (mocked) call, past the lobby
+      skipLobby
       rtcSession={rtcSession.asMockedSession()}
-      muteStates={muteState}
-      // TODO-MULTI-SFU: Make joined and setJoined work
-      joined={true}
-      setJoined={function (value: boolean): void {}}
     />
   );
   const { getByText } = render(
@@ -199,10 +190,10 @@ function createGroupCallView(
             <ProcessorProvider>
               {options.withErrorBoundary ? (
                 <GroupCallErrorBoundary recoveryActionHandler={vi.fn()}>
-                  {groupCallView}
+                  {callView}
                 </GroupCallErrorBoundary>
               ) : (
-                groupCallView
+                callView
               )}
             </ProcessorProvider>
           </MediaDevicesContext>
@@ -216,9 +207,9 @@ function createGroupCallView(
   };
 }
 
-test.skip("GroupCallView plays a leave sound asynchronously in SPA mode", async () => {
+test.skip("CallView plays a leave sound asynchronously in SPA mode", async () => {
   const user = userEvent.setup();
-  const { getByText, rtcSession } = createGroupCallView(nullHostBridge);
+  const { getByText, rtcSession } = createCallView(nullHostBridge);
   const leaveButton = getByText("Leave");
   await user.click(leaveButton);
   expect(playSound).toHaveBeenCalledWith("left");
@@ -233,7 +224,7 @@ test.skip("GroupCallView plays a leave sound asynchronously in SPA mode", async
   await waitFor(() => expect(leaveRTCSession).toHaveResolved());
 });
 
-test.skip("GroupCallView plays a leave sound synchronously in widget mode", async () => {
+test.skip("CallView plays a leave sound synchronously in widget mode", async () => {
   const user = userEvent.setup();
   const hostBridge: HostBridge = { ...nullHostBridge, close: vi.fn() };
   let resolvePlaySound: () => void;
@@ -248,7 +239,7 @@ test.skip("GroupCallView plays a leave sound synchronously in widget mode", asyn
     soundDuration: {},
   });
 
-  const { getByText, rtcSession } = createGroupCallView(hostBridge);
+  const { getByText, rtcSession } = createCallView(hostBridge);
   const leaveButton = getByText("Leave");
   await user.click(leaveButton);
   await flushPromises();
@@ -281,7 +272,7 @@ test("Should ask the host to close when all other left and play a sound", async
     soundDuration: {},
   });
 
-  const { getByText } = createGroupCallView(hostBridge);
+  const { getByText } = createCallView(hostBridge);
   const leaveButton = getByText("SimulateOtherLeft");
   await user.click(leaveButton);
   await flushPromises();
@@ -303,7 +294,7 @@ test("Should not ask the host to close when auto leave due to error", async () =
     close,
   };
 
-  const { getByText } = createGroupCallView(hostBridge);
+  const { getByText } = createCallView(hostBridge);
   const leaveButton = getByText("SimulateErrorLeft");
   await user.click(leaveButton);
   await flushPromises();
@@ -315,7 +306,7 @@ test("Should not ask the host to close when auto leave due to error", async () =
   expect(close).not.toHaveBeenCalled();
 });
 
-test.skip("GroupCallView leaves the session when an error occurs", async () => {
+test.skip("CallView leaves the session when an error occurs", async () => {
   (ActiveCall as MockedFunction<typeof ActiveCall>).mockImplementation(() => {
     const [error, setError] = useState<Error | null>(null);
     if (error !== null) throw error;
@@ -326,7 +317,7 @@ test.skip("GroupCallView leaves the session when an error occurs", async () => {
     );
   });
   const user = userEvent.setup();
-  const { rtcSession } = createGroupCallView(nullHostBridge);
+  const { rtcSession } = createCallView(nullHostBridge);
   await user.click(screen.getByRole("button", { name: "Panic!" }));
   screen.getByText("Something went wrong");
   expect(leaveRTCSession).toHaveBeenCalledWith(
@@ -336,14 +327,14 @@ test.skip("GroupCallView leaves the session when an error occurs", async () => {
   );
 });
 
-test.skip("GroupCallView shows errors that occur during joining", async () => {
+test.skip("CallView shows errors that occur during joining", async () => {
   const user = userEvent.setup();
   // This should not mock this error that deep. it should only mock the CallViewModel.
   enterRTCSession.mockRejectedValue(new MatrixRTCTransportMissingError(""));
   onTestFinished(() => {
     enterRTCSession.mockReset();
   });
-  createGroupCallView(nullHostBridge, false);
+  createCallView(nullHostBridge, false);
   await user.click(screen.getByRole("button", { name: "Join call" }));
   screen.getByText("Call is not supported");
 });
@@ -362,7 +353,7 @@ test("translates wrapped UnsupportedStickyEventsEndpointError to the StickyEvent
     { cause: stickyError },
   );
 
-  const { rtcSession } = createGroupCallView(nullHostBridge, true, {
+  const { rtcSession } = createCallView(nullHostBridge, true, {
     withErrorBoundary: true,
   });
 
@@ -374,7 +365,7 @@ test("translates wrapped UnsupportedStickyEventsEndpointError to the StickyEvent
 });
 
 test("falls back to ConnectionLostError for unrecognised membership manager errors", async () => {
-  const { rtcSession } = createGroupCallView(nullHostBridge, true, {
+  const { rtcSession } = createCallView(nullHostBridge, true, {
     withErrorBoundary: true,
   });
 
@@ -390,7 +381,7 @@ test("falls back to ConnectionLostError for unrecognised membership manager erro
 
 test("user can reconnect after a membership manager error", async () => {
   const user = userEvent.setup();
-  const { rtcSession } = createGroupCallView(nullHostBridge, true);
+  const { rtcSession } = createCallView(nullHostBridge, true);
   await act(() =>
     rtcSession.emit(MatrixRTCSessionEvent.MembershipManagerError, undefined),
   );
diff --git a/src/room/GroupCallView.tsx b/src/room/CallView.tsx
similarity index 89%
rename from src/room/GroupCallView.tsx
rename to src/room/CallView.tsx
index e3cbea32..a88ab7b2 100644
--- a/src/room/GroupCallView.tsx
+++ b/src/room/CallView.tsx
@@ -71,6 +71,7 @@ import { useAppBarTitle } from "../AppBar.tsx";
 import { useBehavior } from "../useBehavior.ts";
 import { useRootElement } from "../RootElementContext.ts";
 import { useHostBridge } from "../HostBridge.ts";
+import { useMuteStates } from "../state/useMuteStates.ts";
 
 /**
  * If there already are this many participants in the call, we automatically mute
@@ -85,18 +86,67 @@ declare global {
 }
 
 interface Props {
+  /** The client to place the call with. */
   client: MatrixClient;
-  isPasswordlessUser: boolean;
-  confineToRoom: boolean;
-  preload: UrlParams["preload"];
-  skipLobby: UrlParams["skipLobby"];
+  /** The call to join. */
   rtcSession: MatrixRTCSession;
+  /**
+   * Whether the user is signed in as a guest, and so should be offered the
+   * chance to create an account when the call ends.
+   */
+  isPasswordlessUser: boolean;
+  /** Whether to keep the user in this call rather than letting them navigate. */
+  confineToRoom: boolean;
+  /** Whether to wait for the host to ask us to join. */
+  preload: UrlParams["preload"];
+  /** Whether to enter the call directly, without showing the lobby first. */
+  skipLobby: UrlParams["skipLobby"];
+}
+
+/**
+ * A call, from start to finish.
+ *
+ * This owns the whole lifecycle of being in a call: the lobby, where the user
+ * checks their camera and microphone before joining; the call itself; and the
+ * screen shown once it has ended. Not every call has every stage — the lobby
+ * is skipped when the user is put straight into the call, or when the host
+ * wants to say when to join; and after the call there may be a post-call
+ * screen, a return to the lobby, or nothing, depending on whether the host
+ * decides what comes next. The view decides which stages apply from the
+ * parameters it was started with and from what the host bridge says.
+ *
+ * It owns nothing about how Element Call came to be showing a call: no
+ * routing, no authentication, no resolving of room aliases. Those belong to
+ * whatever is hosting it — the standalone app's own shell, or an application
+ * embedding Element Call as a component. Both render this.
+ */
+export const CallView: FC<Props> = (props): ReactNode => {
+  // Whether the user is in the call is the call's own business, not its host's.
+  // Held here rather than below so that it survives the mute state being
+  // rebuilt.
+  const [joined, setJoined] = useState(false);
+  const muteStates = useMuteStates();
+
+  if (muteStates === null) return null;
+
+  return (
+    <LoadedCallView
+      {...props}
+      joined={joined}
+      setJoined={setJoined}
+      muteStates={muteStates}
+    />
+  );
+};
+
+interface LoadedProps extends Props {
   joined: boolean;
   setJoined: (value: boolean) => void;
   muteStates: MuteStates;
 }
 
-export const GroupCallView: FC<Props> = ({
+/** {@link CallView}, once it has the mute state everything below needs. */
+const LoadedCallView: FC<LoadedProps> = ({
   client,
   isPasswordlessUser,
   confineToRoom,
@@ -136,9 +186,9 @@ export const GroupCallView: FC<Props> = ({
   }, []);
 
   useEffect(() => {
-    logger.info("[Lifecycle] GroupCallView Component mounted");
+    logger.info("[Lifecycle] CallView Component mounted");
     return (): void => {
-      logger.info("[Lifecycle] GroupCallView Component unmounted");
+      logger.info("[Lifecycle] CallView Component unmounted");
     };
   }, []);
 
diff --git a/src/room/RoomPage.tsx b/src/room/RoomPage.tsx
index 8d974ee4..71bceea7 100644
--- a/src/room/RoomPage.tsx
+++ b/src/room/RoomPage.tsx
@@ -15,7 +15,7 @@ import { UnknownSolidIcon } from "@vector-im/compound-design-tokens/assets/web/i
 import { useClientLegacy } from "../ClientContext";
 import { ErrorPage, FullScreenView, LoadingPage } from "../FullScreenView";
 import { RoomAuthView } from "./RoomAuthView";
-import { ElementCallView } from "../ElementCallView";
+import { CallView } from "./CallView";
 import { useRoomIdentifier, useUrlParams } from "../UrlParams";
 import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
 import { HomePage } from "../home/HomePage";
@@ -102,7 +102,7 @@ export const RoomPage: FC = (): ReactNode => {
     switch (groupCallState.kind) {
       case "loaded":
         return (
-          <ElementCallView
+          <CallView
             client={client!}
             rtcSession={groupCallState.rtcSession}
             isPasswordlessUser={passwordlessUser}

From 3dc7cfe10ba24646d558153bb4598b5fc31af0c6 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Tue, 8 Sep 2026 15:09:11 +0200
Subject: [PATCH 072/154] Say "component" for the component

"Embedded" already means something here: the embedded package is the
widget build. Where a comment meant Element Call running as a React
component inside a host application, it now says so, and the params it
starts from are `componentProperties`. "Host" stays the word for the
application on the other side, whether that is a widget container or an
application rendering the component.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 component/ElementCall.module.css         |  4 ++--
 component/build/scopeStylesToRoot.ts     |  2 +-
 component/dev/Harness.tsx                | 14 +++++++-------
 component/host.ts                        |  4 ++--
 component/index.tsx                      |  8 ++++----
 src/ClientContext.tsx                    |  6 +++---
 src/HostBridge.ts                        |  6 +++---
 src/RootElementContext.ts                |  6 +++---
 src/UrlParams.test.ts                    |  4 ++--
 src/UrlParams.ts                         | 14 ++++++++------
 src/base.css                             |  6 +++---
 src/config/Config.ts                     | 11 +++++------
 src/state/CallViewModel/CallViewModel.ts |  2 +-
 src/utils/i18n.ts                        |  8 ++++----
 14 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/component/ElementCall.module.css b/component/ElementCall.module.css
index f99dccb1..91213e42 100644
--- a/component/ElementCall.module.css
+++ b/component/ElementCall.module.css
@@ -17,8 +17,8 @@ they are meant to cover the page — resolve against the viewport and appear in
 the middle of the host's window rather than in the middle of the call.
 
 The clipping cuts both ways: a menu near the edge of a small container is
-trimmed rather than overflowing into the host. That is the trade being an
-embedded component makes. */
+trimmed rather than overflowing into the host. That is the trade being a
+component rather than a page makes. */
 .root {
   display: flex;
   flex-direction: column;
diff --git a/component/build/scopeStylesToRoot.ts b/component/build/scopeStylesToRoot.ts
index 29532d53..9e7e8037 100644
--- a/component/build/scopeStylesToRoot.ts
+++ b/component/build/scopeStylesToRoot.ts
@@ -41,7 +41,7 @@ const IS_ROOT = `:where(${ROOT_SELECTOR})`;
  *
  * As a page of its own, Element Call can style the document: normalize.css and
  * Compound speak of `html`, `body` and bare elements, and the design tokens are
- * declared on `:root`. Embedded in a host, all of that would land on the host's
+ * declared on `:root`. As a component, all of that would land on the host's
  * document too. This rewrites every selector so that it matches only the root
  * or its descendants:
  *
diff --git a/component/dev/Harness.tsx b/component/dev/Harness.tsx
index ba68c410..ea51191f 100644
--- a/component/dev/Harness.tsx
+++ b/component/dev/Harness.tsx
@@ -83,7 +83,7 @@ interface LogEntry {
 }
 
 /**
- * One embedded Element Call, with the controls a host would have over it: the
+ * One Element Call component, with the controls a host would have over it: the
  * requests it can make of Element Call, and the ability to take it off screen
  * altogether.
  */
@@ -198,9 +198,9 @@ const HostChrome: FC = (): ReactNode => (
 );
 
 /**
- * A dialog of the host's own, over the top of the calls. Element Call embedded
- * in a host has to sit underneath this — being unable to is one of the reasons
- * for embedding it rather than putting it in an iframe.
+ * A dialog of the host's own, over the top of the calls. Element Call as a
+ * component has to sit underneath this — being unable to is one of the reasons
+ * for a component rather than an iframe.
  */
 const HostDialog: FC<{ onClose: () => void }> = ({ onClose }): ReactNode => (
   <div className={styles.dialogScrim}>
@@ -213,7 +213,7 @@ const HostDialog: FC<{ onClose: () => void }> = ({ onClose }): ReactNode => (
 );
 
 /**
- * Stands in for a host application embedding Element Call: it owns the Matrix
+ * Stands in for a host application using the Element Call component: it owns the Matrix
  * clients, the page and the space each call is given, and reaches Element Call
  * only through the component's public interface.
  *
@@ -299,8 +299,8 @@ export const Harness: FC = (): ReactNode => {
       <form className={styles.credentials} onSubmit={start}>
         <h1>Element Call component harness</h1>
         <p>
-          Signs in twice and shows Element Call embedded twice, in a page that
-          is not Element Call&apos;s own.
+          Signs in twice and shows the Element Call component twice, in a page
+          that is not Element Call&apos;s own.
         </p>
         {field("homeserver", "Homeserver")}
         {field("username", "Username")}
diff --git a/component/host.ts b/component/host.ts
index 640aaf22..67bbaf0e 100644
--- a/component/host.ts
+++ b/component/host.ts
@@ -31,8 +31,8 @@ import { useInitial } from "../src/useInitial";
 import { useLatest } from "../src/useLatest";
 
 /**
- * What Element Call tells the application embedding it. Everything is
- * optional: a host implements what it wants to hear about.
+ * What Element Call tells the application hosting it as a component.
+ * Everything is optional: a host implements what it wants to hear about.
  *
  * Compared by nothing — Element Call always calls whichever one it was most
  * recently given, so this may be written inline.
diff --git a/component/index.tsx b/component/index.tsx
index 06b5631d..62aaaf77 100644
--- a/component/index.tsx
+++ b/component/index.tsx
@@ -58,7 +58,7 @@ import { HostBridgeProvider } from "../src/HostBridge";
 import { RootElementProvider } from "../src/RootElementContext";
 import {
   configurationForIntent,
-  hostedProperties,
+  componentProperties,
   type UrlParams,
   UrlParamsProvider,
   UserIntent,
@@ -209,7 +209,7 @@ export const ElementCall: FC<ElementCallProps> = ({
   const stableConfig = useStableValue(config);
   const params = useMemo(
     (): UrlParams => ({
-      ...hostedProperties,
+      ...componentProperties,
       roomId,
       ...configurationForIntent(intent),
       ...stableConfig,
@@ -249,8 +249,8 @@ export const ElementCall: FC<ElementCallProps> = ({
     <I18nextProvider i18n={i18n}>
       <HostBridgeProvider value={hostBridge}>
         <UrlParamsProvider value={params}>
-          {/* Element Call's own navigation stays in memory, so that being
-          embedded cannot disturb the host's URL. */}
+          {/* Element Call's own navigation stays in memory, so that the
+          component cannot disturb the host's URL. */}
           <MemoryRouter>
             <div ref={setContainer} className={styles.root}>
               {container !== null &&
diff --git a/src/ClientContext.tsx b/src/ClientContext.tsx
index ced48d44..19375566 100644
--- a/src/ClientContext.tsx
+++ b/src/ClientContext.tsx
@@ -136,9 +136,9 @@ interface Props {
   /**
    * The client Element Call should use.
    *
-   * When a host embeds Element Call it already has a client, and owns the
-   * user's session; supplying it here means Element Call neither authenticates
-   * anyone nor manages their session. Left out, Element Call finds a client
+   * An application hosting Element Call as a component already has a client,
+   * and owns the user's session; supplying it here means Element Call neither
+   * authenticates anyone nor manages their session. Left out, Element Call finds a client
    * itself — from the widget API, or by restoring or creating a session of its
    * own.
    */
diff --git a/src/HostBridge.ts b/src/HostBridge.ts
index 66586643..58e541f1 100644
--- a/src/HostBridge.ts
+++ b/src/HostBridge.ts
@@ -51,7 +51,7 @@ export interface HostRequest<Data, Reply = void> {
  * Element Call's view of the application hosting it.
  *
  * Element Call can run as its own page, as a widget inside a Matrix client, or
- * embedded directly into one. Only the last two give it a host, and each of
+ * as a component inside one. Only the last two give it a host, and each of
  * them reaches it by a different route — so everything Element Call needs from
  * whatever is hosting it goes through this interface, rather than being
  * expressed in terms of the widget API.
@@ -101,8 +101,8 @@ export interface HostBridge {
   /**
    * Whether Element Call may offer to change the user's profile — their
    * display name and avatar. Only when the account is Element Call's own,
-   * which is to say standalone: a widget's host and an application embedding
-   * Element Call both signed the user in themselves, so the profile is theirs
+   * which is to say standalone: a widget's host and an application hosting
+   * the component both signed the user in themselves, so the profile is theirs
    * to manage and Element Call must not offer to edit it.
    */
   readonly supportsProfileChanges: boolean;
diff --git a/src/RootElementContext.ts b/src/RootElementContext.ts
index 906a90d6..3eda39f5 100644
--- a/src/RootElementContext.ts
+++ b/src/RootElementContext.ts
@@ -12,9 +12,9 @@ import { createContext, use } from "react";
  *
  * Element Call decorates this element with the theme, layout and background
  * attributes its stylesheets key off, and portals its modals into it. When
- * Element Call owns the page this is simply the document body; the intent is
- * that when embedded in a host application it becomes the container the host
- * mounted it into, so that Element Call does not reach outside its own subtree.
+ * Element Call owns the page this is simply the document body; as a component
+ * it is the container the host mounted it into, so that Element Call does not
+ * reach outside its own subtree.
  *
  * The stylesheets find this element by its `data-element-call-root` attribute,
  * which {@link useTheme} sets along with the platform and theme, so they no
diff --git a/src/UrlParams.test.ts b/src/UrlParams.test.ts
index 63c4e2c8..1078df86 100644
--- a/src/UrlParams.test.ts
+++ b/src/UrlParams.test.ts
@@ -17,7 +17,7 @@ import {
   computeUrlParams,
   HeaderStyle,
   getUrlParams,
-  hostedProperties,
+  componentProperties,
   UserIntent,
 } from "../src/UrlParams";
 import { mockConfig } from "./utils/test";
@@ -433,7 +433,7 @@ describe("UrlParams", () => {
   // has no URL of its own for any of this to come from
   describe("hosted defaults", () => {
     it("assume nothing about a session or a page", () => {
-      expect(hostedProperties).toMatchObject({
+      expect(componentProperties).toMatchObject({
         // The host is not a widget host, and supplies the client itself, so
         // none of the widget or session plumbing applies
         isWidget: false,
diff --git a/src/UrlParams.ts b/src/UrlParams.ts
index 25b60dbd..7c32c15f 100644
--- a/src/UrlParams.ts
+++ b/src/UrlParams.ts
@@ -446,7 +446,8 @@ export function configurationForIntent(intent: UserIntent): UrlConfiguration {
 }
 
 /**
- * The {@link UrlProperties} for Element Call embedded in a host application.
+ * The {@link UrlProperties} for Element Call running as a component inside a
+ * host application.
  *
  * It has no URL of its own to read these from, and it does not need most of
  * them: the widget plumbing does not apply, the Matrix client and the analytics
@@ -454,7 +455,7 @@ export function configurationForIntent(intent: UserIntent): UrlConfiguration {
  * the host's to state through the component's props or Element Call's own
  * default.
  */
-export const hostedProperties: UrlProperties = {
+export const componentProperties: UrlProperties = {
   widgetId: null,
   parentUrl: null,
   isWidget: false,
@@ -594,8 +595,9 @@ const UrlParamsContext = createContext<UrlParams | null>(null);
 /**
  * Supplies the parameters Element Call should run with.
  *
- * The standalone and widget builds derive these from the URL, but an embedder
- * has no URL of its own to put them in, so it provides them directly instead.
+ * The standalone and widget builds derive these from the URL, but the
+ * component has no URL of its own to read them from, so its host provides them
+ * directly instead.
  *
  * TODO: `UrlParams` is no longer an accurate name now that these need not come
  * from a URL. Renaming it touches every consumer, so it is left until the rest
@@ -615,8 +617,8 @@ export const useUrlParams = (): UrlParams =>
 /**
  * Derives {@link UrlParams} from the current router location.
  *
- * Only meaningful when Element Call owns the URL; embedders provide the params
- * directly through {@link UrlParamsProvider}.
+ * Only meaningful when Element Call owns the URL; the component is given its
+ * params directly through {@link UrlParamsProvider}.
  */
 export const useUrlParamsFromLocation = (): UrlParams => {
   const { search, hash } = useLocation();
diff --git a/src/base.css b/src/base.css
index 8287f01d..51751eb7 100644
--- a/src/base.css
+++ b/src/base.css
@@ -8,9 +8,9 @@ Please see LICENSE in the repository root for full details.
 /* The styles Element Call needs wherever it is shown: the design tokens, fonts
 and element defaults its own stylesheets build on top of.
 
-Split out from index.css so that Element Call embedded in a host application
-can have these without also being given the standalone page's layout, which
-would style the host's own document. What remains here still speaks of the
+Split out from index.css so that Element Call as a component can have these
+without also being given the standalone page's layout, which would style the
+host's own document. What remains here still speaks of the
 document — normalize.css and the typography below use bare element selectors,
 and the custom properties are declared on `:root` — which is right for the
 page, and is why the component build rewrites it: there every selector is
diff --git a/src/config/Config.ts b/src/config/Config.ts
index 37cdfc61..e2c5eb8f 100644
--- a/src/config/Config.ts
+++ b/src/config/Config.ts
@@ -36,7 +36,7 @@ export class Config {
    *
    * Does nothing if the config has already been initialized, including by
    * {@link Config.initWith}, so that the regular startup path can run unchanged
-   * when an embedder has already supplied the config.
+   * when a component host has already supplied the config.
    */
   public static async init(): Promise<void> {
     if (!Config.internalInstance?.initPromise) {
@@ -66,16 +66,15 @@ export class Config {
   }
 
   /**
-   * Initializes the config from an object supplied by the embedder, instead of
-   * fetching `config.json`.
+   * Initializes the config from an object supplied by the application hosting
+   * the component, instead of fetching `config.json`.
    *
    * {@link Config.init} derives the location of `config.json` from
    * `window.location`, which only makes sense while Element Call owns the page.
-   * When it is embedded in a host application the host owns the configuration
-   * and passes it in here.
+   * As a component, the host owns the configuration and passes it in here.
    *
    * The config goes through the same validation and defaulting as a fetched
-   * one, so that an injected config behaves identically to a hosted one.
+   * one, so that a supplied config behaves identically to a fetched one.
    *
    * Replaces any config initialized earlier.
    */
diff --git a/src/state/CallViewModel/CallViewModel.ts b/src/state/CallViewModel/CallViewModel.ts
index 80d2bea1..05b6b521 100644
--- a/src/state/CallViewModel/CallViewModel.ts
+++ b/src/state/CallViewModel/CallViewModel.ts
@@ -229,7 +229,7 @@ export interface CallViewModelOptions {
  *
  * Callers share this rather than picking the fields out themselves. The
  * defaults on {@link CallViewModelOptions} describe a standalone Element Call,
- * so a widget or embedded caller that misses one does not get an error — it
+ * so a widget or component caller that misses one does not get an error — it
  * quietly gets standalone behaviour instead.
  *
  * Note `autoLeaveWhenOthersLeft` and `waitForCallPickup` are deliberately not
diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts
index abe28f54..65dca697 100644
--- a/src/utils/i18n.ts
+++ b/src/utils/i18n.ts
@@ -13,10 +13,10 @@ export const i18nKey = (key: string): string => key;
 /**
  * Element Call's own i18next instance.
  *
- * We deliberately do not use the global i18next singleton: when Element Call is
- * embedded in a host application (rather than running as its own page), that
- * singleton belongs to the host, and configuring it would clobber the host's
- * translations.
+ * We deliberately do not use the global i18next singleton: when Element Call
+ * runs as a component inside a host application (rather than as its own page),
+ * that singleton belongs to the host, and configuring it would clobber the
+ * host's translations.
  *
  * It is configured by `Initializer.initBeforeReact` and made available to
  * components via `<I18nextProvider>`; tests and stories configure it directly.

From f5a94ce7023eb96f55138f90119e5f14d604402e Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Tue, 8 Sep 2026 15:10:35 +0200
Subject: [PATCH 073/154] Offer a component host only the configuration it can
 use
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`ElementCallConfiguration` was every URL parameter, which put the widget
plumbing (widgetId, parentUrl, isWidget), the user's identity, the
homeserver, the analytics and Sentry settings, and the standalone app's
shared room secret in front of a host that has no business setting any
of them — the component reads none of those. It is now the behavioural
configuration a widget's URL can carry plus the two properties a host
has a say in: the theme and the background. The background is now
actually applied to the component's root, which it was not before.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 component/index.tsx | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/component/index.tsx b/component/index.tsx
index 62aaaf77..1d9969a2 100644
--- a/component/index.tsx
+++ b/component/index.tsx
@@ -38,6 +38,7 @@ import {
   type ReactNode,
   type Ref,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useState,
 } from "react";
@@ -55,13 +56,16 @@ import { CallView } from "../src/room/CallView";
 import { ErrorPage } from "../src/FullScreenView";
 import { ClientProvider } from "../src/ClientContext";
 import { HostBridgeProvider } from "../src/HostBridge";
-import { RootElementProvider } from "../src/RootElementContext";
+import { RootElementProvider, useRootElement } from "../src/RootElementContext";
 import {
   configurationForIntent,
   componentProperties,
+  type UrlConfiguration,
   type UrlParams,
   UrlParamsProvider,
+  type UrlProperties,
   UserIntent,
+  useUrlParams,
 } from "../src/UrlParams";
 import { MediaDevicesContext } from "../src/MediaDevicesContext";
 import { MediaDevices } from "../src/state/MediaDevices";
@@ -100,8 +104,16 @@ export {
 /**
  * How Element Call should behave. Everything is optional; anything left out
  * takes the default that {@link ElementCallProps.intent} implies.
+ *
+ * This is the behaviour a widget can be configured with through its URL, plus
+ * the two facts about the call a host has a say in: the theme to start in and
+ * the background. The rest of what a widget's URL carries — who the user is,
+ * how to reach the homeserver, where to report analytics, the shared secret of
+ * a room that is encrypted with one — a component host supplies by other
+ * routes, or not at all.
  */
-export type ElementCallConfiguration = Partial<UrlParams>;
+export type ElementCallConfiguration = Partial<UrlConfiguration> &
+  Partial<Pick<UrlProperties, "theme" | "background">>;
 
 export interface ElementCallProps {
   /**
@@ -178,9 +190,14 @@ export async function initializeElementCall(
   });
 }
 
-/** Applies the theme to the container, before it is painted. */
+/** Applies the theme and background to the container, before it is painted. */
 const Decoration: FC<{ children: JSX.Element }> = ({ children }) => {
   useTheme();
+  const { background } = useUrlParams();
+  const rootElement = useRootElement();
+  useLayoutEffect(() => {
+    rootElement.setAttribute("data-background", background);
+  }, [rootElement, background]);
   return children;
 };
 

From b7285064fde3d45304c27ae85cd4fa5979fa99b3 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Tue, 8 Sep 2026 15:36:36 +0200
Subject: [PATCH 074/154] Let the shell say where home is, and drop the router
 from the call
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The call reached for react-router in five places to send the user
"home": on leaving without a lobby, from the lobby's recents link, from
the post-call screen, from the error page's return button and from the
header logo. Home is the standalone app's home page; the call has no
idea where that is, and a component has no such place at all — its host
decides what follows a call. Yet the component had to mount a
MemoryRouter just so those hooks would not throw.

`useLeaveToHome` is the way home as the shell supplies it: the app
provides `navigate("/")` from inside its router, the component provides
nothing, and everything that used to link to "/" now either calls it or,
when there is none, offers no way out. The logo becomes a plain logo,
the recents and "not now" links disappear, the error page's button does
too. `ClientProvider`'s logout goes the same way. The component no
longer renders a router.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 component/index.tsx                           | 71 +++++++-------
 src/App.tsx                                   | 52 +++++++---
 src/ClientContext.tsx                         |  8 +-
 src/ErrorView.tsx                             | 31 +++---
 src/Header.module.css                         |  5 +
 src/Header.tsx                                | 29 +++++-
 src/LeaveToHomeContext.ts                     | 29 ++++++
 src/button/LeaveToHomeLink.tsx                | 40 ++++++++
 src/room/CallEndedView.tsx                    | 20 ++--
 src/room/CallView.tsx                         |  8 +-
 src/room/GroupCallErrorBoundary.test.tsx      | 53 ++++++----
 src/room/LobbyView.test.tsx                   |  9 +-
 src/room/LobbyView.tsx                        | 22 ++---
 .../GroupCallErrorBoundary.test.tsx.snap      | 98 ++++++++-----------
 .../__snapshots__/LobbyView.test.tsx.snap     |  6 +-
 15 files changed, 299 insertions(+), 182 deletions(-)
 create mode 100644 src/LeaveToHomeContext.ts
 create mode 100644 src/button/LeaveToHomeLink.tsx

diff --git a/component/index.tsx b/component/index.tsx
index 1d9969a2..41c58483 100644
--- a/component/index.tsx
+++ b/component/index.tsx
@@ -44,7 +44,6 @@ import {
 } from "react";
 import { type MatrixClient } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { MemoryRouter } from "react-router-dom";
 import { I18nextProvider } from "react-i18next";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { ErrorBoundary } from "@sentry/react";
@@ -266,44 +265,40 @@ export const ElementCall: FC<ElementCallProps> = ({
     <I18nextProvider i18n={i18n}>
       <HostBridgeProvider value={hostBridge}>
         <UrlParamsProvider value={params}>
-          {/* Element Call's own navigation stays in memory, so that the
-          component cannot disturb the host's URL. */}
-          <MemoryRouter>
-            <div ref={setContainer} className={styles.root}>
-              {container !== null &&
-                rtcSession !== null &&
-                mediaDevices !== null && (
-                  <RootElementProvider value={container}>
-                    {/* Whatever goes wrong in here is shown in here. Left to
+          <div ref={setContainer} className={styles.root}>
+            {container !== null &&
+              rtcSession !== null &&
+              mediaDevices !== null && (
+                <RootElementProvider value={container}>
+                  {/* Whatever goes wrong in here is shown in here. Left to
                     propagate, an error would unmount the host's own tree. */}
-                    <ErrorBoundary
-                      fallback={(error) => <ErrorPage error={error} />}
-                      // A broken call should not hold the host on screen
-                      onError={() => void hostBridge.setAlwaysOnScreen(false)}
-                    >
-                      <Decoration>
-                        <TooltipProvider>
-                          <ClientProvider client={client}>
-                            <MediaDevicesContext value={mediaDevices}>
-                              <ProcessorProvider>
-                                <CallView
-                                  client={client}
-                                  rtcSession={rtcSession}
-                                  isPasswordlessUser={false}
-                                  confineToRoom={params.confineToRoom}
-                                  preload={params.preload}
-                                  skipLobby={params.skipLobby}
-                                />
-                              </ProcessorProvider>
-                            </MediaDevicesContext>
-                          </ClientProvider>
-                        </TooltipProvider>
-                      </Decoration>
-                    </ErrorBoundary>
-                  </RootElementProvider>
-                )}
-            </div>
-          </MemoryRouter>
+                  <ErrorBoundary
+                    fallback={(error) => <ErrorPage error={error} />}
+                    // A broken call should not hold the host on screen
+                    onError={() => void hostBridge.setAlwaysOnScreen(false)}
+                  >
+                    <Decoration>
+                      <TooltipProvider>
+                        <ClientProvider client={client}>
+                          <MediaDevicesContext value={mediaDevices}>
+                            <ProcessorProvider>
+                              <CallView
+                                client={client}
+                                rtcSession={rtcSession}
+                                isPasswordlessUser={false}
+                                confineToRoom={params.confineToRoom}
+                                preload={params.preload}
+                                skipLobby={params.skipLobby}
+                              />
+                            </ProcessorProvider>
+                          </MediaDevicesContext>
+                        </ClientProvider>
+                      </TooltipProvider>
+                    </Decoration>
+                  </ErrorBoundary>
+                </RootElementProvider>
+              )}
+          </div>
         </UrlParamsProvider>
       </HostBridgeProvider>
     </I18nextProvider>
diff --git a/src/App.tsx b/src/App.tsx
index 8d272989..c07553af 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,8 +5,21 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type FC, type JSX, Suspense, useEffect, useState } from "react";
-import { BrowserRouter, Route, useLocation, Routes } from "react-router-dom";
+import {
+  type FC,
+  type JSX,
+  Suspense,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+import {
+  BrowserRouter,
+  Route,
+  useLocation,
+  useNavigate,
+  Routes,
+} from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/lib/logger";
@@ -40,6 +53,7 @@ import {
   nullHostBridge,
 } from "./HostBridge";
 import { useInitial } from "./useInitial";
+import { LeaveToHomeProvider } from "./LeaveToHomeContext";
 
 const SentryRoute = Sentry.withSentryReactRouterV7Routing(Route);
 
@@ -57,6 +71,20 @@ const LocationUrlParamsProvider: FC<SimpleProviderProps> = ({ children }) => {
   return <UrlParamsProvider value={urlParams}>{children}</UrlParamsProvider>;
 };
 
+/**
+ * Supplies the way home. Only the app has one — its home page, with the list
+ * of recent calls — so this, too, lives in the app shell.
+ */
+const HomeProvider: FC<SimpleProviderProps> = ({ children }) => {
+  const navigate = useNavigate();
+  const leaveToHome = useCallback(() => {
+    navigate("/")?.catch((e) => logger.error("Failed to navigate home", e));
+  }, [navigate]);
+  return (
+    <LeaveToHomeProvider value={leaveToHome}>{children}</LeaveToHomeProvider>
+  );
+};
+
 const BackgroundProvider: FC<SimpleProviderProps> = ({ children }) => {
   const { pathname } = useLocation();
   const { background } = useUrlParams();
@@ -143,15 +171,17 @@ export const App: FC<Props> = ({ vm, widget }) => {
       <HostBridgeProvider value={hostBridge}>
         <BrowserRouter>
           <LocationUrlParamsProvider>
-            <BackgroundProvider>
-              <ThemeProvider>
-                <TooltipProvider>
-                  <Suspense fallback={null}>
-                    <MaybeAppBar>{content}</MaybeAppBar>
-                  </Suspense>
-                </TooltipProvider>
-              </ThemeProvider>
-            </BackgroundProvider>
+            <HomeProvider>
+              <BackgroundProvider>
+                <ThemeProvider>
+                  <TooltipProvider>
+                    <Suspense fallback={null}>
+                      <MaybeAppBar>{content}</MaybeAppBar>
+                    </Suspense>
+                  </TooltipProvider>
+                </ThemeProvider>
+              </BackgroundProvider>
+            </HomeProvider>
           </LocationUrlParamsProvider>
         </BrowserRouter>
       </HostBridgeProvider>
diff --git a/src/ClientContext.tsx b/src/ClientContext.tsx
index 19375566..52658199 100644
--- a/src/ClientContext.tsx
+++ b/src/ClientContext.tsx
@@ -16,13 +16,13 @@ import {
   useMemo,
   type JSX,
 } from "react";
-import { useNavigate } from "react-router-dom";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { type ISyncStateData, type SyncState } from "matrix-js-sdk/lib/sync";
 import { ClientEvent, type MatrixClient } from "matrix-js-sdk";
 
 import { ErrorPage } from "./FullScreenView";
 import { useHostBridge } from "./HostBridge";
+import { useLeaveToHome } from "./LeaveToHomeContext";
 import {
   PosthogAnalytics,
   RegistrationType,
@@ -146,7 +146,7 @@ interface Props {
 }
 
 export const ClientProvider: FC<Props> = ({ children, client }) => {
-  const navigate = useNavigate();
+  const leaveToHome = useLeaveToHome();
   const hostBridge = useHostBridge();
 
   // null = signed out, undefined = loading
@@ -249,10 +249,10 @@ export const ClientProvider: FC<Props> = ({ children, client }) => {
     await client.clearStores();
     clearSession();
     setInitClientState(null);
-    await navigate("/");
+    leaveToHome?.();
     PosthogAnalytics.instance.logout();
     PosthogAnalytics.instance.setRegistrationType(RegistrationType.Guest);
-  }, [navigate, initClientState?.client]);
+  }, [leaveToHome, initClientState?.client]);
 
   // To protect against multiple sessions writing to the same storage
   // simultaneously, we send a broadcast message that shuts down all other
diff --git a/src/ErrorView.tsx b/src/ErrorView.tsx
index 51908983..00ffba37 100644
--- a/src/ErrorView.tsx
+++ b/src/ErrorView.tsx
@@ -20,7 +20,7 @@ import { logger } from "matrix-js-sdk/lib/logger";
 import { RageshakeButton } from "./settings/RageshakeButton";
 import styles from "./ErrorView.module.css";
 import { useUrlParams } from "./UrlParams";
-import { LinkButton } from "./button";
+import { useLeaveToHome } from "./LeaveToHomeContext";
 import { useHostBridge } from "./HostBridge.ts";
 
 interface Props {
@@ -50,6 +50,7 @@ export const ErrorView: FC<Props> = ({
   const { t } = useTranslation();
   const { confineToRoom } = useUrlParams();
   const hostBridge = useHostBridge();
+  const leaveToHome = useLeaveToHome();
 
   const onReload = useCallback(() => {
     window.location.href = "/";
@@ -73,21 +74,19 @@ export const ErrorView: FC<Props> = ({
   };
 
   // Whether the error is considered fatal or pathname is `/` then reload the all app.
-  // If not then navigate to home page.
-  const ReturnToHomeButton = (): ReactElement => {
-    if (fatal || location.pathname === "/") {
-      return (
-        <Button kind="tertiary" className={styles.homeLink} onClick={onReload}>
-          {t("return_home_button")}
-        </Button>
-      );
-    } else {
-      return (
-        <LinkButton kind="tertiary" className={styles.homeLink} to="/">
-          {t("return_home_button")}
-        </LinkButton>
-      );
-    }
+  // If not then navigate to home page. Neither applies when there is no home
+  // to go to.
+  const ReturnToHomeButton = (): ReactElement | null => {
+    if (leaveToHome === null) return null;
+    return (
+      <Button
+        kind="tertiary"
+        className={styles.homeLink}
+        onClick={fatal || location.pathname === "/" ? onReload : leaveToHome}
+      >
+        {t("return_home_button")}
+      </Button>
+    );
   };
 
   return (
diff --git a/src/Header.module.css b/src/Header.module.css
index 07a3e724..58a710a7 100644
--- a/src/Header.module.css
+++ b/src/Header.module.css
@@ -30,6 +30,11 @@ Please see LICENSE in the repository root for full details.
   display: none;
   align-items: center;
   text-decoration: none;
+  /* A button when it leads home, so undo the browser's button styling */
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
 }
 
 .leftNav.hideMobile {
diff --git a/src/Header.tsx b/src/Header.tsx
index a963f16b..e3bda165 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -6,8 +6,13 @@ Please see LICENSE in the repository root for full details.
 */
 
 import classNames from "classnames";
-import { type Ref, type FC, type HTMLAttributes, type ReactNode } from "react";
-import { Link } from "react-router-dom";
+import {
+  type Ref,
+  type FC,
+  type HTMLAttributes,
+  type ReactNode,
+  useCallback,
+} from "react";
 import { useTranslation } from "react-i18next";
 import { Heading, Text } from "@vector-im/compound-web";
 import { UserProfileIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
@@ -17,6 +22,7 @@ import Logo from "./icons/Logo.svg?react";
 import { Avatar, Size } from "./Avatar";
 import { EncryptionLock } from "./room/EncryptionLock";
 import { useRootSizeMatches } from "./useRootSize";
+import { useLeaveToHome } from "./LeaveToHomeContext";
 import { DisconnectedBanner } from "./DisconnectedBanner";
 
 interface HeaderProps extends HTMLAttributes<HTMLElement> {
@@ -112,17 +118,30 @@ interface HeaderLogoProps {
   className?: string;
 }
 
+/**
+ * The logo, which is also the way home — when there is a home to go to. As a
+ * component there is not, and it is just the logo.
+ */
 export const HeaderLogo: FC<HeaderLogoProps> = ({ className }) => {
   const { t } = useTranslation();
+  const leaveToHome = useLeaveToHome();
+  const onClick = useCallback(() => leaveToHome?.(), [leaveToHome]);
 
+  if (leaveToHome === null)
+    return (
+      <div className={classNames(styles.headerLogo, className)}>
+        <Logo />
+      </div>
+    );
   return (
-    <Link
+    <button
+      type="button"
       className={classNames(styles.headerLogo, className)}
-      to="/"
+      onClick={onClick}
       aria-label={t("header_label")}
     >
       <Logo />
-    </Link>
+    </button>
   );
 };
 
diff --git a/src/LeaveToHomeContext.ts b/src/LeaveToHomeContext.ts
new file mode 100644
index 00000000..4af56c21
--- /dev/null
+++ b/src/LeaveToHomeContext.ts
@@ -0,0 +1,29 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { createContext, use } from "react";
+
+/**
+ * How the user leaves the call for wherever they came from: the standalone
+ * app's home page, with its list of recent calls.
+ *
+ * The call itself has no idea where that is, or whether there is such a place
+ * at all. Standalone there is, and the shell navigates to it; as a component
+ * there is not — the host decides what happens after a call — so nothing is
+ * supplied, and the call offers no way out of its own. This is what lets the
+ * call be rendered without a router.
+ */
+const LeaveToHomeContext = createContext<(() => void) | null>(null);
+
+export const LeaveToHomeProvider = LeaveToHomeContext.Provider;
+
+/**
+ * The way out of the call, or null when there is nowhere to go and the call
+ * should not offer one.
+ */
+export const useLeaveToHome = (): (() => void) | null =>
+  use(LeaveToHomeContext);
diff --git a/src/button/LeaveToHomeLink.tsx b/src/button/LeaveToHomeLink.tsx
new file mode 100644
index 00000000..50385a5d
--- /dev/null
+++ b/src/button/LeaveToHomeLink.tsx
@@ -0,0 +1,40 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { type FC, type MouseEvent, type ReactNode, useCallback } from "react";
+import { Link } from "@vector-im/compound-web";
+
+import { useLeaveToHome } from "../LeaveToHomeContext";
+
+interface Props {
+  className?: string;
+  children: ReactNode;
+}
+
+/**
+ * A link out of the call, to wherever the user came from. Renders nothing when
+ * there is nowhere to go (see {@link useLeaveToHome}).
+ */
+export const LeaveToHomeLink: FC<Props> = ({ className, children }) => {
+  const leaveToHome = useLeaveToHome();
+  const onClick = useCallback(
+    (e: MouseEvent<HTMLAnchorElement>) => {
+      e.preventDefault();
+      leaveToHome?.();
+    },
+    [leaveToHome],
+  );
+
+  if (leaveToHome === null) return null;
+  // Where this leads is the shell's business, so the link has no address of
+  // its own to offer
+  return (
+    <Link className={className} href="#" onClick={onClick}>
+      {children}
+    </Link>
+  );
+};
diff --git a/src/room/CallEndedView.tsx b/src/room/CallEndedView.tsx
index 4df3f297..58417c38 100644
--- a/src/room/CallEndedView.tsx
+++ b/src/room/CallEndedView.tsx
@@ -9,8 +9,6 @@ import { type FC, type FormEventHandler, useCallback, useState } from "react";
 import { type MatrixClient } from "matrix-js-sdk";
 import { Trans, useTranslation } from "react-i18next";
 import { Button, Heading, Text } from "@vector-im/compound-web";
-import { useNavigate } from "react-router-dom";
-import { logger } from "matrix-js-sdk/lib/logger";
 
 import styles from "./CallEndedView.module.css";
 import feedbackStyle from "../input/FeedbackInput.module.css";
@@ -19,8 +17,9 @@ import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { FieldRow, InputField } from "../input/Input";
 import { StarRatingInput } from "../input/StarRatingInput";
-import { Link } from "../button/Link";
 import { LinkButton } from "../button";
+import { LeaveToHomeLink } from "../button/LeaveToHomeLink";
+import { useLeaveToHome } from "../LeaveToHomeContext";
 
 interface Props {
   client: MatrixClient;
@@ -38,7 +37,7 @@ export const CallEndedView: FC<Props> = ({
   endedCallId,
 }) => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
+  const leaveToHome = useLeaveToHome();
 
   const { displayName } = useProfile(client);
   const [surveySubmitted, setSurveySubmitted] = useState(false);
@@ -68,14 +67,12 @@ export const CallEndedView: FC<Props> = ({
             setSurveySubmitted(true);
           } else if (!confineToRoom) {
             // if the user already has an account immediately go back to the home screen
-            navigate("/")?.catch((error) => {
-              logger.error("Failed to navigate to /", error);
-            });
+            leaveToHome?.();
           }
         }, 1000);
       }, 1000);
     },
-    [endedCallId, navigate, isPasswordlessUser, confineToRoom, starRating],
+    [endedCallId, leaveToHome, isPasswordlessUser, confineToRoom, starRating],
   );
 
   const createAccountDialog = isPasswordlessUser && (
@@ -87,6 +84,8 @@ export const CallEndedView: FC<Props> = ({
           calls
         </p>
       </Trans>
+      {/* Only guests of the standalone app are ever passwordless, so this
+      route is always the standalone app's own. */}
       <LinkButton className={styles.callEndedButton} to="/register">
         {t("call_ended_view.create_account_button")}
       </LinkButton>
@@ -157,7 +156,10 @@ export const CallEndedView: FC<Props> = ({
         </main>
         {!confineToRoom && (
           <Text className={styles.footer}>
-            <Link to="/"> {t("call_ended_view.not_now_button")} </Link>
+            <LeaveToHomeLink>
+              {" "}
+              {t("call_ended_view.not_now_button")}{" "}
+            </LeaveToHomeLink>
           </Text>
         )}
       </div>
diff --git a/src/room/CallView.tsx b/src/room/CallView.tsx
index a88ab7b2..3c34dc84 100644
--- a/src/room/CallView.tsx
+++ b/src/room/CallView.tsx
@@ -28,7 +28,6 @@ import {
   MatrixRTCSessionEvent,
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
-import { useNavigate } from "react-router-dom";
 
 import { type JoinCallData } from "../widget";
 import { LobbyView } from "./LobbyView";
@@ -72,6 +71,7 @@ import { useBehavior } from "../useBehavior.ts";
 import { useRootElement } from "../RootElementContext.ts";
 import { useHostBridge } from "../HostBridge.ts";
 import { useMuteStates } from "../state/useMuteStates.ts";
+import { useLeaveToHome } from "../LeaveToHomeContext.ts";
 
 /**
  * If there already are this many participants in the call, we automatically mute
@@ -374,7 +374,7 @@ const LoadedCallView: FC<LoadedProps> = ({
   // TODO refactor this + "joined" to just one callState
   const [left, setLeft] = useState(false);
 
-  const navigate = useNavigate();
+  const leaveToHome = useLeaveToHome();
 
   // TODO split this into leave and onDisconnect
   const onLeft = useCallback(
@@ -433,7 +433,7 @@ const LoadedCallView: FC<LoadedProps> = ({
             !confineToRoom &&
             !PosthogAnalytics.instance.isEnabled()
           )
-            void navigate("/");
+            leaveToHome?.();
 
           // After this point the host could dispose of us at any moment!
           try {
@@ -462,7 +462,7 @@ const LoadedCallView: FC<LoadedProps> = ({
       isPasswordlessUser,
       confineToRoom,
       returnToLobby,
-      navigate,
+      leaveToHome,
     ],
   );
 
diff --git a/src/room/GroupCallErrorBoundary.test.tsx b/src/room/GroupCallErrorBoundary.test.tsx
index a70b3180..b6d903d8 100644
--- a/src/room/GroupCallErrorBoundary.test.tsx
+++ b/src/room/GroupCallErrorBoundary.test.tsx
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { describe, expect, test, vi } from "vitest";
+import { describe, expect, onTestFinished, test, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 import {
   type FC,
@@ -14,7 +14,7 @@ import {
   useCallback,
   useState,
 } from "react";
-import { BrowserRouter } from "react-router-dom";
+import { LeaveToHomeProvider } from "../LeaveToHomeContext";
 import userEvent from "@testing-library/user-event";
 import { ConnectionError } from "livekit-client";
 import { MatrixError } from "matrix-js-sdk";
@@ -42,6 +42,9 @@ import {
   nullHostBridge,
 } from "../HostBridge.ts";
 
+// Somewhere to go home to, so that the error pages offer the way
+const leaveToHome = vi.fn();
+
 test.each([
   {
     error: new MatrixRTCTransportMissingError("example.com"),
@@ -79,14 +82,14 @@ test.each([
 
     const onErrorMock = vi.fn();
     const { asFragment } = render(
-      <BrowserRouter>
+      <LeaveToHomeProvider value={leaveToHome}>
         <GroupCallErrorBoundary
           onError={onErrorMock}
           recoveryActionHandler={vi.fn()}
         >
           <TestComponent />
         </GroupCallErrorBoundary>
-      </BrowserRouter>,
+      </LeaveToHomeProvider>,
     );
 
     await screen.findByText(expectedTitle);
@@ -106,15 +109,19 @@ test("should render the error page with link back to home", async () => {
   };
 
   const onErrorMock = vi.fn();
+  // From the home page itself the home button reloads instead of navigating,
+  // so be somewhere else for this test
+  window.history.pushState({}, "", "/room/somewhere");
+  onTestFinished(() => window.history.pushState({}, "", "/"));
   const { asFragment } = render(
-    <BrowserRouter>
+    <LeaveToHomeProvider value={leaveToHome}>
       <GroupCallErrorBoundary
         onError={onErrorMock}
         recoveryActionHandler={vi.fn()}
       >
         <TestComponent />
       </GroupCallErrorBoundary>
-    </BrowserRouter>,
+    </LeaveToHomeProvider>,
   );
 
   await screen.findByText("Call is not supported");
@@ -123,7 +130,11 @@ test("should render the error page with link back to home", async () => {
     screen.getByText(/Error Code: MISSING_MATRIX_RTC_TRANSPORT/i),
   ).toBeInTheDocument();
 
-  await screen.findByRole("button", { name: "Return to home screen" });
+  // The way home is whatever the shell supplied, not a route of the call's own
+  await userEvent
+    .setup()
+    .click(screen.getByRole("button", { name: "Return to home screen" }));
+  expect(leaveToHome).toHaveBeenCalledOnce();
 
   expect(onErrorMock).toHaveBeenCalledOnce();
   expect(onErrorMock).toHaveBeenCalledWith(error);
@@ -155,11 +166,11 @@ test("ConnectionLostError: Action handling should reset error state", async () =
     );
 
     return (
-      <BrowserRouter>
+      <LeaveToHomeProvider value={leaveToHome}>
         <GroupCallErrorBoundary recoveryActionHandler={reconnectCallback}>
           <TestComponent fail={failState} />
         </GroupCallErrorBoundary>
-      </BrowserRouter>
+      </LeaveToHomeProvider>
     );
   };
 
@@ -194,14 +205,14 @@ describe("Rageshake button", () => {
     };
 
     render(
-      <BrowserRouter>
+      <LeaveToHomeProvider value={leaveToHome}>
         <GroupCallErrorBoundary
           onError={vi.fn()}
           recoveryActionHandler={vi.fn()}
         >
           <TestComponent />
         </GroupCallErrorBoundary>
-      </BrowserRouter>,
+      </LeaveToHomeProvider>,
     );
   }
 
@@ -234,7 +245,7 @@ test("should have a close button when the host can dismiss us", async () => {
   const user = userEvent.setup();
   const onErrorMock = vi.fn();
   const { asFragment } = render(
-    <BrowserRouter>
+    <LeaveToHomeProvider value={leaveToHome}>
       <HostBridgeProvider value={hostBridge}>
         <GroupCallErrorBoundary
           onError={onErrorMock}
@@ -243,7 +254,7 @@ test("should have a close button when the host can dismiss us", async () => {
           <TestComponent />
         </GroupCallErrorBoundary>
       </HostBridgeProvider>
-    </BrowserRouter>,
+    </LeaveToHomeProvider>,
   );
 
   await screen.findByText("Call is not supported");
@@ -273,11 +284,11 @@ test("should show technical details when error has a matrixError cause", async (
   };
 
   render(
-    <BrowserRouter>
+    <LeaveToHomeProvider value={leaveToHome}>
       <GroupCallErrorBoundary onError={vi.fn()} recoveryActionHandler={vi.fn()}>
         <TestComponent />
       </GroupCallErrorBoundary>
-    </BrowserRouter>,
+    </LeaveToHomeProvider>,
   );
 
   await screen.findByText("Something went wrong");
@@ -302,11 +313,11 @@ test("should not show technical details when error has no matrix error cause", a
   };
 
   render(
-    <BrowserRouter>
+    <LeaveToHomeProvider value={leaveToHome}>
       <GroupCallErrorBoundary onError={vi.fn()} recoveryActionHandler={vi.fn()}>
         <TestComponent />
       </GroupCallErrorBoundary>
-    </BrowserRouter>,
+    </LeaveToHomeProvider>,
   );
 
   await screen.findByText("Connection lost");
@@ -356,14 +367,14 @@ describe("LiveKit ConnectionError variants", () => {
       };
 
       const { asFragment } = render(
-        <BrowserRouter>
+        <LeaveToHomeProvider value={leaveToHome}>
           <GroupCallErrorBoundary
             onError={vi.fn()}
             recoveryActionHandler={vi.fn()}
           >
             <TestComponent />
           </GroupCallErrorBoundary>
-        </BrowserRouter>,
+        </LeaveToHomeProvider>,
       );
 
       // Check title
@@ -385,14 +396,14 @@ describe("LiveKit ConnectionError variants", () => {
     };
 
     const { asFragment } = render(
-      <BrowserRouter>
+      <LeaveToHomeProvider value={leaveToHome}>
         <GroupCallErrorBoundary
           onError={vi.fn()}
           recoveryActionHandler={vi.fn()}
         >
           <TestComponent />
         </GroupCallErrorBoundary>
-      </BrowserRouter>,
+      </LeaveToHomeProvider>,
     );
 
     await screen.findByText("Connection timeout");
diff --git a/src/room/LobbyView.test.tsx b/src/room/LobbyView.test.tsx
index 8cbe6be1..7f03f2d2 100644
--- a/src/room/LobbyView.test.tsx
+++ b/src/room/LobbyView.test.tsx
@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { describe, expect, it, vi } from "vitest";
 import { render } from "@testing-library/react";
-import { BrowserRouter } from "react-router-dom";
+import { LeaveToHomeProvider } from "../LeaveToHomeContext";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { type MatrixClient } from "matrix-js-sdk";
 import { axe } from "vitest-axe";
@@ -26,6 +26,9 @@ import lobbyStyles from "./LobbyView.module.css";
 import headerStyles from "../Header.module.css";
 import { AppBar } from "../AppBar";
 
+// Somewhere to go home to, so that the lobby offers the way back
+const leaveToHome = vi.fn();
+
 vi.mock("@livekit/components-react", () => ({
   usePreviewTracks: (): unknown[] => [],
 }));
@@ -93,14 +96,14 @@ function renderLobbyView(
     />
   );
   return render(
-    <BrowserRouter>
+    <LeaveToHomeProvider value={leaveToHome}>
       <MediaDevicesContext value={mediaDevices}>
         <TooltipProvider>
           {withAppBar && <AppBar>{lobbyView}</AppBar>}
           {!withAppBar && lobbyView}
         </TooltipProvider>
       </MediaDevicesContext>
-    </BrowserRouter>,
+    </LeaveToHomeProvider>,
   );
 }
 
diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx
index 89018691..9e6e0ed9 100644
--- a/src/room/LobbyView.tsx
+++ b/src/room/LobbyView.tsx
@@ -25,7 +25,6 @@ import {
   Track,
 } from "livekit-client";
 import { useObservableEagerState } from "observable-hooks";
-import { useNavigate } from "react-router-dom";
 
 import inCallStyles from "./InCallView.module.css";
 import styles from "./LobbyView.module.css";
@@ -36,7 +35,8 @@ import { InviteButton } from "../button/InviteButton";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
 import { useRootSizeMatches } from "../useRootSize";
 import { E2eeType } from "../e2ee/e2eeType";
-import { Link } from "../button/Link";
+import { LeaveToHomeLink } from "../button/LeaveToHomeLink";
+import { useLeaveToHome } from "../LeaveToHomeContext";
 import { useMediaDevices } from "../MediaDevicesContext";
 import { ObservableScope } from "../state/ObservableScope";
 import { useInitial } from "../useInitial";
@@ -109,21 +109,19 @@ export const LobbyView: FC<Props> = ({
     [setSettingsModalOpen],
   );
 
-  const navigate = useNavigate();
-  const onLeaveClick = useCallback(() => {
-    navigate("/")?.catch((error) => {
-      logger.error("Failed to navigate to /", error);
-    });
-  }, [navigate]);
-  const hangup = confineToRoom ? undefined : onLeaveClick;
+  // Leaving the lobby means going back to wherever the user came from, if
+  // there is such a place
+  const leaveToHome = useLeaveToHome();
+  const hangup =
+    confineToRoom || leaveToHome === null ? undefined : leaveToHome;
 
   const recentsButtonInFooter = useRootSizeMatches(
     ({ height }) => height <= 500,
   );
   const recentsButton = !confineToRoom && (
-    <Link className={styles.recents} to="/">
+    <LeaveToHomeLink className={styles.recents}>
       {t("lobby.leave_button")}
-    </Link>
+    </LeaveToHomeLink>
   );
 
   const devices = useMediaDevices();
@@ -209,7 +207,7 @@ export const LobbyView: FC<Props> = ({
     return (): void => {
       footerScope.end();
     };
-  }, [devices, hangup, hideHeader, muteStates, onLeaveClick, openSettings]);
+  }, [devices, hangup, hideHeader, muteStates, openSettings]);
 
   // TODO: Unify this component with InCallView, so we can get slick joining
   // animations and don't have to feel bad about reusing its CSS
diff --git a/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap b/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap
index 0194dfc4..7a1fc045 100644
--- a/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap
+++ b/src/room/__snapshots__/GroupCallErrorBoundary.test.tsx.snap
@@ -11,11 +11,10 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
-          href="/"
+          type="button"
         >
           <svg
             fill="none"
@@ -92,7 +91,7 @@ exports[`ConnectionLostError: Action handling should reset error state 1`] = `
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -169,11 +168,10 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'internal' er
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
-          href="/"
+          type="button"
         >
           <svg
             fill="none"
@@ -250,7 +248,7 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'internal' er
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -326,11 +324,10 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'notAllowed'
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
-          href="/"
+          type="button"
         >
           <svg
             fill="none"
@@ -407,7 +404,7 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'notAllowed'
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -483,11 +480,10 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serverUnreac
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
-          href="/"
+          type="button"
         >
           <svg
             fill="none"
@@ -564,7 +560,7 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serverUnreac
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -640,11 +636,10 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serviceNotFo
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
-          href="/"
+          type="button"
         >
           <svg
             fill="none"
@@ -721,7 +716,7 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'serviceNotFo
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -797,11 +792,10 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'timeout' err
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
-          href="/"
+          type="button"
         >
           <svg
             fill="none"
@@ -878,7 +872,7 @@ exports[`LiveKit ConnectionError variants > should display LiveKit 'timeout' err
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -954,11 +948,10 @@ exports[`LiveKit ConnectionError variants > should link to troubleshoot guide wh
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
-          href="/"
+          type="button"
         >
           <svg
             fill="none"
@@ -1035,7 +1028,7 @@ exports[`LiveKit ConnectionError variants > should link to troubleshoot guide wh
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -1111,11 +1104,10 @@ exports[`should have a close button when the host can dismiss us 1`] = `
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
-          href="/"
+          type="button"
         >
           <svg
             fill="none"
@@ -1192,7 +1184,7 @@ exports[`should have a close button when the host can dismiss us 1`] = `
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -1265,11 +1257,10 @@ exports[`should render the error page with link back to home 1`] = `
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
-          href="/"
+          type="button"
         >
           <svg
             fill="none"
@@ -1346,7 +1337,7 @@ exports[`should render the error page with link back to home 1`] = `
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -1419,11 +1410,10 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
-          href="/"
+          type="button"
         >
           <svg
             fill="none"
@@ -1500,7 +1490,7 @@ exports[`should report correct error for 'Call is not supported' 1`] = `
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -1573,11 +1563,10 @@ exports[`should report correct error for 'Connection lost' 1`] = `
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
-          href="/"
+          type="button"
         >
           <svg
             fill="none"
@@ -1654,7 +1643,7 @@ exports[`should report correct error for 'Connection lost' 1`] = `
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -1731,11 +1720,10 @@ exports[`should report correct error for 'Homeserver does not support Matrix 2.
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
-          href="/"
+          type="button"
         >
           <svg
             fill="none"
@@ -1812,7 +1800,7 @@ exports[`should report correct error for 'Homeserver does not support Matrix 2.
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -1885,11 +1873,10 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
-          href="/"
+          type="button"
         >
           <svg
             fill="none"
@@ -1966,7 +1953,7 @@ exports[`should report correct error for 'Incompatible browser' 1`] = `
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
@@ -2034,11 +2021,10 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
       <div
         class="_nav_e4b327 _leftNav_e4b327"
       >
-        <a
+        <button
           aria-label="Element Call Home"
           class="_headerLogo_e4b327"
-          data-discover="true"
-          href="/"
+          type="button"
         >
           <svg
             fill="none"
@@ -2115,7 +2101,7 @@ exports[`should report correct error for 'Insufficient capacity' 1`] = `
               fill="white"
             />
           </svg>
-        </a>
+        </button>
       </div>
       <div
         class="_nav_e4b327 _rightNav_e4b327"
diff --git a/src/room/__snapshots__/LobbyView.test.tsx.snap b/src/room/__snapshots__/LobbyView.test.tsx.snap
index f3352a6e..d66d4a8f 100644
--- a/src/room/__snapshots__/LobbyView.test.tsx.snap
+++ b/src/room/__snapshots__/LobbyView.test.tsx.snap
@@ -88,7 +88,7 @@ exports[`LobbyView > renders with AppBar android 1`] = `
         class="_link_13esb_8"
         data-kind="primary"
         data-size="md"
-        href="/"
+        href="#"
         rel="noreferrer noopener"
       >
         Back to recents
@@ -320,7 +320,7 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
         class="_link_13esb_8"
         data-kind="primary"
         data-size="md"
-        href="/"
+        href="#"
         rel="noreferrer noopener"
       >
         Back to recents
@@ -598,7 +598,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
         class="_link_13esb_8"
         data-kind="primary"
         data-size="md"
-        href="/"
+        href="#"
         rel="noreferrer noopener"
       >
         Back to recents

From f994586eeb24a58a3f440c1b16558b9804fb5106 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Tue, 8 Sep 2026 16:03:48 +0200
Subject: [PATCH 075/154] Speak every language in the component, not just
 English

The component bundled English alone: the standalone app fetches its
locale files at runtime from URLs its own build emits, which a host
serving the library from elsewhere could not resolve, so bundling one
language was the self-contained option. Now every locale is a chunk of
its own that the host's bundler loads the first time it is needed, with
English still bundled in so that the fallback never waits.

Element Call starts in the browser's language and follows the host's own
setting through a `language` prop; `supportedLanguages` says what it
accepts. Translations are shared by every Element Call on the page, so
the most recently set language wins for all of them. The harness gets a
language picker, and the app and the component share the parsing of
locale paths.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 README.md                      |  6 ++++
 component/dev/Harness.tsx      | 28 +++++++++++++--
 component/index.tsx            | 62 +++++++++++++++++++++++++---------
 component/localization.test.ts | 46 +++++++++++++++++++++++++
 component/localization.ts      | 55 ++++++++++++++++++++++++++++++
 src/initializer.tsx            | 14 ++------
 src/utils/i18n.ts              | 11 ++++++
 7 files changed, 192 insertions(+), 30 deletions(-)
 create mode 100644 component/localization.test.ts
 create mode 100644 component/localization.ts

diff --git a/README.md b/README.md
index 273846af..b1c46275 100644
--- a/README.md
+++ b/README.md
@@ -244,6 +244,12 @@ what is inside it, with `html`, `body` and `:root` standing for that root (see
 `component/build/scopeStylesToRoot.ts`). A host's own page keeps its styles,
 and Element Call brings its own fonts and design tokens along.
 
+The component speaks every language the app does. English is bundled in; the
+other locales are split into chunks the host's bundler loads the first time
+they are needed. It starts in the browser's language, and follows the host's
+own language setting through the `language` prop (`supportedLanguages` lists
+the tags it accepts).
+
 The package is not published yet. A host installs it as a git dependency on the
 `component` directory of this repository,
 
diff --git a/component/dev/Harness.tsx b/component/dev/Harness.tsx
index ea51191f..9e40e2c7 100644
--- a/component/dev/Harness.tsx
+++ b/component/dev/Harness.tsx
@@ -17,7 +17,11 @@ import {
 import { type MatrixClient } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/lib/logger";
 
-import { ElementCall, type ElementCallHandle } from "../index";
+import {
+  ElementCall,
+  type ElementCallHandle,
+  supportedLanguages,
+} from "../index";
 import { createDevHostBridge } from "./DevHostBridge";
 import { createSession, joinRoom } from "./session";
 import styles from "./Harness.module.css";
@@ -90,8 +94,9 @@ interface LogEntry {
 const Pane: FC<{
   session: Session;
   roomId: string;
+  language: string | undefined;
   log: (pane: string, message: string) => void;
-}> = ({ session, roomId, log }): ReactNode => {
+}> = ({ session, roomId, language, log }): ReactNode => {
   const [mounted, setMounted] = useState(true);
 
   const bridge = useMemo(
@@ -173,6 +178,7 @@ const Pane: FC<{
             client={session.client}
             roomId={roomId}
             hostBridge={bridge}
+            language={language}
           />
         )}
       </div>
@@ -226,6 +232,9 @@ export const Harness: FC = (): ReactNode => {
   const [state, setState] = useState<State>({ phase: "credentials" });
   const [entries, setEntries] = useState<LogEntry[]>([]);
   const [dialogOpen, setDialogOpen] = useState(false);
+  // The host's language setting, which Element Call follows. Undefined means
+  // the host has none and Element Call uses the browser's.
+  const [language, setLanguage] = useState<string | undefined>(undefined);
 
   const log = useCallback((pane: string, message: string): void => {
     setEntries((entries) =>
@@ -324,6 +333,20 @@ export const Harness: FC = (): ReactNode => {
         <button onClick={(): void => setDialogOpen(true)}>
           Open a host dialog
         </button>
+        <label>
+          Language{" "}
+          <select
+            value={language ?? ""}
+            onChange={(e): void => setLanguage(e.target.value || undefined)}
+          >
+            <option value="">Browser default</option>
+            {supportedLanguages.map((tag) => (
+              <option key={tag} value={tag}>
+                {tag}
+              </option>
+            ))}
+          </select>
+        </label>
       </header>
       <div className={styles.middle}>
         <HostChrome />
@@ -333,6 +356,7 @@ export const Harness: FC = (): ReactNode => {
               key={session.label}
               session={session}
               roomId={state.roomId}
+              language={language}
               log={log}
             />
           ))}
diff --git a/component/index.tsx b/component/index.tsx
index 41c58483..90532966 100644
--- a/component/index.tsx
+++ b/component/index.tsx
@@ -50,6 +50,8 @@ import { ErrorBoundary } from "@sentry/react";
 import { shouldPolyfill as shouldPolyfillSegmenter } from "@formatjs/intl-segmenter/should-polyfill";
 import { shouldPolyfill as shouldPolyfillDurationFormat } from "@formatjs/intl-durationformat/should-polyfill.js";
 
+import LanguageDetector from "i18next-browser-languagedetector";
+
 import EN from "../locales/en/app.json";
 import { CallView } from "../src/room/CallView";
 import { ErrorPage } from "../src/FullScreenView";
@@ -81,6 +83,10 @@ import {
   type ElementCallHostBridge,
   useComponentHostBridge,
 } from "./host";
+import { supportedLanguages, translationsBackend } from "./localization";
+
+// The languages Element Call can be shown in
+export { supportedLanguages } from "./localization";
 
 // How the host and Element Call talk to each other, and what they say
 export { type ElementCallHandle, type ElementCallHostBridge } from "./host";
@@ -152,6 +158,15 @@ export interface ElementCallProps {
    * Available once the component has rendered.
    */
   ref?: Ref<ElementCallHandle>;
+  /**
+   * The language to show Element Call in, as a BCP 47 tag: one of
+   * {@link supportedLanguages}, or something that falls back to one (`de-AT`
+   * to `de`). Left out, the browser's language is used.
+   *
+   * Translations are one thing shared by every Element Call on the page, so
+   * the most recently set language wins for all of them.
+   */
+  language?: string;
 }
 
 /**
@@ -171,22 +186,29 @@ export async function initializeElementCall(
   await Promise.all(polyfills);
 
   Config.initWith(config);
-  await i18n.init({
-    fallbackLng: "en",
-    defaultNS: "app",
-    keySeparator: ".",
-    nsSeparator: false,
-    pluralSeparator: "_",
-    contextSeparator: "|",
-    lng: "en",
-    interpolation: { escapeValue: false },
-    // English only, bundled in. The standalone app fetches its locale files at
-    // runtime from URLs its own build emits, which a host serving the library
-    // from elsewhere could not resolve; bundling one language at least keeps
-    // the component self-contained. Letting a host supply the rest, or its own
-    // translations, is still to do.
-    resources: { en: { app: EN } },
-  });
+  await i18n
+    .use(translationsBackend)
+    .use(new LanguageDetector())
+    .init({
+      fallbackLng: "en",
+      defaultNS: "app",
+      keySeparator: ".",
+      nsSeparator: false,
+      pluralSeparator: "_",
+      contextSeparator: "|",
+      supportedLngs: [...supportedLanguages],
+      interpolation: { escapeValue: false },
+      // English is bundled in, so the fallback never has to be loaded; every
+      // other language arrives from the backend when first asked for.
+      partialBundledLanguages: true,
+      resources: { en: { app: EN } },
+      detection: {
+        // The browser's language, until the host says otherwise through the
+        // `language` prop. Nothing is remembered: the choice is the host's.
+        order: ["navigator"],
+        caches: [],
+      },
+    });
 }
 
 /** Applies the theme and background to the container, before it is painted. */
@@ -207,9 +229,17 @@ export const ElementCall: FC<ElementCallProps> = ({
   config,
   hostBridge: suppliedHostBridge,
   ref,
+  language,
 }): ReactNode => {
   const hostBridge = useComponentHostBridge(suppliedHostBridge, ref);
 
+  useEffect(() => {
+    if (language !== undefined)
+      i18n
+        .changeLanguage(language)
+        .catch((e) => logger.error(`Could not switch to ${language}`, e));
+  }, [language]);
+
   // The container is what Element Call decorates and portals into, so nothing
   // inside can render until we have it.
   const [container, setContainer] = useState<HTMLDivElement | null>(null);
diff --git a/component/localization.test.ts b/component/localization.test.ts
new file mode 100644
index 00000000..fae1c706
--- /dev/null
+++ b/component/localization.test.ts
@@ -0,0 +1,46 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, test } from "vitest";
+
+import { supportedLanguages, translationsBackend } from "./localization";
+
+const read = async (
+  language: string,
+  namespace = "app",
+): Promise<Record<string, unknown>> =>
+  await new Promise((resolve, reject) =>
+    translationsBackend.read(language, namespace, (error, data) => {
+      if (error) reject(error);
+      else resolve(data as Record<string, unknown>);
+    }),
+  );
+
+describe("component translations", () => {
+  test("offer every language in locales/, tagged as its directory is", () => {
+    expect(supportedLanguages).toContain("en");
+    expect(supportedLanguages).toContain("de");
+    expect(supportedLanguages).toContain("zh-Hans");
+    expect(new Set(supportedLanguages).size).toBe(supportedLanguages.length);
+  });
+
+  test("load a language's translations on demand", async () => {
+    const de = await read("de");
+    expect(de).toHaveProperty("action");
+    expect(de).not.toEqual(await read("en"));
+  });
+
+  test("refuse a language there are no translations for", async () => {
+    await expect(read("xx")).rejects.toThrow("No app translations for xx");
+  });
+
+  test("refuse a namespace there are no translations for", async () => {
+    await expect(read("en", "other")).rejects.toThrow(
+      "No other translations for en",
+    );
+  });
+});
diff --git a/component/localization.ts b/component/localization.ts
new file mode 100644
index 00000000..b6417281
--- /dev/null
+++ b/component/localization.ts
@@ -0,0 +1,55 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+/**
+ * Translations for Element Call as a component.
+ *
+ * The standalone app fetches its locale files at runtime from URLs its own
+ * build emits, which a host serving the library from somewhere else could not
+ * resolve. The component instead has the bundler split every locale into a
+ * chunk of its own, loaded the first time its language is asked for; English,
+ * the fallback, is bundled in so that the first paint never waits for it.
+ */
+
+import { type BackendModule, type ResourceKey } from "i18next";
+
+import { languageOfLocalePath } from "../src/utils/i18n";
+
+/** Every locale, as a lazily imported module. */
+const translations = import.meta.glob<{ default: ResourceKey }>(
+  "../locales/*/app.json",
+);
+
+/**
+ * The languages Element Call can be shown in, as BCP 47 tags — `en`, `de`,
+ * `zh-Hans` and so on. A language that is not one of these falls back to its
+ * base language where there is one (`de-AT` to `de`), and to English otherwise.
+ */
+export const supportedLanguages: readonly string[] = [
+  ...new Set(Object.keys(translations).map(languageOfLocalePath)),
+];
+
+/** Loads translations on demand. */
+export const translationsBackend: BackendModule = {
+  type: "backend",
+  init(): void {},
+  read(language: string, namespace: string, callback): void {
+    const load = translations[`../locales/${language}/${namespace}.json`];
+    if (load === undefined) {
+      callback(new Error(`No ${namespace} translations for ${language}`), null);
+      return;
+    }
+    load().then(
+      (module) => callback(null, module.default),
+      (error: unknown) =>
+        callback(
+          error instanceof Error ? error : new Error(String(error)),
+          null,
+        ),
+    );
+  },
+};
diff --git a/src/initializer.tsx b/src/initializer.tsx
index 253dcbc4..76a7fcc3 100644
--- a/src/initializer.tsx
+++ b/src/initializer.tsx
@@ -37,7 +37,7 @@ import {
   type AnalyticsConfig,
   PosthogAnalytics,
 } from "./analytics/PosthogAnalytics.ts";
-import { i18n } from "./utils/i18n.ts";
+import { i18n, languageOfLocalePath } from "./utils/i18n.ts";
 
 // This generates a map of locale names to their URL (based on import.meta.url), which looks like this:
 // {
@@ -56,17 +56,7 @@ const getLocaleUrl = (
 ): string | undefined => locales[`../locales/${language}/${namespace}.json`];
 
 const supportedLngs = [
-  ...new Set(
-    Object.keys(locales).map((url) => {
-      // The URLs are of the form ../locales/en/app.json
-      // This extracts the language code from the URL
-      const lang = url.match(/\/([^/]+)\/[^/]+\.json$/)?.[1];
-      if (!lang) {
-        throw new Error(`Could not parse locale URL ${url}`);
-      }
-      return lang;
-    }),
-  ),
+  ...new Set(Object.keys(locales).map(languageOfLocalePath)),
 ];
 
 // A backend that fetches the locale files from the URLs generated by the glob above
diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts
index 65dca697..0796ab38 100644
--- a/src/utils/i18n.ts
+++ b/src/utils/i18n.ts
@@ -10,6 +10,17 @@ import i18next, { type i18n as I18nInstance } from "i18next";
 // Custom marker function to allow i18next extraction
 export const i18nKey = (key: string): string => key;
 
+/**
+ * The language a locale file under `locales/` is for, from its path as a
+ * bundler glob reports it: `../locales/zh-Hans/app.json` is for `zh-Hans`.
+ */
+export function languageOfLocalePath(path: string): string {
+  const language = path.match(/\/([^/]+)\/[^/]+\.json$/)?.[1];
+  if (language === undefined)
+    throw new Error(`Could not parse locale path ${path}`);
+  return language;
+}
+
 /**
  * Element Call's own i18next instance.
  *

From b722cc277e77bafa79bc00ea130e58c2cc58c083 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Tue, 8 Sep 2026 17:02:24 +0200
Subject: [PATCH 076/154] Make the theme a prop, next to the language
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The theme is state — what Element Call should look like right now — and
so belongs beside `language` as a prop, not on the imperative handle
(where it was a request, `setTheme`, because the internal host bridge
speaks the widget API and a widget's host sends theme changes as
requests) and not in the configuration (where `config.theme` only ever
set the starting theme).

The `theme` prop feeds the same channel the rest of Element Call listens
to for a host's theme, replayed so that whatever subscribes after the
host has set it still hears the current one. Changing it re-themes the
container and nothing else; unlike the language, it is per component.
`setTheme` and `config.theme` are gone, and the harness gets a theme
picker in place of its per-pane buttons.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 README.md                 |  3 ++-
 component/dev/Harness.tsx | 31 +++++++++++-----------
 component/host.test.ts    | 56 ++++++++++++++++++++++++++++-----------
 component/host.ts         | 22 ++++++++++-----
 component/index.tsx       | 25 ++++++++++-------
 5 files changed, 89 insertions(+), 48 deletions(-)

diff --git a/README.md b/README.md
index b1c46275..b2760290 100644
--- a/README.md
+++ b/README.md
@@ -248,7 +248,8 @@ The component speaks every language the app does. English is bundled in; the
 other locales are split into chunks the host's bundler loads the first time
 they are needed. It starts in the browser's language, and follows the host's
 own language setting through the `language` prop (`supportedLanguages` lists
-the tags it accepts).
+the tags it accepts). The `theme` prop works the same way for `light` and
+`dark`; both can change while a call is running without disturbing it.
 
 The package is not published yet. A host installs it as a git dependency on the
 `component` directory of this repository,
diff --git a/component/dev/Harness.tsx b/component/dev/Harness.tsx
index 9e40e2c7..ded9155a 100644
--- a/component/dev/Harness.tsx
+++ b/component/dev/Harness.tsx
@@ -94,9 +94,10 @@ interface LogEntry {
 const Pane: FC<{
   session: Session;
   roomId: string;
+  theme: string | undefined;
   language: string | undefined;
   log: (pane: string, message: string) => void;
-}> = ({ session, roomId, language, log }): ReactNode => {
+}> = ({ session, roomId, theme, language, log }): ReactNode => {
   const [mounted, setMounted] = useState(true);
 
   const bridge = useMemo(
@@ -139,20 +140,6 @@ const Pane: FC<{
         <button onClick={(): void => setMounted((m) => !m)}>
           {mounted ? "Unmount" : "Mount"}
         </button>
-        <button
-          onClick={(): void =>
-            ask("setTheme(light)", async (h) => await h.setTheme("light"))
-          }
-        >
-          Light
-        </button>
-        <button
-          onClick={(): void =>
-            ask("setTheme(dark)", async (h) => await h.setTheme("dark"))
-          }
-        >
-          Dark
-        </button>
         <button
           onClick={(): void =>
             ask(
@@ -178,6 +165,7 @@ const Pane: FC<{
             client={session.client}
             roomId={roomId}
             hostBridge={bridge}
+            theme={theme}
             language={language}
           />
         )}
@@ -235,6 +223,7 @@ export const Harness: FC = (): ReactNode => {
   // The host's language setting, which Element Call follows. Undefined means
   // the host has none and Element Call uses the browser's.
   const [language, setLanguage] = useState<string | undefined>(undefined);
+  const [theme, setTheme] = useState<string | undefined>(undefined);
 
   const log = useCallback((pane: string, message: string): void => {
     setEntries((entries) =>
@@ -333,6 +322,17 @@ export const Harness: FC = (): ReactNode => {
         <button onClick={(): void => setDialogOpen(true)}>
           Open a host dialog
         </button>
+        <label>
+          Theme{" "}
+          <select
+            value={theme ?? ""}
+            onChange={(e): void => setTheme(e.target.value || undefined)}
+          >
+            <option value="">Element Call&apos;s choice</option>
+            <option value="light">light</option>
+            <option value="dark">dark</option>
+          </select>
+        </label>
         <label>
           Language{" "}
           <select
@@ -356,6 +356,7 @@ export const Harness: FC = (): ReactNode => {
               key={session.label}
               session={session}
               roomId={state.roomId}
+              theme={theme}
               language={language}
               log={log}
             />
diff --git a/component/host.test.ts b/component/host.test.ts
index dd788367..c73a034c 100644
--- a/component/host.test.ts
+++ b/component/host.test.ts
@@ -19,7 +19,7 @@ describe("useComponentHostBridge", () => {
   test("keeps one identity while the host supplies new objects", () => {
     const { result, rerender } = renderHook(
       ({ supplied }: { supplied: ElementCallHostBridge }) =>
-        useComponentHostBridge(supplied, undefined),
+        useComponentHostBridge(supplied, undefined, undefined),
       { initialProps: { supplied: {} } },
     );
     const first = result.current;
@@ -32,7 +32,7 @@ describe("useComponentHostBridge", () => {
     const after = vi.fn().mockResolvedValue(undefined);
     const { result, rerender } = renderHook(
       ({ supplied }: { supplied: ElementCallHostBridge }) =>
-        useComponentHostBridge(supplied, undefined),
+        useComponentHostBridge(supplied, undefined, undefined),
       { initialProps: { supplied: { notifyJoined: before } } },
     );
     rerender({ supplied: { notifyJoined: after } });
@@ -44,7 +44,7 @@ describe("useComponentHostBridge", () => {
 
   test("is quiet about what the host did not implement", async () => {
     const { result } = renderHook(() =>
-      useComponentHostBridge(undefined, undefined),
+      useComponentHostBridge(undefined, undefined, undefined),
     );
     await expect(result.current.contentLoaded()).resolves.toBeUndefined();
     await expect(
@@ -59,7 +59,7 @@ describe("useComponentHostBridge", () => {
   test("only has a close when the host has one, since that is a signal", () => {
     const { result, rerender } = renderHook(
       ({ supplied }: { supplied: ElementCallHostBridge }) =>
-        useComponentHostBridge(supplied, undefined),
+        useComponentHostBridge(supplied, undefined, undefined),
       { initialProps: { supplied: {} } },
     );
     expect(result.current.close).toBeUndefined();
@@ -71,7 +71,7 @@ describe("useComponentHostBridge", () => {
 
   test("never offers profile changes, since the account is the host's", () => {
     const { result } = renderHook(() =>
-      useComponentHostBridge(undefined, undefined),
+      useComponentHostBridge(undefined, undefined, undefined),
     );
     expect(result.current.supportsProfileChanges).toBe(false);
   });
@@ -80,7 +80,7 @@ describe("useComponentHostBridge", () => {
     test("delivers a request to what is listening and resolves on its reply", async () => {
       const ref = createRef<ElementCallHandle>();
       const { result } = renderHook(() =>
-        useComponentHostBridge(undefined, ref),
+        useComponentHostBridge(undefined, ref, undefined),
       );
 
       const received = vi.fn();
@@ -97,26 +97,50 @@ describe("useComponentHostBridge", () => {
 
     test("refuses a request nothing in Element Call is listening for", async () => {
       const ref = createRef<ElementCallHandle>();
-      renderHook(() => useComponentHostBridge(undefined, ref));
+      renderHook(() => useComponentHostBridge(undefined, ref, undefined));
 
       await expect(ref.current!.hangUp()).rejects.toThrow(
         "Nothing in Element Call can hang up right now",
       );
     });
+  });
 
-    test("passes the theme name through", async () => {
-      const ref = createRef<ElementCallHandle>();
+  describe("the theme", () => {
+    test("reaches a subscriber that arrives after it was set", () => {
       const { result } = renderHook(() =>
-        useComponentHostBridge(undefined, ref),
+        useComponentHostBridge(undefined, undefined, "light"),
       );
       const names: (string | undefined)[] = [];
-      result.current.themeChange$.subscribe(({ data, reply }) => {
-        names.push(data.name);
-        reply();
-      });
-
-      await ref.current!.setTheme("light");
+      result.current.themeChange$.subscribe(({ data }) =>
+        names.push(data.name),
+      );
       expect(names).toEqual(["light"]);
     });
+
+    test("follows the prop", () => {
+      const { result, rerender } = renderHook(
+        ({ theme }: { theme: string | undefined }) =>
+          useComponentHostBridge(undefined, undefined, theme),
+        { initialProps: { theme: "light" } },
+      );
+      const names: (string | undefined)[] = [];
+      result.current.themeChange$.subscribe(({ data }) =>
+        names.push(data.name),
+      );
+
+      rerender({ theme: "dark" });
+      expect(names).toEqual(["light", "dark"]);
+    });
+
+    test("says nothing when the host leaves the theme to Element Call", () => {
+      const { result } = renderHook(() =>
+        useComponentHostBridge(undefined, undefined, undefined),
+      );
+      const names: (string | undefined)[] = [];
+      result.current.themeChange$.subscribe(({ data }) =>
+        names.push(data.name),
+      );
+      expect(names).toEqual([]);
+    });
   });
 });
diff --git a/component/host.ts b/component/host.ts
index 67bbaf0e..701d9210 100644
--- a/component/host.ts
+++ b/component/host.ts
@@ -17,8 +17,8 @@ Please see LICENSE in the repository root for full details.
  * call `play()` on a video element. This module adapts the one to the other.
  */
 
-import { type Ref, useImperativeHandle } from "react";
-import { Subject } from "rxjs";
+import { type Ref, useEffect, useImperativeHandle } from "react";
+import { ReplaySubject, Subject } from "rxjs";
 
 import {
   type DeviceMuteRequest,
@@ -79,8 +79,6 @@ export interface ElementCallHostBridge {
  * when there is no call, say.
  */
 export interface ElementCallHandle {
-  /** Switches Element Call to the named theme, `light` or `dark`. */
-  setTheme(name: string): Promise<void>;
   /**
    * Joins the call, when Element Call was configured to `preload` and is
    * waiting to be told to. Says which devices to join with.
@@ -119,16 +117,28 @@ async function request<Data, Reply>(
 export function useComponentHostBridge(
   supplied: ElementCallHostBridge | undefined,
   ref: Ref<ElementCallHandle> | undefined,
+  /** The theme the host wants, or undefined to leave it to Element Call. */
+  theme: string | undefined,
 ): HostBridge {
   const latest = useLatest(supplied ?? {});
 
   const requests = useInitial(() => ({
-    themeChange$: new Subject<HostRequest<{ name?: string }>>(),
+    // The theme is state, not an event: a `theme` prop rather than a request
+    // on the handle. It travels this channel because that is how the rest of
+    // Element Call hears about a host's theme, and replays so that whatever
+    // subscribes after the host has set it — everything, on first render —
+    // still hears the current one.
+    themeChange$: new ReplaySubject<HostRequest<{ name?: string }>>(1),
     join$: new Subject<HostRequest<JoinCallData>>(),
     hangUp$: new Subject<HostRequest<Record<string, never>>>(),
     deviceMute$: new Subject<HostRequest<DeviceMuteRequest, DeviceMuteState>>(),
   }));
 
+  useEffect(() => {
+    if (theme !== undefined)
+      requests.themeChange$.next({ data: { name: theme }, reply: () => {} });
+  }, [requests, theme]);
+
   const bridge = useInitial(
     (): HostBridge => ({
       setAlwaysOnScreen: async (alwaysOnScreen) => {
@@ -175,8 +185,6 @@ export function useComponentHostBridge(
   useImperativeHandle(
     ref,
     (): ElementCallHandle => ({
-      setTheme: async (name) =>
-        await request(requests.themeChange$, "change theme", { name }),
       join: async (devices) =>
         await request(requests.join$, "join a call", devices),
       hangUp: async () => await request(requests.hangUp$, "hang up", {}),
diff --git a/component/index.tsx b/component/index.tsx
index 90532966..39bb1d29 100644
--- a/component/index.tsx
+++ b/component/index.tsx
@@ -111,14 +111,15 @@ export {
  * takes the default that {@link ElementCallProps.intent} implies.
  *
  * This is the behaviour a widget can be configured with through its URL, plus
- * the two facts about the call a host has a say in: the theme to start in and
- * the background. The rest of what a widget's URL carries — who the user is,
- * how to reach the homeserver, where to report analytics, the shared secret of
- * a room that is encrypted with one — a component host supplies by other
- * routes, or not at all.
+ * the one fact about the call a host has a say in here, the background. The
+ * rest of what a widget's URL carries — who the user is, how to reach the
+ * homeserver, where to report analytics, the shared secret of a room that is
+ * encrypted with one — a component host supplies by other routes, or not at
+ * all; and what can change while the call is running, the theme and the
+ * language, is a prop of its own.
  */
 export type ElementCallConfiguration = Partial<UrlConfiguration> &
-  Partial<Pick<UrlProperties, "theme" | "background">>;
+  Partial<Pick<UrlProperties, "background">>;
 
 export interface ElementCallProps {
   /**
@@ -154,10 +155,15 @@ export interface ElementCallProps {
    */
   hostBridge?: ElementCallHostBridge;
   /**
-   * What the host tells Element Call: to change theme, to hang up, to mute.
-   * Available once the component has rendered.
+   * What the host tells Element Call: to hang up, to mute, to join. Available
+   * once the component has rendered.
    */
   ref?: Ref<ElementCallHandle>;
+  /**
+   * The theme to show Element Call in, `light` or `dark`. Left out, Element
+   * Call picks. Changes take effect at once, and cost nothing else.
+   */
+  theme?: string;
   /**
    * The language to show Element Call in, as a BCP 47 tag: one of
    * {@link supportedLanguages}, or something that falls back to one (`de-AT`
@@ -229,9 +235,10 @@ export const ElementCall: FC<ElementCallProps> = ({
   config,
   hostBridge: suppliedHostBridge,
   ref,
+  theme,
   language,
 }): ReactNode => {
-  const hostBridge = useComponentHostBridge(suppliedHostBridge, ref);
+  const hostBridge = useComponentHostBridge(suppliedHostBridge, ref, theme);
 
   useEffect(() => {
     if (language !== undefined)

From 486ecbfda080f00d009b9eeb09e5b3318fc46502 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Tue, 8 Sep 2026 17:14:55 +0200
Subject: [PATCH 077/154] Stop offering media downloads on the component's host
 bridge

`downloadMedia` exists because a widget's client cannot fetch media: it
has no access token, and its only route to a file is MSC4039 over the
widget API. A component host hands over a client that does hold
credentials, so Element Call fetches media with it and the callback was
never needed there. It comes off `ElementCallHostBridge`, leaving a host
with only what it must understand, and stays on the internal HostBridge
for the widget.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 component/host.ts | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/component/host.ts b/component/host.ts
index 701d9210..7e4a0afb 100644
--- a/component/host.ts
+++ b/component/host.ts
@@ -64,12 +64,6 @@ export interface ElementCallHostBridge {
    * Defaults to true.
    */
   readonly supportsReactions?: boolean;
-  /**
-   * Fetches media on Element Call's behalf, for hosts that do not want it
-   * touching the homeserver's media endpoints itself. Absent, Element Call
-   * fetches media with the client it was given.
-   */
-  downloadMedia?(mxcUri: string): Promise<Blob>;
 }
 
 /**
@@ -164,13 +158,9 @@ export function useComponentHostBridge(
           ? undefined
           : async (): Promise<void> => await close();
       },
-      get downloadMedia() {
-        const downloadMedia = latest.current.downloadMedia;
-        return downloadMedia === undefined
-          ? undefined
-          : async (mxcUri: string): Promise<Blob> =>
-              await downloadMedia(mxcUri);
-      },
+      // Not offered to a component host: the client it hands over holds the
+      // credentials to fetch media itself. A widget's client does not, which
+      // is what the internal bridge's `downloadMedia` is for.
       get supportsReactions(): boolean {
         return latest.current.supportsReactions ?? true;
       },

From 273ee3b632a7563780e631585fea0db8ceb8fb73 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Tue, 8 Sep 2026 18:12:40 +0200
Subject: [PATCH 078/154] add `allowJoinUnmutedViaIntent` to the bridge This
 allows us to control to never start unmuted in spa but be able to start
 unmuted in widget and component mode.

---
 component/host.test.ts             | 15 +++++++++++++++
 component/host.ts                  | 11 +++++++++++
 src/HostBridge.test.ts             |  9 +++++++++
 src/HostBridge.ts                  | 14 ++++++++++++++
 src/state/initialMuteState.test.ts | 24 ++++++++++++------------
 src/state/initialMuteState.ts      | 27 +++++++++++++++++----------
 src/state/useMuteStates.ts         |  2 +-
 7 files changed, 79 insertions(+), 23 deletions(-)

diff --git a/component/host.test.ts b/component/host.test.ts
index c73a034c..696470cd 100644
--- a/component/host.test.ts
+++ b/component/host.test.ts
@@ -54,6 +54,21 @@ describe("useComponentHostBridge", () => {
       }),
     ).resolves.toBeUndefined();
     expect(result.current.supportsReactions).toBe(true);
+    // Starting the user unmuted unasked is something a host has to opt into
+    expect(result.current.allowJoinUnmutedViaIntent).toBe(false);
+  });
+
+  test("lets the host allow joining unmuted on the intent", () => {
+    const { result, rerender } = renderHook(
+      ({ supplied }: { supplied: ElementCallHostBridge }) =>
+        useComponentHostBridge(supplied, undefined, undefined),
+      { initialProps: { supplied: {} } },
+    );
+    expect(result.current.allowJoinUnmutedViaIntent).toBe(false);
+
+    // Read through to whatever the host most recently said
+    rerender({ supplied: { allowJoinUnmutedViaIntent: true } });
+    expect(result.current.allowJoinUnmutedViaIntent).toBe(true);
   });
 
   test("only has a close when the host has one, since that is a signal", () => {
diff --git a/component/host.ts b/component/host.ts
index 7e4a0afb..2a83a597 100644
--- a/component/host.ts
+++ b/component/host.ts
@@ -64,6 +64,14 @@ export interface ElementCallHostBridge {
    * Defaults to true.
    */
   readonly supportsReactions?: boolean;
+  /**
+   * Whether the user may start unmuted when the intent skips the lobby, so
+   * that they never see their devices before joining. Defaults to false: the
+   * user starts muted and unmutes themselves. A host that chose the intent on
+   * the user's behalf, and is sure they expect to be heard and seen at once,
+   * says so here — as a Matrix client hosting Element Call as a widget does.
+   */
+  readonly allowJoinUnmutedViaIntent?: boolean;
 }
 
 /**
@@ -164,6 +172,9 @@ export function useComponentHostBridge(
       get supportsReactions(): boolean {
         return latest.current.supportsReactions ?? true;
       },
+      get allowJoinUnmutedViaIntent(): boolean {
+        return latest.current.allowJoinUnmutedViaIntent ?? false;
+      },
       // Whatever the host says or does not say, the account is its own: it
       // signed the user in and handed us the client. So Element Call never
       // offers to edit the profile from inside a component.
diff --git a/src/HostBridge.test.ts b/src/HostBridge.test.ts
index 41410eca..fb3779f4 100644
--- a/src/HostBridge.test.ts
+++ b/src/HostBridge.test.ts
@@ -252,6 +252,11 @@ describe("createWidgetHostBridge", () => {
     expect(bridge.supportsProfileChanges).toBe(false);
   });
 
+  test("allows joining unmuted on the intent, since the host asked for the call", () => {
+    const bridge = createWidgetHostBridge(mockWidget({}));
+    expect(bridge.allowJoinUnmutedViaIntent).toBe(true);
+  });
+
   describe("supportsReactions", () => {
     const capabilities = [
       "org.matrix.msc2762.send.event:m.reaction",
@@ -294,4 +299,8 @@ describe("nullHostBridge", () => {
   test("supports reactions, since nothing is mediating its homeserver access", () => {
     expect(nullHostBridge.supportsReactions).toBe(true);
   });
+
+  test("does not allow joining unmuted on the intent, since nobody vouched for it", () => {
+    expect(nullHostBridge.allowJoinUnmutedViaIntent).toBe(false);
+  });
 });
diff --git a/src/HostBridge.ts b/src/HostBridge.ts
index 58e541f1..2ba50257 100644
--- a/src/HostBridge.ts
+++ b/src/HostBridge.ts
@@ -108,6 +108,14 @@ export interface HostBridge {
   readonly supportsProfileChanges: boolean;
   /** Whether the host permits Element Call to send and receive reactions. */
   readonly supportsReactions: boolean;
+  /**
+   * Whether the user may be put into a call unmuted on the strength of the
+   * intent alone, when the lobby is skipped and so they get no chance to check
+   * their devices first. A host that asked for the call on the user's behalf
+   * has that much of their trust; standalone Element Call does not, and starts
+   * them muted instead.
+   */
+  readonly allowJoinUnmutedViaIntent: boolean;
   /**
    * Fetches media on Element Call's behalf, for hosts that do not give it
    * direct access to the homeserver. Absent when Element Call should fetch
@@ -136,6 +144,9 @@ export const nullHostBridge: HostBridge = {
   // Standalone Element Call reaches the homeserver itself, so nothing is
   // withholding these from it.
   supportsReactions: true,
+  // Standalone, nobody vouched for the intent: it came from a URL, which is
+  // not enough to switch the user's camera and microphone on unasked.
+  allowJoinUnmutedViaIntent: false,
 };
 
 /** Bridges to a host that Element Call is a widget of. */
@@ -190,6 +201,9 @@ export function createWidgetHostBridge(widget: WidgetHelpers): HostBridge {
     // The client we are a widget of signed the user in, so the profile is its
     // to manage
     supportsProfileChanges: false,
+    // The client we are a widget of asked for this call on the user's behalf,
+    // so its intent may be trusted to say whether they start unmuted
+    allowJoinUnmutedViaIntent: true,
     // Element Call needs the host's permission to send reactions on its behalf.
     // Read on access rather than up front: the widget API negotiates its
     // capabilities asynchronously, and the bridge is built before that settles.
diff --git a/src/state/initialMuteState.test.ts b/src/state/initialMuteState.test.ts
index abbb52cd..020a80b8 100644
--- a/src/state/initialMuteState.test.ts
+++ b/src/state/initialMuteState.test.ts
@@ -12,21 +12,21 @@ import { calculateInitialMuteState } from "./initialMuteState";
 
 test.each<{
   callIntent: RTCCallIntent;
-  isWidgetMode: boolean;
+  allowJoinUnmutedViaIntent: boolean;
 }>([
-  { callIntent: "audio", isWidgetMode: false },
-  { callIntent: "audio", isWidgetMode: true },
-  { callIntent: "video", isWidgetMode: false },
-  { callIntent: "video", isWidgetMode: true },
-  { callIntent: "unknown", isWidgetMode: false },
-  { callIntent: "unknown", isWidgetMode: true },
+  { callIntent: "audio", allowJoinUnmutedViaIntent: false },
+  { callIntent: "audio", allowJoinUnmutedViaIntent: true },
+  { callIntent: "video", allowJoinUnmutedViaIntent: false },
+  { callIntent: "video", allowJoinUnmutedViaIntent: true },
+  { callIntent: "unknown", allowJoinUnmutedViaIntent: false },
+  { callIntent: "unknown", allowJoinUnmutedViaIntent: true },
 ])(
-  "Should allow to unmute on start if not skipping lobby (callIntent: $callIntent, packageType: $packageType)",
-  ({ callIntent, isWidgetMode }) => {
+  "Should allow to unmute on start if not skipping lobby (callIntent: $callIntent, allowJoinUnmutedViaIntent: $allowJoinUnmutedViaIntent)",
+  ({ callIntent, allowJoinUnmutedViaIntent }) => {
     const { audioEnabled, videoEnabled } = calculateInitialMuteState(
       false,
       callIntent,
-      isWidgetMode,
+      allowJoinUnmutedViaIntent,
     );
     expect(audioEnabled).toBe(true);
     expect(videoEnabled).toBe(callIntent !== "audio");
@@ -40,7 +40,7 @@ test.each<{
   { callIntent: "video" },
   { callIntent: "unknown" },
 ])(
-  "Should always mute on start if skipping lobby on non widget mode (callIntent: $callIntent)",
+  "Should always mute on start if skipping lobby and the host does not vouch for the intent (callIntent: $callIntent)",
   ({ callIntent }) => {
     const { audioEnabled, videoEnabled } = calculateInitialMuteState(
       true,
@@ -59,7 +59,7 @@ test.each<{
   { callIntent: "video" },
   { callIntent: "unknown" },
 ])(
-  "Can start unmuted if skipping lobby on widget mode (callIntent: $callIntent)",
+  "Can start unmuted if skipping lobby and the host vouches for the intent (callIntent: $callIntent)",
   ({ callIntent }) => {
     const { audioEnabled, videoEnabled } = calculateInitialMuteState(
       true,
diff --git a/src/state/initialMuteState.ts b/src/state/initialMuteState.ts
index 4d27cdda..51342e89 100644
--- a/src/state/initialMuteState.ts
+++ b/src/state/initialMuteState.ts
@@ -11,30 +11,37 @@ import { type RTCCallIntent } from "matrix-js-sdk/lib/matrixrtc";
 /**
  * Calculates the initial mute state for media devices based on configuration.
  *
- * It is not always possible to start the widget with audio/video unmuted due to privacy concerns.
- * This function encapsulates the logic to determine the appropriate initial state.
+ * It is not always possible to start the call with audio/video unmuted due to
+ * privacy concerns. This function encapsulates the logic to determine the
+ * appropriate initial state.
+ *
+ * @param allowJoinUnmutedViaIntent Whether the host vouches for the intent
+ *   enough to start the user unmuted without a lobby (see
+ *   `HostBridge.allowJoinUnmutedViaIntent`).
  */
 export function calculateInitialMuteState(
   skipLobby: boolean,
   callIntent: RTCCallIntent | undefined,
-  isWidgetMode: boolean,
+  allowJoinUnmutedViaIntent: boolean,
 ): { audioEnabled: boolean; videoEnabled: boolean } {
   logger.debug(
-    `calculateInitialMuteState: skipLobby=${skipLobby}, callIntent=${callIntent} isWidgetMode=${isWidgetMode}`,
+    `calculateInitialMuteState: skipLobby=${skipLobby}, callIntent=${callIntent} allowJoinUnmutedViaIntent=${allowJoinUnmutedViaIntent}`,
   );
 
-  if (skipLobby && !isWidgetMode) {
-    // If not in widget mode and lobby is skipped, default to muted to protect user privacy.
-    // In the SPA context we don't want to unmute users without giving them a chance to adjust their settings first.
+  if (skipLobby && !allowJoinUnmutedViaIntent) {
+    // The lobby is skipped, so the user gets no chance to adjust their devices
+    // before joining, and nobody has vouched for the intent: default to muted
+    // to protect their privacy.
     return {
       audioEnabled: false,
       videoEnabled: false,
     };
   }
 
-  // Embedded contexts are trusted environments, so they allow unmuted by default.
-  // Same for when showing a lobby, as users can adjust their settings there.
-  // Additionally, if the call intent is "audio", we disable video by default.
+  // A host that vouches for the intent is a trusted environment, so it allows
+  // unmuted by default. Same for when showing a lobby, as users can adjust
+  // their settings there. Additionally, if the call intent is "audio", we
+  // disable video by default.
   return {
     audioEnabled: true,
     videoEnabled: callIntent != "audio",
diff --git a/src/state/useMuteStates.ts b/src/state/useMuteStates.ts
index ab35169f..908a6b18 100644
--- a/src/state/useMuteStates.ts
+++ b/src/state/useMuteStates.ts
@@ -39,7 +39,7 @@ export function useMuteStates(): MuteStates | null {
         calculateInitialMuteState(
           urlParams.skipLobby,
           urlParams.callIntent,
-          urlParams.isWidget,
+          hostBridge.allowJoinUnmutedViaIntent,
         ),
         hostBridge,
       ),

From 839e36abd41c3d8ab2cf6d784c7d1f55307a5f2a Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Tue, 8 Sep 2026 21:21:36 +0200
Subject: [PATCH 079/154] Make delegation support check fail immediately in
 case of CORS errors

---
 src/state/CallViewModel/localMember/LocalMember.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/state/CallViewModel/localMember/LocalMember.ts b/src/state/CallViewModel/localMember/LocalMember.ts
index 838b14ee..fc5e65cf 100644
--- a/src/state/CallViewModel/localMember/LocalMember.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.ts
@@ -75,7 +75,6 @@ import {
 import { type HomeserverConnected } from "./HomeserverConnected.ts";
 import { type LocalTransport } from "./LocalTransport.ts";
 import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers.ts";
-import { doNetworkOperationWithRetry } from "../../../utils/matrix.ts";
 import { or$ } from "../../../utils/observable.ts";
 
 export enum TransportState {
@@ -253,10 +252,12 @@ export const createLocalMembership$ = ({
   ): Promise<boolean> {
     logger.info(`Checking whether ${serviceName} supports delegation…`);
     try {
-      // Bluntly hit the endpoint without auth to check for a 404
-      const res = await doNetworkOperationWithRetry(async () =>
-        fetch(endpointUrl, { method: "POST" }),
-      );
+      // Bluntly hit the endpoint without auth to check for a 404. Unfortunately
+      // we can't wrap this in a retry loop, as many servers don't just disable
+      // delegation support, but in fact are from a time before the endpoint
+      // existed at all, therefore we can hit CORS errors which would just gum
+      // up the retry loop. (May be revisited after Matrix 2.0.)
+      const res = await fetch(endpointUrl, { method: "POST" });
       if (res.status === 404) {
         logger.warn(`${serviceName} does not support delegation`);
         return false;

From 09782a4d8497e6c3a6047a9eb06d5c14ac5d28c3 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Tue, 8 Sep 2026 15:41:23 +0200
Subject: [PATCH 080/154] Give JWT token fetch procedures more appropriate
 names

---
 src/livekit/openIDSFU.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/livekit/openIDSFU.ts b/src/livekit/openIDSFU.ts
index 67dd5e9e..785d80c7 100644
--- a/src/livekit/openIDSFU.ts
+++ b/src/livekit/openIDSFU.ts
@@ -126,9 +126,9 @@ export async function getSFUConfigWithOpenID(
   if (tryBothJwtEndpoints || forceMatrix2Jwt) {
     try {
       logger?.info(
-        `Trying to get JWT with delegation for focus ${serviceUrl}...`,
+        `Trying to get JWT via default endpoint for focus ${serviceUrl}...`,
       );
-      const sfuConfig = await getLiveKitJWTWithDelayDelegation(
+      const sfuConfig = await getLiveKitJWT(
         membership,
         serviceUrl,
         roomId,
@@ -154,7 +154,7 @@ export async function getSFUConfigWithOpenID(
     logger?.info(
       `Trying to get JWT with legacy endpoint for focus ${serviceUrl}...`,
     );
-    sfuConfig = await getLiveKitJWT(
+    sfuConfig = await getLiveKitJWTLegacy(
       membership.deviceId,
       serviceUrl,
       roomId,
@@ -188,7 +188,7 @@ function extractFullConfigFromToken(sfuConfig: {
   };
 }
 
-async function getLiveKitJWT(
+async function getLiveKitJWTLegacy(
   deviceId: string,
   livekitServiceURL: string,
   matrixRoomId: string,
@@ -263,7 +263,7 @@ class NotSupportedError extends Error {
   }
 }
 
-export async function getLiveKitJWTWithDelayDelegation(
+export async function getLiveKitJWT(
   membership: CallMembershipIdentityParts,
   livekitServiceURL: string,
   matrixRoomId: string,

From d38daef56736779b06e1f5f51cf560b2e2306bee Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Tue, 8 Sep 2026 15:42:50 +0200
Subject: [PATCH 081/154] Reflect session config always being defined

---
 src/state/CallViewModel/localMember/LocalMember.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/state/CallViewModel/localMember/LocalMember.ts b/src/state/CallViewModel/localMember/LocalMember.ts
index fc5e65cf..36c69e6e 100644
--- a/src/state/CallViewModel/localMember/LocalMember.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.ts
@@ -1003,11 +1003,10 @@ export function enterRTCSession(
       delayedLeaveEventDelayMs: delayedLeaveTimings.delay_ms,
       delayedLeaveEventRestartLocalTimeoutMs:
         delayedLeaveTimings.restart_timeout_ms,
-      networkErrorRetryMs: sessionConfig?.network_error_retry_ms,
-      makeKeyDelay: sessionConfig?.wait_for_key_rotation_ms,
-      membershipEventExpiryMs: sessionConfig?.membership_event_expiry_ms,
-      keyRotationParticipantLimit:
-        sessionConfig?.key_rotation_participant_limit,
+      networkErrorRetryMs: sessionConfig.network_error_retry_ms,
+      makeKeyDelay: sessionConfig.wait_for_key_rotation_ms,
+      membershipEventExpiryMs: sessionConfig.membership_event_expiry_ms,
+      keyRotationParticipantLimit: sessionConfig.key_rotation_participant_limit,
       unstableSendStickyEvents: matrixRTCMode === MatrixRTCMode.Matrix_2_0,
       maximumNetworkErrorRetryCount: maximumNetworkErrorRetryCount,
     },

From 5cfe7ea4dfc290ac13d117435a1a656a37f9e487 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Tue, 8 Sep 2026 20:50:26 +0200
Subject: [PATCH 082/154] Base JWT service endpoint choice directly on the
 MatrixRTC mode

Since we removed the extra 'legacy' mode, meaning there's nothing simplified anymore by translating things over to a JWT service version.

(Also, simplify some things by making the mode static for the duration of a call.)
---
 src/livekit/openIDSFU.ts                      | 14 ++--
 src/room/InCallView.tsx                       |  4 +-
 src/state/CallViewModel/CallViewModel.ts      | 68 +++++++------------
 .../CallViewModel/CallViewModelTestUtils.ts   |  2 +-
 .../localMember/LocalMember.test.ts           |  1 +
 .../CallViewModel/localMember/LocalMember.ts  | 21 +++---
 .../localMember/LocalTransport.test.ts        | 11 +--
 .../localMember/LocalTransport.ts             | 18 ++---
 src/utils/observable.ts                       | 32 ---------
 src/utils/test-viewmodel.ts                   |  2 +-
 10 files changed, 58 insertions(+), 115 deletions(-)

diff --git a/src/livekit/openIDSFU.ts b/src/livekit/openIDSFU.ts
index 785d80c7..cf1f3c95 100644
--- a/src/livekit/openIDSFU.ts
+++ b/src/livekit/openIDSFU.ts
@@ -19,7 +19,7 @@ import {
 } from "../utils/errors";
 import { doNetworkOperationWithRetry } from "../utils/matrix";
 import { Config } from "../config/Config";
-import { JwtEndpointVersion } from "../state/CallViewModel/localMember/LocalTransport";
+import { MatrixRTCMode } from "../config/ConfigOptions";
 
 /**
  * Configuration and access tokens provided by the SFU on successful authentication.
@@ -80,11 +80,10 @@ export type OpenIDClientParts = Pick<
  * @param serviceUrl The URL of the livekit SFU service
  * @param roomId The room id used in the jwt request. This is NOT the livekit_alias. The jwt service will provide the alias. It maps matrix room ids <-> Livekit aliases.
  * @param opts Additional options to modify which endpoint with which data will be used to acquire the jwt token.
- * @param opts.forceJwtEndpoint This will use the old jwt endpoint which will create the rtc backend identity based on string concatenation
- * instead of a hash.
+ * @param opts.matrixRTCMode Determines which version of the JWT endpoint to use, which affects whether the
+ * RTC backend identity is based on string concatenation (legacy) or a hash (Matrix 2.0).
  * This function by default uses whatever is possible with the current jwt service installed next to the SFU.
  * For remote connections this does not matter, since we will not publish there we can rely on the newest option.
- * For our own connection we can only use the hashed version if we also send the new matrix2.0 sticky events.
  * @param opts.delayEndpointBaseUrl The URL of the matrix homeserver.
  * @param opts.delayId The delay id used for the jwt service to manage.
  * @param logger optional logger.
@@ -97,7 +96,7 @@ export async function getSFUConfigWithOpenID(
   serviceUrl: string,
   roomId: string,
   opts?: {
-    forceJwtEndpoint?: JwtEndpointVersion;
+    matrixRTCMode?: MatrixRTCMode;
     delayEndpointBaseUrl?: string;
     delayId?: string;
   },
@@ -116,10 +115,9 @@ export async function getSFUConfigWithOpenID(
   logger?.debug("Got openID token", openIdToken);
   let sfuConfig: { url: string; jwt: string } | undefined;
 
-  const tryBothJwtEndpoints = opts?.forceJwtEndpoint === undefined; // This is for SFUs where we do not publish.
+  const tryBothJwtEndpoints = opts?.matrixRTCMode === undefined; // This is for SFUs where we do not publish.
 
-  const forceMatrix2Jwt =
-    opts?.forceJwtEndpoint === JwtEndpointVersion.Matrix_2_0;
+  const forceMatrix2Jwt = opts?.matrixRTCMode === MatrixRTCMode.Matrix_2_0;
 
   // We want to start using the new endpoint (with optional delay delegation)
   // if we can use both or if we are forced to use the new one.
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 3ea88f81..85fe66a7 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -135,7 +135,9 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
         encryptionSystem: props.e2eeSystem,
         autoLeaveWhenOthersLeft,
         waitForCallPickup: waitForCallPickup && sendNotificationType === "ring",
-        matrixRTCMode$: matrixRTCModeSetting.value$,
+        // We merely sample the current mode here, so the user would need to
+        // manually rejoin to switch to a different one.
+        matrixRTCMode: matrixRTCModeSetting.value$.value,
       },
       reactionsReader.raisedHands$,
       reactionsReader.reactions$,
diff --git a/src/state/CallViewModel/CallViewModel.ts b/src/state/CallViewModel/CallViewModel.ts
index 62f05a47..0bd33f21 100644
--- a/src/state/CallViewModel/CallViewModel.ts
+++ b/src/state/CallViewModel/CallViewModel.ts
@@ -54,7 +54,6 @@ import { type IMembershipManager } from "matrix-js-sdk/lib/matrixrtc/IMembership
 import {
   createToggle$,
   filterBehavior,
-  generateItem,
   generateItems,
   pauseWhen,
 } from "../../utils/observable";
@@ -113,7 +112,6 @@ import {
 } from "./localMember/LocalMember.ts";
 import {
   createLocalTransport$,
-  JwtEndpointVersion,
   type LocalTransport,
 } from "./localMember/LocalTransport.ts";
 import {
@@ -191,7 +189,7 @@ export interface CallViewModelOptions {
   /** Optional value overriding the connection factory, for testing purposes. */
   connectionFactory?: ConnectionFactory;
   /** The version & compatibility mode of MatrixRTC that we should use. */
-  matrixRTCMode$?: Behavior<MatrixRTCMode>;
+  matrixRTCMode?: MatrixRTCMode;
   /** Optional behavior overriding for the screensharing, for testing */
   toggleScreensharing?: () => void;
 }
@@ -453,10 +451,8 @@ export function createCallViewModel$(
   const configMatrixRTCMode = Config.get().matrix_rtc_mode as
     | MatrixRTCMode
     | undefined;
-  const matrixRTCMode$ =
-    configMatrixRTCMode !== undefined
-      ? constant(configMatrixRTCMode)
-      : (options.matrixRTCMode$ ?? constant(MatrixRTCMode.Compatibility));
+  const matrixRTCMode =
+    configMatrixRTCMode ?? options.matrixRTCMode ?? MatrixRTCMode.Compatibility;
 
   // Each hbar seperates a block of input variables required for the CallViewModel to function.
   // The outputs of this block is written under the hbar.
@@ -490,38 +486,26 @@ export function createCallViewModel$(
     memberId: uuidv4(),
   };
 
-  const localTransport$ = scope.behavior(
-    matrixRTCMode$.pipe(
-      generateItem(
-        "CallViewModel localTransport$",
-        // Re-create LocalTransport whenever the mode changes
-        (mode) => ({ keys: [mode], data: undefined }),
-        (scope, _data$, mode) =>
-          options.localTransport ??
-          createLocalTransport$({
-            scope: scope,
-            memberships$: memberships$,
-            ownMembershipIdentity,
-            client,
-            delayId$: scope.behavior(
-              (
-                fromEvent(
-                  matrixRTCSession,
-                  MembershipManagerEvent.DelayIdChanged,
-                  // The type of reemitted event includes the original emitted as the second arg.
-                ) as Observable<[string | undefined, IMembershipManager]>
-              ).pipe(map(([delayId]) => delayId ?? null)),
-              matrixRTCSession.delayId ?? null,
-            ),
-            roomId: matrixRoom.roomId,
-            forceJwtEndpoint:
-              mode === MatrixRTCMode.Matrix_2_0
-                ? JwtEndpointVersion.Matrix_2_0
-                : JwtEndpointVersion.Legacy,
-          }),
+  const localTransport =
+    options.localTransport ??
+    createLocalTransport$({
+      scope: scope,
+      memberships$: memberships$,
+      ownMembershipIdentity,
+      client,
+      delayId$: scope.behavior(
+        (
+          fromEvent(
+            matrixRTCSession,
+            MembershipManagerEvent.DelayIdChanged,
+            // The type of reemitted event includes the original emitted as the second arg.
+          ) as Observable<[string | undefined, IMembershipManager]>
+        ).pipe(map(([delayId]) => delayId ?? null)),
+        matrixRTCSession.delayId ?? null,
       ),
-    ),
-  );
+      roomId: matrixRoom.roomId,
+      matrixRTCMode,
+    });
 
   const connectionFactory =
     options.connectionFactory ??
@@ -539,8 +523,7 @@ export function createCallViewModel$(
     scope: scope,
     connectionFactory: connectionFactory,
     localTransport$: scope.behavior(
-      localTransport$.pipe(
-        switchMap((t) => t.active$),
+      localTransport.active$.pipe(
         catchError((e: unknown) => {
           logger.info(
             "could not pass local transport to createConnectionManager$. localTransport$ threw an error",
@@ -583,9 +566,7 @@ export function createCallViewModel$(
         transport,
         {
           encryptMedia: livekitKeyProvider !== undefined,
-          // We merely sample the current mode here, so the user would need to
-          // manually rejoin to switch to a different one
-          matrixRTCMode: matrixRTCMode$.value,
+          matrixRTCMode,
           delayedLeaveTimings,
         },
       );
@@ -606,6 +587,7 @@ export function createCallViewModel$(
     localTransport$,
     roomId: matrixRoom.roomId,
     baseUrl: client.baseUrl,
+    matrixRTCMode,
     logger: logger.getChild(`[${Date.now()}]`),
   });
 
diff --git a/src/state/CallViewModel/CallViewModelTestUtils.ts b/src/state/CallViewModel/CallViewModelTestUtils.ts
index 2e1525c0..5a3fa337 100644
--- a/src/state/CallViewModel/CallViewModelTestUtils.ts
+++ b/src/state/CallViewModel/CallViewModelTestUtils.ts
@@ -238,7 +238,7 @@ export function withCallViewModel(mode: MatrixRTCMode) {
             );
           },
         },
-        matrixRTCMode$: constant(mode),
+        matrixRTCMode: mode,
         ...options,
       },
       raisedHands$,
diff --git a/src/state/CallViewModel/localMember/LocalMember.test.ts b/src/state/CallViewModel/localMember/LocalMember.test.ts
index 66cd8cda..6fe2155b 100644
--- a/src/state/CallViewModel/localMember/LocalMember.test.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.test.ts
@@ -230,6 +230,7 @@ describe("LocalMembership", () => {
     },
     roomId: "!test-room-id:example.org",
     baseUrl: "https://matrix.example.org",
+    matrixRTCMode: MATRIX_RTC_MODE,
   };
 
   beforeEach(() => {
diff --git a/src/state/CallViewModel/localMember/LocalMember.ts b/src/state/CallViewModel/localMember/LocalMember.ts
index 36c69e6e..9b9218c5 100644
--- a/src/state/CallViewModel/localMember/LocalMember.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.ts
@@ -143,7 +143,7 @@ interface Props {
   ) => void;
   homeserverConnected: HomeserverConnected;
   roomId: string;
-  localTransport$: Behavior<LocalTransport>;
+  localTransport: LocalTransport;
   matrixRTCSession: Pick<
     MatrixRTCSession,
     "updateCallIntent" | "leaveRoomSession"
@@ -163,7 +163,7 @@ interface Props {
  * @param props.createPublisherFactory Factory to create a publisher once we have a connection.
  * @param props.joinMatrixRTC Callback to join the matrix RTC session once we have a transport.
  * @param props.homeserverConnected The homeserver connected state.
- * @param props.localTransport$ The transport to advertise in our membership.
+ * @param props.localTransport The transport to advertise in our membership.
  * @param props.logger The logger to use.
  * @param props.muteStates The mute states for video and audio.
  * @param props.matrixRTCSession The matrix RTC session to join.
@@ -282,8 +282,7 @@ export const createLocalMembership$ = ({
 
   // The transport that we will advertise in our membership, paired with info as
   // to whether delayed event delegation is supported
-  const joinParams$ = localTransport$.pipe(
-    switchMap((lt) => lt.advertised$),
+  const joinParams$ = localTransport.advertised$.pipe(
     catchError(handleTransportError),
     distinctUntilChanged(areLivekitTransportsEqual),
     switchMap((transport) => {
@@ -304,16 +303,12 @@ export const createLocalMembership$ = ({
 
   // Unwrap the local transport and set the state of the LocalMembership to error in case the transport is an error.
   const activeTransport$ = scope.behavior(
-    localTransport$.pipe(
-      switchMap((lt) => {
-        return combineLatest([lt.active$, lt.advertised$]).pipe(
-          map(([active, advertised]) => {
-            // Our policy is to not publish to another transport if our prefered transport is miss-configured
-            if (advertised == null) return null;
+    combineLatest([localTransport.active$, localTransport.advertised$]).pipe(
+      map(([active, advertised]) => {
+        // Our policy is to not publish to another transport if our prefered transport is miss-configured
+        if (advertised == null) return null;
 
-            return active?.transport ?? null;
-          }),
-        );
+        return active?.transport ?? null;
       }),
       catchError(handleTransportError),
       distinctUntilChanged(areLivekitTransportsEqual),
diff --git a/src/state/CallViewModel/localMember/LocalTransport.test.ts b/src/state/CallViewModel/localMember/LocalTransport.test.ts
index 09f6ecec..7f9ecb98 100644
--- a/src/state/CallViewModel/localMember/LocalTransport.test.ts
+++ b/src/state/CallViewModel/localMember/LocalTransport.test.ts
@@ -41,6 +41,7 @@ import {
 import * as openIDSFU from "../../../livekit/openIDSFU";
 import { customLivekitUrl } from "../../../settings/settings";
 import { testJWTToken } from "../../../utils/test-fixtures";
+import { MatrixRTCMode } from "../../../config/ConfigOptions";
 
 describe("LocalTransport", () => {
   const openIdResponse: openIDSFU.SFUConfig = {
@@ -67,7 +68,7 @@ describe("LocalTransport", () => {
         getDeviceId: vi.fn(),
       },
       ownMembershipIdentity: ownMemberMock,
-      forceJwtEndpoint: JwtEndpointVersion.Legacy,
+      matrixRTCMode: MatrixRTCMode.Compatibility,
       delayId$: constant("delay_id_mock"),
     });
     await flushPromises();
@@ -108,7 +109,7 @@ describe("LocalTransport", () => {
         getDeviceId: vi.fn(),
       },
       ownMembershipIdentity: ownMemberMock,
-      forceJwtEndpoint: JwtEndpointVersion.Legacy,
+      matrixRTCMode: MatrixRTCMode.Compatibility,
       delayId$: constant("delay_id_mock"),
     });
     active$.subscribe(
@@ -150,7 +151,7 @@ describe("LocalTransport", () => {
         baseUrl: "https://example.org",
       },
       ownMembershipIdentity: ownMemberMock,
-      forceJwtEndpoint: JwtEndpointVersion.Legacy,
+      matrixRTCMode: MatrixRTCMode.Compatibility,
       delayId$: constant("delay_id_mock"),
     });
 
@@ -194,7 +195,7 @@ describe("LocalTransport", () => {
         ownMembershipIdentity: ownMemberMock,
         scope: testScope(),
         roomId: "!example_room_id",
-        forceJwtEndpoint: JwtEndpointVersion.Legacy,
+        matrixRTCMode: MatrixRTCMode.Compatibility,
         delayId$: constant(null),
         memberships$: constant(new Epoch<CallMembership[]>([])),
         client: {
@@ -306,7 +307,7 @@ describe("LocalTransport", () => {
         scope: testScope(),
         ownMembershipIdentity: ownMemberMock,
         roomId: "!example_room_id",
-        forceJwtEndpoint: JwtEndpointVersion.Legacy,
+        matrixRTCMode: MatrixRTCMode.Compatibility,
         delayId$: constant(null),
         memberships$: constant(new Epoch<CallMembership[]>([])),
         client: {
diff --git a/src/state/CallViewModel/localMember/LocalTransport.ts b/src/state/CallViewModel/localMember/LocalTransport.ts
index f98a266f..66be511a 100644
--- a/src/state/CallViewModel/localMember/LocalTransport.ts
+++ b/src/state/CallViewModel/localMember/LocalTransport.ts
@@ -37,6 +37,7 @@ import {
 import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers.ts";
 import { customLivekitUrl } from "../../../settings/settings.ts";
 import { RtcTransportAutoDiscovery } from "./RtcTransportAutoDiscovery.ts";
+import { type MatrixRTCMode } from "../../../config/ConfigOptions.ts";
 
 /*
  * It figures out “which LiveKit focus URL/alias the local user should use,”
@@ -53,15 +54,10 @@ interface Props {
     OpenIDClientParts;
   // Used by the jwt service to create the livekit room and compute the livekit alias.
   roomId: string;
-  forceJwtEndpoint: JwtEndpointVersion;
+  matrixRTCMode: MatrixRTCMode;
   delayId$: Behavior<string | null>;
 }
 
-export enum JwtEndpointVersion {
-  Legacy = "legacy",
-  Matrix_2_0 = "matrix_2_0",
-}
-
 // TODO livekit_alias-cleanup
 // 1. We need to move away from transports map to connections!!!
 //
@@ -122,7 +118,7 @@ export const createLocalTransport$ = ({
   ownMembershipIdentity,
   client,
   roomId,
-  forceJwtEndpoint,
+  matrixRTCMode,
   delayId$,
 }: Props): LocalTransport => {
   const logger = rootLogger.getChild("[LocalTransport]");
@@ -167,7 +163,7 @@ export const createLocalTransport$ = ({
       try {
         return await doOpenIdAndJWTFromUrl(
           transport,
-          forceJwtEndpoint,
+          matrixRTCMode,
           ownMembershipIdentity,
           roomId,
           client,
@@ -219,7 +215,7 @@ export const createLocalTransport$ = ({
  *  use we don't want to risk any issues by re-using a token.
  *
  *  @param transport The transport to authenticate with.
- *  @param forceJwtEndpoint Whether to force the JWT endpoint to be used.
+ *  @param matrixRTCMode Whether to force the JWT endpoint to be used.
  *  @param membership The identity of the local member.
  *  @param roomId The room ID to use for the JWT.
  *  @param client The client to use for the OpenID token.
@@ -229,7 +225,7 @@ export const createLocalTransport$ = ({
  */
 async function doOpenIdAndJWTFromUrl(
   transport: LivekitTransportConfig,
-  forceJwtEndpoint: JwtEndpointVersion,
+  matrixRTCMode: MatrixRTCMode,
   membership: CallMembershipIdentityParts,
   roomId: string,
   client: Pick<
@@ -246,7 +242,7 @@ async function doOpenIdAndJWTFromUrl(
     transport.livekit_service_url,
     roomId,
     {
-      forceJwtEndpoint: forceJwtEndpoint,
+      matrixRTCMode,
       delayEndpointBaseUrl: client.baseUrl,
       delayId,
     },
diff --git a/src/utils/observable.ts b/src/utils/observable.ts
index d4ea90b2..8468b3fb 100644
--- a/src/utils/observable.ts
+++ b/src/utils/observable.ts
@@ -227,38 +227,6 @@ export function filterBehavior<T, S extends T>(
     );
 }
 
-/**
- * Maps a changing input value to an item whose lifetime is tied to a certain
- * computed key. The item may capture some dynamic data from the input.
- */
-export function generateItem<
-  Input,
-  Keys extends [unknown, ...unknown[]],
-  Data,
-  Item,
->(
-  name: string,
-  generator: (input: Input) => { keys: readonly [...Keys]; data: Data },
-  factory: (
-    scope: ObservableScope,
-    data$: Behavior<Data>,
-    ...keys: Keys
-  ) => Item,
-): OperatorFunction<Input, Item> {
-  return (input$) =>
-    input$.pipe(
-      generateItemsInternal(
-        name,
-        function* (input) {
-          yield generator(input);
-        },
-        factory,
-        (items) => items,
-      ),
-      map(([item]) => item),
-    );
-}
-
 function generateItemsInternal<
   Input,
   Keys extends [unknown, ...unknown[]],
diff --git a/src/utils/test-viewmodel.ts b/src/utils/test-viewmodel.ts
index f5391002..97487911 100644
--- a/src/utils/test-viewmodel.ts
+++ b/src/utils/test-viewmodel.ts
@@ -174,7 +174,7 @@ export function getBasicCallViewModelEnvironment(
           setE2EEEnabled: async () => Promise.resolve(),
         }),
       connectionState$: constant(ConnectionState.Connected),
-      matrixRTCMode$: constant(MatrixRTCMode.Compatibility),
+      matrixRTCMode: MatrixRTCMode.Compatibility,
       ...callViewModelOptions,
     },
     handRaisedSubject$,

From cff8766aa618f8350eb98a71aa49df6c19719847 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Tue, 8 Sep 2026 20:54:27 +0200
Subject: [PATCH 083/154] Delegate delayed leaves in LocalMember rather than
 LocalTransport

IMO this is where the delegation calls should have lived all along, since the leave event is part of the membership lifecycle, and we otherwise end up with an awkward hack to ignore transport updates.

Doing this now ensures that the client won't send any delegation requests if delegation is unsupported, and prepares the code for a future change in which we use the dedicated delegation endpoint from the CS API.
---
 src/state/CallViewModel/CallViewModel.ts      |  24 +--
 .../localMember/LocalMember.test.ts           | 149 +++++++++++-------
 .../CallViewModel/localMember/LocalMember.ts  |  41 ++++-
 .../localMember/LocalTransport.test.ts        | 103 +-----------
 .../localMember/LocalTransport.ts             |  94 ++++-------
 5 files changed, 178 insertions(+), 233 deletions(-)

diff --git a/src/state/CallViewModel/CallViewModel.ts b/src/state/CallViewModel/CallViewModel.ts
index 0bd33f21..aa88e611 100644
--- a/src/state/CallViewModel/CallViewModel.ts
+++ b/src/state/CallViewModel/CallViewModel.ts
@@ -493,16 +493,6 @@ export function createCallViewModel$(
       memberships$: memberships$,
       ownMembershipIdentity,
       client,
-      delayId$: scope.behavior(
-        (
-          fromEvent(
-            matrixRTCSession,
-            MembershipManagerEvent.DelayIdChanged,
-            // The type of reemitted event includes the original emitted as the second arg.
-          ) as Observable<[string | undefined, IMembershipManager]>
-        ).pipe(map(([delayId]) => delayId ?? null)),
-        matrixRTCSession.delayId ?? null,
-      ),
       roomId: matrixRoom.roomId,
       matrixRTCMode,
     });
@@ -583,10 +573,22 @@ export function createCallViewModel$(
       );
     },
     connectionManager,
+    client,
     matrixRTCSession,
-    localTransport$,
+    localTransport,
     roomId: matrixRoom.roomId,
     baseUrl: client.baseUrl,
+    ownMembershipIdentity,
+    delayId$: scope.behavior(
+      (
+        fromEvent(
+          matrixRTCSession,
+          MembershipManagerEvent.DelayIdChanged,
+          // The type of reemitted event includes the original emitted as the second arg.
+        ) as Observable<[string | undefined, IMembershipManager]>
+      ).pipe(map(([delayId]) => delayId ?? null)),
+      matrixRTCSession.delayId ?? null,
+    ),
     matrixRTCMode,
     logger: logger.getChild(`[${Date.now()}]`),
   });
diff --git a/src/state/CallViewModel/localMember/LocalMember.test.ts b/src/state/CallViewModel/localMember/LocalMember.test.ts
index 6fe2155b..e7c5b1e4 100644
--- a/src/state/CallViewModel/localMember/LocalMember.test.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.test.ts
@@ -64,6 +64,7 @@ import {
   type LocalTransport,
   type LocalTransportWithSFUConfig,
 } from "./LocalTransport";
+import * as openIDSFU from "../../../livekit/openIDSFU";
 
 initializeWidget();
 
@@ -113,6 +114,17 @@ const delegatedTimings: ResolvedDelayedLeaveTimings = {
   restart_timeout_ms: timings.restart_timeout_ms! * 10,
 };
 
+const mockedClient = {
+  getDomain: vi.fn().mockReturnValue("example.org"),
+  getDeviceId: vi.fn().mockReturnValue("AAAA"),
+  getOpenIdToken: vi.fn().mockResolvedValue({
+    access_token: "ACCCESS_TOKEN",
+    token_type: "Bearer",
+    matrix_server_name: "localhost",
+    expires_in: 10000,
+  }),
+};
+
 describe("enterRTCSession", () => {
   const transport: LivekitTransportConfig = {
     livekit_alias: "roomId",
@@ -129,15 +141,7 @@ describe("enterRTCSession", () => {
   const mockedSession = vi.mocked({
     room: {
       roomId: "roomId",
-      client: {
-        getDomain: vi.fn().mockReturnValue("example.org"),
-        getOpenIdToken: vi.fn().mockResolvedValue({
-          access_token: "ACCCESS_TOKEN",
-          token_type: "Bearer",
-          matrix_server_name: "localhost",
-          expires_in: 10000,
-        }),
-      },
+      client: mockedClient,
     },
     memberships: [],
     joinRTCSession: vi.fn(),
@@ -230,6 +234,9 @@ describe("LocalMembership", () => {
     },
     roomId: "!test-room-id:example.org",
     baseUrl: "https://matrix.example.org",
+    ownMembershipIdentity: ownMemberMock,
+    client: mockedClient,
+    delayId$: constant(null),
     matrixRTCMode: MATRIX_RTC_MODE,
   };
 
@@ -276,7 +283,7 @@ describe("LocalMembership", () => {
         scope,
         ...defaultCreateLocalMemberValues,
         connectionManager: mockConnectionManager,
-        localTransport$: behavior("a", { a: aLocalTransport }),
+        localTransport: aLocalTransport,
       });
 
       expectObservable(localMembership.localMemberState$).toBe("ne", {
@@ -320,7 +327,7 @@ describe("LocalMembership", () => {
         scope,
         ...defaultCreateLocalMemberValues,
         connectionManager: mockConnectionManager,
-        localTransport$: constant(aLocalTransport),
+        localTransport: aLocalTransport,
       });
 
       expectObservable(localMembership.localMemberState$).toBe("n-e", {
@@ -337,8 +344,8 @@ describe("LocalMembership", () => {
     const scope = new ObservableScope();
 
     const aLocalTransport: LocalTransport = {
-      advertised$: new BehaviorSubject(aTransport),
-      active$: new BehaviorSubject(aTransportWithSFUConfig),
+      advertised$: constant(aTransport),
+      active$: constant(aTransportWithSFUConfig),
     };
 
     const mockConnectionManager = {
@@ -356,7 +363,7 @@ describe("LocalMembership", () => {
         leaveRoomSession: vi.fn(),
       },
       connectionManager: mockConnectionManager,
-      localTransport$: new BehaviorSubject(aLocalTransport),
+      localTransport: aLocalTransport,
     });
     const expextedLog =
       "'not connected yet' while updating the call intent (this is expected on startup)";
@@ -417,6 +424,11 @@ describe("LocalMembership", () => {
     livekitRoom: mockLivekitRoom({}),
   } as unknown as Connection;
 
+  const authCallSpy = vi
+    .spyOn(openIDSFU, "getSFUConfigWithOpenID")
+    .mockImplementation(() => mockedClient.getOpenIdToken());
+  afterEach(() => authCallSpy.mockClear());
+
   it.each([
     ["no", null, timings],
     [
@@ -429,14 +441,8 @@ describe("LocalMembership", () => {
     "joins session with %s delegation support",
     async (_serviceName, delegationUrl, delayedLeaveTimings) => {
       const scope = testScope();
-
-      const activeTransport$ = constant(aTransportWithSFUConfig);
-      const aLocalTransport: LocalTransport = {
-        advertised$: constant(aTransport),
-        active$: activeTransport$,
-      };
-      const connectionManagerData = new ConnectionManagerData();
       const joinMatrixRTC = vi.fn();
+      const delayId$ = new BehaviorSubject<string | null>(null);
 
       if (delegationUrl !== null)
         fetchMock.post(delegationUrl, () => ({ status: 401, body: {} }));
@@ -445,10 +451,16 @@ describe("LocalMembership", () => {
         scope,
         ...defaultCreateLocalMemberValues,
         connectionManager: {
-          connectionManagerData$: constant(new Epoch(connectionManagerData)),
+          connectionManagerData$: constant(
+            new Epoch(new ConnectionManagerData()),
+          ),
         },
-        localTransport$: constant(aLocalTransport),
         joinMatrixRTC,
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
+        delayId$,
       });
 
       localMembership.requestJoinAndPublish();
@@ -459,6 +471,34 @@ describe("LocalMembership", () => {
         aTransport,
         delayedLeaveTimings,
       );
+
+      expect(authCallSpy).not.toHaveBeenCalled();
+      delayId$.next("leave1");
+      await flushPromises();
+      if (delegationUrl === null) {
+        expect(authCallSpy).not.toHaveBeenCalled();
+      } else {
+        // Delegation is supported in this test case, so go on to check that
+        // LocalMember actually performs delegation
+        const expectDelegation = (delayId: string) =>
+          expect(authCallSpy).toHaveBeenLastCalledWith(
+            mockedClient,
+            ownMemberMock,
+            "a",
+            "!test-room-id:example.org",
+            {
+              matrixRTCMode: MATRIX_RTC_MODE,
+              delayEndpointBaseUrl: "https://matrix.example.org",
+              delayId,
+            },
+            expect.anything(),
+          );
+
+        expectDelegation("leave1");
+        delayId$.next("leave2"); // Can change delegated leaves
+        await flushPromises();
+        expectDelegation("leave2");
+      }
     },
   );
 
@@ -467,7 +507,7 @@ describe("LocalMembership", () => {
 
     const activeTransport$ = new BehaviorSubject(aTransportWithSFUConfig);
     const aLocalTransport: LocalTransport = {
-      advertised$: new BehaviorSubject(aTransport),
+      advertised$: constant(aTransport),
       active$: activeTransport$,
     };
 
@@ -505,7 +545,7 @@ describe("LocalMembership", () => {
       connectionManager: {
         connectionManagerData$: constant(new Epoch(connectionManagerData)),
       },
-      localTransport$: new BehaviorSubject(aLocalTransport),
+      localTransport: aLocalTransport,
     });
     await flushPromises();
     activeTransport$.next({
@@ -536,7 +576,7 @@ describe("LocalMembership", () => {
     const publishers: Publisher[] = [];
 
     const tracks$ = new BehaviorSubject<LocalTrack[]>([]);
-    const publishing$ = new BehaviorSubject<boolean>(false);
+    const publishing$ = constant<boolean>(false);
     defaultCreateLocalMemberValues.createPublisherFactory.mockImplementation(
       () => {
         const p = {
@@ -560,8 +600,8 @@ describe("LocalMembership", () => {
       >;
 
     const aLocalTransport: LocalTransport = {
-      advertised$: new BehaviorSubject(aTransport),
-      active$: new BehaviorSubject(aTransportWithSFUConfig),
+      advertised$: constant(aTransport),
+      active$: constant(aTransportWithSFUConfig),
     };
 
     const connectionManagerData = new ConnectionManagerData();
@@ -573,7 +613,7 @@ describe("LocalMembership", () => {
       connectionManager: {
         connectionManagerData$: constant(new Epoch(connectionManagerData)),
       },
-      localTransport$: new BehaviorSubject(aLocalTransport),
+      localTransport: aLocalTransport,
     });
     await flushPromises();
     expect(publisherFactory).toHaveBeenCalledOnce();
@@ -601,7 +641,7 @@ describe("LocalMembership", () => {
       new BehaviorSubject<null | LocalTransportWithSFUConfig>(null);
 
     const aLocalTransport: LocalTransport = {
-      advertised$: new BehaviorSubject(aTransport),
+      advertised$: constant(aTransport),
       active$: activeTransport$,
     };
 
@@ -644,7 +684,7 @@ describe("LocalMembership", () => {
       connectionManager: {
         connectionManagerData$,
       },
-      localTransport$: new BehaviorSubject(aLocalTransport),
+      localTransport: aLocalTransport,
     });
 
     await flushPromises();
@@ -779,10 +819,10 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport$: new BehaviorSubject({
-          advertised$: new BehaviorSubject(aTransport),
-          active$: new BehaviorSubject(aTransportWithSFUConfig),
-        }),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
       });
 
       await flushPromises();
@@ -819,10 +859,10 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport$: new BehaviorSubject({
-          advertised$: new BehaviorSubject(aTransport),
-          active$: new BehaviorSubject(aTransportWithSFUConfig),
-        }),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
       });
 
       await flushPromises();
@@ -861,18 +901,19 @@ describe("LocalMembership", () => {
         scope,
         ...defaultCreateLocalMemberValues,
         homeserverConnected: {
-          combined$: new BehaviorSubject<
-            [boolean, HomeserverDisconnectReason | null]
-          >([true, null]),
+          combined$: constant<[boolean, HomeserverDisconnectReason | null]>([
+            true,
+            null,
+          ]),
           rtsSession$: constant(RTCMemberStatus.Connected),
         },
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport$: new BehaviorSubject({
-          advertised$: new BehaviorSubject(aTransport),
-          active$: new BehaviorSubject(aTransportWithSFUConfig),
-        }),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
       });
 
       await flushPromises();
@@ -913,10 +954,10 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport$: new BehaviorSubject({
-          advertised$: new BehaviorSubject(aTransport),
-          active$: new BehaviorSubject(aTransportWithSFUConfig),
-        }),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
       });
 
       await flushPromises();
@@ -982,10 +1023,10 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport$: new BehaviorSubject({
-          advertised$: new BehaviorSubject(aTransport),
-          active$: new BehaviorSubject(aTransportWithSFUConfig),
-        }),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
       });
       return { scope, localMembership };
     };
diff --git a/src/state/CallViewModel/localMember/LocalMember.ts b/src/state/CallViewModel/localMember/LocalMember.ts
index 9b9218c5..7805805b 100644
--- a/src/state/CallViewModel/localMember/LocalMember.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.ts
@@ -15,6 +15,7 @@ import {
   MediaDeviceFailure,
 } from "livekit-client";
 import { observeParticipantEvents } from "@livekit/components-core";
+import { type MatrixClient } from "matrix-js-sdk";
 import {
   Status as RTCSessionStatus,
   type LivekitTransport,
@@ -76,6 +77,7 @@ import { type HomeserverConnected } from "./HomeserverConnected.ts";
 import { type LocalTransport } from "./LocalTransport.ts";
 import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers.ts";
 import { or$ } from "../../../utils/observable.ts";
+import { getSFUConfigWithOpenID } from "../../../livekit/openIDSFU.ts";
 
 export enum TransportState {
   /** Not even a transport is available to the LocalMembership */
@@ -143,12 +145,16 @@ interface Props {
   ) => void;
   homeserverConnected: HomeserverConnected;
   roomId: string;
+  ownMembershipIdentity: CallMembershipIdentityParts;
   localTransport: LocalTransport;
+  client: Pick<MatrixClient, "getDeviceId" | "getOpenIdToken">;
   matrixRTCSession: Pick<
     MatrixRTCSession,
     "updateCallIntent" | "leaveRoomSession"
   >;
   baseUrl: string;
+  delayId$: Behavior<string | null>;
+  matrixRTCMode: MatrixRTCMode;
   logger: Logger;
 }
 
@@ -168,6 +174,7 @@ interface Props {
  * @param props.muteStates The mute states for video and audio.
  * @param props.matrixRTCSession The matrix RTC session to join.
  * @param props.baseUrl Base URL of the homeserver.
+ * @param props.delayId$ ID of the delayed leave event to delegate to the SFU.
  * @param props.roomId The room ID used as the call identifier in analytics events.
  * @returns
  *  - publisher: The handle to create tracks and publish them to the room.
@@ -179,15 +186,19 @@ interface Props {
 export const createLocalMembership$ = ({
   scope,
   connectionManager,
-  localTransport$,
+  localTransport,
   homeserverConnected,
   createPublisherFactory,
   joinMatrixRTC,
   logger: parentLogger,
   muteStates,
+  client,
   matrixRTCSession,
   baseUrl,
   roomId,
+  ownMembershipIdentity,
+  delayId$,
+  matrixRTCMode,
 }: Props): {
   /**
    * This request to start audio and video tracks.
@@ -711,6 +722,34 @@ export const createLocalMembership$ = ({
     ),
   );
 
+  // Delegate delayed leaves to the SFU
+  scope.reconcile(
+    scope.behavior(combineLatest([joinParams$, delayId$])),
+    async ([joinParams, delayId]) => {
+      if (joinParams?.delegationSupported && delayId !== null) {
+        try {
+          // This will technically cause the service to issue a new JWT token,
+          // but it's safe to discard. We're only interested in triggering
+          // delegation.
+          await getSFUConfigWithOpenID(
+            client,
+            ownMembershipIdentity,
+            joinParams.transport.livekit_service_url,
+            roomId,
+            { matrixRTCMode, delayEndpointBaseUrl: baseUrl, delayId },
+            logger,
+          );
+        } catch (e) {
+          // TODO: Surface this to the user as a service interruption?
+          logger.error(
+            `Failed to delegate leave to ${joinParams.transport.livekit_service_url}`,
+            e,
+          );
+        }
+      }
+    },
+  );
+
   // Pause upstream of all local media tracks when we're disconnected from
   // MatrixRTC, because it can be an unpleasant surprise for the app to say
   // 'reconnecting' and yet still be transmitting your media to others.
diff --git a/src/state/CallViewModel/localMember/LocalTransport.test.ts b/src/state/CallViewModel/localMember/LocalTransport.test.ts
index 7f9ecb98..a77c7a16 100644
--- a/src/state/CallViewModel/localMember/LocalTransport.test.ts
+++ b/src/state/CallViewModel/localMember/LocalTransport.test.ts
@@ -14,11 +14,8 @@ import {
   type MockedObject,
   vi,
 } from "vitest";
-import {
-  type CallMembership,
-  type LivekitTransportConfig,
-} from "matrix-js-sdk/lib/matrixrtc";
-import { BehaviorSubject, filter, lastValueFrom } from "rxjs";
+import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
+import { lastValueFrom } from "rxjs";
 import fetchMock from "fetch-mock";
 
 import {
@@ -27,11 +24,7 @@ import {
   ownMemberMock,
   testScope,
 } from "../../../utils/test";
-import {
-  createLocalTransport$,
-  JwtEndpointVersion,
-  type LocalTransportWithSFUConfig,
-} from "./LocalTransport";
+import { createLocalTransport$ } from "./LocalTransport";
 import { constant } from "../../Behavior";
 import { Epoch, ObservableScope } from "../../ObservableScope";
 import {
@@ -62,14 +55,12 @@ describe("LocalTransport", () => {
         // eslint-disable-next-line @typescript-eslint/naming-convention
         _unstable_getRTCTransports: async () => Promise.resolve([]),
         getDomain: () => "example.org",
-        baseUrl: "example.org",
         // These won't be called in this error path but satisfy the type
         getOpenIdToken: vi.fn(),
         getDeviceId: vi.fn(),
       },
       ownMembershipIdentity: ownMemberMock,
       matrixRTCMode: MatrixRTCMode.Compatibility,
-      delayId$: constant("delay_id_mock"),
     });
     await flushPromises();
 
@@ -101,7 +92,6 @@ describe("LocalTransport", () => {
       roomId: "!example_room_id",
       memberships$: constant(new Epoch<CallMembership[]>([])),
       client: {
-        baseUrl: "https://example.org",
         getDomain: () => "example.org",
         // eslint-disable-next-line @typescript-eslint/naming-convention
         _unstable_getRTCTransports: async () => Promise.resolve([]),
@@ -110,7 +100,6 @@ describe("LocalTransport", () => {
       },
       ownMembershipIdentity: ownMemberMock,
       matrixRTCMode: MatrixRTCMode.Compatibility,
-      delayId$: constant("delay_id_mock"),
     });
     active$.subscribe(
       (o) => observations.push(o),
@@ -148,11 +137,9 @@ describe("LocalTransport", () => {
         getDomain: () => "example.org",
         getOpenIdToken: vi.fn(),
         getDeviceId: vi.fn(),
-        baseUrl: "https://example.org",
       },
       ownMembershipIdentity: ownMemberMock,
       matrixRTCMode: MatrixRTCMode.Compatibility,
-      delayId$: constant("delay_id_mock"),
     });
 
     openIdResolver.resolve?.({
@@ -196,10 +183,8 @@ describe("LocalTransport", () => {
         scope: testScope(),
         roomId: "!example_room_id",
         matrixRTCMode: MatrixRTCMode.Compatibility,
-        delayId$: constant(null),
         memberships$: constant(new Epoch<CallMembership[]>([])),
         client: {
-          baseUrl: "https://example.org",
           getDomain: vi.fn().mockReturnValue("example.org"),
           // eslint-disable-next-line @typescript-eslint/naming-convention
           _unstable_getRTCTransports: vi.fn().mockResolvedValue([]),
@@ -308,11 +293,9 @@ describe("LocalTransport", () => {
         ownMembershipIdentity: ownMemberMock,
         roomId: "!example_room_id",
         matrixRTCMode: MatrixRTCMode.Compatibility,
-        delayId$: constant(null),
         memberships$: constant(new Epoch<CallMembership[]>([])),
         client: {
           getDomain: () => "example.org",
-          baseUrl: "https://example.org",
           // eslint-disable-next-line @typescript-eslint/naming-convention
           _unstable_getRTCTransports: async () => Promise.resolve([]),
           // These won't be called in this error path but satisfy the type
@@ -330,84 +313,4 @@ describe("LocalTransport", () => {
       );
     });
   });
-
-  it("should not update advertised/active transport on delayID changes, but delay Id delegation should be called", async () => {
-    // For simplicity, we'll just use the config livekit
-    customLivekitUrl.setValue("https://lk.example.org");
-
-    const authCallSpy = vi
-      .spyOn(openIDSFU, "getSFUConfigWithOpenID")
-      .mockResolvedValue(openIdResponse);
-
-    const delayId$ = new BehaviorSubject<string | null>(null);
-
-    const { advertised$, active$ } = createLocalTransport$({
-      scope: testScope(),
-      ownMembershipIdentity: ownMemberMock,
-      roomId: "!example_room_id",
-      // We want multi-sdu
-      forceJwtEndpoint: JwtEndpointVersion.Legacy,
-      delayId$: delayId$,
-      memberships$: constant(new Epoch<CallMembership[]>([])),
-      client: {
-        getDomain: () => "example.org",
-        baseUrl: "https://example.org",
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        _unstable_getRTCTransports: async () => Promise.resolve([]),
-        // These won't be called in this error path but satisfy the type
-        getOpenIdToken: vi.fn(),
-        getDeviceId: vi.fn(),
-      },
-    });
-
-    const advertisedValues: LivekitTransportConfig[] = [];
-    const activeValues: LocalTransportWithSFUConfig[] = [];
-    advertised$
-      .pipe(filter((v) => v !== null))
-      .subscribe((t) => advertisedValues.push(t));
-    active$
-      .pipe(filter((v) => v !== null))
-      .subscribe((t) => activeValues.push(t));
-
-    await flushPromises();
-
-    // we have now an active and an advertised
-    expect(advertisedValues.length).toEqual(1);
-    expect(activeValues.length).toEqual(1);
-    expect(advertisedValues[0]!.livekit_service_url).toEqual(
-      "https://lk.example.org",
-    );
-    expect(activeValues[0]!.transport.livekit_service_url).toEqual(
-      "https://lk.example.org",
-    );
-
-    expect(authCallSpy).toHaveBeenCalledTimes(2);
-    // Now emits 3 new delays id
-    delayId$.next("delay_id_1");
-    await flushPromises();
-    delayId$.next("delay_id_2");
-    await flushPromises();
-    delayId$.next("delay_id_3");
-    await flushPromises();
-
-    // No new emissions should've happened, it is the same transport.
-    expect(advertisedValues.length).toEqual(1);
-    expect(activeValues.length).toEqual(1);
-
-    // Still we should have updated the delayID to auth
-    expect(authCallSpy).toHaveBeenCalledTimes(
-      4 * 2 /* 2 calls for each delayId ?? why */,
-    );
-
-    expect(authCallSpy).toHaveBeenLastCalledWith(
-      expect.anything(),
-      expect.anything(),
-      expect.anything(),
-      expect.anything(),
-      expect.objectContaining({
-        delayId: "delay_id_3",
-      }),
-      expect.anything(),
-    );
-  });
 });
diff --git a/src/state/CallViewModel/localMember/LocalTransport.ts b/src/state/CallViewModel/localMember/LocalTransport.ts
index 66be511a..c5aa3959 100644
--- a/src/state/CallViewModel/localMember/LocalTransport.ts
+++ b/src/state/CallViewModel/localMember/LocalTransport.ts
@@ -10,14 +10,7 @@ import {
   type LivekitTransportConfig,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { type MatrixClient } from "matrix-js-sdk";
-import {
-  combineLatest,
-  distinctUntilChanged,
-  from,
-  map,
-  of,
-  switchMap,
-} from "rxjs";
+import { distinctUntilChanged, from, map, of, switchMap } from "rxjs";
 import { logger as rootLogger, type Logger } from "matrix-js-sdk/lib/logger";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
 
@@ -47,15 +40,11 @@ interface Props {
   scope: ObservableScope;
   ownMembershipIdentity: CallMembershipIdentityParts;
   memberships$: Behavior<Epoch<CallMembership[]>>;
-  client: Pick<
-    MatrixClient,
-    "getDomain" | "baseUrl" | "_unstable_getRTCTransports"
-  > &
+  client: Pick<MatrixClient, "getDomain" | "_unstable_getRTCTransports"> &
     OpenIDClientParts;
   // Used by the jwt service to create the livekit room and compute the livekit alias.
   roomId: string;
   matrixRTCMode: MatrixRTCMode;
-  delayId$: Behavior<string | null>;
 }
 
 // TODO livekit_alias-cleanup
@@ -119,7 +108,6 @@ export const createLocalTransport$ = ({
   client,
   roomId,
   matrixRTCMode,
-  delayId$,
 }: Props): LocalTransport => {
   const logger = rootLogger.getChild("[LocalTransport]");
 
@@ -134,32 +122,29 @@ export const createLocalTransport$ = ({
     transportDiscovery.discoverPreferredTransport(),
   );
 
-  const preferredConfig$ = customLivekitUrl.value$
-    .pipe(
-      switchMap((customUrl) => {
-        if (customUrl) {
-          return of({
-            type: "livekit",
-            livekit_service_url: customUrl,
-          } as LivekitTransportConfig);
-        } else {
-          return discoveredTransport$;
-        }
-      }),
-    )
-    .pipe(
-      map((config) => {
-        if (!config) {
-          // Bubbled up from the preferredConfig$ observable.
-          throw new MatrixRTCTransportMissingError(client.getDomain() ?? "");
-        }
-        return config;
-      }),
-      distinctUntilChanged(areLivekitTransportsEqual),
-    );
+  const preferredConfig$ = customLivekitUrl.value$.pipe(
+    switchMap((customUrl) => {
+      if (customUrl) {
+        return of({
+          type: "livekit",
+          livekit_service_url: customUrl,
+        } as LivekitTransportConfig);
+      } else {
+        return discoveredTransport$;
+      }
+    }),
+    map((config) => {
+      if (!config) {
+        // Bubbled up from the preferredConfig$ observable.
+        throw new MatrixRTCTransportMissingError(client.getDomain() ?? "");
+      }
+      return config;
+    }),
+    distinctUntilChanged(areLivekitTransportsEqual),
+  );
 
-  const preferredTransport$ = combineLatest([preferredConfig$, delayId$]).pipe(
-    switchMap(async ([transport, delayId]) => {
+  const preferredTransport$ = preferredConfig$.pipe(
+    switchMap(async (transport) => {
       try {
         return await doOpenIdAndJWTFromUrl(
           transport,
@@ -167,7 +152,6 @@ export const createLocalTransport$ = ({
           ownMembershipIdentity,
           roomId,
           client,
-          delayId ?? undefined,
           logger,
         );
       } catch (e) {
@@ -189,21 +173,7 @@ export const createLocalTransport$ = ({
       ),
       null,
     ),
-    active$: scope.behavior(
-      preferredTransport$.pipe(
-        // XXX: WORK AROUND due to a reconnection glitch.
-        // To remove when we have a proper way to refresh the delegation event ID without refreshing
-        // the whole credentials.
-        // We deliberately hide any changes to the SFU config because we
-        // do not want the app to reconnect whenever the JWT
-        // token changes due to us delegating a new delayed event. The
-        // initial SFU config for the transport is all the app needs.
-        distinctUntilChanged((prev, next) =>
-          areLivekitTransportsEqual(prev.transport, next.transport),
-        ),
-      ),
-      null,
-    ),
+    active$: scope.behavior(preferredTransport$, null),
   };
 };
 
@@ -219,7 +189,6 @@ export const createLocalTransport$ = ({
  *  @param membership The identity of the local member.
  *  @param roomId The room ID to use for the JWT.
  *  @param client The client to use for the OpenID token.
- *  @param delayId The delayId to use for the JWT.
  *
  *  @throws FailToGetOpenIdToken, NoMatrix2AuthorizationService
  */
@@ -228,12 +197,7 @@ async function doOpenIdAndJWTFromUrl(
   matrixRTCMode: MatrixRTCMode,
   membership: CallMembershipIdentityParts,
   roomId: string,
-  client: Pick<
-    MatrixClient,
-    "getDomain" | "baseUrl" | "_unstable_getRTCTransports"
-  > &
-    OpenIDClientParts,
-  delayId?: string,
+  client: Pick<MatrixClient, "_unstable_getRTCTransports"> & OpenIDClientParts,
   logger?: Logger,
 ): Promise<LocalTransportWithSFUConfig> {
   const sfuConfig = await getSFUConfigWithOpenID(
@@ -241,11 +205,7 @@ async function doOpenIdAndJWTFromUrl(
     membership,
     transport.livekit_service_url,
     roomId,
-    {
-      matrixRTCMode,
-      delayEndpointBaseUrl: client.baseUrl,
-      delayId,
-    },
+    { matrixRTCMode },
     logger,
   );
   return {

From 426acd222ef9a7664fb0b732abc3219d44b89c2b Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 8 Sep 2026 23:22:44 +0100
Subject: [PATCH 084/154] Prefer the browser default audio output when no
 output has been chosen

On browsers without a "default" pseudo-device (Firefox, Safari), the
virtual default output entry was appended after the physical devices, so
with no saved preference EC selected the first physical device and pinned
every remote audio element to it with setSinkId. Pinned sinks are not
re-routed by the browser: on Firefox/Linux a Bluetooth headset switching
from A2DP to HFP when its microphone is opened (i.e. on unmute) destroys
the pinned sink and all remote audio goes silent, with no error and no
fallback (rageshake 17320).

List the virtual default first so it is the fallback both when nothing was
chosen and when the chosen output disappears, and stop labelling it with
the first device's name since the browser default is not necessarily that
device.
---
 src/state/AudioOutput.test.ts | 62 ++++++++++++++++++++++++++++++++++-
 src/state/MediaDevices.ts     | 21 ++++++++----
 2 files changed, 75 insertions(+), 8 deletions(-)

diff --git a/src/state/AudioOutput.test.ts b/src/state/AudioOutput.test.ts
index 9eb71841..6dafc841 100644
--- a/src/state/AudioOutput.test.ts
+++ b/src/state/AudioOutput.test.ts
@@ -10,6 +10,7 @@ import * as ComponentsCore from "@livekit/components-core";
 
 import { ObservableScope } from "./ObservableScope";
 import { AudioOutput } from "./MediaDevices";
+import { audioOutput as audioOutputSetting } from "../settings/settings";
 import { withTestScheduler } from "../utils/test";
 
 const BT_SPEAKER = {
@@ -93,6 +94,8 @@ describe("AudioOutput Tests", () => {
 
   beforeEach(() => {
     testScope = new ObservableScope();
+    // Device preferences persist in localStorage across tests
+    audioOutputSetting.setValue(undefined);
   });
 
   afterEach(() => {
@@ -150,7 +153,9 @@ describe("AudioOutput Tests", () => {
 
       expectObservable(audioOutput.selected$).toBe("abcde", {
         a: undefined,
-        b: { id: LAPTOP_SPEAKER.deviceId, virtualEarpiece: false },
+        // No "default" pseudo-device (Firefox): the virtual browser default is
+        // selected until the user picks something.
+        b: { id: "", virtualEarpiece: false },
         c: { id: MONITOR_SPEAKER.deviceId, virtualEarpiece: false },
         d: { id: LAPTOP_SPEAKER.deviceId, virtualEarpiece: false },
         e: { id: MONITOR_SPEAKER.deviceId, virtualEarpiece: false },
@@ -158,6 +163,61 @@ describe("AudioOutput Tests", () => {
     });
   });
 
+  it("falls back to the browser default when the selected device disappears", () => {
+    withTestScheduler(({ behavior, cold, schedule, expectObservable }) => {
+      vi.mocked(ComponentsCore.createMediaDeviceObserver).mockReturnValue(
+        cold("a---b", {
+          a: DEVICE_LIST_B,
+          // The monitor is unplugged (or a Bluetooth sink changes profile)
+          b: [LAPTOP_SPEAKER],
+        }),
+      );
+
+      const audioOutput = new AudioOutput(
+        behavior("a", { a: true }),
+        testScope,
+      );
+
+      schedule("--a", {
+        a: () => audioOutput.select(MONITOR_SPEAKER.deviceId),
+      });
+
+      expectObservable(audioOutput.selected$).toBe("a-b-c", {
+        a: { id: "", virtualEarpiece: false },
+        b: { id: MONITOR_SPEAKER.deviceId, virtualEarpiece: false },
+        // Rather than pinning some other physical device, let the browser route
+        c: { id: "", virtualEarpiece: false },
+      });
+    });
+  });
+
+  it("lists the virtual browser default first when there is no default pseudo-device", () => {
+    withTestScheduler(({ behavior, cold, expectObservable }) => {
+      vi.mocked(ComponentsCore.createMediaDeviceObserver).mockReturnValue(
+        cold("a", { a: DEVICE_LIST_B }),
+      );
+
+      const audioOutput = new AudioOutput(
+        behavior("a", { a: true }),
+        testScope,
+      );
+
+      expectObservable(audioOutput.available$).toBe("a", {
+        a: new Map([
+          ["", { type: "default", name: null }],
+          [
+            LAPTOP_SPEAKER.deviceId,
+            { type: "name", name: LAPTOP_SPEAKER.label },
+          ],
+          [
+            MONITOR_SPEAKER.deviceId,
+            { type: "name", name: MONITOR_SPEAKER.label },
+          ],
+        ]),
+      });
+    });
+  });
+
   it("Test mappings", () => {
     // In a real life setup there would be first a blanked list
     // then the real one.
diff --git a/src/state/MediaDevices.ts b/src/state/MediaDevices.ts
index 70a676cf..ef96b00f 100644
--- a/src/state/MediaDevices.ts
+++ b/src/state/MediaDevices.ts
@@ -257,14 +257,21 @@ export class AudioOutput implements MediaDevice<
       map((availableRaw) => {
         let available: Map<string, AudioOutputDeviceLabel> =
           buildDeviceMap(availableRaw);
-        // Create a virtual default audio output for browsers that don't have one.
-        // Its device ID must be the empty string because that's what setSinkId
-        // recognizes.
+        // Create a virtual default audio output for browsers that don't have one
+        // (Firefox, Safari). Its device ID must be the empty string because
+        // that's what setSinkId recognizes. It goes first so that it is the
+        // fallback when no output has been explicitly chosen (or the chosen
+        // one disappears), rather than pinning the first physical device
+        // with setSinkId: pinned sinks are not re-routed by the browser, and
+        // Firefox leaves the audio elements silent when a pinned sink goes
+        // away (e.g. a Bluetooth headset switching profile when its
+        // microphone is opened). We can't know which physical device the
+        // browser default resolves to, so the entry carries no name.
         if (available.size && !available.has("") && !available.has("default"))
-          available.set("", {
-            type: "default",
-            name: availableRaw[0]?.label || null,
-          });
+          available = new Map<string, AudioOutputDeviceLabel>([
+            ["", { type: "default", name: null }],
+            ...available,
+          ]);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const isSafari = !!(window as any).GestureEvent; // non standard api only found on Safari. https://developer.mozilla.org/en-US/docs/Web/API/GestureEvent#browser_compatibility
         if (isSafari) {

From 1d7e2288f780b5316ee4c68ecd10e9ecd2887321 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Wed, 9 Sep 2026 08:49:08 +0200
Subject: [PATCH 085/154] Fix call.element.dev not updating after branch rename

---
 .github/PULL_REQUEST_TEMPLATE.md |  4 ++--
 .github/workflows/build.yaml     | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 1c1111f7..3dad74ae 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -5,7 +5,7 @@
 > Every PR must have a linked issue
 > that a maintainer has reviewed and approved **before you started writing code**.
 > PRs that don't meet this requirement will not be reviewed.
-> See [CONTRIBUTING.md](https://github.com/element-hq/element-call/blob/livekit/CONTRIBUTING.md) for ElementCall decided for this approach.
+> See [CONTRIBUTING.md](https://github.com/element-hq/element-call/blob/main/CONTRIBUTING.md) for ElementCall decided for this approach.
 
 ## Content
 
@@ -39,7 +39,7 @@ Uncomment the markdown table below and fill in the last line:
 ## Checklist
 
 - [ ] A linked, pre-approved issue exists for this feature or UI change.
-- [ ] I have read [CONTRIBUTING.md](https://github.com/element-hq/element-call/blob/livekit/CONTRIBUTING.md) in full.
+- [ ] I have read [CONTRIBUTING.md](https://github.com/element-hq/element-call/blob/main/CONTRIBUTING.md) in full.
 - [ ] Pull request includes screenshots or videos for any UI changes.
 - [ ] Tests written for new code (and existing touched code where feasible).
 - [ ] Linter and other CI checks pass.
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
index ba7cde51..3fe10723 100644
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -6,7 +6,7 @@ on:
       - opened
       - labeled
   push:
-    branches: [livekit, full-mesh]
+    branches: [main]
 jobs:
   build_full_element_call:
     # Use the full package vite build
@@ -22,8 +22,8 @@ jobs:
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
       CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
   deploy_develop:
-    # Deploy livekit branch to call.element.dev after build completes
-    if: github.ref == 'refs/heads/livekit'
+    # Deploy main branch to call.element.dev after build completes
+    if: github.ref == 'refs/heads/main'
     needs: build_full_element_call
     runs-on: ubuntu-latest
     steps:
@@ -43,8 +43,8 @@ jobs:
                 }
             })
   docker_for_develop:
-    # Build docker and publish docker for livekit branch after build completes
-    if: github.ref == 'refs/heads/livekit'
+    # Build docker and publish docker for main branch after build completes
+    if: github.ref == 'refs/heads/main'
     needs: build_full_element_call
     permissions:
       contents: write

From 2ac95df75f986fca37d302471a0762f4fa5ac158 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Wed, 9 Sep 2026 12:15:19 +0200
Subject: [PATCH 086/154] update readmes

---
 README.md                   | 73 ++++++++++++++++++++++++++++++-------
 docs/README.md              |  1 +
 docs/embedded_standalone.md |  3 ++
 3 files changed, 64 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index b2760290..84910ed5 100644
--- a/README.md
+++ b/README.md
@@ -36,8 +36,9 @@ You can find the latest development version continuously deployed to
 ✅ **Decentralized & Federated** – No central authority; works across Matrix
 homeservers.  
 ✅ **End-to-End Encrypted** – Secure and private calls.  
-✅ **Standalone & Widget Mode** – Use as an independent app or embed in Matrix
-clients.  
+✅ **Standalone, Widget & Component Mode** – Use as an independent app, embed
+in Matrix clients as a widget, or (experimentally) mount it as a React component
+inside your own application.  
 ✅ **WebRTC-based** – No additional software required.  
 ✅ **Scalable with LiveKit** – Supports large meetings via SFU
 ([MSC4195: MatrixRTC using LiveKit backend](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md)).  
@@ -90,7 +91,9 @@ and voice calls within Matrix rooms.
 
 Element Call offers two packaging options: one for standalone or widget
 deployment, and another for seamless widget-based integration into messenger
-apps. Below is an overview of each option.
+apps. A third, experimental option builds it as a React component library for
+applications that want to render a call inside their own page rather than in an
+iframe. Below is an overview of each option.
 
 **Full Package** – Supports both **Standalone** and **Widget** mode. It is
 hosted as a static web page and can be accessed via a URL when used as a widget.
@@ -107,6 +110,11 @@ recommended method for embedding Element Call.
   <img src="./docs/embedded_package.drawio.png" alt="Element Call Embedded Package">
 </p>
 
+**Component Package (experimental)** – A library build of Element Call as a
+React component, consumed as a dependency by a host application that already
+has a Matrix client. See
+[Element Call as a component](#element-call-as-a-component-experimental) below.
+
 For more details on the packages, see the
 [Embedded vs. Standalone Guide](./docs/embedded_standalone.md).
 
@@ -229,14 +237,20 @@ in twice against the development backend and shows two calls side by side, in
 resizable boxes, with page furniture of its own around them. Use it to see how
 Element Call behaves when it does not own the page — the size it is given,
 whether it stays inside its container, and what it says to its host, which is
-logged along the bottom.
+logged along the bottom. The harness is served with the same development
+certificate as the app, so unless the development CA is trusted, the browser
+needs a certificate exception for `https://localhost:3001` as well (see the
+note under [Backend](#backend)). It reads the same `public/config.json` as
+`pnpm dev` if one exists, and runs with Element Call's defaults otherwise.
 
 The call lays itself out for the size of the element it is mounted in, not the
 window: a host that shrinks the container to a corner of its page gets the
 picture-in-picture layout, just as a host that shrank the whole iframe used to.
-The breakpoints in Element Call's stylesheets are `@container element-call`
-queries against its root element for the same reason; for the standalone app
-the root is the page, so they mean what the media queries they replaced did.
+The breakpoints in the stylesheets the component uses are
+`@container element-call` queries against its root element for the same reason;
+for the standalone app the root is the page, so they mean what the media queries
+they replaced did. (The standalone-only views, such as the home and login pages,
+still use plain media queries, since the component never shows them.)
 
 The component's stylesheet is confined to the element it is mounted in: the
 build rewrites every selector so that it matches only Element Call's root or
@@ -248,8 +262,32 @@ The component speaks every language the app does. English is bundled in; the
 other locales are split into chunks the host's bundler loads the first time
 they are needed. It starts in the browser's language, and follows the host's
 own language setting through the `language` prop (`supportedLanguages` lists
-the tags it accepts). The `theme` prop works the same way for `light` and
-`dark`; both can change while a call is running without disturbing it.
+the tags it accepts, and anything else falls back to its base language or to
+English). The `theme` prop works the same way and takes the same values as the
+widget's `theme` URL parameter: `light`, `dark`, `light-high-contrast` or
+`dark-high-contrast`. Both can change while a call is running without
+disturbing it.
+
+A host must call and await `initializeElementCall(config)` once before
+rendering the component: it loads the `Intl` polyfills, applies the
+deployment-wide `config.json`-style configuration and sets up translations.
+The component itself takes the host's `client` and the `roomId` to call in, an
+`intent` saying what the user asked for (which decides whether to show the
+lobby, ring, and so on), an optional `config` overriding what the intent
+implies, and an optional `hostBridge` through which Element Call tells the host
+that the user has joined or hung up, that it wants to stay on screen, and so
+on. The host makes its own requests (`join`, `hangUp`, `setDeviceMute`) through
+the handle exposed on `ref`. The full API is documented in the type declarations
+(`component/index.tsx` and `component/host.ts`).
+
+A few things differ from the widget on purpose: the component draws a solid
+background rather than a gradient unless told otherwise, never offers to edit
+the user's profile (the account is the host's), scopes its keyboard shortcuts to
+its own root element so that several instances can share a page, and only shows
+its own post-call and error screens when the host has not supplied a `close()`
+callback; with one, it asks the host to unmount it instead. The
+[global JS controls](./docs/controls.md) on `window` are unchanged and remain
+page-wide, so with several instances on one page they apply to all of them.
 
 The package is not published yet. A host installs it as a git dependency on the
 `component` directory of this repository,
@@ -258,8 +296,14 @@ The package is not published yet. A host installs it as a git dependency on the
 "@element-hq/element-call-component": "github:element-hq/element-call#main&path:/component"
 ```
 
-whose `prepare` script runs the build on install (the host's pnpm has to allow
-that: `allowBuilds` in its `pnpm-workspace.yaml`). It imports the component from
+whose `prepare` script runs the build on install. That build needs pnpm (via
+Corepack) on the host's machine, runs a full `pnpm install` of this repository
+and is memory-hungry, since it inherits the `--max-old-space-size` setting of
+the app build; the host's pnpm also has to allow it to run at all
+(`allowBuilds` in its `pnpm-workspace.yaml`). Note that `component/` is a pnpm
+project of its own for this reason, so pnpm commands run from inside that
+directory target it rather than the repository; run them from the repository
+root. The host imports the component from
 `@element-hq/element-call-component` and the stylesheet from
 `@element-hq/element-call-component/style.css`, and has to provide `react`,
 `react-dom`, `matrix-js-sdk` and `livekit-client` itself, since the bundle leaves
@@ -326,7 +370,10 @@ running Playwright by following
 
 However the Playwright tests are run, an element-call instance must be running
 on https://localhost:3000 (this is configured in `playwright.config.ts`) - this
-is what will be tested.
+is what will be tested. The tests under `playwright/component` instead drive
+the component harness (`pnpm dev:component`) on https://localhost:3001, which
+Playwright starts as a second web server; it is always a Vite dev server, even
+when the app itself is served from Docker with `USE_DOCKER`.
 
 The local backend environment should be running for the test to work:
 `pnpm backend`
@@ -425,7 +472,7 @@ We do this so that we can reuse the labels between repositories.
 
 ## 📝 Copyright & License
 
-Copyright 2021-2025 New Vector Ltd
+Copyright 2021-2026 New Vector Ltd
 
 This software is dual-licensed by New Vector Ltd (Element). It can be used
 either:
diff --git a/docs/README.md b/docs/README.md
index 56c96a6c..c4b60c2f 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -3,6 +3,7 @@
 This folder contains documentation for setup, usage, and development of Element Call.
 
 - [Embedded vs standalone mode](./embedded_standalone.md)
+- [Element Call as a React component (experimental)](../README.md#element-call-as-a-component-experimental)
 - [Url format and parameters](./url_params.md)
 - [Global JS controls](./controls.md)
 - [MatrixRTC modes](./matrix_rtc_modes.md)
diff --git a/docs/embedded_standalone.md b/docs/embedded_standalone.md
index 456ce120..a85ca6ea 100644
--- a/docs/embedded_standalone.md
+++ b/docs/embedded_standalone.md
@@ -3,6 +3,9 @@
 Element Call is available as two different packages: Full Package and Embedded Package.
 
 The Full Package is designed for standalone use, while the Embedded Package is designed for widget mode only.
+There is also an experimental third option, a build of Element Call as a React component for applications
+that want to render a call inside their own page rather than in an iframe; see
+[Element Call as a component](../README.md#element-call-as-a-component-experimental) in the README.
 
 The table below provides a comparison of the two packages:
 

From dbd2423e7b6c7f333aaafa2cd14c9bf89dce3aff Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 9 Sep 2026 11:20:49 +0100
Subject: [PATCH 087/154] Stop MatrixAudioRenderer warning on every render

The "has no matching matrix call member" warning fired on every re-render
(i.e. every active speaker update) and also for the local participant's own
track, which is never rendered here anyway. Skip local tracks and warn once
per unexpected identity.
---
 src/livekit/MatrixAudioRenderer.test.tsx | 53 ++++++++++++++++++++++++
 src/livekit/MatrixAudioRenderer.tsx      | 26 ++++++++----
 2 files changed, 70 insertions(+), 9 deletions(-)

diff --git a/src/livekit/MatrixAudioRenderer.test.tsx b/src/livekit/MatrixAudioRenderer.test.tsx
index bb79a64d..e4573cda 100644
--- a/src/livekit/MatrixAudioRenderer.test.tsx
+++ b/src/livekit/MatrixAudioRenderer.test.tsx
@@ -24,10 +24,12 @@ import { testAudioContext } from "../useAudioContext.test";
 import * as MediaDevicesContext from "../MediaDevicesContext";
 import { LivekitRoomAudioRenderer } from "./MatrixAudioRenderer";
 import {
+  mockLocalParticipant,
   mockMediaDevices,
   mockRemoteParticipant,
   mockTrack,
 } from "../utils/test";
+import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import { initializeWidget } from "../widget";
 initializeWidget();
 export const TestAudioContextConstructor = vi.fn(
@@ -131,6 +133,57 @@ it("should render for member", () => {
   expect(queryAllByTestId("audio")).toHaveLength(1);
 });
 
+function spyOnWarn(): ReturnType<typeof vi.fn> {
+  const warn = vi.fn();
+  vi.spyOn(rootLogger, "getChild").mockReturnValue({
+    warn,
+  } as unknown as typeof rootLogger);
+  return warn;
+}
+
+it("should not render or warn for the local participant", () => {
+  const warn = spyOnWarn();
+  const local = mockLocalParticipant({ identity: "@alice:DEV0" });
+  vi.mocked(useTracks).mockReturnValue([mockTrack(local)]);
+  const { queryAllByTestId } = render(
+    <MediaDevicesProvider value={mockMediaDevices({})}>
+      <LivekitRoomAudioRenderer
+        validIdentities={[]}
+        livekitRoom={{ remoteParticipants: new Map() } as unknown as Room}
+        url={""}
+      />
+    </MediaDevicesProvider>,
+  );
+  expect(queryAllByTestId("audio")).toHaveLength(0);
+  expect(warn).not.toHaveBeenCalled();
+});
+
+it("should warn only once per unexpected participant", () => {
+  const warn = spyOnWarn();
+  const { rerender } = renderTestComponent(
+    [{ userId: "@bob", deviceId: "DEV0" }],
+    ["@alice:DEV0"],
+    [
+      {
+        participantId: "@alice:DEV0",
+        kind: Track.Kind.Audio,
+        source: Track.Source.Microphone,
+      },
+    ],
+  );
+  expect(warn).toHaveBeenCalledTimes(1);
+  rerender(
+    <MediaDevicesProvider value={mockMediaDevices({})}>
+      <LivekitRoomAudioRenderer
+        validIdentities={[]}
+        livekitRoom={{ remoteParticipants: new Map() } as unknown as Room}
+        url={""}
+      />
+    </MediaDevicesProvider>,
+  );
+  expect(warn).toHaveBeenCalledTimes(1);
+});
+
 it("should not render without member", () => {
   const { container, queryAllByTestId } = renderTestComponent(
     [{ userId: "@bob", deviceId: "DEV0" }],
diff --git a/src/livekit/MatrixAudioRenderer.tsx b/src/livekit/MatrixAudioRenderer.tsx
index e3970e9f..95d68c05 100644
--- a/src/livekit/MatrixAudioRenderer.tsx
+++ b/src/livekit/MatrixAudioRenderer.tsx
@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { getTrackReferenceId } from "@livekit/components-core";
 import { type Room as LivekitRoom } from "livekit-client";
 import { type RemoteAudioTrack, Track } from "livekit-client";
-import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import {
   useTracks,
   AudioTrack,
@@ -60,6 +60,9 @@ export function LivekitRoomAudioRenderer({
   muted,
 }: MatrixAudioRendererProps): ReactNode {
   const logger = rootLogger.getChild("[MatrixAudioRenderer]");
+  // Identities we have already warned about, so that re-renders (which happen
+  // on every active speaker update) don't repeat the warning.
+  const warnedIdentities = useRef(new Set<string>());
   const tracks = useTracks(
     [
       Track.Source.Microphone,
@@ -72,22 +75,27 @@ export function LivekitRoomAudioRenderer({
       room: livekitRoom,
     },
   )
-    // Only keep audio tracks
-    .filter((ref) => ref.publication.kind === Track.Kind.Audio)
+    // Only keep remote audio tracks (we never render our own audio)
+    .filter(
+      (ref) =>
+        ref.publication.kind === Track.Kind.Audio && !ref.participant.isLocal,
+    )
     // Only keep tracks from participants that are in the validIdentities list
     .filter((ref) => {
-      const isValid = validIdentities.includes(ref.participant.identity);
-      if (!isValid) {
-        // TODO make sure to also skip the warn logging for the local identity
+      const { identity } = ref.participant;
+      const isValid = validIdentities.includes(identity);
+      if (!isValid && !warnedIdentities.current.has(identity)) {
+        warnedIdentities.current.add(identity);
         // Log that there is an invalid identity, that means that someone is publishing audio that is not expected to be in the call.
         logger.warn(
-          `Audio track ${ref.participant.identity} from ${url} has no matching matrix call member`,
+          `Audio track ${identity} from ${url} has no matching matrix call member`,
           `current members: ${validIdentities.join()}`,
           `track will not get rendered`,
         );
-        return false;
+      } else if (isValid) {
+        warnedIdentities.current.delete(identity);
       }
-      return true;
+      return isValid;
     });
 
   // This component is also (in addition to the "only play audio for connected members" logic above)

From 59ef5f5400c235b398f99f20a31a7fdc169fc8a9 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Wed, 9 Sep 2026 16:05:18 +0200
Subject: [PATCH 088/154] ci

---
 component/host.ts                           | 80 ++++++++++-----------
 component/index.tsx                         | 79 +++++++++++---------
 playwright.config.ts                        |  5 ++
 playwright/component/component-call.spec.ts | 11 ++-
 4 files changed, 100 insertions(+), 75 deletions(-)

diff --git a/component/host.ts b/component/host.ts
index 2a83a597..c0b2db89 100644
--- a/component/host.ts
+++ b/component/host.ts
@@ -141,47 +141,45 @@ export function useComponentHostBridge(
       requests.themeChange$.next({ data: { name: theme }, reply: () => {} });
   }, [requests, theme]);
 
-  const bridge = useInitial(
-    (): HostBridge => ({
-      setAlwaysOnScreen: async (alwaysOnScreen) => {
-        await latest.current.setAlwaysOnScreen?.(alwaysOnScreen);
-      },
-      contentLoaded: async () => {
-        await latest.current.contentLoaded?.();
-      },
-      notifyJoined: async () => {
-        await latest.current.notifyJoined?.();
-      },
-      notifyHungUp: async () => {
-        await latest.current.notifyHungUp?.();
-      },
-      notifyDeviceMute: async (state) => {
-        await latest.current.notifyDeviceMute?.(state);
-      },
-      // Whether these exist is itself information, so they are read through
-      // rather than wrapped unconditionally
-      get close() {
-        const close = latest.current.close;
-        return close === undefined
-          ? undefined
-          : async (): Promise<void> => await close();
-      },
-      // Not offered to a component host: the client it hands over holds the
-      // credentials to fetch media itself. A widget's client does not, which
-      // is what the internal bridge's `downloadMedia` is for.
-      get supportsReactions(): boolean {
-        return latest.current.supportsReactions ?? true;
-      },
-      get allowJoinUnmutedViaIntent(): boolean {
-        return latest.current.allowJoinUnmutedViaIntent ?? false;
-      },
-      // Whatever the host says or does not say, the account is its own: it
-      // signed the user in and handed us the client. So Element Call never
-      // offers to edit the profile from inside a component.
-      supportsProfileChanges: false,
-      ...requests,
-    }),
-  );
+  const bridge = useInitial((): HostBridge => ({
+    setAlwaysOnScreen: async (alwaysOnScreen) => {
+      await latest.current.setAlwaysOnScreen?.(alwaysOnScreen);
+    },
+    contentLoaded: async () => {
+      await latest.current.contentLoaded?.();
+    },
+    notifyJoined: async () => {
+      await latest.current.notifyJoined?.();
+    },
+    notifyHungUp: async () => {
+      await latest.current.notifyHungUp?.();
+    },
+    notifyDeviceMute: async (state) => {
+      await latest.current.notifyDeviceMute?.(state);
+    },
+    // Whether these exist is itself information, so they are read through
+    // rather than wrapped unconditionally
+    get close() {
+      const close = latest.current.close;
+      return close === undefined
+        ? undefined
+        : async (): Promise<void> => await close();
+    },
+    // Not offered to a component host: the client it hands over holds the
+    // credentials to fetch media itself. A widget's client does not, which
+    // is what the internal bridge's `downloadMedia` is for.
+    get supportsReactions(): boolean {
+      return latest.current.supportsReactions ?? true;
+    },
+    get allowJoinUnmutedViaIntent(): boolean {
+      return latest.current.allowJoinUnmutedViaIntent ?? false;
+    },
+    // Whatever the host says or does not say, the account is its own: it
+    // signed the user in and handed us the client. So Element Call never
+    // offers to edit the profile from inside a component.
+    supportsProfileChanges: false,
+    ...requests,
+  }));
 
   useImperativeHandle(
     ref,
diff --git a/component/index.tsx b/component/index.tsx
index 39bb1d29..b3f04e00 100644
--- a/component/index.tsx
+++ b/component/index.tsx
@@ -40,6 +40,7 @@ import {
   useEffect,
   useLayoutEffect,
   useMemo,
+  useRef,
   useState,
 } from "react";
 import { type MatrixClient } from "matrix-js-sdk";
@@ -298,43 +299,57 @@ export const ElementCall: FC<ElementCallProps> = ({
       `Element Call was asked to call in ${roomId}, which its host's client does not know about`,
     );
 
+  // Everything the call needs is in hand once these exist, and the first
+  // render with them is where the call itself appears: the moment the host
+  // is told that Element Call has loaded, as the widget tells its client once
+  // its own initialisation is over. Once per mount, however often the pieces
+  // are later swapped out.
+  const ready =
+    container !== null && rtcSession !== null && mediaDevices !== null;
+  const announcedLoaded = useRef(false);
+  useEffect(() => {
+    if (!ready || announcedLoaded.current) return;
+    announcedLoaded.current = true;
+    hostBridge
+      .contentLoaded()
+      .catch((e) => logger.error("Could not tell the host we had loaded", e));
+  }, [ready, hostBridge]);
+
   return (
     <I18nextProvider i18n={i18n}>
       <HostBridgeProvider value={hostBridge}>
         <UrlParamsProvider value={params}>
           <div ref={setContainer} className={styles.root}>
-            {container !== null &&
-              rtcSession !== null &&
-              mediaDevices !== null && (
-                <RootElementProvider value={container}>
-                  {/* Whatever goes wrong in here is shown in here. Left to
-                    propagate, an error would unmount the host's own tree. */}
-                  <ErrorBoundary
-                    fallback={(error) => <ErrorPage error={error} />}
-                    // A broken call should not hold the host on screen
-                    onError={() => void hostBridge.setAlwaysOnScreen(false)}
-                  >
-                    <Decoration>
-                      <TooltipProvider>
-                        <ClientProvider client={client}>
-                          <MediaDevicesContext value={mediaDevices}>
-                            <ProcessorProvider>
-                              <CallView
-                                client={client}
-                                rtcSession={rtcSession}
-                                isPasswordlessUser={false}
-                                confineToRoom={params.confineToRoom}
-                                preload={params.preload}
-                                skipLobby={params.skipLobby}
-                              />
-                            </ProcessorProvider>
-                          </MediaDevicesContext>
-                        </ClientProvider>
-                      </TooltipProvider>
-                    </Decoration>
-                  </ErrorBoundary>
-                </RootElementProvider>
-              )}
+            {ready && (
+              <RootElementProvider value={container}>
+                {/* Whatever goes wrong in here is shown in here. Left to
+                  propagate, an error would unmount the host's own tree. */}
+                <ErrorBoundary
+                  fallback={(error) => <ErrorPage error={error} />}
+                  // A broken call should not hold the host on screen
+                  onError={() => void hostBridge.setAlwaysOnScreen(false)}
+                >
+                  <Decoration>
+                    <TooltipProvider>
+                      <ClientProvider client={client}>
+                        <MediaDevicesContext value={mediaDevices}>
+                          <ProcessorProvider>
+                            <CallView
+                              client={client}
+                              rtcSession={rtcSession}
+                              isPasswordlessUser={false}
+                              confineToRoom={params.confineToRoom}
+                              preload={params.preload}
+                              skipLobby={params.skipLobby}
+                            />
+                          </ProcessorProvider>
+                        </MediaDevicesContext>
+                      </ClientProvider>
+                    </TooltipProvider>
+                  </Decoration>
+                </ErrorBoundary>
+              </RootElementProvider>
+            )}
           </div>
         </UrlParamsProvider>
       </HostBridgeProvider>
diff --git a/playwright.config.ts b/playwright.config.ts
index 73112c7a..e6dcc524 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -86,6 +86,11 @@ export default defineConfig({
             // enumerateDevices work on CI runners without real hardware.
             "media.navigator.streams.fake": true,
             "media.navigator.permission.disabled": true,
+            // Vite serves HTTPS over HTTP/2, and Firefox intermittently stalls
+            // on Node's HTTP/2 server with a page that never finishes loading
+            // (one run in five or so, locally). Every server in the suite
+            // still speaks HTTP/1.1, so nothing is lost by insisting on it.
+            "network.http.http2.enabled": false,
           },
         },
       },
diff --git a/playwright/component/component-call.spec.ts b/playwright/component/component-call.spec.ts
index 54e1a22a..a611ddc1 100644
--- a/playwright/component/component-call.spec.ts
+++ b/playwright/component/component-call.spec.ts
@@ -25,6 +25,11 @@ import { SpaHelpers } from "../spa-helpers.ts";
  * guaranteed both.
  */
 
+// Each test signs in twice, sets up crypto twice and syncs twice before
+// anything is on screen, and then waits for media to connect; the waits below
+// are sized for that, so the tests have to be too
+test.describe.configure({ timeout: 180_000 });
+
 /** The settings button, whichever of the two the footer is currently showing. */
 function settingsButton(pane: Locator): Locator {
   return pane
@@ -206,16 +211,18 @@ test("looks the same in a small container as in a small window", async ({
   browser,
 }) => {
   // Two calls to set up, one of them through the harness's two logins
-  test.setTimeout(240_000);
+  test.setTimeout(300_000);
   const size = { width: 300, height: 300 };
 
   // The reference is Element Call owning a window of that size, which is what
   // a mobile app's webview or a browser's picture-in-picture gives it, and
   // what its small-window styling was written for.
+  // No permissions to grant: each browser is launched with fake media that is
+  // handed out without asking (see playwright.config.ts), and Firefox rejects
+  // a request for `camera` or `microphone` outright
   const referenceContext = await browser.newContext({
     viewport: size,
     ignoreHTTPSErrors: true,
-    permissions: ["microphone", "camera"],
   });
   const referencePage = await referenceContext.newPage();
   await referencePage.goto("/");

From be5f3390f7f1472f6956dc3c3896b34df792ddec Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Wed, 9 Sep 2026 17:01:16 +0200
Subject: [PATCH 089/154] more tests

---
 src/UrlParams.test.ts            | 44 +++++++++++++++
 src/room/CallView.test.tsx       | 28 +++++++++-
 src/room/KnockLobbyView.test.tsx | 95 ++++++++++++++++++++++++++++++++
 src/state/MuteStates.test.ts     | 85 +++++++++++++++++++++++++++-
 4 files changed, 249 insertions(+), 3 deletions(-)
 create mode 100644 src/room/KnockLobbyView.test.tsx

diff --git a/src/UrlParams.test.ts b/src/UrlParams.test.ts
index 1078df86..65be8ae8 100644
--- a/src/UrlParams.test.ts
+++ b/src/UrlParams.test.ts
@@ -339,6 +339,50 @@ describe("UrlParams", () => {
         callIntent: "audio",
       });
     });
+
+    it("accepts start_call_dm_voice", () => {
+      expect(
+        computeUrlParams(
+          "?intent=start_call_dm_voice&widgetId=1234&parentUrl=parent.org",
+        ),
+      ).toMatchObject({
+        ...startNewCallDefaults("desktop"),
+        // A DM rings the other side and waits for them, whichever platform
+        sendNotificationType: "ring",
+        autoLeaveWhenOthersLeft: true,
+        waitForCallPickup: true,
+        callIntent: "audio",
+      });
+    });
+
+    it("accepts join_existing_dm", () => {
+      expect(
+        computeUrlParams(
+          "?intent=join_existing_dm&widgetId=1234&parentUrl=parent.org",
+        ),
+      ).toMatchObject({
+        ...joinExistingCallDefaults("desktop"),
+        // Straight in: the other side is already waiting
+        skipLobby: true,
+        autoLeaveWhenOthersLeft: true,
+        waitForCallPickup: false,
+        callIntent: "video",
+      });
+    });
+
+    it("accepts join_existing_dm_voice", () => {
+      expect(
+        computeUrlParams(
+          "?intent=join_existing_dm_voice&widgetId=1234&parentUrl=parent.org",
+        ),
+      ).toMatchObject({
+        ...joinExistingCallDefaults("desktop"),
+        skipLobby: true,
+        autoLeaveWhenOthersLeft: true,
+        waitForCallPickup: false,
+        callIntent: "audio",
+      });
+    });
   });
 
   describe("skipLobby", () => {
diff --git a/src/room/CallView.test.tsx b/src/room/CallView.test.tsx
index 522a4161..8ac920b8 100644
--- a/src/room/CallView.test.tsx
+++ b/src/room/CallView.test.tsx
@@ -36,6 +36,8 @@ import userEvent, {
 import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-container";
 import { useState } from "react";
 import { TooltipProvider } from "@vector-im/compound-web";
+import { Subject } from "rxjs";
+import { Room as LivekitRoom } from "livekit-client";
 
 import { prefetchSounds } from "../soundUtils";
 import { useAudioContext } from "../useAudioContext";
@@ -54,8 +56,10 @@ import { GroupCallErrorBoundary } from "./GroupCallErrorBoundary";
 import {
   type HostBridge,
   HostBridgeProvider,
+  type HostRequest,
   nullHostBridge,
 } from "../HostBridge";
+import { type JoinCallData } from "../widget";
 import { MatrixRTCTransportMissingError } from "../utils/errors";
 import { ProcessorProvider } from "../livekit/TrackProcessorContext";
 import { MediaDevicesContext } from "../MediaDevicesContext";
@@ -139,6 +143,8 @@ function createCallView(
   joined = true,
   options: {
     withErrorBoundary?: boolean;
+    /** Wait for the host to say when to join, rather than joining at once. */
+    preload?: boolean;
   } = {},
 ): {
   rtcSession: MatrixRTCSession;
@@ -176,7 +182,7 @@ function createCallView(
       client={client}
       isPasswordlessUser={false}
       confineToRoom={false}
-      preload={false}
+      preload={options.preload ?? false}
       // Straight into the (mocked) call, past the lobby
       skipLobby
       rtcSession={rtcSession.asMockedSession()}
@@ -283,6 +289,26 @@ test("Should ask the host to close when all other left and play a sound", async
   await waitFor(() => expect(close).toHaveBeenCalledOnce());
 }, 80000);
 
+test("Waits for the host to say when to join, when preloaded", async () => {
+  // Nothing to match device names against; the host names none anyway
+  vi.spyOn(LivekitRoom, "getLocalDevices").mockResolvedValue([]);
+  const join$ = new Subject<HostRequest<JoinCallData>>();
+  const hostBridge: HostBridge = { ...nullHostBridge, join$ };
+
+  createCallView(hostBridge, false, { preload: true });
+  await flushPromises();
+  // Past the lobby, but not in the call: the host has not asked yet
+  expect(screen.queryByText("Leave")).toBeNull();
+
+  const reply = vi.fn();
+  act(() =>
+    join$.next({ data: { audioInput: null, videoInput: null }, reply }),
+  );
+  // Then in the call, and the host told so
+  await waitFor(() => expect(reply).toHaveBeenCalledOnce());
+  expect(screen.getByText("Leave")).toBeInTheDocument();
+});
+
 test("Should not ask the host to close when auto leave due to error", async () => {
   const user = userEvent.setup();
 
diff --git a/src/room/KnockLobbyView.test.tsx b/src/room/KnockLobbyView.test.tsx
new file mode 100644
index 00000000..a513952b
--- /dev/null
+++ b/src/room/KnockLobbyView.test.tsx
@@ -0,0 +1,95 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { TooltipProvider } from "@vector-im/compound-web";
+import { type MatrixClient, type RoomSummary } from "matrix-js-sdk";
+
+import { KnockLobbyView } from "./KnockLobbyView";
+import { LeaveToHomeProvider } from "../LeaveToHomeContext";
+import { MediaDevicesContext } from "../MediaDevicesContext";
+import { type ProcessorState } from "../livekit/TrackProcessorContext";
+import { mockMediaDevices } from "../utils/test";
+
+vi.mock("@livekit/components-react", () => ({
+  usePreviewTracks: (): unknown[] => [],
+}));
+
+vi.mock("../livekit/TrackProcessorContext", () => ({
+  useTrackProcessor: (): ProcessorState => ({
+    supported: false,
+    processor: undefined,
+  }),
+  useTrackProcessorSync: (): void => {},
+}));
+
+vi.mock("react-use-measure", () => ({
+  default: (): [() => void, object] => [(): void => {}, {}],
+}));
+
+vi.mock("../settings/SettingsModal", () => ({
+  SettingsModal: (): null => null,
+  defaultSettingsTab: "general",
+}));
+
+const client = {
+  getUserId: () => "@user:example.org",
+  getDeviceId: () => "DEVICE",
+} as Partial<MatrixClient> as MatrixClient;
+
+// What peeking at a room we are not in tells us about it
+const roomSummary = {
+  room_id: "!room:example.org",
+  name: "Knock Room",
+  "im.nheko.summary.encryption": "m.megolm.v1.aes-sha2",
+} as Partial<RoomSummary> as RoomSummary;
+
+function renderKnockLobby(knock: (() => void) | null): void {
+  render(
+    <LeaveToHomeProvider value={vi.fn()}>
+      <MediaDevicesContext value={mockMediaDevices({})}>
+        <TooltipProvider>
+          <KnockLobbyView
+            client={client}
+            roomSummary={roomSummary}
+            profile={{ displayName: "Test User", avatarUrl: "" }}
+            knock={knock}
+            confineToRoom={false}
+            hideHeader={false}
+          />
+        </TooltipProvider>
+      </MediaDevicesContext>
+    </LeaveToHomeProvider>,
+  );
+}
+
+describe("KnockLobbyView", () => {
+  it("offers to ask to join, with what it knows of the room", async () => {
+    const knock = vi.fn();
+    renderKnockLobby(knock);
+
+    // The mute state arrives asynchronously, and the lobby with it
+    const button = await screen.findByTestId("lobby_joinCall");
+    expect(button).toHaveTextContent("Request to join call");
+    expect(button).toBeEnabled();
+    expect(screen.getByText("Knock Room")).toBeInTheDocument();
+
+    await userEvent.setup().click(button);
+    expect(knock).toHaveBeenCalledOnce();
+  });
+
+  it("waits once it has asked", async () => {
+    renderKnockLobby(null);
+
+    const button = await screen.findByTestId("lobby_joinCall");
+    expect(button).toHaveTextContent("Request sent!");
+    // Compound's button keeps focusable, saying so through ARIA instead
+    expect(button).toHaveAttribute("aria-disabled", "true");
+  });
+});
diff --git a/src/state/MuteStates.test.ts b/src/state/MuteStates.test.ts
index 239f0381..efccd70b 100644
--- a/src/state/MuteStates.test.ts
+++ b/src/state/MuteStates.test.ts
@@ -6,15 +6,22 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
-import { BehaviorSubject } from "rxjs";
+import { BehaviorSubject, NEVER, Subject } from "rxjs";
 import { logger } from "matrix-js-sdk/lib/logger";
 
-import { nullHostBridge } from "../HostBridge";
+import {
+  type DeviceMuteRequest,
+  type DeviceMuteState,
+  type HostBridge,
+  type HostRequest,
+  nullHostBridge,
+} from "../HostBridge";
 import { MuteStates, MuteState } from "./MuteStates";
 import {
   type AudioOutputDeviceLabel,
   type DeviceLabel,
   type MediaDevice,
+  type SelectedAudioInputDevice,
   type SelectedAudioOutputDevice,
   type SelectedDevice,
 } from "./MediaDevices";
@@ -221,6 +228,80 @@ describe("MuteStates", () => {
     };
   }
 
+  function aAudioInput(): MediaDevice<DeviceLabel, SelectedAudioInputDevice> {
+    return {
+      available$: constant(
+        new Map<string, DeviceLabel>([
+          ["mic0", { type: "name", name: "Built-in Microphone" }],
+        ]),
+      ),
+      selected$: constant({ id: "mic0", hardwareDeviceChange$: NEVER }),
+      select(): void {},
+    };
+  }
+
+  test("keeps the host informed and applies its mute requests", async () => {
+    const deviceMute$ = new Subject<
+      HostRequest<DeviceMuteRequest, DeviceMuteState>
+    >();
+    const notifyDeviceMute = vi.fn(async (): Promise<void> => {});
+    const hostBridge: HostBridge = {
+      ...nullHostBridge,
+      notifyDeviceMute,
+      deviceMute$,
+    };
+    const muteStates = new MuteStates(
+      testScope,
+      mockMediaDevices({
+        audioInput: aAudioInput(),
+        videoInput: aVideoInput(),
+      }),
+      { audioEnabled: true, videoEnabled: false },
+      hostBridge,
+    );
+    await flushPromises();
+
+    // The host hears the state we started in
+    expect(notifyDeviceMute).toHaveBeenLastCalledWith({
+      audio_enabled: true,
+      video_enabled: false,
+    });
+
+    // The host asks for the camera on, saying nothing about the microphone,
+    // which is left as it is
+    const reply = vi.fn();
+    deviceMute$.next({ data: { video_enabled: true }, reply });
+    await flushPromises();
+    expect(reply).toHaveBeenCalledExactlyOnceWith({
+      audio_enabled: true,
+      video_enabled: true,
+    });
+    expect(muteStates.audio.enabled$.value).toBe(true);
+    expect(muteStates.video.enabled$.value).toBe(true);
+    expect(notifyDeviceMute).toHaveBeenLastCalledWith({
+      audio_enabled: true,
+      video_enabled: true,
+    });
+
+    // Then for everything off
+    const replyAgain = vi.fn();
+    deviceMute$.next({
+      data: { audio_enabled: false, video_enabled: false },
+      reply: replyAgain,
+    });
+    await flushPromises();
+    expect(replyAgain).toHaveBeenCalledExactlyOnceWith({
+      audio_enabled: false,
+      video_enabled: false,
+    });
+    expect(muteStates.audio.enabled$.value).toBe(false);
+    expect(muteStates.video.enabled$.value).toBe(false);
+    expect(notifyDeviceMute).toHaveBeenLastCalledWith({
+      audio_enabled: false,
+      video_enabled: false,
+    });
+  });
+
   test("should mute camera when in earpiece mode", async () => {
     const audioOutputDevice = aAudioOutputDevices();
 

From be4023dd66b2af9f994ecf2a5b415aa8d82cbb37 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Wed, 9 Sep 2026 19:20:31 +0200
Subject: [PATCH 090/154] fix layout in spotlight (top inset)

---
 playwright/component/component-call.spec.ts | 26 +++++++++++++++++++++
 src/room/InCallView.tsx                     | 18 ++++++++++++--
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/playwright/component/component-call.spec.ts b/playwright/component/component-call.spec.ts
index a611ddc1..e4376ddb 100644
--- a/playwright/component/component-call.spec.ts
+++ b/playwright/component/component-call.spec.ts
@@ -92,6 +92,32 @@ test("keeps its modals inside the container it was given", async ({ page }) => {
   );
 });
 
+test("keeps the call inside the container, wherever the host put it", async ({
+  page,
+}) => {
+  const { username, roomId } = await createUserAndRoom("tileswithin");
+  const panes = await startHarness(page, username, roomId);
+  const pane = panes.first();
+  const container = pane.getByTestId("call-container");
+
+  // Large enough for the layout switch to be offered
+  await resizeContainer(container, { width: 900, height: 640 });
+  await pane.getByTestId("lobby_joinCall").click({ timeout: 60_000 });
+  await expect(pane.getByTestId("footer-container")).toBeVisible({
+    timeout: 60_000,
+  });
+
+  // The spotlight layout draws its tile in the fixed grid, which is positioned
+  // against Element Call's root rather than laid out in flow. The harness puts
+  // the container below a header of its own, so a grid offset measured from
+  // the top of the page instead of from the root would land the tile on top of
+  // the footer and out of the bottom of the container.
+  await pane.getByRole("radio", { name: "Spotlight" }).check();
+  const tile = pane.getByTestId("videoTile").first();
+  await expect(tile).toBeVisible({ timeout: 60_000 });
+  await expectWithin(tile, container);
+});
+
 test("leaves the host's own page unstyled", async ({ page }) => {
   const { username, roomId } = await createUserAndRoom("hoststyles");
   const panes = await startHarness(page, username, roomId);
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 13c2bffe..5f706cab 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -267,6 +267,20 @@ export const InCallView: FC<InCallViewProps> = ({
   // Merge the refs so they can attach to the same element
   const containerRef = useMergedRefs(containerRef1, containerRef2);
 
+  // The fixed grid is positioned against Element Call's root, so offsets
+  // handed to it have to be measured from there rather than from the
+  // viewport. Standalone the two are the same, the root being the page; for a
+  // component the root sits wherever the host put it, and measuring from the
+  // viewport would push the grid down by that much again. Taken at the same
+  // moment as `bounds`, so that the two agree however the host has scrolled.
+  const rootElement = useRootElement();
+  const rootTop = useMemo(
+    () => rootElement.getBoundingClientRect().top,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rootElement, bounds],
+  );
+  const topWithinRoot = bounds.top - rootTop;
+
   const { showControls, header: headerStyle } = useUrlParams();
 
   const muteAllAudio = useBehavior(muteAllAudio$);
@@ -564,7 +578,7 @@ export const InCallView: FC<InCallViewProps> = ({
         className={styles.fixedGrid}
         style={{
           // If not edge-to-edge, consume the header insets right here.
-          insetBlockStart: edgeToEdge ? 0 : bounds.top + headerBounds.height,
+          insetBlockStart: edgeToEdge ? 0 : topWithinRoot + headerBounds.height,
           height: edgeToEdge ? "100%" : gridBounds.height,
           // If edge-to-edge, compute new safe area insets that account for the
           // header and footer, passing them down to the tiles.
@@ -575,7 +589,7 @@ export const InCallView: FC<InCallViewProps> = ({
                 // itself. Otherwise account for the safe area and header size
                 // as part of the InCallView.
                 headerStyle === HeaderStyle.AppBar
-                ? `${bounds.top}px`
+                ? `${topWithinRoot}px`
                 : `calc(env(safe-area-inset-top) + ${headerBounds.height}px)`
               : undefined,
           "--call-view-safe-area-inset-bottom":

From 251535d371994d33c4a745a8c62aa2eae000f470 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 9 Sep 2026 17:42:33 +0000
Subject: [PATCH 091/154] Update dependency postcss-selector-parser to v7.1.3
 [SECURITY]

---
 pnpm-lock.yaml | 74 ++++++++++++++++++++------------------------------
 1 file changed, 30 insertions(+), 44 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bc71e38e..1f168929 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -225,7 +225,7 @@ importers:
         version: 10.6.1(postcss@8.5.26)
       postcss-selector-parser:
         specifier: ^7.1.1
-        version: 7.1.1
+        version: 7.1.3
       posthog-js:
         specifier: 1.408.2
         version: 1.408.2
@@ -5185,8 +5185,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  postcss-selector-parser@7.1.1:
-    resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
+  postcss-selector-parser@7.1.3:
+    resolution: {integrity: sha512-ajnd7iZnqjJDkyHNfznl/ZVO0lWqvBmQXfKKENx9/p/bEiF/L3eHwdydNUg9RXZx6xfZWOCmXmBa5oeB+YrAPQ==}
     engines: {node: '>=4'}
 
   postcss-value-parser@4.2.0:
@@ -6140,18 +6140,6 @@ packages:
       utf-8-validate:
         optional: true
 
-  ws@8.21.1:
-    resolution: {integrity: sha512-+0NTnW77fFN/DjQi6k/Sq/Yvk4Sgajw7urW8V+asjXnRgDs9gyGkdb7EzgfhA4goXsRIZKE28fzIXBHEzhuiWw==}
-    engines: {node: '>=10.0.0'}
-    peerDependencies:
-      bufferutil: ^4.0.1
-      utf-8-validate: '>=5.0.2'
-    peerDependenciesMeta:
-      bufferutil:
-        optional: true
-      utf-8-validate:
-        optional: true
-
   ws@8.21.3:
     resolution: {integrity: sha512-201TZ/kPWxoPr/OKWjquZR1SWKXcvxdH+e1xrx89b3YbmzLMFCLfnaG1HFIgWzJOEWZ7MvpK++odZufgYR50Rw==}
     engines: {node: '>=10.0.0'}
@@ -6437,9 +6425,9 @@ snapshots:
 
   '@csstools/postcss-cascade-layers@5.0.2(postcss@8.5.26)':
     dependencies:
-      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.3)
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.1
+      postcss-selector-parser: 7.1.3
 
   '@csstools/postcss-color-function-display-p3-linear@1.0.1(postcss@8.5.26)':
     dependencies:
@@ -6545,9 +6533,9 @@ snapshots:
 
   '@csstools/postcss-is-pseudo-class@5.0.3(postcss@8.5.26)':
     dependencies:
-      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.3)
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.1
+      postcss-selector-parser: 7.1.3
 
   '@csstools/postcss-light-dark-function@2.0.11(postcss@8.5.26)':
     dependencies:
@@ -6649,7 +6637,7 @@ snapshots:
   '@csstools/postcss-scope-pseudo-class@4.0.1(postcss@8.5.26)':
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.1
+      postcss-selector-parser: 7.1.3
 
   '@csstools/postcss-sign-functions@1.1.4(postcss@8.5.26)':
     dependencies:
@@ -6693,13 +6681,13 @@ snapshots:
     dependencies:
       postcss: 8.5.26
 
-  '@csstools/selector-resolve-nested@3.1.0(postcss-selector-parser@7.1.1)':
+  '@csstools/selector-resolve-nested@3.1.0(postcss-selector-parser@7.1.3)':
     dependencies:
-      postcss-selector-parser: 7.1.1
+      postcss-selector-parser: 7.1.3
 
-  '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.1)':
+  '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.3)':
     dependencies:
-      postcss-selector-parser: 7.1.1
+      postcss-selector-parser: 7.1.3
 
   '@csstools/utilities@2.0.0(postcss@8.5.26)':
     dependencies:
@@ -7067,7 +7055,7 @@ snapshots:
 
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/sourcemap-codec': 1.6.0
       '@jridgewell/trace-mapping': 0.3.31
 
   '@jridgewell/remapping@2.3.5':
@@ -7089,7 +7077,7 @@ snapshots:
   '@jridgewell/trace-mapping@0.3.31':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/sourcemap-codec': 1.6.0
 
   '@livekit/components-core@0.12.15(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)':
     dependencies:
@@ -8765,7 +8753,7 @@ snapshots:
       sirv: 3.0.2
       tinyrainbow: 3.1.1
       vitest: 4.1.11(@opentelemetry/api@1.9.1)(@types/node@24.13.3)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(@vitest/ui@4.1.11)(jsdom@26.1.0(supports-color@7.2.0))(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
-      ws: 8.21.1
+      ws: 8.21.3
     transitivePeerDependencies:
       - bufferutil
       - msw
@@ -9256,13 +9244,13 @@ snapshots:
   css-blank-pseudo@7.0.1(postcss@8.5.26):
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.1
+      postcss-selector-parser: 7.1.3
 
   css-has-pseudo@7.0.3(postcss@8.5.26):
     dependencies:
-      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.3)
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.1
+      postcss-selector-parser: 7.1.3
       postcss-value-parser: 4.2.0
 
   css-prefers-color-scheme@10.0.0(postcss@8.5.26):
@@ -10247,7 +10235,7 @@ snapshots:
 
   magic-string@0.30.21:
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/sourcemap-codec': 1.6.0
 
   magic-string@0.30.8:
     dependencies:
@@ -10722,7 +10710,7 @@ snapshots:
   postcss-attribute-case-insensitive@7.0.1(postcss@8.5.26):
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.1
+      postcss-selector-parser: 7.1.3
 
   postcss-clamp@4.1.0(postcss@8.5.26):
     dependencies:
@@ -10773,12 +10761,12 @@ snapshots:
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.1
+      postcss-selector-parser: 7.1.3
 
   postcss-dir-pseudo-class@9.0.1(postcss@8.5.26):
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.1
+      postcss-selector-parser: 7.1.3
 
   postcss-double-position-gradients@6.0.4(postcss@8.5.26):
     dependencies:
@@ -10790,12 +10778,12 @@ snapshots:
   postcss-focus-visible@10.0.1(postcss@8.5.26):
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.1
+      postcss-selector-parser: 7.1.3
 
   postcss-focus-within@9.0.1(postcss@8.5.26):
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.1
+      postcss-selector-parser: 7.1.3
 
   postcss-font-variant@5.0.0(postcss@8.5.26):
     dependencies:
@@ -10827,10 +10815,10 @@ snapshots:
 
   postcss-nesting@13.0.2(postcss@8.5.26):
     dependencies:
-      '@csstools/selector-resolve-nested': 3.1.0(postcss-selector-parser@7.1.1)
-      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.1)
+      '@csstools/selector-resolve-nested': 3.1.0(postcss-selector-parser@7.1.3)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.3)
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.1
+      postcss-selector-parser: 7.1.3
 
   postcss-opacity-percentage@3.0.0(postcss@8.5.26):
     dependencies:
@@ -10928,7 +10916,7 @@ snapshots:
   postcss-pseudo-class-any-link@10.0.1(postcss@8.5.26):
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.1
+      postcss-selector-parser: 7.1.3
 
   postcss-replace-overflow-wrap@4.0.0(postcss@8.5.26):
     dependencies:
@@ -10937,9 +10925,9 @@ snapshots:
   postcss-selector-not@8.0.1(postcss@8.5.26):
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.1
+      postcss-selector-parser: 7.1.3
 
-  postcss-selector-parser@7.1.1:
+  postcss-selector-parser@7.1.3:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
@@ -11879,8 +11867,6 @@ snapshots:
 
   ws@8.21.0: {}
 
-  ws@8.21.1: {}
-
   ws@8.21.3: {}
 
   wsl-utils@0.1.0:

From 21d7f24f61c556fa1d40dff42302cd68168f388e Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Thu, 10 Sep 2026 12:06:54 +0200
Subject: [PATCH 092/154] Bump lk-jwt-service to 0.7.0 in the docker setup and
 integrate it as an app service

---
 backend/app-service-othersite.yaml           | 17 +++++++++++
 backend/app-service.yaml                     | 17 +++++++++++
 backend/dev_homeserver-othersite.yaml        |  7 +++++
 backend/dev_homeserver.yaml                  |  7 +++++
 backend/playwright_homeserver-othersite.yaml |  7 +++++
 backend/playwright_homeserver.yaml           |  7 +++++
 docker-compose-dev.yml                       | 32 +++++++++++++++++---
 docker-compose-playwright.yml                | 10 ++++--
 8 files changed, 98 insertions(+), 6 deletions(-)
 create mode 100644 backend/app-service-othersite.yaml
 create mode 100644 backend/app-service.yaml

diff --git a/backend/app-service-othersite.yaml b/backend/app-service-othersite.yaml
new file mode 100644
index 00000000..ef2a7ada
--- /dev/null
+++ b/backend/app-service-othersite.yaml
@@ -0,0 +1,17 @@
+id: "lk-jwt-service-othersite"
+as_token: "ec_dev_as_token_othersite_0123456789ab"
+hs_token: "ec_dev_hs_token_othersite_0123456789ab"
+sender_localpart: "_lk_jwt_service"
+namespaces:
+  users:
+    - exclusive: false
+      regex: "@.*:homeserver-1" # Cover all local users
+# Required for Synapse to call POST /_matrix/app/v1/ping on this service.
+url: "http://auth-server-1:16080"
+# Enable membership look-ups via /is_joined.
+io.element.msc4502.scopes:
+  ["urn:matrix:client:io.element.msc4502:rooms:is_joined"]
+# Route /_matrix/client/(v*|unstable/*)/rtc/livekit/* C-S and S-S requests to this
+# service.
+io.element.msc4512.proxy_prefix: "rtc/livekit"
+io.element.msc4512.proxy_url: "http://auth-server-1:16080"
diff --git a/backend/app-service.yaml b/backend/app-service.yaml
new file mode 100644
index 00000000..b480df64
--- /dev/null
+++ b/backend/app-service.yaml
@@ -0,0 +1,17 @@
+id: "lk-jwt-service"
+as_token: "ec_dev_as_token_main_0123456789ab"
+hs_token: "ec_dev_hs_token_main_0123456789ab"
+sender_localpart: "_lk_jwt_service"
+namespaces:
+  users:
+    - exclusive: false
+      regex: "@.*:homeserver" # Cover all local users
+# Required for Synapse to call POST /_matrix/app/v1/ping on this service.
+url: "http://auth-server:6080"
+# Enable membership look-ups via /is_joined.
+io.element.msc4502.scopes:
+  ["urn:matrix:client:io.element.msc4502:rooms:is_joined"]
+# Route /_matrix/client/(v*|unstable/*)/rtc/livekit/* C-S and S-S requests to this
+# service.
+io.element.msc4512.proxy_prefix: "rtc/livekit"
+io.element.msc4512.proxy_url: "http://auth-server:6080"
diff --git a/backend/dev_homeserver-othersite.yaml b/backend/dev_homeserver-othersite.yaml
index 3f4c1841..18f98650 100644
--- a/backend/dev_homeserver-othersite.yaml
+++ b/backend/dev_homeserver-othersite.yaml
@@ -42,6 +42,13 @@ experimental_features:
   msc4354_enabled: true
   # MatrixRTC
   msc4143_enabled: true
+  # Enable membership look-up via /is_joined.
+  msc4502_enabled: true
+  # Enable C-S & S-S request proxying for application services.
+  msc4512_enabled: true
+
+app_service_config_files:
+  - /data/cfg/app-service.yaml
 
 # The maximum allowed duration by which sent events can be delayed, as
 # per MSC4140. Must be a positive value if set.  Defaults to no
diff --git a/backend/dev_homeserver.yaml b/backend/dev_homeserver.yaml
index e38e91e5..e99a5093 100644
--- a/backend/dev_homeserver.yaml
+++ b/backend/dev_homeserver.yaml
@@ -42,6 +42,13 @@ experimental_features:
   msc4354_enabled: true
   # MatrixRTC
   msc4143_enabled: true
+  # Enable membership look-up via /is_joined.
+  msc4502_enabled: true
+  # Enable C-S & S-S request proxying for application services.
+  msc4512_enabled: true
+
+app_service_config_files:
+  - /data/cfg/app-service.yaml
 
 # The maximum allowed duration by which sent events can be delayed, as
 # per MSC4140. Must be a positive value if set.  Defaults to no
diff --git a/backend/playwright_homeserver-othersite.yaml b/backend/playwright_homeserver-othersite.yaml
index 5bce4c1d..a647b74a 100644
--- a/backend/playwright_homeserver-othersite.yaml
+++ b/backend/playwright_homeserver-othersite.yaml
@@ -42,6 +42,13 @@ experimental_features:
   msc4354_enabled: true
   # MatrixRTC
   msc4143_enabled: true
+  # Enable membership look-up via /is_joined.
+  msc4502_enabled: true
+  # Enable C-S & S-S request proxying for application services.
+  msc4512_enabled: true
+
+app_service_config_files:
+  - /data/cfg/app-service.yaml
 
 # The maximum allowed duration by which sent events can be delayed, as
 # per MSC4140. Must be a positive value if set.  Defaults to no
diff --git a/backend/playwright_homeserver.yaml b/backend/playwright_homeserver.yaml
index d0439e42..8497c017 100644
--- a/backend/playwright_homeserver.yaml
+++ b/backend/playwright_homeserver.yaml
@@ -42,6 +42,13 @@ experimental_features:
   msc4354_enabled: true
   # MatrixRTC
   msc4143_enabled: true
+  # Enable membership look-up via /is_joined.
+  msc4502_enabled: true
+  # Enable C-S & S-S request proxying for application services.
+  msc4512_enabled: true
+
+app_service_config_files:
+  - /data/cfg/app-service.yaml
 
 # The maximum allowed duration by which sent events can be delayed, as
 # per MSC4140. Must be a positive value if set.  Defaults to no
diff --git a/docker-compose-dev.yml b/docker-compose-dev.yml
index 3dc86f2f..3de89ec3 100644
--- a/docker-compose-dev.yml
+++ b/docker-compose-dev.yml
@@ -3,7 +3,7 @@ networks:
 
 services:
   auth-service:
-    image: ghcr.io/element-hq/lk-jwt-service:0.4.4
+    image: ghcr.io/element-hq/lk-jwt-service:0.7.0
     pull_policy: always
     hostname: auth-server
     environment:
@@ -15,6 +15,14 @@ services:
       # a self-signed certificate
       - LIVEKIT_INSECURE_SKIP_VERIFY_TLS=YES_I_KNOW_WHAT_I_AM_DOING
       - LIVEKIT_FULL_ACCESS_HOMESERVERS=*
+      # Registers this instance as an application service on the main homeserver
+      - LIVEKIT_AS_REGISTRATION_FILE=/etc/lk-jwt-service/app-service.yaml
+      - LIVEKIT_HS_SERVER_NAME=synapse.m.localhost
+      # Neither homeserver serves /.well-known/matrix/client, so the C-S API
+      # location has to be given explicitly.
+      - LIVEKIT_CS_API_URL_OVERRIDES=synapse.m.localhost=http://homeserver:8008,synapse.othersite.m.localhost=http://homeserver-1:18008
+    volumes:
+      - ./backend/app-service.yaml:/etc/lk-jwt-service/app-service.yaml:Z
     deploy:
       restart_policy:
         condition: on-failure
@@ -25,7 +33,7 @@ services:
       - ecbackend
 
   auth-service-1:
-    image: ghcr.io/element-hq/lk-jwt-service:0.4.4
+    image: ghcr.io/element-hq/lk-jwt-service:0.7.0
     pull_policy: always
     hostname: auth-server-1
     environment:
@@ -37,6 +45,14 @@ services:
       # a self-signed certificate
       - LIVEKIT_INSECURE_SKIP_VERIFY_TLS=YES_I_KNOW_WHAT_I_AM_DOING
       - LIVEKIT_FULL_ACCESS_HOMESERVERS=*
+      # Registers this instance as an application service on the other homeserver.
+      - LIVEKIT_AS_REGISTRATION_FILE=/etc/lk-jwt-service/app-service.yaml
+      - LIVEKIT_HS_SERVER_NAME=synapse.othersite.m.localhost
+      # Neither homeserver serves /.well-known/matrix/client, so the C-S API
+      # location has to be given explicitly.
+      - LIVEKIT_CS_API_URL_OVERRIDES=synapse.m.localhost=http://homeserver:8008,synapse.othersite.m.localhost=http://homeserver-1:18008
+    volumes:
+      - ./backend/app-service-othersite.yaml:/etc/lk-jwt-service/app-service.yaml:Z
     deploy:
       restart_policy:
         condition: on-failure
@@ -94,7 +110,10 @@ services:
 
   synapse:
     hostname: homeserver
-    image: ghcr.io/element-hq/synapse:latest
+    # develop (not latest) is required for application service C-S/S-S proxying
+    # (MSC4512) and membership look-ups (MSC4502), which are not in a stable
+    # release yet.
+    image: ghcr.io/element-hq/synapse:develop
     pull_policy: always
     environment:
       - SYNAPSE_CONFIG_PATH=/data/cfg/homeserver.yaml
@@ -107,12 +126,16 @@ services:
     volumes:
       - ./backend/synapse_tmp:/data:Z
       - ./backend/dev_homeserver.yaml:/data/cfg/homeserver.yaml:Z
+      - ./backend/app-service.yaml:/data/cfg/app-service.yaml:Z
     networks:
       - ecbackend
 
   synapse-1:
     hostname: homeserver-1
-    image: ghcr.io/element-hq/synapse:latest
+    # develop (not latest) is required for application service C-S/S-S proxying
+    # (MSC4512) and membership look-ups (MSC4502), which are not in a stable
+    # release yet.
+    image: ghcr.io/element-hq/synapse:develop
     pull_policy: always
     environment:
       - SYNAPSE_CONFIG_PATH=/data/cfg/homeserver.yaml
@@ -125,6 +148,7 @@ services:
     volumes:
       - ./backend/synapse_tmp_othersite:/data:Z
       - ./backend/dev_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
+      - ./backend/app-service-othersite.yaml:/data/cfg/app-service.yaml:Z
     networks:
       - ecbackend
 
diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index 0c7f5a89..424f1c65 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -3,12 +3,18 @@
 services:
   synapse:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/synapse:latest@sha256:da325af40104051923899e5f5a2f1d537e6e3ccf2f0f38285689ae9bbfdb190a
+    # develop (not latest) is required for application service C-S/S-S proxying
+    # (MSC4512) and membership look-ups (MSC4502), which are not in a stable
+    # release yet.
+    image: ghcr.io/element-hq/synapse:develop@sha256:337921fd22be310d453344b2265f6c9942315446595df3cf81866f71ca2055a7
     volumes:
       - ./backend/playwright_homeserver.yaml:/data/cfg/homeserver.yaml:Z
   synapse-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/synapse:latest@sha256:da325af40104051923899e5f5a2f1d537e6e3ccf2f0f38285689ae9bbfdb190a
+    # develop (not latest) is required for application service C-S/S-S proxying
+    # (MSC4512) and membership look-ups (MSC4502), which are not in a stable
+    # release yet.
+    image: ghcr.io/element-hq/synapse:develop@sha256:337921fd22be310d453344b2265f6c9942315446595df3cf81866f71ca2055a7
     volumes:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:

From 344aac21f99fa235d1da9a3efe81c5c3f08b8cac Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Thu, 10 Sep 2026 14:15:38 +0200
Subject: [PATCH 093/154] Force undelegated mode in tests

---
 playwright/reconnect.spec.ts       |  8 ++++++++
 playwright/spa-call-sticky.spec.ts | 12 +++++++++++-
 playwright/spa-helpers.ts          | 19 +++++++++++++++++++
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/playwright/reconnect.spec.ts b/playwright/reconnect.spec.ts
index bd4dd199..81e70b9c 100644
--- a/playwright/reconnect.spec.ts
+++ b/playwright/reconnect.spec.ts
@@ -7,6 +7,8 @@ Please see LICENSE in the repository root for full details.
 
 import { expect, test } from "@playwright/test";
 
+import { SpaHelpers } from "./spa-helpers";
+
 // Skip test for Firefox, due to page.keyboard.press("Tab") not reliable on headless mode
 test.skip(
   ({ browserName }) => browserName === "firefox",
@@ -17,6 +19,12 @@ test("can only interact with header and footer while reconnecting", async ({
   page,
 }) => {
   await page.goto("/");
+
+  // The reconnecting state is entered via the probablyLeft timer, which
+  // mirrors the delayed leave event's timeout. With delegation that timeout
+  // is one hour, putting it out of reach of the clock fast-forward below.
+  // Keep the leave client-managed so its short timeout applies.
+  await SpaHelpers.disableLeaveDelegation(page);
   await page.getByTestId("home_callName").click();
   await page.getByTestId("home_callName").fill("Test call");
   await page.getByTestId("home_displayName").click();
diff --git a/playwright/spa-call-sticky.spec.ts b/playwright/spa-call-sticky.spec.ts
index 1dbda735..b45399da 100644
--- a/playwright/spa-call-sticky.spec.ts
+++ b/playwright/spa-call-sticky.spec.ts
@@ -19,6 +19,7 @@ async function setupTwoUserSpaCall(
   browser: Browser,
   page: Page,
   browserName: string,
+  opts: { disableGuestLeaveDelegation?: boolean } = {},
 ): Promise<{ guestPage: Page }> {
   test.skip(
     browserName === "firefox",
@@ -52,6 +53,9 @@ async function setupTwoUserSpaCall(
 
   await guestPage.goto("/");
 
+  if (opts.disableGuestLeaveDelegation)
+    await SpaHelpers.disableLeaveDelegation(guestPage);
+
   let pevaraHasSentStickyEvent = false;
 
   const pevaraResolver = Promise.withResolvers<void>();
@@ -102,7 +106,13 @@ test("One to One rejoin after improper leave does not crash EC", async ({
   page,
   browserName,
 }) => {
-  const { guestPage } = await setupTwoUserSpaCall(browser, page, browserName);
+  // With delegation, the backend sends the guest's delayed leave event within
+  // moments of the improper leave, so the stale membership this test needs
+  // would be cleaned up before the rejoin. Keep the guest's leave
+  // client-managed so the stale membership lingers.
+  const { guestPage } = await setupTwoUserSpaCall(browser, page, browserName, {
+    disableGuestLeaveDelegation: true,
+  });
 
   await SpaHelpers.expectVideoTilesCount(page, 2);
   await SpaHelpers.expectVideoTilesCount(guestPage, 2);
diff --git a/playwright/spa-helpers.ts b/playwright/spa-helpers.ts
index 5f99e32d..71150b8b 100644
--- a/playwright/spa-helpers.ts
+++ b/playwright/spa-helpers.ts
@@ -111,6 +111,24 @@ async function setRtcModeFromSettings(
   await page.getByTestId("modal_close").click();
 }
 
+/**
+ * Makes the delayed-leave delegation support probes fail so that the client
+ * manages its delayed leave event itself instead of delegating it to the
+ * backend.
+ *
+ * Must be installed before the page joins a call.
+ */
+async function disableLeaveDelegation(page: Page): Promise<void> {
+  // Covers both the transport probe (<livekit_service_url>/delegate_delayed_leave)
+  // and the homeserver probe (MSC4195, .../rtc/livekit/delegate_delayed_leave).
+  await page.route("**/delegate_delayed_leave", async (route) =>
+    route.fulfill({
+      status: 404,
+      headers: { "Access-Control-Allow-Origin": "*" },
+    }),
+  );
+}
+
 /**
  * Expect a certain number of video tiles to be present and visible.
  */
@@ -133,5 +151,6 @@ export const SpaHelpers = {
   createCall,
   getCallInviteLink,
   joinCallFromInviteLink,
+  disableLeaveDelegation,
   expectVideoTilesCount,
 };

From b284bb00c06cc14fa5e83eac1e008bfbcf905008 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 10 Sep 2026 18:28:57 +0100
Subject: [PATCH 094/154] Cover the stopProcessor failure path and
 trackProcessorSync

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GSB8Qb89KDoTNRV83dWJHa
---
 src/livekit/TrackProcessorContext.test.ts | 27 ++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/livekit/TrackProcessorContext.test.ts b/src/livekit/TrackProcessorContext.test.ts
index 732fa530..96a04aa4 100644
--- a/src/livekit/TrackProcessorContext.test.ts
+++ b/src/livekit/TrackProcessorContext.test.ts
@@ -12,7 +12,9 @@ import {
   type ProcessorWrapper,
 } from "@livekit/track-processors";
 
-import { applyProcessor } from "./TrackProcessorContext";
+import { applyProcessor, trackProcessorSync } from "./TrackProcessorContext";
+import { constant } from "../state/Behavior";
+import { testScope } from "../utils/test";
 
 const processor = {} as ProcessorWrapper<BackgroundOptions>;
 
@@ -59,4 +61,27 @@ describe("applyProcessor", () => {
     applyProcessor(track, undefined);
     expect(track.stopProcessor).toHaveBeenCalled();
   });
+
+  it("does not surface a rejected stopProcessor", async () => {
+    const track = mockTrack("live", processor);
+    vi.mocked(track.stopProcessor).mockRejectedValue(new Error("nope"));
+    const unhandled = vi.fn();
+    process.on("unhandledRejection", unhandled);
+    applyProcessor(track, undefined);
+    await new Promise((r) => setTimeout(r, 0));
+    process.off("unhandledRejection", unhandled);
+    expect(unhandled).not.toHaveBeenCalled();
+  });
+});
+
+describe("trackProcessorSync", () => {
+  it("applies the processor to the current track", () => {
+    const track = mockTrack("live");
+    trackProcessorSync(
+      testScope(),
+      constant(track),
+      constant({ supported: true, processor }),
+    );
+    expect(track.setProcessor).toHaveBeenCalledWith(processor);
+  });
 });

From 1695d3f5180af85f0c431e41a50a2f2e25fd4280 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Thu, 10 Sep 2026 21:15:48 +0200
Subject: [PATCH 095/154] Use flushPromises for readability

---
 src/livekit/TrackProcessorContext.test.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/livekit/TrackProcessorContext.test.ts b/src/livekit/TrackProcessorContext.test.ts
index 96a04aa4..5b977bd4 100644
--- a/src/livekit/TrackProcessorContext.test.ts
+++ b/src/livekit/TrackProcessorContext.test.ts
@@ -14,7 +14,7 @@ import {
 
 import { applyProcessor, trackProcessorSync } from "./TrackProcessorContext";
 import { constant } from "../state/Behavior";
-import { testScope } from "../utils/test";
+import { flushPromises, testScope } from "../utils/test";
 
 const processor = {} as ProcessorWrapper<BackgroundOptions>;
 
@@ -51,7 +51,7 @@ describe("applyProcessor", () => {
     const unhandled = vi.fn();
     process.on("unhandledRejection", unhandled);
     applyProcessor(track, processor);
-    await new Promise((r) => setTimeout(r, 0));
+    await flushPromises();
     process.off("unhandledRejection", unhandled);
     expect(unhandled).not.toHaveBeenCalled();
   });
@@ -68,7 +68,7 @@ describe("applyProcessor", () => {
     const unhandled = vi.fn();
     process.on("unhandledRejection", unhandled);
     applyProcessor(track, undefined);
-    await new Promise((r) => setTimeout(r, 0));
+    await flushPromises();
     process.off("unhandledRejection", unhandled);
     expect(unhandled).not.toHaveBeenCalled();
   });

From a58a5f615f39fa1110e7c9ebfe3af8dd40962604 Mon Sep 17 00:00:00 2001
From: fkwp <fkwp@users.noreply.github.com>
Date: Fri, 11 Sep 2026 15:12:15 +0200
Subject: [PATCH 096/154] Add AGENTS.md documenting the repo's conventions
 (#4256)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add AGENTS.md documenting the repo's conventions

Codifies what is currently tribal knowledge or only discoverable by reading CI
config: the view model / view contract, the rule that nothing reads the page,
Clean Code ordering, the three test layers, and reuse-before-you-build.

The root AGENTS.md is the always-loaded minimum and routes to docs/agents/, so
an agent loads only the detail its task needs.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

* Allow either hand at the commit, and measure continuous redraws

Committing from the agent rules out running it where there is no git
identity, a sandbox included. Either is now fine: commit on the user's
word where the setup allows it, or write the message and hand it over.

Redrawing continuously is the other addition. A level meter reported a
fresh value every animation frame, so its whole menu reconciled sixty
times a second, silence included, and nobody noticed until review. A PR
that adds anything of the kind now says what it costs, or better, counts
the redraws — commits rather than render calls, since React runs a
component it then discards.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .gitignore                  |  3 ++
 AGENTS.md                   | 54 +++++++++++++++++++++++++
 docs/README.md              |  9 +++++
 docs/agents/architecture.md | 79 +++++++++++++++++++++++++++++++++++++
 docs/agents/code-style.md   | 74 ++++++++++++++++++++++++++++++++++
 docs/agents/testing.md      | 53 +++++++++++++++++++++++++
 docs/agents/workflow.md     | 50 +++++++++++++++++++++++
 7 files changed, 322 insertions(+)
 create mode 100644 AGENTS.md
 create mode 100644 docs/agents/architecture.md
 create mode 100644 docs/agents/code-style.md
 create mode 100644 docs/agents/testing.md
 create mode 100644 docs/agents/workflow.md

diff --git a/.gitignore b/.gitignore
index e9225072..14e96439 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,9 @@ public/config.json
 backend/synapse_tmp/*
 backend/synapse_tmp_othersite/*
 /coverage
+
+# Transient agent scratch files
+/agent-workspace/
 config.json
 
 # Yarn
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 00000000..f0a94112
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,54 @@
+# AGENTS.md — Element Call
+
+MatrixRTC (MSC4143) + LiveKit video calling, shipped standalone, as a widget in
+Element Web and Element X, as embedded packages, and as a React component in a
+host's page. It is the MatrixRTC reference implementation.
+
+## Non-negotiables
+
+- Features and UI changes need a pre-approved issue. No issue, no review.
+- Exactly one `PR-*` label per PR. CI enforces it; it drives the changelog.
+- New behaviour ships with unit tests, a story if it renders, and an e2e spec if it
+  is user-facing. All three.
+- Reuse an existing component. If you genuinely cannot, say so in the PR body and
+  name what you rejected — never add a new one silently.
+- Nothing reads the page. No `window.location`, `document.body`, `window.inner*`,
+  `@media`, global `i18next` or the `widget` global — take it from a provider.
+- The change works standalone, as a widget and as a component. Say what you checked.
+- Every gate below is green before you push.
+- Hand off after the first implementation, before the quality pass. Then commit on
+  the user's word where the setup allows it, or hand them the message.
+
+## Read before you
+
+| …                                | …                                                          |
+| -------------------------------- | ---------------------------------------------------------- |
+| start a task of any size         | [docs/agents/workflow.md](docs/agents/workflow.md)         |
+| touch call logic or a view model | [docs/agents/architecture.md](docs/agents/architecture.md) |
+| write any code                   | [docs/agents/code-style.md](docs/agents/code-style.md)     |
+| write a test, story or e2e spec  | [docs/agents/testing.md](docs/agents/testing.md)           |
+| open a PR                        | [CONTRIBUTING.md](CONTRIBUTING.md)                         |
+| implement from a feature spec    | [FEATURES_SPEC/AGENTS.md](FEATURES_SPEC/AGENTS.md)         |
+
+## Gates
+
+```sh
+pnpm lint            # tsc, oxlint, knip, component externals
+pnpm format          # oxfmt
+pnpm test            # vitest: unit and storybook projects
+pnpm i18n:check
+```
+
+`knip` fails on dead code; a file deliberately inert ahead of its consumer goes in
+`knip.ts` `ignoreFiles` with a reason.
+
+## A good PR
+
+- One slice, under ~400 changed lines, green on its own, linked to its issue.
+- View model + marble tests, thin view, a story per state, an e2e spec.
+- Any new shared component called out explicitly, with why nothing existing fit.
+- Template filled for real: what, why, before/after screenshots, repro steps.
+- Anything that redraws continuously — an animation frame, a stream — says what it
+  costs, or better, counts the redraws in a test.
+- Branch `<handle>/<topic>`. Plain imperative commit subjects, no prefixes.
+- Once review starts, fix forward. Never force-push a regeneration over a review.
diff --git a/docs/README.md b/docs/README.md
index c4b60c2f..8bd14846 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -9,3 +9,12 @@ This folder contains documentation for setup, usage, and development of Element
 - [MatrixRTC modes](./matrix_rtc_modes.md)
 - [Self-Hosting](./self_hosting.md)
 - [Developing with linked packages](./linking.md)
+
+### Writing code for Element Call (agent-readable conventions)
+
+Entry point: [AGENTS.md](../AGENTS.md).
+
+- [Agent workflow](./agents/workflow.md)
+- [Architecture](./agents/architecture.md)
+- [Code style](./agents/code-style.md)
+- [Testing](./agents/testing.md)
diff --git a/docs/agents/architecture.md b/docs/agents/architecture.md
new file mode 100644
index 00000000..92cac257
--- /dev/null
+++ b/docs/agents/architecture.md
@@ -0,0 +1,79 @@
+# Architecture
+
+## Logic lives in view models; components render
+
+- Call logic lives in `src/state/`. A component that derives call state is
+  misplaced logic.
+- Composing behaviors: a factory taking `(scope, ...deps$)`, returning named
+  behaviors plus callbacks. Copy `src/state/LayoutSwitchViewModel.ts`. Prefer this
+  for anything new.
+- Owning a resource: a class taking the scope in its constructor — `MediaDevices`,
+  `MuteStates`, `TileStore`, `Publisher`, `Connection`. Both styles are current;
+  don't convert one to the other in passing.
+- `foo$` is an observable. `Behavior<T>`, an observable with a current value, is
+  the default for anything a view reads.
+
+## The view model / view contract
+
+- Components take `vm: ViewModel<Snapshot>` and read state through `useBehavior`.
+  See `CallFooter`, `InCallView`, `LobbyView`, `SettingsModal`.
+- A snapshot is `Actions & State`; every field becomes a `foo$` behavior, and none
+  is optional.
+- An unavailable action is `undefined`, not a separate `canDoThing` flag — the
+  presence of the callback drives the rendering.
+- Subscribe in an effect only to drive a side effect off an event stream, as
+  `ReactionAudioRenderer` does; never to read state a behavior already holds.
+
+## Scopes own lifetimes
+
+- `ObservableScope` bounds every subscription a view model creates.
+- Reference only the scope defined in the same function; one captured from an
+  enclosing scope outlives its owner, and `no-observablescope-leak` rejects it.
+
+## Nothing reads the page
+
+Element Call can be mounted several times inside a host's React tree, so it owns
+neither window, URL, document nor router. Each seam defaults to the old standalone
+and widget behaviour.
+
+| Never                                         | Use                                                           |
+| --------------------------------------------- | ------------------------------------------------------------- |
+| the `widget` global                           | `useHostBridge()` — `src/HostBridge.ts`                       |
+| `getUrlParams()`, `window.location`           | `useUrlParams()`                                              |
+| `useNavigate("/")`, `<Link to="/">`           | `useLeaveToHome()`, `LeaveToHomeLink`                         |
+| `document.body`                               | `useRootElement()`                                            |
+| `window.innerWidth/Height`, `useMediaQuery`   | `useRootSizeMatches()` in views, `windowSize$` in view models |
+| global `i18next`                              | the instance in `src/utils/i18n.ts`                           |
+| config or analytics reading their environment | `Config.initWith()`, `PosthogAnalytics.configure()`           |
+
+- View models take values as options, never `getUrlParams()`
+  (`callViewModelOptionsFromParams`, `CallViewModelOptions.hostBridge`).
+- The host bridge is the only channel to the host: `createWidgetHostBridge(widget)`,
+  `nullHostBridge` standalone, `useComponentHostBridge`. State a capability
+  (`supportsReactions`, `supportsProfileChanges`); never infer it from being a
+  widget.
+- Shortcuts and portals attach to the root element, so two instances don't fight.
+- Known debt, not precedent: `Grid` measures `window.innerHeight`; `ErrorView`'s
+  reload and `getAbsoluteRoomUrl` use `window.location`; recaptcha appends to
+  `document.body` on the standalone login path.
+
+## Context differences are options, not checks
+
+- Named options with per-intent defaults (`configurationForIntent`), never a
+  runtime check for who is hosting.
+- `controlledAudioDevices`, not the platform, is what makes `MediaDevices` pick
+  `AndroidControlledAudioOutput` / `IOSControlledAudioOutput` over the web
+  `AudioOutput`. Intent presets set it on non-desktop; standalone leaves it off.
+- URL params are a published contract: change one, update `docs/url_params.md`.
+
+## Build targets
+
+Code that builds in only one is a bug.
+
+- `build:full` — standalone app, also widget mode.
+- `build:embedded` — `@element-hq/element-call-embedded`.
+- `build:sdk` — SDK library, entry `sdk/main.ts`.
+- `build:component` — `@element-hq/element-call-component`, sources in `component/`
+  (its own pnpm project; run pnpm from the repo root). Host API is in the README;
+  `pnpm lint:externals` rejects an import of a `react` / `react-dom` /
+  `matrix-js-sdk` / `livekit-client` subpath the externals list omits.
diff --git a/docs/agents/code-style.md b/docs/agents/code-style.md
new file mode 100644
index 00000000..1907aaf8
--- /dev/null
+++ b/docs/agents/code-style.md
@@ -0,0 +1,74 @@
+# Code style
+
+_Clean Code_ (Robert C. Martin): small functions, intention-revealing names, low
+noise.
+
+## Reuse before you build
+
+Look before you write, in this order:
+
+1. **Compound Web** — `@vector-im/compound-web` for buttons, tooltips, alerts,
+   dialogs, menus, form controls, avatars; icons in
+   `@vector-im/compound-design-tokens/assets/web/icons`.
+2. **This repo** — `src/button/`, `src/components/`, `src/input/`, `src/form/`,
+   `src/tabs/`, and `Modal`, `Avatar`, `Toast`, `Slider`, `ErrorView`,
+   `FullScreenView` at the root of `src/`.
+3. **The nearest existing feature** — grep for the same shape first. A hook is
+   often what you want to extract, not a component.
+
+If nothing fits, name the new shared component in the PR body and say what you
+rejected and why — never add one silently. Extend or parameterise before forking,
+and extract shared logic into a hook both callers use before copying it; if you
+copy, the PR says so.
+
+## Ordering
+
+- **Newspaper order.** Headline first, detail down. A file opens with what it
+  exists to provide.
+- **Stepdown rule.** Caller above callee. A helper used by one function sits
+  beneath it, which needs a `function` declaration, not a `const` arrow. Existing
+  arrow components above their callers are not a pattern to extend — nor to churn.
+- **Suites.** Test cases first, helpers below. Older suites invert this; follow the
+  rule in new ones, don't reorder old ones.
+- **Names.** What a thing means, not what it is made of: `naturalLayout$`, not
+  `computedLayout$`. Comments explain why, never what.
+
+## TypeScript, React and RxJS idiom win on a clash
+
+- Hooks stay unconditional at the top of a component.
+- `useCallback` / `useMemo` dependency arrays sometimes force inlining.
+- An RxJS pipeline stays one expression. Name the behavior, not each operator.
+- A long factory is fine when it reads as a list of named behaviors.
+  `CallViewModel.ts` is long because the domain is.
+- Marble test tables are dense on purpose.
+
+## Enforced by lint
+
+- Copyright header on every file: `Copyright <current year> Element Creations Ltd.`
+  plus the AGPL / commercial SPDX line.
+- `logger` from `matrix-js-sdk/lib/logger`, never `console`, and no top-level
+  `logger.getChild()`. The `console` ban is only enforced under `src/*/**`.
+- No floating or misused promises; async functions typed `Promise<T>`.
+- Inline type imports (`import { type Foo }`), so matrix-js-sdk stays lazily
+  loadable.
+- Deep-import `matrix-js-sdk/lib/<module>` as the codebase does. Banned is the bare
+  `matrix-js-sdk/lib`, `lib/index` and anything under `src/`.
+
+## CSS
+
+- Compound components and `--cpd-*` tokens in CSS modules. A hardcoded colour or px
+  spacing is a design question, not a licence to inline a hex.
+- Size against the root, not the window: `@container element-call (…)` and
+  `cqw` / `cqh`, never `@media (width)` or `vw` / `vh`. Media queries stay correct
+  only in standalone-only views — home, login.
+- Style `[data-element-call-root]`, never `body` or `:root`; the component build
+  makes those stand for the root (`component/build/scopeStylesToRoot.ts`).
+
+## Strings and a11y
+
+- Strings through `t()`: add the key, run `pnpm i18n`, fill `locales/en/app.json`.
+  Other locales come from Localazy; never hand-edit them.
+- `t` from `useTranslation()`, or `src/utils/i18n.ts` outside React. Never the
+  `i18next` global — several instances share a page.
+- Accessible names on controls, `aria-pressed` on toggles, keyboard reachability.
+  `jsx-a11y` rules are errors; `vitest-axe` is available.
diff --git a/docs/agents/testing.md b/docs/agents/testing.md
new file mode 100644
index 00000000..35a9548a
--- /dev/null
+++ b/docs/agents/testing.md
@@ -0,0 +1,53 @@
+# Testing
+
+Three layers; a user-facing feature needs all three. Unit proves the logic,
+Storybook proves the rendering, e2e proves the feature. Codecov gates 80% on the
+lines a PR touches.
+
+## Unit
+
+- View model tests use `withTestScheduler` + `testScope()` from `src/utils/test.ts`
+  and read as ASCII timelines. Copy `LayoutSwitchViewModel.test.ts`.
+- Component tests use Testing Library, queried by role and accessible name.
+- Reuse the factories in `src/utils/test.ts` — `mockRemoteParticipant`,
+  `mockMatrixRoom`, `mockLivekitRoom`, `MockRTCSession`. Hand-rolled mocks drift.
+- Snapshots live in `__snapshots__/`; update with `pnpm test <Name> -u`.
+- How often something redraws is testable: drive the frames and count commits, not
+  render calls. An effect with no dependency array runs once per commit.
+- `component/**/*.test.ts` runs in the same jsdom project as `src`.
+
+## Storybook
+
+A deliverable, not documentation: `pnpm test:storybook` runs every story as a real
+browser test in the same CI job as the unit suite. **A UI change without a story is
+incomplete.** Only three stories exist so far, so copy `CallFooter.stories.tsx`.
+
+- Drive the component from a snapshot via `useStaticViewModel`, never internals.
+- One named story per state that matters — loading, error, empty, denied, mobile.
+- Assert in a `play` function with `userEvent` / `expect` from `storybook/test`.
+- Mobile is `globals: { viewport: { value: "mobile2" } }`, not a second component.
+- Expose interesting props through `argTypes`.
+
+`.storybook/preview.tsx` supplies `TooltipProvider`, `src/index.css` and English
+translations. The browser is Playwright's, so a fresh clone needs
+`pnpm playwright install` once.
+
+## End-to-end
+
+- `playwright/*.spec.ts` — standalone, on Chromium and Firefox.
+- `playwright/widget/` — widget mode, where cross-context bugs surface.
+- `playwright/component/` — the component in a host page, via the harness on port
+  3001 that Playwright starts as a second web server. Catches container-relative
+  layout, styles escaping the root, two instances on a page, host-bridge reports.
+- `playwright/mobile/` — Pixel 7, `mobile` project only.
+
+Test what a user observes: the peer sees the change, it survives a reconnect, it is
+right after a reload. Reuse `playwright/spa-helpers.ts`,
+`playwright/widget/test-helpers.ts`, `playwright/fixtures/`.
+
+```sh
+pnpm test                   # unit + storybook
+pnpm backend                # Synapse + LiveKit, required for e2e
+pnpm test:playwright        # or :open
+pnpm dev:component          # component harness, port 3001
+```
diff --git a/docs/agents/workflow.md b/docs/agents/workflow.md
new file mode 100644
index 00000000..2170f4a8
--- /dev/null
+++ b/docs/agents/workflow.md
@@ -0,0 +1,50 @@
+# Agent workflow
+
+## Scratch files live in `agent-workspace/`
+
+Git-ignored. One kebab-case subfolder per task, matching the branch topic:
+`agent-workspace/<slug>/`.
+
+| File                        | Purpose                                                                          |
+| --------------------------- | -------------------------------------------------------------------------------- |
+| `plan.md`                   | The concrete approach — files, symbols, edit order — once direction is confirmed |
+| `commit-msg.txt`            | `git commit -F agent-workspace/<slug>/commit-msg.txt`                            |
+| `pr-body.md`                | `gh pr create --body-file agent-workspace/<slug>/pr-body.md`                     |
+| `implementation-summary.md` | What was built, decisions, trade-offs                                            |
+| `NN-prompt.md`              | Raw prompt text, numbered, when worth keeping                                    |
+
+- Nothing here is durable. The folder is ignored, so anything worth keeping is
+  promoted into the PR body, a doc, or a feature spec before the task ends.
+- Never write scratch files to the repo root. Stray `load_test_summary.md` and
+  `config.json_` files are what this folder prevents.
+- Start `pr-body.md` from `.github/PULL_REQUEST_TEMPLATE.md` and fill every
+  section.
+- Commit subjects are plain imperative English. No conventional-commits prefixes.
+- A `plan.md` and a feature spec sit at different altitudes; neither replaces the
+  other. A spec in `FEATURES_SPEC/` is durable and deliberately abstract —
+  behaviour, decisions, acceptance criteria — so the feature can be rebuilt against
+  a `main` nobody has seen yet. A plan is one slice of it landing on today's
+  `main`: the paths, symbols and edit order the spec's decisions and criteria must
+  not name. `FEATURES_SPEC/AGENTS.md` wins wherever the two genuinely overlap.
+
+## Hand off before the quality pass
+
+- Implement the change, run the narrowest check that rules out an obviously broken
+  handoff, then stop and ask whether the direction is right.
+- Full `pnpm lint`, the whole suite, coverage and benchmarks come after the
+  direction is confirmed.
+- Wider refactors, extra tests and documentation polish are follow-up work, not
+  part of the first handoff.
+- If a check is needed before feedback, keep it to the touched code and say why.
+
+## Commit and PR readiness
+
+- Commit once the user confirms direction, or asks for one. Not before. Where the
+  setup has no git identity, a sandbox included, write the message to
+  `commit-msg.txt` and hand it over instead.
+- Ready means every gate in [AGENTS.md](../../AGENTS.md#gates) is green and the
+  change is covered at the layers [testing.md](./testing.md) asks for. Read the diff
+  against [code-style.md](./code-style.md) first.
+- Re-run the whole checklist after any fix. Only on green, either way.
+- Once a human has started reviewing, fix forward — never force-push a
+  regeneration over a review in progress.

From 16b2c31ebb3ccd07eebe20a41ec2d928d0a7b812 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 11 Sep 2026 18:12:21 +0100
Subject: [PATCH 097/154] Always log LiveKit ICE candidates and states to the
 rageshake

LiveKit's livekit-ice logger records each local ICE candidate, ICE
candidate errors and ICE connection state changes, but only at debug,
which we cap to info unless extended LiveKit logs are switched on. That
means a 'could not establish pc connection' rageshake carries no way to
tell 'no relay candidates at all' from 'relay candidates that never
paired'. Keep that one logger at debug regardless of the toggle.
---
 src/initializer.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/initializer.tsx b/src/initializer.tsx
index 76a7fcc3..23c93a6f 100644
--- a/src/initializer.tsx
+++ b/src/initializer.tsx
@@ -25,6 +25,7 @@ import {
 import {
   setLogExtension as setLKLogExtension,
   setLogLevel as setLKLogLevel,
+  LoggerNames as LKLoggerNames,
 } from "livekit-client";
 
 import { getUrlParams } from "./UrlParams";
@@ -226,6 +227,9 @@ export class Initializer {
 
     enableExtendedLivekitLogs.value$.subscribe((enabled) => {
       setLKLogLevel(enabled ? "trace" : "info");
+      // ICE candidate types and connection states are what you need to diagnose
+      // "could not establish pc connection", so always keep those in the rageshake
+      setLKLogLevel("debug", LKLoggerNames.ICE);
     });
 
     window.setLKLogLevel = setLKLogLevel;

From 60463378773d302bef8ea3732de6c29bfc066310 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 14 Sep 2026 02:37:28 +0000
Subject: [PATCH 098/154] Update dependency livekit-client to v2.22.3

---
 pnpm-lock.yaml | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1f168929..2d81f4fa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -39,13 +39,13 @@ importers:
         version: 11.7.12
       '@livekit/components-core':
         specifier: ^0.12.0
-        version: 0.12.15(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)
+        version: 0.12.15(livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)
       '@livekit/components-react':
         specifier: ^2.0.0
-        version: 2.9.24(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tslib@2.8.1)
+        version: 2.9.24(livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tslib@2.8.1)
       '@livekit/track-processors':
         specifier: ^0.7.1
-        version: 0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))
+        version: 0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22))
       '@mediapipe/tasks-vision':
         specifier: ^0.10.18
         version: 0.10.35
@@ -183,7 +183,7 @@ importers:
         version: 5.88.1(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)(@types/node@24.13.3)(typescript@5.9.3)
       livekit-client:
         specifier: ^2.18.1
-        version: 2.22.2(@types/dom-mediacapture-record@1.0.22)
+        version: 2.22.3(@types/dom-mediacapture-record@1.0.22)
       lodash-es:
         specifier: ^4.17.21
         version: 4.18.1
@@ -4605,8 +4605,8 @@ packages:
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
-  livekit-client@2.22.2:
-    resolution: {integrity: sha512-o3yLYoH2eHVR/DmIZzgC96FMvtR4+g/DjeqNwS5zp12EjqrqiRULxm6Oq/YsTE97WnA6fhy23+a2hGkbce5SPA==}
+  livekit-client@2.22.3:
+    resolution: {integrity: sha512-jw9zBKXY5Gtr5MZ7vEON3QhMNccuDvYHck1PFSyG1aaateQPqgKZFBMgZkFZaXHIf9RV4MDW5xpTK2b/+qbwOg==}
     peerDependencies:
       '@types/dom-mediacapture-record': ^1
 
@@ -7079,21 +7079,21 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.6.0
 
-  '@livekit/components-core@0.12.15(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)':
+  '@livekit/components-core@0.12.15(livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)':
     dependencies:
       '@floating-ui/dom': 1.7.6
-      livekit-client: 2.22.2(@types/dom-mediacapture-record@1.0.22)
+      livekit-client: 2.22.3(@types/dom-mediacapture-record@1.0.22)
       loglevel: 1.9.1
       rxjs: 7.8.2
       tslib: 2.8.1
 
-  '@livekit/components-react@2.9.24(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tslib@2.8.1)':
+  '@livekit/components-react@2.9.24(livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tslib@2.8.1)':
     dependencies:
-      '@livekit/components-core': 0.12.15(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)
+      '@livekit/components-core': 0.12.15(livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)
       clsx: 2.1.1
       events: 3.3.0
       jose: 6.2.9
-      livekit-client: 2.22.2(@types/dom-mediacapture-record@1.0.22)
+      livekit-client: 2.22.3(@types/dom-mediacapture-record@1.0.22)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
       tslib: 2.8.1
@@ -7105,11 +7105,11 @@ snapshots:
     dependencies:
       '@bufbuild/protobuf': 1.10.1
 
-  '@livekit/track-processors@0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))':
+  '@livekit/track-processors@0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22))':
     dependencies:
       '@mediapipe/tasks-vision': 0.10.35
       '@types/dom-mediacapture-transform': 0.1.11
-      livekit-client: 2.22.2(@types/dom-mediacapture-record@1.0.22)
+      livekit-client: 2.22.3(@types/dom-mediacapture-record@1.0.22)
 
   '@matrix-org/matrix-sdk-crypto-wasm@18.5.0': {}
 
@@ -10180,7 +10180,7 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
-  livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22):
+  livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22):
     dependencies:
       '@livekit/mutex': 1.1.1
       '@livekit/protocol': 1.50.4

From 5d38a13c46299b004f65355f24ea36eb80e0531c Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 14 Sep 2026 08:51:33 +0000
Subject: [PATCH 099/154] Update ghcr.io/element-hq/element-web:develop Docker
 digest to 9d8d8fc (#4243)

* Update ghcr.io/element-hq/element-web:develop Docker digest to 1850bf6

* Adapt to latest EW

* Reformat

* Next try

* Fix regexp

* Fix DM path

* Next try

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Johannes Marbach <n0-0ne+github@mailbox.org>
---
 docker-compose-playwright.yml      |  4 ++--
 playwright/fixtures/widget-user.ts | 17 ++++++++++++----
 playwright/widget/test-helpers.ts  | 31 ++++++++++++++++++++++++++----
 3 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index 424f1c65..90c36a2a 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -19,7 +19,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:6ed62b2963ae098a1f79521eb516834dcf29452168e281cc359d9cfb4380adf6
+    image: ghcr.io/element-hq/element-web:develop@sha256:1850bf66c2eab668aedfc48c280dbdeae3a03f0c59946b0631ffa0c97a3716ff
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:6ed62b2963ae098a1f79521eb516834dcf29452168e281cc359d9cfb4380adf6
+    image: ghcr.io/element-hq/element-web:develop@sha256:1850bf66c2eab668aedfc48c280dbdeae3a03f0c59946b0631ffa0c97a3716ff
diff --git a/playwright/fixtures/widget-user.ts b/playwright/fixtures/widget-user.ts
index 74d9ad8e..35c2d9fb 100644
--- a/playwright/fixtures/widget-user.ts
+++ b/playwright/fixtures/widget-user.ts
@@ -109,10 +109,15 @@ export const widgetTest = test.extend<MyFixtures>({
       await TestHelpers.dismissInviteUnknownUserModal(ewPage1);
 
       // Accept the invite
+      await TestHelpers.closeReleaseAnnouncement(
+        ewPage2,
+        "Introducing Sections",
+      );
+      await TestHelpers.expandAllSections(ewPage2);
       await expect(
-        ewPage2.getByRole("option", { name: "Welcome Room" }),
+        TestHelpers.roomListItem(ewPage2, "Welcome Room"),
       ).toBeVisible();
-      await ewPage2.getByRole("option", { name: "Welcome Room" }).click();
+      await TestHelpers.roomListItem(ewPage2, "Welcome Room").click();
       await ewPage2.getByRole("button", { name: "Accept" }).click();
       await expect(
         ewPage2
@@ -152,8 +157,12 @@ export const widgetTest = test.extend<MyFixtures>({
       ).toBeVisible();
 
       // Accept the DM invite from brooks
-      // This how playwright record selects the DM invite in the room list
-      await ewPage2.getByRole("button", { name: "Open room" }).click();
+      await TestHelpers.closeReleaseAnnouncement(
+        ewPage2,
+        "Introducing Sections",
+      );
+      await TestHelpers.expandAllSections(ewPage2);
+      await TestHelpers.roomListItem(ewPage2, brooksDisplayName).click();
       await ewPage2.getByRole("button", { name: "Start chatting" }).click();
     }
 
diff --git a/playwright/widget/test-helpers.ts b/playwright/widget/test-helpers.ts
index 0322596a..331b35ac 100644
--- a/playwright/widget/test-helpers.ts
+++ b/playwright/widget/test-helpers.ts
@@ -11,6 +11,7 @@ import {
   type JSHandle,
   type Page,
   type FrameLocator,
+  type Locator,
 } from "@playwright/test";
 import { type MatrixClient } from "matrix-js-sdk";
 
@@ -203,6 +204,16 @@ export class TestHelpers {
     }
   }
 
+  public static async expandAllSections(page: Page): Promise<void> {
+    try {
+      await page
+        .getByRole("button", { name: "Expand all sections" })
+        .click({ timeout: 2000 });
+    } catch {
+      // Already expanded or button not present
+    }
+  }
+
   public static async createRoom(
     name: string,
     page: Page,
@@ -253,9 +264,9 @@ export class TestHelpers {
     roomName: string,
     page: Page,
   ): Promise<void> {
-    await page.getByRole("option", { name: roomName }).click({
-      timeout: 10000,
-    });
+    await TestHelpers.closeReleaseAnnouncement(page, "Introducing Sections");
+    await TestHelpers.expandAllSections(page);
+    await TestHelpers.roomListItem(page, roomName).click({ timeout: 10000 });
     await page.getByRole("button", { name: "Accept" }).click({
       timeout: 5000,
     });
@@ -350,6 +361,17 @@ export class TestHelpers {
       .click();
   }
 
+  /**
+   * Locates a room in the room list by its name.
+   *
+   * Matches on the aria-label prefix because the item's role differs between
+   * the flat room list (`option`) and the sectioned room list (`button`), and
+   * the label may carry a suffix such as " invitation.".
+   */
+  public static roomListItem(page: Page, roomName: string): Locator {
+    return page.locator(`[aria-label^="Open room ${roomName}"]`);
+  }
+
   /**
    * Switches to a room in the room list by its name.
    * @param page - The EW page
@@ -359,7 +381,8 @@ export class TestHelpers {
     page: Page,
     roomName: string,
   ): Promise<void> {
-    await page.getByRole("option", { name: `Open room ${roomName}` }).click();
+    await TestHelpers.expandAllSections(page);
+    await TestHelpers.roomListItem(page, roomName).click();
   }
 
   public static async dismissInviteUnknownUserModal(page: Page): Promise<void> {

From 71593f1a245b1afa971e3940596e1c500edf9548 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 15 Sep 2026 02:40:31 +0000
Subject: [PATCH 100/154] Update ghcr.io/element-hq/element-web:develop Docker
 digest to c76d299 (#4260)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 docker-compose-playwright.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index 90c36a2a..df79000c 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -19,7 +19,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:1850bf66c2eab668aedfc48c280dbdeae3a03f0c59946b0631ffa0c97a3716ff
+    image: ghcr.io/element-hq/element-web:develop@sha256:c76d29903090eeb08ff625272277ede02ea8ee93cbaa067b77adfa89c89a494d
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:1850bf66c2eab668aedfc48c280dbdeae3a03f0c59946b0631ffa0c97a3716ff
+    image: ghcr.io/element-hq/element-web:develop@sha256:c76d29903090eeb08ff625272277ede02ea8ee93cbaa067b77adfa89c89a494d

From 967a06ba395db824c28235d6d53a8b910ad4d5c5 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 16 Sep 2026 00:29:13 +0000
Subject: [PATCH 101/154] Update ghcr.io/element-hq/element-web:develop Docker
 digest to 506caaa (#4262)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 docker-compose-playwright.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index df79000c..13b36bba 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -19,7 +19,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:c76d29903090eeb08ff625272277ede02ea8ee93cbaa067b77adfa89c89a494d
+    image: ghcr.io/element-hq/element-web:develop@sha256:506caaa98cf29ab0cb5f221d69612625350e70391937367a9f2f592816b14a62
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:c76d29903090eeb08ff625272277ede02ea8ee93cbaa067b77adfa89c89a494d
+    image: ghcr.io/element-hq/element-web:develop@sha256:506caaa98cf29ab0cb5f221d69612625350e70391937367a9f2f592816b14a62

From f56c74adf9590284a28d9a9900f7a7de516319f3 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 17 Sep 2026 00:51:42 +0000
Subject: [PATCH 102/154] Update ghcr.io/element-hq/element-web:develop Docker
 digest to 3993d53 (#4265)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 docker-compose-playwright.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index 13b36bba..0b2de08e 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -19,7 +19,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:506caaa98cf29ab0cb5f221d69612625350e70391937367a9f2f592816b14a62
+    image: ghcr.io/element-hq/element-web:develop@sha256:3993d53bc2c784c0376b86e00230aef0ee2c9a705b2166e9229555117e8db167
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:506caaa98cf29ab0cb5f221d69612625350e70391937367a9f2f592816b14a62
+    image: ghcr.io/element-hq/element-web:develop@sha256:3993d53bc2c784c0376b86e00230aef0ee2c9a705b2166e9229555117e8db167

From 9f6c8bb434202385a240bedf506beec3c5b6f9fe Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Thu, 17 Sep 2026 13:44:25 +0200
Subject: [PATCH 103/154] Make the memberId dependent on the matrixRTC mode.
 This outherwise creates to-device messages with the uuid for members that use
 the userId:deviceId memberId in the state event.

---
 src/state/CallViewModel/CallViewModel.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/state/CallViewModel/CallViewModel.ts b/src/state/CallViewModel/CallViewModel.ts
index 957a56fa..b2c763c2 100644
--- a/src/state/CallViewModel/CallViewModel.ts
+++ b/src/state/CallViewModel/CallViewModel.ts
@@ -563,8 +563,14 @@ export function createCallViewModel$(
   const ownMembershipIdentity: CallMembershipIdentityParts = {
     userId,
     deviceId,
-    // This will only be consumed by the sticky membership manager. So it has no impact on legacy calls.
-    memberId: uuidv4(),
+    // Consumed by the sticky membership manager as `member.id`, *and* stamped
+    // into every to-device key event by the key transport. A pre-sticky
+    // membership advertises `${userId}:${deviceId}` as its `membershipID`
+    // instead, so a uuid there names a member no peer can resolve.
+    memberId:
+      matrixRTCMode === MatrixRTCMode.Matrix_2_0
+        ? uuidv4()
+        : `${userId}:${deviceId}`,
   };
 
   const localTransport =

From 8ebb0b5a908a5611476ff4aef1c767ab36eac763 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Sat, 19 Sep 2026 08:38:47 +0200
Subject: [PATCH 104/154] Export component related types.

---
 README.md                     |  29 +++-
 component/api.ts              | 124 +++++++++++++++++
 component/index.tsx           | 102 +-------------
 component/package.json        |   4 +
 component/tsconfig.build.json |   6 +-
 docs/agents/architecture.md   |   5 +-
 src/UrlConfiguration.ts       | 242 ++++++++++++++++++++++++++++++++++
 src/UrlParams.ts              | 239 +++------------------------------
 vite-component.config.ts      |  15 ++-
 9 files changed, 436 insertions(+), 330 deletions(-)
 create mode 100644 component/api.ts
 create mode 100644 src/UrlConfiguration.ts

diff --git a/README.md b/README.md
index 84910ed5..e7f9a62d 100644
--- a/README.md
+++ b/README.md
@@ -34,16 +34,16 @@ You can find the latest development version continuously deployed to
 ## ✨ Key Features
 
 ✅ **Decentralized & Federated** – No central authority; works across Matrix
-homeservers.  
-✅ **End-to-End Encrypted** – Secure and private calls.  
+homeservers.
+✅ **End-to-End Encrypted** – Secure and private calls.
 ✅ **Standalone, Widget & Component Mode** – Use as an independent app, embed
 in Matrix clients as a widget, or (experimentally) mount it as a React component
-inside your own application.  
-✅ **WebRTC-based** – No additional software required.  
+inside your own application.
+✅ **WebRTC-based** – No additional software required.
 ✅ **Scalable with LiveKit** – Supports large meetings via SFU
-([MSC4195: MatrixRTC using LiveKit backend](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md)).  
+([MSC4195: MatrixRTC using LiveKit backend](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md)).
 ✅ **Raise Hand** – Participants can signal when they want to speak, helping to
-organize the flow of the meeting.  
+organize the flow of the meeting.
 ✅ **Emoji Reactions** – Users can react with emojis 👍️ 🎉 👏 🤘, adding
 engagement and interactivity to the conversation.
 
@@ -309,6 +309,23 @@ root. The host imports the component from
 `react-dom`, `matrix-js-sdk` and `livekit-client` itself, since the bundle leaves
 them external.
 
+The component is large, and a host will usually load it lazily, only once a
+call is shown. Everything a host needs in order to talk about a call before
+then is also exported
+from `@element-hq/element-call-component/api` (a small entry point that does not
+load the component).
+
+- props and the types they are made of
+- the handle
+- the host bridge
+- `UserIntent`
+- `HeaderStyle`
+- `BackgroundStyle` enums
+- `configurationForIntent`, the defaults each intent implies
+  Import from it wherever a value such as
+  `BackgroundStyle.Solid` is needed on a path that must stay light; the main
+  entry point re-exports all of it too.
+
 ### Backend
 
 A docker compose file `docker-compose-dev.yml` is provided to start the
diff --git a/component/api.ts b/component/api.ts
new file mode 100644
index 00000000..c9e7a2fd
--- /dev/null
+++ b/component/api.ts
@@ -0,0 +1,124 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+/**
+ * EXPERIMENTAL
+ *
+ * What a host needs in order to talk about Element Call, without Element Call:
+ * the component's props and the types they are made of, the handle and the
+ * host bridge, the intents a call can be started with and the configuration
+ * each implies.
+ *
+ * This is an entry point of its own, `@element-hq/element-call-component/api`,
+ * so that a host can import it on a path that must stay light — a call model
+ * that needs `BackgroundStyle.Solid` as a value, say — and load the component
+ * itself, and everything it brings, only when a call is shown. The main entry
+ * point re-exports all of it, so a host that does not care may import
+ * everything from there.
+ *
+ * Nothing in here may reach anything that is not a type or a constant: the
+ * point of this module is what it does not import.
+ */
+
+import type { Ref } from "react";
+import type { MatrixClient } from "matrix-js-sdk";
+
+import type { UrlProperties } from "../src/UrlParams";
+import type { ElementCallHandle, ElementCallHostBridge } from "./host";
+import {
+  BackgroundStyle,
+  configurationForIntent,
+  HeaderStyle,
+  type UrlConfiguration,
+  UserIntent,
+} from "../src/UrlConfiguration";
+
+// How the host and Element Call talk to each other, and what they say
+export type { ElementCallHandle, ElementCallHostBridge } from "./host";
+export type { DeviceMuteRequest, DeviceMuteState } from "../src/HostBridge";
+export type { JoinCallData } from "../src/widget";
+// The deployment-wide configuration, as distinct from ElementCallConfiguration
+// below, which is per call
+export type { ConfigOptions } from "../src/config/ConfigOptions";
+// The values that appear in ElementCallConfiguration and in the intent, and
+// what each intent means by default
+export {
+  BackgroundStyle,
+  configurationForIntent,
+  HeaderStyle,
+  type UrlConfiguration,
+  UserIntent,
+};
+
+/**
+ * How Element Call should behave. Everything is optional; anything left out
+ * takes the default that {@link ElementCallProps.intent} implies.
+ *
+ * This is the behaviour a widget can be configured with through its URL, plus
+ * the one fact about the call a host has a say in here, the background. The
+ * rest of what a widget's URL carries — who the user is, how to reach the
+ * homeserver, where to report analytics, the shared secret of a room that is
+ * encrypted with one — a component host supplies by other routes, or not at
+ * all; and what can change while the call is running, the theme and the
+ * language, is a prop of its own.
+ */
+export type ElementCallConfiguration = Partial<UrlConfiguration> &
+  Partial<Pick<UrlProperties, "background">>;
+
+export interface ElementCallProps {
+  /**
+   * The client to place the call with. Element Call does not authenticate
+   * anyone or manage a session of its own; this one is the host's.
+   */
+  client: MatrixClient;
+  /** The room to call in. The host's client must already know about it. */
+  roomId: string;
+  /**
+   * What the user asked for — whether they started the call or joined one that
+   * was already running, and whether it is a call in a group or a DM. Element
+   * Call decides what each of those means: whether to show the lobby first,
+   * whether to ring, and so on.
+   *
+   * Defaults to joining an existing group call, which is the most conservative
+   * reading, but a host that knows which button the user pressed should say so.
+   */
+  intent?: UserIntent;
+  /**
+   * How Element Call should behave, overriding whatever {@link intent} implies.
+   * A host that finds itself setting a lot of these probably wants a different
+   * intent instead.
+   *
+   * Compared by value, so it is fine to write this inline; only a change to
+   * what it says restarts anything.
+   */
+  config?: ElementCallConfiguration;
+  /**
+   * What Element Call tells the host while the call is running: that the user
+   * has joined or hung up, that it would like to be kept on screen, and so on.
+   * Without one, Element Call assumes nobody is listening.
+   */
+  hostBridge?: ElementCallHostBridge;
+  /**
+   * What the host tells Element Call: to hang up, to mute, to join. Available
+   * once the component has rendered.
+   */
+  ref?: Ref<ElementCallHandle>;
+  /**
+   * The theme to show Element Call in, `light` or `dark`. Left out, Element
+   * Call picks. Changes take effect at once, and cost nothing else.
+   */
+  theme?: string;
+  /**
+   * The language to show Element Call in, as a BCP 47 tag: one of the
+   * `supportedLanguages` the main entry point exports, or something that falls
+   * back to one (`de-AT` to `de`). Left out, the browser's language is used.
+   *
+   * Translations are one thing shared by every Element Call on the page, so
+   * the most recently set language wins for all of them.
+   */
+  language?: string;
+}
diff --git a/component/index.tsx b/component/index.tsx
index b3f04e00..128f4a55 100644
--- a/component/index.tsx
+++ b/component/index.tsx
@@ -36,14 +36,12 @@ import {
   type FC,
   type JSX,
   type ReactNode,
-  type Ref,
   useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
-import { type MatrixClient } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { I18nextProvider } from "react-i18next";
 import { TooltipProvider } from "@vector-im/compound-web";
@@ -62,10 +60,8 @@ import { RootElementProvider, useRootElement } from "../src/RootElementContext";
 import {
   configurationForIntent,
   componentProperties,
-  type UrlConfiguration,
   type UrlParams,
   UrlParamsProvider,
-  type UrlProperties,
   UserIntent,
   useUrlParams,
 } from "../src/UrlParams";
@@ -79,102 +75,16 @@ import { i18n } from "../src/utils/i18n";
 import { useTheme } from "../src/useTheme";
 import { useStableValue } from "../src/useStableValue";
 import styles from "./ElementCall.module.css";
-import {
-  type ElementCallHandle,
-  type ElementCallHostBridge,
-  useComponentHostBridge,
-} from "./host";
+import { useComponentHostBridge } from "./host";
+import { type ElementCallProps } from "./api";
 import { supportedLanguages, translationsBackend } from "./localization";
 
 // The languages Element Call can be shown in
 export { supportedLanguages } from "./localization";
-
-// How the host and Element Call talk to each other, and what they say
-export { type ElementCallHandle, type ElementCallHostBridge } from "./host";
-export {
-  type DeviceMuteRequest,
-  type DeviceMuteState,
-} from "../src/HostBridge";
-export { type JoinCallData } from "../src/widget";
-// The deployment-wide configuration, as distinct from ElementCallConfiguration
-// above, which is per call
-export { type ConfigOptions } from "../src/config/ConfigOptions";
-// The values that appear in ElementCallConfiguration and in the intent
-export {
-  BackgroundStyle,
-  HeaderStyle,
-  UserIntent,
-  type UrlConfiguration,
-} from "../src/UrlParams";
-
-/**
- * How Element Call should behave. Everything is optional; anything left out
- * takes the default that {@link ElementCallProps.intent} implies.
- *
- * This is the behaviour a widget can be configured with through its URL, plus
- * the one fact about the call a host has a say in here, the background. The
- * rest of what a widget's URL carries — who the user is, how to reach the
- * homeserver, where to report analytics, the shared secret of a room that is
- * encrypted with one — a component host supplies by other routes, or not at
- * all; and what can change while the call is running, the theme and the
- * language, is a prop of its own.
- */
-export type ElementCallConfiguration = Partial<UrlConfiguration> &
-  Partial<Pick<UrlProperties, "background">>;
-
-export interface ElementCallProps {
-  /**
-   * The client to place the call with. Element Call does not authenticate
-   * anyone or manage a session of its own; this one is the host's.
-   */
-  client: MatrixClient;
-  /** The room to call in. The host's client must already know about it. */
-  roomId: string;
-  /**
-   * What the user asked for — whether they started the call or joined one that
-   * was already running, and whether it is a call in a group or a DM. Element
-   * Call decides what each of those means: whether to show the lobby first,
-   * whether to ring, and so on.
-   *
-   * Defaults to joining an existing group call, which is the most conservative
-   * reading, but a host that knows which button the user pressed should say so.
-   */
-  intent?: UserIntent;
-  /**
-   * How Element Call should behave, overriding whatever {@link intent} implies.
-   * A host that finds itself setting a lot of these probably wants a different
-   * intent instead.
-   *
-   * Compared by value, so it is fine to write this inline; only a change to
-   * what it says restarts anything.
-   */
-  config?: ElementCallConfiguration;
-  /**
-   * What Element Call tells the host while the call is running: that the user
-   * has joined or hung up, that it would like to be kept on screen, and so on.
-   * Without one, Element Call assumes nobody is listening.
-   */
-  hostBridge?: ElementCallHostBridge;
-  /**
-   * What the host tells Element Call: to hang up, to mute, to join. Available
-   * once the component has rendered.
-   */
-  ref?: Ref<ElementCallHandle>;
-  /**
-   * The theme to show Element Call in, `light` or `dark`. Left out, Element
-   * Call picks. Changes take effect at once, and cost nothing else.
-   */
-  theme?: string;
-  /**
-   * The language to show Element Call in, as a BCP 47 tag: one of
-   * {@link supportedLanguages}, or something that falls back to one (`de-AT`
-   * to `de`). Left out, the browser's language is used.
-   *
-   * Translations are one thing shared by every Element Call on the page, so
-   * the most recently set language wins for all of them.
-   */
-  language?: string;
-}
+// Everything a host needs to talk about Element Call — the props, the handle,
+// the host bridge, the intents and what each means — also available without
+// the component itself from `@element-hq/element-call-component/api`
+export * from "./api";
 
 /**
  * Prepares the things Element Call needs before it can be shown: translations,
diff --git a/component/package.json b/component/package.json
index 9ed81e02..79aa286c 100644
--- a/component/package.json
+++ b/component/package.json
@@ -25,6 +25,10 @@
       "types": "./dist/types/component/index.d.ts",
       "default": "./dist/element-call.js"
     },
+    "./api": {
+      "types": "./dist/types/component/api.d.ts",
+      "default": "./dist/api.js"
+    },
     "./style.css": "./dist/element-call.css"
   },
   "sideEffects": [
diff --git a/component/tsconfig.build.json b/component/tsconfig.build.json
index 18af65d8..cdbe5753 100644
--- a/component/tsconfig.build.json
+++ b/component/tsconfig.build.json
@@ -13,8 +13,8 @@
     "rootDir": "..",
     "outDir": "./dist/types"
   },
-  // The entry point, plus the ambient declarations (CSS modules, `?react` SVGs,
-  // `import.meta.env`, …) that the sources it reaches rely on.
-  "include": ["./index.tsx", "../src/@types/*.d.ts"],
+  // The entry points, plus the ambient declarations (CSS modules, `?react` SVGs,
+  // `import.meta.env`, …) that the sources they reach rely on.
+  "include": ["./index.tsx", "./api.ts", "../src/@types/*.d.ts"],
   "exclude": []
 }
diff --git a/docs/agents/architecture.md b/docs/agents/architecture.md
index 92cac257..bd00bf32 100644
--- a/docs/agents/architecture.md
+++ b/docs/agents/architecture.md
@@ -76,4 +76,7 @@ Code that builds in only one is a bug.
 - `build:component` — `@element-hq/element-call-component`, sources in `component/`
   (its own pnpm project; run pnpm from the repo root). Host API is in the README;
   `pnpm lint:externals` rejects an import of a `react` / `react-dom` /
-  `matrix-js-sdk` / `livekit-client` subpath the externals list omits.
+  `matrix-js-sdk` / `livekit-client` subpath the externals list omits. Two entry
+  points: `index.tsx` (the component) and `api.ts` (types, enums and
+  `configurationForIntent`, for a host that must not load the component). `api.ts`
+  may only reach types and constants — `src/UrlConfiguration.ts`, not `UrlParams`.
diff --git a/src/UrlConfiguration.ts b/src/UrlConfiguration.ts
new file mode 100644
index 00000000..6de204bb
--- /dev/null
+++ b/src/UrlConfiguration.ts
@@ -0,0 +1,242 @@
+/*
+Copyright 2022-2024 New Vector Ltd.
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+/**
+ * How Element Call can be told to behave, and what each intent means.
+ *
+ * Kept apart from {@link UrlParams} on purpose: everything here is constants,
+ * types and one function of them, so that a host of the component can import
+ * these — the enums it needs as values, the defaults an intent implies — without
+ * loading Element Call itself. UrlParams, which reads them from a URL, needs
+ * the router, the config and the rest of the app; this module must not.
+ * `component/api.ts` is built from it as an entry point of its own.
+ */
+
+import {
+  type RTCCallIntent,
+  type RTCNotificationType,
+} from "matrix-js-sdk/lib/matrixrtc";
+
+import { platform } from "./Platform";
+
+export enum UserIntent {
+  StartNewCall = "start_call",
+  JoinExistingCall = "join_existing",
+  StartNewCallVoice = "start_call_voice",
+  JoinExistingCallVoice = "join_existing_voice",
+  StartNewCallDM = "start_call_dm",
+  StartNewCallDMVoice = "start_call_dm_voice",
+  JoinExistingCallDM = "join_existing_dm",
+  JoinExistingCallDMVoice = "join_existing_dm_voice",
+  Unknown = "unknown",
+}
+
+export enum HeaderStyle {
+  None = "none",
+  Standard = "standard",
+  AppBar = "app_bar",
+}
+
+export enum BackgroundStyle {
+  Solid = "solid",
+  Gradient = "gradient",
+}
+
+/**
+ * The configuration for the app, which can be set via URL parameters.
+ * Those property are different to the UrlProperties, since they are all optional
+ * and configure the behavior of the app. Their value is the same if EC is used in
+ * the same context but with different accounts/users.
+ *
+ * Their defaults can be controlled by the `intent` property.
+ */
+export interface UrlConfiguration {
+  /**
+   * Whether the app should keep the user confined to the current call/room.
+   */
+  confineToRoom: boolean;
+  /**
+   * Whether the app should pause before joining the call until it sees an
+   * io.element.join widget action, allowing it to be preloaded.
+   */
+  preload: boolean;
+  /**
+   * The style of headers to show. "standard" is the default arrangement, "none"
+   * hides the header entirely, and "app_bar" produces a header with a back
+   * button like you might see in mobile apps. The callback for the back button
+   * is window.controls.onBackButtonPressed.
+   */
+  header: HeaderStyle;
+  /**
+   * Whether the controls should be shown. For screen recording no controls can be desired.
+   */
+  showControls: boolean;
+  /**
+   * Whether to hide the screen-sharing button.
+   */
+  hideScreensharing: boolean;
+
+  /**
+   * Whether the app is allowed to use fallback STUN servers for ICE in case the
+   * user's homeserver doesn't provide any.
+   */
+  allowIceFallback: boolean;
+
+  /**
+   * Whether the app should use per participant keys for E2EE.
+   */
+  perParticipantE2EE: boolean;
+  /**
+   * Whether the global JS controls for audio output devices should be enabled,
+   * allowing the list of output devices to be controlled by the app hosting
+   * Element Call.
+   */
+  controlledAudioDevices: boolean;
+  /**
+   * Setting this flag skips the lobby and brings you in the call directly.
+   * In the widget this can be combined with preload to pass the device settings
+   * with the join widget action.
+   */
+  skipLobby: boolean;
+  /**
+   * Setting this flag makes element call show the lobby after leaving a call.
+   * This is useful for video rooms.
+   */
+  returnToLobby: boolean;
+  /**
+   * Whether and what type of notification EC should send, when the user joins the call.
+   */
+  sendNotificationType?: RTCNotificationType;
+  /**
+   * Whether the app should automatically leave the call when there
+   * is no one left in the call.
+   * This is one part to make the call matrixRTC session behave like a telephone call.
+   */
+  autoLeaveWhenOthersLeft: boolean;
+
+  /**
+   * If the client should behave like it is awaiting an answer if a notification was sent (wait for call pick up).
+   * This is a no-op if not combined with sendNotificationType.
+   *
+   * This entails:
+   *  - show ui that it is awaiting an answer
+   *  - play a sound that indicates that it is awaiting an answer
+   *  - auto-dismiss the call widget once the notification lifetime expires on the receivers side.
+   */
+  waitForCallPickup: boolean;
+
+  /**
+   * Whether to enable echo cancellation for audio capture.
+   * Defaults to true.
+   */
+  echoCancellation?: boolean;
+  /**
+   * Whether to enable noise suppression for audio capture.
+   * Defaults to true.
+   */
+  noiseSuppression?: boolean;
+
+  callIntent?: RTCCallIntent;
+}
+
+// If you need to add a new flag to this interface, prefer a name that describes
+// a specific behavior (such as 'confineToRoom'), rather than one that describes
+// the situations that call for this behavior ('isEmbedded'). This makes it
+// clearer what each flag means, and helps us avoid coupling Element Call's
+// behavior to the needs of specific consumers.
+
+/**
+ * The configuration implied by what the user meant to do — if they pressed a
+ * Start Call button this would be `start_call`, and if they pressed Join Call,
+ * `join_existing`.
+ *
+ * These are platform-specific defaults, so that a host can start a call by
+ * saying what the user asked for rather than by setting every parameter itself,
+ * and so that what each intent means is Element Call's decision, made in one
+ * place. A host that wants something else states it alongside the intent.
+ *
+ * {@link UserIntent.Unknown} means no intent was stated, and gives the
+ * standalone app's defaults: Element Call owns the whole page, so it offers the
+ * way out of the room that a hosted call must not.
+ */
+export function configurationForIntent(intent: UserIntent): UrlConfiguration {
+  // Only constants and `platform` here, so that this depends on nothing but
+  // the intent.
+  let preset: UrlConfiguration = {
+    confineToRoom: true,
+    preload: false,
+    header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
+    showControls: true,
+    hideScreensharing: false,
+    allowIceFallback: true,
+    perParticipantE2EE: true,
+    controlledAudioDevices: platform === "desktop" ? false : true,
+    skipLobby: true,
+    returnToLobby: false,
+    sendNotificationType: "notification",
+    autoLeaveWhenOthersLeft: false,
+    waitForCallPickup: false,
+  };
+  switch (intent) {
+    case UserIntent.StartNewCall:
+      preset.skipLobby = false;
+      preset.callIntent = "video";
+      break;
+    case UserIntent.JoinExistingCall:
+      // On desktop this will be overridden based on which button was used to join the call
+      preset.skipLobby = false;
+      preset.callIntent = "video";
+      break;
+    case UserIntent.StartNewCallVoice:
+      preset.skipLobby = false;
+      preset.callIntent = "audio";
+      break;
+    case UserIntent.JoinExistingCallVoice:
+      // On desktop this will be overridden based on which button was used to join the call
+      preset.skipLobby = false;
+      preset.callIntent = "audio";
+      break;
+    case UserIntent.StartNewCallDMVoice:
+      preset.callIntent = "audio";
+    // Fall through
+    case UserIntent.StartNewCallDM:
+      preset.skipLobby = true;
+      preset.sendNotificationType = "ring";
+      preset.autoLeaveWhenOthersLeft = true;
+      preset.waitForCallPickup = true;
+      preset.callIntent = preset.callIntent ?? "video";
+      break;
+    case UserIntent.JoinExistingCallDMVoice:
+      preset.callIntent = "audio";
+    // Fall through
+    case UserIntent.JoinExistingCallDM:
+      // On desktop this will be overridden based on which button was used to join the call
+      preset.skipLobby = true;
+      preset.autoLeaveWhenOthersLeft = true;
+      preset.callIntent = preset.callIntent ?? "video";
+      break;
+    // Non widget usecase defaults
+    default:
+      preset = {
+        confineToRoom: false,
+        preload: false,
+        header: HeaderStyle.Standard,
+        showControls: true,
+        hideScreensharing: false,
+        allowIceFallback: false,
+        perParticipantE2EE: false,
+        controlledAudioDevices: false,
+        skipLobby: false,
+        returnToLobby: false,
+        sendNotificationType: undefined,
+        autoLeaveWhenOthersLeft: false,
+        waitForCallPickup: false,
+      };
+  }
+  return preset;
+}
diff --git a/src/UrlParams.ts b/src/UrlParams.ts
index 7c32c15f..9d7ee300 100644
--- a/src/UrlParams.ts
+++ b/src/UrlParams.ts
@@ -9,47 +9,36 @@ Please see LICENSE in the repository root for full details.
 import { createContext, use, useMemo } from "react";
 import { useLocation } from "react-router-dom";
 import { logger } from "matrix-js-sdk/lib/logger";
-import {
-  type RTCCallIntent,
-  type RTCNotificationType,
-} from "matrix-js-sdk/lib/matrixrtc";
 import { pickBy } from "lodash-es";
 
 import { Config } from "./config/Config";
 import { type EncryptionSystem } from "./e2ee/sharedKeyManagement";
 import { E2eeType } from "./e2ee/e2eeType";
-import { platform } from "./Platform";
+import {
+  BackgroundStyle,
+  configurationForIntent,
+  HeaderStyle,
+  type UrlConfiguration,
+  UserIntent,
+} from "./UrlConfiguration";
 import { redact } from "./utils/redact";
 
+// Moved to their own module, so that a host can import them without the rest
+// of this one; re-exported here as they always were
+export {
+  BackgroundStyle,
+  configurationForIntent,
+  HeaderStyle,
+  type UrlConfiguration,
+  UserIntent,
+} from "./UrlConfiguration";
+
 interface RoomIdentifier {
   roomAlias: string | null;
   roomId: string | null;
   viaServers: string[];
 }
 
-export enum UserIntent {
-  StartNewCall = "start_call",
-  JoinExistingCall = "join_existing",
-  StartNewCallVoice = "start_call_voice",
-  JoinExistingCallVoice = "join_existing_voice",
-  StartNewCallDM = "start_call_dm",
-  StartNewCallDMVoice = "start_call_dm_voice",
-  JoinExistingCallDM = "join_existing_dm",
-  JoinExistingCallDMVoice = "join_existing_dm_voice",
-  Unknown = "unknown",
-}
-
-export enum HeaderStyle {
-  None = "none",
-  Standard = "standard",
-  AppBar = "app_bar",
-}
-
-export enum BackgroundStyle {
-  Solid = "solid",
-  Gradient = "gradient",
-}
-
 /**
  * The UrlProperties are used to pass required data to the widget.
  * Those are different in different rooms, users, devices. They do not configure the behavior of the
@@ -166,109 +155,6 @@ export interface UrlProperties {
    */
   background: BackgroundStyle;
 }
-
-/**
- * The configuration for the app, which can be set via URL parameters.
- * Those property are different to the UrlProperties, since they are all optional
- * and configure the behavior of the app. Their value is the same if EC is used in
- * the same context but with different accounts/users.
- *
- * Their defaults can be controlled by the `intent` property.
- */
-export interface UrlConfiguration {
-  /**
-   * Whether the app should keep the user confined to the current call/room.
-   */
-  confineToRoom: boolean;
-  /**
-   * Whether the app should pause before joining the call until it sees an
-   * io.element.join widget action, allowing it to be preloaded.
-   */
-  preload: boolean;
-  /**
-   * The style of headers to show. "standard" is the default arrangement, "none"
-   * hides the header entirely, and "app_bar" produces a header with a back
-   * button like you might see in mobile apps. The callback for the back button
-   * is window.controls.onBackButtonPressed.
-   */
-  header: HeaderStyle;
-  /**
-   * Whether the controls should be shown. For screen recording no controls can be desired.
-   */
-  showControls: boolean;
-  /**
-   * Whether to hide the screen-sharing button.
-   */
-  hideScreensharing: boolean;
-
-  /**
-   * Whether the app is allowed to use fallback STUN servers for ICE in case the
-   * user's homeserver doesn't provide any.
-   */
-  allowIceFallback: boolean;
-
-  /**
-   * Whether the app should use per participant keys for E2EE.
-   */
-  perParticipantE2EE: boolean;
-  /**
-   * Whether the global JS controls for audio output devices should be enabled,
-   * allowing the list of output devices to be controlled by the app hosting
-   * Element Call.
-   */
-  controlledAudioDevices: boolean;
-  /**
-   * Setting this flag skips the lobby and brings you in the call directly.
-   * In the widget this can be combined with preload to pass the device settings
-   * with the join widget action.
-   */
-  skipLobby: boolean;
-  /**
-   * Setting this flag makes element call show the lobby after leaving a call.
-   * This is useful for video rooms.
-   */
-  returnToLobby: boolean;
-  /**
-   * Whether and what type of notification EC should send, when the user joins the call.
-   */
-  sendNotificationType?: RTCNotificationType;
-  /**
-   * Whether the app should automatically leave the call when there
-   * is no one left in the call.
-   * This is one part to make the call matrixRTC session behave like a telephone call.
-   */
-  autoLeaveWhenOthersLeft: boolean;
-
-  /**
-   * If the client should behave like it is awaiting an answer if a notification was sent (wait for call pick up).
-   * This is a no-op if not combined with sendNotificationType.
-   *
-   * This entails:
-   *  - show ui that it is awaiting an answer
-   *  - play a sound that indicates that it is awaiting an answer
-   *  - auto-dismiss the call widget once the notification lifetime expires on the receivers side.
-   */
-  waitForCallPickup: boolean;
-
-  /**
-   * Whether to enable echo cancellation for audio capture.
-   * Defaults to true.
-   */
-  echoCancellation?: boolean;
-  /**
-   * Whether to enable noise suppression for audio capture.
-   * Defaults to true.
-   */
-  noiseSuppression?: boolean;
-
-  callIntent?: RTCCallIntent;
-}
-
-// If you need to add a new flag to this interface, prefer a name that describes
-// a specific behavior (such as 'confineToRoom'), rather than one that describes
-// the situations that call for this behavior ('isEmbedded'). This makes it
-// clearer what each flag means, and helps us avoid coupling Element Call's
-// behavior to the needs of specific consumers.
 export interface UrlParams extends UrlProperties, UrlConfiguration {}
 
 class ParamParser {
@@ -354,97 +240,6 @@ export const getUrlParams = (
   return params;
 };
 
-/**
- * The configuration implied by what the user meant to do — if they pressed a
- * Start Call button this would be `start_call`, and if they pressed Join Call,
- * `join_existing`.
- *
- * These are platform-specific defaults, so that a host can start a call by
- * saying what the user asked for rather than by setting every parameter itself,
- * and so that what each intent means is Element Call's decision, made in one
- * place. A host that wants something else states it alongside the intent.
- *
- * {@link UserIntent.Unknown} means no intent was stated, and gives the
- * standalone app's defaults: Element Call owns the whole page, so it offers the
- * way out of the room that a hosted call must not.
- */
-export function configurationForIntent(intent: UserIntent): UrlConfiguration {
-  // Only constants and `platform` here, so that this depends on nothing but
-  // the intent.
-  let preset: UrlConfiguration = {
-    confineToRoom: true,
-    preload: false,
-    header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
-    showControls: true,
-    hideScreensharing: false,
-    allowIceFallback: true,
-    perParticipantE2EE: true,
-    controlledAudioDevices: platform === "desktop" ? false : true,
-    skipLobby: true,
-    returnToLobby: false,
-    sendNotificationType: "notification",
-    autoLeaveWhenOthersLeft: false,
-    waitForCallPickup: false,
-  };
-  switch (intent) {
-    case UserIntent.StartNewCall:
-      preset.skipLobby = false;
-      preset.callIntent = "video";
-      break;
-    case UserIntent.JoinExistingCall:
-      // On desktop this will be overridden based on which button was used to join the call
-      preset.skipLobby = false;
-      preset.callIntent = "video";
-      break;
-    case UserIntent.StartNewCallVoice:
-      preset.skipLobby = false;
-      preset.callIntent = "audio";
-      break;
-    case UserIntent.JoinExistingCallVoice:
-      // On desktop this will be overridden based on which button was used to join the call
-      preset.skipLobby = false;
-      preset.callIntent = "audio";
-      break;
-    case UserIntent.StartNewCallDMVoice:
-      preset.callIntent = "audio";
-    // Fall through
-    case UserIntent.StartNewCallDM:
-      preset.skipLobby = true;
-      preset.sendNotificationType = "ring";
-      preset.autoLeaveWhenOthersLeft = true;
-      preset.waitForCallPickup = true;
-      preset.callIntent = preset.callIntent ?? "video";
-      break;
-    case UserIntent.JoinExistingCallDMVoice:
-      preset.callIntent = "audio";
-    // Fall through
-    case UserIntent.JoinExistingCallDM:
-      // On desktop this will be overridden based on which button was used to join the call
-      preset.skipLobby = true;
-      preset.autoLeaveWhenOthersLeft = true;
-      preset.callIntent = preset.callIntent ?? "video";
-      break;
-    // Non widget usecase defaults
-    default:
-      preset = {
-        confineToRoom: false,
-        preload: false,
-        header: HeaderStyle.Standard,
-        showControls: true,
-        hideScreensharing: false,
-        allowIceFallback: false,
-        perParticipantE2EE: false,
-        controlledAudioDevices: false,
-        skipLobby: false,
-        returnToLobby: false,
-        sendNotificationType: undefined,
-        autoLeaveWhenOthersLeft: false,
-        waitForCallPickup: false,
-      };
-  }
-  return preset;
-}
-
 /**
  * The {@link UrlProperties} for Element Call running as a component inside a
  * host application.
diff --git a/vite-component.config.ts b/vite-component.config.ts
index ae0ac150..a2f26c21 100644
--- a/vite-component.config.ts
+++ b/vite-component.config.ts
@@ -49,8 +49,19 @@ export default defineConfig(({ mode }) => {
       cssCodeSplit: false,
       lib: {
         formats: ["es" as const],
-        entry: "./component/index.tsx",
-        fileName: "element-call",
+        entry: {
+          // The component
+          "element-call": "./component/index.tsx",
+          // What a host needs to talk about it, without it (see component/api.ts).
+          // Built as an entry point of its own so that importing it does not
+          // load the component: the bundler gives it a chunk that reaches only
+          // what it imports.
+          api: "./component/api.ts",
+        },
+        fileName: (_format, entryName) => `${entryName}.js`,
+        // The one stylesheet (see cssCodeSplit) keeps the name it had when the
+        // component was the only entry
+        cssFileName: "element-call",
       },
       rollupOptions: {
         // The host already has these, and a second copy of any of them does not

From ac81a7c0ab09ddd392f27e494c0a47a8e1c16b95 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 21 Sep 2026 02:56:00 +0000
Subject: [PATCH 105/154] Update dependency @vector-im/compound-design-tokens
 to v11

---
 package.json   |  2 +-
 pnpm-lock.yaml | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 90e5e039..eed70792 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
     "@types/sdp-transform": "^2.4.5",
     "@typescript-eslint/utils": "^8.61.0",
     "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^10.0.0",
+    "@vector-im/compound-design-tokens": "^11.0.0",
     "@vector-im/compound-web": "^10.0.0",
     "@vitejs/plugin-react": "^6.0.2",
     "@vitest/browser-playwright": "^4.1.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2d81f4fa..5e98099a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -131,11 +131,11 @@ importers:
         specifier: ^10.2.11
         version: 10.3.1(react@19.2.8)
       '@vector-im/compound-design-tokens':
-        specifier: ^10.0.0
-        version: 10.2.4(@types/react@19.2.18)(react@19.2.8)
+        specifier: ^11.0.0
+        version: 11.0.0(@types/react@19.2.18)(react@19.2.8)
       '@vector-im/compound-web':
         specifier: ^10.0.0
-        version: 10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        version: 10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@vitejs/plugin-react':
         specifier: ^6.0.2
         version: 6.1.1(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.2.7)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
@@ -3229,8 +3229,8 @@ packages:
     peerDependencies:
       react: '>= 16.8.0'
 
-  '@vector-im/compound-design-tokens@10.2.4':
-    resolution: {integrity: sha512-2aCjhSvJxktPWnvh5s9Xdc0Rd76AfHqbDbN4QjOxo2VIac6zYdLyQbxMUQ5ZeoR9G3vAxILd0H1UvApRfMilpQ==}
+  '@vector-im/compound-design-tokens@11.0.0':
+    resolution: {integrity: sha512-pWz0Q67Xbo8gwzaTeFbTTcM6i29ju6PR7SqyuExr2nIV3j9K785cOInft8FA2CM7PEapkr6TRtJKR/4xtWh2RA==}
     peerDependencies:
       '@adobe/leonardo-contrast-colors': ^1.0.0
       '@types/react': '*'
@@ -8695,12 +8695,12 @@ snapshots:
       '@use-gesture/core': 10.3.1
       react: 19.2.8
 
-  '@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.18)(react@19.2.8)':
+  '@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8)':
     optionalDependencies:
       '@types/react': 19.2.18
       react: 19.2.8
 
-  '@vector-im/compound-web@10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@vector-im/compound-web@10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@floating-ui/react': 0.27.20(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -8712,7 +8712,7 @@ snapshots:
       '@radix-ui/react-progress': 1.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-separator': 1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
-      '@vector-im/compound-design-tokens': 10.2.4(@types/react@19.2.18)(react@19.2.8)
+      '@vector-im/compound-design-tokens': 11.0.0(@types/react@19.2.18)(react@19.2.8)
       classnames: 2.5.1
       react: 19.2.8
       vaul: 1.1.2(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)

From c88f884fc93ce3ebba093e1dee47c1ea679b4f20 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Mon, 21 Sep 2026 12:46:47 +0200
Subject: [PATCH 106/154] Simplify local transport code

As of the removal of 'Legacy' mode, there can no longer be a difference between the transport you advertise in your membership and the transport you publish media on, so the local transport code can be simplified considerably. For instance, the function which gets the local transport can simply return a promise rather than being reactive.

I kept the local transport as an Observable in other modules so that they could easily be tested with existing marble tests.
---
 src/state/CallViewModel/CallViewModel.ts      |  38 +--
 .../CallViewModel/CallViewModelTestUtils.ts   |   7 +-
 .../localMember/LocalMember.test.ts           | 237 ++--------------
 .../CallViewModel/localMember/LocalMember.ts  | 205 ++++++--------
 .../localMember/LocalTransport.test.ts        | 267 +++++++-----------
 .../localMember/LocalTransport.ts             | 132 +++------
 .../remoteMembers/ConnectionManager.test.ts   |  12 +-
 .../remoteMembers/ConnectionManager.ts        |  32 ++-
 .../remoteMembers/integration.test.ts         |   5 +-
 src/state/ObservableScope.ts                  |  12 +
 src/utils/observable.test.ts                  |  23 +-
 src/utils/observable.ts                       |   9 -
 12 files changed, 309 insertions(+), 670 deletions(-)

diff --git a/src/state/CallViewModel/CallViewModel.ts b/src/state/CallViewModel/CallViewModel.ts
index b2c763c2..1ab4ea13 100644
--- a/src/state/CallViewModel/CallViewModel.ts
+++ b/src/state/CallViewModel/CallViewModel.ts
@@ -16,7 +16,6 @@ import {
 import { type Room as MatrixRoom } from "matrix-js-sdk";
 import {
   BehaviorSubject,
-  catchError,
   combineLatest,
   distinctUntilChanged,
   filter,
@@ -39,6 +38,7 @@ import {
   throttleTime,
   timer,
   takeUntil,
+  from,
 } from "rxjs";
 import { type Logger, logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import {
@@ -112,7 +112,7 @@ import {
   TransportState,
 } from "./localMember/LocalMember.ts";
 import {
-  createLocalTransport$,
+  getLocalTransport,
   type LocalTransport,
 } from "./localMember/LocalTransport.ts";
 import {
@@ -573,16 +573,16 @@ export function createCallViewModel$(
         : `${userId}:${deviceId}`,
   };
 
-  const localTransport =
-    options.localTransport ??
-    createLocalTransport$({
-      scope: scope,
-      memberships$: memberships$,
-      ownMembershipIdentity,
-      client,
-      roomId: matrixRoom.roomId,
-      matrixRTCMode,
-    });
+  const localTransport$ = options.localTransport
+    ? constant(options.localTransport)
+    : from(
+        getLocalTransport({
+          ownMembershipIdentity,
+          client,
+          roomId: matrixRoom.roomId,
+          matrixRTCMode,
+        }),
+      );
 
   const connectionFactory =
     options.connectionFactory ??
@@ -599,17 +599,7 @@ export function createCallViewModel$(
   const connectionManager = createConnectionManager$({
     scope: scope,
     connectionFactory: connectionFactory,
-    localTransport$: scope.behavior(
-      localTransport.active$.pipe(
-        catchError((e: unknown) => {
-          logger.info(
-            "could not pass local transport to createConnectionManager$. localTransport$ threw an error",
-            e,
-          );
-          return of(null);
-        }),
-      ),
-    ),
+    localTransport$,
     remoteTransports$: membershipsAndTransports.transports$,
     logger: logger,
     ownMembershipIdentity,
@@ -665,7 +655,7 @@ export function createCallViewModel$(
     connectionManager,
     client,
     matrixRTCSession,
-    localTransport,
+    localTransport$,
     roomId: matrixRoom.roomId,
     hideScreensharing,
     hostBridge,
diff --git a/src/state/CallViewModel/CallViewModelTestUtils.ts b/src/state/CallViewModel/CallViewModelTestUtils.ts
index 5a3fa337..0863ea2b 100644
--- a/src/state/CallViewModel/CallViewModelTestUtils.ts
+++ b/src/state/CallViewModel/CallViewModelTestUtils.ts
@@ -210,11 +210,8 @@ export function withCallViewModel(mode: MatrixRTCMode) {
         connectionState$,
         windowSize$,
         localTransport: {
-          active$: constant({
-            transport: exampleTransport,
-            sfuConfig: exampleSfuConfig,
-          }),
-          advertised$: constant(exampleTransport),
+          transport: exampleTransport,
+          sfuConfig: exampleSfuConfig,
         },
         connectionFactory: {
           createConnection(
diff --git a/src/state/CallViewModel/localMember/LocalMember.test.ts b/src/state/CallViewModel/localMember/LocalMember.test.ts
index 6df999b1..973c3f6c 100644
--- a/src/state/CallViewModel/localMember/LocalMember.test.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.test.ts
@@ -21,7 +21,7 @@ import {
   beforeEach,
   afterEach,
 } from "vitest";
-import { BehaviorSubject, map, of } from "rxjs";
+import { BehaviorSubject, map, of, Subject } from "rxjs";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { type LocalParticipant, type LocalTrack } from "livekit-client";
 import fetchMock from "fetch-mock";
@@ -50,10 +50,7 @@ import {
   TrackState,
   watchScreenShareToggle,
 } from "./LocalMember";
-import {
-  FailToGetOpenIdToken,
-  MatrixRTCTransportMissingError,
-} from "../../../utils/errors";
+import { MatrixRTCTransportMissingError } from "../../../utils/errors";
 import { Epoch, ObservableScope } from "../../ObservableScope";
 import { constant } from "../../Behavior";
 import { ConnectionManagerData } from "../remoteMembers/ConnectionManager";
@@ -61,10 +58,7 @@ import { ConnectionState, type Connection } from "../remoteMembers/Connection";
 import { type Publisher } from "./Publisher";
 import { initializeWidget } from "../../../widget";
 import { nullHostBridge } from "../../../HostBridge";
-import {
-  type LocalTransport,
-  type LocalTransportWithSFUConfig,
-} from "./LocalTransport";
+import { type LocalTransport } from "./LocalTransport";
 import * as openIDSFU from "../../../livekit/openIDSFU";
 
 initializeWidget();
@@ -261,7 +255,7 @@ describe("LocalMembership", () => {
   });
 
   it("throws error on missing RTC config error", () => {
-    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
+    withTestScheduler(({ scope, hot, expectObservable }) => {
       const localTransport$ = scope.behavior<null | LivekitTransportConfig>(
         hot("1ms #", {}, new MatrixRTCTransportMissingError("domain.com")),
         null,
@@ -277,16 +271,15 @@ describe("LocalMembership", () => {
         ),
       };
 
-      const aLocalTransport: LocalTransport = {
-        advertised$: localTransport$,
-        active$: behavior("a", { a: null }),
-      };
-
       const localMembership = createLocalMembership$({
         scope,
         ...defaultCreateLocalMemberValues,
         connectionManager: mockConnectionManager,
-        localTransport: aLocalTransport,
+        localTransport$: hot(
+          "1ms #",
+          {},
+          new MatrixRTCTransportMissingError("domain.com"),
+        ),
       });
 
       expectObservable(localMembership.localMemberState$).toBe("ne", {
@@ -296,61 +289,9 @@ describe("LocalMembership", () => {
     });
   });
 
-  it("Should not publish to active transport if advertised has errors", () => {
-    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
-      const advertised$ = scope.behavior<null | LivekitTransportConfig>(
-        hot("--#", {}, new FailToGetOpenIdToken(new Error("foo"))),
-        null,
-      );
-
-      // Populate a connection for active
-      const connectionManagerData = new ConnectionManagerData();
-      connectionManagerData.add(connectionTransportBConnected, []);
-      const mockConnectionManager = {
-        transports$: constant(new Epoch([bTransport])),
-        connectionManagerData$: constant(new Epoch(connectionManagerData)),
-      };
-
-      const aLocalTransport: LocalTransport = {
-        advertised$,
-        active$: behavior("a", { n: null, a: bTransportWithSFUConfig }),
-      };
-
-      defaultCreateLocalMemberValues.createPublisherFactory.mockImplementation(
-        () => {
-          return {} as unknown as Publisher;
-        },
-      );
-      const publisherFactory =
-        defaultCreateLocalMemberValues.createPublisherFactory as ReturnType<
-          typeof vi.fn
-        >;
-
-      const localMembership = createLocalMembership$({
-        scope,
-        ...defaultCreateLocalMemberValues,
-        connectionManager: mockConnectionManager,
-        localTransport: aLocalTransport,
-      });
-
-      expectObservable(localMembership.localMemberState$).toBe("n-e", {
-        n: TransportState.Waiting,
-        e: expect.toSatisfy((e) => e instanceof FailToGetOpenIdToken),
-      });
-
-      // Should not have created any publisher
-      expect(publisherFactory).toHaveBeenCalledTimes(0);
-    });
-  });
-
   it("logs if callIntent cannot be updated", async () => {
     const scope = new ObservableScope();
 
-    const aLocalTransport: LocalTransport = {
-      advertised$: constant(aTransport),
-      active$: constant(aTransportWithSFUConfig),
-    };
-
     const mockConnectionManager = {
       transports$: constant(new Epoch([])),
       connectionManagerData$: constant(new Epoch(new ConnectionManagerData())),
@@ -366,7 +307,7 @@ describe("LocalMembership", () => {
         leaveRoomSession: vi.fn(),
       },
       connectionManager: mockConnectionManager,
-      localTransport: aLocalTransport,
+      localTransport$: constant(mockTransport),
     });
     const expextedLog =
       "'not connected yet' while updating the call intent (this is expected on startup)";
@@ -378,33 +319,19 @@ describe("LocalMembership", () => {
     scope.end();
   });
 
-  const aTransport = {
+  const mockTransportConfig = {
     livekit_service_url: "a",
   } as LivekitTransportConfig;
 
-  const aTransportWithSFUConfig = {
-    transport: aTransport,
+  const mockTransport = {
+    transport: mockTransportConfig,
     sfuConfig: {
       jwt: "foo",
       livekitAlias: "bar",
       livekitIdentity: "baz",
       url: "bro",
     },
-  } as LocalTransportWithSFUConfig;
-
-  const bTransport = {
-    livekit_service_url: "b",
-  } as LivekitTransportConfig;
-
-  const bTransportWithSFUConfig = {
-    transport: bTransport,
-    sfuConfig: {
-      jwt: "foo2",
-      livekitAlias: "bar2",
-      livekitIdentity: "baz2",
-      url: "bro2",
-    },
-  } as LocalTransportWithSFUConfig;
+  } as LocalTransport;
 
   const connectionTransportAConnected = {
     livekitRoom: mockLivekitRoom({
@@ -414,18 +341,13 @@ describe("LocalMembership", () => {
       } as unknown as LocalParticipant,
     }),
     state$: constant(ConnectionState.LivekitConnected),
-    transport: aTransport,
-  } as unknown as Connection;
+    transport: mockTransportConfig,
+  } as Connection;
   const connectionTransportAConnecting = {
     ...connectionTransportAConnected,
     state$: constant(ConnectionState.LivekitConnecting),
     livekitRoom: mockLivekitRoom({}),
   } as unknown as Connection;
-  const connectionTransportBConnected = {
-    state$: constant(ConnectionState.LivekitConnected),
-    transport: bTransport,
-    livekitRoom: mockLivekitRoom({}),
-  } as unknown as Connection;
 
   const authCallSpy = vi
     .spyOn(openIDSFU, "getSFUConfigWithOpenID")
@@ -459,10 +381,7 @@ describe("LocalMembership", () => {
           ),
         },
         joinMatrixRTC,
-        localTransport: {
-          advertised$: constant(aTransport),
-          active$: constant(aTransportWithSFUConfig),
-        },
+        localTransport$: constant(mockTransport),
         delayId$,
       });
 
@@ -471,7 +390,7 @@ describe("LocalMembership", () => {
       await flushPromises();
       // Joins with timings appropriate for the level of delegation support
       expect(joinMatrixRTC).toHaveBeenCalledWith(
-        aTransport,
+        mockTransportConfig,
         delayedLeaveTimings,
       );
 
@@ -505,75 +424,7 @@ describe("LocalMembership", () => {
     },
   );
 
-  it("recreates publisher if new connection is used, always unpublish and end tracks", async () => {
-    const scope = new ObservableScope();
-
-    const activeTransport$ = new BehaviorSubject(aTransportWithSFUConfig);
-    const aLocalTransport: LocalTransport = {
-      advertised$: constant(aTransport),
-      active$: activeTransport$,
-    };
-
-    const publishers: Publisher[] = [];
-    let seed = 0;
-    defaultCreateLocalMemberValues.createPublisherFactory.mockImplementation(
-      () => {
-        const a = seed;
-        seed += 1;
-        logger.info(`creating [${a}]`);
-        const p = {
-          // It is enought to check if destroy is called. Destroy itself is tested in the publisher to make sure it does
-          // all the cleanup we need.
-          destroy: vi.fn(),
-          stopPublishing: vi.fn().mockImplementation(() => {
-            logger.info(`stopPublishing [${a}]`);
-          }),
-          stopTracks: vi.fn(),
-        };
-        publishers.push(p as unknown as Publisher);
-        return p;
-      },
-    );
-    const publisherFactory =
-      defaultCreateLocalMemberValues.createPublisherFactory as ReturnType<
-        typeof vi.fn
-      >;
-
-    const connectionManagerData = new ConnectionManagerData();
-    connectionManagerData.add(connectionTransportAConnected, []);
-    connectionManagerData.add(connectionTransportBConnected, []);
-    createLocalMembership$({
-      scope,
-      ...defaultCreateLocalMemberValues,
-      connectionManager: {
-        connectionManagerData$: constant(new Epoch(connectionManagerData)),
-      },
-      localTransport: aLocalTransport,
-    });
-    await flushPromises();
-    activeTransport$.next({
-      ...aTransportWithSFUConfig,
-      transport: bTransport,
-    });
-    await flushPromises();
-
-    expect(publisherFactory).toHaveBeenCalledTimes(2);
-    expect(publishers.length).toBe(2);
-    // stop the first Publisher and let the second one life.
-    expect(publishers[0].destroy).toHaveBeenCalled();
-    expect(publishers[1].destroy).not.toHaveBeenCalled();
-    expect(publisherFactory.mock.calls[0][0].transport).toBe(aTransport);
-    expect(publisherFactory.mock.calls[1][0].transport).toBe(bTransport);
-    scope.end();
-    await flushPromises();
-    // stop all tracks after ending scopes
-    expect(publishers[1].destroy).toHaveBeenCalled();
-    // expect(publishers[1].stopTracks).toHaveBeenCalled();
-
-    defaultCreateLocalMemberValues.createPublisherFactory.mockReset();
-  });
-
-  it("only start tracks if requested", async () => {
+  it("only starts tracks if requested", async () => {
     const scope = new ObservableScope();
 
     const publishers: Publisher[] = [];
@@ -602,11 +453,6 @@ describe("LocalMembership", () => {
         typeof vi.fn
       >;
 
-    const aLocalTransport: LocalTransport = {
-      advertised$: constant(aTransport),
-      active$: constant(aTransportWithSFUConfig),
-    };
-
     const connectionManagerData = new ConnectionManagerData();
     connectionManagerData.add(connectionTransportAConnected, []);
     // connectionManagerData.add(connectionTransportB, []);
@@ -616,7 +462,7 @@ describe("LocalMembership", () => {
       connectionManager: {
         connectionManagerData$: constant(new Epoch(connectionManagerData)),
       },
-      localTransport: aLocalTransport,
+      localTransport$: constant(mockTransport),
     });
     await flushPromises();
     expect(publisherFactory).toHaveBeenCalledOnce();
@@ -637,16 +483,8 @@ describe("LocalMembership", () => {
   //
   it("tracks livekit state correctly", async () => {
     const scope = new ObservableScope();
-
     const connectionManagerData = new ConnectionManagerData();
-
-    const activeTransport$ =
-      new BehaviorSubject<null | LocalTransportWithSFUConfig>(null);
-
-    const aLocalTransport: LocalTransport = {
-      advertised$: constant(aTransport),
-      active$: activeTransport$,
-    };
+    const localTransport$ = new Subject<LocalTransport>();
 
     const connectionManagerData$ = new BehaviorSubject(
       new Epoch(connectionManagerData),
@@ -687,14 +525,14 @@ describe("LocalMembership", () => {
       connectionManager: {
         connectionManagerData$,
       },
-      localTransport: aLocalTransport,
+      localTransport$,
     });
 
     await flushPromises();
     expect(localMembership.localMemberState$.value).toStrictEqual(
       TransportState.Waiting,
     );
-    activeTransport$.next(aTransportWithSFUConfig);
+    localTransport$.next(mockTransport);
     await flushPromises();
     expect(localMembership.localMemberState$.value).toStrictEqual({
       matrix: RTCMemberStatus.Connected,
@@ -719,7 +557,7 @@ describe("LocalMembership", () => {
     });
 
     (
-      connectionManagerData2.getConnectionForTransport(aTransport)!
+      connectionManagerData2.getConnectionForTransport(mockTransportConfig)!
         .state$ as BehaviorSubject<ConnectionState>
     ).next(ConnectionState.LivekitConnected);
     expect(localMembership.localMemberState$.value).toStrictEqual({
@@ -822,10 +660,7 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport: {
-          advertised$: constant(aTransport),
-          active$: constant(aTransportWithSFUConfig),
-        },
+        localTransport$: constant(mockTransport),
       });
 
       await flushPromises();
@@ -862,10 +697,7 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport: {
-          advertised$: constant(aTransport),
-          active$: constant(aTransportWithSFUConfig),
-        },
+        localTransport$: constant(mockTransport),
       });
 
       await flushPromises();
@@ -913,10 +745,7 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport: {
-          advertised$: constant(aTransport),
-          active$: constant(aTransportWithSFUConfig),
-        },
+        localTransport$: constant(mockTransport),
       });
 
       await flushPromises();
@@ -957,10 +786,7 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport: {
-          advertised$: constant(aTransport),
-          active$: constant(aTransportWithSFUConfig),
-        },
+        localTransport$: constant(mockTransport),
       });
 
       await flushPromises();
@@ -1026,10 +852,7 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport: {
-          advertised$: constant(aTransport),
-          active$: constant(aTransportWithSFUConfig),
-        },
+        localTransport$: constant(mockTransport),
       });
       return { scope, localMembership };
     };
@@ -1039,7 +862,7 @@ describe("LocalMembership", () => {
       const setScreenShareEnabled = vi.fn().mockRejectedValue(error);
       const connection = {
         state$: constant(ConnectionState.LivekitConnected),
-        transport: aTransport,
+        transport: mockTransportConfig,
         livekitRoom: mockLivekitRoom({
           localParticipant: mockLocalParticipant({
             isScreenShareEnabled: false,
diff --git a/src/state/CallViewModel/localMember/LocalMember.ts b/src/state/CallViewModel/localMember/LocalMember.ts
index 7303946a..bf508090 100644
--- a/src/state/CallViewModel/localMember/LocalMember.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.ts
@@ -38,6 +38,10 @@ import {
   startWith,
   switchMap,
   tap,
+  NEVER,
+  concat,
+  race,
+  Subject,
 } from "rxjs";
 import { type Logger } from "matrix-js-sdk/lib/logger";
 import { deepCompare } from "matrix-js-sdk/lib/utils";
@@ -77,8 +81,6 @@ import {
 } from "../remoteMembers/Connection.ts";
 import { type HomeserverConnected } from "./HomeserverConnected.ts";
 import { type LocalTransport } from "./LocalTransport.ts";
-import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers.ts";
-import { or$ } from "../../../utils/observable.ts";
 import { getSFUConfigWithOpenID } from "../../../livekit/openIDSFU.ts";
 
 export enum TransportState {
@@ -148,7 +150,7 @@ interface Props {
   homeserverConnected: HomeserverConnected;
   roomId: string;
   ownMembershipIdentity: CallMembershipIdentityParts;
-  localTransport: LocalTransport;
+  localTransport$: Observable<LocalTransport>;
   client: Pick<MatrixClient, "getDeviceId" | "getOpenIdToken">;
   matrixRTCSession: Pick<
     MatrixRTCSession,
@@ -194,7 +196,7 @@ interface Props {
 export const createLocalMembership$ = ({
   scope,
   connectionManager,
-  localTransport,
+  localTransport$: localTransportWithErrors$,
   homeserverConnected,
   createPublisherFactory,
   joinMatrixRTC,
@@ -252,20 +254,24 @@ export const createLocalMembership$ = ({
   const logger = parentLogger.getChild("[LocalMembership]");
   logger.debug(`Creating local membership..`);
 
-  // We consider error on the transport as fatal.
-  // Whether it is the active transport or the preferred transport.
-  const handleTransportError = (e: unknown): Observable<null> => {
-    let error: ElementCallError;
-    if (e instanceof ElementCallError) {
-      error = e;
-    } else {
-      error = new UnknownCallError(
-        e instanceof Error ? e : new Error("Unknown error from localTransport"),
-      );
-    }
-    setTransportError(error);
-    return of(null);
-  };
+  // Unwrap the local transport and set the state of the LocalMembership to error in case the transport is an error.
+  const fatalTransportError$ = new Subject<ElementCallError>();
+  const localTransport$ = localTransportWithErrors$.pipe(
+    catchError((e: unknown) => {
+      let error: ElementCallError;
+      if (e instanceof ElementCallError) {
+        error = e;
+      } else {
+        error = new UnknownCallError(
+          e instanceof Error
+            ? e
+            : new Error("Unknown error from localTransport"),
+        );
+      }
+      fatalTransportError$.next(error);
+      return NEVER; // Make this Observable swallow the error
+    }),
+  );
 
   async function checkDelegationSupport(
     endpointUrl: string,
@@ -303,58 +309,40 @@ export const createLocalMembership$ = ({
 
   // The transport that we will advertise in our membership, paired with info as
   // to whether delayed event delegation is supported
-  const joinParams$ = localTransport.advertised$.pipe(
-    catchError(handleTransportError),
-    distinctUntilChanged(areLivekitTransportsEqual),
-    switchMap((transport) => {
-      if (transport === null) return of(null);
-      const transportSupportsDelegation = checkDelegationSupport(
-        transport.livekit_service_url + "/delegate_delayed_leave",
-        `transport ${transport.livekit_service_url}`,
-      );
-      return or$(
-        from(homeserverSupportsDelegation),
-        from(transportSupportsDelegation),
-      ).pipe(
-        map((delegationSupported) => ({ transport, delegationSupported })),
-        startWith(null),
-      );
-    }),
-  );
-
-  // Unwrap the local transport and set the state of the LocalMembership to error in case the transport is an error.
-  const activeTransport$ = scope.behavior(
-    combineLatest([localTransport.active$, localTransport.advertised$]).pipe(
-      map(([active, advertised]) => {
-        // Our policy is to not publish to another transport if our prefered transport is miss-configured
-        if (advertised == null) return null;
-
-        return active?.transport ?? null;
+  const joinParams$ = scope.behavior(
+    localTransport$.pipe(
+      switchMap(async ({ transport }) => {
+        const transportSupportsDelegation = checkDelegationSupport(
+          transport.livekit_service_url + "/delegate_delayed_leave",
+          `transport ${transport.livekit_service_url}`,
+        );
+        return {
+          transport,
+          delegationSupported:
+            (await homeserverSupportsDelegation) ||
+            (await transportSupportsDelegation),
+        };
       }),
-      catchError(handleTransportError),
-      distinctUntilChanged(areLivekitTransportsEqual),
     ),
+    null,
   );
 
   // Drop Epoch data here since we will not combine this anymore
   const localConnection$ = scope.behavior(
     combineLatest([
       connectionManager.connectionManagerData$,
-      activeTransport$,
+      localTransport$,
     ]).pipe(
-      map(([{ value: connectionData }, localTransport]) => {
-        if (localTransport === null) {
-          return null;
-        }
-
-        return connectionData.getConnectionForTransport(localTransport);
-      }),
+      map(([{ value: connectionData }, { transport }]) =>
+        connectionData.getConnectionForTransport(transport),
+      ),
       tap((connection) => {
         logger.info(
           `Local connection updated: ${connection?.transport?.livekit_service_url}`,
         );
       }),
     ),
+    null,
   );
 
   // Tracks error that happen when creating the local tracks.
@@ -490,18 +478,6 @@ export const createLocalMembership$ = ({
     }
   };
 
-  const fatalTransportError$ = new BehaviorSubject<ElementCallError | null>(
-    null,
-  );
-
-  const setTransportError = (e: ElementCallError): void => {
-    if (fatalTransportError$.value !== null) {
-      logger.error("Multiple Transport Errors:", e);
-    } else {
-      fatalTransportError$.next(e);
-    }
-  };
-
   const localConnectionState$ = localConnection$.pipe(
     switchMap((connection) => (connection ? connection.state$ : of(null))),
   );
@@ -509,38 +485,29 @@ export const createLocalMembership$ = ({
   const mediaState$: Behavior<LocalMemberMediaState> = scope.behavior(
     combineLatest([
       localConnectionState$,
-      activeTransport$,
       joinAndPublishRequested$,
       from(trackStartRequested.promise).pipe(
         map(() => true),
         startWith(false),
       ),
     ]).pipe(
-      map(
-        ([
-          localConnectionState,
-          localTransport,
-          shouldPublish,
-          shouldStartTracks,
-        ]) => {
-          if (!localTransport) return null;
-          const trackState: TrackState = shouldStartTracks
-            ? TrackState.Ready
-            : TrackState.WaitingForUser;
+      map(([localConnectionState, shouldPublish, shouldStartTracks]) => {
+        const trackState: TrackState = shouldStartTracks
+          ? TrackState.Ready
+          : TrackState.WaitingForUser;
 
-          if (
-            localConnectionState !== ConnectionState.LivekitConnected ||
-            trackState !== TrackState.Ready
-          )
-            return {
-              connection: localConnectionState,
-              tracks: trackState,
-            };
-          if (!shouldPublish) return PublishState.WaitingForUser;
-          // if (!publishing) return PublishState.Starting;
-          return PublishState.Publishing;
-        },
-      ),
+        if (
+          localConnectionState !== ConnectionState.LivekitConnected ||
+          trackState !== TrackState.Ready
+        )
+          return {
+            connection: localConnectionState,
+            tracks: trackState,
+          };
+        if (!shouldPublish) return PublishState.WaitingForUser;
+        // if (!publishing) return PublishState.Starting;
+        return PublishState.Publishing;
+      }),
       distinctUntilChanged(deepCompare),
     ),
   );
@@ -554,30 +521,36 @@ export const createLocalMembership$ = ({
   };
 
   const localMemberState$ = scope.behavior<LocalMemberState>(
-    combineLatest([
-      mediaState$,
-      homeserverConnected.rtsSession$,
-      fatalMatrixError$,
-      fatalTransportError$,
-      publishError$,
-    ]).pipe(
-      map(
-        ([
-          mediaState,
-          rtcSessionStatus,
-          fatalMatrixError,
-          fatalTransportError,
-          publishError,
-        ]) => {
-          if (fatalTransportError !== null) return fatalTransportError;
-          // `mediaState` will be 'null' until the transport/connection appears.
-          if (mediaState && rtcSessionStatus)
-            return {
-              matrix: fatalMatrixError ?? rtcSessionStatus,
-              media: publishError ?? mediaState,
-            };
-          return TransportState.Waiting;
-        },
+    concat(
+      // Waiting until…
+      of(TransportState.Waiting),
+      race(
+        // either there is a fatal transport error
+        fatalTransportError$,
+        // or the transport is available.
+        localTransport$.pipe(
+          switchMap(() =>
+            // Once available, track session/media state.
+            combineLatest([
+              mediaState$,
+              homeserverConnected.rtsSession$,
+              fatalMatrixError$,
+              publishError$,
+            ]).pipe(
+              map(
+                ([
+                  mediaState,
+                  rtcSessionStatus,
+                  fatalMatrixError,
+                  publishError,
+                ]) => ({
+                  matrix: fatalMatrixError ?? rtcSessionStatus,
+                  media: publishError ?? mediaState,
+                }),
+              ),
+            ),
+          ),
+        ),
       ),
     ),
   );
diff --git a/src/state/CallViewModel/localMember/LocalTransport.test.ts b/src/state/CallViewModel/localMember/LocalTransport.test.ts
index a77c7a16..90d0d15e 100644
--- a/src/state/CallViewModel/localMember/LocalTransport.test.ts
+++ b/src/state/CallViewModel/localMember/LocalTransport.test.ts
@@ -14,19 +14,10 @@ import {
   type MockedObject,
   vi,
 } from "vitest";
-import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
-import { lastValueFrom } from "rxjs";
 import fetchMock from "fetch-mock";
 
-import {
-  mockConfig,
-  flushPromises,
-  ownMemberMock,
-  testScope,
-} from "../../../utils/test";
-import { createLocalTransport$ } from "./LocalTransport";
-import { constant } from "../../Behavior";
-import { Epoch, ObservableScope } from "../../ObservableScope";
+import { mockConfig, ownMemberMock } from "../../../utils/test";
+import { getLocalTransport } from "./LocalTransport";
 import {
   MatrixRTCTransportMissingError,
   FailToGetOpenIdToken,
@@ -47,118 +38,79 @@ describe("LocalTransport", () => {
   beforeEach(() => vi.clearAllMocks());
 
   it("throws if config is missing", async () => {
-    const { advertised$, active$ } = createLocalTransport$({
-      scope: testScope(),
-      roomId: "!room:example.org",
-      memberships$: constant(new Epoch<CallMembership[]>([])),
-      client: {
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        _unstable_getRTCTransports: async () => Promise.resolve([]),
-        getDomain: () => "example.org",
-        // These won't be called in this error path but satisfy the type
-        getOpenIdToken: vi.fn(),
-        getDeviceId: vi.fn(),
-      },
-      ownMembershipIdentity: ownMemberMock,
-      matrixRTCMode: MatrixRTCMode.Compatibility,
-    });
-    await flushPromises();
-
-    expect(() => advertised$.value).toThrow(
-      new MatrixRTCTransportMissingError("example.org"),
-    );
-    expect(() => active$.value).toThrow(
-      new MatrixRTCTransportMissingError("example.org"),
-    );
+    await expect(
+      getLocalTransport({
+        roomId: "!room:example.org",
+        client: {
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          _unstable_getRTCTransports: async () => Promise.resolve([]),
+          getDomain: () => "example.org",
+          // These won't be called in this error path but satisfy the type
+          getOpenIdToken: vi.fn(),
+          getDeviceId: vi.fn(),
+        },
+        ownMembershipIdentity: ownMemberMock,
+        matrixRTCMode: MatrixRTCMode.Compatibility,
+      }),
+    ).rejects.toThrow(new MatrixRTCTransportMissingError("example.org"));
   });
 
   it("throws FailToGetOpenIdToken when OpenID fetch fails", async () => {
     // Provide a valid config so makeTransportInternal resolves a transport
-    const scope = new ObservableScope();
     mockConfig({
       livekit: { livekit_service_url: "https://lk.example.org" },
     });
-    const resolver = Promise.withResolvers<void>();
-    vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockImplementation(
-      async () => {
-        await resolver.promise;
-        throw new FailToGetOpenIdToken(new Error("no openid"));
-      },
+    vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockRejectedValue(
+      new FailToGetOpenIdToken(new Error("no openid")),
     );
-    const observations: unknown[] = [];
-    const errors: Error[] = [];
-    const { advertised$, active$ } = createLocalTransport$({
-      scope,
-      roomId: "!example_room_id",
-      memberships$: constant(new Epoch<CallMembership[]>([])),
-      client: {
-        getDomain: () => "example.org",
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        _unstable_getRTCTransports: async () => Promise.resolve([]),
-        getOpenIdToken: vi.fn(),
-        getDeviceId: vi.fn(),
-      },
-      ownMembershipIdentity: ownMemberMock,
-      matrixRTCMode: MatrixRTCMode.Compatibility,
-    });
-    active$.subscribe(
-      (o) => observations.push(o),
-      (e) => errors.push(e),
-    );
-    resolver.resolve();
-    await flushPromises();
 
-    const expectedError = new FailToGetOpenIdToken(new Error("no openid"));
-    expect(observations).toStrictEqual([null]);
-    expect(errors).toStrictEqual([expectedError]);
-    expect(() => advertised$.value).toThrow(expectedError);
-    expect(() => active$.value).toThrow(expectedError);
+    await expect(
+      getLocalTransport({
+        roomId: "!example_room_id",
+        client: {
+          getDomain: () => "example.org",
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          _unstable_getRTCTransports: async () => Promise.resolve([]),
+          getOpenIdToken: vi.fn(),
+          getDeviceId: vi.fn(),
+        },
+        ownMembershipIdentity: ownMemberMock,
+        matrixRTCMode: MatrixRTCMode.Compatibility,
+      }),
+    ).rejects.toThrow(new FailToGetOpenIdToken(new Error("no openid")));
   });
 
-  it("emits preferred transport after OpenID resolves", async () => {
+  it("returns preferred transport", async () => {
     // Use config so transport discovery succeeds, but delay OpenID JWT fetch
     mockConfig({
       livekit: { livekit_service_url: "https://lk.example.org" },
     });
 
-    const openIdResolver = Promise.withResolvers<openIDSFU.SFUConfig>();
-
-    vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockReturnValue(
-      openIdResolver.promise,
-    );
-
-    const { advertised$, active$ } = createLocalTransport$({
-      scope: testScope(),
-      roomId: "!room:example.org",
-      memberships$: constant(new Epoch<CallMembership[]>([])),
-      client: {
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        _unstable_getRTCTransports: async () => Promise.resolve([]),
-        getDomain: () => "example.org",
-        getOpenIdToken: vi.fn(),
-        getDeviceId: vi.fn(),
-      },
-      ownMembershipIdentity: ownMemberMock,
-      matrixRTCMode: MatrixRTCMode.Compatibility,
-    });
-
-    openIdResolver.resolve?.({
+    vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockResolvedValue({
       url: "https://lk.example.org",
       jwt: "jwt",
       livekitAlias: "Akph4alDMhen",
       livekitIdentity: ownMemberMock.userId + ":" + ownMemberMock.deviceId,
     });
-    expect(advertised$.value).toBe(null);
-    expect(active$.value).toBe(null);
-    await flushPromises();
-    // final
-    const expectedTransport = {
-      livekit_service_url: "https://lk.example.org",
-      type: "livekit",
-    };
-    expect(advertised$.value).toStrictEqual(expectedTransport);
-    expect(active$.value).toStrictEqual({
-      transport: expectedTransport,
+
+    expect(
+      await getLocalTransport({
+        roomId: "!room:example.org",
+        client: {
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          _unstable_getRTCTransports: async () => Promise.resolve([]),
+          getDomain: () => "example.org",
+          getOpenIdToken: vi.fn(),
+          getDeviceId: vi.fn(),
+        },
+        ownMembershipIdentity: ownMemberMock,
+        matrixRTCMode: MatrixRTCMode.Compatibility,
+      }),
+    ).toStrictEqual({
+      transport: {
+        livekit_service_url: "https://lk.example.org",
+        type: "livekit",
+      },
       sfuConfig: {
         jwt: "jwt",
         livekitAlias: "Akph4alDMhen",
@@ -168,22 +120,19 @@ describe("LocalTransport", () => {
     });
   });
 
-  type LocalTransportProps = Parameters<typeof createLocalTransport$>[0];
+  type LocalTransportProps = Parameters<typeof getLocalTransport>[0];
 
   describe("transport configuration mechanisms", () => {
     let localTransportOpts: LocalTransportProps & {
       client: MockedObject<LocalTransportProps["client"]>;
     };
-    let openIdResolver: PromiseWithResolvers<openIDSFU.SFUConfig>;
     beforeEach(() => {
       mockConfig({});
       customLivekitUrl.setValue(customLivekitUrl.defaultValue);
       localTransportOpts = {
         ownMembershipIdentity: ownMemberMock,
-        scope: testScope(),
         roomId: "!example_room_id",
         matrixRTCMode: MatrixRTCMode.Compatibility,
-        memberships$: constant(new Epoch<CallMembership[]>([])),
         client: {
           getDomain: vi.fn().mockReturnValue("example.org"),
           // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -192,10 +141,6 @@ describe("LocalTransport", () => {
           getDeviceId: vi.fn(),
         },
       };
-      openIdResolver = Promise.withResolvers<openIDSFU.SFUConfig>();
-      vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockReturnValue(
-        openIdResolver.promise,
-      );
     });
 
     afterEach(() => {
@@ -206,19 +151,15 @@ describe("LocalTransport", () => {
       mockConfig({
         livekit: { livekit_service_url: "https://lk.example.org" },
       });
-      const { advertised$, active$ } =
-        createLocalTransport$(localTransportOpts);
-      openIdResolver.resolve?.(openIdResponse);
-      expect(advertised$.value).toBe(null);
-      expect(active$.value).toBe(null);
-      await flushPromises();
-      const expectedTransport = {
-        livekit_service_url: "https://lk.example.org",
-        type: "livekit",
-      };
-      expect(advertised$.value).toStrictEqual(expectedTransport);
-      expect(active$.value).toStrictEqual({
-        transport: expectedTransport,
+      vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockResolvedValue(
+        openIdResponse,
+      );
+
+      expect(await getLocalTransport(localTransportOpts)).toStrictEqual({
+        transport: {
+          livekit_service_url: "https://lk.example.org",
+          type: "livekit",
+        },
         sfuConfig: {
           jwt: "e30=.eyJzdWIiOiJAbWU6ZXhhbXBsZS5vcmc6QUJDREVGIiwidmlkZW8iOnsicm9vbSI6IiFleGFtcGxlX3Jvb21faWQifX0=.e30=",
           livekitAlias: "Akph4alDMhen",
@@ -230,12 +171,11 @@ describe("LocalTransport", () => {
 
     it("supports getting transport via user settings", async () => {
       customLivekitUrl.setValue("https://lk.example.org");
-      const { advertised$, active$ } =
-        createLocalTransport$(localTransportOpts);
-      openIdResolver.resolve?.(openIdResponse);
-      expect(advertised$.value).toBe(null);
-      await flushPromises();
-      expect(active$.value).toStrictEqual({
+      vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockResolvedValue(
+        openIdResponse,
+      );
+
+      expect(await getLocalTransport(localTransportOpts)).toStrictEqual({
         transport: {
           livekit_service_url: "https://lk.example.org",
           type: "livekit",
@@ -253,19 +193,15 @@ describe("LocalTransport", () => {
       localTransportOpts.client._unstable_getRTCTransports.mockResolvedValue([
         { type: "livekit", livekit_service_url: "https://lk.example.org" },
       ]);
-      const { advertised$, active$ } =
-        createLocalTransport$(localTransportOpts);
-      openIdResolver.resolve?.(openIdResponse);
-      expect(advertised$.value).toBe(null);
-      expect(active$.value).toBe(null);
-      await flushPromises();
-      const expectedTransport = {
-        livekit_service_url: "https://lk.example.org",
-        type: "livekit",
-      };
-      expect(advertised$.value).toStrictEqual(expectedTransport);
-      expect(active$.value).toStrictEqual({
-        transport: expectedTransport,
+      vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockResolvedValue(
+        openIdResponse,
+      );
+
+      expect(await getLocalTransport(localTransportOpts)).toStrictEqual({
+        transport: {
+          livekit_service_url: "https://lk.example.org",
+          type: "livekit",
+        },
         sfuConfig: {
           jwt: "e30=.eyJzdWIiOiJAbWU6ZXhhbXBsZS5vcmc6QUJDREVGIiwidmlkZW8iOnsicm9vbSI6IiFleGFtcGxlX3Jvb21faWQifX0=.e30=",
           livekitAlias: "Akph4alDMhen",
@@ -279,38 +215,31 @@ describe("LocalTransport", () => {
       localTransportOpts.client._unstable_getRTCTransports.mockResolvedValue([
         { type: "livekit", livekit_service_url: "https://lk.example.org" },
       ]);
-      openIdResolver.reject(
+      vi.spyOn(openIDSFU, "getSFUConfigWithOpenID").mockRejectedValue(
         new FailToGetOpenIdToken(new Error("Test driven error")),
       );
-      await expect(async () =>
-        lastValueFrom(createLocalTransport$(localTransportOpts).active$),
-      ).rejects.toThrow(expect.any(FailToGetOpenIdToken));
+
+      await expect(getLocalTransport(localTransportOpts)).rejects.toThrow(
+        expect.any(FailToGetOpenIdToken),
+      );
     });
 
     it("throws if no options are available", async () => {
-      const { advertised$, active$ } = createLocalTransport$({
-        scope: testScope(),
-        ownMembershipIdentity: ownMemberMock,
-        roomId: "!example_room_id",
-        matrixRTCMode: MatrixRTCMode.Compatibility,
-        memberships$: constant(new Epoch<CallMembership[]>([])),
-        client: {
-          getDomain: () => "example.org",
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          _unstable_getRTCTransports: async () => Promise.resolve([]),
-          // These won't be called in this error path but satisfy the type
-          getOpenIdToken: vi.fn(),
-          getDeviceId: vi.fn(),
-        },
-      });
-      await flushPromises();
-
-      expect(() => advertised$.value).toThrow(
-        new MatrixRTCTransportMissingError("example.org"),
-      );
-      expect(() => active$.value).toThrow(
-        new MatrixRTCTransportMissingError("example.org"),
-      );
+      await expect(
+        getLocalTransport({
+          ownMembershipIdentity: ownMemberMock,
+          roomId: "!example_room_id",
+          matrixRTCMode: MatrixRTCMode.Compatibility,
+          client: {
+            getDomain: () => "example.org",
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            _unstable_getRTCTransports: async () => Promise.resolve([]),
+            // These won't be called in this error path but satisfy the type
+            getOpenIdToken: vi.fn(),
+            getDeviceId: vi.fn(),
+          },
+        }),
+      ).rejects.toThrow(new MatrixRTCTransportMissingError("example.org"));
     });
   });
 });
diff --git a/src/state/CallViewModel/localMember/LocalTransport.ts b/src/state/CallViewModel/localMember/LocalTransport.ts
index c5aa3959..0aa150d5 100644
--- a/src/state/CallViewModel/localMember/LocalTransport.ts
+++ b/src/state/CallViewModel/localMember/LocalTransport.ts
@@ -5,17 +5,11 @@ SPDX-License-IdFentifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import {
-  type CallMembership,
-  type LivekitTransportConfig,
-} from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
 import { type MatrixClient } from "matrix-js-sdk";
-import { distinctUntilChanged, from, map, of, switchMap } from "rxjs";
 import { logger as rootLogger, type Logger } from "matrix-js-sdk/lib/logger";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
 
-import { type Behavior } from "../../Behavior.ts";
-import { type Epoch, type ObservableScope } from "../../ObservableScope.ts";
 import { Config } from "../../../config/Config.ts";
 import {
   FailToGetOpenIdToken,
@@ -27,19 +21,12 @@ import {
   type SFUConfig,
   type OpenIDClientParts,
 } from "../../../livekit/openIDSFU.ts";
-import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers.ts";
 import { customLivekitUrl } from "../../../settings/settings.ts";
 import { RtcTransportAutoDiscovery } from "./RtcTransportAutoDiscovery.ts";
 import { type MatrixRTCMode } from "../../../config/ConfigOptions.ts";
 
-/*
- * It figures out “which LiveKit focus URL/alias the local user should use,”
- * and ensures the SFU path is primed before advertising that choice.
- */
 interface Props {
-  scope: ObservableScope;
   ownMembershipIdentity: CallMembershipIdentityParts;
-  memberships$: Behavior<Epoch<CallMembership[]>>;
   client: Pick<MatrixClient, "getDomain" | "_unstable_getRTCTransports"> &
     OpenIDClientParts;
   // Used by the jwt service to create the livekit room and compute the livekit alias.
@@ -68,114 +55,65 @@ interface Props {
 //
 // 2.
 // We need to make sure we do not sent livekit_alias in sticky events and that we drop all code for sending state events!
-export interface LocalTransportWithSFUConfig {
+export interface LocalTransport {
   transport: LivekitTransportConfig;
   sfuConfig: SFUConfig;
 }
 
-export function isLocalTransportWithSFUConfig(
-  obj: LivekitTransportConfig | LocalTransportWithSFUConfig,
-): obj is LocalTransportWithSFUConfig {
+export function isLocalTransport(
+  obj: LivekitTransportConfig | LocalTransport,
+): obj is LocalTransport {
   return "transport" in obj && "sfuConfig" in obj;
 }
 
-export interface LocalTransport {
-  /**
-   * The transport to be advertised in our MatrixRTC membership. `null` when not
-   * yet fetched/validated.
-   */
-  advertised$: Behavior<LivekitTransportConfig | null>;
-  /**
-   * The transport to connect to and publish media on. `null` when not yet known
-   * or available.
-   */
-  active$: Behavior<LocalTransportWithSFUConfig | null>;
-}
-
 /**
- * Connects to the JWT service and determines the transports that the local member should use.
+ * Connects to the JWT service and determines the transport that the local member should use.
  *
  * @prop useOldJwtEndpoint Whether to set forceOldJwtEndpoint on the returned transport and to use the old JWT endpoint.
  * This is used when the connection manager needs to know if it has to use the legacy endpoint which implies a string concatenated rtcBackendIdentity.
  * (which is expected for non sticky event based rtc member events)
- * @returns The transport to advertise in the local MatrixRTC membership, along with the transport to actively publish media to.
+ * @returns The transport to advertise in our MatrixRTC membership and publish media on.
  * @throws MatrixRTCTransportMissingError | FailToGetOpenIdToken
  */
-export const createLocalTransport$ = ({
-  scope,
-  memberships$,
+export async function getLocalTransport({
   ownMembershipIdentity,
   client,
   roomId,
   matrixRTCMode,
-}: Props): LocalTransport => {
+}: Props): Promise<LocalTransport> {
   const logger = rootLogger.getChild("[LocalTransport]");
-
-  const transportDiscovery = new RtcTransportAutoDiscovery({
+  const discovery = new RtcTransportAutoDiscovery({
     client: client,
     resolvedConfig: Config.get(),
     logger: logger,
   });
+  const customUrl = customLivekitUrl.value$.value;
 
-  // Get the preferred transport from the current deployment.
-  const discoveredTransport$ = from(
-    transportDiscovery.discoverPreferredTransport(),
-  );
+  // Respect the user's custom URL, if set
+  const transport: LivekitTransportConfig | null = customUrl
+    ? { type: "livekit", livekit_service_url: customUrl }
+    : await discovery.discoverPreferredTransport();
 
-  const preferredConfig$ = customLivekitUrl.value$.pipe(
-    switchMap((customUrl) => {
-      if (customUrl) {
-        return of({
-          type: "livekit",
-          livekit_service_url: customUrl,
-        } as LivekitTransportConfig);
-      } else {
-        return discoveredTransport$;
-      }
-    }),
-    map((config) => {
-      if (!config) {
-        // Bubbled up from the preferredConfig$ observable.
-        throw new MatrixRTCTransportMissingError(client.getDomain() ?? "");
-      }
-      return config;
-    }),
-    distinctUntilChanged(areLivekitTransportsEqual),
-  );
+  if (transport === null)
+    throw new MatrixRTCTransportMissingError(client.getDomain() ?? "");
 
-  const preferredTransport$ = preferredConfig$.pipe(
-    switchMap(async (transport) => {
-      try {
-        return await doOpenIdAndJWTFromUrl(
-          transport,
-          matrixRTCMode,
-          ownMembershipIdentity,
-          roomId,
-          client,
-          logger,
-        );
-      } catch (e) {
-        logger.error(
-          `Failed to authenticate to transport ${transport.livekit_service_url}`,
-          e,
-        );
-        throw mapAuthErrorToUserFriendlyError(e);
-      }
-    }),
-  );
-
-  // Always publish on and advertise the preferred transport.
-  return {
-    advertised$: scope.behavior(
-      preferredTransport$.pipe(
-        map((t) => t.transport),
-        distinctUntilChanged(areLivekitTransportsEqual),
-      ),
-      null,
-    ),
-    active$: scope.behavior(preferredTransport$, null),
-  };
-};
+  try {
+    return await doOpenIdAndJWTFromUrl(
+      transport,
+      matrixRTCMode,
+      ownMembershipIdentity,
+      roomId,
+      client,
+      logger,
+    );
+  } catch (e) {
+    logger.error(
+      `Failed to authenticate to transport ${transport.livekit_service_url}`,
+      e,
+    );
+    throw mapAuthErrorToUserFriendlyError(e);
+  }
+}
 
 /**
  *  Utility to ensure the user can authenticate with the SFU.
@@ -199,7 +137,7 @@ async function doOpenIdAndJWTFromUrl(
   roomId: string,
   client: Pick<MatrixClient, "_unstable_getRTCTransports"> & OpenIDClientParts,
   logger?: Logger,
-): Promise<LocalTransportWithSFUConfig> {
+): Promise<LocalTransport> {
   const sfuConfig = await getSFUConfigWithOpenID(
     client,
     membership,
diff --git a/src/state/CallViewModel/remoteMembers/ConnectionManager.test.ts b/src/state/CallViewModel/remoteMembers/ConnectionManager.test.ts
index 809c8bcc..0903702f 100644
--- a/src/state/CallViewModel/remoteMembers/ConnectionManager.test.ts
+++ b/src/state/CallViewModel/remoteMembers/ConnectionManager.test.ts
@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
-import { BehaviorSubject } from "rxjs";
+import { BehaviorSubject, NEVER } from "rxjs";
 import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
 import { type RemoteParticipant } from "livekit-client";
 import { logger } from "matrix-js-sdk/lib/logger";
@@ -20,7 +20,7 @@ import { type ConnectionFactory } from "./ConnectionFactory.ts";
 import { type Connection } from "./Connection.ts";
 import { ownMemberMock, withTestScheduler } from "../../../utils/test.ts";
 import { areLivekitTransportsEqual } from "./MatrixLivekitMembers.ts";
-import { constant, type Behavior } from "../../Behavior.ts";
+import { type Behavior } from "../../Behavior.ts";
 
 // Some test constants
 
@@ -74,7 +74,7 @@ describe("connections$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport$: constant(null),
+        localTransport$: NEVER,
         remoteTransports$: behavior("a", {
           a: new Epoch([TRANSPORT_1, TRANSPORT_2], 0),
         }),
@@ -115,7 +115,7 @@ describe("connections$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport$: constant(null),
+        localTransport$: NEVER,
         remoteTransports$: behavior("abcdef", {
           a: new Epoch([TRANSPORT_1], 0),
           b: new Epoch([TRANSPORT_1], 1),
@@ -162,7 +162,7 @@ describe("connections$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport$: constant(null),
+        localTransport$: NEVER,
         remoteTransports$: behavior("abc", {
           a: new Epoch([TRANSPORT_1], 0),
           b: new Epoch([TRANSPORT_1, TRANSPORT_2], 1),
@@ -297,7 +297,7 @@ describe("connectionManagerData$ stream", () => {
       const { connectionManagerData$ } = createConnectionManager$({
         scope: testScope,
         connectionFactory: fakeConnectionFactory,
-        localTransport$: constant(null),
+        localTransport$: NEVER,
         remoteTransports$: behavior("a", {
           a: new Epoch([TRANSPORT_1, TRANSPORT_2], 0),
         }),
diff --git a/src/state/CallViewModel/remoteMembers/ConnectionManager.ts b/src/state/CallViewModel/remoteMembers/ConnectionManager.ts
index 5ebd2ce6..4af08b49 100644
--- a/src/state/CallViewModel/remoteMembers/ConnectionManager.ts
+++ b/src/state/CallViewModel/remoteMembers/ConnectionManager.ts
@@ -7,7 +7,14 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
-import { combineLatest, map, of, switchMap } from "rxjs";
+import {
+  combineLatest,
+  map,
+  type Observable,
+  of,
+  switchMap,
+  startWith,
+} from "rxjs";
 import { type Logger } from "matrix-js-sdk/lib/logger";
 import { type RemoteParticipant } from "livekit-client";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
@@ -19,8 +26,8 @@ import { generateItemsWithEpoch } from "../../../utils/observable.ts";
 import { areLivekitTransportsEqual } from "./MatrixLivekitMembers.ts";
 import { type ConnectionFactory } from "./ConnectionFactory.ts";
 import {
-  isLocalTransportWithSFUConfig,
-  type LocalTransportWithSFUConfig,
+  isLocalTransport,
+  type LocalTransport,
 } from "../localMember/LocalTransport.ts";
 import { type SFUConfig } from "../../../livekit/openIDSFU.ts";
 
@@ -78,7 +85,7 @@ export class ConnectionManagerData {
 interface Props {
   scope: ObservableScope;
   connectionFactory: ConnectionFactory;
-  localTransport$: Behavior<LocalTransportWithSFUConfig | null>;
+  localTransport$: Observable<LocalTransport>;
   remoteTransports$: Behavior<Epoch<LivekitTransportConfig[]>>;
 
   logger: Logger;
@@ -121,6 +128,11 @@ export function createConnectionManager$({
   const logger = parentLogger.getChild("[ConnectionManager]");
   // TODO logger: only construct one logger from the client and make it compatible via a EC specific sing
 
+  const localTransportAsArray$ = localTransport$.pipe(
+    map((transport) => [transport]),
+    startWith([]),
+  );
+
   /**
    * All transports currently managed by the ConnectionManager.
    *
@@ -130,16 +142,12 @@ export function createConnectionManager$({
    * externally this is modified via `registerTransports()`.
    */
   const localAndRemoteTransports$: Behavior<
-    Epoch<(LivekitTransportConfig | LocalTransportWithSFUConfig)[]>
+    Epoch<(LivekitTransportConfig | LocalTransport)[]>
   > = scope.behavior(
-    combineLatest([remoteTransports$, localTransport$]).pipe(
+    combineLatest([localTransportAsArray$, remoteTransports$]).pipe(
       // Combine local and remote transports into one transport array
       // and set the forceOldJwtEndpoint property on the local transport
-      map(([remoteTransports, localTransport]) => {
-        let localTransportAsArray: LocalTransportWithSFUConfig[] = [];
-        if (localTransport) {
-          localTransportAsArray = [localTransport];
-        }
+      map(([localTransportAsArray, remoteTransports]) => {
         const dedupedRemote = removeDuplicateTransports(remoteTransports.value);
         const remoteWithoutLocal = dedupedRemote.filter(
           (transport) =>
@@ -170,7 +178,7 @@ export function createConnectionManager$({
         "ConnectionManager connections$",
         function* (transports) {
           for (const transport of transports) {
-            if (isLocalTransportWithSFUConfig(transport)) {
+            if (isLocalTransport(transport)) {
               // This is the local transport; only the `LocalTransportWithSFUConfig` has a `sfuConfig` field.
               yield {
                 keys: [
diff --git a/src/state/CallViewModel/remoteMembers/integration.test.ts b/src/state/CallViewModel/remoteMembers/integration.test.ts
index 67d15a38..0db25c3b 100644
--- a/src/state/CallViewModel/remoteMembers/integration.test.ts
+++ b/src/state/CallViewModel/remoteMembers/integration.test.ts
@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { test, vi, expect, beforeEach, afterEach } from "vitest";
-import { BehaviorSubject } from "rxjs";
+import { BehaviorSubject, NEVER } from "rxjs";
 import { type Room as LivekitRoom } from "livekit-client";
 import EventEmitter from "events";
 import fetchMock from "fetch-mock";
@@ -34,7 +34,6 @@ import {
 } from "./MatrixLivekitMembers.ts";
 import { createConnectionManager$ } from "./ConnectionManager.ts";
 import { membershipsAndTransports$ } from "../../SessionBehaviors.ts";
-import { constant } from "../../Behavior.ts";
 import { localRtcMember, testJWTToken } from "../../../utils/test-fixtures.ts";
 
 // Test the integration of ConnectionManager and MatrixLivekitMerger
@@ -124,7 +123,7 @@ test("bob, carl, then bob joining no tracks yet", () => {
     const connectionManager = createConnectionManager$({
       scope: testScope,
       connectionFactory: ecConnectionFactory,
-      localTransport$: constant(null),
+      localTransport$: NEVER,
       remoteTransports$: membershipsAndTransports.transports$,
       logger: logger,
       ownMembershipIdentity: ownMemberMock,
diff --git a/src/state/ObservableScope.ts b/src/state/ObservableScope.ts
index 8f09cb6e..d73adfda 100644
--- a/src/state/ObservableScope.ts
+++ b/src/state/ObservableScope.ts
@@ -18,6 +18,7 @@ import {
   share,
   take,
   takeUntil,
+  shareReplay,
 } from "rxjs";
 
 import { logger } from "matrix-js-sdk/lib/logger";
@@ -67,6 +68,17 @@ export class ObservableScope {
   public readonly share: MonoTypeOperator = (input$) =>
     input$.pipe(this.bindImpl, this.shareImpl);
 
+  private readonly shareReplayImpl: MonoTypeOperator = shareReplay({
+    bufferSize: 1,
+    refCount: false,
+  });
+  /**
+   * Shares (multicasts) the Observable as a hot Observable, replaying the most
+   * recently emitted value upon subscription.
+   */
+  public readonly shareReplay: MonoTypeOperator = (input$) =>
+    input$.pipe(this.bindImpl, this.shareReplayImpl);
+
   /**
    * Converts an Observable to a Behavior. If no initial value is specified, the
    * Observable must synchronously emit an initial value.
diff --git a/src/utils/observable.test.ts b/src/utils/observable.test.ts
index 392f742a..80cbb3c8 100644
--- a/src/utils/observable.test.ts
+++ b/src/utils/observable.test.ts
@@ -9,30 +9,9 @@ import { expect, test } from "vitest";
 import { type Observable, of, Subject, switchMap } from "rxjs";
 
 import { withTestScheduler } from "./test";
-import { or$, filterBehavior, generateItems, pauseWhen } from "./observable";
+import { filterBehavior, generateItems, pauseWhen } from "./observable";
 import { type Behavior } from "../state/Behavior";
 
-const yesNo = {
-  y: true,
-  n: false,
-};
-
-test("or$", () => {
-  withTestScheduler(({ behavior, expectObservable }) => {
-    const input1Marbles = "ny--n--";
-    const input2Marbles = "n-y--n-";
-    const input3Marbles = "n--y--n";
-    const outputMarbles = "nyyyyyn";
-    expectObservable(
-      or$(
-        behavior(input1Marbles, yesNo),
-        behavior(input2Marbles, yesNo),
-        behavior(input3Marbles, yesNo),
-      ),
-    ).toBe(outputMarbles, yesNo);
-  });
-});
-
 test("pauseWhen", () => {
   withTestScheduler(({ behavior, expectObservable }) => {
     const inputMarbles = " abcdefgh-i-jk-";
diff --git a/src/utils/observable.ts b/src/utils/observable.ts
index 8468b3fb..ca51ad19 100644
--- a/src/utils/observable.ts
+++ b/src/utils/observable.ts
@@ -8,7 +8,6 @@ Please see LICENSE in the repository root for full details.
 import {
   type Observable,
   audit,
-  combineLatest,
   concat,
   defer,
   filter,
@@ -113,14 +112,6 @@ export function getValue<T>(state$: Observable<T>): T {
   return value;
 }
 
-/**
- * Creates an Observable that has a value of true whenever some of its inputs
- * are true.
- */
-export function or$(...inputs: Observable<boolean>[]): Observable<boolean> {
-  return combineLatest(inputs, (...flags) => flags.some((flag) => flag));
-}
-
 /**
  * RxJS operator that pauses all changes in the input value whenever a Behavior
  * is true. When the Behavior returns to being false, the most recently

From 0211d5c367be4955cbd2a436033249c025ae3f6c Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Tue, 22 Sep 2026 09:45:48 +0200
Subject: [PATCH 107/154] Remove unused shareReplay operator

---
 src/state/ObservableScope.ts | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/state/ObservableScope.ts b/src/state/ObservableScope.ts
index d73adfda..8f09cb6e 100644
--- a/src/state/ObservableScope.ts
+++ b/src/state/ObservableScope.ts
@@ -18,7 +18,6 @@ import {
   share,
   take,
   takeUntil,
-  shareReplay,
 } from "rxjs";
 
 import { logger } from "matrix-js-sdk/lib/logger";
@@ -68,17 +67,6 @@ export class ObservableScope {
   public readonly share: MonoTypeOperator = (input$) =>
     input$.pipe(this.bindImpl, this.shareImpl);
 
-  private readonly shareReplayImpl: MonoTypeOperator = shareReplay({
-    bufferSize: 1,
-    refCount: false,
-  });
-  /**
-   * Shares (multicasts) the Observable as a hot Observable, replaying the most
-   * recently emitted value upon subscription.
-   */
-  public readonly shareReplay: MonoTypeOperator = (input$) =>
-    input$.pipe(this.bindImpl, this.shareReplayImpl);
-
   /**
    * Converts an Observable to a Behavior. If no initial value is specified, the
    * Observable must synchronously emit an initial value.

From 3a189d155bc9b5c8c13e300833135bb8d4d938b3 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Tue, 22 Sep 2026 09:56:02 +0200
Subject: [PATCH 108/154] Remove references to outdated variables or types

---
 src/state/CallViewModel/localMember/LocalMember.ts   |  2 +-
 .../CallViewModel/remoteMembers/ConnectionManager.ts |  3 ++-
 src/state/SessionBehaviors.ts                        | 12 ++++--------
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/state/CallViewModel/localMember/LocalMember.ts b/src/state/CallViewModel/localMember/LocalMember.ts
index bf508090..9622ace9 100644
--- a/src/state/CallViewModel/localMember/LocalMember.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.ts
@@ -658,7 +658,7 @@ export const createLocalMembership$ = ({
       });
   });
 
-  // Keep matrix rtc session in sync with advertisedTransport$, connectRequested$
+  // Join and leave the session as needed
   scope.reconcile(
     scope.behavior(combineLatest([joinParams$, joinAndPublishRequested$])),
     async ([joinParams, shouldConnect]) => {
diff --git a/src/state/CallViewModel/remoteMembers/ConnectionManager.ts b/src/state/CallViewModel/remoteMembers/ConnectionManager.ts
index 4af08b49..35418fdf 100644
--- a/src/state/CallViewModel/remoteMembers/ConnectionManager.ts
+++ b/src/state/CallViewModel/remoteMembers/ConnectionManager.ts
@@ -179,7 +179,8 @@ export function createConnectionManager$({
         function* (transports) {
           for (const transport of transports) {
             if (isLocalTransport(transport)) {
-              // This is the local transport; only the `LocalTransportWithSFUConfig` has a `sfuConfig` field.
+              // This is the local transport; only the `LocalTransport`
+              // interface has a `sfuConfig` field.
               yield {
                 keys: [
                   transport.transport.livekit_service_url,
diff --git a/src/state/SessionBehaviors.ts b/src/state/SessionBehaviors.ts
index 784e3366..8d3986b6 100644
--- a/src/state/SessionBehaviors.ts
+++ b/src/state/SessionBehaviors.ts
@@ -22,6 +22,10 @@ import {
 } from "./ObservableScope";
 import { type Behavior } from "./Behavior";
 
+/**
+ * Tracks the transports used by ourselves, plus all other MatrixRTC session
+ * members.
+ */
 export const membershipsAndTransports$ = (
   scope: ObservableScope,
   memberships$: Behavior<Epoch<CallMembership[]>>,
@@ -31,14 +35,6 @@ export const membershipsAndTransports$ = (
   >;
   transports$: Behavior<Epoch<LivekitTransportConfig[]>>;
 } => {
-  /**
-   * Lists the transports used by ourselves, plus all other MatrixRTC session
-   * members.
-   * For completeness this also lists the preferred transport and
-   * whether we are in multi-SFU mode or sticky events mode.
-   * `advertisedTransport$` reads these values together, so bundling them avoids inconsistent state or
-   * excessive updates when using RxJS.
-   */
   const membershipsWithTransport$: Behavior<
     Epoch<
       {

From c9f911b7c97788835ecaf97276eaec02169edc53 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Tue, 22 Sep 2026 10:01:14 +0200
Subject: [PATCH 109/154] Swallow local transport errors in connection manager

---
 src/state/CallViewModel/remoteMembers/ConnectionManager.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/state/CallViewModel/remoteMembers/ConnectionManager.ts b/src/state/CallViewModel/remoteMembers/ConnectionManager.ts
index 35418fdf..ea51c7ba 100644
--- a/src/state/CallViewModel/remoteMembers/ConnectionManager.ts
+++ b/src/state/CallViewModel/remoteMembers/ConnectionManager.ts
@@ -14,6 +14,8 @@ import {
   of,
   switchMap,
   startWith,
+  catchError,
+  NEVER,
 } from "rxjs";
 import { type Logger } from "matrix-js-sdk/lib/logger";
 import { type RemoteParticipant } from "livekit-client";
@@ -129,6 +131,9 @@ export function createConnectionManager$({
   // TODO logger: only construct one logger from the client and make it compatible via a EC specific sing
 
   const localTransportAsArray$ = localTransport$.pipe(
+    // LocalMember already surfaces local transport errors properly in the UI,
+    // here we can just swallow them
+    catchError(() => NEVER),
     map((transport) => [transport]),
     startWith([]),
   );

From eb44fd545d1880f6178667c9d09d6d634b43e72f Mon Sep 17 00:00:00 2001
From: Half-Shot <will@half-shot.uk>
Date: Tue, 22 Sep 2026 09:57:43 +0100
Subject: [PATCH 110/154] Bell reaction sound.

---
 src/reactions/index.ts       |  11 +++++++++++
 src/sound/LICENCE.md         |   1 +
 src/sound/reactions/bell.mp3 | Bin 0 -> 43275 bytes
 src/sound/reactions/bell.ogg | Bin 0 -> 37938 bytes
 4 files changed, 12 insertions(+)
 create mode 100644 src/sound/reactions/bell.mp3
 create mode 100644 src/sound/reactions/bell.ogg

diff --git a/src/reactions/index.ts b/src/reactions/index.ts
index acf7e181..eab49727 100644
--- a/src/reactions/index.ts
+++ b/src/reactions/index.ts
@@ -29,6 +29,8 @@ import waveSoundOgg from "../sound/reactions/wave.ogg?url";
 import waveSoundMp3 from "../sound/reactions/wave.mp3?url";
 import baduntssSoundOgg from "../sound/reactions/baduntss.ogg?url";
 import baduntssSoundMp3 from "../sound/reactions/baduntss.mp3?url";
+import bellSoundOgg from "../sound/reactions/bell.ogg?url";
+import bellSoundMp3 from "../sound/reactions/bell.mp3?url";
 
 export const ElementCallReactionEventType = "io.element.call.reaction";
 
@@ -201,6 +203,15 @@ export const ReactionSet: ReactionOption[] = [
       ogg: baduntssSoundOgg,
       mp3: baduntssSoundMp3,
     },
+  },,
+  {
+    emoji: "🔔",
+    name: "bell",
+    alias: ["ding"],
+    sound: {
+      ogg: bellSoundOgg,
+      mp3: bellSoundMp3,
+    },
   },
 ];
 
diff --git a/src/sound/LICENCE.md b/src/sound/LICENCE.md
index c4f81363..2ed79912 100644
--- a/src/sound/LICENCE.md
+++ b/src/sound/LICENCE.md
@@ -10,6 +10,7 @@ The following sound effects have been licensed from Pixabay, under https://pixab
 - `reactions/generic`
 - `reactions/lightbulb`
 - `reactions/party`
+- `reactions/bell`
 
 ### Other
 
diff --git a/src/sound/reactions/bell.mp3 b/src/sound/reactions/bell.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..108c773ca2b66d92c0eccff38ec89f8ff96574a4
GIT binary patch
literal 43275
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%0DBcs+EY+SJ?C#Y)16!QNZrAl#n(
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
QmS&B?{J;M3|9trW0O4ogH2?qr

literal 0
HcmV?d00001

diff --git a/src/sound/reactions/bell.ogg b/src/sound/reactions/bell.ogg
new file mode 100644
index 0000000000000000000000000000000000000000..ef01eec440c199f0ca62dd004327c6f669503164
GIT binary patch
literal 37938
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

literal 0
HcmV?d00001


From be56bbd05bc701338a96b5fe42171376446c5f8a Mon Sep 17 00:00:00 2001
From: Half-Shot <will@half-shot.uk>
Date: Tue, 22 Sep 2026 10:01:10 +0100
Subject: [PATCH 111/154] lint

---
 src/reactions/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/reactions/index.ts b/src/reactions/index.ts
index eab49727..935347d2 100644
--- a/src/reactions/index.ts
+++ b/src/reactions/index.ts
@@ -203,7 +203,8 @@ export const ReactionSet: ReactionOption[] = [
       ogg: baduntssSoundOgg,
       mp3: baduntssSoundMp3,
     },
-  },,
+  },
+  ,
   {
     emoji: "🔔",
     name: "bell",

From bc62bb9565119c273ffe2b1d1449d2b769bc02b5 Mon Sep 17 00:00:00 2001
From: Half-Shot <will@half-shot.uk>
Date: Tue, 22 Sep 2026 10:01:22 +0100
Subject: [PATCH 112/154] lint

---
 src/reactions/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/reactions/index.ts b/src/reactions/index.ts
index 935347d2..b5948262 100644
--- a/src/reactions/index.ts
+++ b/src/reactions/index.ts
@@ -204,7 +204,6 @@ export const ReactionSet: ReactionOption[] = [
       mp3: baduntssSoundMp3,
     },
   },
-  ,
   {
     emoji: "🔔",
     name: "bell",

From 4269aaa163d02ac9b8b5e56f07ebb891ad11b106 Mon Sep 17 00:00:00 2001
From: Half-Shot <will@half-shot.uk>
Date: Tue, 22 Sep 2026 10:04:12 +0100
Subject: [PATCH 113/154] update snap

---
 src/button/__snapshots__/ReactionToggleButton.test.tsx.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap b/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap
index 5db4582c..7bc890c5 100644
--- a/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap
+++ b/src/button/__snapshots__/ReactionToggleButton.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`Can close reaction dialog 1`] = `
     aria-disabled="false"
     aria-expanded="true"
     aria-haspopup="true"
-    aria-labelledby="_r_bb_"
+    aria-labelledby="_r_bh_"
     class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
     data-kind="primary"
     data-size="lg"

From 93b2661513a2ac8a8bbf06c5fd0d73362548374f Mon Sep 17 00:00:00 2001
From: Half-Shot <will@half-shot.uk>
Date: Tue, 22 Sep 2026 11:21:11 +0100
Subject: [PATCH 114/154] =?UTF-8?q?Switch=20to=20=F0=9F=9B=8E=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/reactions/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/reactions/index.ts b/src/reactions/index.ts
index b5948262..26ca7f14 100644
--- a/src/reactions/index.ts
+++ b/src/reactions/index.ts
@@ -205,7 +205,7 @@ export const ReactionSet: ReactionOption[] = [
     },
   },
   {
-    emoji: "🔔",
+    emoji: "🛎️",
     name: "bell",
     alias: ["ding"],
     sound: {

From d5812ddd34789d27735a5e8f15b19508dfba4e51 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Tue, 22 Sep 2026 23:34:19 +0200
Subject: [PATCH 115/154] Fix Vitest import warning

Fixes the following warning:

[warn] (!) Your Vite config uses features that are unsupported by `configLoader: 'native'`, which is planned to become the default in a future major version of Vite:
  - import "./vite.config" without a file extension (vitest.config.ts:3:35). Add the file extension
Set `VITE_CONFIG_NATIVE_IGNORE_WARNING=true` to suppress this warning.
---
 vite-component-dev.config.ts | 2 +-
 vite-component.config.ts     | 2 +-
 vite-embedded.config.ts      | 2 +-
 vitest.config.ts             | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/vite-component-dev.config.ts b/vite-component-dev.config.ts
index 2e678382..804b3d1f 100644
--- a/vite-component-dev.config.ts
+++ b/vite-component-dev.config.ts
@@ -9,7 +9,7 @@ import { defineConfig, searchForWorkspaceRoot } from "vite";
 import { realpathSync } from "node:fs";
 import * as fs from "node:fs";
 
-import { vitePluginsConfig } from "./vite.config";
+import { vitePluginsConfig } from "./vite.config.ts";
 import { scopeStylesToRoot } from "./component/build/scopeStylesToRoot";
 
 // Serves the harness under `component/dev`, which embeds Element Call as a
diff --git a/vite-component.config.ts b/vite-component.config.ts
index ae0ac150..09a70ee4 100644
--- a/vite-component.config.ts
+++ b/vite-component.config.ts
@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { defineConfig } from "vite";
 
-import { vitePluginsConfig } from "./vite.config";
+import { vitePluginsConfig } from "./vite.config.ts";
 import { scopeStylesToRoot } from "./component/build/scopeStylesToRoot";
 
 // Config for Element Call as a React component, to be imported by an
diff --git a/vite-embedded.config.ts b/vite-embedded.config.ts
index 228d2cf8..36f2779b 100644
--- a/vite-embedded.config.ts
+++ b/vite-embedded.config.ts
@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { defineConfig, mergeConfig } from "vite";
 import generateFile from "vite-plugin-generate-file";
 
-import fullConfig from "./vite.config";
+import fullConfig from "./vite.config.ts";
 
 const base = "./";
 
diff --git a/vitest.config.ts b/vitest.config.ts
index 81519325..d6f67f89 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,6 +1,6 @@
 import { defineConfig, mergeConfig } from "vitest/config";
 import { playwright } from "@vitest/browser-playwright";
-import { vitePluginsConfig } from "./vite.config";
+import { vitePluginsConfig } from "./vite.config.ts";
 import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
 import path from "node:path";
 import { fileURLToPath } from "node:url";

From 98d77cc8167e9a37e1501a091d2f93a592a191ae Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 23 Sep 2026 01:55:54 +0000
Subject: [PATCH 116/154] Update ghcr.io/element-hq/element-web:develop Docker
 digest to 0636bbe (#4276)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 docker-compose-playwright.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index 0b2de08e..3ce45049 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -19,7 +19,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:3993d53bc2c784c0376b86e00230aef0ee2c9a705b2166e9229555117e8db167
+    image: ghcr.io/element-hq/element-web:develop@sha256:0636bbe4bfaeb32d96285a215ddbc81745c90f073c1c53f749f5ed250324a7af
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:3993d53bc2c784c0376b86e00230aef0ee2c9a705b2166e9229555117e8db167
+    image: ghcr.io/element-hq/element-web:develop@sha256:0636bbe4bfaeb32d96285a215ddbc81745c90f073c1c53f749f5ed250324a7af

From b4b72432b98f0c50f14504c19caebee3612b04d0 Mon Sep 17 00:00:00 2001
From: fkwp <fkwp@users.noreply.github.com>
Date: Thu, 24 Sep 2026 10:44:04 +0200
Subject: [PATCH 117/154] Tighten the comment guidance in AGENTS.md (#4279)

* Say what earns a comment its place

- Add a comments section to the code style: no comment by default, the reason
  only, and the kinds that go stale.
- Point to it from the PR checklist in AGENTS.md.

Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 AGENTS.md                 |  2 ++
 docs/agents/code-style.md | 23 ++++++++++++++++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/AGENTS.md b/AGENTS.md
index f0a94112..a47c4163 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -48,6 +48,8 @@ pnpm i18n:check
 - View model + marble tests, thin view, a story per state, an e2e spec.
 - Any new shared component called out explicitly, with why nothing existing fit.
 - Template filled for real: what, why, before/after screenshots, repro steps.
+- Comments only where the code can't give the reason — see
+  [code-style.md](docs/agents/code-style.md#comments).
 - Anything that redraws continuously — an animation frame, a stream — says what it
   costs, or better, counts the redraws in a test.
 - Branch `<handle>/<topic>`. Plain imperative commit subjects, no prefixes.
diff --git a/docs/agents/code-style.md b/docs/agents/code-style.md
index 1907aaf8..31bf488a 100644
--- a/docs/agents/code-style.md
+++ b/docs/agents/code-style.md
@@ -31,7 +31,28 @@ copy, the PR says so.
 - **Suites.** Test cases first, helpers below. Older suites invert this; follow the
   rule in new ones, don't reorder old ones.
 - **Names.** What a thing means, not what it is made of: `naturalLayout$`, not
-  `computedLayout$`. Comments explain why, never what.
+  `computedLayout$`.
+
+## Comments
+
+No comment is the default. One earns its place by giving a reason the code
+cannot: a platform quirk, an outside constraint, a trap that looks like a
+simplification.
+
+- Say the reason, then stop. Test each sentence: does the reason still stand
+  without it? If so, cut it. Most reasons fit on a line, so a long comment is
+  worth a second look — it is usually carrying something that isn't one.
+- Write about the line the comment sits on, in terms of what the code does
+  there — leave layout to the stylesheet and measurements to the design.
+- Name the condition ("where the platform can't route audio"), not the browser
+  or the spec entry.
+- Put history — what was tried, removed or rejected, the dev journal — in the
+  commit or the PR description.
+- In tests, comment only structure that looks wrong but isn't: batching, timers,
+  why this scroll position.
+
+Before keeping one: would it still be true after a CSS change or a refactor of
+its caller? If not, cut it.
 
 ## TypeScript, React and RxJS idiom win on a clash
 

From b7bd7d18b2530c54dd3dc4aa4fd62d44193ddafe Mon Sep 17 00:00:00 2001
From: fkwp <fkwp@users.noreply.github.com>
Date: Thu, 24 Sep 2026 11:52:02 +0200
Subject: [PATCH 118/154] [Feature] Quick audio menu (#4275)

* Give the microphone level its own observable
* Add a microphone level meter
* Show speakers and microphones in the quick audio menu
* Wire speaker selection through the call footer
* Add stories for the meter and the device menu
* Add end-to-end specs for the quick audio menu
* Keep the footer while a menu opened from it is open
* Use the shared audio capture stub in the lobby test
---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
---
 locales/en/app.json                           |   9 +
 playwright/audio-menu.spec.ts                 | 229 +++++++
 playwright/component/audio-menu.spec.ts       | 135 +++++
 playwright/utils/fake-devices.ts              |  85 +++
 src/components/CallFooter.module.css          |   5 +-
 src/components/CallFooter.stories.tsx         |  35 ++
 src/components/CallFooter.tsx                 |  12 +-
 src/components/CallFooterViewModel.test.ts    |  64 ++
 src/components/CallFooterViewModel.tsx        |  67 ++-
 .../MediaMuteAndSwitchButton.module.css       |  57 ++
 .../MediaMuteAndSwitchButton.stories.tsx      | 561 +++++++++++++++++-
 .../MediaMuteAndSwitchButton.test.tsx         | 555 +++++++++++++++--
 src/components/MediaMuteAndSwitchButton.tsx   | 410 +++++++++----
 .../MicrophoneLevelMeter.module.css           |  65 ++
 .../MicrophoneLevelMeter.stories.tsx          | 161 +++++
 src/components/MicrophoneLevelMeter.test.tsx  |  42 ++
 src/components/MicrophoneLevelMeter.tsx       | 146 +++++
 src/components/useMicrophoneLevel.test.tsx    |  41 ++
 src/components/useMicrophoneLevel.ts          |  34 ++
 src/room/LobbyView.test.tsx                   |  44 +-
 src/state/MediaDevices.test.ts                | 144 ++++-
 src/state/MicrophoneLevel.test.ts             | 183 ++++++
 src/state/MicrophoneLevel.ts                  | 143 +++++
 src/utils/test.ts                             |  96 +++
 24 files changed, 3126 insertions(+), 197 deletions(-)
 create mode 100644 playwright/audio-menu.spec.ts
 create mode 100644 playwright/component/audio-menu.spec.ts
 create mode 100644 playwright/utils/fake-devices.ts
 create mode 100644 src/components/MicrophoneLevelMeter.module.css
 create mode 100644 src/components/MicrophoneLevelMeter.stories.tsx
 create mode 100644 src/components/MicrophoneLevelMeter.test.tsx
 create mode 100644 src/components/MicrophoneLevelMeter.tsx
 create mode 100644 src/components/useMicrophoneLevel.test.tsx
 create mode 100644 src/components/useMicrophoneLevel.ts
 create mode 100644 src/state/MicrophoneLevel.test.ts
 create mode 100644 src/state/MicrophoneLevel.ts

diff --git a/locales/en/app.json b/locales/en/app.json
index f3d568bb..e31c7d50 100644
--- a/locales/en/app.json
+++ b/locales/en/app.json
@@ -163,6 +163,12 @@
   "login_auth_links_prompt": "Not registered yet?",
   "login_subheading": "To continue to Element",
   "login_title": "Login",
+  "microphone_level": {
+    "label": "Microphone level",
+    "no_device": "No microphone found. Connect one, then try again.",
+    "permission_denied": "Microphone access is blocked. Allow it, then try again.",
+    "value": "{{level}} of {{max}}"
+  },
   "microphone_off": "Microphone off",
   "microphone_on": "Microphone on",
   "mute_microphone_button_label": "Mute microphone",
@@ -215,11 +221,14 @@
       "activating": "Activating…",
       "camera": "Camera",
       "camera_numbered": "Camera {{n}}",
+      "camera_source": "Camera Source",
       "change_device_button": "Change audio device",
       "default": "Default",
       "default_named": "Default <2>({{name}})</2>",
+      "default_named_plain": "Default ({{name}})",
       "handset": "Handset",
       "loudspeaker": "Loudspeaker",
+      "mic_source": "Mic Source",
       "microphone": "Microphone",
       "microphone_numbered": "Microphone {{n}}",
       "speaker": "Speaker",
diff --git a/playwright/audio-menu.spec.ts b/playwright/audio-menu.spec.ts
new file mode 100644
index 00000000..99385c89
--- /dev/null
+++ b/playwright/audio-menu.spec.ts
@@ -0,0 +1,229 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, test, type Locator, type Page } from "@playwright/test";
+
+import { SpaHelpers } from "./spa-helpers.ts";
+import { installFakeDevices } from "./utils/fake-devices.ts";
+
+test.describe("the quick audio menu", () => {
+  test("lists speakers and microphones with a live level meter", async ({
+    page,
+  }) => {
+    await installFakeDevices(page, { microphones: 3, speakers: 3 });
+    await joinACall(page, "Menu user", "Audio menu");
+    await openAudioMenu(page);
+
+    await expect(page.getByRole("group", { name: "Speaker" })).toBeVisible();
+    await expect(page.getByRole("group", { name: "Microphone" })).toBeVisible();
+    // By name, not count: the browser adds its own fake output and a Default.
+    for (const n of [1, 2, 3])
+      await expect(
+        page
+          .getByRole("group", { name: "Speaker" })
+          .getByRole("menuitemradio", { name: `Fake Speaker ${n}` }),
+      ).toBeVisible();
+
+    await expect(
+      page.getByRole("menuitemradio", { checked: true }),
+    ).toHaveCount(2);
+    const meter = page.getByRole("meter", { name: "Microphone level" });
+    await expect(meter).toBeVisible();
+    await expect(meter).toHaveAttribute("aria-valuenow", /\d+/);
+    await expect(meter).toHaveAttribute("aria-valuetext", /\d+ of \d+/);
+
+    // Both browsers here can route audio; the platform that can't is a unit check.
+    await expect(
+      page
+        .getByRole("group", { name: "Speaker" })
+        .getByRole("menuitemradio")
+        .first(),
+    ).toHaveAttribute("aria-disabled", "false");
+  });
+
+  test("moves the microphone and the speaker without disturbing the call", async ({
+    browser,
+  }) => {
+    // Two browsers and a real call.
+    test.slow();
+    const hostContext = await browser.newContext({ reducedMotion: "reduce" });
+    const host = await hostContext.newPage();
+    await installFakeDevices(host, { microphones: 3, speakers: 3 });
+    await joinACall(host, "Host", "Device switch");
+
+    const inviteLink = await SpaHelpers.getCallInviteLink(host);
+    const guestContext = await browser.newContext({ reducedMotion: "reduce" });
+    const guest = await guestContext.newPage();
+    await SpaHelpers.joinCallFromInviteLink(guest, inviteLink, "Guest");
+    await SpaHelpers.expectVideoTilesCount(guest, 2);
+
+    await openAudioMenu(host);
+    await selectDevice(host, "Microphone", "Fake Microphone 2");
+    await openAudioMenu(host);
+    await selectDevice(host, "Speaker", "Fake Speaker 2");
+
+    // Not a rejoin: neither side drops, and the guest still has both tiles.
+    await expect(
+      host.getByRole("dialog", { name: "Reconnecting…" }),
+    ).not.toBeVisible();
+    await expect(
+      guest.getByRole("dialog", { name: "Reconnecting…" }),
+    ).not.toBeVisible();
+    await SpaHelpers.expectVideoTilesCount(guest, 2);
+    await expect(guest.getByText("Waiting for media...")).not.toBeVisible();
+
+    await hostContext.close();
+    await guestContext.close();
+  });
+
+  test("keeps the meter moving while muted, and sends nothing", async ({
+    browser,
+  }) => {
+    // Two browsers and a real call.
+    test.slow();
+    const hostContext = await browser.newContext({ reducedMotion: "reduce" });
+    const host = await hostContext.newPage();
+    await installFakeDevices(host);
+    await joinACall(host, "Muted host", "Muted meter");
+
+    const inviteLink = await SpaHelpers.getCallInviteLink(host);
+    const guestContext = await browser.newContext({ reducedMotion: "reduce" });
+    const guest = await guestContext.newPage();
+    await SpaHelpers.joinCallFromInviteLink(guest, inviteLink, "Listener");
+    await SpaHelpers.expectVideoTilesCount(guest, 2);
+
+    const mute = host.getByTestId("incall_mute");
+    await mute.click();
+    await expect(mute).toHaveAttribute("aria-checked", "false");
+    await openAudioMenu(host);
+
+    const meter = host.getByRole("meter", { name: "Microphone level" });
+    await expect(meter).toBeVisible();
+    // By test id: the modal menu hides the rest of the call from the a11y tree.
+    await expect(mute).toHaveAttribute("aria-checked", "false");
+    await expect(mute).toBeVisible();
+    // And the guest is shown the mute.
+    await expect(
+      guest.getByTestId("videoTile").filter({ hasText: "Muted host" }),
+    ).toBeVisible();
+
+    await hostContext.close();
+    await guestContext.close();
+  });
+
+  test("keeps the meter at the foot of the list while it scrolls", async ({
+    page,
+  }) => {
+    await installFakeDevices(page, { microphones: 20, speakers: 4 });
+    await joinACall(page, "Scroller", "Long device list");
+    await openAudioMenu(page);
+
+    const meter = page.getByRole("meter", { name: "Microphone level" });
+    await expect(meter).toBeVisible();
+
+    // Scrolled so the microphones start at the top: only there does a pinned
+    // meter differ from one that is simply last.
+    const list = page.locator("[role='menu'] div[role='none']").first();
+    await list.evaluate((element) => {
+      const group = element.querySelector("[role='group'][aria-label*='icro']");
+      element.scrollTop +=
+        group!.getBoundingClientRect().top -
+        element.getBoundingClientRect().top;
+    });
+
+    await expect(meter).toBeInViewport();
+    await expectPinnedInside(meter, list);
+    await expect(
+      page.getByRole("menuitemradio", { name: "Fake Microphone 20" }),
+    ).toBeVisible();
+  });
+
+  test("shows the focus ring only when the keyboard moved the focus", async ({
+    page,
+    browserName,
+  }) => {
+    test.skip(
+      browserName === "firefox",
+      "Headless Firefox does not deliver synthetic key presses reliably; see reconnect.spec.ts",
+    );
+    await installFakeDevices(page);
+    await joinACall(page, "Keyboard user", "Focus ring");
+    await openAudioMenu(page);
+
+    const first = page.getByRole("menuitemradio").first();
+    // Opened by pointer: no ring, though Radix has moved focus into the menu.
+    await expect.poll(async () => outlineWidth(first)).toBe(0);
+
+    await page.keyboard.press("ArrowDown");
+    const focused = page.locator("[role='menuitemradio']:focus");
+    await expect.poll(async () => outlineWidth(focused)).toBeGreaterThan(0);
+
+    // And the pointer takes it away again.
+    await first.hover();
+    await expect.poll(async () => outlineWidth(focused)).toBe(0);
+  });
+});
+
+/** Creates a call and joins it, leaving the page in the call. */
+async function joinACall(
+  page: Page,
+  userName: string,
+  callName: string,
+): Promise<void> {
+  await page.goto("/");
+  await SpaHelpers.createCall(page, userName, callName, true);
+  await expect(page.getByTestId("name_tag")).toContainText(userName);
+  // The media controls stay disabled until devices have enumerated.
+  await expect(page.getByTestId("incall_mute")).toBeEnabled({
+    timeout: 10_000,
+  });
+}
+
+async function openAudioMenu(page: Page): Promise<void> {
+  await page.getByRole("button", { name: "Microphone" }).click();
+  await expect(page.getByRole("menu")).toBeVisible();
+}
+
+async function selectDevice(
+  page: Page,
+  section: "Speaker" | "Microphone",
+  name: string,
+): Promise<void> {
+  const item = page
+    .getByRole("group", { name: section })
+    .getByRole("menuitemradio", { name });
+  await item.click();
+  // Selecting doesn't close the menu, so dismiss it.
+  await page.keyboard.press("Escape");
+  await expect(page.getByRole("menu")).not.toBeVisible();
+}
+
+/** Asserts the meter sits within the scrollport and inside the menu's frame. */
+async function expectPinnedInside(
+  meter: Locator,
+  list: Locator,
+): Promise<void> {
+  const meterBox = (await meter.boundingBox())!;
+  const listBox = (await list.boundingBox())!;
+  const frame = (await meter.page().getByRole("menu").boundingBox())!;
+
+  expect(meterBox.y + meterBox.height).toBeLessThanOrEqual(
+    listBox.y + listBox.height + 1,
+  );
+  expect(meterBox.y).toBeGreaterThanOrEqual(listBox.y - 1);
+  expect(meterBox.x).toBeGreaterThan(frame.x);
+  expect(meterBox.x + meterBox.width).toBeLessThan(frame.x + frame.width);
+}
+
+/** Painted outline width, in px. */
+async function outlineWidth(item: Locator): Promise<number> {
+  if ((await item.count()) === 0) return 0;
+  return item.first().evaluate((element) => {
+    const { outlineStyle, outlineWidth } = getComputedStyle(element);
+    return outlineStyle === "none" ? 0 : Number.parseFloat(outlineWidth) || 0;
+  });
+}
diff --git a/playwright/component/audio-menu.spec.ts b/playwright/component/audio-menu.spec.ts
new file mode 100644
index 00000000..f4d81159
--- /dev/null
+++ b/playwright/component/audio-menu.spec.ts
@@ -0,0 +1,135 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, type Locator, type Page, test } from "@playwright/test";
+
+import { createUserAndRoom, resizeContainer, startHarness } from "./harness.ts";
+import { installFakeDevices } from "../utils/fake-devices.ts";
+
+/**
+ * The device menu with Element Call as a component in a host page, where the
+ * portalled menu must be sized against the call, not the window. Driven from
+ * the lobby: it builds the same menu, without two connections' worth of flake.
+ */
+
+// Sign-in, crypto setup and sync happen twice before anything shows.
+test.describe.configure({ timeout: 180_000 });
+
+test("sizes the device list against the call, not the window", async ({
+  page,
+}) => {
+  await installFakeDevices(page, { microphones: 20, speakers: 4 });
+  const { username, roomId } = await createUserAndRoom("menusize");
+  const panes = await startHarness(page, username, roomId);
+  const pane = panes.first();
+
+  // A short call in a much taller page.
+  const container = pane.getByTestId("call-container");
+  await resizeContainer(container, { width: 900, height: 400 });
+  await expect(pane.getByTestId("lobby_joinCall")).toBeVisible({
+    timeout: 60_000,
+  });
+
+  const list = await openDeviceList(page, pane);
+  const callHeight = (await container.boundingBox())!.height;
+  const windowHeight = page.viewportSize()!.height;
+  const listHeight = (await list.boundingBox())!.height;
+
+  expect(callHeight).toBeLessThan(windowHeight * 0.75);
+  expect(listHeight).toBeLessThanOrEqual(callHeight);
+  expect(listHeight).toBeLessThan(windowHeight * 0.6);
+});
+
+test("follows the call area when the host resizes it", async ({ page }) => {
+  await installFakeDevices(page, { microphones: 20, speakers: 4 });
+  const { username, roomId } = await createUserAndRoom("menuresize");
+  const panes = await startHarness(page, username, roomId);
+  const pane = panes.first();
+
+  const container = pane.getByTestId("call-container");
+  await resizeContainer(container, { width: 900, height: 360 });
+  await expect(pane.getByTestId("lobby_joinCall")).toBeVisible({
+    timeout: 60_000,
+  });
+
+  const list = await openDeviceList(page, pane);
+  const whenShort = (await list.boundingBox())!.height;
+
+  // The host grows the call while the menu is open.
+  await resizeContainer(container, { width: 900, height: 700 });
+  await expect
+    .poll(async () => (await list.boundingBox())!.height)
+    .toBeGreaterThan(whenShort);
+});
+
+test("keeps every device reachable in a small container", async ({ page }) => {
+  await installFakeDevices(page, { microphones: 20, speakers: 4 });
+  const { username, roomId } = await createUserAndRoom("menureach");
+  const panes = await startHarness(page, username, roomId);
+  const pane = panes.first();
+
+  const container = pane.getByTestId("call-container");
+  await resizeContainer(container, { width: 400, height: 360 });
+  await expect(pane.getByTestId("lobby_joinCall")).toBeVisible({
+    timeout: 60_000,
+  });
+
+  const list = await openDeviceList(page, pane);
+  // More devices than fit, so the list must scroll.
+  expect(await list.evaluate((el) => el.scrollHeight > el.clientHeight)).toBe(
+    true,
+  );
+
+  const last = page.getByRole("menuitemradio", { name: "Fake Microphone 20" });
+  await last.scrollIntoViewIfNeeded();
+  await expect(last).toBeInViewport();
+  // Reachable means clickable: the menu may be drawn outside the call area.
+  await last.click();
+  await expect(last).toHaveAttribute("aria-checked", "true");
+});
+
+test("tracks the focus source of its own call, not the page", async ({
+  page,
+}) => {
+  await installFakeDevices(page);
+  const { username, roomId } = await createUserAndRoom("menufocus");
+  const panes = await startHarness(page, username, roomId);
+  const pane = panes.first();
+  const other = panes.nth(1);
+
+  await expect(pane.getByTestId("lobby_joinCall")).toBeVisible({
+    timeout: 60_000,
+  });
+  await openDeviceList(page, pane);
+  const menu = page.getByRole("menu");
+
+  // Asserted on the attribute: the component build's scoped stylesheet doesn't
+  // reach the portalled menu, so its ring can't be read here.
+  await expect(menu).toHaveAttribute("data-focus-source", "pointer");
+
+  // A key pressed in the other call says nothing about this menu.
+  await other.evaluate((element) =>
+    element.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
+    ),
+  );
+  await expect(menu).toHaveAttribute("data-focus-source", "pointer");
+
+  await page.keyboard.press("ArrowDown");
+  await expect(menu).toHaveAttribute("data-focus-source", "keyboard");
+});
+
+/** Opens a component's microphone menu and returns its device list. */
+async function openDeviceList(page: Page, pane: Locator): Promise<Locator> {
+  await pane
+    .getByRole("button", { name: "Microphone" })
+    .click({ timeout: 60_000 });
+  await expect(page.getByRole("menu")).toBeVisible();
+  const list = page.locator("[role='menu'] div[role='none']").first();
+  await expect(list).toBeVisible();
+  return list;
+}
diff --git a/playwright/utils/fake-devices.ts b/playwright/utils/fake-devices.ts
new file mode 100644
index 00000000..e67f053b
--- /dev/null
+++ b/playwright/utils/fake-devices.ts
@@ -0,0 +1,85 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { type Page } from "@playwright/test";
+
+/**
+ * Adds synthetic devices beside the browser's one fake microphone and speaker,
+ * so the menu has a choice to show. They share one capture and `setSinkId` is
+ * accepted but not honoured: routing still needs hardware and a manual check.
+ * Call before the page navigates.
+ */
+export async function installFakeDevices(
+  page: Page,
+  { microphones = 2, speakers = 2 } = {},
+): Promise<void> {
+  await page.addInitScript(
+    ({ microphones, speakers }) => {
+      const synthetic = (
+        kind: MediaDeviceKind,
+        count: number,
+        name: string,
+      ): MediaDeviceInfo[] =>
+        Array.from({ length: count }, (_, i) => {
+          const info = {
+            deviceId: `${kind}-${i + 1}`,
+            groupId: `${kind}-group-${i + 1}`,
+            kind,
+            label: `${name} ${i + 1}`,
+          };
+          return { ...info, toJSON: () => info } as MediaDeviceInfo;
+        });
+      const ids = new Set(
+        [
+          ...synthetic("audioinput", microphones, ""),
+          ...synthetic("audiooutput", speakers, ""),
+        ].map((d) => d.deviceId),
+      );
+
+      const devices = navigator.mediaDevices;
+      const enumerate = devices.enumerateDevices.bind(devices);
+      devices.enumerateDevices = async (): Promise<MediaDeviceInfo[]> => [
+        ...(await enumerate()),
+        ...synthetic("audioinput", microphones, "Fake Microphone"),
+        ...synthetic("audiooutput", speakers, "Fake Speaker"),
+      ];
+
+      // Our ids name no hardware, so drop the exact-device constraint.
+      const getUserMedia = devices.getUserMedia.bind(devices);
+      devices.getUserMedia = async (
+        constraints?: MediaStreamConstraints,
+      ): Promise<MediaStream> => {
+        const audio = constraints?.audio;
+        if (typeof audio === "object") {
+          const requested = audio.deviceId;
+          const id =
+            typeof requested === "object" && requested !== null
+              ? ((requested as ConstrainDOMStringParameters).exact as string)
+              : (requested as string | undefined);
+          if (id !== undefined && ids.has(id))
+            return getUserMedia({ ...constraints, audio: true });
+        }
+        return getUserMedia(constraints);
+      };
+
+      // Accept routing to our ids on both media elements and the AudioContext,
+      // which the app also routes.
+      for (const proto of [
+        HTMLMediaElement.prototype,
+        AudioContext.prototype,
+      ]) {
+        const sink = proto as { setSinkId?: (id: string) => Promise<void> };
+        const setSinkId = sink.setSinkId;
+        if (setSinkId === undefined) continue;
+        sink.setSinkId = async function (id: string): Promise<void> {
+          if (!ids.has(id)) await setSinkId.call(this, id);
+        };
+      }
+    },
+    { microphones, speakers },
+  );
+}
diff --git a/src/components/CallFooter.module.css b/src/components/CallFooter.module.css
index e006a5f7..01c1ac90 100644
--- a/src/components/CallFooter.module.css
+++ b/src/components/CallFooter.module.css
@@ -43,7 +43,10 @@ Please see LICENSE in the repository root for full details.
   inset-inline: 0;
 }
 
-.footer.overlay:has(:focus-visible) {
+/* Keep the footer while it is in use: focus inside it, or a menu opened from
+   it. The menu is portalled out, so the trigger's aria-expanded tracks it. */
+.footer.overlay:has(:focus-visible),
+.footer.overlay:has([aria-expanded="true"]) {
   opacity: 1;
   pointer-events: initial;
 }
diff --git a/src/components/CallFooter.stories.tsx b/src/components/CallFooter.stories.tsx
index 3c3f4607..96e010d8 100644
--- a/src/components/CallFooter.stories.tsx
+++ b/src/components/CallFooter.stories.tsx
@@ -13,6 +13,7 @@ import { Link } from "@vector-im/compound-web";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { CallFooter, type FooterSnapshot } from "./CallFooter";
 import inCallViewStyles from "../room/InCallView.module.css";
+import styles from "./CallFooter.module.css";
 import { useStaticViewModel } from "../state/ViewModel";
 import { ReactionsSenderContext } from "../reactions/useReactionsSender";
 import { type ReactionOption } from "../reactions";
@@ -137,10 +138,13 @@ export const Default: Story = {
     debugTileLayout: false,
     tileStoreGeneration: undefined,
     audioOptions: [],
+    audioOutputOptions: [],
     videoOptions: [],
     selectedAudio: undefined,
+    selectedAudioOutput: undefined,
     selectedVideo: undefined,
     selectAudioButtonOption: undefined,
+    selectAudioOutputOption: undefined,
     selectVideoButtonOption: undefined,
   },
   parameters: {
@@ -158,15 +162,46 @@ export const WithAudioAndVideoOptions: Story = {
       { label: { type: "name", name: "Microphone 1" }, id: "1" },
       { label: { type: "name", name: "Microphone 2" }, id: "2" },
     ],
+    audioOutputOptions: [
+      { label: { type: "default", name: "Built-in Output" }, id: "default" },
+      { label: { type: "name", name: "Headset" }, id: "2" },
+    ],
     videoOptions: [
       { label: { type: "name", name: "Camera 1" }, id: "1" },
       { label: { type: "name", name: "Camera 2" }, id: "2" },
     ],
     selectedAudio: "2",
+    selectedAudioOutput: "default",
     selectedVideo: "1",
   },
 };
 
+export const StaysWhileAMenuIsOpen: Story = {
+  ...Default,
+  args: {
+    ...WithAudioAndVideoOptions.args,
+    // In a short window the footer overlays the call and hides itself.
+    asOverlay: true,
+    showFooter: true,
+  },
+  play: async ({ canvasElement }): Promise<void> => {
+    const footer = canvasElement.querySelector<HTMLElement>(
+      '[data-testid="footer-container"]',
+    )!;
+    await userEvent.click(
+      within(canvasElement).getByRole("button", { name: "Microphone" }),
+    );
+    await expect(document.body.querySelector('[role="menu"]')).not.toBeNull();
+
+    // The call hides the footer with this class.
+    footer.classList.add(styles.hidden);
+
+    // Read after the 0.15s fade, not mid-transition.
+    await new Promise((settled) => setTimeout(settled, 400));
+    await expect(getComputedStyle(footer).opacity).toBe("1");
+  },
+};
+
 export const AudioBusy: Story = {
   ...Default,
   args: {
diff --git a/src/components/CallFooter.tsx b/src/components/CallFooter.tsx
index 4f79f236..6fdf13dd 100644
--- a/src/components/CallFooter.tsx
+++ b/src/components/CallFooter.tsx
@@ -99,11 +99,15 @@ export interface FooterState {
 
   /** Providing no options `[]` or `undefined` will imply that we dont have a audio fast switcher */
   audioOptions: MenuOptions[];
+  /** Output (speaker) devices. */
+  audioOutputOptions: MenuOptions[];
   /** Providing no options `[]` or `undefined` will imply that we dont have a audio fast switcher */
   videoOptions: MenuOptions[];
   selectedAudio: string | undefined;
+  selectedAudioOutput: string | undefined;
   selectedVideo: string | undefined;
   selectAudioButtonOption: ((deviceId: string) => void) | undefined;
+  selectAudioOutputOption: ((deviceId: string) => void) | undefined;
   selectVideoButtonOption: ((option: string) => void) | undefined;
 }
 
@@ -143,6 +147,9 @@ export const CallFooter: FC<FooterProps> = ({
   const audioOptions = useBehavior(vm.audioOptions$);
   const selectedAudio = useBehavior(vm.selectedAudio$);
   const selectAudioButtonOption = useBehavior(vm.selectAudioButtonOption$);
+  const audioOutputOptions = useBehavior(vm.audioOutputOptions$);
+  const selectedAudioOutput = useBehavior(vm.selectedAudioOutput$);
+  const selectAudioOutputOption = useBehavior(vm.selectAudioOutputOption$);
   const selectVideoButtonOption = useBehavior(vm.selectVideoButtonOption$);
   const toggleBlur = useBehavior(vm.toggleBlur$);
   const videoBlurEnabled = useBehavior(vm.videoBlurEnabled$);
@@ -168,7 +175,6 @@ export const CallFooter: FC<FooterProps> = ({
   if ((audioOptions?.length ?? 0) > 0) {
     buttons.push(
       <MediaMuteAndSwitchButton
-        title={"Mic Source"}
         key="audio"
         iconsAndLabels="audio"
         enabled={audioEnabled ?? false}
@@ -178,6 +184,9 @@ export const CallFooter: FC<FooterProps> = ({
         options={audioOptions}
         selectedOption={selectedAudio}
         onSelect={selectAudioButtonOption}
+        outputOptions={audioOutputOptions}
+        selectedOutputOption={selectedAudioOutput}
+        onSelectOutput={selectAudioOutputOption}
       />,
     );
   } else {
@@ -197,7 +206,6 @@ export const CallFooter: FC<FooterProps> = ({
   if ((videoOptions?.length ?? 0) > 0) {
     buttons.push(
       <MediaMuteAndSwitchButton
-        title={"Camera Source"}
         key="video"
         iconsAndLabels="video"
         enabled={videoEnabled ?? false}
diff --git a/src/components/CallFooterViewModel.test.ts b/src/components/CallFooterViewModel.test.ts
index 9e73393b..0c02a2ba 100644
--- a/src/components/CallFooterViewModel.test.ts
+++ b/src/components/CallFooterViewModel.test.ts
@@ -30,6 +30,11 @@ vi.mock("@livekit/track-processors", () => ({
   supportsBackgroundProcessors: (): boolean => false,
 }));
 
+const outputSelectionMock = vi.hoisted(() => vi.fn(() => true));
+vi.mock("livekit-client", () => ({
+  supportsAudioOutputSelection: (): boolean => outputSelectionMock(),
+}));
+
 /**
  * Returns the minimum set of CallViewModel fields required by
  * createCallFooterViewModel, with all other properties stubbed to
@@ -96,6 +101,65 @@ const twoMicsAndOneCamMediaDevices = mockMediaDevices({
 });
 
 describe("createCallFooterViewModel", () => {
+  describe("selectAudioOutputOption", () => {
+    function buildFooterVm(): ReturnType<typeof createCallFooterViewModel> {
+      platformMock.mockReturnValue("desktop");
+      return createCallFooterViewModel(
+        testScope(),
+        buildMinimalCallViewModel(gridLayout),
+        mockMuteStates(),
+        twoMicsAndOneCamMediaDevices,
+        /* reactionIdentifier */ undefined,
+        { showControls: true, header: HeaderStyle.Standard },
+      );
+    }
+
+    it("is withheld where the platform cannot route audio to a chosen device", () => {
+      outputSelectionMock.mockReturnValue(false);
+      expect(buildFooterVm().selectAudioOutputOption$.value).toBeUndefined();
+    });
+
+    it("is offered where the platform can route audio to a chosen device", () => {
+      outputSelectionMock.mockReturnValue(true);
+      expect(buildFooterVm().selectAudioOutputOption$.value).toBeDefined();
+    });
+  });
+
+  describe("audioOutputOptions", () => {
+    it("is an empty list, not absent, where the platform enumerates no outputs", () => {
+      platformMock.mockReturnValue("desktop");
+      outputSelectionMock.mockReturnValue(true);
+
+      const vm = createCallFooterViewModel(
+        testScope(),
+        buildMinimalCallViewModel(gridLayout),
+        mockMuteStates(),
+        mockMediaDevices({
+          audioInput: {
+            available$: constant(
+              new Map<string, DeviceLabel>([
+                ["mic1", { type: "name", name: "Microphone 1" }],
+              ]),
+            ),
+            selected$: constant(undefined),
+            select: vi.fn(),
+          },
+          // As Safari: no outputs listed.
+          audioOutput: {
+            available$: constant(new Map<string, DeviceLabel>()),
+            selected$: constant(undefined),
+            select: vi.fn(),
+          },
+        }),
+        /* reactionIdentifier */ undefined,
+        { showControls: true, header: HeaderStyle.Standard },
+      );
+
+      // Empty, not undefined: undefined would hide the section.
+      expect(vm.audioOutputOptions$.value).toEqual([]);
+    });
+  });
+
   describe("audioOptions and videoOptions", () => {
     function checkEmptyFor(platform: string, layout: Layout): void {
       platformMock.mockReturnValue(platform);
diff --git a/src/components/CallFooterViewModel.tsx b/src/components/CallFooterViewModel.tsx
index a2ca6c88..50efb42f 100644
--- a/src/components/CallFooterViewModel.tsx
+++ b/src/components/CallFooterViewModel.tsx
@@ -5,8 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { combineLatest, map, switchMap } from "rxjs";
+import { combineLatest, map, type Observable, switchMap } from "rxjs";
 import { supportsBackgroundProcessors } from "@livekit/track-processors";
+import { supportsAudioOutputSelection } from "livekit-client";
 
 import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
 import { type MenuOptions } from "./MediaMuteAndSwitchButton";
@@ -67,49 +68,50 @@ function buildDeviceBehaviors(
   | "audioOptions$"
   | "selectedAudio$"
   | "selectAudioButtonOption$"
+  | "audioOutputOptions$"
+  | "selectedAudioOutput$"
+  | "selectAudioOutputOption$"
   | "videoOptions$"
   | "selectedVideo$"
   | "selectVideoButtonOption$"
   | "toggleBlur$"
   | "videoBlurEnabled$"
 > {
-  return {
-    audioOptions$: scope.behavior(
-      disableSwitcher$.pipe(
-        switchMap((disable) =>
-          disable
-            ? constant([] as MenuOptions[])
-            : mediaDevices.audioInput.available$.pipe(
-                map((available) =>
-                  [...available.entries()].map(([id, label]) => ({
-                    id,
-                    label,
-                  })),
-                ),
+  const options$ = (
+    available$: Behavior<Map<string, MenuOptions["label"]>>,
+  ): Observable<MenuOptions[]> =>
+    disableSwitcher$.pipe(
+      switchMap((disable) =>
+        disable
+          ? constant([] as MenuOptions[])
+          : available$.pipe(
+              map((available) =>
+                [...available.entries()].map(([id, label]) => ({ id, label })),
               ),
-        ),
+            ),
       ),
-    ),
+    );
+
+  return {
+    audioOptions$: scope.behavior(options$(mediaDevices.audioInput.available$)),
     selectedAudio$: scope.behavior(
       mediaDevices.audioInput.selected$.pipe(map((s) => s?.id)),
     ),
     selectAudioButtonOption$: constant(mediaDevices.audioInput.select),
-    videoOptions$: scope.behavior(
-      disableSwitcher$.pipe(
-        switchMap((disable) =>
-          disable
-            ? constant([] as MenuOptions[])
-            : mediaDevices.videoInput.available$.pipe(
-                map((available) =>
-                  [...available.entries()].map(([id, label]) => ({
-                    id,
-                    label,
-                  })),
-                ),
-              ),
-        ),
-      ),
+    audioOutputOptions$: scope.behavior(
+      options$(mediaDevices.audioOutput.available$),
     ),
+    selectedAudioOutput$: scope.behavior(
+      mediaDevices.audioOutput.selected$.pipe(map((s) => s?.id)),
+    ),
+    // Withheld where the platform can't route audio to a chosen device, which
+    // disables the speaker section.
+    selectAudioOutputOption$: constant(
+      supportsAudioOutputSelection()
+        ? mediaDevices.audioOutput.select
+        : undefined,
+    ),
+    videoOptions$: scope.behavior(options$(mediaDevices.videoInput.available$)),
     selectedVideo$: scope.behavior(
       mediaDevices.videoInput.selected$.pipe(map((s) => s?.id)),
     ),
@@ -263,10 +265,13 @@ export function createLobbyFooterViewModel(
       reactionData: undefined,
       tileStoreGeneration: undefined,
       audioOptions: undefined,
+      audioOutputOptions: undefined,
       videoOptions: undefined,
       selectedAudio: undefined,
+      selectedAudioOutput: undefined,
       selectedVideo: undefined,
       selectAudioButtonOption: undefined,
+      selectAudioOutputOption: undefined,
       selectVideoButtonOption: undefined,
     }),
     ...buildMuteBehaviors(scope, muteStates),
diff --git a/src/components/MediaMuteAndSwitchButton.module.css b/src/components/MediaMuteAndSwitchButton.module.css
index e5bba238..1d524268 100644
--- a/src/components/MediaMuteAndSwitchButton.module.css
+++ b/src/components/MediaMuteAndSwitchButton.module.css
@@ -35,3 +35,60 @@ Please see LICENSE in the repository root for full details.
     transform: rotate(360deg);
   }
 }
+
+.menu {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Only the device lists scroll, bounded by the measured call area: the menu is
+   portalled out of the root, so CSS can't size it against the call. */
+.deviceList {
+  overflow-y: auto;
+  min-block-size: 0;
+  max-block-size: var(--device-list-max-height);
+  /* Keeps a row reached by keyboard clear of the sticky heading and meter. */
+  scroll-padding-block: var(--device-list-scroll-padding-start, 0)
+    var(--device-list-scroll-padding-end, 0);
+}
+
+/* Compound's heading rule heads each section; the design adds space below it. */
+.menu h3 {
+  margin-block-end: var(--cpd-space-5x);
+}
+
+/* And more above a heading that follows another section. */
+.deviceList [role="group"] + [role="group"] h3 {
+  margin-block-start: var(--cpd-space-7x);
+}
+
+/* Sticky within its own section. Opaque and inset a border width so it doesn't
+   paint over the menu's outline. */
+.sectionHeading {
+  position: sticky;
+  inset-block-start: 0;
+  background: var(--cpd-color-bg-canvas-default);
+  margin-inline: var(--cpd-border-width-1);
+  margin-block-start: var(--cpd-border-width-1);
+}
+
+/* Sticky at the foot of the microphone section; opaque and inset as above. */
+.stickyMeter {
+  position: sticky;
+  inset-block-end: 0;
+  background: var(--cpd-color-bg-canvas-default);
+  margin-inline: var(--cpd-border-width-1);
+  margin-block-end: var(--cpd-border-width-1);
+}
+
+/* Radix focuses whatever the pointer is over, so the browser's ring would
+   follow the mouse. Replaced by one shown only for keyboard focus. */
+.menu [role^="menuitem"]:focus,
+.menu [role^="menuitem"]:focus-visible {
+  outline: none;
+}
+
+.menu[data-focus-source="keyboard"] [role^="menuitem"]:focus {
+  outline: var(--cpd-border-width-2) solid var(--cpd-color-border-focused);
+  outline-offset: calc(-1 * var(--cpd-border-width-2));
+}
diff --git a/src/components/MediaMuteAndSwitchButton.stories.tsx b/src/components/MediaMuteAndSwitchButton.stories.tsx
index 21def400..d4965892 100644
--- a/src/components/MediaMuteAndSwitchButton.stories.tsx
+++ b/src/components/MediaMuteAndSwitchButton.stories.tsx
@@ -5,12 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { fn, userEvent, within, expect } from "storybook/test";
-import { type JSX } from "react";
+import { fn, userEvent, waitFor, within, expect } from "storybook/test";
+import { useEffect, useState, type FC, type JSX, type ReactNode } from "react";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { MediaMuteAndSwitchButton } from "./MediaMuteAndSwitchButton";
+import styles from "./MediaMuteAndSwitchButton.module.css";
+import meterStyles from "./MicrophoneLevelMeter.module.css";
 import { MediaDevicesContext } from "../MediaDevicesContext";
+import { RootElementProvider } from "../RootElementContext";
 import { MediaDevices } from "../state/MediaDevices";
 import { globalScope } from "../state/ObservableScope";
 
@@ -18,12 +21,74 @@ const mediaDevices = new MediaDevices(globalScope, {
   controlledAudioDevices: false,
 });
 
+/** Supplies a microphone, a wavering tone: a story's invented device ids match no hardware. */
+const WithAMicrophone: FC<{ children: ReactNode }> = ({ children }) => {
+  useEffect(() => {
+    const context = new AudioContext();
+    const microphone = context.createMediaStreamDestination();
+    const tone = context.createOscillator();
+    const loudness = context.createGain();
+    // Wavers between a third and two thirds of full scale, so it reads as live.
+    const swing = context.createOscillator();
+    const depth = context.createGain();
+    loudness.gain.value = 0.25;
+    depth.gain.value = 0.2;
+    swing.frequency.value = 0.6;
+    tone.frequency.value = 220;
+    swing.connect(depth).connect(loudness.gain);
+    tone.connect(loudness).connect(microphone);
+    tone.start();
+    swing.start();
+
+    const devices = navigator.mediaDevices;
+    const openedForReal = devices.getUserMedia.bind(devices);
+    const opened = Promise.resolve(microphone.stream);
+    // A fresh clone each time, so a caller stopping its tracks doesn't end the next.
+    devices.getUserMedia = async (): Promise<MediaStream> =>
+      (await opened).clone();
+
+    return (): void => {
+      devices.getUserMedia = openedForReal;
+      tone.stop();
+      swing.stop();
+      void context.close();
+    };
+  }, []);
+
+  return <>{children}</>;
+};
+
+/** Supplies a call-sized root. Without one the list is bounded by the whole Storybook frame. */
+const WithACallArea: FC<{ children: ReactNode }> = ({ children }) => {
+  const [callArea, setCallArea] = useState<HTMLElement | null>(null);
+  return (
+    <div
+      ref={setCallArea}
+      style={{
+        // A call's size: anything smaller makes a short device list scroll.
+        blockSize: 720,
+        display: "flex",
+        alignItems: "flex-end",
+        justifyContent: "center",
+      }}
+    >
+      {callArea !== null && (
+        <RootElementProvider value={callArea}>{children}</RootElementProvider>
+      )}
+    </div>
+  );
+};
+
 const meta = {
   component: MediaMuteAndSwitchButton,
   decorators: [
     (Story): JSX.Element => (
       <MediaDevicesContext value={mediaDevices}>
-        <Story />
+        <WithACallArea>
+          <WithAMicrophone>
+            <Story />
+          </WithAMicrophone>
+        </WithACallArea>
       </MediaDevicesContext>
     ),
   ],
@@ -34,7 +99,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    title: "SomeMenu",
     iconsAndLabels: "audio",
     enabled: true,
     options: [
@@ -42,6 +106,13 @@ export const Default: Story = {
       { label: { type: "name", name: "Option 2" }, id: "2" },
     ],
     selectedOption: "1",
+    // The footer always passes an output list to the audio menu.
+    outputOptions: [
+      { label: { type: "default", name: "Built-in Output" }, id: "default" },
+      { label: { type: "name", name: "Headset" }, id: "spk2" },
+    ],
+    selectedOutputOption: "default",
+    onSelectOutput: fn(),
     onMuteClick: fn(),
     onSelect: fn(),
   },
@@ -50,7 +121,6 @@ export const Default: Story = {
 export const AudioMute: Story = {
   args: {
     ...Default.args,
-    title: "Microphone",
     iconsAndLabels: "audio",
     enabled: false,
     options: [
@@ -73,21 +143,19 @@ export const AudioMute: Story = {
 
 export const AudioUnmute: Story = {
   args: {
-    title: "Microphone",
+    ...Default.args,
     iconsAndLabels: "audio",
     enabled: true,
     options: [
       { label: { type: "name", name: "Microphone 1" }, id: "1" },
       { label: { type: "name", name: "Microphone 2" }, id: "2" },
     ],
-
     selectedOption: "2",
   },
 };
 
 export const VideoMute: Story = {
   args: {
-    title: "Camera",
     iconsAndLabels: "video",
     enabled: false,
     options: [
@@ -101,7 +169,6 @@ export const VideoMute: Story = {
 
 export const VideoUnmute: Story = {
   args: {
-    title: "Camera",
     iconsAndLabels: "video",
     enabled: true,
     options: [
@@ -113,3 +180,479 @@ export const VideoUnmute: Story = {
     selectedOption: "2",
   },
 };
+
+export const SpeakerAndMicrophoneSections: Story = {
+  args: {
+    ...Default.args,
+    iconsAndLabels: "audio",
+    enabled: true,
+    options: [
+      { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+      { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+    ],
+    selectedOption: "mic1",
+    outputOptions: [
+      { label: { type: "default", name: "Built-in Output" }, id: "default" },
+      { label: { type: "name", name: "Headset" }, id: "spk2" },
+    ],
+    selectedOutputOption: "default",
+    onSelectOutput: fn(),
+  },
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+
+    const headset = await within(document.body).findByRole("menuitemradio", {
+      name: "Headset",
+    });
+    await userEvent.click(headset);
+    await expect(args.onSelectOutput).toHaveBeenCalledWith("spk2");
+
+    // A few devices fit, so the list doesn't scroll.
+    const list = document.body.querySelector<HTMLElement>(
+      `.${styles.deviceList}`,
+    )!;
+    await expect(list.scrollHeight).toBe(list.clientHeight);
+
+    // Each section is headed by its own edge-to-edge rule, with no separator.
+    const menu = document.body.querySelector("[role='menu']")!;
+    await expect(
+      document.body.querySelectorAll("[role='separator']"),
+    ).toHaveLength(0);
+    const headings = document.body.querySelectorAll<HTMLElement>(
+      `.${styles.sectionHeading}`,
+    );
+    await expect(headings).toHaveLength(2);
+    const frame = menu.getBoundingClientRect();
+    for (const heading of headings) {
+      const rule = heading.querySelector("h3")!;
+      await expect(
+        Number.parseFloat(getComputedStyle(rule).borderBottomWidth),
+      ).toBeGreaterThan(0);
+      // Edge to edge, within the frame.
+      const box = rule.getBoundingClientRect();
+      await expect(box.left - frame.left).toBeLessThanOrEqual(2);
+      await expect(frame.right - box.right).toBeLessThanOrEqual(2);
+    }
+
+    // The first device sits further below the rule than from the menu's edge.
+    // Asserted as a relationship, not pixels: the asymmetry is the design.
+    const control = document.body.querySelector("input[type='radio']")!;
+    const ruleBottom = headings[0]
+      .querySelector("h3")!
+      .getBoundingClientRect().bottom;
+    const box = control.getBoundingClientRect();
+    await expect(box.top - ruleBottom).toBeGreaterThan(box.left - frame.left);
+
+    // And a section stands further from the one above than from its own first
+    // device.
+    const groups = document.body.querySelectorAll("[role='group']");
+    const speakers = groups[0].querySelectorAll("input[type='radio']");
+    const lastSpeaker = speakers[speakers.length - 1].getBoundingClientRect();
+    const nextHeading = groups[1]!.querySelector("h3")!.getBoundingClientRect();
+    await expect(nextHeading.top - lastSpeaker.bottom).toBeGreaterThan(
+      box.top - ruleBottom,
+    );
+  },
+};
+
+export const OutputCannotBeChosen: Story = {
+  args: {
+    ...Default.args,
+    iconsAndLabels: "audio",
+    enabled: true,
+    options: [
+      { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+      { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+    ],
+    selectedOption: "mic1",
+    outputOptions: [
+      { label: { type: "name", name: "Speakers" }, id: "spk1" },
+      { label: { type: "name", name: "Headset" }, id: "spk2" },
+    ],
+    selectedOutputOption: "spk1",
+    // No callback: the speakers are listed, but none can be picked.
+    onSelectOutput: undefined,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+
+    const speakers = await within(document.body).findByRole("menuitemradio", {
+      name: "Speakers",
+    });
+    await expect(speakers).toHaveAttribute("aria-disabled", "true");
+  },
+};
+
+export const OnlyOneDevice: Story = {
+  args: {
+    ...Default.args,
+    iconsAndLabels: "audio",
+    enabled: true,
+    options: [{ label: { type: "name", name: "Microphone 1" }, id: "mic1" }],
+    selectedOption: "mic1",
+    outputOptions: [{ label: { type: "name", name: "Speakers" }, id: "spk1" }],
+    selectedOutputOption: "spk1",
+    onSelectOutput: fn(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+
+    // Shown, disabled, rather than hidden.
+    const only = await within(document.body).findByRole("menuitemradio", {
+      name: "Microphone 1",
+    });
+    await expect(only).toHaveAttribute("aria-disabled", "true");
+  },
+};
+
+/** A requested device hasn't arrived: nothing in either section can be picked. */
+export const SelectionSettling: Story = {
+  args: {
+    ...Default.args,
+    iconsAndLabels: "audio",
+    enabled: true,
+    options: [
+      { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+      { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+    ],
+    selectedOption: "mic1",
+    outputOptions: [
+      { label: { type: "name", name: "Speakers" }, id: "spk1" },
+      { label: { type: "name", name: "Headset" }, id: "spk2" },
+    ],
+    selectedOutputOption: "spk1",
+    onSelectOutput: fn(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+    const menu = within(document.body);
+
+    // selectedOption never changes, so the request stays in flight.
+    await userEvent.click(
+      await menu.findByRole("menuitemradio", { name: "Microphone 2" }),
+    );
+
+    await expect(await menu.findByLabelText("Activating…")).toBeVisible();
+    for (const item of menu.getAllByRole("menuitemradio"))
+      await expect(item).toHaveAttribute("aria-disabled", "true");
+  },
+};
+
+/**
+ * The ring shows for keyboard focus only. Asserted on the painted outline:
+ * asserting data-focus-source would still pass with the CSS rule deleted.
+ */
+export const KeyboardFocusRing: Story = {
+  args: {
+    ...Default.args,
+    iconsAndLabels: "audio",
+    enabled: true,
+    options: [
+      { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+      { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+    ],
+    selectedOption: "mic1",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+    const menu = within(document.body);
+    const first = await menu.findByRole("menuitemradio", {
+      name: "Microphone 1",
+    });
+
+    // Opened by pointer: no ring, even though Radix has moved focus.
+    await expect(outlineWidth(first)).toBe(0);
+
+    await userEvent.keyboard("{ArrowDown}");
+    const focused = document.activeElement as HTMLElement;
+    await expect(focused).toHaveRole("menuitemradio");
+    await expect(outlineWidth(focused)).toBeGreaterThan(0);
+
+    // And the pointer takes it away again.
+    await userEvent.hover(first);
+    await expect(outlineWidth(document.activeElement as HTMLElement)).toBe(0);
+  },
+};
+
+/** The list scrolls; the meter stays at the foot of the microphone section. */
+export const ManyDevices: Story = {
+  args: {
+    ...Default.args,
+    iconsAndLabels: "audio",
+    enabled: true,
+    options: Array.from({ length: 20 }, (_, i) => ({
+      label: { type: "name" as const, name: `Microphone ${i + 1}` },
+      id: `mic${i + 1}`,
+    })),
+    selectedOption: "mic1",
+    outputOptions: Array.from({ length: 6 }, (_, i) => ({
+      label: { type: "name" as const, name: `Speaker ${i + 1}` },
+      id: `spk${i + 1}`,
+    })),
+    selectedOutputOption: "spk1",
+    onSelectOutput: fn(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+    const menu = within(document.body);
+
+    // The sticky wrapper rather than the meter: without a fake microphone (as on
+    // WebKit) the meter shows a message instead of a level.
+    const list = document.body.querySelector<HTMLElement>(
+      `.${styles.deviceList}`,
+    )!;
+    const sticky = await waitFor(() => {
+      const element = document.body.querySelector<HTMLElement>(
+        `.${styles.stickyMeter}`,
+      );
+      if (element === null) throw new Error("the meter has not rendered yet");
+      return element;
+    });
+    await expect(list.scrollHeight).toBeGreaterThan(list.clientHeight);
+
+    // Scrolled so the microphone section starts at the top: only there does a
+    // pinned meter differ from one that is simply last.
+    const group = await menu.findByRole("group", { name: "Microphone" });
+    list.scrollTop +=
+      group.getBoundingClientRect().top - list.getBoundingClientRect().top;
+    await expect(list.scrollTop + list.clientHeight).toBeLessThan(
+      list.scrollHeight,
+    );
+
+    const scrollport = list.getBoundingClientRect();
+    const pinned = sticky.getBoundingClientRect();
+    await expect(pinned.bottom).toBeLessThanOrEqual(scrollport.bottom + 1);
+    await expect(pinned.top).toBeGreaterThanOrEqual(scrollport.top - 1);
+
+    // The whole menu is on screen, not bounded by the document.
+    const frame = document.body
+      .querySelector("[role='menu']")!
+      .getBoundingClientRect();
+    await expect(frame.top).toBeGreaterThanOrEqual(0);
+    await expect(frame.bottom).toBeLessThanOrEqual(window.innerHeight + 1);
+
+    // The meter is the menu's one opaque part, so it must stay inside the frame.
+    await expect(pinned.left).toBeGreaterThan(frame.left);
+    await expect(pinned.right).toBeLessThan(frame.right);
+  },
+};
+
+/** Painted outline width, in px. */
+function outlineWidth(element: HTMLElement): number {
+  const { outlineStyle, outlineWidth } = getComputedStyle(element);
+  if (outlineStyle === "none") return 0;
+  return Number.parseFloat(outlineWidth) || 0;
+}
+
+/** Safari lists no outputs: a disabled, selected Default stands in. */
+export const OutputNotEnumerated: Story = {
+  args: {
+    ...Default.args,
+    iconsAndLabels: "audio",
+    enabled: true,
+    options: [
+      { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+      { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+    ],
+    selectedOption: "mic1",
+    outputOptions: [],
+    selectedOutputOption: undefined,
+    onSelectOutput: undefined,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+
+    const speakers = await within(document.body).findByRole("menuitemradio", {
+      name: "Default",
+    });
+    await expect(speakers).toHaveAttribute("aria-disabled", "true");
+  },
+};
+
+/** The meter's icon shares the radio controls' centre line; only a real browser lays this out. */
+export const MeterAlignsWithTheDeviceRows: Story = {
+  args: {
+    ...Default.args,
+    iconsAndLabels: "audio",
+    enabled: true,
+    options: [
+      { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+      { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+    ],
+    selectedOption: "mic1",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+
+    const menu = document.body.querySelector("[role='menu']")!;
+    const radio = menu.querySelector("input[type='radio']")!;
+    const icon = await waitFor(() => {
+      const element = document.body.querySelector(`.${meterStyles.icon}`);
+      if (element === null) throw new Error("the meter has not rendered yet");
+      return element;
+    });
+
+    // A pixel of slack, for subpixel layout.
+    await expect(Math.abs(centre(icon) - centre(radio))).toBeLessThanOrEqual(1);
+  },
+};
+
+/** Inline-axis centre of an element. */
+function centre(element: Element): number {
+  const box = element.getBoundingClientRect();
+  return box.left + box.width / 2;
+}
+
+/** Every row the keyboard reaches is fully visible, not under a heading or the meter. */
+export const KeyboardReachesEveryDevice: Story = {
+  args: {
+    ...Default.args,
+    iconsAndLabels: "audio",
+    enabled: true,
+    // Enough to scroll both ways, so either end can hide a row.
+    options: Array.from({ length: 20 }, (_, i) => ({
+      label: { type: "name" as const, name: `Microphone ${i + 1}` },
+      id: `mic${i + 1}`,
+    })),
+    selectedOption: "mic1",
+    outputOptions: Array.from({ length: 4 }, (_, i) => ({
+      label: { type: "name" as const, name: `Speaker ${i + 1}` },
+      id: `spk${i + 1}`,
+    })),
+    selectedOutputOption: "spk1",
+    onSelectOutput: fn(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+
+    const meter = await waitFor(() => {
+      const element = document.body.querySelector<HTMLElement>(
+        `.${styles.stickyMeter}`,
+      );
+      if (element === null) throw new Error("the meter has not rendered yet");
+      return element;
+    });
+
+    // Drawn over the list: the sticky headings and the meter.
+    const overlays = [
+      meter,
+      ...document.body.querySelectorAll<HTMLElement>(
+        `.${styles.sectionHeading}`,
+      ),
+    ];
+    const items = within(document.body).getAllByRole("menuitemradio");
+
+    // Down to the last device and back up.
+    for (const key of ["{ArrowDown}", "{ArrowUp}"])
+      for (let i = 0; i < items.length; i++) {
+        await userEvent.keyboard(key);
+        const focused = document.activeElement as HTMLElement;
+        await expect(focused).toHaveRole("menuitemradio");
+        // Checked as overlap: a heading only covers rows while its section is on
+        // screen.
+        await expect(overlapping(focused, overlays)).toBeLessThanOrEqual(1);
+      }
+  },
+};
+
+/** A section's heading stays at the top while the section is in view, and leaves with it. */
+export const HeadingsStayWhileScrolling: Story = {
+  args: {
+    ...Default.args,
+    iconsAndLabels: "audio",
+    enabled: true,
+    options: Array.from({ length: 20 }, (_, i) => ({
+      label: { type: "name" as const, name: `Microphone ${i + 1}` },
+      id: `mic${i + 1}`,
+    })),
+    selectedOption: "mic1",
+    outputOptions: Array.from({ length: 4 }, (_, i) => ({
+      label: { type: "name" as const, name: `Speaker ${i + 1}` },
+      id: `spk${i + 1}`,
+    })),
+    selectedOutputOption: "spk1",
+    onSelectOutput: fn(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+    const menu = within(document.body);
+
+    const list = document.body.querySelector<HTMLElement>(
+      `.${styles.deviceList}`,
+    )!;
+    const group = await menu.findByRole("group", { name: "Microphone" });
+    // By class: the heading is aria-hidden, and its group carries the name.
+    const heading = group.querySelector<HTMLElement>(
+      `.${styles.sectionHeading}`,
+    )!;
+
+    // Far enough that the heading is only on screen if it is stuck there.
+    list.scrollTop +=
+      group.getBoundingClientRect().top - list.getBoundingClientRect().top + 80;
+
+    const scrollport = list.getBoundingClientRect();
+    await expect(heading.getBoundingClientRect().top).toBeLessThanOrEqual(
+      scrollport.top + 2,
+    );
+    await expect(heading.getBoundingClientRect().bottom).toBeGreaterThan(
+      scrollport.top,
+    );
+    // Clear of the menu's frame.
+    const frame = document.body
+      .querySelector("[role='menu']")!
+      .getBoundingClientRect();
+    await expect(heading.getBoundingClientRect().left).toBeGreaterThan(
+      frame.left,
+    );
+  },
+};
+
+/** How far the most overlapping of `overlays` covers `element`, in px. */
+function overlapping(element: Element, overlays: Element[]): number {
+  const box = element.getBoundingClientRect();
+  return overlays.reduce((worst, overlay) => {
+    const over = overlay.getBoundingClientRect();
+    const shared =
+      Math.min(box.bottom, over.bottom) - Math.max(box.top, over.top);
+    return Math.max(worst, shared);
+  }, 0);
+}
+
+/** The blur toggle gets the keyboard ring too: it is the menu's child, not the list's. */
+export const FocusRingCoversTheBlurToggle: Story = {
+  args: {
+    ...VideoUnmute.args,
+    iconsAndLabels: "video",
+    videoBlurEnabled: false,
+    videoBlurToggleClick: fn(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Camera" }));
+    const toggle = await within(document.body).findByRole("menuitemcheckbox", {
+      name: /Blur background/,
+    });
+
+    // Arrow down past the cameras to the toggle.
+    for (let i = 0; i < 6 && document.activeElement !== toggle; i++)
+      await userEvent.keyboard("{ArrowDown}");
+    await expect(document.activeElement).toBe(toggle);
+    // The same ring the device rows get.
+    await expect(outlineWidth(toggle)).toBeGreaterThan(0);
+
+    // And the pointer takes it away, with the toggle still focused.
+    await userEvent.hover(toggle);
+    await expect(document.activeElement).toBe(toggle);
+    await expect(outlineWidth(toggle)).toBe(0);
+  },
+};
diff --git a/src/components/MediaMuteAndSwitchButton.test.tsx b/src/components/MediaMuteAndSwitchButton.test.tsx
index fcc9f0b4..9fd67dfd 100644
--- a/src/components/MediaMuteAndSwitchButton.test.tsx
+++ b/src/components/MediaMuteAndSwitchButton.test.tsx
@@ -5,40 +5,61 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { describe, expect, test, vi } from "vitest";
-import { act, render, screen, type RenderResult } from "@testing-library/react";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { axe } from "vitest-axe";
+import {
+  act,
+  render,
+  screen,
+  within,
+  type RenderResult,
+} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { type JSX, useState, type ReactNode } from "react";
+import { Profiler, type JSX, useState, type ReactNode } from "react";
 import { TooltipProvider } from "@vector-im/compound-web";
 
-import { MediaMuteAndSwitchButton } from "./MediaMuteAndSwitchButton";
+import {
+  MediaMuteAndSwitchButton,
+  type MenuOptions,
+} from "./MediaMuteAndSwitchButton";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { type MediaDevices } from "../state/MediaDevices";
+import { restoreAudioCapture, stubAudioCapture } from "../utils/test";
 
 interface RenderOptions {
   requestDeviceNames: () => void;
 }
 
-function renderComponent(
+function withProviders(
   component: ReactNode,
   { requestDeviceNames = (): void => {} }: Partial<RenderOptions> = {},
-): RenderResult {
-  return render(
+): JSX.Element {
+  return (
     <TooltipProvider>
       <MediaDevicesContext
         value={{ requestDeviceNames } as unknown as MediaDevices}
       >
         {component}
       </MediaDevicesContext>
-    </TooltipProvider>,
+    </TooltipProvider>
   );
 }
 
+function renderComponent(
+  component: ReactNode,
+  options: Partial<RenderOptions> = {},
+): RenderResult {
+  return render(withProviders(component, options));
+}
+
 describe("MediaMuteAndSwitchButton", () => {
+  // Only one test stubs the capture; don't let it leak into the rest.
+  afterEach(restoreAudioCapture);
+
   test("renders", () => {
     const { container } = renderComponent(
       <TooltipProvider>
-        <MediaMuteAndSwitchButton title={"Switcher"} iconsAndLabels={"audio"} />
+        <MediaMuteAndSwitchButton iconsAndLabels={"audio"} />
       </TooltipProvider>,
     );
     expect(container).toMatchSnapshot();
@@ -50,11 +71,7 @@ describe("MediaMuteAndSwitchButton", () => {
       enabled: boolean,
     ): RenderResult => {
       return renderComponent(
-        <MediaMuteAndSwitchButton
-          title={"Switcher"}
-          iconsAndLabels={type}
-          enabled={enabled}
-        />,
+        <MediaMuteAndSwitchButton iconsAndLabels={type} enabled={enabled} />,
       );
     };
     const renderAudioEndabled = renderLabels("audio", true);
@@ -81,7 +98,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const onMute = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title={"Switcher"}
         onMuteClick={onMute}
         iconsAndLabels="audio"
         enabled={true}
@@ -98,7 +114,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const onMute = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title={"Switcher"}
         onMuteClick={onMute}
         iconsAndLabels="audio"
         enabled={true}
@@ -119,7 +134,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const onMute = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title={"Switcher"}
         onMuteClick={onMute}
         iconsAndLabels="video"
         enabled={true}
@@ -139,11 +153,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const requestDeviceNames = vi.fn();
     renderComponent(
-      <MediaMuteAndSwitchButton
-        title="Switcher"
-        iconsAndLabels="audio"
-        enabled
-      />,
+      <MediaMuteAndSwitchButton iconsAndLabels="audio" enabled />,
       { requestDeviceNames },
     );
 
@@ -157,7 +167,6 @@ describe("MediaMuteAndSwitchButton", () => {
     renderComponent(
       <>
         <MediaMuteAndSwitchButton
-          title="Switcher"
           iconsAndLabels="audio"
           enabled
           options={[
@@ -167,7 +176,6 @@ describe("MediaMuteAndSwitchButton", () => {
           selectedOption="mic1"
         />
         <MediaMuteAndSwitchButton
-          title="Switcher"
           iconsAndLabels="video"
           enabled
           options={[
@@ -193,7 +201,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const onSelect = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -217,7 +224,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const onSelect = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -246,7 +252,6 @@ describe("MediaMuteAndSwitchButton", () => {
       const [selectedOption, setSelectedOption] = useState("mic1");
       return (
         <MediaMuteAndSwitchButton
-          title="Switcher"
           iconsAndLabels="audio"
           enabled={true}
           options={[
@@ -306,7 +311,6 @@ describe("MediaMuteAndSwitchButton", () => {
     const onVideoBlurToggle = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title="Switcher"
         iconsAndLabels="video"
         enabled={true}
         videoBlurToggleClick={onVideoBlurToggle}
@@ -327,11 +331,10 @@ describe("MediaMuteAndSwitchButton", () => {
     expect(onVideoBlurToggle).toHaveBeenCalled();
   });
 
-  test("renders check icon to mark the selected menu item", async () => {
+  test("marks the selected menu item as checked", async () => {
     const user = userEvent.setup();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
-        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -342,19 +345,493 @@ describe("MediaMuteAndSwitchButton", () => {
       />,
     );
 
-    // open menu
     await user.click(getByRole("button", { name: "Microphone" }));
 
-    // The selected item (mic2) renders both an IconOptions SVG and a CheckIcon SVG
-    const mic1Item = screen.getByRole("menuitemradio", {
-      name: "Microphone 2",
-    });
-    expect(mic1Item.querySelectorAll("svg").length).toBe(2);
+    screen.getByRole("menuitemradio", { name: "Microphone 2", checked: true });
+    screen.getByRole("menuitemradio", { name: "Microphone 1", checked: false });
+  });
 
-    // The unselected item (mic1) only renders its IconOptions SVG
-    const mic2Item = screen.getByRole("menuitemradio", {
+  test("disables every device while a selection is settling", async () => {
+    const user = userEvent.setup();
+    const { promise, resolve } = Promise.withResolvers<void>();
+    function Wrapper(): JSX.Element {
+      const [selectedOption, setSelectedOption] = useState("mic1");
+      return (
+        <MediaMuteAndSwitchButton
+          iconsAndLabels="audio"
+          enabled={true}
+          options={[
+            { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+            { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+          ]}
+          selectedOption={selectedOption}
+          onSelect={(id) => {
+            void promise.then(() => setSelectedOption(id));
+          }}
+          outputOptions={[
+            { label: { type: "name", name: "Speakers" }, id: "spk1" },
+            { label: { type: "name", name: "Headset" }, id: "spk2" },
+          ]}
+          selectedOutputOption="spk1"
+          onSelectOutput={vi.fn()}
+        />
+      );
+    }
+
+    const { getByRole } = renderComponent(<Wrapper />);
+    await user.click(getByRole("button", { name: "Microphone" }));
+    await user.click(
+      screen.getByRole("menuitemradio", { name: "Microphone 2" }),
+    );
+
+    // In flight: nothing else can be picked, in either section.
+    for (const name of ["Microphone 1", "Speakers", "Headset"]) {
+      expect(screen.getByRole("menuitemradio", { name })).toHaveAttribute(
+        "aria-disabled",
+        "true",
+      );
+    }
+
+    await act(async () => {
+      resolve();
+      await promise;
+    });
+
+    // Settled: selectable again.
+    expect(
+      screen.getByRole("menuitemradio", { name: "Microphone 1" }),
+    ).not.toHaveAttribute("aria-disabled", "true");
+    expect(
+      screen.getByRole("menuitemradio", { name: "Headset" }),
+    ).not.toHaveAttribute("aria-disabled", "true");
+  });
+
+  test("lets go of a device switch that never arrives", async () => {
+    const user = userEvent.setup();
+    // onSelect never reports back, as when a device is removed mid-switch.
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic1"
+        onSelect={vi.fn()}
+        outputOptions={[
+          { label: { type: "name", name: "Speakers" }, id: "spk1" },
+          { label: { type: "name", name: "Headset" }, id: "spk2" },
+        ]}
+        selectedOutputOption="spk1"
+        onSelectOutput={vi.fn()}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+    await user.click(
+      screen.getByRole("menuitemradio", { name: "Microphone 2" }),
+    );
+    await user.keyboard("{Escape}");
+    await user.click(getByRole("button", { name: "Microphone" }));
+
+    for (const name of ["Microphone 1", "Speakers", "Headset"]) {
+      expect(screen.getByRole("menuitemradio", { name })).not.toHaveAttribute(
+        "aria-disabled",
+        "true",
+      );
+    }
+  });
+
+  test("lets go of a device switch whose device is unplugged", async () => {
+    const user = userEvent.setup();
+    const mics: MenuOptions[] = [
+      { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+      { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+    ];
+    const menu = (options: MenuOptions[]): JSX.Element => (
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={options}
+        selectedOption="mic1"
+        onSelect={vi.fn()}
+        outputOptions={[
+          { label: { type: "name", name: "Speakers" }, id: "spk1" },
+          { label: { type: "name", name: "Headset" }, id: "spk2" },
+        ]}
+        selectedOutputOption="spk1"
+        onSelectOutput={vi.fn()}
+      />
+    );
+
+    const { getByRole, rerender } = renderComponent(menu(mics));
+    await user.click(getByRole("button", { name: "Microphone" }));
+    await user.click(
+      screen.getByRole("menuitemradio", { name: "Microphone 2" }),
+    );
+
+    // The second microphone is unplugged before the switch lands.
+    rerender(withProviders(menu(mics.slice(0, 1))));
+
+    // Selectable again without closing the menu.
+    expect(
+      screen.getByRole("menuitemradio", { name: "Headset" }),
+    ).not.toHaveAttribute("aria-disabled", "true");
+  });
+
+  test("moves the level without re-rendering anything", async () => {
+    // The level is drawn into the DOM, so a moving level commits nothing.
+    const capture = stubAudioCapture();
+    const user = userEvent.setup();
+    let commits = 0;
+
+    const { getByRole } = renderComponent(
+      <Profiler
+        id="menu"
+        onRender={(): void => {
+          commits++;
+        }}
+      >
+        <MediaMuteAndSwitchButton
+          iconsAndLabels="audio"
+          enabled={true}
+          options={[
+            { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+            { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+          ]}
+          selectedOption="mic1"
+          onSelect={vi.fn()}
+          outputOptions={[
+            { label: { type: "name", name: "Speakers" }, id: "spk1" },
+            { label: { type: "name", name: "Headset" }, id: "spk2" },
+          ]}
+          selectedOutputOption="spk1"
+          onSelectOutput={vi.fn()}
+        />
+      </Profiler>,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+    capture.grant();
+    await vi.waitFor(() => expect(capture.contexts).toHaveLength(1));
+    const meter = await screen.findByRole("meter");
+    // The capture's arrival is one render: the idle level swapped for its own.
+    await act(async () => {});
+    const settled = commits;
+
+    // The meter smooths by elapsed time, so hand-driven frames need a clock.
+    let elapsed = performance.now();
+    const clock = vi
+      .spyOn(performance, "now")
+      .mockImplementation(() => (elapsed += 16));
+
+    // One frame per task, as a browser delivers them: one act() would batch them.
+    for (let step = 1; step <= 8; step++) {
+      capture.speak(step / 8);
+      await act(async () => {
+        capture.drawFrames(1);
+        await Promise.resolve();
+      });
+    }
+    clock.mockRestore();
+
+    expect(meter.getAttribute("aria-valuenow")).not.toBe("0");
+    expect(commits - settled).toBe(0);
+  });
+
+  test("camera menu uses the same selection pattern and keeps the blur toggle", async () => {
+    const user = userEvent.setup();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="video"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Camera 1" }, id: "cam1" },
+          { label: { type: "name", name: "Camera 2" }, id: "cam2" },
+        ]}
+        selectedOption="cam1"
+        onSelect={vi.fn()}
+        videoBlurToggleClick={vi.fn()}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Camera" }));
+
+    screen.getByRole("menuitemradio", { name: "Camera 1", checked: true });
+    screen.getByRole("menuitemradio", { name: "Camera 2", checked: false });
+    expect(
+      screen.getByRole("menuitemcheckbox", { name: "Blur background" }),
+    ).toBeInTheDocument();
+  });
+
+  test("marks focus as keyboard-driven only when the keyboard moved it", async () => {
+    const user = userEvent.setup();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic1"
+        onSelect={vi.fn()}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+    const list = screen
+      .getByRole("menuitemradio", { name: "Microphone 1" })
+      .closest("[data-focus-source]");
+
+    // The menu focuses whatever the pointer is over, so focus alone says nothing.
+    expect(list).toHaveAttribute("data-focus-source", "pointer");
+
+    await user.keyboard("{ArrowDown}");
+    expect(list).toHaveAttribute("data-focus-source", "keyboard");
+
+    await user.pointer({
+      target: screen.getByRole("menuitemradio", { name: "Microphone 2" }),
+      coords: { clientX: 10, clientY: 10 },
+    });
+    expect(list).toHaveAttribute("data-focus-source", "pointer");
+  });
+
+  test("marks the selected device with the accent fill", async () => {
+    const user = userEvent.setup();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic2"
+        onSelect={vi.fn()}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+
+    const selected = screen
+      .getByRole("menuitemradio", { name: "Microphone 2" })
+      .querySelector("input[type=radio]");
+    expect(selected).toBeChecked();
+    // readOnly would paint the selected radio muted.
+    expect(selected).not.toHaveAttribute("readonly");
+  });
+
+  test("the open menu has no accessibility violations", async () => {
+    const user = userEvent.setup();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic1"
+        onSelect={vi.fn()}
+        outputOptions={[
+          { label: { type: "name", name: "Speakers" }, id: "spk1" },
+          { label: { type: "name", name: "Headset" }, id: "spk2" },
+        ]}
+        selectedOutputOption="spk1"
+        onSelectOutput={vi.fn()}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+
+    const menu = document.querySelector('[role="menu"]');
+    expect(await axe(menu as HTMLElement)).toHaveNoViolations();
+  });
+
+  test("puts the speaker section above the microphone section", async () => {
+    const user = userEvent.setup();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic1"
+        onSelect={vi.fn()}
+        outputOptions={[
+          { label: { type: "name", name: "Speakers" }, id: "spk1" },
+          { label: { type: "name", name: "Headset" }, id: "spk2" },
+        ]}
+        selectedOutputOption="spk1"
+        onSelectOutput={vi.fn()}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+
+    const speakers = screen.getByRole("menuitemradio", { name: "Speakers" });
+    const microphone = screen.getByRole("menuitemradio", {
       name: "Microphone 1",
     });
-    expect(mic2Item.querySelectorAll("svg").length).toBe(1);
+    expect(
+      speakers.compareDocumentPosition(microphone) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
+  test("lists speaker and microphone sections", async () => {
+    const user = userEvent.setup();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic1"
+        onSelect={vi.fn()}
+        outputOptions={[
+          {
+            label: { type: "default", name: "Built-in Output" },
+            id: "default",
+          },
+          { label: { type: "name", name: "Headset" }, id: "spk2" },
+        ]}
+        selectedOutputOption="default"
+        onSelectOutput={vi.fn()}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+
+    screen.getByRole("menuitemradio", {
+      name: "Default (Built-in Output)",
+      checked: true,
+    });
+    screen.getByRole("menuitemradio", { name: "Headset", checked: false });
+    screen.getByRole("menuitemradio", { name: "Microphone 1", checked: true });
+    screen.getByRole("menuitemradio", { name: "Microphone 2", checked: false });
+  });
+
+  test("calls the output select callback on speaker click", async () => {
+    const user = userEvent.setup();
+    const onSelectOutput = vi.fn();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic1"
+        outputOptions={[
+          { label: { type: "name", name: "Speakers" }, id: "spk1" },
+          { label: { type: "name", name: "Headset" }, id: "spk2" },
+        ]}
+        selectedOutputOption="spk1"
+        onSelectOutput={onSelectOutput}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+    await user.click(screen.getByRole("menuitemradio", { name: "Headset" }));
+
+    expect(onSelectOutput).toHaveBeenCalledWith("spk2");
+  });
+
+  test("shows a single device entry disabled", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+        ]}
+        selectedOption="mic1"
+        onSelect={onSelect}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+
+    // Shown, but not selectable.
+    const only = screen.getByRole("menuitemradio", { name: "Microphone 1" });
+    expect(only).toHaveAttribute("aria-disabled", "true");
+  });
+
+  test("shows a default speaker where the platform lists none", async () => {
+    const user = userEvent.setup();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic1"
+        onSelect={vi.fn()}
+        // As Safari: no outputs listed.
+        outputOptions={[]}
+        selectedOutputOption={undefined}
+        onSelectOutput={undefined}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+
+    const speakers = screen
+      .getAllByRole("group")
+      .find((group) => group.getAttribute("aria-label") === "Speaker")!;
+    const entries = within(speakers).getAllByRole("menuitemradio");
+    expect(entries).toHaveLength(1);
+    expect(entries[0]).toHaveAccessibleName("Default");
+    expect(entries[0]).toHaveAttribute("aria-disabled", "true");
+    expect(entries[0]).toHaveAttribute("aria-checked", "true");
+    expect(
+      within(entries[0]).getByRole("radio", { hidden: true }),
+    ).toBeChecked();
+  });
+
+  test("shows the speaker section disabled when output selection is unsupported", async () => {
+    const user = userEvent.setup();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="audio"
+        enabled={true}
+        options={[
+          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
+          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
+        ]}
+        selectedOption="mic1"
+        onSelect={vi.fn()}
+        outputOptions={[
+          { label: { type: "name", name: "Speakers" }, id: "spk1" },
+          { label: { type: "name", name: "Headset" }, id: "spk2" },
+        ]}
+        selectedOutputOption="spk1"
+        onSelectOutput={undefined}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Microphone" }));
+
+    expect(
+      screen.getByRole("menuitemradio", { name: "Speakers" }),
+    ).toHaveAttribute("aria-disabled", "true");
+    expect(
+      screen.getByRole("menuitemradio", { name: "Headset" }),
+    ).toHaveAttribute("aria-disabled", "true");
+    expect(
+      screen.getByRole("menuitemradio", { name: "Microphone 2" }),
+    ).not.toHaveAttribute("aria-disabled", "true");
   });
 });
diff --git a/src/components/MediaMuteAndSwitchButton.tsx b/src/components/MediaMuteAndSwitchButton.tsx
index 3e344dd3..25342f00 100644
--- a/src/components/MediaMuteAndSwitchButton.tsx
+++ b/src/components/MediaMuteAndSwitchButton.tsx
@@ -5,37 +5,48 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ComponentType, useState, type FC, useEffect } from "react";
+import {
+  useCallback,
+  useState,
+  type CSSProperties,
+  type FC,
+  useEffect,
+  type ReactElement,
+} from "react";
 import {
   Button,
   Menu,
   MenuItem,
+  MenuTitle,
+  RadioInput,
   ToggleMenuItem,
 } from "@vector-im/compound-web";
 import {
-  CheckIcon,
   ChevronUpIcon,
   ChevronDownIcon,
-  MicOnIcon,
   SpinnerIcon,
-  VideoCallIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
+import { distinctUntilChanged, map } from "rxjs";
 
 import styles from "./MediaMuteAndSwitchButton.module.css";
 import { MicButton, VideoButton } from "../button";
-import { type DeviceLabel } from "../state/MediaDevices";
+import {
+  type AudioOutputDeviceLabel,
+  type DeviceLabel,
+} from "../state/MediaDevices";
 import { useMediaDevices } from "../MediaDevicesContext";
+import { useRootElement } from "../RootElementContext";
+import { observeElementSize$ } from "../utils/elementSize";
+import { LiveMicrophoneLevelMeter } from "./MicrophoneLevelMeter";
 
 export interface MenuOptions {
-  label: DeviceLabel;
+  label: DeviceLabel | AudioOutputDeviceLabel;
   id: string;
 }
 
 export interface MediaMuteAndSwitchButtonProps {
-  /** The title used in the Switcher modal. */
-  title: string;
   /** If the Mute button is enabled */
   enabled?: boolean;
   /** Callback if the mute button is clicked */
@@ -47,6 +58,12 @@ export interface MediaMuteAndSwitchButtonProps {
   options?: MenuOptions[];
   /** The option that will currently be rendered as the selected option */
   selectedOption?: string;
+  /** Output (speaker) devices. Audio menu only. */
+  outputOptions?: MenuOptions[];
+  /** The output option currently rendered as selected */
+  selectedOutputOption?: string;
+  /** Picks an output device. Undefined disables the speaker section. */
+  onSelectOutput?: (id: string) => void;
   videoBlurToggleClick?: () => void;
   videoBlurEnabled?: boolean;
   /**
@@ -58,90 +75,240 @@ export interface MediaMuteAndSwitchButtonProps {
 
 const BLUR_ID = "blur";
 
+/** Id of the placeholder "Default" row, shown when the platform lists no outputs. */
+const DEFAULT_OUTPUT_ID = "default";
+
+/** Largest share of the call area's height the device list may take. */
+const LIST_SHARE_OF_CALL = 0.6;
+
+/** Smallest device list height in px, so a short call still shows more than one device. */
+const MIN_LIST_HEIGHT = 160;
+
 export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
-  title,
   enabled,
   busy,
   onMuteClick,
   iconsAndLabels,
   options,
   selectedOption,
+  outputOptions,
+  selectedOutputOption,
+  onSelectOutput,
   videoBlurEnabled,
   videoBlurToggleClick,
   onSelect,
 }) => {
-  const [plannedSelection, setPlannedSelection] = useState<string | null>(null);
+  // Requested but not yet selected. Keyed by kind too, since Chrome uses
+  // "default" for both an input and an output.
+  const [plannedSelection, setPlannedSelection] = useState<{
+    kind: "input" | "output";
+    id: string;
+  } | null>(null);
   const [menuOpen, setMenuOpen] = useState(false);
+  const onOpenChange = useCallback((open: boolean): void => {
+    setMenuOpen(open);
+    // Drop a request that never arrived.
+    if (!open) setPlannedSelection(null);
+  }, []);
   const isBusy = busy ?? false;
   const { t } = useTranslation();
   const devices = useMediaDevices();
 
+  /**
+   * Records on the menu whether the keyboard or the pointer moved focus, for
+   * the focus ring. `:focus-visible` can't tell: Radix focuses whatever the
+   * pointer is over. Listened for on the menu, not the document, so a second
+   * Element Call on the page doesn't answer for this one.
+   */
+  const trackFocusSource = useCallback(
+    (list: HTMLDivElement | null): (() => void) | undefined => {
+      const menu = list?.closest<HTMLElement>('[role="menu"]');
+      if (menu === null || menu === undefined) return;
+      const record = (source: "keyboard" | "pointer"): void => {
+        menu.dataset.focusSource = source;
+      };
+      record("pointer");
+      const usedKeyboard = (): void => record("keyboard");
+      const usedPointer = (): void => record("pointer");
+      menu.addEventListener("keydown", usedKeyboard, true);
+      menu.addEventListener("pointermove", usedPointer, true);
+      return (): void => {
+        menu.removeEventListener("keydown", usedKeyboard, true);
+        menu.removeEventListener("pointermove", usedPointer, true);
+      };
+    },
+    [],
+  );
+
+  // Measured on the call area: CSS can't size the portalled menu against it.
+  const rootElement = useRootElement();
+  const [listMaxHeight, setListMaxHeight] = useState<number>();
+  useEffect(() => {
+    if (!menuOpen) return;
+    // Followed, since a host can resize the call while the menu is open.
+    const subscription = observeElementSize$(rootElement)
+      .pipe(
+        map(({ height }) =>
+          Math.max(MIN_LIST_HEIGHT, Math.round(height * LIST_SHARE_OF_CALL)),
+        ),
+        distinctUntilChanged(),
+      )
+      .subscribe(setListMaxHeight);
+    return (): void => subscription.unsubscribe();
+  }, [menuOpen, rootElement]);
+
+  // Kept clear at the list's foot, so a row reached by keyboard isn't under
+  // the meter.
+  const [meterHeight, meter] = useMeasuredHeight();
+
+  // Likewise at its head, for the sticky headings.
+  const [headingHeight, heading] = useMeasuredHeight();
+
   useEffect(() => {
     if (menuOpen) devices.requestDeviceNames(); // No-op after the first call
   }, [menuOpen, devices]);
 
-  let button;
-  let toggles: { label: string; enabled: boolean; id: string }[] = [];
-  switch (iconsAndLabels) {
-    case "video":
-      button = (
-        <VideoButton
-          enabled={enabled ?? false}
-          busy={isBusy}
-          onClick={(e) => {
-            onMuteClick?.();
-            e.preventDefault();
-            e.stopPropagation();
-          }}
-          disabled={isBusy || onMuteClick === undefined}
-          data-testid="incall_videomute"
-        />
-      );
-      if (videoBlurToggleClick !== undefined) {
-        toggles = [
+  const MuteButton = iconsAndLabels === "audio" ? MicButton : VideoButton;
+  const button = (
+    <MuteButton
+      enabled={enabled ?? false}
+      busy={isBusy}
+      onClick={(e) => {
+        onMuteClick?.();
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+      disabled={isBusy || onMuteClick === undefined}
+      data-testid={
+        iconsAndLabels === "audio" ? "incall_mute" : "incall_videomute"
+      }
+    />
+  );
+
+  const toggles =
+    iconsAndLabels === "video" && videoBlurToggleClick !== undefined
+      ? [
           {
             label: t("action.blur_background"),
             enabled: videoBlurEnabled ?? false,
             id: BLUR_ID,
           },
-        ];
-      }
-      break;
-    case "audio":
-      button = (
-        <MicButton
-          enabled={enabled ?? false}
-          busy={isBusy}
-          onClick={(e) => {
-            onMuteClick?.();
-            e.preventDefault();
-            e.stopPropagation();
-          }}
-          disabled={isBusy || onMuteClick === undefined}
-          data-testid="incall_mute"
-        />
-      );
-      break;
-  }
+        ]
+      : [];
 
-  let IconOptions: ComponentType<React.SVGAttributes<SVGElement>> | undefined;
   let optionsButtonLabel: string;
+  let menuTitle: string;
   let numberedLabel: (number: number) => string;
   switch (iconsAndLabels) {
     case "video":
-      IconOptions = VideoCallIcon;
       optionsButtonLabel = t("settings.devices.camera");
+      menuTitle = t("settings.devices.camera_source");
       numberedLabel = (n): string =>
         t("settings.devices.camera_numbered", { n });
       break;
     case "audio":
-      IconOptions = MicOnIcon;
       optionsButtonLabel = t("settings.devices.microphone");
+      menuTitle = t("settings.devices.mic_source");
       numberedLabel = (n): string =>
         t("settings.devices.microphone_numbered", { n });
       break;
   }
 
+  const labelText = (
+    label: MenuOptions["label"],
+    numbered: (n: number) => string,
+  ): string => {
+    switch (label.type) {
+      case "name":
+        return label.name;
+      case "number":
+        return numbered(label.number);
+      case "default":
+        return label.name === null
+          ? t("settings.devices.default")
+          : t("settings.devices.default_named_plain", { name: label.name });
+      case "speaker":
+        return t("settings.devices.loudspeaker");
+      case "earpiece":
+        return t("settings.devices.handset");
+    }
+  };
+
+  // Nothing can be picked while a requested device is on offer but not yet
+  // selected, so a second request can't overtake it.
+  const plannedOutput = plannedSelection?.kind === "output";
+  const selectedOfPlannedKind = plannedOutput
+    ? selectedOutputOption
+    : selectedOption;
+  const offeredOfPlannedKind = plannedOutput ? outputOptions : options;
+  const settling =
+    plannedSelection !== null &&
+    plannedSelection.id !== selectedOfPlannedKind &&
+    offeredOfPlannedKind?.some(({ id }) => id === plannedSelection.id) === true;
+
+  // Safari lists no outputs: show a disabled, selected Default rather than an
+  // empty section.
+  const noOutputsListed = outputOptions?.length === 0;
+  const speakerOptions: MenuOptions[] | undefined = noOutputsListed
+    ? [{ id: DEFAULT_OUTPUT_ID, label: { type: "default", name: null } }]
+    : outputOptions;
+  const selectedSpeaker = noOutputsListed
+    ? DEFAULT_OUTPUT_ID
+    : selectedOutputOption;
+
+  const deviceItems = (
+    kind: "input" | "output",
+    items: MenuOptions[] | undefined,
+    selected: string | undefined,
+    select: ((id: string) => void) | undefined,
+    numbered: (n: number) => string,
+  ): ReactElement[] => {
+    const list = items ?? [];
+    // Disabled rather than hidden, so the menu keeps its shape.
+    const disabled = select === undefined || list.length <= 1 || settling;
+    return list.map(({ label, id }) => (
+      <MenuItem
+        // A radio input may not sit inside a button.
+        as="div"
+        hideChevron
+        disabled={disabled}
+        label={labelText(label, numbered)}
+        Icon={
+          // Inert, not aria-hidden: aria-hidden alone leaves it focusable.
+          <span inert>
+            <RadioInput
+              checked={selected === id}
+              disabled={disabled}
+              // Not readOnly, which mutes the selected fill. The item handles
+              // the click.
+              onChange={(): void => {}}
+            />
+          </span>
+        }
+        onSelect={(e) => {
+          e.preventDefault();
+          if (id === selected) return;
+          setPlannedSelection({ kind, id });
+          select?.(id);
+        }}
+        key={id}
+        role="menuitemradio"
+        aria-checked={selected === id}
+      >
+        {selected !== id &&
+          plannedSelection?.kind === kind &&
+          plannedSelection.id === id && (
+            <SpinnerIcon
+              width={24}
+              height={24}
+              className={styles.rotate}
+              aria-label={t("settings.devices.activating")}
+            />
+          )}
+      </MenuItem>
+    ));
+  };
+
   return (
     <div
       className={classNames({
@@ -152,10 +319,12 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
       {/* The mute button lives inside */}
       {button}
       <Menu
-        title={title}
-        showTitle={true}
+        className={styles.menu}
+        // Named for screen readers only: each section has its own heading.
+        title={menuTitle}
+        showTitle={false}
         open={menuOpen}
-        onOpenChange={setMenuOpen}
+        onOpenChange={onOpenChange}
         side="top"
         trigger={
           <Button
@@ -171,67 +340,74 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
           />
         }
       >
-        {options?.map(({ label, id }) => {
-          let labelText: string;
-          switch (label.type) {
-            case "name":
-              labelText = label.name;
-              break;
-            case "number":
-              labelText = numberedLabel(label.number);
-              break;
+        <div
+          ref={trackFocusSource}
+          // Keeps the items the menu's own children for assistive tech.
+          role="none"
+          className={styles.deviceList}
+          style={
+            {
+              "--device-list-max-height":
+                listMaxHeight === undefined ? undefined : `${listMaxHeight}px`,
+              "--device-list-scroll-padding-end":
+                meterHeight === undefined ? undefined : `${meterHeight}px`,
+              "--device-list-scroll-padding-start":
+                headingHeight === undefined ? undefined : `${headingHeight}px`,
+            } as CSSProperties
           }
-          return (
-            <MenuItem
-              hideChevron
-              label={labelText}
-              Icon={
-                IconOptions && (
-                  <IconOptions
-                    width={24}
-                    height={24}
-                    className={styles.itemIcon}
-                    aria-hidden
-                  />
-                )
-              }
-              onSelect={(e) => {
-                e.preventDefault();
-                if (id === selectedOption) return;
-                setPlannedSelection(id);
-                onSelect?.(id);
-              }}
-              key={id}
-              role="menuitemradio"
-              aria-checked={selectedOption === id}
-            >
-              {selectedOption === id && (
-                <CheckIcon
-                  width={24}
-                  height={24}
-                  aria-hidden // A label would be redundant to aria-checked above
+        >
+          {iconsAndLabels === "audio" && speakerOptions && (
+            <>
+              {/* A menu may only contain items, separators and groups, so each
+                  heading is a hidden part of a named group. */}
+              <div role="group" aria-label={t("settings.devices.speaker")}>
+                <div aria-hidden className={styles.sectionHeading}>
+                  <MenuTitle title={t("settings.devices.speaker")} />
+                </div>
+                {deviceItems(
+                  "output",
+                  speakerOptions,
+                  selectedSpeaker,
+                  onSelectOutput,
+                  (n) => t("settings.devices.speaker_numbered", { n }),
+                )}
+              </div>
+            </>
+          )}
+          <div role="group" aria-label={optionsButtonLabel}>
+            <div ref={heading} aria-hidden className={styles.sectionHeading}>
+              <MenuTitle title={optionsButtonLabel} />
+            </div>
+            {/* Apart from the heading, so the sticky meter can't ride over it. */}
+            <div role="none">
+              {deviceItems(
+                "input",
+                options,
+                selectedOption,
+                onSelect,
+                numberedLabel,
+              )}
+              {iconsAndLabels === "audio" && (
+                <LiveMicrophoneLevelMeter
+                  ref={meter}
+                  deviceId={selectedOption}
+                  // Only while open, so the microphone isn't held all call.
+                  active={menuOpen}
+                  className={styles.stickyMeter}
                 />
               )}
-              {selectedOption !== id && plannedSelection === id && (
-                <SpinnerIcon
-                  width={24}
-                  height={24}
-                  className={styles.rotate}
-                  aria-label={t("settings.devices.activating")}
-                />
-              )}
-            </MenuItem>
-          );
-        })}
-        {(toggles?.length ?? 0) > 0 && <hr />}
-        {toggles?.map((toggle) => (
+            </div>
+          </div>
+        </div>
+        {toggles.length > 0 && <hr />}
+        {toggles.map((toggle) => (
           <ToggleMenuItem
             label={toggle.label}
             onSelect={(e) => {
               videoBlurToggleClick?.();
               e.preventDefault();
             }}
-            checked={toggle.enabled ?? false}
+            checked={toggle.enabled}
             key={toggle.id}
           />
         ))}
@@ -239,3 +415,25 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
     </div>
   );
 };
+
+/** Follows an element's height. */
+function useMeasuredHeight(): [
+  number | undefined,
+  (element: HTMLElement | null) => (() => void) | undefined,
+] {
+  const [height, setHeight] = useState<number>();
+  const ref = useCallback(
+    (element: HTMLElement | null): (() => void) | undefined => {
+      if (element === null) return;
+      const subscription = observeElementSize$(element)
+        .pipe(
+          map((size) => size.height),
+          distinctUntilChanged(),
+        )
+        .subscribe(setHeight);
+      return (): void => subscription.unsubscribe();
+    },
+    [],
+  );
+  return [height, ref];
+}
diff --git a/src/components/MicrophoneLevelMeter.module.css b/src/components/MicrophoneLevelMeter.module.css
new file mode 100644
index 00000000..83e440c5
--- /dev/null
+++ b/src/components/MicrophoneLevelMeter.module.css
@@ -0,0 +1,65 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+.meter {
+  /* A device row's icon column, so the bars start where the names do. */
+  --meter-icon-size: 24px;
+
+  /* Compound's radio size, whose centre line the icon shares. */
+  --device-control-size: 20px;
+
+  display: flex;
+  align-items: center;
+  gap: var(--cpd-space-3x);
+  padding-block: var(--cpd-space-2x);
+  /* Centres the icon on the radio column: less the row's inset border and half
+     the icon's extra width. Checked in the MeterAlignsWithTheDeviceRows story. */
+  padding-inline-start: calc(
+    var(--cpd-space-4x) - var(--cpd-border-width-1) -
+      (var(--meter-icon-size) - var(--device-control-size)) / 2
+  );
+  padding-inline-end: calc(var(--cpd-space-4x) * 2 + var(--cpd-space-2x));
+}
+
+.icon {
+  color: var(--cpd-color-icon-secondary);
+  flex-shrink: 0;
+  inline-size: var(--meter-icon-size);
+  block-size: var(--meter-icon-size);
+}
+
+.segments {
+  /* Bars keep one size and the width decides how many; the component reads the
+     sizes back from here. */
+  flex: 1;
+  /* So the bars never set the menu's width. */
+  contain: inline-size;
+  min-inline-size: 0;
+  display: flex;
+  align-items: center;
+  /* Half again a bar's width, per the design. */
+  gap: var(--cpd-space-1-5x);
+}
+
+.segment {
+  flex: none;
+  inline-size: var(--cpd-space-1x);
+  block-size: var(--cpd-space-4x);
+  border-radius: var(--cpd-space-1x);
+  background: var(--cpd-color-bg-subtle-primary);
+}
+
+/* The count of lit bars carries the level as well as their colour. */
+.segmentLit {
+  background: var(--cpd-color-bg-accent-rest);
+}
+
+.message {
+  color: var(--cpd-color-text-secondary);
+  /* A paragraph's margin would lift the text off centre. */
+  margin-block: 0;
+}
diff --git a/src/components/MicrophoneLevelMeter.stories.tsx b/src/components/MicrophoneLevelMeter.stories.tsx
new file mode 100644
index 00000000..933fa186
--- /dev/null
+++ b/src/components/MicrophoneLevelMeter.stories.tsx
@@ -0,0 +1,161 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, within } from "storybook/test";
+import { type JSX } from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  MicrophoneLevelMeter,
+  type MicrophoneLevelMeterProps,
+} from "./MicrophoneLevelMeter";
+import styles from "./MicrophoneLevelMeter.module.css";
+import { LEVEL_SCALE } from "../state/MicrophoneLevel";
+import { constant } from "../state/Behavior";
+
+/** Roughly the menu's width. It only decides how many bars fit. */
+const STORY_WIDTH = 256;
+
+const meta = {
+  component: MicrophoneLevelMeter,
+  decorators: [
+    (Story): JSX.Element => (
+      <div style={{ inlineSize: STORY_WIDTH }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    state: {
+      description:
+        "What the selected microphone can say about itself: a level, or a reason there is none.",
+    },
+  },
+} satisfies Meta<typeof MicrophoneLevelMeter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A quiet room: hiss below the noise floor lights nothing. */
+export const Silent: Story = {
+  args: { state: { type: "level", level$: constant(0) } },
+  play: async ({ canvasElement }) => {
+    await expect(litSegments(canvasElement)).toBe(0);
+  },
+};
+
+export const QuietSpeech: Story = {
+  args: { state: { type: "level", level$: constant(5) } },
+};
+
+export const NormalSpeech: Story = {
+  args: { state: { type: "level", level$: constant(12) } },
+  play: async ({ canvasElement }) => {
+    // A floor, not a count: the count follows from the design's bar and gap sizes.
+    await expect(
+      canvasElement.getElementsByClassName(styles.segment).length,
+    ).toBeGreaterThanOrEqual(15);
+  },
+};
+
+export const LoudSpeech: Story = {
+  args: { state: { type: "level", level$: constant(LEVEL_SCALE) } },
+};
+
+/** The three volumes differ in how many bars are lit, not only in colour. */
+export const VolumesAreDistinguishable: Story = {
+  args: { state: { type: "level", level$: constant(5) } },
+  play: async ({ canvasElement, mount }) => {
+    const lit: number[] = [];
+    for (const level of [5, 12, LEVEL_SCALE]) {
+      await mount(
+        <MicrophoneLevelMeter
+          state={{ type: "level", level$: constant(level) }}
+        />,
+      );
+      lit.push(litSegments(canvasElement));
+      await expect(within(canvasElement).getByRole("meter")).toHaveAttribute(
+        "aria-valuenow",
+        String(level),
+      );
+    }
+    await expect(new Set(lit).size).toBe(lit.length);
+    await expect(lit).toEqual([...lit].sort((a, b) => a - b));
+  },
+};
+
+/** Permission refused: a message with a next action, not a still meter. */
+export const PermissionDenied: Story = {
+  args: { state: { type: "permission-denied" } },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.queryByRole("meter")).toBeNull();
+    await expect(
+      canvas.getByText(/Microphone access is blocked/),
+    ).toBeVisible();
+  },
+};
+
+/** No input device, told apart from a refusal. */
+export const NoDevice: Story = {
+  args: { state: { type: "no-device" } },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.queryByRole("meter")).toBeNull();
+    await expect(canvas.getByText(/No microphone found/)).toBeVisible();
+
+    // The icon sits on the middle of the text, however many lines it runs to.
+    const middle = (element: Element): number => {
+      const box = element.getBoundingClientRect();
+      return box.top + box.height / 2;
+    };
+    const icon = canvasElement.getElementsByClassName(styles.icon)[0];
+    const words = canvasElement.getElementsByClassName(styles.message)[0];
+    await expect(Math.abs(middle(icon) - middle(words))).toBeLessThanOrEqual(1);
+  },
+};
+
+/** The same meter at two widths: the bars keep their size and only their count changes. */
+export const ShapeStaysTheSameAtAnyWidth: Story = {
+  args: { state: { type: "level", level$: constant(12) } },
+  play: async ({ mount, args }) => {
+    const narrow = await measureAt(mount, args, 180);
+    const wide = await measureAt(mount, args, 400);
+
+    await expect(narrow.bar).toBe(wide.bar);
+    await expect(narrow.gap).toBe(wide.gap);
+    await expect(narrow.count).toBeLessThan(wide.count);
+    // The bars are still separate, not one run of colour.
+    await expect(narrow.gap).toBeGreaterThan(0);
+  },
+};
+
+/** How many bars are lit. */
+function litSegments(canvasElement: HTMLElement): number {
+  return canvasElement.getElementsByClassName(styles.segmentLit).length;
+}
+
+/** Renders the meter at one width and reports its bars' shape. */
+async function measureAt(
+  mount: (ui: JSX.Element) => Promise<unknown>,
+  args: MicrophoneLevelMeterProps,
+  width: number,
+): Promise<{ count: number; bar: number; gap: number }> {
+  await mount(
+    <div style={{ inlineSize: width }}>
+      <MicrophoneLevelMeter {...args} />
+    </div>,
+  );
+  const bars = Array.from(document.body.getElementsByClassName(styles.segment));
+  const first = bars[0].getBoundingClientRect();
+  const second = bars[1].getBoundingClientRect();
+  return {
+    count: bars.length,
+    bar: first.width,
+    gap: second.left - first.right,
+  };
+}
diff --git a/src/components/MicrophoneLevelMeter.test.tsx b/src/components/MicrophoneLevelMeter.test.tsx
new file mode 100644
index 00000000..171f208c
--- /dev/null
+++ b/src/components/MicrophoneLevelMeter.test.tsx
@@ -0,0 +1,42 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, test } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+import { MicrophoneLevelMeter } from "./MicrophoneLevelMeter";
+import { LEVEL_SCALE } from "../state/MicrophoneLevel";
+import { constant } from "../state/Behavior";
+
+describe("MicrophoneLevelMeter", () => {
+  test("announces the level rather than relying on hue", () => {
+    render(
+      <MicrophoneLevelMeter state={{ type: "level", level$: constant(6) }} />,
+    );
+
+    const meter = screen.getByRole("meter", { name: "Microphone level" });
+    expect(meter).toHaveAttribute("aria-valuenow", "6");
+    expect(meter).toHaveAttribute("aria-valuemax", String(LEVEL_SCALE));
+    expect(meter).toHaveAttribute("aria-valuetext", `6 of ${LEVEL_SCALE}`);
+  });
+
+  test("shows distinct messages for denied permission and no input device", () => {
+    const denied = render(
+      <MicrophoneLevelMeter state={{ type: "permission-denied" }} />,
+    );
+    expect(
+      denied.getByText(/Microphone access is blocked/),
+    ).toBeInTheDocument();
+    expect(denied.queryByRole("meter")).toBeNull();
+
+    const missing = render(
+      <MicrophoneLevelMeter state={{ type: "no-device" }} />,
+    );
+    expect(missing.getByText(/No microphone found/)).toBeInTheDocument();
+    expect(missing.queryByRole("meter")).toBeNull();
+  });
+});
diff --git a/src/components/MicrophoneLevelMeter.tsx b/src/components/MicrophoneLevelMeter.tsx
new file mode 100644
index 00000000..6b21491a
--- /dev/null
+++ b/src/components/MicrophoneLevelMeter.tsx
@@ -0,0 +1,146 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type FC,
+  type Ref,
+} from "react";
+import { Text } from "@vector-im/compound-web";
+import { MicOnIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+
+import { distinctUntilChanged, map } from "rxjs";
+
+import styles from "./MicrophoneLevelMeter.module.css";
+import { LEVEL_SCALE, type MicrophoneState } from "../state/MicrophoneLevel";
+import { observeElementSize$ } from "../utils/elementSize";
+import { useMicrophoneLevel } from "./useMicrophoneLevel";
+
+export interface LiveMicrophoneLevelMeterProps {
+  /** The microphone to listen to. */
+  deviceId: string | undefined;
+  /** Whether to hold a capture at all. */
+  active: boolean;
+  className?: string;
+  ref?: Ref<HTMLDivElement>;
+}
+
+/**
+ * The meter, wired to a live capture. Its own component so a changing level
+ * re-renders the meter, not its parent.
+ */
+export const LiveMicrophoneLevelMeter: FC<LiveMicrophoneLevelMeterProps> = ({
+  deviceId,
+  active,
+  className,
+  ref,
+}) => {
+  const state = useMicrophoneLevel(deviceId, active);
+  return <MicrophoneLevelMeter state={state} className={className} ref={ref} />;
+};
+
+export interface MicrophoneLevelMeterProps {
+  state: MicrophoneState;
+  className?: string;
+  ref?: Ref<HTMLDivElement>;
+}
+
+/** The input level of a microphone, or why there is none. */
+export const MicrophoneLevelMeter: FC<MicrophoneLevelMeterProps> = ({
+  state,
+  className,
+  ref,
+}) => {
+  const { t } = useTranslation();
+  // Bars keep one size, so their count follows the width. Starts full so the
+  // first paint, and jsdom, draw a whole meter.
+  const [barCount, setBarCount] = useState(LEVEL_SCALE);
+  const segments = useRef<HTMLDivElement | null>(null);
+  const track = useCallback(
+    (element: HTMLDivElement | null): (() => void) | undefined => {
+      if (element === null) return;
+      segments.current = element;
+      const subscription = observeElementSize$(element)
+        .pipe(
+          map(({ width }) => barsThatFit(element, width)),
+          distinctUntilChanged(),
+        )
+        .subscribe(setBarCount);
+      return (): void => {
+        subscription.unsubscribe();
+        segments.current = null;
+      };
+    },
+    [],
+  );
+
+  // Drawn straight into the DOM: the level changes many times a second, and
+  // re-rendering for each change is what this avoids.
+  useLayoutEffect(() => {
+    const element = segments.current;
+    if (state.type !== "level" || element === null) return;
+    const subscription = state.level$.subscribe((level) => {
+      element.setAttribute("aria-valuenow", String(level));
+      element.setAttribute(
+        "aria-valuetext",
+        t("microphone_level.value", { level, max: LEVEL_SCALE }),
+      );
+      // The level is a share of the scale, not a bar count.
+      const lit = Math.round((level / LEVEL_SCALE) * barCount);
+      Array.from(element.children).forEach((bar, i) =>
+        bar.classList.toggle(styles.segmentLit, i < lit),
+      );
+    });
+    return (): void => subscription.unsubscribe();
+  }, [state, barCount, t]);
+
+  return (
+    <div ref={ref} className={classNames(styles.meter, className)}>
+      <MicOnIcon className={styles.icon} aria-hidden />
+      {state.type !== "level" ? (
+        <Text size="sm" className={styles.message}>
+          {state.type === "permission-denied"
+            ? t("microphone_level.permission_denied")
+            : t("microphone_level.no_device")}
+        </Text>
+      ) : (
+        <div
+          ref={track}
+          className={styles.segments}
+          role="meter"
+          aria-label={t("microphone_level.label")}
+          aria-valuemin={0}
+          aria-valuemax={LEVEL_SCALE}
+          // The first paint's value; the effect above keeps it current.
+          aria-valuenow={state.level$.value}
+          aria-valuetext={t("microphone_level.value", {
+            level: state.level$.value,
+            max: LEVEL_SCALE,
+          })}
+        >
+          {Array.from({ length: barCount }, (_, i) => (
+            <span key={i} aria-hidden className={styles.segment} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+/** How many bars fit across `width`, measured so the stylesheet alone sets their size. */
+function barsThatFit(track: HTMLElement, width: number): number {
+  const gap = Number.parseFloat(getComputedStyle(track).columnGap);
+  const bar = track.firstElementChild?.getBoundingClientRect().width ?? 0;
+  // No layout (jsdom): keep the full count.
+  if (!(bar > 0) || !(gap >= 0)) return LEVEL_SCALE;
+  return Math.max(1, Math.floor((width + gap) / (bar + gap)));
+}
diff --git a/src/components/useMicrophoneLevel.test.tsx b/src/components/useMicrophoneLevel.test.tsx
new file mode 100644
index 00000000..47b33b99
--- /dev/null
+++ b/src/components/useMicrophoneLevel.test.tsx
@@ -0,0 +1,41 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { afterEach, describe, expect, test } from "vitest";
+import { renderHook } from "@testing-library/react";
+
+import { useMicrophoneLevel } from "./useMicrophoneLevel";
+import { restoreAudioCapture, stubAudioCapture } from "../utils/test";
+
+// Capture and release are covered in MicrophoneLevel.test.ts; this covers the bridge.
+describe("useMicrophoneLevel", () => {
+  afterEach(restoreAudioCapture);
+
+  test("holds no capture while the meter is not shown", () => {
+    const capture = stubAudioCapture();
+
+    renderHook(() => useMicrophoneLevel("mic1", false));
+
+    expect(capture.getUserMedia).not.toHaveBeenCalled();
+  });
+
+  test("starts from nothing rather than the previous device's level", () => {
+    const capture = stubAudioCapture();
+
+    const { result, rerender } = renderHook(
+      ({ id }: { id: string }) => useMicrophoneLevel(id, true),
+      { initialProps: { id: "mic1" } },
+    );
+    capture.grant();
+
+    rerender({ id: "mic2" });
+
+    // No level carried over from the previous device.
+    const state = result.current;
+    expect(state.type === "level" ? state.level$.value : state.type).toBe(0);
+  });
+});
diff --git a/src/components/useMicrophoneLevel.ts b/src/components/useMicrophoneLevel.ts
new file mode 100644
index 00000000..a787a23d
--- /dev/null
+++ b/src/components/useMicrophoneLevel.ts
@@ -0,0 +1,34 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { useEffect, useState } from "react";
+
+import {
+  type MicrophoneState,
+  observeMicrophoneState$,
+} from "../state/MicrophoneLevel";
+import { constant } from "../state/Behavior";
+
+const IDLE: MicrophoneState = { type: "level", level$: constant(0) };
+
+/** The live level of a microphone, captured only while `active`. */
+export function useMicrophoneLevel(
+  deviceId: string | undefined,
+  active: boolean,
+): MicrophoneState {
+  const [state, setState] = useState<MicrophoneState>(IDLE);
+
+  useEffect(() => {
+    if (!active) return;
+    // Idle first, so a new device doesn't start from the previous level.
+    setState(IDLE);
+    const subscription = observeMicrophoneState$(deviceId).subscribe(setState);
+    return (): void => subscription.unsubscribe();
+  }, [deviceId, active]);
+
+  return state;
+}
diff --git a/src/room/LobbyView.test.tsx b/src/room/LobbyView.test.tsx
index 7f03f2d2..aedd9fdd 100644
--- a/src/room/LobbyView.test.tsx
+++ b/src/room/LobbyView.test.tsx
@@ -5,8 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { describe, expect, it, vi } from "vitest";
-import { render } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { of } from "rxjs";
 import { LeaveToHomeProvider } from "../LeaveToHomeContext";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { type MatrixClient } from "matrix-js-sdk";
@@ -18,7 +20,13 @@ import {
 
 import { LobbyView } from "./LobbyView";
 import { E2eeType } from "../e2ee/e2eeType";
-import { mockMediaDevices, mockMuteStates } from "../utils/test";
+import {
+  mockMediaDevices,
+  mockMuteStates,
+  restoreAudioCapture,
+  stubAudioCapture,
+} from "../utils/test";
+import { type MediaDevices } from "../state/MediaDevices";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { type ProcessorState } from "../livekit/TrackProcessorContext";
 import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
@@ -77,9 +85,10 @@ function renderLobbyView(
   props: Partial<Parameters<typeof LobbyView>[0]> = {},
   withAppBar = false,
   platform = "android",
+  devices: Partial<MediaDevices> = {},
 ): ReturnType<typeof render> {
   platformMock.mockReturnValue(platform);
-  const mediaDevices = mockMediaDevices({});
+  const mediaDevices = mockMediaDevices(devices);
   const muteStates = mockMuteStates();
   const hideHeader = withAppBar ? true : false;
   const lobbyView = (
@@ -178,3 +187,30 @@ describe("LobbyView", () => {
     expect(await axe(container)).toHaveNoViolations();
   });
 });
+
+describe("LobbyView microphone level", () => {
+  afterEach(restoreAudioCapture);
+
+  it("shows the microphone level meter", async () => {
+    const capture = stubAudioCapture();
+    capture.grant();
+    const user = userEvent.setup();
+    const { getByRole } = renderLobbyView({}, false, "desktop", {
+      requestDeviceNames: (): void => {},
+      audioInput: {
+        available$: of(
+          new Map([["mic1", { type: "name", name: "Microphone 1" }]]),
+        ),
+        selected$: of({ id: "mic1" }),
+        select: (): void => {},
+      },
+    } as unknown as Partial<MediaDevices>);
+
+    // Pre-join reaches the meter through the same chevron as a call.
+    await user.click(getByRole("button", { name: "Microphone" }));
+
+    expect(
+      await screen.findByRole("meter", { name: "Microphone level" }),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/state/MediaDevices.test.ts b/src/state/MediaDevices.test.ts
index f65b024e..69c23765 100644
--- a/src/state/MediaDevices.test.ts
+++ b/src/state/MediaDevices.test.ts
@@ -5,8 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { describe, expect, test, vi } from "vitest";
-import { of } from "rxjs";
+import { afterEach, describe, expect, test, vi } from "vitest";
 
 const getPlatform = vi.hoisted(() => vi.fn(() => "desktop"));
 vi.mock("../Platform", () => ({
@@ -15,9 +14,22 @@ vi.mock("../Platform", () => ({
   },
   isFirefox: (): boolean => false,
 }));
-vi.mock("@livekit/components-core", () => ({
-  createMediaDeviceObserver: () => of([]),
-}));
+const observers = vi.hoisted(
+  () => new Map<string, { next: (devices: unknown[]) => void }>(),
+);
+vi.mock("@livekit/components-core", async () => {
+  const { BehaviorSubject: Subject } = await import("rxjs");
+  return {
+    createMediaDeviceObserver: (kind: string) => {
+      let observer = observers.get(kind);
+      if (observer === undefined) {
+        observer = new Subject<unknown[]>([]);
+        observers.set(kind, observer);
+      }
+      return observer;
+    },
+  };
+});
 
 import { AudioOutput, MediaDevices } from "./MediaDevices";
 import { AndroidControlledAudioOutput } from "./AndroidControlledAudioOutput";
@@ -57,3 +69,125 @@ describe("MediaDevices audio output", () => {
     expect(devices.audioOutput).toBeInstanceOf(IOSControlledAudioOutput);
   });
 });
+
+function device(deviceId: string, label: string, groupId = deviceId): object {
+  return { deviceId, label, groupId, kind: "audioinput" };
+}
+
+/** Replaces the devices of one kind, as the browser reports them. */
+function setDevices(kind: string, devices: object[]): void {
+  const observer = observers.get(kind);
+  if (observer === undefined) throw new Error(`nothing observing ${kind}`);
+  observer.next(devices);
+}
+
+function newMediaDevices(): MediaDevices {
+  return new MediaDevices(new ObservableScope(), {
+    controlledAudioDevices: false,
+  });
+}
+
+describe("MediaDevices selection", () => {
+  afterEach(() => {
+    localStorage.clear();
+    for (const kind of observers.keys()) setDevices(kind, []);
+  });
+
+  test("persists the selected device across sessions", () => {
+    const devices = newMediaDevices();
+    setDevices("audioinput", [
+      device("mic1", "Microphone 1"),
+      device("mic2", "Microphone 2"),
+    ]);
+
+    devices.audioInput.select("mic2");
+
+    // A later call reads the same stored preference.
+    expect(newMediaDevices().audioInput.selected$.value?.id).toBe("mic2");
+  });
+
+  test("updates the available devices when hardware changes", () => {
+    const devices = newMediaDevices();
+    setDevices("audioinput", [device("mic1", "Microphone 1")]);
+    expect([...devices.audioInput.available$.value.keys()]).toEqual(["mic1"]);
+
+    setDevices("audioinput", [
+      device("mic1", "Microphone 1"),
+      device("mic2", "Headset"),
+    ]);
+    expect([...devices.audioInput.available$.value.keys()]).toEqual([
+      "mic1",
+      "mic2",
+    ]);
+
+    setDevices("audioinput", [device("mic1", "Microphone 1")]);
+    expect([...devices.audioInput.available$.value.keys()]).toEqual(["mic1"]);
+  });
+
+  test("falls back to the default device when the selected device disappears", () => {
+    const devices = newMediaDevices();
+    setDevices("audioinput", [
+      device("mic1", "Microphone 1"),
+      device("mic2", "Headset"),
+    ]);
+    devices.audioInput.select("mic2");
+    expect(devices.audioInput.selected$.value?.id).toBe("mic2");
+
+    setDevices("audioinput", [device("mic1", "Microphone 1")]);
+
+    expect(devices.audioInput.selected$.value?.id).toBe("mic1");
+  });
+
+  test("falls back when the remembered device is absent", () => {
+    const devices = newMediaDevices();
+    setDevices("audioinput", [device("mic1", "Microphone 1")]);
+    devices.audioInput.select("a-device-from-last-time");
+
+    expect(devices.audioInput.selected$.value?.id).toBe("mic1");
+  });
+
+  test("falls back to numbered labels when labels are unavailable", () => {
+    const devices = newMediaDevices();
+    // Names are withheld until permission is granted.
+    setDevices("audioinput", [device("mic1", ""), device("mic2", "")]);
+
+    expect([...devices.audioInput.available$.value.values()]).toEqual([
+      { type: "number", number: 1 },
+      { type: "number", number: 2 },
+    ]);
+  });
+
+  test("lists Default as a distinct entry", () => {
+    const devices = newMediaDevices();
+    setDevices("audiooutput", [device("spk1", "Speakers")]);
+
+    const available = devices.audioOutput.available$.value;
+    // Default is its own entry, unnamed: which device it resolves to isn't knowable.
+    expect(available.get("spk1")).toEqual({ type: "name", name: "Speakers" });
+    expect(available.get("")).toEqual({ type: "default", name: null });
+  });
+
+  test("selecting one device kind leaves the others unchanged", () => {
+    const devices = newMediaDevices();
+    setDevices("audioinput", [
+      device("mic1", "Microphone 1"),
+      device("mic2", "Headset"),
+    ]);
+    setDevices("audiooutput", [
+      device("spk1", "Speakers"),
+      device("spk2", "Headset"),
+    ]);
+    setDevices("videoinput", [device("cam1", "Camera 1")]);
+
+    devices.audioOutput.select("spk2");
+    const audioInputBefore = devices.audioInput.selected$.value?.id;
+    const videoInputBefore = devices.videoInput.selected$.value?.id;
+
+    devices.audioInput.select("mic2");
+
+    expect(devices.audioOutput.selected$.value?.id).toBe("spk2");
+    expect(devices.videoInput.selected$.value?.id).toBe(videoInputBefore);
+    expect(audioInputBefore).not.toBe("mic2");
+    expect(devices.audioInput.selected$.value?.id).toBe("mic2");
+  });
+});
diff --git a/src/state/MicrophoneLevel.test.ts b/src/state/MicrophoneLevel.test.ts
new file mode 100644
index 00000000..e8f68484
--- /dev/null
+++ b/src/state/MicrophoneLevel.test.ts
@@ -0,0 +1,183 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { afterEach, describe, expect, test, vi } from "vitest";
+
+import {
+  ATTACK_MS,
+  LEVEL_SCALE,
+  observeMicrophoneState$,
+  RELEASE_MS,
+  segmentsForVolume,
+  smoothVolume,
+} from "./MicrophoneLevel";
+import { restoreAudioCapture, stubAudioCapture } from "../utils/test";
+
+describe("segmentsForVolume", () => {
+  test("shows nothing for silence", () => {
+    expect(segmentsForVolume(0)).toBe(0);
+  });
+
+  test("shows nothing for the hiss of a quiet room", () => {
+    expect(segmentsForVolume(0.005)).toBe(0);
+    expect(segmentsForVolume(0.015)).toBe(0);
+  });
+
+  test("distinguishes quiet, normal and loud speech", () => {
+    const quiet = segmentsForVolume(0.06);
+    const normal = segmentsForVolume(0.2);
+    const loud = segmentsForVolume(0.8);
+
+    expect(quiet).toBeGreaterThan(0);
+    expect(normal).toBeGreaterThan(quiet);
+    expect(loud).toBeGreaterThan(normal);
+  });
+
+  test("moves the meter visibly for normal speech", () => {
+    // Ordinary speech reaches the middle of the meter.
+    expect(segmentsForVolume(0.2)).toBeGreaterThanOrEqual(LEVEL_SCALE / 4);
+  });
+
+  test("never exceeds the meter", () => {
+    expect(segmentsForVolume(1)).toBe(LEVEL_SCALE);
+    expect(segmentsForVolume(4)).toBe(LEVEL_SCALE);
+  });
+
+  test("treats a missing reading as silence", () => {
+    expect(segmentsForVolume(NaN)).toBe(0);
+    expect(segmentsForVolume(-1)).toBe(0);
+  });
+});
+
+describe("smoothVolume", () => {
+  test("rises faster than it falls", () => {
+    const rise = smoothVolume(0, 1, 50);
+    const fall = 1 - smoothVolume(1, 0, 50);
+
+    expect(rise).toBeGreaterThan(fall);
+  });
+
+  test("registers a syllable as it starts", () => {
+    // Most of the way within one attack time constant.
+    expect(smoothVolume(0, 1, ATTACK_MS)).toBeGreaterThan(0.6);
+  });
+
+  test("rides over the gaps between words", () => {
+    // A short pause doesn't collapse the meter...
+    expect(smoothVolume(1, 0, 30)).toBeGreaterThan(0.7);
+    // ...but a real silence brings it down.
+    expect(smoothVolume(1, 0, RELEASE_MS * 3)).toBeLessThan(0.1);
+  });
+
+  test("behaves the same whatever the frame rate", () => {
+    const oneStep = smoothVolume(0, 1, 32);
+    let twoSteps = smoothVolume(0, 1, 16);
+    twoSteps = smoothVolume(twoSteps, 1, 16);
+
+    expect(twoSteps).toBeCloseTo(oneStep, 5);
+  });
+
+  test("holds still when no time has passed", () => {
+    expect(smoothVolume(0.5, 1, 0)).toBe(0.5);
+  });
+});
+
+describe("observeMicrophoneState$", () => {
+  afterEach(restoreAudioCapture);
+
+  test("releases a capture the browser grants after nobody is watching", async () => {
+    const capture = stubAudioCapture();
+
+    const subscription = observeMicrophoneState$("mic1").subscribe();
+    // The menu closes before the browser hands the microphone over.
+    subscription.unsubscribe();
+    capture.grant();
+    await vi.waitFor(() => expect(capture.track.stop).toHaveBeenCalled());
+  });
+
+  test("releases the capture and the audio context when the subscription ends", async () => {
+    const capture = stubAudioCapture();
+
+    const subscription = observeMicrophoneState$("mic1").subscribe();
+    capture.grant();
+    await vi.waitFor(() => expect(capture.contexts).toHaveLength(1));
+
+    subscription.unsubscribe();
+
+    expect(capture.track.stop).toHaveBeenCalled();
+    expect(capture.contexts[0].close).toHaveBeenCalled();
+  });
+
+  test("gives the microphone back when the audio graph fails to build", async () => {
+    const capture = stubAudioCapture();
+    // Fails only after getUserMedia has granted the device.
+    vi.stubGlobal(
+      "AudioContext",
+      class {
+        public constructor() {
+          throw new Error("no audio context for you");
+        }
+      },
+    );
+
+    const seen: string[] = [];
+    const subscription = observeMicrophoneState$("mic1").subscribe((state) =>
+      seen.push(state.type),
+    );
+    capture.grant();
+
+    await vi.waitFor(() => expect(seen).toContain("no-device"));
+    expect(capture.track.stop).toHaveBeenCalled();
+
+    subscription.unsubscribe();
+  });
+
+  test("tells denied permission and a missing device apart", async () => {
+    for (const [name, expected] of [
+      ["NotAllowedError", "permission-denied"],
+      ["NotFoundError", "no-device"],
+    ] as const) {
+      const capture = stubAudioCapture();
+      capture.getUserMedia.mockRejectedValue(named(new Error(name), name));
+
+      const seen: string[] = [];
+      const subscription = observeMicrophoneState$("mic1").subscribe((state) =>
+        seen.push(state.type),
+      );
+      await vi.waitFor(() => expect(seen).toContain(expected));
+      subscription.unsubscribe();
+      restoreAudioCapture();
+    }
+  });
+
+  test("says nothing on a frame that did not change the level", async () => {
+    const capture = stubAudioCapture();
+
+    const states: string[] = [];
+    let levels = 0;
+    const subscription = observeMicrophoneState$("mic1").subscribe((state) => {
+      states.push(state.type);
+      if (state.type === "level") state.level$.subscribe(() => levels++);
+    });
+    capture.grant();
+    await vi.waitFor(() => expect(levels).toBe(1));
+
+    // Read every frame, but a steady signal emits once, and the state itself
+    // arrives only once.
+    capture.drawFrames(20);
+    expect(levels).toBe(1);
+    expect(states).toEqual(["level"]);
+
+    subscription.unsubscribe();
+  });
+});
+
+/** An error carrying the browser's `name`. */
+function named(error: Error, name: string): Error {
+  error.name = name;
+  return error;
+}
diff --git a/src/state/MicrophoneLevel.ts b/src/state/MicrophoneLevel.ts
new file mode 100644
index 00000000..390f2b3f
--- /dev/null
+++ b/src/state/MicrophoneLevel.ts
@@ -0,0 +1,143 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { BehaviorSubject, Observable } from "rxjs";
+import { logger } from "matrix-js-sdk/lib/logger";
+
+import { type Behavior } from "./Behavior";
+
+/** What the microphone picks up, or why it can't be read. */
+export type MicrophoneState =
+  // A Behavior, so a changing level can be drawn without re-rendering.
+  | { type: "level"; level$: Behavior<number> }
+  | { type: "permission-denied" }
+  | { type: "no-device" };
+
+/** Scale a level is reported on. Fixed rather than the bar count, so a level reads the same at any width. */
+export const LEVEL_SCALE = 24;
+
+/**
+ * The level of a microphone, captured while subscribed. Its own capture rather
+ * than the call's track, because pre-join freezes that track to the device
+ * selected at mount.
+ */
+export function observeMicrophoneState$(
+  deviceId: string | undefined,
+): Observable<MicrophoneState> {
+  return new Observable<MicrophoneState>((subscriber) => {
+    let stream: MediaStream | undefined;
+    let context: AudioContext | undefined;
+    let frame: number | undefined;
+    let level: BehaviorSubject<number> | undefined;
+
+    // Idempotent: teardown and start can both call it.
+    const release = (): void => {
+      if (frame !== undefined) cancelAnimationFrame(frame);
+      stream?.getTracks().forEach((track) => track.stop());
+      void context?.close();
+      frame = undefined;
+      stream = undefined;
+      context = undefined;
+      level?.complete();
+      level = undefined;
+    };
+
+    const start = async (): Promise<void> => {
+      stream = await navigator.mediaDevices.getUserMedia({
+        audio:
+          deviceId === undefined ? true : { deviceId: { exact: deviceId } },
+      });
+      // Unsubscribed while the permission prompt was open.
+      if (subscriber.closed) return release();
+
+      context = new AudioContext();
+      // Starts suspended outside a user gesture, which would read as silence.
+      if (context.state === "suspended") await context.resume();
+      if (subscriber.closed) return release();
+
+      const analyser = context.createAnalyser();
+      analyser.fftSize = 1024;
+      context.createMediaStreamSource(stream).connect(analyser);
+      const samples = new Uint8Array(analyser.fftSize);
+      let displayed = 0;
+      let previousFrame = performance.now();
+      const current = new BehaviorSubject(0);
+      level = current;
+      subscriber.next({ type: "level", level$: current });
+
+      const read = (): void => {
+        analyser.getByteTimeDomainData(samples);
+        // RMS: perceived loudness rather than the peak.
+        let sum = 0;
+        for (const sample of samples) {
+          const centred = (sample - 128) / 128;
+          sum += centred * centred;
+        }
+        const now = performance.now();
+        displayed = smoothVolume(
+          displayed,
+          Math.sqrt(sum / samples.length),
+          now - previousFrame,
+        );
+        previousFrame = now;
+        // Frames that don't move the quantised level say nothing.
+        const next = segmentsForVolume(displayed);
+        if (next !== current.value) current.next(next);
+        frame = requestAnimationFrame(read);
+      };
+      read();
+    };
+
+    start().catch((e: unknown) => {
+      // Building the graph can fail after the device was granted.
+      release();
+      subscriber.next(stateForFailure(e));
+    });
+
+    return release;
+  });
+}
+
+/** What a failure to open the microphone means for the person using it. */
+function stateForFailure(e: unknown): MicrophoneState {
+  const name = e instanceof Error ? e.name : "";
+  if (name === "NotAllowedError" || name === "SecurityError")
+    return { type: "permission-denied" };
+  if (name === "NotFoundError" || name === "OverconstrainedError")
+    return { type: "no-device" };
+  logger.error("Could not read the microphone level", e);
+  return { type: "no-device" };
+}
+
+/** Below this counts as silence, so a quiet room's hiss doesn't light the first bars. */
+const NOISE_FLOOR = 0.02;
+
+/** Quantises a 0..1 volume onto {@link LEVEL_SCALE}. */
+export function segmentsForVolume(volume: number): number {
+  if (!Number.isFinite(volume) || volume <= NOISE_FLOOR) return 0;
+  // Square root, so ordinary speech reaches the middle of the scale.
+  const aboveFloor = (Math.min(volume, 1) - NOISE_FLOOR) / (1 - NOISE_FLOOR);
+  return Math.min(LEVEL_SCALE, Math.ceil(Math.sqrt(aboveFloor) * LEVEL_SCALE));
+}
+
+/** Rise time constant: short, so a syllable registers as it starts. */
+export const ATTACK_MS = 50;
+
+/** Fall time constant: longer, so the gaps between words don't flicker. */
+export const RELEASE_MS = 120;
+
+/** Eases towards a reading, by elapsed time so the frame rate doesn't matter. */
+export function smoothVolume(
+  displayed: number,
+  reading: number,
+  elapsedMs: number,
+): number {
+  if (elapsedMs <= 0) return displayed;
+  const timeConstant = reading > displayed ? ATTACK_MS : RELEASE_MS;
+  const towards = 1 - Math.exp(-elapsedMs / timeConstant);
+  return displayed + (reading - displayed) * towards;
+}
diff --git a/src/utils/test.ts b/src/utils/test.ts
index 49ae0a3f..405e5947 100644
--- a/src/utils/test.ts
+++ b/src/utils/test.ts
@@ -8,6 +8,7 @@ import { map, type Observable, of, type SchedulerLike } from "rxjs";
 import { type RunHelpers, TestScheduler } from "rxjs/testing";
 import {
   expect,
+  type Mock,
   type MockedObject,
   type MockInstance,
   onTestFinished,
@@ -590,3 +591,98 @@ export class MockConnection extends Connection {
   public async start(): Promise<void> {}
   public async stop(): Promise<void> {}
 }
+
+export interface StubbedCapture {
+  getUserMedia: Mock;
+  /** Grants the microphone, as the browser does once permission is given. */
+  grant: () => void;
+  track: { stop: Mock };
+  contexts: { close: Mock }[];
+  /** Runs the pending animation frames, in order. */
+  drawFrames: (count: number) => void;
+  /** Sets the microphone's loudness from the next frame, 0 to 1. */
+  speak: (amplitude: number) => void;
+}
+
+/**
+ * Stubs the capture and Web Audio APIs, with the grant and the animation
+ * frames driven by the test. Undo with {@link restoreAudioCapture}.
+ */
+export function stubAudioCapture(): StubbedCapture {
+  const track = { stop: vi.fn() };
+  const contexts: { close: Mock }[] = [];
+  let grant = (): void => {};
+  const granted = new Promise<MediaStream>((resolve) => {
+    grant = (): void =>
+      resolve({ getTracks: () => [track] } as unknown as MediaStream);
+  });
+
+  const frames: FrameRequestCallback[] = [];
+  let amplitude = 0;
+  vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) => {
+    frames.push(callback);
+    return frames.length;
+  });
+  vi.stubGlobal("cancelAnimationFrame", vi.fn());
+  vi.stubGlobal(
+    "AudioContext",
+    class {
+      public readonly state = "running";
+      public readonly close = vi.fn();
+      public constructor() {
+        contexts.push(this);
+      }
+      public createAnalyser(): object {
+        return {
+          fftSize: 1024,
+          getByteTimeDomainData: (samples: Uint8Array): void => {
+            // Silence is the midpoint of the range; a zeroed buffer reads as full scale.
+            if (amplitude <= 0) {
+              samples.fill(128);
+              return;
+            }
+            const peak = Math.round(Math.min(1, amplitude) * 127);
+            for (let i = 0; i < samples.length; i++)
+              samples[i] = 128 + (i % 2 ? peak : -peak);
+          },
+        };
+      }
+      public createMediaStreamSource(): object {
+        return { connect: (): void => {} };
+      }
+    },
+  );
+  // Only this property: replacing navigator loses getters like userAgent.
+  Object.defineProperty(navigator, "mediaDevices", {
+    configurable: true,
+    value: { getUserMedia: vi.fn().mockReturnValue(granted) },
+  });
+
+  return {
+    getUserMedia: navigator.mediaDevices.getUserMedia as unknown as Mock,
+    grant: () => grant(),
+    track,
+    contexts,
+    drawFrames: (count): void => {
+      for (let i = 0; i < count; i++) frames.shift()?.(i);
+    },
+    speak: (next): void => {
+      amplitude = next;
+    },
+  };
+}
+
+const realMediaDevices = Object.getOwnPropertyDescriptor(
+  navigator,
+  "mediaDevices",
+);
+
+/** Undoes {@link stubAudioCapture}. */
+export function restoreAudioCapture(): void {
+  vi.unstubAllGlobals();
+  if (realMediaDevices === undefined) {
+    Reflect.deleteProperty(navigator, "mediaDevices");
+  } else {
+    Object.defineProperty(navigator, "mediaDevices", realMediaDevices);
+  }
+}

From 5c497cc6a86325dd5199fe875293d7e881a7f476 Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Fri, 25 Sep 2026 16:15:39 +0200
Subject: [PATCH 119/154] Fix build on Windows

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 90e5e039..46532e26 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "dev:embedded": "vite --config vite-embedded.config.js",
     "dev:component": "vite --config vite-component-dev.config.ts",
     "build": "pnpm build:full",
-    "build:full": "NODE_OPTIONS=--max-old-space-size=16384 vite build",
+    "build:full": "node --max-old-space-size=16384 node_modules/vite/bin/vite.js build",
     "build:full:production": "pnpm build:full",
     "build:full:development": "pnpm build:full --mode development",
     "build:embedded": "pnpm build:full --config vite-embedded.config.js",

From 7d92ddf0c9efa228eaca0449243a927f1ed19700 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Sat, 26 Sep 2026 02:21:38 +0000
Subject: [PATCH 120/154] Update ghcr.io/element-hq/element-web:develop Docker
 digest to d97061c (#4294)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 docker-compose-playwright.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index 3ce45049..7911a6ad 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -19,7 +19,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:0636bbe4bfaeb32d96285a215ddbc81745c90f073c1c53f749f5ed250324a7af
+    image: ghcr.io/element-hq/element-web:develop@sha256:d97061c8cd81a3720f7591b54ebbc2bcfc4563af9cb679de61ad6d9e9bfed182
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:0636bbe4bfaeb32d96285a215ddbc81745c90f073c1c53f749f5ed250324a7af
+    image: ghcr.io/element-hq/element-web:develop@sha256:d97061c8cd81a3720f7591b54ebbc2bcfc4563af9cb679de61ad6d9e9bfed182

From 8c44ecd61bcd82473990b20addbcccf4a2f1492f Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Sun, 27 Sep 2026 01:25:15 +0000
Subject: [PATCH 121/154] Update ghcr.io/element-hq/element-web:develop Docker
 digest to 8301993 (#4295)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 docker-compose-playwright.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index 7911a6ad..1e312f49 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -19,7 +19,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:d97061c8cd81a3720f7591b54ebbc2bcfc4563af9cb679de61ad6d9e9bfed182
+    image: ghcr.io/element-hq/element-web:develop@sha256:830199320f20d057211420a28f3bf62d79f6ae7f8980d85bd7391e19ac3b3ba3
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:d97061c8cd81a3720f7591b54ebbc2bcfc4563af9cb679de61ad6d9e9bfed182
+    image: ghcr.io/element-hq/element-web:develop@sha256:830199320f20d057211420a28f3bf62d79f6ae7f8980d85bd7391e19ac3b3ba3

From 7b1f3f28ed36a12144ea528bea3d84ffbe848c55 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 28 Sep 2026 01:03:27 +0000
Subject: [PATCH 122/154] Update dependency @vector-im/compound-web to v10.1.0

---
 pnpm-lock.yaml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5e98099a..12a3e836 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -135,7 +135,7 @@ importers:
         version: 11.0.0(@types/react@19.2.18)(react@19.2.8)
       '@vector-im/compound-web':
         specifier: ^10.0.0
-        version: 10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        version: 10.1.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@vitejs/plugin-react':
         specifier: ^6.0.2
         version: 6.1.1(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.2.7)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
@@ -3246,8 +3246,8 @@ packages:
       react:
         optional: true
 
-  '@vector-im/compound-web@10.0.1':
-    resolution: {integrity: sha512-CT3aGMalPSf53o3JUbBF7EA10Rfp+auftIuBwOUSna+hfZ/zPxGLTFcuCuOJ7L8hrzijM+V4I8L0PUkfyOczpg==}
+  '@vector-im/compound-web@10.1.0':
+    resolution: {integrity: sha512-Lhw9Q+RZo1GtDYjF5PXWTD0zdfbrz/vnSVBYFHC8Hq+YeDule2QfGbTRo8IVHeV7jK6ZzsLc8zb6553eeIRLYg==}
     peerDependencies:
       '@fontsource/inconsolata': ^5
       '@fontsource/inter': ^5
@@ -8700,7 +8700,7 @@ snapshots:
       '@types/react': 19.2.18
       react: 19.2.8
 
-  '@vector-im/compound-web@10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@vector-im/compound-web@10.1.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@floating-ui/react': 0.27.20(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)

From ee0d7dc0cb75a8c65c23a351223b6212e7b83f2d Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 28 Sep 2026 01:14:27 +0000
Subject: [PATCH 123/154] Update ghcr.io/element-hq/element-web:develop Docker
 digest to cfbe7ce (#4296)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 docker-compose-playwright.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index 1e312f49..74059371 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -19,7 +19,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:830199320f20d057211420a28f3bf62d79f6ae7f8980d85bd7391e19ac3b3ba3
+    image: ghcr.io/element-hq/element-web:develop@sha256:cfbe7ceb346918257ef07cb25f7b9b03ec0575ecb5ce51dfeeef873e67c60c95
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:830199320f20d057211420a28f3bf62d79f6ae7f8980d85bd7391e19ac3b3ba3
+    image: ghcr.io/element-hq/element-web:develop@sha256:cfbe7ceb346918257ef07cb25f7b9b03ec0575ecb5ce51dfeeef873e67c60c95

From 3f63a6fc3c52506e21eccc2e38af8e2b85c6d175 Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Mon, 28 Sep 2026 16:37:47 +0200
Subject: [PATCH 124/154] Drop observable-hooks in favor of useBehavior

With this change, views now read every reactive value through `useBehavior`, as
`architecture.md` already prescribes. Where a view reads a plain stream, the view
model now exposes a `Behavior`.
---
 package.json                           |   1 -
 pnpm-lock.yaml                         |  16 ---
 src/MediaDevicesContext.ts             |   4 +-
 src/grid/CallLayout.test.tsx           | 187 +++++++++++++++++++++++++
 src/grid/CallLayout.ts                 |   4 +-
 src/grid/GridLayout.tsx                |  30 ++--
 src/grid/OneOnOneDesktopLayout.tsx     |   3 +-
 src/grid/SpotlightLandscapeLayout.tsx  |   5 +-
 src/grid/SpotlightPortraitLayout.tsx   |   3 +-
 src/livekit/TrackProcessorContext.tsx  |  18 +--
 src/room/InCallView.tsx                |  20 ++-
 src/room/LobbyView.tsx                 |   5 +-
 src/settings/DeviceSelection.test.tsx  |  82 +++++++++++
 src/settings/DeviceSelection.tsx       |   6 +-
 src/state/media/MediaViewModel.test.ts |  41 ++++++
 src/state/media/UserMediaViewModel.ts  |  41 +++---
 src/tile/GridTile.tsx                  |   9 +-
 src/tile/SpotlightTile.tsx             |  11 +-
 src/useAudioContext.tsx                |   4 +-
 src/useBehavior.test.tsx               |  23 +++
 src/useValueBehavior.test.tsx          |  34 +++++
 src/useValueBehavior.ts                |  25 ++++
 22 files changed, 459 insertions(+), 113 deletions(-)
 create mode 100644 src/grid/CallLayout.test.tsx
 create mode 100644 src/settings/DeviceSelection.test.tsx
 create mode 100644 src/useBehavior.test.tsx
 create mode 100644 src/useValueBehavior.test.tsx
 create mode 100644 src/useValueBehavior.ts

diff --git a/package.json b/package.json
index eed70792..5e9137b8 100644
--- a/package.json
+++ b/package.json
@@ -107,7 +107,6 @@
     "matrix-widget-api": "^1.18.0",
     "node-stdlib-browser": "^1.3.1",
     "normalize.css": "^8.0.1",
-    "observable-hooks": "^4.2.3",
     "oxfmt": "^0.66.0",
     "oxlint": "^1.70.0",
     "oxlint-tsgolint": "^0.25.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 12a3e836..be07cd29 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -202,9 +202,6 @@ importers:
       normalize.css:
         specifier: ^8.0.1
         version: 8.0.1
-      observable-hooks:
-        specifier: ^4.2.3
-        version: 4.2.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(rxjs@7.8.2)
       oxfmt:
         specifier: ^0.66.0
         version: 0.66.0
@@ -4816,13 +4813,6 @@ packages:
     resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
     engines: {node: '>= 0.4'}
 
-  observable-hooks@4.2.4:
-    resolution: {integrity: sha512-FdTQgyw1h5bG/QHCBIqctdBSnv9VARJCEilgpV6L2qlw1yeLqFIwPm4U15dMtl5kDmNN0hSt+Nl6iYbLFwEcQA==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-      rxjs: '>=6.0.0'
-
   obug@2.1.4:
     resolution: {integrity: sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==}
     engines: {node: '>=12.20.0'}
@@ -10410,12 +10400,6 @@ snapshots:
       has-symbols: 1.1.0
       object-keys: 1.1.1
 
-  observable-hooks@4.2.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(rxjs@7.8.2):
-    dependencies:
-      react: 19.2.8
-      react-dom: 19.2.8(react@19.2.8)
-      rxjs: 7.8.2
-
   obug@2.1.4: {}
 
   once@1.4.0:
diff --git a/src/MediaDevicesContext.ts b/src/MediaDevicesContext.ts
index 801219b0..50de5bc9 100644
--- a/src/MediaDevicesContext.ts
+++ b/src/MediaDevicesContext.ts
@@ -6,9 +6,9 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { createContext, use, useMemo } from "react";
-import { useObservableEagerState } from "observable-hooks";
 
 import { type MediaDevices } from "./state/MediaDevices";
+import { useBehavior } from "./useBehavior";
 
 export const MediaDevicesContext = createContext<MediaDevices | undefined>(
   undefined,
@@ -35,7 +35,7 @@ export const useEarpieceAudioConfig = (): {
   volume: number;
 } => {
   const devices = useMediaDevices();
-  const audioOutput = useObservableEagerState(devices.audioOutput.selected$);
+  const audioOutput = useBehavior(devices.audioOutput.selected$);
   const isVirtualEarpiece = audioOutput?.virtualEarpiece ?? false;
   return {
     // We use only the right speaker (pan = 1) for the earpiece.
diff --git a/src/grid/CallLayout.test.tsx b/src/grid/CallLayout.test.tsx
new file mode 100644
index 00000000..59e05d32
--- /dev/null
+++ b/src/grid/CallLayout.test.tsx
@@ -0,0 +1,187 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { act, render, screen } from "@testing-library/react";
+import { BehaviorSubject } from "rxjs";
+import { describe, expect, it, vi } from "vitest";
+
+import { arrangeTiles, type Bounds } from "./CallLayout";
+import { makeGridLayout } from "./GridLayout";
+import { makeSpotlightLandscapeLayout } from "./SpotlightLandscapeLayout";
+import { makeSpotlightPortraitLayout } from "./SpotlightPortraitLayout";
+import { type DragCallback, type LayoutProps } from "./Grid";
+import { constant } from "../state/Behavior";
+import {
+  type Alignment,
+  type GridLayout,
+  type SpotlightLandscapeLayout,
+  type SpotlightPortraitLayout,
+} from "../state/layout-types";
+import { type UserMediaViewModel } from "../state/media/UserMediaViewModel";
+import {
+  GridTileViewModel,
+  SpotlightTileViewModel,
+  type TileViewModel,
+} from "../state/TileViewModel";
+
+// Grid supplies these hooks to the layouts it renders; on their own the
+// layouts have no grid to report to
+vi.mock("./Grid", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  useUpdateLayout: (): void => {},
+  useVisibleTiles: (): void => {},
+}));
+
+describe("grid layout", () => {
+  it("sizes the tiles from the minimum bounds", () => {
+    const minBounds$ = new BehaviorSubject<Bounds>({ width: 800, height: 600 });
+    const { scrolling: Scrolling } = makeGridLayout({ minBounds$ });
+    render(<Scrolling model={gridModel()} Slot={Slot} />);
+    const layer = screen.getByTestId("slot-0").parentElement!;
+    expect(layer.style.width).toBe("800px");
+    expect(layer.style.getPropertyValue("--width")).toBe(
+      `${Math.floor(arrangeTiles(800, 600, 3).tileWidth)}px`,
+    );
+
+    act(() => minBounds$.next({ width: 400, height: 300 }));
+    expect(layer.style.width).toBe("400px");
+    expect(layer.style.getPropertyValue("--width")).toBe(
+      `${Math.floor(arrangeTiles(400, 300, 3).tileWidth)}px`,
+    );
+  });
+
+  it("moves the spotlight only when a drag reaches another corner", () => {
+    const model = gridModel();
+    const { fixed: Fixed } = makeGridLayout({ minBounds$: bounds });
+    render(<Fixed model={model} Slot={Slot} />);
+    const alignments: Alignment[] = [];
+    model.spotlightAlignment$.subscribe((a) => alignments.push(a));
+    const drag = drags.get("spotlight")!;
+
+    // Still in the bottom right corner
+    act(() => drag({ x: 0, y: 0, xRatio: 0.9, yRatio: 0.9 }));
+    // Over to the bottom left
+    act(() => drag({ x: 0, y: 0, xRatio: 0.1, yRatio: 0.9 }));
+    // And a little further, still bottom left
+    act(() => drag({ x: 0, y: 0, xRatio: 0.2, yRatio: 0.8 }));
+    // Up to the top left
+    act(() => drag({ x: 0, y: 0, xRatio: 0.2, yRatio: 0.1 }));
+
+    expect(alignments).toEqual([
+      { inline: "end", block: "end" },
+      { inline: "start", block: "end" },
+      { inline: "start", block: "start" },
+    ]);
+    const slot = screen.getByTestId("slot-spotlight");
+    expect(slot.getAttribute("data-inline-alignment")).toBe("start");
+    expect(slot.getAttribute("data-block-alignment")).toBe("start");
+  });
+});
+
+describe("spotlight landscape layout", () => {
+  it("puts the spotlight in the fixed layer and the grid in the scrolling one", () => {
+    const { fixed: Fixed, scrolling: Scrolling } = makeSpotlightLandscapeLayout(
+      { minBounds$: bounds },
+    );
+    const model = landscapeModel();
+    const { unmount } = render(<Fixed model={model} Slot={Slot} />);
+    expect(screen.getByTestId("slot-spotlight")).toBeInTheDocument();
+    unmount();
+
+    render(<Scrolling model={model} Slot={Slot} />);
+    expect(slotIds()).toEqual(model.grid.map((tile) => tile.id));
+  });
+});
+
+describe("spotlight portrait layout", () => {
+  it("sizes the grid tiles from the minimum width", () => {
+    const minBounds$ = new BehaviorSubject<Bounds>({ width: 300, height: 700 });
+    const { scrolling: Scrolling } = makeSpotlightPortraitLayout({
+      minBounds$,
+    });
+    const model = portraitModel();
+    render(<Scrolling model={model} Slot={Slot} />);
+    expect(slotIds()).toEqual(model.grid.map((tile) => tile.id));
+    const layer = screen.getByTestId(`slot-${model.grid[0].id}`).parentElement!
+      .parentElement!;
+    expect(layer.style.getPropertyValue("--grid-tile-width")).toBe(
+      `${Math.floor(arrangeTiles(300, 300, 3).tileWidth)}px`,
+    );
+
+    act(() => minBounds$.next({ width: 500, height: 700 }));
+    expect(layer.style.getPropertyValue("--grid-tile-width")).toBe(
+      `${Math.floor(arrangeTiles(500, 500, 3).tileWidth)}px`,
+    );
+  });
+});
+
+const bounds = constant<Bounds>({ width: 800, height: 600 });
+
+// The layouts only pass tile view models through to their slots
+const media = {} as UserMediaViewModel;
+const spotlight = new SpotlightTileViewModel(
+  constant([]),
+  constant(false),
+  constant("solid"),
+);
+const tiles = (): GridTileViewModel[] =>
+  Array.from({ length: 3 }, () => new GridTileViewModel(constant(media)));
+
+function gridModel(): GridLayout {
+  return {
+    type: "grid",
+    spotlight,
+    grid: tiles(),
+    spotlightAlignment$: new BehaviorSubject<Alignment>({
+      inline: "end",
+      block: "end",
+    }),
+    setVisibleTiles: () => {},
+  };
+}
+
+function landscapeModel(): SpotlightLandscapeLayout {
+  return {
+    type: "spotlight-landscape",
+    spotlight,
+    grid: tiles(),
+    setVisibleTiles: () => {},
+  };
+}
+
+function portraitModel(): SpotlightPortraitLayout {
+  return {
+    type: "spotlight-portrait",
+    spotlight,
+    grid: tiles(),
+    setVisibleTiles: () => {},
+  };
+}
+
+// Slots record their drag callback so a test can drag them, and show the id
+// of the tile they hold
+const drags = new Map<string, DragCallback | undefined>();
+const Slot: LayoutProps<unknown, TileViewModel, HTMLDivElement>["Slot"] = ({
+  id,
+  model,
+  onDrag,
+  ...props
+}) => {
+  drags.set(id, onDrag);
+  return (
+    <div data-testid={`slot-${id}`} {...props}>
+      {model instanceof GridTileViewModel ? model.id : "spotlight"}
+    </div>
+  );
+};
+
+function slotIds(): string[] {
+  return screen
+    .getAllByTestId(/^slot-/)
+    .map((slot) => slot.textContent ?? "")
+    .filter((id) => id !== "spotlight");
+}
diff --git a/src/grid/CallLayout.ts b/src/grid/CallLayout.ts
index 3128087b..a7dca6a3 100644
--- a/src/grid/CallLayout.ts
+++ b/src/grid/CallLayout.ts
@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type Observable } from "rxjs";
 import { type ComponentType } from "react";
 
 import { type LayoutProps } from "./Grid";
 import { type TileViewModel } from "../state/TileViewModel";
+import { type Behavior } from "../state/Behavior";
 
 export interface Bounds {
   width: number;
@@ -20,7 +20,7 @@ export interface CallLayoutInputs {
   /**
    * The minimum bounds of the layout area.
    */
-  minBounds$: Observable<Bounds>;
+  minBounds$: Behavior<Bounds>;
 }
 
 export interface CallLayoutOutputs<Model> {
diff --git a/src/grid/GridLayout.tsx b/src/grid/GridLayout.tsx
index 79c2b3a4..ecf45143 100644
--- a/src/grid/GridLayout.tsx
+++ b/src/grid/GridLayout.tsx
@@ -11,14 +11,12 @@ import {
   useCallback,
   useMemo,
 } from "react";
-import { distinctUntilChanged } from "rxjs";
-import { useObservableEagerState } from "observable-hooks";
 
 import { type GridLayout as GridLayoutModel } from "../state/layout-types.ts";
 import styles from "./GridLayout.module.css";
-import { useInitial } from "../useInitial";
 import { type CallLayout, arrangeTiles } from "./CallLayout";
 import { type DragCallback, useUpdateLayout, useVisibleTiles } from "./Grid";
+import { useBehavior } from "../useBehavior";
 
 interface GridCSSProperties extends CSSProperties {
   "--gap": string;
@@ -39,22 +37,18 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
   // lives
   fixed: function GridLayoutFixed({ ref, model, Slot }): ReactNode {
     useUpdateLayout();
-    const alignment = useObservableEagerState(
-      useInitial(() =>
-        model.spotlightAlignment$.pipe(
-          distinctUntilChanged(
-            (a1, a2) => a1.block === a2.block && a1.inline === a2.inline,
-          ),
-        ),
-      ),
-    );
+    const alignment = useBehavior(model.spotlightAlignment$);
 
     const onDragSpotlight: DragCallback = useCallback(
-      ({ xRatio, yRatio }) =>
-        model.spotlightAlignment$.next({
-          block: yRatio < 0.5 ? "start" : "end",
-          inline: xRatio < 0.5 ? "start" : "end",
-        }),
+      ({ xRatio, yRatio }) => {
+        const block = yRatio < 0.5 ? "start" : "end";
+        const inline = xRatio < 0.5 ? "start" : "end";
+        // A drag reports the same alignment on every move; only a change is
+        // worth a re-render
+        const current = model.spotlightAlignment$.value;
+        if (current.block !== block || current.inline !== inline)
+          model.spotlightAlignment$.next({ block, inline });
+      },
       [model.spotlightAlignment$],
     );
 
@@ -78,7 +72,7 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
   scrolling: function GridLayout({ ref, model, Slot }): ReactNode {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
-    const { width, height: minHeight } = useObservableEagerState(minBounds$);
+    const { width, height: minHeight } = useBehavior(minBounds$);
     const { gap, tileWidth, tileHeight } = useMemo(
       () => arrangeTiles(width, minHeight, model.grid.length),
       [width, minHeight, model.grid.length],
diff --git a/src/grid/OneOnOneDesktopLayout.tsx b/src/grid/OneOnOneDesktopLayout.tsx
index ccf24977..beba14c1 100644
--- a/src/grid/OneOnOneDesktopLayout.tsx
+++ b/src/grid/OneOnOneDesktopLayout.tsx
@@ -7,7 +7,6 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type ReactNode, useCallback, useMemo } from "react";
-import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
 import { type OneOnOneDesktopLayout as OneOnOneDesktopLayoutModel } from "../state/layout-types.ts";
@@ -37,7 +36,7 @@ export const makeOneOnOneDesktopLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
-    const { width, height } = useObservableEagerState(minBounds$);
+    const { width, height } = useBehavior(minBounds$);
     const pipAlignment = useBehavior(model.pipAlignment$);
     const { tileWidth, tileHeight } = useMemo(
       () => arrangeTiles(width, height, 1),
diff --git a/src/grid/SpotlightLandscapeLayout.tsx b/src/grid/SpotlightLandscapeLayout.tsx
index 5da12a89..989e3d39 100644
--- a/src/grid/SpotlightLandscapeLayout.tsx
+++ b/src/grid/SpotlightLandscapeLayout.tsx
@@ -6,7 +6,6 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type FC, type ReactNode } from "react";
-import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
 import { type CallLayout } from "./CallLayout";
@@ -33,7 +32,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
-    useObservableEagerState(minBounds$);
+    useBehavior(minBounds$);
 
     return (
       <div ref={ref} className={styles.layer}>
@@ -56,7 +55,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<
   }): ReactNode {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
-    useObservableEagerState(minBounds$);
+    useBehavior(minBounds$);
 
     return (
       <div ref={ref} className={styles.layer}>
diff --git a/src/grid/SpotlightPortraitLayout.tsx b/src/grid/SpotlightPortraitLayout.tsx
index 6939e082..70c428e9 100644
--- a/src/grid/SpotlightPortraitLayout.tsx
+++ b/src/grid/SpotlightPortraitLayout.tsx
@@ -6,7 +6,6 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type ReactNode, type CSSProperties } from "react";
-import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
 import { type CallLayout, arrangeTiles } from "./CallLayout";
@@ -58,7 +57,7 @@ export const makeSpotlightPortraitLayout: CallLayout<
   }): ReactNode {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
-    const { width } = useObservableEagerState(minBounds$);
+    const { width } = useBehavior(minBounds$);
     const { gap, tileWidth, tileHeight } = arrangeTiles(
       width,
       // TODO: We pretend that the minimum height is the width, because the
diff --git a/src/livekit/TrackProcessorContext.tsx b/src/livekit/TrackProcessorContext.tsx
index 96897929..9b930949 100644
--- a/src/livekit/TrackProcessorContext.tsx
+++ b/src/livekit/TrackProcessorContext.tsx
@@ -20,8 +20,7 @@ import {
 } from "react";
 import { type LocalVideoTrack } from "livekit-client";
 import { logger } from "matrix-js-sdk/lib/logger";
-import { combineLatest, map, type Observable } from "rxjs";
-import { useObservable } from "observable-hooks";
+import { combineLatest } from "rxjs";
 
 import {
   backgroundBlur as backgroundBlurSettings,
@@ -31,6 +30,7 @@ import { BlurBackgroundTransformer } from "./BlurBackgroundTransformer";
 import { type Behavior } from "../state/Behavior";
 import { type ObservableScope } from "../state/ObservableScope";
 import { platform } from "../Platform";
+import { useValueBehavior } from "../useValueBehavior";
 
 //TODO-MULTI-SFU: This is not yet fully there.
 // it is a combination of exposing observable and react hooks.
@@ -52,18 +52,8 @@ export function useTrackProcessor(): ProcessorState {
   return state;
 }
 
-export function useTrackProcessorObservable$(): Observable<ProcessorState> {
-  const state = use(ProcessorContext);
-  if (state === undefined)
-    throw new Error(
-      "useTrackProcessor must be used within a ProcessorProvider",
-    );
-  const state$ = useObservable(
-    (init$) => init$.pipe(map(([init]) => init)),
-    [state],
-  );
-
-  return state$;
+export function useTrackProcessorState$(): Behavior<ProcessorState> {
+  return useValueBehavior(useTrackProcessor());
 }
 
 /**
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 5f706cab..b8d7ab89 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -20,8 +20,6 @@ import {
 import useMeasure from "react-use-measure";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import classNames from "classnames";
-import { map } from "rxjs";
-import { useObservable } from "observable-hooks";
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import { useTranslation } from "react-i18next";
 
@@ -77,10 +75,11 @@ import {
   useAppBarSubtitle,
 } from "../AppBar.tsx";
 import { useBehavior } from "../useBehavior.ts";
+import { useValueBehavior } from "../useValueBehavior.ts";
 import { constant } from "../state/Behavior.ts";
 import { Toast } from "../Toast.tsx";
 import overlayStyles from "../Overlay.module.css";
-import { useTrackProcessorObservable$ } from "../livekit/TrackProcessorContext.tsx";
+import { useTrackProcessorState$ } from "../livekit/TrackProcessorContext.tsx";
 import { type Layout } from "../state/layout-types.ts";
 import { ObservableScope } from "../state/ObservableScope.ts";
 import { CallFooter, type FooterSnapshot } from "../components/CallFooter.tsx";
@@ -121,7 +120,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   const urlParams = useUrlParams();
   const hostBridge = useHostBridge();
   const mediaDevices = useMediaDevices();
-  const trackProcessorState$ = useTrackProcessorObservable$();
+  const trackProcessorState$ = useTrackProcessorState$();
   // The element we have to draw the call in: the page, or the container a host
   // gave us. Its size, not the window's, decides how the call is laid out.
   const rootElement = useRootElement();
@@ -151,7 +150,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
       },
       reactionsReader.raisedHands$,
       reactionsReader.reactions$,
-      scope.behavior(trackProcessorState$),
+      trackProcessorState$,
     );
     // TODO move this somewhere else once we use the callViewModel in the lobby as well!
     vm.join();
@@ -252,7 +251,7 @@ export const InCallView: FC<InCallViewProps> = ({
 
   useWakeLock();
   // TODO-MULTI-SFU This is unused now??
-  // const connectionState = useObservableEagerState(vm.livekitConnectionState$);
+  // const connectionState = useBehavior(vm.livekitConnectionState$);
 
   // annoyingly we don't get the disconnection reason this way,
   // only by listening for the emitted event
@@ -374,10 +373,7 @@ export const InCallView: FC<InCallViewProps> = ({
       edgeToEdge,
     ],
   );
-  const gridBoundsObservable$ = useObservable(
-    (inputs$) => inputs$.pipe(map(([gridBounds]) => gridBounds)),
-    [gridBounds],
-  );
+  const gridBounds$ = useValueBehavior(gridBounds);
 
   useAppBarHidden(!showHeader);
   useAppBarSubtitle(
@@ -538,7 +534,7 @@ export const InCallView: FC<InCallViewProps> = ({
   );
 
   const layouts = useMemo(() => {
-    const inputs = { minBounds$: gridBoundsObservable$ };
+    const inputs = { minBounds$: gridBounds$ };
     return {
       grid: makeGridLayout(inputs),
       "spotlight-landscape": makeSpotlightLandscapeLayout(inputs),
@@ -547,7 +543,7 @@ export const InCallView: FC<InCallViewProps> = ({
       "one-on-one-desktop": makeOneOnOneDesktopLayout(inputs),
       "one-on-one-mobile": makeOneOnOneMobileLayout(inputs),
     };
-  }, [gridBoundsObservable$]);
+  }, [gridBounds$]);
 
   const showFooter = useBehavior(footerVm.showFooter$);
   const renderContent = (): JSX.Element => {
diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx
index 9e6e0ed9..5814e431 100644
--- a/src/room/LobbyView.tsx
+++ b/src/room/LobbyView.tsx
@@ -24,7 +24,6 @@ import {
   type LocalVideoTrack,
   Track,
 } from "livekit-client";
-import { useObservableEagerState } from "observable-hooks";
 
 import inCallStyles from "./InCallView.module.css";
 import styles from "./LobbyView.module.css";
@@ -125,9 +124,7 @@ export const LobbyView: FC<Props> = ({
   );
 
   const devices = useMediaDevices();
-  const videoInputId = useObservableEagerState(
-    devices.videoInput.selected$,
-  )?.id;
+  const videoInputId = useBehavior(devices.videoInput.selected$)?.id;
 
   // Capture the audio options as they were when we first mounted, because
   // we're not doing anything with the audio anyway so we don't need to
diff --git a/src/settings/DeviceSelection.test.tsx b/src/settings/DeviceSelection.test.tsx
new file mode 100644
index 00000000..1e57d011
--- /dev/null
+++ b/src/settings/DeviceSelection.test.tsx
@@ -0,0 +1,82 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Form } from "@vector-im/compound-web";
+import { describe, expect, it, vi } from "vitest";
+
+import { DeviceSelection } from "./DeviceSelection";
+import { constant } from "../state/Behavior";
+import {
+  type AudioOutputDeviceLabel,
+  type DeviceLabel,
+  type MediaDevice,
+  type SelectedDevice,
+} from "../state/MediaDevices";
+
+type Device = MediaDevice<DeviceLabel | AudioOutputDeviceLabel, SelectedDevice>;
+
+function mockDevice(
+  available: [string, DeviceLabel][],
+  selectedId: string | undefined,
+): Device & { select: ReturnType<typeof vi.fn> } {
+  return {
+    available$: constant(new Map(available)),
+    selected$: constant(
+      selectedId === undefined ? undefined : { id: selectedId },
+    ),
+    select: vi.fn(),
+  } as unknown as Device & { select: ReturnType<typeof vi.fn> };
+}
+
+const twoDevices: [string, DeviceLabel][] = [
+  ["a", { type: "name", name: "Mic A" }],
+  ["b", { type: "number", number: 2 }],
+];
+
+describe("DeviceSelection", () => {
+  it("marks the selected device and selects another on click", async () => {
+    const device = mockDevice(twoDevices, "a");
+    render(
+      <Form.Root>
+        <DeviceSelection
+          device={device}
+          title="Microphone"
+          numberedLabel={(n) => `Microphone ${n}`}
+        />
+      </Form.Root>,
+    );
+
+    const first = screen.getByRole<HTMLInputElement>("radio", {
+      name: "Mic A",
+    });
+    const second = screen.getByRole<HTMLInputElement>("radio", {
+      name: "Microphone 2",
+    });
+    expect(first.checked).toBe(true);
+    expect(second.checked).toBe(false);
+
+    await userEvent.click(second);
+    expect(device.select).toHaveBeenCalledWith("b");
+  });
+
+  it("shows nothing when there is no choice to make", () => {
+    const device = mockDevice([twoDevices[0]], "a");
+    render(
+      <Form.Root>
+        <DeviceSelection
+          device={device}
+          title="Microphone"
+          numberedLabel={(n) => `Microphone ${n}`}
+        />
+      </Form.Root>,
+    );
+    expect(screen.queryByRole("radio")).toBeNull();
+    expect(screen.queryByText("Microphone")).toBeNull();
+  });
+});
diff --git a/src/settings/DeviceSelection.tsx b/src/settings/DeviceSelection.tsx
index 197046c3..c2bef34f 100644
--- a/src/settings/DeviceSelection.tsx
+++ b/src/settings/DeviceSelection.tsx
@@ -21,7 +21,6 @@ import {
   Separator,
 } from "@vector-im/compound-web";
 import { Trans, useTranslation } from "react-i18next";
-import { useObservableEagerState } from "observable-hooks";
 
 import {
   type AudioOutputDeviceLabel,
@@ -30,6 +29,7 @@ import {
   type MediaDevice,
 } from "../state/MediaDevices";
 import styles from "./DeviceSelection.module.css";
+import { useBehavior } from "../useBehavior";
 
 interface Props {
   device: MediaDevice<DeviceLabel | AudioOutputDeviceLabel, SelectedDevice>;
@@ -44,8 +44,8 @@ export const DeviceSelection: FC<Props> = ({
 }) => {
   const { t } = useTranslation();
   const groupId = useId();
-  const available = useObservableEagerState(device.available$);
-  const selectedId = useObservableEagerState(device.selected$)?.id;
+  const available = useBehavior(device.available$);
+  const selectedId = useBehavior(device.selected$)?.id;
   const onChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
       device.select(e.target.value);
diff --git a/src/state/media/MediaViewModel.test.ts b/src/state/media/MediaViewModel.test.ts
index 9d873ccb..872fdd3e 100644
--- a/src/state/media/MediaViewModel.test.ts
+++ b/src/state/media/MediaViewModel.test.ts
@@ -25,6 +25,7 @@ import {
   mockRemoteScreenShare,
 } from "../../utils/test";
 import { constant } from "../Behavior";
+import { showConnectionStats } from "../../settings/settings";
 
 global.MediaStreamTrack = class {} as unknown as {
   new (): MediaStreamTrack;
@@ -42,6 +43,12 @@ vi.mock("../../Platform", () => ({
   },
 }));
 
+const observeRtpStreamStatsMock = vi.hoisted(() => vi.fn());
+vi.mock("./observeRtpStreamStats", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  observeRtpStreamStats$: observeRtpStreamStatsMock,
+}));
+
 const rtcMembership = mockRtcMembership("@alice:example.org", "AAAA");
 
 test("control a participant's volume", () => {
@@ -289,3 +296,37 @@ test("remote media is not in waiting state when user does not intend to publish
   );
   expect(vm.waitingForMedia$.value).toBe(false);
 });
+
+test("user media polls stream stats only while the setting is on", () => {
+  const participant = mockRemoteParticipant({});
+  const vm = mockRemoteMedia(rtcMembership, {}, participant);
+  onTestFinished(() => showConnectionStats.setValue(false));
+  withTestScheduler(({ cold, expectObservable, schedule }) => {
+    const stats = { type: "inbound-rtp" } as RTCInboundRtpStreamStats;
+    observeRtpStreamStatsMock.mockImplementation(() =>
+      cold("-s", { s: stats }),
+    );
+    schedule("-a-b", {
+      a() {
+        showConnectionStats.setValue(true);
+      },
+      b() {
+        showConnectionStats.setValue(false);
+      },
+    });
+    expectObservable(vm.audioStreamStats$).toBe("u-su", {
+      u: undefined,
+      s: stats,
+    });
+  });
+  expect(observeRtpStreamStatsMock).toHaveBeenCalledWith(
+    participant,
+    Track.Source.Microphone,
+    "inbound-rtp",
+  );
+  expect(observeRtpStreamStatsMock).toHaveBeenCalledWith(
+    participant,
+    Track.Source.Camera,
+    "inbound-rtp",
+  );
+});
diff --git a/src/state/media/UserMediaViewModel.ts b/src/state/media/UserMediaViewModel.ts
index 61d53465..58fd353e 100644
--- a/src/state/media/UserMediaViewModel.ts
+++ b/src/state/media/UserMediaViewModel.ts
@@ -10,7 +10,6 @@ import {
   BehaviorSubject,
   combineLatest,
   map,
-  type Observable,
   of,
   Subject,
   switchMap,
@@ -54,10 +53,10 @@ export interface BaseUserMediaViewModel extends BaseMemberMediaViewModel {
   rtcBackendIdentity: string;
   handRaised$: Behavior<Date | null>;
   reaction$: Behavior<ReactionOption | null>;
-  audioStreamStats$: Observable<
+  audioStreamStats$: Behavior<
     RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
   >;
-  videoStreamStats$: Observable<
+  videoStreamStats$: Behavior<
     RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
   >;
   /**
@@ -94,6 +93,21 @@ export function createBaseUserMedia(
   );
   const toggleCropVideo$ = new Subject<void>();
   const videoAspectRatio$ = new BehaviorSubject(NaN);
+  const streamStats$ = (
+    scope: ObservableScope,
+    source: Track.Source,
+  ): Behavior<
+    RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
+  > =>
+    scope.behavior(
+      combineLatest([participant$, showConnectionStats.value$]).pipe(
+        switchMap(([p, showConnectionStats]) =>
+          !p || !showConnectionStats
+            ? of(undefined)
+            : observeRtpStreamStats$(p, source, statsType),
+        ),
+      ),
+    );
 
   return {
     ...createMemberMedia(scope, {
@@ -130,25 +144,8 @@ export function createBaseUserMedia(
     rtcBackendIdentity,
     handRaised$,
     reaction$,
-    audioStreamStats$: combineLatest([
-      participant$,
-      showConnectionStats.value$,
-    ]).pipe(
-      switchMap(([p, showConnectionStats]) => {
-        //
-        if (!p || !showConnectionStats) return of(undefined);
-        return observeRtpStreamStats$(p, Track.Source.Microphone, statsType);
-      }),
-    ),
-    videoStreamStats$: combineLatest([
-      participant$,
-      showConnectionStats.value$,
-    ]).pipe(
-      switchMap(([p, showConnectionStats]) => {
-        if (!p || !showConnectionStats) return of(undefined);
-        return observeRtpStreamStats$(p, Track.Source.Camera, statsType);
-      }),
-    ),
+    audioStreamStats$: streamStats$(scope, Track.Source.Microphone),
+    videoStreamStats$: streamStats$(scope, Track.Source.Camera),
     setVideoAspectRatio: (ratio) => videoAspectRatio$.next(ratio),
   };
 }
diff --git a/src/tile/GridTile.tsx b/src/tile/GridTile.tsx
index 1334e210..e0018632 100644
--- a/src/tile/GridTile.tsx
+++ b/src/tile/GridTile.tsx
@@ -37,7 +37,6 @@ import {
   Menu,
   Text,
 } from "@vector-im/compound-web";
-import { useObservableEagerState } from "observable-hooks";
 
 import styles from "./GridTile.module.css";
 import { Slider } from "../Slider";
@@ -133,12 +132,8 @@ const UserMediaTileInner: FC<UserMediaTileProps & { menu: ReactNode }> = ({
   const { t } = useTranslation();
   const video = useBehavior(vm.video$);
   const unencryptedWarning = useBehavior(vm.unencryptedWarning$);
-  const audioStreamStats = useObservableEagerState<
-    RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
-  >(vm.audioStreamStats$);
-  const videoStreamStats = useObservableEagerState<
-    RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
-  >(vm.videoStreamStats$);
+  const audioStreamStats = useBehavior(vm.audioStreamStats$);
+  const videoStreamStats = useBehavior(vm.videoStreamStats$);
   const audioEnabled = useBehavior(vm.audioEnabled$);
   const videoEnabled = useBehavior(vm.videoEnabled$);
   const speaking = useBehavior(vm.speaking$);
diff --git a/src/tile/SpotlightTile.tsx b/src/tile/SpotlightTile.tsx
index 97e1f4a6..71b98e8d 100644
--- a/src/tile/SpotlightTile.tsx
+++ b/src/tile/SpotlightTile.tsx
@@ -26,8 +26,7 @@ import {
   VolumeOnSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { animated } from "@react-spring/web";
-import { type Observable, map } from "rxjs";
-import { useObservableRef } from "observable-hooks";
+import { BehaviorSubject, type Observable, map } from "rxjs";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { type TrackReferenceOrPlaceholder } from "@livekit/components-core";
@@ -416,7 +415,13 @@ export const SpotlightTile: FC<Props> = ({
 }) => {
   const { t } = useTranslation();
   const rootElement = useRootElement();
-  const [ourRef, root$] = useObservableRef<HTMLDivElement | null>(null);
+  const root$ = useInitial(
+    () => new BehaviorSubject<HTMLDivElement | null>(null),
+  );
+  const ourRef = useCallback(
+    (root: HTMLDivElement | null) => root$.next(root),
+    [root$],
+  );
   const ref = useMergedRefs(ourRef, theirRef);
   const maximised = useBehavior(vm.maximised$);
   const background = useBehavior(vm.background$);
diff --git a/src/useAudioContext.tsx b/src/useAudioContext.tsx
index 0bed082d..8af8bdeb 100644
--- a/src/useAudioContext.tsx
+++ b/src/useAudioContext.tsx
@@ -7,7 +7,6 @@ Please see LICENSE in the repository root for full details.
 
 import { logger } from "matrix-js-sdk/lib/logger";
 import { useState, useEffect } from "react";
-import { useObservableEagerState } from "observable-hooks";
 
 import {
   soundEffectVolume as soundEffectVolumeSetting,
@@ -17,6 +16,7 @@ import { useEarpieceAudioConfig, useMediaDevices } from "./MediaDevicesContext";
 import { type PrefetchedSounds } from "./soundUtils";
 import { useUrlParams } from "./UrlParams";
 import * as controls from "./controls";
+import { useBehavior } from "./useBehavior";
 
 /**
  * Play a sound though a given AudioContext. Will take
@@ -168,7 +168,7 @@ export function useAudioContext<S extends string>(
     };
   }, [props.sounds, props.latencyHint]);
 
-  const audioOutputId = useObservableEagerState(
+  const audioOutputId = useBehavior(
     useMediaDevices().audioOutput.selected$,
   )?.id;
   const { controlledAudioDevices } = useUrlParams();
diff --git a/src/useBehavior.test.tsx b/src/useBehavior.test.tsx
new file mode 100644
index 00000000..e0b0faef
--- /dev/null
+++ b/src/useBehavior.test.tsx
@@ -0,0 +1,23 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { act, renderHook } from "@testing-library/react";
+import { BehaviorSubject } from "rxjs";
+import { describe, expect, test } from "vitest";
+
+import { useBehavior } from "./useBehavior";
+
+describe("useBehavior", () => {
+  test("reads the current value and follows changes", () => {
+    const value$ = new BehaviorSubject(1);
+    const { result } = renderHook(() => useBehavior(value$));
+    expect(result.current).toBe(1);
+
+    act(() => value$.next(2));
+    expect(result.current).toBe(2);
+  });
+});
diff --git a/src/useValueBehavior.test.tsx b/src/useValueBehavior.test.tsx
new file mode 100644
index 00000000..18de2c36
--- /dev/null
+++ b/src/useValueBehavior.test.tsx
@@ -0,0 +1,34 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { renderHook } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+
+import { useValueBehavior } from "./useValueBehavior";
+
+describe("useValueBehavior", () => {
+  test("holds the value from the first render", () => {
+    const { result } = renderHook(({ value }) => useValueBehavior(value), {
+      initialProps: { value: "a" },
+    });
+    expect(result.current.value).toBe("a");
+  });
+
+  test("keeps one identity and takes each new value", () => {
+    const { result, rerender } = renderHook(
+      ({ value }) => useValueBehavior(value),
+      { initialProps: { value: "a" } },
+    );
+    const value$ = result.current;
+    const seen: string[] = [];
+    value$.subscribe((value) => seen.push(value));
+
+    rerender({ value: "b" });
+    expect(result.current).toBe(value$);
+    expect(seen).toEqual(["a", "b"]);
+  });
+});
diff --git a/src/useValueBehavior.ts b/src/useValueBehavior.ts
new file mode 100644
index 00000000..492fe230
--- /dev/null
+++ b/src/useValueBehavior.ts
@@ -0,0 +1,25 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { useEffect } from "react";
+import { BehaviorSubject } from "rxjs";
+
+import { type Behavior } from "./state/Behavior";
+import { useInitial } from "./useInitial";
+
+/**
+ * React hook which mirrors a value from the render cycle into a behavior, so
+ * that a prop or memoised value can be handed to a view model. The behavior
+ * takes each new value once the render that produced it has committed.
+ */
+export function useValueBehavior<T>(value: T): Behavior<T> {
+  const value$ = useInitial(() => new BehaviorSubject(value));
+  useEffect(() => {
+    value$.next(value);
+  }, [value$, value]);
+  return value$;
+}

From e393b6a98495ffd4810be1bc804480c939a6e3dd Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Mon, 28 Sep 2026 17:56:08 +0200
Subject: [PATCH 125/154] Swap conditional ordering

Co-authored-by: Robin <robin@robin.town>
---
 src/state/media/UserMediaViewModel.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/state/media/UserMediaViewModel.ts b/src/state/media/UserMediaViewModel.ts
index 58fd353e..fb664f0b 100644
--- a/src/state/media/UserMediaViewModel.ts
+++ b/src/state/media/UserMediaViewModel.ts
@@ -102,9 +102,9 @@ export function createBaseUserMedia(
     scope.behavior(
       combineLatest([participant$, showConnectionStats.value$]).pipe(
         switchMap(([p, showConnectionStats]) =>
-          !p || !showConnectionStats
-            ? of(undefined)
-            : observeRtpStreamStats$(p, source, statsType),
+          p && showConnectionStats
+            ? observeRtpStreamStats$(p, source, statsType)
+            : of(undefined),
         ),
       ),
     );

From 8db2e8ac419492cebe8b739ddbf65909eb28dc47 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Tue, 22 Sep 2026 22:28:52 +0200
Subject: [PATCH 126/154] Remove multi-SFU check which is always true

Compatibility and Matrix 2.0 are the only MatrixRTC modes now.
---
 src/state/CallViewModel/localMember/LocalMember.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/state/CallViewModel/localMember/LocalMember.ts b/src/state/CallViewModel/localMember/LocalMember.ts
index 9622ace9..27a631d9 100644
--- a/src/state/CallViewModel/localMember/LocalMember.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.ts
@@ -987,9 +987,6 @@ export function enterRTCSession(
     matrix_rtc_session: sessionConfig,
   } = Config.get();
   const retryInterval = sessionConfig.network_error_retry_ms;
-  const multiSFU =
-    matrixRTCMode === MatrixRTCMode.Compatibility ||
-    matrixRTCMode === MatrixRTCMode.Matrix_2_0;
 
   // For backwards compatibility with Element Call versions that do not do Matrix 2.0,
   // we add the livekit alias to the transport.
@@ -1016,8 +1013,8 @@ export function enterRTCSession(
 
   rtcSession.joinRTCSession(
     ownMembershipIdentity,
-    multiSFU ? [] : [backwardCompatibleTransport],
-    multiSFU ? backwardCompatibleTransport : undefined,
+    [],
+    backwardCompatibleTransport,
     {
       notificationType,
       callIntent,

From ce79274ccc253726771128da4f473d601c30c1d2 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 29 Sep 2026 01:07:59 +0000
Subject: [PATCH 127/154] Update ghcr.io/element-hq/element-web:develop Docker
 digest to cbb7be9 (#4303)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 docker-compose-playwright.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index 74059371..89bc15f9 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -19,7 +19,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:cfbe7ceb346918257ef07cb25f7b9b03ec0575ecb5ce51dfeeef873e67c60c95
+    image: ghcr.io/element-hq/element-web:develop@sha256:cbb7be9a54352997748d02c36dc70ee877c705ee3518be31497717c9a2ff0395
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:cfbe7ceb346918257ef07cb25f7b9b03ec0575ecb5ce51dfeeef873e67c60c95
+    image: ghcr.io/element-hq/element-web:develop@sha256:cbb7be9a54352997748d02c36dc70ee877c705ee3518be31497717c9a2ff0395

From e296d889694e69beb99e64ac12a0754f46d07b18 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Tue, 29 Sep 2026 12:08:44 +0200
Subject: [PATCH 128/154] Keep the component's tooltips inside its root

Compound's Tooltip floats its bubble through floating-ui's FloatingPortal,
into the body: outside the element the component build confines its
stylesheet to, so a label tooltip shows as bare text at all times. An
enclosing FloatingPortal rooted at the container makes the nested portals
land inside it instead.

The call goes in an isolating wrapper there, standing in for the standalone
page's #root, so that its footer layer no longer paints above the modals.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 component/ElementCall.module.css | 33 +++++++++++++++---
 component/PortalRoot.test.tsx    | 43 ++++++++++++++++++++++++
 component/PortalRoot.tsx         | 44 ++++++++++++++++++++++++
 component/index.tsx              | 57 +++++++++++++++++---------------
 package.json                     |  1 +
 pnpm-lock.yaml                   |  3 ++
 vitest.config.ts                 |  1 +
 7 files changed, 150 insertions(+), 32 deletions(-)
 create mode 100644 component/PortalRoot.test.tsx
 create mode 100644 component/PortalRoot.tsx

diff --git a/component/ElementCall.module.css b/component/ElementCall.module.css
index 91213e42..ee792a73 100644
--- a/component/ElementCall.module.css
+++ b/component/ElementCall.module.css
@@ -34,10 +34,33 @@ component rather than a page makes. */
   -webkit-tap-highlight-color: transparent;
 }
 
-/* Compound's overlay container, which holds tooltips and popovers, has to fill
-the container for the elements inside it to be positioned against it. The
-standalone page does the same for the container under `#root`. */
-.root > [data-overlay-container] {
-  position: relative;
+/* floating-ui's portal node, which `PortalRoot` puts here to hold the call
+along with the tooltips Compound floats over it. It fills the container, and
+lays out its children as the container would. */
+.root > [data-floating-ui-portal] {
+  display: flex;
+  flex-direction: column;
   block-size: 100%;
+  position: relative;
+}
+
+/* The call itself, in the wrapper `PortalRoot` gives it. It is a stacking
+context of its own, as the standalone page's `#root` is, so that the layers
+the call view uses for its header, footer and overlays stay below the modals
+and toasts, which are portalled into the root and carry no layer of their own,
+and below the tooltips. */
+.content {
+  display: flex;
+  flex-direction: column;
+  block-size: 100%;
+  position: relative;
+  isolation: isolate;
+}
+
+/* The tooltips sit in portal nodes of their own, nested in ours. Raised, so
+that a tooltip opened inside a modal shows above it: the modal is portalled
+straight into the root and so comes later in the document than our node. */
+.root > [data-floating-ui-portal] > [data-floating-ui-portal] {
+  position: relative;
+  z-index: 1;
 }
diff --git a/component/PortalRoot.test.tsx b/component/PortalRoot.test.tsx
new file mode 100644
index 00000000..f5d133d8
--- /dev/null
+++ b/component/PortalRoot.test.tsx
@@ -0,0 +1,43 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { render, screen } from "@testing-library/react";
+import { Tooltip, TooltipProvider } from "@vector-im/compound-web";
+import { afterEach, describe, expect, test } from "vitest";
+
+import { PortalRoot } from "./PortalRoot";
+
+describe("PortalRoot", () => {
+  const root = document.createElement("div");
+  document.body.appendChild(root);
+  afterEach(() => root.replaceChildren());
+
+  // A label tooltip is in the DOM from the start, hidden by the stylesheet until
+  // hovered, which is what makes it show as bare text when it lands outside the
+  // root
+  const tree = (
+    <TooltipProvider>
+      <Tooltip label="Mute microphone">
+        <button>mic</button>
+      </Tooltip>
+    </TooltipProvider>
+  );
+
+  test("Compound's tooltips float into the root", () => {
+    render(<PortalRoot root={root}>{tree}</PortalRoot>);
+    expect(root).toContainElement(
+      screen.getByRole("button", { name: "Mute microphone" }),
+    );
+    expect(root).toContainElement(screen.getByText("Mute microphone"));
+  });
+
+  test("without it they float into the body", () => {
+    render(tree);
+    expect(root).not.toContainElement(screen.getByText("Mute microphone"));
+    expect(document.body).toContainElement(screen.getByText("Mute microphone"));
+  });
+});
diff --git a/component/PortalRoot.tsx b/component/PortalRoot.tsx
new file mode 100644
index 00000000..20eeecb0
--- /dev/null
+++ b/component/PortalRoot.tsx
@@ -0,0 +1,44 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { FloatingPortal } from "@floating-ui/react";
+import { type FC, type ReactNode } from "react";
+
+import styles from "./ElementCall.module.css";
+
+/**
+ * Keeps what Compound floats over Element Call, its tooltips, inside Element
+ * Call's root.
+ *
+ * Compound's `Tooltip` renders its bubble through floating-ui's
+ * `FloatingPortal`, which appends to `document.body` unless it sits inside
+ * another `FloatingPortal`, whose node it then shares. Compound offers no way
+ * to name a container, so this is that enclosing portal: it puts its node
+ * inside `root` and renders the children into it, and every tooltip they open
+ * lands in the same node, inside the element the component's stylesheet is
+ * confined to. Outside it, a tooltip matches none of the component's rules and
+ * shows as bare text, permanently, since the rule that hides a label tooltip
+ * until it is hovered is one of them.
+ *
+ * The children go in a wrapper of their own, which stands in for the `#root`
+ * of the standalone page: it fills the node and is a stacking context, so
+ * that the call's own layers (its header and footer, its overlays) stay below
+ * the modals and toasts portalled into the root, and below the tooltips beside
+ * it. `ElementCall.module.css` lays both out.
+ *
+ * Nothing renders until `root` exists, just as nothing renders before Element
+ * Call's container does. The portal's tab order guards are for a focus
+ * manager, which nothing in Element Call puts here, so they are off.
+ */
+export const PortalRoot: FC<{
+  root: HTMLElement | null;
+  children: ReactNode;
+}> = ({ root, children }) => (
+  <FloatingPortal root={root} preserveTabOrder={false}>
+    <div className={styles.content}>{children}</div>
+  </FloatingPortal>
+);
diff --git a/component/index.tsx b/component/index.tsx
index b3f04e00..7ca7de30 100644
--- a/component/index.tsx
+++ b/component/index.tsx
@@ -59,6 +59,7 @@ import { ErrorPage } from "../src/FullScreenView";
 import { ClientProvider } from "../src/ClientContext";
 import { HostBridgeProvider } from "../src/HostBridge";
 import { RootElementProvider, useRootElement } from "../src/RootElementContext";
+import { PortalRoot } from "./PortalRoot";
 import {
   configurationForIntent,
   componentProperties,
@@ -321,34 +322,36 @@ export const ElementCall: FC<ElementCallProps> = ({
         <UrlParamsProvider value={params}>
           <div ref={setContainer} className={styles.root}>
             {ready && (
-              <RootElementProvider value={container}>
-                {/* Whatever goes wrong in here is shown in here. Left to
+              <PortalRoot root={container}>
+                <RootElementProvider value={container}>
+                  {/* Whatever goes wrong in here is shown in here. Left to
                   propagate, an error would unmount the host's own tree. */}
-                <ErrorBoundary
-                  fallback={(error) => <ErrorPage error={error} />}
-                  // A broken call should not hold the host on screen
-                  onError={() => void hostBridge.setAlwaysOnScreen(false)}
-                >
-                  <Decoration>
-                    <TooltipProvider>
-                      <ClientProvider client={client}>
-                        <MediaDevicesContext value={mediaDevices}>
-                          <ProcessorProvider>
-                            <CallView
-                              client={client}
-                              rtcSession={rtcSession}
-                              isPasswordlessUser={false}
-                              confineToRoom={params.confineToRoom}
-                              preload={params.preload}
-                              skipLobby={params.skipLobby}
-                            />
-                          </ProcessorProvider>
-                        </MediaDevicesContext>
-                      </ClientProvider>
-                    </TooltipProvider>
-                  </Decoration>
-                </ErrorBoundary>
-              </RootElementProvider>
+                  <ErrorBoundary
+                    fallback={(error) => <ErrorPage error={error} />}
+                    // A broken call should not hold the host on screen
+                    onError={() => void hostBridge.setAlwaysOnScreen(false)}
+                  >
+                    <Decoration>
+                      <TooltipProvider>
+                        <ClientProvider client={client}>
+                          <MediaDevicesContext value={mediaDevices}>
+                            <ProcessorProvider>
+                              <CallView
+                                client={client}
+                                rtcSession={rtcSession}
+                                isPasswordlessUser={false}
+                                confineToRoom={params.confineToRoom}
+                                preload={params.preload}
+                                skipLobby={params.skipLobby}
+                              />
+                            </ProcessorProvider>
+                          </MediaDevicesContext>
+                        </ClientProvider>
+                      </TooltipProvider>
+                    </Decoration>
+                  </ErrorBoundary>
+                </RootElementProvider>
+              </PortalRoot>
             )}
           </div>
         </UrlParamsProvider>
diff --git a/package.json b/package.json
index 5e9137b8..dba83cea 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
   },
   "devDependencies": {
     "@codecov/vite-plugin": "^1.3.0",
+    "@floating-ui/react": "^0.27.0",
     "@fontsource/inconsolata": "^5.1.0",
     "@fontsource/inter": "^5.1.0",
     "@formatjs/intl-durationformat": "^0.10.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index be07cd29..b34a0983 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,6 +25,9 @@ importers:
       '@codecov/vite-plugin':
         specifier: ^1.3.0
         version: 1.9.1(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
+      '@floating-ui/react':
+        specifier: ^0.27.0
+        version: 0.27.20(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@fontsource/inconsolata':
         specifier: ^5.1.0
         version: 5.3.0
diff --git a/vitest.config.ts b/vitest.config.ts
index d6f67f89..0373c4af 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -25,6 +25,7 @@ export default defineConfig((configEnv) =>
                 "src/**/*.test.ts",
                 "src/**/*.test.tsx",
                 "component/**/*.test.ts",
+                "component/**/*.test.tsx",
               ],
             },
           },

From f9b601504b11e27ad178643f2fd7acc2fc1883a6 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Tue, 22 Sep 2026 22:44:15 +0200
Subject: [PATCH 129/154] Stop sending livekit_alias in memberships

It's been many versions since anything used the value.
---
 docs/matrix_rtc_modes.md                      |  2 +-
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 20 +++----
 src/state/CallViewModel/CallViewModel.ts      |  4 +-
 .../localMember/LocalMember.test.ts           |  9 ++--
 .../CallViewModel/localMember/LocalMember.ts  | 52 ++++++-------------
 .../localMember/LocalTransport.ts             | 31 ++---------
 .../RtcTransportAutoDiscovery.test.ts         |  6 +--
 .../localMember/RtcTransportAutoDiscovery.ts  | 12 ++---
 .../remoteMembers/Connection.test.ts          | 16 ++----
 .../CallViewModel/remoteMembers/Connection.ts |  6 +--
 .../remoteMembers/ConnectionFactory.ts        |  6 +--
 .../remoteMembers/ConnectionManager.test.ts   | 14 ++---
 .../remoteMembers/ConnectionManager.ts        | 14 ++---
 .../MatrixLivekitMembers.test.ts              |  2 -
 .../remoteMembers/MatrixLivekitMembers.ts     |  6 +--
 .../remoteMembers/integration.test.ts         |  8 +--
 src/state/SessionBehaviors.ts                 | 16 +++---
 src/utils/test.ts                             |  1 -
 19 files changed, 88 insertions(+), 139 deletions(-)

diff --git a/docs/matrix_rtc_modes.md b/docs/matrix_rtc_modes.md
index a30248ba..4f2e864c 100644
--- a/docs/matrix_rtc_modes.md
+++ b/docs/matrix_rtc_modes.md
@@ -24,7 +24,7 @@ homeserver does not support sticky events. This is the default.
 MSC4354 and all clients on v0.17.0 or later. The local membership requests its
 token from the Matrix 2.0 JWT endpoint of the
 [MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service)
-and identifies the room by a hashed identity instead of a `livekit_alias`.
+and identifies the room by a hashed identity instead of the Matrix `room_id`.
 (Remote memberships always try the new endpoint first and fall back to the
 legacy one, so remote participants can be on either.)
 
diff --git a/package.json b/package.json
index c7642f57..93d7715a 100644
--- a/package.json
+++ b/package.json
@@ -103,7 +103,7 @@
     "livekit-client": "^2.18.1",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.9.1",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#robin/remove-livekit-alias",
     "matrix-widget-api": "^1.18.0",
     "node-stdlib-browser": "^1.3.1",
     "normalize.css": "^8.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index be07cd29..4b51b8b1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -191,8 +191,8 @@ importers:
         specifier: ^1.9.1
         version: 1.9.2
       matrix-js-sdk:
-        specifier: github:matrix-org/matrix-js-sdk#develop
-        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a
+        specifier: github:matrix-org/matrix-js-sdk#robin/remove-livekit-alias
+        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24eacbcef2efaa5f4a89857ed028047332d2a70c
       matrix-widget-api:
         specifier: ^1.18.0
         version: 1.19.0
@@ -1194,8 +1194,8 @@ packages:
       '@types/dom-mediacapture-transform': ^0.1.9
       livekit-client: ^1.12.0 || ^2.1.0
 
-  '@matrix-org/matrix-sdk-crypto-wasm@18.5.0':
-    resolution: {integrity: sha512-E826Hy1rG26LanPjtSsOiVRcVoHfSgPgj2r2Xsb5RPScpaKi9XJADQ0u3dNjRCitZPX4oyLNl1FDd5AfDlmIwQ==}
+  '@matrix-org/matrix-sdk-crypto-wasm@18.9.0':
+    resolution: {integrity: sha512-NtLzNDTEfNASBjNCTGZHuk7N0jrQhS6Zx2CM857rCHZYYh/rpbKGQNrJ7azktm4S1P5Jy3WU3nwJTGohGw26qQ==}
     engines: {node: '>= 18'}
 
   '@mdx-js/react@3.1.1':
@@ -4680,9 +4680,9 @@ packages:
   matrix-events-sdk@0.0.1:
     resolution: {integrity: sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==}
 
-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a:
-    resolution: {gitHosted: true, integrity: sha512-0EGwbXzvG88sBOxq4ZlCRwT4VpQj2xkizfyy0A3bTSK0ysb6/gXJ/o1WPFoqCjRGMDgPq4gAsk92xGtHA7EhPg==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a}
-    version: 42.2.0
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24eacbcef2efaa5f4a89857ed028047332d2a70c:
+    resolution: {gitHosted: true, integrity: sha512-lQeZIDw2OXZeRy0WvjMkT6ZfKWIpsuzCzU9MsfU4h/gTe6jdYRGjf6BRhg9/BOJ0S12lsvcEYslxzcB+usBILA==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24eacbcef2efaa5f4a89857ed028047332d2a70c}
+    version: 42.3.0
     engines: {node: '>=22.0.0'}
 
   matrix-widget-api@1.19.0:
@@ -7101,7 +7101,7 @@ snapshots:
       '@types/dom-mediacapture-transform': 0.1.11
       livekit-client: 2.22.3(@types/dom-mediacapture-record@1.0.22)
 
-  '@matrix-org/matrix-sdk-crypto-wasm@18.5.0': {}
+  '@matrix-org/matrix-sdk-crypto-wasm@18.9.0': {}
 
   '@mdx-js/react@3.1.1(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
@@ -10249,10 +10249,10 @@ snapshots:
 
   matrix-events-sdk@0.0.1: {}
 
-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a:
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24eacbcef2efaa5f4a89857ed028047332d2a70c:
     dependencies:
       '@babel/runtime': 8.0.0
-      '@matrix-org/matrix-sdk-crypto-wasm': 18.5.0
+      '@matrix-org/matrix-sdk-crypto-wasm': 18.9.0
       another-json: 0.2.0
       bs58: 6.0.0
       content-type: 3.0.0
diff --git a/src/state/CallViewModel/CallViewModel.ts b/src/state/CallViewModel/CallViewModel.ts
index 1ab4ea13..ea7f3cc7 100644
--- a/src/state/CallViewModel/CallViewModel.ts
+++ b/src/state/CallViewModel/CallViewModel.ts
@@ -43,7 +43,7 @@ import {
 import { type Logger, logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import {
   MembershipManagerEvent,
-  type LivekitTransportConfig,
+  type LivekitTransport,
   type MatrixRTCSession,
   type RTCCallIntent,
   type RTCNotificationType,
@@ -624,7 +624,7 @@ export function createCallViewModel$(
     ),
     muteStates,
     joinMatrixRTC: (
-      transport: LivekitTransportConfig,
+      transport: LivekitTransport,
       delayedLeaveTimings: ResolvedDelayedLeaveTimings,
     ) => {
       return enterRTCSession(
diff --git a/src/state/CallViewModel/localMember/LocalMember.test.ts b/src/state/CallViewModel/localMember/LocalMember.test.ts
index 973c3f6c..d17cac33 100644
--- a/src/state/CallViewModel/localMember/LocalMember.test.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.test.ts
@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 
 import {
   Status as RTCMemberStatus,
-  type LivekitTransportConfig,
+  type LivekitTransport,
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
 import {
@@ -121,8 +121,7 @@ const mockedClient = {
 };
 
 describe("enterRTCSession", () => {
-  const transport: LivekitTransportConfig = {
-    livekit_alias: "roomId",
+  const transport: LivekitTransport = {
     livekit_service_url: "http://my-livekit-service-url.com",
     type: "livekit",
   };
@@ -256,7 +255,7 @@ describe("LocalMembership", () => {
 
   it("throws error on missing RTC config error", () => {
     withTestScheduler(({ scope, hot, expectObservable }) => {
-      const localTransport$ = scope.behavior<null | LivekitTransportConfig>(
+      const localTransport$ = scope.behavior<null | LivekitTransport>(
         hot("1ms #", {}, new MatrixRTCTransportMissingError("domain.com")),
         null,
       );
@@ -321,7 +320,7 @@ describe("LocalMembership", () => {
 
   const mockTransportConfig = {
     livekit_service_url: "a",
-  } as LivekitTransportConfig;
+  } as LivekitTransport;
 
   const mockTransport = {
     transport: mockTransportConfig,
diff --git a/src/state/CallViewModel/localMember/LocalMember.ts b/src/state/CallViewModel/localMember/LocalMember.ts
index 27a631d9..ad9abb78 100644
--- a/src/state/CallViewModel/localMember/LocalMember.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.ts
@@ -19,7 +19,6 @@ import { type MatrixClient } from "matrix-js-sdk";
 import {
   Status as RTCSessionStatus,
   type LivekitTransport,
-  type LivekitTransportConfig,
   type MatrixRTCSession,
   type RTCCallIntent,
   type RTCNotificationType,
@@ -144,7 +143,7 @@ interface Props {
   connectionManager: IConnectionManager;
   createPublisherFactory: (connection: Connection) => Publisher;
   joinMatrixRTC: (
-    transport: LivekitTransportConfig,
+    transport: LivekitTransport,
     delayedLeaveTimings: ResolvedDelayedLeaveTimings,
   ) => void;
   homeserverConnected: HomeserverConnected;
@@ -966,7 +965,7 @@ interface EnterRTCSessionOptions {
 export function enterRTCSession(
   rtcSession: MatrixRTCSession,
   ownMembershipIdentity: CallMembershipIdentityParts,
-  transport: LivekitTransportConfig,
+  transport: LivekitTransport,
   {
     encryptMedia,
     matrixRTCMode,
@@ -988,18 +987,6 @@ export function enterRTCSession(
   } = Config.get();
   const retryInterval = sessionConfig.network_error_retry_ms;
 
-  // For backwards compatibility with Element Call versions that do not do Matrix 2.0,
-  // we add the livekit alias to the transport.
-  let backwardCompatibleTransport: LivekitTransport | LivekitTransportConfig;
-  if (matrixRTCMode === MatrixRTCMode.Matrix_2_0) {
-    backwardCompatibleTransport = transport;
-  } else {
-    backwardCompatibleTransport = {
-      livekit_alias: rtcSession.room.roomId,
-      ...transport,
-    };
-  }
-
   // Set maximumNetworkErrorRetryCount such that we will consider the client
   // disconnected as soon as either it fails to sync for longer than the grace
   // period, or it is likely that a delayed leave event has been sent.
@@ -1011,24 +998,19 @@ export function enterRTCSession(
   // Multi-sfu does not need a preferred foci list. just the focus that is actually used.
   // TODO where/how do we track errors originating from the ongoing rtcSession?
 
-  rtcSession.joinRTCSession(
-    ownMembershipIdentity,
-    [],
-    backwardCompatibleTransport,
-    {
-      notificationType,
-      callIntent,
-      manageMediaKeys: encryptMedia,
-      delayedLeaveEventRestartMs: delayedLeaveTimings.restart_ms,
-      delayedLeaveEventDelayMs: delayedLeaveTimings.delay_ms,
-      delayedLeaveEventRestartLocalTimeoutMs:
-        delayedLeaveTimings.restart_timeout_ms,
-      networkErrorRetryMs: sessionConfig.network_error_retry_ms,
-      makeKeyDelay: sessionConfig.wait_for_key_rotation_ms,
-      membershipEventExpiryMs: sessionConfig.membership_event_expiry_ms,
-      keyRotationParticipantLimit: sessionConfig.key_rotation_participant_limit,
-      unstableSendStickyEvents: matrixRTCMode === MatrixRTCMode.Matrix_2_0,
-      maximumNetworkErrorRetryCount: maximumNetworkErrorRetryCount,
-    },
-  );
+  rtcSession.joinRTCSession(ownMembershipIdentity, [], transport, {
+    notificationType,
+    callIntent,
+    manageMediaKeys: encryptMedia,
+    delayedLeaveEventRestartMs: delayedLeaveTimings.restart_ms,
+    delayedLeaveEventDelayMs: delayedLeaveTimings.delay_ms,
+    delayedLeaveEventRestartLocalTimeoutMs:
+      delayedLeaveTimings.restart_timeout_ms,
+    networkErrorRetryMs: sessionConfig.network_error_retry_ms,
+    makeKeyDelay: sessionConfig.wait_for_key_rotation_ms,
+    membershipEventExpiryMs: sessionConfig.membership_event_expiry_ms,
+    keyRotationParticipantLimit: sessionConfig.key_rotation_participant_limit,
+    unstableSendStickyEvents: matrixRTCMode === MatrixRTCMode.Matrix_2_0,
+    maximumNetworkErrorRetryCount: maximumNetworkErrorRetryCount,
+  });
 }
diff --git a/src/state/CallViewModel/localMember/LocalTransport.ts b/src/state/CallViewModel/localMember/LocalTransport.ts
index 0aa150d5..3534b3fe 100644
--- a/src/state/CallViewModel/localMember/LocalTransport.ts
+++ b/src/state/CallViewModel/localMember/LocalTransport.ts
@@ -5,7 +5,7 @@ SPDX-License-IdFentifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 import { type MatrixClient } from "matrix-js-sdk";
 import { logger as rootLogger, type Logger } from "matrix-js-sdk/lib/logger";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
@@ -34,34 +34,13 @@ interface Props {
   matrixRTCMode: MatrixRTCMode;
 }
 
-// TODO livekit_alias-cleanup
-// 1. We need to move away from transports map to connections!!!
-//
-// 2. We need to stop sending livekit_alias all together
-//
-//
-// 1.
-// Transports are just the jwt service adress but do not contain the information which room on this transport to use.
-// That requires slot and roomId.
-//
-// We need one connection per room on the transport.
-//
-// We need an object that contains:
-// transport
-// roomId
-// slotId
-//
-// To map to the connections. Prosposal: `ConnectionIdentifier`
-//
-// 2.
-// We need to make sure we do not sent livekit_alias in sticky events and that we drop all code for sending state events!
 export interface LocalTransport {
-  transport: LivekitTransportConfig;
+  transport: LivekitTransport;
   sfuConfig: SFUConfig;
 }
 
 export function isLocalTransport(
-  obj: LivekitTransportConfig | LocalTransport,
+  obj: LivekitTransport | LocalTransport,
 ): obj is LocalTransport {
   return "transport" in obj && "sfuConfig" in obj;
 }
@@ -90,7 +69,7 @@ export async function getLocalTransport({
   const customUrl = customLivekitUrl.value$.value;
 
   // Respect the user's custom URL, if set
-  const transport: LivekitTransportConfig | null = customUrl
+  const transport: LivekitTransport | null = customUrl
     ? { type: "livekit", livekit_service_url: customUrl }
     : await discovery.discoverPreferredTransport();
 
@@ -131,7 +110,7 @@ export async function getLocalTransport({
  *  @throws FailToGetOpenIdToken, NoMatrix2AuthorizationService
  */
 async function doOpenIdAndJWTFromUrl(
-  transport: LivekitTransportConfig,
+  transport: LivekitTransport,
   matrixRTCMode: MatrixRTCMode,
   membership: CallMembershipIdentityParts,
   roomId: string,
diff --git a/src/state/CallViewModel/localMember/RtcTransportAutoDiscovery.test.ts b/src/state/CallViewModel/localMember/RtcTransportAutoDiscovery.test.ts
index f81223de..61df88a7 100644
--- a/src/state/CallViewModel/localMember/RtcTransportAutoDiscovery.test.ts
+++ b/src/state/CallViewModel/localMember/RtcTransportAutoDiscovery.test.ts
@@ -16,7 +16,7 @@ import {
 import { MatrixError } from "matrix-js-sdk";
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import {
-  type LivekitTransportConfig,
+  type LivekitTransport,
   type Transport,
 } from "matrix-js-sdk/lib/matrixrtc";
 
@@ -28,12 +28,12 @@ import {
 
 type DiscoveryClient = RtcTransportAutoDiscoveryProps["client"];
 
-const backendTransport: LivekitTransportConfig = {
+const backendTransport: LivekitTransport = {
   type: "livekit",
   livekit_service_url: "https://backend.example.org",
 };
 
-const configTransport: LivekitTransportConfig = {
+const configTransport: LivekitTransport = {
   type: "livekit",
   livekit_service_url: "https://config.example.org",
 };
diff --git a/src/state/CallViewModel/localMember/RtcTransportAutoDiscovery.ts b/src/state/CallViewModel/localMember/RtcTransportAutoDiscovery.ts
index 1f295649..aeb6b051 100644
--- a/src/state/CallViewModel/localMember/RtcTransportAutoDiscovery.ts
+++ b/src/state/CallViewModel/localMember/RtcTransportAutoDiscovery.ts
@@ -5,8 +5,8 @@ SPDX-License-IdFentifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 import {
-  isLivekitTransportConfig,
-  type LivekitTransportConfig,
+  isLivekitTransport,
+  type LivekitTransport,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { type MatrixClient } from "matrix-js-sdk";
 import { type Logger } from "matrix-js-sdk/lib/logger";
@@ -40,7 +40,7 @@ export class RtcTransportAutoDiscovery {
     this.logger = logger.getChild("[RtcTransportAutoDiscovery]");
   }
 
-  public async discoverPreferredTransport(): Promise<LivekitTransportConfig | null> {
+  public async discoverPreferredTransport(): Promise<LivekitTransport | null> {
     // 1) backend transports
     const backendTransport = await this.tryBackendTransports();
     if (backendTransport) {
@@ -67,7 +67,7 @@ export class RtcTransportAutoDiscovery {
    * This will not throw errors, but instead just log them and return null if the expected config is not found or malformed.
    * @private
    */
-  private async tryBackendTransports(): Promise<LivekitTransportConfig | null> {
+  private async tryBackendTransports(): Promise<LivekitTransport | null> {
     const client = this.client;
     // MSC4143: Attempt to fetch transports from backend.
     this.logger.info("First try to use getRTCTransports end point ...");
@@ -75,7 +75,7 @@ export class RtcTransportAutoDiscovery {
       const transportList = await doNetworkOperationWithRetry(async () =>
         client._unstable_getRTCTransports(),
       );
-      const first = transportList.find(isLivekitTransportConfig);
+      const first = transportList.find(isLivekitTransport);
       if (first) {
         return first;
       } else {
@@ -90,7 +90,7 @@ export class RtcTransportAutoDiscovery {
     return null;
   }
 
-  private tryConfigTransport(): LivekitTransportConfig | null {
+  private tryConfigTransport(): LivekitTransport | null {
     const url = this.resolvedConfig.livekit?.livekit_service_url;
     if (url) {
       return {
diff --git a/src/state/CallViewModel/remoteMembers/Connection.test.ts b/src/state/CallViewModel/remoteMembers/Connection.test.ts
index f226b778..62dc17a3 100644
--- a/src/state/CallViewModel/remoteMembers/Connection.test.ts
+++ b/src/state/CallViewModel/remoteMembers/Connection.test.ts
@@ -30,7 +30,7 @@ import fetchMock from "fetch-mock";
 import EventEmitter from "events";
 import { type IOpenIDToken } from "matrix-js-sdk";
 import { logger, type Logger } from "matrix-js-sdk/lib/logger";
-import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 
 import {
   Connection,
@@ -57,7 +57,7 @@ let fakeLocalParticipant: MockedObject<LocalParticipant>;
 
 const ROOM_ID = "!roomID:example.org";
 
-const livekitFocus: LivekitTransportConfig = {
+const livekitFocus: LivekitTransport = {
   livekit_service_url: "https://matrix-rtc.example.org/livekit/jwt",
   type: "livekit",
 };
@@ -228,9 +228,7 @@ describe("Start connection states", () => {
     capturedState = capturedStates.pop();
     if (capturedState instanceof Error) {
       expect(capturedState.message).toEqual("Something went wrong");
-      expect(connection.transport.livekit_alias).toEqual(
-        livekitFocus.livekit_alias,
-      );
+      expect(connection.transport).toEqual(livekitFocus);
     } else {
       expect.fail("Expected FailedToStart state but got " + capturedState);
     }
@@ -290,9 +288,7 @@ describe("Start connection states", () => {
       expect(capturedState.cause.message).toContain(
         "Failed to look up user info from homeserver",
       );
-      expect(connection.transport.livekit_alias).toEqual(
-        livekitFocus.livekit_alias,
-      );
+      expect(connection.transport).toEqual(livekitFocus);
     } else {
       expect.fail("Expected FailedToStart state but got " + capturedState);
     }
@@ -357,9 +353,7 @@ describe("Start connection states", () => {
       expect(capturedState.cause.message).toContain(
         "Failed to connect to livekit",
       );
-      expect(connection.transport.livekit_alias).toEqual(
-        livekitFocus.livekit_alias,
-      );
+      expect(connection.transport).toEqual(livekitFocus);
     } else {
       expect.fail(
         "Expected FailedToStart state but got " + JSON.stringify(capturedState),
diff --git a/src/state/CallViewModel/remoteMembers/Connection.ts b/src/state/CallViewModel/remoteMembers/Connection.ts
index 7889f900..cc84142d 100644
--- a/src/state/CallViewModel/remoteMembers/Connection.ts
+++ b/src/state/CallViewModel/remoteMembers/Connection.ts
@@ -22,7 +22,7 @@ import {
   type Track,
   type TrackPublication,
 } from "livekit-client";
-import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 import { BehaviorSubject, map } from "rxjs";
 import { type Logger } from "matrix-js-sdk/lib/logger";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
@@ -52,7 +52,7 @@ export interface ConnectionOpts {
   /** The identity parts to use on this connection */
   ownMembershipIdentity: CallMembershipIdentityParts;
   /** The media transport to connect to. */
-  transport: LivekitTransportConfig;
+  transport: LivekitTransport;
   /** The Matrix client to use for OpenID and SFU config requests. */
   client: OpenIDClientParts;
   /** The room ID this connection is associated with. */
@@ -107,7 +107,7 @@ export class Connection {
   /**
    * The media transport to connect to.
    */
-  public readonly transport: LivekitTransportConfig;
+  public readonly transport: LivekitTransport;
 
   public readonly livekitRoom: LivekitRoom;
 
diff --git a/src/state/CallViewModel/remoteMembers/ConnectionFactory.ts b/src/state/CallViewModel/remoteMembers/ConnectionFactory.ts
index 30ff37f3..96a28d5a 100644
--- a/src/state/CallViewModel/remoteMembers/ConnectionFactory.ts
+++ b/src/state/CallViewModel/remoteMembers/ConnectionFactory.ts
@@ -16,7 +16,7 @@ import { logger, type Logger } from "matrix-js-sdk/lib/logger";
 // imported as inline to support worker when loaded from a cdn (cross domain)
 import E2EEWorker from "livekit-client/e2ee-worker?worker&inline";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
-import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 
 import { type ObservableScope } from "../../ObservableScope.ts";
 import { Connection } from "./Connection.ts";
@@ -44,7 +44,7 @@ import {
 export interface ConnectionFactory {
   createConnection(
     scope: ObservableScope,
-    transport: LivekitTransportConfig,
+    transport: LivekitTransport,
     ownMembershipIdentity: CallMembershipIdentityParts,
     logger: Logger,
     sfuConfig?: SFUConfig,
@@ -103,7 +103,7 @@ export class ECConnectionFactory implements ConnectionFactory {
    */
   public createConnection(
     scope: ObservableScope,
-    transport: LivekitTransportConfig,
+    transport: LivekitTransport,
     ownMembershipIdentity: CallMembershipIdentityParts,
     logger: Logger,
     sfuConfig?: SFUConfig,
diff --git a/src/state/CallViewModel/remoteMembers/ConnectionManager.test.ts b/src/state/CallViewModel/remoteMembers/ConnectionManager.test.ts
index 0903702f..e7d91c63 100644
--- a/src/state/CallViewModel/remoteMembers/ConnectionManager.test.ts
+++ b/src/state/CallViewModel/remoteMembers/ConnectionManager.test.ts
@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { BehaviorSubject, NEVER } from "rxjs";
-import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 import { type RemoteParticipant } from "livekit-client";
 import { logger } from "matrix-js-sdk/lib/logger";
 
@@ -24,12 +24,12 @@ import { type Behavior } from "../../Behavior.ts";
 
 // Some test constants
 
-const TRANSPORT_1: LivekitTransportConfig = {
+const TRANSPORT_1: LivekitTransport = {
   type: "livekit",
   livekit_service_url: "https://lk.example.org",
 };
 
-const TRANSPORT_2: LivekitTransportConfig = {
+const TRANSPORT_2: LivekitTransport = {
   type: "livekit",
   livekit_service_url: "https://lk.sample.com",
 };
@@ -47,7 +47,7 @@ beforeEach(() => {
   vi.mocked(fakeConnectionFactory).createConnection = vi
     .fn()
     .mockImplementation(
-      (scope: ObservableScope, transport: LivekitTransportConfig) => {
+      (scope: ObservableScope, transport: LivekitTransport) => {
         const mockConnection = {
           transport,
           remoteParticipants$: new BehaviorSubject([]),
@@ -225,7 +225,7 @@ describe("connectionManagerData$ stream", () => {
   // Used in test to control fake connections' remoteParticipants$ streams
   let fakeRemoteParticipantsStreams: Map<string, Behavior<RemoteParticipant[]>>;
 
-  function keyForTransport(transport: LivekitTransportConfig): string {
+  function keyForTransport(transport: LivekitTransport): string {
     return `${transport.livekit_service_url}`;
   }
 
@@ -233,7 +233,7 @@ describe("connectionManagerData$ stream", () => {
     fakeRemoteParticipantsStreams = new Map();
 
     function getRemoteParticipantsFor(
-      transport: LivekitTransportConfig,
+      transport: LivekitTransport,
     ): Behavior<RemoteParticipant[]> {
       return (
         fakeRemoteParticipantsStreams.get(keyForTransport(transport)) ??
@@ -245,7 +245,7 @@ describe("connectionManagerData$ stream", () => {
     vi.mocked(fakeConnectionFactory).createConnection = vi
       .fn()
       .mockImplementation(
-        (scope: ObservableScope, transport: LivekitTransportConfig) => {
+        (scope: ObservableScope, transport: LivekitTransport) => {
           const fakeRemoteParticipants$ = new BehaviorSubject<
             RemoteParticipant[]
           >([]);
diff --git a/src/state/CallViewModel/remoteMembers/ConnectionManager.ts b/src/state/CallViewModel/remoteMembers/ConnectionManager.ts
index ea51c7ba..18f54f02 100644
--- a/src/state/CallViewModel/remoteMembers/ConnectionManager.ts
+++ b/src/state/CallViewModel/remoteMembers/ConnectionManager.ts
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 import {
   combineLatest,
   map,
@@ -56,7 +56,7 @@ export class ConnectionManagerData {
     }
   }
 
-  private getKey(transport: LivekitTransportConfig): string {
+  private getKey(transport: LivekitTransport): string {
     // This is enough as a key because the ConnectionManager is already scoped by room.
     // We also do not need to consider the slotId at this point since each `MatrixRTCSession` is already scoped by `slotDescription: {id, application}`.
     return transport.livekit_service_url;
@@ -67,13 +67,13 @@ export class ConnectionManagerData {
   }
 
   public getConnectionForTransport(
-    transport: LivekitTransportConfig,
+    transport: LivekitTransport,
   ): Connection | null {
     return this.store.get(this.getKey(transport))?.connection ?? null;
   }
 
   public getParticipantsForTransport(
-    transport: LivekitTransportConfig,
+    transport: LivekitTransport,
   ): RemoteParticipant[] {
     const key = this.getKey(transport);
     const existing = this.store.get(key);
@@ -88,7 +88,7 @@ interface Props {
   scope: ObservableScope;
   connectionFactory: ConnectionFactory;
   localTransport$: Observable<LocalTransport>;
-  remoteTransports$: Behavior<Epoch<LivekitTransportConfig[]>>;
+  remoteTransports$: Behavior<Epoch<LivekitTransport[]>>;
 
   logger: Logger;
   ownMembershipIdentity: CallMembershipIdentityParts;
@@ -147,7 +147,7 @@ export function createConnectionManager$({
    * externally this is modified via `registerTransports()`.
    */
   const localAndRemoteTransports$: Behavior<
-    Epoch<(LivekitTransportConfig | LocalTransport)[]>
+    Epoch<(LivekitTransport | LocalTransport)[]>
   > = scope.behavior(
     combineLatest([localTransportAsArray$, remoteTransports$]).pipe(
       // Combine local and remote transports into one transport array
@@ -271,7 +271,7 @@ export function createConnectionManager$({
   return { connectionManagerData$ };
 }
 
-function removeDuplicateTransports<T extends LivekitTransportConfig>(
+function removeDuplicateTransports<T extends LivekitTransport>(
   transports: T[],
 ): T[] {
   return transports.reduce((acc, transport) => {
diff --git a/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.test.ts b/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.test.ts
index fe762112..c11d779e 100644
--- a/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.test.ts
+++ b/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.test.ts
@@ -42,13 +42,11 @@ const fallbackMemberId = (userId: string, deviceId: string): string =>
 const transportA: LivekitTransport = {
   type: "livekit",
   livekit_service_url: "https://lk.example.org",
-  livekit_alias: "!alias:example.org",
 };
 
 const transportB: LivekitTransport = {
   type: "livekit",
   livekit_service_url: "https://lk.sample.com",
-  livekit_alias: "!alias:sample.com",
 };
 
 const bobMembership = mockRtcMembership("@bob:example.org", "DEV000", {
diff --git a/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.ts b/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.ts
index 76f4670e..6c9fff02 100644
--- a/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.ts
+++ b/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.ts
@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { type LocalParticipant, type RemoteParticipant } from "livekit-client";
 import {
   type CallMembership,
-  type LivekitTransportConfig,
+  type LivekitTransport,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { combineLatest, filter, map } from "rxjs";
 import { logger } from "matrix-js-sdk/lib/logger";
@@ -60,7 +60,7 @@ export interface RemoteMatrixLivekitMember extends MatrixLivekitMember {
 interface Props {
   scope: ObservableScope;
   membershipsWithTransport$: Behavior<
-    Epoch<{ membership: CallMembership; transport?: LivekitTransportConfig }[]>
+    Epoch<{ membership: CallMembership; transport?: LivekitTransport }[]>
   >;
   connectionManager: IConnectionManager;
   localUser: { deviceId: string; userId: string };
@@ -165,7 +165,7 @@ export function createRemoteMatrixLivekitMembers$({
 // TODO add back in the callviewmodel pauseWhen(this.pretendToBeDisconnected$)
 
 // TODO add this to the JS-SDK
-export function areLivekitTransportsEqual<T extends LivekitTransportConfig>(
+export function areLivekitTransportsEqual<T extends LivekitTransport>(
   t1: T | null,
   t2: T | null,
 ): boolean {
diff --git a/src/state/CallViewModel/remoteMembers/integration.test.ts b/src/state/CallViewModel/remoteMembers/integration.test.ts
index 0db25c3b..4c0f4fea 100644
--- a/src/state/CallViewModel/remoteMembers/integration.test.ts
+++ b/src/state/CallViewModel/remoteMembers/integration.test.ts
@@ -10,7 +10,7 @@ import { BehaviorSubject, NEVER } from "rxjs";
 import { type Room as LivekitRoom } from "livekit-client";
 import EventEmitter from "events";
 import fetchMock from "fetch-mock";
-import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 import { logger } from "matrix-js-sdk/lib/logger";
 
 import {
@@ -149,7 +149,7 @@ test("bob, carl, then bob joining no tracks yet", () => {
           a: expect.toSatisfy((co) =>
             areLivekitTransportsEqual(
               co.transport,
-              bobMembership.transports[0]! as LivekitTransportConfig,
+              bobMembership.transports[0]! as LivekitTransport,
             ),
           ),
         });
@@ -186,7 +186,7 @@ test("bob, carl, then bob joining no tracks yet", () => {
               expect(
                 areLivekitTransportsEqual(
                   connection.transport,
-                  carlMembership.transports[0]! as LivekitTransportConfig,
+                  carlMembership.transports[0]! as LivekitTransport,
                 ),
               ).toBe(true);
               return true;
@@ -216,7 +216,7 @@ test("bob, carl, then bob joining no tracks yet", () => {
               expect(
                 areLivekitTransportsEqual(
                   connection.transport,
-                  daveMembership.transports[0]! as LivekitTransportConfig,
+                  daveMembership.transports[0]! as LivekitTransport,
                 ),
               ).toBe(true);
               return true;
diff --git a/src/state/SessionBehaviors.ts b/src/state/SessionBehaviors.ts
index 8d3986b6..8a73ca71 100644
--- a/src/state/SessionBehaviors.ts
+++ b/src/state/SessionBehaviors.ts
@@ -7,10 +7,10 @@ Please see LICENSE in the repository root for full details.
 
 import {
   type CallMembership,
-  type LivekitTransportConfig,
+  type LivekitTransport,
   type MatrixRTCSession,
   MatrixRTCSessionEvent,
-  isLivekitTransportConfig,
+  isLivekitTransport,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { fromEvent } from "rxjs";
 
@@ -31,15 +31,15 @@ export const membershipsAndTransports$ = (
   memberships$: Behavior<Epoch<CallMembership[]>>,
 ): {
   membershipsWithTransport$: Behavior<
-    Epoch<{ membership: CallMembership; transport?: LivekitTransportConfig }[]>
+    Epoch<{ membership: CallMembership; transport?: LivekitTransport }[]>
   >;
-  transports$: Behavior<Epoch<LivekitTransportConfig[]>>;
+  transports$: Behavior<Epoch<LivekitTransport[]>>;
 } => {
   const membershipsWithTransport$: Behavior<
     Epoch<
       {
         membership: CallMembership;
-        transport: LivekitTransportConfig | undefined;
+        transport: LivekitTransport | undefined;
       }[]
     >
   > = scope.behavior(
@@ -50,16 +50,14 @@ export const membershipsAndTransports$ = (
           const transport = membership.getTransport(oldestMembership);
           return {
             membership,
-            transport: isLivekitTransportConfig(transport)
-              ? transport
-              : undefined,
+            transport: isLivekitTransport(transport) ? transport : undefined,
           };
         });
       }),
     ),
   );
 
-  const transports$: Behavior<Epoch<LivekitTransportConfig[]>> = scope.behavior(
+  const transports$: Behavior<Epoch<LivekitTransport[]>> = scope.behavior(
     membershipsWithTransport$.pipe(
       mapEpoch((mts) => mts.flatMap(({ transport: t }) => (t ? [t] : []))),
     ),
diff --git a/src/utils/test.ts b/src/utils/test.ts
index 405e5947..1c49c0da 100644
--- a/src/utils/test.ts
+++ b/src/utils/test.ts
@@ -212,7 +212,6 @@ export function mockEmitter<T>(): EmitterMock<T> {
 export const exampleTransport: LivekitTransport = {
   type: "livekit",
   livekit_service_url: "https://lk.example.org",
-  livekit_alias: "!alias:example.org",
 };
 
 export const exampleSfuConfig: SFUConfig = {

From f287fb380075eb602deae9636215209b31ba26da Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Tue, 22 Sep 2026 23:32:31 +0200
Subject: [PATCH 130/154] Adapt to matrix-js-sdk removal of oldest_membership
 support

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 26 +++++++++----------
 .../localMember/LocalMember.test.ts           |  5 +---
 .../CallViewModel/localMember/LocalMember.ts  |  2 +-
 .../MatrixLivekitMembers.test.ts              |  6 ++---
 src/state/SessionBehaviors.ts                 |  3 +--
 6 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index 93d7715a..05c9312b 100644
--- a/package.json
+++ b/package.json
@@ -103,7 +103,7 @@
     "livekit-client": "^2.18.1",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.9.1",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#robin/remove-livekit-alias",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#robin/remove-oldest-membership",
     "matrix-widget-api": "^1.18.0",
     "node-stdlib-browser": "^1.3.1",
     "normalize.css": "^8.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4b51b8b1..a982f7af 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -191,8 +191,8 @@ importers:
         specifier: ^1.9.1
         version: 1.9.2
       matrix-js-sdk:
-        specifier: github:matrix-org/matrix-js-sdk#robin/remove-livekit-alias
-        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24eacbcef2efaa5f4a89857ed028047332d2a70c
+        specifier: github:matrix-org/matrix-js-sdk#robin/remove-oldest-membership
+        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/6defa47adae28feb7e3906dde25089e0dce42ece
       matrix-widget-api:
         specifier: ^1.18.0
         version: 1.19.0
@@ -3659,8 +3659,8 @@ packages:
   constants-browserify@1.0.0:
     resolution: {integrity: sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==}
 
-  content-type@3.0.0:
-    resolution: {integrity: sha512-AIi5H6p0xk5uknXcN3/rmhP8jgp69OfSe/JuKiQAFprJ7UGw7mwj7m4XcmDzlrnJDG+cGpphAINGdU3g3g7kDw==}
+  content-type@3.1.1:
+    resolution: {integrity: sha512-GW4qUsfFo59d0HbUibDlWv5wPz+vAAcaTWbKIuKCf0JkC7wWkSyf8f13IpXn5JkeMlB2P8iTSSIjwXljorg2vA==}
     engines: {node: '>=22'}
 
   convert-source-map@2.0.0:
@@ -4680,8 +4680,8 @@ packages:
   matrix-events-sdk@0.0.1:
     resolution: {integrity: sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==}
 
-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24eacbcef2efaa5f4a89857ed028047332d2a70c:
-    resolution: {gitHosted: true, integrity: sha512-lQeZIDw2OXZeRy0WvjMkT6ZfKWIpsuzCzU9MsfU4h/gTe6jdYRGjf6BRhg9/BOJ0S12lsvcEYslxzcB+usBILA==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24eacbcef2efaa5f4a89857ed028047332d2a70c}
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/6defa47adae28feb7e3906dde25089e0dce42ece:
+    resolution: {gitHosted: true, integrity: sha512-jHFmI2C29HJnzs/FIrqdmQD6ytyunyy627onhrxI+xxTGSfYrWhcTUFstNiCAaMt3fc0nNi9aVvLPD3IIglF2A==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/6defa47adae28feb7e3906dde25089e0dce42ece}
     version: 42.3.0
     engines: {node: '>=22.0.0'}
 
@@ -4895,8 +4895,8 @@ packages:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
-  p-retry@8.0.0:
-    resolution: {integrity: sha512-kFVqH1HxOHp8LupNsOys7bSV09VYTRLxarH/mokO4Rqhk6wGi70E0jh4VzvVGXfEVNggHoHLAMWsQqHyU1Ey9A==}
+  p-retry@8.0.1:
+    resolution: {integrity: sha512-NAigyu8hfvJe7MsS18mnc4is0MZtau3QMdBklaJKK23oBQb6occO3UPM3vHmTckW8KhfyjMZaUOqdTFEYliHgg==}
     engines: {node: '>=22'}
 
   p-try@2.2.0:
@@ -9163,7 +9163,7 @@ snapshots:
 
   constants-browserify@1.0.0: {}
 
-  content-type@3.0.0: {}
+  content-type@3.1.1: {}
 
   convert-source-map@2.0.0: {}
 
@@ -10249,17 +10249,17 @@ snapshots:
 
   matrix-events-sdk@0.0.1: {}
 
-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24eacbcef2efaa5f4a89857ed028047332d2a70c:
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/6defa47adae28feb7e3906dde25089e0dce42ece:
     dependencies:
       '@babel/runtime': 8.0.0
       '@matrix-org/matrix-sdk-crypto-wasm': 18.9.0
       another-json: 0.2.0
       bs58: 6.0.0
-      content-type: 3.0.0
+      content-type: 3.1.1
       loglevel: 1.9.2
       matrix-events-sdk: 0.0.1
       matrix-widget-api: 1.19.0
-      p-retry: 8.0.0
+      p-retry: 8.0.1
       sdp-transform: 3.0.0
       unhomoglyph: 1.0.6
 
@@ -10584,7 +10584,7 @@ snapshots:
     dependencies:
       p-limit: 3.1.0
 
-  p-retry@8.0.0:
+  p-retry@8.0.1:
     dependencies:
       is-network-error: 1.3.2
 
diff --git a/src/state/CallViewModel/localMember/LocalMember.test.ts b/src/state/CallViewModel/localMember/LocalMember.test.ts
index d17cac33..8e421771 100644
--- a/src/state/CallViewModel/localMember/LocalMember.test.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.test.ts
@@ -156,8 +156,7 @@ describe("enterRTCSession", () => {
         memberId: "@alice:example.org:DEVICE",
         userId: "@alice:example.org",
       },
-      [],
-      transport,
+      [transport],
       expect.objectContaining({ manageMediaKeys: true }),
     );
   });
@@ -177,7 +176,6 @@ describe("enterRTCSession", () => {
 
     expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
       expect.any(Object),
-      [],
       expect.any(Object),
       expect.objectContaining({
         keyRotationParticipantLimit: 50,
@@ -189,7 +187,6 @@ describe("enterRTCSession", () => {
     enterRTCSession(mockedSession, ownMemberMock, transport, options);
 
     expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
-      expect.anything(),
       expect.anything(),
       expect.anything(),
       expect.objectContaining({
diff --git a/src/state/CallViewModel/localMember/LocalMember.ts b/src/state/CallViewModel/localMember/LocalMember.ts
index ad9abb78..36469e7a 100644
--- a/src/state/CallViewModel/localMember/LocalMember.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.ts
@@ -998,7 +998,7 @@ export function enterRTCSession(
   // Multi-sfu does not need a preferred foci list. just the focus that is actually used.
   // TODO where/how do we track errors originating from the ongoing rtcSession?
 
-  rtcSession.joinRTCSession(ownMembershipIdentity, [], transport, {
+  rtcSession.joinRTCSession(ownMembershipIdentity, [transport], {
     notificationType,
     callIntent,
     manageMediaKeys: encryptMedia,
diff --git a/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.test.ts b/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.test.ts
index c11d779e..2e005192 100644
--- a/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.test.ts
+++ b/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.test.ts
@@ -124,7 +124,7 @@ function createEpochedMemberships$(m$: Observable<CallMembership[]>): {
   const membershipsWithTransport$ = memberships$.pipe(
     mapEpoch((members) => {
       return members.map((m) => {
-        const tr = m.getTransport(m);
+        const tr = m.getTransport();
         return {
           membership: m,
           transport:
@@ -150,7 +150,7 @@ test("should signal participant on a connection that is publishing", async () =>
   );
 
   const connection = {
-    transport: bobMembership.getTransport(bobMembership),
+    transport: bobMembership.getTransport(),
   } as unknown as Connection;
   const dataWithPublisher = new ConnectionManagerData();
   dataWithPublisher.add(connection, [
@@ -193,7 +193,7 @@ test("should signal participant on a connection that is not publishing", async (
   );
 
   const connection = {
-    transport: bobMembership.getTransport(bobMembership),
+    transport: bobMembership.getTransport(),
   } as unknown as Connection;
   const dataWithPublisher = new ConnectionManagerData();
   dataWithPublisher.add(connection, []);
diff --git a/src/state/SessionBehaviors.ts b/src/state/SessionBehaviors.ts
index 8a73ca71..4ca1c586 100644
--- a/src/state/SessionBehaviors.ts
+++ b/src/state/SessionBehaviors.ts
@@ -46,8 +46,7 @@ export const membershipsAndTransports$ = (
     memberships$.pipe(
       mapEpoch((memberships) => {
         return memberships.map((membership) => {
-          const oldestMembership = memberships[0] ?? membership;
-          const transport = membership.getTransport(oldestMembership);
+          const transport = membership.getTransport();
           return {
             membership,
             transport: isLivekitTransport(transport) ? transport : undefined,

From 63ac1ba03eace8cd8cfaeceddbe468a84a13c04b Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Wed, 30 Sep 2026 11:22:15 +0200
Subject: [PATCH 131/154] Decode inlined sounds directly instead of fetching
 them, with the test.

---
 src/soundUtils.test.ts | 77 ++++++++++++++++++++++++++++++++++++++++++
 src/soundUtils.ts      | 54 +++++++++++++++++++++++++----
 2 files changed, 124 insertions(+), 7 deletions(-)
 create mode 100644 src/soundUtils.test.ts

diff --git a/src/soundUtils.test.ts b/src/soundUtils.test.ts
new file mode 100644
index 00000000..e65441f8
--- /dev/null
+++ b/src/soundUtils.test.ts
@@ -0,0 +1,77 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { prefetchSounds } from "./soundUtils";
+
+const bytesOf = (buffer: ArrayBuffer): number[] => [...new Uint8Array(buffer)];
+
+describe("prefetchSounds", () => {
+  const fetchSpy = vi.fn<typeof fetch>();
+
+  beforeEach(() => {
+    vi.stubGlobal("fetch", fetchSpy);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    fetchSpy.mockReset();
+  });
+
+  it("fetches sounds given as ordinary URLs", async () => {
+    fetchSpy.mockResolvedValue(
+      new Response(new Uint8Array([1, 2, 3]), { status: 200 }),
+    );
+    const sounds = await prefetchSounds({
+      beep: { ogg: "https://example.org/beep.ogg" },
+    });
+    expect(fetchSpy).toHaveBeenCalledWith("https://example.org/beep.ogg");
+    expect(bytesOf(sounds.beep)).toEqual([1, 2, 3]);
+  });
+
+  it("decodes base64 data: URLs without fetching them", async () => {
+    // "OggS" — the bytes 0x4f 0x67 0x67 0x53
+    const sounds = await prefetchSounds({
+      beep: { ogg: "data:audio/ogg;base64,T2dnUw==" },
+    });
+    expect(fetchSpy).not.toHaveBeenCalled();
+    expect(bytesOf(sounds.beep)).toEqual([0x4f, 0x67, 0x67, 0x53]);
+  });
+
+  it("decodes percent-encoded data: URLs without fetching them", async () => {
+    const sounds = await prefetchSounds({
+      beep: { ogg: "data:audio/ogg,Ogg%53" },
+    });
+    expect(fetchSpy).not.toHaveBeenCalled();
+    expect(bytesOf(sounds.beep)).toEqual([0x4f, 0x67, 0x67, 0x53]);
+  });
+
+  it("leaves out a sound whose response is not okay", async () => {
+    fetchSpy.mockResolvedValue(new Response(null, { status: 404 }));
+    const sounds = await prefetchSounds({
+      beep: { ogg: "https://example.org/missing.ogg" },
+    });
+    expect(sounds).toEqual({});
+  });
+
+  it("leaves out a sound that fails to load, keeping the others", async () => {
+    fetchSpy.mockRejectedValue(new TypeError("Failed to fetch"));
+    const sounds = await prefetchSounds({
+      beep: { ogg: "https://example.org/beep.ogg" },
+      boop: { ogg: "data:audio/ogg;base64,T2dnUw==" },
+    });
+    expect(Object.keys(sounds)).toEqual(["boop"]);
+  });
+
+  it("leaves out a sound with a malformed data: URL", async () => {
+    const sounds = await prefetchSounds({
+      beep: { ogg: "data:audio/ogg;base64" },
+    });
+    expect(sounds).toEqual({});
+  });
+});
diff --git a/src/soundUtils.ts b/src/soundUtils.ts
index 3e774802..18d2785a 100644
--- a/src/soundUtils.ts
+++ b/src/soundUtils.ts
@@ -32,6 +32,43 @@ function getPreferredAudioFormat(): "ogg" | "mp3" {
 
 const preferredFormat = getPreferredAudioFormat();
 
+/**
+ * Decode a `data:` URL into the bytes it carries.
+ *
+ * The component build inlines the sound files as `data:` URLs. Those could be
+ * `fetch`ed like any other URL, but that fetch is subject to the host page's
+ * Content Security Policy, and `connect-src` lists rarely allow `data:` (a `*`
+ * source does not cover it). Reading the bytes out of the URL directly needs no
+ * network access, so no policy can stop it.
+ * @param url The `data:` URL to decode.
+ * @returns The decoded bytes.
+ */
+function decodeDataUrl(url: string): ArrayBuffer {
+  const separator = url.indexOf(",");
+  if (!url.startsWith("data:") || separator === -1)
+    throw new Error("Not a valid data: URL");
+  const header = url.slice("data:".length, separator);
+  const payload = url.slice(separator + 1);
+  const decoded = header.split(";").includes("base64")
+    ? atob(payload)
+    : decodeURIComponent(payload);
+  // `decoded` is a binary string: one char per byte
+  const bytes = Uint8Array.from(decoded, (c) => c.charCodeAt(0));
+  return bytes.buffer;
+}
+
+/**
+ * Load the bytes of a single sound file.
+ * @param url Where the sound is: an ordinary URL to fetch, or a `data:` URL.
+ * @returns The bytes, or null if the sound could not be loaded.
+ */
+async function loadSound(url: string): Promise<ArrayBuffer | null> {
+  if (url.startsWith("data:")) return decodeDataUrl(url);
+  const response = await fetch(url);
+  if (isFailure(response)) return null;
+  return await response.arrayBuffer();
+}
+
 /**
  * Prefetch sounds to be used by the AudioContext. This can
  * be called outside the scope of a component to ensure the
@@ -47,18 +84,21 @@ export async function prefetchSounds<S extends string>(
     Object.entries(sounds).map(async ([name, file]) => {
       const { mp3, ogg } = file as SoundDefinition;
       // Use preferred format, fallback to ogg if no mp3 is provided.
-      // Load an audio file
-      const response = await fetch(
-        preferredFormat === "ogg" ? ogg : (mp3 ?? ogg),
-      );
-      if (isFailure(response)) {
+      const url = preferredFormat === "ogg" ? ogg : (mp3 ?? ogg);
+      let buffer: ArrayBuffer | null = null;
+      try {
+        buffer = await loadSound(url);
+      } catch (e) {
+        logger.warn(`Could not load sound ${name}`, e);
+        return;
+      }
+      if (buffer === null) {
         // If the sound doesn't load, it's not the end of the world. We won't play
         // the sound when requested, but it's better than failing the whole application.
         logger.warn(`Could not load sound ${name}, response was not okay`);
         return;
       }
-      // Decode it
-      buffers[name] = await response.arrayBuffer();
+      buffers[name] = buffer;
     }),
   );
   return buffers as Record<S, ArrayBuffer>;

From 16c60c8b6b964587519391d77a8aa18364c09ad4 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Wed, 30 Sep 2026 11:22:19 +0200
Subject: [PATCH 132/154] Warn when the audio context fails to set up.

---
 src/useAudioContext.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/useAudioContext.tsx b/src/useAudioContext.tsx
index 8af8bdeb..68114812 100644
--- a/src/useAudioContext.tsx
+++ b/src/useAudioContext.tsx
@@ -156,7 +156,7 @@ export function useAudioContext<S extends string>(
       }
       setAudioBuffers(buffers as Record<S, AudioBuffer>);
     })().catch((ex) => {
-      logger.debug("Failed to setup audio context", ex);
+      logger.warn("Failed to setup audio context", ex);
     });
 
     setAudioContext(ctx);

From bd8c3142a61f1a2549bbfd0c4164acb967c9e3c3 Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Wed, 30 Sep 2026 11:35:06 +0200
Subject: [PATCH 133/154] Set up a layered build for CI similar to what EW does

---
 .github/workflows/build-element-call.yaml | 12 ++++
 .github/workflows/build.yaml              |  3 +
 .github/workflows/lint.yaml               |  6 +-
 .github/workflows/test.yaml               | 13 ++++
 .gitignore                                |  3 +
 docs/linking.md                           | 15 +++++
 scripts/fetchdep.sh                       | 73 +++++++++++++++++++++++
 scripts/layered.sh                        | 59 ++++++++++++++++++
 8 files changed, 182 insertions(+), 2 deletions(-)
 create mode 100755 scripts/fetchdep.sh
 create mode 100755 scripts/layered.sh

diff --git a/.github/workflows/build-element-call.yaml b/.github/workflows/build-element-call.yaml
index f4071975..2eeb8b57 100644
--- a/.github/workflows/build-element-call.yaml
+++ b/.github/workflows/build-element-call.yaml
@@ -14,6 +14,11 @@ on:
         description: The build mode for vite. Must be either 'development' or 'production'
         required: false
         default: production
+      layered:
+        type: boolean
+        description: Build against the matching branch of matrix-js-sdk (if any) instead of the locked commit.
+        required: false
+        default: false
     secrets:
       SENTRY_ORG:
         required: true
@@ -43,8 +48,15 @@ jobs:
           cache: "pnpm"
           node-version-file: ".node-version"
       - name: Install dependencies
+        if: ${{ !inputs.layered }}
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
         run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
+      - name: Install dependencies (layered)
+        if: ${{ inputs.layered }}
+        # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
+        run: "scripts/layered.sh --ignore-pnpmfile"
+        env:
+          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
       - name: Build Element Call
         run: pnpm run build:"$PACKAGE":"$BUILD_MODE"
         env:
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
index 3fe10723..aa14a3df 100644
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -15,6 +15,7 @@ jobs:
       package: full
       vite_app_version: ${{ github.event.release.tag_name || github.sha }}
       build_mode: ${{ github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'development build') && 'development' || 'production' }}
+      layered: ${{ github.event_name == 'pull_request' }}
     secrets:
       SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
       SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
@@ -65,6 +66,7 @@ jobs:
       package: embedded
       vite_app_version: ${{ github.event.release.tag_name || github.sha }}
       build_mode: ${{ github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'development build') && 'development' || 'production' }}
+      layered: ${{ github.event_name == 'pull_request' }}
     secrets:
       SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
       SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
@@ -79,6 +81,7 @@ jobs:
       package: sdk
       vite_app_version: ${{ github.event.release.tag_name || github.sha }}
       build_mode: ${{ github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'development build') && 'development' || 'production' }}
+      layered: ${{ github.event_name == 'pull_request' }}
     secrets:
       SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
       SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
diff --git a/.github/workflows/lint.yaml b/.github/workflows/lint.yaml
index ad92e7d1..89d0baf6 100644
--- a/.github/workflows/lint.yaml
+++ b/.github/workflows/lint.yaml
@@ -17,9 +17,11 @@ jobs:
         with:
           cache: "pnpm"
           node-version-file: ".node-version"
-      - name: Install dependencies
+      - name: Install dependencies (layered)
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
-        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
+        run: "scripts/layered.sh --ignore-pnpmfile"
+        env:
+          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
       - name: Formatting
         run: "pnpm run format:check"
       - name: i18n
diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index 3f86f093..582e8ab2 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -20,8 +20,15 @@ jobs:
           cache: "pnpm"
           node-version-file: ".node-version"
       - name: Install dependencies
+        if: github.event_name != 'pull_request'
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
         run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
+      - name: Install dependencies (layered)
+        if: github.event_name == 'pull_request'
+        # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
+        run: "scripts/layered.sh --ignore-pnpmfile"
+        env:
+          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
       - name: Get Playwright version
         run: echo "PLAYWRIGHT_VERSION=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[0].devDependencies["@playwright/test"].version')" >> $GITHUB_ENV
       - name: Cache Playwright binaries
@@ -58,8 +65,14 @@ jobs:
           cache: "pnpm"
           node-version-file: ".node-version"
       - name: Install dependencies
+        if: github.event_name != 'pull_request'
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
         run: pnpm install --frozen-lockfile --ignore-pnpmfile
+      - name: Install dependencies (layered)
+        if: github.event_name == 'pull_request'
+        run: scripts/layered.sh --ignore-pnpmfile
+        env:
+          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
       - name: Get Playwright version
         run: echo "PLAYWRIGHT_VERSION=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[0].devDependencies["@playwright/test"].version')" >> $GITHUB_ENV
       - name: Cache Playwright binaries
diff --git a/.gitignore b/.gitignore
index 14e96439..4233ecbe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,3 +41,6 @@ yarn-error.log
 
 *storybook.log
 storybook-static
+
+# Nested checkout made by scripts/layered.sh
+/matrix-js-sdk/
diff --git a/docs/linking.md b/docs/linking.md
index 3a18844d..3ee49a1a 100644
--- a/docs/linking.md
+++ b/docs/linking.md
@@ -60,6 +60,21 @@ git config --local core.hooksPath .githooks
 
 This will add the hook path for this repository only to .gihooks. which is a tracked (by git) folder containing the pre-commit hook.
 
+## Testing against a matrix-js-sdk branch in CI
+
+Linking covers local development. In CI, `scripts/layered.sh` plays the same
+role for `matrix-js-sdk`: after the usual frozen install, `scripts/fetchdep.sh`
+looks for a matrix-js-sdk branch with the same name as the pull request's head
+branch (in the fork first, when the pull request comes from one). If there is
+one, it is cloned, packed and installed over the locked version. If there is
+none, the install stays as `pnpm-lock.yaml` pins it.
+
+This means a change that needs a not yet merged matrix-js-sdk change can be tested
+by giving both branches the same name. This mirrors how element-web tests against
+matrix-js-sdk. Once the matrix-js-sdk branch is merged and deleted, the pull
+request falls back to the lockfile and needs a lockfile bump to stay green,
+which is also what keeps `main` consistent after the merge.
+
 ## Background
 
 Information, why this approach is used can be found in the [linking concept reasoning](./linking_concept_reasoning.md) document.
diff --git a/scripts/fetchdep.sh b/scripts/fetchdep.sh
new file mode 100755
index 00000000..705b3b80
--- /dev/null
+++ b/scripts/fetchdep.sh
@@ -0,0 +1,73 @@
+#!/usr/bin/env bash
+
+# Clones the branch of a dependency's repository that has the same name as
+# the pull request branch under test, so a change spanning both repositories
+# can be tested before either side is merged. Inspired by scripts/fetchdep.sh 
+# element-web.
+#
+# Usage: scripts/fetchdep.sh <org> <repo> [ref]
+#
+# The clone lands in ./<repo>. When the pull request comes from a fork and
+# PR_HEAD_REPO_OWNER was set, the fork's own copy of the repository is tried
+# before <org>'s. Exits 0 when a branch was cloned and 1 when there is none,
+# so the caller can keep the locked version in that case. Without a ref,
+# nothing is closed outside a pull request.
+
+set -eu
+
+org=$1
+repo=$2
+ref=${3:-}
+
+rm -rf "$repo"
+
+# If a ref was passed, try to clone it or die.
+if [ -n "$ref" ]; then
+    echo "fetchdep.sh: Using $org/$repo at $ref"
+    git clone --depth 1 "https://github.com/$org/$repo.git" "$repo"
+    git -C "$repo" fetch --depth 1 origin "$ref"
+    git -C "$repo" -c advice.detachedHead=false checkout FETCH_HEAD
+    git -C "$repo" log -1
+    exit 0
+fi
+
+# Otherwise ensure that we're on a pull request.
+head_ref=${GITHUB_HEAD_REF:-}
+if [ -z "$head_ref" ]; then
+    echo "fetchdep.sh: Not a pull request, nothing to match"
+    exit 1
+fi
+
+# Bots name their branches the same way in every repository, so a match on
+# one of theirs would be a coincidence rather than a paired change.
+case "$head_ref" in
+    renovate/* | dependabot/*)
+        echo "fetchdep.sh: Not matching bot branch $head_ref"
+        exit 1
+        ;;
+esac
+
+# Clones a branch if it exists and ends the script on success.
+clone() {
+    local try_org=$1
+    local branch=$2
+    echo "fetchdep.sh: Trying to use $try_org/$repo#$branch"
+    # Disable auth prompts: https://serverfault.com/a/665959
+    if GIT_TERMINAL_PROMPT=0 git clone "https://github.com/$try_org/$repo.git" "$repo" --branch "$branch" --depth 1; then
+        git -C "$repo" log -1
+        # Surface the match on the workflow run summary.
+        echo "::notice title=Matched $repo branch::Using $try_org/$repo#$branch at $(git -C "$repo" rev-parse HEAD)"
+        exit 0
+    fi
+}
+
+# Try cloning from the fork, then from the org.
+head_owner=${PR_HEAD_REPO_OWNER:-}
+if [ -n "$head_owner" ] && [ "$head_owner" != "${GITHUB_REPOSITORY_OWNER:-}" ]; then
+    clone "$head_owner" "$head_ref"
+fi
+clone "$org" "$head_ref"
+
+# Nothing worked. Die.
+echo "fetchdep.sh: No branch named $head_ref in $org/$repo"
+exit 1
diff --git a/scripts/layered.sh b/scripts/layered.sh
new file mode 100755
index 00000000..878d7dc8
--- /dev/null
+++ b/scripts/layered.sh
@@ -0,0 +1,59 @@
+#!/usr/bin/env bash
+
+# Installs dependencies, then swaps matrix-js-sdk for a branch of the same
+# name as the pull request branch under test if one exists. This is what
+# lets CI test an Element Call branch together with a matrix-js-sdk branch
+# before either is merged. Without a matching branch the install is left as
+# pnpm-lock.yaml pins it. Inspired by scripts/layered.sh in element-web.
+#
+# Usage: scripts/layered.sh [pnpm install flags]
+#
+# The matrix-js-sdk checkout is nested inside this directory because some CI
+# systems do not allow moving above the primary checkout. It is git-ignored.
+#
+# Set JS_SDK_GITHUB_BASE_REF to a ref to use that exact ref of matrix-js-sdk
+# instead of looking for a matching branch.
+#
+# This script is only meant to be used in CI. For local development use
+# see docs/linking.md.
+
+set -ex
+
+# Paths below are relative to the repository root.
+cd "$(dirname "$0")/.."
+
+pnpm install --frozen-lockfile "$@"
+
+js_sdk_dep=$(jq -r '.devDependencies["matrix-js-sdk"]' < package.json)
+
+# Only layer when package.json follows the branch head rather than pinning a
+# release, so a release build keeps its pinned version.
+if [ "$js_sdk_dep" != "github:matrix-org/matrix-js-sdk#develop" ]; then
+    echo "layered.sh: Skipping matrix-js-sdk fetch and install as package.json pins $js_sdk_dep"
+    exit 0
+fi
+
+if ! scripts/fetchdep.sh matrix-org matrix-js-sdk "${JS_SDK_GITHUB_BASE_REF:-}"; then
+    echo "layered.sh: No matching matrix-js-sdk branch, keeping the locked version"
+    exit 0
+fi
+
+# matrix-js-sdk pins its pnpm version in `devEngines` only. Under corepack,
+# pnpm does not switch versions on its own and corepack, finding no
+# `packageManager` field there, would walk up to this project's and use
+# ours. Pinning it in the clone makes every pnpm invocation inside that
+# directory, including the `prepare` script run by pack, use the right one.
+js_sdk_pnpm="pnpm@$(jq -r '.devEngines.packageManager.version' < matrix-js-sdk/package.json)"
+jq --arg pm "$js_sdk_pnpm" '.packageManager = $pm' matrix-js-sdk/package.json > matrix-js-sdk/package.json.tmp
+mv matrix-js-sdk/package.json.tmp matrix-js-sdk/package.json
+export COREPACK_ENABLE_DOWNLOAD_PROMPT=0
+
+# Install matrix-js-sdk's build dependencies. `prepare` runs on pack below,
+# so it is skipped here.
+(cd matrix-js-sdk && pnpm install --frozen-lockfile --ignore-scripts)
+
+# Rather than `pnpm link`, build matrix-js-sdk into a tarball and install
+# that. This better reflects a clean install: dependencies may be hoisted
+# and shared, and there is no tsconfig.json to pick up sources from.
+(cd matrix-js-sdk && pnpm pack --out matrix-js-sdk.tgz)
+pnpm install "$(pwd)/matrix-js-sdk/matrix-js-sdk.tgz" "$@"

From 363a8feab2589de19520267f3b72e2cd1ffbb28f Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Wed, 30 Sep 2026 17:10:17 +0200
Subject: [PATCH 134/154] Stop bundling Compound, let the host supply it

---
 README.md                             | 10 ++++--
 component/ElementCall.module.css      | 29 +++++-------------
 component/PortalRoot.test.tsx         | 43 --------------------------
 component/PortalRoot.tsx              | 44 ---------------------------
 component/build/scopeStylesToRoot.ts  | 15 ++++-----
 component/dev/main.tsx                | 10 ++++++
 component/index.tsx                   | 19 ++++++++----
 component/package.json                |  2 ++
 docs/agents/architecture.md           |  5 ++-
 package.json                          |  1 -
 pnpm-lock.yaml                        |  3 --
 scripts/check-component-externals.mjs | 14 +++++++--
 src/base.css                          | 34 +++++++++------------
 src/index.css                         | 16 +++++++++-
 vite-component.config.ts              | 10 ++++--
 15 files changed, 101 insertions(+), 154 deletions(-)
 delete mode 100644 component/PortalRoot.test.tsx
 delete mode 100644 component/PortalRoot.tsx

diff --git a/README.md b/README.md
index e7f9a62d..38af140b 100644
--- a/README.md
+++ b/README.md
@@ -306,8 +306,14 @@ directory target it rather than the repository; run them from the repository
 root. The host imports the component from
 `@element-hq/element-call-component` and the stylesheet from
 `@element-hq/element-call-component/style.css`, and has to provide `react`,
-`react-dom`, `matrix-js-sdk` and `livekit-client` itself, since the bundle leaves
-them external.
+`react-dom`, `matrix-js-sdk`, `livekit-client`, `@vector-im/compound-web` and
+`@vector-im/compound-design-tokens` itself, since the bundle leaves them
+external. Compound's stylesheet (`@vector-im/compound-web/dist/style.css`), the
+design tokens' CSS and the Inter and Inconsolata fonts are the host's to load
+too: the component shares the host's copy of Compound, so that the tooltips and
+menus Compound floats into the host's body are styled by the host's stylesheet
+like everything else there, and the component's own stylesheet stays confined
+to its root.
 
 The component is large, and a host will usually load it lazily, only once a
 call is shown. Everything a host needs in order to talk about a call before
diff --git a/component/ElementCall.module.css b/component/ElementCall.module.css
index ee792a73..8d548404 100644
--- a/component/ElementCall.module.css
+++ b/component/ElementCall.module.css
@@ -34,21 +34,14 @@ component rather than a page makes. */
   -webkit-tap-highlight-color: transparent;
 }
 
-/* floating-ui's portal node, which `PortalRoot` puts here to hold the call
-along with the tooltips Compound floats over it. It fills the container, and
-lays out its children as the container would. */
-.root > [data-floating-ui-portal] {
-  display: flex;
-  flex-direction: column;
-  block-size: 100%;
-  position: relative;
-}
+/* The call itself. It is a stacking context of its own, as the standalone
+page's `#root` is, so that the layers the call view uses for its header, footer
+and overlays stay below the modals and toasts, which are portalled into the
+root and carry no layer of their own.
 
-/* The call itself, in the wrapper `PortalRoot` gives it. It is a stacking
-context of its own, as the standalone page's `#root` is, so that the layers
-the call view uses for its header, footer and overlays stay below the modals
-and toasts, which are portalled into the root and carry no layer of their own,
-and below the tooltips. */
+What Compound floats — tooltips, menus — is not in here at all: it goes into
+the host's body, as it would for any other component on the host's page, and is
+styled and layered by the host's copy of Compound. */
 .content {
   display: flex;
   flex-direction: column;
@@ -56,11 +49,3 @@ and below the tooltips. */
   position: relative;
   isolation: isolate;
 }
-
-/* The tooltips sit in portal nodes of their own, nested in ours. Raised, so
-that a tooltip opened inside a modal shows above it: the modal is portalled
-straight into the root and so comes later in the document than our node. */
-.root > [data-floating-ui-portal] > [data-floating-ui-portal] {
-  position: relative;
-  z-index: 1;
-}
diff --git a/component/PortalRoot.test.tsx b/component/PortalRoot.test.tsx
deleted file mode 100644
index f5d133d8..00000000
--- a/component/PortalRoot.test.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { render, screen } from "@testing-library/react";
-import { Tooltip, TooltipProvider } from "@vector-im/compound-web";
-import { afterEach, describe, expect, test } from "vitest";
-
-import { PortalRoot } from "./PortalRoot";
-
-describe("PortalRoot", () => {
-  const root = document.createElement("div");
-  document.body.appendChild(root);
-  afterEach(() => root.replaceChildren());
-
-  // A label tooltip is in the DOM from the start, hidden by the stylesheet until
-  // hovered, which is what makes it show as bare text when it lands outside the
-  // root
-  const tree = (
-    <TooltipProvider>
-      <Tooltip label="Mute microphone">
-        <button>mic</button>
-      </Tooltip>
-    </TooltipProvider>
-  );
-
-  test("Compound's tooltips float into the root", () => {
-    render(<PortalRoot root={root}>{tree}</PortalRoot>);
-    expect(root).toContainElement(
-      screen.getByRole("button", { name: "Mute microphone" }),
-    );
-    expect(root).toContainElement(screen.getByText("Mute microphone"));
-  });
-
-  test("without it they float into the body", () => {
-    render(tree);
-    expect(root).not.toContainElement(screen.getByText("Mute microphone"));
-    expect(document.body).toContainElement(screen.getByText("Mute microphone"));
-  });
-});
diff --git a/component/PortalRoot.tsx b/component/PortalRoot.tsx
deleted file mode 100644
index 20eeecb0..00000000
--- a/component/PortalRoot.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { FloatingPortal } from "@floating-ui/react";
-import { type FC, type ReactNode } from "react";
-
-import styles from "./ElementCall.module.css";
-
-/**
- * Keeps what Compound floats over Element Call, its tooltips, inside Element
- * Call's root.
- *
- * Compound's `Tooltip` renders its bubble through floating-ui's
- * `FloatingPortal`, which appends to `document.body` unless it sits inside
- * another `FloatingPortal`, whose node it then shares. Compound offers no way
- * to name a container, so this is that enclosing portal: it puts its node
- * inside `root` and renders the children into it, and every tooltip they open
- * lands in the same node, inside the element the component's stylesheet is
- * confined to. Outside it, a tooltip matches none of the component's rules and
- * shows as bare text, permanently, since the rule that hides a label tooltip
- * until it is hovered is one of them.
- *
- * The children go in a wrapper of their own, which stands in for the `#root`
- * of the standalone page: it fills the node and is a stacking context, so
- * that the call's own layers (its header and footer, its overlays) stay below
- * the modals and toasts portalled into the root, and below the tooltips beside
- * it. `ElementCall.module.css` lays both out.
- *
- * Nothing renders until `root` exists, just as nothing renders before Element
- * Call's container does. The portal's tab order guards are for a focus
- * manager, which nothing in Element Call puts here, so they are off.
- */
-export const PortalRoot: FC<{
-  root: HTMLElement | null;
-  children: ReactNode;
-}> = ({ root, children }) => (
-  <FloatingPortal root={root} preserveTabOrder={false}>
-    <div className={styles.content}>{children}</div>
-  </FloatingPortal>
-);
diff --git a/component/build/scopeStylesToRoot.ts b/component/build/scopeStylesToRoot.ts
index 9e7e8037..e7d9e1d6 100644
--- a/component/build/scopeStylesToRoot.ts
+++ b/component/build/scopeStylesToRoot.ts
@@ -40,10 +40,10 @@ const IS_ROOT = `:where(${ROOT_SELECTOR})`;
  * Element Call as a component.
  *
  * As a page of its own, Element Call can style the document: normalize.css and
- * Compound speak of `html`, `body` and bare elements, and the design tokens are
- * declared on `:root`. As a component, all of that would land on the host's
- * document too. This rewrites every selector so that it matches only the root
- * or its descendants:
+ * its own base styles speak of `html`, `body` and bare elements, and its custom
+ * properties are declared on `:root`. As a component, all of that would land on
+ * the host's document too. This rewrites every selector so that it matches only
+ * the root or its descendants:
  *
  * - `html`, `body` and `:root` become the root element, which is what stands in
  *   for the document inside a host.
@@ -55,9 +55,10 @@ const IS_ROOT = `:where(${ROOT_SELECTOR})`;
  * CSS modules are scoped by their class names already, so only their selectors
  * that would match by element alone — `pre` rather than `.pre` — are touched.
  *
- * The root's fonts and design tokens are still inherited by everything inside
- * it, the way they were from `body` and `:root`, and `@font-face` declarations
- * stay global, which they are by nature.
+ * The root's custom properties are still inherited by everything inside it,
+ * the way they were from `:root`. Compound's own stylesheet — the design
+ * tokens, the component styles, the fonts — is not in this build at all: the
+ * host supplies it, unscoped, along with its copy of Compound.
  */
 export function scopeStylesToRoot(): Plugin {
   return {
diff --git a/component/dev/main.tsx b/component/dev/main.tsx
index 9150678d..b9d12e2d 100644
--- a/component/dev/main.tsx
+++ b/component/dev/main.tsx
@@ -9,6 +9,16 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { logger } from "matrix-js-sdk/lib/logger";
 
+// What a host provides along with its copy of Compound: its stylesheet, the
+// design tokens and the fonts they name. The component does not bundle them.
+import "@fontsource/inter/400.css";
+import "@fontsource/inter/500.css";
+import "@fontsource/inter/600.css";
+import "@fontsource/inter/700.css";
+import "@fontsource/inconsolata/400.css";
+import "@fontsource/inconsolata/700.css";
+import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
+import "@vector-im/compound-web/dist/style.css";
 import { type ConfigOptions, initializeElementCall } from "../index";
 import { Harness } from "./Harness";
 // After Element Call's, so that the host has the last word on its own page
diff --git a/component/index.tsx b/component/index.tsx
index 2c0577d9..8f901c13 100644
--- a/component/index.tsx
+++ b/component/index.tsx
@@ -17,19 +17,25 @@ Please see LICENSE in the repository root for full details.
  * host instead, or is confined to the container it is mounted in.
  */
 
-// The design tokens, fonts and element defaults every Element Call stylesheet
+// The element defaults and custom properties every Element Call stylesheet
 // builds on. Written for a page, they speak of `html`, `body` and bare
 // elements; the component build confines them, and every other stylesheet in
 // this bundle, to the root element below (see build/scopeStylesToRoot.ts), so
 // that the host's document is left as it was.
 //
+// Compound is not in here. The component uses the host's copy of it (a peer
+// dependency, left external by the build), and the host loads Compound's
+// stylesheet, design tokens and fonts along with it: what Compound floats into
+// the host's body — tooltips, menus — is then styled by the same stylesheet as
+// everything else there, and Element Call's root takes the tokens and fonts of
+// the theme class it carries, as any element on the host's page would.
+//
 // Where these land relative to the component stylesheets is the bundler's
 // choice — the standalone app puts them first, this build puts them in the
 // middle — so nothing in base.css may depend on winning or losing against a
 // component's own rules at equal specificity. It currently does not: what it
 // declares unlayered is custom properties on Element Call's root, which
-// components inherit rather than compete with, and everything from Compound
-// sits in a `@layer`, which loses to unlayered rules either way.
+// components inherit rather than compete with.
 import "../src/base.css";
 
 import {
@@ -57,7 +63,6 @@ import { ErrorPage } from "../src/FullScreenView";
 import { ClientProvider } from "../src/ClientContext";
 import { HostBridgeProvider } from "../src/HostBridge";
 import { RootElementProvider, useRootElement } from "../src/RootElementContext";
-import { PortalRoot } from "./PortalRoot";
 import {
   configurationForIntent,
   componentProperties,
@@ -232,7 +237,9 @@ export const ElementCall: FC<ElementCallProps> = ({
         <UrlParamsProvider value={params}>
           <div ref={setContainer} className={styles.root}>
             {ready && (
-              <PortalRoot root={container}>
+              // Stands in for the standalone page's `#root`: see `.content`
+              // in ElementCall.module.css
+              <div className={styles.content}>
                 <RootElementProvider value={container}>
                   {/* Whatever goes wrong in here is shown in here. Left to
                   propagate, an error would unmount the host's own tree. */}
@@ -261,7 +268,7 @@ export const ElementCall: FC<ElementCallProps> = ({
                     </Decoration>
                   </ErrorBoundary>
                 </RootElementProvider>
-              </PortalRoot>
+              </div>
             )}
           </div>
         </UrlParamsProvider>
diff --git a/component/package.json b/component/package.json
index 79aa286c..ee81cd51 100644
--- a/component/package.json
+++ b/component/package.json
@@ -38,6 +38,8 @@
     "prepare": "cd .. && pnpm install --frozen-lockfile && pnpm build:component"
   },
   "peerDependencies": {
+    "@vector-im/compound-design-tokens": "^11.0.0",
+    "@vector-im/compound-web": "^10.0.0",
     "livekit-client": "^2.18.1",
     "matrix-js-sdk": "*",
     "react": "^19",
diff --git a/docs/agents/architecture.md b/docs/agents/architecture.md
index bd00bf32..fab783c1 100644
--- a/docs/agents/architecture.md
+++ b/docs/agents/architecture.md
@@ -76,7 +76,10 @@ Code that builds in only one is a bug.
 - `build:component` — `@element-hq/element-call-component`, sources in `component/`
   (its own pnpm project; run pnpm from the repo root). Host API is in the README;
   `pnpm lint:externals` rejects an import of a `react` / `react-dom` /
-  `matrix-js-sdk` / `livekit-client` subpath the externals list omits. Two entry
+  `matrix-js-sdk` / `livekit-client` / `@vector-im/compound-web` /
+  `@vector-im/compound-design-tokens` subpath the externals list omits.
+  Compound's stylesheets are loaded by `src/index.css` for the page and by the
+  host for the component, never by `src/base.css`. Two entry
   points: `index.tsx` (the component) and `api.ts` (types, enums and
   `configurationForIntent`, for a host that must not load the component). `api.ts`
   may only reach types and constants — `src/UrlConfiguration.ts`, not `UrlParams`.
diff --git a/package.json b/package.json
index 204b3a0a..c7642f57 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,6 @@
   },
   "devDependencies": {
     "@codecov/vite-plugin": "^1.3.0",
-    "@floating-ui/react": "^0.27.0",
     "@fontsource/inconsolata": "^5.1.0",
     "@fontsource/inter": "^5.1.0",
     "@formatjs/intl-durationformat": "^0.10.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b34a0983..be07cd29 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,9 +25,6 @@ importers:
       '@codecov/vite-plugin':
         specifier: ^1.3.0
         version: 1.9.1(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
-      '@floating-ui/react':
-        specifier: ^0.27.0
-        version: 0.27.20(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@fontsource/inconsolata':
         specifier: ^5.1.0
         version: 5.3.0
diff --git a/scripts/check-component-externals.mjs b/scripts/check-component-externals.mjs
index ee7d57da..42d9235d 100644
--- a/scripts/check-component-externals.mjs
+++ b/scripts/check-component-externals.mjs
@@ -9,9 +9,11 @@ Please see LICENSE in the repository root for full details.
  * Checks that the component build leaves the packages a host must supply to
  * the host.
  *
- * A host application already has React, the Matrix SDK and LiveKit, and a
- * second copy of any of them is worse than dead weight: React would hold two
- * sets of hooks, and the Matrix client would run two sync loops. So the
+ * A host application already has React, the Matrix SDK, LiveKit and Compound,
+ * and a second copy of any of them is worse than dead weight: React would hold
+ * two sets of hooks, the Matrix client would run two sync loops, and a second
+ * Compound would style the tooltips it floats into the host's body with class
+ * names the host's stylesheet does not know. So the
  * component build lists them as external — but that list has to name every
  * subpath, since the bundler silently ignores the pattern and callback forms
  * of the option, and an import it does not cover is bundled with no warning at
@@ -33,6 +35,9 @@ import { loadConfigFromFile } from "vite";
 
 const CONFIG = "vite-component.config.ts";
 const SOURCES = ["src", "component"];
+// The development harness is a host, not part of the component: it is the
+// one that imports what a host supplies (Compound's stylesheets, say).
+const EXCLUDED = ["component/dev"];
 
 /** The packages whose duplication would break a host, rather than merely enlarge it. */
 const MUST_BE_EXTERNAL = [
@@ -40,6 +45,8 @@ const MUST_BE_EXTERNAL = [
   "react-dom",
   "matrix-js-sdk",
   "livekit-client",
+  "@vector-im/compound-web",
+  "@vector-im/compound-design-tokens",
 ];
 
 const isTestFile = (name) =>
@@ -49,6 +56,7 @@ const isTestFile = (name) =>
 async function* sourceFiles(dir) {
   for (const entry of await readdir(dir, { withFileTypes: true })) {
     const path = join(dir, entry.name);
+    if (EXCLUDED.includes(path)) continue;
     if (entry.isDirectory()) yield* sourceFiles(path);
     else if (/\.(ts|tsx)$/.test(entry.name) && !isTestFile(entry.name))
       yield path;
diff --git a/src/base.css b/src/base.css
index 51751eb7..b8eaf67e 100644
--- a/src/base.css
+++ b/src/base.css
@@ -5,19 +5,24 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-/* The styles Element Call needs wherever it is shown: the design tokens, fonts
-and element defaults its own stylesheets build on top of.
+/* The styles Element Call needs wherever it is shown: the element defaults and
+custom properties its own stylesheets build on top of.
 
 Split out from index.css so that Element Call as a component can have these
 without also being given the standalone page's layout, which would style the
-host's own document. What remains here still speaks of the
-document — normalize.css and the typography below use bare element selectors,
-and the custom properties are declared on `:root` — which is right for the
-page, and is why the component build rewrites it: there every selector is
-confined to Element Call's root element (see component/build/scopeStylesToRoot.ts),
-with `html`, `body` and `:root` becoming that element. Nothing needs to be
-written differently here for that to work, but nothing here may rely on
-reaching the host's document either.
+host's own document. Compound's stylesheets — the design tokens, the component
+styles and the fonts they use — are not here either: as a component, Element
+Call shares the host's copy of Compound (it is a peer dependency, so that what
+Compound floats into the host's body, tooltips and menus, is styled by the
+host's stylesheet), and index.css loads it for the page.
+
+What remains here still speaks of the document — normalize.css and the
+typography below use bare element selectors, and the custom properties are
+declared on `:root` — which is right for the page, and is why the component
+build rewrites it: there every selector is confined to Element Call's root
+element (see component/build/scopeStylesToRoot.ts), with `html`, `body` and
+`:root` becoming that element. Nothing needs to be written differently here for
+that to work, but nothing here may rely on reaching the host's document either.
 
 Nothing here should depend on where it lands relative to Element Call's
 component stylesheets: the bundler decides that, and it decides differently for
@@ -25,16 +30,7 @@ the app and for the component build. */
 
 @layer normalize, compound-legacy, compound;
 
-@import url("@fontsource/inter/400.css");
-@import url("@fontsource/inter/500.css");
-@import url("@fontsource/inter/600.css");
-@import url("@fontsource/inter/700.css");
-@import url("@fontsource/inconsolata/400.css");
-@import url("@fontsource/inconsolata/700.css");
-
 @import url("normalize.css/normalize.css") layer(normalize);
-@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
-@import url("@vector-im/compound-web/dist/style.css") layer(compound.components);
 
 :root {
   --font-scale: 1;
diff --git a/src/index.css b/src/index.css
index 7188f5e7..c52ae9e4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -7,10 +7,24 @@ Please see LICENSE in the repository root for full details.
 
 /* Styles for Element Call as a page of its own. The parts that apply wherever
 Element Call is shown live in base.css; these are about owning the document,
-and are not loaded when a host embeds Element Call as a component. */
+and are not loaded when a host embeds Element Call as a component.
+
+That includes Compound: the page brings the design tokens, the component styles
+and their fonts, where a host embedding the component supplies its own. The
+`compound` layers are ordered by base.css. */
 
 @import url("./base.css");
 
+@import url("@fontsource/inter/400.css");
+@import url("@fontsource/inter/500.css");
+@import url("@fontsource/inter/600.css");
+@import url("@fontsource/inter/700.css");
+@import url("@fontsource/inconsolata/400.css");
+@import url("@fontsource/inconsolata/700.css");
+
+@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
+@import url("@vector-im/compound-web/dist/style.css") layer(compound.components);
+
 body {
   background-color: var(--cpd-color-bg-canvas-default);
   color: var(--cpd-color-text-primary);
diff --git a/vite-component.config.ts b/vite-component.config.ts
index 09baac23..93e661ac 100644
--- a/vite-component.config.ts
+++ b/vite-component.config.ts
@@ -65,8 +65,12 @@ export default defineConfig(({ mode }) => {
       },
       rollupOptions: {
         // The host already has these, and a second copy of any of them does not
-        // merely bloat the bundle: React would hold two sets of hooks, and the
-        // Matrix client would run two sync loops.
+        // merely bloat the bundle: React would hold two sets of hooks, the
+        // Matrix client would run two sync loops, and a second Compound would
+        // bring a second stylesheet with class names of its own — so that what
+        // it floats into the host's body, tooltips and menus, would match the
+        // host's Compound stylesheet only when the two happened to be the same
+        // version.
         //
         // Every subpath has to be named. Element Call reaches most of the Matrix
         // SDK as `matrix-js-sdk/lib/…`, and a bare "matrix-js-sdk" would not
@@ -103,6 +107,8 @@ export default defineConfig(({ mode }) => {
           "matrix-js-sdk/lib/sync",
           "matrix-js-sdk/lib/types",
           "matrix-js-sdk/lib/utils",
+          "@vector-im/compound-web",
+          "@vector-im/compound-design-tokens/assets/web/icons",
         ],
       },
     },

From 9a286032f21a5b058330970c9ac77ec7eebccce9 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Thu, 1 Oct 2026 13:41:07 +0200
Subject: [PATCH 135/154] shorten readme

---
 README.md | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 38af140b..5f1ed6bd 100644
--- a/README.md
+++ b/README.md
@@ -297,8 +297,8 @@ The package is not published yet. A host installs it as a git dependency on the
 ```
 
 whose `prepare` script runs the build on install. That build needs pnpm (via
-Corepack) on the host's machine, runs a full `pnpm install` of this repository
-and is memory-hungry, since it inherits the `--max-old-space-size` setting of
+Corepack) on the host's machine, runs a full `pnpm install` of this repository,
+since it inherits the `--max-old-space-size` setting of
 the app build; the host's pnpm also has to allow it to run at all
 (`allowBuilds` in its `pnpm-workspace.yaml`). Note that `component/` is a pnpm
 project of its own for this reason, so pnpm commands run from inside that
@@ -308,12 +308,8 @@ root. The host imports the component from
 `@element-hq/element-call-component/style.css`, and has to provide `react`,
 `react-dom`, `matrix-js-sdk`, `livekit-client`, `@vector-im/compound-web` and
 `@vector-im/compound-design-tokens` itself, since the bundle leaves them
-external. Compound's stylesheet (`@vector-im/compound-web/dist/style.css`), the
-design tokens' CSS and the Inter and Inconsolata fonts are the host's to load
-too: the component shares the host's copy of Compound, so that the tooltips and
-menus Compound floats into the host's body are styled by the host's stylesheet
-like everything else there, and the component's own stylesheet stays confined
-to its root.
+external. Compound's stylesheet are the host's to load too: the component shares
+the host's copy of Compound, (required for example for tooltips)
 
 The component is large, and a host will usually load it lazily, only once a
 call is shown. Everything a host needs in order to talk about a call before

From d5733e82746e91ebedbb4639a39de95ae55e7270 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Thu, 1 Oct 2026 17:06:51 +0200
Subject: [PATCH 136/154] Reset matrix-js-sdk to develop branch, adopt new
 join/leave signatures

---
 package.json                                       |  2 +-
 pnpm-lock.yaml                                     | 10 +++++-----
 .../CallViewModel/localMember/LocalMember.test.ts  | 14 +++++++-------
 src/state/CallViewModel/localMember/LocalMember.ts |  9 +++------
 src/utils/test.ts                                  |  4 ++--
 5 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 05c9312b..c7642f57 100644
--- a/package.json
+++ b/package.json
@@ -103,7 +103,7 @@
     "livekit-client": "^2.18.1",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.9.1",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#robin/remove-oldest-membership",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
     "matrix-widget-api": "^1.18.0",
     "node-stdlib-browser": "^1.3.1",
     "normalize.css": "^8.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a982f7af..2cd2452c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -191,8 +191,8 @@ importers:
         specifier: ^1.9.1
         version: 1.9.2
       matrix-js-sdk:
-        specifier: github:matrix-org/matrix-js-sdk#robin/remove-oldest-membership
-        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/6defa47adae28feb7e3906dde25089e0dce42ece
+        specifier: github:matrix-org/matrix-js-sdk#develop
+        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999
       matrix-widget-api:
         specifier: ^1.18.0
         version: 1.19.0
@@ -4680,8 +4680,8 @@ packages:
   matrix-events-sdk@0.0.1:
     resolution: {integrity: sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==}
 
-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/6defa47adae28feb7e3906dde25089e0dce42ece:
-    resolution: {gitHosted: true, integrity: sha512-jHFmI2C29HJnzs/FIrqdmQD6ytyunyy627onhrxI+xxTGSfYrWhcTUFstNiCAaMt3fc0nNi9aVvLPD3IIglF2A==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/6defa47adae28feb7e3906dde25089e0dce42ece}
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999:
+    resolution: {gitHosted: true, integrity: sha512-qF8++74MX36KS1KEw6Lc8HHXgZ6nHD1oUU4yBZUj5vVPvZTIspk1lOGztkFmizE5vmLAHd5tdadL9Xu1Asy4bA==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999}
     version: 42.3.0
     engines: {node: '>=22.0.0'}
 
@@ -10249,7 +10249,7 @@ snapshots:
 
   matrix-events-sdk@0.0.1: {}
 
-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/6defa47adae28feb7e3906dde25089e0dce42ece:
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999:
     dependencies:
       '@babel/runtime': 8.0.0
       '@matrix-org/matrix-sdk-crypto-wasm': 18.9.0
diff --git a/src/state/CallViewModel/localMember/LocalMember.test.ts b/src/state/CallViewModel/localMember/LocalMember.test.ts
index 8e421771..282759fd 100644
--- a/src/state/CallViewModel/localMember/LocalMember.test.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.test.ts
@@ -138,7 +138,7 @@ describe("enterRTCSession", () => {
       client: mockedClient,
     },
     memberships: [],
-    joinRTCSession: vi.fn(),
+    join: vi.fn(),
   }) as unknown as MatrixRTCSession;
 
   beforeEach(() =>
@@ -150,7 +150,7 @@ describe("enterRTCSession", () => {
   it("It joins the correct Session", () => {
     enterRTCSession(mockedSession, ownMemberMock, transport, options);
 
-    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
+    expect(mockedSession.join).toHaveBeenLastCalledWith(
       {
         deviceId: "DEVICE",
         memberId: "@alice:example.org:DEVICE",
@@ -161,7 +161,7 @@ describe("enterRTCSession", () => {
     );
   });
 
-  it("passes keyRotationParticipantLimit from config to joinRTCSession", () => {
+  it("passes keyRotationParticipantLimit from config to join", () => {
     mockConfig({
       livekit: { livekit_service_url: "http://my-default-service-url.com" },
       matrix_rtc_session: {
@@ -174,7 +174,7 @@ describe("enterRTCSession", () => {
 
     enterRTCSession(mockedSession, ownMemberMock, transport, options);
 
-    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
+    expect(mockedSession.join).toHaveBeenLastCalledWith(
       expect.any(Object),
       expect.any(Object),
       expect.objectContaining({
@@ -186,7 +186,7 @@ describe("enterRTCSession", () => {
   it("uses the specified delayed leave timings", () => {
     enterRTCSession(mockedSession, ownMemberMock, transport, options);
 
-    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
+    expect(mockedSession.join).toHaveBeenLastCalledWith(
       expect.anything(),
       expect.anything(),
       expect.objectContaining({
@@ -206,7 +206,7 @@ describe("LocalMembership", () => {
     }),
     matrixRTCSession: {
       updateCallIntent: vi.fn().mockReturnValue(Promise.resolve()),
-      leaveRoomSession: vi.fn(),
+      leave: vi.fn(),
     } as unknown as MatrixRTCSession,
     muteStates: mockMuteStates(),
     trackProcessorState$: constant({
@@ -300,7 +300,7 @@ describe("LocalMembership", () => {
       ...defaultCreateLocalMemberValues,
       matrixRTCSession: {
         updateCallIntent: vi.fn().mockImplementation(reject),
-        leaveRoomSession: vi.fn(),
+        leave: vi.fn(),
       },
       connectionManager: mockConnectionManager,
       localTransport$: constant(mockTransport),
diff --git a/src/state/CallViewModel/localMember/LocalMember.ts b/src/state/CallViewModel/localMember/LocalMember.ts
index 36469e7a..5af8eb01 100644
--- a/src/state/CallViewModel/localMember/LocalMember.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.ts
@@ -151,10 +151,7 @@ interface Props {
   ownMembershipIdentity: CallMembershipIdentityParts;
   localTransport$: Observable<LocalTransport>;
   client: Pick<MatrixClient, "getDeviceId" | "getOpenIdToken">;
-  matrixRTCSession: Pick<
-    MatrixRTCSession,
-    "updateCallIntent" | "leaveRoomSession"
-  >;
+  matrixRTCSession: Pick<MatrixRTCSession, "updateCallIntent" | "leave">;
   /** Whether to hide the screen-sharing button. */
   hideScreensharing: boolean;
   /** The application hosting Element Call, to be kept informed of join/leave. */
@@ -682,7 +679,7 @@ export const createLocalMembership$ = ({
       return Promise.resolve(async (): Promise<void> => {
         try {
           // TODO Update matrixRTCSession to allow udpating the transport without leaving the session!
-          await matrixRTCSession.leaveRoomSession(1000);
+          await matrixRTCSession.leave(1000);
         } catch (e) {
           logger.error("Error leaving RTC session", e);
         }
@@ -998,7 +995,7 @@ export function enterRTCSession(
   // Multi-sfu does not need a preferred foci list. just the focus that is actually used.
   // TODO where/how do we track errors originating from the ongoing rtcSession?
 
-  rtcSession.joinRTCSession(ownMembershipIdentity, [transport], {
+  rtcSession.join(ownMembershipIdentity, [transport], {
     notificationType,
     callIntent,
     manageMediaKeys: encryptMedia,
diff --git a/src/utils/test.ts b/src/utils/test.ts
index 1c49c0da..6af9fd8c 100644
--- a/src/utils/test.ts
+++ b/src/utils/test.ts
@@ -472,7 +472,7 @@ export class MockRTCSession extends TypedEventEmitter<
     counters: {},
   };
 
-  public leaveRoomSession: ReturnType<typeof vitest.fn> = vitest
+  public leave: ReturnType<typeof vitest.fn> = vitest
     .fn()
     .mockResolvedValue(undefined);
 
@@ -531,7 +531,7 @@ export class MockRTCSession extends TypedEventEmitter<
     if (value !== prev) this.emit(MembershipManagerEvent.ProbablyLeft, value);
   }
 
-  public async joinRTCSession(): Promise<void> {
+  public async join(): Promise<void> {
     return Promise.resolve();
   }
 }

From 241412f29b27d409f368ed4e7eabc0082af66b27 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Fri, 2 Oct 2026 02:54:17 +0000
Subject: [PATCH 137/154] Update ghcr.io/element-hq/element-web:develop Docker
 digest to 588f0b4

---
 docker-compose-playwright.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index 89bc15f9..2e570de4 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -19,7 +19,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:cbb7be9a54352997748d02c36dc70ee877c705ee3518be31497717c9a2ff0395
+    image: ghcr.io/element-hq/element-web:develop@sha256:588f0b4ef516310331432e885920ed722bcafa577b1dd30429394c423d3e2848
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:cbb7be9a54352997748d02c36dc70ee877c705ee3518be31497717c9a2ff0395
+    image: ghcr.io/element-hq/element-web:develop@sha256:588f0b4ef516310331432e885920ed722bcafa577b1dd30429394c423d3e2848

From 9d0725ad31ce9faa7668847dd7f60eafd1e1aae1 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Fri, 2 Oct 2026 10:28:09 +0200
Subject: [PATCH 138/154] Fix Element Web integration tests

---
 playwright/fixtures/widget-user.ts | 2 +-
 playwright/widget/test-helpers.ts  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/playwright/fixtures/widget-user.ts b/playwright/fixtures/widget-user.ts
index 35c2d9fb..a60776c9 100644
--- a/playwright/fixtures/widget-user.ts
+++ b/playwright/fixtures/widget-user.ts
@@ -132,7 +132,7 @@ export const widgetTest = test.extend<MyFixtures>({
 
       await ewPage1
         .getByRole("navigation", { name: "Room list" })
-        .getByRole("button", { name: "New conversation" })
+        .getByRole("button", { name: "New", exact: true })
         .click();
 
       await ewPage1.getByRole("menuitem", { name: "Start chat" }).click();
diff --git a/playwright/widget/test-helpers.ts b/playwright/widget/test-helpers.ts
index 331b35ac..86cbe8c2 100644
--- a/playwright/widget/test-helpers.ts
+++ b/playwright/widget/test-helpers.ts
@@ -223,7 +223,7 @@ export class TestHelpers {
 
     await page
       .getByRole("navigation", { name: "Room list" })
-      .getByRole("button", { name: "New conversation" })
+      .getByRole("button", { name: "New", exact: true })
       .click();
 
     await page.getByRole("menuitem", { name: "New Room" }).click({

From cbe195d44921df3067d1522a5bda612803ce1fc3 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Fri, 2 Oct 2026 11:46:40 +0200
Subject: [PATCH 139/154] review audio data loading

---
 src/soundUtils.test.ts | 4 ++--
 src/soundUtils.ts      | 9 ++++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/soundUtils.test.ts b/src/soundUtils.test.ts
index e65441f8..3d9810fe 100644
--- a/src/soundUtils.test.ts
+++ b/src/soundUtils.test.ts
@@ -43,12 +43,12 @@ describe("prefetchSounds", () => {
     expect(bytesOf(sounds.beep)).toEqual([0x4f, 0x67, 0x67, 0x53]);
   });
 
-  it("decodes percent-encoded data: URLs without fetching them", async () => {
+  it("leaves out a sound with a percent-encoded data: URL", async () => {
     const sounds = await prefetchSounds({
       beep: { ogg: "data:audio/ogg,Ogg%53" },
     });
     expect(fetchSpy).not.toHaveBeenCalled();
-    expect(bytesOf(sounds.beep)).toEqual([0x4f, 0x67, 0x67, 0x53]);
+    expect(sounds).toEqual({});
   });
 
   it("leaves out a sound whose response is not okay", async () => {
diff --git a/src/soundUtils.ts b/src/soundUtils.ts
index 18d2785a..74d2ea33 100644
--- a/src/soundUtils.ts
+++ b/src/soundUtils.ts
@@ -48,11 +48,11 @@ function decodeDataUrl(url: string): ArrayBuffer {
   if (!url.startsWith("data:") || separator === -1)
     throw new Error("Not a valid data: URL");
   const header = url.slice("data:".length, separator);
-  const payload = url.slice(separator + 1);
-  const decoded = header.split(";").includes("base64")
-    ? atob(payload)
-    : decodeURIComponent(payload);
+  // Vite only percent-encodes SVGs; every other inlined asset is base64.
+  if (!header.split(";").includes("base64"))
+    throw new Error("Only base64 data: URLs are supported");
   // `decoded` is a binary string: one char per byte
+  const decoded = atob(url.slice(separator + 1));
   const bytes = Uint8Array.from(decoded, (c) => c.charCodeAt(0));
   return bytes.buffer;
 }
@@ -90,7 +90,6 @@ export async function prefetchSounds<S extends string>(
         buffer = await loadSound(url);
       } catch (e) {
         logger.warn(`Could not load sound ${name}`, e);
-        return;
       }
       if (buffer === null) {
         // If the sound doesn't load, it's not the end of the world. We won't play

From 0bb9632b600920fbee1a968f5853f688eeb5ba4b Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Fri, 2 Oct 2026 11:46:54 +0200
Subject: [PATCH 140/154] review play sounds does not throw

---
 src/useAudioContext.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/useAudioContext.tsx b/src/useAudioContext.tsx
index 68114812..d52efb0f 100644
--- a/src/useAudioContext.tsx
+++ b/src/useAudioContext.tsx
@@ -209,7 +209,9 @@ export function useAudioContext<S extends string>(
     },
     playSoundLooping: (name, delayS: number): (() => Promise<void>) => {
       if (!audioBuffers[name]) {
-        throw Error(`Tried to play a sound that wasn't buffered (${name})`);
+        // We do not throw here. Instead we log and let the component life. Its not a fatal error if sounds are missing.
+        logger.debug(`Tried to play a sound that wasn't buffered (${name})`);
+        return async () => {};
       }
       return playSoundLooping(
         audioContext,

From ca6319f06d74415ae55e5cefa047e1b581286f90 Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Fri, 2 Oct 2026 13:05:12 +0200
Subject: [PATCH 141/154] Remove layered boolean

---
 .github/workflows/build-element-call.yaml | 10 ----------
 .github/workflows/build.yaml              |  3 ---
 .github/workflows/lint.yaml               |  2 +-
 .github/workflows/test.yaml               |  9 ---------
 scripts/layered.sh                        |  7 +++++--
 5 files changed, 6 insertions(+), 25 deletions(-)

diff --git a/.github/workflows/build-element-call.yaml b/.github/workflows/build-element-call.yaml
index 2eeb8b57..b35948d7 100644
--- a/.github/workflows/build-element-call.yaml
+++ b/.github/workflows/build-element-call.yaml
@@ -14,11 +14,6 @@ on:
         description: The build mode for vite. Must be either 'development' or 'production'
         required: false
         default: production
-      layered:
-        type: boolean
-        description: Build against the matching branch of matrix-js-sdk (if any) instead of the locked commit.
-        required: false
-        default: false
     secrets:
       SENTRY_ORG:
         required: true
@@ -48,11 +43,6 @@ jobs:
           cache: "pnpm"
           node-version-file: ".node-version"
       - name: Install dependencies
-        if: ${{ !inputs.layered }}
-        # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
-        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
-      - name: Install dependencies (layered)
-        if: ${{ inputs.layered }}
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
         run: "scripts/layered.sh --ignore-pnpmfile"
         env:
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
index aa14a3df..3fe10723 100644
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -15,7 +15,6 @@ jobs:
       package: full
       vite_app_version: ${{ github.event.release.tag_name || github.sha }}
       build_mode: ${{ github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'development build') && 'development' || 'production' }}
-      layered: ${{ github.event_name == 'pull_request' }}
     secrets:
       SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
       SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
@@ -66,7 +65,6 @@ jobs:
       package: embedded
       vite_app_version: ${{ github.event.release.tag_name || github.sha }}
       build_mode: ${{ github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'development build') && 'development' || 'production' }}
-      layered: ${{ github.event_name == 'pull_request' }}
     secrets:
       SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
       SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
@@ -81,7 +79,6 @@ jobs:
       package: sdk
       vite_app_version: ${{ github.event.release.tag_name || github.sha }}
       build_mode: ${{ github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'development build') && 'development' || 'production' }}
-      layered: ${{ github.event_name == 'pull_request' }}
     secrets:
       SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
       SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
diff --git a/.github/workflows/lint.yaml b/.github/workflows/lint.yaml
index 89d0baf6..c2ba3b39 100644
--- a/.github/workflows/lint.yaml
+++ b/.github/workflows/lint.yaml
@@ -17,7 +17,7 @@ jobs:
         with:
           cache: "pnpm"
           node-version-file: ".node-version"
-      - name: Install dependencies (layered)
+      - name: Install dependencies
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
         run: "scripts/layered.sh --ignore-pnpmfile"
         env:
diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index 582e8ab2..d29697e1 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -20,11 +20,6 @@ jobs:
           cache: "pnpm"
           node-version-file: ".node-version"
       - name: Install dependencies
-        if: github.event_name != 'pull_request'
-        # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
-        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
-      - name: Install dependencies (layered)
-        if: github.event_name == 'pull_request'
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
         run: "scripts/layered.sh --ignore-pnpmfile"
         env:
@@ -65,11 +60,7 @@ jobs:
           cache: "pnpm"
           node-version-file: ".node-version"
       - name: Install dependencies
-        if: github.event_name != 'pull_request'
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
-        run: pnpm install --frozen-lockfile --ignore-pnpmfile
-      - name: Install dependencies (layered)
-        if: github.event_name == 'pull_request'
         run: scripts/layered.sh --ignore-pnpmfile
         env:
           PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
diff --git a/scripts/layered.sh b/scripts/layered.sh
index 878d7dc8..54f38fa1 100755
--- a/scripts/layered.sh
+++ b/scripts/layered.sh
@@ -3,11 +3,14 @@
 # Installs dependencies, then swaps matrix-js-sdk for a branch of the same
 # name as the pull request branch under test if one exists. This is what
 # lets CI test an Element Call branch together with a matrix-js-sdk branch
-# before either is merged. Without a matching branch the install is left as
-# pnpm-lock.yaml pins it. Inspired by scripts/layered.sh in element-web.
+# before either is merged. Inspired by scripts/layered.sh in element-web.
 #
 # Usage: scripts/layered.sh [pnpm install flags]
 #
+# The layering is only performed when package.json uses the develop branch of
+# matrix-js-sdk and the run is for a pull request whose branch has a matrix-js-sdk
+# counterpart. Otherwise the dependency is left as pnpm-lock.yaml pins it.
+#
 # The matrix-js-sdk checkout is nested inside this directory because some CI
 # systems do not allow moving above the primary checkout. It is git-ignored.
 #

From be822adec8e906d541bab5d4a05b0890912d4bab Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Fri, 2 Oct 2026 13:33:29 +0200
Subject: [PATCH 142/154] Allow workflow_call on lint and test workflows

---
 .github/workflows/lint.yaml |  7 +++++++
 .github/workflows/test.yaml | 28 +++++++++++++++++++++++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/lint.yaml b/.github/workflows/lint.yaml
index c2ba3b39..b0d0c50c 100644
--- a/.github/workflows/lint.yaml
+++ b/.github/workflows/lint.yaml
@@ -1,6 +1,12 @@
 name: Lint, format & type check
 on:
   pull_request: {}
+  workflow_call:
+    inputs:
+      matrix-js-sdk-sha:
+        type: string
+        required: false
+        description: The matrix-js-sdk commit to build against instead of the locked one
 jobs:
   lint:
     name: Lint, format & type check
@@ -22,6 +28,7 @@ jobs:
         run: "scripts/layered.sh --ignore-pnpmfile"
         env:
           PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
+          JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
       - name: Formatting
         run: "pnpm run format:check"
       - name: i18n
diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index d29697e1..1e11d09e 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -3,6 +3,26 @@ on:
   pull_request: {}
   push:
     branches: [main]
+  # Lets matrix-js-sdk run these tests against one of its commits before merging it.
+  workflow_call:
+    inputs:
+      matrix-js-sdk-sha:
+        type: string
+        required: false
+        description: The matrix-js-sdk commit to build against instead of the locked one
+      disable_coverage:
+        type: boolean
+        required: false
+        default: false
+        description: Skip generating and uploading coverage
+      skip_e2e:
+        type: boolean
+        required: false
+        default: false
+        description: Skip the end-to-end tests
+    secrets:
+      CODECOV_TOKEN:
+        required: false
 jobs:
   vitest:
     name: Run unit tests
@@ -24,6 +44,7 @@ jobs:
         run: "scripts/layered.sh --ignore-pnpmfile"
         env:
           PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
+          JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
       - name: Get Playwright version
         run: echo "PLAYWRIGHT_VERSION=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[0].devDependencies["@playwright/test"].version')" >> $GITHUB_ENV
       - name: Cache Playwright binaries
@@ -37,8 +58,11 @@ jobs:
         if: steps.playwright-cache.outputs.cache-hit != 'true'
         run: pnpm playwright install --with-deps
       - name: Vitest
-        run: "pnpm run test:coverage"
+        run: pnpm vitest --coverage.enabled="$ENABLE_COVERAGE"
+        env:
+          ENABLE_COVERAGE: ${{ !inputs.disable_coverage }}
       - name: Upload to codecov
+        if: ${{ !inputs.disable_coverage }}
         uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
@@ -47,6 +71,7 @@ jobs:
           fail_ci_if_error: true
   playwright:
     name: Run end-to-end tests
+    if: ${{ !inputs.skip_e2e }}
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
@@ -64,6 +89,7 @@ jobs:
         run: scripts/layered.sh --ignore-pnpmfile
         env:
           PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
+          JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
       - name: Get Playwright version
         run: echo "PLAYWRIGHT_VERSION=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[0].devDependencies["@playwright/test"].version')" >> $GITHUB_ENV
       - name: Cache Playwright binaries

From bfad85a3af36fe35a25ab4cc83091b003dbceda8 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Fri, 2 Oct 2026 14:49:44 +0200
Subject: [PATCH 143/154] Remove wait_for_key_rotation_ms config option

I learned that makeKeyDelay has been deprecated in matrix-js-sdk ever since the switch to the new encryption manager, so this config option has no effect.
---
 config/config.devenv.json                          |  1 -
 config/config.sample.json                          |  1 -
 config/config_netlify_preview.json                 |  1 -
 config/config_netlify_preview_sdk.json             |  1 -
 src/config/ConfigOptions.ts                        |  6 ------
 src/state/CallViewModel/localMember/LocalMember.ts |  1 -
 vite-embedded.config.ts                            | 14 --------------
 7 files changed, 25 deletions(-)

diff --git a/config/config.devenv.json b/config/config.devenv.json
index 294209a6..b78314d3 100644
--- a/config/config.devenv.json
+++ b/config/config.devenv.json
@@ -7,7 +7,6 @@
   },
   "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
   "matrix_rtc_session": {
-    "wait_for_key_rotation_ms": 3000,
     "membership_event_expiry_ms": 180000000,
     "network_error_retry_ms": 100
   }
diff --git a/config/config.sample.json b/config/config.sample.json
index 9f7ab61a..387c0a3d 100644
--- a/config/config.sample.json
+++ b/config/config.sample.json
@@ -11,7 +11,6 @@
   "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
   "matrix_rtc_mode": "compatibility",
   "matrix_rtc_session": {
-    "wait_for_key_rotation_ms": 3000,
     "membership_event_expiry_ms": 180000000,
     "network_error_retry_ms": 100
   }
diff --git a/config/config_netlify_preview.json b/config/config_netlify_preview.json
index 179177ba..f8e4fc53 100644
--- a/config/config_netlify_preview.json
+++ b/config/config_netlify_preview.json
@@ -7,7 +7,6 @@
   },
   "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
   "matrix_rtc_session": {
-    "wait_for_key_rotation_ms": 3000,
     "membership_event_expiry_ms": 180000000,
     "network_error_retry_ms": 100
   },
diff --git a/config/config_netlify_preview_sdk.json b/config/config_netlify_preview_sdk.json
index fa60fe8d..77d885ea 100644
--- a/config/config_netlify_preview_sdk.json
+++ b/config/config_netlify_preview_sdk.json
@@ -7,7 +7,6 @@
   },
   "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
   "matrix_rtc_session": {
-    "wait_for_key_rotation_ms": 3000,
     "membership_event_expiry_ms": 180000000,
     "network_error_retry_ms": 100
   }
diff --git a/src/config/ConfigOptions.ts b/src/config/ConfigOptions.ts
index 872e3516..5d18695a 100644
--- a/src/config/ConfigOptions.ts
+++ b/src/config/ConfigOptions.ts
@@ -207,12 +207,6 @@ export interface ConfigOptions {
    * Take care when changing these options.
    */
   matrix_rtc_session?: {
-    /**
-     * How long (in milliseconds) to wait before rotating end-to-end media encryption keys
-     * when someone leaves a call.
-     */
-    wait_for_key_rotation_ms?: number;
-
     /**
      * How long we wait before retrying after a network error on any of the requests.
      */
diff --git a/src/state/CallViewModel/localMember/LocalMember.ts b/src/state/CallViewModel/localMember/LocalMember.ts
index 5af8eb01..feb49554 100644
--- a/src/state/CallViewModel/localMember/LocalMember.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.ts
@@ -1004,7 +1004,6 @@ export function enterRTCSession(
     delayedLeaveEventRestartLocalTimeoutMs:
       delayedLeaveTimings.restart_timeout_ms,
     networkErrorRetryMs: sessionConfig.network_error_retry_ms,
-    makeKeyDelay: sessionConfig.wait_for_key_rotation_ms,
     membershipEventExpiryMs: sessionConfig.membership_event_expiry_ms,
     keyRotationParticipantLimit: sessionConfig.key_rotation_participant_limit,
     unstableSendStickyEvents: matrixRTCMode === MatrixRTCMode.Matrix_2_0,
diff --git a/vite-embedded.config.ts b/vite-embedded.config.ts
index 36f2779b..322adbc0 100644
--- a/vite-embedded.config.ts
+++ b/vite-embedded.config.ts
@@ -6,7 +6,6 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { defineConfig, mergeConfig } from "vite";
-import generateFile from "vite-plugin-generate-file";
 
 import fullConfig from "./vite.config.ts";
 
@@ -19,19 +18,6 @@ export default defineConfig((env) =>
     defineConfig({
       base, // Use relative URLs to allow the app to be hosted under any path
       publicDir: false, // Don't serve the public directory which only contains the favicon
-      plugins: [
-        generateFile([
-          {
-            type: "json",
-            output: "./config.json",
-            data: {
-              matrix_rtc_session: {
-                wait_for_key_rotation_ms: 5000,
-              },
-            },
-          },
-        ]),
-      ],
     }),
   ),
 );

From 64b932f1281e114568527913999eb4a58083104d Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Fri, 2 Oct 2026 14:57:34 +0200
Subject: [PATCH 144/154] Remove unused vite-plugin-generate-file dependency

---
 package.json   |  1 -
 pnpm-lock.yaml | 35 -----------------------------------
 2 files changed, 36 deletions(-)

diff --git a/package.json b/package.json
index c7642f57..b30f57ce 100644
--- a/package.json
+++ b/package.json
@@ -129,7 +129,6 @@
     "uuid": "^14.0.0",
     "vaul": "^1.0.0",
     "vite": "^8.0.0",
-    "vite-plugin-generate-file": "^0.3.0",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-node-polyfills": "^0.28.0",
     "vite-plugin-node-stdlib-browser": "^0.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2cd2452c..73a7796b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -268,9 +268,6 @@ importers:
       vite:
         specifier: ^8.0.0
         version: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)
-      vite-plugin-generate-file:
-        specifier: ^0.3.0
-        version: 0.3.1
       vite-plugin-html:
         specifier: ^3.2.2
         version: 3.2.2(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
@@ -4465,10 +4462,6 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  js-yaml@4.3.0:
-    resolution: {integrity: sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==}
-    hasBin: true
-
   js-yaml@4.3.1:
     resolution: {integrity: sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==}
     hasBin: true
@@ -4703,14 +4696,6 @@ packages:
     resolution: {integrity: sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==}
     hasBin: true
 
-  mime-db@1.52.0:
-    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
-    engines: {node: '>= 0.6'}
-
-  mime-types@2.1.35:
-    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
-    engines: {node: '>= 0.6'}
-
   mimic-function@5.0.1:
     resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
     engines: {node: '>=18'}
@@ -5904,9 +5889,6 @@ packages:
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
 
-  vite-plugin-generate-file@0.3.1:
-    resolution: {integrity: sha512-tiA3gkPM21MS2+RyqsBMT33GSlM9LM1TJjf6vGvV/e/ml3e3vTKfuH3l2N0NpUgcayvj1fXnmlo5YBuahA6bsg==}
-
   vite-plugin-html@3.2.2:
     resolution: {integrity: sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==}
     peerDependencies:
@@ -10034,10 +10016,6 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
-  js-yaml@4.3.0:
-    dependencies:
-      argparse: 2.0.1
-
   js-yaml@4.3.1:
     dependencies:
       argparse: 2.0.1
@@ -10286,12 +10264,6 @@ snapshots:
       bn.js: 4.12.3
       brorand: 1.1.0
 
-  mime-db@1.52.0: {}
-
-  mime-types@2.1.35:
-    dependencies:
-      mime-db: 1.52.0
-
   mimic-function@5.0.1: {}
 
   min-indent@1.0.1: {}
@@ -11652,13 +11624,6 @@ snapshots:
       - '@types/react'
       - '@types/react-dom'
 
-  vite-plugin-generate-file@0.3.1:
-    dependencies:
-      ejs: 3.1.10
-      js-yaml: 4.3.0
-      mime-types: 2.1.35
-      picocolors: 1.1.1
-
   vite-plugin-html@3.2.2(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)):
     dependencies:
       '@rollup/pluginutils': 4.2.1

From 4e8fb6e4cbf9a438138d5efc27a0b462e392f65a Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Fri, 2 Oct 2026 16:51:00 +0200
Subject: [PATCH 145/154] Redact analytics ID from rageshakes

To improve our minimization of external data we collect in rageshakes.
---
 src/UrlParams.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/UrlParams.ts b/src/UrlParams.ts
index 9d7ee300..120d5753 100644
--- a/src/UrlParams.ts
+++ b/src/UrlParams.ts
@@ -373,7 +373,7 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
     "intent:",
     intent,
     "\nproperties:",
-    redact(properties, "password"),
+    redact(properties, "password", "posthogUserId"),
     "configuration:",
     configuration,
   );

From bfb868aec3142de64365e5717371489ec0c0497b Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Sat, 3 Oct 2026 01:48:09 +0000
Subject: [PATCH 146/154] Update ghcr.io/element-hq/element-web:develop Docker
 digest to 5371503 (#4321)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 docker-compose-playwright.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index 2e570de4..4e66d043 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -19,7 +19,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:588f0b4ef516310331432e885920ed722bcafa577b1dd30429394c423d3e2848
+    image: ghcr.io/element-hq/element-web:develop@sha256:537150301e6bcbd75de04102d05699e8e11b65f8c63d86ac6eea04315db015ed
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:588f0b4ef516310331432e885920ed722bcafa577b1dd30429394c423d3e2848
+    image: ghcr.io/element-hq/element-web:develop@sha256:537150301e6bcbd75de04102d05699e8e11b65f8c63d86ac6eea04315db015ed

From 8835a6d75d36f9494dee63f5221cc45348225bae Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Sun, 4 Oct 2026 09:34:33 +0000
Subject: [PATCH 147/154] Update ghcr.io/element-hq/element-web:develop Docker
 digest to 3cf23ff (#4322)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 docker-compose-playwright.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index 4e66d043..85d54a35 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -19,7 +19,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:537150301e6bcbd75de04102d05699e8e11b65f8c63d86ac6eea04315db015ed
+    image: ghcr.io/element-hq/element-web:develop@sha256:fae407f3cf6b39487332236620194c66ba468d643ca4ac0b40049c55e5a4d28c
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:537150301e6bcbd75de04102d05699e8e11b65f8c63d86ac6eea04315db015ed
+    image: ghcr.io/element-hq/element-web:develop@sha256:fae407f3cf6b39487332236620194c66ba468d643ca4ac0b40049c55e5a4d28c

From 096aaac9f3c6e7373053848c385f1989f1d1e704 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 5 Oct 2026 01:27:09 +0000
Subject: [PATCH 148/154] Update dependency @vector-im/compound-design-tokens
 to v11.1.0

---
 pnpm-lock.yaml | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 73a7796b..23e2eaa3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -132,10 +132,10 @@ importers:
         version: 10.3.1(react@19.2.8)
       '@vector-im/compound-design-tokens':
         specifier: ^11.0.0
-        version: 11.0.0(@types/react@19.2.18)(react@19.2.8)
+        version: 11.1.0(@types/react@19.2.18)(react@19.2.8)
       '@vector-im/compound-web':
         specifier: ^10.0.0
-        version: 10.1.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        version: 10.1.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.1.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@vitejs/plugin-react':
         specifier: ^6.0.2
         version: 6.1.1(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.2.7)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
@@ -3223,8 +3223,8 @@ packages:
     peerDependencies:
       react: '>= 16.8.0'
 
-  '@vector-im/compound-design-tokens@11.0.0':
-    resolution: {integrity: sha512-pWz0Q67Xbo8gwzaTeFbTTcM6i29ju6PR7SqyuExr2nIV3j9K785cOInft8FA2CM7PEapkr6TRtJKR/4xtWh2RA==}
+  '@vector-im/compound-design-tokens@11.1.0':
+    resolution: {integrity: sha512-vkMcy/G5VBlVle8umQNpctKHqZITS8XOQprsgcbSGRmwW080Z+TXV/vPsEXhgq8JKdxURkLhua0zQUufCeo46A==}
     peerDependencies:
       '@adobe/leonardo-contrast-colors': ^1.0.0
       '@types/react': '*'
@@ -8667,12 +8667,12 @@ snapshots:
       '@use-gesture/core': 10.3.1
       react: 19.2.8
 
-  '@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8)':
+  '@vector-im/compound-design-tokens@11.1.0(@types/react@19.2.18)(react@19.2.8)':
     optionalDependencies:
       '@types/react': 19.2.18
       react: 19.2.8
 
-  '@vector-im/compound-web@10.1.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@vector-im/compound-web@10.1.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.1.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@floating-ui/react': 0.27.20(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -8684,7 +8684,7 @@ snapshots:
       '@radix-ui/react-progress': 1.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-separator': 1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
-      '@vector-im/compound-design-tokens': 11.0.0(@types/react@19.2.18)(react@19.2.8)
+      '@vector-im/compound-design-tokens': 11.1.0(@types/react@19.2.18)(react@19.2.8)
       classnames: 2.5.1
       react: 19.2.8
       vaul: 1.1.2(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)

From 89567726f811e9c3934324a9e868f12db131c28c Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Mon, 5 Oct 2026 08:13:58 +0200
Subject: [PATCH 149/154] Fix tests

---
 playwright/component/harness.ts            | 6 ++++++
 src/button/ReactionToggleButton.module.css | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/playwright/component/harness.ts b/playwright/component/harness.ts
index 8e1a6e58..19bc2e08 100644
--- a/playwright/component/harness.ts
+++ b/playwright/component/harness.ts
@@ -92,6 +92,12 @@ export async function expectWithin(
   outer: Locator,
 ): Promise<void> {
   await expect(inner).toBeVisible();
+  // Wait for animations to settle.
+  await inner.evaluate(async (element) => {
+    for (const animation of element.getAnimations({ subtree: true }))
+      await animation.finished;
+  });
+
   const innerBox = await inner.boundingBox();
   const outerBox = await outer.boundingBox();
   if (innerBox === null || outerBox === null)
diff --git a/src/button/ReactionToggleButton.module.css b/src/button/ReactionToggleButton.module.css
index 4a2bd8ba..0b152a51 100644
--- a/src/button/ReactionToggleButton.module.css
+++ b/src/button/ReactionToggleButton.module.css
@@ -83,7 +83,7 @@ div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div {
   flex: 0 0 auto;
 }
 
-.reactionButton {
+.reactionPopupMenu .reactionsMenu .reactionButton {
   padding: var(--reaction-button-padding);
   border-radius: var(--cpd-radius-pill-effect);
   font-size: var(--reaction-button-fontsize);

From 427376f78bfb5f617507ba8450b3976be772a9e3 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 5 Oct 2026 09:47:57 +0000
Subject: [PATCH 150/154] Update ghcr.io/element-hq/element-web:develop Docker
 digest to 573daa2 (#4323)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 docker-compose-playwright.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index 85d54a35..633e0bf3 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -19,7 +19,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:fae407f3cf6b39487332236620194c66ba468d643ca4ac0b40049c55e5a4d28c
+    image: ghcr.io/element-hq/element-web:develop@sha256:4eb122c93fb593e551f090bab6342565e731357c8fe98fc2fcac3966ecf8d94b
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:fae407f3cf6b39487332236620194c66ba468d643ca4ac0b40049c55e5a4d28c
+    image: ghcr.io/element-hq/element-web:develop@sha256:4eb122c93fb593e551f090bab6342565e731357c8fe98fc2fcac3966ecf8d94b

From 6d70221fe6e29bce63e902e58f512d9004bcb72b Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Mon, 5 Oct 2026 13:04:34 +0200
Subject: [PATCH 151/154] Flip boolean flags

---
 .github/workflows/test.yaml | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index 1e11d09e..3a022a2b 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -3,23 +3,22 @@ on:
   pull_request: {}
   push:
     branches: [main]
-  # Lets matrix-js-sdk run these tests against one of its commits before merging it.
   workflow_call:
     inputs:
       matrix-js-sdk-sha:
         type: string
         required: false
         description: The matrix-js-sdk commit to build against instead of the locked one
-      disable_coverage:
+      enable_coverage:
         type: boolean
         required: false
-        default: false
-        description: Skip generating and uploading coverage
-      skip_e2e:
+        default: true
+        description: Enable generating and uploading coverage reports
+      enable_e2e_tests:
         type: boolean
         required: false
-        default: false
-        description: Skip the end-to-end tests
+        default: true
+        description: Enable the end-to-end tests
     secrets:
       CODECOV_TOKEN:
         required: false
@@ -60,9 +59,9 @@ jobs:
       - name: Vitest
         run: pnpm vitest --coverage.enabled="$ENABLE_COVERAGE"
         env:
-          ENABLE_COVERAGE: ${{ !inputs.disable_coverage }}
+          ENABLE_COVERAGE: ${{ inputs.enable_coverage }}
       - name: Upload to codecov
-        if: ${{ !inputs.disable_coverage }}
+        if: ${{ inputs.enable_coverage }}
         uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
@@ -71,7 +70,7 @@ jobs:
           fail_ci_if_error: true
   playwright:
     name: Run end-to-end tests
-    if: ${{ !inputs.skip_e2e }}
+    if: ${{ inputs.enable_e2e_tests }}
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:

From 067f3d3038e85afe0a60a28800eb27e59cb89667 Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Mon, 5 Oct 2026 13:44:48 +0200
Subject: [PATCH 152/154] Fix repo selection and flags

---
 .github/workflows/lint.yaml |  2 ++
 .github/workflows/test.yaml | 10 +++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/lint.yaml b/.github/workflows/lint.yaml
index b0d0c50c..c59ba402 100644
--- a/.github/workflows/lint.yaml
+++ b/.github/workflows/lint.yaml
@@ -15,6 +15,8 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
         with:
+          # Inside a called workflow, github.repository is the caller so we need to make sure to still check out the EC repo here.
+          repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-call' || github.repository }}
           persist-credentials: false
       - name: Enable Corepack
         run: corepack enable
diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index 3a022a2b..1ebe3529 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -30,6 +30,8 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
         with:
+          # Inside a called workflow, github.repository is the caller so we need to make sure to still check out the EC repo here.
+          repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-call' || github.repository }}
           persist-credentials: false
       - name: Enable Corepack
         run: corepack enable
@@ -59,9 +61,9 @@ jobs:
       - name: Vitest
         run: pnpm vitest --coverage.enabled="$ENABLE_COVERAGE"
         env:
-          ENABLE_COVERAGE: ${{ inputs.enable_coverage }}
+          ENABLE_COVERAGE: ${{ inputs.enable_coverage != false }}
       - name: Upload to codecov
-        if: ${{ inputs.enable_coverage }}
+        if: ${{ inputs.enable_coverage != false }}
         uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
@@ -70,12 +72,14 @@ jobs:
           fail_ci_if_error: true
   playwright:
     name: Run end-to-end tests
-    if: ${{ inputs.enable_e2e_tests }}
+    if: ${{ inputs.enable_e2e_tests != false }}
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
         with:
+          # Inside a called workflow, github.repository is the caller so we need to make sure to still check out the EC repo here.
+          repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-call' || github.repository }}
           persist-credentials: false
       - name: Enable Corepack
         run: corepack enable

From 6e5f71c796b8f6e7832957eef30eb9a77ee9dc21 Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Mon, 5 Oct 2026 13:53:52 +0200
Subject: [PATCH 153/154] Revert back to negative flags

---
 .github/workflows/test.yaml | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index 1ebe3529..5e2703f6 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -9,16 +9,16 @@ on:
         type: string
         required: false
         description: The matrix-js-sdk commit to build against instead of the locked one
-      enable_coverage:
+      disable_coverage:
         type: boolean
         required: false
-        default: true
-        description: Enable generating and uploading coverage reports
-      enable_e2e_tests:
+        default: false
+        description: Skip generating and uploading coverage reports
+      disable_e2e_tests:
         type: boolean
         required: false
-        default: true
-        description: Enable the end-to-end tests
+        default: false
+        description: Skip the end-to-end tests
     secrets:
       CODECOV_TOKEN:
         required: false
@@ -61,9 +61,9 @@ jobs:
       - name: Vitest
         run: pnpm vitest --coverage.enabled="$ENABLE_COVERAGE"
         env:
-          ENABLE_COVERAGE: ${{ inputs.enable_coverage != false }}
+          ENABLE_COVERAGE: ${{ !inputs.disable_coverage }}
       - name: Upload to codecov
-        if: ${{ inputs.enable_coverage != false }}
+        if: ${{ !inputs.disable_coverage }}
         uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
@@ -72,7 +72,7 @@ jobs:
           fail_ci_if_error: true
   playwright:
     name: Run end-to-end tests
-    if: ${{ inputs.enable_e2e_tests != false }}
+    if: ${{ !inputs.disable_e2e_tests }}
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:

From 9b3c3569ecefbb79cf527ea24e3756ba50553a8f Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 6 Oct 2026 02:57:18 +0000
Subject: [PATCH 154/154] Update ghcr.io/element-hq/element-web:develop Docker
 digest to 39c94f0 (#4327)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 docker-compose-playwright.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docker-compose-playwright.yml b/docker-compose-playwright.yml
index 633e0bf3..bce7db34 100644
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -19,7 +19,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:4eb122c93fb593e551f090bab6342565e731357c8fe98fc2fcac3966ecf8d94b
+    image: ghcr.io/element-hq/element-web:develop@sha256:39c94f0c29e7c5614ac7264a872bb3643320158b3bf1730fc4742ddf672c27d6
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:4eb122c93fb593e551f090bab6342565e731357c8fe98fc2fcac3966ecf8d94b
+    image: ghcr.io/element-hq/element-web:develop@sha256:39c94f0c29e7c5614ac7264a872bb3643320158b3bf1730fc4742ddf672c27d6