Add the FEATURES_SPEC process for turning explorations into specs and PRs

FEATURES_SPEC/AGENTS.md describes how an exploration is distilled into a
feature spec and how a spec is turned into PRs against a current main; the
product spec template is the sidecar a brainstorming session fills in.

The folder is excluded from oxfmt: a product spec is immutable once a spec
leaves draft, and the process documents are prose in their own style.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

.github/workflows/build-element-call.yaml

@@ -44,9 +44,7 @@ jobs:
           node-version-file: ".node-version"
       - name: Install dependencies
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
-        run: "scripts/layered.sh --ignore-pnpmfile"
-        env:
-          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
+        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
       - name: Build Element Call
         run: pnpm run build:"$PACKAGE":"$BUILD_MODE"
         env:

.github/workflows/lint.yaml

@@ -1,12 +1,6 @@
 name: Lint, format & type check
 on:
   pull_request: {}
-  workflow_call:
-    inputs:
-      matrix-js-sdk-sha:
-        type: string
-        required: false
-        description: The matrix-js-sdk commit to build against instead of the locked one
 jobs:
   lint:
     name: Lint, format & type check
@@ -15,8 +9,6 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
         with:
-          # Inside a called workflow, github.repository is the caller so we need to make sure to still check out the EC repo here.
-          repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-call' || github.repository }}
           persist-credentials: false
       - name: Enable Corepack
         run: corepack enable
@@ -27,10 +19,7 @@ jobs:
           node-version-file: ".node-version"
       - name: Install dependencies
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
-        run: "scripts/layered.sh --ignore-pnpmfile"
-        env:
-          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
-          JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
+        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
       - name: Formatting
         run: "pnpm run format:check"
       - name: i18n

.github/workflows/test.yaml

@@ -3,25 +3,6 @@ on:
   pull_request: {}
   push:
     branches: [main]
-  workflow_call:
-    inputs:
-      matrix-js-sdk-sha:
-        type: string
-        required: false
-        description: The matrix-js-sdk commit to build against instead of the locked one
-      disable_coverage:
-        type: boolean
-        required: false
-        default: false
-        description: Skip generating and uploading coverage reports
-      disable_e2e_tests:
-        type: boolean
-        required: false
-        default: false
-        description: Skip the end-to-end tests
-    secrets:
-      CODECOV_TOKEN:
-        required: false
 jobs:
   vitest:
     name: Run unit tests
@@ -30,8 +11,6 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
         with:
-          # Inside a called workflow, github.repository is the caller so we need to make sure to still check out the EC repo here.
-          repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-call' || github.repository }}
           persist-credentials: false
       - name: Enable Corepack
         run: corepack enable
@@ -42,10 +21,7 @@ jobs:
           node-version-file: ".node-version"
       - name: Install dependencies
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
-        run: "scripts/layered.sh --ignore-pnpmfile"
-        env:
-          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
-          JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
+        run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
       - name: Get Playwright version
         run: echo "PLAYWRIGHT_VERSION=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[0].devDependencies["@playwright/test"].version')" >> $GITHUB_ENV
       - name: Cache Playwright binaries
@@ -59,11 +35,8 @@ jobs:
         if: steps.playwright-cache.outputs.cache-hit != 'true'
         run: pnpm playwright install --with-deps
       - name: Vitest
-        run: pnpm vitest --coverage.enabled="$ENABLE_COVERAGE"
-        env:
-          ENABLE_COVERAGE: ${{ !inputs.disable_coverage }}
+        run: "pnpm run test:coverage"
       - name: Upload to codecov
-        if: ${{ !inputs.disable_coverage }}
         uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
@@ -72,14 +45,11 @@ jobs:
           fail_ci_if_error: true
   playwright:
     name: Run end-to-end tests
-    if: ${{ !inputs.disable_e2e_tests }}
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
         with:
-          # Inside a called workflow, github.repository is the caller so we need to make sure to still check out the EC repo here.
-          repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-call' || github.repository }}
           persist-credentials: false
       - name: Enable Corepack
         run: corepack enable
@@ -89,10 +59,7 @@ jobs:
           node-version-file: ".node-version"
       - name: Install dependencies
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
-        run: scripts/layered.sh --ignore-pnpmfile
-        env:
-          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
-          JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
+        run: pnpm install --frozen-lockfile --ignore-pnpmfile
       - name: Get Playwright version
         run: echo "PLAYWRIGHT_VERSION=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[0].devDependencies["@playwright/test"].version')" >> $GITHUB_ENV
       - name: Cache Playwright binaries

.gitignore

@@ -10,9 +10,6 @@ public/config.json
 backend/synapse_tmp/*
 backend/synapse_tmp_othersite/*
 /coverage
-
-# Transient agent scratch files
-/agent-workspace/
 config.json
 
 # Yarn
@@ -41,6 +38,3 @@ yarn-error.log
 
 *storybook.log
 storybook-static
-
-# Nested checkout made by scripts/layered.sh
-/matrix-js-sdk/

.oxfmtrc.json

@@ -2,5 +2,5 @@
   "$schema": "./node_modules/oxfmt/configuration_schema.json",
   "printWidth": 80,
   "sortPackageJson": false,
-  "ignorePatterns": ["pnpm-lock.yaml", "node_modules", "dist"]
+  "ignorePatterns": ["pnpm-lock.yaml", "node_modules", "dist", "FEATURES_SPEC"]
 }

AGENTS.md

@@ -1,56 +0,0 @@
-# AGENTS.md — Element Call
-
-MatrixRTC (MSC4143) + LiveKit video calling, shipped standalone, as a widget in
-Element Web and Element X, as embedded packages, and as a React component in a
-host's page. It is the MatrixRTC reference implementation.
-
-## Non-negotiables
-
-- Features and UI changes need a pre-approved issue. No issue, no review.
-- Exactly one `PR-*` label per PR. CI enforces it; it drives the changelog.
-- New behaviour ships with unit tests, a story if it renders, and an e2e spec if it
-  is user-facing. All three.
-- Reuse an existing component. If you genuinely cannot, say so in the PR body and
-  name what you rejected — never add a new one silently.
-- Nothing reads the page. No `window.location`, `document.body`, `window.inner*`,
-  `@media`, global `i18next` or the `widget` global — take it from a provider.
-- The change works standalone, as a widget and as a component. Say what you checked.
-- Every gate below is green before you push.
-- Hand off after the first implementation, before the quality pass. Then commit on
-  the user's word where the setup allows it, or hand them the message.
-
-## Read before you
-
-| …                                | …                                                          |
-| -------------------------------- | ---------------------------------------------------------- |
-| start a task of any size         | [docs/agents/workflow.md](docs/agents/workflow.md)         |
-| touch call logic or a view model | [docs/agents/architecture.md](docs/agents/architecture.md) |
-| write any code                   | [docs/agents/code-style.md](docs/agents/code-style.md)     |
-| write a test, story or e2e spec  | [docs/agents/testing.md](docs/agents/testing.md)           |
-| open a PR                        | [CONTRIBUTING.md](CONTRIBUTING.md)                         |
-| implement from a feature spec    | [FEATURES_SPEC/AGENTS.md](FEATURES_SPEC/AGENTS.md)         |
-
-## Gates
-
-```sh
-pnpm lint            # tsc, oxlint, knip, component externals
-pnpm format          # oxfmt
-pnpm test            # vitest: unit and storybook projects
-pnpm i18n:check
-```
-
-`knip` fails on dead code; a file deliberately inert ahead of its consumer goes in
-`knip.ts` `ignoreFiles` with a reason.
-
-## A good PR
-
-- One slice, under ~400 changed lines, green on its own, linked to its issue.
-- View model + marble tests, thin view, a story per state, an e2e spec.
-- Any new shared component called out explicitly, with why nothing existing fit.
-- Template filled for real: what, why, before/after screenshots, repro steps.
-- Comments only where the code can't give the reason — see
-  [code-style.md](docs/agents/code-style.md#comments).
-- Anything that redraws continuously — an animation frame, a stream — says what it
-  costs, or better, counts the redraws in a test.
-- Branch `<handle>/<topic>`. Plain imperative commit subjects, no prefixes.
-- Once review starts, fix forward. Never force-push a regeneration over a review.

FEATURES_SPEC/AGENTS.md

@@ -0,0 +1,415 @@
+# FEATURE_SPEC — Agent Instructions
+
+This folder holds **feature specs distilled from experiments**. A spec is the durable
+artifact of an exploration; the exploration branch is not. Each spec must contain
+enough information for an agent to produce mergeable PRs against a *current* `main`
+without access to the original branch.
+
+## What this folder is not
+
+- Not a design-doc archive. Specs that are not intended to be implemented do not
+  belong here.
+- Not a place for narrative. Prose that does not constrain the implementation or its
+  verification should be cut.
+- Not a substitute for the PR description. The spec explains *why* and *what must be
+  true*; the PR explains *this diff*.
+
+## File naming
+
+`YYYY-MM_Snake_Case_Title.md` — e.g. `2026-09_Raise_Hand_Improvements.md`
+
+The filename is immutable once committed. Renames break links from PRs, issues and
+the drift log. If scope changes fundamentally, write a new spec and set
+`supersedes:` / `superseded_by:`.
+
+A sidecar `YYYY-MM_Snake_Case_Title.product.md` holds the product spec — user stories,
+functional requirements, success criteria. Copy `_TEMPLATE.product.md`. Product owns
+it; see "Brainstorming: the product spec".
+
+An optional sidecar `YYYY-MM_Snake_Case_Title.notes.md` holds lessons learned,
+narrative, dead-end logs and anything else that is worth keeping but does not
+constrain the implementation. Rules:
+
+- The sidecar is **never load-bearing**. Agents do not read it to derive
+  implementation, and nothing in it may contradict or extend the spec. If a note
+  constrains the work, it belongs in `## Decisions`, `## Rejected alternatives` or
+  `## Measurements` instead.
+- Agents may append to it (an observation from a drift check, a wrong turn during
+  implementation) and must never rewrite or delete existing content.
+- An agent that is `blocked` may read the sidecar to draft an open question, but
+  quotes what it found rather than acting on it.
+- No sidecar is required. An empty one is worse than none.
+
+## Style: facts only
+
+Applies to the spec file only. The product spec is prose by design and the notes
+sidecar is unconstrained. The spec is re-read on every regeneration, where prose costs context
+and dilutes the contract, so:
+
+- Bullets, not paragraphs. Declarative present tense. No motivation, no background,
+  no summary of what the code currently does beyond locating the change.
+- Name things instead of describing them — a path, a symbol, an event type, a command,
+  an event id. A reference is shorter and more precise than a sentence about it. Which
+  kind of reference is allowed depends on the section; see "Reference durability".
+- One line per decision plus at most one sentence of rationale. If the rationale needs
+  more, the extra goes in the sidecar.
+- No judgement adjectives (clean, elegant, proper, obviously) and no hedging (should
+  probably, might be nice). Either it is a constraint or it is not in the spec.
+- `## Problem` is at most five bullets.
+- Target under 200 lines for the whole spec; over 300 lines, split the feature or move
+  material to the sidecar.
+
+The test for any line: does it constrain the implementation, constrain its
+verification, or record a measured fact? If not, delete it or move it to the sidecar.
+
+## Reference durability
+
+The spec must stay implementable against a `main` nobody has seen yet, so which
+references are allowed depends on how fast they rot. Most to least durable:
+
+1. Protocol identifiers — `m.reaction`, `m.call.member`, `m.relates_to`, a reaction
+   key. MSC-bound; effectively permanent.
+2. Observable behaviour. Permanent.
+3. Concept names — membership, participation, session.
+4. Test names. Survive file moves and renames, because the test moves with the code.
+5. Exported symbols. Survive refactors sometimes.
+6. File paths. Rot fast.
+7. Line numbers. Never.
+
+Per section:
+
+- `## Problem`, `## Measurements`, `## Slicing plan`, `## Drift log` — any reference,
+  paths and internal symbols included. These describe the codebase **as of `base`**. A
+  reference going stale here is a finding for the drift check, not a defect, and
+  removing the concrete references would leave the drift check with nothing to verify.
+- `## Decisions`, `## Acceptance criteria` — levels 1 to 4 only. No file paths, no
+  internal symbols. This is the part that has to hold against a future `main`.
+- An acceptance criterion that is not user-observable is tagged `[internal]` and
+  anchored by **its test name**, not by the symbol under test. The test name moves with
+  a refactor; the symbol does not.
+
+`[internal]` ACs are legitimate and expected: an invariant that no current consumer can
+observe is exactly what protects the consumer that does not exist yet. Tagging them
+keeps visible which ACs defend a product requirement and which defend a code
+invariant.
+
+## Required frontmatter
+
+```yaml
+---
+status: draft            # see state machine below
+blocked_from: null       # state to return to when leaving `blocked`
+title: Raise hand improvements
+owner: <human handle>    # a human, always
+signoff:                 # join condition for leaving exploration.signoff
+  eng: pending
+  design: pending
+  product: pending
+experiment_ref: <branch name or commit sha of the spike, if any>
+base: <sha of main the spec was validated against>
+repos: [matrix-js-sdk, element-call]    # in dependency order
+specs: [MSC4143]         # protocol documents touched, if any
+supersedes: []
+superseded_by: null
+---
+```
+
+`base` is mandatory and is what makes drift detectable. `owner` is a human even when
+every section was drafted by an agent.
+
+## Brainstorming: the product spec
+
+The usual entry point is a human handing an agent a one-line feature idea. The output
+of that session is `<stem>.product.md`, not code and not a feature spec. Copy
+`_TEMPLATE.product.md` and fill it.
+
+Ownership: an agent may create and fill this file during `brainstorm`. From `draft`
+onwards **product owns it and agents do not edit it** — not to fix wording, not to
+resolve a marker, not to reconcile it with the code. Agents raise mismatches in the
+feature spec's `## Open questions`.
+
+If product's source of truth lives outside the repo (a tracker, a design doc), put its
+URL in the header `**Source**:` line and keep the requirement text and ids in the repo
+anyway. The ids are what the feature spec references; a link alone cannot be traced.
+
+Agent behaviour during the session:
+
+- **Ask, do not assume.** An unanswered question is recorded as
+  `[NEEDS CLARIFICATION: <the question>]`, inline where the answer would go. Filling a
+  gap with a plausible guess is the main failure mode of this state — the marker is a
+  deliverable, not a defect.
+- Ask in one round of at most five questions, ordered by how much the answer changes
+  the shape of the feature. Do not interview.
+- **No implementation in the product spec.** No file paths, symbols, libraries, event
+  types, API shapes or framework names. If a requirement cannot be stated without them,
+  it is not a product requirement.
+- Every user story must be independently deployable and demonstrable on its own. A
+  story that only makes sense once another story ships is not a story; merge it.
+- More than four priority levels means more than one feature. Split before `draft`.
+- Never invent an SC number. Ask for the target, or mark it
+  `[NEEDS CLARIFICATION]`.
+
+For protocol and infrastructure work, success criteria may be expressed as observable
+client behaviour or a wire-level invariant ("a client joining mid-session converges
+within one sync"), but still never as a code path or an internal API.
+
+`FR-###` and `SC-###` ids are immutable once assigned. Product may revise the document
+at any time, including after `in_production`, but a changed requirement gets a **new
+id** and the old one is marked superseded — never edited in place. Renumbering silently
+breaks every AC that references it, and there is no way to detect that afterwards.
+
+A new or changed FR after `implement` does not amend the current spec's scope. It is
+either a new feature spec or the next iteration; the mapping table simply shows an
+unmapped FR, which is the intended signal.
+
+## Traceability
+
+The product spec states intent; the feature spec states what must be true and how it is
+checked. They are kept in sync by ids, not by duplication.
+
+- Every `FR-###` maps to at least one acceptance criterion. Tag the AC with its
+  origin: `AC2 [FR-003] — <observable behaviour>`.
+- Every `SC-###` maps to an entry in `## Measurements` with a method. An SC with no
+  measurement blocks `exploration.signoff`.
+- Every user story maps to at least one slice. **Slice order follows story priority**
+  (P1 first) unless a technical dependency overrides it, and the override is recorded
+  in the slicing plan with its reason.
+- An AC with no `FR` origin is allowed and expected — implementation-level invariants
+  have no counterpart in the product spec. The converse is not: an unmapped FR is an
+  incomplete spec.
+- Agents do not resolve a mismatch between the two. The product spec wins on intent,
+  the feature spec wins on verification; a genuine contradiction is `blocked`.
+
+## Status state machine
+
+Transitions are explicit; an agent may perform only the ones marked (agent).
+
+```
+brainstorm ─► draft ─► exploration ─► implement ─► qa ─► in_production
+                           │              │        │
+                           └──────────────┴────────┴──► blocked ──► (blocked_from)
+                                                           │
+                                                           └──► abandoned
+```
+
+Exploration has sub-states, written dotted in `status`:
+
+```
+exploration.scoping ─► exploration.iterating ─► exploration.signoff
+        ▲                       │                      │
+        └───────────────────────┴──────────────────────┘
+```
+
+- `brainstorm` → `draft`: human. Requires `<stem>.product.md` to exist with at least one
+  P1 story carrying acceptance scenarios, every FR and SC id assigned, and every
+  remaining `[NEEDS CLARIFICATION]` copied into the feature spec's `## Open questions`.
+- `draft` → `exploration.scoping`: human. Requires `## Problem` and `## Out of scope`.
+  Scoping before the branch exists is what keeps exploration from becoming the
+  long-lived branch this folder replaces.
+- `exploration.scoping` → `.iterating`: human. `experiment_ref` must name the branch.
+- `.iterating` → `.signoff`: human. Requires `## Decisions`, `## Acceptance criteria`,
+  `## Rejected alternatives` and `## Measurements` to be complete, no
+  `[NEEDS CLARIFICATION]` left in the product spec, and full traceability (below).
+- `.signoff` → `implement`: **only when all three sign-offs in `signoff:` are `ok`.**
+  This is a join, not a sequence — a single reviewer cannot advance it. On entering
+  `implement`, the exploration branch stops being a base: it is reference material,
+  and implementation branches off current `main` (see "Turning a spec into PRs").
+- `.signoff` → `.iterating`: human, on any sign-off returning changes. Reset the
+  rejecting role to `pending`; leave the others as they are.
+- `implement` → `qa`: (agent) when every acceptance criterion is covered, as recorded
+  in `## PRs`, and the feature flag is enabled in the QA environment.
+- `qa` → `in_production`: human. The flag is on by default in production.
+- `qa` → `implement`: (agent) when a QA finding needs code. See "QA feedback".
+- any active state → `blocked`: (agent) when drift or an unresolved question prevents
+  progress. Requires a drift-log entry and `blocked_from: <state>`. Do not guess and
+  continue. Leaving `blocked` returns to `blocked_from`, never to a fixed state.
+- any state → `abandoned`: human only.
+
+`in_production` is terminal. A production regression does not reopen the spec: it
+either is an ordinary bug fix with no spec, or it is a new spec. The acceptance
+criteria remain as the regression contract (see "QA feedback").
+
+## QA feedback
+
+The point of the `qa` state is not to record that testing happened. It is to make the
+spec a better regeneration source than it was before implementation. So:
+
+- Every reproduced QA finding becomes **either** a new acceptance criterion **or** a
+  new entry in `## Rejected alternatives`. Never a prose note, never only a bug
+  tracker link.
+- (agent) may **append** ACs during `qa`, with provenance:
+  `AC7 [qa: <issue ref>] — <observable behaviour>` plus its check. Appending is
+  allowed; rewriting or reordering existing ACs is not.
+- A finding that invalidates a decision does not become an AC. It sets `blocked` — a
+  decision is human-owned in every state.
+- A finding that is out of scope goes to `## Out of scope` with its issue ref, so the
+  next regeneration does not treat it as a gap.
+
+This also applies after `in_production`: a production bug that reveals a missing AC is
+appended with `[prod: <ref>]` provenance without any state change.
+
+## Required sections
+
+Order matters — agents read top-down and the first three sections are the contract.
+
+1. **`## Problem`** — up to five bullets. What breaks today, for whom, observably,
+   with the file or symbol where it breaks.
+2. **`## Decisions`** — the choices the exploration settled, each with a one-line
+   rationale. **Human-owned. An agent must never add, remove or reword a decision.**
+   If a decision is missing, set `blocked` and ask.
+3. **`## Acceptance criteria`** — the load-bearing section. Each item must be
+   mechanically checkable and name its check:
+   - `AC1 [FR-002] — <observable behaviour>` / `check: yarn vitest run src/reactions/ReactionsReader.test.tsx -t "backfill"`
+   - `AC2 [FR-002] — <observable behaviour>` / `check: manual, <exact steps>`
+   - `AC3 [internal] — <invariant>` / `check: yarn vitest run <file> -t "<test name>"`
+   An acceptance criterion without a check is a wish; reject the spec (`blocked`).
+4. **`## Rejected alternatives`** — what the experiment tried and why it failed,
+   including measurements. This exists so regeneration does not re-walk dead ends. If
+   this section is empty for a spec with an `experiment_ref`, the spec is incomplete.
+5. **`## Measurements`** — numbers from the experiment with the method used to obtain
+   them (command, hardware, load profile). Numbers without a method are not usable as
+   regression baselines and must be marked `unverified`. A baseline states its direction: a
+   count that unrelated work grows — tests passing, test files — is a floor (`≥ n`); a
+   cost — latency, CPU, bundle size — is a ceiling (`≤ n`). An exact count is stale as
+   soon as `main` moves and is not a drift finding.
+6. **`## Out of scope`** — explicit non-goals, so agents stop expanding the diff.
+7. **`## Slicing plan`** — ordered, independently mergeable PRs (see below).
+8. **`## Drift log`** — append-only, agent-written.
+9. **`## PRs`** — append-only list of `#<n> — <state> — <ACs covered>`.
+
+Optional: `## Open questions` (blocks `exploration.signoff`), `## Migration / compat` (mandatory
+whenever wire format, event schema, or a published API changes).
+
+## Turning a spec into PRs
+
+Run these steps in order. Do not skip step 2.
+
+1. **Fetch and pin.** `git fetch origin` and record `origin/main`'s sha as `head`.
+   Never start from the exploration branch, and never rebase it — the branch is
+   reference material, not a base.
+2. **Drift check** against `base..head`:
+   - Do all files, symbols and modules named in the spec still exist?
+   - Have the invariants in `## Decisions` been contradicted by changes in main?
+   - Do the commands in `## Acceptance criteria` still run?
+   Write the result as a drift-log entry. On a contradicted decision: set `blocked`,
+   do not implement.
+3. **Re-derive the slicing plan** if drift changed it. Each slice must:
+   - build and pass CI on its own,
+   - be reviewable in one sitting (target < 400 changed lines, hard stop at 800 —
+     split further rather than exceeding it),
+   - map to at least one acceptance criterion, and
+   - land behind a flag or be inert if it is not the last slice of a user-visible
+     change.
+4. **Implement one slice at a time**, branch `spec/<spec-slug>/<n>-<short>` off the
+   pinned `head`. Tests for the slice's ACs go in the same PR as the code. A PR merges
+   only when every check of every AC it lists passes on that PR: automated checks in
+   CI, manual checks performed by a human reviewer with the result recorded in the PR
+   description. An AC is *covered* once such a PR has merged.
+5. **Open the PR** linking the spec path and listing the ACs it covers. Update
+   `## PRs` and `status`.
+6. **Do not touch merged or reviewed slices.** See the regeneration rule.
+
+## The regeneration rule
+
+Regeneration from spec is only allowed **before a human has reviewed the PR**.
+
+Once review has started, the PR is a shared artifact: rebase, fix forward, push
+incremental commits. Regenerating discards the reviewer's context and silently
+invalidates their approvals. If regeneration is unavoidable after review, close the
+old PR with an explanation and open a new one — never force-push a fresh generation
+over a reviewed branch.
+
+## Cross-repo and protocol work
+
+When `repos` has more than one entry, PRs are opened in `repos` order and each PR
+body states which upstream PR it depends on. Merging out of order is a spec
+violation, not an optimisation.
+
+When `specs` is non-empty:
+- the implementation PR references the section of the MSC it implements,
+- unmerged MSCs require the implementation to be feature-flagged and documented as
+  unstable (unstable prefixes, not stable identifiers), and
+- any deviation from the MSC text is recorded in `## Drift log`, not silently
+  resolved in favour of the code.
+
+## Drift-log format
+
+Append-only, newest last:
+
+```
+### 2026-09-14 — drift check (base 4f2a1c9 → head 9b17e02)
+- `ReactionsReader.getLastReactionEvent` now takes a `CallMembership` instead of an
+  event id → AC2 and AC3 check commands still valid, slice 3 needs rework
+- BLOCKING: decision D2 assumes a membership event change may keep a hand raised; main
+  now clears all reaction relations on membership replacement. Needs owner decision.
+```
+
+Drift entries are never rewritten or deleted, including entries that were later
+resolved. The log is the record of why the implementation diverged from the
+exploration.
+
+## Hard rules
+
+- Never fill a `[NEEDS CLARIFICATION]` marker with a guess, in any state.
+- Never put file paths, symbols or library names in the product spec.
+- Never reference a file path or an internal symbol in `## Decisions` or
+  `## Acceptance criteria`. Behaviour, protocol identifiers, concepts and test names
+  only.
+- Never edit `<stem>.product.md` after `draft`, and never renumber an FR or SC id.
+- Never add a line that does not constrain the implementation, constrain its
+  verification, or record a measured fact. It goes in the sidecar or nowhere.
+- Never modify `## Decisions`, `## Problem`, or `## Acceptance criteria`. These are
+  the human contract. Propose changes in `## Open questions` and set `blocked`.
+- Never invent measurements or acceptance checks. Absent is better than plausible.
+- Never widen scope past `## Out of scope`, even when the fix looks trivial.
+- Never open a PR while `status` is `draft`, any `exploration.*`, or `blocked`.
+- Never delete a spec file. Terminal states are `in_production` or `abandoned`.
+- If the spec and current `main` disagree about how the system works, **main wins as
+  description, the spec wins as intent** — record the difference and stop.
+
+## Spec template
+
+```markdown
+---
+status: draft
+blocked_from: null
+title:
+owner:
+signoff:
+  eng: pending
+  design: pending
+  product: pending
+experiment_ref:
+base:
+repos: []
+specs: []
+supersedes: []
+superseded_by: null
+---
+
+## Problem
+
+## Decisions
+- D1 — <decision> — <why>
+
+## Acceptance criteria
+- AC1 [FR-###] — <observable behaviour>
+  - check: <command or exact manual steps>
+- AC2 [internal] — <invariant>
+  - check: <command, anchored by test name>
+
+## Rejected alternatives
+- <approach> — <why it failed> — <evidence>
+
+## Measurements
+- <metric>: <value> (method: <command / setup>)
+
+## Out of scope
+
+## Slicing plan
+1. <slice> — covers AC1 — depends on: none
+
+## Drift log
+
+## PRs
+```

FEATURES_SPEC/_TEMPLATE.product.md

@@ -0,0 +1,117 @@
+# Feature Specification: [FEATURE NAME]
+
+**Feature Branch**: `[###-feature-name]`
+**Created**: [DATE]
+**Feature Spec**: `[YYYY-MM_Title.md]`  <!-- status lives in the feature spec's frontmatter, not here -->
+**Owner**: [product handle]
+**Source**: [URL of the tracker/doc this mirrors, or "this file"]
+**Input**: User description: "$ARGUMENTS"
+
+## User Scenarios & Testing *(mandatory)*
+
+<!--
+  IMPORTANT: User stories should be PRIORITIZED as user journeys ordered by importance.
+  Each user story/journey must be INDEPENDENTLY TESTABLE - meaning if you implement just ONE of them,
+  you should still have a viable MVP (Minimum Viable Product) that delivers value.
+
+  Assign priorities (P1, P2, P3, etc.) to each story, where P1 is the most critical.
+  Think of each story as a standalone slice of functionality that can be:
+  - Developed independently
+  - Tested independently
+  - Deployed independently
+  - Demonstrated to users independently
+-->
+
+### User Story 1 - [Brief Title] (Priority: P1)
+
+[Describe this user journey in plain language]
+
+**Why this priority**: [Explain the value and why it has this priority level]
+
+**Independent Test**: [Describe how this can be tested independently - e.g., "Can be fully tested by [specific action] and delivers [specific value]"]
+
+**Acceptance Scenarios**:
+
+1. **Given** [initial state], **When** [action], **Then** [expected outcome]
+2. **Given** [initial state], **When** [action], **Then** [expected outcome]
+
+---
+
+### User Story 2 - [Brief Title] (Priority: P2)
+
+[Describe this user journey in plain language]
+
+**Why this priority**: [Explain the value and why it has this priority level]
+
+**Independent Test**: [Describe how this can be tested independently]
+
+**Acceptance Scenarios**:
+
+1. **Given** [initial state], **When** [action], **Then** [expected outcome]
+
+---
+
+### User Story 3 - [Brief Title] (Priority: P3)
+
+[Describe this user journey in plain language]
+
+**Why this priority**: [Explain the value and why it has this priority level]
+
+**Independent Test**: [Describe how this can be tested independently]
+
+**Acceptance Scenarios**:
+
+1. **Given** [initial state], **When** [action], **Then** [expected outcome]
+
+---
+
+[Add more user stories as needed, each with an assigned priority]
+
+### Edge Cases
+
+<!--
+  ACTION REQUIRED: The content in this section represents placeholders.
+  Fill them out with the right edge cases.
+-->
+
+- What happens when [boundary condition]?
+- How does system handle [error scenario]?
+
+## Requirements *(mandatory)*
+
+<!--
+  ACTION REQUIRED: The content in this section represents placeholders.
+  Fill them out with the right functional requirements.
+-->
+
+### Functional Requirements
+
+- **FR-001**: System MUST [specific capability, e.g., "allow users to create accounts"]
+- **FR-002**: System MUST [specific capability, e.g., "validate email addresses"]
+- **FR-003**: Users MUST be able to [key interaction, e.g., "reset their password"]
+- **FR-004**: System MUST [data requirement, e.g., "persist user preferences"]
+- **FR-005**: System MUST [behavior, e.g., "log all security events"]
+
+*Example of marking unclear requirements:*
+
+- **FR-006**: System MUST authenticate users via [NEEDS CLARIFICATION: auth method not specified - email/password, SSO, OAuth?]
+- **FR-007**: System MUST retain user data for [NEEDS CLARIFICATION: retention period not specified]
+
+### Key Entities *(include if feature involves data)*
+
+- **[Entity 1]**: [What it represents, key attributes without implementation]
+- **[Entity 2]**: [What it represents, relationships to other entities]
+
+## Success Criteria *(mandatory)*
+
+<!--
+  ACTION REQUIRED: Define measurable success criteria.
+  These must be technology-agnostic and measurable.
+-->
+
+### Measurable Outcomes
+
+- **SC-001**: [Measurable metric, e.g., "Users can complete account creation in under 2 minutes"]
+- **SC-002**: [Measurable metric, e.g., "System handles 1000 concurrent users without degradation"]
+- **SC-003**: [User satisfaction metric, e.g., "90% of users successfully complete primary task on first attempt"]
+- **SC-004**: [Business metric, e.g., "Reduce support tickets related to [X] by 50%"]

README.md

@@ -34,16 +34,16 @@ You can find the latest development version continuously deployed to
 ## ✨ Key Features
 
 ✅ **Decentralized & Federated** – No central authority; works across Matrix
-homeservers.
-✅ **End-to-End Encrypted** – Secure and private calls.
+homeservers.  
+✅ **End-to-End Encrypted** – Secure and private calls.  
 ✅ **Standalone, Widget & Component Mode** – Use as an independent app, embed
 in Matrix clients as a widget, or (experimentally) mount it as a React component
-inside your own application.
-✅ **WebRTC-based** – No additional software required.
+inside your own application.  
+✅ **WebRTC-based** – No additional software required.  
 ✅ **Scalable with LiveKit** – Supports large meetings via SFU
-([MSC4195: MatrixRTC using LiveKit backend](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md)).
+([MSC4195: MatrixRTC using LiveKit backend](https://github.com/hughns/matrix-spec-proposals/blob/hughns/matrixrtc-livekit/proposals/4195-matrixrtc-livekit.md)).  
 ✅ **Raise Hand** – Participants can signal when they want to speak, helping to
-organize the flow of the meeting.
+organize the flow of the meeting.  
 ✅ **Emoji Reactions** – Users can react with emojis 👍️ 🎉 👏 🤘, adding
 engagement and interactivity to the conversation.
 
@@ -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,
-since it inherits the `--max-old-space-size` setting of
+Corepack) on the host's machine, runs a full `pnpm install` of this repository
+and is memory-hungry, since it inherits the `--max-old-space-size` setting of
 the app build; the host's pnpm also has to allow it to run at all
 (`allowBuilds` in its `pnpm-workspace.yaml`). Note that `component/` is a pnpm
 project of its own for this reason, so pnpm commands run from inside that
@@ -306,28 +306,8 @@ directory target it rather than the repository; run them from the repository
 root. The host imports the component from
 `@element-hq/element-call-component` and the stylesheet from
 `@element-hq/element-call-component/style.css`, and has to provide `react`,
-`react-dom`, `matrix-js-sdk`, `@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
-then is also exported
-from `@element-hq/element-call-component/api` (a small entry point that does not
-load the component).
-
-- props and the types they are made of
-- the handle
-- the host bridge
-- `UserIntent`
-- `HeaderStyle`
-- `BackgroundStyle` enums
-- `configurationForIntent`, the defaults each intent implies
-  Import from it wherever a value such as
-  `BackgroundStyle.Solid` is needed on a path that must stay light; the main
-  entry point re-exports all of it too.
+`react-dom`, `matrix-js-sdk` and `livekit-client` itself, since the bundle leaves
+them external.
 
 ### Backend
 

backend/app-service-othersite.yaml

@@ -1,17 +0,0 @@
-id: "lk-jwt-service-othersite"
-as_token: "ec_dev_as_token_othersite_0123456789ab"
-hs_token: "ec_dev_hs_token_othersite_0123456789ab"
-sender_localpart: "_lk_jwt_service"
-namespaces:
-  users:
-    - exclusive: false
-      regex: "@.*:homeserver-1" # Cover all local users
-# Required for Synapse to call POST /_matrix/app/v1/ping on this service.
-url: "http://auth-server-1:16080"
-# Enable membership look-ups via /is_joined.
-io.element.msc4502.scopes:
-  ["urn:matrix:client:io.element.msc4502:rooms:is_joined"]
-# Route /_matrix/client/(v*|unstable/*)/rtc/livekit/* C-S and S-S requests to this
-# service.
-io.element.msc4512.proxy_prefix: "rtc/livekit"
-io.element.msc4512.proxy_url: "http://auth-server-1:16080"

backend/app-service.yaml

@@ -1,17 +0,0 @@
-id: "lk-jwt-service"
-as_token: "ec_dev_as_token_main_0123456789ab"
-hs_token: "ec_dev_hs_token_main_0123456789ab"
-sender_localpart: "_lk_jwt_service"
-namespaces:
-  users:
-    - exclusive: false
-      regex: "@.*:homeserver" # Cover all local users
-# Required for Synapse to call POST /_matrix/app/v1/ping on this service.
-url: "http://auth-server:6080"
-# Enable membership look-ups via /is_joined.
-io.element.msc4502.scopes:
-  ["urn:matrix:client:io.element.msc4502:rooms:is_joined"]
-# Route /_matrix/client/(v*|unstable/*)/rtc/livekit/* C-S and S-S requests to this
-# service.
-io.element.msc4512.proxy_prefix: "rtc/livekit"
-io.element.msc4512.proxy_url: "http://auth-server:6080"

backend/dev_homeserver-othersite.yaml

@@ -42,13 +42,6 @@ experimental_features:
   msc4354_enabled: true
   # MatrixRTC
   msc4143_enabled: true
-  # Enable membership look-up via /is_joined.
-  msc4502_enabled: true
-  # Enable C-S & S-S request proxying for application services.
-  msc4512_enabled: true
-
-app_service_config_files:
-  - /data/cfg/app-service.yaml
 
 # The maximum allowed duration by which sent events can be delayed, as
 # per MSC4140. Must be a positive value if set.  Defaults to no

backend/dev_homeserver.yaml

@@ -42,13 +42,6 @@ experimental_features:
   msc4354_enabled: true
   # MatrixRTC
   msc4143_enabled: true
-  # Enable membership look-up via /is_joined.
-  msc4502_enabled: true
-  # Enable C-S & S-S request proxying for application services.
-  msc4512_enabled: true
-
-app_service_config_files:
-  - /data/cfg/app-service.yaml
 
 # The maximum allowed duration by which sent events can be delayed, as
 # per MSC4140. Must be a positive value if set.  Defaults to no

backend/playwright_homeserver-othersite.yaml

@@ -42,13 +42,6 @@ experimental_features:
   msc4354_enabled: true
   # MatrixRTC
   msc4143_enabled: true
-  # Enable membership look-up via /is_joined.
-  msc4502_enabled: true
-  # Enable C-S & S-S request proxying for application services.
-  msc4512_enabled: true
-
-app_service_config_files:
-  - /data/cfg/app-service.yaml
 
 # The maximum allowed duration by which sent events can be delayed, as
 # per MSC4140. Must be a positive value if set.  Defaults to no

backend/playwright_homeserver.yaml

@@ -42,13 +42,6 @@ experimental_features:
   msc4354_enabled: true
   # MatrixRTC
   msc4143_enabled: true
-  # Enable membership look-up via /is_joined.
-  msc4502_enabled: true
-  # Enable C-S & S-S request proxying for application services.
-  msc4512_enabled: true
-
-app_service_config_files:
-  - /data/cfg/app-service.yaml
 
 # The maximum allowed duration by which sent events can be delayed, as
 # per MSC4140. Must be a positive value if set.  Defaults to no

component/ElementCall.module.css

@@ -34,18 +34,10 @@ component rather than a page makes. */
   -webkit-tap-highlight-color: transparent;
 }
 
-/* The call itself. It is a stacking context of its own, as the standalone
-page's `#root` is, so that the layers the call view uses for its header, footer
-and overlays stay below the modals and toasts, which are portalled into the
-root and carry no layer of their own.
-
-What Compound floats — tooltips, menus — is not in here at all: it goes into
-the host's body, as it would for any other component on the host's page, and is
-styled and layered by the host's copy of Compound. */
-.content {
-  display: flex;
-  flex-direction: column;
-  block-size: 100%;
+/* Compound's overlay container, which holds tooltips and popovers, has to fill
+the container for the elements inside it to be positioned against it. The
+standalone page does the same for the container under `#root`. */
+.root > [data-overlay-container] {
   position: relative;
-  isolation: isolate;
+  block-size: 100%;
 }

component/api.ts

@@ -1,124 +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.
-*/
-
-/**
- * EXPERIMENTAL
- *
- * What a host needs in order to talk about Element Call, without Element Call:
- * the component's props and the types they are made of, the handle and the
- * host bridge, the intents a call can be started with and the configuration
- * each implies.
- *
- * This is an entry point of its own, `@element-hq/element-call-component/api`,
- * so that a host can import it on a path that must stay light — a call model
- * that needs `BackgroundStyle.Solid` as a value, say — and load the component
- * itself, and everything it brings, only when a call is shown. The main entry
- * point re-exports all of it, so a host that does not care may import
- * everything from there.
- *
- * Nothing in here may reach anything that is not a type or a constant: the
- * point of this module is what it does not import.
- */
-
-import type { Ref } from "react";
-import type { MatrixClient } from "matrix-js-sdk";
-
-import type { UrlProperties } from "../src/UrlParams";
-import type { ElementCallHandle, ElementCallHostBridge } from "./host";
-import {
-  BackgroundStyle,
-  configurationForIntent,
-  HeaderStyle,
-  type UrlConfiguration,
-  UserIntent,
-} from "../src/UrlConfiguration";
-
-// How the host and Element Call talk to each other, and what they say
-export type { ElementCallHandle, ElementCallHostBridge } from "./host";
-export type { DeviceMuteRequest, DeviceMuteState } from "../src/HostBridge";
-export type { JoinCallData } from "../src/widget";
-// The deployment-wide configuration, as distinct from ElementCallConfiguration
-// below, which is per call
-export type { ConfigOptions } from "../src/config/ConfigOptions";
-// The values that appear in ElementCallConfiguration and in the intent, and
-// what each intent means by default
-export {
-  BackgroundStyle,
-  configurationForIntent,
-  HeaderStyle,
-  type UrlConfiguration,
-  UserIntent,
-};
-
-/**
- * How Element Call should behave. Everything is optional; anything left out
- * takes the default that {@link ElementCallProps.intent} implies.
- *
- * This is the behaviour a widget can be configured with through its URL, plus
- * the one fact about the call a host has a say in here, the background. The
- * rest of what a widget's URL carries — who the user is, how to reach the
- * homeserver, where to report analytics, the shared secret of a room that is
- * encrypted with one — a component host supplies by other routes, or not at
- * all; and what can change while the call is running, the theme and the
- * language, is a prop of its own.
- */
-export type ElementCallConfiguration = Partial<UrlConfiguration> &
-  Partial<Pick<UrlProperties, "background">>;
-
-export interface ElementCallProps {
-  /**
-   * The client to place the call with. Element Call does not authenticate
-   * anyone or manage a session of its own; this one is the host's.
-   */
-  client: MatrixClient;
-  /** The room to call in. The host's client must already know about it. */
-  roomId: string;
-  /**
-   * What the user asked for — whether they started the call or joined one that
-   * was already running, and whether it is a call in a group or a DM. Element
-   * Call decides what each of those means: whether to show the lobby first,
-   * whether to ring, and so on.
-   *
-   * Defaults to joining an existing group call, which is the most conservative
-   * reading, but a host that knows which button the user pressed should say so.
-   */
-  intent?: UserIntent;
-  /**
-   * How Element Call should behave, overriding whatever {@link intent} implies.
-   * A host that finds itself setting a lot of these probably wants a different
-   * intent instead.
-   *
-   * Compared by value, so it is fine to write this inline; only a change to
-   * what it says restarts anything.
-   */
-  config?: ElementCallConfiguration;
-  /**
-   * What Element Call tells the host while the call is running: that the user
-   * has joined or hung up, that it would like to be kept on screen, and so on.
-   * Without one, Element Call assumes nobody is listening.
-   */
-  hostBridge?: ElementCallHostBridge;
-  /**
-   * What the host tells Element Call: to hang up, to mute, to join. Available
-   * once the component has rendered.
-   */
-  ref?: Ref<ElementCallHandle>;
-  /**
-   * The theme to show Element Call in, `light` or `dark`. Left out, Element
-   * Call picks. Changes take effect at once, and cost nothing else.
-   */
-  theme?: string;
-  /**
-   * The language to show Element Call in, as a BCP 47 tag: one of the
-   * `supportedLanguages` the main entry point exports, or something that falls
-   * back to one (`de-AT` to `de`). Left out, the browser's language is used.
-   *
-   * Translations are one thing shared by every Element Call on the page, so
-   * the most recently set language wins for all of them.
-   */
-  language?: string;
-}

component/build/scopeStylesToRoot.ts

@@ -40,10 +40,10 @@ const IS_ROOT = `:where(${ROOT_SELECTOR})`;
  * Element Call as a component.
  *
  * As a page of its own, Element Call can style the document: normalize.css and
- * its own base styles speak of `html`, `body` and bare elements, and its custom
- * properties are declared on `:root`. As a component, all of that would land on
- * the host's document too. This rewrites every selector so that it matches only
- * the root or its descendants:
+ * Compound speak of `html`, `body` and bare elements, and the design tokens are
+ * declared on `:root`. As a component, all of that would land on the host's
+ * document too. This rewrites every selector so that it matches only the root
+ * or its descendants:
  *
  * - `html`, `body` and `:root` become the root element, which is what stands in
  *   for the document inside a host.
@@ -55,10 +55,9 @@ const IS_ROOT = `:where(${ROOT_SELECTOR})`;
  * CSS modules are scoped by their class names already, so only their selectors
  * that would match by element alone — `pre` rather than `.pre` — are touched.
  *
- * The root's custom properties are still inherited by everything inside it,
- * the way they were from `:root`. Compound's own stylesheet — the design
- * tokens, the component styles, the fonts — is not in this build at all: the
- * host supplies it, unscoped, along with its copy of Compound.
+ * The root's fonts and design tokens are still inherited by everything inside
+ * it, the way they were from `body` and `:root`, and `@font-face` declarations
+ * stay global, which they are by nature.
  */
 export function scopeStylesToRoot(): Plugin {
   return {

component/dev/main.tsx

@@ -9,16 +9,6 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { logger } from "matrix-js-sdk/lib/logger";
 
-// What a host provides along with its copy of Compound: its stylesheet, the
-// design tokens and the fonts they name. The component does not bundle them.
-import "@fontsource/inter/400.css";
-import "@fontsource/inter/500.css";
-import "@fontsource/inter/600.css";
-import "@fontsource/inter/700.css";
-import "@fontsource/inconsolata/400.css";
-import "@fontsource/inconsolata/700.css";
-import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
-import "@vector-im/compound-web/dist/style.css";
 import { type ConfigOptions, initializeElementCall } from "../index";
 import { Harness } from "./Harness";
 // After Element Call's, so that the host has the last word on its own page

component/index.tsx

@@ -17,37 +17,33 @@ Please see LICENSE in the repository root for full details.
  * host instead, or is confined to the container it is mounted in.
  */
 
-// The element defaults and custom properties every Element Call stylesheet
+// The design tokens, fonts and element defaults every Element Call stylesheet
 // builds on. Written for a page, they speak of `html`, `body` and bare
 // elements; the component build confines them, and every other stylesheet in
 // this bundle, to the root element below (see build/scopeStylesToRoot.ts), so
 // that the host's document is left as it was.
 //
-// Compound is not in here. The component uses the host's copy of it (a peer
-// dependency, left external by the build), and the host loads Compound's
-// stylesheet, design tokens and fonts along with it: what Compound floats into
-// the host's body — tooltips, menus — is then styled by the same stylesheet as
-// everything else there, and Element Call's root takes the tokens and fonts of
-// the theme class it carries, as any element on the host's page would.
-//
 // Where these land relative to the component stylesheets is the bundler's
 // choice — the standalone app puts them first, this build puts them in the
 // middle — so nothing in base.css may depend on winning or losing against a
 // component's own rules at equal specificity. It currently does not: what it
 // declares unlayered is custom properties on Element Call's root, which
-// components inherit rather than compete with.
+// components inherit rather than compete with, and everything from Compound
+// sits in a `@layer`, which loses to unlayered rules either way.
 import "../src/base.css";
 
 import {
   type FC,
   type JSX,
   type ReactNode,
+  type Ref,
   useEffect,
   useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
+import { type MatrixClient } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { I18nextProvider } from "react-i18next";
 import { TooltipProvider } from "@vector-im/compound-web";
@@ -66,8 +62,10 @@ import { RootElementProvider, useRootElement } from "../src/RootElementContext";
 import {
   configurationForIntent,
   componentProperties,
+  type UrlConfiguration,
   type UrlParams,
   UrlParamsProvider,
+  type UrlProperties,
   UserIntent,
   useUrlParams,
 } from "../src/UrlParams";
@@ -81,16 +79,102 @@ import { i18n } from "../src/utils/i18n";
 import { useTheme } from "../src/useTheme";
 import { useStableValue } from "../src/useStableValue";
 import styles from "./ElementCall.module.css";
-import { useComponentHostBridge } from "./host";
-import { type ElementCallProps } from "./api";
+import {
+  type ElementCallHandle,
+  type ElementCallHostBridge,
+  useComponentHostBridge,
+} from "./host";
 import { supportedLanguages, translationsBackend } from "./localization";
 
 // The languages Element Call can be shown in
 export { supportedLanguages } from "./localization";
-// Everything a host needs to talk about Element Call — the props, the handle,
-// the host bridge, the intents and what each means — also available without
-// the component itself from `@element-hq/element-call-component/api`
-export * from "./api";
+
+// How the host and Element Call talk to each other, and what they say
+export { type ElementCallHandle, type ElementCallHostBridge } from "./host";
+export {
+  type DeviceMuteRequest,
+  type DeviceMuteState,
+} from "../src/HostBridge";
+export { type JoinCallData } from "../src/widget";
+// The deployment-wide configuration, as distinct from ElementCallConfiguration
+// above, which is per call
+export { type ConfigOptions } from "../src/config/ConfigOptions";
+// The values that appear in ElementCallConfiguration and in the intent
+export {
+  BackgroundStyle,
+  HeaderStyle,
+  UserIntent,
+  type UrlConfiguration,
+} from "../src/UrlParams";
+
+/**
+ * How Element Call should behave. Everything is optional; anything left out
+ * takes the default that {@link ElementCallProps.intent} implies.
+ *
+ * This is the behaviour a widget can be configured with through its URL, plus
+ * the one fact about the call a host has a say in here, the background. The
+ * rest of what a widget's URL carries — who the user is, how to reach the
+ * homeserver, where to report analytics, the shared secret of a room that is
+ * encrypted with one — a component host supplies by other routes, or not at
+ * all; and what can change while the call is running, the theme and the
+ * language, is a prop of its own.
+ */
+export type ElementCallConfiguration = Partial<UrlConfiguration> &
+  Partial<Pick<UrlProperties, "background">>;
+
+export interface ElementCallProps {
+  /**
+   * The client to place the call with. Element Call does not authenticate
+   * anyone or manage a session of its own; this one is the host's.
+   */
+  client: MatrixClient;
+  /** The room to call in. The host's client must already know about it. */
+  roomId: string;
+  /**
+   * What the user asked for — whether they started the call or joined one that
+   * was already running, and whether it is a call in a group or a DM. Element
+   * Call decides what each of those means: whether to show the lobby first,
+   * whether to ring, and so on.
+   *
+   * Defaults to joining an existing group call, which is the most conservative
+   * reading, but a host that knows which button the user pressed should say so.
+   */
+  intent?: UserIntent;
+  /**
+   * How Element Call should behave, overriding whatever {@link intent} implies.
+   * A host that finds itself setting a lot of these probably wants a different
+   * intent instead.
+   *
+   * Compared by value, so it is fine to write this inline; only a change to
+   * what it says restarts anything.
+   */
+  config?: ElementCallConfiguration;
+  /**
+   * What Element Call tells the host while the call is running: that the user
+   * has joined or hung up, that it would like to be kept on screen, and so on.
+   * Without one, Element Call assumes nobody is listening.
+   */
+  hostBridge?: ElementCallHostBridge;
+  /**
+   * What the host tells Element Call: to hang up, to mute, to join. Available
+   * once the component has rendered.
+   */
+  ref?: Ref<ElementCallHandle>;
+  /**
+   * The theme to show Element Call in, `light` or `dark`. Left out, Element
+   * Call picks. Changes take effect at once, and cost nothing else.
+   */
+  theme?: string;
+  /**
+   * The language to show Element Call in, as a BCP 47 tag: one of
+   * {@link supportedLanguages}, or something that falls back to one (`de-AT`
+   * to `de`). Left out, the browser's language is used.
+   *
+   * Translations are one thing shared by every Element Call on the page, so
+   * the most recently set language wins for all of them.
+   */
+  language?: string;
+}
 
 /**
  * Prepares the things Element Call needs before it can be shown: translations,
@@ -237,38 +321,34 @@ export const ElementCall: FC<ElementCallProps> = ({
         <UrlParamsProvider value={params}>
           <div ref={setContainer} className={styles.root}>
             {ready && (
-              // Stands in for the standalone page's `#root`: see `.content`
-              // in ElementCall.module.css
-              <div className={styles.content}>
-                <RootElementProvider value={container}>
-                  {/* Whatever goes wrong in here is shown in here. Left to
+              <RootElementProvider value={container}>
+                {/* Whatever goes wrong in here is shown in here. Left to
                   propagate, an error would unmount the host's own tree. */}
-                  <ErrorBoundary
-                    fallback={(error) => <ErrorPage error={error} />}
-                    // A broken call should not hold the host on screen
-                    onError={() => void hostBridge.setAlwaysOnScreen(false)}
-                  >
-                    <Decoration>
-                      <TooltipProvider>
-                        <ClientProvider client={client}>
-                          <MediaDevicesContext value={mediaDevices}>
-                            <ProcessorProvider>
-                              <CallView
-                                client={client}
-                                rtcSession={rtcSession}
-                                isPasswordlessUser={false}
-                                confineToRoom={params.confineToRoom}
-                                preload={params.preload}
-                                skipLobby={params.skipLobby}
-                              />
-                            </ProcessorProvider>
-                          </MediaDevicesContext>
-                        </ClientProvider>
-                      </TooltipProvider>
-                    </Decoration>
-                  </ErrorBoundary>
-                </RootElementProvider>
-              </div>
+                <ErrorBoundary
+                  fallback={(error) => <ErrorPage error={error} />}
+                  // A broken call should not hold the host on screen
+                  onError={() => void hostBridge.setAlwaysOnScreen(false)}
+                >
+                  <Decoration>
+                    <TooltipProvider>
+                      <ClientProvider client={client}>
+                        <MediaDevicesContext value={mediaDevices}>
+                          <ProcessorProvider>
+                            <CallView
+                              client={client}
+                              rtcSession={rtcSession}
+                              isPasswordlessUser={false}
+                              confineToRoom={params.confineToRoom}
+                              preload={params.preload}
+                              skipLobby={params.skipLobby}
+                            />
+                          </ProcessorProvider>
+                        </MediaDevicesContext>
+                      </ClientProvider>
+                    </TooltipProvider>
+                  </Decoration>
+                </ErrorBoundary>
+              </RootElementProvider>
             )}
           </div>
         </UrlParamsProvider>

component/package.json

@@ -25,10 +25,6 @@
       "types": "./dist/types/component/index.d.ts",
       "default": "./dist/element-call.js"
     },
-    "./api": {
-      "types": "./dist/types/component/api.d.ts",
-      "default": "./dist/api.js"
-    },
     "./style.css": "./dist/element-call.css"
   },
   "sideEffects": [
@@ -38,8 +34,7 @@
     "prepare": "cd .. && pnpm install --frozen-lockfile && pnpm build:component"
   },
   "peerDependencies": {
-    "@vector-im/compound-design-tokens": "^11.0.0",
-    "@vector-im/compound-web": "^10.0.0",
+    "livekit-client": "^2.18.1",
     "matrix-js-sdk": "*",
     "react": "^19",
     "react-dom": "^19"

component/tsconfig.build.json

@@ -13,8 +13,8 @@
     "rootDir": "..",
     "outDir": "./dist/types"
   },
-  // The entry points, plus the ambient declarations (CSS modules, `?react` SVGs,
-  // `import.meta.env`, …) that the sources they reach rely on.
-  "include": ["./index.tsx", "./api.ts", "../src/@types/*.d.ts"],
+  // The entry point, plus the ambient declarations (CSS modules, `?react` SVGs,
+  // `import.meta.env`, …) that the sources it reaches rely on.
+  "include": ["./index.tsx", "../src/@types/*.d.ts"],
   "exclude": []
 }

config/config.devenv.json

@@ -7,6 +7,7 @@
   },
   "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
   "matrix_rtc_session": {
+    "wait_for_key_rotation_ms": 3000,
     "membership_event_expiry_ms": 180000000,
     "network_error_retry_ms": 100
   }

config/config.sample.json

@@ -11,6 +11,7 @@
   "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
   "matrix_rtc_mode": "compatibility",
   "matrix_rtc_session": {
+    "wait_for_key_rotation_ms": 3000,
     "membership_event_expiry_ms": 180000000,
     "network_error_retry_ms": 100
   }

config/config_netlify_preview.json

@@ -7,6 +7,7 @@
   },
   "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
   "matrix_rtc_session": {
+    "wait_for_key_rotation_ms": 3000,
     "membership_event_expiry_ms": 180000000,
     "network_error_retry_ms": 100
   },

config/config_netlify_preview_sdk.json

@@ -7,6 +7,7 @@
   },
   "ssla": "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
   "matrix_rtc_session": {
+    "wait_for_key_rotation_ms": 3000,
     "membership_event_expiry_ms": 180000000,
     "network_error_retry_ms": 100
   }

docker-compose-dev.yml

@@ -3,7 +3,7 @@ networks:
 
 services:
   auth-service:
-    image: ghcr.io/element-hq/lk-jwt-service:0.7.0
+    image: ghcr.io/element-hq/lk-jwt-service:0.4.4
     pull_policy: always
     hostname: auth-server
     environment:
@@ -15,14 +15,6 @@ services:
       # a self-signed certificate
       - LIVEKIT_INSECURE_SKIP_VERIFY_TLS=YES_I_KNOW_WHAT_I_AM_DOING
       - LIVEKIT_FULL_ACCESS_HOMESERVERS=*
-      # Registers this instance as an application service on the main homeserver
-      - LIVEKIT_AS_REGISTRATION_FILE=/etc/lk-jwt-service/app-service.yaml
-      - LIVEKIT_HS_SERVER_NAME=synapse.m.localhost
-      # Neither homeserver serves /.well-known/matrix/client, so the C-S API
-      # location has to be given explicitly.
-      - LIVEKIT_CS_API_URL_OVERRIDES=synapse.m.localhost=http://homeserver:8008,synapse.othersite.m.localhost=http://homeserver-1:18008
-    volumes:
-      - ./backend/app-service.yaml:/etc/lk-jwt-service/app-service.yaml:Z
     deploy:
       restart_policy:
         condition: on-failure
@@ -33,7 +25,7 @@ services:
       - ecbackend
 
   auth-service-1:
-    image: ghcr.io/element-hq/lk-jwt-service:0.7.0
+    image: ghcr.io/element-hq/lk-jwt-service:0.4.4
     pull_policy: always
     hostname: auth-server-1
     environment:
@@ -45,14 +37,6 @@ services:
       # a self-signed certificate
       - LIVEKIT_INSECURE_SKIP_VERIFY_TLS=YES_I_KNOW_WHAT_I_AM_DOING
       - LIVEKIT_FULL_ACCESS_HOMESERVERS=*
-      # Registers this instance as an application service on the other homeserver.
-      - LIVEKIT_AS_REGISTRATION_FILE=/etc/lk-jwt-service/app-service.yaml
-      - LIVEKIT_HS_SERVER_NAME=synapse.othersite.m.localhost
-      # Neither homeserver serves /.well-known/matrix/client, so the C-S API
-      # location has to be given explicitly.
-      - LIVEKIT_CS_API_URL_OVERRIDES=synapse.m.localhost=http://homeserver:8008,synapse.othersite.m.localhost=http://homeserver-1:18008
-    volumes:
-      - ./backend/app-service-othersite.yaml:/etc/lk-jwt-service/app-service.yaml:Z
     deploy:
       restart_policy:
         condition: on-failure
@@ -110,10 +94,7 @@ services:
 
   synapse:
     hostname: homeserver
-    # develop (not latest) is required for application service C-S/S-S proxying
-    # (MSC4512) and membership look-ups (MSC4502), which are not in a stable
-    # release yet.
-    image: ghcr.io/element-hq/synapse:develop
+    image: ghcr.io/element-hq/synapse:latest
     pull_policy: always
     environment:
       - SYNAPSE_CONFIG_PATH=/data/cfg/homeserver.yaml
@@ -126,16 +107,12 @@ services:
     volumes:
       - ./backend/synapse_tmp:/data:Z
       - ./backend/dev_homeserver.yaml:/data/cfg/homeserver.yaml:Z
-      - ./backend/app-service.yaml:/data/cfg/app-service.yaml:Z
     networks:
       - ecbackend
 
   synapse-1:
     hostname: homeserver-1
-    # develop (not latest) is required for application service C-S/S-S proxying
-    # (MSC4512) and membership look-ups (MSC4502), which are not in a stable
-    # release yet.
-    image: ghcr.io/element-hq/synapse:develop
+    image: ghcr.io/element-hq/synapse:latest
     pull_policy: always
     environment:
       - SYNAPSE_CONFIG_PATH=/data/cfg/homeserver.yaml
@@ -148,7 +125,6 @@ services:
     volumes:
       - ./backend/synapse_tmp_othersite:/data:Z
       - ./backend/dev_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
-      - ./backend/app-service-othersite.yaml:/data/cfg/app-service.yaml:Z
     networks:
       - ecbackend
 

docker-compose-playwright.yml

@@ -3,23 +3,17 @@
 services:
   synapse:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    # develop (not latest) is required for application service C-S/S-S proxying
-    # (MSC4512) and membership look-ups (MSC4502), which are not in a stable
-    # release yet.
-    image: ghcr.io/element-hq/synapse:develop@sha256:337921fd22be310d453344b2265f6c9942315446595df3cf81866f71ca2055a7
+    image: ghcr.io/element-hq/synapse:latest@sha256:da325af40104051923899e5f5a2f1d537e6e3ccf2f0f38285689ae9bbfdb190a
     volumes:
       - ./backend/playwright_homeserver.yaml:/data/cfg/homeserver.yaml:Z
   synapse-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    # develop (not latest) is required for application service C-S/S-S proxying
-    # (MSC4512) and membership look-ups (MSC4502), which are not in a stable
-    # release yet.
-    image: ghcr.io/element-hq/synapse:develop@sha256:337921fd22be310d453344b2265f6c9942315446595df3cf81866f71ca2055a7
+    image: ghcr.io/element-hq/synapse:latest@sha256:da325af40104051923899e5f5a2f1d537e6e3ccf2f0f38285689ae9bbfdb190a
     volumes:
       - ./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:53a4fe6d60afc0647b95d9e1365d696679241821d63da94dfbfc33171a42ed6d
+    image: ghcr.io/element-hq/element-web:develop@sha256:6ed62b2963ae098a1f79521eb516834dcf29452168e281cc359d9cfb4380adf6
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:53a4fe6d60afc0647b95d9e1365d696679241821d63da94dfbfc33171a42ed6d
+    image: ghcr.io/element-hq/element-web:develop@sha256:6ed62b2963ae098a1f79521eb516834dcf29452168e281cc359d9cfb4380adf6

docs/README.md

@@ -9,12 +9,3 @@ This folder contains documentation for setup, usage, and development of Element
 - [MatrixRTC modes](./matrix_rtc_modes.md)
 - [Self-Hosting](./self_hosting.md)
 - [Developing with linked packages](./linking.md)
-
-### Writing code for Element Call (agent-readable conventions)
-
-Entry point: [AGENTS.md](../AGENTS.md).
-
-- [Agent workflow](./agents/workflow.md)
-- [Architecture](./agents/architecture.md)
-- [Code style](./agents/code-style.md)
-- [Testing](./agents/testing.md)

docs/agents/architecture.md

@@ -1,87 +0,0 @@
-# Architecture
-
-## Logic lives in view models; components render
-
-- Call logic lives in `src/state/`. A component that derives call state is
-  misplaced logic.
-- Composing behaviors: a factory taking `(scope, ...deps$)`, returning named
-  behaviors plus callbacks. Copy `src/state/LayoutSwitchViewModel.ts`. Prefer this
-  for anything new.
-- Owning a resource: a class taking the scope in its constructor — `MediaDevices`,
-  `MuteStates`, `TileStore`, `Publisher`, `Connection`. Both styles are current;
-  don't convert one to the other in passing.
-- `foo$` is an observable. `Behavior<T>`, an observable with a current value, is
-  the default for anything a view reads.
-
-## The view model / view contract
-
-- Components take `vm: ViewModel<Snapshot>` and read state through `useBehavior`.
-  See `CallFooter`, `InCallView`, `LobbyView`, `SettingsModal`.
-- A snapshot is `Actions & State`; every field becomes a `foo$` behavior, and none
-  is optional.
-- An unavailable action is `undefined`, not a separate `canDoThing` flag — the
-  presence of the callback drives the rendering.
-- Subscribe in an effect only to drive a side effect off an event stream, as
-  `ReactionAudioRenderer` does; never to read state a behavior already holds.
-
-## Scopes own lifetimes
-
-- `ObservableScope` bounds every subscription a view model creates.
-- Reference only the scope defined in the same function; one captured from an
-  enclosing scope outlives its owner, and `no-observablescope-leak` rejects it.
-
-## Nothing reads the page
-
-Element Call can be mounted several times inside a host's React tree, so it owns
-neither window, URL, document nor router. Each seam defaults to the old standalone
-and widget behaviour.
-
-| Never                                         | Use                                                           |
-| --------------------------------------------- | ------------------------------------------------------------- |
-| the `widget` global                           | `useHostBridge()` — `src/HostBridge.ts`                       |
-| `getUrlParams()`, `window.location`           | `useUrlParams()`                                              |
-| `useNavigate("/")`, `<Link to="/">`           | `useLeaveToHome()`, `LeaveToHomeLink`                         |
-| `document.body`                               | `useRootElement()`                                            |
-| `window.innerWidth/Height`, `useMediaQuery`   | `useRootSizeMatches()` in views, `windowSize$` in view models |
-| global `i18next`                              | the instance in `src/utils/i18n.ts`                           |
-| config or analytics reading their environment | `Config.initWith()`, `PosthogAnalytics.configure()`           |
-
-- View models take values as options, never `getUrlParams()`
-  (`callViewModelOptionsFromParams`, `CallViewModelOptions.hostBridge`).
-- The host bridge is the only channel to the host: `createWidgetHostBridge(widget)`,
-  `nullHostBridge` standalone, `useComponentHostBridge`. State a capability
-  (`supportsReactions`, `supportsProfileChanges`); never infer it from being a
-  widget.
-- Shortcuts and portals attach to the root element, so two instances don't fight.
-- Known debt, not precedent: `Grid` measures `window.innerHeight`; `ErrorView`'s
-  reload and `getAbsoluteRoomUrl` use `window.location`; recaptcha appends to
-  `document.body` on the standalone login path.
-
-## Context differences are options, not checks
-
-- Named options with per-intent defaults (`configurationForIntent`), never a
-  runtime check for who is hosting.
-- `controlledAudioDevices`, not the platform, is what makes `MediaDevices` pick
-  `AndroidControlledAudioOutput` / `IOSControlledAudioOutput` over the web
-  `AudioOutput`. Intent presets set it on non-desktop; standalone leaves it off.
-- URL params are a published contract: change one, update `docs/url_params.md`.
-
-## Build targets
-
-Code that builds in only one is a bug.
-
-- `build:full` — standalone app, also widget mode.
-- `build:embedded` — `@element-hq/element-call-embedded`.
-- `build:sdk` — SDK library, entry `sdk/main.ts`.
-- `build:component` — `@element-hq/element-call-component`, sources in `component/`
-  (its own pnpm project; run pnpm from the repo root). Host API is in the README;
-  `pnpm lint:externals` rejects an import of a `react` / `react-dom` /
-  `matrix-js-sdk` / `@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`.

docs/agents/code-style.md

@@ -1,95 +0,0 @@
-# Code style
-
-_Clean Code_ (Robert C. Martin): small functions, intention-revealing names, low
-noise.
-
-## Reuse before you build
-
-Look before you write, in this order:
-
-1. **Compound Web** — `@vector-im/compound-web` for buttons, tooltips, alerts,
-   dialogs, menus, form controls, avatars; icons in
-   `@vector-im/compound-design-tokens/assets/web/icons`.
-2. **This repo** — `src/button/`, `src/components/`, `src/input/`, `src/form/`,
-   `src/tabs/`, and `Modal`, `Avatar`, `Toast`, `Slider`, `ErrorView`,
-   `FullScreenView` at the root of `src/`.
-3. **The nearest existing feature** — grep for the same shape first. A hook is
-   often what you want to extract, not a component.
-
-If nothing fits, name the new shared component in the PR body and say what you
-rejected and why — never add one silently. Extend or parameterise before forking,
-and extract shared logic into a hook both callers use before copying it; if you
-copy, the PR says so.
-
-## Ordering
-
-- **Newspaper order.** Headline first, detail down. A file opens with what it
-  exists to provide.
-- **Stepdown rule.** Caller above callee. A helper used by one function sits
-  beneath it, which needs a `function` declaration, not a `const` arrow. Existing
-  arrow components above their callers are not a pattern to extend — nor to churn.
-- **Suites.** Test cases first, helpers below. Older suites invert this; follow the
-  rule in new ones, don't reorder old ones.
-- **Names.** What a thing means, not what it is made of: `naturalLayout$`, not
-  `computedLayout$`.
-
-## Comments
-
-No comment is the default. One earns its place by giving a reason the code
-cannot: a platform quirk, an outside constraint, a trap that looks like a
-simplification.
-
-- Say the reason, then stop. Test each sentence: does the reason still stand
-  without it? If so, cut it. Most reasons fit on a line, so a long comment is
-  worth a second look — it is usually carrying something that isn't one.
-- Write about the line the comment sits on, in terms of what the code does
-  there — leave layout to the stylesheet and measurements to the design.
-- Name the condition ("where the platform can't route audio"), not the browser
-  or the spec entry.
-- Put history — what was tried, removed or rejected, the dev journal — in the
-  commit or the PR description.
-- In tests, comment only structure that looks wrong but isn't: batching, timers,
-  why this scroll position.
-
-Before keeping one: would it still be true after a CSS change or a refactor of
-its caller? If not, cut it.
-
-## TypeScript, React and RxJS idiom win on a clash
-
-- Hooks stay unconditional at the top of a component.
-- `useCallback` / `useMemo` dependency arrays sometimes force inlining.
-- An RxJS pipeline stays one expression. Name the behavior, not each operator.
-- A long factory is fine when it reads as a list of named behaviors.
-  `CallViewModel.ts` is long because the domain is.
-- Marble test tables are dense on purpose.
-
-## Enforced by lint
-
-- Copyright header on every file: `Copyright <current year> Element Creations Ltd.`
-  plus the AGPL / commercial SPDX line.
-- `logger` from `matrix-js-sdk/lib/logger`, never `console`, and no top-level
-  `logger.getChild()`. The `console` ban is only enforced under `src/*/**`.
-- No floating or misused promises; async functions typed `Promise<T>`.
-- Inline type imports (`import { type Foo }`), so matrix-js-sdk stays lazily
-  loadable.
-- Deep-import `matrix-js-sdk/lib/<module>` as the codebase does. Banned is the bare
-  `matrix-js-sdk/lib`, `lib/index` and anything under `src/`.
-
-## CSS
-
-- Compound components and `--cpd-*` tokens in CSS modules. A hardcoded colour or px
-  spacing is a design question, not a licence to inline a hex.
-- Size against the root, not the window: `@container element-call (…)` and
-  `cqw` / `cqh`, never `@media (width)` or `vw` / `vh`. Media queries stay correct
-  only in standalone-only views — home, login.
-- Style `[data-element-call-root]`, never `body` or `:root`; the component build
-  makes those stand for the root (`component/build/scopeStylesToRoot.ts`).
-
-## Strings and a11y
-
-- Strings through `t()`: add the key, run `pnpm i18n`, fill `locales/en/app.json`.
-  Other locales come from Localazy; never hand-edit them.
-- `t` from `useTranslation()`, or `src/utils/i18n.ts` outside React. Never the
-  `i18next` global — several instances share a page.
-- Accessible names on controls, `aria-pressed` on toggles, keyboard reachability.
-  `jsx-a11y` rules are errors; `vitest-axe` is available.

docs/agents/testing.md

@@ -1,53 +0,0 @@
-# Testing
-
-Three layers; a user-facing feature needs all three. Unit proves the logic,
-Storybook proves the rendering, e2e proves the feature. Codecov gates 80% on the
-lines a PR touches.
-
-## Unit
-
-- View model tests use `withTestScheduler` + `testScope()` from `src/utils/test.ts`
-  and read as ASCII timelines. Copy `LayoutSwitchViewModel.test.ts`.
-- Component tests use Testing Library, queried by role and accessible name.
-- Reuse the factories in `src/utils/test.ts` — `mockRemoteParticipant`,
-  `mockMatrixRoom`, `mockLivekitRoom`, `MockRTCSession`. Hand-rolled mocks drift.
-- Snapshots live in `__snapshots__/`; update with `pnpm test <Name> -u`.
-- How often something redraws is testable: drive the frames and count commits, not
-  render calls. An effect with no dependency array runs once per commit.
-- `component/**/*.test.ts` runs in the same jsdom project as `src`.
-
-## Storybook
-
-A deliverable, not documentation: `pnpm test:storybook` runs every story as a real
-browser test in the same CI job as the unit suite. **A UI change without a story is
-incomplete.** Only three stories exist so far, so copy `CallFooter.stories.tsx`.
-
-- Drive the component from a snapshot via `useStaticViewModel`, never internals.
-- One named story per state that matters — loading, error, empty, denied, mobile.
-- Assert in a `play` function with `userEvent` / `expect` from `storybook/test`.
-- Mobile is `globals: { viewport: { value: "mobile2" } }`, not a second component.
-- Expose interesting props through `argTypes`.
-
-`.storybook/preview.tsx` supplies `TooltipProvider`, `src/index.css` and English
-translations. The browser is Playwright's, so a fresh clone needs
-`pnpm playwright install` once.
-
-## End-to-end
-
-- `playwright/*.spec.ts` — standalone, on Chromium and Firefox.
-- `playwright/widget/` — widget mode, where cross-context bugs surface.
-- `playwright/component/` — the component in a host page, via the harness on port
-  3001 that Playwright starts as a second web server. Catches container-relative
-  layout, styles escaping the root, two instances on a page, host-bridge reports.
-- `playwright/mobile/` — Pixel 7, `mobile` project only.
-
-Test what a user observes: the peer sees the change, it survives a reconnect, it is
-right after a reload. Reuse `playwright/spa-helpers.ts`,
-`playwright/widget/test-helpers.ts`, `playwright/fixtures/`.
-
-```sh
-pnpm test                   # unit + storybook
-pnpm backend                # Synapse + LiveKit, required for e2e
-pnpm test:playwright        # or :open
-pnpm dev:component          # component harness, port 3001
-```

docs/agents/workflow.md

@@ -1,50 +0,0 @@
-# Agent workflow
-
-## Scratch files live in `agent-workspace/`
-
-Git-ignored. One kebab-case subfolder per task, matching the branch topic:
-`agent-workspace/<slug>/`.
-
-| File                        | Purpose                                                                          |
-| --------------------------- | -------------------------------------------------------------------------------- |
-| `plan.md`                   | The concrete approach — files, symbols, edit order — once direction is confirmed |
-| `commit-msg.txt`            | `git commit -F agent-workspace/<slug>/commit-msg.txt`                            |
-| `pr-body.md`                | `gh pr create --body-file agent-workspace/<slug>/pr-body.md`                     |
-| `implementation-summary.md` | What was built, decisions, trade-offs                                            |
-| `NN-prompt.md`              | Raw prompt text, numbered, when worth keeping                                    |
-
-- Nothing here is durable. The folder is ignored, so anything worth keeping is
-  promoted into the PR body, a doc, or a feature spec before the task ends.
-- Never write scratch files to the repo root. Stray `load_test_summary.md` and
-  `config.json_` files are what this folder prevents.
-- Start `pr-body.md` from `.github/PULL_REQUEST_TEMPLATE.md` and fill every
-  section.
-- Commit subjects are plain imperative English. No conventional-commits prefixes.
-- A `plan.md` and a feature spec sit at different altitudes; neither replaces the
-  other. A spec in `FEATURES_SPEC/` is durable and deliberately abstract —
-  behaviour, decisions, acceptance criteria — so the feature can be rebuilt against
-  a `main` nobody has seen yet. A plan is one slice of it landing on today's
-  `main`: the paths, symbols and edit order the spec's decisions and criteria must
-  not name. `FEATURES_SPEC/AGENTS.md` wins wherever the two genuinely overlap.
-
-## Hand off before the quality pass
-
-- Implement the change, run the narrowest check that rules out an obviously broken
-  handoff, then stop and ask whether the direction is right.
-- Full `pnpm lint`, the whole suite, coverage and benchmarks come after the
-  direction is confirmed.
-- Wider refactors, extra tests and documentation polish are follow-up work, not
-  part of the first handoff.
-- If a check is needed before feedback, keep it to the touched code and say why.
-
-## Commit and PR readiness
-
-- Commit once the user confirms direction, or asks for one. Not before. Where the
-  setup has no git identity, a sandbox included, write the message to
-  `commit-msg.txt` and hand it over instead.
-- Ready means every gate in [AGENTS.md](../../AGENTS.md#gates) is green and the
-  change is covered at the layers [testing.md](./testing.md) asks for. Read the diff
-  against [code-style.md](./code-style.md) first.
-- Re-run the whole checklist after any fix. Only on green, either way.
-- Once a human has started reviewing, fix forward — never force-push a
-  regeneration over a review in progress.

docs/linking.md

@@ -60,21 +60,6 @@ git config --local core.hooksPath .githooks
 
 This will add the hook path for this repository only to .gihooks. which is a tracked (by git) folder containing the pre-commit hook.
 
-## Testing against a matrix-js-sdk branch in CI
-
-Linking covers local development. In CI, `scripts/layered.sh` plays the same
-role for `matrix-js-sdk`: after the usual frozen install, `scripts/fetchdep.sh`
-looks for a matrix-js-sdk branch with the same name as the pull request's head
-branch (in the fork first, when the pull request comes from one). If there is
-one, it is cloned, packed and installed over the locked version. If there is
-none, the install stays as `pnpm-lock.yaml` pins it.
-
-This means a change that needs a not yet merged matrix-js-sdk change can be tested
-by giving both branches the same name. This mirrors how element-web tests against
-matrix-js-sdk. Once the matrix-js-sdk branch is merged and deleted, the pull
-request falls back to the lockfile and needs a lockfile bump to stay green,
-which is also what keeps `main` consistent after the merge.
-
 ## Background
 
 Information, why this approach is used can be found in the [linking concept reasoning](./linking_concept_reasoning.md) document.

docs/matrix_rtc_modes.md

@@ -24,7 +24,7 @@ homeserver does not support sticky events. This is the default.
 MSC4354 and all clients on v0.17.0 or later. The local membership requests its
 token from the Matrix 2.0 JWT endpoint of the
 [MatrixRTC Authorization Service](https://github.com/element-hq/lk-jwt-service)
-and identifies the room by a hashed identity instead of the Matrix `room_id`.
+and identifies the room by a hashed identity instead of a `livekit_alias`.
 (Remote memberships always try the new endpoint first and fall back to the
 legacy one, so remote participants can be on either.)
 

locales/en/app.json

@@ -163,12 +163,6 @@
   "login_auth_links_prompt": "Not registered yet?",
   "login_subheading": "To continue to Element",
   "login_title": "Login",
-  "microphone_level": {
-    "label": "Microphone level",
-    "no_device": "No microphone found. Connect one, then try again.",
-    "permission_denied": "Microphone access is blocked. Allow it, then try again.",
-    "value": "{{level}} of {{max}}"
-  },
   "microphone_off": "Microphone off",
   "microphone_on": "Microphone on",
   "mute_microphone_button_label": "Mute microphone",
@@ -221,14 +215,11 @@
       "activating": "Activating…",
       "camera": "Camera",
       "camera_numbered": "Camera {{n}}",
-      "camera_source": "Camera Source",
       "change_device_button": "Change audio device",
       "default": "Default",
       "default_named": "Default <2>({{name}})</2>",
-      "default_named_plain": "Default ({{name}})",
       "handset": "Handset",
       "loudspeaker": "Loudspeaker",
-      "mic_source": "Mic Source",
       "microphone": "Microphone",
       "microphone_numbered": "Microphone {{n}}",
       "speaker": "Speaker",

package.json

@@ -8,7 +8,7 @@
     "dev:embedded": "vite --config vite-embedded.config.js",
     "dev:component": "vite --config vite-component-dev.config.ts",
     "build": "pnpm build:full",
-    "build:full": "node --max-old-space-size=16384 node_modules/vite/bin/vite.js build",
+    "build:full": "NODE_OPTIONS=--max-old-space-size=16384 vite build",
     "build:full:production": "pnpm build:full",
     "build:full:development": "pnpm build:full --mode development",
     "build:embedded": "pnpm build:full --config vite-embedded.config.js",
@@ -83,7 +83,7 @@
     "@types/sdp-transform": "^2.4.5",
     "@typescript-eslint/utils": "^8.61.0",
     "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^11.0.0",
+    "@vector-im/compound-design-tokens": "^10.0.0",
     "@vector-im/compound-web": "^10.0.0",
     "@vitejs/plugin-react": "^6.0.2",
     "@vitest/browser-playwright": "^4.1.5",
@@ -107,6 +107,7 @@
     "matrix-widget-api": "^1.18.0",
     "node-stdlib-browser": "^1.3.1",
     "normalize.css": "^8.0.1",
+    "observable-hooks": "^4.2.3",
     "oxfmt": "^0.66.0",
     "oxlint": "^1.70.0",
     "oxlint-tsgolint": "^0.25.0",
@@ -129,6 +130,7 @@
     "uuid": "^14.0.0",
     "vaul": "^1.0.0",
     "vite": "^8.0.0",
+    "vite-plugin-generate-file": "^0.3.0",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-node-polyfills": "^0.28.0",
     "vite-plugin-node-stdlib-browser": "^0.2.1",

playwright/audio-menu.spec.ts

@@ -1,229 +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 { expect, test, type Locator, type Page } from "@playwright/test";
-
-import { SpaHelpers } from "./spa-helpers.ts";
-import { installFakeDevices } from "./utils/fake-devices.ts";
-
-test.describe("the quick audio menu", () => {
-  test("lists speakers and microphones with a live level meter", async ({
-    page,
-  }) => {
-    await installFakeDevices(page, { microphones: 3, speakers: 3 });
-    await joinACall(page, "Menu user", "Audio menu");
-    await openAudioMenu(page);
-
-    await expect(page.getByRole("group", { name: "Speaker" })).toBeVisible();
-    await expect(page.getByRole("group", { name: "Microphone" })).toBeVisible();
-    // By name, not count: the browser adds its own fake output and a Default.
-    for (const n of [1, 2, 3])
-      await expect(
-        page
-          .getByRole("group", { name: "Speaker" })
-          .getByRole("menuitemradio", { name: `Fake Speaker ${n}` }),
-      ).toBeVisible();
-
-    await expect(
-      page.getByRole("menuitemradio", { checked: true }),
-    ).toHaveCount(2);
-    const meter = page.getByRole("meter", { name: "Microphone level" });
-    await expect(meter).toBeVisible();
-    await expect(meter).toHaveAttribute("aria-valuenow", /\d+/);
-    await expect(meter).toHaveAttribute("aria-valuetext", /\d+ of \d+/);
-
-    // Both browsers here can route audio; the platform that can't is a unit check.
-    await expect(
-      page
-        .getByRole("group", { name: "Speaker" })
-        .getByRole("menuitemradio")
-        .first(),
-    ).toHaveAttribute("aria-disabled", "false");
-  });
-
-  test("moves the microphone and the speaker without disturbing the call", async ({
-    browser,
-  }) => {
-    // Two browsers and a real call.
-    test.slow();
-    const hostContext = await browser.newContext({ reducedMotion: "reduce" });
-    const host = await hostContext.newPage();
-    await installFakeDevices(host, { microphones: 3, speakers: 3 });
-    await joinACall(host, "Host", "Device switch");
-
-    const inviteLink = await SpaHelpers.getCallInviteLink(host);
-    const guestContext = await browser.newContext({ reducedMotion: "reduce" });
-    const guest = await guestContext.newPage();
-    await SpaHelpers.joinCallFromInviteLink(guest, inviteLink, "Guest");
-    await SpaHelpers.expectVideoTilesCount(guest, 2);
-
-    await openAudioMenu(host);
-    await selectDevice(host, "Microphone", "Fake Microphone 2");
-    await openAudioMenu(host);
-    await selectDevice(host, "Speaker", "Fake Speaker 2");
-
-    // Not a rejoin: neither side drops, and the guest still has both tiles.
-    await expect(
-      host.getByRole("dialog", { name: "Reconnecting…" }),
-    ).not.toBeVisible();
-    await expect(
-      guest.getByRole("dialog", { name: "Reconnecting…" }),
-    ).not.toBeVisible();
-    await SpaHelpers.expectVideoTilesCount(guest, 2);
-    await expect(guest.getByText("Waiting for media...")).not.toBeVisible();
-
-    await hostContext.close();
-    await guestContext.close();
-  });
-
-  test("keeps the meter moving while muted, and sends nothing", async ({
-    browser,
-  }) => {
-    // Two browsers and a real call.
-    test.slow();
-    const hostContext = await browser.newContext({ reducedMotion: "reduce" });
-    const host = await hostContext.newPage();
-    await installFakeDevices(host);
-    await joinACall(host, "Muted host", "Muted meter");
-
-    const inviteLink = await SpaHelpers.getCallInviteLink(host);
-    const guestContext = await browser.newContext({ reducedMotion: "reduce" });
-    const guest = await guestContext.newPage();
-    await SpaHelpers.joinCallFromInviteLink(guest, inviteLink, "Listener");
-    await SpaHelpers.expectVideoTilesCount(guest, 2);
-
-    const mute = host.getByTestId("incall_mute");
-    await mute.click();
-    await expect(mute).toHaveAttribute("aria-checked", "false");
-    await openAudioMenu(host);
-
-    const meter = host.getByRole("meter", { name: "Microphone level" });
-    await expect(meter).toBeVisible();
-    // By test id: the modal menu hides the rest of the call from the a11y tree.
-    await expect(mute).toHaveAttribute("aria-checked", "false");
-    await expect(mute).toBeVisible();
-    // And the guest is shown the mute.
-    await expect(
-      guest.getByTestId("videoTile").filter({ hasText: "Muted host" }),
-    ).toBeVisible();
-
-    await hostContext.close();
-    await guestContext.close();
-  });
-
-  test("keeps the meter at the foot of the list while it scrolls", async ({
-    page,
-  }) => {
-    await installFakeDevices(page, { microphones: 20, speakers: 4 });
-    await joinACall(page, "Scroller", "Long device list");
-    await openAudioMenu(page);
-
-    const meter = page.getByRole("meter", { name: "Microphone level" });
-    await expect(meter).toBeVisible();
-
-    // Scrolled so the microphones start at the top: only there does a pinned
-    // meter differ from one that is simply last.
-    const list = page.locator("[role='menu'] div[role='none']").first();
-    await list.evaluate((element) => {
-      const group = element.querySelector("[role='group'][aria-label*='icro']");
-      element.scrollTop +=
-        group!.getBoundingClientRect().top -
-        element.getBoundingClientRect().top;
-    });
-
-    await expect(meter).toBeInViewport();
-    await expectPinnedInside(meter, list);
-    await expect(
-      page.getByRole("menuitemradio", { name: "Fake Microphone 20" }),
-    ).toBeVisible();
-  });
-
-  test("shows the focus ring only when the keyboard moved the focus", async ({
-    page,
-    browserName,
-  }) => {
-    test.skip(
-      browserName === "firefox",
-      "Headless Firefox does not deliver synthetic key presses reliably; see reconnect.spec.ts",
-    );
-    await installFakeDevices(page);
-    await joinACall(page, "Keyboard user", "Focus ring");
-    await openAudioMenu(page);
-
-    const first = page.getByRole("menuitemradio").first();
-    // Opened by pointer: no ring, though Radix has moved focus into the menu.
-    await expect.poll(async () => outlineWidth(first)).toBe(0);
-
-    await page.keyboard.press("ArrowDown");
-    const focused = page.locator("[role='menuitemradio']:focus");
-    await expect.poll(async () => outlineWidth(focused)).toBeGreaterThan(0);
-
-    // And the pointer takes it away again.
-    await first.hover();
-    await expect.poll(async () => outlineWidth(focused)).toBe(0);
-  });
-});
-
-/** Creates a call and joins it, leaving the page in the call. */
-async function joinACall(
-  page: Page,
-  userName: string,
-  callName: string,
-): Promise<void> {
-  await page.goto("/");
-  await SpaHelpers.createCall(page, userName, callName, true);
-  await expect(page.getByTestId("name_tag")).toContainText(userName);
-  // The media controls stay disabled until devices have enumerated.
-  await expect(page.getByTestId("incall_mute")).toBeEnabled({
-    timeout: 10_000,
-  });
-}
-
-async function openAudioMenu(page: Page): Promise<void> {
-  await page.getByRole("button", { name: "Microphone" }).click();
-  await expect(page.getByRole("menu")).toBeVisible();
-}
-
-async function selectDevice(
-  page: Page,
-  section: "Speaker" | "Microphone",
-  name: string,
-): Promise<void> {
-  const item = page
-    .getByRole("group", { name: section })
-    .getByRole("menuitemradio", { name });
-  await item.click();
-  // Selecting doesn't close the menu, so dismiss it.
-  await page.keyboard.press("Escape");
-  await expect(page.getByRole("menu")).not.toBeVisible();
-}
-
-/** Asserts the meter sits within the scrollport and inside the menu's frame. */
-async function expectPinnedInside(
-  meter: Locator,
-  list: Locator,
-): Promise<void> {
-  const meterBox = (await meter.boundingBox())!;
-  const listBox = (await list.boundingBox())!;
-  const frame = (await meter.page().getByRole("menu").boundingBox())!;
-
-  expect(meterBox.y + meterBox.height).toBeLessThanOrEqual(
-    listBox.y + listBox.height + 1,
-  );
-  expect(meterBox.y).toBeGreaterThanOrEqual(listBox.y - 1);
-  expect(meterBox.x).toBeGreaterThan(frame.x);
-  expect(meterBox.x + meterBox.width).toBeLessThan(frame.x + frame.width);
-}
-
-/** Painted outline width, in px. */
-async function outlineWidth(item: Locator): Promise<number> {
-  if ((await item.count()) === 0) return 0;
-  return item.first().evaluate((element) => {
-    const { outlineStyle, outlineWidth } = getComputedStyle(element);
-    return outlineStyle === "none" ? 0 : Number.parseFloat(outlineWidth) || 0;
-  });
-}

playwright/component/audio-menu.spec.ts

@@ -1,135 +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 { expect, type Locator, type Page, test } from "@playwright/test";
-
-import { createUserAndRoom, resizeContainer, startHarness } from "./harness.ts";
-import { installFakeDevices } from "../utils/fake-devices.ts";
-
-/**
- * The device menu with Element Call as a component in a host page, where the
- * portalled menu must be sized against the call, not the window. Driven from
- * the lobby: it builds the same menu, without two connections' worth of flake.
- */
-
-// Sign-in, crypto setup and sync happen twice before anything shows.
-test.describe.configure({ timeout: 180_000 });
-
-test("sizes the device list against the call, not the window", async ({
-  page,
-}) => {
-  await installFakeDevices(page, { microphones: 20, speakers: 4 });
-  const { username, roomId } = await createUserAndRoom("menusize");
-  const panes = await startHarness(page, username, roomId);
-  const pane = panes.first();
-
-  // A short call in a much taller page.
-  const container = pane.getByTestId("call-container");
-  await resizeContainer(container, { width: 900, height: 400 });
-  await expect(pane.getByTestId("lobby_joinCall")).toBeVisible({
-    timeout: 60_000,
-  });
-
-  const list = await openDeviceList(page, pane);
-  const callHeight = (await container.boundingBox())!.height;
-  const windowHeight = page.viewportSize()!.height;
-  const listHeight = (await list.boundingBox())!.height;
-
-  expect(callHeight).toBeLessThan(windowHeight * 0.75);
-  expect(listHeight).toBeLessThanOrEqual(callHeight);
-  expect(listHeight).toBeLessThan(windowHeight * 0.6);
-});
-
-test("follows the call area when the host resizes it", async ({ page }) => {
-  await installFakeDevices(page, { microphones: 20, speakers: 4 });
-  const { username, roomId } = await createUserAndRoom("menuresize");
-  const panes = await startHarness(page, username, roomId);
-  const pane = panes.first();
-
-  const container = pane.getByTestId("call-container");
-  await resizeContainer(container, { width: 900, height: 360 });
-  await expect(pane.getByTestId("lobby_joinCall")).toBeVisible({
-    timeout: 60_000,
-  });
-
-  const list = await openDeviceList(page, pane);
-  const whenShort = (await list.boundingBox())!.height;
-
-  // The host grows the call while the menu is open.
-  await resizeContainer(container, { width: 900, height: 700 });
-  await expect
-    .poll(async () => (await list.boundingBox())!.height)
-    .toBeGreaterThan(whenShort);
-});
-
-test("keeps every device reachable in a small container", async ({ page }) => {
-  await installFakeDevices(page, { microphones: 20, speakers: 4 });
-  const { username, roomId } = await createUserAndRoom("menureach");
-  const panes = await startHarness(page, username, roomId);
-  const pane = panes.first();
-
-  const container = pane.getByTestId("call-container");
-  await resizeContainer(container, { width: 400, height: 360 });
-  await expect(pane.getByTestId("lobby_joinCall")).toBeVisible({
-    timeout: 60_000,
-  });
-
-  const list = await openDeviceList(page, pane);
-  // More devices than fit, so the list must scroll.
-  expect(await list.evaluate((el) => el.scrollHeight > el.clientHeight)).toBe(
-    true,
-  );
-
-  const last = page.getByRole("menuitemradio", { name: "Fake Microphone 20" });
-  await last.scrollIntoViewIfNeeded();
-  await expect(last).toBeInViewport();
-  // Reachable means clickable: the menu may be drawn outside the call area.
-  await last.click();
-  await expect(last).toHaveAttribute("aria-checked", "true");
-});
-
-test("tracks the focus source of its own call, not the page", async ({
-  page,
-}) => {
-  await installFakeDevices(page);
-  const { username, roomId } = await createUserAndRoom("menufocus");
-  const panes = await startHarness(page, username, roomId);
-  const pane = panes.first();
-  const other = panes.nth(1);
-
-  await expect(pane.getByTestId("lobby_joinCall")).toBeVisible({
-    timeout: 60_000,
-  });
-  await openDeviceList(page, pane);
-  const menu = page.getByRole("menu");
-
-  // Asserted on the attribute: the component build's scoped stylesheet doesn't
-  // reach the portalled menu, so its ring can't be read here.
-  await expect(menu).toHaveAttribute("data-focus-source", "pointer");
-
-  // A key pressed in the other call says nothing about this menu.
-  await other.evaluate((element) =>
-    element.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
-    ),
-  );
-  await expect(menu).toHaveAttribute("data-focus-source", "pointer");
-
-  await page.keyboard.press("ArrowDown");
-  await expect(menu).toHaveAttribute("data-focus-source", "keyboard");
-});
-
-/** Opens a component's microphone menu and returns its device list. */
-async function openDeviceList(page: Page, pane: Locator): Promise<Locator> {
-  await pane
-    .getByRole("button", { name: "Microphone" })
-    .click({ timeout: 60_000 });
-  await expect(page.getByRole("menu")).toBeVisible();
-  const list = page.locator("[role='menu'] div[role='none']").first();
-  await expect(list).toBeVisible();
-  return list;
-}

playwright/component/harness.ts

@@ -92,12 +92,6 @@ export async function expectWithin(
   outer: Locator,
 ): Promise<void> {
   await expect(inner).toBeVisible();
-  // Wait for animations to settle.
-  await inner.evaluate(async (element) => {
-    for (const animation of element.getAnimations({ subtree: true }))
-      await animation.finished;
-  });
-
   const innerBox = await inner.boundingBox();
   const outerBox = await outer.boundingBox();
   if (innerBox === null || outerBox === null)

playwright/fixtures/widget-user.ts

@@ -109,15 +109,10 @@ export const widgetTest = test.extend<MyFixtures>({
       await TestHelpers.dismissInviteUnknownUserModal(ewPage1);
 
       // Accept the invite
-      await TestHelpers.closeReleaseAnnouncement(
-        ewPage2,
-        "Introducing Sections",
-      );
-      await TestHelpers.expandAllSections(ewPage2);
       await expect(
-        TestHelpers.roomListItem(ewPage2, "Welcome Room"),
+        ewPage2.getByRole("option", { name: "Welcome Room" }),
       ).toBeVisible();
-      await TestHelpers.roomListItem(ewPage2, "Welcome Room").click();
+      await ewPage2.getByRole("option", { name: "Welcome Room" }).click();
       await ewPage2.getByRole("button", { name: "Accept" }).click();
       await expect(
         ewPage2
@@ -132,7 +127,7 @@ export const widgetTest = test.extend<MyFixtures>({
 
       await ewPage1
         .getByRole("navigation", { name: "Room list" })
-        .getByRole("button", { name: "New", exact: true })
+        .getByRole("button", { name: "New conversation" })
         .click();
 
       await ewPage1.getByRole("menuitem", { name: "Start chat" }).click();
@@ -157,12 +152,8 @@ export const widgetTest = test.extend<MyFixtures>({
       ).toBeVisible();
 
       // Accept the DM invite from brooks
-      await TestHelpers.closeReleaseAnnouncement(
-        ewPage2,
-        "Introducing Sections",
-      );
-      await TestHelpers.expandAllSections(ewPage2);
-      await TestHelpers.roomListItem(ewPage2, brooksDisplayName).click();
+      // This how playwright record selects the DM invite in the room list
+      await ewPage2.getByRole("button", { name: "Open room" }).click();
       await ewPage2.getByRole("button", { name: "Start chatting" }).click();
     }
 

playwright/reconnect.spec.ts

@@ -7,8 +7,6 @@ Please see LICENSE in the repository root for full details.
 
 import { expect, test } from "@playwright/test";
 
-import { SpaHelpers } from "./spa-helpers";
-
 // Skip test for Firefox, due to page.keyboard.press("Tab") not reliable on headless mode
 test.skip(
   ({ browserName }) => browserName === "firefox",
@@ -19,12 +17,6 @@ test("can only interact with header and footer while reconnecting", async ({
   page,
 }) => {
   await page.goto("/");
-
-  // The reconnecting state is entered via the probablyLeft timer, which
-  // mirrors the delayed leave event's timeout. With delegation that timeout
-  // is one hour, putting it out of reach of the clock fast-forward below.
-  // Keep the leave client-managed so its short timeout applies.
-  await SpaHelpers.disableLeaveDelegation(page);
   await page.getByTestId("home_callName").click();
   await page.getByTestId("home_callName").fill("Test call");
   await page.getByTestId("home_displayName").click();

playwright/spa-call-sticky.spec.ts

@@ -19,7 +19,6 @@ async function setupTwoUserSpaCall(
   browser: Browser,
   page: Page,
   browserName: string,
-  opts: { disableGuestLeaveDelegation?: boolean } = {},
 ): Promise<{ guestPage: Page }> {
   test.skip(
     browserName === "firefox",
@@ -53,9 +52,6 @@ async function setupTwoUserSpaCall(
 
   await guestPage.goto("/");
 
-  if (opts.disableGuestLeaveDelegation)
-    await SpaHelpers.disableLeaveDelegation(guestPage);
-
   let pevaraHasSentStickyEvent = false;
 
   const pevaraResolver = Promise.withResolvers<void>();
@@ -106,13 +102,7 @@ test("One to One rejoin after improper leave does not crash EC", async ({
   page,
   browserName,
 }) => {
-  // With delegation, the backend sends the guest's delayed leave event within
-  // moments of the improper leave, so the stale membership this test needs
-  // would be cleaned up before the rejoin. Keep the guest's leave
-  // client-managed so the stale membership lingers.
-  const { guestPage } = await setupTwoUserSpaCall(browser, page, browserName, {
-    disableGuestLeaveDelegation: true,
-  });
+  const { guestPage } = await setupTwoUserSpaCall(browser, page, browserName);
 
   await SpaHelpers.expectVideoTilesCount(page, 2);
   await SpaHelpers.expectVideoTilesCount(guestPage, 2);

playwright/spa-helpers.ts

@@ -111,24 +111,6 @@ async function setRtcModeFromSettings(
   await page.getByTestId("modal_close").click();
 }
 
-/**
- * Makes the delayed-leave delegation support probes fail so that the client
- * manages its delayed leave event itself instead of delegating it to the
- * backend.
- *
- * Must be installed before the page joins a call.
- */
-async function disableLeaveDelegation(page: Page): Promise<void> {
-  // Covers both the transport probe (<livekit_service_url>/delegate_delayed_leave)
-  // and the homeserver probe (MSC4195, .../rtc/livekit/delegate_delayed_leave).
-  await page.route("**/delegate_delayed_leave", async (route) =>
-    route.fulfill({
-      status: 404,
-      headers: { "Access-Control-Allow-Origin": "*" },
-    }),
-  );
-}
-
 /**
  * Expect a certain number of video tiles to be present and visible.
  */
@@ -151,6 +133,5 @@ export const SpaHelpers = {
   createCall,
   getCallInviteLink,
   joinCallFromInviteLink,
-  disableLeaveDelegation,
   expectVideoTilesCount,
 };

playwright/utils/fake-devices.ts

@@ -1,85 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { type Page } from "@playwright/test";
-
-/**
- * Adds synthetic devices beside the browser's one fake microphone and speaker,
- * so the menu has a choice to show. They share one capture and `setSinkId` is
- * accepted but not honoured: routing still needs hardware and a manual check.
- * Call before the page navigates.
- */
-export async function installFakeDevices(
-  page: Page,
-  { microphones = 2, speakers = 2 } = {},
-): Promise<void> {
-  await page.addInitScript(
-    ({ microphones, speakers }) => {
-      const synthetic = (
-        kind: MediaDeviceKind,
-        count: number,
-        name: string,
-      ): MediaDeviceInfo[] =>
-        Array.from({ length: count }, (_, i) => {
-          const info = {
-            deviceId: `${kind}-${i + 1}`,
-            groupId: `${kind}-group-${i + 1}`,
-            kind,
-            label: `${name} ${i + 1}`,
-          };
-          return { ...info, toJSON: () => info } as MediaDeviceInfo;
-        });
-      const ids = new Set(
-        [
-          ...synthetic("audioinput", microphones, ""),
-          ...synthetic("audiooutput", speakers, ""),
-        ].map((d) => d.deviceId),
-      );
-
-      const devices = navigator.mediaDevices;
-      const enumerate = devices.enumerateDevices.bind(devices);
-      devices.enumerateDevices = async (): Promise<MediaDeviceInfo[]> => [
-        ...(await enumerate()),
-        ...synthetic("audioinput", microphones, "Fake Microphone"),
-        ...synthetic("audiooutput", speakers, "Fake Speaker"),
-      ];
-
-      // Our ids name no hardware, so drop the exact-device constraint.
-      const getUserMedia = devices.getUserMedia.bind(devices);
-      devices.getUserMedia = async (
-        constraints?: MediaStreamConstraints,
-      ): Promise<MediaStream> => {
-        const audio = constraints?.audio;
-        if (typeof audio === "object") {
-          const requested = audio.deviceId;
-          const id =
-            typeof requested === "object" && requested !== null
-              ? ((requested as ConstrainDOMStringParameters).exact as string)
-              : (requested as string | undefined);
-          if (id !== undefined && ids.has(id))
-            return getUserMedia({ ...constraints, audio: true });
-        }
-        return getUserMedia(constraints);
-      };
-
-      // Accept routing to our ids on both media elements and the AudioContext,
-      // which the app also routes.
-      for (const proto of [
-        HTMLMediaElement.prototype,
-        AudioContext.prototype,
-      ]) {
-        const sink = proto as { setSinkId?: (id: string) => Promise<void> };
-        const setSinkId = sink.setSinkId;
-        if (setSinkId === undefined) continue;
-        sink.setSinkId = async function (id: string): Promise<void> {
-          if (!ids.has(id)) await setSinkId.call(this, id);
-        };
-      }
-    },
-    { microphones, speakers },
-  );
-}

playwright/widget/test-helpers.ts

@@ -11,7 +11,6 @@ import {
   type JSHandle,
   type Page,
   type FrameLocator,
-  type Locator,
 } from "@playwright/test";
 import { type MatrixClient } from "matrix-js-sdk";
 
@@ -204,16 +203,6 @@ export class TestHelpers {
     }
   }
 
-  public static async expandAllSections(page: Page): Promise<void> {
-    try {
-      await page
-        .getByRole("button", { name: "Expand all sections" })
-        .click({ timeout: 2000 });
-    } catch {
-      // Already expanded or button not present
-    }
-  }
-
   public static async createRoom(
     name: string,
     page: Page,
@@ -223,7 +212,7 @@ export class TestHelpers {
 
     await page
       .getByRole("navigation", { name: "Room list" })
-      .getByRole("button", { name: "New", exact: true })
+      .getByRole("button", { name: "New conversation" })
       .click();
 
     await page.getByRole("menuitem", { name: "New Room" }).click({
@@ -264,9 +253,9 @@ export class TestHelpers {
     roomName: string,
     page: Page,
   ): Promise<void> {
-    await TestHelpers.closeReleaseAnnouncement(page, "Introducing Sections");
-    await TestHelpers.expandAllSections(page);
-    await TestHelpers.roomListItem(page, roomName).click({ timeout: 10000 });
+    await page.getByRole("option", { name: roomName }).click({
+      timeout: 10000,
+    });
     await page.getByRole("button", { name: "Accept" }).click({
       timeout: 5000,
     });
@@ -361,17 +350,6 @@ export class TestHelpers {
       .click();
   }
 
-  /**
-   * Locates a room in the room list by its name.
-   *
-   * Matches on the aria-label prefix because the item's role differs between
-   * the flat room list (`option`) and the sectioned room list (`button`), and
-   * the label may carry a suffix such as " invitation.".
-   */
-  public static roomListItem(page: Page, roomName: string): Locator {
-    return page.locator(`[aria-label^="Open room ${roomName}"]`);
-  }
-
   /**
    * Switches to a room in the room list by its name.
    * @param page - The EW page
@@ -381,8 +359,7 @@ export class TestHelpers {
     page: Page,
     roomName: string,
   ): Promise<void> {
-    await TestHelpers.expandAllSections(page);
-    await TestHelpers.roomListItem(page, roomName).click();
+    await page.getByRole("option", { name: `Open room ${roomName}` }).click();
   }
 
   public static async dismissInviteUnknownUserModal(page: Page): Promise<void> {

pnpm-lock.yaml

@@ -39,13 +39,13 @@ importers:
         version: 11.7.12
       '@livekit/components-core':
         specifier: ^0.12.0
-        version: 0.12.15(livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)
+        version: 0.12.15(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)
       '@livekit/components-react':
         specifier: ^2.0.0
-        version: 2.9.24(livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tslib@2.8.1)
+        version: 2.9.24(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tslib@2.8.1)
       '@livekit/track-processors':
         specifier: ^0.7.1
-        version: 0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22))
+        version: 0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))
       '@mediapipe/tasks-vision':
         specifier: ^0.10.18
         version: 0.10.35
@@ -131,11 +131,11 @@ importers:
         specifier: ^10.2.11
         version: 10.3.1(react@19.2.8)
       '@vector-im/compound-design-tokens':
-        specifier: ^11.0.0
-        version: 11.1.0(@types/react@19.2.18)(react@19.2.8)
+        specifier: ^10.0.0
+        version: 10.2.4(@types/react@19.2.18)(react@19.2.8)
       '@vector-im/compound-web':
         specifier: ^10.0.0
-        version: 10.1.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.1.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        version: 10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@vitejs/plugin-react':
         specifier: ^6.0.2
         version: 6.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))
@@ -183,7 +183,7 @@ importers:
         version: 5.88.1(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)(@types/node@24.13.3)(typescript@5.9.3)
       livekit-client:
         specifier: ^2.18.1
-        version: 2.22.3(@types/dom-mediacapture-record@1.0.22)
+        version: 2.22.2(@types/dom-mediacapture-record@1.0.22)
       lodash-es:
         specifier: ^4.17.21
         version: 4.18.1
@@ -192,7 +192,7 @@ importers:
         version: 1.9.2
       matrix-js-sdk:
         specifier: github:matrix-org/matrix-js-sdk#develop
-        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999
+        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a
       matrix-widget-api:
         specifier: ^1.18.0
         version: 1.19.0
@@ -202,6 +202,9 @@ importers:
       normalize.css:
         specifier: ^8.0.1
         version: 8.0.1
+      observable-hooks:
+        specifier: ^4.2.3
+        version: 4.2.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(rxjs@7.8.2)
       oxfmt:
         specifier: ^0.66.0
         version: 0.66.0
@@ -222,7 +225,7 @@ importers:
         version: 10.6.1(postcss@8.5.26)
       postcss-selector-parser:
         specifier: ^7.1.1
-        version: 7.1.6
+        version: 7.1.3
       posthog-js:
         specifier: 1.408.2
         version: 1.408.2
@@ -268,6 +271,9 @@ importers:
       vite:
         specifier: ^8.0.0
         version: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)
+      vite-plugin-generate-file:
+        specifier: ^0.3.0
+        version: 0.3.1
       vite-plugin-html:
         specifier: ^3.2.2
         version: 3.2.2(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
@@ -1191,8 +1197,8 @@ packages:
       '@types/dom-mediacapture-transform': ^0.1.9
       livekit-client: ^1.12.0 || ^2.1.0
 
-  '@matrix-org/matrix-sdk-crypto-wasm@18.9.0':
-    resolution: {integrity: sha512-NtLzNDTEfNASBjNCTGZHuk7N0jrQhS6Zx2CM857rCHZYYh/rpbKGQNrJ7azktm4S1P5Jy3WU3nwJTGohGw26qQ==}
+  '@matrix-org/matrix-sdk-crypto-wasm@18.5.0':
+    resolution: {integrity: sha512-E826Hy1rG26LanPjtSsOiVRcVoHfSgPgj2r2Xsb5RPScpaKi9XJADQ0u3dNjRCitZPX4oyLNl1FDd5AfDlmIwQ==}
     engines: {node: '>= 18'}
 
   '@mdx-js/react@3.1.1':
@@ -3223,8 +3229,8 @@ packages:
     peerDependencies:
       react: '>= 16.8.0'
 
-  '@vector-im/compound-design-tokens@11.1.0':
-    resolution: {integrity: sha512-vkMcy/G5VBlVle8umQNpctKHqZITS8XOQprsgcbSGRmwW080Z+TXV/vPsEXhgq8JKdxURkLhua0zQUufCeo46A==}
+  '@vector-im/compound-design-tokens@10.2.4':
+    resolution: {integrity: sha512-2aCjhSvJxktPWnvh5s9Xdc0Rd76AfHqbDbN4QjOxo2VIac6zYdLyQbxMUQ5ZeoR9G3vAxILd0H1UvApRfMilpQ==}
     peerDependencies:
       '@adobe/leonardo-contrast-colors': ^1.0.0
       '@types/react': '*'
@@ -3240,8 +3246,8 @@ packages:
       react:
         optional: true
 
-  '@vector-im/compound-web@10.1.0':
-    resolution: {integrity: sha512-Lhw9Q+RZo1GtDYjF5PXWTD0zdfbrz/vnSVBYFHC8Hq+YeDule2QfGbTRo8IVHeV7jK6ZzsLc8zb6553eeIRLYg==}
+  '@vector-im/compound-web@10.0.1':
+    resolution: {integrity: sha512-CT3aGMalPSf53o3JUbBF7EA10Rfp+auftIuBwOUSna+hfZ/zPxGLTFcuCuOJ7L8hrzijM+V4I8L0PUkfyOczpg==}
     peerDependencies:
       '@fontsource/inconsolata': ^5
       '@fontsource/inter': ^5
@@ -3656,8 +3662,8 @@ packages:
   constants-browserify@1.0.0:
     resolution: {integrity: sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==}
 
-  content-type@3.1.1:
-    resolution: {integrity: sha512-GW4qUsfFo59d0HbUibDlWv5wPz+vAAcaTWbKIuKCf0JkC7wWkSyf8f13IpXn5JkeMlB2P8iTSSIjwXljorg2vA==}
+  content-type@3.0.0:
+    resolution: {integrity: sha512-AIi5H6p0xk5uknXcN3/rmhP8jgp69OfSe/JuKiQAFprJ7UGw7mwj7m4XcmDzlrnJDG+cGpphAINGdU3g3g7kDw==}
     engines: {node: '>=22'}
 
   convert-source-map@2.0.0:
@@ -4462,6 +4468,10 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
+  js-yaml@4.3.0:
+    resolution: {integrity: sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==}
+    hasBin: true
+
   js-yaml@4.3.1:
     resolution: {integrity: sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==}
     hasBin: true
@@ -4595,8 +4605,8 @@ packages:
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
-  livekit-client@2.22.3:
-    resolution: {integrity: sha512-jw9zBKXY5Gtr5MZ7vEON3QhMNccuDvYHck1PFSyG1aaateQPqgKZFBMgZkFZaXHIf9RV4MDW5xpTK2b/+qbwOg==}
+  livekit-client@2.22.2:
+    resolution: {integrity: sha512-o3yLYoH2eHVR/DmIZzgC96FMvtR4+g/DjeqNwS5zp12EjqrqiRULxm6Oq/YsTE97WnA6fhy23+a2hGkbce5SPA==}
     peerDependencies:
       '@types/dom-mediacapture-record': ^1
 
@@ -4673,9 +4683,9 @@ packages:
   matrix-events-sdk@0.0.1:
     resolution: {integrity: sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==}
 
-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999:
-    resolution: {gitHosted: true, integrity: sha512-qF8++74MX36KS1KEw6Lc8HHXgZ6nHD1oUU4yBZUj5vVPvZTIspk1lOGztkFmizE5vmLAHd5tdadL9Xu1Asy4bA==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999}
-    version: 42.3.0
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a:
+    resolution: {gitHosted: true, integrity: sha512-0EGwbXzvG88sBOxq4ZlCRwT4VpQj2xkizfyy0A3bTSK0ysb6/gXJ/o1WPFoqCjRGMDgPq4gAsk92xGtHA7EhPg==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a}
+    version: 42.2.0
     engines: {node: '>=22.0.0'}
 
   matrix-widget-api@1.19.0:
@@ -4696,6 +4706,14 @@ packages:
     resolution: {integrity: sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==}
     hasBin: true
 
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
   mimic-function@5.0.1:
     resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
     engines: {node: '>=18'}
@@ -4798,6 +4816,13 @@ packages:
     resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
     engines: {node: '>= 0.4'}
 
+  observable-hooks@4.2.4:
+    resolution: {integrity: sha512-FdTQgyw1h5bG/QHCBIqctdBSnv9VARJCEilgpV6L2qlw1yeLqFIwPm4U15dMtl5kDmNN0hSt+Nl6iYbLFwEcQA==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+      rxjs: '>=6.0.0'
+
   obug@2.1.4:
     resolution: {integrity: sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==}
     engines: {node: '>=12.20.0'}
@@ -4880,8 +4905,8 @@ packages:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
-  p-retry@8.0.1:
-    resolution: {integrity: sha512-NAigyu8hfvJe7MsS18mnc4is0MZtau3QMdBklaJKK23oBQb6occO3UPM3vHmTckW8KhfyjMZaUOqdTFEYliHgg==}
+  p-retry@8.0.0:
+    resolution: {integrity: sha512-kFVqH1HxOHp8LupNsOys7bSV09VYTRLxarH/mokO4Rqhk6wGi70E0jh4VzvVGXfEVNggHoHLAMWsQqHyU1Ey9A==}
     engines: {node: '>=22'}
 
   p-try@2.2.0:
@@ -5160,8 +5185,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  postcss-selector-parser@7.1.6:
-    resolution: {integrity: sha512-7qASPzhKF2l2KLboRZux8CCTRMdGiV08vWmyKzPz22qZ7ZjQBOeY7rNzNoCLSUiftJ7HUq0GERHmxw/t0dCdMw==}
+  postcss-selector-parser@7.1.3:
+    resolution: {integrity: sha512-ajnd7iZnqjJDkyHNfznl/ZVO0lWqvBmQXfKKENx9/p/bEiF/L3eHwdydNUg9RXZx6xfZWOCmXmBa5oeB+YrAPQ==}
     engines: {node: '>=4'}
 
   postcss-value-parser@4.2.0:
@@ -5889,6 +5914,9 @@ packages:
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
 
+  vite-plugin-generate-file@0.3.1:
+    resolution: {integrity: sha512-tiA3gkPM21MS2+RyqsBMT33GSlM9LM1TJjf6vGvV/e/ml3e3vTKfuH3l2N0NpUgcayvj1fXnmlo5YBuahA6bsg==}
+
   vite-plugin-html@3.2.2:
     resolution: {integrity: sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==}
     peerDependencies:
@@ -6397,9 +6425,9 @@ snapshots:
 
   '@csstools/postcss-cascade-layers@5.0.2(postcss@8.5.26)':
     dependencies:
-      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.6)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.3)
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.6
+      postcss-selector-parser: 7.1.3
 
   '@csstools/postcss-color-function-display-p3-linear@1.0.1(postcss@8.5.26)':
     dependencies:
@@ -6505,9 +6533,9 @@ snapshots:
 
   '@csstools/postcss-is-pseudo-class@5.0.3(postcss@8.5.26)':
     dependencies:
-      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.6)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.3)
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.6
+      postcss-selector-parser: 7.1.3
 
   '@csstools/postcss-light-dark-function@2.0.11(postcss@8.5.26)':
     dependencies:
@@ -6609,7 +6637,7 @@ snapshots:
   '@csstools/postcss-scope-pseudo-class@4.0.1(postcss@8.5.26)':
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.6
+      postcss-selector-parser: 7.1.3
 
   '@csstools/postcss-sign-functions@1.1.4(postcss@8.5.26)':
     dependencies:
@@ -6653,13 +6681,13 @@ snapshots:
     dependencies:
       postcss: 8.5.26
 
-  '@csstools/selector-resolve-nested@3.1.0(postcss-selector-parser@7.1.6)':
+  '@csstools/selector-resolve-nested@3.1.0(postcss-selector-parser@7.1.3)':
     dependencies:
-      postcss-selector-parser: 7.1.6
+      postcss-selector-parser: 7.1.3
 
-  '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.6)':
+  '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.3)':
     dependencies:
-      postcss-selector-parser: 7.1.6
+      postcss-selector-parser: 7.1.3
 
   '@csstools/utilities@2.0.0(postcss@8.5.26)':
     dependencies:
@@ -7051,21 +7079,21 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.6.0
 
-  '@livekit/components-core@0.12.15(livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)':
+  '@livekit/components-core@0.12.15(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)':
     dependencies:
       '@floating-ui/dom': 1.7.6
-      livekit-client: 2.22.3(@types/dom-mediacapture-record@1.0.22)
+      livekit-client: 2.22.2(@types/dom-mediacapture-record@1.0.22)
       loglevel: 1.9.1
       rxjs: 7.8.2
       tslib: 2.8.1
 
-  '@livekit/components-react@2.9.24(livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tslib@2.8.1)':
+  '@livekit/components-react@2.9.24(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tslib@2.8.1)':
     dependencies:
-      '@livekit/components-core': 0.12.15(livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)
+      '@livekit/components-core': 0.12.15(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))(tslib@2.8.1)
       clsx: 2.1.1
       events: 3.3.0
       jose: 6.2.9
-      livekit-client: 2.22.3(@types/dom-mediacapture-record@1.0.22)
+      livekit-client: 2.22.2(@types/dom-mediacapture-record@1.0.22)
       react: 19.2.8
       react-dom: 19.2.8(react@19.2.8)
       tslib: 2.8.1
@@ -7077,13 +7105,13 @@ snapshots:
     dependencies:
       '@bufbuild/protobuf': 1.10.1
 
-  '@livekit/track-processors@0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22))':
+  '@livekit/track-processors@0.7.2(@types/dom-mediacapture-transform@0.1.11)(livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22))':
     dependencies:
       '@mediapipe/tasks-vision': 0.10.35
       '@types/dom-mediacapture-transform': 0.1.11
-      livekit-client: 2.22.3(@types/dom-mediacapture-record@1.0.22)
+      livekit-client: 2.22.2(@types/dom-mediacapture-record@1.0.22)
 
-  '@matrix-org/matrix-sdk-crypto-wasm@18.9.0': {}
+  '@matrix-org/matrix-sdk-crypto-wasm@18.5.0': {}
 
   '@mdx-js/react@3.1.1(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
@@ -8667,12 +8695,12 @@ snapshots:
       '@use-gesture/core': 10.3.1
       react: 19.2.8
 
-  '@vector-im/compound-design-tokens@11.1.0(@types/react@19.2.18)(react@19.2.8)':
+  '@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.18)(react@19.2.8)':
     optionalDependencies:
       '@types/react': 19.2.18
       react: 19.2.8
 
-  '@vector-im/compound-web@10.1.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.1.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@vector-im/compound-web@10.0.1(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@10.2.4(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@floating-ui/react': 0.27.20(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -8684,7 +8712,7 @@ snapshots:
       '@radix-ui/react-progress': 1.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-separator': 1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
-      '@vector-im/compound-design-tokens': 11.1.0(@types/react@19.2.18)(react@19.2.8)
+      '@vector-im/compound-design-tokens': 10.2.4(@types/react@19.2.18)(react@19.2.8)
       classnames: 2.5.1
       react: 19.2.8
       vaul: 1.1.2(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -9145,7 +9173,7 @@ snapshots:
 
   constants-browserify@1.0.0: {}
 
-  content-type@3.1.1: {}
+  content-type@3.0.0: {}
 
   convert-source-map@2.0.0: {}
 
@@ -9216,13 +9244,13 @@ snapshots:
   css-blank-pseudo@7.0.1(postcss@8.5.26):
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.6
+      postcss-selector-parser: 7.1.3
 
   css-has-pseudo@7.0.3(postcss@8.5.26):
     dependencies:
-      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.6)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.3)
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.6
+      postcss-selector-parser: 7.1.3
       postcss-value-parser: 4.2.0
 
   css-prefers-color-scheme@10.0.0(postcss@8.5.26):
@@ -10016,6 +10044,10 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
+  js-yaml@4.3.0:
+    dependencies:
+      argparse: 2.0.1
+
   js-yaml@4.3.1:
     dependencies:
       argparse: 2.0.1
@@ -10148,7 +10180,7 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
-  livekit-client@2.22.3(@types/dom-mediacapture-record@1.0.22):
+  livekit-client@2.22.2(@types/dom-mediacapture-record@1.0.22):
     dependencies:
       '@livekit/mutex': 1.1.1
       '@livekit/protocol': 1.50.4
@@ -10227,17 +10259,17 @@ snapshots:
 
   matrix-events-sdk@0.0.1: {}
 
-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999:
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a:
     dependencies:
       '@babel/runtime': 8.0.0
-      '@matrix-org/matrix-sdk-crypto-wasm': 18.9.0
+      '@matrix-org/matrix-sdk-crypto-wasm': 18.5.0
       another-json: 0.2.0
       bs58: 6.0.0
-      content-type: 3.1.1
+      content-type: 3.0.0
       loglevel: 1.9.2
       matrix-events-sdk: 0.0.1
       matrix-widget-api: 1.19.0
-      p-retry: 8.0.1
+      p-retry: 8.0.0
       sdp-transform: 3.0.0
       unhomoglyph: 1.0.6
 
@@ -10264,6 +10296,12 @@ snapshots:
       bn.js: 4.12.3
       brorand: 1.1.0
 
+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
   mimic-function@5.0.1: {}
 
   min-indent@1.0.1: {}
@@ -10372,6 +10410,12 @@ snapshots:
       has-symbols: 1.1.0
       object-keys: 1.1.1
 
+  observable-hooks@4.2.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(rxjs@7.8.2):
+    dependencies:
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      rxjs: 7.8.2
+
   obug@2.1.4: {}
 
   once@1.4.0:
@@ -10556,7 +10600,7 @@ snapshots:
     dependencies:
       p-limit: 3.1.0
 
-  p-retry@8.0.1:
+  p-retry@8.0.0:
     dependencies:
       is-network-error: 1.3.2
 
@@ -10666,7 +10710,7 @@ snapshots:
   postcss-attribute-case-insensitive@7.0.1(postcss@8.5.26):
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.6
+      postcss-selector-parser: 7.1.3
 
   postcss-clamp@4.1.0(postcss@8.5.26):
     dependencies:
@@ -10717,12 +10761,12 @@ snapshots:
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.6
+      postcss-selector-parser: 7.1.3
 
   postcss-dir-pseudo-class@9.0.1(postcss@8.5.26):
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.6
+      postcss-selector-parser: 7.1.3
 
   postcss-double-position-gradients@6.0.4(postcss@8.5.26):
     dependencies:
@@ -10734,12 +10778,12 @@ snapshots:
   postcss-focus-visible@10.0.1(postcss@8.5.26):
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.6
+      postcss-selector-parser: 7.1.3
 
   postcss-focus-within@9.0.1(postcss@8.5.26):
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.6
+      postcss-selector-parser: 7.1.3
 
   postcss-font-variant@5.0.0(postcss@8.5.26):
     dependencies:
@@ -10771,10 +10815,10 @@ snapshots:
 
   postcss-nesting@13.0.2(postcss@8.5.26):
     dependencies:
-      '@csstools/selector-resolve-nested': 3.1.0(postcss-selector-parser@7.1.6)
-      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.6)
+      '@csstools/selector-resolve-nested': 3.1.0(postcss-selector-parser@7.1.3)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.3)
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.6
+      postcss-selector-parser: 7.1.3
 
   postcss-opacity-percentage@3.0.0(postcss@8.5.26):
     dependencies:
@@ -10872,7 +10916,7 @@ snapshots:
   postcss-pseudo-class-any-link@10.0.1(postcss@8.5.26):
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.6
+      postcss-selector-parser: 7.1.3
 
   postcss-replace-overflow-wrap@4.0.0(postcss@8.5.26):
     dependencies:
@@ -10881,9 +10925,9 @@ snapshots:
   postcss-selector-not@8.0.1(postcss@8.5.26):
     dependencies:
       postcss: 8.5.26
-      postcss-selector-parser: 7.1.6
+      postcss-selector-parser: 7.1.3
 
-  postcss-selector-parser@7.1.6:
+  postcss-selector-parser@7.1.3:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
@@ -11624,6 +11668,13 @@ snapshots:
       - '@types/react'
       - '@types/react-dom'
 
+  vite-plugin-generate-file@0.3.1:
+    dependencies:
+      ejs: 3.1.10
+      js-yaml: 4.3.0
+      mime-types: 2.1.35
+      picocolors: 1.1.1
+
   vite-plugin-html@3.2.2(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)):
     dependencies:
       '@rollup/pluginutils': 4.2.1

scripts/check-component-externals.mjs

@@ -9,11 +9,9 @@ Please see LICENSE in the repository root for full details.
  * Checks that the component build leaves the packages a host must supply to
  * the host.
  *
- * A host application already has React, the Matrix SDK and Compound,
- * and a second copy of any of them is worse than dead weight: React would hold
- * two sets of hooks, the Matrix client would run two sync loops, and a second
- * Compound would style the tooltips it floats into the host's body with class
- * names the host's stylesheet does not know. So the
+ * A host application already has React, the Matrix SDK and LiveKit, and a
+ * second copy of any of them is worse than dead weight: React would hold two
+ * sets of hooks, and the Matrix client would run two sync loops. So the
  * component build lists them as external — but that list has to name every
  * subpath, since the bundler silently ignores the pattern and callback forms
  * of the option, and an import it does not cover is bundled with no warning at
@@ -35,17 +33,13 @@ 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",
-  "@vector-im/compound-web",
-  "@vector-im/compound-design-tokens",
+  "livekit-client",
 ];
 
 const isTestFile = (name) =>
@@ -55,7 +49,6 @@ const isTestFile = (name) =>
 async function* sourceFiles(dir) {
   for (const entry of await readdir(dir, { withFileTypes: true })) {
     const path = join(dir, entry.name);
-    if (EXCLUDED.includes(path)) continue;
     if (entry.isDirectory()) yield* sourceFiles(path);
     else if (/\.(ts|tsx)$/.test(entry.name) && !isTestFile(entry.name))
       yield path;

scripts/fetchdep.sh

@@ -1,73 +0,0 @@
-#!/usr/bin/env bash
-
-# Clones the branch of a dependency's repository that has the same name as
-# the pull request branch under test, so a change spanning both repositories
-# can be tested before either side is merged. Inspired by scripts/fetchdep.sh 
-# element-web.
-#
-# Usage: scripts/fetchdep.sh <org> <repo> [ref]
-#
-# The clone lands in ./<repo>. When the pull request comes from a fork and
-# PR_HEAD_REPO_OWNER was set, the fork's own copy of the repository is tried
-# before <org>'s. Exits 0 when a branch was cloned and 1 when there is none,
-# so the caller can keep the locked version in that case. Without a ref,
-# nothing is closed outside a pull request.
-
-set -eu
-
-org=$1
-repo=$2
-ref=${3:-}
-
-rm -rf "$repo"
-
-# If a ref was passed, try to clone it or die.
-if [ -n "$ref" ]; then
-    echo "fetchdep.sh: Using $org/$repo at $ref"
-    git clone --depth 1 "https://github.com/$org/$repo.git" "$repo"
-    git -C "$repo" fetch --depth 1 origin "$ref"
-    git -C "$repo" -c advice.detachedHead=false checkout FETCH_HEAD
-    git -C "$repo" log -1
-    exit 0
-fi
-
-# Otherwise ensure that we're on a pull request.
-head_ref=${GITHUB_HEAD_REF:-}
-if [ -z "$head_ref" ]; then
-    echo "fetchdep.sh: Not a pull request, nothing to match"
-    exit 1
-fi
-
-# Bots name their branches the same way in every repository, so a match on
-# one of theirs would be a coincidence rather than a paired change.
-case "$head_ref" in
-    renovate/* | dependabot/*)
-        echo "fetchdep.sh: Not matching bot branch $head_ref"
-        exit 1
-        ;;
-esac
-
-# Clones a branch if it exists and ends the script on success.
-clone() {
-    local try_org=$1
-    local branch=$2
-    echo "fetchdep.sh: Trying to use $try_org/$repo#$branch"
-    # Disable auth prompts: https://serverfault.com/a/665959
-    if GIT_TERMINAL_PROMPT=0 git clone "https://github.com/$try_org/$repo.git" "$repo" --branch "$branch" --depth 1; then
-        git -C "$repo" log -1
-        # Surface the match on the workflow run summary.
-        echo "::notice title=Matched $repo branch::Using $try_org/$repo#$branch at $(git -C "$repo" rev-parse HEAD)"
-        exit 0
-    fi
-}
-
-# Try cloning from the fork, then from the org.
-head_owner=${PR_HEAD_REPO_OWNER:-}
-if [ -n "$head_owner" ] && [ "$head_owner" != "${GITHUB_REPOSITORY_OWNER:-}" ]; then
-    clone "$head_owner" "$head_ref"
-fi
-clone "$org" "$head_ref"
-
-# Nothing worked. Die.
-echo "fetchdep.sh: No branch named $head_ref in $org/$repo"
-exit 1

scripts/layered.sh

@@ -1,62 +0,0 @@
-#!/usr/bin/env bash
-
-# Installs dependencies, then swaps matrix-js-sdk for a branch of the same
-# name as the pull request branch under test if one exists. This is what
-# lets CI test an Element Call branch together with a matrix-js-sdk branch
-# before either is merged. Inspired by scripts/layered.sh in element-web.
-#
-# Usage: scripts/layered.sh [pnpm install flags]
-#
-# The layering is only performed when package.json uses the develop branch of
-# matrix-js-sdk and the run is for a pull request whose branch has a matrix-js-sdk
-# counterpart. Otherwise the dependency is left as pnpm-lock.yaml pins it.
-#
-# The matrix-js-sdk checkout is nested inside this directory because some CI
-# systems do not allow moving above the primary checkout. It is git-ignored.
-#
-# Set JS_SDK_GITHUB_BASE_REF to a ref to use that exact ref of matrix-js-sdk
-# instead of looking for a matching branch.
-#
-# This script is only meant to be used in CI. For local development use
-# see docs/linking.md.
-
-set -ex
-
-# Paths below are relative to the repository root.
-cd "$(dirname "$0")/.."
-
-pnpm install --frozen-lockfile "$@"
-
-js_sdk_dep=$(jq -r '.devDependencies["matrix-js-sdk"]' < package.json)
-
-# Only layer when package.json follows the branch head rather than pinning a
-# release, so a release build keeps its pinned version.
-if [ "$js_sdk_dep" != "github:matrix-org/matrix-js-sdk#develop" ]; then
-    echo "layered.sh: Skipping matrix-js-sdk fetch and install as package.json pins $js_sdk_dep"
-    exit 0
-fi
-
-if ! scripts/fetchdep.sh matrix-org matrix-js-sdk "${JS_SDK_GITHUB_BASE_REF:-}"; then
-    echo "layered.sh: No matching matrix-js-sdk branch, keeping the locked version"
-    exit 0
-fi
-
-# matrix-js-sdk pins its pnpm version in `devEngines` only. Under corepack,
-# pnpm does not switch versions on its own and corepack, finding no
-# `packageManager` field there, would walk up to this project's and use
-# ours. Pinning it in the clone makes every pnpm invocation inside that
-# directory, including the `prepare` script run by pack, use the right one.
-js_sdk_pnpm="pnpm@$(jq -r '.devEngines.packageManager.version' < matrix-js-sdk/package.json)"
-jq --arg pm "$js_sdk_pnpm" '.packageManager = $pm' matrix-js-sdk/package.json > matrix-js-sdk/package.json.tmp
-mv matrix-js-sdk/package.json.tmp matrix-js-sdk/package.json
-export COREPACK_ENABLE_DOWNLOAD_PROMPT=0
-
-# Install matrix-js-sdk's build dependencies. `prepare` runs on pack below,
-# so it is skipped here.
-(cd matrix-js-sdk && pnpm install --frozen-lockfile --ignore-scripts)
-
-# Rather than `pnpm link`, build matrix-js-sdk into a tarball and install
-# that. This better reflects a clean install: dependencies may be hoisted
-# and shared, and there is no tsconfig.json to pick up sources from.
-(cd matrix-js-sdk && pnpm pack --out matrix-js-sdk.tgz)
-pnpm install "$(pwd)/matrix-js-sdk/matrix-js-sdk.tgz" "$@"

src/MediaDevicesContext.ts

@@ -6,9 +6,9 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { createContext, use, useMemo } from "react";
+import { useObservableEagerState } from "observable-hooks";
 
 import { type MediaDevices } from "./state/MediaDevices";
-import { useBehavior } from "./useBehavior";
 
 export const MediaDevicesContext = createContext<MediaDevices | undefined>(
   undefined,
@@ -35,7 +35,7 @@ export const useEarpieceAudioConfig = (): {
   volume: number;
 } => {
   const devices = useMediaDevices();
-  const audioOutput = useBehavior(devices.audioOutput.selected$);
+  const audioOutput = useObservableEagerState(devices.audioOutput.selected$);
   const isVirtualEarpiece = audioOutput?.virtualEarpiece ?? false;
   return {
     // We use only the right speaker (pan = 1) for the earpiece.

src/UrlConfiguration.ts

@@ -1,242 +0,0 @@
-/*
-Copyright 2022-2024 New Vector Ltd.
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-/**
- * How Element Call can be told to behave, and what each intent means.
- *
- * Kept apart from {@link UrlParams} on purpose: everything here is constants,
- * types and one function of them, so that a host of the component can import
- * these — the enums it needs as values, the defaults an intent implies — without
- * loading Element Call itself. UrlParams, which reads them from a URL, needs
- * the router, the config and the rest of the app; this module must not.
- * `component/api.ts` is built from it as an entry point of its own.
- */
-
-import {
-  type RTCCallIntent,
-  type RTCNotificationType,
-} from "matrix-js-sdk/lib/matrixrtc";
-
-import { platform } from "./Platform";
-
-export enum UserIntent {
-  StartNewCall = "start_call",
-  JoinExistingCall = "join_existing",
-  StartNewCallVoice = "start_call_voice",
-  JoinExistingCallVoice = "join_existing_voice",
-  StartNewCallDM = "start_call_dm",
-  StartNewCallDMVoice = "start_call_dm_voice",
-  JoinExistingCallDM = "join_existing_dm",
-  JoinExistingCallDMVoice = "join_existing_dm_voice",
-  Unknown = "unknown",
-}
-
-export enum HeaderStyle {
-  None = "none",
-  Standard = "standard",
-  AppBar = "app_bar",
-}
-
-export enum BackgroundStyle {
-  Solid = "solid",
-  Gradient = "gradient",
-}
-
-/**
- * The configuration for the app, which can be set via URL parameters.
- * Those property are different to the UrlProperties, since they are all optional
- * and configure the behavior of the app. Their value is the same if EC is used in
- * the same context but with different accounts/users.
- *
- * Their defaults can be controlled by the `intent` property.
- */
-export interface UrlConfiguration {
-  /**
-   * Whether the app should keep the user confined to the current call/room.
-   */
-  confineToRoom: boolean;
-  /**
-   * Whether the app should pause before joining the call until it sees an
-   * io.element.join widget action, allowing it to be preloaded.
-   */
-  preload: boolean;
-  /**
-   * The style of headers to show. "standard" is the default arrangement, "none"
-   * hides the header entirely, and "app_bar" produces a header with a back
-   * button like you might see in mobile apps. The callback for the back button
-   * is window.controls.onBackButtonPressed.
-   */
-  header: HeaderStyle;
-  /**
-   * Whether the controls should be shown. For screen recording no controls can be desired.
-   */
-  showControls: boolean;
-  /**
-   * Whether to hide the screen-sharing button.
-   */
-  hideScreensharing: boolean;
-
-  /**
-   * Whether the app is allowed to use fallback STUN servers for ICE in case the
-   * user's homeserver doesn't provide any.
-   */
-  allowIceFallback: boolean;
-
-  /**
-   * Whether the app should use per participant keys for E2EE.
-   */
-  perParticipantE2EE: boolean;
-  /**
-   * Whether the global JS controls for audio output devices should be enabled,
-   * allowing the list of output devices to be controlled by the app hosting
-   * Element Call.
-   */
-  controlledAudioDevices: boolean;
-  /**
-   * Setting this flag skips the lobby and brings you in the call directly.
-   * In the widget this can be combined with preload to pass the device settings
-   * with the join widget action.
-   */
-  skipLobby: boolean;
-  /**
-   * Setting this flag makes element call show the lobby after leaving a call.
-   * This is useful for video rooms.
-   */
-  returnToLobby: boolean;
-  /**
-   * Whether and what type of notification EC should send, when the user joins the call.
-   */
-  sendNotificationType?: RTCNotificationType;
-  /**
-   * Whether the app should automatically leave the call when there
-   * is no one left in the call.
-   * This is one part to make the call matrixRTC session behave like a telephone call.
-   */
-  autoLeaveWhenOthersLeft: boolean;
-
-  /**
-   * If the client should behave like it is awaiting an answer if a notification was sent (wait for call pick up).
-   * This is a no-op if not combined with sendNotificationType.
-   *
-   * This entails:
-   *  - show ui that it is awaiting an answer
-   *  - play a sound that indicates that it is awaiting an answer
-   *  - auto-dismiss the call widget once the notification lifetime expires on the receivers side.
-   */
-  waitForCallPickup: boolean;
-
-  /**
-   * Whether to enable echo cancellation for audio capture.
-   * Defaults to true.
-   */
-  echoCancellation?: boolean;
-  /**
-   * Whether to enable noise suppression for audio capture.
-   * Defaults to true.
-   */
-  noiseSuppression?: boolean;
-
-  callIntent?: RTCCallIntent;
-}
-
-// If you need to add a new flag to this interface, prefer a name that describes
-// a specific behavior (such as 'confineToRoom'), rather than one that describes
-// the situations that call for this behavior ('isEmbedded'). This makes it
-// clearer what each flag means, and helps us avoid coupling Element Call's
-// behavior to the needs of specific consumers.
-
-/**
- * The configuration implied by what the user meant to do — if they pressed a
- * Start Call button this would be `start_call`, and if they pressed Join Call,
- * `join_existing`.
- *
- * These are platform-specific defaults, so that a host can start a call by
- * saying what the user asked for rather than by setting every parameter itself,
- * and so that what each intent means is Element Call's decision, made in one
- * place. A host that wants something else states it alongside the intent.
- *
- * {@link UserIntent.Unknown} means no intent was stated, and gives the
- * standalone app's defaults: Element Call owns the whole page, so it offers the
- * way out of the room that a hosted call must not.
- */
-export function configurationForIntent(intent: UserIntent): UrlConfiguration {
-  // Only constants and `platform` here, so that this depends on nothing but
-  // the intent.
-  let preset: UrlConfiguration = {
-    confineToRoom: true,
-    preload: false,
-    header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
-    showControls: true,
-    hideScreensharing: false,
-    allowIceFallback: true,
-    perParticipantE2EE: true,
-    controlledAudioDevices: platform === "desktop" ? false : true,
-    skipLobby: true,
-    returnToLobby: false,
-    sendNotificationType: "notification",
-    autoLeaveWhenOthersLeft: false,
-    waitForCallPickup: false,
-  };
-  switch (intent) {
-    case UserIntent.StartNewCall:
-      preset.skipLobby = false;
-      preset.callIntent = "video";
-      break;
-    case UserIntent.JoinExistingCall:
-      // On desktop this will be overridden based on which button was used to join the call
-      preset.skipLobby = false;
-      preset.callIntent = "video";
-      break;
-    case UserIntent.StartNewCallVoice:
-      preset.skipLobby = false;
-      preset.callIntent = "audio";
-      break;
-    case UserIntent.JoinExistingCallVoice:
-      // On desktop this will be overridden based on which button was used to join the call
-      preset.skipLobby = false;
-      preset.callIntent = "audio";
-      break;
-    case UserIntent.StartNewCallDMVoice:
-      preset.callIntent = "audio";
-    // Fall through
-    case UserIntent.StartNewCallDM:
-      preset.skipLobby = true;
-      preset.sendNotificationType = "ring";
-      preset.autoLeaveWhenOthersLeft = true;
-      preset.waitForCallPickup = true;
-      preset.callIntent = preset.callIntent ?? "video";
-      break;
-    case UserIntent.JoinExistingCallDMVoice:
-      preset.callIntent = "audio";
-    // Fall through
-    case UserIntent.JoinExistingCallDM:
-      // On desktop this will be overridden based on which button was used to join the call
-      preset.skipLobby = true;
-      preset.autoLeaveWhenOthersLeft = true;
-      preset.callIntent = preset.callIntent ?? "video";
-      break;
-    // Non widget usecase defaults
-    default:
-      preset = {
-        confineToRoom: false,
-        preload: false,
-        header: HeaderStyle.Standard,
-        showControls: true,
-        hideScreensharing: false,
-        allowIceFallback: false,
-        perParticipantE2EE: false,
-        controlledAudioDevices: false,
-        skipLobby: false,
-        returnToLobby: false,
-        sendNotificationType: undefined,
-        autoLeaveWhenOthersLeft: false,
-        waitForCallPickup: false,
-      };
-  }
-  return preset;
-}

src/UrlParams.ts

@@ -9,36 +9,47 @@ Please see LICENSE in the repository root for full details.
 import { createContext, use, useMemo } from "react";
 import { useLocation } from "react-router-dom";
 import { logger } from "matrix-js-sdk/lib/logger";
+import {
+  type RTCCallIntent,
+  type RTCNotificationType,
+} from "matrix-js-sdk/lib/matrixrtc";
 import { pickBy } from "lodash-es";
 
 import { Config } from "./config/Config";
 import { type EncryptionSystem } from "./e2ee/sharedKeyManagement";
 import { E2eeType } from "./e2ee/e2eeType";
-import {
-  BackgroundStyle,
-  configurationForIntent,
-  HeaderStyle,
-  type UrlConfiguration,
-  UserIntent,
-} from "./UrlConfiguration";
+import { platform } from "./Platform";
 import { redact } from "./utils/redact";
 
-// Moved to their own module, so that a host can import them without the rest
-// of this one; re-exported here as they always were
-export {
-  BackgroundStyle,
-  configurationForIntent,
-  HeaderStyle,
-  type UrlConfiguration,
-  UserIntent,
-} from "./UrlConfiguration";
-
 interface RoomIdentifier {
   roomAlias: string | null;
   roomId: string | null;
   viaServers: string[];
 }
 
+export enum UserIntent {
+  StartNewCall = "start_call",
+  JoinExistingCall = "join_existing",
+  StartNewCallVoice = "start_call_voice",
+  JoinExistingCallVoice = "join_existing_voice",
+  StartNewCallDM = "start_call_dm",
+  StartNewCallDMVoice = "start_call_dm_voice",
+  JoinExistingCallDM = "join_existing_dm",
+  JoinExistingCallDMVoice = "join_existing_dm_voice",
+  Unknown = "unknown",
+}
+
+export enum HeaderStyle {
+  None = "none",
+  Standard = "standard",
+  AppBar = "app_bar",
+}
+
+export enum BackgroundStyle {
+  Solid = "solid",
+  Gradient = "gradient",
+}
+
 /**
  * The UrlProperties are used to pass required data to the widget.
  * Those are different in different rooms, users, devices. They do not configure the behavior of the
@@ -155,6 +166,109 @@ export interface UrlProperties {
    */
   background: BackgroundStyle;
 }
+
+/**
+ * The configuration for the app, which can be set via URL parameters.
+ * Those property are different to the UrlProperties, since they are all optional
+ * and configure the behavior of the app. Their value is the same if EC is used in
+ * the same context but with different accounts/users.
+ *
+ * Their defaults can be controlled by the `intent` property.
+ */
+export interface UrlConfiguration {
+  /**
+   * Whether the app should keep the user confined to the current call/room.
+   */
+  confineToRoom: boolean;
+  /**
+   * Whether the app should pause before joining the call until it sees an
+   * io.element.join widget action, allowing it to be preloaded.
+   */
+  preload: boolean;
+  /**
+   * The style of headers to show. "standard" is the default arrangement, "none"
+   * hides the header entirely, and "app_bar" produces a header with a back
+   * button like you might see in mobile apps. The callback for the back button
+   * is window.controls.onBackButtonPressed.
+   */
+  header: HeaderStyle;
+  /**
+   * Whether the controls should be shown. For screen recording no controls can be desired.
+   */
+  showControls: boolean;
+  /**
+   * Whether to hide the screen-sharing button.
+   */
+  hideScreensharing: boolean;
+
+  /**
+   * Whether the app is allowed to use fallback STUN servers for ICE in case the
+   * user's homeserver doesn't provide any.
+   */
+  allowIceFallback: boolean;
+
+  /**
+   * Whether the app should use per participant keys for E2EE.
+   */
+  perParticipantE2EE: boolean;
+  /**
+   * Whether the global JS controls for audio output devices should be enabled,
+   * allowing the list of output devices to be controlled by the app hosting
+   * Element Call.
+   */
+  controlledAudioDevices: boolean;
+  /**
+   * Setting this flag skips the lobby and brings you in the call directly.
+   * In the widget this can be combined with preload to pass the device settings
+   * with the join widget action.
+   */
+  skipLobby: boolean;
+  /**
+   * Setting this flag makes element call show the lobby after leaving a call.
+   * This is useful for video rooms.
+   */
+  returnToLobby: boolean;
+  /**
+   * Whether and what type of notification EC should send, when the user joins the call.
+   */
+  sendNotificationType?: RTCNotificationType;
+  /**
+   * Whether the app should automatically leave the call when there
+   * is no one left in the call.
+   * This is one part to make the call matrixRTC session behave like a telephone call.
+   */
+  autoLeaveWhenOthersLeft: boolean;
+
+  /**
+   * If the client should behave like it is awaiting an answer if a notification was sent (wait for call pick up).
+   * This is a no-op if not combined with sendNotificationType.
+   *
+   * This entails:
+   *  - show ui that it is awaiting an answer
+   *  - play a sound that indicates that it is awaiting an answer
+   *  - auto-dismiss the call widget once the notification lifetime expires on the receivers side.
+   */
+  waitForCallPickup: boolean;
+
+  /**
+   * Whether to enable echo cancellation for audio capture.
+   * Defaults to true.
+   */
+  echoCancellation?: boolean;
+  /**
+   * Whether to enable noise suppression for audio capture.
+   * Defaults to true.
+   */
+  noiseSuppression?: boolean;
+
+  callIntent?: RTCCallIntent;
+}
+
+// If you need to add a new flag to this interface, prefer a name that describes
+// a specific behavior (such as 'confineToRoom'), rather than one that describes
+// the situations that call for this behavior ('isEmbedded'). This makes it
+// clearer what each flag means, and helps us avoid coupling Element Call's
+// behavior to the needs of specific consumers.
 export interface UrlParams extends UrlProperties, UrlConfiguration {}
 
 class ParamParser {
@@ -240,6 +354,97 @@ export const getUrlParams = (
   return params;
 };
 
+/**
+ * The configuration implied by what the user meant to do — if they pressed a
+ * Start Call button this would be `start_call`, and if they pressed Join Call,
+ * `join_existing`.
+ *
+ * These are platform-specific defaults, so that a host can start a call by
+ * saying what the user asked for rather than by setting every parameter itself,
+ * and so that what each intent means is Element Call's decision, made in one
+ * place. A host that wants something else states it alongside the intent.
+ *
+ * {@link UserIntent.Unknown} means no intent was stated, and gives the
+ * standalone app's defaults: Element Call owns the whole page, so it offers the
+ * way out of the room that a hosted call must not.
+ */
+export function configurationForIntent(intent: UserIntent): UrlConfiguration {
+  // Only constants and `platform` here, so that this depends on nothing but
+  // the intent.
+  let preset: UrlConfiguration = {
+    confineToRoom: true,
+    preload: false,
+    header: platform === "desktop" ? HeaderStyle.None : HeaderStyle.AppBar,
+    showControls: true,
+    hideScreensharing: false,
+    allowIceFallback: true,
+    perParticipantE2EE: true,
+    controlledAudioDevices: platform === "desktop" ? false : true,
+    skipLobby: true,
+    returnToLobby: false,
+    sendNotificationType: "notification",
+    autoLeaveWhenOthersLeft: false,
+    waitForCallPickup: false,
+  };
+  switch (intent) {
+    case UserIntent.StartNewCall:
+      preset.skipLobby = false;
+      preset.callIntent = "video";
+      break;
+    case UserIntent.JoinExistingCall:
+      // On desktop this will be overridden based on which button was used to join the call
+      preset.skipLobby = false;
+      preset.callIntent = "video";
+      break;
+    case UserIntent.StartNewCallVoice:
+      preset.skipLobby = false;
+      preset.callIntent = "audio";
+      break;
+    case UserIntent.JoinExistingCallVoice:
+      // On desktop this will be overridden based on which button was used to join the call
+      preset.skipLobby = false;
+      preset.callIntent = "audio";
+      break;
+    case UserIntent.StartNewCallDMVoice:
+      preset.callIntent = "audio";
+    // Fall through
+    case UserIntent.StartNewCallDM:
+      preset.skipLobby = true;
+      preset.sendNotificationType = "ring";
+      preset.autoLeaveWhenOthersLeft = true;
+      preset.waitForCallPickup = true;
+      preset.callIntent = preset.callIntent ?? "video";
+      break;
+    case UserIntent.JoinExistingCallDMVoice:
+      preset.callIntent = "audio";
+    // Fall through
+    case UserIntent.JoinExistingCallDM:
+      // On desktop this will be overridden based on which button was used to join the call
+      preset.skipLobby = true;
+      preset.autoLeaveWhenOthersLeft = true;
+      preset.callIntent = preset.callIntent ?? "video";
+      break;
+    // Non widget usecase defaults
+    default:
+      preset = {
+        confineToRoom: false,
+        preload: false,
+        header: HeaderStyle.Standard,
+        showControls: true,
+        hideScreensharing: false,
+        allowIceFallback: false,
+        perParticipantE2EE: false,
+        controlledAudioDevices: false,
+        skipLobby: false,
+        returnToLobby: false,
+        sendNotificationType: undefined,
+        autoLeaveWhenOthersLeft: false,
+        waitForCallPickup: false,
+      };
+  }
+  return preset;
+}
+
 /**
  * The {@link UrlProperties} for Element Call running as a component inside a
  * host application.
@@ -373,7 +578,7 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
     "intent:",
     intent,
     "\nproperties:",
-    redact(properties, "password", "posthogUserId"),
+    redact(properties, "password"),
     "configuration:",
     configuration,
   );

src/base.css

@@ -5,24 +5,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-/* The styles Element Call needs wherever it is shown: the element defaults and
-custom properties its own stylesheets build on top of.
+/* The styles Element Call needs wherever it is shown: the design tokens, fonts
+and element defaults its own stylesheets build on top of.
 
 Split out from index.css so that Element Call as a component can have these
 without also being given the standalone page's layout, which would style the
-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.
+host's own document. What remains here still speaks of the
+document — normalize.css and the typography below use bare element selectors,
+and the custom properties are declared on `:root` — which is right for the
+page, and is why the component build rewrites it: there every selector is
+confined to Element Call's root element (see component/build/scopeStylesToRoot.ts),
+with `html`, `body` and `:root` becoming that element. Nothing needs to be
+written differently here for that to work, but nothing here may rely on
+reaching the host's document either.
 
 Nothing here should depend on where it lands relative to Element Call's
 component stylesheets: the bundler decides that, and it decides differently for
@@ -30,7 +25,16 @@ 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;

src/button/ReactionToggleButton.module.css

@@ -83,7 +83,7 @@ div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div {
   flex: 0 0 auto;
 }
 
-.reactionPopupMenu .reactionsMenu .reactionButton {
+.reactionButton {
   padding: var(--reaction-button-padding);
   border-radius: var(--cpd-radius-pill-effect);
   font-size: var(--reaction-button-fontsize);

src/button/__snapshots__/ReactionToggleButton.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`Can close reaction dialog 1`] = `
     aria-disabled="false"
     aria-expanded="true"
     aria-haspopup="true"
-    aria-labelledby="_r_bh_"
+    aria-labelledby="_r_bb_"
     class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
     data-kind="primary"
     data-size="lg"

src/components/CallFooter.module.css

@@ -43,10 +43,7 @@ Please see LICENSE in the repository root for full details.
   inset-inline: 0;
 }
 
-/* Keep the footer while it is in use: focus inside it, or a menu opened from
-   it. The menu is portalled out, so the trigger's aria-expanded tracks it. */
-.footer.overlay:has(:focus-visible),
-.footer.overlay:has([aria-expanded="true"]) {
+.footer.overlay:has(:focus-visible) {
   opacity: 1;
   pointer-events: initial;
 }

src/components/CallFooter.stories.tsx

@@ -13,7 +13,6 @@ import { Link } from "@vector-im/compound-web";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { CallFooter, type FooterSnapshot } from "./CallFooter";
 import inCallViewStyles from "../room/InCallView.module.css";
-import styles from "./CallFooter.module.css";
 import { useStaticViewModel } from "../state/ViewModel";
 import { ReactionsSenderContext } from "../reactions/useReactionsSender";
 import { type ReactionOption } from "../reactions";
@@ -138,13 +137,10 @@ export const Default: Story = {
     debugTileLayout: false,
     tileStoreGeneration: undefined,
     audioOptions: [],
-    audioOutputOptions: [],
     videoOptions: [],
     selectedAudio: undefined,
-    selectedAudioOutput: undefined,
     selectedVideo: undefined,
     selectAudioButtonOption: undefined,
-    selectAudioOutputOption: undefined,
     selectVideoButtonOption: undefined,
   },
   parameters: {
@@ -162,46 +158,15 @@ export const WithAudioAndVideoOptions: Story = {
       { label: { type: "name", name: "Microphone 1" }, id: "1" },
       { label: { type: "name", name: "Microphone 2" }, id: "2" },
     ],
-    audioOutputOptions: [
-      { label: { type: "default", name: "Built-in Output" }, id: "default" },
-      { label: { type: "name", name: "Headset" }, id: "2" },
-    ],
     videoOptions: [
       { label: { type: "name", name: "Camera 1" }, id: "1" },
       { label: { type: "name", name: "Camera 2" }, id: "2" },
     ],
     selectedAudio: "2",
-    selectedAudioOutput: "default",
     selectedVideo: "1",
   },
 };
 
-export const StaysWhileAMenuIsOpen: Story = {
-  ...Default,
-  args: {
-    ...WithAudioAndVideoOptions.args,
-    // In a short window the footer overlays the call and hides itself.
-    asOverlay: true,
-    showFooter: true,
-  },
-  play: async ({ canvasElement }): Promise<void> => {
-    const footer = canvasElement.querySelector<HTMLElement>(
-      '[data-testid="footer-container"]',
-    )!;
-    await userEvent.click(
-      within(canvasElement).getByRole("button", { name: "Microphone" }),
-    );
-    await expect(document.body.querySelector('[role="menu"]')).not.toBeNull();
-
-    // The call hides the footer with this class.
-    footer.classList.add(styles.hidden);
-
-    // Read after the 0.15s fade, not mid-transition.
-    await new Promise((settled) => setTimeout(settled, 400));
-    await expect(getComputedStyle(footer).opacity).toBe("1");
-  },
-};
-
 export const AudioBusy: Story = {
   ...Default,
   args: {

src/components/CallFooter.tsx

@@ -99,15 +99,11 @@ export interface FooterState {
 
   /** Providing no options `[]` or `undefined` will imply that we dont have a audio fast switcher */
   audioOptions: MenuOptions[];
-  /** Output (speaker) devices. */
-  audioOutputOptions: MenuOptions[];
   /** Providing no options `[]` or `undefined` will imply that we dont have a audio fast switcher */
   videoOptions: MenuOptions[];
   selectedAudio: string | undefined;
-  selectedAudioOutput: string | undefined;
   selectedVideo: string | undefined;
   selectAudioButtonOption: ((deviceId: string) => void) | undefined;
-  selectAudioOutputOption: ((deviceId: string) => void) | undefined;
   selectVideoButtonOption: ((option: string) => void) | undefined;
 }
 
@@ -147,9 +143,6 @@ export const CallFooter: FC<FooterProps> = ({
   const audioOptions = useBehavior(vm.audioOptions$);
   const selectedAudio = useBehavior(vm.selectedAudio$);
   const selectAudioButtonOption = useBehavior(vm.selectAudioButtonOption$);
-  const audioOutputOptions = useBehavior(vm.audioOutputOptions$);
-  const selectedAudioOutput = useBehavior(vm.selectedAudioOutput$);
-  const selectAudioOutputOption = useBehavior(vm.selectAudioOutputOption$);
   const selectVideoButtonOption = useBehavior(vm.selectVideoButtonOption$);
   const toggleBlur = useBehavior(vm.toggleBlur$);
   const videoBlurEnabled = useBehavior(vm.videoBlurEnabled$);
@@ -175,6 +168,7 @@ export const CallFooter: FC<FooterProps> = ({
   if ((audioOptions?.length ?? 0) > 0) {
     buttons.push(
       <MediaMuteAndSwitchButton
+        title={"Mic Source"}
         key="audio"
         iconsAndLabels="audio"
         enabled={audioEnabled ?? false}
@@ -184,9 +178,6 @@ export const CallFooter: FC<FooterProps> = ({
         options={audioOptions}
         selectedOption={selectedAudio}
         onSelect={selectAudioButtonOption}
-        outputOptions={audioOutputOptions}
-        selectedOutputOption={selectedAudioOutput}
-        onSelectOutput={selectAudioOutputOption}
       />,
     );
   } else {
@@ -206,6 +197,7 @@ export const CallFooter: FC<FooterProps> = ({
   if ((videoOptions?.length ?? 0) > 0) {
     buttons.push(
       <MediaMuteAndSwitchButton
+        title={"Camera Source"}
         key="video"
         iconsAndLabels="video"
         enabled={videoEnabled ?? false}

src/components/CallFooterViewModel.test.ts

@@ -30,11 +30,6 @@ vi.mock("@livekit/track-processors", () => ({
   supportsBackgroundProcessors: (): boolean => false,
 }));
 
-const outputSelectionMock = vi.hoisted(() => vi.fn(() => true));
-vi.mock("livekit-client", () => ({
-  supportsAudioOutputSelection: (): boolean => outputSelectionMock(),
-}));
-
 /**
  * Returns the minimum set of CallViewModel fields required by
  * createCallFooterViewModel, with all other properties stubbed to
@@ -101,65 +96,6 @@ const twoMicsAndOneCamMediaDevices = mockMediaDevices({
 });
 
 describe("createCallFooterViewModel", () => {
-  describe("selectAudioOutputOption", () => {
-    function buildFooterVm(): ReturnType<typeof createCallFooterViewModel> {
-      platformMock.mockReturnValue("desktop");
-      return createCallFooterViewModel(
-        testScope(),
-        buildMinimalCallViewModel(gridLayout),
-        mockMuteStates(),
-        twoMicsAndOneCamMediaDevices,
-        /* reactionIdentifier */ undefined,
-        { showControls: true, header: HeaderStyle.Standard },
-      );
-    }
-
-    it("is withheld where the platform cannot route audio to a chosen device", () => {
-      outputSelectionMock.mockReturnValue(false);
-      expect(buildFooterVm().selectAudioOutputOption$.value).toBeUndefined();
-    });
-
-    it("is offered where the platform can route audio to a chosen device", () => {
-      outputSelectionMock.mockReturnValue(true);
-      expect(buildFooterVm().selectAudioOutputOption$.value).toBeDefined();
-    });
-  });
-
-  describe("audioOutputOptions", () => {
-    it("is an empty list, not absent, where the platform enumerates no outputs", () => {
-      platformMock.mockReturnValue("desktop");
-      outputSelectionMock.mockReturnValue(true);
-
-      const vm = createCallFooterViewModel(
-        testScope(),
-        buildMinimalCallViewModel(gridLayout),
-        mockMuteStates(),
-        mockMediaDevices({
-          audioInput: {
-            available$: constant(
-              new Map<string, DeviceLabel>([
-                ["mic1", { type: "name", name: "Microphone 1" }],
-              ]),
-            ),
-            selected$: constant(undefined),
-            select: vi.fn(),
-          },
-          // As Safari: no outputs listed.
-          audioOutput: {
-            available$: constant(new Map<string, DeviceLabel>()),
-            selected$: constant(undefined),
-            select: vi.fn(),
-          },
-        }),
-        /* reactionIdentifier */ undefined,
-        { showControls: true, header: HeaderStyle.Standard },
-      );
-
-      // Empty, not undefined: undefined would hide the section.
-      expect(vm.audioOutputOptions$.value).toEqual([]);
-    });
-  });
-
   describe("audioOptions and videoOptions", () => {
     function checkEmptyFor(platform: string, layout: Layout): void {
       platformMock.mockReturnValue(platform);

src/components/CallFooterViewModel.tsx

@@ -5,9 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { combineLatest, map, type Observable, switchMap } from "rxjs";
+import { combineLatest, map, switchMap } from "rxjs";
 import { supportsBackgroundProcessors } from "@livekit/track-processors";
-import { supportsAudioOutputSelection } from "livekit-client";
 
 import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
 import { type MenuOptions } from "./MediaMuteAndSwitchButton";
@@ -68,50 +67,49 @@ function buildDeviceBehaviors(
   | "audioOptions$"
   | "selectedAudio$"
   | "selectAudioButtonOption$"
-  | "audioOutputOptions$"
-  | "selectedAudioOutput$"
-  | "selectAudioOutputOption$"
   | "videoOptions$"
   | "selectedVideo$"
   | "selectVideoButtonOption$"
   | "toggleBlur$"
   | "videoBlurEnabled$"
 > {
-  const options$ = (
-    available$: Behavior<Map<string, MenuOptions["label"]>>,
-  ): Observable<MenuOptions[]> =>
-    disableSwitcher$.pipe(
-      switchMap((disable) =>
-        disable
-          ? constant([] as MenuOptions[])
-          : available$.pipe(
-              map((available) =>
-                [...available.entries()].map(([id, label]) => ({ id, label })),
-              ),
-            ),
-      ),
-    );
-
   return {
-    audioOptions$: scope.behavior(options$(mediaDevices.audioInput.available$)),
+    audioOptions$: scope.behavior(
+      disableSwitcher$.pipe(
+        switchMap((disable) =>
+          disable
+            ? constant([] as MenuOptions[])
+            : mediaDevices.audioInput.available$.pipe(
+                map((available) =>
+                  [...available.entries()].map(([id, label]) => ({
+                    id,
+                    label,
+                  })),
+                ),
+              ),
+        ),
+      ),
+    ),
     selectedAudio$: scope.behavior(
       mediaDevices.audioInput.selected$.pipe(map((s) => s?.id)),
     ),
     selectAudioButtonOption$: constant(mediaDevices.audioInput.select),
-    audioOutputOptions$: scope.behavior(
-      options$(mediaDevices.audioOutput.available$),
+    videoOptions$: scope.behavior(
+      disableSwitcher$.pipe(
+        switchMap((disable) =>
+          disable
+            ? constant([] as MenuOptions[])
+            : mediaDevices.videoInput.available$.pipe(
+                map((available) =>
+                  [...available.entries()].map(([id, label]) => ({
+                    id,
+                    label,
+                  })),
+                ),
+              ),
+        ),
+      ),
     ),
-    selectedAudioOutput$: scope.behavior(
-      mediaDevices.audioOutput.selected$.pipe(map((s) => s?.id)),
-    ),
-    // Withheld where the platform can't route audio to a chosen device, which
-    // disables the speaker section.
-    selectAudioOutputOption$: constant(
-      supportsAudioOutputSelection()
-        ? mediaDevices.audioOutput.select
-        : undefined,
-    ),
-    videoOptions$: scope.behavior(options$(mediaDevices.videoInput.available$)),
     selectedVideo$: scope.behavior(
       mediaDevices.videoInput.selected$.pipe(map((s) => s?.id)),
     ),
@@ -265,13 +263,10 @@ export function createLobbyFooterViewModel(
       reactionData: undefined,
       tileStoreGeneration: undefined,
       audioOptions: undefined,
-      audioOutputOptions: undefined,
       videoOptions: undefined,
       selectedAudio: undefined,
-      selectedAudioOutput: undefined,
       selectedVideo: undefined,
       selectAudioButtonOption: undefined,
-      selectAudioOutputOption: undefined,
       selectVideoButtonOption: undefined,
     }),
     ...buildMuteBehaviors(scope, muteStates),

src/components/MediaMuteAndSwitchButton.module.css

@@ -35,60 +35,3 @@ Please see LICENSE in the repository root for full details.
     transform: rotate(360deg);
   }
 }
-
-.menu {
-  display: flex;
-  flex-direction: column;
-}
-
-/* Only the device lists scroll, bounded by the measured call area: the menu is
-   portalled out of the root, so CSS can't size it against the call. */
-.deviceList {
-  overflow-y: auto;
-  min-block-size: 0;
-  max-block-size: var(--device-list-max-height);
-  /* Keeps a row reached by keyboard clear of the sticky heading and meter. */
-  scroll-padding-block: var(--device-list-scroll-padding-start, 0)
-    var(--device-list-scroll-padding-end, 0);
-}
-
-/* Compound's heading rule heads each section; the design adds space below it. */
-.menu h3 {
-  margin-block-end: var(--cpd-space-5x);
-}
-
-/* And more above a heading that follows another section. */
-.deviceList [role="group"] + [role="group"] h3 {
-  margin-block-start: var(--cpd-space-7x);
-}
-
-/* Sticky within its own section. Opaque and inset a border width so it doesn't
-   paint over the menu's outline. */
-.sectionHeading {
-  position: sticky;
-  inset-block-start: 0;
-  background: var(--cpd-color-bg-canvas-default);
-  margin-inline: var(--cpd-border-width-1);
-  margin-block-start: var(--cpd-border-width-1);
-}
-
-/* Sticky at the foot of the microphone section; opaque and inset as above. */
-.stickyMeter {
-  position: sticky;
-  inset-block-end: 0;
-  background: var(--cpd-color-bg-canvas-default);
-  margin-inline: var(--cpd-border-width-1);
-  margin-block-end: var(--cpd-border-width-1);
-}
-
-/* Radix focuses whatever the pointer is over, so the browser's ring would
-   follow the mouse. Replaced by one shown only for keyboard focus. */
-.menu [role^="menuitem"]:focus,
-.menu [role^="menuitem"]:focus-visible {
-  outline: none;
-}
-
-.menu[data-focus-source="keyboard"] [role^="menuitem"]:focus {
-  outline: var(--cpd-border-width-2) solid var(--cpd-color-border-focused);
-  outline-offset: calc(-1 * var(--cpd-border-width-2));
-}

src/components/MediaMuteAndSwitchButton.stories.tsx

@@ -5,15 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { fn, userEvent, waitFor, within, expect } from "storybook/test";
-import { useEffect, useState, type FC, type JSX, type ReactNode } from "react";
+import { fn, userEvent, within, expect } from "storybook/test";
+import { type JSX } from "react";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { MediaMuteAndSwitchButton } from "./MediaMuteAndSwitchButton";
-import styles from "./MediaMuteAndSwitchButton.module.css";
-import meterStyles from "./MicrophoneLevelMeter.module.css";
 import { MediaDevicesContext } from "../MediaDevicesContext";
-import { RootElementProvider } from "../RootElementContext";
 import { MediaDevices } from "../state/MediaDevices";
 import { globalScope } from "../state/ObservableScope";
 
@@ -21,74 +18,12 @@ const mediaDevices = new MediaDevices(globalScope, {
   controlledAudioDevices: false,
 });
 
-/** Supplies a microphone, a wavering tone: a story's invented device ids match no hardware. */
-const WithAMicrophone: FC<{ children: ReactNode }> = ({ children }) => {
-  useEffect(() => {
-    const context = new AudioContext();
-    const microphone = context.createMediaStreamDestination();
-    const tone = context.createOscillator();
-    const loudness = context.createGain();
-    // Wavers between a third and two thirds of full scale, so it reads as live.
-    const swing = context.createOscillator();
-    const depth = context.createGain();
-    loudness.gain.value = 0.25;
-    depth.gain.value = 0.2;
-    swing.frequency.value = 0.6;
-    tone.frequency.value = 220;
-    swing.connect(depth).connect(loudness.gain);
-    tone.connect(loudness).connect(microphone);
-    tone.start();
-    swing.start();
-
-    const devices = navigator.mediaDevices;
-    const openedForReal = devices.getUserMedia.bind(devices);
-    const opened = Promise.resolve(microphone.stream);
-    // A fresh clone each time, so a caller stopping its tracks doesn't end the next.
-    devices.getUserMedia = async (): Promise<MediaStream> =>
-      (await opened).clone();
-
-    return (): void => {
-      devices.getUserMedia = openedForReal;
-      tone.stop();
-      swing.stop();
-      void context.close();
-    };
-  }, []);
-
-  return <>{children}</>;
-};
-
-/** Supplies a call-sized root. Without one the list is bounded by the whole Storybook frame. */
-const WithACallArea: FC<{ children: ReactNode }> = ({ children }) => {
-  const [callArea, setCallArea] = useState<HTMLElement | null>(null);
-  return (
-    <div
-      ref={setCallArea}
-      style={{
-        // A call's size: anything smaller makes a short device list scroll.
-        blockSize: 720,
-        display: "flex",
-        alignItems: "flex-end",
-        justifyContent: "center",
-      }}
-    >
-      {callArea !== null && (
-        <RootElementProvider value={callArea}>{children}</RootElementProvider>
-      )}
-    </div>
-  );
-};
-
 const meta = {
   component: MediaMuteAndSwitchButton,
   decorators: [
     (Story): JSX.Element => (
       <MediaDevicesContext value={mediaDevices}>
-        <WithACallArea>
-          <WithAMicrophone>
-            <Story />
-          </WithAMicrophone>
-        </WithACallArea>
+        <Story />
       </MediaDevicesContext>
     ),
   ],
@@ -99,6 +34,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
+    title: "SomeMenu",
     iconsAndLabels: "audio",
     enabled: true,
     options: [
@@ -106,13 +42,6 @@ export const Default: Story = {
       { label: { type: "name", name: "Option 2" }, id: "2" },
     ],
     selectedOption: "1",
-    // The footer always passes an output list to the audio menu.
-    outputOptions: [
-      { label: { type: "default", name: "Built-in Output" }, id: "default" },
-      { label: { type: "name", name: "Headset" }, id: "spk2" },
-    ],
-    selectedOutputOption: "default",
-    onSelectOutput: fn(),
     onMuteClick: fn(),
     onSelect: fn(),
   },
@@ -121,6 +50,7 @@ export const Default: Story = {
 export const AudioMute: Story = {
   args: {
     ...Default.args,
+    title: "Microphone",
     iconsAndLabels: "audio",
     enabled: false,
     options: [
@@ -143,19 +73,21 @@ export const AudioMute: Story = {
 
 export const AudioUnmute: Story = {
   args: {
-    ...Default.args,
+    title: "Microphone",
     iconsAndLabels: "audio",
     enabled: true,
     options: [
       { label: { type: "name", name: "Microphone 1" }, id: "1" },
       { label: { type: "name", name: "Microphone 2" }, id: "2" },
     ],
+
     selectedOption: "2",
   },
 };
 
 export const VideoMute: Story = {
   args: {
+    title: "Camera",
     iconsAndLabels: "video",
     enabled: false,
     options: [
@@ -169,6 +101,7 @@ export const VideoMute: Story = {
 
 export const VideoUnmute: Story = {
   args: {
+    title: "Camera",
     iconsAndLabels: "video",
     enabled: true,
     options: [
@@ -180,479 +113,3 @@ export const VideoUnmute: Story = {
     selectedOption: "2",
   },
 };
-
-export const SpeakerAndMicrophoneSections: Story = {
-  args: {
-    ...Default.args,
-    iconsAndLabels: "audio",
-    enabled: true,
-    options: [
-      { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-      { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
-    ],
-    selectedOption: "mic1",
-    outputOptions: [
-      { label: { type: "default", name: "Built-in Output" }, id: "default" },
-      { label: { type: "name", name: "Headset" }, id: "spk2" },
-    ],
-    selectedOutputOption: "default",
-    onSelectOutput: fn(),
-  },
-  play: async ({ args, canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
-
-    const headset = await within(document.body).findByRole("menuitemradio", {
-      name: "Headset",
-    });
-    await userEvent.click(headset);
-    await expect(args.onSelectOutput).toHaveBeenCalledWith("spk2");
-
-    // A few devices fit, so the list doesn't scroll.
-    const list = document.body.querySelector<HTMLElement>(
-      `.${styles.deviceList}`,
-    )!;
-    await expect(list.scrollHeight).toBe(list.clientHeight);
-
-    // Each section is headed by its own edge-to-edge rule, with no separator.
-    const menu = document.body.querySelector("[role='menu']")!;
-    await expect(
-      document.body.querySelectorAll("[role='separator']"),
-    ).toHaveLength(0);
-    const headings = document.body.querySelectorAll<HTMLElement>(
-      `.${styles.sectionHeading}`,
-    );
-    await expect(headings).toHaveLength(2);
-    const frame = menu.getBoundingClientRect();
-    for (const heading of headings) {
-      const rule = heading.querySelector("h3")!;
-      await expect(
-        Number.parseFloat(getComputedStyle(rule).borderBottomWidth),
-      ).toBeGreaterThan(0);
-      // Edge to edge, within the frame.
-      const box = rule.getBoundingClientRect();
-      await expect(box.left - frame.left).toBeLessThanOrEqual(2);
-      await expect(frame.right - box.right).toBeLessThanOrEqual(2);
-    }
-
-    // The first device sits further below the rule than from the menu's edge.
-    // Asserted as a relationship, not pixels: the asymmetry is the design.
-    const control = document.body.querySelector("input[type='radio']")!;
-    const ruleBottom = headings[0]
-      .querySelector("h3")!
-      .getBoundingClientRect().bottom;
-    const box = control.getBoundingClientRect();
-    await expect(box.top - ruleBottom).toBeGreaterThan(box.left - frame.left);
-
-    // And a section stands further from the one above than from its own first
-    // device.
-    const groups = document.body.querySelectorAll("[role='group']");
-    const speakers = groups[0].querySelectorAll("input[type='radio']");
-    const lastSpeaker = speakers[speakers.length - 1].getBoundingClientRect();
-    const nextHeading = groups[1]!.querySelector("h3")!.getBoundingClientRect();
-    await expect(nextHeading.top - lastSpeaker.bottom).toBeGreaterThan(
-      box.top - ruleBottom,
-    );
-  },
-};
-
-export const OutputCannotBeChosen: Story = {
-  args: {
-    ...Default.args,
-    iconsAndLabels: "audio",
-    enabled: true,
-    options: [
-      { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-      { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
-    ],
-    selectedOption: "mic1",
-    outputOptions: [
-      { label: { type: "name", name: "Speakers" }, id: "spk1" },
-      { label: { type: "name", name: "Headset" }, id: "spk2" },
-    ],
-    selectedOutputOption: "spk1",
-    // No callback: the speakers are listed, but none can be picked.
-    onSelectOutput: undefined,
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
-
-    const speakers = await within(document.body).findByRole("menuitemradio", {
-      name: "Speakers",
-    });
-    await expect(speakers).toHaveAttribute("aria-disabled", "true");
-  },
-};
-
-export const OnlyOneDevice: Story = {
-  args: {
-    ...Default.args,
-    iconsAndLabels: "audio",
-    enabled: true,
-    options: [{ label: { type: "name", name: "Microphone 1" }, id: "mic1" }],
-    selectedOption: "mic1",
-    outputOptions: [{ label: { type: "name", name: "Speakers" }, id: "spk1" }],
-    selectedOutputOption: "spk1",
-    onSelectOutput: fn(),
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
-
-    // Shown, disabled, rather than hidden.
-    const only = await within(document.body).findByRole("menuitemradio", {
-      name: "Microphone 1",
-    });
-    await expect(only).toHaveAttribute("aria-disabled", "true");
-  },
-};
-
-/** A requested device hasn't arrived: nothing in either section can be picked. */
-export const SelectionSettling: Story = {
-  args: {
-    ...Default.args,
-    iconsAndLabels: "audio",
-    enabled: true,
-    options: [
-      { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-      { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
-    ],
-    selectedOption: "mic1",
-    outputOptions: [
-      { label: { type: "name", name: "Speakers" }, id: "spk1" },
-      { label: { type: "name", name: "Headset" }, id: "spk2" },
-    ],
-    selectedOutputOption: "spk1",
-    onSelectOutput: fn(),
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
-    const menu = within(document.body);
-
-    // selectedOption never changes, so the request stays in flight.
-    await userEvent.click(
-      await menu.findByRole("menuitemradio", { name: "Microphone 2" }),
-    );
-
-    await expect(await menu.findByLabelText("Activating…")).toBeVisible();
-    for (const item of menu.getAllByRole("menuitemradio"))
-      await expect(item).toHaveAttribute("aria-disabled", "true");
-  },
-};
-
-/**
- * The ring shows for keyboard focus only. Asserted on the painted outline:
- * asserting data-focus-source would still pass with the CSS rule deleted.
- */
-export const KeyboardFocusRing: Story = {
-  args: {
-    ...Default.args,
-    iconsAndLabels: "audio",
-    enabled: true,
-    options: [
-      { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-      { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
-    ],
-    selectedOption: "mic1",
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
-    const menu = within(document.body);
-    const first = await menu.findByRole("menuitemradio", {
-      name: "Microphone 1",
-    });
-
-    // Opened by pointer: no ring, even though Radix has moved focus.
-    await expect(outlineWidth(first)).toBe(0);
-
-    await userEvent.keyboard("{ArrowDown}");
-    const focused = document.activeElement as HTMLElement;
-    await expect(focused).toHaveRole("menuitemradio");
-    await expect(outlineWidth(focused)).toBeGreaterThan(0);
-
-    // And the pointer takes it away again.
-    await userEvent.hover(first);
-    await expect(outlineWidth(document.activeElement as HTMLElement)).toBe(0);
-  },
-};
-
-/** The list scrolls; the meter stays at the foot of the microphone section. */
-export const ManyDevices: Story = {
-  args: {
-    ...Default.args,
-    iconsAndLabels: "audio",
-    enabled: true,
-    options: Array.from({ length: 20 }, (_, i) => ({
-      label: { type: "name" as const, name: `Microphone ${i + 1}` },
-      id: `mic${i + 1}`,
-    })),
-    selectedOption: "mic1",
-    outputOptions: Array.from({ length: 6 }, (_, i) => ({
-      label: { type: "name" as const, name: `Speaker ${i + 1}` },
-      id: `spk${i + 1}`,
-    })),
-    selectedOutputOption: "spk1",
-    onSelectOutput: fn(),
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
-    const menu = within(document.body);
-
-    // The sticky wrapper rather than the meter: without a fake microphone (as on
-    // WebKit) the meter shows a message instead of a level.
-    const list = document.body.querySelector<HTMLElement>(
-      `.${styles.deviceList}`,
-    )!;
-    const sticky = await waitFor(() => {
-      const element = document.body.querySelector<HTMLElement>(
-        `.${styles.stickyMeter}`,
-      );
-      if (element === null) throw new Error("the meter has not rendered yet");
-      return element;
-    });
-    await expect(list.scrollHeight).toBeGreaterThan(list.clientHeight);
-
-    // Scrolled so the microphone section starts at the top: only there does a
-    // pinned meter differ from one that is simply last.
-    const group = await menu.findByRole("group", { name: "Microphone" });
-    list.scrollTop +=
-      group.getBoundingClientRect().top - list.getBoundingClientRect().top;
-    await expect(list.scrollTop + list.clientHeight).toBeLessThan(
-      list.scrollHeight,
-    );
-
-    const scrollport = list.getBoundingClientRect();
-    const pinned = sticky.getBoundingClientRect();
-    await expect(pinned.bottom).toBeLessThanOrEqual(scrollport.bottom + 1);
-    await expect(pinned.top).toBeGreaterThanOrEqual(scrollport.top - 1);
-
-    // The whole menu is on screen, not bounded by the document.
-    const frame = document.body
-      .querySelector("[role='menu']")!
-      .getBoundingClientRect();
-    await expect(frame.top).toBeGreaterThanOrEqual(0);
-    await expect(frame.bottom).toBeLessThanOrEqual(window.innerHeight + 1);
-
-    // The meter is the menu's one opaque part, so it must stay inside the frame.
-    await expect(pinned.left).toBeGreaterThan(frame.left);
-    await expect(pinned.right).toBeLessThan(frame.right);
-  },
-};
-
-/** Painted outline width, in px. */
-function outlineWidth(element: HTMLElement): number {
-  const { outlineStyle, outlineWidth } = getComputedStyle(element);
-  if (outlineStyle === "none") return 0;
-  return Number.parseFloat(outlineWidth) || 0;
-}
-
-/** Safari lists no outputs: a disabled, selected Default stands in. */
-export const OutputNotEnumerated: Story = {
-  args: {
-    ...Default.args,
-    iconsAndLabels: "audio",
-    enabled: true,
-    options: [
-      { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-      { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
-    ],
-    selectedOption: "mic1",
-    outputOptions: [],
-    selectedOutputOption: undefined,
-    onSelectOutput: undefined,
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
-
-    const speakers = await within(document.body).findByRole("menuitemradio", {
-      name: "Default",
-    });
-    await expect(speakers).toHaveAttribute("aria-disabled", "true");
-  },
-};
-
-/** The meter's icon shares the radio controls' centre line; only a real browser lays this out. */
-export const MeterAlignsWithTheDeviceRows: Story = {
-  args: {
-    ...Default.args,
-    iconsAndLabels: "audio",
-    enabled: true,
-    options: [
-      { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-      { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
-    ],
-    selectedOption: "mic1",
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
-
-    const menu = document.body.querySelector("[role='menu']")!;
-    const radio = menu.querySelector("input[type='radio']")!;
-    const icon = await waitFor(() => {
-      const element = document.body.querySelector(`.${meterStyles.icon}`);
-      if (element === null) throw new Error("the meter has not rendered yet");
-      return element;
-    });
-
-    // A pixel of slack, for subpixel layout.
-    await expect(Math.abs(centre(icon) - centre(radio))).toBeLessThanOrEqual(1);
-  },
-};
-
-/** Inline-axis centre of an element. */
-function centre(element: Element): number {
-  const box = element.getBoundingClientRect();
-  return box.left + box.width / 2;
-}
-
-/** Every row the keyboard reaches is fully visible, not under a heading or the meter. */
-export const KeyboardReachesEveryDevice: Story = {
-  args: {
-    ...Default.args,
-    iconsAndLabels: "audio",
-    enabled: true,
-    // Enough to scroll both ways, so either end can hide a row.
-    options: Array.from({ length: 20 }, (_, i) => ({
-      label: { type: "name" as const, name: `Microphone ${i + 1}` },
-      id: `mic${i + 1}`,
-    })),
-    selectedOption: "mic1",
-    outputOptions: Array.from({ length: 4 }, (_, i) => ({
-      label: { type: "name" as const, name: `Speaker ${i + 1}` },
-      id: `spk${i + 1}`,
-    })),
-    selectedOutputOption: "spk1",
-    onSelectOutput: fn(),
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
-
-    const meter = await waitFor(() => {
-      const element = document.body.querySelector<HTMLElement>(
-        `.${styles.stickyMeter}`,
-      );
-      if (element === null) throw new Error("the meter has not rendered yet");
-      return element;
-    });
-
-    // Drawn over the list: the sticky headings and the meter.
-    const overlays = [
-      meter,
-      ...document.body.querySelectorAll<HTMLElement>(
-        `.${styles.sectionHeading}`,
-      ),
-    ];
-    const items = within(document.body).getAllByRole("menuitemradio");
-
-    // Down to the last device and back up.
-    for (const key of ["{ArrowDown}", "{ArrowUp}"])
-      for (let i = 0; i < items.length; i++) {
-        await userEvent.keyboard(key);
-        const focused = document.activeElement as HTMLElement;
-        await expect(focused).toHaveRole("menuitemradio");
-        // Checked as overlap: a heading only covers rows while its section is on
-        // screen.
-        await expect(overlapping(focused, overlays)).toBeLessThanOrEqual(1);
-      }
-  },
-};
-
-/** A section's heading stays at the top while the section is in view, and leaves with it. */
-export const HeadingsStayWhileScrolling: Story = {
-  args: {
-    ...Default.args,
-    iconsAndLabels: "audio",
-    enabled: true,
-    options: Array.from({ length: 20 }, (_, i) => ({
-      label: { type: "name" as const, name: `Microphone ${i + 1}` },
-      id: `mic${i + 1}`,
-    })),
-    selectedOption: "mic1",
-    outputOptions: Array.from({ length: 4 }, (_, i) => ({
-      label: { type: "name" as const, name: `Speaker ${i + 1}` },
-      id: `spk${i + 1}`,
-    })),
-    selectedOutputOption: "spk1",
-    onSelectOutput: fn(),
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
-    const menu = within(document.body);
-
-    const list = document.body.querySelector<HTMLElement>(
-      `.${styles.deviceList}`,
-    )!;
-    const group = await menu.findByRole("group", { name: "Microphone" });
-    // By class: the heading is aria-hidden, and its group carries the name.
-    const heading = group.querySelector<HTMLElement>(
-      `.${styles.sectionHeading}`,
-    )!;
-
-    // Far enough that the heading is only on screen if it is stuck there.
-    list.scrollTop +=
-      group.getBoundingClientRect().top - list.getBoundingClientRect().top + 80;
-
-    const scrollport = list.getBoundingClientRect();
-    await expect(heading.getBoundingClientRect().top).toBeLessThanOrEqual(
-      scrollport.top + 2,
-    );
-    await expect(heading.getBoundingClientRect().bottom).toBeGreaterThan(
-      scrollport.top,
-    );
-    // Clear of the menu's frame.
-    const frame = document.body
-      .querySelector("[role='menu']")!
-      .getBoundingClientRect();
-    await expect(heading.getBoundingClientRect().left).toBeGreaterThan(
-      frame.left,
-    );
-  },
-};
-
-/** How far the most overlapping of `overlays` covers `element`, in px. */
-function overlapping(element: Element, overlays: Element[]): number {
-  const box = element.getBoundingClientRect();
-  return overlays.reduce((worst, overlay) => {
-    const over = overlay.getBoundingClientRect();
-    const shared =
-      Math.min(box.bottom, over.bottom) - Math.max(box.top, over.top);
-    return Math.max(worst, shared);
-  }, 0);
-}
-
-/** The blur toggle gets the keyboard ring too: it is the menu's child, not the list's. */
-export const FocusRingCoversTheBlurToggle: Story = {
-  args: {
-    ...VideoUnmute.args,
-    iconsAndLabels: "video",
-    videoBlurEnabled: false,
-    videoBlurToggleClick: fn(),
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole("button", { name: "Camera" }));
-    const toggle = await within(document.body).findByRole("menuitemcheckbox", {
-      name: /Blur background/,
-    });
-
-    // Arrow down past the cameras to the toggle.
-    for (let i = 0; i < 6 && document.activeElement !== toggle; i++)
-      await userEvent.keyboard("{ArrowDown}");
-    await expect(document.activeElement).toBe(toggle);
-    // The same ring the device rows get.
-    await expect(outlineWidth(toggle)).toBeGreaterThan(0);
-
-    // And the pointer takes it away, with the toggle still focused.
-    await userEvent.hover(toggle);
-    await expect(document.activeElement).toBe(toggle);
-    await expect(outlineWidth(toggle)).toBe(0);
-  },
-};

src/components/MediaMuteAndSwitchButton.test.tsx

@@ -5,61 +5,40 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { afterEach, describe, expect, test, vi } from "vitest";
-import { axe } from "vitest-axe";
-import {
-  act,
-  render,
-  screen,
-  within,
-  type RenderResult,
-} from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import { act, render, screen, type RenderResult } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { Profiler, type JSX, useState, type ReactNode } from "react";
+import { type JSX, useState, type ReactNode } from "react";
 import { TooltipProvider } from "@vector-im/compound-web";
 
-import {
-  MediaMuteAndSwitchButton,
-  type MenuOptions,
-} from "./MediaMuteAndSwitchButton";
+import { MediaMuteAndSwitchButton } from "./MediaMuteAndSwitchButton";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { type MediaDevices } from "../state/MediaDevices";
-import { restoreAudioCapture, stubAudioCapture } from "../utils/test";
 
 interface RenderOptions {
   requestDeviceNames: () => void;
 }
 
-function withProviders(
+function renderComponent(
   component: ReactNode,
   { requestDeviceNames = (): void => {} }: Partial<RenderOptions> = {},
-): JSX.Element {
-  return (
+): RenderResult {
+  return render(
     <TooltipProvider>
       <MediaDevicesContext
         value={{ requestDeviceNames } as unknown as MediaDevices}
       >
         {component}
       </MediaDevicesContext>
-    </TooltipProvider>
+    </TooltipProvider>,
   );
 }
 
-function renderComponent(
-  component: ReactNode,
-  options: Partial<RenderOptions> = {},
-): RenderResult {
-  return render(withProviders(component, options));
-}
-
 describe("MediaMuteAndSwitchButton", () => {
-  // Only one test stubs the capture; don't let it leak into the rest.
-  afterEach(restoreAudioCapture);
-
   test("renders", () => {
     const { container } = renderComponent(
       <TooltipProvider>
-        <MediaMuteAndSwitchButton iconsAndLabels={"audio"} />
+        <MediaMuteAndSwitchButton title={"Switcher"} iconsAndLabels={"audio"} />
       </TooltipProvider>,
     );
     expect(container).toMatchSnapshot();
@@ -71,7 +50,11 @@ describe("MediaMuteAndSwitchButton", () => {
       enabled: boolean,
     ): RenderResult => {
       return renderComponent(
-        <MediaMuteAndSwitchButton iconsAndLabels={type} enabled={enabled} />,
+        <MediaMuteAndSwitchButton
+          title={"Switcher"}
+          iconsAndLabels={type}
+          enabled={enabled}
+        />,
       );
     };
     const renderAudioEndabled = renderLabels("audio", true);
@@ -98,6 +81,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const onMute = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title={"Switcher"}
         onMuteClick={onMute}
         iconsAndLabels="audio"
         enabled={true}
@@ -114,6 +98,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const onMute = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title={"Switcher"}
         onMuteClick={onMute}
         iconsAndLabels="audio"
         enabled={true}
@@ -134,6 +119,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const onMute = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title={"Switcher"}
         onMuteClick={onMute}
         iconsAndLabels="video"
         enabled={true}
@@ -153,7 +139,11 @@ describe("MediaMuteAndSwitchButton", () => {
     const user = userEvent.setup();
     const requestDeviceNames = vi.fn();
     renderComponent(
-      <MediaMuteAndSwitchButton iconsAndLabels="audio" enabled />,
+      <MediaMuteAndSwitchButton
+        title="Switcher"
+        iconsAndLabels="audio"
+        enabled
+      />,
       { requestDeviceNames },
     );
 
@@ -167,6 +157,7 @@ describe("MediaMuteAndSwitchButton", () => {
     renderComponent(
       <>
         <MediaMuteAndSwitchButton
+          title="Switcher"
           iconsAndLabels="audio"
           enabled
           options={[
@@ -176,6 +167,7 @@ describe("MediaMuteAndSwitchButton", () => {
           selectedOption="mic1"
         />
         <MediaMuteAndSwitchButton
+          title="Switcher"
           iconsAndLabels="video"
           enabled
           options={[
@@ -201,6 +193,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const onSelect = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -224,6 +217,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const onSelect = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -252,6 +246,7 @@ describe("MediaMuteAndSwitchButton", () => {
       const [selectedOption, setSelectedOption] = useState("mic1");
       return (
         <MediaMuteAndSwitchButton
+          title="Switcher"
           iconsAndLabels="audio"
           enabled={true}
           options={[
@@ -311,6 +306,7 @@ describe("MediaMuteAndSwitchButton", () => {
     const onVideoBlurToggle = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title="Switcher"
         iconsAndLabels="video"
         enabled={true}
         videoBlurToggleClick={onVideoBlurToggle}
@@ -331,10 +327,11 @@ describe("MediaMuteAndSwitchButton", () => {
     expect(onVideoBlurToggle).toHaveBeenCalled();
   });
 
-  test("marks the selected menu item as checked", async () => {
+  test("renders check icon to mark the selected menu item", async () => {
     const user = userEvent.setup();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
+        title="Switcher"
         iconsAndLabels="audio"
         enabled={true}
         options={[
@@ -345,493 +342,19 @@ describe("MediaMuteAndSwitchButton", () => {
       />,
     );
 
+    // open menu
     await user.click(getByRole("button", { name: "Microphone" }));
 
-    screen.getByRole("menuitemradio", { name: "Microphone 2", checked: true });
-    screen.getByRole("menuitemradio", { name: "Microphone 1", checked: false });
-  });
-
-  test("disables every device while a selection is settling", async () => {
-    const user = userEvent.setup();
-    const { promise, resolve } = Promise.withResolvers<void>();
-    function Wrapper(): JSX.Element {
-      const [selectedOption, setSelectedOption] = useState("mic1");
-      return (
-        <MediaMuteAndSwitchButton
-          iconsAndLabels="audio"
-          enabled={true}
-          options={[
-            { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-            { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
-          ]}
-          selectedOption={selectedOption}
-          onSelect={(id) => {
-            void promise.then(() => setSelectedOption(id));
-          }}
-          outputOptions={[
-            { label: { type: "name", name: "Speakers" }, id: "spk1" },
-            { label: { type: "name", name: "Headset" }, id: "spk2" },
-          ]}
-          selectedOutputOption="spk1"
-          onSelectOutput={vi.fn()}
-        />
-      );
-    }
-
-    const { getByRole } = renderComponent(<Wrapper />);
-    await user.click(getByRole("button", { name: "Microphone" }));
-    await user.click(
-      screen.getByRole("menuitemradio", { name: "Microphone 2" }),
-    );
-
-    // In flight: nothing else can be picked, in either section.
-    for (const name of ["Microphone 1", "Speakers", "Headset"]) {
-      expect(screen.getByRole("menuitemradio", { name })).toHaveAttribute(
-        "aria-disabled",
-        "true",
-      );
-    }
-
-    await act(async () => {
-      resolve();
-      await promise;
+    // The selected item (mic2) renders both an IconOptions SVG and a CheckIcon SVG
+    const mic1Item = screen.getByRole("menuitemradio", {
+      name: "Microphone 2",
     });
+    expect(mic1Item.querySelectorAll("svg").length).toBe(2);
 
-    // Settled: selectable again.
-    expect(
-      screen.getByRole("menuitemradio", { name: "Microphone 1" }),
-    ).not.toHaveAttribute("aria-disabled", "true");
-    expect(
-      screen.getByRole("menuitemradio", { name: "Headset" }),
-    ).not.toHaveAttribute("aria-disabled", "true");
-  });
-
-  test("lets go of a device switch that never arrives", async () => {
-    const user = userEvent.setup();
-    // onSelect never reports back, as when a device is removed mid-switch.
-    const { getByRole } = renderComponent(
-      <MediaMuteAndSwitchButton
-        iconsAndLabels="audio"
-        enabled={true}
-        options={[
-          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
-        ]}
-        selectedOption="mic1"
-        onSelect={vi.fn()}
-        outputOptions={[
-          { label: { type: "name", name: "Speakers" }, id: "spk1" },
-          { label: { type: "name", name: "Headset" }, id: "spk2" },
-        ]}
-        selectedOutputOption="spk1"
-        onSelectOutput={vi.fn()}
-      />,
-    );
-
-    await user.click(getByRole("button", { name: "Microphone" }));
-    await user.click(
-      screen.getByRole("menuitemradio", { name: "Microphone 2" }),
-    );
-    await user.keyboard("{Escape}");
-    await user.click(getByRole("button", { name: "Microphone" }));
-
-    for (const name of ["Microphone 1", "Speakers", "Headset"]) {
-      expect(screen.getByRole("menuitemradio", { name })).not.toHaveAttribute(
-        "aria-disabled",
-        "true",
-      );
-    }
-  });
-
-  test("lets go of a device switch whose device is unplugged", async () => {
-    const user = userEvent.setup();
-    const mics: MenuOptions[] = [
-      { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-      { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
-    ];
-    const menu = (options: MenuOptions[]): JSX.Element => (
-      <MediaMuteAndSwitchButton
-        iconsAndLabels="audio"
-        enabled={true}
-        options={options}
-        selectedOption="mic1"
-        onSelect={vi.fn()}
-        outputOptions={[
-          { label: { type: "name", name: "Speakers" }, id: "spk1" },
-          { label: { type: "name", name: "Headset" }, id: "spk2" },
-        ]}
-        selectedOutputOption="spk1"
-        onSelectOutput={vi.fn()}
-      />
-    );
-
-    const { getByRole, rerender } = renderComponent(menu(mics));
-    await user.click(getByRole("button", { name: "Microphone" }));
-    await user.click(
-      screen.getByRole("menuitemradio", { name: "Microphone 2" }),
-    );
-
-    // The second microphone is unplugged before the switch lands.
-    rerender(withProviders(menu(mics.slice(0, 1))));
-
-    // Selectable again without closing the menu.
-    expect(
-      screen.getByRole("menuitemradio", { name: "Headset" }),
-    ).not.toHaveAttribute("aria-disabled", "true");
-  });
-
-  test("moves the level without re-rendering anything", async () => {
-    // The level is drawn into the DOM, so a moving level commits nothing.
-    const capture = stubAudioCapture();
-    const user = userEvent.setup();
-    let commits = 0;
-
-    const { getByRole } = renderComponent(
-      <Profiler
-        id="menu"
-        onRender={(): void => {
-          commits++;
-        }}
-      >
-        <MediaMuteAndSwitchButton
-          iconsAndLabels="audio"
-          enabled={true}
-          options={[
-            { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-            { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
-          ]}
-          selectedOption="mic1"
-          onSelect={vi.fn()}
-          outputOptions={[
-            { label: { type: "name", name: "Speakers" }, id: "spk1" },
-            { label: { type: "name", name: "Headset" }, id: "spk2" },
-          ]}
-          selectedOutputOption="spk1"
-          onSelectOutput={vi.fn()}
-        />
-      </Profiler>,
-    );
-
-    await user.click(getByRole("button", { name: "Microphone" }));
-    capture.grant();
-    await vi.waitFor(() => expect(capture.contexts).toHaveLength(1));
-    const meter = await screen.findByRole("meter");
-    // The capture's arrival is one render: the idle level swapped for its own.
-    await act(async () => {});
-    const settled = commits;
-
-    // The meter smooths by elapsed time, so hand-driven frames need a clock.
-    let elapsed = performance.now();
-    const clock = vi
-      .spyOn(performance, "now")
-      .mockImplementation(() => (elapsed += 16));
-
-    // One frame per task, as a browser delivers them: one act() would batch them.
-    for (let step = 1; step <= 8; step++) {
-      capture.speak(step / 8);
-      await act(async () => {
-        capture.drawFrames(1);
-        await Promise.resolve();
-      });
-    }
-    clock.mockRestore();
-
-    expect(meter.getAttribute("aria-valuenow")).not.toBe("0");
-    expect(commits - settled).toBe(0);
-  });
-
-  test("camera menu uses the same selection pattern and keeps the blur toggle", async () => {
-    const user = userEvent.setup();
-    const { getByRole } = renderComponent(
-      <MediaMuteAndSwitchButton
-        iconsAndLabels="video"
-        enabled={true}
-        options={[
-          { label: { type: "name", name: "Camera 1" }, id: "cam1" },
-          { label: { type: "name", name: "Camera 2" }, id: "cam2" },
-        ]}
-        selectedOption="cam1"
-        onSelect={vi.fn()}
-        videoBlurToggleClick={vi.fn()}
-      />,
-    );
-
-    await user.click(getByRole("button", { name: "Camera" }));
-
-    screen.getByRole("menuitemradio", { name: "Camera 1", checked: true });
-    screen.getByRole("menuitemradio", { name: "Camera 2", checked: false });
-    expect(
-      screen.getByRole("menuitemcheckbox", { name: "Blur background" }),
-    ).toBeInTheDocument();
-  });
-
-  test("marks focus as keyboard-driven only when the keyboard moved it", async () => {
-    const user = userEvent.setup();
-    const { getByRole } = renderComponent(
-      <MediaMuteAndSwitchButton
-        iconsAndLabels="audio"
-        enabled={true}
-        options={[
-          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
-        ]}
-        selectedOption="mic1"
-        onSelect={vi.fn()}
-      />,
-    );
-
-    await user.click(getByRole("button", { name: "Microphone" }));
-    const list = screen
-      .getByRole("menuitemradio", { name: "Microphone 1" })
-      .closest("[data-focus-source]");
-
-    // The menu focuses whatever the pointer is over, so focus alone says nothing.
-    expect(list).toHaveAttribute("data-focus-source", "pointer");
-
-    await user.keyboard("{ArrowDown}");
-    expect(list).toHaveAttribute("data-focus-source", "keyboard");
-
-    await user.pointer({
-      target: screen.getByRole("menuitemradio", { name: "Microphone 2" }),
-      coords: { clientX: 10, clientY: 10 },
-    });
-    expect(list).toHaveAttribute("data-focus-source", "pointer");
-  });
-
-  test("marks the selected device with the accent fill", async () => {
-    const user = userEvent.setup();
-    const { getByRole } = renderComponent(
-      <MediaMuteAndSwitchButton
-        iconsAndLabels="audio"
-        enabled={true}
-        options={[
-          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
-        ]}
-        selectedOption="mic2"
-        onSelect={vi.fn()}
-      />,
-    );
-
-    await user.click(getByRole("button", { name: "Microphone" }));
-
-    const selected = screen
-      .getByRole("menuitemradio", { name: "Microphone 2" })
-      .querySelector("input[type=radio]");
-    expect(selected).toBeChecked();
-    // readOnly would paint the selected radio muted.
-    expect(selected).not.toHaveAttribute("readonly");
-  });
-
-  test("the open menu has no accessibility violations", async () => {
-    const user = userEvent.setup();
-    const { getByRole } = renderComponent(
-      <MediaMuteAndSwitchButton
-        iconsAndLabels="audio"
-        enabled={true}
-        options={[
-          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
-        ]}
-        selectedOption="mic1"
-        onSelect={vi.fn()}
-        outputOptions={[
-          { label: { type: "name", name: "Speakers" }, id: "spk1" },
-          { label: { type: "name", name: "Headset" }, id: "spk2" },
-        ]}
-        selectedOutputOption="spk1"
-        onSelectOutput={vi.fn()}
-      />,
-    );
-
-    await user.click(getByRole("button", { name: "Microphone" }));
-
-    const menu = document.querySelector('[role="menu"]');
-    expect(await axe(menu as HTMLElement)).toHaveNoViolations();
-  });
-
-  test("puts the speaker section above the microphone section", async () => {
-    const user = userEvent.setup();
-    const { getByRole } = renderComponent(
-      <MediaMuteAndSwitchButton
-        iconsAndLabels="audio"
-        enabled={true}
-        options={[
-          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
-        ]}
-        selectedOption="mic1"
-        onSelect={vi.fn()}
-        outputOptions={[
-          { label: { type: "name", name: "Speakers" }, id: "spk1" },
-          { label: { type: "name", name: "Headset" }, id: "spk2" },
-        ]}
-        selectedOutputOption="spk1"
-        onSelectOutput={vi.fn()}
-      />,
-    );
-
-    await user.click(getByRole("button", { name: "Microphone" }));
-
-    const speakers = screen.getByRole("menuitemradio", { name: "Speakers" });
-    const microphone = screen.getByRole("menuitemradio", {
+    // The unselected item (mic1) only renders its IconOptions SVG
+    const mic2Item = screen.getByRole("menuitemradio", {
       name: "Microphone 1",
     });
-    expect(
-      speakers.compareDocumentPosition(microphone) &
-        Node.DOCUMENT_POSITION_FOLLOWING,
-    ).toBeTruthy();
-  });
-
-  test("lists speaker and microphone sections", async () => {
-    const user = userEvent.setup();
-    const { getByRole } = renderComponent(
-      <MediaMuteAndSwitchButton
-        iconsAndLabels="audio"
-        enabled={true}
-        options={[
-          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
-        ]}
-        selectedOption="mic1"
-        onSelect={vi.fn()}
-        outputOptions={[
-          {
-            label: { type: "default", name: "Built-in Output" },
-            id: "default",
-          },
-          { label: { type: "name", name: "Headset" }, id: "spk2" },
-        ]}
-        selectedOutputOption="default"
-        onSelectOutput={vi.fn()}
-      />,
-    );
-
-    await user.click(getByRole("button", { name: "Microphone" }));
-
-    screen.getByRole("menuitemradio", {
-      name: "Default (Built-in Output)",
-      checked: true,
-    });
-    screen.getByRole("menuitemradio", { name: "Headset", checked: false });
-    screen.getByRole("menuitemradio", { name: "Microphone 1", checked: true });
-    screen.getByRole("menuitemradio", { name: "Microphone 2", checked: false });
-  });
-
-  test("calls the output select callback on speaker click", async () => {
-    const user = userEvent.setup();
-    const onSelectOutput = vi.fn();
-    const { getByRole } = renderComponent(
-      <MediaMuteAndSwitchButton
-        iconsAndLabels="audio"
-        enabled={true}
-        options={[
-          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
-        ]}
-        selectedOption="mic1"
-        outputOptions={[
-          { label: { type: "name", name: "Speakers" }, id: "spk1" },
-          { label: { type: "name", name: "Headset" }, id: "spk2" },
-        ]}
-        selectedOutputOption="spk1"
-        onSelectOutput={onSelectOutput}
-      />,
-    );
-
-    await user.click(getByRole("button", { name: "Microphone" }));
-    await user.click(screen.getByRole("menuitemradio", { name: "Headset" }));
-
-    expect(onSelectOutput).toHaveBeenCalledWith("spk2");
-  });
-
-  test("shows a single device entry disabled", async () => {
-    const user = userEvent.setup();
-    const onSelect = vi.fn();
-    const { getByRole } = renderComponent(
-      <MediaMuteAndSwitchButton
-        iconsAndLabels="audio"
-        enabled={true}
-        options={[
-          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-        ]}
-        selectedOption="mic1"
-        onSelect={onSelect}
-      />,
-    );
-
-    await user.click(getByRole("button", { name: "Microphone" }));
-
-    // Shown, but not selectable.
-    const only = screen.getByRole("menuitemradio", { name: "Microphone 1" });
-    expect(only).toHaveAttribute("aria-disabled", "true");
-  });
-
-  test("shows a default speaker where the platform lists none", async () => {
-    const user = userEvent.setup();
-    const { getByRole } = renderComponent(
-      <MediaMuteAndSwitchButton
-        iconsAndLabels="audio"
-        enabled={true}
-        options={[
-          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
-        ]}
-        selectedOption="mic1"
-        onSelect={vi.fn()}
-        // As Safari: no outputs listed.
-        outputOptions={[]}
-        selectedOutputOption={undefined}
-        onSelectOutput={undefined}
-      />,
-    );
-
-    await user.click(getByRole("button", { name: "Microphone" }));
-
-    const speakers = screen
-      .getAllByRole("group")
-      .find((group) => group.getAttribute("aria-label") === "Speaker")!;
-    const entries = within(speakers).getAllByRole("menuitemradio");
-    expect(entries).toHaveLength(1);
-    expect(entries[0]).toHaveAccessibleName("Default");
-    expect(entries[0]).toHaveAttribute("aria-disabled", "true");
-    expect(entries[0]).toHaveAttribute("aria-checked", "true");
-    expect(
-      within(entries[0]).getByRole("radio", { hidden: true }),
-    ).toBeChecked();
-  });
-
-  test("shows the speaker section disabled when output selection is unsupported", async () => {
-    const user = userEvent.setup();
-    const { getByRole } = renderComponent(
-      <MediaMuteAndSwitchButton
-        iconsAndLabels="audio"
-        enabled={true}
-        options={[
-          { label: { type: "name", name: "Microphone 1" }, id: "mic1" },
-          { label: { type: "name", name: "Microphone 2" }, id: "mic2" },
-        ]}
-        selectedOption="mic1"
-        onSelect={vi.fn()}
-        outputOptions={[
-          { label: { type: "name", name: "Speakers" }, id: "spk1" },
-          { label: { type: "name", name: "Headset" }, id: "spk2" },
-        ]}
-        selectedOutputOption="spk1"
-        onSelectOutput={undefined}
-      />,
-    );
-
-    await user.click(getByRole("button", { name: "Microphone" }));
-
-    expect(
-      screen.getByRole("menuitemradio", { name: "Speakers" }),
-    ).toHaveAttribute("aria-disabled", "true");
-    expect(
-      screen.getByRole("menuitemradio", { name: "Headset" }),
-    ).toHaveAttribute("aria-disabled", "true");
-    expect(
-      screen.getByRole("menuitemradio", { name: "Microphone 2" }),
-    ).not.toHaveAttribute("aria-disabled", "true");
+    expect(mic2Item.querySelectorAll("svg").length).toBe(1);
   });
 });

src/components/MediaMuteAndSwitchButton.tsx

@@ -5,48 +5,37 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import {
-  useCallback,
-  useState,
-  type CSSProperties,
-  type FC,
-  useEffect,
-  type ReactElement,
-} from "react";
+import { type ComponentType, useState, type FC, useEffect } from "react";
 import {
   Button,
   Menu,
   MenuItem,
-  MenuTitle,
-  RadioInput,
   ToggleMenuItem,
 } from "@vector-im/compound-web";
 import {
+  CheckIcon,
   ChevronUpIcon,
   ChevronDownIcon,
+  MicOnIcon,
   SpinnerIcon,
+  VideoCallIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
-import { distinctUntilChanged, map } from "rxjs";
 
 import styles from "./MediaMuteAndSwitchButton.module.css";
 import { MicButton, VideoButton } from "../button";
-import {
-  type AudioOutputDeviceLabel,
-  type DeviceLabel,
-} from "../state/MediaDevices";
+import { type DeviceLabel } from "../state/MediaDevices";
 import { useMediaDevices } from "../MediaDevicesContext";
-import { useRootElement } from "../RootElementContext";
-import { observeElementSize$ } from "../utils/elementSize";
-import { LiveMicrophoneLevelMeter } from "./MicrophoneLevelMeter";
 
 export interface MenuOptions {
-  label: DeviceLabel | AudioOutputDeviceLabel;
+  label: DeviceLabel;
   id: string;
 }
 
 export interface MediaMuteAndSwitchButtonProps {
+  /** The title used in the Switcher modal. */
+  title: string;
   /** If the Mute button is enabled */
   enabled?: boolean;
   /** Callback if the mute button is clicked */
@@ -58,12 +47,6 @@ export interface MediaMuteAndSwitchButtonProps {
   options?: MenuOptions[];
   /** The option that will currently be rendered as the selected option */
   selectedOption?: string;
-  /** Output (speaker) devices. Audio menu only. */
-  outputOptions?: MenuOptions[];
-  /** The output option currently rendered as selected */
-  selectedOutputOption?: string;
-  /** Picks an output device. Undefined disables the speaker section. */
-  onSelectOutput?: (id: string) => void;
   videoBlurToggleClick?: () => void;
   videoBlurEnabled?: boolean;
   /**
@@ -75,240 +58,90 @@ export interface MediaMuteAndSwitchButtonProps {
 
 const BLUR_ID = "blur";
 
-/** Id of the placeholder "Default" row, shown when the platform lists no outputs. */
-const DEFAULT_OUTPUT_ID = "default";
-
-/** Largest share of the call area's height the device list may take. */
-const LIST_SHARE_OF_CALL = 0.6;
-
-/** Smallest device list height in px, so a short call still shows more than one device. */
-const MIN_LIST_HEIGHT = 160;
-
 export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
+  title,
   enabled,
   busy,
   onMuteClick,
   iconsAndLabels,
   options,
   selectedOption,
-  outputOptions,
-  selectedOutputOption,
-  onSelectOutput,
   videoBlurEnabled,
   videoBlurToggleClick,
   onSelect,
 }) => {
-  // Requested but not yet selected. Keyed by kind too, since Chrome uses
-  // "default" for both an input and an output.
-  const [plannedSelection, setPlannedSelection] = useState<{
-    kind: "input" | "output";
-    id: string;
-  } | null>(null);
+  const [plannedSelection, setPlannedSelection] = useState<string | null>(null);
   const [menuOpen, setMenuOpen] = useState(false);
-  const onOpenChange = useCallback((open: boolean): void => {
-    setMenuOpen(open);
-    // Drop a request that never arrived.
-    if (!open) setPlannedSelection(null);
-  }, []);
   const isBusy = busy ?? false;
   const { t } = useTranslation();
   const devices = useMediaDevices();
 
-  /**
-   * Records on the menu whether the keyboard or the pointer moved focus, for
-   * the focus ring. `:focus-visible` can't tell: Radix focuses whatever the
-   * pointer is over. Listened for on the menu, not the document, so a second
-   * Element Call on the page doesn't answer for this one.
-   */
-  const trackFocusSource = useCallback(
-    (list: HTMLDivElement | null): (() => void) | undefined => {
-      const menu = list?.closest<HTMLElement>('[role="menu"]');
-      if (menu === null || menu === undefined) return;
-      const record = (source: "keyboard" | "pointer"): void => {
-        menu.dataset.focusSource = source;
-      };
-      record("pointer");
-      const usedKeyboard = (): void => record("keyboard");
-      const usedPointer = (): void => record("pointer");
-      menu.addEventListener("keydown", usedKeyboard, true);
-      menu.addEventListener("pointermove", usedPointer, true);
-      return (): void => {
-        menu.removeEventListener("keydown", usedKeyboard, true);
-        menu.removeEventListener("pointermove", usedPointer, true);
-      };
-    },
-    [],
-  );
-
-  // Measured on the call area: CSS can't size the portalled menu against it.
-  const rootElement = useRootElement();
-  const [listMaxHeight, setListMaxHeight] = useState<number>();
-  useEffect(() => {
-    if (!menuOpen) return;
-    // Followed, since a host can resize the call while the menu is open.
-    const subscription = observeElementSize$(rootElement)
-      .pipe(
-        map(({ height }) =>
-          Math.max(MIN_LIST_HEIGHT, Math.round(height * LIST_SHARE_OF_CALL)),
-        ),
-        distinctUntilChanged(),
-      )
-      .subscribe(setListMaxHeight);
-    return (): void => subscription.unsubscribe();
-  }, [menuOpen, rootElement]);
-
-  // Kept clear at the list's foot, so a row reached by keyboard isn't under
-  // the meter.
-  const [meterHeight, meter] = useMeasuredHeight();
-
-  // Likewise at its head, for the sticky headings.
-  const [headingHeight, heading] = useMeasuredHeight();
-
   useEffect(() => {
     if (menuOpen) devices.requestDeviceNames(); // No-op after the first call
   }, [menuOpen, devices]);
 
-  const MuteButton = iconsAndLabels === "audio" ? MicButton : VideoButton;
-  const button = (
-    <MuteButton
-      enabled={enabled ?? false}
-      busy={isBusy}
-      onClick={(e) => {
-        onMuteClick?.();
-        e.preventDefault();
-        e.stopPropagation();
-      }}
-      disabled={isBusy || onMuteClick === undefined}
-      data-testid={
-        iconsAndLabels === "audio" ? "incall_mute" : "incall_videomute"
-      }
-    />
-  );
-
-  const toggles =
-    iconsAndLabels === "video" && videoBlurToggleClick !== undefined
-      ? [
+  let button;
+  let toggles: { label: string; enabled: boolean; id: string }[] = [];
+  switch (iconsAndLabels) {
+    case "video":
+      button = (
+        <VideoButton
+          enabled={enabled ?? false}
+          busy={isBusy}
+          onClick={(e) => {
+            onMuteClick?.();
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+          disabled={isBusy || onMuteClick === undefined}
+          data-testid="incall_videomute"
+        />
+      );
+      if (videoBlurToggleClick !== undefined) {
+        toggles = [
           {
             label: t("action.blur_background"),
             enabled: videoBlurEnabled ?? false,
             id: BLUR_ID,
           },
-        ]
-      : [];
+        ];
+      }
+      break;
+    case "audio":
+      button = (
+        <MicButton
+          enabled={enabled ?? false}
+          busy={isBusy}
+          onClick={(e) => {
+            onMuteClick?.();
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+          disabled={isBusy || onMuteClick === undefined}
+          data-testid="incall_mute"
+        />
+      );
+      break;
+  }
 
+  let IconOptions: ComponentType<React.SVGAttributes<SVGElement>> | undefined;
   let optionsButtonLabel: string;
-  let menuTitle: string;
   let numberedLabel: (number: number) => string;
   switch (iconsAndLabels) {
     case "video":
+      IconOptions = VideoCallIcon;
       optionsButtonLabel = t("settings.devices.camera");
-      menuTitle = t("settings.devices.camera_source");
       numberedLabel = (n): string =>
         t("settings.devices.camera_numbered", { n });
       break;
     case "audio":
+      IconOptions = MicOnIcon;
       optionsButtonLabel = t("settings.devices.microphone");
-      menuTitle = t("settings.devices.mic_source");
       numberedLabel = (n): string =>
         t("settings.devices.microphone_numbered", { n });
       break;
   }
 
-  const labelText = (
-    label: MenuOptions["label"],
-    numbered: (n: number) => string,
-  ): string => {
-    switch (label.type) {
-      case "name":
-        return label.name;
-      case "number":
-        return numbered(label.number);
-      case "default":
-        return label.name === null
-          ? t("settings.devices.default")
-          : t("settings.devices.default_named_plain", { name: label.name });
-      case "speaker":
-        return t("settings.devices.loudspeaker");
-      case "earpiece":
-        return t("settings.devices.handset");
-    }
-  };
-
-  // Nothing can be picked while a requested device is on offer but not yet
-  // selected, so a second request can't overtake it.
-  const plannedOutput = plannedSelection?.kind === "output";
-  const selectedOfPlannedKind = plannedOutput
-    ? selectedOutputOption
-    : selectedOption;
-  const offeredOfPlannedKind = plannedOutput ? outputOptions : options;
-  const settling =
-    plannedSelection !== null &&
-    plannedSelection.id !== selectedOfPlannedKind &&
-    offeredOfPlannedKind?.some(({ id }) => id === plannedSelection.id) === true;
-
-  // Safari lists no outputs: show a disabled, selected Default rather than an
-  // empty section.
-  const noOutputsListed = outputOptions?.length === 0;
-  const speakerOptions: MenuOptions[] | undefined = noOutputsListed
-    ? [{ id: DEFAULT_OUTPUT_ID, label: { type: "default", name: null } }]
-    : outputOptions;
-  const selectedSpeaker = noOutputsListed
-    ? DEFAULT_OUTPUT_ID
-    : selectedOutputOption;
-
-  const deviceItems = (
-    kind: "input" | "output",
-    items: MenuOptions[] | undefined,
-    selected: string | undefined,
-    select: ((id: string) => void) | undefined,
-    numbered: (n: number) => string,
-  ): ReactElement[] => {
-    const list = items ?? [];
-    // Disabled rather than hidden, so the menu keeps its shape.
-    const disabled = select === undefined || list.length <= 1 || settling;
-    return list.map(({ label, id }) => (
-      <MenuItem
-        // A radio input may not sit inside a button.
-        as="div"
-        hideChevron
-        disabled={disabled}
-        label={labelText(label, numbered)}
-        Icon={
-          // Inert, not aria-hidden: aria-hidden alone leaves it focusable.
-          <span inert>
-            <RadioInput
-              checked={selected === id}
-              disabled={disabled}
-              // Not readOnly, which mutes the selected fill. The item handles
-              // the click.
-              onChange={(): void => {}}
-            />
-          </span>
-        }
-        onSelect={(e) => {
-          e.preventDefault();
-          if (id === selected) return;
-          setPlannedSelection({ kind, id });
-          select?.(id);
-        }}
-        key={id}
-        role="menuitemradio"
-        aria-checked={selected === id}
-      >
-        {selected !== id &&
-          plannedSelection?.kind === kind &&
-          plannedSelection.id === id && (
-            <SpinnerIcon
-              width={24}
-              height={24}
-              className={styles.rotate}
-              aria-label={t("settings.devices.activating")}
-            />
-          )}
-      </MenuItem>
-    ));
-  };
-
   return (
     <div
       className={classNames({
@@ -319,12 +152,10 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
       {/* The mute button lives inside */}
       {button}
       <Menu
-        className={styles.menu}
-        // Named for screen readers only: each section has its own heading.
-        title={menuTitle}
-        showTitle={false}
+        title={title}
+        showTitle={true}
         open={menuOpen}
-        onOpenChange={onOpenChange}
+        onOpenChange={setMenuOpen}
         side="top"
         trigger={
           <Button
@@ -340,74 +171,67 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
           />
         }
       >
-        <div
-          ref={trackFocusSource}
-          // Keeps the items the menu's own children for assistive tech.
-          role="none"
-          className={styles.deviceList}
-          style={
-            {
-              "--device-list-max-height":
-                listMaxHeight === undefined ? undefined : `${listMaxHeight}px`,
-              "--device-list-scroll-padding-end":
-                meterHeight === undefined ? undefined : `${meterHeight}px`,
-              "--device-list-scroll-padding-start":
-                headingHeight === undefined ? undefined : `${headingHeight}px`,
-            } as CSSProperties
+        {options?.map(({ label, id }) => {
+          let labelText: string;
+          switch (label.type) {
+            case "name":
+              labelText = label.name;
+              break;
+            case "number":
+              labelText = numberedLabel(label.number);
+              break;
           }
-        >
-          {iconsAndLabels === "audio" && speakerOptions && (
-            <>
-              {/* A menu may only contain items, separators and groups, so each
-                  heading is a hidden part of a named group. */}
-              <div role="group" aria-label={t("settings.devices.speaker")}>
-                <div aria-hidden className={styles.sectionHeading}>
-                  <MenuTitle title={t("settings.devices.speaker")} />
-                </div>
-                {deviceItems(
-                  "output",
-                  speakerOptions,
-                  selectedSpeaker,
-                  onSelectOutput,
-                  (n) => t("settings.devices.speaker_numbered", { n }),
-                )}
-              </div>
-            </>
-          )}
-          <div role="group" aria-label={optionsButtonLabel}>
-            <div ref={heading} aria-hidden className={styles.sectionHeading}>
-              <MenuTitle title={optionsButtonLabel} />
-            </div>
-            {/* Apart from the heading, so the sticky meter can't ride over it. */}
-            <div role="none">
-              {deviceItems(
-                "input",
-                options,
-                selectedOption,
-                onSelect,
-                numberedLabel,
-              )}
-              {iconsAndLabels === "audio" && (
-                <LiveMicrophoneLevelMeter
-                  ref={meter}
-                  deviceId={selectedOption}
-                  // Only while open, so the microphone isn't held all call.
-                  active={menuOpen}
-                  className={styles.stickyMeter}
+          return (
+            <MenuItem
+              hideChevron
+              label={labelText}
+              Icon={
+                IconOptions && (
+                  <IconOptions
+                    width={24}
+                    height={24}
+                    className={styles.itemIcon}
+                    aria-hidden
+                  />
+                )
+              }
+              onSelect={(e) => {
+                e.preventDefault();
+                if (id === selectedOption) return;
+                setPlannedSelection(id);
+                onSelect?.(id);
+              }}
+              key={id}
+              role="menuitemradio"
+              aria-checked={selectedOption === id}
+            >
+              {selectedOption === id && (
+                <CheckIcon
+                  width={24}
+                  height={24}
+                  aria-hidden // A label would be redundant to aria-checked above
                 />
               )}
-            </div>
-          </div>
-        </div>
-        {toggles.length > 0 && <hr />}
-        {toggles.map((toggle) => (
+              {selectedOption !== id && plannedSelection === id && (
+                <SpinnerIcon
+                  width={24}
+                  height={24}
+                  className={styles.rotate}
+                  aria-label={t("settings.devices.activating")}
+                />
+              )}
+            </MenuItem>
+          );
+        })}
+        {(toggles?.length ?? 0) > 0 && <hr />}
+        {toggles?.map((toggle) => (
           <ToggleMenuItem
             label={toggle.label}
             onSelect={(e) => {
               videoBlurToggleClick?.();
               e.preventDefault();
             }}
-            checked={toggle.enabled}
+            checked={toggle.enabled ?? false}
             key={toggle.id}
           />
         ))}
@@ -415,25 +239,3 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
     </div>
   );
 };
-
-/** Follows an element's height. */
-function useMeasuredHeight(): [
-  number | undefined,
-  (element: HTMLElement | null) => (() => void) | undefined,
-] {
-  const [height, setHeight] = useState<number>();
-  const ref = useCallback(
-    (element: HTMLElement | null): (() => void) | undefined => {
-      if (element === null) return;
-      const subscription = observeElementSize$(element)
-        .pipe(
-          map((size) => size.height),
-          distinctUntilChanged(),
-        )
-        .subscribe(setHeight);
-      return (): void => subscription.unsubscribe();
-    },
-    [],
-  );
-  return [height, ref];
-}

src/components/MicrophoneLevelMeter.module.css

@@ -1,65 +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.
-*/
-
-.meter {
-  /* A device row's icon column, so the bars start where the names do. */
-  --meter-icon-size: 24px;
-
-  /* Compound's radio size, whose centre line the icon shares. */
-  --device-control-size: 20px;
-
-  display: flex;
-  align-items: center;
-  gap: var(--cpd-space-3x);
-  padding-block: var(--cpd-space-2x);
-  /* Centres the icon on the radio column: less the row's inset border and half
-     the icon's extra width. Checked in the MeterAlignsWithTheDeviceRows story. */
-  padding-inline-start: calc(
-    var(--cpd-space-4x) - var(--cpd-border-width-1) -
-      (var(--meter-icon-size) - var(--device-control-size)) / 2
-  );
-  padding-inline-end: calc(var(--cpd-space-4x) * 2 + var(--cpd-space-2x));
-}
-
-.icon {
-  color: var(--cpd-color-icon-secondary);
-  flex-shrink: 0;
-  inline-size: var(--meter-icon-size);
-  block-size: var(--meter-icon-size);
-}
-
-.segments {
-  /* Bars keep one size and the width decides how many; the component reads the
-     sizes back from here. */
-  flex: 1;
-  /* So the bars never set the menu's width. */
-  contain: inline-size;
-  min-inline-size: 0;
-  display: flex;
-  align-items: center;
-  /* Half again a bar's width, per the design. */
-  gap: var(--cpd-space-1-5x);
-}
-
-.segment {
-  flex: none;
-  inline-size: var(--cpd-space-1x);
-  block-size: var(--cpd-space-4x);
-  border-radius: var(--cpd-space-1x);
-  background: var(--cpd-color-bg-subtle-primary);
-}
-
-/* The count of lit bars carries the level as well as their colour. */
-.segmentLit {
-  background: var(--cpd-color-bg-accent-rest);
-}
-
-.message {
-  color: var(--cpd-color-text-secondary);
-  /* A paragraph's margin would lift the text off centre. */
-  margin-block: 0;
-}

src/components/MicrophoneLevelMeter.stories.tsx

@@ -1,161 +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 { expect, within } from "storybook/test";
-import { type JSX } from "react";
-
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import {
-  MicrophoneLevelMeter,
-  type MicrophoneLevelMeterProps,
-} from "./MicrophoneLevelMeter";
-import styles from "./MicrophoneLevelMeter.module.css";
-import { LEVEL_SCALE } from "../state/MicrophoneLevel";
-import { constant } from "../state/Behavior";
-
-/** Roughly the menu's width. It only decides how many bars fit. */
-const STORY_WIDTH = 256;
-
-const meta = {
-  component: MicrophoneLevelMeter,
-  decorators: [
-    (Story): JSX.Element => (
-      <div style={{ inlineSize: STORY_WIDTH }}>
-        <Story />
-      </div>
-    ),
-  ],
-  argTypes: {
-    state: {
-      description:
-        "What the selected microphone can say about itself: a level, or a reason there is none.",
-    },
-  },
-} satisfies Meta<typeof MicrophoneLevelMeter>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** A quiet room: hiss below the noise floor lights nothing. */
-export const Silent: Story = {
-  args: { state: { type: "level", level$: constant(0) } },
-  play: async ({ canvasElement }) => {
-    await expect(litSegments(canvasElement)).toBe(0);
-  },
-};
-
-export const QuietSpeech: Story = {
-  args: { state: { type: "level", level$: constant(5) } },
-};
-
-export const NormalSpeech: Story = {
-  args: { state: { type: "level", level$: constant(12) } },
-  play: async ({ canvasElement }) => {
-    // A floor, not a count: the count follows from the design's bar and gap sizes.
-    await expect(
-      canvasElement.getElementsByClassName(styles.segment).length,
-    ).toBeGreaterThanOrEqual(15);
-  },
-};
-
-export const LoudSpeech: Story = {
-  args: { state: { type: "level", level$: constant(LEVEL_SCALE) } },
-};
-
-/** The three volumes differ in how many bars are lit, not only in colour. */
-export const VolumesAreDistinguishable: Story = {
-  args: { state: { type: "level", level$: constant(5) } },
-  play: async ({ canvasElement, mount }) => {
-    const lit: number[] = [];
-    for (const level of [5, 12, LEVEL_SCALE]) {
-      await mount(
-        <MicrophoneLevelMeter
-          state={{ type: "level", level$: constant(level) }}
-        />,
-      );
-      lit.push(litSegments(canvasElement));
-      await expect(within(canvasElement).getByRole("meter")).toHaveAttribute(
-        "aria-valuenow",
-        String(level),
-      );
-    }
-    await expect(new Set(lit).size).toBe(lit.length);
-    await expect(lit).toEqual([...lit].sort((a, b) => a - b));
-  },
-};
-
-/** Permission refused: a message with a next action, not a still meter. */
-export const PermissionDenied: Story = {
-  args: { state: { type: "permission-denied" } },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await expect(canvas.queryByRole("meter")).toBeNull();
-    await expect(
-      canvas.getByText(/Microphone access is blocked/),
-    ).toBeVisible();
-  },
-};
-
-/** No input device, told apart from a refusal. */
-export const NoDevice: Story = {
-  args: { state: { type: "no-device" } },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await expect(canvas.queryByRole("meter")).toBeNull();
-    await expect(canvas.getByText(/No microphone found/)).toBeVisible();
-
-    // The icon sits on the middle of the text, however many lines it runs to.
-    const middle = (element: Element): number => {
-      const box = element.getBoundingClientRect();
-      return box.top + box.height / 2;
-    };
-    const icon = canvasElement.getElementsByClassName(styles.icon)[0];
-    const words = canvasElement.getElementsByClassName(styles.message)[0];
-    await expect(Math.abs(middle(icon) - middle(words))).toBeLessThanOrEqual(1);
-  },
-};
-
-/** The same meter at two widths: the bars keep their size and only their count changes. */
-export const ShapeStaysTheSameAtAnyWidth: Story = {
-  args: { state: { type: "level", level$: constant(12) } },
-  play: async ({ mount, args }) => {
-    const narrow = await measureAt(mount, args, 180);
-    const wide = await measureAt(mount, args, 400);
-
-    await expect(narrow.bar).toBe(wide.bar);
-    await expect(narrow.gap).toBe(wide.gap);
-    await expect(narrow.count).toBeLessThan(wide.count);
-    // The bars are still separate, not one run of colour.
-    await expect(narrow.gap).toBeGreaterThan(0);
-  },
-};
-
-/** How many bars are lit. */
-function litSegments(canvasElement: HTMLElement): number {
-  return canvasElement.getElementsByClassName(styles.segmentLit).length;
-}
-
-/** Renders the meter at one width and reports its bars' shape. */
-async function measureAt(
-  mount: (ui: JSX.Element) => Promise<unknown>,
-  args: MicrophoneLevelMeterProps,
-  width: number,
-): Promise<{ count: number; bar: number; gap: number }> {
-  await mount(
-    <div style={{ inlineSize: width }}>
-      <MicrophoneLevelMeter {...args} />
-    </div>,
-  );
-  const bars = Array.from(document.body.getElementsByClassName(styles.segment));
-  const first = bars[0].getBoundingClientRect();
-  const second = bars[1].getBoundingClientRect();
-  return {
-    count: bars.length,
-    bar: first.width,
-    gap: second.left - first.right,
-  };
-}

src/components/MicrophoneLevelMeter.test.tsx

@@ -1,42 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { describe, expect, test } from "vitest";
-import { render, screen } from "@testing-library/react";
-
-import { MicrophoneLevelMeter } from "./MicrophoneLevelMeter";
-import { LEVEL_SCALE } from "../state/MicrophoneLevel";
-import { constant } from "../state/Behavior";
-
-describe("MicrophoneLevelMeter", () => {
-  test("announces the level rather than relying on hue", () => {
-    render(
-      <MicrophoneLevelMeter state={{ type: "level", level$: constant(6) }} />,
-    );
-
-    const meter = screen.getByRole("meter", { name: "Microphone level" });
-    expect(meter).toHaveAttribute("aria-valuenow", "6");
-    expect(meter).toHaveAttribute("aria-valuemax", String(LEVEL_SCALE));
-    expect(meter).toHaveAttribute("aria-valuetext", `6 of ${LEVEL_SCALE}`);
-  });
-
-  test("shows distinct messages for denied permission and no input device", () => {
-    const denied = render(
-      <MicrophoneLevelMeter state={{ type: "permission-denied" }} />,
-    );
-    expect(
-      denied.getByText(/Microphone access is blocked/),
-    ).toBeInTheDocument();
-    expect(denied.queryByRole("meter")).toBeNull();
-
-    const missing = render(
-      <MicrophoneLevelMeter state={{ type: "no-device" }} />,
-    );
-    expect(missing.getByText(/No microphone found/)).toBeInTheDocument();
-    expect(missing.queryByRole("meter")).toBeNull();
-  });
-});

src/components/MicrophoneLevelMeter.tsx

@@ -1,146 +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 {
-  useCallback,
-  useLayoutEffect,
-  useRef,
-  useState,
-  type FC,
-  type Ref,
-} from "react";
-import { Text } from "@vector-im/compound-web";
-import { MicOnIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-import classNames from "classnames";
-import { useTranslation } from "react-i18next";
-
-import { distinctUntilChanged, map } from "rxjs";
-
-import styles from "./MicrophoneLevelMeter.module.css";
-import { LEVEL_SCALE, type MicrophoneState } from "../state/MicrophoneLevel";
-import { observeElementSize$ } from "../utils/elementSize";
-import { useMicrophoneLevel } from "./useMicrophoneLevel";
-
-export interface LiveMicrophoneLevelMeterProps {
-  /** The microphone to listen to. */
-  deviceId: string | undefined;
-  /** Whether to hold a capture at all. */
-  active: boolean;
-  className?: string;
-  ref?: Ref<HTMLDivElement>;
-}
-
-/**
- * The meter, wired to a live capture. Its own component so a changing level
- * re-renders the meter, not its parent.
- */
-export const LiveMicrophoneLevelMeter: FC<LiveMicrophoneLevelMeterProps> = ({
-  deviceId,
-  active,
-  className,
-  ref,
-}) => {
-  const state = useMicrophoneLevel(deviceId, active);
-  return <MicrophoneLevelMeter state={state} className={className} ref={ref} />;
-};
-
-export interface MicrophoneLevelMeterProps {
-  state: MicrophoneState;
-  className?: string;
-  ref?: Ref<HTMLDivElement>;
-}
-
-/** The input level of a microphone, or why there is none. */
-export const MicrophoneLevelMeter: FC<MicrophoneLevelMeterProps> = ({
-  state,
-  className,
-  ref,
-}) => {
-  const { t } = useTranslation();
-  // Bars keep one size, so their count follows the width. Starts full so the
-  // first paint, and jsdom, draw a whole meter.
-  const [barCount, setBarCount] = useState(LEVEL_SCALE);
-  const segments = useRef<HTMLDivElement | null>(null);
-  const track = useCallback(
-    (element: HTMLDivElement | null): (() => void) | undefined => {
-      if (element === null) return;
-      segments.current = element;
-      const subscription = observeElementSize$(element)
-        .pipe(
-          map(({ width }) => barsThatFit(element, width)),
-          distinctUntilChanged(),
-        )
-        .subscribe(setBarCount);
-      return (): void => {
-        subscription.unsubscribe();
-        segments.current = null;
-      };
-    },
-    [],
-  );
-
-  // Drawn straight into the DOM: the level changes many times a second, and
-  // re-rendering for each change is what this avoids.
-  useLayoutEffect(() => {
-    const element = segments.current;
-    if (state.type !== "level" || element === null) return;
-    const subscription = state.level$.subscribe((level) => {
-      element.setAttribute("aria-valuenow", String(level));
-      element.setAttribute(
-        "aria-valuetext",
-        t("microphone_level.value", { level, max: LEVEL_SCALE }),
-      );
-      // The level is a share of the scale, not a bar count.
-      const lit = Math.round((level / LEVEL_SCALE) * barCount);
-      Array.from(element.children).forEach((bar, i) =>
-        bar.classList.toggle(styles.segmentLit, i < lit),
-      );
-    });
-    return (): void => subscription.unsubscribe();
-  }, [state, barCount, t]);
-
-  return (
-    <div ref={ref} className={classNames(styles.meter, className)}>
-      <MicOnIcon className={styles.icon} aria-hidden />
-      {state.type !== "level" ? (
-        <Text size="sm" className={styles.message}>
-          {state.type === "permission-denied"
-            ? t("microphone_level.permission_denied")
-            : t("microphone_level.no_device")}
-        </Text>
-      ) : (
-        <div
-          ref={track}
-          className={styles.segments}
-          role="meter"
-          aria-label={t("microphone_level.label")}
-          aria-valuemin={0}
-          aria-valuemax={LEVEL_SCALE}
-          // The first paint's value; the effect above keeps it current.
-          aria-valuenow={state.level$.value}
-          aria-valuetext={t("microphone_level.value", {
-            level: state.level$.value,
-            max: LEVEL_SCALE,
-          })}
-        >
-          {Array.from({ length: barCount }, (_, i) => (
-            <span key={i} aria-hidden className={styles.segment} />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-/** How many bars fit across `width`, measured so the stylesheet alone sets their size. */
-function barsThatFit(track: HTMLElement, width: number): number {
-  const gap = Number.parseFloat(getComputedStyle(track).columnGap);
-  const bar = track.firstElementChild?.getBoundingClientRect().width ?? 0;
-  // No layout (jsdom): keep the full count.
-  if (!(bar > 0) || !(gap >= 0)) return LEVEL_SCALE;
-  return Math.max(1, Math.floor((width + gap) / (bar + gap)));
-}

src/components/useMicrophoneLevel.test.tsx

@@ -1,41 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { afterEach, describe, expect, test } from "vitest";
-import { renderHook } from "@testing-library/react";
-
-import { useMicrophoneLevel } from "./useMicrophoneLevel";
-import { restoreAudioCapture, stubAudioCapture } from "../utils/test";
-
-// Capture and release are covered in MicrophoneLevel.test.ts; this covers the bridge.
-describe("useMicrophoneLevel", () => {
-  afterEach(restoreAudioCapture);
-
-  test("holds no capture while the meter is not shown", () => {
-    const capture = stubAudioCapture();
-
-    renderHook(() => useMicrophoneLevel("mic1", false));
-
-    expect(capture.getUserMedia).not.toHaveBeenCalled();
-  });
-
-  test("starts from nothing rather than the previous device's level", () => {
-    const capture = stubAudioCapture();
-
-    const { result, rerender } = renderHook(
-      ({ id }: { id: string }) => useMicrophoneLevel(id, true),
-      { initialProps: { id: "mic1" } },
-    );
-    capture.grant();
-
-    rerender({ id: "mic2" });
-
-    // No level carried over from the previous device.
-    const state = result.current;
-    expect(state.type === "level" ? state.level$.value : state.type).toBe(0);
-  });
-});

src/components/useMicrophoneLevel.ts

@@ -1,34 +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 { useEffect, useState } from "react";
-
-import {
-  type MicrophoneState,
-  observeMicrophoneState$,
-} from "../state/MicrophoneLevel";
-import { constant } from "../state/Behavior";
-
-const IDLE: MicrophoneState = { type: "level", level$: constant(0) };
-
-/** The live level of a microphone, captured only while `active`. */
-export function useMicrophoneLevel(
-  deviceId: string | undefined,
-  active: boolean,
-): MicrophoneState {
-  const [state, setState] = useState<MicrophoneState>(IDLE);
-
-  useEffect(() => {
-    if (!active) return;
-    // Idle first, so a new device doesn't start from the previous level.
-    setState(IDLE);
-    const subscription = observeMicrophoneState$(deviceId).subscribe(setState);
-    return (): void => subscription.unsubscribe();
-  }, [deviceId, active]);
-
-  return state;
-}

src/config/ConfigOptions.ts

@@ -207,6 +207,12 @@ export interface ConfigOptions {
    * Take care when changing these options.
    */
   matrix_rtc_session?: {
+    /**
+     * How long (in milliseconds) to wait before rotating end-to-end media encryption keys
+     * when someone leaves a call.
+     */
+    wait_for_key_rotation_ms?: number;
+
     /**
      * How long we wait before retrying after a network error on any of the requests.
      */

src/grid/CallLayout.test.tsx

@@ -1,187 +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 { act, render, screen } from "@testing-library/react";
-import { BehaviorSubject } from "rxjs";
-import { describe, expect, it, vi } from "vitest";
-
-import { arrangeTiles, type Bounds } from "./CallLayout";
-import { makeGridLayout } from "./GridLayout";
-import { makeSpotlightLandscapeLayout } from "./SpotlightLandscapeLayout";
-import { makeSpotlightPortraitLayout } from "./SpotlightPortraitLayout";
-import { type DragCallback, type LayoutProps } from "./Grid";
-import { constant } from "../state/Behavior";
-import {
-  type Alignment,
-  type GridLayout,
-  type SpotlightLandscapeLayout,
-  type SpotlightPortraitLayout,
-} from "../state/layout-types";
-import { type UserMediaViewModel } from "../state/media/UserMediaViewModel";
-import {
-  GridTileViewModel,
-  SpotlightTileViewModel,
-  type TileViewModel,
-} from "../state/TileViewModel";
-
-// Grid supplies these hooks to the layouts it renders; on their own the
-// layouts have no grid to report to
-vi.mock("./Grid", async (importOriginal) => ({
-  ...(await importOriginal<Record<string, unknown>>()),
-  useUpdateLayout: (): void => {},
-  useVisibleTiles: (): void => {},
-}));
-
-describe("grid layout", () => {
-  it("sizes the tiles from the minimum bounds", () => {
-    const minBounds$ = new BehaviorSubject<Bounds>({ width: 800, height: 600 });
-    const { scrolling: Scrolling } = makeGridLayout({ minBounds$ });
-    render(<Scrolling model={gridModel()} Slot={Slot} />);
-    const layer = screen.getByTestId("slot-0").parentElement!;
-    expect(layer.style.width).toBe("800px");
-    expect(layer.style.getPropertyValue("--width")).toBe(
-      `${Math.floor(arrangeTiles(800, 600, 3).tileWidth)}px`,
-    );
-
-    act(() => minBounds$.next({ width: 400, height: 300 }));
-    expect(layer.style.width).toBe("400px");
-    expect(layer.style.getPropertyValue("--width")).toBe(
-      `${Math.floor(arrangeTiles(400, 300, 3).tileWidth)}px`,
-    );
-  });
-
-  it("moves the spotlight only when a drag reaches another corner", () => {
-    const model = gridModel();
-    const { fixed: Fixed } = makeGridLayout({ minBounds$: bounds });
-    render(<Fixed model={model} Slot={Slot} />);
-    const alignments: Alignment[] = [];
-    model.spotlightAlignment$.subscribe((a) => alignments.push(a));
-    const drag = drags.get("spotlight")!;
-
-    // Still in the bottom right corner
-    act(() => drag({ x: 0, y: 0, xRatio: 0.9, yRatio: 0.9 }));
-    // Over to the bottom left
-    act(() => drag({ x: 0, y: 0, xRatio: 0.1, yRatio: 0.9 }));
-    // And a little further, still bottom left
-    act(() => drag({ x: 0, y: 0, xRatio: 0.2, yRatio: 0.8 }));
-    // Up to the top left
-    act(() => drag({ x: 0, y: 0, xRatio: 0.2, yRatio: 0.1 }));
-
-    expect(alignments).toEqual([
-      { inline: "end", block: "end" },
-      { inline: "start", block: "end" },
-      { inline: "start", block: "start" },
-    ]);
-    const slot = screen.getByTestId("slot-spotlight");
-    expect(slot.getAttribute("data-inline-alignment")).toBe("start");
-    expect(slot.getAttribute("data-block-alignment")).toBe("start");
-  });
-});
-
-describe("spotlight landscape layout", () => {
-  it("puts the spotlight in the fixed layer and the grid in the scrolling one", () => {
-    const { fixed: Fixed, scrolling: Scrolling } = makeSpotlightLandscapeLayout(
-      { minBounds$: bounds },
-    );
-    const model = landscapeModel();
-    const { unmount } = render(<Fixed model={model} Slot={Slot} />);
-    expect(screen.getByTestId("slot-spotlight")).toBeInTheDocument();
-    unmount();
-
-    render(<Scrolling model={model} Slot={Slot} />);
-    expect(slotIds()).toEqual(model.grid.map((tile) => tile.id));
-  });
-});
-
-describe("spotlight portrait layout", () => {
-  it("sizes the grid tiles from the minimum width", () => {
-    const minBounds$ = new BehaviorSubject<Bounds>({ width: 300, height: 700 });
-    const { scrolling: Scrolling } = makeSpotlightPortraitLayout({
-      minBounds$,
-    });
-    const model = portraitModel();
-    render(<Scrolling model={model} Slot={Slot} />);
-    expect(slotIds()).toEqual(model.grid.map((tile) => tile.id));
-    const layer = screen.getByTestId(`slot-${model.grid[0].id}`).parentElement!
-      .parentElement!;
-    expect(layer.style.getPropertyValue("--grid-tile-width")).toBe(
-      `${Math.floor(arrangeTiles(300, 300, 3).tileWidth)}px`,
-    );
-
-    act(() => minBounds$.next({ width: 500, height: 700 }));
-    expect(layer.style.getPropertyValue("--grid-tile-width")).toBe(
-      `${Math.floor(arrangeTiles(500, 500, 3).tileWidth)}px`,
-    );
-  });
-});
-
-const bounds = constant<Bounds>({ width: 800, height: 600 });
-
-// The layouts only pass tile view models through to their slots
-const media = {} as UserMediaViewModel;
-const spotlight = new SpotlightTileViewModel(
-  constant([]),
-  constant(false),
-  constant("solid"),
-);
-const tiles = (): GridTileViewModel[] =>
-  Array.from({ length: 3 }, () => new GridTileViewModel(constant(media)));
-
-function gridModel(): GridLayout {
-  return {
-    type: "grid",
-    spotlight,
-    grid: tiles(),
-    spotlightAlignment$: new BehaviorSubject<Alignment>({
-      inline: "end",
-      block: "end",
-    }),
-    setVisibleTiles: () => {},
-  };
-}
-
-function landscapeModel(): SpotlightLandscapeLayout {
-  return {
-    type: "spotlight-landscape",
-    spotlight,
-    grid: tiles(),
-    setVisibleTiles: () => {},
-  };
-}
-
-function portraitModel(): SpotlightPortraitLayout {
-  return {
-    type: "spotlight-portrait",
-    spotlight,
-    grid: tiles(),
-    setVisibleTiles: () => {},
-  };
-}
-
-// Slots record their drag callback so a test can drag them, and show the id
-// of the tile they hold
-const drags = new Map<string, DragCallback | undefined>();
-const Slot: LayoutProps<unknown, TileViewModel, HTMLDivElement>["Slot"] = ({
-  id,
-  model,
-  onDrag,
-  ...props
-}) => {
-  drags.set(id, onDrag);
-  return (
-    <div data-testid={`slot-${id}`} {...props}>
-      {model instanceof GridTileViewModel ? model.id : "spotlight"}
-    </div>
-  );
-};
-
-function slotIds(): string[] {
-  return screen
-    .getAllByTestId(/^slot-/)
-    .map((slot) => slot.textContent ?? "")
-    .filter((id) => id !== "spotlight");
-}

src/grid/CallLayout.ts

@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
+import { type Observable } from "rxjs";
 import { type ComponentType } from "react";
 
 import { type LayoutProps } from "./Grid";
 import { type TileViewModel } from "../state/TileViewModel";
-import { type Behavior } from "../state/Behavior";
 
 export interface Bounds {
   width: number;
@@ -20,7 +20,7 @@ export interface CallLayoutInputs {
   /**
    * The minimum bounds of the layout area.
    */
-  minBounds$: Behavior<Bounds>;
+  minBounds$: Observable<Bounds>;
 }
 
 export interface CallLayoutOutputs<Model> {

src/grid/GridLayout.tsx

@@ -11,12 +11,14 @@ import {
   useCallback,
   useMemo,
 } from "react";
+import { distinctUntilChanged } from "rxjs";
+import { useObservableEagerState } from "observable-hooks";
 
 import { type GridLayout as GridLayoutModel } from "../state/layout-types.ts";
 import styles from "./GridLayout.module.css";
+import { useInitial } from "../useInitial";
 import { type CallLayout, arrangeTiles } from "./CallLayout";
 import { type DragCallback, useUpdateLayout, useVisibleTiles } from "./Grid";
-import { useBehavior } from "../useBehavior";
 
 interface GridCSSProperties extends CSSProperties {
   "--gap": string;
@@ -37,18 +39,22 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
   // lives
   fixed: function GridLayoutFixed({ ref, model, Slot }): ReactNode {
     useUpdateLayout();
-    const alignment = useBehavior(model.spotlightAlignment$);
+    const alignment = useObservableEagerState(
+      useInitial(() =>
+        model.spotlightAlignment$.pipe(
+          distinctUntilChanged(
+            (a1, a2) => a1.block === a2.block && a1.inline === a2.inline,
+          ),
+        ),
+      ),
+    );
 
     const onDragSpotlight: DragCallback = useCallback(
-      ({ xRatio, yRatio }) => {
-        const block = yRatio < 0.5 ? "start" : "end";
-        const inline = xRatio < 0.5 ? "start" : "end";
-        // A drag reports the same alignment on every move; only a change is
-        // worth a re-render
-        const current = model.spotlightAlignment$.value;
-        if (current.block !== block || current.inline !== inline)
-          model.spotlightAlignment$.next({ block, inline });
-      },
+      ({ xRatio, yRatio }) =>
+        model.spotlightAlignment$.next({
+          block: yRatio < 0.5 ? "start" : "end",
+          inline: xRatio < 0.5 ? "start" : "end",
+        }),
       [model.spotlightAlignment$],
     );
 
@@ -72,7 +78,7 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
   scrolling: function GridLayout({ ref, model, Slot }): ReactNode {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
-    const { width, height: minHeight } = useBehavior(minBounds$);
+    const { width, height: minHeight } = useObservableEagerState(minBounds$);
     const { gap, tileWidth, tileHeight } = useMemo(
       () => arrangeTiles(width, minHeight, model.grid.length),
       [width, minHeight, model.grid.length],

src/grid/OneOnOneDesktopLayout.tsx

@@ -7,6 +7,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type ReactNode, useCallback, useMemo } from "react";
+import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
 import { type OneOnOneDesktopLayout as OneOnOneDesktopLayoutModel } from "../state/layout-types.ts";
@@ -36,7 +37,7 @@ export const makeOneOnOneDesktopLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
-    const { width, height } = useBehavior(minBounds$);
+    const { width, height } = useObservableEagerState(minBounds$);
     const pipAlignment = useBehavior(model.pipAlignment$);
     const { tileWidth, tileHeight } = useMemo(
       () => arrangeTiles(width, height, 1),

src/grid/SpotlightLandscapeLayout.tsx

@@ -6,6 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type FC, type ReactNode } from "react";
+import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
 import { type CallLayout } from "./CallLayout";
@@ -32,7 +33,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
-    useBehavior(minBounds$);
+    useObservableEagerState(minBounds$);
 
     return (
       <div ref={ref} className={styles.layer}>
@@ -55,7 +56,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<
   }): ReactNode {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
-    useBehavior(minBounds$);
+    useObservableEagerState(minBounds$);
 
     return (
       <div ref={ref} className={styles.layer}>

src/grid/SpotlightPortraitLayout.tsx

@@ -6,6 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type ReactNode, type CSSProperties } from "react";
+import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
 import { type CallLayout, arrangeTiles } from "./CallLayout";
@@ -57,7 +58,7 @@ export const makeSpotlightPortraitLayout: CallLayout<
   }): ReactNode {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
-    const { width } = useBehavior(minBounds$);
+    const { width } = useObservableEagerState(minBounds$);
     const { gap, tileWidth, tileHeight } = arrangeTiles(
       width,
       // TODO: We pretend that the minimum height is the width, because the

src/index.css

@@ -7,24 +7,10 @@ Please see LICENSE in the repository root for full details.
 
 /* Styles for Element Call as a page of its own. The parts that apply wherever
 Element Call is shown live in base.css; these are about owning the document,
-and are not loaded when a host embeds Element Call as a component.
-
-That includes Compound: the page brings the design tokens, the component styles
-and their fonts, where a host embedding the component supplies its own. The
-`compound` layers are ordered by base.css. */
+and are not loaded when a host embeds Element Call as a component. */
 
 @import url("./base.css");
 
-@import url("@fontsource/inter/400.css");
-@import url("@fontsource/inter/500.css");
-@import url("@fontsource/inter/600.css");
-@import url("@fontsource/inter/700.css");
-@import url("@fontsource/inconsolata/400.css");
-@import url("@fontsource/inconsolata/700.css");
-
-@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
-@import url("@vector-im/compound-web/dist/style.css") layer(compound.components);
-
 body {
   background-color: var(--cpd-color-bg-canvas-default);
   color: var(--cpd-color-text-primary);

src/initializer.tsx

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

src/livekit/MatrixAudioRenderer.test.tsx

@@ -24,12 +24,10 @@ import { testAudioContext } from "../useAudioContext.test";
 import * as MediaDevicesContext from "../MediaDevicesContext";
 import { LivekitRoomAudioRenderer } from "./MatrixAudioRenderer";
 import {
-  mockLocalParticipant,
   mockMediaDevices,
   mockRemoteParticipant,
   mockTrack,
 } from "../utils/test";
-import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import { initializeWidget } from "../widget";
 initializeWidget();
 export const TestAudioContextConstructor = vi.fn(
@@ -133,57 +131,6 @@ it("should render for member", () => {
   expect(queryAllByTestId("audio")).toHaveLength(1);
 });
 
-function spyOnWarn(): ReturnType<typeof vi.fn> {
-  const warn = vi.fn();
-  vi.spyOn(rootLogger, "getChild").mockReturnValue({
-    warn,
-  } as unknown as typeof rootLogger);
-  return warn;
-}
-
-it("should not render or warn for the local participant", () => {
-  const warn = spyOnWarn();
-  const local = mockLocalParticipant({ identity: "@alice:DEV0" });
-  vi.mocked(useTracks).mockReturnValue([mockTrack(local)]);
-  const { queryAllByTestId } = render(
-    <MediaDevicesProvider value={mockMediaDevices({})}>
-      <LivekitRoomAudioRenderer
-        validIdentities={[]}
-        livekitRoom={{ remoteParticipants: new Map() } as unknown as Room}
-        url={""}
-      />
-    </MediaDevicesProvider>,
-  );
-  expect(queryAllByTestId("audio")).toHaveLength(0);
-  expect(warn).not.toHaveBeenCalled();
-});
-
-it("should warn only once per unexpected participant", () => {
-  const warn = spyOnWarn();
-  const { rerender } = renderTestComponent(
-    [{ userId: "@bob", deviceId: "DEV0" }],
-    ["@alice:DEV0"],
-    [
-      {
-        participantId: "@alice:DEV0",
-        kind: Track.Kind.Audio,
-        source: Track.Source.Microphone,
-      },
-    ],
-  );
-  expect(warn).toHaveBeenCalledTimes(1);
-  rerender(
-    <MediaDevicesProvider value={mockMediaDevices({})}>
-      <LivekitRoomAudioRenderer
-        validIdentities={[]}
-        livekitRoom={{ remoteParticipants: new Map() } as unknown as Room}
-        url={""}
-      />
-    </MediaDevicesProvider>,
-  );
-  expect(warn).toHaveBeenCalledTimes(1);
-});
-
 it("should not render without member", () => {
   const { container, queryAllByTestId } = renderTestComponent(
     [{ userId: "@bob", deviceId: "DEV0" }],

src/livekit/MatrixAudioRenderer.tsx

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { getTrackReferenceId } from "@livekit/components-core";
 import { type Room as LivekitRoom } from "livekit-client";
 import { type RemoteAudioTrack, Track } from "livekit-client";
-import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
 import {
   useTracks,
   AudioTrack,
@@ -60,9 +60,6 @@ export function LivekitRoomAudioRenderer({
   muted,
 }: MatrixAudioRendererProps): ReactNode {
   const logger = rootLogger.getChild("[MatrixAudioRenderer]");
-  // Identities we have already warned about, so that re-renders (which happen
-  // on every active speaker update) don't repeat the warning.
-  const warnedIdentities = useRef(new Set<string>());
   const tracks = useTracks(
     [
       Track.Source.Microphone,
@@ -75,27 +72,22 @@ export function LivekitRoomAudioRenderer({
       room: livekitRoom,
     },
   )
-    // Only keep remote audio tracks (we never render our own audio)
-    .filter(
-      (ref) =>
-        ref.publication.kind === Track.Kind.Audio && !ref.participant.isLocal,
-    )
+    // Only keep audio tracks
+    .filter((ref) => ref.publication.kind === Track.Kind.Audio)
     // Only keep tracks from participants that are in the validIdentities list
     .filter((ref) => {
-      const { identity } = ref.participant;
-      const isValid = validIdentities.includes(identity);
-      if (!isValid && !warnedIdentities.current.has(identity)) {
-        warnedIdentities.current.add(identity);
+      const isValid = validIdentities.includes(ref.participant.identity);
+      if (!isValid) {
+        // TODO make sure to also skip the warn logging for the local identity
         // Log that there is an invalid identity, that means that someone is publishing audio that is not expected to be in the call.
         logger.warn(
-          `Audio track ${identity} from ${url} has no matching matrix call member`,
+          `Audio track ${ref.participant.identity} from ${url} has no matching matrix call member`,
           `current members: ${validIdentities.join()}`,
           `track will not get rendered`,
         );
-      } else if (isValid) {
-        warnedIdentities.current.delete(identity);
+        return false;
       }
-      return isValid;
+      return true;
     });
 
   // This component is also (in addition to the "only play audio for connected members" logic above)

src/livekit/TrackProcessorContext.test.ts

@@ -1,87 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { describe, expect, it, vi } from "vitest";
-import { type LocalVideoTrack } from "livekit-client";
-import {
-  type BackgroundOptions,
-  type ProcessorWrapper,
-} from "@livekit/track-processors";
-
-import { applyProcessor, trackProcessorSync } from "./TrackProcessorContext";
-import { constant } from "../state/Behavior";
-import { flushPromises, testScope } from "../utils/test";
-
-const processor = {} as ProcessorWrapper<BackgroundOptions>;
-
-function mockTrack(
-  readyState: MediaStreamTrackState,
-  current?: ProcessorWrapper<BackgroundOptions>,
-): LocalVideoTrack {
-  return {
-    mediaStreamTrack: { readyState },
-    getProcessor: vi.fn().mockReturnValue(current),
-    setProcessor: vi.fn().mockResolvedValue(undefined),
-    stopProcessor: vi.fn().mockResolvedValue(undefined),
-  } as unknown as LocalVideoTrack;
-}
-
-describe("applyProcessor", () => {
-  it("attaches the processor to a live track", () => {
-    const track = mockTrack("live");
-    applyProcessor(track, processor);
-    expect(track.setProcessor).toHaveBeenCalledWith(processor);
-  });
-
-  it("does not attach the processor to an ended track", () => {
-    const track = mockTrack("ended");
-    applyProcessor(track, processor);
-    expect(track.setProcessor).not.toHaveBeenCalled();
-  });
-
-  it("does not surface a rejected setProcessor", async () => {
-    const track = mockTrack("live");
-    vi.mocked(track.setProcessor).mockRejectedValue(
-      new TypeError("Input track cannot be ended"),
-    );
-    const unhandled = vi.fn();
-    process.on("unhandledRejection", unhandled);
-    applyProcessor(track, processor);
-    await flushPromises();
-    process.off("unhandledRejection", unhandled);
-    expect(unhandled).not.toHaveBeenCalled();
-  });
-
-  it("stops the processor when none is wanted", () => {
-    const track = mockTrack("live", processor);
-    applyProcessor(track, undefined);
-    expect(track.stopProcessor).toHaveBeenCalled();
-  });
-
-  it("does not surface a rejected stopProcessor", async () => {
-    const track = mockTrack("live", processor);
-    vi.mocked(track.stopProcessor).mockRejectedValue(new Error("nope"));
-    const unhandled = vi.fn();
-    process.on("unhandledRejection", unhandled);
-    applyProcessor(track, undefined);
-    await flushPromises();
-    process.off("unhandledRejection", unhandled);
-    expect(unhandled).not.toHaveBeenCalled();
-  });
-});
-
-describe("trackProcessorSync", () => {
-  it("applies the processor to the current track", () => {
-    const track = mockTrack("live");
-    trackProcessorSync(
-      testScope(),
-      constant(track),
-      constant({ supported: true, processor }),
-    );
-    expect(track.setProcessor).toHaveBeenCalledWith(processor);
-  });
-});

src/livekit/TrackProcessorContext.tsx

@@ -19,8 +19,8 @@ import {
   useMemo,
 } from "react";
 import { type LocalVideoTrack } from "livekit-client";
-import { logger } from "matrix-js-sdk/lib/logger";
-import { combineLatest } from "rxjs";
+import { combineLatest, map, type Observable } from "rxjs";
+import { useObservable } from "observable-hooks";
 
 import {
   backgroundBlur as backgroundBlurSettings,
@@ -30,7 +30,6 @@ import { BlurBackgroundTransformer } from "./BlurBackgroundTransformer";
 import { type Behavior } from "../state/Behavior";
 import { type ObservableScope } from "../state/ObservableScope";
 import { platform } from "../Platform";
-import { useValueBehavior } from "../useValueBehavior";
 
 //TODO-MULTI-SFU: This is not yet fully there.
 // it is a combination of exposing observable and react hooks.
@@ -52,36 +51,18 @@ export function useTrackProcessor(): ProcessorState {
   return state;
 }
 
-export function useTrackProcessorState$(): Behavior<ProcessorState> {
-  return useValueBehavior(useTrackProcessor());
-}
+export function useTrackProcessorObservable$(): Observable<ProcessorState> {
+  const state = use(ProcessorContext);
+  if (state === undefined)
+    throw new Error(
+      "useTrackProcessor must be used within a ProcessorProvider",
+    );
+  const state$ = useObservable(
+    (init$) => init$.pipe(map(([init]) => init)),
+    [state],
+  );
 
-/**
- * Attaches or detaches the processor so that the track matches the desired
- * state, without throwing.
- */
-export function applyProcessor(
-  videoTrack: LocalVideoTrack,
-  processor: ProcessorWrapper<BackgroundOptions> | undefined,
-): void {
-  if (processor && !videoTrack.getProcessor()) {
-    // A MediaStreamTrackProcessor cannot be constructed on an ended track
-    // (e.g. the camera was stopped while the processor was being applied),
-    // and setProcessor rejects with a TypeError. The track is going away
-    // anyway, so there is nothing to attach to.
-    if (videoTrack.mediaStreamTrack.readyState === "ended") {
-      logger.debug("Not attaching video processor to an ended track");
-      return;
-    }
-    videoTrack.setProcessor(processor).catch((e) => {
-      logger.warn("Failed to attach video processor", e);
-    });
-  }
-  if (!processor && videoTrack.getProcessor()) {
-    videoTrack.stopProcessor().catch((e) => {
-      logger.warn("Failed to stop video processor", e);
-    });
-  }
+  return state$;
 }
 
 /**
@@ -97,7 +78,13 @@ export const trackProcessorSync = (
     .subscribe(([videoTrack, processorState]) => {
       if (!processorState) return;
       if (!videoTrack) return;
-      applyProcessor(videoTrack, processorState.processor);
+      const { processor } = processorState;
+      if (processor && !videoTrack.getProcessor()) {
+        void videoTrack.setProcessor(processor);
+      }
+      if (!processor && videoTrack.getProcessor()) {
+        void videoTrack.stopProcessor();
+      }
     });
 };
 
@@ -107,7 +94,12 @@ export const useTrackProcessorSync = (
   const { processor } = useTrackProcessor();
   useEffect(() => {
     if (!videoTrack) return;
-    applyProcessor(videoTrack, processor);
+    if (processor && !videoTrack.getProcessor()) {
+      void videoTrack.setProcessor(processor);
+    }
+    if (!processor && videoTrack.getProcessor()) {
+      void videoTrack.stopProcessor();
+    }
   }, [processor, videoTrack]);
 };
 

src/reactions/index.ts

@@ -29,8 +29,6 @@ import waveSoundOgg from "../sound/reactions/wave.ogg?url";
 import waveSoundMp3 from "../sound/reactions/wave.mp3?url";
 import baduntssSoundOgg from "../sound/reactions/baduntss.ogg?url";
 import baduntssSoundMp3 from "../sound/reactions/baduntss.mp3?url";
-import bellSoundOgg from "../sound/reactions/bell.ogg?url";
-import bellSoundMp3 from "../sound/reactions/bell.mp3?url";
 
 export const ElementCallReactionEventType = "io.element.call.reaction";
 
@@ -204,15 +202,6 @@ export const ReactionSet: ReactionOption[] = [
       mp3: baduntssSoundMp3,
     },
   },
-  {
-    emoji: "🛎️",
-    name: "bell",
-    alias: ["ding"],
-    sound: {
-      ogg: bellSoundOgg,
-      mp3: bellSoundMp3,
-    },
-  },
 ];
 
 export interface RaisedHandInfo {

src/room/InCallView.tsx

@@ -20,6 +20,8 @@ import {
 import useMeasure from "react-use-measure";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import classNames from "classnames";
+import { map } from "rxjs";
+import { useObservable } from "observable-hooks";
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import { useTranslation } from "react-i18next";
 
@@ -75,11 +77,10 @@ import {
   useAppBarSubtitle,
 } from "../AppBar.tsx";
 import { useBehavior } from "../useBehavior.ts";
-import { useValueBehavior } from "../useValueBehavior.ts";
 import { constant } from "../state/Behavior.ts";
 import { Toast } from "../Toast.tsx";
 import overlayStyles from "../Overlay.module.css";
-import { useTrackProcessorState$ } from "../livekit/TrackProcessorContext.tsx";
+import { useTrackProcessorObservable$ } from "../livekit/TrackProcessorContext.tsx";
 import { type Layout } from "../state/layout-types.ts";
 import { ObservableScope } from "../state/ObservableScope.ts";
 import { CallFooter, type FooterSnapshot } from "../components/CallFooter.tsx";
@@ -120,7 +121,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   const urlParams = useUrlParams();
   const hostBridge = useHostBridge();
   const mediaDevices = useMediaDevices();
-  const trackProcessorState$ = useTrackProcessorState$();
+  const trackProcessorState$ = useTrackProcessorObservable$();
   // The element we have to draw the call in: the page, or the container a host
   // gave us. Its size, not the window's, decides how the call is laid out.
   const rootElement = useRootElement();
@@ -150,7 +151,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
       },
       reactionsReader.raisedHands$,
       reactionsReader.reactions$,
-      trackProcessorState$,
+      scope.behavior(trackProcessorState$),
     );
     // TODO move this somewhere else once we use the callViewModel in the lobby as well!
     vm.join();
@@ -251,7 +252,7 @@ export const InCallView: FC<InCallViewProps> = ({
 
   useWakeLock();
   // TODO-MULTI-SFU This is unused now??
-  // const connectionState = useBehavior(vm.livekitConnectionState$);
+  // const connectionState = useObservableEagerState(vm.livekitConnectionState$);
 
   // annoyingly we don't get the disconnection reason this way,
   // only by listening for the emitted event
@@ -373,7 +374,10 @@ export const InCallView: FC<InCallViewProps> = ({
       edgeToEdge,
     ],
   );
-  const gridBounds$ = useValueBehavior(gridBounds);
+  const gridBoundsObservable$ = useObservable(
+    (inputs$) => inputs$.pipe(map(([gridBounds]) => gridBounds)),
+    [gridBounds],
+  );
 
   useAppBarHidden(!showHeader);
   useAppBarSubtitle(
@@ -534,7 +538,7 @@ export const InCallView: FC<InCallViewProps> = ({
   );
 
   const layouts = useMemo(() => {
-    const inputs = { minBounds$: gridBounds$ };
+    const inputs = { minBounds$: gridBoundsObservable$ };
     return {
       grid: makeGridLayout(inputs),
       "spotlight-landscape": makeSpotlightLandscapeLayout(inputs),
@@ -543,7 +547,7 @@ export const InCallView: FC<InCallViewProps> = ({
       "one-on-one-desktop": makeOneOnOneDesktopLayout(inputs),
       "one-on-one-mobile": makeOneOnOneMobileLayout(inputs),
     };
-  }, [gridBounds$]);
+  }, [gridBoundsObservable$]);
 
   const showFooter = useBehavior(footerVm.showFooter$);
   const renderContent = (): JSX.Element => {

src/room/LobbyView.test.tsx

@@ -5,10 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { of } from "rxjs";
+import { describe, expect, it, vi } from "vitest";
+import { render } from "@testing-library/react";
 import { LeaveToHomeProvider } from "../LeaveToHomeContext";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { type MatrixClient } from "matrix-js-sdk";
@@ -20,13 +18,7 @@ import {
 
 import { LobbyView } from "./LobbyView";
 import { E2eeType } from "../e2ee/e2eeType";
-import {
-  mockMediaDevices,
-  mockMuteStates,
-  restoreAudioCapture,
-  stubAudioCapture,
-} from "../utils/test";
-import { type MediaDevices } from "../state/MediaDevices";
+import { mockMediaDevices, mockMuteStates } from "../utils/test";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { type ProcessorState } from "../livekit/TrackProcessorContext";
 import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
@@ -85,10 +77,9 @@ function renderLobbyView(
   props: Partial<Parameters<typeof LobbyView>[0]> = {},
   withAppBar = false,
   platform = "android",
-  devices: Partial<MediaDevices> = {},
 ): ReturnType<typeof render> {
   platformMock.mockReturnValue(platform);
-  const mediaDevices = mockMediaDevices(devices);
+  const mediaDevices = mockMediaDevices({});
   const muteStates = mockMuteStates();
   const hideHeader = withAppBar ? true : false;
   const lobbyView = (
@@ -187,30 +178,3 @@ describe("LobbyView", () => {
     expect(await axe(container)).toHaveNoViolations();
   });
 });
-
-describe("LobbyView microphone level", () => {
-  afterEach(restoreAudioCapture);
-
-  it("shows the microphone level meter", async () => {
-    const capture = stubAudioCapture();
-    capture.grant();
-    const user = userEvent.setup();
-    const { getByRole } = renderLobbyView({}, false, "desktop", {
-      requestDeviceNames: (): void => {},
-      audioInput: {
-        available$: of(
-          new Map([["mic1", { type: "name", name: "Microphone 1" }]]),
-        ),
-        selected$: of({ id: "mic1" }),
-        select: (): void => {},
-      },
-    } as unknown as Partial<MediaDevices>);
-
-    // Pre-join reaches the meter through the same chevron as a call.
-    await user.click(getByRole("button", { name: "Microphone" }));
-
-    expect(
-      await screen.findByRole("meter", { name: "Microphone level" }),
-    ).toBeInTheDocument();
-  });
-});

src/room/LobbyView.tsx

@@ -24,6 +24,7 @@ import {
   type LocalVideoTrack,
   Track,
 } from "livekit-client";
+import { useObservableEagerState } from "observable-hooks";
 
 import inCallStyles from "./InCallView.module.css";
 import styles from "./LobbyView.module.css";
@@ -124,7 +125,9 @@ export const LobbyView: FC<Props> = ({
   );
 
   const devices = useMediaDevices();
-  const videoInputId = useBehavior(devices.videoInput.selected$)?.id;
+  const videoInputId = useObservableEagerState(
+    devices.videoInput.selected$,
+  )?.id;
 
   // Capture the audio options as they were when we first mounted, because
   // we're not doing anything with the audio anyway so we don't need to

src/settings/DeviceSelection.test.tsx

@@ -1,82 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Form } from "@vector-im/compound-web";
-import { describe, expect, it, vi } from "vitest";
-
-import { DeviceSelection } from "./DeviceSelection";
-import { constant } from "../state/Behavior";
-import {
-  type AudioOutputDeviceLabel,
-  type DeviceLabel,
-  type MediaDevice,
-  type SelectedDevice,
-} from "../state/MediaDevices";
-
-type Device = MediaDevice<DeviceLabel | AudioOutputDeviceLabel, SelectedDevice>;
-
-function mockDevice(
-  available: [string, DeviceLabel][],
-  selectedId: string | undefined,
-): Device & { select: ReturnType<typeof vi.fn> } {
-  return {
-    available$: constant(new Map(available)),
-    selected$: constant(
-      selectedId === undefined ? undefined : { id: selectedId },
-    ),
-    select: vi.fn(),
-  } as unknown as Device & { select: ReturnType<typeof vi.fn> };
-}
-
-const twoDevices: [string, DeviceLabel][] = [
-  ["a", { type: "name", name: "Mic A" }],
-  ["b", { type: "number", number: 2 }],
-];
-
-describe("DeviceSelection", () => {
-  it("marks the selected device and selects another on click", async () => {
-    const device = mockDevice(twoDevices, "a");
-    render(
-      <Form.Root>
-        <DeviceSelection
-          device={device}
-          title="Microphone"
-          numberedLabel={(n) => `Microphone ${n}`}
-        />
-      </Form.Root>,
-    );
-
-    const first = screen.getByRole<HTMLInputElement>("radio", {
-      name: "Mic A",
-    });
-    const second = screen.getByRole<HTMLInputElement>("radio", {
-      name: "Microphone 2",
-    });
-    expect(first.checked).toBe(true);
-    expect(second.checked).toBe(false);
-
-    await userEvent.click(second);
-    expect(device.select).toHaveBeenCalledWith("b");
-  });
-
-  it("shows nothing when there is no choice to make", () => {
-    const device = mockDevice([twoDevices[0]], "a");
-    render(
-      <Form.Root>
-        <DeviceSelection
-          device={device}
-          title="Microphone"
-          numberedLabel={(n) => `Microphone ${n}`}
-        />
-      </Form.Root>,
-    );
-    expect(screen.queryByRole("radio")).toBeNull();
-    expect(screen.queryByText("Microphone")).toBeNull();
-  });
-});

src/settings/DeviceSelection.tsx

@@ -21,6 +21,7 @@ import {
   Separator,
 } from "@vector-im/compound-web";
 import { Trans, useTranslation } from "react-i18next";
+import { useObservableEagerState } from "observable-hooks";
 
 import {
   type AudioOutputDeviceLabel,
@@ -29,7 +30,6 @@ import {
   type MediaDevice,
 } from "../state/MediaDevices";
 import styles from "./DeviceSelection.module.css";
-import { useBehavior } from "../useBehavior";
 
 interface Props {
   device: MediaDevice<DeviceLabel | AudioOutputDeviceLabel, SelectedDevice>;
@@ -44,8 +44,8 @@ export const DeviceSelection: FC<Props> = ({
 }) => {
   const { t } = useTranslation();
   const groupId = useId();
-  const available = useBehavior(device.available$);
-  const selectedId = useBehavior(device.selected$)?.id;
+  const available = useObservableEagerState(device.available$);
+  const selectedId = useObservableEagerState(device.selected$)?.id;
   const onChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
       device.select(e.target.value);

src/sound/LICENCE.md

@@ -10,7 +10,6 @@ The following sound effects have been licensed from Pixabay, under https://pixab
 - `reactions/generic`
 - `reactions/lightbulb`
 - `reactions/party`
-- `reactions/bell`
 
 ### Other
 

src/soundUtils.test.ts

@@ -1,77 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-
-import { prefetchSounds } from "./soundUtils";
-
-const bytesOf = (buffer: ArrayBuffer): number[] => [...new Uint8Array(buffer)];
-
-describe("prefetchSounds", () => {
-  const fetchSpy = vi.fn<typeof fetch>();
-
-  beforeEach(() => {
-    vi.stubGlobal("fetch", fetchSpy);
-  });
-
-  afterEach(() => {
-    vi.unstubAllGlobals();
-    fetchSpy.mockReset();
-  });
-
-  it("fetches sounds given as ordinary URLs", async () => {
-    fetchSpy.mockResolvedValue(
-      new Response(new Uint8Array([1, 2, 3]), { status: 200 }),
-    );
-    const sounds = await prefetchSounds({
-      beep: { ogg: "https://example.org/beep.ogg" },
-    });
-    expect(fetchSpy).toHaveBeenCalledWith("https://example.org/beep.ogg");
-    expect(bytesOf(sounds.beep)).toEqual([1, 2, 3]);
-  });
-
-  it("decodes base64 data: URLs without fetching them", async () => {
-    // "OggS" — the bytes 0x4f 0x67 0x67 0x53
-    const sounds = await prefetchSounds({
-      beep: { ogg: "data:audio/ogg;base64,T2dnUw==" },
-    });
-    expect(fetchSpy).not.toHaveBeenCalled();
-    expect(bytesOf(sounds.beep)).toEqual([0x4f, 0x67, 0x67, 0x53]);
-  });
-
-  it("leaves out a sound with a percent-encoded data: URL", async () => {
-    const sounds = await prefetchSounds({
-      beep: { ogg: "data:audio/ogg,Ogg%53" },
-    });
-    expect(fetchSpy).not.toHaveBeenCalled();
-    expect(sounds).toEqual({});
-  });
-
-  it("leaves out a sound whose response is not okay", async () => {
-    fetchSpy.mockResolvedValue(new Response(null, { status: 404 }));
-    const sounds = await prefetchSounds({
-      beep: { ogg: "https://example.org/missing.ogg" },
-    });
-    expect(sounds).toEqual({});
-  });
-
-  it("leaves out a sound that fails to load, keeping the others", async () => {
-    fetchSpy.mockRejectedValue(new TypeError("Failed to fetch"));
-    const sounds = await prefetchSounds({
-      beep: { ogg: "https://example.org/beep.ogg" },
-      boop: { ogg: "data:audio/ogg;base64,T2dnUw==" },
-    });
-    expect(Object.keys(sounds)).toEqual(["boop"]);
-  });
-
-  it("leaves out a sound with a malformed data: URL", async () => {
-    const sounds = await prefetchSounds({
-      beep: { ogg: "data:audio/ogg;base64" },
-    });
-    expect(sounds).toEqual({});
-  });
-});

src/soundUtils.ts

@@ -32,43 +32,6 @@ function getPreferredAudioFormat(): "ogg" | "mp3" {
 
 const preferredFormat = getPreferredAudioFormat();
 
-/**
- * Decode a `data:` URL into the bytes it carries.
- *
- * The component build inlines the sound files as `data:` URLs. Those could be
- * `fetch`ed like any other URL, but that fetch is subject to the host page's
- * Content Security Policy, and `connect-src` lists rarely allow `data:` (a `*`
- * source does not cover it). Reading the bytes out of the URL directly needs no
- * network access, so no policy can stop it.
- * @param url The `data:` URL to decode.
- * @returns The decoded bytes.
- */
-function decodeDataUrl(url: string): ArrayBuffer {
-  const separator = url.indexOf(",");
-  if (!url.startsWith("data:") || separator === -1)
-    throw new Error("Not a valid data: URL");
-  const header = url.slice("data:".length, separator);
-  // Vite only percent-encodes SVGs; every other inlined asset is base64.
-  if (!header.split(";").includes("base64"))
-    throw new Error("Only base64 data: URLs are supported");
-  // `decoded` is a binary string: one char per byte
-  const decoded = atob(url.slice(separator + 1));
-  const bytes = Uint8Array.from(decoded, (c) => c.charCodeAt(0));
-  return bytes.buffer;
-}
-
-/**
- * Load the bytes of a single sound file.
- * @param url Where the sound is: an ordinary URL to fetch, or a `data:` URL.
- * @returns The bytes, or null if the sound could not be loaded.
- */
-async function loadSound(url: string): Promise<ArrayBuffer | null> {
-  if (url.startsWith("data:")) return decodeDataUrl(url);
-  const response = await fetch(url);
-  if (isFailure(response)) return null;
-  return await response.arrayBuffer();
-}
-
 /**
  * Prefetch sounds to be used by the AudioContext. This can
  * be called outside the scope of a component to ensure the
@@ -84,20 +47,18 @@ export async function prefetchSounds<S extends string>(
     Object.entries(sounds).map(async ([name, file]) => {
       const { mp3, ogg } = file as SoundDefinition;
       // Use preferred format, fallback to ogg if no mp3 is provided.
-      const url = preferredFormat === "ogg" ? ogg : (mp3 ?? ogg);
-      let buffer: ArrayBuffer | null = null;
-      try {
-        buffer = await loadSound(url);
-      } catch (e) {
-        logger.warn(`Could not load sound ${name}`, e);
-      }
-      if (buffer === null) {
+      // Load an audio file
+      const response = await fetch(
+        preferredFormat === "ogg" ? ogg : (mp3 ?? ogg),
+      );
+      if (isFailure(response)) {
         // If the sound doesn't load, it's not the end of the world. We won't play
         // the sound when requested, but it's better than failing the whole application.
         logger.warn(`Could not load sound ${name}, response was not okay`);
         return;
       }
-      buffers[name] = buffer;
+      // Decode it
+      buffers[name] = await response.arrayBuffer();
     }),
   );
   return buffers as Record<S, ArrayBuffer>;

src/state/AudioOutput.test.ts

@@ -10,7 +10,6 @@ import * as ComponentsCore from "@livekit/components-core";
 
 import { ObservableScope } from "./ObservableScope";
 import { AudioOutput } from "./MediaDevices";
-import { audioOutput as audioOutputSetting } from "../settings/settings";
 import { withTestScheduler } from "../utils/test";
 
 const BT_SPEAKER = {
@@ -94,8 +93,6 @@ describe("AudioOutput Tests", () => {
 
   beforeEach(() => {
     testScope = new ObservableScope();
-    // Device preferences persist in localStorage across tests
-    audioOutputSetting.setValue(undefined);
   });
 
   afterEach(() => {
@@ -153,9 +150,7 @@ describe("AudioOutput Tests", () => {
 
       expectObservable(audioOutput.selected$).toBe("abcde", {
         a: undefined,
-        // No "default" pseudo-device (Firefox): the virtual browser default is
-        // selected until the user picks something.
-        b: { id: "", virtualEarpiece: false },
+        b: { id: LAPTOP_SPEAKER.deviceId, virtualEarpiece: false },
         c: { id: MONITOR_SPEAKER.deviceId, virtualEarpiece: false },
         d: { id: LAPTOP_SPEAKER.deviceId, virtualEarpiece: false },
         e: { id: MONITOR_SPEAKER.deviceId, virtualEarpiece: false },
@@ -163,61 +158,6 @@ describe("AudioOutput Tests", () => {
     });
   });
 
-  it("falls back to the browser default when the selected device disappears", () => {
-    withTestScheduler(({ behavior, cold, schedule, expectObservable }) => {
-      vi.mocked(ComponentsCore.createMediaDeviceObserver).mockReturnValue(
-        cold("a---b", {
-          a: DEVICE_LIST_B,
-          // The monitor is unplugged (or a Bluetooth sink changes profile)
-          b: [LAPTOP_SPEAKER],
-        }),
-      );
-
-      const audioOutput = new AudioOutput(
-        behavior("a", { a: true }),
-        testScope,
-      );
-
-      schedule("--a", {
-        a: () => audioOutput.select(MONITOR_SPEAKER.deviceId),
-      });
-
-      expectObservable(audioOutput.selected$).toBe("a-b-c", {
-        a: { id: "", virtualEarpiece: false },
-        b: { id: MONITOR_SPEAKER.deviceId, virtualEarpiece: false },
-        // Rather than pinning some other physical device, let the browser route
-        c: { id: "", virtualEarpiece: false },
-      });
-    });
-  });
-
-  it("lists the virtual browser default first when there is no default pseudo-device", () => {
-    withTestScheduler(({ behavior, cold, expectObservable }) => {
-      vi.mocked(ComponentsCore.createMediaDeviceObserver).mockReturnValue(
-        cold("a", { a: DEVICE_LIST_B }),
-      );
-
-      const audioOutput = new AudioOutput(
-        behavior("a", { a: true }),
-        testScope,
-      );
-
-      expectObservable(audioOutput.available$).toBe("a", {
-        a: new Map([
-          ["", { type: "default", name: null }],
-          [
-            LAPTOP_SPEAKER.deviceId,
-            { type: "name", name: LAPTOP_SPEAKER.label },
-          ],
-          [
-            MONITOR_SPEAKER.deviceId,
-            { type: "name", name: MONITOR_SPEAKER.label },
-          ],
-        ]),
-      });
-    });
-  });
-
   it("Test mappings", () => {
     // In a real life setup there would be first a blanked list
     // then the real one.

src/state/CallViewModel/CallViewModel.ts

@@ -16,6 +16,7 @@ import {
 import { type Room as MatrixRoom } from "matrix-js-sdk";
 import {
   BehaviorSubject,
+  catchError,
   combineLatest,
   distinctUntilChanged,
   filter,
@@ -30,6 +31,7 @@ import {
   scan,
   startWith,
   Subject,
+  switchAll,
   switchMap,
   switchScan,
   take,
@@ -37,12 +39,11 @@ import {
   throttleTime,
   timer,
   takeUntil,
-  from,
 } from "rxjs";
 import { type Logger, logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import {
   MembershipManagerEvent,
-  type LivekitTransport,
+  type LivekitTransportConfig,
   type MatrixRTCSession,
   type RTCCallIntent,
   type RTCNotificationType,
@@ -82,7 +83,6 @@ 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 WindowMode,
+  type OneOnOneDesktopLayoutMedia,
+  type OneOnOneMobileLayoutMedia,
+  type SpotlightExpandedLayoutMedia,
+  type SpotlightLandscapeLayoutMedia,
+  type SpotlightPortraitLayoutMedia,
 } 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";
@@ -112,7 +112,7 @@ import {
   TransportState,
 } from "./localMember/LocalMember.ts";
 import {
-  getLocalTransport,
+  createLocalTransport$,
   type LocalTransport,
 } from "./localMember/LocalTransport.ts";
 import {
@@ -263,10 +263,21 @@ 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;
@@ -552,26 +563,20 @@ export function createCallViewModel$(
   const ownMembershipIdentity: CallMembershipIdentityParts = {
     userId,
     deviceId,
-    // Consumed by the sticky membership manager as `member.id`, *and* stamped
-    // into every to-device key event by the key transport. A pre-sticky
-    // membership advertises `${userId}:${deviceId}` as its `membershipID`
-    // instead, so a uuid there names a member no peer can resolve.
-    memberId:
-      matrixRTCMode === MatrixRTCMode.Matrix_2_0
-        ? uuidv4()
-        : `${userId}:${deviceId}`,
+    // This will only be consumed by the sticky membership manager. So it has no impact on legacy calls.
+    memberId: uuidv4(),
   };
 
-  const localTransport$ = options.localTransport
-    ? constant(options.localTransport)
-    : from(
-        getLocalTransport({
-          ownMembershipIdentity,
-          client,
-          roomId: matrixRoom.roomId,
-          matrixRTCMode,
-        }),
-      );
+  const localTransport =
+    options.localTransport ??
+    createLocalTransport$({
+      scope: scope,
+      memberships$: memberships$,
+      ownMembershipIdentity,
+      client,
+      roomId: matrixRoom.roomId,
+      matrixRTCMode,
+    });
 
   const connectionFactory =
     options.connectionFactory ??
@@ -588,7 +593,17 @@ export function createCallViewModel$(
   const connectionManager = createConnectionManager$({
     scope: scope,
     connectionFactory: connectionFactory,
-    localTransport$,
+    localTransport$: scope.behavior(
+      localTransport.active$.pipe(
+        catchError((e: unknown) => {
+          logger.info(
+            "could not pass local transport to createConnectionManager$. localTransport$ threw an error",
+            e,
+          );
+          return of(null);
+        }),
+      ),
+    ),
     remoteTransports$: membershipsAndTransports.transports$,
     logger: logger,
     ownMembershipIdentity,
@@ -613,7 +628,7 @@ export function createCallViewModel$(
     ),
     muteStates,
     joinMatrixRTC: (
-      transport: LivekitTransport,
+      transport: LivekitTransportConfig,
       delayedLeaveTimings: ResolvedDelayedLeaveTimings,
     ) => {
       return enterRTCSession(
@@ -644,7 +659,7 @@ export function createCallViewModel$(
     connectionManager,
     client,
     matrixRTCSession,
-    localTransport$,
+    localTransport,
     roomId: matrixRoom.roomId,
     hideScreensharing,
     hostBridge,
@@ -970,16 +985,33 @@ export function createCallViewModel$(
         mediaItems.length === 0
           ? of([])
           : combineLatest(
-              mediaItems.map((media) =>
-                media.speaking$.pipe(map((speaking) => ({ media, speaking }))),
+              mediaItems.map((m) =>
+                m.speaking$.pipe(map((s) => [m, s] as const)),
               ),
             ),
       ),
       scan<
-        { media: UserMediaViewModel; speaking: boolean }[],
+        (readonly [UserMediaViewModel, boolean])[],
         UserMediaViewModel | undefined,
         undefined
-      >(chooseSpotlightSpeaker, 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),
     ),
   );
 
@@ -1023,12 +1055,33 @@ export function createCallViewModel$(
     ),
   );
 
-  const spotlightAndPip$ = scope.behavior(
-    combineLatest(
-      [ringingMedia$, screenShares$, spotlightSpeaker$, localUserMediaForPip$],
-      (ringing, screenShares, speaker, localPip) =>
-        computeSpotlight({ ringing, screenShares, speaker, localPip }),
-    ).pipe(distinctUntilChanged(shallowObjectEquals)),
+  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 spotlight$ = scope.behavior<MediaViewModel[]>(
@@ -1086,7 +1139,56 @@ export function createCallViewModel$(
     hasRemoteScreenShares$,
   );
 
-  const oneOnOneLayoutMedia$: Behavior<OneOnOneMedia | null> = scope.behavior(
+  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(
     combineLatest([userMedia$, screenShares$]).pipe(
       switchMap(([userMedia, screenShares]) => {
         // One-on-one layout only supports 2 user media, no screen shares
@@ -1124,12 +1226,47 @@ export function createCallViewModel$(
     ),
   );
 
-  const localVideoEnabled$ = scope.behavior<boolean>(
+  const oneOnOneDesktopLayoutMedia$: Observable<OneOnOneDesktopLayoutMedia | null> =
     oneOnOneLayoutMedia$.pipe(
-      switchMap((media) =>
-        media === null ? of(false) : media.local.videoEnabled$,
-      ),
-    ),
+      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,
+    })),
   );
 
   spotlight$
@@ -1164,38 +1301,66 @@ export function createCallViewModel$(
    * The media to be used to produce a layout.
    */
   const layoutMedia$ = scope.behavior<LayoutMedia>(
-    // 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>),
+    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$;
+        }
+      }),
     ),
   );
 
@@ -1496,7 +1661,7 @@ export function createCallViewModel$(
     layoutInternals$.pipe(
       map(({ layout }) => layout),
       // Drop redundant layout updates before they would hit React.
-      distinctUntilChanged(shallowObjectEquals<Layout>),
+      distinctUntilChanged<Layout>(layoutShallowEquals),
     ),
   );
 

src/state/CallViewModel/CallViewModelTestUtils.ts

@@ -210,8 +210,11 @@ export function withCallViewModel(mode: MatrixRTCMode) {
         connectionState$,
         windowSize$,
         localTransport: {
-          transport: exampleTransport,
-          sfuConfig: exampleSfuConfig,
+          active$: constant({
+            transport: exampleTransport,
+            sfuConfig: exampleSfuConfig,
+          }),
+          advertised$: constant(exampleTransport),
         },
         connectionFactory: {
           createConnection(

src/state/CallViewModel/localMember/LocalMember.test.ts

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 
 import {
   Status as RTCMemberStatus,
-  type LivekitTransport,
+  type LivekitTransportConfig,
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
 import {
@@ -21,7 +21,7 @@ import {
   beforeEach,
   afterEach,
 } from "vitest";
-import { BehaviorSubject, map, of, Subject } from "rxjs";
+import { BehaviorSubject, map, of } from "rxjs";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { type LocalParticipant, type LocalTrack } from "livekit-client";
 import fetchMock from "fetch-mock";
@@ -50,7 +50,10 @@ import {
   TrackState,
   watchScreenShareToggle,
 } from "./LocalMember";
-import { MatrixRTCTransportMissingError } from "../../../utils/errors";
+import {
+  FailToGetOpenIdToken,
+  MatrixRTCTransportMissingError,
+} from "../../../utils/errors";
 import { Epoch, ObservableScope } from "../../ObservableScope";
 import { constant } from "../../Behavior";
 import { ConnectionManagerData } from "../remoteMembers/ConnectionManager";
@@ -58,7 +61,10 @@ import { ConnectionState, type Connection } from "../remoteMembers/Connection";
 import { type Publisher } from "./Publisher";
 import { initializeWidget } from "../../../widget";
 import { nullHostBridge } from "../../../HostBridge";
-import { type LocalTransport } from "./LocalTransport";
+import {
+  type LocalTransport,
+  type LocalTransportWithSFUConfig,
+} from "./LocalTransport";
 import * as openIDSFU from "../../../livekit/openIDSFU";
 
 initializeWidget();
@@ -121,7 +127,8 @@ const mockedClient = {
 };
 
 describe("enterRTCSession", () => {
-  const transport: LivekitTransport = {
+  const transport: LivekitTransportConfig = {
+    livekit_alias: "roomId",
     livekit_service_url: "http://my-livekit-service-url.com",
     type: "livekit",
   };
@@ -138,7 +145,7 @@ describe("enterRTCSession", () => {
       client: mockedClient,
     },
     memberships: [],
-    join: vi.fn(),
+    joinRTCSession: vi.fn(),
   }) as unknown as MatrixRTCSession;
 
   beforeEach(() =>
@@ -150,18 +157,19 @@ describe("enterRTCSession", () => {
   it("It joins the correct Session", () => {
     enterRTCSession(mockedSession, ownMemberMock, transport, options);
 
-    expect(mockedSession.join).toHaveBeenLastCalledWith(
+    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
       {
         deviceId: "DEVICE",
         memberId: "@alice:example.org:DEVICE",
         userId: "@alice:example.org",
       },
-      [transport],
+      [],
+      transport,
       expect.objectContaining({ manageMediaKeys: true }),
     );
   });
 
-  it("passes keyRotationParticipantLimit from config to join", () => {
+  it("passes keyRotationParticipantLimit from config to joinRTCSession", () => {
     mockConfig({
       livekit: { livekit_service_url: "http://my-default-service-url.com" },
       matrix_rtc_session: {
@@ -174,8 +182,9 @@ describe("enterRTCSession", () => {
 
     enterRTCSession(mockedSession, ownMemberMock, transport, options);
 
-    expect(mockedSession.join).toHaveBeenLastCalledWith(
+    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
       expect.any(Object),
+      [],
       expect.any(Object),
       expect.objectContaining({
         keyRotationParticipantLimit: 50,
@@ -186,7 +195,8 @@ describe("enterRTCSession", () => {
   it("uses the specified delayed leave timings", () => {
     enterRTCSession(mockedSession, ownMemberMock, transport, options);
 
-    expect(mockedSession.join).toHaveBeenLastCalledWith(
+    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
+      expect.anything(),
       expect.anything(),
       expect.anything(),
       expect.objectContaining({
@@ -206,7 +216,7 @@ describe("LocalMembership", () => {
     }),
     matrixRTCSession: {
       updateCallIntent: vi.fn().mockReturnValue(Promise.resolve()),
-      leave: vi.fn(),
+      leaveRoomSession: vi.fn(),
     } as unknown as MatrixRTCSession,
     muteStates: mockMuteStates(),
     trackProcessorState$: constant({
@@ -251,8 +261,8 @@ describe("LocalMembership", () => {
   });
 
   it("throws error on missing RTC config error", () => {
-    withTestScheduler(({ scope, hot, expectObservable }) => {
-      const localTransport$ = scope.behavior<null | LivekitTransport>(
+    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
+      const localTransport$ = scope.behavior<null | LivekitTransportConfig>(
         hot("1ms #", {}, new MatrixRTCTransportMissingError("domain.com")),
         null,
       );
@@ -267,15 +277,16 @@ describe("LocalMembership", () => {
         ),
       };
 
+      const aLocalTransport: LocalTransport = {
+        advertised$: localTransport$,
+        active$: behavior("a", { a: null }),
+      };
+
       const localMembership = createLocalMembership$({
         scope,
         ...defaultCreateLocalMemberValues,
         connectionManager: mockConnectionManager,
-        localTransport$: hot(
-          "1ms #",
-          {},
-          new MatrixRTCTransportMissingError("domain.com"),
-        ),
+        localTransport: aLocalTransport,
       });
 
       expectObservable(localMembership.localMemberState$).toBe("ne", {
@@ -285,9 +296,61 @@ describe("LocalMembership", () => {
     });
   });
 
+  it("Should not publish to active transport if advertised has errors", () => {
+    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
+      const advertised$ = scope.behavior<null | LivekitTransportConfig>(
+        hot("--#", {}, new FailToGetOpenIdToken(new Error("foo"))),
+        null,
+      );
+
+      // Populate a connection for active
+      const connectionManagerData = new ConnectionManagerData();
+      connectionManagerData.add(connectionTransportBConnected, []);
+      const mockConnectionManager = {
+        transports$: constant(new Epoch([bTransport])),
+        connectionManagerData$: constant(new Epoch(connectionManagerData)),
+      };
+
+      const aLocalTransport: LocalTransport = {
+        advertised$,
+        active$: behavior("a", { n: null, a: bTransportWithSFUConfig }),
+      };
+
+      defaultCreateLocalMemberValues.createPublisherFactory.mockImplementation(
+        () => {
+          return {} as unknown as Publisher;
+        },
+      );
+      const publisherFactory =
+        defaultCreateLocalMemberValues.createPublisherFactory as ReturnType<
+          typeof vi.fn
+        >;
+
+      const localMembership = createLocalMembership$({
+        scope,
+        ...defaultCreateLocalMemberValues,
+        connectionManager: mockConnectionManager,
+        localTransport: aLocalTransport,
+      });
+
+      expectObservable(localMembership.localMemberState$).toBe("n-e", {
+        n: TransportState.Waiting,
+        e: expect.toSatisfy((e) => e instanceof FailToGetOpenIdToken),
+      });
+
+      // Should not have created any publisher
+      expect(publisherFactory).toHaveBeenCalledTimes(0);
+    });
+  });
+
   it("logs if callIntent cannot be updated", async () => {
     const scope = new ObservableScope();
 
+    const aLocalTransport: LocalTransport = {
+      advertised$: constant(aTransport),
+      active$: constant(aTransportWithSFUConfig),
+    };
+
     const mockConnectionManager = {
       transports$: constant(new Epoch([])),
       connectionManagerData$: constant(new Epoch(new ConnectionManagerData())),
@@ -300,10 +363,10 @@ describe("LocalMembership", () => {
       ...defaultCreateLocalMemberValues,
       matrixRTCSession: {
         updateCallIntent: vi.fn().mockImplementation(reject),
-        leave: vi.fn(),
+        leaveRoomSession: vi.fn(),
       },
       connectionManager: mockConnectionManager,
-      localTransport$: constant(mockTransport),
+      localTransport: aLocalTransport,
     });
     const expextedLog =
       "'not connected yet' while updating the call intent (this is expected on startup)";
@@ -315,19 +378,33 @@ describe("LocalMembership", () => {
     scope.end();
   });
 
-  const mockTransportConfig = {
+  const aTransport = {
     livekit_service_url: "a",
-  } as LivekitTransport;
+  } as LivekitTransportConfig;
 
-  const mockTransport = {
-    transport: mockTransportConfig,
+  const aTransportWithSFUConfig = {
+    transport: aTransport,
     sfuConfig: {
       jwt: "foo",
       livekitAlias: "bar",
       livekitIdentity: "baz",
       url: "bro",
     },
-  } as LocalTransport;
+  } as LocalTransportWithSFUConfig;
+
+  const bTransport = {
+    livekit_service_url: "b",
+  } as LivekitTransportConfig;
+
+  const bTransportWithSFUConfig = {
+    transport: bTransport,
+    sfuConfig: {
+      jwt: "foo2",
+      livekitAlias: "bar2",
+      livekitIdentity: "baz2",
+      url: "bro2",
+    },
+  } as LocalTransportWithSFUConfig;
 
   const connectionTransportAConnected = {
     livekitRoom: mockLivekitRoom({
@@ -337,13 +414,18 @@ describe("LocalMembership", () => {
       } as unknown as LocalParticipant,
     }),
     state$: constant(ConnectionState.LivekitConnected),
-    transport: mockTransportConfig,
-  } as Connection;
+    transport: aTransport,
+  } as unknown as Connection;
   const connectionTransportAConnecting = {
     ...connectionTransportAConnected,
     state$: constant(ConnectionState.LivekitConnecting),
     livekitRoom: mockLivekitRoom({}),
   } as unknown as Connection;
+  const connectionTransportBConnected = {
+    state$: constant(ConnectionState.LivekitConnected),
+    transport: bTransport,
+    livekitRoom: mockLivekitRoom({}),
+  } as unknown as Connection;
 
   const authCallSpy = vi
     .spyOn(openIDSFU, "getSFUConfigWithOpenID")
@@ -377,7 +459,10 @@ describe("LocalMembership", () => {
           ),
         },
         joinMatrixRTC,
-        localTransport$: constant(mockTransport),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
         delayId$,
       });
 
@@ -386,7 +471,7 @@ describe("LocalMembership", () => {
       await flushPromises();
       // Joins with timings appropriate for the level of delegation support
       expect(joinMatrixRTC).toHaveBeenCalledWith(
-        mockTransportConfig,
+        aTransport,
         delayedLeaveTimings,
       );
 
@@ -420,7 +505,75 @@ describe("LocalMembership", () => {
     },
   );
 
-  it("only starts tracks if requested", async () => {
+  it("recreates publisher if new connection is used, always unpublish and end tracks", async () => {
+    const scope = new ObservableScope();
+
+    const activeTransport$ = new BehaviorSubject(aTransportWithSFUConfig);
+    const aLocalTransport: LocalTransport = {
+      advertised$: constant(aTransport),
+      active$: activeTransport$,
+    };
+
+    const publishers: Publisher[] = [];
+    let seed = 0;
+    defaultCreateLocalMemberValues.createPublisherFactory.mockImplementation(
+      () => {
+        const a = seed;
+        seed += 1;
+        logger.info(`creating [${a}]`);
+        const p = {
+          // It is enought to check if destroy is called. Destroy itself is tested in the publisher to make sure it does
+          // all the cleanup we need.
+          destroy: vi.fn(),
+          stopPublishing: vi.fn().mockImplementation(() => {
+            logger.info(`stopPublishing [${a}]`);
+          }),
+          stopTracks: vi.fn(),
+        };
+        publishers.push(p as unknown as Publisher);
+        return p;
+      },
+    );
+    const publisherFactory =
+      defaultCreateLocalMemberValues.createPublisherFactory as ReturnType<
+        typeof vi.fn
+      >;
+
+    const connectionManagerData = new ConnectionManagerData();
+    connectionManagerData.add(connectionTransportAConnected, []);
+    connectionManagerData.add(connectionTransportBConnected, []);
+    createLocalMembership$({
+      scope,
+      ...defaultCreateLocalMemberValues,
+      connectionManager: {
+        connectionManagerData$: constant(new Epoch(connectionManagerData)),
+      },
+      localTransport: aLocalTransport,
+    });
+    await flushPromises();
+    activeTransport$.next({
+      ...aTransportWithSFUConfig,
+      transport: bTransport,
+    });
+    await flushPromises();
+
+    expect(publisherFactory).toHaveBeenCalledTimes(2);
+    expect(publishers.length).toBe(2);
+    // stop the first Publisher and let the second one life.
+    expect(publishers[0].destroy).toHaveBeenCalled();
+    expect(publishers[1].destroy).not.toHaveBeenCalled();
+    expect(publisherFactory.mock.calls[0][0].transport).toBe(aTransport);
+    expect(publisherFactory.mock.calls[1][0].transport).toBe(bTransport);
+    scope.end();
+    await flushPromises();
+    // stop all tracks after ending scopes
+    expect(publishers[1].destroy).toHaveBeenCalled();
+    // expect(publishers[1].stopTracks).toHaveBeenCalled();
+
+    defaultCreateLocalMemberValues.createPublisherFactory.mockReset();
+  });
+
+  it("only start tracks if requested", async () => {
     const scope = new ObservableScope();
 
     const publishers: Publisher[] = [];
@@ -449,6 +602,11 @@ describe("LocalMembership", () => {
         typeof vi.fn
       >;
 
+    const aLocalTransport: LocalTransport = {
+      advertised$: constant(aTransport),
+      active$: constant(aTransportWithSFUConfig),
+    };
+
     const connectionManagerData = new ConnectionManagerData();
     connectionManagerData.add(connectionTransportAConnected, []);
     // connectionManagerData.add(connectionTransportB, []);
@@ -458,7 +616,7 @@ describe("LocalMembership", () => {
       connectionManager: {
         connectionManagerData$: constant(new Epoch(connectionManagerData)),
       },
-      localTransport$: constant(mockTransport),
+      localTransport: aLocalTransport,
     });
     await flushPromises();
     expect(publisherFactory).toHaveBeenCalledOnce();
@@ -479,8 +637,16 @@ describe("LocalMembership", () => {
   //
   it("tracks livekit state correctly", async () => {
     const scope = new ObservableScope();
+
     const connectionManagerData = new ConnectionManagerData();
-    const localTransport$ = new Subject<LocalTransport>();
+
+    const activeTransport$ =
+      new BehaviorSubject<null | LocalTransportWithSFUConfig>(null);
+
+    const aLocalTransport: LocalTransport = {
+      advertised$: constant(aTransport),
+      active$: activeTransport$,
+    };
 
     const connectionManagerData$ = new BehaviorSubject(
       new Epoch(connectionManagerData),
@@ -521,14 +687,14 @@ describe("LocalMembership", () => {
       connectionManager: {
         connectionManagerData$,
       },
-      localTransport$,
+      localTransport: aLocalTransport,
     });
 
     await flushPromises();
     expect(localMembership.localMemberState$.value).toStrictEqual(
       TransportState.Waiting,
     );
-    localTransport$.next(mockTransport);
+    activeTransport$.next(aTransportWithSFUConfig);
     await flushPromises();
     expect(localMembership.localMemberState$.value).toStrictEqual({
       matrix: RTCMemberStatus.Connected,
@@ -553,7 +719,7 @@ describe("LocalMembership", () => {
     });
 
     (
-      connectionManagerData2.getConnectionForTransport(mockTransportConfig)!
+      connectionManagerData2.getConnectionForTransport(aTransport)!
         .state$ as BehaviorSubject<ConnectionState>
     ).next(ConnectionState.LivekitConnected);
     expect(localMembership.localMemberState$.value).toStrictEqual({
@@ -656,7 +822,10 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport$: constant(mockTransport),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
       });
 
       await flushPromises();
@@ -693,7 +862,10 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport$: constant(mockTransport),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
       });
 
       await flushPromises();
@@ -741,7 +913,10 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport$: constant(mockTransport),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
       });
 
       await flushPromises();
@@ -782,7 +957,10 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport$: constant(mockTransport),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
       });
 
       await flushPromises();
@@ -848,7 +1026,10 @@ describe("LocalMembership", () => {
         connectionManager: {
           connectionManagerData$: constant(new Epoch(connectionManagerData)),
         },
-        localTransport$: constant(mockTransport),
+        localTransport: {
+          advertised$: constant(aTransport),
+          active$: constant(aTransportWithSFUConfig),
+        },
       });
       return { scope, localMembership };
     };
@@ -858,7 +1039,7 @@ describe("LocalMembership", () => {
       const setScreenShareEnabled = vi.fn().mockRejectedValue(error);
       const connection = {
         state$: constant(ConnectionState.LivekitConnected),
-        transport: mockTransportConfig,
+        transport: aTransport,
         livekitRoom: mockLivekitRoom({
           localParticipant: mockLocalParticipant({
             isScreenShareEnabled: false,

src/state/CallViewModel/localMember/LocalMember.ts

@@ -19,6 +19,7 @@ import { type MatrixClient } from "matrix-js-sdk";
 import {
   Status as RTCSessionStatus,
   type LivekitTransport,
+  type LivekitTransportConfig,
   type MatrixRTCSession,
   type RTCCallIntent,
   type RTCNotificationType,
@@ -37,10 +38,6 @@ import {
   startWith,
   switchMap,
   tap,
-  NEVER,
-  concat,
-  race,
-  Subject,
 } from "rxjs";
 import { type Logger } from "matrix-js-sdk/lib/logger";
 import { deepCompare } from "matrix-js-sdk/lib/utils";
@@ -80,6 +77,8 @@ import {
 } from "../remoteMembers/Connection.ts";
 import { type HomeserverConnected } from "./HomeserverConnected.ts";
 import { type LocalTransport } from "./LocalTransport.ts";
+import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers.ts";
+import { or$ } from "../../../utils/observable.ts";
 import { getSFUConfigWithOpenID } from "../../../livekit/openIDSFU.ts";
 
 export enum TransportState {
@@ -143,15 +142,18 @@ interface Props {
   connectionManager: IConnectionManager;
   createPublisherFactory: (connection: Connection) => Publisher;
   joinMatrixRTC: (
-    transport: LivekitTransport,
+    transport: LivekitTransportConfig,
     delayedLeaveTimings: ResolvedDelayedLeaveTimings,
   ) => void;
   homeserverConnected: HomeserverConnected;
   roomId: string;
   ownMembershipIdentity: CallMembershipIdentityParts;
-  localTransport$: Observable<LocalTransport>;
+  localTransport: LocalTransport;
   client: Pick<MatrixClient, "getDeviceId" | "getOpenIdToken">;
-  matrixRTCSession: Pick<MatrixRTCSession, "updateCallIntent" | "leave">;
+  matrixRTCSession: Pick<
+    MatrixRTCSession,
+    "updateCallIntent" | "leaveRoomSession"
+  >;
   /** Whether to hide the screen-sharing button. */
   hideScreensharing: boolean;
   /** The application hosting Element Call, to be kept informed of join/leave. */
@@ -192,7 +194,7 @@ interface Props {
 export const createLocalMembership$ = ({
   scope,
   connectionManager,
-  localTransport$: localTransportWithErrors$,
+  localTransport,
   homeserverConnected,
   createPublisherFactory,
   joinMatrixRTC,
@@ -250,24 +252,20 @@ export const createLocalMembership$ = ({
   const logger = parentLogger.getChild("[LocalMembership]");
   logger.debug(`Creating local membership..`);
 
-  // Unwrap the local transport and set the state of the LocalMembership to error in case the transport is an error.
-  const fatalTransportError$ = new Subject<ElementCallError>();
-  const localTransport$ = localTransportWithErrors$.pipe(
-    catchError((e: unknown) => {
-      let error: ElementCallError;
-      if (e instanceof ElementCallError) {
-        error = e;
-      } else {
-        error = new UnknownCallError(
-          e instanceof Error
-            ? e
-            : new Error("Unknown error from localTransport"),
-        );
-      }
-      fatalTransportError$.next(error);
-      return NEVER; // Make this Observable swallow the error
-    }),
-  );
+  // We consider error on the transport as fatal.
+  // Whether it is the active transport or the preferred transport.
+  const handleTransportError = (e: unknown): Observable<null> => {
+    let error: ElementCallError;
+    if (e instanceof ElementCallError) {
+      error = e;
+    } else {
+      error = new UnknownCallError(
+        e instanceof Error ? e : new Error("Unknown error from localTransport"),
+      );
+    }
+    setTransportError(error);
+    return of(null);
+  };
 
   async function checkDelegationSupport(
     endpointUrl: string,
@@ -305,40 +303,58 @@ export const createLocalMembership$ = ({
 
   // The transport that we will advertise in our membership, paired with info as
   // to whether delayed event delegation is supported
-  const joinParams$ = scope.behavior(
-    localTransport$.pipe(
-      switchMap(async ({ transport }) => {
-        const transportSupportsDelegation = checkDelegationSupport(
-          transport.livekit_service_url + "/delegate_delayed_leave",
-          `transport ${transport.livekit_service_url}`,
-        );
-        return {
-          transport,
-          delegationSupported:
-            (await homeserverSupportsDelegation) ||
-            (await transportSupportsDelegation),
-        };
+  const joinParams$ = localTransport.advertised$.pipe(
+    catchError(handleTransportError),
+    distinctUntilChanged(areLivekitTransportsEqual),
+    switchMap((transport) => {
+      if (transport === null) return of(null);
+      const transportSupportsDelegation = checkDelegationSupport(
+        transport.livekit_service_url + "/delegate_delayed_leave",
+        `transport ${transport.livekit_service_url}`,
+      );
+      return or$(
+        from(homeserverSupportsDelegation),
+        from(transportSupportsDelegation),
+      ).pipe(
+        map((delegationSupported) => ({ transport, delegationSupported })),
+        startWith(null),
+      );
+    }),
+  );
+
+  // Unwrap the local transport and set the state of the LocalMembership to error in case the transport is an error.
+  const activeTransport$ = scope.behavior(
+    combineLatest([localTransport.active$, localTransport.advertised$]).pipe(
+      map(([active, advertised]) => {
+        // Our policy is to not publish to another transport if our prefered transport is miss-configured
+        if (advertised == null) return null;
+
+        return active?.transport ?? null;
       }),
+      catchError(handleTransportError),
+      distinctUntilChanged(areLivekitTransportsEqual),
     ),
-    null,
   );
 
   // Drop Epoch data here since we will not combine this anymore
   const localConnection$ = scope.behavior(
     combineLatest([
       connectionManager.connectionManagerData$,
-      localTransport$,
+      activeTransport$,
     ]).pipe(
-      map(([{ value: connectionData }, { transport }]) =>
-        connectionData.getConnectionForTransport(transport),
-      ),
+      map(([{ value: connectionData }, localTransport]) => {
+        if (localTransport === null) {
+          return null;
+        }
+
+        return connectionData.getConnectionForTransport(localTransport);
+      }),
       tap((connection) => {
         logger.info(
           `Local connection updated: ${connection?.transport?.livekit_service_url}`,
         );
       }),
     ),
-    null,
   );
 
   // Tracks error that happen when creating the local tracks.
@@ -474,6 +490,18 @@ export const createLocalMembership$ = ({
     }
   };
 
+  const fatalTransportError$ = new BehaviorSubject<ElementCallError | null>(
+    null,
+  );
+
+  const setTransportError = (e: ElementCallError): void => {
+    if (fatalTransportError$.value !== null) {
+      logger.error("Multiple Transport Errors:", e);
+    } else {
+      fatalTransportError$.next(e);
+    }
+  };
+
   const localConnectionState$ = localConnection$.pipe(
     switchMap((connection) => (connection ? connection.state$ : of(null))),
   );
@@ -481,29 +509,38 @@ export const createLocalMembership$ = ({
   const mediaState$: Behavior<LocalMemberMediaState> = scope.behavior(
     combineLatest([
       localConnectionState$,
+      activeTransport$,
       joinAndPublishRequested$,
       from(trackStartRequested.promise).pipe(
         map(() => true),
         startWith(false),
       ),
     ]).pipe(
-      map(([localConnectionState, shouldPublish, shouldStartTracks]) => {
-        const trackState: TrackState = shouldStartTracks
-          ? TrackState.Ready
-          : TrackState.WaitingForUser;
+      map(
+        ([
+          localConnectionState,
+          localTransport,
+          shouldPublish,
+          shouldStartTracks,
+        ]) => {
+          if (!localTransport) return null;
+          const trackState: TrackState = shouldStartTracks
+            ? TrackState.Ready
+            : TrackState.WaitingForUser;
 
-        if (
-          localConnectionState !== ConnectionState.LivekitConnected ||
-          trackState !== TrackState.Ready
-        )
-          return {
-            connection: localConnectionState,
-            tracks: trackState,
-          };
-        if (!shouldPublish) return PublishState.WaitingForUser;
-        // if (!publishing) return PublishState.Starting;
-        return PublishState.Publishing;
-      }),
+          if (
+            localConnectionState !== ConnectionState.LivekitConnected ||
+            trackState !== TrackState.Ready
+          )
+            return {
+              connection: localConnectionState,
+              tracks: trackState,
+            };
+          if (!shouldPublish) return PublishState.WaitingForUser;
+          // if (!publishing) return PublishState.Starting;
+          return PublishState.Publishing;
+        },
+      ),
       distinctUntilChanged(deepCompare),
     ),
   );
@@ -517,36 +554,30 @@ export const createLocalMembership$ = ({
   };
 
   const localMemberState$ = scope.behavior<LocalMemberState>(
-    concat(
-      // Waiting until…
-      of(TransportState.Waiting),
-      race(
-        // either there is a fatal transport error
-        fatalTransportError$,
-        // or the transport is available.
-        localTransport$.pipe(
-          switchMap(() =>
-            // Once available, track session/media state.
-            combineLatest([
-              mediaState$,
-              homeserverConnected.rtsSession$,
-              fatalMatrixError$,
-              publishError$,
-            ]).pipe(
-              map(
-                ([
-                  mediaState,
-                  rtcSessionStatus,
-                  fatalMatrixError,
-                  publishError,
-                ]) => ({
-                  matrix: fatalMatrixError ?? rtcSessionStatus,
-                  media: publishError ?? mediaState,
-                }),
-              ),
-            ),
-          ),
-        ),
+    combineLatest([
+      mediaState$,
+      homeserverConnected.rtsSession$,
+      fatalMatrixError$,
+      fatalTransportError$,
+      publishError$,
+    ]).pipe(
+      map(
+        ([
+          mediaState,
+          rtcSessionStatus,
+          fatalMatrixError,
+          fatalTransportError,
+          publishError,
+        ]) => {
+          if (fatalTransportError !== null) return fatalTransportError;
+          // `mediaState` will be 'null' until the transport/connection appears.
+          if (mediaState && rtcSessionStatus)
+            return {
+              matrix: fatalMatrixError ?? rtcSessionStatus,
+              media: publishError ?? mediaState,
+            };
+          return TransportState.Waiting;
+        },
       ),
     ),
   );
@@ -654,7 +685,7 @@ export const createLocalMembership$ = ({
       });
   });
 
-  // Join and leave the session as needed
+  // Keep matrix rtc session in sync with advertisedTransport$, connectRequested$
   scope.reconcile(
     scope.behavior(combineLatest([joinParams$, joinAndPublishRequested$])),
     async ([joinParams, shouldConnect]) => {
@@ -679,7 +710,7 @@ export const createLocalMembership$ = ({
       return Promise.resolve(async (): Promise<void> => {
         try {
           // TODO Update matrixRTCSession to allow udpating the transport without leaving the session!
-          await matrixRTCSession.leave(1000);
+          await matrixRTCSession.leaveRoomSession(1000);
         } catch (e) {
           logger.error("Error leaving RTC session", e);
         }
@@ -962,7 +993,7 @@ interface EnterRTCSessionOptions {
 export function enterRTCSession(
   rtcSession: MatrixRTCSession,
   ownMembershipIdentity: CallMembershipIdentityParts,
-  transport: LivekitTransport,
+  transport: LivekitTransportConfig,
   {
     encryptMedia,
     matrixRTCMode,
@@ -983,6 +1014,21 @@ export function enterRTCSession(
     matrix_rtc_session: sessionConfig,
   } = Config.get();
   const retryInterval = sessionConfig.network_error_retry_ms;
+  const multiSFU =
+    matrixRTCMode === MatrixRTCMode.Compatibility ||
+    matrixRTCMode === MatrixRTCMode.Matrix_2_0;
+
+  // For backwards compatibility with Element Call versions that do not do Matrix 2.0,
+  // we add the livekit alias to the transport.
+  let backwardCompatibleTransport: LivekitTransport | LivekitTransportConfig;
+  if (matrixRTCMode === MatrixRTCMode.Matrix_2_0) {
+    backwardCompatibleTransport = transport;
+  } else {
+    backwardCompatibleTransport = {
+      livekit_alias: rtcSession.room.roomId,
+      ...transport,
+    };
+  }
 
   // Set maximumNetworkErrorRetryCount such that we will consider the client
   // disconnected as soon as either it fails to sync for longer than the grace
@@ -995,18 +1041,24 @@ export function enterRTCSession(
   // Multi-sfu does not need a preferred foci list. just the focus that is actually used.
   // TODO where/how do we track errors originating from the ongoing rtcSession?
 
-  rtcSession.join(ownMembershipIdentity, [transport], {
-    notificationType,
-    callIntent,
-    manageMediaKeys: encryptMedia,
-    delayedLeaveEventRestartMs: delayedLeaveTimings.restart_ms,
-    delayedLeaveEventDelayMs: delayedLeaveTimings.delay_ms,
-    delayedLeaveEventRestartLocalTimeoutMs:
-      delayedLeaveTimings.restart_timeout_ms,
-    networkErrorRetryMs: sessionConfig.network_error_retry_ms,
-    membershipEventExpiryMs: sessionConfig.membership_event_expiry_ms,
-    keyRotationParticipantLimit: sessionConfig.key_rotation_participant_limit,
-    unstableSendStickyEvents: matrixRTCMode === MatrixRTCMode.Matrix_2_0,
-    maximumNetworkErrorRetryCount: maximumNetworkErrorRetryCount,
-  });
+  rtcSession.joinRTCSession(
+    ownMembershipIdentity,
+    multiSFU ? [] : [backwardCompatibleTransport],
+    multiSFU ? backwardCompatibleTransport : undefined,
+    {
+      notificationType,
+      callIntent,
+      manageMediaKeys: encryptMedia,
+      delayedLeaveEventRestartMs: delayedLeaveTimings.restart_ms,
+      delayedLeaveEventDelayMs: delayedLeaveTimings.delay_ms,
+      delayedLeaveEventRestartLocalTimeoutMs:
+        delayedLeaveTimings.restart_timeout_ms,
+      networkErrorRetryMs: sessionConfig.network_error_retry_ms,
+      makeKeyDelay: sessionConfig.wait_for_key_rotation_ms,
+      membershipEventExpiryMs: sessionConfig.membership_event_expiry_ms,
+      keyRotationParticipantLimit: sessionConfig.key_rotation_participant_limit,
+      unstableSendStickyEvents: matrixRTCMode === MatrixRTCMode.Matrix_2_0,
+      maximumNetworkErrorRetryCount: maximumNetworkErrorRetryCount,
+    },
+  );
 }