@hyperframes/studio 0.8.108 → 0.8.110

package/src/player/components/AudioGainDialog.tsx

@@ -0,0 +1,226 @@
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { audioGainToDb } from "@hyperframes/core/audio-gain";
+import type { TimelineElement } from "../store/timelineElement";
+import { usePlayerStore } from "../store/playerStore";
+import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
+import { useStudioShellContextOptional } from "../../contexts/StudioContext";
+import { measureClipSourcePeak } from "./clipPeakMap";
+import { AUDIO_GAIN_LABEL, normalizeClipsLoudness, writeClipGains } from "./audioGainApply";
+import { useAudioGainDialogStore } from "./audioGainDialogStore";
+import {
+  peakAmplitudeDb,
+  planAudioGain,
+  type AudioGainClip,
+  type AudioGainMode,
+} from "./audioGainPlan";
+
+type DialogMode = AudioGainMode | "loudness";
+
+const PEAK_MODES: ReadonlySet<DialogMode> = new Set(["normalize-max", "normalize-all"]);
+
+const ROWS: ReadonlyArray<{ mode: AudioGainMode; label: string }> = [
+  { mode: "set", label: "Set Gain to" },
+  { mode: "adjust", label: "Adjust Gain by" },
+  { mode: "normalize-max", label: "Normalize Max Peak to" },
+  { mode: "normalize-all", label: "Normalize All Peaks to" },
+];
+
+const keyOf = (el: TimelineElement) => el.key ?? el.id;
+const currentGainDb = (el: TimelineElement | undefined) => {
+  const gain = el?.volume ?? 1;
+  return gain > 0 ? Math.round(audioGainToDb(gain) * 10) / 10 : -60;
+};
+const dbText = (db: number) => `${db < 0 ? "−" : ""}${Math.abs(db).toFixed(1)} dB`;
+
+function useSourcePeaks(elements: readonly TimelineElement[], projectId: string | null) {
+  const [peaks, setPeaks] = useState<Map<string, number | null> | null>(null);
+  useEffect(() => {
+    if (!projectId) return;
+    let live = true;
+    void Promise.all(elements.map((el) => measureClipSourcePeak(el, projectId))).then((found) => {
+      if (live) setPeaks(new Map(elements.map((el, i) => [keyOf(el), found[i] ?? null])));
+    });
+    return () => {
+      live = false;
+    };
+  }, [elements, projectId]);
+  return peaks;
+}
+
+function Row({
+  checked,
+  disabled,
+  label,
+  onSelect,
+  children,
+}: {
+  checked: boolean;
+  disabled?: boolean;
+  label: string;
+  onSelect: () => void;
+  children?: ReactNode;
+}) {
+  return (
+    <label
+      className={`flex items-center justify-between gap-3 py-1 ${disabled ? "opacity-40" : ""}`}
+    >
+      <span className="flex items-center gap-2">
+        <input
+          type="radio"
+          name="audio-gain-mode"
+          checked={checked}
+          disabled={disabled}
+          onChange={onSelect}
+        />
+        {label}
+      </span>
+      {children}
+    </label>
+  );
+}
+
+/** Premiere's Audio Gain dialog for the clips the store names. */
+export function AudioGainDialog({
+  elements,
+  onClose,
+}: {
+  elements: readonly TimelineElement[];
+  onClose: () => void;
+}) {
+  const shell = useStudioShellContextOptional();
+  const edit = useTimelineEditContextOptional();
+  const sessionProjectId = usePlayerStore((s) => s.timelineProjectId);
+  const projectId = shell?.projectId ?? sessionProjectId;
+  const showToast = shell?.showToast ?? edit.onNotice;
+  const peaks = useSourcePeaks(elements, projectId);
+  const [mode, setMode] = useState<DialogMode>("adjust");
+  const [values, setValues] = useState<Record<AudioGainMode, number>>(() => ({
+    set: currentGainDb(elements[0]),
+    adjust: 0,
+    "normalize-max": 0,
+    "normalize-all": 0,
+  }));
+  const clips: AudioGainClip[] = elements.map((el) => ({
+    key: keyOf(el),
+    gain: el.volume ?? 1,
+    sourcePeak: peaks?.get(keyOf(el)) ?? null,
+  }));
+  const peakDb = peakAmplitudeDb(clips);
+  const outOfRange = PEAK_MODES.has(mode) && mode !== "loudness" && values[mode] > 0;
+  const canApply = !outOfRange && !(PEAK_MODES.has(mode) && peakDb === null);
+
+  const apply = async () => {
+    if (!canApply) return;
+    onClose();
+    try {
+      if (mode === "loudness") {
+        if (!projectId) return;
+        showToast?.(await normalizeClipsLoudness(projectId, elements, edit), "info");
+        return;
+      }
+      const byKey = new Map(elements.map((el) => [keyOf(el), el]));
+      const plan = planAudioGain(clips, { mode, db: values[mode] });
+      const edits = plan.flatMap(({ key, gain }) => {
+        const element = byKey.get(key);
+        return element ? [{ element, gain }] : [];
+      });
+      await writeClipGains(edits, edit, AUDIO_GAIN_LABEL);
+    } catch (error) {
+      showToast?.(error instanceof Error ? error.message : String(error), "error");
+    }
+  };
+
+  const field = (rowMode: AudioGainMode) => (
+    <span className="flex items-center gap-1">
+      <input
+        type="number"
+        step={0.1}
+        max={PEAK_MODES.has(rowMode) ? 0 : undefined}
+        aria-label={`${ROWS.find((row) => row.mode === rowMode)?.label ?? ""} dB`}
+        value={values[rowMode]}
+        disabled={mode !== rowMode}
+        className="w-16 rounded border border-neutral-700 bg-neutral-950 px-1 text-right disabled:opacity-50"
+        onChange={(event) =>
+          setValues((prev) => ({ ...prev, [rowMode]: Number(event.target.value) || 0 }))
+        }
+      />
+      dB
+    </span>
+  );
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[300] flex items-center justify-center bg-black/50"
+      onPointerDown={(event) => event.target === event.currentTarget && onClose()}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label={AUDIO_GAIN_LABEL}
+        className="w-[340px] rounded-md border border-neutral-700 bg-neutral-900 p-4 text-xs text-neutral-200 shadow-xl"
+        onKeyDown={(event) => {
+          event.stopPropagation();
+          if (event.key === "Escape") onClose();
+          if (event.key !== "Enter") return;
+          event.preventDefault();
+          void apply();
+        }}
+      >
+        <div className="mb-3 text-sm font-medium">{AUDIO_GAIN_LABEL}</div>
+        {ROWS.map((row) => (
+          <Row
+            key={row.mode}
+            label={row.label}
+            checked={mode === row.mode}
+            disabled={PEAK_MODES.has(row.mode) && peaks !== null && peakDb === null}
+            onSelect={() => setMode(row.mode)}
+          >
+            {field(row.mode)}
+          </Row>
+        ))}
+        <Row
+          label="Normalize loudness to −16 LUFS"
+          checked={mode === "loudness"}
+          onSelect={() => setMode("loudness")}
+        />
+        <div className="mt-3 text-neutral-400" data-testid="audio-gain-peak">
+          Peak Amplitude: {peaks === null ? "measuring…" : peakDb === null ? "—" : dbText(peakDb)}
+        </div>
+        {outOfRange && <div className="mt-1 text-red-400">Peak targets must be 0 dB or lower.</div>}
+        <div className="mt-4 flex justify-end gap-2">
+          <button
+            type="button"
+            className="rounded px-3 py-1 text-neutral-300 hover:bg-neutral-800"
+            onClick={onClose}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            disabled={!canApply}
+            autoFocus
+            className="rounded bg-blue-500 px-3 py-1 text-white disabled:opacity-40"
+            onClick={() => void apply()}
+          >
+            OK
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+/** Mounted in the timeline's overlays so Studio and embedders that mount the Timeline both get it. */
+export function TimelineAudioGainOverlay() {
+  const targetKeys = useAudioGainDialogStore((s) => s.targetKeys);
+  const close = useAudioGainDialogStore((s) => s.close);
+  const elements = usePlayerStore((s) => s.elements);
+  const targets = useMemo(() => {
+    const wanted = new Set(targetKeys ?? []);
+    return elements.filter((el) => wanted.has(keyOf(el)));
+  }, [elements, targetKeys]);
+  if (!targetKeys || targets.length === 0) return null;
+  return <AudioGainDialog key={targetKeys.join("\n")} elements={targets} onClose={close} />;
+}

package/src/player/components/AudioWaveform.test.tsx

@@ -96,7 +96,7 @@ describe("AudioWaveform", () => {
     act(() => root.unmount());
   });
 
-  it("greys the clip in place when muted and draws the parent tick when linked", () => {
+  it("greys the clip in place when muted", () => {
     const host = document.createElement("div");
     host.className = "timeline-clip is-audio";
     document.body.append(host);
@@ -112,15 +112,42 @@ describe("AudioWaveform", () => {
           sessionEpoch={1}
           priority="visible"
           muted
-          linked
         />,
       );
     });
 
     expect(host.getAttribute("data-audio-muted")).toBe("true");
-    expect(host.querySelector(".timeline-audio-link")).not.toBeNull();
 
     act(() => root.unmount());
     expect(host.hasAttribute("data-audio-muted")).toBe(false);
   });
+
+  it("fills a short sound strip when the label band is dropped", () => {
+    const heights = [16, 0].map((labelInset) => {
+      const host = document.createElement("div");
+      document.body.append(host);
+      const root = createRoot(host);
+      act(() => {
+        root.render(
+          <AudioWaveform
+            audioUrl="/media/talk.mp4"
+            label=""
+            labelColor="#fff"
+            projectId="project-a"
+            sessionEpoch={1}
+            priority="visible"
+            {...(labelInset === 16 ? {} : { labelInset })}
+          />,
+        );
+      });
+      const canvas = host.querySelector("canvas");
+      const box = { top: canvas?.style.top, height: canvas?.style.height };
+      act(() => root.unmount());
+      return box;
+    });
+    expect(heights).toEqual([
+      { top: "16px", height: "calc(100% - 16px)" },
+      { top: "0px", height: "calc(100% - 0px)" },
+    ]);
+  });
 });

