@hyperframes/studio 0.8.107 → 0.8.109

package/src/player/components/ClipBadges.tsx

@@ -0,0 +1,67 @@
+import { memo } from "react";
+import type { TimelineElement } from "../store/playerStore";
+import { readClipBadges, splitVisibleBadges, type ClipBadge } from "./clipToolAttrs";
+import { useClipToolState } from "./useClipToolState";
+
+function SpeakerGlyph({ muted }: { muted: boolean }) {
+  return (
+    <svg width="10" height="10" viewBox="0 0 16 16" aria-hidden="true">
+      <path d="M2 6h3l4-3v10l-4-3H2z" fill="currentColor" />
+      {muted ? (
+        <path d="M11 6l4 4M15 6l-4 4" stroke="currentColor" strokeWidth="1.4" />
+      ) : (
+        <path
+          d="M11 5.5a3.5 3.5 0 0 1 0 5M12.5 3.5a6 6 0 0 1 0 9"
+          stroke="currentColor"
+          fill="none"
+          strokeWidth="1.4"
+        />
+      )}
+    </svg>
+  );
+}
+
+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";
+
+/** 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 }) {
+  const state = useClipToolState(el);
+  const { visible, hidden } = splitVisibleBadges(readClipBadges(state));
+  if (visible.length === 0) return null;
+  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 && (
+        <span
+          className={`${BADGE_CLASS} pointer-events-auto`}
+          title={hidden.map((badge) => badge.label).join(", ")}
+          data-badge="more"
+        >
+          +{hidden.length}
+        </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",
+      "Normalize loudness",
+      "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();
   });
 });

package/src/player/components/ClipContextMenu.tsx

@@ -1,10 +1,31 @@
-import { memo } from "react";
+import { memo, useLayoutEffect, useState, type RefObject } from "react";
 import { createPortal } from "react-dom";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import { canSplitElement } from "../../utils/timelineElementSplit";
 import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
 import { useMenuKeyboardNav } from "./menuKeyboardNav";
 import type { TimelineClipMenuItem } from "./TimelineTypes";
+import { ClipMenuToolItems } from "./clipMenuToolItems";
+import { ClipMenuAudioItems } from "./clipMenuAudioItems";
+import { ClipMenuLinkItems } from "./clipMenuLinkItems";
+
+const MENU_MARGIN = 8;
+// Empty groups collapse; every non-empty group before the always-present Delete group ends in a divider.
+const GROUP_CLASS = "empty:hidden mb-1 pb-1 border-b border-neutral-700/60";
+
+function useMeasuredHeight(ref: RefObject<HTMLDivElement | null>, anchorKey: string): number {
+  const [height, setHeight] = useState(0);
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    setHeight(node.offsetHeight);
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => setHeight(node.offsetHeight));
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [ref, anchorKey]);
+  return height;
+}
 
 interface ClipContextMenuProps {
   x: number;
@@ -60,7 +81,6 @@ function HostItems({
           )}
         </button>
       ))}
-      <div className="my-1 border-t border-neutral-700/60" />
     </>
   );
 }
@@ -103,16 +123,11 @@ export const ClipContextMenu = memo(function ClipContextMenu({
       ? `Split at ${currentTime.toFixed(2)}s`
       : "Split (move playhead inside clip)";
 
-  const clipboardItemCount = [onCopy, onPaste, onDuplicate].filter(Boolean).length;
-  const hostRows = hostItems.length;
-  const rowCount = hostRows + (splitLabel ? 1 : 0) + clipboardItemCount + 1; // + Delete, always present
-  const dividerCount =
-    (hostRows > 0 ? 1 : 0) + (splitLabel ? 1 : 0) + (clipboardItemCount > 0 ? 1 : 0);
   const menuWidth = 200;
-  const menuHeight = rowCount * 30 + dividerCount * 9 + 8;
-  const overflowY = y + menuHeight - window.innerHeight;
   const adjustedX = x + menuWidth > window.innerWidth ? x - menuWidth : x;
-  const adjustedY = overflowY > 0 ? y - overflowY - 8 : y;
+  const menuHeight = useMeasuredHeight(menuRef, `${x},${y},${element.key ?? element.id}`);
+  const overflowY = y + menuHeight - window.innerHeight;
+  const adjustedY = overflowY > 0 ? Math.max(MENU_MARGIN, y - overflowY - MENU_MARGIN) : y;
 
   return createPortal(
     <div
@@ -122,9 +137,13 @@ export const ClipContextMenu = memo(function ClipContextMenu({
       className="fixed z-200 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
       style={{ left: adjustedX, top: adjustedY }}
     >
-      {hostRows > 0 && <HostItems items={hostItems} onClose={onClose} />}
-      {splitLabel && (
-        <>
+      {hostItems.length > 0 && (
+        <div role="group" aria-label="Host" className={GROUP_CLASS}>
+          <HostItems items={hostItems} onClose={onClose} />
+        </div>
+      )}
+      <div role="group" aria-label="Time" className={GROUP_CLASS}>
+        {splitLabel && (
           <button
             type="button"
             role="menuitem"
@@ -144,72 +163,100 @@ export const ClipContextMenu = memo(function ClipContextMenu({
             <span>{splitLabel}</span>
             <span className="text-neutral-500 text-[10px] ml-3">S</span>
           </button>
-          <div className="my-1 border-t border-neutral-700/60" />
-        </>
-      )}
+        )}
+        {splitLabel && (
+          <ClipMenuToolItems
+            group="time"
+            element={element}
+            currentTime={currentTime}
+            onClose={onClose}
+          />
+        )}
+      </div>
 
-      {(onCopy || onPaste || onDuplicate) && (
-        <>
-          {onCopy && (
-            <button
-              type="button"
-              role="menuitem"
-              className={itemClass(true)}
-              onClick={() => {
-                onCopy();
-                onClose();
-              }}
-            >
-              <span>{selectionSize > 1 ? `Copy ${selectionSize} clips` : "Copy"}</span>
-              <span className="text-neutral-500 text-[10px] ml-3">⌘C</span>
-            </button>
-          )}
-          {onPaste && (
-            <button
-              type="button"
-              role="menuitem"
-              className={itemClass(!!canPaste)}
-              disabled={!canPaste}
-              onClick={() => {
-                if (!canPaste) return;
-                void onPaste();
-                onClose();
-              }}
-            >
-              <span>Paste</span>
-              <span className="text-neutral-500 text-[10px] ml-3">⌘V</span>
-            </button>
-          )}
-          {onDuplicate && (
-            <button
-              type="button"
-              role="menuitem"
-              className={itemClass(true)}
-              onClick={() => {
-                void onDuplicate();
-                onClose();
-              }}
-            >
-              <span>{selectionSize > 1 ? `Duplicate ${selectionSize} clips` : "Duplicate"}</span>
-              <span className="text-neutral-500 text-[10px] ml-3">⌘D</span>
-            </button>
-          )}
-          <div className="my-1 border-t border-neutral-700/60" />
-        </>
-      )}
+      <div role="group" aria-label="Sound" className={GROUP_CLASS}>
+        <ClipMenuAudioItems part="normalize" element={element} onClose={onClose} />
+        <ClipMenuToolItems
+          group="sound"
+          element={element}
+          currentTime={currentTime}
+          onClose={onClose}
+        />
+        <ClipMenuLinkItems part="link" element={element} onClose={onClose} />
+        <ClipMenuAudioItems part="duck" element={element} onClose={onClose} />
+      </div>
+
+      <div role="group" aria-label="Picture" className={GROUP_CLASS}>
+        <ClipMenuToolItems
+          group="picture"
+          element={element}
+          currentTime={currentTime}
+          onClose={onClose}
+        />
+      </div>
 
-      <button
-        type="button"
-        role="menuitem"
-        className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-danger-ink hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left"
-        onClick={() => {
-          onDelete(element);
-          onClose();
-        }}
-      >
-        <span>Delete</span>
-        <span className="text-neutral-500 text-[10px] ml-3">⌫</span>
-      </button>
+      <div role="group" aria-label="Clipboard" className={GROUP_CLASS}>
+        {onCopy && (
+          <button
+            type="button"
+            role="menuitem"
+            className={itemClass(true)}
+            onClick={() => {
+              onCopy();
+              onClose();
+            }}
+          >
+            <span>{selectionSize > 1 ? `Copy ${selectionSize} clips` : "Copy"}</span>
+            <span className="text-neutral-500 text-[10px] ml-3">⌘C</span>
+          </button>
+        )}
+        {onPaste && (
+          <button
+            type="button"
+            role="menuitem"
+            className={itemClass(!!canPaste)}
+            disabled={!canPaste}
+            onClick={() => {
+              if (!canPaste) return;
+              void onPaste();
+              onClose();
+            }}
+          >
+            <span>Paste</span>
+            <span className="text-neutral-500 text-[10px] ml-3">⌘V</span>
+          </button>
+        )}
+        {onDuplicate && (
+          <button
+            type="button"
+            role="menuitem"
+            className={itemClass(true)}
+            onClick={() => {
+              void onDuplicate();
+              onClose();
+            }}
+          >
+            <span>{selectionSize > 1 ? `Duplicate ${selectionSize} clips` : "Duplicate"}</span>
+            <span className="text-neutral-500 text-[10px] ml-3">⌘D</span>
+          </button>
+        )}
+      </div>
+
+      <div role="group" aria-label="Delete">
+        <button
+          type="button"
+          role="menuitem"
+          className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-danger-ink hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left"
+          onClick={() => {
+            onDelete(element);
+            onClose();
+          }}
+        >
+          <span>Delete</span>
+          <span className="text-neutral-500 text-[10px] ml-3">⌫</span>
+        </button>
+        <ClipMenuLinkItems part="delete" element={element} onClose={onClose} />
+      </div>
     </div>,
     document.body,
   );

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

@@ -0,0 +1,41 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { createHappyDomRootHarness } from "./testRootHarness";
+import { ClipPeakMarks } from "./ClipPeakMarks";
+
+const harness = createHappyDomRootHarness();
+
+async function render(url: string, bins: number[], gain: number) {
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async () => Response.json({ binSeconds: 1, bins })),
+  );
+  const host = document.createElement("div");
+  document.body.appendChild(host);
+  await act(async () => {
+    harness.mount(host).render(
+      <ClipPeakMarks peaksUrl={url} sourceWindow={{ mediaStart: 0, sourceSpan: 2 }} gain={gain}>
+        <span>wave</span>
+      </ClipPeakMarks>,
+    );
+  });
+  await act(async () => {});
+  vi.unstubAllGlobals();
+  return host;
+}
+
+describe("ClipPeakMarks", () => {
+  it("paints red marks and the peak on a clip that redlines", async () => {
+    const host = await render("/api/projects/p/peaks/loud.mp4", [0.2, 0.98], 1);
+    expect(host.textContent).toContain("wave");
+    expect(host.querySelector("[data-testid=clip-peak-marks]")?.textContent).toContain(
+      "▲ peaks −0.2 dBFS",
+    );
+  });
+
+  it("paints nothing on a quiet clip", async () => {
+    const host = await render("/api/projects/p/peaks/quiet.mp4", [0.25, 0.25], 1);
+    expect(host.querySelector("[data-testid=clip-peak-marks]")).toBeNull();
+  });
+});

package/src/player/components/ClipPeakMarks.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useState, type ReactNode } from "react";
+import { clipPeakRuns, isPeakMap, type ClipSourceWindow, type PeakMap } from "./clipPeakRuns";
+
+const peakMapRequests = new Map<string, Promise<PeakMap | null>>();
+
+function loadPeakMap(url: string): Promise<PeakMap | null> {
+  const pending = peakMapRequests.get(url);
+  if (pending) return pending;
+  const request = fetch(url)
+    .then((res) => (res.ok ? res.json() : null))
+    .then((body: unknown) => (isPeakMap(body) ? body : null))
+    .catch(() => null);
+  peakMapRequests.set(url, request);
+  return request;
+}
+
+const dbText = (db: number) => `${db < 0 ? "−" : "+"}${Math.abs(db).toFixed(1)} dBFS`;
+
+/** A clip's waveform with red marks where it, at its own volume, reaches the export ceiling. */
+export function ClipPeakMarks({
+  peaksUrl,
+  sourceWindow,
+  gain,
+  children,
+}: {
+  peaksUrl: string | undefined;
+  sourceWindow: ClipSourceWindow;
+  gain: number;
+  children?: ReactNode;
+}) {
+  const [map, setMap] = useState<PeakMap | null>(null);
+  useEffect(() => {
+    if (!peaksUrl) return;
+    let live = true;
+    void loadPeakMap(peaksUrl).then((loaded) => {
+      if (live) setMap(loaded);
+    });
+    return () => {
+      live = false;
+    };
+  }, [peaksUrl]);
+  const { runs, peakDbfs } = map
+    ? clipPeakRuns(map, sourceWindow, gain)
+    : { runs: [], peakDbfs: null };
+  return (
+    <div className="relative h-full w-full">
+      {children}
+      {runs.length > 0 && peakDbfs !== null && (
+        <div
+          className="pointer-events-none absolute inset-0"
+          data-testid="clip-peak-marks"
+          title={`Peaks ${dbText(peakDbfs)} at this volume; export lowers the whole mix`}
+        >
+          {runs.map((run) => (
+            <div
+              key={run.from}
+              className="absolute inset-y-0 bg-red-500/80"
+              style={{
+                left: `${run.from * 100}%`,
+                width: `max(1px, ${(run.to - run.from) * 100}%)`,
+              }}
+            />
+          ))}
+          <span className="absolute top-0 right-1 font-mono text-[9px] leading-none text-red-400">
+            ▲ peaks {dbText(peakDbfs)}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,91 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { TimelineEditProvider } from "../../contexts/TimelineEditContext";
+import { useLinkedClipPreferences } from "../../utils/linkedClipPreferences";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+import { OutOfSyncBadge } from "./OutOfSyncBadge";
+import { createHappyDomRootHarness } from "./testRootHarness";
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const harness = createHappyDomRootHarness();
+const clip = (id: string, tag: string, start: number): TimelineElement => ({
+  id,
+  domId: id,
+  tag,
+  start,
+  duration: 4,
+  track: 0,
+  playbackStart: 0,
+  syncOrigin: "lk-1",
+});
+const video = clip("talk", "video", 1);
+const lateAudio = clip("talk-audio", "audio", 1 + 51 / 30);
+
+afterEach(() =>
+  useLinkedClipPreferences.setState({ syncIndicatorsVisible: true, compositionFps: 30 }),
+);
+
+function render(el: TimelineElement, onLinkEdit = vi.fn()) {
+  usePlayerStore.getState().setElements([video, lateAudio]);
+  const host = document.body.appendChild(document.createElement("div"));
+  act(() =>
+    harness.mount(host).render(
+      <TimelineEditProvider value={{ onLinkEdit }}>
+        <OutOfSyncBadge el={el} />
+      </TimelineEditProvider>,
+    ),
+  );
+  const badge = () => document.querySelector('[data-testid="out-of-sync-badge"]');
+  return { badge, onLinkEdit };
+}
+
+describe("OutOfSyncBadge", () => {
+  it("shows the signed offset on both halves", () => {
+    useLinkedClipPreferences.setState({ compositionFps: 30 });
+    expect(render(lateAudio).badge()?.textContent).toBe("+1:21");
+    document.body.innerHTML = "";
+    expect(render(video).badge()?.textContent).toBe("-1:21");
+  });
+
+  it("hides when the preference is off", () => {
+    useLinkedClipPreferences.setState({ syncIndicatorsVisible: false });
+    expect(render(lateAudio).badge()).toBeNull();
+  });
+
+  it("opens Move / Slip into Sync from a click anywhere on the badge", () => {
+    const { badge, onLinkEdit } = render(lateAudio);
+    act(() => badge()?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    const items = Array.from(document.querySelectorAll<HTMLButtonElement>('[role="menuitem"]'));
+    expect(items.map((item) => item.textContent)).toEqual(["Move into Sync", "Slip into Sync"]);
+    act(() => items[0]?.click());
+    expect(onLinkEdit).toHaveBeenCalledWith(
+      expect.objectContaining({ kind: "move-into-sync", element: lateAudio, start: 1 }),
+    );
+  });
+
+  it("slips from a right-click, and the click never reaches the clip", () => {
+    const clipClick = vi.fn();
+    document.body.addEventListener("contextmenu", clipClick);
+    const { badge, onLinkEdit } = render(lateAudio);
+    act(() => badge()?.dispatchEvent(new MouseEvent("contextmenu", { bubbles: true })));
+    expect(clipClick).not.toHaveBeenCalled();
+    const slip = document.querySelectorAll<HTMLButtonElement>('[role="menuitem"]')[1];
+    act(() => slip?.click());
+    const edit = onLinkEdit.mock.calls[0]?.[0];
+    expect(edit.kind).toBe("slip-into-sync");
+    expect(edit.mediaStart).toBeCloseTo(51 / 30);
+    document.body.removeEventListener("contextmenu", clipClick);
+  });
+
+  it("flips the menu above the pointer near the bottom edge", () => {
+    const { badge } = render(lateAudio);
+    const y = window.innerHeight - 10;
+    act(() => badge()?.dispatchEvent(new MouseEvent("click", { bubbles: true, clientY: y })));
+    const menu = document.querySelector<HTMLElement>('[role="menu"]');
+    const top = Number.parseFloat(menu?.style.top ?? "");
+    expect(top).toBeLessThan(y);
+    expect(top).toBeGreaterThanOrEqual(0);
+  });
+});