remove scopeStylesToRoot

2026-10-16 23:45:50 +00:00 · 2026-10-01 13:55:39 +02:00
59 changed files with 763 additions and 763 deletions
@@ -44,9 +44,7 @@ jobs:
          node-version-file: ".node-version"
      - 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:
-          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
+        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
      - name: Build Element Call
        run: pnpm run build:"$PACKAGE":"$BUILD_MODE"
        env:
@@ -1,12 +1,6 @@
 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
@@ -15,8 +9,6 @@ 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
@@ -27,10 +19,7 @@ jobs:
          node-version-file: ".node-version"
      - 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:
-          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
-          JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
+        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
      - name: Formatting
        run: "pnpm run format:check"
      - name: i18n
@@ -3,25 +3,6 @@ on:
  pull_request: {}
  push:
    branches: [main]
-  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 reports
-      disable_e2e_tests:
-        type: boolean
-        required: false
-        default: false
-        description: Skip the end-to-end tests
-    secrets:
-      CODECOV_TOKEN:
-        required: false
 jobs:
  vitest:
    name: Run unit tests
@@ -30,8 +11,6 @@ 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
@@ -42,10 +21,7 @@ jobs:
          node-version-file: ".node-version"
      - 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:
-          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
-          JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
+        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
      - 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
@@ -59,11 +35,8 @@ jobs:
        if: steps.playwright-cache.outputs.cache-hit != 'true'
        run: pnpm playwright install --with-deps
      - name: Vitest
-        run: pnpm vitest --coverage.enabled="$ENABLE_COVERAGE"
-        env:
-          ENABLE_COVERAGE: ${{ !inputs.disable_coverage }}
+        run: "pnpm run test:coverage"
      - name: Upload to codecov
-        if: ${{ !inputs.disable_coverage }}
        uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7
        env:
          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
@@ -72,14 +45,11 @@ jobs:
          fail_ci_if_error: true
  playwright:
    name: Run end-to-end tests
-    if: ${{ !inputs.disable_e2e_tests }}
    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
@@ -89,10 +59,7 @@ jobs:
          node-version-file: ".node-version"
      - 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:
-          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
-          JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
+        run: pnpm install --frozen-lockfile --ignore-pnpmfile
      - 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
@@ -41,6 +41,3 @@ yarn-error.log

 *storybook.log
 storybook-static
-
-# Nested checkout made by scripts/layered.sh
-/matrix-js-sdk/
@@ -252,11 +252,10 @@ 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
-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's stylesheet is confined to the element it is mounted in: its
+base styles — element defaults and custom properties — are written against
+Element Call's root element rather than the document, and everything else is a
+CSS module. A host's own page keeps its styles.

 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
@@ -297,8 +296,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,
-since it inherits the `--max-old-space-size` setting of
+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
@@ -306,10 +305,8 @@ 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`, `livekit-client`, `@vector-im/compound-web` and
-`@vector-im/compound-design-tokens` itself, since the bundle leaves them
-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)
+`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
@@ -34,18 +34,10 @@ component rather than a page makes. */
  -webkit-tap-highlight-color: transparent;
 }

-/* 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.
-
-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;
-  block-size: 100%;
+/* 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;
-  isolation: isolate;
+  block-size: 100%;
 }
@@ -1,112 +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 { 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 }",
-    );
-  });
-});
@@ -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
- * 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:
+ * 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:
 *
 * - `html`, `body` and `:root` become the root element, which is what stands in
 *   for the document inside a host.
@@ -55,10 +55,9 @@ 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 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.
+ * 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 {
@@ -9,16 +9,6 @@ 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
@@ -17,25 +17,19 @@ Please see LICENSE in the repository root for full details.
 * host instead, or is confined to the container it is mounted in.
 */

-// The element defaults and custom properties every Element Call stylesheet
+// The design tokens, fonts and element defaults 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.
+// 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 {
@@ -237,38 +231,34 @@ export const ElementCall: FC<ElementCallProps> = ({
        <UrlParamsProvider value={params}>
          <div ref={setContainer} className={styles.root}>
            {ready && (
-              // 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
+              <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>
+                <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>
@@ -38,8 +38,6 @@
    "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",
@@ -7,6 +7,7 @@
  },
  "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
  }
@@ -11,6 +11,7 @@
  "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
  }
@@ -7,6 +7,7 @@
  },
  "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
  },
@@ -7,6 +7,7 @@
  },
  "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
  }
