@hyperframes/studio 0.8.107 → 0.8.109

package/src/components/editor/useFxCarve.ts

@@ -29,11 +29,11 @@ import {
   resolveNextCarveSettings,
 } from "./useFxCarveGrouping.js";
 import { type HfAutomation } from "@hyperframes/core/audio-automation";
-import { automationAttrValue, HF_AUDIO_AUTOMATION_ATTR } from "./propertyPanelAutomation";
 import { trackCarveChanged } from "./audioFxTelemetry.js";
 import type { DomEditSelection } from "./domEditingTypes";
 import { usePlayerStore } from "../../player";
-import { carveLanes, measureCarve, mintCarveNodes, type CarveClip } from "./useFxCarveNodes.js";
+import { dropCarveOutput, resolveCarveVoices, withoutCarveLanes } from "./carveOutput.js";
+import { carveLanes, measureCarve, mintCarveNodes } from "./useFxCarveNodes.js";
 import { readClipClock } from "./clipAudioClock.js";
 import { spanOf } from "./propertyPanelAudioFxGroupUtils.js";
 import type { AudioTrackOption } from "./propertyPanelFxCarveModule.js";
@@ -55,16 +55,6 @@ function carveAction(
   return "strength";
 }
 
-/** Lanes belonging to nodes the carve generated, which a re-run replaces. */
-function withoutCarveLanes(automation: HfAutomation, chain: HfAudioFxChain): HfAutomation {
-  const prefixes = chain.nodes.filter((n) => n.fromCarve && n.id).map((n) => `fx.${n.id}.`);
-  if (prefixes.length === 0) return automation;
-  return {
-    version: automation.version,
-    lanes: automation.lanes.filter((lane) => !prefixes.some((p) => lane.target.startsWith(p))),
-  };
-}
-
 /**
  * Every setting here describes the filters, so changing one rebuilds them.
  * There is no apply button: a carve naming a voice with no filters behind it
@@ -86,54 +76,6 @@ function carveNeedsReanalysis(
   );
 }
 
-/**
- * Every named voice that is actually there with something to decode. A source
- * naming a deleted track is skipped rather than failing the whole analysis.
- *
- * Read out to plain values here rather than carrying elements around: it is
- * what lets the src and the start be non-null by construction downstream
- * instead of by assertion.
- */
-function resolveCarveVoices(doc: Document, sources: readonly string[]): CarveClip[] {
-  const voices: CarveClip[] = [];
-  for (const id of sources) {
-    const el = doc.getElementById(id);
-    // By tag name, not `instanceof HTMLAudioElement`: these elements belong to
-    // the composition's iframe document, so the constructor they were made
-    // from is not this realm's and the instanceof is false for every one.
-    if (el?.tagName !== "AUDIO") continue;
-    const src = el.getAttribute("src");
-    if (!src) continue;
-    const clock = readClipClock((name) => el.getAttribute(name));
-    voices.push({ src, start: el.getAttribute("data-start"), clock });
-  }
-  return voices;
-}
-
-/**
- * What the carve generated is only justified by the voices it was measured
- * from: switched off, or left naming none — every source deleted, say — there
- * is nothing those filters are making room for. Left behind they keep dipping
- * the bed with nothing in the panel to explain them.
- */
-async function dropCarveOutput(
-  chain: HfAudioFxChain,
-  automation: HfAutomation,
-  onSetAttributeQuiet: (attr: string, value: string | null) => void | Promise<void>,
-): Promise<void> {
-  const carriedOver = withoutCarveLanes(automation, chain);
-  if (carriedOver.lanes.length !== automation.lanes.length) {
-    await onSetAttributeQuiet(HF_AUDIO_AUTOMATION_ATTR, automationAttrValue(carriedOver) || null);
-  }
-  const kept = chain.nodes.filter((n) => !n.fromCarve);
-  if (kept.length !== chain.nodes.length) {
-    await onSetAttributeQuiet(
-      HF_AUDIO_FX_ATTR,
-      kept.length ? serializeAudioFxChain({ version: 1, nodes: kept }) : null,
-    );
-  }
-}
-
 export function useFxCarve(
   element: DomEditSelection,
   chain: HfAudioFxChain,
@@ -179,7 +121,7 @@ export function useFxCarve(
   } => {
     const doc = element.element?.ownerDocument;
     if (!doc || !couldBeBed) return { sourceOptions: [], autoSourceIds: [] };
-    const others = Array.from(doc.querySelectorAll<HTMLAudioElement>("audio[id]")).filter(
+    const others = Array.from(doc.querySelectorAll("audio[id], video[id]")).filter(
       (a) => a.id !== element.id,
     );
     // Only tracks that are actually playing while this bed is. A voice somewhere

package/src/components/editor/useFxCarveGrouping.test.ts

@@ -54,6 +54,19 @@ describe("collectCarveCandidates", () => {
   });
 });
 
+describe("collectCarveCandidates with video", () => {
+  it("offers an ungrouped audible video, not a muted one", () => {
+    const doc = previewDoc(`
+      <video id="a-roll"></video>
+      <video id="b-roll" muted></video>
+      <audio id="bed"></audio>
+    `);
+    const others = Array.from(doc.querySelectorAll("video[id]"));
+    const ids = collectCarveCandidates(doc, others, () => true, "bed").map((c) => c.id);
+    expect(ids).toEqual(["a-roll"]);
+  });
+});
+
 describe("carverAgainst", () => {
   // The far-end guard has to see through a GROUP source. A plural carve names a
   // group — that is what the lint rule pushes authors toward — so matching raw

package/src/components/editor/useFxCarveGrouping.ts

@@ -20,6 +20,11 @@ import {
   resolveAudioGroups,
   resolveCarveSourceIds,
 } from "@hyperframes/core/audio-groups";
+import { isAudibleVideoNode } from "../../player/lib/timelineElementHelpers";
+
+export function isCarveVoiceElement(el: Element | null): el is Element {
+  return el !== null && (el.tagName === "AUDIO" || isAudibleVideoNode(el));
+}
 
 /**
  * An id for a new voiceover group, de-duped against every id already in the
@@ -130,7 +135,7 @@ function excludedFor(groupByMember: Map<string, { id: string }>, bedId?: string)
 
 export function collectCarveCandidates(
   doc: Document,
-  others: readonly HTMLAudioElement[],
+  others: readonly Element[],
   overlapsBed: (a: Element) => boolean,
   /** The bed's own id, so neither it nor the group it belongs to is offered. */
   bedId?: string,
@@ -141,7 +146,7 @@ export function collectCarveCandidates(
   const excluded = excludedFor(groupByMember, bedId);
   const offeredGroupIds = new Set<string>();
   const described: CarveCandidate[] = [];
-  for (const a of others) {
+  for (const a of others.filter(isCarveVoiceElement)) {
     const group = groupByMember.get(a.id);
     if (excluded.has(a.id) || (group && excluded.has(group.id))) continue;
     if (!group) {
@@ -161,7 +166,7 @@ export function collectCarveCandidates(
       // iframe document, so the constructor is a different realm's and the
       // instanceof is false for every one (mirrors resolveCarveVoices in
       // useFxCarve.ts).
-      .filter((el): el is HTMLElement => el?.tagName === "AUDIO");
+      .filter((el): el is HTMLElement => isCarveVoiceElement(el));
     if (!members.some(overlapsBed)) continue;
     offeredGroupIds.add(group.id);
     described.push({

package/src/components/editor/useInlineTextEditing.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, type ReactNode, type RefObject } from "react";
+import { InlineTextCaret } from "./InlineTextCaret";
 import { InlineTextToolbar } from "./InlineTextToolbar";
 import { useDomEditActionsContextOptional } from "../../contexts/DomEditContext";
 import { useInlineTextEdit } from "../../hooks/useInlineTextEdit";
@@ -110,10 +111,16 @@ export function useInlineTextEditing(
   return {
     editing: inlineText.session !== null,
     toolbar: (
-      <InlineTextToolbar
-        session={inlineText.session}
-        iframe={actions?.previewIframeRef?.current ?? null}
-      />
+      <>
+        <InlineTextToolbar
+          session={inlineText.session}
+          iframe={actions?.previewIframeRef?.current ?? null}
+        />
+        <InlineTextCaret
+          session={inlineText.session}
+          iframe={actions?.previewIframeRef?.current ?? null}
+        />
+      </>
     ),
     handleKeyDown,
     startFromPress: (event) => {

package/src/components/editor/useVolumeAutomation.ts

@@ -26,6 +26,8 @@ import {
 import { deriveElementTiming } from "./propertyPanelFlatTimingDerivation";
 import { SPEED_PRESETS, speedPresetLane, type SpeedPresetId } from "@hyperframes/core/speed-ramp";
 import { clampNumber } from "../../utils/studioHelpers";
+import type { HfAutomation } from "@hyperframes/core/audio-automation";
+import type { LinkedSpeedCommit } from "./linkedSpeedEdits";
 
 export interface LaneBinding {
   automated: boolean;
@@ -59,6 +61,7 @@ export function useVolumeAutomation(
   element: DomEditSelection,
   currentTime: number,
   onSetAttributeQuiet: (attr: string, value: string | null) => void | Promise<void>,
+  linkedSpeed: LinkedSpeedCommit | null = null,
 ): VolumeAutomationBinding {
   // The chain is not needed to resolve a volume or rate lane: both are always valid
   // targets, so this deliberately does not parse it.
@@ -77,7 +80,22 @@ export function useVolumeAutomation(
     // playing track, while the same click on an effect parameter did not.
     void onSetAttributeQuiet(HF_AUDIO_AUTOMATION_ATTR, automationAttrValue(next) || null);
   };
-  const laneBinding = (target: string, seed: number): LaneBinding => {
+  type Edit = (current: HfAutomation) => HfAutomation;
+  const writeOwn = (edit: Edit) => write(edit(automation));
+  // Speed moves every data-link member together, so a linked clip's rate lane edits fan out.
+  const writeRate = (edit: Edit) => {
+    if (!linkedSpeed) return writeOwn(edit);
+    void linkedSpeed.commitAttribute(
+      HF_AUDIO_AUTOMATION_ATTR,
+      (raw) => automationAttrValue(edit(readPanelAutomation(raw, undefined))) || null,
+      "Edit speed",
+    );
+  };
+  const laneBinding = (
+    target: string,
+    seed: number,
+    writeLane: (edit: Edit) => void,
+  ): LaneBinding => {
     const lane = automation.lanes.find((l) => l.target === target);
     return {
       automated: lane !== undefined,
@@ -85,9 +103,9 @@ export function useVolumeAutomation(
         ? sampleAutomationLane(lane, clipTimeSec, resolveAutomationRange(target, undefined)?.scale)
         : undefined,
       // Seeded at the level the control already shows, so automating does not change it.
-      onAutomate: () => write(withSeededLane(automation, target, seed)),
-      onRemoveAutomation: () => write(withoutLane(automation, target)),
-      onCommitAt: (v: number) => write(withPointAt(automation, target, clipTimeSec, v)),
+      onAutomate: () => writeLane((a) => withSeededLane(a, target, seed)),
+      onRemoveAutomation: () => writeLane((a) => withoutLane(a, target)),
+      onCommitAt: (v: number) => writeLane((a) => withPointAt(a, target, clipTimeSec, v)),
     };
   };
   // `??` alone would let an empty `data-volume` through as Number("") === 0, so
@@ -96,9 +114,13 @@ export function useVolumeAutomation(
   const raw = element.dataAttributes?.["volume"];
   const parsed = raw ? Number(raw) : 1;
   const current = Number.isFinite(parsed) ? parsed : 1;
-  const volume = laneBinding(VOLUME_TARGET, current);
+  const volume = laneBinding(VOLUME_TARGET, current, writeOwn);
   const rateAttr = Number.parseFloat(element.dataAttributes?.["playback-rate"] ?? "");
-  const rate = laneBinding(RATE_TARGET, Number.isFinite(rateAttr) && rateAttr > 0 ? rateAttr : 1);
+  const rate = laneBinding(
+    RATE_TARGET,
+    Number.isFinite(rateAttr) && rateAttr > 0 ? rateAttr : 1,
+    writeRate,
+  );
   return {
     volumeAutomated: volume.automated,
     automatedVolumeValue: volume.automatedValue,
@@ -109,7 +131,7 @@ export function useVolumeAutomation(
       ...rate,
       canApplyPreset: elDuration > 0,
       onApplyPreset: (id) => {
-        if (elDuration > 0) write(withLane(automation, speedPresetLane(id, elDuration)));
+        if (elDuration > 0) writeRate((a) => withLane(a, speedPresetLane(id, elDuration)));
       },
     },
   };

package/src/components/nle/AudioMeterStrip.test.tsx

@@ -12,6 +12,8 @@ import { SILENT_CHANNEL } from "../../utils/audioMeterMath";
 import {
   AudioMeterStrip,
   type AudioMeterStripProps,
+  CLIP_LATCH_PEAK,
+  stepClipLatch,
   evictGoneMeterState,
   followMeterHook,
   stepAndPaintStrips,
@@ -416,3 +418,54 @@ describe("stepAndPaintStrips", () => {
     expect(state.has("loud")).toBe(true);
   });
 });
+
+describe("CLIP light", () => {
+  const hookAt = (peak: number) => ({
+    start: vi.fn(),
+    stop: vi.fn(),
+    read: vi.fn(() => ({ master: { l: peak, r: 0 }, groups: {} })),
+  });
+
+  it("latches at the -1 dBFS export ceiling, stays lit when the level drops, and resets on click", () => {
+    usePlayerStore.setState({ elements: [clip({})] });
+    const hook = hookAt(1);
+    setHook(hook);
+    const { host } = mount();
+    const light = host.querySelector<HTMLElement>("[data-testid=meter-clip-light]");
+    expect(light?.dataset.lit).toBe("false");
+    tick();
+    expect(light?.dataset.lit).toBe("true");
+    hook.read.mockReturnValue({ master: { l: 0.1, r: 0.1 }, groups: {} });
+    tick();
+    expect(light?.dataset.lit).toBe("true");
+    act(() => light?.click());
+    expect(light?.dataset.lit).toBe("false");
+    tick();
+    expect(light?.dataset.lit).toBe("false");
+  });
+
+  it("stays dark in the red band just under the ceiling", () => {
+    usePlayerStore.setState({ elements: [clip({})] });
+    setHook(hookAt(10 ** (-1.2 / 20)));
+    const { host } = mount();
+    tick();
+    expect(host.querySelector<HTMLElement>("[data-testid=meter-clip-light]")?.dataset.lit).toBe(
+      "false",
+    );
+  });
+});
+
+describe("stepClipLatch", () => {
+  it("lights exactly at -1 dBFS on either channel, not below", () => {
+    expect(CLIP_LATCH_PEAK).toBeCloseTo(0.891251, 6);
+    expect(stepClipLatch(false, { l: CLIP_LATCH_PEAK, r: 0 })).toBe(true);
+    expect(stepClipLatch(false, { l: 0, r: CLIP_LATCH_PEAK })).toBe(true);
+    expect(stepClipLatch(false, { l: CLIP_LATCH_PEAK - 1e-6, r: 0 })).toBe(false);
+    expect(stepClipLatch(false, undefined)).toBe(false);
+  });
+
+  it("holds once lit, whatever comes next", () => {
+    expect(stepClipLatch(true, { l: 0, r: 0 })).toBe(true);
+    expect(stepClipLatch(true, undefined)).toBe(true);
+  });
+});

package/src/components/nle/AudioMeterStrip.tsx

@@ -5,6 +5,7 @@ import {
   useMemo,
   useRef,
   type PointerEvent as ReactPointerEvent,
+  type ReactNode,
   type Ref,
   type RefObject,
 } from "react";
@@ -20,6 +21,7 @@ import type { StereoLevel } from "@hyperframes/core/runtime/levelTap";
 import { usePlayerStore } from "../../player";
 import { clampNumber } from "../../utils/studioHelpers";
 import { useAudioMetersVisible } from "../../utils/audioMeterVisibility";
+import { EXPORT_PEAK_CEILING } from "../../utils/exportPeakCeiling";
 import { useStudioShellContextOptional } from "../../contexts/StudioContext";
 import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
 import {
@@ -49,6 +51,24 @@ type StripBars = [Bars, Bars];
 
 const MONITOR_LABEL = "Monitor";
 
+/** The CLIP light latches at the export ceiling, stricter than RED_AT. */
+export const CLIP_LATCH_PEAK = EXPORT_PEAK_CEILING;
+
+export function stepClipLatch(latched: boolean, master: StereoLevel | undefined): boolean {
+  if (latched || !master) return latched;
+  return Math.max(master.l, master.r) >= CLIP_LATCH_PEAK;
+}
+
+function paintClipLight(el: HTMLElement | null, lit: boolean): void {
+  if (!el) return;
+  el.dataset.lit = String(lit);
+  el.style.setProperty(
+    "background-color",
+    lit ? "var(--color-red-500)" : "var(--color-neutral-800)",
+  );
+  el.style.setProperty("color", lit ? "var(--color-white)" : "var(--color-neutral-500)");
+}
+
 /** Where the fill turns amber, then red, on the same piecewise dB scale the marks use. */
 const AMBER_AT = markFraction(-6);
 const RED_AT = markFraction(-3);
@@ -178,10 +198,16 @@ export function stepAndPaintStrips(
 }
 
 /** One rAF loop re-reads the hook off the live preview window, so a reloaded iframe is followed. */
+interface ClipLatch {
+  lit: boolean;
+  light: HTMLElement | null;
+}
+
 function useMeterLoop(
   strips: Strip[],
   bars: RefObject<Map<string | null, StripBars>>,
   iframeRef: RefObject<HTMLIFrameElement | null> | undefined,
+  clip: RefObject<ClipLatch>,
 ) {
   const shell = useStudioShellContextOptional();
   const previewIframeRef = iframeRef ?? shell?.previewIframeRef;
@@ -200,6 +226,11 @@ function useMeterLoop(
       last = now;
       evictGoneMeterState(state, new Set(stripsRef.current.map((s) => s.id)));
       stepAndPaintStrips(stripsRef.current, state, bars.current, levels, now, dt);
+      const lit = stepClipLatch(clip.current.lit, levels?.master);
+      if (lit !== clip.current.lit) {
+        clip.current.lit = lit;
+        paintClipLight(clip.current.light, lit);
+      }
     };
     raf = requestAnimationFrame(tick);
     return () => {
@@ -210,7 +241,29 @@ function useMeterLoop(
         // Preview iframe already gone.
       }
     };
-  }, [previewIframeRef, bars]);
+  }, [previewIframeRef, bars, clip]);
+}
+
+function ClipLight({ clip }: { clip: RefObject<ClipLatch> }) {
+  return (
+    <button
+      type="button"
+      data-testid="meter-clip-light"
+      data-lit="false"
+      title="Lights when the preview reaches −1 dBFS, the export ceiling. Click to reset."
+      ref={(el) => {
+        clip.current.light = el;
+        paintClipLight(el, clip.current.lit);
+      }}
+      onClick={() => {
+        clip.current.lit = false;
+        paintClipLight(clip.current.light, false);
+      }}
+      className="rounded-[2px] px-1 font-mono text-[9px] leading-[14px] font-bold tracking-wide"
+    >
+      CLIP
+    </button>
+  );
 }
 
 function Bar({ maskRef, peakRef }: { maskRef: Ref<HTMLDivElement>; peakRef: Ref<HTMLDivElement> }) {
@@ -341,11 +394,13 @@ function MeterStrip({
   register,
   onLive,
   onCommit,
+  clipLight,
 }: {
   strip: Strip;
   register: (id: string | null, bars: StripBars | null) => void;
   onLive: (id: string | null, volume: number) => void;
   onCommit: (id: string | null, volume: number) => void;
+  clipLight?: ReactNode;
 }) {
   const refs = [
     useRef<HTMLDivElement>(null),
@@ -364,6 +419,7 @@ function MeterStrip({
   }, [strip.id, register]);
   return (
     <div className="flex w-[104px] shrink-0 flex-col items-center gap-1 px-1.5 pt-2 pb-1">
+      {clipLight}
       <div
         className="flex min-h-0 flex-1 items-stretch gap-1.5"
         aria-label={`${strip.label} level`}
@@ -421,7 +477,8 @@ function MeterStripBody({ previewIframeRef }: AudioMeterStripProps) {
     else bars.current.delete(id);
   }).current;
   const { onLive, onCommit } = useVolumeHandlers();
-  useMeterLoop(strips, bars, previewIframeRef);
+  const clip = useRef<ClipLatch>({ lit: false, light: null });
+  useMeterLoop(strips, bars, previewIframeRef, clip);
   return (
     <div
       data-testid="audio-meter-strip"
@@ -434,6 +491,7 @@ function MeterStripBody({ previewIframeRef }: AudioMeterStripProps) {
           register={register}
           onLive={onLive}
           onCommit={onCommit}
+          clipLight={strip.id === null ? <ClipLight clip={clip} /> : undefined}
         />
       ))}
     </div>

package/src/components/nle/useTimelineEditCallbacks.ts

@@ -53,6 +53,9 @@ export interface TimelineEditCallbackDeps {
   handleTimelineElementSplit: (element: TimelineElement, splitTime: number) => Promise<void> | void;
   handleRazorSplit: (element: TimelineElement, splitTime: number) => Promise<void> | void;
   handleRazorSplitAll: (splitTime: number) => Promise<void> | void;
+  handleFreezeFrame?: (element: TimelineElement, time: number) => Promise<void> | void;
+  handleLinkEdit?: TimelineEditCallbacks["onLinkEdit"];
+  handleTimelineElementDeleteOnly?: TimelineEditCallbacks["onDeleteElementOnly"];
   /** C1's ungrouped-track FX pointer — same auto-grouping write B6's carve uses. */
   handleGroupClips?: (
     clipIds: readonly string[],
@@ -132,6 +135,9 @@ export function useTimelineEditCallbacks({
   handleTimelineElementSplit,
   handleRazorSplit,
   handleRazorSplitAll,
+  handleFreezeFrame,
+  handleLinkEdit,
+  handleTimelineElementDeleteOnly,
   handleGroupClips,
   setElementFxAttribute,
 }: TimelineEditCallbackDeps): TimelineEditCallbacks {
@@ -227,6 +233,9 @@ export function useTimelineEditCallbacks({
       onSplitElement: handleTimelineElementSplit,
       onRazorSplit: handleRazorSplit,
       onRazorSplitAll: handleRazorSplitAll,
+      onFreezeFrame: handleFreezeFrame,
+      onLinkEdit: handleLinkEdit,
+      onDeleteElementOnly: handleTimelineElementDeleteOnly,
       onDeleteAllKeyframes: (element, animationId) => {
         // Hold the element where it is (collapse keyframes to a static set) rather
         // than deleting the whole animation — deleting strands a stale GSAP base
@@ -423,6 +432,9 @@ export function useTimelineEditCallbacks({
       handleTimelineElementSplit,
       handleRazorSplit,
       handleRazorSplitAll,
+      handleFreezeFrame,
+      handleLinkEdit,
+      handleTimelineElementDeleteOnly,
       handleGsapRemoveAllKeyframes,
       resolveElementAnimations,
       resolveKeyframeTarget,

package/src/components/ui/Menu.test.tsx

@@ -3,7 +3,6 @@
 import { readFileSync } from "node:fs";
 import path from "node:path";
 import React, { act, useState } from "react";
-import { createRoot, type Root } from "react-dom/client";
 import { compile } from "tailwindcss";
 import { afterEach, beforeAll, describe, expect, it } from "vitest";
 import { loadStylesheet, STYLES_DIR } from "../../styles/styleSources";
@@ -11,27 +10,11 @@ import { ContextMenu, Menu, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparat
 import { Popover } from "./Popover";
 import { isTypingTarget } from "../../utils/typingTarget";
 import { shouldIgnorePlaybackShortcutTarget } from "../../player/lib/playbackShortcuts";
+import { cleanupMounted, mountHost as render } from "./mountHost.testHelpers";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
-let mounted: { root: Root; host: HTMLElement } | null = null;
-
-function render(element: React.ReactElement): HTMLElement {
-  const host = document.createElement("div");
-  document.body.append(host);
-  const root = createRoot(host);
-  mounted = { root, host };
-  act(() => root.render(element));
-  return host;
-}
-
-afterEach(() => {
-  if (!mounted) return;
-  const { root, host } = mounted;
-  mounted = null;
-  act(() => root.unmount());
-  host.remove();
-});
+afterEach(cleanupMounted);
 
 /** Base UI moves focus into the popup one task after open, not synchronously. */
 async function settle(): Promise<void> {
@@ -310,9 +293,7 @@ describe("Popover", () => {
     renderOpen(false);
     await settle();
     expect(one("[role=dialog]", "popup").querySelector("svg")).toBeNull();
-    act(() => mounted?.root.unmount());
-    mounted?.host.remove();
-    mounted = null;
+    cleanupMounted();
 
     renderOpen(true);
     await settle();

package/src/components/ui/Menu.tsx

@@ -52,8 +52,8 @@ export const popupSurface = cn(
   "data-[preview-state=open]:opacity-100 data-[preview-state=open]:scale-100",
 );
 
-/** The popup's own layer: menus sit above panel chrome and below a modal. */
-const POPUP_LAYER = "z-200";
+/** Every floating list, menu, popover and tooltip sits on this layer, above panel chrome and modals. */
+export const POPUP_LAYER = "z-200";
 
 const menuPopup = cn(popupSurface, "min-w-36 p-1 shadow-menu");
 

package/src/components/ui/Popover.tsx

@@ -6,7 +6,7 @@
 import { Popover as BasePopover } from "@base-ui/react/popover";
 import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
 import { cn } from "./cn";
-import { popupSurface, type PopupPreviewState } from "./Menu";
+import { POPUP_LAYER, popupSurface, type PopupPreviewState } from "./Menu";
 
 type PortalContainer = ComponentPropsWithoutRef<typeof BasePopover.Portal>["container"];
 
@@ -70,7 +70,7 @@ export function Popover({
           sideOffset={sideOffset}
           collisionPadding={VIEWPORT_MARGIN}
           arrowPadding={ARROW_CORNER_CLEARANCE}
-          className="z-200"
+          className={POPUP_LAYER}
         >
           <BasePopover.Popup
             aria-label={ariaLabel}

package/src/components/ui/Select.tsx

@@ -6,7 +6,7 @@
 import { Select as BaseSelect } from "@base-ui/react/select";
 import { cn } from "./cn";
 import { fieldBase } from "./Input";
-import { floatingMotion } from "./Menu";
+import { floatingMotion, POPUP_LAYER } from "./Menu";
 import type { PreviewState } from "./Button";
 
 export interface SelectOption {
@@ -77,7 +77,7 @@ export function Select({
       </BaseSelect.Trigger>
 
       <BaseSelect.Portal>
-        <BaseSelect.Positioner sideOffset={4} alignItemWithTrigger={false}>
+        <BaseSelect.Positioner sideOffset={4} alignItemWithTrigger={false} className={POPUP_LAYER}>
           <BaseSelect.Popup
             className={cn(
               "min-w-[var(--anchor-width)] rounded-md border border-border bg-surface py-1 shadow-menu",

package/src/components/ui/Tooltip.tsx

@@ -6,7 +6,7 @@
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import { cloneElement, useId, useRef, useState, type ReactElement } from "react";
 import { cn } from "./cn";
-import { floatingMotion } from "./Menu";
+import { floatingMotion, POPUP_LAYER } from "./Menu";
 
 interface TooltipProps {
   label: string;
@@ -39,7 +39,7 @@ export function Tooltip({ label, children, delay = 400, side = "top" }: TooltipP
           side={side}
           sideOffset={SIDE_OFFSET}
           collisionPadding={VIEWPORT_MARGIN}
-          className="z-200"
+          className={POPUP_LAYER}
         >
           <BaseTooltip.Popup
             id={tooltipId}

package/src/components/ui/mountHost.testHelpers.ts

@@ -4,6 +4,13 @@ import { createRoot, type Root } from "react-dom/client";
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 let mounted: { root: Root; host: HTMLElement } | null = null;
+const tracked: Root[] = [];
+
+export function trackedRoot(host: HTMLElement): Root {
+  const root = createRoot(host);
+  tracked.push(root);
+  return root;
+}
 
 /** Renders into a fresh host attached to the body; `cleanupMounted` tears it down. */
 export function mountHost(element: ReactElement): HTMLElement {
@@ -16,6 +23,7 @@ export function mountHost(element: ReactElement): HTMLElement {
 }
 
 export function cleanupMounted(): void {
+  act(() => tracked.splice(0).forEach((root) => root.unmount()));
   if (!mounted) return;
   const { root, host } = mounted;
   mounted = null;