Format the branch

- oxfmt over the six files the exploration added or changed.
- Wrapping only, no behaviour: the formatter is a separate CI step from
  pnpm lint, which is why it went unnoticed on the branch.

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

src/components/MediaMuteAndSwitchButton.module.css

@@ -280,8 +280,7 @@ Please see LICENSE in the repository root for full details.
 .effectCheckOnImage {
   border-radius: 50%;
   background: var(--cpd-color-bg-canvas-default);
-  box-shadow: 0 0 0 var(--cpd-border-width-2)
+  box-shadow: 0 0 0 var(--cpd-border-width-2) var(--cpd-color-bg-canvas-default);
-    var(--cpd-color-bg-canvas-default);
 }
 
 /* A menu item's label is sized for a row; in a tile the design sets it a step

src/components/MediaMuteAndSwitchButton.stories.tsx

@@ -851,8 +851,7 @@ export const BackgroundEffects: Story = {
     const radio = document.body.querySelector("input[type='radio']")!;
     const tile = document.body.querySelector(`.${styles.effectTile}`)!;
     const under = (control: Element, rule: Element): number =>
-      control.getBoundingClientRect().top -
+      control.getBoundingClientRect().top - rule.getBoundingClientRect().bottom;
-      rule.getBoundingClientRect().bottom;
     await expect(
       Math.abs(under(radio, rules[0]) - under(tile, rules[1])),
     ).toBeLessThanOrEqual(1);
@@ -940,7 +939,9 @@ export const BackgroundEffectsWithALongDeviceName: Story = {
     });
     // Three tiles to a row however wide the name makes the menu.
     const grid = none.parentElement!;
-    await expect(getComputedStyle(grid).gridTemplateColumns.split(" ")).toHaveLength(3);
+    await expect(
+      getComputedStyle(grid).gridTemplateColumns.split(" "),
+    ).toHaveLength(3);
   },
 };
 

src/components/MediaMuteAndSwitchButton.tsx

@@ -759,18 +759,19 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
               </div>
             )}
         </div>
-        {backgroundEffectError !== undefined && !refusalSeen && (
+        {backgroundEffectError !== undefined &&
-          // Outside the list, which scrolls and is bounded by the call: inside
+          !refusalSeen && (
-          // it, a message could be cut off by the menu's own height or left
+            // Outside the list, which scrolls and is bounded by the call: inside
-          // below the fold, which is no way to tell someone something failed.
+            // it, a message could be cut off by the menu's own height or left
-          <div role="none" className={styles.effectError}>
+            // below the fold, which is no way to tell someone something failed.
-            <Alert
+            <div role="none" className={styles.effectError}>
-              type="critical"
+              <Alert
-              title={backgroundEffectError}
+                type="critical"
-              onClose={(): void => setRefusalSeen(true)}
+                title={backgroundEffectError}
-            />
+                onClose={(): void => setRefusalSeen(true)}
-          </div>
+              />
-        )}
+            </div>
+          )}
         {toggles.length > 0 && <hr />}
         {toggles.map((toggle) => (
           <ToggleMenuItem

src/livekit/backgroundEffects.test.ts

@@ -49,7 +49,9 @@ describe("the blur control in settings", () => {
     serializeEffect(on ? { kind: "blur" } : { kind: "none" });
 
   test("reads as off while an image background is in force", () => {
-    expect(shows(serializeEffect({ kind: "shipped", id: "indoor" }))).toBe(false);
+    expect(shows(serializeEffect({ kind: "shipped", id: "indoor" }))).toBe(
+      false,
+    );
     expect(shows(serializeEffect({ kind: "added", id: "a-uuid" }))).toBe(false);
   });
 

src/livekit/backgroundImages.ts

@@ -53,9 +53,8 @@ async function isAnimated(file: Blob): Promise<boolean> {
   try {
     const d = new decoder({ data: await file.arrayBuffer(), type: file.type });
     await (d as { completed: Promise<void> }).completed;
-    const track = (
+    const track = (d as { tracks: { selectedTrack?: { frameCount: number } } })
-      d as { tracks: { selectedTrack?: { frameCount: number } } }
+      .tracks.selectedTrack;
-    ).tracks.selectedTrack;
     return (track?.frameCount ?? 1) > 1;
   } catch (e) {
     logger.debug("Could not read frame count, judging by type", e);
@@ -72,8 +71,7 @@ async function isAnimated(file: Blob): Promise<boolean> {
  * shape and lose the rest of the picture for good.
  */
 export async function prepareImage(file: Blob): Promise<Blob> {
-  if (!file.type.startsWith("image/"))
+  if (!file.type.startsWith("image/")) throw new UnusableImage("not-an-image");
-    throw new UnusableImage("not-an-image");
   if (await isAnimated(file)) throw new UnusableImage("animated");
 
   let bitmap: ImageBitmap;

src/settings/SettingsModal.tsx

@@ -29,10 +29,7 @@ import { PreferencesSettingsTab } from "./PreferencesSettingsTab";
 import { Slider } from "../Slider";
 import { DeviceSelection } from "./DeviceSelection";
 import { useTrackProcessor } from "../livekit/TrackProcessorContext";
-import {
+import { parseEffect, serializeEffect } from "../livekit/backgroundEffects";
-  parseEffect,
-  serializeEffect,
-} from "../livekit/backgroundEffects";
 import {
   DeveloperSettingsTab,
   type DeveloperSettingsSnapshot,