@@ -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:39c94f0c29e7c5614ac7264a872bb3643320158b3bf1730fc4742ddf672c27d6
+    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:39c94f0c29e7c5614ac7264a872bb3643320158b3bf1730fc4742ddf672c27d6
+    image: ghcr.io/element-hq/element-web:develop@sha256:cbb7be9a54352997748d02c36dc70ee877c705ee3518be31497717c9a2ff0395
@@ -76,10 +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` / `@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
+  `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`.
@@ -82,8 +82,9 @@ its caller? If not, cut it.
 - 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`).
+- Style `[data-element-call-root]`, never `body` or `:root`. A rule that matches
+  by element alone takes the root as a prefix (see `src/base.css`); nothing
+  rewrites selectors at build time, so a bare one reaches the host's page.

 ## Strings and a11y

@@ -60,21 +60,6 @@ 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.
@@ -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 the Matrix `room_id`.
+and identifies the room by a hashed identity instead of a `livekit_alias`.
 (Remote memberships always try the new endpoint first and fall back to the
 legacy one, so remote participants can be on either.)

@@ -33,8 +33,6 @@ export default {
    "src/state/ServiceInterruptionsViewModel.ts",
  ],
  ignoreDependencies: [
-    // Used in CSS
-    "normalize.css",
    // Used for its global type declarations
    "@types/grecaptcha",
    "@types/sdp-transform",
@@ -106,14 +106,12 @@
    "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",
    "oxfmt": "^0.66.0",
    "oxlint": "^1.70.0",
    "oxlint-tsgolint": "^0.25.0",
    "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",
@@ -129,6 +127,7 @@
    "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",
@@ -92,12 +92,6 @@ 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)
@@ -132,7 +132,7 @@ export const widgetTest = test.extend<MyFixtures>({

      await ewPage1
        .getByRole("navigation", { name: "Room list" })
-        .getByRole("button", { name: "New", exact: true })
+        .getByRole("button", { name: "New conversation" })
        .click();

      await ewPage1.getByRole("menuitem", { name: "Start chat" }).click();
@@ -223,7 +223,7 @@ export class TestHelpers {

    await page
      .getByRole("navigation", { name: "Room list" })
-      .getByRole("button", { name: "New", exact: true })
+      .getByRole("button", { name: "New conversation" })
      .click();

    await page.getByRole("menuitem", { name: "New Room" }).click({
@@ -132,10 +132,10 @@ importers:
        version: 10.3.1(react@19.2.8)
      '@vector-im/compound-design-tokens':
        specifier: ^11.0.0
-        version: 11.1.0(@types/react@19.2.18)(react@19.2.8)
+        version: 11.0.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.1.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))
@@ -192,16 +192,13 @@ importers:
        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/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999
+        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a
      matrix-widget-api:
        specifier: ^1.18.0
        version: 1.19.0
      node-stdlib-browser:
        specifier: ^1.3.1
        version: 1.3.1
-      normalize.css:
-        specifier: ^8.0.1
-        version: 8.0.1
      oxfmt:
        specifier: ^0.66.0
        version: 0.66.0
@@ -220,9 +217,6 @@ importers:
      postcss-preset-env:
        specifier: ^10.0.0
        version: 10.6.1(postcss@8.5.26)
-      postcss-selector-parser:
-        specifier: ^7.1.1
-        version: 7.1.3
      posthog-js:
        specifier: 1.408.2
        version: 1.408.2
@@ -268,6 +262,9 @@ 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))
@@ -1191,8 +1188,8 @@ packages:
      '@types/dom-mediacapture-transform': ^0.1.9
      livekit-client: ^1.12.0 || ^2.1.0

-  '@matrix-org/matrix-sdk-crypto-wasm@18.9.0':
-    resolution: {integrity: sha512-NtLzNDTEfNASBjNCTGZHuk7N0jrQhS6Zx2CM857rCHZYYh/rpbKGQNrJ7azktm4S1P5Jy3WU3nwJTGohGw26qQ==}
+  '@matrix-org/matrix-sdk-crypto-wasm@18.5.0':
+    resolution: {integrity: sha512-E826Hy1rG26LanPjtSsOiVRcVoHfSgPgj2r2Xsb5RPScpaKi9XJADQ0u3dNjRCitZPX4oyLNl1FDd5AfDlmIwQ==}
    engines: {node: '>= 18'}

  '@mdx-js/react@3.1.1':
@@ -3223,8 +3220,8 @@ packages:
    peerDependencies:
      react: '>= 16.8.0'

-  '@vector-im/compound-design-tokens@11.1.0':
-    resolution: {integrity: sha512-vkMcy/G5VBlVle8umQNpctKHqZITS8XOQprsgcbSGRmwW080Z+TXV/vPsEXhgq8JKdxURkLhua0zQUufCeo46A==}
+  '@vector-im/compound-design-tokens@11.0.0':
+    resolution: {integrity: sha512-pWz0Q67Xbo8gwzaTeFbTTcM6i29ju6PR7SqyuExr2nIV3j9K785cOInft8FA2CM7PEapkr6TRtJKR/4xtWh2RA==}
    peerDependencies:
      '@adobe/leonardo-contrast-colors': ^1.0.0
      '@types/react': '*'
@@ -3656,8 +3653,8 @@ packages:
  constants-browserify@1.0.0:
    resolution: {integrity: sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==}

-  content-type@3.1.1:
-    resolution: {integrity: sha512-GW4qUsfFo59d0HbUibDlWv5wPz+vAAcaTWbKIuKCf0JkC7wWkSyf8f13IpXn5JkeMlB2P8iTSSIjwXljorg2vA==}
+  content-type@3.0.0:
+    resolution: {integrity: sha512-AIi5H6p0xk5uknXcN3/rmhP8jgp69OfSe/JuKiQAFprJ7UGw7mwj7m4XcmDzlrnJDG+cGpphAINGdU3g3g7kDw==}
    engines: {node: '>=22'}

  convert-source-map@2.0.0:
@@ -4462,6 +4459,10 @@ 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
@@ -4673,9 +4674,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/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
+  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
    engines: {node: '>=22.0.0'}

  matrix-widget-api@1.19.0:
@@ -4696,6 +4697,14 @@ 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'}
@@ -4769,9 +4778,6 @@ packages:
    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
    engines: {node: '>=0.10.0'}

-  normalize.css@8.0.1:
-    resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
-
  npm-run-path@6.0.0:
    resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
    engines: {node: '>=18'}
@@ -4880,8 +4886,8 @@ packages:
    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
    engines: {node: '>=10'}

-  p-retry@8.0.1:
-    resolution: {integrity: sha512-NAigyu8hfvJe7MsS18mnc4is0MZtau3QMdBklaJKK23oBQb6occO3UPM3vHmTckW8KhfyjMZaUOqdTFEYliHgg==}
+  p-retry@8.0.0:
+    resolution: {integrity: sha512-kFVqH1HxOHp8LupNsOys7bSV09VYTRLxarH/mokO4Rqhk6wGi70E0jh4VzvVGXfEVNggHoHLAMWsQqHyU1Ey9A==}
    engines: {node: '>=22'}

  p-try@2.2.0:
@@ -5889,6 +5895,9 @@ 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:
@@ -7083,7 +7092,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.9.0': {}
+  '@matrix-org/matrix-sdk-crypto-wasm@18.5.0': {}

  '@mdx-js/react@3.1.1(@types/react@19.2.18)(react@19.2.8)':
    dependencies:
@@ -8667,12 +8676,12 @@ snapshots:
      '@use-gesture/core': 10.3.1
      react: 19.2.8

-  '@vector-im/compound-design-tokens@11.1.0(@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.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)':
+  '@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)
@@ -8684,7 +8693,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.1.0(@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)
@@ -9145,7 +9154,7 @@ snapshots:

  constants-browserify@1.0.0: {}

-  content-type@3.1.1: {}
+  content-type@3.0.0: {}

  convert-source-map@2.0.0: {}

@@ -10016,6 +10025,10 @@ 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
@@ -10227,17 +10240,17 @@ snapshots:

  matrix-events-sdk@0.0.1: {}

-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999:
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a:
    dependencies:
      '@babel/runtime': 8.0.0
-      '@matrix-org/matrix-sdk-crypto-wasm': 18.9.0
+      '@matrix-org/matrix-sdk-crypto-wasm': 18.5.0
      another-json: 0.2.0
      bs58: 6.0.0
-      content-type: 3.1.1
+      content-type: 3.0.0
      loglevel: 1.9.2
      matrix-events-sdk: 0.0.1
      matrix-widget-api: 1.19.0
-      p-retry: 8.0.1
+      p-retry: 8.0.0
      sdp-transform: 3.0.0
      unhomoglyph: 1.0.6

@@ -10264,6 +10277,12 @@ 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: {}
@@ -10341,8 +10360,6 @@ snapshots:

  normalize-path@3.0.0: {}

-  normalize.css@8.0.1: {}
-
  npm-run-path@6.0.0:
    dependencies:
      path-key: 4.0.0
@@ -10556,7 +10573,7 @@ snapshots:
    dependencies:
      p-limit: 3.1.0

-  p-retry@8.0.1:
+  p-retry@8.0.0:
    dependencies:
      is-network-error: 1.3.2

@@ -11624,6 +11641,13 @@ 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
@@ -9,11 +9,9 @@ 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, 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
+ * 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
@@ -35,9 +33,6 @@ 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 = [
@@ -45,8 +40,6 @@ const MUST_BE_EXTERNAL = [
  "react-dom",
  "matrix-js-sdk",
  "livekit-client",
-  "@vector-im/compound-web",
-  "@vector-im/compound-design-tokens",
 ];

 const isTestFile = (name) =>
@@ -56,7 +49,6 @@ 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;
@@ -1,73 +0,0 @@
-#!/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
@@ -1,62 +0,0 @@
-#!/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. 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.
-#
-# 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" "$@"
@@ -373,7 +373,7 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
    "intent:",
    intent,
    "\nproperties:",
-    redact(properties, "password", "posthogUserId"),
+    redact(properties, "password"),
    "configuration:",
    configuration,
  );
@@ -5,8 +5,8 @@ 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 element defaults and
-custom properties its own stylesheets build on top of.
+/* 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 as a component can have these
 without also being given the standalone page's layout, which would style the
@@ -16,13 +16,16 @@ 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.
+Everything here is written against Element Call's root element, found by the
+`data-element-call-root` attribute useTheme puts on it: the custom properties
+are declared on it rather than on `:root`, and the element defaults — the
+normalize.css next to this file, and the typography below — take it as a prefix
+so that they reach only what is inside it. For the standalone page the root is
+the body, so this means what the unscoped rules did; for a component it is the
+container the host gave, and the host's document is left as it was. Nothing
+rewrites selectors at build time, so a bare `h1` or `.theme` here would reach
+the host's page in every build. CSS modules need none of this, since their
+class names already confine them.

 Nothing here should depend on where it lands relative to Element Call's
 component stylesheets: the bundler decides that, and it decides differently for
@@ -30,9 +33,18 @@ the app and for the component build. */

@layer normalize, compound-legacy, compound;

-@import url("normalize.css/normalize.css") layer(normalize);
+@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");

-:root {
+@import url("./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);
+
+[data-element-call-root] {
  --font-scale: 1;
  --font-size-micro: calc(10px * var(--font-scale));
  --font-size-caption: calc(12px * var(--font-scale));
@@ -69,8 +81,8 @@ the app and for the component build. */
  --call-view-header-footer-layer: 2;
 }

-:root,
-[class*="cpd-theme-"] {
+[data-element-call-root],
+[data-element-call-root] [class*="cpd-theme-"] {
  --video-tile-background: var(--cpd-color-bg-subtle-secondary);
 }

@@ -89,7 +101,8 @@ before using one further down the tree. */
  container: element-call / size;
 }

-.cpd-theme-dark {
+[data-element-call-root].cpd-theme-dark,
+[data-element-call-root] .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);
@@ -116,11 +129,6 @@ before using one further down the tree. */
  }
 }

-/* 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. */
@@ -134,54 +142,45 @@ font-family. */
 }

@layer compound-legacy {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p,
-  a {
+  [data-element-call-root] :is(h1, h2, h3, h4, h5, h6, p, a) {
    margin-top: 0;
  }

  /* Headline Semi Bold */
-  h1 {
+  [data-element-call-root] h1 {
    font-weight: 600;
    font-size: var(--font-size-headline);
  }

  /* Title */
-  h2 {
+  [data-element-call-root] h2 {
    font-weight: 600;
    font-size: var(--font-size-title);
  }

  /* Subtitle */
-  h3 {
+  [data-element-call-root] h3 {
    font-weight: 600;
    font-size: var(--font-size-subtitle);
  }

  /* Body Semi Bold */
-  h4 {
+  [data-element-call-root] h4 {
    font-weight: 600;
    font-size: var(--font-size-body);
  }

-  h1,
-  h2,
-  h3 {
+  [data-element-call-root] :is(h1, h2, h3) {
    line-height: 1.2;
  }

  /* Body */
-  p {
+  [data-element-call-root] p {
    font-size: var(--font-size-body);
    line-height: var(--font-size-title);
  }

-  hr {
+  [data-element-call-root] hr {
    width: calc(100% - 24px);
    border: none;
    border-top: 1px solid var(--cpd-color-border-interactive-secondary);
@@ -195,25 +194,27 @@ font-family. */
    margin: 0 12px;
  }

-  summary {
+  [data-element-call-root] summary {
    font-size: var(--font-size-body);
  }

-  details > :not(summary) {
+  [data-element-call-root] details > :not(summary) {
    margin-left: var(--font-size-body);
  }

-  details[open] > summary {
+  [data-element-call-root] 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 {
+visible to be accessible. This resets it back to 'auto'. The root is named in
+`:where()`, which adds no specificity, so that the focus styles components set
+with a class still win over this. */
+:where([data-element-call-root]) button:-moz-focusring,
+:where([data-element-call-root]) [type="button"]:-moz-focusring,
+:where([data-element-call-root]) [type="reset"]:-moz-focusring,
+:where([data-element-call-root]) [type="submit"]:-moz-focusring {
  outline: auto;
 }
@@ -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 { readFile } from "node:fs/promises";
+import postcss, { type AtRule, type Rule } from "postcss";
+import { describe, expect, it } from "vitest";
+
+// As a component, Element Call's stylesheets share a document with the host's.
+// CSS modules keep to themselves through their class names, but the base styles
+// speak of bare elements and custom properties, and nothing rewrites them at
+// build time: each rule has to name the root itself.
+const ROOT = "[data-element-call-root]";
+
+/** Whether a rule is relative to something other than the document. */
+function isRelative(rule: Rule): boolean {
+  for (let parent = rule.parent; parent; parent = parent.parent) {
+    if (parent.type === "rule") return true;
+    if (parent.type === "atrule") {
+      const { name } = parent as AtRule;
+      if (name.endsWith("keyframes") || name === "page") return true;
+    }
+  }
+  return false;
+}
+
+describe.each(["src/base.css", "src/normalize.css"])("%s", (file) => {
+  it("confines every rule to Element Call's root", async () => {
+    const root = postcss.parse(await readFile(file, "utf8"), { from: file });
+    const unscoped: string[] = [];
+    root.walkRules((rule) => {
+      if (isRelative(rule)) return;
+      for (const selector of rule.selectors)
+        if (!selector.includes(ROOT))
+          unscoped.push(`${rule.source?.start?.line}: ${selector}`);
+    });
+    expect(unscoped).toEqual([]);
+  });
+});
@@ -83,7 +83,7 @@ div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div {
  flex: 0 0 auto;
 }

-.reactionPopupMenu .reactionsMenu .reactionButton {
+.reactionButton {
  padding: var(--reaction-button-padding);
  border-radius: var(--cpd-radius-pill-effect);
  font-size: var(--reaction-button-fontsize);
@@ -207,6 +207,12 @@ 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.
     */
@@ -7,24 +7,10 @@ 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.
-
-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. */
+and are not loaded when a host embeds Element Call as a component. */

@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);
@@ -45,6 +31,13 @@ body.no-scroll-body {
  width: 100%;
 }

+/* index.html starts the body with this class, so that nothing is painted until
+useTheme has decided the theme and removed it. Only the page starts out hidden
+like this; a host's container is shown whenever the host shows it. */
+body.no-theme {
+  opacity: 0;
+}
+
 html,
 body,
 #root {
@@ -0,0 +1,354 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* normalize.css, written against Element Call's root element instead of the
+document. Upstream's rules are kept word for word, with `html` and `body`
+replaced by `[data-element-call-root]` and every other selector prefixed with
+it, so that as a component Element Call normalizes only what is inside the
+container its host gave it. For the standalone page that container is the
+body, so this means what the unscoped stylesheet did. Upstream's `body`
+margin is left out: the page's margin is index.css's business, and a host's
+container is not ours to reset.
+
+Diff against upstream's normalize.css to see the changes. */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+[data-element-call-root] {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+[data-element-call-root] main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+[data-element-call-root] h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+[data-element-call-root] hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+[data-element-call-root] pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+[data-element-call-root] a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+[data-element-call-root] abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+[data-element-call-root] b,
+[data-element-call-root] strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+[data-element-call-root] code,
+[data-element-call-root] kbd,
+[data-element-call-root] samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+[data-element-call-root] small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+[data-element-call-root] sub,
+[data-element-call-root] sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+[data-element-call-root] sub {
+  bottom: -0.25em;
+}
+
+[data-element-call-root] sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+[data-element-call-root] img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+[data-element-call-root] button,
+[data-element-call-root] input,
+[data-element-call-root] optgroup,
+[data-element-call-root] select,
+[data-element-call-root] textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+[data-element-call-root] button,
+[data-element-call-root] input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+[data-element-call-root] button,
+[data-element-call-root] select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+[data-element-call-root] button,
+[data-element-call-root] [type="button"],
+[data-element-call-root] [type="reset"],
+[data-element-call-root] [type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+[data-element-call-root] button::-moz-focus-inner,
+[data-element-call-root] [type="button"]::-moz-focus-inner,
+[data-element-call-root] [type="reset"]::-moz-focus-inner,
+[data-element-call-root] [type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+[data-element-call-root] button:-moz-focusring,
+[data-element-call-root] [type="button"]:-moz-focusring,
+[data-element-call-root] [type="reset"]:-moz-focusring,
+[data-element-call-root] [type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+[data-element-call-root] fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+[data-element-call-root] legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+[data-element-call-root] progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+[data-element-call-root] textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[data-element-call-root] [type="checkbox"],
+[data-element-call-root] [type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[data-element-call-root] [type="number"]::-webkit-inner-spin-button,
+[data-element-call-root] [type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[data-element-call-root] [type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[data-element-call-root] [type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+[data-element-call-root] ::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+[data-element-call-root] details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+[data-element-call-root] summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+[data-element-call-root] template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[data-element-call-root] [hidden] {
+  display: none;
+}
@@ -1,77 +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 { 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("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(sounds).toEqual({});
-  });
-
-  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({});
-  });
-});
@@ -32,43 +32,6 @@ 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);
-  // 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;
-}
-
-/**
- * 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
@@ -84,20 +47,18 @@ 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.
-      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);
-      }
-      if (buffer === null) {
+      // Load an audio file
+      const response = await fetch(
+        preferredFormat === "ogg" ? ogg : (mp3 ?? ogg),
+      );
+      if (isFailure(response)) {
        // 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;
      }
-      buffers[name] = buffer;
+      // Decode it
+      buffers[name] = await response.arrayBuffer();
    }),
  );
  return buffers as Record<S, ArrayBuffer>;
@@ -43,7 +43,7 @@ import {
 import { type Logger, logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import {
  MembershipManagerEvent,
-  type LivekitTransport,
+  type LivekitTransportConfig,
  type MatrixRTCSession,
  type RTCCallIntent,
  type RTCNotificationType,
@@ -624,7 +624,7 @@ export function createCallViewModel$(
    ),
    muteStates,
    joinMatrixRTC: (
-      transport: LivekitTransport,
+      transport: LivekitTransportConfig,
      delayedLeaveTimings: ResolvedDelayedLeaveTimings,
    ) => {
      return enterRTCSession(
@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.

 import {
  Status as RTCMemberStatus,
-  type LivekitTransport,
+  type LivekitTransportConfig,
  type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
 import {
@@ -121,7 +121,8 @@ const mockedClient = {
 };

 describe("enterRTCSession", () => {
-  const transport: LivekitTransport = {
+  const transport: LivekitTransportConfig = {
+    livekit_alias: "roomId",
    livekit_service_url: "http://my-livekit-service-url.com",
    type: "livekit",
  };
@@ -138,7 +139,7 @@ describe("enterRTCSession", () => {
      client: mockedClient,
    },
    memberships: [],
-    join: vi.fn(),
+    joinRTCSession: vi.fn(),
  }) as unknown as MatrixRTCSession;

  beforeEach(() =>
@@ -150,18 +151,19 @@ describe("enterRTCSession", () => {
  it("It joins the correct Session", () => {
    enterRTCSession(mockedSession, ownMemberMock, transport, options);

-    expect(mockedSession.join).toHaveBeenLastCalledWith(
+    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
      {
        deviceId: "DEVICE",
        memberId: "@alice:example.org:DEVICE",
        userId: "@alice:example.org",
      },
-      [transport],
+      [],
+      transport,
      expect.objectContaining({ manageMediaKeys: true }),
    );
  });

-  it("passes keyRotationParticipantLimit from config to join", () => {
+  it("passes keyRotationParticipantLimit from config to joinRTCSession", () => {
    mockConfig({
      livekit: { livekit_service_url: "http://my-default-service-url.com" },
      matrix_rtc_session: {
@@ -174,8 +176,9 @@ describe("enterRTCSession", () => {

    enterRTCSession(mockedSession, ownMemberMock, transport, options);

-    expect(mockedSession.join).toHaveBeenLastCalledWith(
+    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
      expect.any(Object),
+      [],
      expect.any(Object),
      expect.objectContaining({
        keyRotationParticipantLimit: 50,
@@ -186,7 +189,8 @@ describe("enterRTCSession", () => {
  it("uses the specified delayed leave timings", () => {
    enterRTCSession(mockedSession, ownMemberMock, transport, options);

-    expect(mockedSession.join).toHaveBeenLastCalledWith(
+    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
+      expect.anything(),
      expect.anything(),
      expect.anything(),
      expect.objectContaining({
@@ -206,7 +210,7 @@ describe("LocalMembership", () => {
    }),
    matrixRTCSession: {
      updateCallIntent: vi.fn().mockReturnValue(Promise.resolve()),
-      leave: vi.fn(),
+      leaveRoomSession: vi.fn(),
    } as unknown as MatrixRTCSession,
    muteStates: mockMuteStates(),
    trackProcessorState$: constant({
@@ -252,7 +256,7 @@ describe("LocalMembership", () => {

  it("throws error on missing RTC config error", () => {
    withTestScheduler(({ scope, hot, expectObservable }) => {
-      const localTransport$ = scope.behavior<null | LivekitTransport>(
+      const localTransport$ = scope.behavior<null | LivekitTransportConfig>(
        hot("1ms #", {}, new MatrixRTCTransportMissingError("domain.com")),
        null,
      );
@@ -300,7 +304,7 @@ describe("LocalMembership", () => {
      ...defaultCreateLocalMemberValues,
      matrixRTCSession: {
        updateCallIntent: vi.fn().mockImplementation(reject),
-        leave: vi.fn(),
+        leaveRoomSession: vi.fn(),
      },
      connectionManager: mockConnectionManager,
      localTransport$: constant(mockTransport),
@@ -317,7 +321,7 @@ describe("LocalMembership", () => {

  const mockTransportConfig = {
    livekit_service_url: "a",
-  } as LivekitTransport;
+  } as LivekitTransportConfig;

  const mockTransport = {
    transport: mockTransportConfig,
@@ -19,6 +19,7 @@ import { type MatrixClient } from "matrix-js-sdk";
 import {
  Status as RTCSessionStatus,
  type LivekitTransport,
+  type LivekitTransportConfig,
  type MatrixRTCSession,
  type RTCCallIntent,
  type RTCNotificationType,
@@ -143,7 +144,7 @@ interface Props {
  connectionManager: IConnectionManager;
  createPublisherFactory: (connection: Connection) => Publisher;
  joinMatrixRTC: (
-    transport: LivekitTransport,
+    transport: LivekitTransportConfig,
    delayedLeaveTimings: ResolvedDelayedLeaveTimings,
  ) => void;
  homeserverConnected: HomeserverConnected;
@@ -151,7 +152,10 @@ interface Props {
  ownMembershipIdentity: CallMembershipIdentityParts;
  localTransport$: Observable<LocalTransport>;
  client: Pick<MatrixClient, "getDeviceId" | "getOpenIdToken">;
-  matrixRTCSession: Pick<MatrixRTCSession, "updateCallIntent" | "leave">;
+  matrixRTCSession: Pick<
+    MatrixRTCSession,
+    "updateCallIntent" | "leaveRoomSession"
+  >;
  /** Whether to hide the screen-sharing button. */
  hideScreensharing: boolean;
  /** The application hosting Element Call, to be kept informed of join/leave. */
@@ -679,7 +683,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.leave(1000);
+          await matrixRTCSession.leaveRoomSession(1000);
        } catch (e) {
          logger.error("Error leaving RTC session", e);
        }
@@ -962,7 +966,7 @@ interface EnterRTCSessionOptions {
 export function enterRTCSession(
  rtcSession: MatrixRTCSession,
  ownMembershipIdentity: CallMembershipIdentityParts,
-  transport: LivekitTransport,
+  transport: LivekitTransportConfig,
  {
    encryptMedia,
    matrixRTCMode,
@@ -984,6 +988,18 @@ 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.
@@ -995,18 +1011,24 @@ 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.join(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,
-    membershipEventExpiryMs: sessionConfig.membership_event_expiry_ms,
-    keyRotationParticipantLimit: sessionConfig.key_rotation_participant_limit,
-    unstableSendStickyEvents: matrixRTCMode === MatrixRTCMode.Matrix_2_0,
-    maximumNetworkErrorRetryCount: maximumNetworkErrorRetryCount,
-  });
+  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,
+    },
+  );
 }
@@ -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 LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransportConfig } 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,13 +34,34 @@ 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: LivekitTransport;
+  transport: LivekitTransportConfig;
  sfuConfig: SFUConfig;
 }

 export function isLocalTransport(
-  obj: LivekitTransport | LocalTransport,
+  obj: LivekitTransportConfig | LocalTransport,
 ): obj is LocalTransport {
  return "transport" in obj && "sfuConfig" in obj;
 }
@@ -69,7 +90,7 @@ export async function getLocalTransport({
  const customUrl = customLivekitUrl.value$.value;

  // Respect the user's custom URL, if set
-  const transport: LivekitTransport | null = customUrl
+  const transport: LivekitTransportConfig | null = customUrl
    ? { type: "livekit", livekit_service_url: customUrl }
    : await discovery.discoverPreferredTransport();

@@ -110,7 +131,7 @@ export async function getLocalTransport({
 *  @throws FailToGetOpenIdToken, NoMatrix2AuthorizationService
 */
 async function doOpenIdAndJWTFromUrl(
-  transport: LivekitTransport,
+  transport: LivekitTransportConfig,
  matrixRTCMode: MatrixRTCMode,
  membership: CallMembershipIdentityParts,
  roomId: string,
@@ -16,7 +16,7 @@ import {
 import { MatrixError } from "matrix-js-sdk";
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import {
-  type LivekitTransport,
+  type LivekitTransportConfig,
  type Transport,
 } from "matrix-js-sdk/lib/matrixrtc";

@@ -28,12 +28,12 @@ import {

 type DiscoveryClient = RtcTransportAutoDiscoveryProps["client"];

-const backendTransport: LivekitTransport = {
+const backendTransport: LivekitTransportConfig = {
  type: "livekit",
  livekit_service_url: "https://backend.example.org",
 };

-const configTransport: LivekitTransport = {
+const configTransport: LivekitTransportConfig = {
  type: "livekit",
  livekit_service_url: "https://config.example.org",
 };
@@ -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 {
-  isLivekitTransport,
-  type LivekitTransport,
+  isLivekitTransportConfig,
+  type LivekitTransportConfig,
 } 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<LivekitTransport | null> {
+  public async discoverPreferredTransport(): Promise<LivekitTransportConfig | 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<LivekitTransport | null> {
+  private async tryBackendTransports(): Promise<LivekitTransportConfig | 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(isLivekitTransport);
+      const first = transportList.find(isLivekitTransportConfig);
      if (first) {
        return first;
      } else {
@@ -90,7 +90,7 @@ export class RtcTransportAutoDiscovery {
    return null;
  }

-  private tryConfigTransport(): LivekitTransport | null {
+  private tryConfigTransport(): LivekitTransportConfig | null {
    const url = this.resolvedConfig.livekit?.livekit_service_url;
    if (url) {
      return {
@@ -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 LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";

 import {
  Connection,
@@ -57,7 +57,7 @@ let fakeLocalParticipant: MockedObject<LocalParticipant>;

 const ROOM_ID = "!roomID:example.org";

-const livekitFocus: LivekitTransport = {
+const livekitFocus: LivekitTransportConfig = {
  livekit_service_url: "https://matrix-rtc.example.org/livekit/jwt",
  type: "livekit",
 };
@@ -228,7 +228,9 @@ describe("Start connection states", () => {
    capturedState = capturedStates.pop();
    if (capturedState instanceof Error) {
      expect(capturedState.message).toEqual("Something went wrong");
-      expect(connection.transport).toEqual(livekitFocus);
+      expect(connection.transport.livekit_alias).toEqual(
+        livekitFocus.livekit_alias,
+      );
    } else {
      expect.fail("Expected FailedToStart state but got " + capturedState);
    }
@@ -288,7 +290,9 @@ describe("Start connection states", () => {
      expect(capturedState.cause.message).toContain(
        "Failed to look up user info from homeserver",
      );
-      expect(connection.transport).toEqual(livekitFocus);
+      expect(connection.transport.livekit_alias).toEqual(
+        livekitFocus.livekit_alias,
+      );
    } else {
      expect.fail("Expected FailedToStart state but got " + capturedState);
    }
@@ -353,7 +357,9 @@ describe("Start connection states", () => {
      expect(capturedState.cause.message).toContain(
        "Failed to connect to livekit",
      );
-      expect(connection.transport).toEqual(livekitFocus);
+      expect(connection.transport.livekit_alias).toEqual(
+        livekitFocus.livekit_alias,
+      );
    } else {
      expect.fail(
        "Expected FailedToStart state but got " + JSON.stringify(capturedState),
@@ -22,7 +22,7 @@ import {
  type Track,
  type TrackPublication,
 } from "livekit-client";
-import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransportConfig } 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: LivekitTransport;
+  transport: LivekitTransportConfig;
  /** 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: LivekitTransport;
+  public readonly transport: LivekitTransportConfig;

  public readonly livekitRoom: LivekitRoom;

@@ -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 LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransportConfig } 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: LivekitTransport,
+    transport: LivekitTransportConfig,
    ownMembershipIdentity: CallMembershipIdentityParts,
    logger: Logger,
    sfuConfig?: SFUConfig,
@@ -103,7 +103,7 @@ export class ECConnectionFactory implements ConnectionFactory {
   */
  public createConnection(
    scope: ObservableScope,
-    transport: LivekitTransport,
+    transport: LivekitTransportConfig,
    ownMembershipIdentity: CallMembershipIdentityParts,
    logger: Logger,
    sfuConfig?: SFUConfig,
@@ -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 LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransportConfig } 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: LivekitTransport = {
+const TRANSPORT_1: LivekitTransportConfig = {
  type: "livekit",
  livekit_service_url: "https://lk.example.org",
 };

-const TRANSPORT_2: LivekitTransport = {
+const TRANSPORT_2: LivekitTransportConfig = {
  type: "livekit",
  livekit_service_url: "https://lk.sample.com",
 };
@@ -47,7 +47,7 @@ beforeEach(() => {
  vi.mocked(fakeConnectionFactory).createConnection = vi
    .fn()
    .mockImplementation(
-      (scope: ObservableScope, transport: LivekitTransport) => {
+      (scope: ObservableScope, transport: LivekitTransportConfig) => {
        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: LivekitTransport): string {
+  function keyForTransport(transport: LivekitTransportConfig): string {
    return `${transport.livekit_service_url}`;
  }

@@ -233,7 +233,7 @@ describe("connectionManagerData$ stream", () => {
    fakeRemoteParticipantsStreams = new Map();

    function getRemoteParticipantsFor(
-      transport: LivekitTransport,
+      transport: LivekitTransportConfig,
    ): Behavior<RemoteParticipant[]> {
      return (
        fakeRemoteParticipantsStreams.get(keyForTransport(transport)) ??
@@ -245,7 +245,7 @@ describe("connectionManagerData$ stream", () => {
    vi.mocked(fakeConnectionFactory).createConnection = vi
      .fn()
      .mockImplementation(
-        (scope: ObservableScope, transport: LivekitTransport) => {
+        (scope: ObservableScope, transport: LivekitTransportConfig) => {
          const fakeRemoteParticipants$ = new BehaviorSubject<
            RemoteParticipant[]
          >([]);
@@ -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 LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
 import {
  combineLatest,
  map,
@@ -56,7 +56,7 @@ export class ConnectionManagerData {
    }
  }

-  private getKey(transport: LivekitTransport): string {
+  private getKey(transport: LivekitTransportConfig): 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: LivekitTransport,
+    transport: LivekitTransportConfig,
  ): Connection | null {
    return this.store.get(this.getKey(transport))?.connection ?? null;
  }

  public getParticipantsForTransport(
-    transport: LivekitTransport,
+    transport: LivekitTransportConfig,
  ): 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<LivekitTransport[]>>;
+  remoteTransports$: Behavior<Epoch<LivekitTransportConfig[]>>;

  logger: Logger;
  ownMembershipIdentity: CallMembershipIdentityParts;
@@ -147,7 +147,7 @@ export function createConnectionManager$({
   * externally this is modified via `registerTransports()`.
   */
  const localAndRemoteTransports$: Behavior<
-    Epoch<(LivekitTransport | LocalTransport)[]>
+    Epoch<(LivekitTransportConfig | 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 LivekitTransport>(
+function removeDuplicateTransports<T extends LivekitTransportConfig>(
  transports: T[],
 ): T[] {
  return transports.reduce((acc, transport) => {
@@ -42,11 +42,13 @@ 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", {
@@ -124,7 +126,7 @@ function createEpochedMemberships$(m$: Observable<CallMembership[]>): {
  const membershipsWithTransport$ = memberships$.pipe(
    mapEpoch((members) => {
      return members.map((m) => {
-        const tr = m.getTransport();
+        const tr = m.getTransport(m);
        return {
          membership: m,
          transport:
@@ -150,7 +152,7 @@ test("should signal participant on a connection that is publishing", async () =>
  );

  const connection = {
-    transport: bobMembership.getTransport(),
+    transport: bobMembership.getTransport(bobMembership),
  } as unknown as Connection;
  const dataWithPublisher = new ConnectionManagerData();
  dataWithPublisher.add(connection, [
@@ -193,7 +195,7 @@ test("should signal participant on a connection that is not publishing", async (
  );

  const connection = {
-    transport: bobMembership.getTransport(),
+    transport: bobMembership.getTransport(bobMembership),
  } as unknown as Connection;
  const dataWithPublisher = new ConnectionManagerData();
  dataWithPublisher.add(connection, []);
@@ -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 LivekitTransport,
+  type LivekitTransportConfig,
 } 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?: LivekitTransport }[]>
+    Epoch<{ membership: CallMembership; transport?: LivekitTransportConfig }[]>
  >;
  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 LivekitTransport>(
+export function areLivekitTransportsEqual<T extends LivekitTransportConfig>(
  t1: T | null,
  t2: T | null,
 ): boolean {
@@ -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 LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransportConfig } 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 LivekitTransport,
+              bobMembership.transports[0]! as LivekitTransportConfig,
            ),
          ),
        });
@@ -186,7 +186,7 @@ test("bob, carl, then bob joining no tracks yet", () => {
              expect(
                areLivekitTransportsEqual(
                  connection.transport,
-                  carlMembership.transports[0]! as LivekitTransport,
+                  carlMembership.transports[0]! as LivekitTransportConfig,
                ),
              ).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 LivekitTransport,
+                  daveMembership.transports[0]! as LivekitTransportConfig,
                ),
              ).toBe(true);
              return true;
@@ -7,10 +7,10 @@ Please see LICENSE in the repository root for full details.

 import {
  type CallMembership,
-  type LivekitTransport,
+  type LivekitTransportConfig,
  type MatrixRTCSession,
  MatrixRTCSessionEvent,
-  isLivekitTransport,
+  isLivekitTransportConfig,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { fromEvent } from "rxjs";

@@ -31,32 +31,35 @@ export const membershipsAndTransports$ = (
  memberships$: Behavior<Epoch<CallMembership[]>>,
 ): {
  membershipsWithTransport$: Behavior<
-    Epoch<{ membership: CallMembership; transport?: LivekitTransport }[]>
+    Epoch<{ membership: CallMembership; transport?: LivekitTransportConfig }[]>
  >;
-  transports$: Behavior<Epoch<LivekitTransport[]>>;
+  transports$: Behavior<Epoch<LivekitTransportConfig[]>>;
 } => {
  const membershipsWithTransport$: Behavior<
    Epoch<
      {
        membership: CallMembership;
-        transport: LivekitTransport | undefined;
+        transport: LivekitTransportConfig | undefined;
      }[]
    >
  > = scope.behavior(
    memberships$.pipe(
      mapEpoch((memberships) => {
        return memberships.map((membership) => {
-          const transport = membership.getTransport();
+          const oldestMembership = memberships[0] ?? membership;
+          const transport = membership.getTransport(oldestMembership);
          return {
            membership,
-            transport: isLivekitTransport(transport) ? transport : undefined,
+            transport: isLivekitTransportConfig(transport)
+              ? transport
+              : undefined,
          };
        });
      }),
    ),
  );

-  const transports$: Behavior<Epoch<LivekitTransport[]>> = scope.behavior(
+  const transports$: Behavior<Epoch<LivekitTransportConfig[]>> = scope.behavior(
    membershipsWithTransport$.pipe(
      mapEpoch((mts) => mts.flatMap(({ transport: t }) => (t ? [t] : []))),
    ),
@@ -156,7 +156,7 @@ export function useAudioContext<S extends string>(
      }
      setAudioBuffers(buffers as Record<S, AudioBuffer>);
    })().catch((ex) => {
-      logger.warn("Failed to setup audio context", ex);
+      logger.debug("Failed to setup audio context", ex);
    });

    setAudioContext(ctx);
@@ -209,9 +209,7 @@ export function useAudioContext<S extends string>(
    },
    playSoundLooping: (name, delayS: number): (() => Promise<void>) => {
      if (!audioBuffers[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 () => {};
+        throw Error(`Tried to play a sound that wasn't buffered (${name})`);
      }
      return playSoundLooping(
        audioContext,
@@ -212,6 +212,7 @@ 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 = {
@@ -472,7 +473,7 @@ export class MockRTCSession extends TypedEventEmitter<
    counters: {},
  };

-  public leave: ReturnType<typeof vitest.fn> = vitest
+  public leaveRoomSession: ReturnType<typeof vitest.fn> = vitest
    .fn()
    .mockResolvedValue(undefined);

@@ -531,7 +532,7 @@ export class MockRTCSession extends TypedEventEmitter<
    if (value !== prev) this.emit(MembershipManagerEvent.ProbablyLeft, value);
  }

