@hyperframes/studio 0.8.107 → 0.8.109

package/src/hooks/usePreviewPersistence.history.test.tsx

@@ -45,3 +45,79 @@ describe("undo that reloads the preview", () => {
     expect([player.elements, player.timelineReady]).toEqual([clips, true]);
   });
 });
+
+describe("undo that re-runs the top-level script over an element of a nested composition", () => {
+  const script = (width: number) =>
+    `var tl = gsap.timeline({ paused: true }); tl.to("#nwid", { width: ${width} }); window.__timelines["root"] = tl;`;
+  const page = (width: number) =>
+    `<html><body><div id="root" data-composition-id="root"></div><script>${script(width)}</script></body></html>`;
+  const SUB = `<template><div data-composition-id="sub"><div id="nwid" data-hf-id="hf-n" style="left: 40px"></div></div></template>`;
+
+  // The live preview: the top-level timeline tweened the nested element's width inline.
+  function nestedPreview() {
+    const doc = document.implementation.createHTMLDocument("");
+    doc.body.innerHTML =
+      `<div id="root" data-composition-id="root"><div data-composition-file="compositions/sub.html">` +
+      `<div id="nwid" data-hf-id="hf-n" style="left: 40px; width: 337px"></div></div></div>` +
+      `<script>${script(400)}</script>`;
+    const nwid = doc.getElementById("nwid")!;
+    const contentWindow = {
+      gsap: { timeline: vi.fn(), set: vi.fn() },
+      __hfForceTimelineRebind: vi.fn(),
+      __timelines: {
+        root: {
+          kill: vi.fn(),
+          getChildren: () => [{ targets: () => [nwid], vars: { width: 400 } }],
+        },
+      } as Record<string, unknown>,
+      __player: { getTime: () => 1, seek: vi.fn() },
+      __hfStudioManualEditsApply: vi.fn(),
+    };
+    return {
+      iframe: { contentWindow, contentDocument: doc } as unknown as HTMLIFrameElement,
+      nwid,
+    };
+  }
+
+  async function undo(fileOk: boolean) {
+    const { iframe, nwid } = nestedPreview();
+    const reloadPreview = vi.fn();
+    const fetch = vi.fn(async () => ({ ok: fileOk, json: async () => ({ content: SUB }) }));
+    vi.stubGlobal("fetch", fetch);
+    usePlayerStore.getState().beginTimelineSession("p1");
+    let sync: ReturnType<typeof usePreviewPersistence>["syncHistoryPreviewAfterApply"] | null =
+      null;
+    function Harness() {
+      sync = usePreviewPersistence({
+        showToast: () => {},
+        readOptionalProjectFile: async () => "",
+        writeProjectFile: async () => {},
+        recordEdit: async () => {},
+        previewIframeRef: { current: iframe },
+        activeCompPathRef: { current: "index.html" },
+        reloadPreview,
+      }).syncHistoryPreviewAfterApply;
+      return null;
+    }
+    mountReactHarness(<Harness />);
+    const files = { "index.html": { previous: page(400), restored: page(450) } };
+    await act(async () => sync!({ paths: Object.keys(files), files }));
+    vi.unstubAllGlobals();
+    return { nwid, reloadPreview, fetch };
+  }
+
+  it("restores the element from its own composition file", async () => {
+    const { nwid, reloadPreview, fetch } = await undo(true);
+
+    expect(fetch).toHaveBeenCalledWith(expect.stringContaining("/files/compositions%2Fsub.html"));
+    expect(reloadPreview).not.toHaveBeenCalled();
+    expect(nwid.getAttribute("style")).toBe("left: 40px;");
+  });
+
+  it("reloads the preview in full when that file cannot be read", async () => {
+    const { nwid, reloadPreview } = await undo(false);
+
+    expect(reloadPreview).toHaveBeenCalledTimes(1);
+    expect(nwid.getAttribute("style")).toBe("left: 40px; width: 337px");
+  });
+});

package/src/hooks/usePreviewPersistence.ts

