@hyperframes/studio 0.8.108 → 0.8.109

package/src/components/editor/mediaLinkEdits.ts

@@ -0,0 +1,282 @@
+import { HF_AUDIO_AUTOMATION_ATTR } from "@hyperframes/core/audio-automation";
+import { MEDIA_LINK_ATTR, SYNC_ORIGIN_ATTR, mintLinkId } from "@hyperframes/core/media-link";
+import { sameCompositionScope, type TimelineElement } from "../../player/store/timelineElement";
+import { mediaAssetIdentity, sharesLinkGroup } from "../../player/components/audioClipLink";
+import {
+  applyPatchByTarget,
+  findTagByTarget,
+  readAttributeByTarget,
+  type PatchOperation,
+  type PatchTarget,
+} from "../../utils/sourcePatcher";
+import { collectHtmlIds } from "../../utils/studioHelpers";
+import { generateId } from "../../utils/generateId";
+import {
+  COPIED_TIMING_ATTRS,
+  MOVED_SOUND_ATTRS,
+  firstFreeName,
+  formatAttrs,
+  insertBeforeTarget,
+  readAuthoredSrc,
+  splitAutomation,
+} from "./mediaAudioEdits";
+
+const LINK_PROPERTY = MEDIA_LINK_ATTR.slice("data-".length);
+const HIDDEN_ATTR = "data-hidden";
+const SYNC_ORIGIN_PROPERTY = SYNC_ORIGIN_ATTR.slice("data-".length);
+const SYNC_TOLERANCE_S = 1e-3;
+
+const dataOp = (property: string, value: string | null): PatchOperation => ({
+  type: "attribute",
+  property: property.startsWith("data-") ? property.slice("data-".length) : property,
+  value,
+});
+
+const htmlOp = (property: string, value: string | null): PatchOperation => ({
+  type: "html-attribute",
+  property,
+  value,
+});
+
+function applyOps(source: string, target: PatchTarget, ops: readonly PatchOperation[]): string {
+  return ops.reduce((html, op) => applyPatchByTarget(html, target, op), source);
+}
+
+function mintLinkIdForSource(source: string): string {
+  const links = Array.from(
+    source.matchAll(/\bdata-(?:link|sync-origin)=["']([^"']+)["']/g),
+    (match) => match[1] ?? "",
+  );
+  return mintLinkId([...collectHtmlIds(source), ...links]);
+}
+
+/** Write (or with `null`, remove) `data-link` on every target. */
+export function setLinkInSource(
+  source: string,
+  targets: readonly PatchTarget[],
+  linkId: string | null,
+): string {
+  return targets.reduce(
+    (html, target) => applyPatchByTarget(html, target, dataOp(LINK_PROPERTY, linkId)),
+    source,
+  );
+}
+
+/** Link the targets under one freshly minted id, which is also their sync origin. */
+export function linkInSource(source: string, targets: readonly PatchTarget[]): string {
+  const linkId = mintLinkIdForSource(source);
+  return targets.reduce(
+    (html, target) =>
+      applyOps(html, target, [dataOp(LINK_PROPERTY, linkId), dataOp(SYNC_ORIGIN_PROPERTY, linkId)]),
+    source,
+  );
+}
+
+/** Remove one element (open tag through its matching close tag) and its line's indentation. */
+export function removeElementInSource(source: string, target: PatchTarget): string {
+  const match = findTagByTarget(source, target);
+  if (!match) return source;
+  const tagName = /^<([a-zA-Z][\w-]*)/.exec(match.tag)?.[1]?.toLowerCase() ?? "";
+  const closing = `</${tagName}>`;
+  const closeAt = match.tag.endsWith("/>")
+    ? -1
+    : source.toLowerCase().indexOf(closing, match.end + 1);
+  let end = closeAt >= 0 ? closeAt + closing.length : match.end + 1;
+  let start = match.start;
+  const lineStart = source.lastIndexOf("\n", start) + 1;
+  if (/^[ \t]*$/.test(source.slice(lineStart, start)) && source[end] === "\n") {
+    start = lineStart;
+    end += 1;
+  }
+  return source.slice(0, start) + source.slice(end);
+}
+
+function hasBooleanAttr(source: string, target: PatchTarget, name: string): boolean {
+  const tag = findTagByTarget(source, target)?.tag ?? "";
+  return new RegExp(`\\s${name}(?=[\\s=/>]|$)`, "i").test(tag);
+}
+
+export interface DetachAudioResult {
+  html: string;
+  audioId: string;
+  linkId: string;
+}
+
+/**
+ * Detach audio: insert a linked `<audio>` over the same file and window, move the
+ * sound attributes onto it, and mute the video. Renders identically.
+ */
+export function detachAudioInSource(
+  source: string,
+  input: { target: PatchTarget; videoId: string | null; track: number },
+): DetachAudioResult | null {
+  const { target } = input;
+  if (!findTagByTarget(source, target)) return null;
+  const linkId = mintLinkIdForSource(source);
+  const audioId = firstFreeName(
+    `${input.videoId || "video"}-audio`,
+    new Set(collectHtmlIds(source)),
+  );
+
+  const moved: Array<[string, string]> = [];
+  const videoOps: PatchOperation[] = [htmlOp("muted", "true"), dataOp("has-audio", null)];
+  for (const name of MOVED_SOUND_ATTRS) {
+    const value = readAttributeByTarget(source, target, name);
+    if (value === undefined) continue;
+    moved.push([name, value]);
+    videoOps.push(dataOp(name, null));
+  }
+  const automation = readAttributeByTarget(source, target, HF_AUDIO_AUTOMATION_ATTR);
+  if (automation !== undefined) {
+    const { videoKeeps, audioTakes } = splitAutomation(automation);
+    moved.push([HF_AUDIO_AUTOMATION_ATTR, audioTakes]);
+    videoOps.push(dataOp(HF_AUDIO_AUTOMATION_ATTR, videoKeeps));
+  }
+  videoOps.push(dataOp(LINK_PROPERTY, linkId), dataOp(SYNC_ORIGIN_PROPERTY, linkId));
+
+  const timing: Array<[string, string]> = [];
+  for (const name of COPIED_TIMING_ATTRS) {
+    const value = readAttributeByTarget(source, target, name);
+    if (value !== undefined) timing.push([`data-${name}`, value]);
+  }
+  const attrs: Array<[string, string]> = [
+    ["id", audioId],
+    ["data-hf-id", `hf-${generateId()}`],
+    ["class", "clip"],
+    ["src", readAuthoredSrc(source, target)],
+    ...timing,
+    ["data-track-index", String(input.track)],
+    [MEDIA_LINK_ATTR, linkId],
+    [SYNC_ORIGIN_ATTR, linkId],
+    ...moved,
+  ];
+  if (hasBooleanAttr(source, target, "loop")) attrs.push(["loop", ""]);
+  if (hasBooleanAttr(source, target, HIDDEN_ATTR)) attrs.push([HIDDEN_ATTR, ""]);
+  const inserted = insertBeforeTarget(source, target, `<audio ${formatAttrs(attrs)}></audio>`);
+  return { html: applyOps(inserted, target, videoOps), audioId, linkId };
+}
+
+/**
+ * Merge back: move the audio's sound attributes onto its video, unmute the
+ * video, drop the link, and delete the audio. The inverse of detach.
+ */
+export function mergeAudioInSource(
+  source: string,
+  input: { videoTarget: PatchTarget; audioTarget: PatchTarget },
+): string | null {
+  const { videoTarget, audioTarget } = input;
+  if (!findTagByTarget(source, videoTarget) || !findTagByTarget(source, audioTarget)) return null;
+  const assetOf = (target: PatchTarget) =>
+    mediaAssetIdentity({ src: readAuthoredSrc(source, target) });
+  const videoAsset = assetOf(videoTarget);
+  if (!videoAsset || videoAsset !== assetOf(audioTarget)) return null;
+  const hiddenOf = (target: PatchTarget) => hasBooleanAttr(source, target, HIDDEN_ATTR);
+  if (hiddenOf(videoTarget) !== hiddenOf(audioTarget)) return null;
+  const videoOps: PatchOperation[] = [];
+  for (const name of MOVED_SOUND_ATTRS) {
+    const value = readAttributeByTarget(source, audioTarget, name);
+    videoOps.push(dataOp(name, value ?? null));
+  }
+  const automation = readAttributeByTarget(source, audioTarget, HF_AUDIO_AUTOMATION_ATTR);
+  if (automation !== undefined) videoOps.push(dataOp(HF_AUDIO_AUTOMATION_ATTR, automation));
+  videoOps.push(
+    htmlOp("muted", null),
+    dataOp(LINK_PROPERTY, null),
+    dataOp(SYNC_ORIGIN_PROPERTY, null),
+    dataOp("has-audio", "true"),
+  );
+  return applyOps(removeElementInSource(source, audioTarget), videoTarget, videoOps);
+}
+
+type TimedElement = Pick<
+  TimelineElement,
+  "id" | "key" | "tag" | "src" | "start" | "duration" | "playbackStart" | "playbackRate" | "link"
+> &
+  Pick<TimelineElement, "muted" | "hasAudio" | "hidden" | "sourceFile" | "compositionScope">;
+
+const tagOf = (el: Pick<TimelineElement, "tag">) => el.tag.trim().toLowerCase();
+const keyOf = (el: Pick<TimelineElement, "id" | "key">) => el.key ?? el.id;
+const near = (a: number, b: number) => Math.abs(a - b) <= SYNC_TOLERANCE_S;
+
+function hasIdenticalTiming(a: TimedElement, b: TimedElement): boolean {
+  return (
+    near(a.start, b.start) &&
+    near(a.duration, b.duration) &&
+    near(a.playbackStart ?? 0, b.playbackStart ?? 0) &&
+    near(a.playbackRate ?? 1, b.playbackRate ?? 1)
+  );
+}
+
+const sameAssetInScope = (a: TimedElement, b: TimedElement) => {
+  const asset = mediaAssetIdentity(a);
+  return asset !== null && asset === mediaAssetIdentity(b) && sameCompositionScope(a, b);
+};
+
+/** A video whose sound is on the video itself: what Detach audio acts on. */
+export function canDetachAudio(el: TimedElement): boolean {
+  return tagOf(el) === "video" && el.muted !== true && el.hasAudio === true;
+}
+
+/**
+ * The (muted video, audio) pair Merge back acts on, found from either member:
+ * same file, and linked to each other or with identical timing.
+ */
+export function findMergePair<T extends TimedElement>(
+  element: T,
+  elements: readonly T[],
+): { video: T; audio: T } | null {
+  const isVideo = tagOf(element) === "video";
+  if (!isVideo && tagOf(element) !== "audio") return null;
+  const partnerTag = isVideo ? "audio" : "video";
+  const candidates = elements.filter(
+    (el) =>
+      keyOf(el) !== keyOf(element) && tagOf(el) === partnerTag && sameAssetInScope(el, element),
+  );
+  const partner =
+    candidates.find((el) => sharesLinkGroup(el, element)) ??
+    candidates.find((el) => hasIdenticalTiming(el, element));
+  if (!partner) return null;
+  const video = isVideo ? element : partner;
+  const audio = isVideo ? partner : element;
+  if ((video.hidden === true) !== (audio.hidden === true)) return null;
+  return video.muted === true ? { video, audio } : null;
+}
+
+/** Exactly one video and one audio, same file, identical timing, not already linked together. */
+export function canLinkPair(selected: readonly TimedElement[]): boolean {
+  if (selected.length !== 2) return false;
+  const [a, b] = selected;
+  if (!a || !b) return false;
+  const tags = new Set([tagOf(a), tagOf(b)]);
+  if (!tags.has("video") || !tags.has("audio")) return false;
+  if (sharesLinkGroup(a, b)) return false;
+  return sameAssetInScope(a, b) && hasIdenticalTiming(a, b);
+}
+
+type TrackedElement = Pick<TimelineElement, "tag" | "track" | "start" | "duration"> & {
+  authoredTrack?: number;
+};
+
+/**
+ * The detached audio's track: the first audio-only track below every visual
+ * track that is free for the clip's window, else a new track at the bottom.
+ */
+export function pickDetachedAudioTrack(
+  elements: readonly TrackedElement[],
+  window: { start: number; duration: number },
+): number {
+  const trackOf = (el: TrackedElement) => el.authoredTrack ?? el.track;
+  const visualTracks = elements.filter((el) => tagOf(el) !== "audio").map(trackOf);
+  const lowestAudio = Math.max(-1, ...visualTracks) + 1;
+  const end = window.start + window.duration;
+  const allTracks = elements.map(trackOf);
+  const bottom = Math.max(lowestAudio - 1, ...allTracks) + 1;
+  for (let track = lowestAudio; track < bottom; track += 1) {
+    const occupants = elements.filter((el) => trackOf(el) === track);
+    const free = occupants.every(
+      (el) => tagOf(el) === "audio" && (el.start >= end || el.start + el.duration <= window.start),
+    );
+    if (free) return track;
+  }
+  return bottom;
+}

