Merge pull request #4389 from element-hq/johannes/m_livekit

Add support for m.livekit
Switch JS SDK to a9ef09fbf2f1644c8663d0aeaf6a921cd16e7b01
2026-11-04 00:42:28 +00:00 · 2026-11-03 17:02:55 +01:00 · 2026-11-03 16:31:49 +01:00 · 2026-11-03 16:00:58 +01:00 · 2026-11-03 15:07:53 +01:00 · 2026-11-03 14:40:13 +01:00
24 changed files with 249 additions and 281 deletions
@@ -109,4 +109,12 @@ describe("scopeStylesToRoot", () => {
      ".a .b_abc12:hover { border: 0 }",
    );
  });
+
+  it("leaves an excluded stylesheet as it is", async () => {
+    const css = "body { margin: 0 } .menu { color: red }";
+    const result = await postcss([
+      scopeStylesToRoot({ exclude: [/host\.css$/] }),
+    ]).process(css, { from: "/app/host.css" });
+    expect(result.css).toBe(css);
+  });
 });
@@ -60,12 +60,18 @@ const IS_ROOT = `:where(${ROOT_SELECTOR})`;
 * 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 {
+interface Options {
+  /** Stylesheets left as they are: a host's own, which it doesn't scope. */
+  exclude?: RegExp[];
+}
+
+export function scopeStylesToRoot({ exclude = [] }: Options = {}): Plugin {
  return {
    postcssPlugin: "element-call-scope-styles-to-root",
    Once(root) {
-      const isModule =
-        root.source?.input.file?.endsWith(".module.css") ?? false;
+      const file = root.source?.input.file ?? "";
+      if (exclude.some((pattern) => pattern.test(file))) return;
+      const isModule = file.endsWith(".module.css");
      root.walkRules((rule) => {
        if (isRelative(rule)) return;
        rule.selector = (isModule ? scopeBare : scopeAll).processSync(
@@ -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:84af053bff104b8a804e3a5c5b2fb665079733e2d37221b97ed53fea41bd1d53
+    image: ghcr.io/element-hq/element-web:develop@sha256:fc21073b3c20c5a80aab6787dcbf1ddb3ed416eabf7fdfd32a7f4cabc47b7846
  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:84af053bff104b8a804e3a5c5b2fb665079733e2d37221b97ed53fea41bd1d53
+    image: ghcr.io/element-hq/element-web:develop@sha256:fc21073b3c20c5a80aab6787dcbf1ddb3ed416eabf7fdfd32a7f4cabc47b7846
@@ -88,7 +88,7 @@
    "@typescript-eslint/utils": "^8.61.0",
    "@use-gesture/react": "^10.2.11",
    "@vector-im/compound-design-tokens": "^11.0.0",
-    "@vector-im/compound-web": "^10.4.0",
+    "@vector-im/compound-web": "^10.5.0",
    "@vitejs/plugin-react": "^6.0.2",
    "@vitest/browser-playwright": "^4.1.5",
    "@vitest/coverage-v8": "^4.0.18",
@@ -107,7 +107,7 @@
    "livekit-client": "^2.18.1",
    "lodash-es": "^4.17.21",
    "loglevel": "^1.9.1",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#3f05dc4d104a3dfc753c5e3549a18c74fab4b076",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#a9ef09fbf2f1644c8663d0aeaf6a921cd16e7b01",
    "matrix-widget-api": "^1.18.0",
    "node-stdlib-browser": "^1.3.1",
    "normalize.css": "^8.0.1",
@@ -125,25 +125,24 @@ test("leaves the host's own page unstyled", async ({ page }) => {
    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.
+  // Element Call's page-wide CSS (normalize.css and the tokens in base.css)
+  // should not reach the host's page. Compound CSS that gets loaded to EW (host)
+  // on the other hand should impact the host. So probe with styles only Element Call sets:
+  // - A fresh <sub> keeps the browser's `vertical-align: sub` unless
+  //   normalize.css leaked; it turns that into `baseline`.
+  // - `--font-scale` is Element Call's own token, so `:root` must not have it.
  const host = await page.evaluate(() => {
-    const html = getComputedStyle(document.documentElement);
-    const body = getComputedStyle(document.body);
+    const sub = document.body.appendChild(document.createElement("sub"));
+    const verticalAlign = getComputedStyle(sub).verticalAlign;
+    sub.remove();
    return {
-      lineHeight: html.lineHeight,
-      fontFeatureSettings: body.fontFeatureSettings,
-      token: html.getPropertyValue("--cpd-color-text-primary"),
+      verticalAlign,
+      token: getComputedStyle(document.documentElement).getPropertyValue(
+        "--font-scale",
+      ),
    };
  });
-  expect(host).toEqual({
-    lineHeight: "normal",
-    fontFeatureSettings: "normal",
-    token: "",
-  });
+  expect(host).toEqual({ verticalAlign: "sub", token: "" });

  // While inside the container, the same rules do apply
  const root = panes.first().locator("[data-element-call-root]");
@@ -66,7 +66,7 @@ importers:
        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.2.15)(vite@8.2.4(@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))
+        version: 0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.8)(rolldown@1.2.15)(vite@8.2.4(@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)
@@ -134,11 +134,11 @@ importers:
        specifier: ^11.0.0
        version: 11.3.1(@types/react@19.2.18)(react@19.2.8)
      '@vector-im/compound-web':
-        specifier: ^10.4.0
-        version: 10.4.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.3.1(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        specifier: ^10.5.0
+        version: 10.5.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.3.1(@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.15)(vite@8.2.4(@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.4(@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))
+        version: 6.1.1(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.8)(rolldown@1.2.15)(vite@8.2.4(@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.4(@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.11(playwright@1.62.1)(vite@8.2.4(@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)
@@ -191,8 +191,8 @@ importers:
        specifier: ^1.9.1
        version: 1.9.2
      matrix-js-sdk:
-        specifier: github:matrix-org/matrix-js-sdk#3f05dc4d104a3dfc753c5e3549a18c74fab4b076
-        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/3f05dc4d104a3dfc753c5e3549a18c74fab4b076
+        specifier: github:matrix-org/matrix-js-sdk#a9ef09fbf2f1644c8663d0aeaf6a921cd16e7b01
+        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/a9ef09fbf2f1644c8663d0aeaf6a921cd16e7b01
      matrix-widget-api:
        specifier: ^1.18.0
        version: 1.20.0
@@ -397,8 +397,8 @@ packages:
    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
    engines: {node: '>=6.9.0'}

-  '@babel/runtime@8.0.0':
-    resolution: {integrity: sha512-sL6cvO2IfkSu/iU+zs2S/w01B7A8V7suXSIKEN4hPFFdZoiPGxrj5pAG0lCaqLWiEIrjKzdznIWuaLcxPR53qw==}
+  '@babel/runtime@8.0.8':
+    resolution: {integrity: sha512-dEu8nGlRqjsJsvviUUoSMfcRHpwomCiRlXsc2mPfJ79+ffTpDm+JtfUtTMzUrqCApHQnCsVPD3gT1ZT8RgBRCQ==}

  '@babel/template@7.29.7':
    resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
@@ -408,10 +408,6 @@ packages:
    resolution: {integrity: sha512-B3lYAs2nkKskbgQ1nfy8Ma9ao9Q1rntTAQHrzzyDuj+TSO+X3le6PfWwqDvodsb+OumE10eMFfuMCTQSQ5iuIQ==}
    engines: {node: '>=6.9.0'}

-  '@babel/traverse@7.29.8':
-    resolution: {integrity: sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg==}
-    engines: {node: '>=6.9.0'}
-
  '@babel/types@7.29.11':
    resolution: {integrity: sha512-WCsemW40Cpc6gouC1SrY6PBaZ+oLRlEVY9XBvZBI7il/HyUrb2nJ505wE1MHEFyDZNnrWDEuy4jL50WVHfTTSQ==}
    engines: {node: '>=6.9.0'}
@@ -3314,8 +3310,8 @@ packages:
      react:
        optional: true

-  '@vector-im/compound-web@10.4.0':
-    resolution: {integrity: sha512-Tt5hsNK7ulhGdRuy9lzSm5C+T8M/4O4kLDFLkaU+Hi1kVWj6tj/5awW+U+GvtpWRh5llbHN2HRCh79+gQhek+A==}
+  '@vector-im/compound-web@10.5.0':
+    resolution: {integrity: sha512-dcxIAKtTKBLKz2Y83mNkXyYx3shtSs80KvdGKN5ryFvo6OnVOhHPEHiQNbaPQ0EDjc6xStjY9+oz2Fh4c+kniQ==}
    peerDependencies:
      '@fontsource/inconsolata': ^5
      '@fontsource/inter': ^5
@@ -3421,11 +3417,6 @@ packages:
    engines: {node: '>=0.4.0'}
    hasBin: true

-  acorn@8.18.0:
-    resolution: {integrity: sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-
  acorn@8.19.0:
    resolution: {integrity: sha512-oJlA3XiRm7Cyk6qFD2Jn8ak9B7jSy0qy00ADO3+8dpT0LSjFihQYv4C02LFCSYJV3Q37xYwwRy5m+IpIiUzqWw==}
    engines: {node: '>=0.4.0'}
@@ -4759,9 +4750,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/3f05dc4d104a3dfc753c5e3549a18c74fab4b076:
-    resolution: {gitHosted: true, integrity: sha512-Ly8eS7fNNKDo9KmPvTkE49KvD8iMUmrVWJMNERNuxc8UksMLMG36NLz3fs8HytdwrB7AKPfyVo392VZsxILDIg==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/3f05dc4d104a3dfc753c5e3549a18c74fab4b076}
-    version: 44.0.0
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/a9ef09fbf2f1644c8663d0aeaf6a921cd16e7b01:
+    resolution: {gitHosted: true, integrity: sha512-ZAhn/zB44MgrXqUzi9ffSFcmZY3+2nx7bEgfEJR7chYDFyT/XmlmfCJx7Ar4rOTAYZJRVnMxrEwiEHGDapUi0Q==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/a9ef09fbf2f1644c8663d0aeaf6a921cd16e7b01}
+    version: 45.0.0
    engines: {node: '>=22.0.0'}

  matrix-widget-api@1.20.0:
@@ -6357,10 +6348,10 @@ snapshots:
      '@babel/helper-compilation-targets': 7.29.7
      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
      '@babel/helpers': 7.29.7
-      '@babel/parser': 7.29.8
+      '@babel/parser': 7.29.11
      '@babel/template': 7.29.7
-      '@babel/traverse': 7.29.8(supports-color@7.2.0)
-      '@babel/types': 7.29.8
+      '@babel/traverse': 7.29.10(supports-color@7.2.0)
+      '@babel/types': 7.29.11
      '@jridgewell/remapping': 2.3.5
      convert-source-map: 2.0.0
      debug: 4.4.3(supports-color@7.2.0)
@@ -6372,8 +6363,8 @@ snapshots:

  '@babel/generator@7.29.8':
    dependencies:
-      '@babel/parser': 7.29.8
-      '@babel/types': 7.29.8
+      '@babel/parser': 7.29.11
+      '@babel/types': 7.29.11
      '@jridgewell/gen-mapping': 0.3.13
      '@jridgewell/trace-mapping': 0.3.31
      jsesc: 3.1.0
@@ -6390,8 +6381,8 @@ snapshots:

  '@babel/helper-module-imports@7.29.7(supports-color@7.2.0)':
    dependencies:
-      '@babel/traverse': 7.29.8(supports-color@7.2.0)
-      '@babel/types': 7.29.8
+      '@babel/traverse': 7.29.10(supports-color@7.2.0)
+      '@babel/types': 7.29.11
    transitivePeerDependencies:
      - supports-color

@@ -6400,7 +6391,7 @@ snapshots:
      '@babel/core': 7.29.7(supports-color@7.2.0)
      '@babel/helper-module-imports': 7.29.7(supports-color@7.2.0)
      '@babel/helper-validator-identifier': 7.29.7
-      '@babel/traverse': 7.29.8(supports-color@7.2.0)
+      '@babel/traverse': 7.29.10(supports-color@7.2.0)
    transitivePeerDependencies:
      - supports-color

@@ -6417,7 +6408,7 @@ snapshots:
  '@babel/helpers@7.29.7':
    dependencies:
      '@babel/template': 7.29.7
-      '@babel/types': 7.29.8
+      '@babel/types': 7.29.11

  '@babel/parser@7.29.11':
    dependencies:
@@ -6433,13 +6424,13 @@ snapshots:

  '@babel/runtime@7.29.7': {}

-  '@babel/runtime@8.0.0': {}
+  '@babel/runtime@8.0.8': {}

  '@babel/template@7.29.7':
    dependencies:
      '@babel/code-frame': 7.29.7
-      '@babel/parser': 7.29.8
-      '@babel/types': 7.29.8
+      '@babel/parser': 7.29.11
+      '@babel/types': 7.29.11

  '@babel/traverse@7.29.10(supports-color@7.2.0)':
    dependencies:
@@ -6448,19 +6439,7 @@ snapshots:
      '@babel/helper-globals': 7.29.7
      '@babel/parser': 7.29.11
      '@babel/template': 7.29.7
-      '@babel/types': 7.29.8
-      debug: 4.4.3(supports-color@7.2.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/traverse@7.29.8(supports-color@7.2.0)':
-    dependencies:
-      '@babel/code-frame': 7.29.7
-      '@babel/generator': 7.29.8
-      '@babel/helper-globals': 7.29.7
-      '@babel/parser': 7.29.8
-      '@babel/template': 7.29.7
-      '@babel/types': 7.29.8
+      '@babel/types': 7.29.11
      debug: 4.4.3(supports-color@7.2.0)
    transitivePeerDependencies:
      - supports-color
@@ -8167,13 +8146,13 @@ snapshots:
  '@rolldown/binding-win32-x64-msvc@1.2.15':
    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.2.15)(vite@8.2.4(@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/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.8)(rolldown@1.2.15)(vite@8.2.4(@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.2.15
    optionalDependencies:
-      '@babel/runtime': 8.0.0
+      '@babel/runtime': 8.0.8
      vite: 8.2.4(@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': {}
@@ -8903,7 +8882,7 @@ snapshots:
      '@types/react': 19.2.18
      react: 19.2.8

-  '@vector-im/compound-web@10.4.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.3.1(@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.5.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.3.1(@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)
@@ -8925,12 +8904,12 @@ snapshots:
      - '@types/react-dom'
      - react-dom

-  '@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.15)(vite@8.2.4(@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.4(@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))':
+  '@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.8)(rolldown@1.2.15)(vite@8.2.4(@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.4(@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.2.4(@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.2.15)(vite@8.2.4(@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/plugin-babel': 0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.8)(rolldown@1.2.15)(vite@8.2.4(@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.11(playwright@1.62.1)(vite@8.2.4(@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)':
@@ -9055,14 +9034,12 @@ snapshots:

  '@webcontainer/env@1.1.1': {}

-  acorn-jsx@5.3.2(acorn@8.18.0):
+  acorn-jsx@5.3.2(acorn@8.19.0):
    dependencies:
-      acorn: 8.18.0
+      acorn: 8.19.0

  acorn@8.16.0: {}

-  acorn@8.18.0: {}
-
  acorn@8.19.0: {}

  agent-base@6.0.2(supports-color@7.2.0):
@@ -9733,8 +9710,8 @@ snapshots:

  espree@9.6.1:
    dependencies:
-      acorn: 8.18.0
-      acorn-jsx: 5.3.2(acorn@8.18.0)
+      acorn: 8.19.0
+      acorn-jsx: 5.3.2(acorn@8.19.0)
      eslint-visitor-keys: 3.4.3

  esprima@4.0.1: {}
@@ -10468,9 +10445,9 @@ snapshots:

  matrix-events-sdk@0.0.1: {}

-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/3f05dc4d104a3dfc753c5e3549a18c74fab4b076:
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/a9ef09fbf2f1644c8663d0aeaf6a921cd16e7b01:
    dependencies:
-      '@babel/runtime': 8.0.0
+      '@babel/runtime': 8.0.8
      '@matrix-org/matrix-sdk-crypto-wasm': 18.9.0
      another-json: 0.2.0
      bs58: 6.0.0
@@ -11701,7 +11678,7 @@ snapshots:
  terser@5.46.1:
    dependencies:
      '@jridgewell/source-map': 0.3.11
-      acorn: 8.18.0
+      acorn: 8.19.0
      commander: 2.20.3
      source-map-support: 0.5.21

@@ -538,7 +538,7 @@ backend is handed the whole session's view and gives back media:
 type MemberMediaFields = Pick<RTCMember, "tracks$" | "encryptionError$">;

 export interface MediaBackend {
-  readonly transportType: string; // "livekit"
+  readonly transportTypes: readonly string[]; // ["m.livekit", "livekit"]
  /** Authenticate with the transport the client found; the probe for delegation runs here. */
  prepareLocalTransport(
    transport: Transport,
@@ -164,7 +164,7 @@ function setup(
    context: MediaBackendContext,
  ): MediaBackend => {
    const backend: MediaBackend = {
-      transportType: "livekit",
+      transportTypes: ["m.livekit", "livekit"],
      prepareLocalTransport: async () => fake.prepared.promise,
      delegateDelayedLeave: fake.delegateDelayedLeave,
      local: {
@@ -136,7 +136,8 @@ export function createRTCParticipation(
  // fallback: another member's SFU may let us publish (MSC4195). LiveKit only,
  // so it stays out of the backend interface
  const transportFromBackends = async (): Promise<Transport | null> =>
-    backend.transportType === "livekit"
+    backend.transportTypes.includes("m.livekit") ||
+    backend.transportTypes.includes("livekit")
      ? findRemotePublishLivekitTransport({
          client,
          // A snapshot: if nobody with a usable SFU is here yet, the user has
@@ -152,7 +153,7 @@ export function createRTCParticipation(
  const preparedTransport$ = from(
    discoverLocalTransport(
      client,
-      backend.transportType,
+      backend.transportTypes,
      options,
      transportFromBackends,
      logger,
@@ -230,7 +230,7 @@ export interface DataMessage {
 * backend-specific developer panel and for connection diagnostics.
 */
 export interface TransportMetadata {
-  /** `"livekit"` today. */
+  /** `"m.livekit"` or `"livekit"` today. */
  type: string;
  /** Stable key, unique per transport in the slot: the raw transport, serialised with sorted keys. */
  id: string;
@@ -48,7 +48,7 @@ describe("discoverLocalTransport", () => {
    await expect(
      discoverLocalTransport(
        c,
-        "livekit",
+        ["m.livekit", "livekit"],
        { transport: hostTransport },
        fromBackends(),
        logger,
@@ -61,7 +61,7 @@ describe("discoverLocalTransport", () => {
    await expect(
      discoverLocalTransport(
        client([homeserverTransport]),
-        "livekit",
+        ["m.livekit", "livekit"],
        { fallbackTransport: hostTransport },
        fromBackends(),
        logger,
@@ -73,7 +73,7 @@ describe("discoverLocalTransport", () => {
    await expect(
      discoverLocalTransport(
        client([{ type: "not_livekit" }]),
-        "livekit",
+        ["m.livekit", "livekit"],
        { fallbackTransport: hostTransport },
        fromBackends(),
        logger,
@@ -87,7 +87,7 @@ describe("discoverLocalTransport", () => {
    await expect(
      discoverLocalTransport(
        client([homeserverTransport]),
-        "livekit",
+        ["m.livekit", "livekit"],
        {},
        backends,
        logger,
@@ -99,7 +99,7 @@ describe("discoverLocalTransport", () => {
  it("fails naming the homeserver where there is no transport at all", async () => {
    const promise = discoverLocalTransport(
      client([]),
-      "livekit",
+      ["m.livekit", "livekit"],
      {},
      fromBackends(),
      logger,
@@ -15,14 +15,15 @@ import { TransportAutoDiscovery } from "./TransportAutoDiscovery";

 /**
 * The transport the local member advertises: the one the host names, else the
- * homeserver's first of the type the backend serves, else the host's fallback,
- * else the first the backends can provide, which are asked only then.
+ * homeserver's first of the most preferred type the backend serves, else the
+ * host's fallback, else the first the backends can provide, which are asked
+ * only then.
 *
 * @throws {MatrixRTCTransportMissingError} where none of these exists.
 */
 export async function discoverLocalTransport(
  client: Pick<MatrixClient, "getDomain" | "_unstable_getRTCTransports">,
-  transportType: string,
+  transportTypes: readonly string[],
  {
    transport: override,
    fallbackTransport,
@@ -34,7 +35,7 @@ export async function discoverLocalTransport(
    override ??
    (await new TransportAutoDiscovery({
      client,
-      transportType,
+      transportTypes,
      fallbackTransport,
      logger,
    }).discoverPreferredTransport()) ??
@@ -61,7 +61,7 @@ describe("TransportAutoDiscovery", () => {

      const discovery = new TransportAutoDiscovery({
        client,
-        transportType: "livekit",
+        transportTypes: ["m.livekit", "livekit"],
        fallbackTransport: configTransport,
        logger: rootLogger,
      });
@@ -75,6 +75,29 @@ describe("TransportAutoDiscovery", () => {
    },
  );

+  it("prefers a transport of an earlier type over one listed before it", async () => {
+    const mLivekit: Transport = {
+      type: "m.livekit",
+      url: "wss://sfu.example.org",
+    };
+    const client = makeClient();
+    client._unstable_getRTCTransports.mockResolvedValue([
+      backendTransport,
+      mLivekit,
+    ]);
+
+    const discovery = new TransportAutoDiscovery({
+      client,
+      transportTypes: ["m.livekit", "livekit"],
+      fallbackTransport: configTransport,
+      logger: rootLogger,
+    });
+
+    await expect(discovery.discoverPreferredTransport()).resolves.toStrictEqual(
+      mLivekit,
+    );
+  });
+
  it("Retries limit_exceeded backend transport", async () => {
    const client = makeClient();
    client._unstable_getRTCTransports
@@ -92,7 +115,7 @@ describe("TransportAutoDiscovery", () => {

    const discovery = new TransportAutoDiscovery({
      client,
-      transportType: "livekit",
+      transportTypes: ["m.livekit", "livekit"],
      fallbackTransport: configTransport,
      logger: rootLogger,
    });
@@ -116,7 +139,7 @@ describe("TransportAutoDiscovery", () => {

      const discovery = new TransportAutoDiscovery({
        client,
-        transportType: "livekit",
+        transportTypes: ["m.livekit", "livekit"],
        fallbackTransport: configTransport,
        logger: rootLogger,
      });
@@ -133,7 +156,7 @@ describe("TransportAutoDiscovery", () => {

    const discovery = new TransportAutoDiscovery({
      client,
-      transportType: "livekit",
+      transportTypes: ["m.livekit", "livekit"],
      fallbackTransport: undefined,
      logger: rootLogger,
    });
@@ -17,27 +17,27 @@ type TransportDiscoveryClient = Pick<

 export interface TransportAutoDiscoveryProps {
  client: TransportDiscoveryClient;
-  /** The transport type the media backend serves. */
-  transportType: string;
-  /** A transport to use when the homeserver advertises none of the type. */
+  /** The transport types we want to discover. Those are the ones, the local media backend supports. most preferred first. */
+  transportTypes: readonly string[];
+  /** A transport to use when the homeserver advertises none of the types. */
  fallbackTransport?: Transport;
  logger: Logger;
 }

 export class TransportAutoDiscovery {
  private readonly client: TransportDiscoveryClient;
-  private readonly transportType: string;
+  private readonly transportTypes: readonly string[];
  private readonly fallbackTransport: Transport | undefined;
  private readonly logger: Logger;

  public constructor({
    client,
-    transportType,
+    transportTypes,
    fallbackTransport,
    logger,
  }: TransportAutoDiscoveryProps) {
    this.client = client;
-    this.transportType = transportType;
+    this.transportTypes = transportTypes;
    this.fallbackTransport = fallbackTransport;
    this.logger = logger.getChild("[TransportAutoDiscovery]");
  }
@@ -64,7 +64,7 @@ export class TransportAutoDiscovery {
  }

  /**
-   * Fetches the first transport of the backend's type from the homeserver.
+   * Fetches the first transport of the backend's most preferred type from the homeserver.
   * This will not throw errors, but instead just log them and return null if the expected config is not found or malformed.
   * @private
   */
@@ -76,17 +76,16 @@ export class TransportAutoDiscovery {
      const transportList = await doNetworkOperationWithRetry(async () =>
        client._unstable_getRTCTransports(),
      );
-      const first = transportList.find(
-        (transport) => transport.type === this.transportType,
-      );
-      if (first) {
-        return first;
-      } else {
-        this.logger.info(
-          `No ${this.transportType} transport found in getRTCTransports end point`,
-          transportList,
+      for (const type of this.transportTypes) {
+        const first = transportList.find(
+          (transport) => transport.type === type,
        );
+        if (first) return first;
      }
+      this.logger.info(
+        `No ${this.transportTypes.join(" or ")} transport found in getRTCTransports end point`,
+        transportList,
+      );
    } catch (ex) {
      this.logger.info(`Failed to use getRTCTransports end point: ${ex}`);
    }
@@ -113,8 +113,11 @@ export interface DataPacket {
 }

 export interface MediaBackend {
-  /** The membership transport type this backend serves: "livekit". */
-  readonly transportType: string;
+  /**
+   * The membership transport types this backend serves, ordered decreasingly
+   * by preference.
+   */
+  readonly transportTypes: readonly string[];

  /**
   * Makes `transport` usable as the one the local member publishes on. The
@@ -279,7 +279,7 @@ export function createLivekitBackend(
  });

  return {
-    transportType: "livekit",
+    transportTypes: ["m.livekit", "livekit"],
    prepareLocalTransport,
    delegateDelayedLeave: delegateLeave,
    local: localMedia_,
@@ -13,6 +13,7 @@ import {
 } from "matrix-js-sdk/lib/matrixrtc";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";

+import { serverNameOfTransport } from "../../utils/serverName";
 import { isCsApiUnavailable } from "./auth";
 import * as csApi from "./auth/csApi";
 import { decodeSFUJWTPayload } from "./auth/types";
@@ -59,7 +60,7 @@ export async function findRemotePublishLivekitTransport({
      if (!isUnstableLivekitTransport(transport) || !("url" in transport))
        continue;
      const { url } = transport;
-      const serverName = membership.getTransportServerName(transport);
+      const serverName = serverNameOfTransport(transport, membership.userId);
      const key = JSON.stringify([url, serverName]);
      if (tried.has(key)) continue;
      tried.add(key);
@@ -36,20 +36,15 @@ Please see LICENSE in the repository root for full details.
  }
 }

+/* The width design sets: a long device name wraps. */
 .menu {
-  display: flex;
-  flex-direction: column;
+  inline-size: 296px;
 }

-/* 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. */
+/* Its share of 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. */
@@ -62,25 +57,6 @@ Please see LICENSE in the repository root for full details.
  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,
@@ -65,8 +65,10 @@ const WithACallArea: FC<{ children: ReactNode }> = ({ children }) => {
    <div
      ref={setCallArea}
      style={{
-        // A call's size: anything smaller makes a short device list scroll.
+        // A call's size: anything smaller makes a short device list scroll, and
+        // a narrower one narrows the menu.
        blockSize: 720,
+        inlineSize: 1024,
        display: "flex",
        alignItems: "flex-end",
        justifyContent: "center",
@@ -97,6 +99,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;

+// By place: Compound's section heading is aria-hidden, as its group carries
+// the name.
+const SECTION_HEADING = "[role='group'] > [aria-hidden]";
+
 export const Default: Story = {
  args: {
    iconsAndLabels: "audio",
@@ -219,9 +225,8 @@ export const SpeakerAndMicrophoneSections: Story = {
    await expect(
      document.body.querySelectorAll("[role='separator']"),
    ).toHaveLength(0);
-    const headings = document.body.querySelectorAll<HTMLElement>(
-      `.${styles.sectionHeading}`,
-    );
+    const headings =
+      document.body.querySelectorAll<HTMLElement>(SECTION_HEADING);
    await expect(headings).toHaveLength(2);
    const frame = menu.getBoundingClientRect();
    for (const heading of headings) {
@@ -256,6 +261,37 @@ export const SpeakerAndMicrophoneSections: Story = {
  },
 };

+/** A long name wraps rather than widening the menu, which design sets. */
+export const LongDeviceNameWraps: Story = {
+  args: {
+    ...SpeakerAndMicrophoneSections.args,
+    outputOptions: [
+      {
+        label: {
+          type: "name",
+          name: "Logitech BRIO 4K Ultra HD Pro Business Webcam Speakers (046d:085e)",
+        },
+        id: "long",
+      },
+      { label: { type: "name", name: "Headset" }, id: "spk2" },
+    ],
+    selectedOutputOption: "long",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+    const body = within(document.body);
+    const long = await body.findByRole("menuitemradio", { name: /Logitech/ });
+    const short = await body.findByRole("menuitemradio", { name: "Headset" });
+
+    const menu = document.body.querySelector("[role='menu']")!;
+    await expect(Math.round(menu.getBoundingClientRect().width)).toBe(296);
+    await expect(long.getBoundingClientRect().height).toBeGreaterThan(
+      short.getBoundingClientRect().height,
+    );
+  },
+};
+
 export const OutputCannotBeChosen: Story = {
  args: {
    ...Default.args,
@@ -402,14 +438,14 @@ export const ManyDevices: Story = {
    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
+    // The meter's box rather than its level: 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}`,
+        `.${meterStyles.meter}`,
      );
      if (element === null) throw new Error("the meter has not rendered yet");
      return element;
@@ -436,10 +472,6 @@ export const ManyDevices: Story = {
      .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);
  },
 };

@@ -536,7 +568,7 @@ export const KeyboardReachesEveryDevice: Story = {

    const meter = await waitFor(() => {
      const element = document.body.querySelector<HTMLElement>(
-        `.${styles.stickyMeter}`,
+        `.${meterStyles.meter}`,
      );
      if (element === null) throw new Error("the meter has not rendered yet");
      return element;
@@ -545,9 +577,7 @@ export const KeyboardReachesEveryDevice: Story = {
    // Drawn over the list: the sticky headings and the meter.
    const overlays = [
      meter,
-      ...document.body.querySelectorAll<HTMLElement>(
-        `.${styles.sectionHeading}`,
-      ),
+      ...document.body.querySelectorAll<HTMLElement>(SECTION_HEADING),
    ];
    const items = within(document.body).getAllByRole("menuitemradio");

@@ -591,10 +621,7 @@ export const HeadingsStayWhileScrolling: Story = {
      `.${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}`,
-    )!;
+    const heading = group.querySelector<HTMLElement>(":scope > [aria-hidden]")!;

    // Far enough that the heading is only on screen if it is stuck there.
    list.scrollTop +=
@@ -607,13 +634,6 @@ export const HeadingsStayWhileScrolling: Story = {
    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,
-    );
  },
 };

@@ -17,7 +17,8 @@ import {
  Button,
  Menu,
  MenuItem,
-  MenuTitle,
+  MenuScrollArea,
+  MenuScrollSection,
  RadioInput,
  ToggleMenuItem,
 } from "@vector-im/compound-web";
@@ -84,6 +85,9 @@ 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;

+/** Space kept between the menu and the call area's sides. */
+const MENU_MARGIN = 16;
+
 export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
  enabled,
  busy,
@@ -157,18 +161,18 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
    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]);

-  const MuteButton = iconsAndLabels === "audio" ? MicButton : VideoButton;
+  const audioMeter = iconsAndLabels === "audio" && (
+    <LiveMicrophoneLevelMeter
+      deviceId={selectedOption}
+      // Only while open, so the microphone isn't held all call.
+      active={menuOpen}
+    />
+  );
+  const MuteButton = audioMeter ? MicButton : VideoButton;
  const button = (
    <MuteButton
      enabled={enabled ?? false}
@@ -179,9 +183,7 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
        e.stopPropagation();
      }}
      disabled={isBusy || onMuteClick === undefined}
-      data-testid={
-        iconsAndLabels === "audio" ? "incall_mute" : "incall_videomute"
-      }
+      data-testid={audioMeter ? "incall_mute" : "incall_videomute"}
    />
  );

@@ -326,6 +328,8 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
        open={menuOpen}
        onOpenChange={onOpenChange}
        side="top"
+        collisionBoundary={rootElement}
+        collisionPadding={MENU_MARGIN}
        trigger={
          <Button
            iconOnly
@@ -340,66 +344,41 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
          />
        }
      >
-        <div
+        <MenuScrollArea
          ref={trackFocusSource}
-          // Keeps the items the menu's own children for assistive tech.
-          role="none"
          className={styles.deviceList}
          data-testid="device-list"
          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
          }
        >
-          {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">
+          {audioMeter && speakerOptions && (
+            <MenuScrollSection title={t("settings.devices.speaker")}>
              {deviceItems(
-                "input",
-                options,
-                selectedOption,
-                onSelect,
-                numberedLabel,
+                "output",
+                speakerOptions,
+                selectedSpeaker,
+                onSelectOutput,
+                (n) => t("settings.devices.speaker_numbered", { n }),
              )}
-              {iconsAndLabels === "audio" && (
-                <LiveMicrophoneLevelMeter
-                  ref={meter}
-                  deviceId={selectedOption}
-                  // Only while open, so the microphone isn't held all call.
-                  active={menuOpen}
-                  className={styles.stickyMeter}
-                />
-              )}
-            </div>
-          </div>
-        </div>
+            </MenuScrollSection>
+          )}
+          <MenuScrollSection
+            title={optionsButtonLabel}
+            stickyBottomItem={audioMeter}
+          >
+            {deviceItems(
+              "input",
+              options,
+              selectedOption,
+              onSelect,
+              numberedLabel,
+            )}
+          </MenuScrollSection>
+        </MenuScrollArea>
        {toggles.length > 0 && <hr />}
        {toggles.map((toggle) => (
          <ToggleMenuItem
@@ -416,25 +395,3 @@ 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];
-}
@@ -16,10 +16,10 @@ Please see LICENSE in the repository root for full details.
  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. */
+  /* Centres the icon on the radio column: less 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(--cpd-space-4x) -
      (var(--meter-icon-size) - var(--device-control-size)) / 2
  );
  padding-inline-end: calc(var(--cpd-space-4x) * 2 + var(--cpd-space-2x));
@@ -5,17 +5,9 @@ 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 { useCallback, useLayoutEffect, useRef, useState, type FC } 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";
@@ -30,8 +22,6 @@ export interface LiveMicrophoneLevelMeterProps {
  deviceId: string | undefined;
  /** Whether to hold a capture at all. */
  active: boolean;
-  className?: string;
-  ref?: Ref<HTMLDivElement>;
 }

 /**
@@ -41,24 +31,18 @@ export interface LiveMicrophoneLevelMeterProps {
 export const LiveMicrophoneLevelMeter: FC<LiveMicrophoneLevelMeterProps> = ({
  deviceId,
  active,
-  className,
-  ref,
 }) => {
  const state = useMicrophoneLevel(deviceId, active);
-  return <MicrophoneLevelMeter state={state} className={className} ref={ref} />;
+  return <MicrophoneLevelMeter state={state} />;
 };

 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
@@ -104,7 +88,7 @@ export const MicrophoneLevelMeter: FC<MicrophoneLevelMeterProps> = ({
  }, [state, barCount, t]);

  return (
-    <div ref={ref} className={classNames(styles.meter, className)}>
+    <div className={styles.meter}>
      <MicOnIcon className={styles.icon} aria-hidden />
      {state.type !== "level" ? (
        <Text size="sm" className={styles.message}>
@@ -99,7 +99,7 @@ export function useRoomEncryptionSystem(roomId: string): EncryptionSystem {
  );

  const room = client?.getRoom(roomId);
-  const e2eeSystem = <EncryptionSystem>useMemo(() => {
+  const e2eeSystem = useMemo<EncryptionSystem>(() => {
    if (!room) return { kind: E2eeType.NONE };
    if (storedPassword)
      return {
@@ -38,8 +38,21 @@ export default defineConfig(({ mode }) => {
    ...base,
    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()] } },
+    // host will get — including whether its own page is left alone. The host's
+    // own stylesheets, Compound's among them, stay unscoped, as on a real host.
+    css: {
+      postcss: {
+        plugins: [
+          scopeStylesToRoot({
+            exclude: [
+              /component[\\/]dev[\\/]/,
+              /@vector-im[\\/]compound-/,
+              /@fontsource[\\/]/,
+            ],
+          }),
+        ],
+      },
+    },
    // So that the harness can read the same config.json the standalone app
    // does, if the developer has written one
    publicDir: "../../public",
Author	SHA1	Message	Date
Johannes Marbach	3914aec53f	Merge pull request #4389 from element-hq/johannes/m_livekit Add support for m.livekit	2026-11-03 17:02:55 +01:00
Johannes Marbach	321340a192	Switch JS SDK to a9ef09fbf2f1644c8663d0aeaf6a921cd16e7b01	2026-11-03 16:31:49 +01:00
Timo	818906eef8	Merge pull request #4404 from element-hq/toger5/fix-storybook-docgen-parse Use a generic instead of a type assertion in useRoomEncryptionSystem	2026-11-03 16:00:58 +01:00
fkwp	60a8fa5464	Merge pull request #4281 from element-hq/spec/background-effects/1-device-menus Hold both device menus at 296px, framed in Safari too	2026-11-03 15:07:53 +01:00
Timo K.	e339098939	Merge branch 'main' into spec/background-effects/1-device-menus	2026-11-03 14:40:13 +01:00
Timo K.andClaude Opus 5.5	1dad38edd2	Use a generic instead of a type assertion in useRoomEncryptionSystem Storybook's react-docgen plugin parses .ts files with Babel's jsx plugin enabled, so the angle-bracket assertion `<EncryptionSystem>useMemo(...)` reads as an opening JSX tag and the Storybook build fails with "Unexpected token". Passing the type as useMemo's generic is equivalent and parses either way. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>	2026-11-03 14:38:42 +01:00
Johannes MarbachandTimo	517edc12ac	Extend comment Co-authored-by: Timo <16718859+toger5@users.noreply.github.com>	2026-11-03 11:44:04 +01:00
Timo K.	dff4e0f194	use compound release.	2026-11-03 10:02:07 +01:00
renovate[bot]	ba27855a43	Update ghcr.io/element-hq/element-web:develop Docker digest to fc21073 (#4402 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-11-03 03:17:55 +00:00
Valere Fedronic	d46840ce81	Merge pull request #4400 from element-hq/localazy-download-only-app-json Download and upload only app.json from Localazy	2026-11-02 14:42:54 +01:00
Johannes Marbach	94ee13c639	Add support for m.livekit	2026-10-29 15:40:28 +01:00
Timo K.	8ef1dee256	bump compound web	2026-10-29 13:11:44 +01:00
Timo K.	38ef1add48	use compound web sticky patch	2026-10-28 19:29:08 +01:00
Timo K.	cffdb58521	rop the device list's custom fade under the mete	2026-10-28 16:33:31 +01:00
Timo K.	2abe7ea02f	better docs for the sub test trick	2026-10-28 16:27:38 +01:00
Timo K.	17caded88b	clean up css calc in ts code	2026-10-28 16:11:49 +01:00
Timo K.	c713b13994	review: audioMeter instead of `iconsAndLabels === "audio"`	2026-10-28 15:17:44 +01:00
fkwpandClaude Opus 5.5	9e6f2e89a8	Size and scroll the device menus with Compound's menu - Compound 10.3.0 bounds a menu by the space it has and scrolls what doesn't fit, within a boundary the app passes. The menus pass the call area, 16px in from its sides, rather than measuring its width. - The 296px width is the menu's own style. Compound gives that style only to the dropdown, so menuIsDrawer, which copied its phone rule, goes. - Compound draws the menu's frame over its content, so nothing that scrolls can hide it in Safari: the list, headings and meter no longer keep a border width clear of it, and the checks that they did go. - The device list is Compound's scroll area, so it fades out at the foot with Compound's chevron while there is more below. - The microphone menu's meter sticks at that foot, with rows scrolling under it as before, so the list has no fade above it: Compound's is a mask fixed to the list's edge, while a bounce at the top carries the meter with the rows. The band under the meter is filled, or rows would show there. The edge fades from where the chevron starts, so a bounce fades the meter out before it reaches the chevron. A row reached by keyboard stays above the meter. - The list's height is still its share of the call. - The component harness leaves the host's stylesheets unscoped, Compound's among them, as a host does: scoped, they never reached the menu, which is portalled out of Element Call's root. - Its specs check only Element Call's own document styles on the host page, and find the device list within Compound's scroll area. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>	2026-10-26 15:48:52 +01:00
fkwpandClaude Opus 5.5	7a48b09c4c	Hold both device menus at 296px, framed in Safari too - The camera and microphone menus were as wide as their longest device name, so a long one widened the menu over more of the call: 340px for a long speaker name. Both are now 296px, as design sets them, and a long name wraps. - Narrower only where the call area is, so the menu still fits inside it: 268px in a 300px call. Taken from the observation of the call area that already bounds the list's height. - Held only for the dropdown. On Android and iOS Compound renders the menu as a drawer as wide as the screen; menuIsDrawer follows its rule. - Once the list is long enough to scroll, Safari paints it above the outline the menu is framed with, and the frame vanished down both sides of it: 384px of it on the many-devices microphone menu, in WebKit. The list now keeps a border width clear of the frame, so the headings and the meter inside it no longer need their own. - Guarded with a long speaker name, which fails at 340px on main's sizing; a unit test run as a phone, which fails with the width held there; and the many-devices story's inset, which fails on the old stylesheet, since the stories run in Chromium, which never showed the Safari bug. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>	2026-10-26 15:48:07 +01:00