@@ -14,9 +14,12 @@ import {
 import { trackStudioEvent } from "../utils/studioTelemetry";
 import {
   applyUndoRestoreToPreview,
+  readUndoNestedFiles,
   showRestoreInPlace,
   type RestoreFiles,
 } from "../utils/gsapUndoRestore";
+import { settleNestedReads } from "../utils/gsapSoftReload";
+import { readProjectFileContent } from "../utils/studioFileHistory";
 import { usePlayerStore } from "../player";
 import { syncStoredAutomationFromPreview } from "../player/lib/automationStoreSync";
 
@@ -204,12 +207,24 @@ export function usePreviewPersistence({
       // attributes onto the live DOM and re-runs the timeline at the SAME playhead,
       // falling back to reloadPreview for anything structural (split/delete undo),
       // multi-file, sub-comp, or a permanent soft-reload failure.
+      const projectId = usePlayerStore.getState().timelineProjectId;
+      const nestedFiles = await settleNestedReads(
+        projectId
+          ? readUndoNestedFiles(
+              previewIframeRef.current,
+              activeCompPathRef.current,
+              restore.files,
+              (path) => readProjectFileContent(projectId, path),
+            )
+          : null,
+      );
       const strategy = applyUndoRestoreToPreview(
         previewIframeRef.current,
         activeCompPathRef.current,
         restore.files,
         usePlayerStore.getState().currentTime,
         reloadPreview,
+        nestedFiles,
       );
       if (strategy === "full") {
         usePlayerStore.getState().setSelectedElementId(null);

package/src/hooks/useRazorSplit.test.tsx

@@ -95,3 +95,51 @@ describe("useRazorSplit mutation versions", () => {
     container.remove();
   });
 });
+
+describe("useRazorSplit linked clips", () => {
+  afterEach(() => vi.restoreAllMocks());
+
+  it("splits every member of a linked pair in one cut", async () => {
+    const { usePlayerStore } = await import("../player");
+    const clip = (id: string, tag: string): TimelineElement => ({
+      id,
+      domId: id,
+      tag,
+      start: 0,
+      duration: 4,
+      track: tag === "audio" ? 1 : 0,
+      link: "lk-1",
+    });
+    const video = clip("talk", "video");
+    usePlayerStore.getState().setElements([video, clip("talk-audio", "audio")]);
+    const bodies: string[] = [];
+    vi.spyOn(globalThis, "fetch").mockImplementation(async (input, init) => {
+      const url = String(input);
+      if (url.includes("/files/")) return jsonResponse({ content: "", version: '"v0"' });
+      bodies.push(String(init?.body ?? ""));
+      return jsonResponse({ error: "stop" }, 409);
+    });
+    let split: ((element: TimelineElement, splitTime: number) => Promise<void>) | undefined;
+    const root = createRoot(document.body.appendChild(document.createElement("div")));
+    function Harness() {
+      split = useRazorSplit({
+        projectId: "p1",
+        activeCompPath: "index.html",
+        showToast: vi.fn(),
+        writeProjectFile: vi.fn(),
+        recordEdit: vi.fn(),
+        reloadPreview: vi.fn(),
+      }).handleRazorSplit;
+      return null;
+    }
+    await act(async () => root.render(React.createElement(Harness)));
+    await act(async () => {
+      await split?.(video, 2);
+    });
+    const targets = JSON.parse(bodies[0] ?? "{}").files[0].targets.map(
+      (cut: { originalId: string }) => cut.originalId,
+    );
+    expect(targets).toEqual(["talk", "talk-audio"]);
+    act(() => root.unmount());
+  });
+});

package/src/hooks/useRazorSplit.ts

@@ -4,8 +4,11 @@ import { usePlayerStore } from "../player";
 import { getTimelineElementLabel } from "../utils/studioHelpers";
 import { trackStudioRazorSplit } from "../telemetry/events";
 import { canSplitElementAt, selectSplittableElements } from "../utils/timelineElementSplit";
+import { linkedMembersOf } from "../player/components/audioClipLink";
+import { isLinkedSelectionOn } from "../utils/linkedClipPreferences";
 import { buildAtomicCutIntents, runAtomicCutTransaction } from "../utils/razorSplitTransaction";
 import type { RecordEditInput } from "./timelineEditingHelpers";
+import { useFreezeFrame } from "./useFreezeFrame";
 
 interface UseRazorSplitOptions {
   projectId: string | null;
@@ -102,7 +105,16 @@ export function useRazorSplit({
       }
       if (!canSplitElementAt(element, splitTime)) return;
       try {
-        const result = await runCut([element], splitTime, "single");
+        const members = linkedMembersOf(
+          element,
+          usePlayerStore.getState().elements,
+          isLinkedSelectionOn(),
+        );
+        const result = await runCut(
+          members.filter((member) => canSplitElementAt(member, splitTime)),
+          splitTime,
+          "single",
+        );
         if (!result) return;
         if (result.syncFailed) return;
         showToast(`Split ${getTimelineElementLabel(element)} at ${splitTime.toFixed(2)}s`, "info");
@@ -135,5 +147,17 @@ export function useRazorSplit({
     [isRecordingRef, runCut, showToast],
   );
 
-  return { handleRazorSplit, handleRazorSplitAll };
+  const handleFreezeFrame = useFreezeFrame({
+    projectId,
+    activeCompPath,
+    showToast,
+    writeProjectFile,
+    observeProjectFileVersion,
+    recordEdit,
+    reloadPreview,
+    forceReloadSdkSession,
+    isRecordingRef,
+  });
+
+  return { handleRazorSplit, handleRazorSplitAll, handleFreezeFrame };
 }

package/src/hooks/useRenderClipContent.test.ts

@@ -5,6 +5,14 @@ import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it } from "vitest";
 import { CompositionThumbnail, VideoThumbnail } from "../player";
 import { AudioWaveform } from "../player/components/AudioWaveform";
+import { AudibleVideoClipContent } from "../player/components/AudibleVideoClipContent";
+import { ClipPeakMarks } from "../player/components/ClipPeakMarks";
+
+function unwrapPeakMarks(node: ReactNode): ReactNode {
+  return isValidElement<{ children?: ReactNode }>(node) && node.type === ClipPeakMarks
+    ? node.props.children
+    : node;
+}
 import type { TimelineClipRenderContext } from "../player/components/TimelineTypes";
 import { usePlayerStore, type TimelineElement } from "../player/store/playerStore";
 import { buildCompositionThumbnailUrl } from "../player/components/CompositionThumbnail";
@@ -93,9 +101,51 @@ describe("useRenderClipContent", () => {
       root.render(React.createElement(Harness));
     });
     act(() => root.unmount());
+    return unwrapPeakMarks(content);
+  }
+
+  function renderRaw(el: TimelineElement): ReactNode {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    let content: ReactNode = null;
+    function Harness() {
+      const render = useRenderClipContent({
+        projectIdRef: { current: "my-project" },
+        compIdToSrc: new Map(),
+        activePreviewUrl: null,
+        effectiveTimelineDuration: 12,
+      });
+      content = render(el, { clip: "#222", label: "#fff" });
+      return null;
+    }
+    act(() => root.render(React.createElement(Harness)));
+    act(() => root.unmount());
     return content;
   }
 
+  it("wraps a clip's waveform in peak marks at its own gain over its played source window", () => {
+    const content = renderRaw({
+      id: "voiceover",
+      tag: "audio",
+      start: 1,
+      duration: 4,
+      track: 1,
+      src: "assets/voiceover.mp3",
+      playbackStart: 2,
+      playbackRate: 1.5,
+      volume: 2,
+    });
+    expect(isValidElement(content) && content.type).toBe(ClipPeakMarks);
+    if (isValidElement<Record<string, unknown>>(content)) {
+      expect(content.props).toMatchObject({
+        peaksUrl: "/api/projects/my-project/peaks/assets/voiceover.mp3",
+        sourceWindow: { mediaStart: 2, sourceSpan: 6 },
+        gain: 2,
+      });
+    }
+  });
+
   it("renders audio clips as waveforms even when a composition preview URL is active", () => {
     const content = renderClipContent({
       id: "voiceover",
@@ -146,7 +196,7 @@ describe("useRenderClipContent", () => {
     }
   });
 
-  it("marks audio linked when a video clip uses the same file, and muted when hidden", () => {
+  it("marks hidden audio muted and leaves the link to the chain badge", () => {
     usePlayerStore.setState({
       thumbnailMode: "hidden",
       elements: [
@@ -167,15 +217,69 @@ describe("useRenderClipContent", () => {
       duration: 4,
       track: 1,
       src: "assets/clip.mp4",
+      link: "lk-1",
       hidden: true,
     });
-    expect(isValidElement<{ linked: boolean; muted: boolean }>(linked)).toBe(true);
-    if (isValidElement<{ linked: boolean; muted: boolean }>(linked)) {
-      expect(linked.props.linked).toBe(true);
+    expect(isValidElement<{ linked?: boolean; muted: boolean }>(linked)).toBe(true);
+    if (isValidElement<{ linked?: boolean; muted: boolean }>(linked)) {
+      expect(linked.props.linked).toBeUndefined();
       expect(linked.props.muted).toBe(true);
     }
   });
 
+  it("draws a waveform strip under the thumbnails of a video with sound", () => {
+    usePlayerStore.setState({ thumbnailMode: "adaptive" });
+    const content = renderClipContent(
+      {
+        id: "talk",
+        tag: "video",
+        start: 0,
+        duration: 4,
+        track: 0,
+        src: "talk.mp4",
+        hasAudio: true,
+      },
+      null,
+    );
+    expect(isValidElement<{ thumbnail: ReactNode; waveform: ReactNode }>(content)).toBe(true);
+    if (!isValidElement<{ thumbnail: ReactNode; waveform: ReactNode }>(content)) return;
+    expect(content.type).toBe(AudibleVideoClipContent);
+    const { thumbnail } = content.props;
+    const waveform = unwrapPeakMarks(content.props.waveform);
+    expect(isValidElement(thumbnail) && thumbnail.type).toBe(VideoThumbnail);
+    expect(isValidElement<{ waveformUrl: string }>(waveform) && waveform.props.waveformUrl).toBe(
+      "/api/projects/my-project/waveform/talk.mp4",
+    );
+    expect(isValidElement<{ labelInset?: number }>(waveform) && waveform.props.labelInset).toBe(0);
+  });
+
+  it("keeps a muted or silent video to thumbnails only", () => {
+    usePlayerStore.setState({ thumbnailMode: "adaptive" });
+    for (const extra of [{ hasAudio: true, muted: true }, { hasAudio: false }]) {
+      const content = renderClipContent(
+        { id: "b", tag: "video", start: 0, duration: 4, track: 0, src: "b.mp4", ...extra },
+        null,
+      );
+      expect(isValidElement(content) && content.type).toBe(VideoThumbnail);
+    }
+  });
+
+  it("still shows the sound strip when thumbnails are off", () => {
+    const content = renderClipContent(
+      {
+        id: "talk",
+        tag: "video",
+        start: 0,
+        duration: 4,
+        track: 0,
+        src: "talk.mp4",
+        hasAudio: true,
+      },
+      null,
+    );
+    expect(isValidElement(content) && content.type).toBe(AudibleVideoClipContent);
+  });
+
   it("passes empty labels to thumbnail content so TimelineClip owns clip names", () => {
     usePlayerStore.setState({ thumbnailMode: "adaptive" });
 

package/src/hooks/useRenderClipContent.ts

@@ -1,4 +1,5 @@
 import { buildProjectApiPath } from "../utils/projectRouting";
+import { resolvePreviewRelative } from "../utils/previewRelativePath";
 import { useCallback, type ReactNode } from "react";
 import { createElement } from "react";
 import { CompositionThumbnail, VideoThumbnail } from "../player";
@@ -11,6 +12,9 @@ import type { TimelineClipRenderContext } from "../player/components/TimelineTyp
 import { audioPillFlags } from "../player/components/audioClipLink";
 import { AudioWaveform, rendersWaveform } from "../player/components/AudioWaveform";
 import { ImageThumbnail } from "../player/components/ImageThumbnail";
+import { AudibleVideoClipContent } from "../player/components/AudibleVideoClipContent";
+import { ClipPeakMarks } from "../player/components/ClipPeakMarks";
+import { clipHasSound } from "../player/components/clipMenuNormalize";
 import { encodePreviewPath, resolveMediaPreviewUrl } from "../player/components/thumbnailUtils";
 import { usePlayerStore } from "../player/store/playerStore";
 import { thumbnailRevisionOf } from "../player/store/thumbnailSlice";
@@ -33,24 +37,6 @@ export function normalizeCompositionSrc(
   return compSrc;
 }
 
-/** Resolve a media src to its project-relative preview path, or null. */
-function resolvePreviewRelative(
-  src: string | undefined,
-  pid: string,
-  origin: string,
-): string | null {
-  if (!src) return null;
-  try {
-    const parsed = new URL(src, origin);
-    const base = new URL(buildProjectApiPath(pid, `/preview/`), origin).pathname;
-    return parsed.pathname.startsWith(base)
-      ? decodeURIComponent(parsed.pathname.slice(base.length))
-      : null;
-  } catch {
-    return null;
-  }
-}
-
 /**
  * The trimmed source slice as start/end fractions (0–1) of the source, so the
  * waveform can window its peaks to the clip edges. Undefined when the source
@@ -77,6 +63,7 @@ function renderAudioClip(
   labelColor: string,
   context: TimelineClipRenderContext,
   elements: readonly TimelineElement[],
+  labelInset?: number,
 ): ReactNode {
   const audioUrl = resolveMediaPreviewUrl(el.src ?? "", pid, window.location.origin);
   const srcRelative = resolvePreviewRelative(audioUrl, pid, window.location.origin);
@@ -88,7 +75,7 @@ function renderAudioClip(
     ? buildProjectApiPath(pid, `/waveform/${encodedRelative}`)
     : undefined;
   const { start, end } = trimFractions(el);
-  return createElement(AudioWaveform, {
+  const waveform = createElement(AudioWaveform, {
     audioUrl,
     waveformUrl,
     label: "",
@@ -98,8 +85,30 @@ function renderAudioClip(
     projectId: pid,
     sessionEpoch,
     priority: context.priority,
+    labelInset,
     ...audioPillFlags(el, elements),
   });
+  return createElement(
+    ClipPeakMarks,
+    {
+      peaksUrl: encodedRelative ? buildProjectApiPath(pid, `/peaks/${encodedRelative}`) : undefined,
+      sourceWindow: {
+        mediaStart: el.playbackStart ?? 0,
+        sourceSpan: el.duration * (el.playbackRate ?? 1),
+      },
+      gain: el.volume ?? 1,
+    },
+    waveform,
+  );
+}
+
+function withSoundStrip(
+  el: TimelineElement,
+  thumbnail: ReactNode,
+  waveform: (labelInset: number) => ReactNode,
+): ReactNode {
+  if (el.tag !== "video" || !clipHasSound(el)) return thumbnail;
+  return createElement(AudibleVideoClipContent, { thumbnail, waveform: waveform(0) });
 }
 
 export interface UseRenderClipContentOptions {
@@ -134,10 +143,10 @@ export function useRenderClipContent({
 
       // Thumbnail generation disabled (perf) -> plain clip bars. Audio still shows
       // its waveform (cheap, not a frame thumbnail). Toggle: timeline toolbar.
+      const waveform = (labelInset?: number) =>
+        renderAudioClip(el, pid, sessionEpoch, style.label, context, elements, labelInset);
       if (effectiveMode === "hidden") {
-        return rendersWaveform(el)
-          ? renderAudioClip(el, pid, sessionEpoch, style.label, context, elements)
-          : null;
+        return rendersWaveform(el) ? waveform() : withSoundStrip(el, null, waveform);
       }
 
       let compSrc = el.compositionSrc;
@@ -222,7 +231,7 @@ export function useRenderClipContent({
             rich: context.rich,
           });
         }
-        return createElement(VideoThumbnail, {
+        const thumbnail = createElement(VideoThumbnail, {
           videoSrc: mediaSrc,
           label: "",
           labelColor: style.label,
@@ -233,6 +242,7 @@ export function useRenderClipContent({
           sessionEpoch,
           priority: context.priority,
         });
+        return withSoundStrip(el, thumbnail, waveform);
       }
 
       if (htmlPreviewEligible) {

package/src/hooks/useTimelineDeleteOps.ts

@@ -10,6 +10,7 @@ import { studioWriteHeaders } from "../utils/studioFileVersion";
 import { getTimelineElementLabel } from "../utils/studioHelpers";
 import { buildPatchTarget, removeIframeTimelineElements } from "./timelineEditingHelpers";
 import { captureDurationRollback } from "./timelineTimingSync";
+import { setLinkInSource } from "../components/editor/mediaLinkEdits";
 import { setCompositionDurationToContent } from "../utils/timelineAssetDrop";
 import { furthestClipEndFromSource } from "../player/lib/timelineElementHelpers";
 import {
@@ -60,6 +61,11 @@ interface UseTimelineDeleteOpsOptions {
 // timelineGapCommit.ts.
 let deleteGestureSeq = 0;
 
+function unlinkInSource(source: string, survivors: readonly TimelineElement[]): string {
+  const targets = survivors.map(buildPatchTarget).filter((target) => target !== null);
+  return targets.length > 0 ? setLinkInSource(source, targets, null) : source;
+}
+
 export function useTimelineDeleteOps({
   projectIdRef,
   activeCompPath,
@@ -80,7 +86,7 @@ export function useTimelineDeleteOps({
   // fallow-ignore-next-line complexity
   const handleTimelineElementsDelete = useCallback(
     // fallow-ignore-next-line complexity
-    async (selection: TimelineElement[]) => {
+    async (selection: TimelineElement[], alsoUnlink: readonly TimelineElement[] = []) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
         return;
@@ -150,9 +156,9 @@ export function useTimelineDeleteOps({
               // Shrink to the furthest remaining clip end, read from the post-removal source:
               // store durations are runtime-truncated.
               const deleteContentEnd = furthestClipEndFromSource(removedContent);
-              const patchedContent = setCompositionDurationToContent(
-                removedContent,
-                deleteContentEnd,
+              const patchedContent = unlinkInSource(
+                setCompositionDurationToContent(removedContent, deleteContentEnd),
+                alsoUnlink,
               );
               // Optimistically reflect the shrunk length in the readout/seek bar,
               // rolling it back if the persist below fails (see captureDurationRollback).

package/src/hooks/useTimelineEditGuard.ts

@@ -0,0 +1,54 @@
+import { useCallback, useRef } from "react";
+import type { TimelineElement } from "../player";
+import { useTimelineEditRefusal } from "./timelineEditPermission";
+
+type GuardedTimelineHandler = (...args: never[]) => Promise<unknown>;
+type GuardedTimelineResolver = (...args: never[]) => readonly TimelineElement[];
+type GuardedTimelineRefusal = (reason: string, ...args: never[]) => unknown;
+
+interface GuardedTimelineEntry {
+  resolveTargets: GuardedTimelineResolver;
+  onRefused?: GuardedTimelineRefusal;
+  wrapped: GuardedTimelineHandler;
+}
+
+export function useTimelineEditGuard(
+  canEdit: Parameters<typeof useTimelineEditRefusal>[0],
+  showToast: Parameters<typeof useTimelineEditRefusal>[1],
+) {
+  const refuseEdit = useTimelineEditRefusal(canEdit, showToast);
+  const refuseEditRef = useRef(refuseEdit);
+  refuseEditRef.current = refuseEdit;
+  const guardedRef = useRef(new WeakMap<GuardedTimelineHandler, GuardedTimelineEntry>());
+  // Refuses (no call, no write, no history entry) when any target is
+  // blocked; otherwise runs fn as before. Cached by fn identity — like
+  // track() — so a fresh closure here doesn't defeat track's own cache.
+  const guard = useCallback(
+    <H extends (...args: never[]) => Promise<unknown>>(
+      resolveTargets: (...args: Parameters<H>) => readonly TimelineElement[],
+      fn: H,
+      onRefused?: (reason: string, ...args: Parameters<H>) => Awaited<ReturnType<H>>,
+    ): H => {
+      const key = fn as unknown as GuardedTimelineHandler;
+      const cached = guardedRef.current.get(key);
+      if (cached) {
+        cached.resolveTargets = resolveTargets as unknown as GuardedTimelineResolver;
+        cached.onRefused = onRefused as unknown as GuardedTimelineRefusal | undefined;
+        return cached.wrapped as H;
+      }
+      const entry = {} as GuardedTimelineEntry;
+      entry.resolveTargets = resolveTargets as unknown as GuardedTimelineResolver;
+      entry.onRefused = onRefused as unknown as GuardedTimelineRefusal | undefined;
+      entry.wrapped = ((...args: Parameters<H>) => {
+        const reason = refuseEditRef.current(entry.resolveTargets(...(args as never[])));
+        if (reason !== null)
+          return Promise.resolve(entry.onRefused?.(reason, ...(args as never[])));
+        return fn(...args);
+      }) as H as unknown as GuardedTimelineHandler;
+      guardedRef.current.set(key, entry);
+      return entry.wrapped as H;
+    },
+    [],
+  );
+  return guard;
+}