Offer background effects as a grid in the camera menu

- The camera menu's blur toggle becomes a Background effects section
  under the cameras: no effect, blur and the two shipped backgrounds as
  one radio choice of tiles, three across. It scrolls with the device
  list, so it stays reachable in a short call, and choosing keeps the
  menu open. The lobby gets it too, as both render the same footer.
- The footer's view model gives the options, the notice and the actions;
  the footer only names them.
- Each tile is Compound's MenuItem as a menuitemradio, styled as a tile.
  Compound makes it an item of the dropdown, so the arrow keys walk the
  tiles with the device rows, and takes its tap in the phone drawer. A
  tile that can't be chosen has no select handler, so the keyboard passes
  over it.
- Where the browser can't run effects the tiles are shown, disabled and
  explained by a notice the group is described by. No effect stays
  choosable and shows as in force. The notice is in the scrolling list,
  so a short call doesn't push the menu out of it.
- Section headings are raised, or the positioned tiles scroll over the
  one they sit under; raised within the list only, so the menu's frame
  stays over them. Tiles clip with overflow: clip; with hidden they are
  scroll containers, which focus scrolls into view without their border.
- End to end on Chromium and Firefox: a shipped background chosen in the
  lobby shows in the preview, and None after Blur draws nothing, counted
  in WebGL draws (Blur: about 1400 a second on Chromium, 2300 on
  Firefox).
- The Quick Audio Menu's test of the camera menu keeps its name and now
  finds blur among the effects rather than as a toggle.

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

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

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

.github/workflows/lint.yaml

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

.github/workflows/test.yaml

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

.gitignore

@@ -41,3 +41,6 @@ yarn-error.log
 
 *storybook.log
 storybook-static
+
+# Nested checkout made by scripts/layered.sh
+/matrix-js-sdk/

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

component/ElementCall.module.css

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

component/api.ts

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

component/build/scopeStylesToRoot.test.ts

@@ -109,4 +109,12 @@ describe("scopeStylesToRoot", () => {
       ".a .b_abc12:hover { border: 0 }",
     );
   });
+
+  it("leaves an excluded stylesheet as it is", async () => {
+    const css = "body { margin: 0 } .menu { color: red }";
+    const result = await postcss([
+      scopeStylesToRoot({ exclude: [/host\.css$/] }),
+    ]).process(css, { from: "/app/host.css" });
+    expect(result.css).toBe(css);
+  });
 });

component/build/scopeStylesToRoot.ts

@@ -40,10 +40,10 @@ const IS_ROOT = `:where(${ROOT_SELECTOR})`;
  * Element Call as a component.
  *
  * As a page of its own, Element Call can style the document: normalize.css and
- * Compound speak of `html`, `body` and bare elements, and the design tokens are
- * declared on `:root`. As a component, all of that would land on the host's
- * document too. This rewrites every selector so that it matches only the root
- * or its descendants:
+ * its own base styles speak of `html`, `body` and bare elements, and its custom
+ * properties are declared on `:root`. As a component, all of that would land on
+ * the host's document too. This rewrites every selector so that it matches only
+ * the root or its descendants:
  *
  * - `html`, `body` and `:root` become the root element, which is what stands in
  *   for the document inside a host.
@@ -55,16 +55,23 @@ const IS_ROOT = `:where(${ROOT_SELECTOR})`;
  * CSS modules are scoped by their class names already, so only their selectors
  * that would match by element alone — `pre` rather than `.pre` — are touched.
  *
- * The root's fonts and design tokens are still inherited by everything inside
- * it, the way they were from `body` and `:root`, and `@font-face` declarations
- * stay global, which they are by nature.
+ * The root's custom properties are still inherited by everything inside it,
+ * the way they were from `:root`. Compound's own stylesheet — the design
+ * tokens, the component styles, the fonts — is not in this build at all: the
+ * host supplies it, unscoped, along with its copy of Compound.
  */