-  public async join(): Promise<void> {
+  public async joinRTCSession(): Promise<void> {
    return Promise.resolve();
  }
 }
@@ -10,7 +10,6 @@ import { realpathSync } from "node:fs";
 import * as fs from "node:fs";

 import { vitePluginsConfig } from "./vite.config.ts";
-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
@@ -36,9 +35,6 @@ 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",
@@ -8,7 +8,6 @@ Please see LICENSE in the repository root for full details.
 import { defineConfig } from "vite";

 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
 // application embedding it rather than served as a page of its own.
@@ -34,9 +33,6 @@ export default defineConfig(({ mode }) => {
    // 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: {
      // Into the package directory, so that `component/package.json` describes
      // what sits next to it and the directory can be installed as a package
@@ -65,12 +61,8 @@ 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, 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.
+        // 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
@@ -107,8 +99,6 @@ 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",
        ],
      },
    },
@@ -6,6 +6,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.ts";

@@ -18,6 +19,19 @@ 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,
+              },
+            },
+          },
+        ]),
+      ],
    }),
  ),
 );
@@ -25,7 +25,6 @@ export default defineConfig((configEnv) =>
                "src/**/*.test.ts",
                "src/**/*.test.tsx",
                "component/**/*.test.ts",
-                "component/**/*.test.tsx",
              ],
            },
          },