Sound listing clean-up

Merge pull request #4337 from element-hq/johannes/remove-per-participant-e2ee-param
Remove perParticipantE2EE
2026-10-16 23:45:50 +00:00 · 2026-10-09 16:06:19 +02:00 · 2026-10-09 12:01:45 +02:00 · 2026-10-09 01:18:17 +00:00 · 2026-10-08 17:15:19 +02:00 · 2026-10-08 16:40:45 +02:00
53 changed files with 1201 additions and 550 deletions
@@ -102,6 +102,9 @@
 - name: "backport-candidate"
  description: "Something that is a candidate for backport to a particular release branch"
  color: "0B8D85"
+- name: "Claude-Review"
+  description: "Request code review from Claude"
+  color: "e57157"
 - name: "customer-retainer"
  color: "F44A5F"
 - name: "dependencies"
@@ -44,7 +44,9 @@ 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: "pnpm install --frozen-lockfile --ignore-pnpmfile"
+        run: "scripts/layered.sh --ignore-pnpmfile"
+        env:
+          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
      - name: Build Element Call
        run: pnpm run build:"$PACKAGE":"$BUILD_MODE"
        env:
@@ -0,0 +1,90 @@
+name: Claude
+on:
+  pull_request:
+    types: [labeled]
+
+permissions:
+  # The action exchanges the GitHub OIDC token for a short-lived Anthropic
+  # access token. GitHub API access goes through CLAUDE_GH_TOKEN instead.
+  id-token: write
+
+jobs:
+  review:
+    name: Review
+    # Only run on labelling and skip forks.
+    if: github.event.label.name == 'Claude-Review' && github.event.pull_request.head.repo.full_name == github.repository
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@11d5960a326750d5838078e36cf38b85af677262 # v4.4.0
+        with:
+          # The review looks at the individual commits, not just the combined diff
+          fetch-depth: 0
+          persist-credentials: false
+      - name: Review
+        uses: anthropics/claude-code-action@6fed3ca145920b639991cb756090506e1bcaf515 # v1.0.245
+        with:
+          anthropic_federation_rule_id: fdrl_01XQmWo4nka1ZTqZdsdeScyr
+          anthropic_organization_id: dfbc9a23-d636-4653-8970-035204ef60fa
+          anthropic_service_account_id: svac_018Ay5qaA7ZW8X7XsbdekqUM
+          anthropic_workspace_id: wrkspc_01Aw8LHjBS6fZysu9yqzYifW
+          # The token used here must grant read access to code, issues, and metadata as well as
+          # read and write access to pull requests.
+          github_token: ${{ secrets.CLAUDE_GH_TOKEN }}
+          use_sticky_comment: true
+          track_progress: true
+          prompt: |
+            Review this pull request under the following (and no further) angles:
+
+            1. Scope:
+
+               - Does the PR do one thing?
+               - Is the PR free of unrelated fixes and drive-by refactorings?
+               - If the PR is large, could it reasonably be split into smaller PRs
+                 that still deliver value?
+
+            2. Commits:
+               
+               - Is the work split into self-contained commits of reasonable size?
+               - Are the commits arranged in a sensible order?
+               - Have required refactorings been split out into separate commits?
+               - Is the history free of "wip", checkpoint and fixup-style commits
+                 which only correct an earlier commit in the same PR?
+
+            3. Code:
+
+               - Are the code changes functionally correct?
+               - Do the changes introduce new security vulnerabilities or metadata
+                 leaks?
+               - Is the new code performant enough?
+               - Don't check anything that is already validated via other GitHub
+                 workflows like linting, formatting or tests passing.
+
+            Read the commits themselves with `git log` and `git diff` against
+            the base branch of the PR.
+
+            Drop any findings that are outside the above review angles or that don't
+            require resolution. Grade the severity of each finding as either "🟡 low",
+            "🟠 medium" or "🔴 high". Devise at least one possible resolution for each
+            finding.
+
+            Report the graded findings and resolutions from the "Code" angle as inline
+            comments. Add a footer "_-- Finding from automated review_" to each inline
+            comment.
+
+            Finally, report your overall result as PR comment. Start your message with
+            "# Automated review". Then add one section per review angle with:
+
+            - A verdict of "✅ PASS" or "❌ NEEDS WORK"
+            - A bullet list summarizing the remaining non-inlined graded findings and
+              resolutions (as nested bullets).
+
+            Be brief and concise in all your communication. Do not mention what you have
+            not covered and don't bring up issues that have already been fixed.
+
+            Use Markdown links for anything that can be navigated to on GitHub such
+            as files, commits, issues, pull requests, workflow runs, etc.
+          claude_args: |
+            --model claude-fable-5-1
+            --allowedTools "mcp__github_inline_comment__create_inline_comment,Bash(git log:*),Bash(git diff:*),Bash(git show:*)"
+            --max-turns 50
@@ -1,6 +1,12 @@
 name: Lint, format & type check
 on:
  pull_request: {}
+  workflow_call:
+    inputs:
+      matrix-js-sdk-sha:
+        type: string
+        required: false
+        description: The matrix-js-sdk commit to build against instead of the locked one
 jobs:
  lint:
    name: Lint, format & type check
@@ -9,6 +15,8 @@ jobs:
      - name: Checkout code
        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
        with:
+          # Inside a called workflow, github.repository is the caller so we need to make sure to still check out the EC repo here.
+          repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-call' || github.repository }}
          persist-credentials: false
      - name: Enable Corepack
        run: corepack enable
@@ -19,7 +27,10 @@ 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: "pnpm install --frozen-lockfile --ignore-pnpmfile"
+        run: "scripts/layered.sh --ignore-pnpmfile"
+        env:
+          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
+          JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
      - name: Formatting
        run: "pnpm run format:check"
      - name: i18n
@@ -3,6 +3,25 @@ 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
@@ -11,6 +30,8 @@ jobs:
      - name: Checkout code
        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
        with:
+          # Inside a called workflow, github.repository is the caller so we need to make sure to still check out the EC repo here.
+          repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-call' || github.repository }}
          persist-credentials: false
      - name: Enable Corepack
        run: corepack enable
@@ -21,7 +42,10 @@ 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: "pnpm install --frozen-lockfile --ignore-pnpmfile"
+        run: "scripts/layered.sh --ignore-pnpmfile"
+        env:
+          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
+          JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
      - name: Get Playwright version
        run: echo "PLAYWRIGHT_VERSION=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[0].devDependencies["@playwright/test"].version')" >> $GITHUB_ENV
      - name: Cache Playwright binaries
@@ -35,8 +59,11 @@ jobs:
        if: steps.playwright-cache.outputs.cache-hit != 'true'
        run: pnpm playwright install --with-deps
      - name: Vitest
-        run: "pnpm run test:coverage"
+        run: pnpm vitest --coverage.enabled="$ENABLE_COVERAGE"
+        env:
+          ENABLE_COVERAGE: ${{ !inputs.disable_coverage }}
      - name: Upload to codecov
+        if: ${{ !inputs.disable_coverage }}
        uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7
        env:
          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
@@ -45,11 +72,14 @@ 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
@@ -59,7 +89,10 @@ 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: pnpm install --frozen-lockfile --ignore-pnpmfile
+        run: scripts/layered.sh --ignore-pnpmfile
+        env:
+          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
+          JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
      - name: Get Playwright version
        run: echo "PLAYWRIGHT_VERSION=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[0].devDependencies["@playwright/test"].version')" >> $GITHUB_ENV
      - name: Cache Playwright binaries
@@ -41,3 +41,6 @@ yarn-error.log

 *storybook.log
 storybook-static
+
+# Nested checkout made by scripts/layered.sh
+/matrix-js-sdk/
@@ -297,8 +297,8 @@ The package is not published yet. A host installs it as a git dependency on the
 ```

 whose `prepare` script runs the build on install. That build needs pnpm (via
-Corepack) on the host's machine, runs a full `pnpm install` of this repository
-and is memory-hungry, since it inherits the `--max-old-space-size` setting of
+Corepack) on the host's machine, runs a full `pnpm install` of this repository,
+since it inherits the `--max-old-space-size` setting of
 the app build; the host's pnpm also has to allow it to run at all
 (`allowBuilds` in its `pnpm-workspace.yaml`). Note that `component/` is a pnpm
 project of its own for this reason, so pnpm commands run from inside that
@@ -306,8 +306,11 @@ directory target it rather than the repository; run them from the repository
 root. The host imports the component from
 `@element-hq/element-call-component` and the stylesheet from
 `@element-hq/element-call-component/style.css`, and has to provide `react`,
-`react-dom`, `matrix-js-sdk` and `livekit-client` itself, since the bundle leaves
-them external.
+`react-dom`, `matrix-js-sdk`, `@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)

 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,10 +34,18 @@ component rather than a page makes. */
  -webkit-tap-highlight-color: transparent;
 }

