Add the old useBehavior implementation as reference

Use a generic instead of a type assertion in useRoomEncryptionSystem

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

@@ -60,12 +60,18 @@ const IS_ROOT = `:where(${ROOT_SELECTOR})`;
  * tokens, the component styles, the fonts — is not in this build at all: the
  * host supplies it, unscoped, along with its copy of Compound.
  */
-export function scopeStylesToRoot(): Plugin {
+interface Options {
+  /** Stylesheets left as they are: a host's own, which it doesn't scope. */
+  exclude?: RegExp[];
+}
+
+export function scopeStylesToRoot({ exclude = [] }: Options = {}): Plugin {
   return {
     postcssPlugin: "element-call-scope-styles-to-root",
     Once(root) {
-      const isModule =
-        root.source?.input.file?.endsWith(".module.css") ?? false;
+      const file = root.source?.input.file ?? "";
+      if (exclude.some((pattern) => pattern.test(file))) return;
+      const isModule = file.endsWith(".module.css");
       root.walkRules((rule) => {
         if (isRelative(rule)) return;
         rule.selector = (isModule ? scopeBare : scopeAll).processSync(

docker-compose-dev.yml

@@ -63,7 +63,7 @@ services:
       - ecbackend
 
   livekit:
-    image: livekit/livekit-server:v1.13.11
+    image: livekit/livekit-server:v1.13.4
     pull_policy: always
     hostname: livekit-sfu
     command: --dev --config /etc/livekit.yaml
@@ -86,7 +86,7 @@ services:
       - ecbackend
 
   livekit-1:
-    image: livekit/livekit-server:v1.13.11
+    image: livekit/livekit-server:v1.13.4
     pull_policy: always
     hostname: livekit-sfu-1
     command: --dev --config /etc/livekit.yaml

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:60ff0513da71c7641843f4e55b45cf56ae9a18c20f0ed690ef384d4e670d61f0
+    image: ghcr.io/element-hq/element-web:develop@sha256:fc21073b3c20c5a80aab6787dcbf1ddb3ed416eabf7fdfd32a7f4cabc47b7846
   element-web-1:
     # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
-    image: ghcr.io/element-hq/element-web:develop@sha256:60ff0513da71c7641843f4e55b45cf56ae9a18c20f0ed690ef384d4e670d61f0
+    image: ghcr.io/element-hq/element-web:develop@sha256:fc21073b3c20c5a80aab6787dcbf1ddb3ed416eabf7fdfd32a7f4cabc47b7846

embedded/android/gradle/libs.versions.toml

@@ -9,4 +9,4 @@ android_gradle_plugin = { module = "com.android.tools.build:gradle", version.ref
 
 [plugins]
 android_library = { id = "com.android.library", version.ref = "android_gradle_plugin" }
-maven_publish = { id = "com.vanniktech.maven.publish", version = "0.36.0" }
+maven_publish = { id = "com.vanniktech.maven.publish", version = "0.37.0" }

embedded/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.5-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.6-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

localazy.json

@@ -7,13 +7,13 @@
     "features": ["plural_postfix_us", "filter_untranslated"],
     "files": [
       {
-        "pattern": "locales/en/*.json",
+        "pattern": "locales/en/app.json",
         "lang": "inherited"
       },
       {
         "group": "existing",
-        "pattern": "locales/*/*.json",
-        "excludes": ["locales/en/*.json"],
+        "pattern": "locales/*/app.json",
+        "excludes": ["locales/en/app.json"],
         "lang": "${autodetectLang}"
       }
     ]
@@ -22,6 +22,7 @@
   "download": {
     "files": [
       {
+        "conditions": ["equals: ${file}, app.json"],
         "output": "locales/${langLsrDash}/${file}"
       }
     ],

package.json

@@ -54,11 +54,11 @@
     "@codecov/vite-plugin": "^1.3.0",
     "@fontsource/inconsolata": "^5.1.0",
     "@fontsource/inter": "^5.1.0",
-    "@formatjs/intl-durationformat": "^0.11.0",
+    "@formatjs/intl-durationformat": "^0.10.0",
     "@formatjs/intl-segmenter": "^11.7.3",
     "@livekit/components-core": "^0.12.0",
     "@livekit/components-react": "^2.0.0",
-    "@livekit/track-processors": "^0.8.0",
+    "@livekit/track-processors": "^0.7.1",
     "@mediapipe/tasks-vision": "^0.10.18",
     "@playwright/test": "^1.60.0",
     "@radix-ui/react-dialog": "^1.0.4",
@@ -88,11 +88,11 @@
     "@typescript-eslint/utils": "^8.61.0",
     "@use-gesture/react": "^10.2.11",
     "@vector-im/compound-design-tokens": "^11.0.0",
-    "@vector-im/compound-web": "^10.4.0",
+    "@vector-im/compound-web": "^10.5.0",
     "@vitejs/plugin-react": "^6.0.2",
     "@vitest/browser-playwright": "^4.1.5",
     "@vitest/coverage-v8": "^4.0.18",
-    "@vitest/ui": "4.1.12",
+    "@vitest/ui": "4.1.11",
     "babel-plugin-react-compiler": "^1.0.0",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.3",
@@ -111,7 +111,7 @@
     "matrix-widget-api": "^1.18.0",
     "node-stdlib-browser": "^1.3.1",
     "normalize.css": "^8.0.1",
-    "oxfmt": "^0.74.0",
+    "oxfmt": "^0.66.0",
     "oxlint": "^1.70.0",
     "oxlint-tsgolint": "^0.25.0",
     "pako": "^2.0.4",

playwright/component/component-call.spec.ts

@@ -125,25 +125,24 @@ test("leaves the host's own page unstyled", async ({ page }) => {
     timeout: 60_000,
   });
 
-  // Element Call's stylesheet is written for a page of its own: normalize.css
-  // gives `html` a line height, Compound gives `body` its font and feature
-  // settings, and the design tokens live on `:root`. None of that may reach the
-  // host's document — the harness sets none of these itself, so anything other
-  // than the browser's defaults here came from us.
+  // Element Call's page-wide CSS (normalize.css and the tokens in base.css)
+  // should not reach the host's page. Compound CSS that gets loaded to EW (host)
+  // on the other hand should impact the host. So probe with styles only Element Call sets:
+  // - A fresh <sub> keeps the browser's `vertical-align: sub` unless
+  //   normalize.css leaked; it turns that into `baseline`.
+  // - `--font-scale` is Element Call's own token, so `:root` must not have it.
   const host = await page.evaluate(() => {
-    const html = getComputedStyle(document.documentElement);
-    const body = getComputedStyle(document.body);
+    const sub = document.body.appendChild(document.createElement("sub"));
+    const verticalAlign = getComputedStyle(sub).verticalAlign;
+    sub.remove();
     return {
-      lineHeight: html.lineHeight,
-      fontFeatureSettings: body.fontFeatureSettings,
-      token: html.getPropertyValue("--cpd-color-text-primary"),
+      verticalAlign,
+      token: getComputedStyle(document.documentElement).getPropertyValue(
+        "--font-scale",
+      ),
     };
   });
-  expect(host).toEqual({
-    lineHeight: "normal",
-    fontFeatureSettings: "normal",
-    token: "",
-  });
+  expect(host).toEqual({ verticalAlign: "sub", token: "" });
 
   // While inside the container, the same rules do apply
   const root = panes.first().locator("[data-element-call-root]");

src/components/MediaMuteAndSwitchButton.module.css

@@ -36,20 +36,15 @@ Please see LICENSE in the repository root for full details.
   }
 }
 
+/* The width design sets: a long device name wraps. */
 .menu {
-  display: flex;
-  flex-direction: column;
+  inline-size: 296px;
 }
 
-/* Only the device lists scroll, bounded by the measured call area: the menu is
-   portalled out of the root, so CSS can't size it against the call. */
+/* Its share of the measured call area: the menu is portalled out of the root,
+   so CSS can't size it against the call. */
 .deviceList {
-  overflow-y: auto;
-  min-block-size: 0;
   max-block-size: var(--device-list-max-height);
-  /* Keeps a row reached by keyboard clear of the sticky heading and meter. */
-  scroll-padding-block: var(--device-list-scroll-padding-start, 0)
-    var(--device-list-scroll-padding-end, 0);
 }
 
 /* Compound's heading rule heads each section; the design adds space below it. */
@@ -62,25 +57,6 @@ Please see LICENSE in the repository root for full details.
   margin-block-start: var(--cpd-space-7x);
 }
 
-/* Sticky within its own section. Opaque and inset a border width so it doesn't
-   paint over the menu's outline. */
-.sectionHeading {
-  position: sticky;
-  inset-block-start: 0;
-  background: var(--cpd-color-bg-canvas-default);
-  margin-inline: var(--cpd-border-width-1);
-  margin-block-start: var(--cpd-border-width-1);
-}
-
-/* Sticky at the foot of the microphone section; opaque and inset as above. */
-.stickyMeter {
-  position: sticky;
-  inset-block-end: 0;
-  background: var(--cpd-color-bg-canvas-default);
-  margin-inline: var(--cpd-border-width-1);
-  margin-block-end: var(--cpd-border-width-1);
-}
-
 /* Radix focuses whatever the pointer is over, so the browser's ring would
    follow the mouse. Replaced by one shown only for keyboard focus. */
 .menu [role^="menuitem"]:focus,

src/components/MediaMuteAndSwitchButton.stories.tsx

@@ -65,8 +65,10 @@ const WithACallArea: FC<{ children: ReactNode }> = ({ children }) => {
     <div
       ref={setCallArea}
       style={{
-        // A call's size: anything smaller makes a short device list scroll.
+        // A call's size: anything smaller makes a short device list scroll, and
+        // a narrower one narrows the menu.
         blockSize: 720,
+        inlineSize: 1024,
         display: "flex",
         alignItems: "flex-end",
         justifyContent: "center",
@@ -97,6 +99,10 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+// By place: Compound's section heading is aria-hidden, as its group carries
+// the name.
+const SECTION_HEADING = "[role='group'] > [aria-hidden]";
+
 export const Default: Story = {
   args: {
     iconsAndLabels: "audio",
@@ -219,9 +225,8 @@ export const SpeakerAndMicrophoneSections: Story = {
     await expect(
       document.body.querySelectorAll("[role='separator']"),
     ).toHaveLength(0);
-    const headings = document.body.querySelectorAll<HTMLElement>(
-      `.${styles.sectionHeading}`,
-    );
+    const headings =
+      document.body.querySelectorAll<HTMLElement>(SECTION_HEADING);
     await expect(headings).toHaveLength(2);
     const frame = menu.getBoundingClientRect();
     for (const heading of headings) {
@@ -256,6 +261,37 @@ export const SpeakerAndMicrophoneSections: Story = {
   },
 };
 
+/** A long name wraps rather than widening the menu, which design sets. */
+export const LongDeviceNameWraps: Story = {
+  args: {
+    ...SpeakerAndMicrophoneSections.args,
+    outputOptions: [
+      {
+        label: {
+          type: "name",
+          name: "Logitech BRIO 4K Ultra HD Pro Business Webcam Speakers (046d:085e)",
+        },
+        id: "long",
+      },
+      { label: { type: "name", name: "Headset" }, id: "spk2" },
+    ],
+    selectedOutputOption: "long",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
+    const body = within(document.body);
+    const long = await body.findByRole("menuitemradio", { name: /Logitech/ });
+    const short = await body.findByRole("menuitemradio", { name: "Headset" });
+
+    const menu = document.body.querySelector("[role='menu']")!;
+    await expect(Math.round(menu.getBoundingClientRect().width)).toBe(296);
+    await expect(long.getBoundingClientRect().height).toBeGreaterThan(
+      short.getBoundingClientRect().height,
+    );
+  },
+};
+
 export const OutputCannotBeChosen: Story = {
   args: {
     ...Default.args,
@@ -402,14 +438,14 @@ export const ManyDevices: Story = {
     await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
     const menu = within(document.body);
 
-    // The sticky wrapper rather than the meter: without a fake microphone (as on
+    // The meter's box rather than its level: without a fake microphone (as on
     // WebKit) the meter shows a message instead of a level.
     const list = document.body.querySelector<HTMLElement>(
       `.${styles.deviceList}`,
     )!;
     const sticky = await waitFor(() => {
       const element = document.body.querySelector<HTMLElement>(
-        `.${styles.stickyMeter}`,
+        `.${meterStyles.meter}`,
       );
       if (element === null) throw new Error("the meter has not rendered yet");
       return element;
@@ -436,10 +472,6 @@ export const ManyDevices: Story = {
       .getBoundingClientRect();
     await expect(frame.top).toBeGreaterThanOrEqual(0);
     await expect(frame.bottom).toBeLessThanOrEqual(window.innerHeight + 1);
-
-    // The meter is the menu's one opaque part, so it must stay inside the frame.
-    await expect(pinned.left).toBeGreaterThan(frame.left);
-    await expect(pinned.right).toBeLessThan(frame.right);
   },
 };
 
@@ -536,7 +568,7 @@ export const KeyboardReachesEveryDevice: Story = {
 
     const meter = await waitFor(() => {
       const element = document.body.querySelector<HTMLElement>(
-        `.${styles.stickyMeter}`,
+        `.${meterStyles.meter}`,
       );
       if (element === null) throw new Error("the meter has not rendered yet");
       return element;
@@ -545,9 +577,7 @@ export const KeyboardReachesEveryDevice: Story = {
     // Drawn over the list: the sticky headings and the meter.
     const overlays = [
       meter,
-      ...document.body.querySelectorAll<HTMLElement>(
-        `.${styles.sectionHeading}`,
-      ),
+      ...document.body.querySelectorAll<HTMLElement>(SECTION_HEADING),
     ];
     const items = within(document.body).getAllByRole("menuitemradio");
 
@@ -591,10 +621,7 @@ export const HeadingsStayWhileScrolling: Story = {
       `.${styles.deviceList}`,
     )!;
     const group = await menu.findByRole("group", { name: "Microphone" });
-    // By class: the heading is aria-hidden, and its group carries the name.
-    const heading = group.querySelector<HTMLElement>(
-      `.${styles.sectionHeading}`,
-    )!;
+    const heading = group.querySelector<HTMLElement>(":scope > [aria-hidden]")!;
 
     // Far enough that the heading is only on screen if it is stuck there.
     list.scrollTop +=
@@ -607,13 +634,6 @@ export const HeadingsStayWhileScrolling: Story = {
     await expect(heading.getBoundingClientRect().bottom).toBeGreaterThan(
       scrollport.top,
     );
-    // Clear of the menu's frame.
-    const frame = document.body
-      .querySelector("[role='menu']")!
-      .getBoundingClientRect();
-    await expect(heading.getBoundingClientRect().left).toBeGreaterThan(
-      frame.left,
-    );
   },
 };
 

src/components/MediaMuteAndSwitchButton.tsx

@@ -17,7 +17,8 @@ import {
   Button,
   Menu,
   MenuItem,
-  MenuTitle,
+  MenuScrollArea,
+  MenuScrollSection,
   RadioInput,
   ToggleMenuItem,
 } from "@vector-im/compound-web";
@@ -84,6 +85,9 @@ const LIST_SHARE_OF_CALL = 0.6;
 /** Smallest device list height in px, so a short call still shows more than one device. */
 const MIN_LIST_HEIGHT = 160;
 
+/** Space kept between the menu and the call area's sides. */
+const MENU_MARGIN = 16;
+
 export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
   enabled,
   busy,
@@ -157,18 +161,18 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
     return (): void => subscription.unsubscribe();
   }, [menuOpen, rootElement]);
 
-  // Kept clear at the list's foot, so a row reached by keyboard isn't under
-  // the meter.
-  const [meterHeight, meter] = useMeasuredHeight();
-
-  // Likewise at its head, for the sticky headings.
-  const [headingHeight, heading] = useMeasuredHeight();
-
   useEffect(() => {
     if (menuOpen) devices.requestDeviceNames(); // No-op after the first call
   }, [menuOpen, devices]);
 
-  const MuteButton = iconsAndLabels === "audio" ? MicButton : VideoButton;
+  const audioMeter = iconsAndLabels === "audio" && (
+    <LiveMicrophoneLevelMeter
+      deviceId={selectedOption}
+      // Only while open, so the microphone isn't held all call.
+      active={menuOpen}
+    />
+  );
+  const MuteButton = audioMeter ? MicButton : VideoButton;
   const button = (
     <MuteButton
       enabled={enabled ?? false}
@@ -179,9 +183,7 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
         e.stopPropagation();
       }}
       disabled={isBusy || onMuteClick === undefined}
-      data-testid={
-        iconsAndLabels === "audio" ? "incall_mute" : "incall_videomute"
-      }
+      data-testid={audioMeter ? "incall_mute" : "incall_videomute"}
     />
   );
 
@@ -326,6 +328,8 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
         open={menuOpen}
         onOpenChange={onOpenChange}
         side="top"
+        collisionBoundary={rootElement}
+        collisionPadding={MENU_MARGIN}
         trigger={
           <Button
             iconOnly
@@ -340,66 +344,41 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
           />
         }
       >
-        <div
+        <MenuScrollArea
           ref={trackFocusSource}
-          // Keeps the items the menu's own children for assistive tech.
-          role="none"
           className={styles.deviceList}
           data-testid="device-list"
           style={
             {
               "--device-list-max-height":
                 listMaxHeight === undefined ? undefined : `${listMaxHeight}px`,
-              "--device-list-scroll-padding-end":
-                meterHeight === undefined ? undefined : `${meterHeight}px`,
-              "--device-list-scroll-padding-start":
-                headingHeight === undefined ? undefined : `${headingHeight}px`,
             } as CSSProperties
           }
         >
-          {iconsAndLabels === "audio" && speakerOptions && (
-            <>
-              {/* A menu may only contain items, separators and groups, so each
-                  heading is a hidden part of a named group. */}
-              <div role="group" aria-label={t("settings.devices.speaker")}>
-                <div aria-hidden className={styles.sectionHeading}>
-                  <MenuTitle title={t("settings.devices.speaker")} />
-                </div>
-                {deviceItems(
-                  "output",
-                  speakerOptions,
-                  selectedSpeaker,
-                  onSelectOutput,
-                  (n) => t("settings.devices.speaker_numbered", { n }),
-                )}
-              </div>
-            </>
-          )}
-          <div role="group" aria-label={optionsButtonLabel}>
-            <div ref={heading} aria-hidden className={styles.sectionHeading}>
-              <MenuTitle title={optionsButtonLabel} />
-            </div>
-            {/* Apart from the heading, so the sticky meter can't ride over it. */}
-            <div role="none">
+          {audioMeter && speakerOptions && (
+            <MenuScrollSection title={t("settings.devices.speaker")}>
               {deviceItems(
-                "input",
-                options,
-                selectedOption,
-                onSelect,
-                numberedLabel,
+                "output",
+                speakerOptions,
+                selectedSpeaker,
+                onSelectOutput,
+                (n) => t("settings.devices.speaker_numbered", { n }),
               )}
-              {iconsAndLabels === "audio" && (
-                <LiveMicrophoneLevelMeter
-                  ref={meter}
-                  deviceId={selectedOption}
-                  // Only while open, so the microphone isn't held all call.
-                  active={menuOpen}
-                  className={styles.stickyMeter}
-                />
-              )}
-            </div>
-          </div>
-        </div>
+            </MenuScrollSection>
+          )}
+          <MenuScrollSection
+            title={optionsButtonLabel}
+            stickyBottomItem={audioMeter}
+          >
+            {deviceItems(
+              "input",
+              options,
+              selectedOption,
+              onSelect,
+              numberedLabel,
+            )}
+          </MenuScrollSection>
+        </MenuScrollArea>
         {toggles.length > 0 && <hr />}
         {toggles.map((toggle) => (
           <ToggleMenuItem
@@ -416,25 +395,3 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
     </div>
   );
 };
-
-/** Follows an element's height. */
-function useMeasuredHeight(): [
-  number | undefined,
-  (element: HTMLElement | null) => (() => void) | undefined,
-] {
-  const [height, setHeight] = useState<number>();
-  const ref = useCallback(
-    (element: HTMLElement | null): (() => void) | undefined => {
-      if (element === null) return;
-      const subscription = observeElementSize$(element)
-        .pipe(
-          map((size) => size.height),
-          distinctUntilChanged(),
-        )
-        .subscribe(setHeight);
-      return (): void => subscription.unsubscribe();
-    },
-    [],
-  );
-  return [height, ref];
-}

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/MicrophoneLevelMeter.tsx

@@ -5,17 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import {
-  useCallback,
-  useLayoutEffect,
-  useRef,
-  useState,
-  type FC,
-  type Ref,
-} from "react";
+import { useCallback, useLayoutEffect, useRef, useState, type FC } from "react";
 import { Text } from "@vector-im/compound-web";
 import { MicOnIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 
 import { distinctUntilChanged, map } from "rxjs";
@@ -30,8 +22,6 @@ export interface LiveMicrophoneLevelMeterProps {
   deviceId: string | undefined;
   /** Whether to hold a capture at all. */
   active: boolean;
-  className?: string;
-  ref?: Ref<HTMLDivElement>;
 }
 
 /**
@@ -41,24 +31,18 @@ export interface LiveMicrophoneLevelMeterProps {
 export const LiveMicrophoneLevelMeter: FC<LiveMicrophoneLevelMeterProps> = ({
   deviceId,
   active,
-  className,
-  ref,
 }) => {
   const state = useMicrophoneLevel(deviceId, active);
-  return <MicrophoneLevelMeter state={state} className={className} ref={ref} />;
+  return <MicrophoneLevelMeter state={state} />;
 };
 
 export interface MicrophoneLevelMeterProps {
   state: MicrophoneState;
-  className?: string;
-  ref?: Ref<HTMLDivElement>;
 }
 
 /** The input level of a microphone, or why there is none. */
 export const MicrophoneLevelMeter: FC<MicrophoneLevelMeterProps> = ({
   state,
-  className,
-  ref,
 }) => {
   const { t } = useTranslation();
   // Bars keep one size, so their count follows the width. Starts full so the
@@ -104,7 +88,7 @@ export const MicrophoneLevelMeter: FC<MicrophoneLevelMeterProps> = ({
   }, [state, barCount, t]);
 
   return (
-    <div ref={ref} className={classNames(styles.meter, className)}>
+    <div className={styles.meter}>
       <MicOnIcon className={styles.icon} aria-hidden />
       {state.type !== "level" ? (
         <Text size="sm" className={styles.message}>

src/e2ee/sharedKeyManagement.ts

@@ -99,7 +99,7 @@ export function useRoomEncryptionSystem(roomId: string): EncryptionSystem {
   );
 
   const room = client?.getRoom(roomId);
-  const e2eeSystem = <EncryptionSystem>useMemo(() => {
+  const e2eeSystem = useMemo<EncryptionSystem>(() => {
     if (!room) return { kind: E2eeType.NONE };
     if (storedPassword)
       return {

src/useBehavior.test.tsx

@@ -8,8 +8,55 @@ Please see LICENSE in the repository root for full details.
 import { act, renderHook } from "@testing-library/react";
 import { BehaviorSubject } from "rxjs";
 import { describe, expect, test } from "vitest";
+import { useCallback, useSyncExternalStore } from "react";
 
 import { useBehavior } from "./useBehavior";
+import { type Behavior } from "./state/Behavior";
+
+/**
+ * The implementation `useBehavior` replaced, kept here as proof of why. The
+ * React Compiler (on for the tests as for the app) memoizes `getValue` on
+ * `behavior.value`, not on `behavior`:
+ *
+ *     if ($[2] !== behavior.value) { t1 = () => behavior.value; ... }
+ *
+ * So when the hook switches to a behavior that holds the same value as the
+ * prev one, `getValue` still reads the old behavior. The new behavior's
+ * emissions do reach React, but the snapshot it reads is unchanged, and the
+ * view is left stale. The lobby switches from a placeholder to the view
+ * model's camera behavior, both starting on null, which hit exactly this.
+ */
+function useBehaviorExternalStore<T>(behavior: Behavior<T>): T {
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      const s = behavior.subscribe(onChange);
+      return (): void => s.unsubscribe();
+    },
+    [behavior],
+  );
+  const getValue = useCallback(() => behavior.value, [behavior]);
+  return useSyncExternalStore(subscribe, getValue);
+}
+
+/**
+ * Renders the hook on one behavior, switches it to a second one holding the
+ * same value, and then emits on the second.
+ */
+function switchToSameValue(
+  hook: (behavior: Behavior<string | null>) => string | null,
+): string | null {
+  const first$ = new BehaviorSubject<string | null>(null);
+  const second$ = new BehaviorSubject<string | null>(null);
+  const { result, rerender } = renderHook(
+    ({ value$ }: { value$: Behavior<string | null> }) => hook(value$),
+    { initialProps: { value$: first$ } },
+  );
+  expect(result.current).toBeNull();
+
+  rerender({ value$: second$ });
+  act(() => second$.next("second"));
+  return result.current;
+}
 
 describe("useBehavior", () => {
   test("reads the current value and follows changes", () => {
@@ -20,4 +67,29 @@ describe("useBehavior", () => {
     act(() => value$.next(2));
     expect(result.current).toBe(2);
   });
+
+  test("follows a new behavior that starts on the same value", () => {
+    expect(switchToSameValue(useBehavior)).toBe("second");
+  });
+
+  test("does not follow the behavior it switched away from", () => {
+    const first$ = new BehaviorSubject<string | null>(null);
+    const second$ = new BehaviorSubject<string | null>(null);
+    const { result, rerender } = renderHook(
+      ({ value$ }: { value$: Behavior<string | null> }) => useBehavior(value$),
+      { initialProps: { value$: first$ } },
+    );
+    rerender({ value$: second$ });
+    act(() => first$.next("first"));
+    expect(result.current).toBeNull();
+  });
+});
+
+describe("useBehaviorExternalStore", () => {
+  // This asserts the bug, not the wanted behaviour: it is the reason
+  // `useBehavior` does not use `useSyncExternalStore`. Should it ever fail,
+  // the compiler has changed and the simpler implementation can come back.
+  test("misses the emission of a new behavior that starts on the same value", () => {
+    expect(switchToSameValue(useBehaviorExternalStore)).toBeNull();
+  });
 });

src/useBehavior.ts

@@ -5,21 +5,39 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { useCallback, useSyncExternalStore } from "react";
+import { useEffect, useState } from "react";
 
 import { type Behavior } from "./state/Behavior";
 
+interface Read<T> {
+  behavior: Behavior<T>;
+  value: T;
+}
+
 /**
  * React hook which reactively reads the value of a behavior.
+ *
+ * A plain subscription rather than `useSyncExternalStore`: the React Compiler
+ * memoizes a snapshot getter `() => behavior.value` on the value rather than
+ * the behavior, so a view switching to a behavior that starts on the same
+ * value (a view model arriving after the first render) kept reading the old
+ * one, and React saw no change in the new one's emissions.
  */
 export function useBehavior<T>(behavior: Behavior<T>): T {
-  const subscribe = useCallback(
-    (onChange: () => void) => {
-      const s = behavior.subscribe(onChange);
-      return (): void => s.unsubscribe();
-    },
-    [behavior],
-  );
-  const getValue = useCallback(() => behavior.value, [behavior]);
-  return useSyncExternalStore(subscribe, getValue);
+  const [read, setRead] = useState<Read<T>>(() => ({
+    behavior,
+    value: behavior.value,
+  }));
+  useEffect(() => {
+    const subscription = behavior.subscribe((value) => {
+      // By value alone: a behavior built during the render is new every
+      // time, and adopting it for the same value would render forever
+      setRead((current) =>
+        Object.is(current.value, value) ? current : { behavior, value },
+      );
+    });
+    return (): void => subscription.unsubscribe();
+  }, [behavior]);
+  // Until the subscription to a new behavior is in place, read it directly
+  return read.behavior === behavior ? read.value : behavior.value;
 }

vite-component-dev.config.ts

@@ -38,8 +38,21 @@ export default defineConfig(({ mode }) => {
     ...base,
     root: "component/dev",
     // The same scoping the library build applies, so the harness shows what a
-    // host will get — including whether its own page is left alone
-    css: { postcss: { plugins: [scopeStylesToRoot()] } },
+    // host will get — including whether its own page is left alone. The host's
+    // own stylesheets, Compound's among them, stay unscoped, as on a real host.
+    css: {
+      postcss: {
+        plugins: [
+          scopeStylesToRoot({
+            exclude: [
+              /component[\\/]dev[\\/]/,
+              /@vector-im[\\/]compound-/,
+              /@fontsource[\\/]/,
+            ],
+          }),
+        ],
+      },
+    },
     // So that the harness can read the same config.json the standalone app
     // does, if the developer has written one
     publicDir: "../../public",