-export function scopeStylesToRoot(): Plugin {
+interface Options {
+  /** Stylesheets left as they are: a host's own, which it doesn't scope. */
+  exclude?: RegExp[];
+}
+
+export function scopeStylesToRoot({ exclude = [] }: Options = {}): Plugin {
   return {
     postcssPlugin: "element-call-scope-styles-to-root",
     Once(root) {
-      const isModule =
-        root.source?.input.file?.endsWith(".module.css") ?? false;
+      const file = root.source?.input.file ?? "";
+      if (exclude.some((pattern) => pattern.test(file))) return;
+      const isModule = file.endsWith(".module.css");
       root.walkRules((rule) => {
         if (isRelative(rule)) return;
         rule.selector = (isModule ? scopeBare : scopeAll).processSync(

component/dev/main.tsx

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

component/index.tsx

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

component/package.json

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

component/tsconfig.build.json

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

config/config.devenv.json

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

config/config.sample.json

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

config/config_netlify_preview.json

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

config/config_netlify_preview_sdk.json

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

docker-compose-playwright.yml

@@ -19,7 +19,7 @@ services:
       - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
   element-web:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:cfbe7ceb346918257ef07cb25f7b9b03ec0575ecb5ce51dfeeef873e67c60c95
+    image: ghcr.io/element-hq/element-web:develop@sha256:589c4909fd5844a9db7dd730f9796186eabbb981580cdf9bfa597186a2fb81f3
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:cfbe7ceb346918257ef07cb25f7b9b03ec0575ecb5ce51dfeeef873e67c60c95
+    image: ghcr.io/element-hq/element-web:develop@sha256:589c4909fd5844a9db7dd730f9796186eabbb981580cdf9bfa597186a2fb81f3

docs/agents/architecture.md

@@ -76,4 +76,10 @@ Code that builds in only one is a bug.
 - `build:component` — `@element-hq/element-call-component`, sources in `component/`
   (its own pnpm project; run pnpm from the repo root). Host API is in the README;
   `pnpm lint:externals` rejects an import of a `react` / `react-dom` /
-  `matrix-js-sdk` / `livekit-client` subpath the externals list omits.
+  `matrix-js-sdk` / `livekit-client` / `@vector-im/compound-web` /
+  `@vector-im/compound-design-tokens` subpath the externals list omits.
+  Compound's stylesheets are loaded by `src/index.css` for the page and by the
+  host for the component, never by `src/base.css`. Two entry
+  points: `index.tsx` (the component) and `api.ts` (types, enums and
+  `configurationForIntent`, for a host that must not load the component). `api.ts`
+  may only reach types and constants — `src/UrlConfiguration.ts`, not `UrlParams`.

docs/linking.md

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

docs/matrix_rtc_modes.md

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

locales/en/app.json

@@ -3,7 +3,6 @@
     "user_menu": "User menu"
   },
   "action": {
-    "blur_background": "Blur background",
     "close": "Close",
     "copy_link": "Copy link",
     "edit": "Edit",
@@ -23,6 +22,12 @@
     "upload_file": "Upload file"
   },
   "analytics_notice": "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <6>Cookie Policy</6>.",
+  "background_effects": {
+    "blur": "Blur",
+    "none": "None",
+    "numbered": "Background {{n}}",
+    "unavailable": "Background effects are not supported on this platform."
+  },
   "call_ended_view": {
     "create_account_button": "Create account",
     "create_account_prompt": "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>",
@@ -212,6 +217,7 @@
     "auto_gain_control_label": "Automatic gain control",
     "background_blur_header": "Background",
     "background_blur_label": "Blur the background of the video",
+    "background_effects_header": "Background effects",
     "bitrate_label": "Bitrate",
     "blur_not_supported_by_browser": "(Background blur is not supported by this device.)",
     "camera_header": "Camera quality",

package.json

@@ -8,7 +8,7 @@
     "dev:embedded": "vite --config vite-embedded.config.js",
     "dev:component": "vite --config vite-component-dev.config.ts",
     "build": "pnpm build:full",
-    "build:full": "NODE_OPTIONS=--max-old-space-size=16384 vite build",
+    "build:full": "node --max-old-space-size=16384 node_modules/vite/bin/vite.js build",
     "build:full:production": "pnpm build:full",
     "build:full:development": "pnpm build:full --mode development",
     "build:embedded": "pnpm build:full --config vite-embedded.config.js",
@@ -83,8 +83,8 @@
     "@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-web": "^10.0.0",
+    "@vector-im/compound-design-tokens": "^11.1.0",
+    "@vector-im/compound-web": "^10.3.0",
     "@vitejs/plugin-react": "^6.0.2",
     "@vitest/browser-playwright": "^4.1.5",
     "@vitest/coverage-v8": "^4.0.18",
@@ -129,7 +129,6 @@
     "uuid": "^14.0.0",
     "vaul": "^1.0.0",
     "vite": "^8.0.0",
-    "vite-plugin-generate-file": "^0.3.0",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-node-polyfills": "^0.28.0",
     "vite-plugin-node-stdlib-browser": "^0.2.1",

playwright/background-effects.spec.ts

@@ -0,0 +1,126 @@
+/*
+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";
+
+// Background effects need WebGL2, and headless Firefox on a CI runner has none,
+// so it rightly offers none of them.
+test.skip(
+  ({ browserName }) => browserName === "firefox",
+  "Background effects need WebGL2, which headless Firefox on CI does not have",
+);
+
+type Colour = [number, number, number];
+
+test.describe("background effects", () => {
+  test("pre-join preview shows the chosen effect", async ({ page }) => {
+    test.slow();
+    await page.goto("/");
+    await SpaHelpers.createCall(page, "Effect user", "Background effects");
+    const preview = page.locator("video").first();
+    const camera = await averageColour(preview);
+
+    await page.getByRole("button", { name: "Camera", exact: true }).click();
+    const tile = page
+      .getByRole("group", { name: "Background effects" })
+      .getByRole("menuitemradio", { name: "Background 1" });
+    await tile.click();
+    await expect(tile).toHaveAttribute("aria-checked", "true");
+
+    // The fake camera shows no person, so the whole frame is background: the
+    // preview takes on the picture's colours and leaves the camera's.
+    const picture = await averageColour(tile.locator("img"));
+    // Long enough for the first effect of a session to be built.
+    await expect
+      .poll(async () => distance(await averageColour(preview), picture), {
+        timeout: 60_000,
+      })
+      .toBeLessThan(distance(camera, picture) / 2);
+  });
+});
+
+test.describe("no effect", () => {
+  test("draws nothing, even after blurring", async ({ page }) => {
+    test.setTimeout(120_000);
+    await countDraws(page);
+    await page.goto("/");
+    await SpaHelpers.createCall(page, "Idle user", "No effect after blur");
+
+    await page.getByRole("button", { name: "Camera", exact: true }).click();
+    const effects = page.getByRole("group", { name: "Background effects" });
+    await effects.getByRole("menuitemradio", { name: "Blur" }).click();
+    // Long enough for the first effect of a session to be built.
+    await expect
+      .poll(async () => drawsPerSecond(page), { timeout: 60_000 })
+      .toBeGreaterThan(0);
+    const blurred = await drawsPerSecond(page);
+
+    await effects.getByRole("menuitemradio", { name: "None" }).click();
+    // A frame already on its way may still be drawn.
+    await expect.poll(async () => drawsPerSecond(page)).toBe(0);
+    test.info().annotations.push({
+      type: "WebGL draws per second",
+      description: `blurred ${blurred}, none 0`,
+    });
+  });
+});
+
+/** Counts every WebGL draw on the page, the segmenter's and the effect's. */
+async function countDraws(page: Page): Promise<void> {
+  await page.addInitScript(() => {
+    const counter = { draws: 0 };
+    (window as unknown as { webglDraws: typeof counter }).webglDraws = counter;
+    for (const name of ["drawArrays", "drawElements"] as const) {
+      const draw = WebGL2RenderingContext.prototype[name] as (
+        ...args: unknown[]
+      ) => void;
+      WebGL2RenderingContext.prototype[name] = function (
+        this: WebGL2RenderingContext,
+        ...args: unknown[]
+      ): void {
+        counter.draws += 1;
+        draw.apply(this, args);
+      } as never;
+    }
+  });
+}
+
+/** WebGL draws over the next second. */
+async function drawsPerSecond(page: Page): Promise<number> {
+  return page.evaluate(async () => {
+    const counter = (window as unknown as { webglDraws: { draws: number } })
+      .webglDraws;
+    const before = counter.draws;
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    return counter.draws - before;
+  });
+}
+
+/** The mean colour of a video's current frame or an image, drawn small. */
+async function averageColour(element: Locator): Promise<Colour> {
+  return element.evaluate(
+    async (source: HTMLVideoElement | HTMLImageElement) => {
+      if (source instanceof HTMLImageElement) await source.decode();
+      const canvas = document.createElement("canvas");
+      canvas.width = canvas.height = 32;
+      const context = canvas.getContext("2d")!;
+      context.drawImage(source, 0, 0, 32, 32);
+      const { data } = context.getImageData(0, 0, 32, 32);
+      const sum = [0, 0, 0];
+      for (let i = 0; i < data.length; i += 4)
+        for (let c = 0; c < 3; c++) sum[c] += data[i + c];
+      const pixels = data.length / 4;
+      return sum.map((s) => s / pixels) as Colour;
+    },
+  );
+}
+
+function distance(a: Colour, b: Colour): number {
+  return Math.hypot(a[0] - b[0], a[1] - b[1], a[2] - b[2]);
+}

playwright/component/audio-menu.spec.ts

@@ -129,7 +129,10 @@ async function openDeviceList(page: Page, pane: Locator): Promise<Locator> {
     .getByRole("button", { name: "Microphone" })
     .click({ timeout: 60_000 });
   await expect(page.getByRole("menu")).toBeVisible();
-  const list = page.locator("[role='menu'] div[role='none']").first();
+  // The area of the menu holding the device groups, not the menu's own.
+  const list = page.locator(
+    "[role='menu'] div[role='none']:has(> [role='group'])",
+  );
   await expect(list).toBeVisible();
   return list;
 }

playwright/component/component-call.spec.ts

@@ -125,25 +125,19 @@ test("leaves the host's own page unstyled", async ({ page }) => {
     timeout: 60_000,
   });
 
-  // Element Call's stylesheet is written for a page of its own: normalize.css
-  // gives `html` a line height, Compound gives `body` its font and feature
-  // settings, and the design tokens live on `:root`. None of that may reach the
-  // host's document — the harness sets none of these itself, so anything other
-  // than the browser's defaults here came from us.
+  // Compound's document styles reach the host, but it loads them itself.
   const host = await page.evaluate(() => {
-    const html = getComputedStyle(document.documentElement);
-    const body = getComputedStyle(document.body);
+    const sub = document.body.appendChild(document.createElement("sub"));
+    const verticalAlign = getComputedStyle(sub).verticalAlign;
+    sub.remove();
     return {
-      lineHeight: html.lineHeight,
-      fontFeatureSettings: body.fontFeatureSettings,
-      token: html.getPropertyValue("--cpd-color-text-primary"),
+      verticalAlign,
+      token: getComputedStyle(document.documentElement).getPropertyValue(
+        "--font-scale",
+      ),
     };
   });
-  expect(host).toEqual({
-    lineHeight: "normal",
-    fontFeatureSettings: "normal",
-    token: "",
-  });
+  expect(host).toEqual({ verticalAlign: "sub", token: "" });
 
   // While inside the container, the same rules do apply
   const root = panes.first().locator("[data-element-call-root]");

playwright/component/harness.ts

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

playwright/fixtures/widget-user.ts

@@ -132,7 +132,7 @@ export const widgetTest = test.extend<MyFixtures>({
 
       await ewPage1
         .getByRole("navigation", { name: "Room list" })
-        .getByRole("button", { name: "New conversation" })
+        .getByRole("button", { name: "New", exact: true })
         .click();
 
       await ewPage1.getByRole("menuitem", { name: "Start chat" }).click();

playwright/widget/test-helpers.ts

@@ -223,7 +223,7 @@ export class TestHelpers {
 
     await page
       .getByRole("navigation", { name: "Room list" })
-      .getByRole("button", { name: "New conversation" })
+      .getByRole("button", { name: "New", exact: true })
       .click();
 
     await page.getByRole("menuitem", { name: "New Room" }).click({

pnpm-lock.yaml

@@ -131,11 +131,11 @@ importers:
         specifier: ^10.2.11
         version: 10.3.1(react@19.2.8)
       '@vector-im/compound-design-tokens':
-        specifier: ^11.0.0
-        version: 11.0.0(@types/react@19.2.18)(react@19.2.8)
+        specifier: ^11.1.0
+        version: 11.1.0(@types/react@19.2.18)(react@19.2.8)
       '@vector-im/compound-web':
-        specifier: ^10.0.0
-        version: 10.1.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+        specifier: ^10.3.0
+        version: 10.3.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.1.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@vitejs/plugin-react':
         specifier: ^6.0.2
         version: 6.1.1(@rolldown/plugin-babel@0.2.3(@babel/core@7.29.7(supports-color@7.2.0))(@babel/runtime@8.0.0)(rolldown@1.2.7)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)))(babel-plugin-react-compiler@1.0.0)(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
@@ -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/24929be0e741be6a5d0a7226f1c682e245263b8a
+        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999
       matrix-widget-api:
         specifier: ^1.18.0
         version: 1.19.0
@@ -268,9 +268,6 @@ importers:
       vite:
         specifier: ^8.0.0
         version: 8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)
-      vite-plugin-generate-file:
-        specifier: ^0.3.0
-        version: 0.3.1
       vite-plugin-html:
         specifier: ^3.2.2
         version: 3.2.2(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0))
@@ -1194,8 +1191,8 @@ packages:
       '@types/dom-mediacapture-transform': ^0.1.9
       livekit-client: ^1.12.0 || ^2.1.0
 
-  '@matrix-org/matrix-sdk-crypto-wasm@18.5.0':
-    resolution: {integrity: sha512-E826Hy1rG26LanPjtSsOiVRcVoHfSgPgj2r2Xsb5RPScpaKi9XJADQ0u3dNjRCitZPX4oyLNl1FDd5AfDlmIwQ==}
+  '@matrix-org/matrix-sdk-crypto-wasm@18.9.0':
+    resolution: {integrity: sha512-NtLzNDTEfNASBjNCTGZHuk7N0jrQhS6Zx2CM857rCHZYYh/rpbKGQNrJ7azktm4S1P5Jy3WU3nwJTGohGw26qQ==}
     engines: {node: '>= 18'}
 
   '@mdx-js/react@3.1.1':
@@ -3226,8 +3223,8 @@ packages:
     peerDependencies:
       react: '>= 16.8.0'
 
-  '@vector-im/compound-design-tokens@11.0.0':
-    resolution: {integrity: sha512-pWz0Q67Xbo8gwzaTeFbTTcM6i29ju6PR7SqyuExr2nIV3j9K785cOInft8FA2CM7PEapkr6TRtJKR/4xtWh2RA==}
+  '@vector-im/compound-design-tokens@11.1.0':
+    resolution: {integrity: sha512-vkMcy/G5VBlVle8umQNpctKHqZITS8XOQprsgcbSGRmwW080Z+TXV/vPsEXhgq8JKdxURkLhua0zQUufCeo46A==}
     peerDependencies:
       '@adobe/leonardo-contrast-colors': ^1.0.0
       '@types/react': '*'
@@ -3243,13 +3240,13 @@ packages:
       react:
         optional: true
 
-  '@vector-im/compound-web@10.1.0':
-    resolution: {integrity: sha512-Lhw9Q+RZo1GtDYjF5PXWTD0zdfbrz/vnSVBYFHC8Hq+YeDule2QfGbTRo8IVHeV7jK6ZzsLc8zb6553eeIRLYg==}
+  '@vector-im/compound-web@10.3.0':
+    resolution: {integrity: sha512-tce5hsNpdvYXfB5nYQgTK7WjTDqjdxpV1BeGsw67gYAWSFKJr9p6X5gzE79o+Tp/q5uykLuO4ozTBdjLsmUWMw==}
     peerDependencies:
       '@fontsource/inconsolata': ^5
       '@fontsource/inter': ^5
       '@types/react': '*'
-      '@vector-im/compound-design-tokens': '>=1.6.1 <11.0.0'
+      '@vector-im/compound-design-tokens': '>=1.6.1 <12.0.0'
       react: ^18 || ^19.0.0
     peerDependenciesMeta:
       '@types/react':
@@ -3659,8 +3656,8 @@ packages:
   constants-browserify@1.0.0:
     resolution: {integrity: sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==}
 
-  content-type@3.0.0:
-    resolution: {integrity: sha512-AIi5H6p0xk5uknXcN3/rmhP8jgp69OfSe/JuKiQAFprJ7UGw7mwj7m4XcmDzlrnJDG+cGpphAINGdU3g3g7kDw==}
+  content-type@3.1.1:
+    resolution: {integrity: sha512-GW4qUsfFo59d0HbUibDlWv5wPz+vAAcaTWbKIuKCf0JkC7wWkSyf8f13IpXn5JkeMlB2P8iTSSIjwXljorg2vA==}
     engines: {node: '>=22'}
 
   convert-source-map@2.0.0:
@@ -4465,10 +4462,6 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  js-yaml@4.3.0:
-    resolution: {integrity: sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==}
-    hasBin: true
-
   js-yaml@4.3.1:
     resolution: {integrity: sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==}
     hasBin: true
@@ -4680,9 +4673,9 @@ packages:
   matrix-events-sdk@0.0.1:
     resolution: {integrity: sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==}
 
-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a:
-    resolution: {gitHosted: true, integrity: sha512-0EGwbXzvG88sBOxq4ZlCRwT4VpQj2xkizfyy0A3bTSK0ysb6/gXJ/o1WPFoqCjRGMDgPq4gAsk92xGtHA7EhPg==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a}
-    version: 42.2.0
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999:
+    resolution: {gitHosted: true, integrity: sha512-qF8++74MX36KS1KEw6Lc8HHXgZ6nHD1oUU4yBZUj5vVPvZTIspk1lOGztkFmizE5vmLAHd5tdadL9Xu1Asy4bA==, tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999}
+    version: 42.3.0
     engines: {node: '>=22.0.0'}
 
   matrix-widget-api@1.19.0:
@@ -4703,14 +4696,6 @@ packages:
     resolution: {integrity: sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==}
     hasBin: true
 
-  mime-db@1.52.0:
-    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
-    engines: {node: '>= 0.6'}
-
-  mime-types@2.1.35:
-    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
-    engines: {node: '>= 0.6'}
-
   mimic-function@5.0.1:
     resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
     engines: {node: '>=18'}
@@ -4895,8 +4880,8 @@ packages:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
-  p-retry@8.0.0:
-    resolution: {integrity: sha512-kFVqH1HxOHp8LupNsOys7bSV09VYTRLxarH/mokO4Rqhk6wGi70E0jh4VzvVGXfEVNggHoHLAMWsQqHyU1Ey9A==}
+  p-retry@8.0.1:
+    resolution: {integrity: sha512-NAigyu8hfvJe7MsS18mnc4is0MZtau3QMdBklaJKK23oBQb6occO3UPM3vHmTckW8KhfyjMZaUOqdTFEYliHgg==}
     engines: {node: '>=22'}
 
   p-try@2.2.0:
@@ -5904,9 +5889,6 @@ packages:
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
 
-  vite-plugin-generate-file@0.3.1:
-    resolution: {integrity: sha512-tiA3gkPM21MS2+RyqsBMT33GSlM9LM1TJjf6vGvV/e/ml3e3vTKfuH3l2N0NpUgcayvj1fXnmlo5YBuahA6bsg==}
-
   vite-plugin-html@3.2.2:
     resolution: {integrity: sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==}
     peerDependencies:
@@ -7101,7 +7083,7 @@ snapshots:
       '@types/dom-mediacapture-transform': 0.1.11
       livekit-client: 2.22.3(@types/dom-mediacapture-record@1.0.22)
 
-  '@matrix-org/matrix-sdk-crypto-wasm@18.5.0': {}
+  '@matrix-org/matrix-sdk-crypto-wasm@18.9.0': {}
 
   '@mdx-js/react@3.1.1(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
@@ -8685,12 +8667,12 @@ snapshots:
       '@use-gesture/core': 10.3.1
       react: 19.2.8
 
-  '@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8)':
+  '@vector-im/compound-design-tokens@11.1.0(@types/react@19.2.18)(react@19.2.8)':
     optionalDependencies:
       '@types/react': 19.2.18
       react: 19.2.8
 
-  '@vector-im/compound-web@10.1.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.0.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+  '@vector-im/compound-web@10.3.0(@fontsource/inconsolata@5.3.0)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(@vector-im/compound-design-tokens@11.1.0(@types/react@19.2.18)(react@19.2.8))(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
     dependencies:
       '@floating-ui/react': 0.27.20(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -8702,7 +8684,7 @@ snapshots:
       '@radix-ui/react-progress': 1.1.16(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-separator': 1.1.15(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
       '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
-      '@vector-im/compound-design-tokens': 11.0.0(@types/react@19.2.18)(react@19.2.8)
+      '@vector-im/compound-design-tokens': 11.1.0(@types/react@19.2.18)(react@19.2.8)
       classnames: 2.5.1
       react: 19.2.8
       vaul: 1.1.2(@types/react-dom@19.2.5(@types/react@19.2.18))(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
@@ -9163,7 +9145,7 @@ snapshots:
 
   constants-browserify@1.0.0: {}
 
-  content-type@3.0.0: {}
+  content-type@3.1.1: {}
 
   convert-source-map@2.0.0: {}
 
@@ -10034,10 +10016,6 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
-  js-yaml@4.3.0:
-    dependencies:
-      argparse: 2.0.1
-
   js-yaml@4.3.1:
     dependencies:
       argparse: 2.0.1
@@ -10249,17 +10227,17 @@ snapshots:
 
   matrix-events-sdk@0.0.1: {}
 
-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/24929be0e741be6a5d0a7226f1c682e245263b8a:
+  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fa4772a4ddd335a5a8bfbf8bb21df49b70f7a999:
     dependencies:
       '@babel/runtime': 8.0.0
-      '@matrix-org/matrix-sdk-crypto-wasm': 18.5.0
+      '@matrix-org/matrix-sdk-crypto-wasm': 18.9.0
       another-json: 0.2.0
       bs58: 6.0.0
-      content-type: 3.0.0
+      content-type: 3.1.1
       loglevel: 1.9.2
       matrix-events-sdk: 0.0.1
       matrix-widget-api: 1.19.0
-      p-retry: 8.0.0
+      p-retry: 8.0.1
       sdp-transform: 3.0.0
       unhomoglyph: 1.0.6
 
@@ -10286,12 +10264,6 @@ snapshots:
       bn.js: 4.12.3
       brorand: 1.1.0
 
-  mime-db@1.52.0: {}
-
-  mime-types@2.1.35:
-    dependencies:
-      mime-db: 1.52.0
-
   mimic-function@5.0.1: {}
 
   min-indent@1.0.1: {}
@@ -10584,7 +10556,7 @@ snapshots:
     dependencies:
       p-limit: 3.1.0
 
-  p-retry@8.0.0:
+  p-retry@8.0.1:
     dependencies:
       is-network-error: 1.3.2
 
@@ -11652,13 +11624,6 @@ snapshots:
       - '@types/react'
       - '@types/react-dom'
 
-  vite-plugin-generate-file@0.3.1:
-    dependencies:
-      ejs: 3.1.10
-      js-yaml: 4.3.0
-      mime-types: 2.1.35
-      picocolors: 1.1.1
-
   vite-plugin-html@3.2.2(vite@8.2.2(@types/node@24.13.3)(esbuild@0.28.2)(jiti@2.7.0)(sass@1.103.1)(terser@5.46.1)(yaml@2.9.0)):
     dependencies:
       '@rollup/pluginutils': 4.2.1

scripts/check-component-externals.mjs

@@ -9,9 +9,11 @@ Please see LICENSE in the repository root for full details.
  * Checks that the component build leaves the packages a host must supply to
  * the host.
  *
- * A host application already has React, the Matrix SDK and LiveKit, and a
- * second copy of any of them is worse than dead weight: React would hold two
- * sets of hooks, and the Matrix client would run two sync loops. So the
+ * A host application already has React, the Matrix SDK, LiveKit and Compound,
+ * and a second copy of any of them is worse than dead weight: React would hold
+ * two sets of hooks, the Matrix client would run two sync loops, and a second
+ * Compound would style the tooltips it floats into the host's body with class
+ * names the host's stylesheet does not know. So the
  * component build lists them as external — but that list has to name every
  * subpath, since the bundler silently ignores the pattern and callback forms
  * of the option, and an import it does not cover is bundled with no warning at
@@ -33,6 +35,9 @@ import { loadConfigFromFile } from "vite";
 
 const CONFIG = "vite-component.config.ts";
 const SOURCES = ["src", "component"];
+// The development harness is a host, not part of the component: it is the
+// one that imports what a host supplies (Compound's stylesheets, say).
+const EXCLUDED = ["component/dev"];
 
 /** The packages whose duplication would break a host, rather than merely enlarge it. */
 const MUST_BE_EXTERNAL = [
@@ -40,6 +45,8 @@ const MUST_BE_EXTERNAL = [
   "react-dom",
   "matrix-js-sdk",
   "livekit-client",
+  "@vector-im/compound-web",
+  "@vector-im/compound-design-tokens",
 ];
 
 const isTestFile = (name) =>
@@ -49,6 +56,7 @@ const isTestFile = (name) =>
 async function* sourceFiles(dir) {
   for (const entry of await readdir(dir, { withFileTypes: true })) {
     const path = join(dir, entry.name);
+    if (EXCLUDED.includes(path)) continue;
     if (entry.isDirectory()) yield* sourceFiles(path);
     else if (/\.(ts|tsx)$/.test(entry.name) && !isTestFile(entry.name))
       yield path;

scripts/fetchdep.sh

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

scripts/layered.sh

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

src/App.tsx

@@ -35,7 +35,7 @@ import { ErrorPage, LoadingPage } from "./FullScreenView";
 import { Initializer } from "./initializer";
 import { type WidgetHelpers } from "./widget";
 import { useTheme } from "./useTheme";
-import { ProcessorProvider } from "./livekit/TrackProcessorContext";
+import { BackgroundEffectsProvider } from "./livekit/BackgroundEffectsContext";
 import { type AppViewModel } from "./state/AppViewModel";
 import { MediaDevicesContext } from "./MediaDevicesContext";
 import {
@@ -148,7 +148,7 @@ export const App: FC<Props> = ({ vm, widget }) => {
     loaded && clientReady ? (
       <ClientProvider client={widgetClient}>
         <MediaDevicesContext value={vm.mediaDevices}>
-          <ProcessorProvider>
+          <BackgroundEffectsProvider effects={vm.backgroundEffects}>
             <Sentry.ErrorBoundary
               fallback={(error) => <ErrorPage error={error} />}
             >
@@ -159,7 +159,7 @@ export const App: FC<Props> = ({ vm, widget }) => {
                 <SentryRoute path="*" element={<RoomPage />} />
               </Routes>
             </Sentry.ErrorBoundary>
-          </ProcessorProvider>
+          </BackgroundEffectsProvider>
         </MediaDevicesContext>
       </ClientProvider>
     ) : (

src/UrlConfiguration.ts

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

src/UrlParams.ts

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

src/__snapshots__/AppBar.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`AppBar > renders 1`] = `
         tabindex="0"
       >
         <div
-          class="_indicator-icon_147l5_17"
+          class="_indicator-icon_j097f_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -58,7 +58,7 @@ exports[`AppBar > renders with title and subtitle 1`] = `
         tabindex="0"
       >
         <div
-          class="_indicator-icon_147l5_17"
+          class="_indicator-icon_j097f_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg

src/base.css

@@ -5,19 +5,24 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-/* The styles Element Call needs wherever it is shown: the design tokens, fonts
-and element defaults its own stylesheets build on top of.
+/* The styles Element Call needs wherever it is shown: the element defaults and
+custom properties its own stylesheets build on top of.
 
 Split out from index.css so that Element Call as a component can have these
 without also being given the standalone page's layout, which would style the
-host's own document. What remains here still speaks of the
-document — normalize.css and the typography below use bare element selectors,
-and the custom properties are declared on `:root` — which is right for the
-page, and is why the component build rewrites it: there every selector is
-confined to Element Call's root element (see component/build/scopeStylesToRoot.ts),
-with `html`, `body` and `:root` becoming that element. Nothing needs to be
-written differently here for that to work, but nothing here may rely on
-reaching the host's document either.
+host's own document. Compound's stylesheets — the design tokens, the component
+styles and the fonts they use — are not here either: as a component, Element
+Call shares the host's copy of Compound (it is a peer dependency, so that what
+Compound floats into the host's body, tooltips and menus, is styled by the
+host's stylesheet), and index.css loads it for the page.
+
+What remains here still speaks of the document — normalize.css and the
+typography below use bare element selectors, and the custom properties are
+declared on `:root` — which is right for the page, and is why the component
+build rewrites it: there every selector is confined to Element Call's root
+element (see component/build/scopeStylesToRoot.ts), with `html`, `body` and
+`:root` becoming that element. Nothing needs to be written differently here for
+that to work, but nothing here may rely on reaching the host's document either.
 
 Nothing here should depend on where it lands relative to Element Call's
 component stylesheets: the bundler decides that, and it decides differently for
@@ -25,16 +30,7 @@ the app and for the component build. */
 
 @layer normalize, compound-legacy, compound;
 
-@import url("@fontsource/inter/400.css");
-@import url("@fontsource/inter/500.css");
-@import url("@fontsource/inter/600.css");
-@import url("@fontsource/inter/700.css");
-@import url("@fontsource/inconsolata/400.css");
-@import url("@fontsource/inconsolata/700.css");
-
 @import url("normalize.css/normalize.css") layer(normalize);
-@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
-@import url("@vector-im/compound-web/dist/style.css") layer(compound.components);
 
 :root {
   --font-scale: 1;

src/button/ReactionToggleButton.module.css

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

src/components/BackgroundEffectGrid.module.css

@@ -0,0 +1,92 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+.grid {
+  display: grid;
+  /* A zero floor, so a long label wraps inside its tile rather than widening
+     the grid past the menu. */
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-auto-rows: 1fr;
+  gap: var(--cpd-space-3x);
+  padding: var(--cpd-space-2x) var(--cpd-space-4x) 0;
+}
+
+/* Within the grid, to outweigh the menu item styles the tiles are built on. */
+.grid .tile {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--cpd-space-1x);
+  min-inline-size: 0;
+  padding: var(--cpd-space-3x) var(--cpd-space-2x);
+  /* Not hidden: that makes the tile a scroll container, which focus scrolls
+     into view without its border, and so without the focus ring. */
+  overflow: clip;
+  border: var(--cpd-border-width-2) solid
+    var(--cpd-color-border-interactive-secondary);
+  border-radius: var(--cpd-space-2x);
+  background: none;
+  color: var(--cpd-color-icon-secondary);
+  font: inherit;
+  cursor: pointer;
+}
+
+/* As the menu items highlight on hover. */
+.grid .tile[data-highlighted] {
+  background: var(--cpd-color-bg-action-secondary-hovered);
+}
+
+.grid .tile[aria-checked="true"] {
+  border-color: var(--cpd-color-border-accent);
+}
+
+.grid .tile[data-disabled] {
+  cursor: default;
+  opacity: 0.55;
+}
+
+.tile[data-disabled] .picture {
+  filter: grayscale(1);
+}
+
+.swatch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.picture {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+/* Positioned, or the picture, positioned itself, would cover it. */
+.mark {
+  position: relative;
+  display: inline-flex;
+  color: var(--cpd-color-icon-accent-primary);
+}
+
+/* On a picture the mark needs a ground of its own to be seen. */
+.picture ~ .mark {
+  border-radius: 50%;
+  background: var(--cpd-color-bg-canvas-default);
+  box-shadow: 0 0 0 var(--cpd-border-width-2) var(--cpd-color-bg-canvas-default);
+}
+
+.label {
+  max-inline-size: 100%;
+  font: var(--cpd-font-body-sm-medium);
+  color: var(--cpd-color-text-primary);
+  text-align: center;
+  overflow-wrap: anywhere;
+}

src/components/BackgroundEffectGrid.tsx

@@ -0,0 +1,142 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { type FC, type ReactNode, type ReactElement } from "react";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { InlineSpinner, MenuItem } from "@vector-im/compound-web";
+import {
+  BlockIcon,
+  BlurIcon,
+  CheckCircleSolidIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import styles from "./BackgroundEffectGrid.module.css";
+
+/** One choice in the camera menu's Background effects section. */
+export interface BackgroundEffectOption {
+  id: string;
+  /** The tile's accessible name; drawn only where the tile has no picture. */
+  label: string;
+  kind: "none" | "blur" | "image";
+  /** For kind "image". */
+  imageUrl?: string;
+}
+
+interface Props {
+  /** Names the group, whose heading is hidden from assistive technology. */
+  label: string;
+  heading: ReactNode;
+  effects: BackgroundEffectOption[];
+  selected: string | undefined;
+  /** Undefined where effects can't run: all but no effect are disabled. */
+  onSelect: ((id: string) => void) | undefined;
+  /** Shown on the selected tile until its effect is on screen. */
+  settling?: boolean;
+  /** Id of the text saying what the user should know before choosing. */
+  describedBy?: string;
+}
+
+/**
+ * The background effects as a grid of tiles: one radio choice, walked by the
+ * menu's arrow keys like the device rows.
+ */
+export const BackgroundEffectGrid: FC<Props> = ({
+  label,
+  heading,
+  effects,
+  selected,
+  onSelect,
+  settling = false,
+  describedBy,
+}) => {
+  const choose = (id: string): void => {
+    if (id !== selected) onSelect?.(id);
+  };
+  const tiles = effects.map((effect) => {
+    const checked = effect.id === selected;
+    const disabled = onSelect === undefined && effect.kind !== "none";
+    return (
+      <MenuItem
+        key={effect.id}
+        role="menuitemradio"
+        aria-checked={checked}
+        aria-busy={checked && settling}
+        disabled={disabled}
+        data-disabled={disabled ? "" : undefined}
+        label={null}
+        hideChevron
+        className={styles.tile}
+        // Without a handler it isn't one of the menu's items, so the keyboard
+        // passes over it.
+        onSelect={
+          disabled
+            ? null
+            : (e): void => {
+                // Kept open, so the user sees what they chose take effect.
+                e.preventDefault();
+                choose(effect.id);
+              }
+        }
+      >
+        <TileContent
+          effect={effect}
+          checked={checked}
+          settling={checked && settling}
+        />
+      </MenuItem>
+    );
+  });
+
+  return (
+    <div role="group" aria-label={label} aria-describedby={describedBy}>
+      {heading}
+      <div role="none" className={styles.grid}>
+        {tiles}
+      </div>
+    </div>
+  );
+};
+
+function TileContent({
+  effect,
+  checked,
+  settling,
+}: {
+  effect: BackgroundEffectOption;
+  checked: boolean;
+  settling: boolean;
+}): ReactElement {
+  return (
+    <>
+      <span aria-hidden className={styles.swatch}>
+        {effect.kind === "image" && (
+          <img className={styles.picture} src={effect.imageUrl} alt="" />
+        )}
+        {settling ? (
+          <span className={styles.mark}>
+            <InlineSpinner size={20} />
+          </span>
+        ) : checked ? (
+          <CheckCircleSolidIcon
+            className={styles.mark}
+            width={20}
+            height={20}
+          />
+        ) : effect.kind === "none" ? (
+          <BlockIcon width={20} height={20} />
+        ) : effect.kind === "blur" ? (
+          <BlurIcon width={20} height={20} />
+        ) : null}
+      </span>
+      {effect.kind === "image" ? (
+        <VisuallyHidden>{effect.label}</VisuallyHidden>
+      ) : (
+        <span className={styles.label}>{effect.label}</span>
+      )}
+    </>
+  );
+}

src/components/CallFooter.stories.tsx

@@ -22,6 +22,7 @@ import { MediaDevices } from "../state/MediaDevices";
 import { globalScope } from "../state/ObservableScope";
 import { constant } from "../state/Behavior";
 import { type LayoutMode } from "../state/LayoutSwitchViewModel";
+import { shippedBackgrounds } from "../livekit/backgroundEffects";
 
 // consts for tests
 const reactionIdentifier = "@user:example.com:DEVICE";
@@ -123,8 +124,18 @@ export const Default: Story = {
     toggleAudio: fn(),
     toggleVideo: fn(),
     toggleScreenSharing: fn(),
-    toggleBlur: fn(),
-    videoBlurEnabled: true,
+    selectBackgroundEffect: fn(),
+    backgroundEffect: "blur",
+    backgroundEffects: [
+      { id: "none", kind: "none" },
+      { id: "blur", kind: "blur" },
+      ...shippedBackgrounds.map((background) => ({
+        id: `image:${background.id}`,
+        kind: "image" as const,
+        imageUrl: background.imagePath,
+      })),
+    ],
+    backgroundEffectNotice: undefined,
     hangup: fn(),
     buttonSize: "lg",
     showFooter: true,

src/components/CallFooter.tsx

@@ -7,6 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { type FC, type JSX, type Ref, useMemo } from "react";
 import classNames from "classnames";
+import { useTranslation } from "react-i18next";
 
 import LogoMark from "../icons/LogoMark.svg?react";
 import LogoType from "../icons/LogoType.svg?react";
@@ -31,6 +32,15 @@ import { type ViewModel } from "../state/ViewModel";
 import { useBehavior } from "../useBehavior";
 import { type LayoutSwitchViewModel } from "../state/LayoutSwitchViewModel";
 import { LayoutSwitch } from "../room/LayoutSwitch";
+import { type BackgroundEffectOption } from "./BackgroundEffectGrid";
+
+/** A background effect on offer, which the view names. */
+export interface BackgroundEffectChoice {
+  /** Its option id, as `backgroundEffect` gives the one in force. */
+  id: string;
+  kind: "none" | "blur" | "image";
+  imageUrl?: string;
+}
 
 export interface AudioOutputSwitcher {
   targetOutput: string;
@@ -56,20 +66,27 @@ export interface FooterActions {
   toggleAudio: (() => void) | undefined;
   /** Also controls if the videoMute button is disabled */
   toggleVideo: (() => void) | undefined;
-  toggleBlur: (() => void) | undefined;
+  /** Undefined where background effects can't be chosen. */
+  selectBackgroundEffect: ((id: string) => void) | undefined;
   toggleScreenSharing: (() => void) | undefined;
   /** Also controls if the settings button is visible */
   openSettings: (() => void) | undefined;
   /** Also controls if the hangup button is visible */
   hangup: (() => void) | undefined;
 }
+
 // we do not use any ? optional properties so that the vm type is including all fields.
 export interface FooterState {
   audioEnabled: boolean;
   audioBusy: boolean;
   videoEnabled: boolean;
   videoBusy: boolean;
-  videoBlurEnabled: boolean;
+  /** The background effect in force, as its option id. */
+  backgroundEffect: string;
+  /** Every effect on offer, in the order they are shown. */
+  backgroundEffects: BackgroundEffectChoice[];
+  /** What the user is told about effects here, if anything. */
+  backgroundEffectNotice: "unavailable" | undefined;
   showFooter: boolean;
 
   /* This is needed for WindowMode = "flat" */
@@ -117,12 +134,14 @@ export interface FooterProps {
   children?: JSX.Element | JSX.Element[] | false;
   vm: ViewModel<FooterSnapshot>;
 }
+
 export const CallFooter: FC<FooterProps> = ({
   className,
   ref,
   children,
   vm,
 }) => {
+  const { t } = useTranslation();
   const asOverlay = useBehavior(vm.asOverlay$);
   const showFooter = useBehavior(vm.showFooter$);
   const hideControls = useBehavior(vm.hideControls$);
@@ -151,8 +170,12 @@ export const CallFooter: FC<FooterProps> = ({
   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$);
+  const backgroundEffect = useBehavior(vm.backgroundEffect$);
+  const selectBackgroundEffect = useBehavior(vm.selectBackgroundEffect$);
+  const backgroundEffectNotice = useBehavior(vm.backgroundEffectNotice$);
+  const backgroundEffects = useBackgroundEffectLabels(
+    useBehavior(vm.backgroundEffects$),
+  );
   const buttonSize = useBehavior(vm.buttonSize$);
   const showLogo = useBehavior(vm.showLogo$);
 
@@ -214,8 +237,14 @@ export const CallFooter: FC<FooterProps> = ({
         options={videoOptions}
         selectedOption={selectedVideo}
         onSelect={selectVideoButtonOption}
-        videoBlurToggleClick={toggleBlur}
-        videoBlurEnabled={videoBlurEnabled}
+        backgroundEffects={backgroundEffects}
+        selectedBackgroundEffect={backgroundEffect}
+        onSelectBackgroundEffect={selectBackgroundEffect}
+        backgroundEffectNotice={
+          backgroundEffectNotice === "unavailable"
+            ? t("background_effects.unavailable")
+            : undefined
+        }
       />,
     );
   } else {
@@ -340,3 +369,21 @@ const TilesDebugInfo: FC<TilesDebugInfoProps> = ({ generation$ }) => {
   const generation = useBehavior(generation$);
   return `Tiles generation: ${generation}`;
 };
+
+function useBackgroundEffectLabels(
+  choices: BackgroundEffectChoice[],
+): BackgroundEffectOption[] {
+  const { t } = useTranslation();
+  return useMemo(() => {
+    let pictures = 0;
+    return choices.map((choice) => ({
+      ...choice,
+      label:
+        choice.kind === "none"
+          ? t("background_effects.none")
+          : choice.kind === "blur"
+            ? t("background_effects.blur")
+            : t("background_effects.numbered", { n: ++pictures }),
+    }));
+  }, [choices, t]);
+}

src/components/CallFooterViewModel.test.ts

@@ -5,16 +5,22 @@ 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 { afterEach, describe, expect, it, vi } from "vitest";
+import { BehaviorSubject } from "rxjs";
 
 import { testScope, mockMuteStates, mockMediaDevices } from "../utils/test";
 import { constant } from "../state/Behavior";
 import type { CallViewModel } from "../state/CallViewModel/CallViewModel";
-import type { Layout } from "../state/layout-types";
+import type { Alignment, Layout } from "../state/layout-types";
 import type { SpotlightTileViewModel } from "../state/TileViewModel";
 import type { DeviceLabel } from "../state/MediaDevices";
-import { createCallFooterViewModel } from "./CallFooterViewModel";
+import {
+  createCallFooterViewModel,
+  createLobbyFooterViewModel,
+} from "./CallFooterViewModel";
 import { HeaderStyle } from "../UrlParams";
+import { backgroundEffect as backgroundEffectSetting } from "../settings/settings";
+import { shippedBackgrounds } from "../livekit/backgroundEffects";
 
 const platformMock = vi.hoisted(() => vi.fn(() => "desktop"));
 vi.mock("../Platform", () => ({
@@ -23,10 +29,10 @@ vi.mock("../Platform", () => ({
   },
 }));
 
-// Prevent supportsBackgroundProcessors from throwing in jsdom – it is not
-// exercised by these tests (only used in `videoToggles`, not `videoOptions`).
+// The SDK's own check needs WebGL and canvas APIs jsdom does not have.
+const sdkSupportMock = vi.hoisted(() => vi.fn(() => false));
 vi.mock("@livekit/track-processors", () => ({
-  supportsBackgroundProcessors: (): boolean => false,
+  supportsBackgroundProcessors: (): boolean => sdkSupportMock(),
 }));
 
 const outputSelectionMock = vi.hoisted(() => vi.fn(() => true));
@@ -64,6 +70,10 @@ function buildMinimalCallViewModel(layout: Layout): CallViewModel {
 const gridLayout: Layout = {
   type: "grid",
   grid: [],
+  spotlightAlignment$: new BehaviorSubject<Alignment>({
+    inline: "end",
+    block: "end",
+  }),
   setVisibleTiles: (_: number) => {},
 };
 
@@ -217,4 +227,98 @@ describe("createCallFooterViewModel", () => {
       ]);
     });
   });
+
+  describe("background effects", () => {
+    afterEach(() => backgroundEffectSetting.setValue("none"));
+
+    // The lobby, because in a call the whole device switcher is already
+    // withheld on a phone, whatever the verdict says.
+    function lobbyOn(
+      platform: string,
+    ): ReturnType<typeof createLobbyFooterViewModel> {
+      platformMock.mockReturnValue(platform);
+      return createLobbyFooterViewModel(
+        testScope(),
+        mockMuteStates(),
+        twoMicsAndOneCamMediaDevices,
+        /* openSettings */ undefined,
+        /* hangup */ undefined,
+        /* showLogo */ false,
+      );
+    }
+
+    it("offers nothing on a phone, where the pipeline would refuse them", () => {
+      sdkSupportMock.mockReturnValue(true);
+      expect(lobbyOn("ios").selectBackgroundEffect$.value).toBeUndefined();
+    });
+
+    it("offers them where the pipeline will honour them", () => {
+      sdkSupportMock.mockReturnValue(true);
+      expect(lobbyOn("desktop").selectBackgroundEffect$.value).toBeDefined();
+    });
+
+    it("offers nothing where the browser itself cannot run them", () => {
+      sdkSupportMock.mockReturnValue(false);
+      expect(lobbyOn("desktop").selectBackgroundEffect$.value).toBeUndefined();
+    });
+
+    it("puts no effect in force where the browser cannot run them", () => {
+      backgroundEffectSetting.setValue("blur");
+      sdkSupportMock.mockReturnValue(false);
+      expect(lobbyOn("desktop").backgroundEffect$.value).toBe("none");
+      sdkSupportMock.mockReturnValue(true);
+      expect(lobbyOn("desktop").backgroundEffect$.value).toBe("blur");
+    });
+
+    it("stores the effect chosen", () => {
+      sdkSupportMock.mockReturnValue(true);
+      const vm = lobbyOn("desktop");
+      vm.selectBackgroundEffect$.value?.("image:arc");
+      expect(vm.backgroundEffect$.value).toBe("image:arc");
+      // What isn't an effect on offer is stored as none.
+      vm.selectBackgroundEffect$.value?.("image:gone");
+      expect(backgroundEffectSetting.getValue()).toBe("none");
+    });
+
+    it("offers every effect in order", () => {
+      sdkSupportMock.mockReturnValue(true);
+      expect(lobbyOn("desktop").backgroundEffects$.value).toEqual([
+        { id: "none", kind: "none" },
+        { id: "blur", kind: "blur" },
+        ...shippedBackgrounds.map((background) => ({
+          id: `image:${background.id}`,
+          kind: "image",
+          imageUrl: background.imagePath,
+        })),
+      ]);
+    });
+
+    it("says they are unavailable where they cannot be chosen", () => {
+      sdkSupportMock.mockReturnValue(false);
+      expect(lobbyOn("desktop").backgroundEffectNotice$.value).toBe(
+        "unavailable",
+      );
+    });
+
+    it("availability is the same before and during a call", () => {
+      for (const supported of [true, false]) {
+        sdkSupportMock.mockReturnValue(supported);
+        const lobby = lobbyOn("desktop");
+        const inCall = createCallFooterViewModel(
+          testScope(),
+          buildMinimalCallViewModel(gridLayout),
+          mockMuteStates(),
+          twoMicsAndOneCamMediaDevices,
+          /* reactionIdentifier */ undefined,
+          { showControls: true, header: HeaderStyle.Standard },
+        );
+        const offeredInLobby =
+          lobby.selectBackgroundEffect$.value !== undefined;
+        expect(inCall.selectBackgroundEffect$.value !== undefined).toBe(
+          offeredInLobby,
+        );
+        expect(offeredInLobby).toBe(supported);
+      }
+    });
+  });
 });

src/components/CallFooterViewModel.tsx

@@ -6,14 +6,20 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { combineLatest, map, type Observable, switchMap } from "rxjs";
-import { supportsBackgroundProcessors } from "@livekit/track-processors";
 import { supportsAudioOutputSelection } from "livekit-client";
 
+import { supportsBackgroundProcessors } from "../livekit/backgroundProcessing";
+import {
+  parseEffect,
+  serializeEffect,
+  shippedBackgrounds,
+} from "../livekit/backgroundEffects";
+
 import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
 import { type MenuOptions } from "./MediaMuteAndSwitchButton";
 import { type MediaDevices } from "../state/MediaDevices";
 import {
-  backgroundBlur as backgroundBlurSettings,
+  backgroundEffect as backgroundEffectSetting,
   debugTileLayout as debugTileLayoutSetting,
 } from "../settings/settings";
 import { type Behavior, constant } from "../state/Behavior";
@@ -22,7 +28,7 @@ import { type MuteStates } from "../state/MuteStates";
 import { createStaticViewModel, type ViewModel } from "../state/ViewModel";
 import { HeaderStyle } from "../UrlParams";
 import { platform } from "../Platform";
-import { type FooterSnapshot } from "./CallFooter";
+import { type BackgroundEffectChoice, type FooterSnapshot } from "./CallFooter";
 
 /**
  * Shared helper: maps MuteStates into the audio/video enabled + toggle behaviors
@@ -56,7 +62,7 @@ function buildMuteBehaviors(
 
 /**
  * Shared helper: maps MediaDevices into the audio/video device-list behaviors
- * needed by FooterSnapshot (options, selection, callbacks, blur toggle).
+ * needed by FooterSnapshot (options, selection, callbacks, background effect).
  */
 function buildDeviceBehaviors(
   scope: ObservableScope,
@@ -74,8 +80,10 @@ function buildDeviceBehaviors(
   | "videoOptions$"
   | "selectedVideo$"
   | "selectVideoButtonOption$"
-  | "toggleBlur$"
-  | "videoBlurEnabled$"
+  | "backgroundEffect$"
+  | "selectBackgroundEffect$"
+  | "backgroundEffects$"
+  | "backgroundEffectNotice$"
 > {
   const options$ = (
     available$: Behavior<Map<string, MenuOptions["label"]>>,
@@ -92,6 +100,10 @@ function buildDeviceBehaviors(
       ),
     );
 
+  const supported = supportsBackgroundProcessors();
+  const offered$ = disableSwitcher$.pipe(
+    map((switcherDisabled) => !switcherDisabled && supported),
+  );
   return {
     audioOptions$: scope.behavior(options$(mediaDevices.audioInput.available$)),
     selectedAudio$: scope.behavior(
@@ -116,18 +128,27 @@ function buildDeviceBehaviors(
       mediaDevices.videoInput.selected$.pipe(map((s) => s?.id)),
     ),
     selectVideoButtonOption$: constant(mediaDevices.videoInput.select),
-    toggleBlur$: scope.behavior(
-      combineLatest([backgroundBlurSettings.value$, disableSwitcher$]).pipe(
-        map(([current, switcherDisabled]) => {
-          return !switcherDisabled && supportsBackgroundProcessors()
-            ? (): void => {
-                backgroundBlurSettings.setValue(!current);
-              }
-            : undefined;
-        }),
+    backgroundEffect$: scope.behavior(
+      backgroundEffectSetting.value$.pipe(
+        map((raw) => (supported ? serializeEffect(parseEffect(raw)) : "none")),
       ),
     ),
-    videoBlurEnabled$: backgroundBlurSettings.value$,
+    selectBackgroundEffect$: scope.behavior(
+      offered$.pipe(
+        map((offered) =>
+          offered
+            ? (id: string): void =>
+                backgroundEffectSetting.setValue(
+                  serializeEffect(parseEffect(id)),
+                )
+            : undefined,
+        ),
+      ),
+    ),
+    backgroundEffects$: constant(backgroundEffectChoices()),
+    backgroundEffectNotice$: scope.behavior(
+      offered$.pipe(map((offered) => (offered ? undefined : "unavailable"))),
+    ),
   };
 }
 
@@ -278,3 +299,15 @@ export function createLobbyFooterViewModel(
     ...buildDeviceBehaviors(scope, mediaDevices, constant(false)),
   };
 }
+
+function backgroundEffectChoices(): BackgroundEffectChoice[] {
+  return [
+    { id: serializeEffect({ kind: "none" }), kind: "none" },
+    { id: serializeEffect({ kind: "blur" }), kind: "blur" },
+    ...shippedBackgrounds.map((background) => ({
+      id: serializeEffect({ kind: "shipped", id: background.id }),
+      kind: "image" as const,
+      imageUrl: background.imagePath,
+    })),
+  ];
+}

src/components/MediaMuteAndSwitchButton.module.css

@@ -36,20 +36,19 @@ Please see LICENSE in the repository root for full details.
   }
 }
 
+/* The width design sets: a long device name wraps. */
 .menu {
-  display: flex;
-  flex-direction: column;
+  inline-size: 296px;
 }
 
-/* Only the device lists scroll, bounded by the measured call area: the menu is
-   portalled out of the root, so CSS can't size it against the call. */
+/* Its share of the measured call area: the menu is portalled out of the root,
+   so CSS can't size it against the call. */
 .deviceList {
-  overflow-y: auto;
-  min-block-size: 0;
   max-block-size: var(--device-list-max-height);
-  /* Keeps a row reached by keyboard clear of the sticky heading and meter. */
-  scroll-padding-block: var(--device-list-scroll-padding-start, 0)
-    var(--device-list-scroll-padding-end, 0);
+  /* The raised headings stay raised within the list, under the menu's frame. */
+  isolation: isolate;
+  /* Keeps a row reached by keyboard clear of the sticky heading. */
+  scroll-padding-block-start: var(--device-list-scroll-padding-start, 0);
 }
 
 /* Compound's heading rule heads each section; the design adds space below it. */
@@ -62,23 +61,40 @@ Please see LICENSE in the repository root for full details.
   margin-block-start: var(--cpd-space-7x);
 }
 
-/* Sticky within its own section. Opaque and inset a border width so it doesn't
-   paint over the menu's outline. */
+/* Sticky within its own section: opaque, so rows scroll under it, and raised,
+   or the positioned tiles scroll over it. */
 .sectionHeading {
   position: sticky;
+  z-index: 1;
   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. */
+/* Sticky at the foot of the microphone section; opaque 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);
+}
+
+/* Fills the band between the meter and the frame, or rows show through it. */
+.stickyMeter::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: 100%;
+  block-size: var(--cpd-menu-padding-block-end, 0px);
+  background: var(--cpd-color-bg-canvas-default);
+}
+
+/* Not Compound's fade: that stays at the edge while a bounce carries the meter.
+   This one starts at the chevron, below the meter at rest. */
+.deviceList.deviceListWithMeter[data-more-below] {
+  mask-image: linear-gradient(
+    to bottom,
+    #000 calc(100% - var(--cpd-space-6x)),
+    transparent calc(100% - var(--cpd-space-3x))
+  );
 }
 
 /* Radix focuses whatever the pointer is over, so the browser's ring would
@@ -92,3 +108,20 @@ Please see LICENSE in the repository root for full details.
   outline: var(--cpd-border-width-2) solid var(--cpd-color-border-focused);
   outline-offset: calc(-1 * var(--cpd-border-width-2));
 }
+
+.notice {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--cpd-space-3x);
+  margin: var(--cpd-space-2x) var(--cpd-space-4x) 0;
+  padding: var(--cpd-space-3x);
+  border-radius: var(--cpd-space-2x);
+  background: var(--cpd-color-bg-subtle-secondary);
+  color: var(--cpd-color-text-primary);
+  font: var(--cpd-font-body-md-regular);
+}
+
+.notice > svg {
+  flex-shrink: 0;
+  color: var(--cpd-color-icon-secondary);
+}

src/components/MediaMuteAndSwitchButton.stories.tsx

@@ -11,6 +11,8 @@ import { useEffect, useState, type FC, type JSX, type ReactNode } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { MediaMuteAndSwitchButton } from "./MediaMuteAndSwitchButton";
 import styles from "./MediaMuteAndSwitchButton.module.css";
+import { type BackgroundEffectOption } from "./BackgroundEffectGrid";
+import { shippedBackgrounds } from "../livekit/backgroundEffects";
 import meterStyles from "./MicrophoneLevelMeter.module.css";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { RootElementProvider } from "../RootElementContext";
@@ -59,14 +61,19 @@ const WithAMicrophone: FC<{ children: ReactNode }> = ({ children }) => {
 };
 
 /** Supplies a call-sized root. Without one the list is bounded by the whole Storybook frame. */
-const WithACallArea: FC<{ children: ReactNode }> = ({ children }) => {
+const WithACallArea: FC<{ children: ReactNode; blockSize?: number }> = ({
+  children,
+  // A call's size: anything smaller makes a short device list scroll, and a
+  // narrower one narrows the menu.
+  blockSize = 720,
+}) => {
   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,
+        blockSize,
+        inlineSize: 1024,
         display: "flex",
         alignItems: "flex-end",
         justifyContent: "center",
@@ -127,8 +134,6 @@ export const AudioMute: Story = {
       { label: { type: "name", name: "Microphone 1" }, id: "1" },
       { label: { type: "name", name: "Microphone 2" }, id: "2" },
     ],
-    videoBlurEnabled: true,
-    videoBlurToggleClick: fn(),
     selectedOption: "2",
   },
   play: async ({ args, canvasElement }) => {
@@ -167,6 +172,17 @@ export const VideoMute: Story = {
   },
 };
 
+const effects: BackgroundEffectOption[] = [
+  { id: "none", kind: "none", label: "None" },
+  { id: "blur", kind: "blur", label: "Blur" },
+  ...shippedBackgrounds.map((background, i) => ({
+    id: `image:${background.id}`,
+    kind: "image" as const,
+    label: `Background ${i + 1}`,
+    imageUrl: background.imagePath,
+  })),
+];
+
 export const VideoUnmute: Story = {
   args: {
     iconsAndLabels: "video",
@@ -175,9 +191,146 @@ export const VideoUnmute: Story = {
       { label: { type: "name", name: "Camera 1" }, id: "1" },
       { label: { type: "name", name: "Camera 2" }, id: "2" },
     ],
-    videoBlurEnabled: true,
-    videoBlurToggleClick: fn(),
     selectedOption: "2",
+    backgroundEffects: effects,
+    selectedBackgroundEffect: "none",
+    onSelectBackgroundEffect: fn(),
+  },
+};
+
+/** One choice among no effect, blur and the shipped images, under the cameras. */
+export const BackgroundEffects: Story = {
+  args: VideoUnmute.args,
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Camera" }));
+    const menu = within(document.body);
+    const section = await menu.findByRole("group", {
+      name: "Background effects",
+    });
+    const tiles = within(section).getAllByRole("menuitemradio");
+    await expect(tiles.map((tile) => tile.textContent)).toEqual([
+      "None",
+      "Blur",
+      "Background 1",
+      "Background 2",
+    ]);
+    await expect(
+      within(section).getByRole("menuitemradio", { checked: true }),
+    ).toHaveTextContent("None");
+
+    const cameras = menu.getByRole("group", { name: "Camera" });
+    await expect(
+      cameras.compareDocumentPosition(section) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+    const [first, second, third, fourth] = tiles.map((tile) =>
+      tile.getBoundingClientRect(),
+    );
+    await expect(second.top).toBe(first.top);
+    await expect(third.top).toBe(first.top);
+    await expect(fourth.top).toBeGreaterThan(first.bottom);
+    const frame = document.body
+      .querySelector("[role='menu']")!
+      .getBoundingClientRect();
+    for (const tile of [first, second, third])
+      await expect(tile.left >= frame.left && tile.right <= frame.right).toBe(
+        true,
+      );
+
+    await userEvent.click(menu.getByRole("menuitemradio", { name: "Blur" }));
+    await expect(args.onSelectBackgroundEffect).toHaveBeenCalledWith("blur");
+    await expect(menu.getByRole("menu")).toBeVisible();
+  },
+};
+
+/** Where effects can't run: shown, disabled and explained, except no effect. */
+export const BackgroundEffectsUnavailable: Story = {
+  args: {
+    ...VideoUnmute.args,
+    onSelectBackgroundEffect: undefined,
+    backgroundEffectNotice:
+      "Background effects are not supported on this platform.",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Camera" }));
+    const menu = within(document.body);
+    const section = await menu.findByRole("group", {
+      name: "Background effects",
+    });
+    await expect(section).toHaveAccessibleDescription(
+      "Background effects are not supported on this platform.",
+    );
+    for (const tile of within(section).getAllByRole("menuitemradio"))
+      if (tile.textContent === "None") await expect(tile).toBeEnabled();
+      else await expect(tile).toBeDisabled();
+  },
+};
+
+/** In a short call the effects scroll into view with the list. */
+export const BackgroundEffectsScrollWhenTheyDoNotFit: Story = {
+  args: {
+    ...VideoUnmute.args,
+    // It sits with the effects, so it must fit the same share of the call.
+    backgroundEffectNotice:
+      "Background effects run slowly on this platform, which may cause your video to stutter.",
+  },
+  decorators: [
+    (Story): JSX.Element => (
+      <WithACallArea blockSize={300}>
+        <Story />
+      </WithACallArea>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Camera" }));
+    const menu = within(document.body);
+    const last = await menu.findByRole("menuitemradio", {
+      name: "Background 2",
+    });
+    const list = document.body.querySelector<HTMLElement>(
+      `.${styles.deviceList}`,
+    )!;
+    await expect(list.scrollHeight).toBeGreaterThan(list.clientHeight);
+    await expect(last.getBoundingClientRect().top).toBeGreaterThan(
+      list.getBoundingClientRect().bottom,
+    );
+
+    // Scrolled under the section's heading, the tiles pass beneath it.
+    const heading = [
+      ...document.body.querySelectorAll<HTMLElement>(
+        `.${styles.sectionHeading}`,
+      ),
+    ].find((h) => h.textContent === "Background effects")!;
+    list.scrollTop = heading.offsetTop + 30;
+    await waitFor(async () => {
+      const box = heading.getBoundingClientRect();
+      const drawn = document.elementFromPoint(
+        box.left + box.width / 2,
+        box.bottom - 2,
+      );
+      await expect(heading.contains(drawn)).toBe(true);
+    });
+    list.scrollTop = 0;
+
+    for (let i = 0; i < 10 && document.activeElement !== last; i++)
+      await userEvent.keyboard("{ArrowDown}");
+    await expect(document.activeElement).toBe(last);
+    const scrollport = list.getBoundingClientRect();
+    const reached = last.getBoundingClientRect();
+    await expect(reached.bottom).toBeLessThanOrEqual(scrollport.bottom + 1);
+    await expect(reached.top).toBeGreaterThanOrEqual(scrollport.top - 1);
+
+    const callArea = canvasElement
+      .querySelector<HTMLElement>("[style*='block-size: 300px']")!
+      .getBoundingClientRect();
+    const frame = document.body
+      .querySelector("[role='menu']")!
+      .getBoundingClientRect();
+    await expect(frame.top).toBeGreaterThanOrEqual(callArea.top);
+    await expect(frame.bottom).toBeLessThanOrEqual(callArea.bottom);
   },
 };
 
@@ -256,6 +409,37 @@ export const SpeakerAndMicrophoneSections: Story = {
   },
 };
 
+/** A long name wraps rather than widening the menu, which design sets. */
+export const LongDeviceNameWraps: Story = {
+  args: {
+    ...SpeakerAndMicrophoneSections.args,
+    outputOptions: [
+      {
+        label: {
+          type: "name",
+          name: "Logitech BRIO 4K Ultra HD Pro Business Webcam Speakers (046d:085e)",
+        },
+        id: "long",
+      },
+      { label: { type: "name", name: "Headset" }, id: "spk2" },
+    ],
+    selectedOutputOption: "long",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+    const body = within(document.body);
+    const long = await body.findByRole("menuitemradio", { name: /Logitech/ });
+    const short = await body.findByRole("menuitemradio", { name: "Headset" });
+
+    const menu = document.body.querySelector("[role='menu']")!;
+    await expect(Math.round(menu.getBoundingClientRect().width)).toBe(296);
+    await expect(long.getBoundingClientRect().height).toBeGreaterThan(
+      short.getBoundingClientRect().height,
+    );
+  },
+};
+
 export const OutputCannotBeChosen: Story = {
   args: {
     ...Default.args,
@@ -436,10 +620,6 @@ export const ManyDevices: Story = {
       .getBoundingClientRect();
     await expect(frame.top).toBeGreaterThanOrEqual(0);
     await expect(frame.bottom).toBeLessThanOrEqual(window.innerHeight + 1);
-
-    // The meter is the menu's one opaque part, so it must stay inside the frame.
-    await expect(pinned.left).toBeGreaterThan(frame.left);
-    await expect(pinned.right).toBeLessThan(frame.right);
   },
 };
 
@@ -607,13 +787,6 @@ export const HeadingsStayWhileScrolling: Story = {
     await expect(heading.getBoundingClientRect().bottom).toBeGreaterThan(
       scrollport.top,
     );
-    // Clear of the menu's frame.
-    const frame = document.body
-      .querySelector("[role='menu']")!
-      .getBoundingClientRect();
-    await expect(heading.getBoundingClientRect().left).toBeGreaterThan(
-      frame.left,
-    );
   },
 };
 
@@ -628,31 +801,23 @@ function overlapping(element: Element, overlays: Element[]): number {
   }, 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(),
-  },
+/** The effect tiles get the keyboard ring the device rows get. */
+export const FocusRingCoversTheEffectTiles: Story = {
+  args: VideoUnmute.args,
   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/,
+    const tile = await within(document.body).findByRole("menuitemradio", {
+      name: "Blur",
     });
 
-    // Arrow down past the cameras to the toggle.
-    for (let i = 0; i < 6 && document.activeElement !== toggle; i++)
+    for (let i = 0; i < 6 && document.activeElement !== tile; i++)
       await userEvent.keyboard("{ArrowDown}");
-    await expect(document.activeElement).toBe(toggle);
-    // The same ring the device rows get.
-    await expect(outlineWidth(toggle)).toBeGreaterThan(0);
+    await expect(document.activeElement).toBe(tile);
+    await expect(outlineWidth(tile)).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);
+    await userEvent.hover(tile);
+    await expect(document.activeElement).toBe(tile);
+    await expect(outlineWidth(tile)).toBe(0);
   },
 };

src/components/MediaMuteAndSwitchButton.test.tsx

@@ -9,6 +9,7 @@ import { afterEach, describe, expect, test, vi } from "vitest";
 import { axe } from "vitest-axe";
 import {
   act,
+  fireEvent,
   render,
   screen,
   within,
@@ -22,10 +23,18 @@ import {
   MediaMuteAndSwitchButton,
   type MenuOptions,
 } from "./MediaMuteAndSwitchButton";
+import { type BackgroundEffectOption } from "./BackgroundEffectGrid";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { type MediaDevices } from "../state/MediaDevices";
 import { restoreAudioCapture, stubAudioCapture } from "../utils/test";
 
+const effects: BackgroundEffectOption[] = [
+  { id: "none", kind: "none", label: "None" },
+  { id: "blur", kind: "blur", label: "Blur" },
+  { id: "image:arc", kind: "image", label: "Background 1", imageUrl: "" },
+  { id: "image:glow", kind: "image", label: "Background 2", imageUrl: "" },
+];
+
 interface RenderOptions {
   requestDeviceNames: () => void;
 }
@@ -305,30 +314,88 @@ describe("MediaMuteAndSwitchButton", () => {
     expect(mic2ItemAfter.querySelector(".rotate")).toBeNull();
   });
 
-  test("renders menu with toggle control and calls toggle callback", async () => {
+  test("background effects are one keyboard-operable labelled choice", async () => {
     const user = userEvent.setup();
-    const onSelect = vi.fn();
-    const onVideoBlurToggle = vi.fn();
+    const onSelectBackgroundEffect = vi.fn();
     const { getByRole } = renderComponent(
       <MediaMuteAndSwitchButton
         iconsAndLabels="video"
         enabled={true}
-        videoBlurToggleClick={onVideoBlurToggle}
-        onSelect={onSelect}
+        options={[{ label: { type: "name", name: "Camera 1" }, id: "cam1" }]}
+        selectedOption="cam1"
+        onSelect={vi.fn()}
+        backgroundEffects={effects}
+        selectedBackgroundEffect="none"
+        onSelectBackgroundEffect={onSelectBackgroundEffect}
       />,
     );
 
     await user.click(getByRole("button", { name: "Camera" }));
-
-    const toggle = screen.getByRole("menuitemcheckbox", {
-      name: "Blur background",
+    const section = screen.getByRole("group", { name: "Background effects" });
+    within(section).getByRole("menuitemradio", { name: "None", checked: true });
+    within(section).getByRole("menuitemradio", {
+      name: "Background 1",
+      checked: false,
     });
-    expect(toggle).toBeInTheDocument();
-    expect(toggle).toHaveAttribute("aria-checked", "false");
 
-    await user.click(toggle);
+    const blur = within(section).getByRole("menuitemradio", { name: "Blur" });
+    for (let i = 0; i < 6 && document.activeElement !== blur; i++)
+      await user.keyboard("{ArrowDown}");
+    expect(document.activeElement).toBe(blur);
+    await user.keyboard("{Enter}");
+    expect(onSelectBackgroundEffect).toHaveBeenCalledWith("blur");
+    expect(screen.getByRole("menu")).toBeInTheDocument();
+  });
 
-    expect(onVideoBlurToggle).toHaveBeenCalled();
+  test("does not choose the effect already in force again", async () => {
+    const user = userEvent.setup();
+    const onSelectBackgroundEffect = vi.fn();
+    const { getByRole } = renderComponent(
+      <MediaMuteAndSwitchButton
+        iconsAndLabels="video"
+        enabled={true}
+        options={[{ label: { type: "name", name: "Camera 1" }, id: "cam1" }]}
+        selectedOption="cam1"
+        backgroundEffects={effects}
+        selectedBackgroundEffect="blur"
+        onSelectBackgroundEffect={onSelectBackgroundEffect}
+      />,
+    );
+
+    await user.click(getByRole("button", { name: "Camera" }));
+    await user.click(screen.getByRole("menuitemradio", { name: "Blur" }));
+    expect(onSelectBackgroundEffect).not.toHaveBeenCalled();
+  });
+
+  test("offers the background effects in a phone's drawer", async () => {
+    const userAgent = vi
+      .spyOn(navigator, "userAgent", "get")
+      .mockReturnValue("Mozilla/5.0 (Linux; Android 14)");
+    try {
+      const user = userEvent.setup();
+      const onSelectBackgroundEffect = vi.fn();
+      const { getByRole } = renderComponent(
+        <MediaMuteAndSwitchButton
+          iconsAndLabels="video"
+          enabled={true}
+          options={[{ label: { type: "name", name: "Camera 1" }, id: "cam1" }]}
+          selectedOption="cam1"
+          backgroundEffects={effects}
+          selectedBackgroundEffect="none"
+          onSelectBackgroundEffect={onSelectBackgroundEffect}
+        />,
+      );
+
+      await user.click(getByRole("button", { name: "Camera" }));
+      const section = screen.getByRole("group", { name: "Background effects" });
+      // A click alone: the drawer's drag handling reads layout jsdom lacks.
+      fireEvent.click(
+        within(section).getByRole("menuitemradio", { name: "Background 2" }),
+      );
+      expect(onSelectBackgroundEffect).toHaveBeenCalledWith("image:glow");
+    } finally {
+      userAgent.mockRestore();
+    }
   });
 
   test("marks the selected menu item as checked", async () => {
@@ -552,7 +619,9 @@ describe("MediaMuteAndSwitchButton", () => {
         ]}
         selectedOption="cam1"
         onSelect={vi.fn()}
-        videoBlurToggleClick={vi.fn()}
+        backgroundEffects={effects}
+        selectedBackgroundEffect="none"
+        onSelectBackgroundEffect={vi.fn()}
       />,
     );
 
@@ -560,9 +629,10 @@ describe("MediaMuteAndSwitchButton", () => {
 
     screen.getByRole("menuitemradio", { name: "Camera 1", checked: true });
     screen.getByRole("menuitemradio", { name: "Camera 2", checked: false });
-    expect(
-      screen.getByRole("menuitemcheckbox", { name: "Blur background" }),
-    ).toBeInTheDocument();
+    within(screen.getByRole("group", { name: "Background effects" })).getByRole(
+      "menuitemradio",
+      { name: "Blur" },
+    );
   });
 
   test("marks focus as keyboard-driven only when the keyboard moved it", async () => {

src/components/MediaMuteAndSwitchButton.tsx

@@ -7,6 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import {
   useCallback,
+  useId,
   useState,
   type CSSProperties,
   type FC,
@@ -17,13 +18,14 @@ import {
   Button,
   Menu,
   MenuItem,
+  MenuScrollArea,
   MenuTitle,
   RadioInput,
-  ToggleMenuItem,
 } from "@vector-im/compound-web";
 import {
   ChevronUpIcon,
   ChevronDownIcon,
+  InfoIcon,
   SpinnerIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import classNames from "classnames";
@@ -40,6 +42,10 @@ import { useMediaDevices } from "../MediaDevicesContext";
 import { useRootElement } from "../RootElementContext";
 import { observeElementSize$ } from "../utils/elementSize";
 import { LiveMicrophoneLevelMeter } from "./MicrophoneLevelMeter";
+import {
+  BackgroundEffectGrid,
+  type BackgroundEffectOption,
+} from "./BackgroundEffectGrid";
 
 export interface MenuOptions {
   label: DeviceLabel | AudioOutputDeviceLabel;
@@ -64,8 +70,13 @@ export interface MediaMuteAndSwitchButtonProps {
   selectedOutputOption?: string;
   /** Picks an output device. Undefined disables the speaker section. */
   onSelectOutput?: (id: string) => void;
-  videoBlurToggleClick?: () => void;
-  videoBlurEnabled?: boolean;
+  /** Camera menu only. None or an empty list leaves the section out. */
+  backgroundEffects?: BackgroundEffectOption[];
+  selectedBackgroundEffect?: string;
+  /** Undefined where effects can't run: all but no effect are disabled. */
+  onSelectBackgroundEffect?: (id: string) => void;
+  /** What the user should know before choosing an effect, if anything. */
+  backgroundEffectNotice?: string;
   /**
    * For any toggle and option this method will be called.
    * So toggles need to be implemented by listening here and setting the right toggle item to `enabled`
@@ -73,8 +84,6 @@ export interface MediaMuteAndSwitchButtonProps {
   onSelect?: (id: string) => void;
 }
 
-const BLUR_ID = "blur";
-
 /** Id of the placeholder "Default" row, shown when the platform lists no outputs. */
 const DEFAULT_OUTPUT_ID = "default";
 
@@ -84,6 +93,9 @@ const LIST_SHARE_OF_CALL = 0.6;
 /** Smallest device list height in px, so a short call still shows more than one device. */
 const MIN_LIST_HEIGHT = 160;
 
+/** Space kept between the menu and the call area's sides. */
+const MENU_MARGIN = 16;
+
 export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
   enabled,
   busy,
@@ -94,8 +106,10 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
   outputOptions,
   selectedOutputOption,
   onSelectOutput,
-  videoBlurEnabled,
-  videoBlurToggleClick,
+  backgroundEffects,
+  selectedBackgroundEffect,
+  onSelectBackgroundEffect,
+  backgroundEffectNotice,
   onSelect,
 }) => {
   // Requested but not yet selected. Keyed by kind too, since Chrome uses
@@ -113,6 +127,7 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
   const isBusy = busy ?? false;
   const { t } = useTranslation();
   const devices = useMediaDevices();
+  const noticeId = useId();
 
   /**
    * Records on the menu whether the keyboard or the pointer moved focus, for
@@ -185,16 +200,8 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
     />
   );
 
-  const toggles =
-    iconsAndLabels === "video" && videoBlurToggleClick !== undefined
-      ? [
-          {
-            label: t("action.blur_background"),
-            enabled: videoBlurEnabled ?? false,
-            id: BLUR_ID,
-          },
-        ]
-      : [];
+  const showEffects =
+    iconsAndLabels === "video" && (backgroundEffects?.length ?? 0) > 0;
 
   let optionsButtonLabel: string;
   let menuTitle: string;
@@ -326,6 +333,8 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
         open={menuOpen}
         onOpenChange={onOpenChange}
         side="top"
+        collisionBoundary={rootElement}
+        collisionPadding={MENU_MARGIN}
         trigger={
           <Button
             iconOnly
@@ -340,17 +349,21 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
           />
         }
       >
-        <div
+        <MenuScrollArea
           ref={trackFocusSource}
-          // Keeps the items the menu's own children for assistive tech.
-          role="none"
-          className={styles.deviceList}
+          className={classNames(styles.deviceList, {
+            [styles.deviceListWithMeter]: iconsAndLabels === "audio",
+          })}
           style={
             {
               "--device-list-max-height":
                 listMaxHeight === undefined ? undefined : `${listMaxHeight}px`,
-              "--device-list-scroll-padding-end":
-                meterHeight === undefined ? undefined : `${meterHeight}px`,
+              // A row reached by keyboard stays above the meter and the band its
+              // ground fills.
+              scrollPaddingBlockEnd:
+                meterHeight === undefined
+                  ? undefined
+                  : `calc(${meterHeight}px + var(--cpd-menu-padding-block-end, 0px))`,
               "--device-list-scroll-padding-start":
                 headingHeight === undefined ? undefined : `${headingHeight}px`,
             } as CSSProperties
@@ -398,19 +411,30 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
               )}
             </div>
           </div>
-        </div>
-        {toggles.length > 0 && <hr />}
-        {toggles.map((toggle) => (
-          <ToggleMenuItem
-            label={toggle.label}
-            onSelect={(e) => {
-              videoBlurToggleClick?.();
-              e.preventDefault();
-            }}
-            checked={toggle.enabled}
-            key={toggle.id}
-          />
-        ))}
+          {showEffects && (
+            <BackgroundEffectGrid
+              label={t("settings.background_effects_header")}
+              heading={
+                <div aria-hidden className={styles.sectionHeading}>
+                  <MenuTitle title={t("settings.background_effects_header")} />
+                </div>
+              }
+              effects={backgroundEffects ?? []}
+              selected={selectedBackgroundEffect}
+              onSelect={onSelectBackgroundEffect}
+              describedBy={
+                backgroundEffectNotice === undefined ? undefined : noticeId
+              }
+            />
+          )}
+          {/* In the list, so the menu grows no taller for it. */}
+          {showEffects && backgroundEffectNotice !== undefined && (
+            <div id={noticeId} role="none" className={styles.notice}>
+              <InfoIcon width={20} height={20} />
+              <span>{backgroundEffectNotice}</span>
+            </div>
+          )}
+        </MenuScrollArea>
       </Menu>
     </div>
   );

src/components/MicrophoneLevelMeter.module.css

@@ -16,10 +16,10 @@ Please see LICENSE in the repository root for full details.
   align-items: center;
   gap: var(--cpd-space-3x);
   padding-block: var(--cpd-space-2x);
-  /* Centres the icon on the radio column: less the row's inset border and half
-     the icon's extra width. Checked in the MeterAlignsWithTheDeviceRows story. */
+  /* Centres the icon on the radio column: less half the icon's extra width.
+     Checked in the MeterAlignsWithTheDeviceRows story. */
   padding-inline-start: calc(
-    var(--cpd-space-4x) - var(--cpd-border-width-1) -
+    var(--cpd-space-4x) -
       (var(--meter-icon-size) - var(--device-control-size)) / 2
   );
   padding-inline-end: calc(var(--cpd-space-4x) * 2 + var(--cpd-space-2x));

src/components/__snapshots__/MediaMuteAndSwitchButton.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`MediaMuteAndSwitchButton > renders 1`] = `
       aria-busy="false"
       aria-checked="false"
       aria-disabled="true"
-      aria-labelledby="_r_0_"
+      aria-labelledby="_r_1_"
       class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
       data-kind="primary"
       data-size="lg"
@@ -39,7 +39,7 @@ exports[`MediaMuteAndSwitchButton > renders 1`] = `
       data-kind="tertiary"
       data-size="lg"
       data-state="closed"
-      id="radix-_r_5_"
+      id="radix-_r_6_"
       role="button"
       tabindex="0"
       type="button"

src/config/ConfigOptions.ts

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

src/grid/CallLayout.test.tsx

@@ -5,25 +5,28 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { render } from "@testing-library/react";
-import { expect, test, vi } from "vitest";
+import { act, render, screen } from "@testing-library/react";
+import { BehaviorSubject } from "rxjs";
+import { describe, expect, it, vi } from "vitest";
 
-import { type CallLayout } from "./CallLayout";
+import { arrangeTiles, type Bounds } from "./CallLayout";
 import { makeGridLayout } from "./GridLayout";
 import { makeSpotlightLandscapeLayout } from "./SpotlightLandscapeLayout";
 import { makeSpotlightPortraitLayout } from "./SpotlightPortraitLayout";
-import { type LayoutProps } from "./Grid";
+import { type DragCallback, type LayoutProps } from "./Grid";
 import { constant } from "../state/Behavior";
-import { type Alignment } from "../state/layout-types";
+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";
-import { makeOneOnOneMobileLayout } from "./OneOnOneMobileLayout";
-import { makeSpotlightExpandedLayout } from "./SpotlightExpandedLayout";
-import { makeOneOnOneDesktopLayout } from "./OneOnOneDesktopLayout";
 
 // Grid supplies these hooks to the layouts it renders; on their own the
 // layouts have no grid to report to
@@ -33,105 +36,152 @@ vi.mock("./Grid", async (importOriginal) => ({
   useVisibleTiles: (): void => {},
 }));
 
-const minBounds$ = constant({ width: 800, height: 800 });
+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`,
+    );
 
-const spotlight = {
-  vm: new SpotlightTileViewModel(
-    constant([]),
-    constant(false),
-    constant("solid"),
-  ),
-  alignment$: constant<Alignment>({ inline: "end", block: "end" }),
-  onDrag: () => {},
-};
-const grid = Array.from(
-  { length: 3 },
-  () => new GridTileViewModel(constant({} as UserMediaViewModel)),
+    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 pip = {
-  alignment$: constant<Alignment>({ inline: "end", block: "end" }),
-  onDrag: () => {},
-  vm: { id: "pip" } as GridTileViewModel,
-  size$: constant("sm" as const),
-};
+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,
-  children,
   ...props
-}) => (
-  <div data-testid={`slot-${id}`} {...props}>
-    {children}
-  </div>
-);
-
-function snapshotLayout<Model>(layout: CallLayout<Model>, model: Model): void {
-  const {
-    foreground,
-    scrolling: Scrolling,
-    fixed: Fixed,
-  } = layout({ minBounds$ });
-  const scrollingLayer = <Scrolling model={model} Slot={Slot} />;
-  const fixedLayer = <Fixed model={model} Slot={Slot} />;
-  const { container } = render(
-    foreground === "fixed" ? (
-      <>
-        {scrollingLayer}
-        {fixedLayer}
-      </>
-    ) : (
-      <>
-        {fixedLayer}
-        {scrollingLayer}
-      </>
-    ),
+}) => {
+  drags.set(id, onDrag);
+  return (
+    <div data-testid={`slot-${id}`} {...props}>
+      {model instanceof GridTileViewModel ? model.id : "spotlight"}
+    </div>
   );
-  expect(container).toMatchSnapshot();
+};
+
+function slotIds(): string[] {
+  return screen
+    .getAllByTestId(/^slot-/)
+    .map((slot) => slot.textContent ?? "")
+    .filter((id) => id !== "spotlight");
 }
-
-test("grid layout", () =>
-  snapshotLayout(makeGridLayout, {
-    type: "grid",
-    spotlight,
-    grid,
-    setVisibleTiles: () => {},
-  }));
-
-test("spotlight landscape layout", () =>
-  snapshotLayout(makeSpotlightLandscapeLayout, {
-    type: "spotlight-landscape",
-    spotlight,
-    grid,
-    setVisibleTiles: () => {},
-  }));
-
-test("spotlight portrait layout", () =>
-  snapshotLayout(makeSpotlightPortraitLayout, {
-    type: "spotlight-portrait",
-    spotlight,
-    grid,
-    setVisibleTiles: () => {},
-  }));
-
-test("spotlight expanded layout", () =>
-  snapshotLayout(makeSpotlightExpandedLayout, {
-    type: "spotlight-expanded",
-    spotlight: spotlight.vm,
-    pip,
-  }));
-
-test("one-on-one desktop layout", () =>
-  snapshotLayout(makeOneOnOneDesktopLayout, {
-    type: "one-on-one-desktop",
-    spotlight: { id: "spotlight" } as GridTileViewModel,
-    pip,
-  }));
-
-test("one-on-one mobile layout", () =>
-  snapshotLayout(makeOneOnOneMobileLayout, {
-    type: "one-on-one-mobile",
-    spotlight: spotlight.vm,
-    pip,
-  }));

src/grid/Grid.tsx

@@ -40,7 +40,6 @@ import { useMergedRefs } from "../useMergedRefs";
 import { TileWrapper } from "./TileWrapper";
 import { usePrefersReducedMotion } from "../usePrefersReducedMotion";
 import { useInitial } from "../useInitial";
-import { type DragCallback } from "../state/layout-types";
 
 const MAX_ANIMATED_TILES = 50; // Capped for performance reasons
 
@@ -84,10 +83,7 @@ interface DragState {
   cursorY: number;
 }
 
-export interface SlotProps<Model> extends Omit<
-  ComponentProps<"div">,
-  "onDrag"
-> {
+interface SlotProps<Model> extends Omit<ComponentProps<"div">, "onDrag"> {
   id: string;
   model: Model;
   onDrag?: DragCallback;
@@ -185,6 +181,27 @@ export interface TileProps<Model, R extends HTMLElement> {
   model: Model;
 }
 
+interface Drag {
+  /**
+   * The X coordinate of the dragged tile in grid space.
+   */
+  x: number;
+  /**
+   * The Y coordinate of the dragged tile in grid space.
+   */
+  y: number;
+  /**
+   * The X coordinate of the dragged tile, as a scalar of the grid width.
+   */
+  xRatio: number;
+  /**
+   * The Y coordinate of the dragged tile, as a scalar of the grid height.
+   */
+  yRatio: number;
+}
+
+export type DragCallback = (drag: Drag) => void;
+
 interface LayoutMemoProps<
   LayoutModel,
   TileModel,
@@ -447,13 +464,13 @@ export function Grid<
       )
       .catch(logger.error);
 
-    callback({
-      x: tileX,
-      y: tileY,
-      xRatio: tileX / (gridBounds.width - tile.width),
-      yRatio: tileY / (gridBounds.height - tile.height),
-      endOfGesture,
-    });
+    if (endOfGesture)
+      callback({
+        x: tileX,
+        y: tileY,
+        xRatio: tileX / (gridBounds.width - tile.width),
+        yRatio: tileY / (gridBounds.height - tile.height),
+      });
   };
 
   // Callback for useDrag. We could call useDrag here, but the default

src/grid/GridLayout.tsx

@@ -8,21 +8,15 @@ Please see LICENSE in the repository root for full details.
 import {
   type CSSProperties,
   type ReactNode,
+  useCallback,
   useMemo,
-  type FC,
-  type ComponentType,
 } from "react";
 
 import { type GridLayout as GridLayoutModel } from "../state/layout-types.ts";
 import styles from "./GridLayout.module.css";
 import { type CallLayout, arrangeTiles } from "./CallLayout";
-import { type SlotProps, useUpdateLayout, useVisibleTiles } from "./Grid";
+import { type DragCallback, useUpdateLayout, useVisibleTiles } from "./Grid";
 import { useBehavior } from "../useBehavior";
-import {
-  type SpotlightTileViewModel,
-  type TileViewModel,
-} from "../state/TileViewModel.ts";
-import { type FloatingTile } from "../state/FloatingTile.ts";
 
 interface GridCSSProperties extends CSSProperties {
   "--gap": string;
@@ -30,27 +24,6 @@ interface GridCSSProperties extends CSSProperties {
   "--height": string;
 }
 
-interface SpotlightSlotProps {
-  model: FloatingTile & { vm: SpotlightTileViewModel };
-  Slot: ComponentType<SlotProps<TileViewModel>>;
-}
-
-const SpotlightSlot: FC<SpotlightSlotProps> = ({ model, Slot }) => {
-  useUpdateLayout();
-  const alignment = useBehavior(model.alignment$);
-
-  return (
-    <Slot
-      className={styles.slot}
-      id="spotlight"
-      model={model.vm}
-      onDrag={model.onDrag}
-      data-block-alignment={alignment.block}
-      data-inline-alignment={alignment.inline}
-    />
-  );
-};
-
 /**
  * An implementation of the "grid" layout, in which all participants are shown
  * together in a scrolling grid.
@@ -64,10 +37,32 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
   // lives
   fixed: function GridLayoutFixed({ ref, model, Slot }): ReactNode {
     useUpdateLayout();
+    const alignment = useBehavior(model.spotlightAlignment$);
+
+    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 });
+      },
+      [model.spotlightAlignment$],
+    );
+
     return (
       <div ref={ref} className={styles.fixed}>
         {model.spotlight && (
-          <SpotlightSlot model={model.spotlight} Slot={Slot} />
+          <Slot
+            className={styles.slot}
+            id="spotlight"
+            model={model.spotlight}
+            onDrag={onDragSpotlight}
+            data-block-alignment={alignment.block}
+            data-inline-alignment={alignment.inline}
+          />
         )}
       </div>
     );

src/grid/OneOnOneDesktopLayout.tsx

@@ -6,13 +6,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ReactNode, useMemo } from "react";
+import { type ReactNode, useCallback, useMemo } from "react";
 import classNames from "classnames";
 
 import { type OneOnOneDesktopLayout as OneOnOneDesktopLayoutModel } from "../state/layout-types.ts";
 import { type CallLayout, arrangeTiles } from "./CallLayout";
 import styles from "./OneOnOneDesktopLayout.module.css";
-import { useUpdateLayout } from "./Grid";
+import { type DragCallback, useUpdateLayout } from "./Grid";
 import { useBehavior } from "../useBehavior";
 
 /**
@@ -37,12 +37,21 @@ export const makeOneOnOneDesktopLayout: CallLayout<
   }): ReactNode {
     useUpdateLayout();
     const { width, height } = useBehavior(minBounds$);
-    const pipAlignment = useBehavior(model.pip.alignment$);
+    const pipAlignment = useBehavior(model.pipAlignment$);
     const { tileWidth, tileHeight } = useMemo(
       () => arrangeTiles(width, height, 1),
       [width, height],
     );
 
+    const onDragLocalTile: DragCallback = useCallback(
+      ({ xRatio, yRatio }) =>
+        model.pipAlignment$.next({
+          block: yRatio < 0.5 ? "start" : "end",
+          inline: xRatio < 0.5 ? "start" : "end",
+        }),
+      [model.pipAlignment$],
+    );
+
     return (
       <div ref={ref} className={styles.layer}>
         <Slot
@@ -53,9 +62,9 @@ export const makeOneOnOneDesktopLayout: CallLayout<
         >
           <Slot
             className={classNames(styles.slot, styles.local)}
-            id={model.pip.vm.id}
-            model={model.pip.vm}
-            onDrag={model.pip.onDrag}
+            id={model.pip.id}
+            model={model.pip}
+            onDrag={onDragLocalTile}
             data-block-alignment={pipAlignment.block}
             data-inline-alignment={pipAlignment.inline}
           />

src/grid/OneOnOneMobileLayout.tsx

@@ -6,43 +6,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ComponentType, type FC, type ReactNode } from "react";
+import { type ReactNode, useCallback } from "react";
 import classNames from "classnames";
 
 import { type OneOnOneMobileLayout as OneOnOneMobileLayoutModel } from "../state/layout-types.ts";
 import { type CallLayout } from "./CallLayout";
 import styles from "./OneOnOneMobileLayout.module.css";
-import { type SlotProps, useUpdateLayout } from "./Grid";
+import { type DragCallback, useUpdateLayout } from "./Grid";
 import { useBehavior } from "../useBehavior";
-import { type FloatingTile } from "../state/FloatingTile.ts";
-import {
-  type GridTileViewModel,
-  type TileViewModel,
-} from "../state/TileViewModel.ts";
-import { type Behavior } from "../state/Behavior.ts";
-
-interface PipSlotProps {
-  model: FloatingTile & { vm: GridTileViewModel; size$: Behavior<"sm" | "lg"> };
-  Slot: ComponentType<SlotProps<TileViewModel>>;
-}
-
-const PipSlot: FC<PipSlotProps> = ({ model, Slot }) => {
-  useUpdateLayout();
-  const size = useBehavior(model.size$);
-  const alignment = useBehavior(model.alignment$);
-
-  return (
-    <Slot
-      className={classNames(styles.pip)}
-      id={model.vm.id}
-      model={model.vm}
-      onDrag={model.onDrag}
-      data-size={size}
-      data-block-alignment={alignment.block}
-      data-inline-alignment={alignment.inline}
-    />
-  );
-};
 
 /**
  * An implementation of the "one-on-one" layout for mobile platforms, in which
@@ -73,9 +44,30 @@ export const makeOneOnOneMobileLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
+    const pipSize = useBehavior(model.pipSize$);
+    const pipAlignment = useBehavior(model.pipAlignment$);
+    const onDragLocalTile: DragCallback = useCallback(
+      ({ xRatio, yRatio }) =>
+        model.pipAlignment$.next({
+          block: yRatio < 0.5 ? "start" : "end",
+          inline: xRatio < 0.5 ? "start" : "end",
+        }),
+      [model.pipAlignment$],
+    );
+
     return (
       <div ref={ref} className={styles.layer}>
-        {model.pip && <PipSlot model={model.pip} Slot={Slot} />}
+        {model.pip && (
+          <Slot
+            className={classNames(styles.pip)}
+            id={model.pip.id}
+            model={model.pip}
+            onDrag={onDragLocalTile}
+            data-size={pipSize}
+            data-block-alignment={pipAlignment.block}
+            data-inline-alignment={pipAlignment.inline}
+          />
+        )}
       </div>
     );
   },

src/grid/SpotlightExpandedLayout.tsx

@@ -5,39 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ReactNode, type ComponentType, type FC } from "react";
+import { type ReactNode, useCallback } from "react";
 
 import { type SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/layout-types.ts";
 import { type CallLayout } from "./CallLayout";
-import { type SlotProps, useUpdateLayout } from "./Grid";
+import { type DragCallback, useUpdateLayout } from "./Grid";
 import styles from "./SpotlightExpandedLayout.module.css";
 import { useBehavior } from "../useBehavior";
-import { type FloatingTile } from "../state/FloatingTile.ts";
-import {
-  type GridTileViewModel,
-  type TileViewModel,
-} from "../state/TileViewModel.ts";
-
-interface PipSlotProps {
-  model: FloatingTile & { vm: GridTileViewModel };
-  Slot: ComponentType<SlotProps<TileViewModel>>;
-}
-
-const PipSlot: FC<PipSlotProps> = ({ model, Slot }) => {
-  useUpdateLayout();
-  const alignment = useBehavior(model.alignment$);
-
-  return (
-    <Slot
-      className={styles.pip}
-      id={model.vm.id}
-      model={model.vm}
-      onDrag={model.onDrag}
-      data-block-alignment={alignment.block}
-      data-inline-alignment={alignment.inline}
-    />
-  );
-};
 
 /**
  * An implementation of the "expanded spotlight" layout, in which the spotlight
@@ -54,6 +28,7 @@ export const makeSpotlightExpandedLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
+
     return (
       <div ref={ref} className={styles.layer}>
         <Slot
@@ -71,9 +46,29 @@ export const makeSpotlightExpandedLayout: CallLayout<
     Slot,
   }): ReactNode {
     useUpdateLayout();
+    const pipAlignment = useBehavior(model.pipAlignment$);
+
+    const onDragPip: DragCallback = useCallback(
+      ({ xRatio, yRatio }) =>
+        model.pipAlignment$.next({
+          block: yRatio < 0.5 ? "start" : "end",
+          inline: xRatio < 0.5 ? "start" : "end",
+        }),
+      [model.pipAlignment$],
+    );
+
     return (
       <div ref={ref} className={styles.layer}>
-        {model.pip && <PipSlot model={model.pip} Slot={Slot} />}
+        {model.pip && (
+          <Slot
+            className={styles.pip}
+            id={model.pip.id}
+            model={model.pip}
+            onDrag={onDragPip}
+            data-block-alignment={pipAlignment.block}
+            data-inline-alignment={pipAlignment.inline}
+          />
+        )}
       </div>
     );
   },

src/grid/SpotlightLandscapeLayout.tsx

@@ -40,7 +40,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<
           <Slot
             className={styles.slot}
             id="spotlight"
-            model={model.spotlight.vm}
+            model={model.spotlight}
           />
         </div>
         <div className={styles.grid} />
@@ -59,7 +59,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<
 
     return (
       <div ref={ref} className={styles.layer}>
-        <SpotlightSlot media$={model.spotlight.vm.media$} />
+        <SpotlightSlot media$={model.spotlight.media$} />
         <div className={styles.grid}>
           {model.grid.map((m) => (
             <Slot key={m.id} className={styles.slot} id={m.id} model={m} />

src/grid/SpotlightPortraitLayout.tsx

@@ -43,7 +43,7 @@ export const makeSpotlightPortraitLayout: CallLayout<
           <Slot
             className={styles.slot}
             id="spotlight"
-            model={model.spotlight.vm}
+            model={model.spotlight}
           />
         </div>
       </div>
@@ -65,7 +65,7 @@ export const makeSpotlightPortraitLayout: CallLayout<
       width,
       model.grid.length,
     );
-    const withIndicators = useBehavior(model.spotlight.vm.media$).length > 1;
+    const withIndicators = useBehavior(model.spotlight.media$).length > 1;
 
     return (
       <div

src/grid/__snapshots__/CallLayout.test.tsx.snap

@@ -1,186 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`grid layout 1`] = `
-<div>
-  <div
-    class="_scrolling_e8555d"
-    style="width: 800px; --gap: 20px; --width: 370px; --height: 277px;"
-  >
-    <div
-      class="_slot_e8555d"
-      data-testid="slot-0"
-    />
-    <div
-      class="_slot_e8555d"
-      data-testid="slot-1"
-    />
-    <div
-      class="_slot_e8555d"
-      data-testid="slot-2"
-    />
-  </div>
-  <div
-    class="_fixed_e8555d"
-  >
-    <div
-      class="_slot_e8555d"
-      data-block-alignment="end"
-      data-inline-alignment="end"
-      data-testid="slot-spotlight"
-    />
-  </div>
-</div>
-`;
-
-exports[`one-on-one desktop layout 1`] = `
-<div>
-  <div
-    class="_layer_185815"
-  >
-    <div
-      class="_container_185815"
-      data-testid="slot-spotlight"
-      style="width: 760px; height: 570px;"
-    >
-      <div
-        class="_slot_185815 _local_185815"
-        data-block-alignment="end"
-        data-inline-alignment="end"
-        data-testid="slot-pip"
-      />
-    </div>
-  </div>
-  <div />
-</div>
-`;
-
-exports[`one-on-one mobile layout 1`] = `
-<div>
-  <div
-    class="_layer_c81c30"
-  >
-    <div
-      class="_spotlight_c81c30"
-      data-testid="slot-spotlight"
-    />
-  </div>
-  <div
-    class="_layer_c81c30"
-  >
-    <div
-      class="_pip_c81c30"
-      data-block-alignment="end"
-      data-inline-alignment="end"
-      data-size="sm"
-      data-testid="slot-pip"
-    />
-  </div>
-</div>
-`;
-
-exports[`spotlight expanded layout 1`] = `
-<div>
-  <div
-    class="_layer_e70191"
-  >
-    <div
-      class="_spotlight_e70191"
-      data-testid="slot-spotlight"
-    />
-  </div>
-  <div
-    class="_layer_e70191"
-  >
-    <div
-      class="_pip_e70191"
-      data-block-alignment="end"
-      data-inline-alignment="end"
-      data-testid="slot-pip"
-    />
-  </div>
-</div>
-`;
-
-exports[`spotlight landscape layout 1`] = `
-<div>
-  <div
-    class="_layer_29809c"
-  >
-    <div
-      class="_spotlight_29809c"
-    >
-      <div
-        class="_slot_29809c"
-        data-testid="slot-spotlight"
-      />
-    </div>
-    <div
-      class="_grid_29809c"
-    />
-  </div>
-  <div
-    class="_layer_29809c"
-  >
-    <div
-      class="_spotlight_29809c"
-    />
-    <div
-      class="_grid_29809c"
-    >
-      <div
-        class="_slot_29809c"
-        data-testid="slot-0"
-      />
-      <div
-        class="_slot_29809c"
-        data-testid="slot-1"
-      />
-      <div
-        class="_slot_29809c"
-        data-testid="slot-2"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`spotlight portrait layout 1`] = `
-<div>
-  <div
-    class="_layer_065bbc"
-    style="--grid-gap: 20px; --grid-tile-width: 370px; --grid-tile-height: 277px;"
-  >
-    <div
-      class="_spotlight_065bbc"
-    />
-    <div
-      class="_grid_065bbc"
-    >
-      <div
-        class="_slot_065bbc"
-        data-testid="slot-0"
-      />
-      <div
-        class="_slot_065bbc"
-        data-testid="slot-1"
-      />
-      <div
-        class="_slot_065bbc"
-        data-testid="slot-2"
-      />
-    </div>
-  </div>
-  <div
-    class="_layer_065bbc"
-  >
-    <div
-      class="_spotlight_065bbc"
-    >
-      <div
-        class="_slot_065bbc"
-        data-testid="slot-spotlight"
-      />
-    </div>
-  </div>
-</div>
-`;

src/index.css

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

src/livekit/BackgroundEffectTransformer.test.ts

@@ -0,0 +1,52 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  BackgroundTransformer,
+  VideoTransformer,
+  type VideoTransformerInitOptions,
+} from "@livekit/track-processors";
+import { ImageSegmenter } from "@mediapipe/tasks-vision";
+
+import { BackgroundEffectTransformer } from "./BackgroundEffectTransformer";
+
+describe("BackgroundEffectTransformer", () => {
+  afterEach(() => vi.restoreAllMocks());
+
+  it("loads a background chosen before it was built", async () => {
+    vi.spyOn(VideoTransformer.prototype, "init").mockResolvedValue();
+    vi.spyOn(ImageSegmenter, "createFromOptions").mockResolvedValue(
+      {} as ImageSegmenter,
+    );
+    const load = vi
+      .spyOn(BackgroundTransformer.prototype, "loadAndSetBackground")
+      .mockResolvedValue();
+    const transformer = new BackgroundEffectTransformer({
+      backgroundDisabled: true,
+    });
+    // Chosen before the camera is processed, as the first effect always is:
+    // loaded then, there is nothing yet to draw it with.
+    await transformer.update({ imagePath: "/background.jpg" });
+    load.mockClear();
+
+    await transformer.init({} as VideoTransformerInitOptions);
+    expect(load).toHaveBeenCalledWith("/background.jpg");
+  });
+
+  it("passes frames on untouched once disabled, even after blurring", async () => {
+    const transformer = new BackgroundEffectTransformer({});
+    await transformer.update({ blurRadius: 15, backgroundDisabled: false });
+    await transformer.update({
+      imagePath: undefined,
+      backgroundDisabled: true,
+    });
+    // With neither, the library passes a frame on without segmenting it.
+    expect(transformer.options.blurRadius).toBeUndefined();
+    expect(transformer.options.imagePath).toBeUndefined();
+  });
+});

src/livekit/BackgroundEffectTransformer.ts

@@ -1,5 +1,6 @@
 /*
 Copyright 2024-2025 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.
@@ -9,7 +10,9 @@ import {
   BackgroundTransformer,
   VideoTransformer,
   type VideoTransformerInitOptions,
+  type BackgroundOptions,
 } from "@livekit/track-processors";
+import { logger } from "matrix-js-sdk/lib/logger";
 import { ImageSegmenter } from "@mediapipe/tasks-vision";
 
 import modelAssetPath from "../mediapipe/imageSegmenter/selfie_segmenter.tflite?url";
@@ -49,7 +52,18 @@ const wasmFileset: WasmFileset = {
  * loads the segmentation models from our own bundle rather than as an external
  * resource fetched from the public internet.
  */
-export class BlurBackgroundTransformer extends BackgroundTransformer {
+export class BackgroundEffectTransformer extends BackgroundTransformer {
+  /**
+   * As the library's, except that disabling also drops the blur radius: kept,
+   * it has every frame segmented and the result thrown away, where with
+   * neither a radius nor a picture frames are passed on untouched.
+   */
+  public override async update(opts: BackgroundOptions): Promise<void> {
+    await super.update(
+      opts.backgroundDisabled ? { ...opts, blurRadius: undefined } : opts,
+    );
+  }
+
   public async init({
     outputCanvas,
     inputElement: inputVideo,
@@ -73,8 +87,15 @@ export class BlurBackgroundTransformer extends BackgroundTransformer {
       outputConfidenceMasks: false,
     });
 
+    // BackgroundTransformer's own init applies these, and this one replaces it.
+    if (this.options.imagePath) {
+      await this.loadAndSetBackground(this.options.imagePath).catch((e) =>
+        logger.warn("Failed to load the background image", e),
+      );
+    }
     if (this.options.blurRadius) {
       this.gl?.setBlurRadius(this.options.blurRadius);
     }
+    this.gl?.setBackgroundDisabled(this.options.backgroundDisabled ?? false);
   }
 }

src/livekit/BackgroundEffectsContext.test.ts

@@ -0,0 +1,242 @@
+/*
+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, createElement, type FC } from "react";
+import { render } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { type LocalVideoTrack } from "livekit-client";
+import {
+  type BackgroundOptions,
+  type ProcessorWrapper,
+} from "@livekit/track-processors";
+
+import {
+  applyProcessor,
+  BackgroundEffectsProvider,
+  type BackgroundEffectsState,
+  syncBackgroundEffects,
+  useBackgroundEffects,
+  useSyncBackgroundEffects,
+  createAppBackgroundEffects,
+} from "./BackgroundEffectsContext";
+import { type BackgroundEffects } from "../state/BackgroundEffects";
+import { backgroundEffect } from "../settings/settings";
+import { constant } from "../state/Behavior";
+import { flushPromises, testScope } from "../utils/test";
+
+const pipelines = vi.hoisted(() => ({
+  built: 0,
+  destroyed: 0,
+  switches: [] as unknown[],
+}));
+
+// The pipeline itself needs WebGL and MediaPipe; what these tests are about is
+// what the provider asks of it.
+vi.mock("@livekit/track-processors", () => ({
+  BackgroundProcessorWrapper: vi.fn(function (this: Record<string, unknown>) {
+    pipelines.built += 1;
+    this.switchTo = vi.fn(async (options: unknown) => {
+      pipelines.switches.push(options);
+      return Promise.resolve();
+    });
+    this.destroy = vi.fn(async () => {
+      pipelines.destroyed += 1;
+      return Promise.resolve();
+    });
+  }),
+  supportsBackgroundProcessors: (): boolean => true,
+}));
+const platformMock = vi.hoisted(() => ({ platform: "desktop" }));
+vi.mock("../Platform", () => platformMock);
+vi.mock("./BackgroundEffectTransformer", () => ({
+  BackgroundEffectTransformer: vi.fn(),
+}));
+
+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("syncBackgroundEffects", () => {
+  it("applies the processor to the current track", () => {
+    const track = mockTrack("live");
+    syncBackgroundEffects(
+      testScope(),
+      constant(track),
+      constant({ supported: true, processor }),
+    );
+    expect(track.setProcessor).toHaveBeenCalledWith(processor);
+  });
+});
+
+describe("BackgroundEffectsProvider", () => {
+  /** A camera track that holds whatever processor it is given. */
+  function cameraTrack(): LocalVideoTrack {
+    let current: unknown;
+    return {
+      mediaStreamTrack: { readyState: "live" },
+      getProcessor: vi.fn(() => current),
+      setProcessor: vi.fn(async (next: unknown) => {
+        current = next;
+        return Promise.resolve();
+      }),
+      stopProcessor: vi.fn(async () => {
+        current = undefined;
+        return Promise.resolve();
+      }),
+    } as unknown as LocalVideoTrack;
+  }
+
+  let seen: BackgroundEffectsState[];
+  const Surface: FC<{ track: LocalVideoTrack | null }> = ({ track }) => {
+    seen.push(useBackgroundEffects());
+    useSyncBackgroundEffects(track);
+    return null;
+  };
+  // One component for every render, so a rerender updates the tree rather than
+  // mounting a second provider with a pipeline of its own.
+  let effects: BackgroundEffects | undefined;
+  const Surfaces: FC<{ tracks: (LocalVideoTrack | null)[] }> = ({ tracks }) =>
+    createElement(BackgroundEffectsProvider, {
+      // Made on first render, once a test has set up the platform.
+      effects: (effects ??= createAppBackgroundEffects(testScope())),
+      children: createElement(
+        "div",
+        null,
+        ...tracks.map((track, key) => createElement(Surface, { key, track })),
+      ),
+    });
+  const surfaces = (
+    ...tracks: (LocalVideoTrack | null)[]
+  ): ReturnType<typeof createElement> => createElement(Surfaces, { tracks });
+  const blur = async (on: boolean): Promise<void> => {
+    await act(async () => {
+      backgroundEffect.setValue(on ? "blur" : "none");
+      await flushPromises();
+    });
+  };
+  const latest = (): BackgroundEffectsState => seen[seen.length - 1];
+
+  beforeEach(() => {
+    seen = [];
+    effects = undefined;
+    pipelines.built = 0;
+    pipelines.destroyed = 0;
+    pipelines.switches = [];
+    platformMock.platform = "desktop";
+    backgroundEffect.setValue("none");
+  });
+  afterEach(() => backgroundEffect.setValue("none"));
+
+  // A pipeline primes itself when it is built and when it is destroyed, and a
+  // primed pipeline lets one frame through untouched: so the frame is spent
+  // once, as long as it is built once and never taken off the camera.
+  it("spends one priming frame on first use and none afterwards", async () => {
+    const track = cameraTrack();
+    render(surfaces(track));
+    for (const on of [true, false, true, false, true]) await blur(on);
+
+    expect(pipelines.built).toBe(1);
+    expect(pipelines.destroyed).toBe(0);
+    expect(track.setProcessor).toHaveBeenCalledTimes(1);
+    expect(track.stopProcessor).not.toHaveBeenCalled();
+  });
+
+  it("does not run on a phone, even where its browser could", async () => {
+    platformMock.platform = "ios";
+    const track = cameraTrack();
+    render(surfaces(track));
+    await blur(true);
+
+    expect(latest().supported).toBe(false);
+    expect(track.setProcessor).not.toHaveBeenCalled();
+  });
+
+  it("preview and call share one pipeline", async () => {
+    const preview = cameraTrack();
+    const call = cameraTrack();
+    render(surfaces(preview, call));
+    await blur(true);
+
+    const pipeline = latest().processor;
+    expect(preview.setProcessor).toHaveBeenCalledWith(pipeline);
+    expect(call.setProcessor).toHaveBeenCalledWith(pipeline);
+    expect(pipelines.built).toBe(1);
+  });
+
+  it("applies an effect chosen while the camera is off", async () => {
+    const view = render(surfaces(null));
+    await blur(true);
+    // Already switched to blur, with nothing yet to attach it to.
+    expect(pipelines.switches).toEqual([
+      { mode: "background-blur", blurRadius: 15 },
+    ]);
+
+    const track = cameraTrack();
+    await act(async () => {
+      view.rerender(surfaces(track));
+      await flushPromises();
+    });
+    expect(track.setProcessor).toHaveBeenCalledTimes(1);
+    expect(track.setProcessor).toHaveBeenCalledWith(latest().processor);
+    expect(pipelines.built).toBe(1);
+    expect(pipelines.switches).toHaveLength(1);
+  });
+});

src/livekit/BackgroundEffectsContext.tsx

@@ -0,0 +1,137 @@
+/*
+Copyright 2024-2025 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.
+*/
+
+import {
+  type ProcessorWrapper,
+  type BackgroundOptions,
+} from "@livekit/track-processors";
+import { createContext, type FC, type JSX, use, useEffect } from "react";
+import { type LocalVideoTrack } from "livekit-client";
+import { logger } from "matrix-js-sdk/lib/logger";
+import { combineLatest } from "rxjs";
+
+import { backgroundEffect as backgroundEffectSetting } from "../settings/settings";
+import { BackgroundEffectTransformer } from "./BackgroundEffectTransformer";
+import { OneStepPipeline } from "./OneStepPipeline";
+import { supportsBackgroundProcessors } from "./backgroundProcessing";
+import { type Behavior } from "../state/Behavior";
+import { type ObservableScope } from "../state/ObservableScope";
+import {
+  type BackgroundEffects,
+  createBackgroundEffects,
+} from "../state/BackgroundEffects";
+import { useBehavior } from "../useBehavior";
+
+//TODO-MULTI-SFU: This is not yet fully there.
+// it is a combination of exposing observable and react hooks.
+// preferably we should not make this a context anymore and instead just a vm?
+
+export type BackgroundEffectsState = {
+  supported: boolean | undefined;
+  processor: undefined | ProcessorWrapper<BackgroundOptions>;
+};
+
+const BackgroundEffectsContext = createContext<BackgroundEffects | undefined>(
+  undefined,
+);
+
+export function useBackgroundEffects(): BackgroundEffectsState {
+  return useBehavior(useBackgroundEffectsState$());
+}
+
+export function useBackgroundEffectsState$(): Behavior<BackgroundEffectsState> {
+  const effects = use(BackgroundEffectsContext);
+  if (effects === undefined)
+    throw new Error(
+      "useBackgroundEffects must be used within a BackgroundEffectsProvider",
+    );
+  return effects.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;
+    }
+    const track = videoTrack.mediaStreamTrack;
+    videoTrack.setProcessor(processor).catch((e) => {
+      if (track.readyState === "ended")
+        logger.debug("Video processor not attached: the track ended first");
+      else logger.warn("Failed to attach video processor", e);
+    });
+  }
+  if (!processor && videoTrack.getProcessor()) {
+    videoTrack.stopProcessor().catch((e) => {
+      logger.warn("Failed to stop video processor", e);
+    });
+  }
+}
+
+/**
+ * Updates your video tracks to always use the given processor.
+ */
+export const syncBackgroundEffects = (
+  scope: ObservableScope,
+  videoTrack$: Behavior<LocalVideoTrack | null>,
+  backgroundEffectsState$: Behavior<BackgroundEffectsState>,
+): void => {
+  combineLatest([videoTrack$, backgroundEffectsState$])
+    .pipe(scope.bind())
+    .subscribe(([videoTrack, backgroundEffectsState]) => {
+      if (!backgroundEffectsState) return;
+      if (!videoTrack) return;
+      applyProcessor(videoTrack, backgroundEffectsState.processor);
+    });
+};
+
+export const useSyncBackgroundEffects = (
+  videoTrack: LocalVideoTrack | null,
+): void => {
+  const { processor } = useBackgroundEffects();
+  useEffect(() => {
+    if (!videoTrack) return;
+    applyProcessor(videoTrack, processor);
+  }, [processor, videoTrack]);
+};
+
+/** The app's one pipeline, shared by every camera track it opens. */
+export function createAppBackgroundEffects(
+  scope: ObservableScope,
+): BackgroundEffects {
+  return createBackgroundEffects(scope, {
+    supported: supportsBackgroundProcessors(),
+    effect$: backgroundEffectSetting.value$,
+    pipeline: new OneStepPipeline(
+      new BackgroundEffectTransformer({ backgroundDisabled: true }),
+      "background-effect",
+    ),
+  });
+}
+
+interface Props {
+  effects: BackgroundEffects;
+  children: JSX.Element;
+}
+
+export const BackgroundEffectsProvider: FC<Props> = ({ effects, children }) => (
+  <BackgroundEffectsContext value={effects}>
+    {children}
+  </BackgroundEffectsContext>
+);

src/livekit/OneStepPipeline.test.ts

@@ -0,0 +1,80 @@
+/*
+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, it, vi } from "vitest";
+import { ProcessorWrapper } from "@livekit/track-processors";
+
+import { OneStepPipeline } from "./OneStepPipeline";
+import { BackgroundEffectTransformer } from "./BackgroundEffectTransformer";
+import { flushPromises } from "../utils/test";
+
+const opts = {} as Parameters<OneStepPipeline["init"]>[0];
+
+describe("OneStepPipeline", () => {
+  afterEach(() => vi.restoreAllMocks());
+
+  it("stops and builds again only once a build has finished", async () => {
+    let finishBuild!: () => void;
+    const init = vi
+      .spyOn(ProcessorWrapper.prototype, "init")
+      .mockImplementationOnce(
+        async () => new Promise((resolve) => (finishBuild = resolve)),
+      )
+      .mockResolvedValue();
+    const destroy = vi
+      .spyOn(ProcessorWrapper.prototype, "destroy")
+      .mockResolvedValue();
+    const pipeline = new OneStepPipeline(
+      new BackgroundEffectTransformer({}),
+      "test",
+    );
+
+    const first = pipeline.init(opts);
+    const stopped = pipeline.destroy();
+    const second = pipeline.init(opts);
+    await flushPromises();
+    expect(init).toHaveBeenCalledTimes(1);
+    expect(destroy).not.toHaveBeenCalled();
+
+    finishBuild();
+    await Promise.all([first, stopped, second]);
+    expect(init).toHaveBeenCalledTimes(2);
+    expect(destroy.mock.invocationCallOrder[0]).toBeLessThan(
+      init.mock.invocationCallOrder[1],
+    );
+  });
+
+  it("restarts in one step, without waiting on itself", async () => {
+    const init = vi
+      .spyOn(ProcessorWrapper.prototype, "init")
+      .mockResolvedValue();
+    const destroy = vi
+      .spyOn(ProcessorWrapper.prototype, "destroy")
+      .mockResolvedValue();
+    const pipeline = new OneStepPipeline(
+      new BackgroundEffectTransformer({}),
+      "test",
+    );
+
+    await pipeline.restart(opts);
+    expect(destroy).toHaveBeenCalledWith({ willProcessorRestart: true });
+    expect(init).toHaveBeenCalledOnce();
+  });
+
+  it("carries on after a step that failed", async () => {
+    vi.spyOn(ProcessorWrapper.prototype, "init")
+      .mockRejectedValueOnce(new Error("no GPU"))
+      .mockResolvedValue();
+    const pipeline = new OneStepPipeline(
+      new BackgroundEffectTransformer({}),
+      "test",
+    );
+
+    await expect(pipeline.init(opts)).rejects.toThrow("no GPU");
+    await expect(pipeline.init(opts)).resolves.toBeUndefined();
+  });
+});

src/livekit/OneStepPipeline.ts

@@ -0,0 +1,43 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { BackgroundProcessorWrapper } from "@livekit/track-processors";
+
+type InitOptions = Parameters<BackgroundProcessorWrapper["init"]>[0];
+type DestroyOptions = Parameters<BackgroundProcessorWrapper["destroy"]>[0];
+
+/**
+ * A background pipeline that is built, rebuilt and destroyed one step at a
+ * time. The camera tracks sharing it attach and stop it independently, and
+ * the SDK's wrapper holds a single track's streams: two builds at once
+ * overwrite each other's, and a destroy during a build does nothing.
+ */
+export class OneStepPipeline extends BackgroundProcessorWrapper {
+  private steps: Promise<void> = Promise.resolve();
+
+  public override async init(opts: InitOptions): Promise<void> {
+    return this.inTurn(async () => super.init(opts));
+  }
+
+  // The SDK's restart calls init and destroy, which would wait on itself.
+  public override async restart(opts: InitOptions): Promise<void> {
+    return this.inTurn(async () => {
+      await super.destroy({ willProcessorRestart: true });
+      await super.init(opts);
+    });
+  }
+
+  public override async destroy(options?: DestroyOptions): Promise<void> {
+    return this.inTurn(async () => super.destroy(options));
+  }
+
+  private async inTurn(step: () => Promise<void>): Promise<void> {
+    const turn = this.steps.then(step);
+    this.steps = turn.catch(() => {});
+    return turn;
+  }
+}

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

@@ -1,145 +0,0 @@
-/*
-Copyright 2024-2025 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import {
-  ProcessorWrapper,
-  supportsBackgroundProcessors as supportsBackgroundProcessorsLivekitSdk,
-  type BackgroundOptions,
-} from "@livekit/track-processors";
-import {
-  createContext,
-  type FC,
-  type JSX,
-  use,
-  useEffect,
-  useMemo,
-} from "react";
-import { type LocalVideoTrack } from "livekit-client";
-import { logger } from "matrix-js-sdk/lib/logger";
-import { combineLatest } from "rxjs";
-
-import {
-  backgroundBlur as backgroundBlurSettings,
-  useSetting,
-} from "../settings/settings";
-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.
-// preferably we should not make this a context anymore and instead just a vm?
-
-export type ProcessorState = {
-  supported: boolean | undefined;
-  processor: undefined | ProcessorWrapper<BackgroundOptions>;
-};
-
-const ProcessorContext = createContext<ProcessorState | undefined>(undefined);
-
-export function useTrackProcessor(): ProcessorState {
-  const state = use(ProcessorContext);
-  if (state === undefined)
-    throw new Error(
-      "useTrackProcessor must be used within a ProcessorProvider",
-    );
-  return state;
-}
-
-export function useTrackProcessorState$(): Behavior<ProcessorState> {
-  return useValueBehavior(useTrackProcessor());
-}
-
-/**
- * Attaches or detaches the processor so that the track matches the desired
- * state, without throwing.
- */
-export function applyProcessor(
-  videoTrack: LocalVideoTrack,
-  processor: ProcessorWrapper<BackgroundOptions> | undefined,
-): void {
-  if (processor && !videoTrack.getProcessor()) {
-    // A MediaStreamTrackProcessor cannot be constructed on an ended track
-    // (e.g. the camera was stopped while the processor was being applied),
-    // and setProcessor rejects with a TypeError. The track is going away
-    // anyway, so there is nothing to attach to.
-    if (videoTrack.mediaStreamTrack.readyState === "ended") {
-      logger.debug("Not attaching video processor to an ended track");
-      return;
-    }
-    videoTrack.setProcessor(processor).catch((e) => {
-      logger.warn("Failed to attach video processor", e);
-    });
-  }
-  if (!processor && videoTrack.getProcessor()) {
-    videoTrack.stopProcessor().catch((e) => {
-      logger.warn("Failed to stop video processor", e);
-    });
-  }
-}
-
-/**
- * Updates your video tracks to always use the given processor.
- */
-export const trackProcessorSync = (
-  scope: ObservableScope,
-  videoTrack$: Behavior<LocalVideoTrack | null>,
-  processor$: Behavior<ProcessorState>,
-): void => {
-  combineLatest([videoTrack$, processor$])
-    .pipe(scope.bind())
-    .subscribe(([videoTrack, processorState]) => {
-      if (!processorState) return;
-      if (!videoTrack) return;
-      applyProcessor(videoTrack, processorState.processor);
-    });
-};
-
-export const useTrackProcessorSync = (
-  videoTrack: LocalVideoTrack | null,
-): void => {
-  const { processor } = useTrackProcessor();
-  useEffect(() => {
-    if (!videoTrack) return;
-    applyProcessor(videoTrack, processor);
-  }, [processor, videoTrack]);
-};
-
-interface Props {
-  children: JSX.Element;
-}
-
-function supportsBackgroundProcessors(): boolean {
-  return supportsBackgroundProcessorsLivekitSdk() && platform === "desktop";
-}
-
-export const ProcessorProvider: FC<Props> = ({ children }) => {
-  // The setting the user wants to have
-  const [blurActivated] = useSetting(backgroundBlurSettings);
-  const supported = useMemo(() => supportsBackgroundProcessors(), []);
-  const blur = useMemo(
-    () =>
-      new ProcessorWrapper(
-        new BlurBackgroundTransformer({ blurRadius: 15 }),
-        "background-blur",
-      ),
-    [],
-  );
-
-  // This is the actual state exposed through the context
-  const processorState = useMemo(
-    () => ({
-      supported,
-      processor: supported && blurActivated ? blur : undefined,
-    }),
-    [supported, blurActivated, blur],
-  );
-
-  return <ProcessorContext value={processorState}>{children}</ProcessorContext>;
-};

src/livekit/backgroundEffects.test.ts

@@ -0,0 +1,53 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { readFile } from "node:fs/promises";
+import { describe, expect, test } from "vitest";
+
+import {
+  type BackgroundEffect,
+  imagePathFor,
+  parseEffect,
+  serializeEffect,
+  shippedBackgrounds,
+} from "./backgroundEffects";
+
+describe("the chosen background effect", () => {
+  test("round-trips through its stored form", () => {
+    const effects: BackgroundEffect[] = [
+      { kind: "none" },
+      { kind: "blur" },
+      ...shippedBackgrounds.map(({ id }) => ({ kind: "shipped" as const, id })),
+    ];
+    for (const effect of effects)
+      expect(parseEffect(serializeEffect(effect))).toEqual(effect);
+  });
+
+  test("falls back to no effect when the stored form names nothing we ship", () => {
+    expect(parseEffect("image:gone")).toEqual({ kind: "none" });
+    expect(parseEffect("")).toEqual({ kind: "none" });
+  });
+
+  test("reads a stored value that is not a string as no effect", () => {
+    for (const raw of [null, 1, {}, ["blur"]])
+      expect(parseEffect(raw)).toEqual({ kind: "none" });
+  });
+
+  test("gives every shipped background an image to draw", () => {
+    for (const { id } of shippedBackgrounds)
+      expect(imagePathFor(id)).toBeTruthy();
+  });
+
+  // A background has to cover what is behind it: JPEG has no alpha channel.
+  test("ships only opaque backgrounds", async () => {
+    for (const { imagePath } of shippedBackgrounds) {
+      const name = imagePath.split("/").pop()!.split("?")[0];
+      const bytes = await readFile(`src/graphics/${name}`);
+      expect([bytes[0], bytes[1], bytes[2]]).toEqual([0xff, 0xd8, 0xff]);
+    }
+  });
+});

src/livekit/backgroundEffects.ts

@@ -0,0 +1,62 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import arc from "../graphics/background-arc.jpg?url";
+import glow from "../graphics/background-glow.jpg?url";
+
+export const blurRadius = 15;
+
+export interface ShippedBackground {
+  /** Stored in the user's settings when chosen, so it must not change. */
+  id: string;
+  imagePath: string;
+}
+
+export const shippedBackgrounds: ShippedBackground[] = [
+  { id: "arc", imagePath: arc },
+  { id: "glow", imagePath: glow },
+];
+
+export type BackgroundEffect =
+  | { kind: "none" }
+  | { kind: "blur" }
+  | { kind: "shipped"; id: string };
+
+/** An effect as the setting stores it, and as the menu names its option. */
+export type EffectId = "none" | "blur" | `image:${string}`;
+
+export const noEffect: BackgroundEffect = { kind: "none" };
+
+/**
+ * Reads a stored effect; one we no longer ship reads as no effect. Stored by
+ * hand or by another build, the value need not even be a string.
+ */
+export function parseEffect(raw: unknown): BackgroundEffect {
+  if (typeof raw !== "string") return noEffect;
+  if (raw === "blur") return { kind: "blur" };
+  if (raw.startsWith("image:")) {
+    const id = raw.slice("image:".length);
+    if (shippedBackgrounds.some((b) => b.id === id))
+      return { kind: "shipped", id };
+  }
+  return noEffect;
+}
+
+export function serializeEffect(effect: BackgroundEffect): EffectId {
+  switch (effect.kind) {
+    case "blur":
+      return "blur";
+    case "shipped":
+      return `image:${effect.id}`;
+    default:
+      return "none";
+  }
+}
+
+export function imagePathFor(id: string): string | undefined {
+  return shippedBackgrounds.find((b) => b.id === id)?.imagePath;
+}

src/livekit/backgroundProcessing.ts

@@ -0,0 +1,15 @@
+/*
+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 { supportsBackgroundProcessors as supportsBackgroundProcessorsLivekitSdk } from "@livekit/track-processors";
+
+import { platform } from "../Platform";
+
+/** One answer for the controls and the pipeline, so neither offers what the other refuses. */
+export function supportsBackgroundProcessors(): boolean {
+  return supportsBackgroundProcessorsLivekitSdk() && platform === "desktop";
+}

src/room/CallView.test.tsx

@@ -50,6 +50,7 @@ import {
   mockMediaDevices,
   mockRtcMembership,
   MockRTCSession,
+  testScope,
 } from "../utils/test";
 import { CallView } from "./CallView";
 import { GroupCallErrorBoundary } from "./GroupCallErrorBoundary";
@@ -61,7 +62,10 @@ import {
 } from "../HostBridge";
 import { type JoinCallData } from "../widget";
 import { MatrixRTCTransportMissingError } from "../utils/errors";
-import { ProcessorProvider } from "../livekit/TrackProcessorContext";
+import {
+  BackgroundEffectsProvider,
+  createAppBackgroundEffects,
+} from "../livekit/BackgroundEffectsContext";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { constant } from "../state/Behavior";
 
@@ -193,7 +197,9 @@ function createCallView(
       <HostBridgeProvider value={hostBridge}>
         <TooltipProvider>
           <MediaDevicesContext value={mockMediaDevices({})}>
-            <ProcessorProvider>
+            <BackgroundEffectsProvider
+              effects={createAppBackgroundEffects(testScope())}
+            >
               {options.withErrorBoundary ? (
                 <GroupCallErrorBoundary recoveryActionHandler={vi.fn()}>
                   {callView}
@@ -201,7 +207,7 @@ function createCallView(
               ) : (
                 callView
               )}
-            </ProcessorProvider>
+            </BackgroundEffectsProvider>
           </MediaDevicesContext>
         </TooltipProvider>
       </HostBridgeProvider>

src/room/InCallView.test.tsx

@@ -31,6 +31,7 @@ import {
   mockRemoteParticipant,
   mockRtcMembership,
   type MockRTCSession,
+  testScope,
 } from "../utils/test";
 import { E2eeType } from "../e2ee/e2eeType";
 import {
@@ -49,7 +50,10 @@ import { MediaDevicesContext } from "../MediaDevicesContext";
 import { type MediaDevices as ECMediaDevices } from "../state/MediaDevices";
 import { AppBar } from "../AppBar";
 import { type MatrixInfo } from "./VideoPreview";
-import { ProcessorProvider } from "../livekit/TrackProcessorContext";
+import {
+  BackgroundEffectsProvider,
+  createAppBackgroundEffects,
+} from "../livekit/BackgroundEffectsContext";
 import { initializeWidget } from "../widget";
 import { RootElementProvider } from "../RootElementContext";
 
@@ -242,7 +246,9 @@ describe("ActiveCall", () => {
     const { findByTestId } = render(
       <BrowserRouter>
         <MediaDevicesContext value={mediaDevices}>
-          <ProcessorProvider>
+          <BackgroundEffectsProvider
+            effects={createAppBackgroundEffects(testScope())}
+          >
             <TooltipProvider>
               <RoomContext value={mockLivekitRoom({ localParticipant })}>
                 <ActiveCall
@@ -257,7 +263,7 @@ describe("ActiveCall", () => {
                 />
               </RoomContext>
             </TooltipProvider>
-          </ProcessorProvider>
+          </BackgroundEffectsProvider>
         </MediaDevicesContext>
       </BrowserRouter>,
     );
@@ -292,7 +298,9 @@ describe("ActiveCall", () => {
         <BrowserRouter>
           <RootElementProvider value={root}>
             <MediaDevicesContext value={mediaDevices}>
-              <ProcessorProvider>
+              <BackgroundEffectsProvider
+                effects={createAppBackgroundEffects(testScope())}
+              >
                 <TooltipProvider>
                   <RoomContext value={mockLivekitRoom({ localParticipant })}>
                     <ActiveCall
@@ -307,7 +315,7 @@ describe("ActiveCall", () => {
                     />
                   </RoomContext>
                 </TooltipProvider>
-              </ProcessorProvider>
+              </BackgroundEffectsProvider>
             </MediaDevicesContext>
           </RootElementProvider>
         </BrowserRouter>,

src/room/InCallView.tsx

@@ -79,7 +79,7 @@ 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 { useBackgroundEffectsState$ } from "../livekit/BackgroundEffectsContext.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 +120,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   const urlParams = useUrlParams();
   const hostBridge = useHostBridge();
   const mediaDevices = useMediaDevices();
-  const trackProcessorState$ = useTrackProcessorState$();
+  const backgroundEffectsState$ = useBackgroundEffectsState$();
   // 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 +150,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
       },
       reactionsReader.raisedHands$,
       reactionsReader.reactions$,
-      trackProcessorState$,
+      backgroundEffectsState$,
     );
     // TODO move this somewhere else once we use the callViewModel in the lobby as well!
     vm.join();
@@ -170,7 +170,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     urlParams,
     hostBridge,
     mediaDevices,
-    trackProcessorState$,
+    backgroundEffectsState$,
     props.client,
     rootElement,
   ]);
@@ -201,7 +201,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     props.onLeft,
     urlParams,
     mediaDevices,
-    trackProcessorState$,
+    backgroundEffectsState$,
     props.client,
     vm,
   ]);

src/room/KnockLobbyView.test.tsx

@@ -14,19 +14,19 @@ import { type MatrixClient, type RoomSummary } from "matrix-js-sdk";
 import { KnockLobbyView } from "./KnockLobbyView";
 import { LeaveToHomeProvider } from "../LeaveToHomeContext";
 import { MediaDevicesContext } from "../MediaDevicesContext";
-import { type ProcessorState } from "../livekit/TrackProcessorContext";
+import { type BackgroundEffectsState } from "../livekit/BackgroundEffectsContext";
 import { mockMediaDevices } from "../utils/test";
 
 vi.mock("@livekit/components-react", () => ({
   usePreviewTracks: (): unknown[] => [],
 }));
 
-vi.mock("../livekit/TrackProcessorContext", () => ({
-  useTrackProcessor: (): ProcessorState => ({
+vi.mock("../livekit/BackgroundEffectsContext", () => ({
+  useBackgroundEffects: (): BackgroundEffectsState => ({
     supported: false,
     processor: undefined,
   }),
-  useTrackProcessorSync: (): void => {},
+  useSyncBackgroundEffects: (): void => {},
 }));
 
 vi.mock("react-use-measure", () => ({

src/room/LobbyView.test.tsx

@@ -28,7 +28,7 @@ import {
 } from "../utils/test";
 import { type MediaDevices } from "../state/MediaDevices";
 import { MediaDevicesContext } from "../MediaDevicesContext";
-import { type ProcessorState } from "../livekit/TrackProcessorContext";
+import { type BackgroundEffectsState } from "../livekit/BackgroundEffectsContext";
 import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
 import lobbyStyles from "./LobbyView.module.css";
 import headerStyles from "../Header.module.css";
@@ -41,12 +41,12 @@ vi.mock("@livekit/components-react", () => ({
   usePreviewTracks: (): unknown[] => [],
 }));
 
-vi.mock("../livekit/TrackProcessorContext", () => ({
-  useTrackProcessor: (): ProcessorState => ({
+vi.mock("../livekit/BackgroundEffectsContext", () => ({
+  useBackgroundEffects: (): BackgroundEffectsState => ({
     supported: false,
     processor: undefined,
   }),
-  useTrackProcessorSync: (): void => {},
+  useSyncBackgroundEffects: (): void => {},
 }));
 
 vi.mock("react-use-measure", () => ({

src/room/LobbyView.tsx

@@ -40,9 +40,9 @@ import { useMediaDevices } from "../MediaDevicesContext";
 import { ObservableScope } from "../state/ObservableScope";
 import { useInitial } from "../useInitial";
 import {
-  useTrackProcessor,
-  useTrackProcessorSync,
-} from "../livekit/TrackProcessorContext";
+  useBackgroundEffects,
+  useSyncBackgroundEffects,
+} from "../livekit/BackgroundEffectsContext";
 import { getValue } from "../utils/observable";
 import { useBehavior } from "../useBehavior";
 import { CallFooter, type FooterSnapshot } from "../components/CallFooter";
@@ -136,7 +136,7 @@ export const LobbyView: FC<Props> = ({
       },
   );
 
-  const { processor } = useTrackProcessor();
+  const { processor } = useBackgroundEffects();
 
   const initialProcessor = useInitial(() => processor);
   const localTrackOptions = useMemo<CreateLocalTracksOptions>(
@@ -183,7 +183,7 @@ export const LobbyView: FC<Props> = ({
     }
   }, [devices, videoInputId, videoTrack]);
 
-  useTrackProcessorSync(videoTrack);
+  useSyncBackgroundEffects(videoTrack);
 
   const [footerVm, setFooterVm] = useState<ViewModel<FooterSnapshot> | null>(
     null,

src/room/__snapshots__/InCallView.test.tsx.snap

@@ -181,7 +181,7 @@ exports[`InCallView > rendering > renders 1`] = `
           tabindex="0"
         >
           <div
-            class="_indicator-icon_147l5_17"
+            class="_indicator-icon_j097f_17"
             style="--cpd-icon-button-size: 100%;"
           >
             <svg

src/room/__snapshots__/LobbyView.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`LobbyView > renders with AppBar android 1`] = `
         tabindex="0"
       >
         <div
-          class="_indicator-icon_147l5_17"
+          class="_indicator-icon_j097f_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -111,7 +111,7 @@ exports[`LobbyView > renders with AppBar android 1`] = `
           tabindex="0"
         >
           <div
-            class="_indicator-icon_147l5_17"
+            class="_indicator-icon_j097f_17"
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
@@ -247,7 +247,7 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
         tabindex="0"
       >
         <div
-          class="_indicator-icon_147l5_17"
+          class="_indicator-icon_j097f_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -343,7 +343,7 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
           tabindex="0"
         >
           <div
-            class="_indicator-icon_147l5_17"
+            class="_indicator-icon_j097f_17"
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
@@ -621,7 +621,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
           tabindex="0"
         >
           <div
-            class="_indicator-icon_147l5_17"
+            class="_indicator-icon_j097f_17"
             style="--cpd-icon-button-size: 100%;"
           >
             <svg

src/settings/SettingsModal.test.tsx

@@ -0,0 +1,93 @@
+/*
+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, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { type MatrixClient } from "matrix-js-sdk";
+import { TooltipProvider } from "@vector-im/compound-web";
+
+import { SettingsModal } from "./SettingsModal";
+import { backgroundEffect } from "./settings";
+import { MediaDevicesContext } from "../MediaDevicesContext";
+import { type BackgroundEffectsState } from "../livekit/BackgroundEffectsContext";
+import { mockMediaDevices } from "../utils/test";
+import { constant } from "../state/Behavior";
+import { type MediaDevices } from "../state/MediaDevices";
+
+vi.mock("../livekit/BackgroundEffectsContext", () => ({
+  useBackgroundEffects: (): BackgroundEffectsState => ({
+    supported: true,
+    processor: undefined,
+  }),
+}));
+
+// Behaviors, as the device menus read them.
+const noDevices = {
+  available$: constant(new Map()),
+  selected$: constant(undefined),
+  select: vi.fn(),
+};
+
+function renderVideoTab(): void {
+  render(
+    <TooltipProvider>
+      <MediaDevicesContext
+        value={mockMediaDevices({
+          requestDeviceNames: vi.fn(),
+          audioInput: noDevices,
+          audioOutput: noDevices,
+          videoInput: noDevices,
+        } as unknown as Partial<MediaDevices>)}
+      >
+        <SettingsModal
+          open
+          onDismiss={vi.fn()}
+          tab="video"
+          onTabChange={vi.fn()}
+          client={
+            {
+              getUserId: () => "@user:example.org",
+              getUser: () => null,
+            } as unknown as MatrixClient
+          }
+        />
+      </MediaDevicesContext>
+    </TooltipProvider>,
+  );
+}
+
+const blurControl = (): HTMLElement =>
+  screen.getByRole("checkbox", { name: "Blur the background of the video" });
+
+describe("SettingsModal", () => {
+  afterEach(() => backgroundEffect.setValue("none"));
+
+  it("blur control turns blur on and off", async () => {
+    const user = userEvent.setup();
+    renderVideoTab();
+    expect(blurControl()).not.toBeChecked();
+
+    await user.click(blurControl());
+    expect(backgroundEffect.getValue()).toBe("blur");
+    expect(blurControl()).toBeChecked();
+
+    await user.click(blurControl());
+    expect(backgroundEffect.getValue()).toBe("none");
+    expect(blurControl()).not.toBeChecked();
+  });
+
+  it("blur control reflects and replaces an image background", async () => {
+    const user = userEvent.setup();
+    backgroundEffect.setValue("image:arc");
+    renderVideoTab();
+    expect(blurControl()).not.toBeChecked();
+
+    await user.click(blurControl());
+    expect(backgroundEffect.getValue()).toBe("blur");
+  });
+});

src/settings/SettingsModal.tsx

@@ -22,13 +22,14 @@ import { useHostBridge } from "../HostBridge";
 import {
   useSetting,
   soundEffectVolume as soundEffectVolumeSetting,
-  backgroundBlur as backgroundBlurSetting,
+  backgroundEffect as backgroundEffectSetting,
   developerMode,
 } from "./settings";
 import { PreferencesSettingsTab } from "./PreferencesSettingsTab";
 import { Slider } from "../Slider";
 import { DeviceSelection } from "./DeviceSelection";
-import { useTrackProcessor } from "../livekit/TrackProcessorContext";
+import { useBackgroundEffects } from "../livekit/BackgroundEffectsContext";
+import { parseEffect, serializeEffect } from "../livekit/backgroundEffects";
 import {
   DeveloperSettingsTab,
   type DeveloperSettingsSnapshot,
@@ -81,9 +82,11 @@ export const SettingsModal: FC<Props> = ({
 
   // Generate a `Checkbox` input to turn blur on or off.
   const BlurCheckbox: React.FC = (): ReactNode => {
-    const { supported } = useTrackProcessor();
+    const { supported } = useBackgroundEffects();
 
-    const [blurActive, setBlurActive] = useSetting(backgroundBlurSetting);
+    // The camera menu's setting, of which this control sees only blur.
+    const [effect, setEffect] = useSetting(backgroundEffectSetting);
+    const blurActive = parseEffect(effect).kind === "blur";
 
     return (
       <>
@@ -97,8 +100,12 @@ export const SettingsModal: FC<Props> = ({
               supported ? "" : t("settings.blur_not_supported_by_browser")
             }
             type="checkbox"
-            checked={!!blurActive}
-            onChange={(b): void => setBlurActive(b.target.checked)}
+            checked={blurActive}
+            onChange={(b): void =>
+              setEffect(
+                serializeEffect({ kind: b.target.checked ? "blur" : "none" }),
+              )
+            }
             disabled={!supported}
           />
         </FieldRow>

src/settings/settings.ts

@@ -12,6 +12,7 @@ import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { type Behavior } from "../state/Behavior";
 import { useBehavior } from "../useBehavior";
 import { MatrixRTCMode } from "../config/ConfigOptions";
+import { type EffectId } from "../livekit/backgroundEffects";
 
 export class Setting<T> {
   public constructor(
@@ -115,7 +116,14 @@ export const videoInput = new Setting<string | undefined>(
   undefined,
 );
 
-export const backgroundBlur = new Setting<boolean>("background-blur", false);
+// Only read, to carry blur over for anyone who had it on.
+const backgroundBlur = new Setting<boolean>("background-blur", false);
+
+/** The chosen background effect, in the form `parseEffect` reads. */
+export const backgroundEffect = new Setting<EffectId>(
+  "background-effect",
+  backgroundBlur.getValue() ? "blur" : "none",
+);
 
 export const showHandRaisedTimer = new Setting<boolean>(
   "hand-raised-show-timer",

src/soundUtils.test.ts

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

src/state/AppViewModel.ts

@@ -6,6 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type AudioOutputOptions, MediaDevices } from "./MediaDevices";
+import { createAppBackgroundEffects } from "../livekit/BackgroundEffectsContext";
 import { type ObservableScope } from "./ObservableScope";
 
 /**
@@ -16,6 +17,7 @@ export class AppViewModel {
     this.scope,
     this.audioOutputOptions,
   );
+  public readonly backgroundEffects = createAppBackgroundEffects(this.scope);
 
   // TODO: Move more application logic here. The CallViewModel, at the very
   // least, ought to be accessible from this object.

src/state/BackgroundEffects.test.ts

@@ -0,0 +1,156 @@
+/*
+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 { beforeEach, describe, expect, it, vi } from "vitest";
+import { BehaviorSubject, distinctUntilChanged, map } from "rxjs";
+import { type BackgroundProcessorWrapper } from "@livekit/track-processors";
+
+import {
+  type BackgroundEffects,
+  createBackgroundEffects,
+  type BackgroundEffectsOptions,
+} from "./BackgroundEffects";
+import { type BackgroundEffectsState } from "../livekit/BackgroundEffectsContext";
+import { shippedBackgrounds } from "../livekit/backgroundEffects";
+import { flushPromises, testScope, withTestScheduler } from "../utils/test";
+
+/** A pipeline that records what it is switched to. */
+function fakePipeline(): {
+  pipeline: BackgroundProcessorWrapper;
+  switches: unknown[];
+  /** Holds the next switch until it resolves, as a picture loading does. */
+  holdNext: () => () => void;
+} {
+  const switches: unknown[] = [];
+  let slow: Promise<void> | undefined;
+  const pipeline = {
+    switchTo: vi.fn(async (options: unknown) => {
+      switches.push(options);
+      const held = slow;
+      slow = undefined;
+      await held;
+    }),
+  } as unknown as BackgroundProcessorWrapper;
+  return {
+    pipeline,
+    switches,
+    holdNext: () => {
+      let release!: () => void;
+      slow = new Promise((resolve) => (release = resolve));
+      return release;
+    },
+  };
+}
+
+/** One letter per state: idle, attached. */
+function letter(state: BackgroundEffectsState): string {
+  return state.processor === undefined ? "i" : "a";
+}
+
+describe("the pipeline's state", () => {
+  function testState({
+    effect,
+    expected,
+  }: {
+    effect: string;
+    expected: string;
+  }): void {
+    withTestScheduler(({ behavior, expectObservable }) => {
+      const effects = createBackgroundEffects(testScope(), {
+        supported: true,
+        effect$: behavior(effect, { n: "none", b: "blur" }),
+        pipeline: fakePipeline().pipeline,
+      });
+      expectObservable(
+        effects.state$.pipe(map(letter), distinctUntilChanged()),
+      ).toBe(expected);
+    });
+  }
+
+  it("defaults to no effect", () => testState({ effect: "n", expected: "i" }));
+
+  it("attaches on first use and stays attached", () =>
+    testState({ effect: "nbn", expected: "ia" }));
+});
+
+describe("background effects", () => {
+  let effect$: BehaviorSubject<string>;
+  let fake: ReturnType<typeof fakePipeline>;
+
+  function build(
+    options: Partial<BackgroundEffectsOptions> = {},
+  ): BackgroundEffects {
+    return createBackgroundEffects(testScope(), {
+      supported: true,
+      effect$,
+      pipeline: fake.pipeline,
+      ...options,
+    });
+  }
+  const choose = async (raw: string): Promise<void> => {
+    effect$.next(raw);
+    await flushPromises();
+  };
+  const blur = async (on: boolean): Promise<void> =>
+    choose(on ? "blur" : "none");
+
+  beforeEach(() => {
+    effect$ = new BehaviorSubject("none");
+    fake = fakePipeline();
+  });
+
+  it("puts a shipped background on as that picture", async () => {
+    build();
+    await choose(`image:${shippedBackgrounds[0].id}`);
+    expect(fake.switches).toEqual([
+      {
+        mode: "virtual-background",
+        imagePath: shippedBackgrounds[0].imagePath,
+      },
+    ]);
+  });
+
+  it("switches in place rather than reattaching", async () => {
+    const effects = build();
+    await blur(true);
+    const pipeline = effects.state$.value.processor;
+    await blur(false);
+    await blur(true);
+
+    expect(effects.state$.value.processor).toBe(pipeline);
+    expect(fake.switches).toEqual([
+      { mode: "background-blur", blurRadius: 15 },
+      { mode: "disabled" },
+      { mode: "background-blur", blurRadius: 15 },
+    ]);
+  });
+
+  it("keeps switching after a switch fails", async () => {
+    vi.mocked(fake.pipeline.switchTo).mockRejectedValueOnce(new Error("lost"));
+    build();
+    await blur(true);
+    await blur(false);
+    expect(fake.switches).toEqual([{ mode: "disabled" }]);
+  });
+
+  it("switches one at a time, skipping those overtaken", async () => {
+    const finished = fake.holdNext();
+    build();
+    await blur(true);
+    await blur(false);
+    await blur(true);
+    await blur(false);
+    expect(fake.switches).toHaveLength(1);
+
+    finished();
+    await flushPromises();
+    expect(fake.switches).toEqual([
+      { mode: "background-blur", blurRadius: 15 },
+      { mode: "disabled" },
+    ]);
+  });
+});

src/state/BackgroundEffects.ts

@@ -0,0 +1,104 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { combineLatest, distinctUntilChanged, map, scan } from "rxjs";
+import {
+  type BackgroundProcessorWrapper,
+  type SwitchBackgroundProcessorOptions,
+} from "@livekit/track-processors";
+import { logger } from "matrix-js-sdk/lib/logger";
+import { deepCompare } from "matrix-js-sdk/lib/utils";
+
+import { type Behavior } from "./Behavior";
+import { type ObservableScope } from "./ObservableScope";
+import { type BackgroundEffectsState } from "../livekit/BackgroundEffectsContext";
+import {
+  type BackgroundEffect,
+  blurRadius,
+  imagePathFor,
+  parseEffect,
+} from "../livekit/backgroundEffects";
+
+export interface BackgroundEffectsOptions {
+  /** Whether this browser can run a pipeline at all. */
+  supported: boolean;
+  /** The effect chosen, as the setting stores it. */
+  effect$: Behavior<string>;
+  /** The background processor pipeline to be switched between effects. */
+  pipeline: BackgroundProcessorWrapper;
+}
+
+/** The background effect pipeline, as the camera tracks and the menus see it. */
+export interface BackgroundEffects {
+  readonly state$: Behavior<BackgroundEffectsState>;
+}
+
+/** Switches the pipeline as the choice changes, for as long as the scope lasts. */
+export function createBackgroundEffects(
+  scope: ObservableScope,
+  { supported, effect$, pipeline }: BackgroundEffectsOptions,
+): BackgroundEffects {
+  const choice$ = effect$.pipe(map(parseEffect));
+  const wanted$ = choice$.pipe(
+    map((effect) => effect.kind !== "none"),
+    distinctUntilChanged(),
+  );
+
+  const state$ = scope.behavior(
+    wanted$.pipe(
+      scan<boolean, BackgroundEffectsState>(
+        (previous, wanted) => {
+          // Attached the first time an effect is wanted and never detached
+          // after, so someone who never turns one on pays for none of it.
+          const enable =
+            previous.processor !== undefined || (supported && wanted);
+          return { supported, processor: enable ? pipeline : undefined };
+        },
+        { supported, processor: undefined },
+      ),
+    ),
+  );
+
+  const switchOptions$ = scope.behavior<
+    SwitchBackgroundProcessorOptions | undefined
+  >(
+    combineLatest([state$, choice$]).pipe(
+      map(([{ processor }, effect]) =>
+        processor === undefined ? undefined : switchOptionsFor(effect),
+      ),
+      distinctUntilChanged(deepCompare),
+    ),
+  );
+  // In turn: a picture's switch ends once it loads, so an earlier one could land last.
+  scope.reconcile(switchOptions$, async (options) => {
+    if (options === undefined) return;
+    try {
+      await pipeline.switchTo(options);
+    } catch (e) {
+      logger.warn("Failed to switch background effect", e);
+    }
+  });
+
+  return { state$ };
+}
+
+function switchOptionsFor(
+  effect: BackgroundEffect,
+): SwitchBackgroundProcessorOptions {
+  switch (effect.kind) {
+    case "blur":
+      return { mode: "background-blur", blurRadius };
+    case "shipped": {
+      const imagePath = imagePathFor(effect.id);
+      return imagePath
+        ? { mode: "virtual-background", imagePath }
+        : { mode: "disabled" };
+    }
+    default:
+      return { mode: "disabled" };
+  }
+}

src/state/CallViewModel/CallViewModel.test.ts

@@ -176,7 +176,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
         case "grid":
           return combineLatest(
             [
-              l.spotlight?.vm.media$ ?? constant(undefined),
+              l.spotlight?.media$ ?? constant(undefined),
               ...l.grid.map((vm) => vm.media$),
             ],
             (spotlight, ...grid) => ({
@@ -188,7 +188,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
         case "spotlight-landscape":
         case "spotlight-portrait":
           return combineLatest(
-            [l.spotlight.vm.media$, ...l.grid.map((vm) => vm.media$)],
+            [l.spotlight.media$, ...l.grid.map((vm) => vm.media$)],
             (spotlight, ...grid) => ({
               type: l.type,
               spotlight: spotlight.map((vm) => vm.id),
@@ -197,7 +197,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
           );
         case "spotlight-expanded":
           return combineLatest(
-            [l.spotlight.media$, l.pip?.vm.media$ ?? constant(undefined)],
+            [l.spotlight.media$, l.pip?.media$ ?? constant(undefined)],
             (spotlight, pip) => ({
               type: l.type,
               spotlight: spotlight.map((vm) => vm.id),
@@ -206,7 +206,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
           );
         case "one-on-one-desktop":
           return combineLatest(
-            [l.spotlight.media$, l.pip.vm.media$],
+            [l.spotlight.media$, l.pip.media$],
             (spotlight, pip) => ({
               type: l.type,
               spotlight: spotlight.id,
@@ -217,8 +217,8 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
           return combineLatest(
             [
               l.spotlight.media$,
-              l.pip?.vm.media$ ?? constant(undefined),
-              l.pip?.size$ ?? constant(undefined),
+              l.pip?.media$ ?? constant(undefined),
+              l.pipSize$,
             ],
             (spotlight, pip, pipSize) => ({
               type: l.type,
@@ -480,7 +480,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
                 type: "one-on-one-mobile",
                 spotlight: [`${aliceId}:0`],
                 pip: undefined,
-                pipSize: undefined,
+                pipSize: "lg",
               },
               b: {
                 type: "one-on-one-mobile",
@@ -518,7 +518,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
               type: "one-on-one-mobile",
               spotlight: [`${aliceId}:0`],
               pip: undefined,
-              pipSize: undefined,
+              pipSize: "lg",
             },
           });
           // It wouldn't be clear whether Alice or Bob is the remote video tile,
@@ -566,7 +566,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
                 type: "one-on-one-mobile",
                 spotlight: [`${aliceId}:0`],
                 pip: undefined,
-                pipSize: undefined,
+                pipSize: "sm",
               },
               b: {
                 type: "spotlight-landscape",
@@ -765,7 +765,7 @@ describe.each(modes)("CallViewModel (%s mode)", (mode) => {
                 type: "one-on-one-mobile",
                 spotlight: [`${aliceId}:0`],
                 pip: undefined,
-                pipSize: undefined,
+                pipSize: "lg",
               },
               b: {
                 // In a larger window, expect the one-on-one desktop layout

src/state/CallViewModel/CallViewModel.ts

@@ -43,7 +43,7 @@ import {
 import { type Logger, logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import {
   MembershipManagerEvent,
-  type LivekitTransportConfig,
+  type LivekitTransport,
   type MatrixRTCSession,
   type RTCCallIntent,
   type RTCNotificationType,
@@ -89,10 +89,11 @@ import { E2eeType } from "../../e2ee/e2eeType";
 import { MatrixKeyProvider } from "../../e2ee/matrixKeyProvider";
 import { type MuteStates } from "../MuteStates";
 import { HeaderStyle, type UrlParams } from "../../UrlParams";
-import { type ProcessorState } from "../../livekit/TrackProcessorContext";
+import { type BackgroundEffectsState } from "../../livekit/BackgroundEffectsContext";
 import { type HostBridge, nullHostBridge } from "../../HostBridge";
 import {
   layoutShallowEquals,
+  type Alignment,
   type GridLayoutMedia,
   type Layout,
   type LayoutMedia,
@@ -162,7 +163,6 @@ import {
   type RingingMediaViewModel,
 } from "../media/RingingMediaViewModel.ts";
 import { type GridTileViewModel } from "../TileViewModel.ts";
-import { createFloatingTile } from "../FloatingTile.ts";
 
 //TODO
 // Larger rename
@@ -501,7 +501,7 @@ export function createCallViewModel$(
   options: CallViewModelOptions,
   handsRaisedSubject$: Observable<Record<string, RaisedHandInfo>>,
   reactionsSubject$: Observable<Record<string, ReactionInfo>>,
-  trackProcessorState$: Behavior<ProcessorState>,
+  backgroundEffectsState$: Behavior<BackgroundEffectsState>,
 ): CallViewModel {
   const logger = rootLogger.getChild("[CallViewModel]");
   const client = matrixRoom.client;
@@ -590,7 +590,7 @@ export function createCallViewModel$(
       client,
       matrixRoom.roomId,
       mediaDevices,
-      trackProcessorState$,
+      backgroundEffectsState$,
       livekitKeyProvider,
       controlledAudioDevices,
       options.livekitRoomFactory,
@@ -624,7 +624,7 @@ export function createCallViewModel$(
     ),
     muteStates,
     joinMatrixRTC: (
-      transport: LivekitTransportConfig,
+      transport: LivekitTransport,
       delayedLeaveTimings: ResolvedDelayedLeaveTimings,
     ) => {
       return enterRTCSession(
@@ -645,7 +645,7 @@ export function createCallViewModel$(
         connection,
         mediaDevices,
         muteStates,
-        trackProcessorState$,
+        backgroundEffectsState$,
         logger.getChild(
           "[Publisher " + connection.transport.livekit_service_url + "]",
         ),
@@ -1548,28 +1548,32 @@ export function createCallViewModel$(
   );
 
   /**
-   * State of the floating spotlight tile, if present.
+   * The alignment of the floating spotlight tile, if present.
    */
-  const floatingSpotlightTile = createFloatingTile(scope, {
+  const spotlightAlignment$ = new BehaviorSubject<Alignment>({
     inline: "end",
     block: "end",
   });
   /**
-   * State of the small picture-in-picture tile, if present, when in landscape.
+   * The size of the small picture-in-picture tile, if present, when in portrait.
    */
-  const landscapePipTile = createFloatingTile(scope, {
+  const portraitPipSize$ = scope.behavior(
+    showFooter$.pipe(map((showFooter) => (showFooter ? "lg" : "sm"))),
+  );
+  /**
+   * The alignment of the small picture-in-picture tile, if present, when in portrait.
+   */
+  const portraitPipAlignment$ = new BehaviorSubject<Alignment>({
+    inline: "end",
+    block: "end",
+  });
+  /**
+   * The alignment of the small picture-in-picture tile, if present, when in landscape.
+   */
+  const landscapePipAlignment$ = new BehaviorSubject<Alignment>({
     inline: "end",
     block: "start",
   });
-  /**
-   * State of the small picture-in-picture tile, if present, when in portrait.
-   */
-  const portraitPipTile = {
-    ...createFloatingTile(scope, { inline: "end", block: "end" }),
-    size$: scope.behavior(
-      showFooter$.pipe(map((showFooter) => (showFooter ? "lg" : "sm"))),
-    ),
-  };
 
   // There is a cyclical dependency here: the layout algorithms want to know
   // which tiles are on screen, but to know which tiles are on screen we have to
@@ -1599,7 +1603,7 @@ export function createCallViewModel$(
             case "spotlight-portrait":
               [layout, newTiles] = gridLikeLayout(
                 media,
-                floatingSpotlightTile,
+                spotlightAlignment$,
                 visibleTiles,
                 setVisibleTiles,
                 prevTiles,
@@ -1609,25 +1613,26 @@ export function createCallViewModel$(
             case "spotlight-expanded":
               [layout, newTiles] = spotlightExpandedLayout(
                 media,
-                landscapePipTile,
+                landscapePipAlignment$,
                 prevTiles,
               );
               break;
             case "one-on-one-desktop":
               [layout, newTiles] = oneOnOneDesktopLayout(
                 media,
-                landscapePipTile,
+                landscapePipAlignment$,
                 prevTiles,
               );
-              pip = layout.pip.vm;
+              pip = layout.pip;
               break;
             case "one-on-one-mobile":
               [layout, newTiles] = oneOnOneMobileLayout(
                 media,
-                portraitPipTile,
+                portraitPipSize$,
+                portraitPipAlignment$,
                 prevTiles,
               );
-              pip = layout.pip?.vm;
+              pip = layout.pip;
               break;
             case "pip":
               [layout, newTiles] = pipLayout(media, prevTiles);

src/state/CallViewModel/CallViewModelTestUtils.ts

@@ -54,7 +54,7 @@ import {
   localRtcMember,
 } from "../../utils/test-fixtures";
 import { type Behavior, constant } from "../Behavior";
-import { type ProcessorState } from "../../livekit/TrackProcessorContext";
+import { type BackgroundEffectsState } from "../../livekit/BackgroundEffectsContext";
 import { type MediaDevices } from "../MediaDevices";
 import { type MatrixRTCMode } from "../../config/ConfigOptions";
 
@@ -240,7 +240,7 @@ export function withCallViewModel(mode: MatrixRTCMode) {
       },
       raisedHands$,
       reactions$,
-      new BehaviorSubject<ProcessorState>({
+      new BehaviorSubject<BackgroundEffectsState>({
         processor: undefined,
         supported: undefined,
       }),

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

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 
 import {
   Status as RTCMemberStatus,
-  type LivekitTransportConfig,
+  type LivekitTransport,
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
 import {
@@ -121,8 +121,7 @@ const mockedClient = {
 };
 
 describe("enterRTCSession", () => {
-  const transport: LivekitTransportConfig = {
-    livekit_alias: "roomId",
+  const transport: LivekitTransport = {
     livekit_service_url: "http://my-livekit-service-url.com",
     type: "livekit",
   };
@@ -139,7 +138,7 @@ describe("enterRTCSession", () => {
       client: mockedClient,
     },
     memberships: [],
-    joinRTCSession: vi.fn(),
+    join: vi.fn(),
   }) as unknown as MatrixRTCSession;
 
   beforeEach(() =>
@@ -151,19 +150,18 @@ describe("enterRTCSession", () => {
   it("It joins the correct Session", () => {
     enterRTCSession(mockedSession, ownMemberMock, transport, options);
 
-    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
+    expect(mockedSession.join).toHaveBeenLastCalledWith(
       {
         deviceId: "DEVICE",
         memberId: "@alice:example.org:DEVICE",
         userId: "@alice:example.org",
       },
-      [],
-      transport,
+      [transport],
       expect.objectContaining({ manageMediaKeys: true }),
     );
   });
 
-  it("passes keyRotationParticipantLimit from config to joinRTCSession", () => {
+  it("passes keyRotationParticipantLimit from config to join", () => {
     mockConfig({
       livekit: { livekit_service_url: "http://my-default-service-url.com" },
       matrix_rtc_session: {
@@ -176,9 +174,8 @@ describe("enterRTCSession", () => {
 
     enterRTCSession(mockedSession, ownMemberMock, transport, options);
 
-    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
+    expect(mockedSession.join).toHaveBeenLastCalledWith(
       expect.any(Object),
-      [],
       expect.any(Object),
       expect.objectContaining({
         keyRotationParticipantLimit: 50,
@@ -189,8 +186,7 @@ describe("enterRTCSession", () => {
   it("uses the specified delayed leave timings", () => {
     enterRTCSession(mockedSession, ownMemberMock, transport, options);
 
-    expect(mockedSession.joinRTCSession).toHaveBeenLastCalledWith(
-      expect.anything(),
+    expect(mockedSession.join).toHaveBeenLastCalledWith(
       expect.anything(),
       expect.anything(),
       expect.objectContaining({
@@ -210,10 +206,10 @@ describe("LocalMembership", () => {
     }),
     matrixRTCSession: {
       updateCallIntent: vi.fn().mockReturnValue(Promise.resolve()),
-      leaveRoomSession: vi.fn(),
+      leave: vi.fn(),
     } as unknown as MatrixRTCSession,
     muteStates: mockMuteStates(),
-    trackProcessorState$: constant({
+    backgroundEffectsState$: constant({
       supported: false,
       processor: undefined,
     }),
@@ -256,7 +252,7 @@ describe("LocalMembership", () => {
 
   it("throws error on missing RTC config error", () => {
     withTestScheduler(({ scope, hot, expectObservable }) => {
-      const localTransport$ = scope.behavior<null | LivekitTransportConfig>(
+      const localTransport$ = scope.behavior<null | LivekitTransport>(
         hot("1ms #", {}, new MatrixRTCTransportMissingError("domain.com")),
         null,
       );
@@ -304,7 +300,7 @@ describe("LocalMembership", () => {
       ...defaultCreateLocalMemberValues,
       matrixRTCSession: {
         updateCallIntent: vi.fn().mockImplementation(reject),
-        leaveRoomSession: vi.fn(),
+        leave: vi.fn(),
       },
       connectionManager: mockConnectionManager,
       localTransport$: constant(mockTransport),
@@ -321,7 +317,7 @@ describe("LocalMembership", () => {
 
   const mockTransportConfig = {
     livekit_service_url: "a",
-  } as LivekitTransportConfig;
+  } as LivekitTransport;
 
   const mockTransport = {
     transport: mockTransportConfig,

src/state/CallViewModel/localMember/LocalMember.ts

@@ -19,7 +19,6 @@ import { type MatrixClient } from "matrix-js-sdk";
 import {
   Status as RTCSessionStatus,
   type LivekitTransport,
-  type LivekitTransportConfig,
   type MatrixRTCSession,
   type RTCCallIntent,
   type RTCNotificationType,
@@ -144,7 +143,7 @@ interface Props {
   connectionManager: IConnectionManager;
   createPublisherFactory: (connection: Connection) => Publisher;
   joinMatrixRTC: (
-    transport: LivekitTransportConfig,
+    transport: LivekitTransport,
     delayedLeaveTimings: ResolvedDelayedLeaveTimings,
   ) => void;
   homeserverConnected: HomeserverConnected;
@@ -152,10 +151,7 @@ interface Props {
   ownMembershipIdentity: CallMembershipIdentityParts;
   localTransport$: Observable<LocalTransport>;
   client: Pick<MatrixClient, "getDeviceId" | "getOpenIdToken">;
-  matrixRTCSession: Pick<
-    MatrixRTCSession,
-    "updateCallIntent" | "leaveRoomSession"
-  >;
+  matrixRTCSession: Pick<MatrixRTCSession, "updateCallIntent" | "leave">;
   /** Whether to hide the screen-sharing button. */
   hideScreensharing: boolean;
   /** The application hosting Element Call, to be kept informed of join/leave. */
@@ -683,7 +679,7 @@ export const createLocalMembership$ = ({
       return Promise.resolve(async (): Promise<void> => {
         try {
           // TODO Update matrixRTCSession to allow udpating the transport without leaving the session!
-          await matrixRTCSession.leaveRoomSession(1000);
+          await matrixRTCSession.leave(1000);
         } catch (e) {
           logger.error("Error leaving RTC session", e);
         }
@@ -966,7 +962,7 @@ interface EnterRTCSessionOptions {
 export function enterRTCSession(
   rtcSession: MatrixRTCSession,
   ownMembershipIdentity: CallMembershipIdentityParts,
-  transport: LivekitTransportConfig,
+  transport: LivekitTransport,
   {
     encryptMedia,
     matrixRTCMode,
@@ -987,21 +983,6 @@ export function enterRTCSession(
     matrix_rtc_session: sessionConfig,
   } = Config.get();
   const retryInterval = sessionConfig.network_error_retry_ms;
-  const multiSFU =
-    matrixRTCMode === MatrixRTCMode.Compatibility ||
-    matrixRTCMode === MatrixRTCMode.Matrix_2_0;
-
-  // For backwards compatibility with Element Call versions that do not do Matrix 2.0,
-  // we add the livekit alias to the transport.
-  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
@@ -1014,24 +995,18 @@ export function enterRTCSession(
   // Multi-sfu does not need a preferred foci list. just the focus that is actually used.
   // TODO where/how do we track errors originating from the ongoing rtcSession?
 
-  rtcSession.joinRTCSession(
-    ownMembershipIdentity,
-    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,
-    },
-  );
+  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,
+  });
 }

src/state/CallViewModel/localMember/LocalTransport.ts

@@ -5,7 +5,7 @@ SPDX-License-IdFentifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
+import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 import { type MatrixClient } from "matrix-js-sdk";
 import { logger as rootLogger, type Logger } from "matrix-js-sdk/lib/logger";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
@@ -34,34 +34,13 @@ interface Props {
   matrixRTCMode: MatrixRTCMode;
 }
 
-// TODO livekit_alias-cleanup
-// 1. We need to move away from transports map to connections!!!
-//
-// 2. We need to stop sending livekit_alias all together
-//
-//
-// 1.
-// Transports are just the jwt service adress but do not contain the information which room on this transport to use.
-// That requires slot and roomId.
-//
-// We need one connection per room on the transport.
-//
-// We need an object that contains:
-// transport
-// roomId
-// slotId
-//
-// To map to the connections. Prosposal: `ConnectionIdentifier`
-//
-// 2.
-// We need to make sure we do not sent livekit_alias in sticky events and that we drop all code for sending state events!
 export interface LocalTransport {
-  transport: LivekitTransportConfig;
+  transport: LivekitTransport;
   sfuConfig: SFUConfig;
 }
 
 export function isLocalTransport(
-  obj: LivekitTransportConfig | LocalTransport,
+  obj: LivekitTransport | LocalTransport,
 ): obj is LocalTransport {
   return "transport" in obj && "sfuConfig" in obj;
 }
@@ -90,7 +69,7 @@ export async function getLocalTransport({
   const customUrl = customLivekitUrl.value$.value;
 
   // Respect the user's custom URL, if set
-  const transport: LivekitTransportConfig | null = customUrl
+  const transport: LivekitTransport | null = customUrl
     ? { type: "livekit", livekit_service_url: customUrl }
     : await discovery.discoverPreferredTransport();
 
@@ -131,7 +110,7 @@ export async function getLocalTransport({
  *  @throws FailToGetOpenIdToken, NoMatrix2AuthorizationService
  */
 async function doOpenIdAndJWTFromUrl(
-  transport: LivekitTransportConfig,
+  transport: LivekitTransport,
   matrixRTCMode: MatrixRTCMode,
   membership: CallMembershipIdentityParts,
   roomId: string,

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

@@ -11,11 +11,16 @@ import {
   LocalParticipant,
   type LocalTrack,
   type LocalTrackPublication,
+  LocalVideoTrack,
   ParticipantEvent,
   Track,
 } from "livekit-client";
 import { BehaviorSubject } from "rxjs";
 import { logger } from "matrix-js-sdk/lib/logger";
+import {
+  type BackgroundOptions,
+  type ProcessorWrapper,
+} from "@livekit/track-processors";
 
 import { ObservableScope } from "../../ObservableScope";
 import { constant } from "../../Behavior";
@@ -25,6 +30,7 @@ import {
   mockMediaDevices,
 } from "../../../utils/test";
 import { Publisher } from "./Publisher";
+import { type BackgroundEffectsState } from "../../../livekit/BackgroundEffectsContext";
 import { type Connection } from "../remoteMembers/Connection";
 import { type MuteStates } from "../../MuteStates";
 
@@ -400,3 +406,67 @@ describe("Bug fix", () => {
     await publisher.destroy();
   });
 });
+
+describe("turning the camera on with an effect chosen", () => {
+  const processor = {} as ProcessorWrapper<BackgroundOptions>;
+  let state$: BehaviorSubject<BackgroundEffectsState>;
+  let publisher: Publisher;
+  /** The processor the SDK would give each camera track it made. */
+  let madeWith: unknown[];
+
+  beforeEach(() => {
+    state$ = new BehaviorSubject<BackgroundEffectsState>({
+      supported: true,
+      processor: undefined,
+    });
+    publisher = new Publisher(
+      connection,
+      mockMediaDevices({}),
+      muteStates,
+      state$,
+      logger,
+      false,
+    );
+    madeWith = [];
+    vi.spyOn(localParticipant, "setCameraEnabled").mockImplementation(
+      async () => {
+        madeWith.push(
+          connection.livekitRoom.options.videoCaptureDefaults?.processor,
+        );
+        return Promise.resolve(undefined);
+      },
+    );
+    vi.spyOn(localParticipant, "unpublishTrack").mockResolvedValue(undefined);
+  });
+  afterEach(async () => {
+    await publisher.destroy();
+  });
+
+  it("makes each camera track with the pipeline attached since", async () => {
+    await publisher.createAndSetupTracks();
+    state$.next({ supported: true, processor });
+    videoEnabled$.next(true);
+    await flushPromises();
+
+    expect(madeWith).toEqual([processor]);
+  });
+
+  it("replaces a camera track turned off before the effect was chosen", async () => {
+    state$.next({ supported: true, processor });
+    const stopped = Object.assign(Object.create(LocalVideoTrack.prototype), {
+      source: Track.Source.Camera,
+      getProcessor: (): undefined => undefined,
+    }) as LocalVideoTrack;
+    trackPublications.push({
+      track: stopped,
+      source: Track.Source.Camera,
+    } as Partial<LocalTrackPublication> as LocalTrackPublication);
+
+    await publisher.createAndSetupTracks();
+    videoEnabled$.next(true);
+    await flushPromises();
+
+    expect(localParticipant.unpublishTrack).toHaveBeenCalledWith(stopped);
+    expect(madeWith).toEqual([processor]);
+  });
+});

src/state/CallViewModel/localMember/Publisher.ts

@@ -26,9 +26,9 @@ import type { Behavior } from "../../Behavior.ts";
 import type { MediaDevices, SelectedDevice } from "../../MediaDevices.ts";
 import type { MuteStates } from "../../MuteStates.ts";
 import {
-  type ProcessorState,
-  trackProcessorSync,
-} from "../../../livekit/TrackProcessorContext.tsx";
+  type BackgroundEffectsState,
+  syncBackgroundEffects,
+} from "../../../livekit/BackgroundEffectsContext.tsx";
 
 import { observeTrackReference$ } from "../../observeTrackReference";
 import { type Connection } from "../remoteMembers/Connection.ts";
@@ -54,7 +54,7 @@ export class Publisher {
    * @param connection - The connection to use for publishing.
    * @param devices - The media devices to use for audio and video input.
    * @param muteStates - The mute states for audio and video.
-   * @param trackerProcessorState$ - The processor state for the video track processor (e.g. background blur).
+   * @param backgroundEffectsState$ - The processor state for the video track processor (e.g. background blur).
    * @param logger - The logger to use for logging :D.
    * @param controlledAudioDevices - Whether the app hosting Element Call
    *   controls the audio output devices, rather than the browser.
@@ -63,7 +63,7 @@ export class Publisher {
     private connection: Pick<Connection, "livekitRoom" | "state$">, //setE2EEEnabled,
     devices: MediaDevices,
     private readonly muteStates: MuteStates,
-    trackerProcessorState$: Behavior<ProcessorState>,
+    private readonly backgroundEffectsState$: Behavior<BackgroundEffectsState>,
     private logger: Logger,
     controlledAudioDevices: boolean,
   ) {
@@ -73,8 +73,11 @@ export class Publisher {
       this.logger.error("Failed to set E2EE enabled on room", e);
     });
 
-    // Setup track processor syncing (blur)
-    this.observeTrackProcessors(this.scope, room, trackerProcessorState$);
+    this.observeBackgroundEffects(
+      this.scope,
+      room,
+      this.backgroundEffectsState$,
+    );
     // Observe media device changes and update LiveKit active devices accordingly
     this.observeMediaDevices(this.scope, devices, controlledAudioDevices);
 
@@ -412,6 +415,8 @@ export class Publisher {
     this.muteStates.video.setHandler(async (enable) => {
       try {
         this.logger.debug(`handler: Setting LiveKit camera enabled: ${enable}`);
+        const { processor } = this.backgroundEffectsState$.value;
+        if (enable && processor) await this.dropCameraWithoutEffect(lkRoom);
         await lkRoom.localParticipant.setCameraEnabled(enable);
         // Unmute will restart the track if it was paused upstream,
         // but until explicitly requested, we want to keep it paused.
@@ -426,10 +431,23 @@ export class Publisher {
     });
   }
 
-  private observeTrackProcessors(
+  /**
+   * Unpublishes a camera track that has no effect on, so that turning the
+   * camera on creates one with it. A camera turned off is stopped, and a
+   * stopped track can't take an effect chosen while it was off.
+   */
+  private async dropCameraWithoutEffect(lkRoom: LivekitRoom): Promise<void> {
+    const track = lkRoom.localParticipant.getTrackPublication(
+      Track.Source.Camera,
+    )?.track;
+    if (track instanceof LocalVideoTrack && !track.getProcessor())
+      await lkRoom.localParticipant.unpublishTrack(track);
+  }
+
+  private observeBackgroundEffects(
     scope: ObservableScope,
     room: LivekitRoom,
-    trackerProcessorState$: Behavior<ProcessorState>,
+    backgroundEffectsState$: Behavior<BackgroundEffectsState>,
   ): void {
     const track$ = scope.behavior(
       observeTrackReference$(room.localParticipant, Track.Source.Camera).pipe(
@@ -440,6 +458,15 @@ export class Publisher {
       ),
       null,
     );
-    trackProcessorSync(scope, track$, trackerProcessorState$);
+    syncBackgroundEffects(scope, track$, backgroundEffectsState$);
+    // Every camera track the SDK makes, on joining or on turning the camera
+    // on, then starts with the pipeline on. One attached after publishing lets
+    // the room through while it is built.
+    backgroundEffectsState$.pipe(scope.bind()).subscribe(({ processor }) => {
+      room.options.videoCaptureDefaults = {
+        ...room.options.videoCaptureDefaults,
+        processor,
+      };
+    });
   }
 }

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

@@ -16,7 +16,7 @@ import {
 import { MatrixError } from "matrix-js-sdk";
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import {
-  type LivekitTransportConfig,
+  type LivekitTransport,
   type Transport,
 } from "matrix-js-sdk/lib/matrixrtc";
 
@@ -28,12 +28,12 @@ import {
 
 type DiscoveryClient = RtcTransportAutoDiscoveryProps["client"];
 
-const backendTransport: LivekitTransportConfig = {
+const backendTransport: LivekitTransport = {
   type: "livekit",
   livekit_service_url: "https://backend.example.org",
 };
 
-const configTransport: LivekitTransportConfig = {
+const configTransport: LivekitTransport = {
   type: "livekit",
   livekit_service_url: "https://config.example.org",
 };