-/* Compound's overlay container, which holds tooltips and popovers, has to fill
-the container for the elements inside it to be positioned against it. The
-standalone page does the same for the container under `#root`. */
-.root > [data-overlay-container] {
-  position: relative;
+/* 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%;
+  position: relative;
+  isolation: isolate;
 }
@@ -40,10 +40,10 @@ const IS_ROOT = `:where(${ROOT_SELECTOR})`;
 * Element Call as a component.
 *
 * As a page of its own, Element Call can style the document: normalize.css and
- * Compound speak of `html`, `body` and bare elements, and the design tokens are
- * declared on `:root`. As a component, all of that would land on the host's
- * document too. This rewrites every selector so that it matches only the root
- * or its descendants:
+ * its own base styles speak of `html`, `body` and bare elements, and its custom
+ * properties are declared on `:root`. As a component, all of that would land on
+ * the host's document too. This rewrites every selector so that it matches only
+ * the root or its descendants:
 *
 * - `html`, `body` and `:root` become the root element, which is what stands in
 *   for the document inside a host.
@@ -55,9 +55,10 @@ const IS_ROOT = `:where(${ROOT_SELECTOR})`;
 * CSS modules are scoped by their class names already, so only their selectors
 * that would match by element alone — `pre` rather than `.pre` — are touched.
 *
- * The root's fonts and design tokens are still inherited by everything inside
- * it, the way they were from `body` and `:root`, and `@font-face` declarations
- * stay global, which they are by nature.
+ * The root's custom properties are still inherited by everything inside it,
+ * the way they were from `:root`. Compound's own stylesheet — the design
+ * tokens, the component styles, the fonts — is not in this build at all: the
+ * host supplies it, unscoped, along with its copy of Compound.
 */
 export function scopeStylesToRoot(): Plugin {
  return {
@@ -9,6 +9,16 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { logger } from "matrix-js-sdk/lib/logger";

+// What a host provides along with its copy of Compound: its stylesheet, the
+// design tokens and the fonts they name. The component does not bundle them.
+import "@fontsource/inter/400.css";
+import "@fontsource/inter/500.css";
+import "@fontsource/inter/600.css";
+import "@fontsource/inter/700.css";
+import "@fontsource/inconsolata/400.css";
+import "@fontsource/inconsolata/700.css";
+import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
+import "@vector-im/compound-web/dist/style.css";
 import { type ConfigOptions, initializeElementCall } from "../index";
 import { Harness } from "./Harness";
 // After Element Call's, so that the host has the last word on its own page
@@ -17,19 +17,25 @@ Please see LICENSE in the repository root for full details.
 * host instead, or is confined to the container it is mounted in.
 */

-// The design tokens, fonts and element defaults every Element Call stylesheet
+// The element defaults and custom properties every Element Call stylesheet
 // builds on. Written for a page, they speak of `html`, `body` and bare
 // elements; the component build confines them, and every other stylesheet in
 // this bundle, to the root element below (see build/scopeStylesToRoot.ts), so
 // that the host's document is left as it was.
 //
+// Compound is not in here. The component uses the host's copy of it (a peer
+// dependency, left external by the build), and the host loads Compound's
+// stylesheet, design tokens and fonts along with it: what Compound floats into
+// the host's body — tooltips, menus — is then styled by the same stylesheet as
+// everything else there, and Element Call's root takes the tokens and fonts of
+// the theme class it carries, as any element on the host's page would.
+//
 // Where these land relative to the component stylesheets is the bundler's
 // choice — the standalone app puts them first, this build puts them in the
 // middle — so nothing in base.css may depend on winning or losing against a
 // component's own rules at equal specificity. It currently does not: what it
 // declares unlayered is custom properties on Element Call's root, which
-// components inherit rather than compete with, and everything from Compound
-// sits in a `@layer`, which loses to unlayered rules either way.
+// components inherit rather than compete with.
 import "../src/base.css";

 import {
@@ -231,34 +237,38 @@ export const ElementCall: FC<ElementCallProps> = ({
        <UrlParamsProvider value={params}>
          <div ref={setContainer} className={styles.root}>
            {ready && (
-              <RootElementProvider value={container}>
-                {/* Whatever goes wrong in here is shown in here. Left to
+              // Stands in for the standalone page's `#root`: see `.content`
+              // in ElementCall.module.css
+              <div className={styles.content}>
+                <RootElementProvider value={container}>
+                  {/* Whatever goes wrong in here is shown in here. Left to
                  propagate, an error would unmount the host's own tree. */}
-                <ErrorBoundary
-                  fallback={(error) => <ErrorPage error={error} />}
-                  // A broken call should not hold the host on screen
-                  onError={() => void hostBridge.setAlwaysOnScreen(false)}
-                >
-                  <Decoration>
-                    <TooltipProvider>
-                      <ClientProvider client={client}>
-                        <MediaDevicesContext value={mediaDevices}>
-                          <ProcessorProvider>
-                            <CallView
-                              client={client}
-                              rtcSession={rtcSession}
-                              isPasswordlessUser={false}
-                              confineToRoom={params.confineToRoom}
-                              preload={params.preload}
-                              skipLobby={params.skipLobby}
-                            />
-                          </ProcessorProvider>
-                        </MediaDevicesContext>
-                      </ClientProvider>
-                    </TooltipProvider>
-                  </Decoration>
-                </ErrorBoundary>
-              </RootElementProvider>
+                  <ErrorBoundary
+                    fallback={(error) => <ErrorPage error={error} />}
+                    // A broken call should not hold the host on screen
+                    onError={() => void hostBridge.setAlwaysOnScreen(false)}
+                  >
+                    <Decoration>
+                      <TooltipProvider>
+                        <ClientProvider client={client}>
+                          <MediaDevicesContext value={mediaDevices}>
+                            <ProcessorProvider>
+                              <CallView
+                                client={client}
+                                rtcSession={rtcSession}
+                                isPasswordlessUser={false}
+                                confineToRoom={params.confineToRoom}
+                                preload={params.preload}
+                                skipLobby={params.skipLobby}
+                              />
+                            </ProcessorProvider>
+                          </MediaDevicesContext>
+                        </ClientProvider>
+                      </TooltipProvider>
+                    </Decoration>
+                  </ErrorBoundary>
+                </RootElementProvider>
+              </div>
            )}
          </div>
        </UrlParamsProvider>
@@ -38,7 +38,8 @@
    "prepare": "cd .. && pnpm install --frozen-lockfile && pnpm build:component"
  },
  "peerDependencies": {
-    "livekit-client": "^2.18.1",
+    "@vector-im/compound-design-tokens": "^11.0.0",
+    "@vector-im/compound-web": "^10.0.0",
    "matrix-js-sdk": "*",
    "react": "^19",
    "react-dom": "^19"
@@ -7,7 +7,6 @@
  },
  "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
  "matrix_rtc_session": {
-    "wait_for_key_rotation_ms": 3000,
    "membership_event_expiry_ms": 180000000,
    "network_error_retry_ms": 100
  }
@@ -11,7 +11,6 @@
  "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
  "matrix_rtc_mode": "compatibility",
  "matrix_rtc_session": {
-    "wait_for_key_rotation_ms": 3000,
    "membership_event_expiry_ms": 180000000,
    "network_error_retry_ms": 100
  }
@@ -7,7 +7,6 @@
  },
  "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
  "matrix_rtc_session": {
-    "wait_for_key_rotation_ms": 3000,
    "membership_event_expiry_ms": 180000000,
    "network_error_retry_ms": 100
  },
@@ -7,7 +7,6 @@
  },
  "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
  "matrix_rtc_session": {
-    "wait_for_key_rotation_ms": 3000,
    "membership_event_expiry_ms": 180000000,
    "network_error_retry_ms": 100
  }
@@ -19,7 +19,7 @@ services:
      - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
  element-web:
    # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:cbb7be9a54352997748d02c36dc70ee877c705ee3518be31497717c9a2ff0395
+    image: ghcr.io/element-hq/element-web:develop@sha256:181a526ff7189fdd6bdaa88bb2e339c8d4bf21d8cd74c09a0ead7c496ca240c1
  element-web-1:
    # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:cbb7be9a54352997748d02c36dc70ee877c705ee3518be31497717c9a2ff0395
+    image: ghcr.io/element-hq/element-web:develop@sha256:181a526ff7189fdd6bdaa88bb2e339c8d4bf21d8cd74c09a0ead7c496ca240c1
@@ -76,7 +76,12 @@ Code that builds in only one is a bug.
 - `build:component` — `@element-hq/element-call-component`, sources in `component/`
  (its own pnpm project; run pnpm from the repo root). Host API is in the README;
  `pnpm lint:externals` rejects an import of a `react` / `react-dom` /
-  `matrix-js-sdk` / `livekit-client` subpath the externals list omits. Two entry
+  `matrix-js-sdk` / `@vector-im/compound-web` /
+  `@vector-im/compound-design-tokens` subpath the externals list omits.
+  `livekit-client` is bundled on purpose: no host imports it, and the pinned
+  version travels with the component.
+  Compound's stylesheets are loaded by `src/index.css` for the page and by the
+  host for the component, never by `src/base.css`. Two entry
  points: `index.tsx` (the component) and `api.ts` (types, enums and
  `configurationForIntent`, for a host that must not load the component). `api.ts`
  may only reach types and constants — `src/UrlConfiguration.ts`, not `UrlParams`.
@@ -60,6 +60,21 @@ git config --local core.hooksPath .githooks

 This will add the hook path for this repository only to .gihooks. which is a tracked (by git) folder containing the pre-commit hook.

+## Testing against a matrix-js-sdk branch in CI
+
+Linking covers local development. In CI, `scripts/layered.sh` plays the same
+role for `matrix-js-sdk`: after the usual frozen install, `scripts/fetchdep.sh`
+looks for a matrix-js-sdk branch with the same name as the pull request's head
+branch (in the fork first, when the pull request comes from one). If there is
+one, it is cloned, packed and installed over the locked version. If there is
+none, the install stays as `pnpm-lock.yaml` pins it.
+
+This means a change that needs a not yet merged matrix-js-sdk change can be tested
+by giving both branches the same name. This mirrors how element-web tests against
+matrix-js-sdk. Once the matrix-js-sdk branch is merged and deleted, the pull
+request falls back to the lockfile and needs a lockfile bump to stay green,
+which is also what keeps `main` consistent after the merge.
+
 ## Background

 Information, why this approach is used can be found in the [linking concept reasoning](./linking_concept_reasoning.md) document.
@@ -61,7 +61,6 @@ These parameters are relevant to both [widget](./embedded_standalone.md) and [st
 | `homeserver`                                   |                                                                                                                                                                    | Not applicable                                                                                    | No                           | Homeserver for registering a new (guest) user, configures non-default guest user server when creating a spa link.                                                                                                                                                                                                                                                                                   |
 | `lang`                                         | [BCP 47](https://www.rfc-editor.org/info/bcp47) code                                                                                                               | No                                                                                                | No                           | The language the app should use.                                                                                                                                                                                                                                                                                                                                                                    |
 | `password`                                     |                                                                                                                                                                    | No                                                                                                | No                           | E2EE password when using a shared secret. (For individual sender keys in embedded mode this is not required.)                                                                                                                                                                                                                                                                                       |
-| `perParticipantE2EE`                           | `true` or `false`                                                                                                                                                  | No, defaults to `false`                                                                           | No, defaults to `false`      | Enables per participant encryption with Keys exchanged over encrypted matrix room messages.                                                                                                                                                                                                                                                                                                         |
 | `controlledAudioDevices`                       | `true` or `false`                                                                                                                                                  | No, defaults to `false`                                                                           | No, defaults to `false`      | Whether the [global JS controls for audio devices](./controls.md#audio-devices) should be enabled, allowing the list of audio devices to be controlled by the app hosting Element Call.                                                                                                                                                                                                             |
 | `roomId`                                       | [Matrix Room ID](https://spec.matrix.org/v1.12/appendices/#room-ids)                                                                                               | Yes                                                                                               | No                           | Anything about what room we're pointed to should be from useRoomIdentifier which parses the path and resolves alias with respect to the default server name, however roomId is an exception as we need the room ID in embedded widget mode, and not the room alias (or even the via params because we are not trying to join it). This is also not validated, where it is in `useRoomIdentifier()`. |
 | `showControls`                                 | `true` or `false`                                                                                                                                                  | No, defaults to `true`                                                                            | No, defaults to `true`       | Displays controls like mute, screen-share, invite, and hangup buttons during a call.                                                                                                                                                                                                                                                                                                                |
@@ -129,7 +129,6 @@
    "uuid": "^14.0.0",
    "vaul": "^1.0.0",
    "vite": "^8.0.0",
-    "vite-plugin-generate-file": "^0.3.0",
    "vite-plugin-html": "^3.2.2",
    "vite-plugin-node-polyfills": "^0.28.0",
    "vite-plugin-node-stdlib-browser": "^0.2.1",
@@ -92,6 +92,12 @@ export async function expectWithin(
  outer: Locator,
 ): Promise<void> {
  await expect(inner).toBeVisible();
+  // Wait for animations to settle.
+  await inner.evaluate(async (element) => {
+    for (const animation of element.getAnimations({ subtree: true }))
+      await animation.finished;
+  });
+
  const innerBox = await inner.boundingBox();
  const outerBox = await outer.boundingBox();
  if (innerBox === null || outerBox === null)
@@ -132,7 +132,7 @@ export const widgetTest = test.extend<MyFixtures>({

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

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

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

    await page.getByRole("menuitem", { name: "New Room" }).click({
@@ -132,10 +132,10 @@ importers:
        version: 10.3.1(react@19.2.8)
      '@vector-im/compound-design-tokens':
        specifier: ^11.0.0
-        version: 11.0.0(@types/react@19.2.18)(react@19.2.8)
+        version: 11.1.0(@types/react@19.2.18)(react@19.2.8)
      '@vector-im/compound-web':
        specifier: ^10.0.0
-        version: 10.1.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        version: 10.1.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.1.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
      '@vitejs/plugin-react':
        specifier: ^6.0.2
        version: 6.1.1(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.2.7)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
@@ -222,7 +222,7 @@ importers:
        version: 10.6.1(postcss@8.5.26)
      postcss-selector-parser:
        specifier: ^7.1.1
-        version: 7.1.3
+        version: 7.1.6
      posthog-js:
        specifier: 1.408.2
        version: 1.408.2
@@ -268,9 +268,6 @@ importers:
      vite:
        specifier: ^8.0.0
        version: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)
-      vite-plugin-generate-file:
-        specifier: ^0.3.0
-        version: 0.3.1
      vite-plugin-html:
        specifier: ^3.2.2
        version: 3.2.2(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
@@ -3226,8 +3223,8 @@ packages:
    peerDependencies:
      react: '>= 16.8.0'

-  '@vector-im/compound-design-tokens@11.0.0':
-    resolution: {integrity: sha512-pWz0Q67Xbo8gwzaTeFbTTcM6i29ju6PR7SqyuExr2nIV3j9K785cOInft8FA2CM7PEapkr6TRtJKR/4xtWh2RA==}
+  '@vector-im/compound-design-tokens@11.1.0':
+    resolution: {integrity: sha512-vkMcy/G5VBlVle8umQNpctKHqZITS8XOQprsgcbSGRmwW080Z+TXV/vPsEXhgq8JKdxURkLhua0zQUufCeo46A==}
    peerDependencies:
      '@adobe/leonardo-contrast-colors': ^1.0.0
      '@types/react': '*'
@@ -4465,10 +4462,6 @@ packages:
  js-tokens@4.0.0:
    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}

-  js-yaml@4.3.0:
-    resolution: {integrity: sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==}
-    hasBin: true
-
  js-yaml@4.3.1:
    resolution: {integrity: sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==}
    hasBin: true
@@ -4703,14 +4696,6 @@ packages:
    resolution: {integrity: sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==}
    hasBin: true

-  mime-db@1.52.0:
-    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
-    engines: {node: '>= 0.6'}
-
-  mime-types@2.1.35:
-    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
-    engines: {node: '>= 0.6'}
-
  mimic-function@5.0.1:
    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
    engines: {node: '>=18'}
@@ -5175,8 +5160,8 @@ packages:
    peerDependencies:
      postcss: ^8.4

-  postcss-selector-parser@7.1.3:
-    resolution: {integrity: sha512-ajnd7iZnqjJDkyHNfznl/ZVO0lWqvBmQXfKKENx9/p/bEiF/L3eHwdydNUg9RXZx6xfZWOCmXmBa5oeB+YrAPQ==}
+  postcss-selector-parser@7.1.6:
+    resolution: {integrity: sha512-7qASPzhKF2l2KLboRZux8CCTRMdGiV08vWmyKzPz22qZ7ZjQBOeY7rNzNoCLSUiftJ7HUq0GERHmxw/t0dCdMw==}
    engines: {node: '>=4'}

  postcss-value-parser@4.2.0:
@@ -5904,9 +5889,6 @@ packages:
      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc

-  vite-plugin-generate-file@0.3.1:
-    resolution: {integrity: sha512-tiA3gkPM21MS2+RyqsBMT33GSlM9LM1TJjf6vGvV/e/ml3e3vTKfuH3l2N0NpUgcayvj1fXnmlo5YBuahA6bsg==}
-
  vite-plugin-html@3.2.2:
    resolution: {integrity: sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==}
    peerDependencies:
@@ -6415,9 +6397,9 @@ snapshots:

  '@csstools/postcss-cascade-layers@5.0.2(postcss@8.5.26)':
    dependencies:
-      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.3)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.6)
      postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6

  '@csstools/postcss-color-function-display-p3-linear@1.0.1(postcss@8.5.26)':
    dependencies:
@@ -6523,9 +6505,9 @@ snapshots:

  '@csstools/postcss-is-pseudo-class@5.0.3(postcss@8.5.26)':
    dependencies:
-      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.3)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.6)
      postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6

  '@csstools/postcss-light-dark-function@2.0.11(postcss@8.5.26)':
    dependencies:
@@ -6627,7 +6609,7 @@ snapshots:
  '@csstools/postcss-scope-pseudo-class@4.0.1(postcss@8.5.26)':
    dependencies:
      postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6

  '@csstools/postcss-sign-functions@1.1.4(postcss@8.5.26)':
    dependencies:
@@ -6671,13 +6653,13 @@ snapshots:
    dependencies:
      postcss: 8.5.26

-  '@csstools/selector-resolve-nested@3.1.0(postcss-selector-parser@7.1.3)':
+  '@csstools/selector-resolve-nested@3.1.0(postcss-selector-parser@7.1.6)':
    dependencies:
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6

-  '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.3)':
+  '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.6)':
    dependencies:
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6

  '@csstools/utilities@2.0.0(postcss@8.5.26)':
    dependencies:
@@ -8685,12 +8667,12 @@ snapshots:
      '@use-gesture/core': 10.3.1
      react: 19.2.8

-  '@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8)':
+  '@vector-im/compound-design-tokens@11.1.0(@types/react@19.2.18)(react@19.2.8)':
    optionalDependencies:
      '@types/react': 19.2.18
      react: 19.2.8

-  '@vector-im/compound-web@10.1.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@vector-im/compound-web@10.1.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.1.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
    dependencies:
      '@floating-ui/react': 0.27.20(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -8702,7 +8684,7 @@ snapshots:
      '@radix-ui/react-progress': 1.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
      '@radix-ui/react-separator': 1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
-      '@vector-im/compound-design-tokens': 11.0.0(@types/react@19.2.18)(react@19.2.8)
+      '@vector-im/compound-design-tokens': 11.1.0(@types/react@19.2.18)(react@19.2.8)
      classnames: 2.5.1
      react: 19.2.8
      vaul: 1.1.2(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -9234,13 +9216,13 @@ snapshots:
  css-blank-pseudo@7.0.1(postcss@8.5.26):
    dependencies:
      postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6

  css-has-pseudo@7.0.3(postcss@8.5.26):
    dependencies:
-      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.3)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.6)
      postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6
      postcss-value-parser: 4.2.0

  css-prefers-color-scheme@10.0.0(postcss@8.5.26):
@@ -10034,10 +10016,6 @@ snapshots:

  js-tokens@4.0.0: {}

-  js-yaml@4.3.0:
-    dependencies:
-      argparse: 2.0.1
-
  js-yaml@4.3.1:
    dependencies:
      argparse: 2.0.1
@@ -10286,12 +10264,6 @@ snapshots:
      bn.js: 4.12.3
      brorand: 1.1.0

-  mime-db@1.52.0: {}
-
-  mime-types@2.1.35:
-    dependencies:
-      mime-db: 1.52.0
-
  mimic-function@5.0.1: {}

  min-indent@1.0.1: {}
@@ -10694,7 +10666,7 @@ snapshots:
  postcss-attribute-case-insensitive@7.0.1(postcss@8.5.26):
    dependencies:
      postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6

  postcss-clamp@4.1.0(postcss@8.5.26):
    dependencies:
@@ -10745,12 +10717,12 @@ snapshots:
      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
      '@csstools/css-tokenizer': 3.0.4
      postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6

  postcss-dir-pseudo-class@9.0.1(postcss@8.5.26):
    dependencies:
      postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6

  postcss-double-position-gradients@6.0.4(postcss@8.5.26):
    dependencies:
@@ -10762,12 +10734,12 @@ snapshots:
  postcss-focus-visible@10.0.1(postcss@8.5.26):
    dependencies:
      postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6

  postcss-focus-within@9.0.1(postcss@8.5.26):
    dependencies:
      postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6

  postcss-font-variant@5.0.0(postcss@8.5.26):
    dependencies:
@@ -10799,10 +10771,10 @@ snapshots:

  postcss-nesting@13.0.2(postcss@8.5.26):
    dependencies:
-      '@csstools/selector-resolve-nested': 3.1.0(postcss-selector-parser@7.1.3)
-      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.3)
+      '@csstools/selector-resolve-nested': 3.1.0(postcss-selector-parser@7.1.6)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.6)
      postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6

  postcss-opacity-percentage@3.0.0(postcss@8.5.26):
    dependencies:
@@ -10900,7 +10872,7 @@ snapshots:
  postcss-pseudo-class-any-link@10.0.1(postcss@8.5.26):
    dependencies:
      postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6

  postcss-replace-overflow-wrap@4.0.0(postcss@8.5.26):
    dependencies:
@@ -10909,9 +10881,9 @@ snapshots:
  postcss-selector-not@8.0.1(postcss@8.5.26):
    dependencies:
      postcss: 8.5.26
-      postcss-selector-parser: 7.1.3
+      postcss-selector-parser: 7.1.6

-  postcss-selector-parser@7.1.3:
+  postcss-selector-parser@7.1.6:
    dependencies:
      cssesc: 3.0.0
      util-deprecate: 1.0.2
@@ -11652,13 +11624,6 @@ snapshots:
      - '@types/react'
      - '@types/react-dom'

-  vite-plugin-generate-file@0.3.1:
-    dependencies:
-      ejs: 3.1.10
-      js-yaml: 4.3.0
-      mime-types: 2.1.35
-      picocolors: 1.1.1
-
  vite-plugin-html@3.2.2(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)):
    dependencies:
      '@rollup/pluginutils': 4.2.1
@@ -9,9 +9,11 @@ Please see LICENSE in the repository root for full details.
 * Checks that the component build leaves the packages a host must supply to
 * the host.
 *
- * A host application already has React, the Matrix SDK and LiveKit, and a
- * second copy of any of them is worse than dead weight: React would hold two
- * sets of hooks, and the Matrix client would run two sync loops. So the
+ * A host application already has React, the Matrix SDK and Compound,
+ * and a second copy of any of them is worse than dead weight: React would hold
+ * two sets of hooks, the Matrix client would run two sync loops, and a second
+ * Compound would style the tooltips it floats into the host's body with class
+ * names the host's stylesheet does not know. So the
 * component build lists them as external — but that list has to name every
 * subpath, since the bundler silently ignores the pattern and callback forms
 * of the option, and an import it does not cover is bundled with no warning at
@@ -33,13 +35,17 @@ 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 = [
  "react",
  "react-dom",
  "matrix-js-sdk",
-  "livekit-client",
+  "@vector-im/compound-web",
+  "@vector-im/compound-design-tokens",
 ];

 const isTestFile = (name) =>
@@ -49,6 +55,7 @@ const isTestFile = (name) =>
 async function* sourceFiles(dir) {
  for (const entry of await readdir(dir, { withFileTypes: true })) {
    const path = join(dir, entry.name);
+    if (EXCLUDED.includes(path)) continue;
    if (entry.isDirectory()) yield* sourceFiles(path);
    else if (/\.(ts|tsx)$/.test(entry.name) && !isTestFile(entry.name))
      yield path;
@@ -0,0 +1,73 @@
+#!/usr/bin/env bash
+
+# Clones the branch of a dependency's repository that has the same name as
+# the pull request branch under test, so a change spanning both repositories
+# can be tested before either side is merged. Inspired by scripts/fetchdep.sh 
+# element-web.
+#
+# Usage: scripts/fetchdep.sh <org> <repo> [ref]
+#
+# The clone lands in ./<repo>. When the pull request comes from a fork and
+# PR_HEAD_REPO_OWNER was set, the fork's own copy of the repository is tried
+# before <org>'s. Exits 0 when a branch was cloned and 1 when there is none,
+# so the caller can keep the locked version in that case. Without a ref,
+# nothing is closed outside a pull request.
+
+set -eu
+
+org=$1
+repo=$2
+ref=${3:-}
+
+rm -rf "$repo"
+
+# If a ref was passed, try to clone it or die.
+if [ -n "$ref" ]; then
+    echo "fetchdep.sh: Using $org/$repo at $ref"
+    git clone --depth 1 "https://github.com/$org/$repo.git" "$repo"
+    git -C "$repo" fetch --depth 1 origin "$ref"
+    git -C "$repo" -c advice.detachedHead=false checkout FETCH_HEAD
+    git -C "$repo" log -1
+    exit 0
+fi
+
+# Otherwise ensure that we're on a pull request.
+head_ref=${GITHUB_HEAD_REF:-}
+if [ -z "$head_ref" ]; then
+    echo "fetchdep.sh: Not a pull request, nothing to match"
+    exit 1
+fi
+
+# Bots name their branches the same way in every repository, so a match on
+# one of theirs would be a coincidence rather than a paired change.
+case "$head_ref" in
+    renovate/* | dependabot/*)
+        echo "fetchdep.sh: Not matching bot branch $head_ref"
+        exit 1
+        ;;
+esac
+
+# Clones a branch if it exists and ends the script on success.
+clone() {
+    local try_org=$1
+    local branch=$2
+    echo "fetchdep.sh: Trying to use $try_org/$repo#$branch"
+    # Disable auth prompts: https://serverfault.com/a/665959
+    if GIT_TERMINAL_PROMPT=0 git clone "https://github.com/$try_org/$repo.git" "$repo" --branch "$branch" --depth 1; then
+        git -C "$repo" log -1
+        # Surface the match on the workflow run summary.
+        echo "::notice title=Matched $repo branch::Using $try_org/$repo#$branch at $(git -C "$repo" rev-parse HEAD)"
+        exit 0
+    fi
+}
+
+# Try cloning from the fork, then from the org.
+head_owner=${PR_HEAD_REPO_OWNER:-}
+if [ -n "$head_owner" ] && [ "$head_owner" != "${GITHUB_REPOSITORY_OWNER:-}" ]; then
+    clone "$head_owner" "$head_ref"
+fi
+clone "$org" "$head_ref"
+
+# Nothing worked. Die.
+echo "fetchdep.sh: No branch named $head_ref in $org/$repo"
+exit 1
@@ -0,0 +1,62 @@
+#!/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" "$@"
@@ -26,7 +26,7 @@ This file needs to be hosted. Locally (via `npx serve -l 81234 --cors`) or on a
 Now you just need to add the widget to element web via:

 ```
-/addwidget http://localhost:3000?widgetId=$matrix_widget_id&perParticipantE2EE=true&userId=$matrix_user_id&deviceId=$org.matrix.msc3819.matrix_device_id&baseUrl=$org.matrix.msc4039.matrix_base_url&roomId=$matrix_room_id
+/addwidget http://localhost:3000?widgetId=$matrix_widget_id&userId=$matrix_user_id&deviceId=$org.matrix.msc3819.matrix_device_id&baseUrl=$org.matrix.msc4039.matrix_base_url&roomId=$matrix_room_id
 ```

 ## Widgets
@@ -42,7 +42,6 @@ by the matrixRTCSdk to start the postmessage widget api (communication between t

 ```
 widgetId = $matrix_widget_id
-perParticipantE2EE = true
 userId = $matrix_user_id
 deviceId = $org.matrix.msc3819.matrix_device_id
 baseUrl = $org.matrix.msc4039.matrix_base_url
@@ -53,7 +52,7 @@ baseUrl = $org.matrix.msc4039.matrix_base_url
 Full template use as `<widgetUrl>`:

 ```
-http://localhost:3000?widgetId=$matrix_widget_id&perParticipantE2EE=true&userId=$matrix_user_id&deviceId=$org.matrix.msc3819.matrix_device_id&baseUrl=$org.matrix.msc4039.matrix_base_url&roomId=$matrix_room_id
+http://localhost:3000?widgetId=$matrix_widget_id&userId=$matrix_user_id&deviceId=$org.matrix.msc3819.matrix_device_id&baseUrl=$org.matrix.msc4039.matrix_base_url&roomId=$matrix_room_id
 ```

 the `$` prefixed variables will be replaced by EW on widget instantiation. (e.g. `$matrix_user_id` -> `@user:example.com` (url encoding will also be applied automatically by EW) -> `%40user%3Aexample.com`)
@@ -86,11 +86,6 @@ export interface UrlConfiguration {
   * user's homeserver doesn't provide any.
   */
  allowIceFallback: boolean;
-
-  /**
-   * Whether the app should use per participant keys for E2EE.
-   */
-  perParticipantE2EE: boolean;
  /**
   * Whether the global JS controls for audio output devices should be enabled,
   * allowing the list of output devices to be controlled by the app hosting
@@ -174,7 +169,6 @@ export function configurationForIntent(intent: UserIntent): UrlConfiguration {
    showControls: true,
    hideScreensharing: false,
    allowIceFallback: true,
-    perParticipantE2EE: true,
    controlledAudioDevices: platform === "desktop" ? false : true,
    skipLobby: true,
    returnToLobby: false,
@@ -229,7 +223,6 @@ export function configurationForIntent(intent: UserIntent): UrlConfiguration {
        showControls: true,
        hideScreensharing: false,
        allowIceFallback: false,
-        perParticipantE2EE: false,
        controlledAudioDevices: false,
        skipLobby: false,
        returnToLobby: false,
@@ -230,7 +230,6 @@ describe("UrlParams", () => {
      showControls: true,
      hideScreensharing: false,
      allowIceFallback: false,
-      perParticipantE2EE: false,
      controlledAudioDevices: false,
      skipLobby: false,
      returnToLobby: false,
@@ -243,7 +242,6 @@ describe("UrlParams", () => {
      showControls: true,
      hideScreensharing: false,
      allowIceFallback: true,
-      perParticipantE2EE: true,
      controlledAudioDevices: platform === "desktop" ? false : true,
      skipLobby: true,
      returnToLobby: false,
@@ -256,7 +254,6 @@ describe("UrlParams", () => {
      showControls: true,
      hideScreensharing: false,
      allowIceFallback: true,
-      perParticipantE2EE: true,
      controlledAudioDevices: platform === "desktop" ? false : true,
      skipLobby: false,
      returnToLobby: false,
@@ -499,7 +496,6 @@ describe("UrlParams", () => {
        // A host owns navigation, so Element Call must not offer a way out of
        // the room
        confineToRoom: true,
-        perParticipantE2EE: true,
        // The lobby first, so that the user picks their devices rather than
        // being thrown into the call by the act of being rendered
        skipLobby: false,
@@ -512,7 +508,6 @@ describe("UrlParams", () => {
      expect(configurationForIntent(UserIntent.Unknown)).toMatchObject({
        confineToRoom: false,
        header: HeaderStyle.Standard,
-        perParticipantE2EE: false,
      });
    });
  });
@@ -350,7 +350,6 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
    showControls: parser.getFlag("showControls"),
    hideScreensharing: parser.getFlag("hideScreensharing"),
    allowIceFallback: parser.getFlag("allowIceFallback"),
-    perParticipantE2EE: parser.getFlag("perParticipantE2EE"),
    controlledAudioDevices: parser.getFlag("controlledAudioDevices"),
    skipLobby: isWidget ? parser.getFlag("skipLobby") : false,
    // In SPA mode the user should always exit to the home screen when hanging
@@ -373,7 +372,7 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
    "intent:",
    intent,
    "\nproperties:",
-    redact(properties, "password"),
+    redact(properties, "password", "posthogUserId"),
    "configuration:",
    configuration,
  );
@@ -501,20 +500,14 @@ export function generateUrlSearchParams(
  const params = new URLSearchParams();
  // The password shouldn't need URL encoding here (we generate URL-safe ones) but encode
  // it in case it came from another client that generated a non url-safe one
-  switch (encryptionSystem?.kind) {
-    case E2eeType.SHARED_KEY: {
-      const encodedPassword = encodeURIComponent(encryptionSystem.secret);
-      if (encodedPassword !== encryptionSystem.secret) {
-        logger.info(
-          "Encoded call password used non URL-safe chars: buggy client?",
-        );
-      }
-      params.set("password", encodedPassword);
-      break;
+  if (encryptionSystem?.kind === E2eeType.SHARED_KEY) {
+    const encodedPassword = encodeURIComponent(encryptionSystem.secret);
+    if (encodedPassword !== encryptionSystem.secret) {
+      logger.info(
+        "Encoded call password used non URL-safe chars: buggy client?",
+      );
    }
-    case E2eeType.PER_PARTICIPANT:
-      params.set("perParticipantE2EE", "true");
-      break;
+    params.set("password", encodedPassword);
  }
  params.set("roomId", roomId);
  viaServers?.forEach((s) => params.set("viaServers", s));
@@ -5,19 +5,24 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */

-/* The styles Element Call needs wherever it is shown: the design tokens, fonts
-and element defaults its own stylesheets build on top of.
+/* The styles Element Call needs wherever it is shown: the element defaults and
+custom properties its own stylesheets build on top of.

 Split out from index.css so that Element Call as a component can have these
 without also being given the standalone page's layout, which would style the
-host's own document. What remains here still speaks of the
-document — normalize.css and the typography below use bare element selectors,
-and the custom properties are declared on `:root` — which is right for the
-page, and is why the component build rewrites it: there every selector is
-confined to Element Call's root element (see component/build/scopeStylesToRoot.ts),
-with `html`, `body` and `:root` becoming that element. Nothing needs to be
-written differently here for that to work, but nothing here may rely on
-reaching the host's document either.
+host's own document. Compound's stylesheets — the design tokens, the component
+styles and the fonts they use — are not here either: as a component, Element
+Call shares the host's copy of Compound (it is a peer dependency, so that what
+Compound floats into the host's body, tooltips and menus, is styled by the
+host's stylesheet), and index.css loads it for the page.
+
+What remains here still speaks of the document — normalize.css and the
+typography below use bare element selectors, and the custom properties are
+declared on `:root` — which is right for the page, and is why the component
+build rewrites it: there every selector is confined to Element Call's root
+element (see component/build/scopeStylesToRoot.ts), with `html`, `body` and
+`:root` becoming that element. Nothing needs to be written differently here for
+that to work, but nothing here may rely on reaching the host's document either.

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

@layer normalize, compound-legacy, compound;

-@import url("@fontsource/inter/400.css");
-@import url("@fontsource/inter/500.css");
-@import url("@fontsource/inter/600.css");
-@import url("@fontsource/inter/700.css");
-@import url("@fontsource/inconsolata/400.css");
-@import url("@fontsource/inconsolata/700.css");
-
@import url("normalize.css/normalize.css") layer(normalize);
-@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
-@import url("@vector-im/compound-web/dist/style.css") layer(compound.components);

 :root {
  --font-scale: 1;
@@ -83,7 +83,7 @@ div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div {
  flex: 0 0 auto;
 }

-.reactionButton {
+.reactionPopupMenu .reactionsMenu .reactionButton {
  padding: var(--reaction-button-padding);
  border-radius: var(--cpd-radius-pill-effect);
  font-size: var(--reaction-button-fontsize);
@@ -207,12 +207,6 @@ export interface ConfigOptions {
   * Take care when changing these options.
   */
  matrix_rtc_session?: {
-    /**
-     * How long (in milliseconds) to wait before rotating end-to-end media encryption keys
-     * when someone leaves a call.
-     */
-    wait_for_key_rotation_ms?: number;
-
    /**
     * How long we wait before retrying after a network error on any of the requests.
     */
@@ -7,10 +7,24 @@ Please see LICENSE in the repository root for full details.

 /* Styles for Element Call as a page of its own. The parts that apply wherever
 Element Call is shown live in base.css; these are about owning the document,
-and are not loaded when a host embeds Element Call as a component. */
+and are not loaded when a host embeds Element Call as a component.
+
+That includes Compound: the page brings the design tokens, the component styles
+and their fonts, where a host embedding the component supplies its own. The
+`compound` layers are ordered by base.css. */

@import url("./base.css");

+@import url("@fontsource/inter/400.css");
+@import url("@fontsource/inter/500.css");
+@import url("@fontsource/inter/600.css");
+@import url("@fontsource/inter/700.css");
+@import url("@fontsource/inconsolata/400.css");
+@import url("@fontsource/inconsolata/700.css");
+
+@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
+@import url("@vector-im/compound-web/dist/style.css") layer(compound.components);
+
 body {
  background-color: var(--cpd-color-bg-canvas-default);
  color: var(--cpd-color-text-primary);
@@ -242,12 +242,7 @@ const LoadedCallView: FC<LoadedProps> = ({
  const { displayName, avatarUrl } = useProfile(client);
  const roomName = useRoomName(room);
  const roomAvatar = useRoomAvatar(room);
-  const {
-    perParticipantE2EE,
-    returnToLobby,
-    password: passwordFromUrl,
-    header,
-  } = useUrlParams();
+  const { returnToLobby, password: passwordFromUrl, header } = useUrlParams();
  const e2eeSystem = useRoomEncryptionSystem(room.roomId);

  // Save the password once we start the groupCallView
@@ -365,7 +360,6 @@ const LoadedCallView: FC<LoadedProps> = ({
    rtcSession,
    preload,
    skipLobby,
-    perParticipantE2EE,
    mediaDevices,
    latestMuteStates,
    setJoined,
@@ -16,12 +16,16 @@ The following sound effects have been licensed from Pixabay, under https://pixab

 The following sound effects have been originally created by Element.

- `blocked`
 - `end_talk`
 - `start_talk_local`
 - `start_talk_remote`
 - `join_call`
- `end_call`
+- `left_call`
+- `screen_share_started`
+- `ringtone`
+- `call_declined`
+- `call_timeout`
 - `reactions/rock`
 - `reactions/wave`
 - `reactions/baduntss`
+- `reactions/deer`
@@ -0,0 +1,77 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { prefetchSounds } from "./soundUtils";
+
+const bytesOf = (buffer: ArrayBuffer): number[] => [...new Uint8Array(buffer)];
+
+describe("prefetchSounds", () => {
+  const fetchSpy = vi.fn<typeof fetch>();
+
+  beforeEach(() => {
+    vi.stubGlobal("fetch", fetchSpy);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    fetchSpy.mockReset();
+  });
+
+  it("fetches sounds given as ordinary URLs", async () => {
+    fetchSpy.mockResolvedValue(
+      new Response(new Uint8Array([1, 2, 3]), { status: 200 }),
+    );
+    const sounds = await prefetchSounds({
+      beep: { ogg: "https://example.org/beep.ogg" },
+    });
+    expect(fetchSpy).toHaveBeenCalledWith("https://example.org/beep.ogg");
+    expect(bytesOf(sounds.beep)).toEqual([1, 2, 3]);
+  });
+
+  it("decodes base64 data: URLs without fetching them", async () => {
+    // "OggS" — the bytes 0x4f 0x67 0x67 0x53
+    const sounds = await prefetchSounds({
+      beep: { ogg: "data:audio/ogg;base64,T2dnUw==" },
+    });
+    expect(fetchSpy).not.toHaveBeenCalled();
+    expect(bytesOf(sounds.beep)).toEqual([0x4f, 0x67, 0x67, 0x53]);
+  });
+
+  it("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,6 +32,43 @@ function getPreferredAudioFormat(): "ogg" | "mp3" {

 const preferredFormat = getPreferredAudioFormat();

+/**
+ * Decode a `data:` URL into the bytes it carries.
+ *
+ * The component build inlines the sound files as `data:` URLs. Those could be
+ * `fetch`ed like any other URL, but that fetch is subject to the host page's
+ * Content Security Policy, and `connect-src` lists rarely allow `data:` (a `*`
+ * source does not cover it). Reading the bytes out of the URL directly needs no
+ * network access, so no policy can stop it.
+ * @param url The `data:` URL to decode.
+ * @returns The decoded bytes.
+ */
+function decodeDataUrl(url: string): ArrayBuffer {
+  const separator = url.indexOf(",");
+  if (!url.startsWith("data:") || separator === -1)
+    throw new Error("Not a valid data: URL");
+  const header = url.slice("data:".length, separator);
+  // 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
@@ -47,18 +84,20 @@ export async function prefetchSounds<S extends string>(
    Object.entries(sounds).map(async ([name, file]) => {
      const { mp3, ogg } = file as SoundDefinition;
      // Use preferred format, fallback to ogg if no mp3 is provided.
-      // Load an audio file
-      const response = await fetch(
-        preferredFormat === "ogg" ? ogg : (mp3 ?? ogg),
-      );
-      if (isFailure(response)) {
+      const url = preferredFormat === "ogg" ? ogg : (mp3 ?? ogg);
+      let buffer: ArrayBuffer | null = null;
+      try {
+        buffer = await loadSound(url);
+      } catch (e) {
+        logger.warn(`Could not load sound ${name}`, e);
+      }
+      if (buffer === null) {
        // If the sound doesn't load, it's not the end of the world. We won't play
        // the sound when requested, but it's better than failing the whole application.
        logger.warn(`Could not load sound ${name}, response was not okay`);
        return;
      }
-      // Decode it
-      buffers[name] = await response.arrayBuffer();
+      buffers[name] = buffer;
    }),
  );
  return buffers as Record<S, ArrayBuffer>;
@@ -30,7 +30,6 @@ import {
  scan,
  startWith,
  Subject,
-  switchAll,
  switchMap,
  switchScan,
  take,
@@ -83,6 +82,7 @@ import {
  type ReactionOption,
 } from "../../reactions";
 import { shallowEquals as shallowArrayEquals } from "../../utils/array";
+import { shallowEquals as shallowObjectEquals } from "../../utils/object";
 import { type MediaDevices } from "../MediaDevices";
 import { constant, type Behavior } from "../Behavior";
 import { E2eeType } from "../../e2ee/e2eeType";
@@ -92,17 +92,17 @@ import { HeaderStyle, type UrlParams } from "../../UrlParams";
 import { type ProcessorState } from "../../livekit/TrackProcessorContext";
 import { type HostBridge, nullHostBridge } from "../../HostBridge";
 import {
-  layoutShallowEquals,
  type Alignment,
-  type GridLayoutMedia,
  type Layout,
  type LayoutMedia,
-  type OneOnOneDesktopLayoutMedia,
-  type OneOnOneMobileLayoutMedia,
-  type SpotlightExpandedLayoutMedia,
-  type SpotlightLandscapeLayoutMedia,
-  type SpotlightPortraitLayoutMedia,
+  type WindowMode,
 } from "../layout-types.ts";
+import {
+  chooseSpotlightSpeaker,
+  computeLayoutMedia,
+  computeSpotlight,
+  type OneOnOneMedia,
+} from "../layoutMedia.ts";
 import { ElementCallError, UnknownCallError } from "../../utils/errors.ts";
 import { type Epoch, type ObservableScope } from "../ObservableScope.ts";
 import { createHomeserverConnected$ } from "./localMember/HomeserverConnected.ts";
@@ -263,21 +263,10 @@ export function callViewModelOptionsFromParams(
 export const MAX_PARTICIPANT_COUNT_FOR_SOUND = 8;
 export const THROTTLE_SOUND_EFFECT_MS = 500;

-// This is the number of participants that we think constitutes a "small" call
-// on mobile. No spotlight tile should be shown below this threshold.
-const smallMobileCallThreshold = 3;
-
 // How long the footer should be shown for when hovering over or interacting
 // with the interface
 const showFooterMs = 4000;

-/**
- * The general shape of the space the call is drawn in. Called a window because
- * that is what it is in the standalone app; for a component it is the container
- * the host gave us, which may be a small corner of a large window.
- */
-export type WindowMode = "normal" | "narrow" | "flat" | "pip";
-
 interface LayoutScanState {
  layout: Layout | null;
  overflowing: boolean;
@@ -981,33 +970,16 @@ export function createCallViewModel$(
        mediaItems.length === 0
          ? of([])
          : combineLatest(
-              mediaItems.map((m) =>
-                m.speaking$.pipe(map((s) => [m, s] as const)),
+              mediaItems.map((media) =>
+                media.speaking$.pipe(map((speaking) => ({ media, speaking }))),
              ),
            ),
      ),
      scan<
-        (readonly [UserMediaViewModel, boolean])[],
+        { media: UserMediaViewModel; speaking: boolean }[],
        UserMediaViewModel | undefined,
        undefined
-      >((prev, mediaItems) => {
-        // Only remote users that are still in the call should be sticky
-        const [stickyMedia, stickySpeaking] =
-          (!prev?.local && mediaItems.find(([m]) => m === prev)) || [];
-        // Decide who to spotlight:
-        // If the previous speaker is still speaking, stick with them rather
-        // than switching eagerly to someone else
-        return stickySpeaking
-          ? stickyMedia!
-          : // Otherwise, select any remote user who is speaking
-            (mediaItems.find(([m, s]) => !m.local && s)?.[0] ??
-              // Otherwise, stick with the person who was last speaking
-              stickyMedia ??
-              // Otherwise, spotlight an arbitrary remote user
-              mediaItems.find(([m]) => !m.local)?.[0] ??
-              // Otherwise, spotlight the local user
-              mediaItems.find(([m]) => m.local)?.[0]);
-      }, undefined),
+      >(chooseSpotlightSpeaker, undefined),
    ),
  );

@@ -1051,33 +1023,12 @@ export function createCallViewModel$(
    ),
  );

-  const spotlightAndPip$ = scope.behavior<{
-    spotlight: MediaViewModel[];
-    pip$: Observable<UserMediaViewModel | undefined>;
-  }>(
-    ringingMedia$.pipe(
-      switchMap((ringingMedia) => {
-        if (ringingMedia !== null)
-          return of({ spotlight: [ringingMedia], pip$: localUserMediaForPip$ });
-
-        return screenShares$.pipe(
-          switchMap((screenShares) => {
-            if (screenShares.length > 0)
-              return of({ spotlight: screenShares, pip$: spotlightSpeaker$ });
-
-            return spotlightSpeaker$.pipe(
-              map((speaker) => ({
-                spotlight: speaker ? [speaker] : [],
-                // Hide PiP if redundant (i.e. if local user is already in spotlight)
-                pip$: localUserMediaForPip$.pipe(
-                  map((m) => (m === speaker ? undefined : m)),
-                ),
-              })),
-            );
-          }),
-        );
-      }),
-    ),
+  const spotlightAndPip$ = scope.behavior(
+    combineLatest(
+      [ringingMedia$, screenShares$, spotlightSpeaker$, localUserMediaForPip$],
+      (ringing, screenShares, speaker, localPip) =>
+        computeSpotlight({ ringing, screenShares, speaker, localPip }),
+    ).pipe(distinctUntilChanged(shallowObjectEquals)),
  );

  const spotlight$ = scope.behavior<MediaViewModel[]>(
@@ -1135,56 +1086,7 @@ export function createCallViewModel$(
    hasRemoteScreenShares$,
  );

-  const gridLayoutMedia$: Observable<GridLayoutMedia> = combineLatest(
-    [grid$, spotlight$],
-    (grid, spotlight) => ({
-      type: "grid",
-      edgeToEdge: false,
-      spotlight: spotlight.some((vm) => vm.type === "screen share")
-        ? spotlight
-        : undefined,
-      grid,
-    }),
-  );
-
-  const spotlightLandscapeLayoutMedia$ = (
-    edgeToEdge: boolean,
-  ): Observable<SpotlightLandscapeLayoutMedia> =>
-    combineLatest([grid$, spotlight$], (grid, spotlight) => ({
-      type: "spotlight-landscape",
-      edgeToEdge,
-      spotlight,
-      grid,
-    }));
-
-  const spotlightPortraitLayoutMedia$: Observable<SpotlightPortraitLayoutMedia> =
-    combineLatest([grid$, spotlight$], (grid, spotlight) => ({
-      type: "spotlight-portrait",
-      edgeToEdge: false,
-      spotlight,
-      grid,
-    }));
-
-  const spotlightExpandedLayoutMedia$ = (
-    edgeToEdge: boolean,
-  ): Observable<SpotlightExpandedLayoutMedia> =>
-    spotlightAndPip$.pipe(
-      switchMap(({ spotlight, pip$ }) =>
-        pip$.pipe(
-          map((pip) => ({
-            type: "spotlight-expanded" as const,
-            edgeToEdge,
-            spotlight,
-            pip: pip ?? undefined,
-          })),
-        ),
-      ),
-    );
-
-  const oneOnOneLayoutMedia$: Behavior<{
-    local: LocalUserMediaViewModel;
-    remote: UserMediaViewModel | RingingMediaViewModel;
-  } | null> = scope.behavior(
+  const oneOnOneLayoutMedia$: Behavior<OneOnOneMedia | null> = scope.behavior(
    combineLatest([userMedia$, screenShares$]).pipe(
      switchMap(([userMedia, screenShares]) => {
        // One-on-one layout only supports 2 user media, no screen shares
@@ -1222,47 +1124,12 @@ export function createCallViewModel$(
    ),
  );

-  const oneOnOneDesktopLayoutMedia$: Observable<OneOnOneDesktopLayoutMedia | null> =
+  const localVideoEnabled$ = scope.behavior<boolean>(
    oneOnOneLayoutMedia$.pipe(
-      map((media) => {
-        if (media === null) return null;
-        return media.remote.type === "ringing"
-          ? {
-              type: "one-on-one-desktop" as const,
-              edgeToEdge: false,
-              spotlight: media.local,
-              pip: media.remote,
-            }
-          : {
-              type: "one-on-one-desktop" as const,
-              edgeToEdge: false,
-              spotlight: media.remote,
-              pip: media.local,
-            };
-      }),
-    );
-
-  const oneOnOneMobileLayoutMedia$: Observable<OneOnOneMobileLayoutMedia | null> =
-    oneOnOneLayoutMedia$.pipe(
-      switchMap((media) => {
-        if (media === null) return of(null);
-        return media.local.videoEnabled$.pipe(
-          map((videoEnabled) => ({
-            type: "one-on-one-mobile" as const,
-            edgeToEdge: true as const,
-            spotlight: media.remote,
-            pip: videoEnabled ? media.local : undefined,
-          })),
-        );
-      }),
-    );
-
-  const pipLayoutMedia$: Observable<LayoutMedia> = spotlight$.pipe(
-    map((spotlight) => ({
-      type: "pip",
-      edgeToEdge: platform !== "desktop",
-      spotlight,
-    })),
+      switchMap((media) =>
+        media === null ? of(false) : media.local.videoEnabled$,
+      ),
+    ),
  );

  spotlight$
@@ -1297,66 +1164,38 @@ export function createCallViewModel$(
   * The media to be used to produce a layout.
   */
  const layoutMedia$ = scope.behavior<LayoutMedia>(
-    windowMode$.pipe(
-      switchMap((windowMode) => {
-        switch (windowMode) {
-          case "normal":
-            return layoutSwitchVm.layout$.pipe(
-              switchMap((layout) => {
-                switch (layout) {
-                  case "grid":
-                    return oneOnOneDesktopLayoutMedia$.pipe(
-                      switchMap((oneOnOne) =>
-                        oneOnOne === null ? gridLayoutMedia$ : of(oneOnOne),
-                      ),
-                    );
-                  case "spotlight":
-                    return spotlightExpanded$.pipe(
-                      switchMap((expanded) =>
-                        expanded
-                          ? spotlightExpandedLayoutMedia$(false)
-                          : spotlightLandscapeLayoutMedia$(false),
-                      ),
-                    );
-                }
-              }),
-            );
-          case "narrow":
-            return oneOnOneMobileLayoutMedia$.pipe(
-              switchMap((oneOnOne) =>
-                oneOnOne === null
-                  ? combineLatest([grid$, spotlight$], (grid, spotlight) =>
-                      grid.length > smallMobileCallThreshold ||
-                      spotlight.some((vm) => vm.type === "screen share")
-                        ? spotlightPortraitLayoutMedia$
-                        : gridLayoutMedia$,
-                    ).pipe(switchAll())
-                  : of(oneOnOne),
-              ),
-            );
-          case "flat":
-            return oneOnOneMobileLayoutMedia$.pipe(
-              switchMap((oneOnOne) =>
-                oneOnOne === null
-                  ? layoutSwitchVm.layout$.pipe(
-                      switchMap((layout) => {
-                        switch (layout) {
-                          case "grid":
-                            // Yes, grid mode actually gets you a "spotlight" layout in
-                            // this window mode.
-                            return spotlightLandscapeLayoutMedia$(true);
-                          case "spotlight":
-                            return spotlightExpandedLayoutMedia$(true);
-                        }
-                      }),
-                    )
-                  : of(oneOnOne),
-              ),
-            );
-          case "pip":
-            return pipLayoutMedia$;
-        }
-      }),
+    // We deliberately don't use combineLatest here. Several of the inputs
+    // below derive from the same source. So one upstream change cascades
+    // through them one at a time. combineLatest would see each step of the
+    // cascade and emit layouts built from inputs that never coexisted.
+    // Instead, we treat the emissions as a mere "something changed" signal
+    // and read every input's current value. The derived behaviors were
+    // subscribed before this one and a BehaviorSubject updates its value
+    // before notifying. So by the time the first signal arrives every value
+    // is already consistent. The duplicate signals from the rest of the
+    // cascade are dropped by distinctUntilChanged.
+    merge(
+      windowMode$,
+      layoutSwitchVm.layout$,
+      spotlightExpanded$,
+      oneOnOneLayoutMedia$,
+      localVideoEnabled$,
+      spotlightAndPip$,
+      grid$,
+    ).pipe(
+      map(() =>
+        computeLayoutMedia({
+          windowMode: windowMode$.value,
+          layoutMode: layoutSwitchVm.layout$.value,
+          spotlightExpanded: spotlightExpanded$.value,
+          oneOnOne: oneOnOneLayoutMedia$.value,
+          localVideoEnabled: localVideoEnabled$.value,
+          ...spotlightAndPip$.value,
+          grid: grid$.value,
+          desktop: platform === "desktop",
+        }),
+      ),
+      distinctUntilChanged(shallowObjectEquals<LayoutMedia>),
    ),
  );

@@ -1657,7 +1496,7 @@ export function createCallViewModel$(
    layoutInternals$.pipe(
      map(({ layout }) => layout),
      // Drop redundant layout updates before they would hit React.
-      distinctUntilChanged<Layout>(layoutShallowEquals),
+      distinctUntilChanged(shallowObjectEquals<Layout>),
    ),
  );

@@ -1004,7 +1004,6 @@ export function enterRTCSession(
    delayedLeaveEventRestartLocalTimeoutMs:
      delayedLeaveTimings.restart_timeout_ms,
    networkErrorRetryMs: sessionConfig.network_error_retry_ms,
-    makeKeyDelay: sessionConfig.wait_for_key_rotation_ms,
    membershipEventExpiryMs: sessionConfig.membership_event_expiry_ms,
    keyRotationParticipantLimit: sessionConfig.key_rotation_participant_limit,
    unstableSendStickyEvents: matrixRTCMode === MatrixRTCMode.Matrix_2_0,
@@ -14,7 +14,7 @@ import {
  switchAll,
 } from "rxjs";

-import { type WindowMode } from "./CallViewModel/CallViewModel.ts";
+import { type WindowMode } from "./layout-types.ts";
 import { constant, type Behavior } from "./Behavior.ts";
 import { type ObservableScope } from "./ObservableScope.ts";

@@ -1,74 +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 { test, expect } from "vitest";
-import {
-  type Alignment,
-  layoutShallowEquals,
-  type Layout,
-} from "./layout-types";
-import {
-  type SpotlightTileViewModel,
-  type GridTileViewModel,
-} from "./TileViewModel";
-import { BehaviorSubject } from "rxjs";
-
-const spotlightTile = {} as unknown as SpotlightTileViewModel;
-const gridTile = {} as unknown as GridTileViewModel;
-const pipAlignment$ = new BehaviorSubject<Alignment>({
-  inline: "end",
-  block: "end",
-});
-
-const spotlightExpanded: Layout = {
-  type: "spotlight-expanded",
-  spotlight: spotlightTile,
-  pipAlignment$,
-};
-
-const spotlightPortrait: Layout = {
-  type: "spotlight-portrait",
-  spotlight: spotlightTile,
-  grid: [gridTile],
-  setVisibleTiles: () => {},
-};
-
-test("layoutShallowEquals considers a layout to be equal to its shallow clone", () =>
-  expect(layoutShallowEquals(spotlightExpanded, { ...spotlightExpanded })).toBe(
-    true,
-  ));
-
-test("layoutShallowEquals detects a missing key", () => {
-  expect(
-    layoutShallowEquals(spotlightExpanded, {
-      ...spotlightExpanded,
-      pip: gridTile,
-    }),
-  ).toBe(false);
-  expect(
-    layoutShallowEquals(
-      { ...spotlightExpanded, pip: gridTile },
-      spotlightExpanded,
-    ),
-  ).toBe(false);
-});
-
-test("layoutShallowEquals considers grid arrays with equal contents to be equal", () =>
-  expect(
-    layoutShallowEquals(spotlightPortrait, {
-      ...spotlightPortrait,
-      grid: [...spotlightPortrait.grid],
-    }),
-  ).toBe(true));
-
-test("layoutShallowEquals detects grid arrays with different contents", () =>
-  expect(
-    layoutShallowEquals(spotlightPortrait, {
-      ...spotlightPortrait,
-      grid: [...spotlightPortrait.grid, gridTile],
-    }),
-  ).toBe(false));
@@ -16,7 +16,13 @@ import {
  type SpotlightTileViewModel,
 } from "./TileViewModel.ts";
 import { type Behavior } from "./Behavior.ts";
-import { shallowEquals as arrayShallowEquals } from "../utils/array.ts";
+
+/**
+ * The general shape of the space the call is drawn in. Called a window because
+ * that is what it is in the standalone app; for a component it is the container
+ * the host gave us, which may be a small corner of a large window.
+ */
+export type WindowMode = "normal" | "narrow" | "flat" | "pip";

 export interface GridLayoutMedia {
  type: "grid";
@@ -141,30 +147,3 @@ export type Layout =
  | OneOnOneDesktopLayout
  | OneOnOneMobileLayout
  | PipLayout;
-
-/**
- * Tests whether the top-level properties and array elements of layout `a` are
- * equal to those of layout `b`. Useful for deduping redundant layout updates.
- */
-export function layoutShallowEquals(a: Layout, b: Layout): boolean {
-  // If a and b have the same number of keys and every key in a is also in b,
-  // then they have the same keys.
-  const aKeys = Object.keys(a);
-  const bKeys = Object.keys(b);
-  if (aKeys.length !== bKeys.length) return false;
-
-  for (const key of aKeys) {
-    if (!(key in b)) return false;
-
-    // Now check that they have the same values.
-    const aValue = (a as any)[key];
-    const bValue = (b as any)[key];
-    if (Array.isArray(aValue) && Array.isArray(bValue)) {
-      // Special case for arrays so we can detect when the grid tiles arrays are
-      // essentially the same.
-      if (!arrayShallowEquals(aValue, bValue)) return false;
-    } else if (aValue !== bValue) return false;
-  }
-
-  return true;
-}
@@ -0,0 +1,220 @@
+/*
+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 {
+  chooseSpotlightSpeaker,
+  computeLayoutMedia,
+  computeSpotlight,
+  type LayoutMediaInputs,
+} from "./layoutMedia";
+import { type LocalUserMediaViewModel } from "./media/LocalUserMediaViewModel";
+import { type RemoteUserMediaViewModel } from "./media/RemoteUserMediaViewModel";
+import { type RingingMediaViewModel } from "./media/RingingMediaViewModel";
+import { type ScreenShareViewModel } from "./media/ScreenShareViewModel";
+
+// The layout functions only look at `type` and `local`, so stubs suffice
+const local = { type: "user", local: true } as LocalUserMediaViewModel;
+const alice = { type: "user", local: false } as RemoteUserMediaViewModel;
+const bob = { type: "user", local: false } as RemoteUserMediaViewModel;
+const carol = { type: "user", local: false } as RemoteUserMediaViewModel;
+const screenShare = {
+  type: "screen share",
+  local: false,
+} as ScreenShareViewModel;
+const ringing = { type: "ringing" } as RingingMediaViewModel;
+
+describe("chooseSpotlightSpeaker", () => {
+  const items = (
+    ...speaking: boolean[]
+  ): {
+    media: RemoteUserMediaViewModel | LocalUserMediaViewModel;
+    speaking: boolean;
+  }[] =>
+    [local, alice, bob].map((media, i) => ({
+      media,
+      speaking: speaking[i] ?? false,
+    }));
+
+  it("prefers a remote speaker over the local user", () => {
+    expect(chooseSpotlightSpeaker(undefined, items(true, false, true))).toBe(
+      bob,
+    );
+  });
+
+  it("falls back to any remote user, then the local user", () => {
+    expect(chooseSpotlightSpeaker(undefined, items())).toBe(alice);
+    expect(
+      chooseSpotlightSpeaker(undefined, [{ media: local, speaking: false }]),
+    ).toBe(local);
+    expect(chooseSpotlightSpeaker(undefined, [])).toBeUndefined();
+  });
+
+  it("sticks with the previous speaker while they keep speaking", () => {
+    expect(chooseSpotlightSpeaker(bob, items(false, true, true))).toBe(bob);
+  });
+
+  it("sticks with the previous speaker when nobody is speaking", () => {
+    expect(chooseSpotlightSpeaker(bob, items())).toBe(bob);
+  });
+
+  it("switches when someone else speaks and the previous speaker is silent", () => {
+    expect(chooseSpotlightSpeaker(bob, items(false, true, false))).toBe(alice);
+  });
+
+  it("forgets a previous speaker who left, and never sticks to the local user", () => {
+    expect(chooseSpotlightSpeaker(carol, items())).toBe(alice);
+    expect(chooseSpotlightSpeaker(local, items())).toBe(alice);
+  });
+});
+
+describe("computeSpotlight", () => {
+  it("spotlights ringing media with the local user in the PiP", () => {
+    expect(
+      computeSpotlight({
+        ringing,
+        screenShares: [screenShare],
+        speaker: alice,
+        localPip: local,
+      }),
+    ).toEqual({ spotlight: [ringing], pip: local });
+  });
+
+  it("spotlights screen shares with the speaker in the PiP", () => {
+    expect(
+      computeSpotlight({
+        ringing: null,
+        screenShares: [screenShare],
+        speaker: alice,
+        localPip: local,
+      }),
+    ).toEqual({ spotlight: [screenShare], pip: alice });
+  });
+
+  it("otherwise spotlights the speaker and hides a redundant PiP", () => {
+    expect(
+      computeSpotlight({
+        ringing: null,
+        screenShares: [],
+        speaker: alice,
+        localPip: local,
+      }),
+    ).toEqual({ spotlight: [alice], pip: local });
+    expect(
+      computeSpotlight({
+        ringing: null,
+        screenShares: [],
+        speaker: local,
+        localPip: local,
+      }),
+    ).toEqual({ spotlight: [local], pip: undefined });
+  });
+});
+
+describe("computeLayoutMedia", () => {
+  const base: LayoutMediaInputs = {
+    windowMode: "normal",
+    layoutMode: "grid",
+    spotlightExpanded: false,
+    oneOnOne: null,
+    localVideoEnabled: true,
+    spotlight: [alice],
+    grid: [local, alice, bob],
+    pip: local,
+    desktop: false,
+  };
+  const layout = (
+    overrides: Partial<LayoutMediaInputs>,
+  ): ReturnType<typeof computeLayoutMedia> =>
+    computeLayoutMedia({ ...base, ...overrides });
+
+  it("uses a plain grid unless a screen share needs the spotlight", () => {
+    expect(layout({})).toEqual({
+      type: "grid",
+      edgeToEdge: false,
+      spotlight: undefined,
+      grid: base.grid,
+    });
+    expect(layout({ spotlight: [screenShare] }).spotlight).toEqual([
+      screenShare,
+    ]);
+  });
+
+  it("switches between landscape and expanded spotlight", () => {
+    expect(layout({ layoutMode: "spotlight" })).toMatchObject({
+      type: "spotlight-landscape",
+      edgeToEdge: false,
+    });
+    expect(
+      layout({ layoutMode: "spotlight", spotlightExpanded: true }),
+    ).toEqual({
+      type: "spotlight-expanded",
+      edgeToEdge: false,
+      spotlight: [alice],
+      pip: local,
+    });
+  });
+
+  it("puts the remote user in the desktop one-on-one spotlight, or the local user when ringing", () => {
+    expect(layout({ oneOnOne: { local, remote: alice } })).toEqual({
+      type: "one-on-one-desktop",
+      edgeToEdge: false,
+      spotlight: alice,
+      pip: local,
+    });
+    expect(layout({ oneOnOne: { local, remote: ringing } })).toMatchObject({
+      spotlight: local,
+      pip: ringing,
+    });
+  });
+
+  it("uses a mobile one-on-one layout in narrow and flat windows, hiding the PiP without video", () => {
+    const oneOnOne = { local, remote: alice };
+    expect(layout({ windowMode: "narrow", oneOnOne })).toEqual({
+      type: "one-on-one-mobile",
+      edgeToEdge: true,
+      spotlight: alice,
+      pip: local,
+    });
+    expect(
+      layout({ windowMode: "flat", oneOnOne, localVideoEnabled: false }),
+    ).toMatchObject({ type: "one-on-one-mobile", pip: undefined });
+  });
+
+  it("uses a portrait spotlight in narrow windows for big calls or screen shares", () => {
+    expect(layout({ windowMode: "narrow" }).type).toBe("grid");
+    expect(
+      layout({ windowMode: "narrow", grid: [local, alice, bob, carol] }).type,
+    ).toBe("spotlight-portrait");
+    expect(
+      layout({ windowMode: "narrow", spotlight: [screenShare] }).type,
+    ).toBe("spotlight-portrait");
+  });
+
+  it("uses edge-to-edge spotlight layouts in flat windows", () => {
+    expect(layout({ windowMode: "flat" })).toMatchObject({
+      type: "spotlight-landscape",
+      edgeToEdge: true,
+    });
+    expect(
+      layout({ windowMode: "flat", layoutMode: "spotlight" }),
+    ).toMatchObject({
+      type: "spotlight-expanded",
+      edgeToEdge: true,
+    });
+  });
+
+  it("uses the PiP layout, edge to edge except on desktop", () => {
+    expect(layout({ windowMode: "pip" })).toEqual({
+      type: "pip",
+      edgeToEdge: true,
+      spotlight: [alice],
+    });
+    expect(layout({ windowMode: "pip", desktop: true }).edgeToEdge).toBe(false);
+  });
+});
@@ -0,0 +1,216 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { type LayoutMode } from "./LayoutSwitchViewModel.ts";
+import {
+  type GridLayoutMedia,
+  type LayoutMedia,
+  type OneOnOneDesktopLayoutMedia,
+  type OneOnOneMobileLayoutMedia,
+  type SpotlightExpandedLayoutMedia,
+  type SpotlightLandscapeLayoutMedia,
+  type SpotlightPortraitLayoutMedia,
+  type WindowMode,
+} from "./layout-types.ts";
+import { type LocalUserMediaViewModel } from "./media/LocalUserMediaViewModel.ts";
+import { type MediaViewModel } from "./media/MediaViewModel.ts";
+import { type RingingMediaViewModel } from "./media/RingingMediaViewModel.ts";
+import { type ScreenShareViewModel } from "./media/ScreenShareViewModel.ts";
+import { type UserMediaViewModel } from "./media/UserMediaViewModel.ts";
+
+/**
+ * This is the number of participants that we think constitutes a "small" call
+ * on mobile. No spotlight tile should be shown below this threshold.
+ */
+const smallMobileCallThreshold = 3;
+
+/**
+ * Picks who to spotlight based on who is speaking, preferring the previous
+ * pick so that the spotlight doesn't flip eagerly between speakers.
+ *
+ * @param prev The previous pick, if any.
+ * @param items All user media in the call along with whether each is speaking.
+ */
+export function chooseSpotlightSpeaker<M extends { local: boolean }>(
+  prev: M | undefined,
+  items: readonly { media: M; speaking: boolean }[],
+): M | undefined {
+  // Only remote users that are still in the call should be sticky
+  const sticky = items.find((i) => i.media === prev && !i.media.local);
+  // If the previous speaker is still speaking, stick with them
+  if (sticky?.speaking) return sticky.media;
+  return (
+    // Otherwise, select any remote user who is speaking
+    items.find((i) => !i.media.local && i.speaking)?.media ??
+    // Otherwise, stick with the person who was last speaking
+    sticky?.media ??
+    // Otherwise, spotlight an arbitrary remote user
+    items.find((i) => !i.media.local)?.media ??
+    // Otherwise, spotlight the local user
+    items.find((i) => i.media.local)?.media
+  );
+}
+
+export interface SpotlightInputs {
+  ringing: RingingMediaViewModel | null;
+  screenShares: ScreenShareViewModel[];
+  speaker: UserMediaViewModel | undefined;
+  /** Local user media suitable for showing in a PiP, if any. */
+  localPip: UserMediaViewModel | undefined;
+}
+
+/**
+ * Decides what goes in the spotlight, and what goes in the picture-in-picture
+ * tile of the expanded spotlight layout.
+ */
+export function computeSpotlight({
+  ringing,
+  screenShares,
+  speaker,
+  localPip,
+}: SpotlightInputs): {
+  spotlight: MediaViewModel[];
+  pip: UserMediaViewModel | undefined;
+} {
+  if (ringing !== null) return { spotlight: [ringing], pip: localPip };
+  if (screenShares.length > 0) return { spotlight: screenShares, pip: speaker };
+  return {
+    spotlight: speaker ? [speaker] : [],
+    // Hide PiP if redundant (i.e. if local user is already in spotlight)
+    pip: localPip === speaker ? undefined : localPip,
+  };
+}
+
+export interface OneOnOneMedia {
+  local: LocalUserMediaViewModel;
+  remote: UserMediaViewModel | RingingMediaViewModel;
+}
+
+export interface LayoutMediaInputs {
+  windowMode: WindowMode;
+  /** The layout chosen with the layout switch. */
+  layoutMode: LayoutMode;
+  spotlightExpanded: boolean;
+  /** Set when the call qualifies for a one-on-one layout. */
+  oneOnOne: OneOnOneMedia | null;
+  localVideoEnabled: boolean;
+  spotlight: MediaViewModel[];
+  grid: UserMediaViewModel[];
+  pip: UserMediaViewModel | undefined;
+  desktop: boolean;
+}
+
+/**
+ * Decides which layout to use and which media goes where in it.
+ */
+export function computeLayoutMedia({
+  windowMode,
+  layoutMode,
+  spotlightExpanded,
+  oneOnOne,
+  localVideoEnabled,
+  spotlight,
+  grid,
+  pip,
+  desktop,
+}: LayoutMediaInputs): LayoutMedia {
+  switch (windowMode) {
+    case "normal":
+      if (layoutMode === "grid")
+        return oneOnOne === null
+          ? gridLayoutMedia(spotlight, grid)
+          : oneOnOneDesktopLayoutMedia(oneOnOne);
+      return spotlightExpanded
+        ? spotlightExpandedLayoutMedia(false, spotlight, pip)
+        : spotlightLandscapeLayoutMedia(false, spotlight, grid);
+    case "narrow":
+      if (oneOnOne !== null)
+        return oneOnOneMobileLayoutMedia(oneOnOne, localVideoEnabled);
+      return grid.length > smallMobileCallThreshold || hasScreenShare(spotlight)
+        ? spotlightPortraitLayoutMedia(spotlight, grid)
+        : gridLayoutMedia(spotlight, grid);
+    case "flat":
+      if (oneOnOne !== null)
+        return oneOnOneMobileLayoutMedia(oneOnOne, localVideoEnabled);
+      // Yes, grid mode actually gets you a "spotlight" layout in this window
+      // mode.
+      return layoutMode === "grid"
+        ? spotlightLandscapeLayoutMedia(true, spotlight, grid)
+        : spotlightExpandedLayoutMedia(true, spotlight, pip);
+    case "pip":
+      return { type: "pip", edgeToEdge: !desktop, spotlight };
+  }
+}
+
+function hasScreenShare(spotlight: MediaViewModel[]): boolean {
+  return spotlight.some((vm) => vm.type === "screen share");
+}
+
+function gridLayoutMedia(
+  spotlight: MediaViewModel[],
+  grid: UserMediaViewModel[],
+): GridLayoutMedia {
+  return {
+    type: "grid",
+    edgeToEdge: false,
+    spotlight: hasScreenShare(spotlight) ? spotlight : undefined,
+    grid,
+  };
+}
+
+function oneOnOneDesktopLayoutMedia(
+  media: OneOnOneMedia,
+): OneOnOneDesktopLayoutMedia {
+  return media.remote.type === "ringing"
+    ? {
+        type: "one-on-one-desktop",
+        edgeToEdge: false,
+        spotlight: media.local,
+        pip: media.remote,
+      }
+    : {
+        type: "one-on-one-desktop",
+        edgeToEdge: false,
+        spotlight: media.remote,
+        pip: media.local,
+      };
+}
+
+function spotlightExpandedLayoutMedia(
+  edgeToEdge: boolean,
+  spotlight: MediaViewModel[],
+  pip: UserMediaViewModel | undefined,
+): SpotlightExpandedLayoutMedia {
+  return { type: "spotlight-expanded", edgeToEdge, spotlight, pip };
+}
+
+function spotlightLandscapeLayoutMedia(
+  edgeToEdge: boolean,
+  spotlight: MediaViewModel[],
+  grid: UserMediaViewModel[],
+): SpotlightLandscapeLayoutMedia {
+  return { type: "spotlight-landscape", edgeToEdge, spotlight, grid };
+}
+
+function oneOnOneMobileLayoutMedia(
+  media: OneOnOneMedia,
+  localVideoEnabled: boolean,
+): OneOnOneMobileLayoutMedia {
+  return {
+    type: "one-on-one-mobile",
+    edgeToEdge: true,
+    spotlight: media.remote,
+    pip: localVideoEnabled ? media.local : undefined,
+  };
+}
+
+function spotlightPortraitLayoutMedia(
+  spotlight: MediaViewModel[],
+  grid: UserMediaViewModel[],
+): SpotlightPortraitLayoutMedia {
+  return { type: "spotlight-portrait", edgeToEdge: false, spotlight, grid };
+}
@@ -156,7 +156,7 @@ export function useAudioContext<S extends string>(
      }
      setAudioBuffers(buffers as Record<S, AudioBuffer>);
    })().catch((ex) => {
-      logger.debug("Failed to setup audio context", ex);
+      logger.warn("Failed to setup audio context", ex);
    });

    setAudioContext(ctx);
@@ -209,7 +209,9 @@ export function useAudioContext<S extends string>(
    },
    playSoundLooping: (name, delayS: number): (() => Promise<void>) => {
      if (!audioBuffers[name]) {
-        throw Error(`Tried to play a sound that wasn't buffered (${name})`);
+        // We do not throw here. Instead we log and let the component life. Its not a fatal error if sounds are missing.
+        logger.debug(`Tried to play a sound that wasn't buffered (${name})`);
+        return async () => {};
      }
      return playSoundLooping(
        audioContext,
@@ -0,0 +1,40 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { test, expect } from "vitest";
+import { shallowEquals } from "./object";
+
+interface Thing {
+  type: string;
+  items: object[];
+  value: number;
+  extra?: object;
+}
+
+const item = {};
+const withArray: Thing = { type: "a", items: [item], value: 1 };
+
+test("shallowEquals considers an object to be equal to its shallow clone", () =>
+  expect(shallowEquals(withArray, { ...withArray })).toBe(true));
+
+test("shallowEquals detects a missing key", () => {
+  expect(shallowEquals(withArray, { ...withArray, extra: item })).toBe(false);
+  expect(shallowEquals({ ...withArray, extra: item }, withArray)).toBe(false);
+});
+
+test("shallowEquals detects a differing value", () =>
+  expect(shallowEquals(withArray, { ...withArray, value: 2 })).toBe(false));
+
+test("shallowEquals considers arrays with equal contents to be equal", () =>
+  expect(
+    shallowEquals(withArray, { ...withArray, items: [...withArray.items] }),
+  ).toBe(true));
+
+test("shallowEquals detects arrays with different contents", () =>
+  expect(
+    shallowEquals(withArray, { ...withArray, items: [...withArray.items, {}] }),
+  ).toBe(false));
@@ -0,0 +1,38 @@
+/*
+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 { shallowEquals as arrayShallowEquals } from "./array.ts";
+
+/**
+ * Determine whether two objects are equal by shallow comparison of their
+ * top-level properties. Array-valued properties are themselves compared
+ * shallowly, so two objects holding distinct arrays with the same elements are
+ * considered equal.
+ */
+export function shallowEquals<T extends object>(
+  a: Readonly<T>,
+  b: Readonly<T>,
+): boolean {
+  // If a and b have the same number of keys and every key in a is also in b,
+  // then they have the same keys.
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+
+  for (const key of aKeys) {
+    if (!(key in b)) return false;
+
+    // Now check that they have the same values.
+    const aValue = (a as any)[key];
+    const bValue = (b as any)[key];
+    if (Array.isArray(aValue) && Array.isArray(bValue)) {
+      if (!arrayShallowEquals(aValue, bValue)) return false;
+    } else if (aValue !== bValue) return false;
+  }
+
+  return true;
+}
@@ -8,7 +8,7 @@ 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";
+import { scopeStylesToRoot } from "./component/build/scopeStylesToRoot.ts";

 // 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.
@@ -65,8 +65,12 @@ export default defineConfig(({ mode }) => {
      },
      rollupOptions: {
        // The host already has these, and a second copy of any of them does not
-        // merely bloat the bundle: React would hold two sets of hooks, and the
-        // Matrix client would run two sync loops.
+        // merely bloat the bundle: React would hold two sets of hooks, the
+        // Matrix client would run two sync loops, and a second Compound would
+        // bring a second stylesheet with class names of its own — so that what
+        // it floats into the host's body, tooltips and menus, would match the
+        // host's Compound stylesheet only when the two happened to be the same
+        // version.
        //
        // Every subpath has to be named. Element Call reaches most of the Matrix
        // SDK as `matrix-js-sdk/lib/…`, and a bare "matrix-js-sdk" would not
@@ -84,7 +88,6 @@ export default defineConfig(({ mode }) => {
          "react/compiler-runtime",
          "react-dom",
          "react-dom/client",
-          "livekit-client",
          "matrix-js-sdk",
          "matrix-js-sdk/lib/browser-index",
          "matrix-js-sdk/lib/client",
@@ -103,6 +106,8 @@ export default defineConfig(({ mode }) => {
          "matrix-js-sdk/lib/sync",
          "matrix-js-sdk/lib/types",
          "matrix-js-sdk/lib/utils",
+          "@vector-im/compound-web",
+          "@vector-im/compound-design-tokens/assets/web/icons",
        ],
      },
    },
@@ -6,7 +6,6 @@ Please see LICENSE in the repository root for full details.
 */

 import { defineConfig, mergeConfig } from "vite";
-import generateFile from "vite-plugin-generate-file";

 import fullConfig from "./vite.config.ts";

@@ -19,19 +18,6 @@ export default defineConfig((env) =>
    defineConfig({
      base, // Use relative URLs to allow the app to be hosted under any path
      publicDir: false, // Don't serve the public directory which only contains the favicon
-      plugins: [
-        generateFile([
-          {
-            type: "json",
-            output: "./config.json",
-            data: {
-              matrix_rtc_session: {
-                wait_for_key_rotation_ms: 5000,
-              },
-            },
-          },
-        ]),
-      ],
    }),
  ),
 );
@@ -25,6 +25,7 @@ export default defineConfig((configEnv) =>
                "src/**/*.test.ts",
                "src/**/*.test.tsx",
                "component/**/*.test.ts",
+                "component/**/*.test.tsx",
              ],
            },
          },
Author	SHA1	Message	Date
Valere	25c4f14d8f	Sound listing clean-up	2026-10-09 16:06:19 +02:00
Johannes Marbach	c97e3bf7a6	Merge pull request #4337 from element-hq/johannes/remove-per-participant-e2ee-param Remove perParticipantE2EE	2026-10-09 12:01:45 +02:00
renovate[bot]	f89cbc140e	Update ghcr.io/element-hq/element-web:develop Docker digest to 181a526 (#4339 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-10-09 01:18:17 +00:00
Johannes Marbach	a9fa48f68c	Remove perParticipantE2EE	2026-10-08 17:15:19 +02:00
Robin	471c76c0e7	Merge pull request #4336 from element-hq/robin/vite-warning Fix Vite warning	2026-10-08 16:40:45 +02:00
Johannes Marbach	4881fd5fc6	Merge pull request #4280 from element-hq/johannes/claude Add workflow for automated Claude review of pull requests	2026-10-08 15:27:13 +02:00
Johannes Marbach	49c29f160a	Add workflow for automated Claude review of pull requests	2026-10-08 14:57:19 +02:00
Robin	aa8f73e632	Fix Vite warning	2026-10-08 14:23:59 +02:00
Johannes Marbach	14c561af8d	Merge pull request #4300 from element-hq/johannes/pure-layout-functions Make the layout decisions pure / testable functions	2026-10-08 13:20:44 +02:00
Johannes Marbach	4fd2f66949	Explain why we use merge	2026-10-08 11:14:26 +02:00
Johannes Marbach	53e038b09b	layoutShallowEquals -> shallowEquals	2026-10-08 10:57:03 +02:00
renovate[bot]	3b7ccb63e2	Update ghcr.io/element-hq/element-web:develop Docker digest to 53a4fe6 (#4334 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-10-08 02:17:28 +00:00
Johannes Marbach	1f07f949b5	Merge pull request #4330 from element-hq/renovate/npm-postcss-selector-parser-vulnerability Update dependency postcss-selector-parser to v7.1.6 [SECURITY]	2026-10-07 14:59:28 +02:00
renovate[bot]	a60036b3d7	Update dependency postcss-selector-parser to v7.1.6 [SECURITY]	2026-10-07 12:37:14 +00:00
Timo	2eb3a2fd2d	Merge pull request #4329 from element-hq/toger5/remove-lk-client-from-external-deps Remove livekit-client from the list of external dependencies	2026-10-07 14:34:47 +02:00
Timo K.	8b6adf067e	remove unnecassary (confused) comment	2026-10-07 14:20:42 +02:00
Timo K.	b408610277	Remove livekit-client from the list of external dependencies	2026-10-07 12:01:21 +02:00
renovate[bot]	2faa6c3dac	Update ghcr.io/element-hq/element-web:develop Docker digest to 589c490 (#4328 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-10-07 01:42:16 +00:00
renovate[bot]	9b3c3569ec	Update ghcr.io/element-hq/element-web:develop Docker digest to 39c94f0 (#4327 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-10-06 02:57:18 +00:00
Johannes Marbach	a4654d9d00	Merge pull request #4315 from element-hq/johannes/workflow-call Allow workflow_call on lint and test workflows	2026-10-05 14:07:07 +02:00
Johannes Marbach	6e5f71c796	Revert back to negative flags	2026-10-05 13:53:52 +02:00
Johannes Marbach	067f3d3038	Fix repo selection and flags	2026-10-05 13:44:48 +02:00
Johannes Marbach	6d70221fe6	Flip boolean flags	2026-10-05 13:04:34 +02:00
renovate[bot]	427376f78b	Update ghcr.io/element-hq/element-web:develop Docker digest to 573daa2 (#4323 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-10-05 09:47:57 +00:00
Johannes Marbach	ccfd36923d	Merge pull request #4324 from element-hq/renovate/compound Update dependency @vector-im/compound-design-tokens to v11.1.0	2026-10-05 08:41:57 +02:00
Johannes Marbach	89567726f8	Fix tests	2026-10-05 08:13:58 +02:00
Robin	9cd111b5f2	Merge pull request #4318 from element-hq/redact-posthog-user-id Redact analytics ID from rageshakes	2026-10-05 07:44:16 +02:00
renovate[bot]	096aaac9f3	Update dependency @vector-im/compound-design-tokens to v11.1.0	2026-10-05 01:27:09 +00:00
renovate[bot]	8835a6d75d	Update ghcr.io/element-hq/element-web:develop Docker digest to 3cf23ff (#4322 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-10-04 09:34:33 +00:00
renovate[bot]	bfb868aec3	Update ghcr.io/element-hq/element-web:develop Docker digest to 5371503 (#4321 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-10-03 01:48:09 +00:00
Robin	4e8fb6e4cb	Redact analytics ID from rageshakes To improve our minimization of external data we collect in rageshakes.	2026-10-02 16:51:00 +02:00
Robin	7c53a6be5a	Merge pull request #4317 from element-hq/remove-wait-for-rotation Remove wait_for_key_rotation_ms config option	2026-10-02 15:14:14 +02:00
Robin	64b932f128	Remove unused vite-plugin-generate-file dependency	2026-10-02 14:57:34 +02:00
Robin	bfad85a3af	Remove wait_for_key_rotation_ms config option I learned that makeKeyDelay has been deprecated in matrix-js-sdk ever since the switch to the new encryption manager, so this config option has no effect.	2026-10-02 14:49:44 +02:00
Johannes Marbach	be822adec8	Allow workflow_call on lint and test workflows	2026-10-02 13:33:29 +02:00
Johannes Marbach	4c0f02ef47	Merge pull request #4309 from element-hq/johannes/layered Set up a layered build for CI similar to what EW does	2026-10-02 13:22:19 +02:00
Johannes Marbach	ca6319f06d	Remove layered boolean	2026-10-02 13:07:09 +02:00
Timo	1d57a8eee1	Merge pull request #4308 from element-hq/toger5/fix-component-sounds [ElementCall Component] Decode inlined sounds directly instead of fetching them	2026-10-02 12:45:31 +02:00
Timo K.	0bb9632b60	review play sounds does not throw	2026-10-02 11:46:54 +02:00
Timo K.	cbe195d449	review audio data loading	2026-10-02 11:46:40 +02:00
Robin	e800fec74d	Merge pull request #4314 from element-hq/renovate/element-web Update ghcr.io/element-hq/element-web:develop Docker digest to 588f0b4	2026-10-02 11:29:05 +02:00
Robin	9d0725ad31	Fix Element Web integration tests	2026-10-02 10:51:31 +02:00
renovate[bot]	241412f29b	Update ghcr.io/element-hq/element-web:develop Docker digest to 588f0b4	2026-10-02 02:54:17 +00:00
Timo K.	d96d00b64a	Merge branch 'main' into toger5/fix-component-sounds	2026-10-01 19:07:39 +02:00
Robin	cde88a7c93	Merge pull request #4312 from element-hq/js-sdk-develop Reset matrix-js-sdk to develop branch, adopt new join/leave signatures	2026-10-01 18:55:16 +02:00
Timo K.	3befe3d34b	Merge branch 'main' into toger5/fix-component-sounds	2026-10-01 13:58:23 +02:00
Timo	3ad778e7e8	Merge pull request #4306 from element-hq/toger5/fix-component-tooltips [ElementCall Component] Make compound a peer dependency with EW. (fix tooltips in embedded mode)	2026-10-01 13:57:58 +02:00
Timo K.	9a286032f2	shorten readme	2026-10-01 13:41:07 +02:00
Timo K.	363a8feab2	Stop bundling Compound, let the host supply it	2026-09-30 17:10:17 +02:00
Johannes Marbach	bd8c3142a6	Set up a layered build for CI similar to what EW does	2026-09-30 11:35:06 +02:00
Timo K.	16c60c8b6b	Warn when the audio context fails to set up.	2026-09-30 11:22:19 +02:00
Timo K.	63ac1ba03e	Decode inlined sounds directly instead of fetching them, with the test.	2026-09-30 11:22:15 +02:00
Timo K.	9140365251	Merge branch 'main' into toger5/fix-component-tooltips	2026-09-29 16:25:15 +02:00
Timo K.andClaude Fable 5.1	e296d88969	Keep the component's tooltips inside its root Compound's Tooltip floats its bubble through floating-ui's FloatingPortal, into the body: outside the element the component build confines its stylesheet to, so a label tooltip shows as bare text at all times. An enclosing FloatingPortal rooted at the container makes the nested portals land inside it instead. The call goes in an isolating wrapper there, standing in for the standalone page's #root, so that its footer layer no longer paints above the modals. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>	2026-09-29 12:08:44 +02:00
Johannes Marbach	6600c891f3	Extract the layout decision into a pure function	2026-09-28 17:36:24 +02:00
Johannes Marbach	33cfd2d8ad	Build the layout media from one snapshot of its inputs	2026-09-28 17:34:22 +02:00
Johannes Marbach	5a8714805c	Extract the spotlight and PiP choice into a pure function	2026-09-28 17:29:41 +02:00
Johannes Marbach	232e3f7ad4	Extract the spotlight speaker choice into a pure function	2026-09-28 17:28:14 +02:00
Johannes Marbach	10adf6658b	Let layoutShallowEquals compare any layout-shaped object	2026-09-28 17:27:04 +02:00
Johannes Marbach	29742006df	Move WindowMode next to the layout types to prevent cyclic import	2026-09-28 17:26:11 +02:00