package/src/components/editor/propertyPanelFlatMediaSection.test.tsx

@@ -879,10 +879,11 @@ describe.each<PanelKind>(["flat", "design"])("%s panel — cutout keeps the soun
       htmlOp("muted", "true"),
       dataOp("has-audio", null),
       dataOp("volume", null),
-      dataOp("link", "link"),
+      dataOp("link", "lk-1"),
+      dataOp("sync-origin", "lk-1"),
     ]);
     const source =
-      '<div data-composition-id="main"><video id="s1-bg" src="assets/intro-loop.mp4" muted data-start="2" data-duration="3" data-track-index="0" data-link="link"></video></div>';
+      '<div data-composition-id="main"><video id="s1-bg" src="assets/intro-loop.mp4" muted data-start="2" data-duration="3" data-track-index="0" data-link="lk-1"></video></div>';
     const prepared = options?.prepareContent?.(source) ?? "";
     const audio = new DOMParser()
       .parseFromString(prepared, "text/html")
@@ -890,7 +891,7 @@ describe.each<PanelKind>(["flat", "design"])("%s panel — cutout keeps the soun
     expect(audio?.getAttribute("src")).toBe("assets/intro-loop.mp4");
     expect(audio?.getAttribute("data-start")).toBe("2");
     expect(audio?.getAttribute("data-duration")).toBe("3");
-    expect(audio?.getAttribute("data-link")).toBe("link");
+    expect(audio?.getAttribute("data-link")).toBe("lk-1");
     expect(audio?.getAttribute("data-volume")).toBe("0.5");
     expect(text).toContain("Background removed. Sound kept on a linked audio track.");
   });