package/src/player/components/AudioWaveform.tsx

@@ -18,8 +18,7 @@ export interface AudioWaveformProps {
   priority: ThumbnailPriority;
   /** `data-hidden` or a muted audio group. Greys the pill; the clip stays. */
   muted?: boolean;
-  /** Same media file as a video clip. Draws the 1px parent tick. */
-  linked?: boolean;
+  labelInset?: number;
 }
 
 const BAR_STEP = 3;
@@ -167,7 +166,7 @@ export const AudioWaveform = memo(function AudioWaveform({
   sessionEpoch,
   priority,
   muted = false,
-  linked = false,
+  labelInset = 16,
 }: AudioWaveformProps) {
   const rootRef = useRef<HTMLDivElement | null>(null);
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
@@ -236,17 +235,17 @@ export const AudioWaveform = memo(function AudioWaveform({
 
   return (
     <div ref={rootRef} className="absolute inset-0">
-      {linked ? <span className="timeline-audio-link" aria-hidden="true" /> : null}
       <div className="absolute inset-0 overflow-hidden" style={{ zIndex: 10 }}>
         <canvas
           ref={setCanvasRef}
           className="absolute inset-x-0 bottom-0 w-full"
-          style={{ top: 16, height: "calc(100% - 16px)" }}
+          style={{ top: labelInset, height: `calc(100% - ${labelInset}px)` }}
         />
         {snapshot.status === "loading" && (
           <div
-            className="absolute inset-x-0 bottom-0 top-4 animate-pulse"
+            className="absolute inset-x-0 bottom-0 animate-pulse"
             style={{
+              top: labelInset,
               background: "var(--timeline-thumbnail-shimmer)",
             }}
           />
@@ -256,7 +255,7 @@ export const AudioWaveform = memo(function AudioWaveform({
         {snapshot.status === "error" && (
           <div
             className="absolute inset-x-0 flex items-center justify-center gap-1.5"
-            style={{ top: 16, bottom: 0 }}
+            style={{ top: labelInset, bottom: 0 }}
           >
             <div
               className="absolute inset-x-0"

package/src/player/components/ClipBadges.test.tsx

@@ -2,7 +2,7 @@
 
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import type { TimelineElement } from "../store/playerStore";
 import { usePreviewIframeStore } from "../store/previewIframeStore";
 import { ClipBadges } from "./ClipBadges";
@@ -54,29 +54,53 @@ function mountPreview(html: string): Document {
 }
 
 describe("ClipBadges", () => {
-  it("renders nothing for an untouched clip", () => {
+  it("shows a grey fx badge and no volume on an untouched clip", () => {
     render(talk);
-    expect(document.querySelector("[data-testid='clip-badges']")).toBeNull();
+    expect(labels()).toEqual(["fx:fx"]);
+    const fx = document.querySelector("[data-badge='fx']");
+    expect(fx?.getAttribute("data-fx-active")).toBe("false");
+    expect(fx?.getAttribute("title")).toBe("No effects");
   });
 
   it("falls back to the store's volume without a preview", () => {
     render({ ...talk, volume: 1.8 });
-    expect(labels()).toEqual(["volume:180%"]);
+    expect(labels()).toEqual(["volume:180%", "fx:fx"]);
   });
 
-  it("reads the live node and follows an agent's attribute edit", async () => {
+  it("lights the fx badge from the live node, lists the effects, and shows no link badge", async () => {
     const doc = mountPreview(
       `<video id="talk" data-has-audio="true" data-link="talk-pair" style="clip-path: inset(10px)"></video>`,
     );
     render(talk);
-    expect(labels()).toEqual(["link:🔗", "crop:Crop"]);
+    const fx = () => document.querySelector("[data-badge='fx']");
+    expect(labels()).toEqual(["fx:fx"]);
+    expect(fx()?.getAttribute("data-fx-active")).toBe("true");
+    expect(fx()?.getAttribute("title")).toBe("Crop");
     const node = doc.getElementById("talk");
     await act(async () => {
       node?.setAttribute("data-color-grading", '{"preset":"warm-daylight","intensity":1}');
       node?.setAttribute("data-volume", "0.6");
       await new Promise((resolve) => setTimeout(resolve, 0));
     });
-    expect(labels()).toEqual(["link:🔗", "look:Warm daylight", "crop:Crop", "more:+1"]);
-    expect(document.querySelector("[data-badge='more']")?.getAttribute("title")).toBe("60%");
+    expect(labels()).toEqual(["volume:60%", "fx:fx"]);
+    expect(fx()?.getAttribute("title")).toBe("Look: Warm daylight · Crop");
+  });
+
+  it("opens the clip menu from the fx badge without reaching the clip", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const onOpenMenu = vi.fn();
+    const onClipClick = vi.fn();
+    root = createRoot(host);
+    act(() =>
+      root?.render(
+        <div onClick={onClipClick}>
+          <ClipBadges el={talk} onOpenMenu={onOpenMenu} />
+        </div>,
+      ),
+    );
+    act(() => document.querySelector<HTMLElement>("[data-badge='fx']")?.click());
+    expect(onOpenMenu).toHaveBeenCalledTimes(1);
+    expect(onClipClick).not.toHaveBeenCalled();
   });
 });

package/src/player/components/ClipBadges.tsx

@@ -1,6 +1,6 @@
-import { memo } from "react";
+import { memo, type MouseEvent } from "react";
 import type { TimelineElement } from "../store/playerStore";
-import { readClipBadges, splitVisibleBadges, type ClipBadge } from "./clipToolAttrs";
+import { clipVolumeBadge, readClipEffects } from "./clipToolAttrs";
 import { useClipToolState } from "./useClipToolState";
 
 function SpeakerGlyph({ muted }: { muted: boolean }) {
@@ -21,47 +21,53 @@ function SpeakerGlyph({ muted }: { muted: boolean }) {
   );
 }
 
-function BadgeContent({ badge }: { badge: ClipBadge }) {
-  if (badge.kind === "link") return <span aria-hidden="true">🔗</span>;
-  if (badge.kind === "volume") {
-    const muted = badge.label === "Muted";
-    return (
-      <>
-        <SpeakerGlyph muted={muted} />
-        {muted ? null : <span>{badge.label}</span>}
-      </>
-    );
-  }
-  return <span>{badge.label}</span>;
-}
-
 const BADGE_CLASS =
-  "inline-flex items-center gap-0.5 rounded-[3px] border border-white/20 bg-black/55 px-1 text-[9px] leading-[14px] text-white/90 whitespace-nowrap";
+  "timeline-clip__badge inline-flex items-center gap-0.5 rounded-[3px] border bg-black/55 px-1 text-[9px] leading-[14px] whitespace-nowrap";
+const FX_ON = "border-white/40 text-white font-semibold";
+const FX_OFF = "border-white/10 text-white/35";
 
-/** What is applied to a clip, read from its attributes: a link badge, then at most two more and `+N`. */
-export const ClipBadges = memo(function ClipBadges({ el }: { el: TimelineElement }) {
+/** Premiere's fx badge — grey with no effects, white with any; hover lists them, click opens the clip menu. */
+export const ClipBadges = memo(function ClipBadges({
+  el,
+  onOpenMenu,
+}: {
+  el: TimelineElement;
+  onOpenMenu?: (event: MouseEvent) => void;
+}) {
   const state = useClipToolState(el);
-  const { visible, hidden } = splitVisibleBadges(readClipBadges(state));
-  if (visible.length === 0) return null;
+  const effects = readClipEffects(state);
+  const volume = clipVolumeBadge(state);
+  const hasEffects = effects.length > 0;
+  const openMenu = (event: MouseEvent) => {
+    event.stopPropagation();
+    onOpenMenu?.(event);
+  };
   return (
     <span
       className="pointer-events-none absolute right-1.5 top-0.5 z-[3] flex gap-1"
       data-testid="clip-badges"
     >
-      {visible.map((badge) => (
-        <span key={badge.kind} className={BADGE_CLASS} title={badge.label} data-badge={badge.kind}>
-          <BadgeContent badge={badge} />
-        </span>
-      ))}
-      {hidden.length > 0 && (
+      {volume && (
         <span
-          className={`${BADGE_CLASS} pointer-events-auto`}
-          title={hidden.map((badge) => badge.label).join(", ")}
-          data-badge="more"
+          className={`${BADGE_CLASS} border-white/20 text-white/90`}
+          title={volume}
+          data-badge="volume"
         >
-          +{hidden.length}
+          <SpeakerGlyph muted={volume === "Muted"} />
+          {volume === "Muted" ? null : <span>{volume}</span>}
         </span>
       )}
+      <span
+        className={`${BADGE_CLASS} pointer-events-auto cursor-pointer ${hasEffects ? FX_ON : FX_OFF}`}
+        title={hasEffects ? effects.join(" · ") : "No effects"}
+        data-badge="fx"
+        data-fx-active={hasEffects ? "true" : "false"}
+        onPointerDown={(event) => event.stopPropagation()}
+        onClick={openMenu}
+        onContextMenu={openMenu}
+      >
+        fx
+      </span>
     </span>
   );
 });

package/src/player/components/ClipContextMenu.groups.test.tsx

@@ -0,0 +1,102 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { createHappyDomRootHarness } from "./testRootHarness";
+import { ClipContextMenu } from "./ClipContextMenu";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+import { TimelineEditProvider } from "../../contexts/TimelineEditContext";
+
+const iframe = document.createElement("iframe");
+vi.mock("../../contexts/StudioContext", () => ({
+  useStudioShellContextOptional: () => ({
+    projectId: "p1",
+    showToast: vi.fn(),
+    previewIframeRef: { current: iframe },
+  }),
+}));
+
+const harness = createHappyDomRootHarness();
+
+const talk: TimelineElement = {
+  id: "talk",
+  domId: "talk",
+  tag: "video",
+  src: "talk.mp4",
+  start: 0,
+  duration: 6,
+  track: 0,
+  hasAudio: true,
+  link: "lk-1",
+};
+const talkAudio: TimelineElement = {
+  ...talk,
+  id: "talk-a",
+  domId: "talk-a",
+  tag: "audio",
+  track: 1,
+};
+
+function renderMenu(element: TimelineElement) {
+  usePlayerStore.getState().setElements([talk, talkAudio]);
+  document.body.appendChild(iframe);
+  const node = iframe.contentDocument?.createElement("video");
+  if (node) {
+    node.id = "talk";
+    node.setAttribute("data-has-audio", "true");
+    iframe.contentDocument?.body.appendChild(node);
+  }
+  const host = document.createElement("div");
+  document.body.appendChild(host);
+  const noop = vi.fn();
+  act(() =>
+    harness.mount(host).render(
+      <TimelineEditProvider
+        value={{
+          onSetElementAttributeQuiet: vi.fn(async () => undefined),
+          onFreezeFrame: noop,
+          onLinkEdit: noop,
+          onDeleteElementOnly: noop,
+        }}
+      >
+        <ClipContextMenu
+          x={10}
+          y={10}
+          element={element}
+          currentTime={2}
+          onClose={noop}
+          onSplit={noop}
+          onDelete={noop}
+        />
+      </TimelineEditProvider>,
+    ),
+  );
+}
+
+function menuLabels(): string[] {
+  return Array.from(document.querySelectorAll('[role="menuitem"], [role="menuitemcheckbox"]')).map(
+    (item) => item.querySelector("span")?.textContent ?? "",
+  );
+}
+
+describe("ClipContextMenu order", () => {
+  it("groups time, sound, picture, then delete for a linked video with sound", () => {
+    renderMenu(talk);
+    const expected = [
+      "Split at 2.00s",
+      "Freeze frame",
+      "Audio Gain…",
+      "Voice",
+      "Detach audio",
+      "Unlink from audio",
+      "Look",
+      "Crop",
+      "Delete",
+      "Delete this clip only",
+    ];
+    expect(menuLabels().filter((label) => expected.includes(label))).toEqual(expected);
+    const groups = Array.from(document.querySelectorAll('[role="group"]')).map((group) =>
+      group.getAttribute("aria-label"),
+    );
+    expect(groups).toEqual(["Time", "Sound", "Picture", "Clipboard", "Delete"]);
+  });
+});

package/src/player/components/ClipContextMenu.test.tsx

@@ -60,9 +60,14 @@ describe("ClipContextMenu host items", () => {
     unmount();
   });
 
-  it("counts host rows and their divider when keeping the menu inside the window", () => {
+  it("keeps the menu, host rows included, inside the window by its measured height", () => {
     const innerHeight = Object.getOwnPropertyDescriptor(window, "innerHeight");
     Object.defineProperty(window, "innerHeight", { configurable: true, value: 600 });
+    const offsetHeight = vi
+      .spyOn(HTMLElement.prototype, "offsetHeight", "get")
+      .mockImplementation(function (this: HTMLElement) {
+        return this.getAttribute("role") === "menu" ? 150 : 0;
+      });
     try {
       const host = document.createElement("div");
       document.body.appendChild(host);
@@ -86,10 +91,11 @@ describe("ClipContextMenu host items", () => {
           />,
         ),
       );
-      // Four 30 px rows, two 9 px dividers and 8 px of padding end 96 px below the window.
-      expect(document.body.querySelector<HTMLElement>("[role=menu]")!.style.top).toBe("446px");
+      // 150 px measured from y 550 ends 100 px below the window, kept 8 px off its edge.
+      expect(document.body.querySelector<HTMLElement>("[role=menu]")!.style.top).toBe("442px");
       act(() => root.unmount());
     } finally {
+      offsetHeight.mockRestore();
       if (innerHeight) Object.defineProperty(window, "innerHeight", innerHeight);
     }
   });
@@ -106,7 +112,7 @@ describe("ClipContextMenu host items", () => {
   it("shows only Studio's items when the host adds none", () => {
     const { items, unmount } = renderMenu([]);
     expect(items().map((item) => item.textContent)).toEqual(["Copy⌘C", "Delete⌫"]);
-    expect(document.body.querySelectorAll(".border-t")).toHaveLength(1);
+    expect(document.body.querySelector("[role=group][aria-label=Host]")).toBeNull();
     unmount();
   });
 });