package/src/components/editor/propertyPanelMediaSection.tsx

@@ -24,6 +24,7 @@ import {
   audioGainToText,
 } from "@hyperframes/core/audio-gain";
 import type { CommitDomAttributeBatch } from "../../hooks/domEditCommitTypes";
+import { useLinkedSpeedCommit, withLinkedPlaybackRate } from "./linkedSpeedEdits";
 import { commitCutout, commitHasAudioToggle, commitMutedToggle } from "./mediaAudioEdits";
 
 // fallow-ignore-next-line complexity
@@ -56,6 +57,10 @@ export function MediaSection({
   ) => Promise<BackgroundRemovalResult>;
 }) {
   const track = useTrackDesignInput();
+  const setRate = withLinkedPlaybackRate(
+    onSetAttribute,
+    useLinkedSpeedCommit(element, onSetAttributeBatch),
+  );
   const isVideo = element.tagName === "video";
   const isAudio = element.tagName === "audio";
   const isImage = element.tagName === "img";
@@ -279,7 +284,7 @@ export function MediaSection({
                 displayValue={`${formatNumericValue(playbackRate)}x`}
                 formatDisplayValue={(next) => `${formatNumericValue(next / 100)}x`}
                 onCommit={(next) => {
-                  void onSetAttribute("playback-rate", formatNumericValue(next / 100));
+                  void setRate("playback-rate", formatNumericValue(next / 100));
                 }}
               />
             </div>

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/useTimelineEditCallbacks.ts

@@ -54,6 +54,8 @@ export interface TimelineEditCallbackDeps {
   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[],
@@ -134,6 +136,8 @@ export function useTimelineEditCallbacks({
   handleRazorSplit,
   handleRazorSplitAll,
   handleFreezeFrame,
+  handleLinkEdit,
+  handleTimelineElementDeleteOnly,
   handleGroupClips,
   setElementFxAttribute,
 }: TimelineEditCallbackDeps): TimelineEditCallbacks {
@@ -230,6 +234,8 @@ export function useTimelineEditCallbacks({
       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
@@ -427,6 +433,8 @@ export function useTimelineEditCallbacks({
       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;

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

@@ -4,7 +4,6 @@ import { createRequire } from "node:module";
 import { readFileSync } from "node:fs";
 import path from "node:path";
 import React, { act } from "react";
-import { createRoot, type Root } from "react-dom/client";
 import { compile } from "tailwindcss";
 import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
 
@@ -21,33 +20,15 @@ import { Toggle } from "./Toggle";
 import { isTypingTarget } from "../../utils/typingTarget";
 import { shouldIgnorePlaybackShortcutTarget } from "../../player/lib/playbackShortcuts";
 import { __resetDesignInputThrottle, trackDesignInput } from "../../utils/designInputTracking";
+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;
-}
-
-function unmount() {
-  if (!mounted) return;
-  const { root, host } = mounted;
-  mounted = null;
-  act(() => root.unmount());
-  host.remove();
-}
-
 beforeEach(() => {
   trackStudioEvent.mockReset();
   __resetDesignInputThrottle();
 });
-afterEach(unmount);
+afterEach(cleanupMounted);
 
 /** Base UI moves focus a task later than React renders; happy-dom is no faster. */
 const settle = () => act(async () => void (await new Promise((r) => setTimeout(r, 0))));

package/src/contexts/TimelineEditContext.tsx

@@ -39,10 +39,13 @@ const EDIT_CALLBACK_KEY_SET: Record<keyof TimelineEditCallbacks, true> = {
   onSetElementAttributeQuiet: true,
   onRevertElementAttributeLive: true,
   onBlockedEditAttempt: true,
+  onLinkEdit: true,
+  onDeleteElementOnly: true,
   onSplitElement: true,
   onRazorSplit: true,
   onRazorSplitAll: true,
   onFreezeFrame: true,
+  onNotice: true,
   onDeleteKeyframe: true,
   onDeleteAllKeyframes: true,
   onMoveKeyframeToPlayhead: true,