@hyperframes/studio 0.8.108 → 0.8.109

package/src/hooks/appHotkeysDispatch.ts

@@ -9,6 +9,7 @@ import { shouldIgnoreHistoryShortcut } from "../utils/studioHelpers";
 import { canSplitElement } from "../utils/timelineElementSplit";
 import { trackStudioEvent } from "../utils/studioTelemetry";
 import { STUDIO_PLAIN_KEYS } from "../player/components/studioShortcuts";
+import type { LinkShortcutCallbacks } from "./linkShortcuts";
 
 // Extracted from useAppHotkeys.ts to keep it under the studio 600-line cap,
 // following useTimelineDeleteOps's precedent. Pure functions, no hooks — the
@@ -29,7 +30,7 @@ function handleUndoRedoKey(event: KeyboardEvent, onUndo: () => void, onRedo: ()
   return false;
 }
 
-export interface HotkeyCallbacks {
+export interface HotkeyCallbacks extends LinkShortcutCallbacks {
   handleTimelineElementsDelete: (elements: TimelineElement[]) => Promise<void>;
   handleTimelineElementSplit: (element: TimelineElement, splitTime: number) => Promise<void>;
   handleDomEditElementDelete: (

package/src/hooks/linkShortcuts.test.ts

@@ -0,0 +1,70 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { usePlayerStore, type TimelineElement } from "../player";
+import { dispatchLinkShortcut } from "./linkShortcuts";
+
+const clip = (id: string, tag: string, extra: Partial<TimelineElement> = {}): TimelineElement => ({
+  id,
+  tag,
+  src: "talk.mp4",
+  start: 0,
+  duration: 4,
+  track: 0,
+  ...extra,
+});
+
+function key(init: KeyboardEventInit): KeyboardEvent {
+  const event = new KeyboardEvent("keydown", { cancelable: true, ...init });
+  vi.spyOn(event, "preventDefault");
+  return event;
+}
+
+function select(elements: TimelineElement[], id: string) {
+  usePlayerStore.getState().setElements(elements);
+  usePlayerStore.getState().setSelection([id], id);
+}
+
+describe("dispatchLinkShortcut", () => {
+  afterEach(() => vi.restoreAllMocks());
+
+  it("⌘L unlinks the selected linked clip", () => {
+    const video = clip("talk", "video", { muted: true, link: "lk-1" });
+    const audio = clip("talk-audio", "audio", { link: "lk-1" });
+    select([video, audio], "talk");
+    const handleLinkEdit = vi.fn();
+    const event = key({ metaKey: true, key: "l" });
+    expect(dispatchLinkShortcut(event, { handleLinkEdit })).toBe(true);
+    expect(handleLinkEdit).toHaveBeenCalledWith({ kind: "unlink", elements: [video, audio] });
+    expect(event.preventDefault).toHaveBeenCalled();
+  });
+
+  it("⌥⇧D detaches audio, read by key code since Option changes the character", () => {
+    const talk = clip("talk", "video", { hasAudio: true });
+    select([talk], "talk");
+    const handleLinkEdit = vi.fn();
+    expect(
+      dispatchLinkShortcut(key({ altKey: true, shiftKey: true, key: "Î", code: "KeyD" }), {
+        handleLinkEdit,
+      }),
+    ).toBe(true);
+    expect(handleLinkEdit).toHaveBeenCalledWith({ kind: "detach", element: talk });
+  });
+
+  it("⌥⌫ deletes one linked member", () => {
+    const video = clip("talk", "video", { muted: true, link: "lk-1" });
+    select([video, clip("talk-audio", "audio", { link: "lk-1" })], "talk");
+    const handleTimelineElementDeleteOnly = vi.fn();
+    dispatchLinkShortcut(key({ altKey: true, key: "Backspace" }), {
+      handleLinkEdit: vi.fn(),
+      handleTimelineElementDeleteOnly,
+    });
+    expect(handleTimelineElementDeleteOnly).toHaveBeenCalledWith(video);
+  });
+
+  it("leaves the key alone when no link item applies", () => {
+    select([clip("title", "div")], "title");
+    const event = key({ metaKey: true, key: "l" });
+    expect(dispatchLinkShortcut(event, { handleLinkEdit: vi.fn() })).toBe(false);
+    expect(event.preventDefault).not.toHaveBeenCalled();
+  });
+});

package/src/hooks/linkShortcuts.ts

@@ -0,0 +1,41 @@
+import { usePlayerStore } from "../player";
+import type { TimelineEditCallbacks } from "../player/components/timelineCallbacks";
+import { resolveLinkMenuItems } from "../player/components/clipMenuLinkItems";
+
+export interface LinkShortcutCallbacks {
+  handleLinkEdit?: TimelineEditCallbacks["onLinkEdit"];
+  handleTimelineElementDeleteOnly?: TimelineEditCallbacks["onDeleteElementOnly"];
+}
+
+const isDeleteKey = (event: KeyboardEvent) => event.key === "Backspace" || event.key === "Delete";
+const hasMod = (event: KeyboardEvent) => event.metaKey || event.ctrlKey;
+
+const SHORTCUTS: ReadonlyArray<[string, (event: KeyboardEvent) => boolean]> = [
+  ["⌘L", (e) => hasMod(e) && !e.altKey && !e.shiftKey && e.key.toLowerCase() === "l"],
+  ["⌥⇧D", (e) => !hasMod(e) && e.altKey && e.shiftKey && e.code === "KeyD"],
+  ["⌥⌫", (e) => !hasMod(e) && e.altKey && !e.shiftKey && isDeleteKey(e)],
+];
+
+function shortcutOf(event: KeyboardEvent): string | null {
+  return SHORTCUTS.find(([, matches]) => matches(event))?.[0] ?? null;
+}
+
+/** ⌘L unlink/link, ⌥⇧D detach audio, ⌥⌫ delete one linked clip — the clip menu's shortcuts. */
+export function dispatchLinkShortcut(event: KeyboardEvent, cb: LinkShortcutCallbacks): boolean {
+  const shortcut = shortcutOf(event);
+  if (!shortcut) return false;
+  const { elements, selectedElementId, selectedElementIds } = usePlayerStore.getState();
+  const element = elements.find((el) => (el.key ?? el.id) === selectedElementId);
+  if (!element) return false;
+  const item = resolveLinkMenuItems({
+    element,
+    elements,
+    selectedKeys: selectedElementIds,
+    onLinkEdit: cb.handleLinkEdit,
+    onDeleteElementOnly: cb.handleTimelineElementDeleteOnly,
+  }).find((candidate) => candidate.shortcut === shortcut);
+  if (!item) return false;
+  event.preventDefault();
+  item.run();
+  return true;
+}

package/src/hooks/timelineLinkEditPlan.test.ts

@@ -0,0 +1,113 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from "vitest";
+import type { TimelineElement } from "../player";
+import { clipsToUnlink, planLinkEdit } from "./timelineLinkEditPlan";
+
+const clip = (id: string, tag: string, extra: Partial<TimelineElement> = {}): TimelineElement => ({
+  id,
+  domId: id,
+  tag,
+  src: "talk.mp4",
+  start: 2,
+  duration: 6,
+  track: tag === "audio" ? 1 : 0,
+  ...extra,
+});
+
+const video = clip("talk", "video", { link: "lk-1", muted: true });
+const audio = clip("talk-audio", "audio", { link: "lk-1" });
+const title = clip("title", "div");
+
+const SOURCE =
+  '<div><video id="talk" src="talk.mp4" muted data-link="lk-1" data-start="2" data-duration="6"></video><audio id="talk-audio" src="talk.mp4" data-link="lk-1" data-start="2" data-duration="6" data-volume="0.5"></audio></div>';
+
+describe("clipsToUnlink", () => {
+  it("unlinks a lone removed member and its orphaned partner", () => {
+    expect(clipsToUnlink([video], [video, audio, title]).map((el) => el.id)).toEqual([
+      "talk",
+      "talk-audio",
+    ]);
+  });
+
+  it("keeps a three-member group linked when one leaves", () => {
+    const third = clip("talk-2", "audio", { link: "lk-1" });
+    expect(clipsToUnlink([video], [video, audio, third]).map((el) => el.id)).toEqual(["talk"]);
+  });
+
+  it("ignores unlinked clips", () => {
+    expect(clipsToUnlink([title], [video, audio, title])).toEqual([]);
+  });
+
+  it("never reaches a same-id link in another source file", () => {
+    const childVideo = clip("c", "video", { link: "lk-1", sourceFile: "child.html" });
+    const removed = clipsToUnlink([video], [video, audio, childVideo]).map((el) => el.id);
+    expect(removed).toEqual(["talk", "talk-audio"]);
+  });
+});
+
+describe("planLinkEdit", () => {
+  const elements = [video, audio, title];
+
+  it("unlink strips data-link from both members", () => {
+    const plan = planLinkEdit({ kind: "unlink", elements: [video, audio] }, elements);
+    expect(plan?.label).toBe("Unlink clips");
+    expect(plan?.transform(SOURCE)).not.toContain("data-link");
+  });
+
+  it("link writes one fresh id on both", () => {
+    const unlinked = SOURCE.replaceAll(' data-link="lk-1"', "");
+    const plan = planLinkEdit({ kind: "link", elements: [video, audio] }, elements);
+    expect(plan?.transform(unlinked)?.match(/data-link="lk-1"/g)).toHaveLength(2);
+  });
+
+  it("merge folds the audio into the video", () => {
+    const plan = planLinkEdit({ kind: "merge", video, audio }, elements);
+    const merged = plan?.transform(SOURCE) ?? "";
+    expect(merged).not.toContain("<audio");
+    expect(merged).toContain('data-volume="0.5"');
+    expect(merged).toContain('data-has-audio="true"');
+  });
+
+  it("detach puts the audio on the first free audio track", () => {
+    const talk = clip("talk", "video", { hasAudio: true });
+    const src =
+      '<div><video id="talk" src="talk.mp4" data-has-audio="true" data-start="2" data-duration="6"></video></div>';
+    const plan = planLinkEdit({ kind: "detach", element: talk }, [talk, title]);
+    const out = plan?.transform(src) ?? "";
+    expect(out).toContain('id="talk-audio"');
+    expect(out).toContain('data-track-index="1"');
+  });
+});
+
+describe("planLinkEdit into sync", () => {
+  const drifted =
+    '<div data-composition-id="main" data-duration="10"><video id="talk" src="talk.mp4" muted data-sync-origin="lk-1" data-start="2" data-duration="6"></video><audio id="talk-audio" src="talk.mp4" data-sync-origin="lk-1" data-start="2.5" data-duration="6" data-media-start="0"></audio></div>';
+  const late = clip("talk-audio", "audio", { start: 2.5, playbackStart: 0 });
+
+  it("moves one clip's start, leaving its partner and link alone", () => {
+    const plan = planLinkEdit({ kind: "move-into-sync", element: late, start: 2 }, [video, late]);
+    expect(plan?.label).toBe("Move into Sync");
+    const html = plan?.transform(drifted) ?? "";
+    expect(html).toContain('id="talk-audio" src="talk.mp4" data-sync-origin="lk-1" data-start="2"');
+    expect(html).toContain('id="talk" src="talk.mp4" muted data-sync-origin="lk-1" data-start="2"');
+  });
+
+  it("slips one clip's media start in place", () => {
+    const plan = planLinkEdit({ kind: "slip-into-sync", element: late, mediaStart: 0.5 }, [
+      video,
+      late,
+    ]);
+    expect(plan?.label).toBe("Slip into Sync");
+    const html = plan?.transform(drifted) ?? "";
+    expect(html).toContain('data-start="2.5" data-duration="6" data-media-start="0.5"');
+  });
+
+  it("slips the legacy playback-start attribute when that is what the clip uses", () => {
+    const legacy = { ...late, playbackStartAttr: "playback-start" as const };
+    const html =
+      planLinkEdit({ kind: "slip-into-sync", element: legacy, mediaStart: 0.5 }, [])?.transform(
+        '<audio id="talk-audio" data-playback-start="0"></audio>',
+      ) ?? "";
+    expect(html).toBe('<audio id="talk-audio" data-playback-start="0.5"></audio>');
+  });
+});

package/src/hooks/timelineLinkEditPlan.ts

@@ -0,0 +1,123 @@
+import type { TimelineElement } from "../player";
+import type { TimelineLinkEdit } from "../player/components/timelineCallbacks";
+import { buildPatchTarget, type PatchTarget } from "./timelineEditingHelpers";
+import { sharesLinkGroup } from "../player/components/audioClipLink";
+import { toAuthoredStart } from "../player/store/timelineElement";
+import { formatTimelineMediaOffset } from "../player/components/timelineEditing";
+import { applyPatchByTarget } from "../utils/sourcePatcher";
+import { setCompositionDurationToContent } from "../utils/timelineAssetDrop";
+import { furthestClipEndFromSource } from "../player/lib/timelineElementHelpers";
+import {
+  detachAudioInSource,
+  linkInSource,
+  mergeAudioInSource,
+  pickDetachedAudioTrack,
+  setLinkInSource,
+} from "../components/editor/mediaLinkEdits";
+
+export interface LinkEditPlan {
+  label: string;
+  anchor: TimelineElement;
+  transform: (source: string) => string | null;
+}
+
+const keyOf = (el: TimelineElement) => el.key ?? el.id;
+
+function targetsOf(elements: readonly TimelineElement[]): PatchTarget[] | null {
+  const targets = elements.map(buildPatchTarget);
+  return targets.every((target): target is PatchTarget => target !== null) ? targets : null;
+}
+
+/**
+ * The clips to strip `data-link` from when `removed` leave their groups: the
+ * removed clips themselves, plus any partner left alone in its group.
+ */
+export function clipsToUnlink(
+  removed: readonly TimelineElement[],
+  elements: readonly TimelineElement[],
+): TimelineElement[] {
+  const removedKeys = new Set(removed.map(keyOf));
+  const orphans = new Map<string, TimelineElement>();
+  for (const leaving of removed) {
+    const survivors = elements.filter(
+      (el) => sharesLinkGroup(el, leaving) && !removedKeys.has(keyOf(el)),
+    );
+    if (survivors.length === 1 && survivors[0]) orphans.set(keyOf(survivors[0]), survivors[0]);
+  }
+  return [...removed.filter((el) => el.link), ...orphans.values()];
+}
+
+type SyncEdit = Extract<TimelineLinkEdit, { kind: "move-into-sync" | "slip-into-sync" }>;
+
+function planSyncEdit(edit: SyncEdit): LinkEditPlan | null {
+  const target = buildPatchTarget(edit.element);
+  if (!target) return null;
+  if (edit.kind === "move-into-sync") {
+    const value = formatTimelineMediaOffset(toAuthoredStart(edit.element, edit.start));
+    return {
+      label: "Move into Sync",
+      anchor: edit.element,
+      transform: (s) => {
+        const moved = applyPatchByTarget(s, target, {
+          type: "attribute",
+          property: "start",
+          value,
+        });
+        return setCompositionDurationToContent(moved, furthestClipEndFromSource(moved));
+      },
+    };
+  }
+  const property = edit.element.playbackStartAttr ?? "media-start";
+  const value = formatTimelineMediaOffset(edit.mediaStart);
+  return {
+    label: "Slip into Sync",
+    anchor: edit.element,
+    transform: (s) => applyPatchByTarget(s, target, { type: "attribute", property, value }),
+  };
+}
+
+export function planLinkEdit(
+  edit: TimelineLinkEdit,
+  elements: readonly TimelineElement[],
+): LinkEditPlan | null {
+  switch (edit.kind) {
+    case "unlink": {
+      const members = clipsToUnlink(edit.elements, elements);
+      const targets = targetsOf(members);
+      const anchor = members[0];
+      if (!targets || !anchor) return null;
+      return { label: "Unlink clips", anchor, transform: (s) => setLinkInSource(s, targets, null) };
+    }
+    case "link": {
+      const targets = targetsOf(edit.elements);
+      const anchor = edit.elements[0];
+      if (!targets || !anchor) return null;
+      return { label: "Link clips", anchor, transform: (s) => linkInSource(s, targets) };
+    }
+    case "detach": {
+      const target = buildPatchTarget(edit.element);
+      if (!target) return null;
+      const track = pickDetachedAudioTrack(elements, edit.element);
+      return {
+        label: "Detach audio",
+        anchor: edit.element,
+        transform: (s) =>
+          detachAudioInSource(s, { target, videoId: edit.element.domId ?? null, track })?.html ??
+          null,
+      };
+    }
+    case "move-into-sync":
+    case "slip-into-sync":
+      return planSyncEdit(edit);
+    case "merge": {
+      const videoTarget = buildPatchTarget(edit.video);
+      const audioTarget = buildPatchTarget(edit.audio);
+      if (!videoTarget || !audioTarget) return null;
+      return {
+        label: "Merge audio back into video",
+        anchor: edit.video,
+        transform: (s) => mergeAudioInSource(s, { videoTarget, audioTarget }),
+      };
+    }
+  }
+}

package/src/hooks/timelineMoveAdapter.ts

@@ -1,3 +1,4 @@
+import { useCallback } from "react";
 import type { TimelineElement } from "../player";
 import type {
   TimelineGroupCommitOptions,
@@ -45,3 +46,15 @@ export function persistTimelineMoveEditsAtomically(
     { coalesceKey, coalesceMs },
   );
 }
+
+export function useTimelineMoveEditsHandler(
+  handleTimelineGroupMove: AtomicMoveDeps["handleTimelineGroupMove"],
+): TimelineMoveEditsHandler {
+  return useCallback(
+    async (edits, coalesceKey, operation: TimelineMoveOperation = "timing", coalesceMs) => {
+      const deps = { handleTimelineGroupMove };
+      await persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps, coalesceMs);
+    },
+    [handleTimelineGroupMove],
+  );
+}

package/src/hooks/timelineTimingSync.test.ts

@@ -548,6 +548,65 @@ describe("nothing-to-rewrite timing edits rebind in place (no script re-executio
   });
 });
 
+describe("a timing edit's soft reload restores what GSAP wrote from the files", () => {
+  const script = (at: number) =>
+    `var tl = gsap.timeline({ paused: true }); tl.to("#wt", { width: 450 }, ${at}); tl.to("#nwid", { width: 400 }, ${at}); window.__timelines["root"] = tl;`;
+  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 a root element's and a nested element's width inline.
+  async function shift(fileOk: boolean) {
+    const doc = document.implementation.createHTMLDocument("");
+    doc.body.innerHTML =
+      `<div id="root" data-composition-id="root"><div id="wt" data-hf-id="hf-w" style="left: 700px; width: 366px"></div>` +
+      `<div data-composition-file="compositions/sub.html"><div id="nwid" data-hf-id="hf-n" style="left: 40px; width: 288px"></div></div></div>` +
+      `<script>${script(0)}</script>`;
+    const [wt, nwid] = [doc.getElementById("wt")!, doc.getElementById("nwid")!];
+    const contentWindow = {
+      gsap: { timeline: vi.fn(), set: vi.fn() },
+      __hfForceTimelineRebind: vi.fn(),
+      __timelines: {
+        root: {
+          kill: vi.fn(),
+          getChildren: () => [{ targets: () => [wt, nwid], vars: { width: 450 } }],
+        },
+      } as Record<string, unknown>,
+      __player: { getTime: () => 1, seek: vi.fn() },
+    };
+    const iframe = { contentWindow, contentDocument: doc } as unknown as HTMLIFrameElement;
+    const fetchMock = vi.fn(async () =>
+      fileOk ? jsonResponse({ content: SUB }) : new Response("{}", { status: 404 }),
+    );
+    vi.stubGlobal("fetch", fetchMock);
+    const after = `<html><body><div id="root" data-composition-id="root"><div id="wt" data-hf-id="hf-w" style="left: 700px"></div></div><script>${script(1)}</script></body></html>`;
+    const reloadPreview = vi.fn();
+
+    await finishClipTimingFallback({
+      ...clipFallbackInput({ reloadPreview, recordEdit: vi.fn(async () => {}) }),
+      iframe,
+      sdkGsap: { mutated: true, scriptText: script(1), after },
+    });
+    return { wt, nwid, reloadPreview, fetchMock };
+  }
+
+  it("puts back the root element from the file it wrote and the nested one from its own file", async () => {
+    const { wt, nwid, reloadPreview, fetchMock } = await shift(true);
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      expect.stringContaining("/files/compositions%2Fsub.html"),
+    );
+    expect(reloadPreview).not.toHaveBeenCalled();
+    expect(wt.getAttribute("style")).toBe("left: 700px;");
+    expect(nwid.getAttribute("style")).toBe("left: 40px;");
+  });
+
+  it("reloads the preview in full when the nested file cannot be read", async () => {
+    const { nwid, reloadPreview } = await shift(false);
+
+    expect(reloadPreview).toHaveBeenCalledTimes(1);
+    expect(nwid.getAttribute("style")).toBe("left: 40px; width: 288px");
+  });
+});
+
 function installOwnedFileServer(
   contents: Map<string, string>,
   options: {

package/src/hooks/timelineTimingSync.ts

@@ -7,6 +7,8 @@ import {
   applySoftReload,
   applySoftReloadFinalization,
   extractGsapScriptText,
+  readNestedFiles,
+  settleNestedReads,
 } from "../utils/gsapSoftReload";
 import { furthestClipEndFromDocument } from "../player/lib/timelineElementHelpers";
 import type { RecordEditInput } from "../utils/studioFileHistory";
@@ -118,6 +120,7 @@ function syncTimingEditPreview(
   currentTime: number,
   reloadPreview: () => void,
   rebindWhenUnmutated: boolean,
+  nestedFiles: Map<string, string> | null | undefined,
 ): void {
   if (!outcome.mutated && rebindWhenUnmutated) {
     if (!rebindPreviewTiming(iframe, currentTime)) reloadPreview();
@@ -130,12 +133,15 @@ function syncTimingEditPreview(
   const result = applySoftReload(iframe, outcome.scriptText, {
     onAsyncFailure: reloadPreview,
     currentTimeOverride: currentTime,
+    authoredHtml: outcome.after,
+    nestedFiles,
   });
   if (result === "cannot-soft-reload") reloadPreview();
 }
 
 async function finishTimelineTimingFallback(input: {
   iframe: HTMLIFrameElement | null;
+  projectId: string | null;
   reloadPreview: () => void;
   gsapMutation?: () => Promise<GsapMutationStatus>;
   onGsapError: (error: unknown) => void;
@@ -160,12 +166,21 @@ async function finishTimelineTimingFallback(input: {
       return;
     }
   }
+  const { projectId } = input;
+  const nestedFiles = await settleNestedReads(
+    projectId && outcome.scriptText
+      ? readNestedFiles(input.iframe, outcome.scriptText, (path) =>
+          readFileContent(projectId, path),
+        )
+      : null,
+  );
   syncTimingEditPreview(
     input.iframe,
     outcome,
     usePlayerStore.getState().currentTime,
     input.reloadPreview,
     input.rebindWhenUnmutated,
+    nestedFiles,
   );
 }
 
@@ -384,7 +399,7 @@ export function sdkTimingGsapSync(
     return findTimelineScript(scripts)?.textContent ?? null;
   };
   if (timelineText(result.before) === timelineText(result.after)) return null;
-  return { mutated: true, scriptText: extractGsapScriptText(result.after) };
+  return { mutated: true, scriptText: extractGsapScriptText(result.after), after: result.after };
 }
 
 /** Timing delta a single-clip edit applies to its GSAP tweens. */
@@ -440,6 +455,7 @@ export function finishClipTimingFallback(input: {
     console.error(`[Timeline] Failed to ${edit.kind} GSAP positions`, err);
   return finishTimelineTimingFallback({
     iframe: input.iframe,
+    projectId,
     reloadPreview: input.reloadPreview,
     gsapMutation: sdkGsap
       ? () => Promise.resolve(sdkGsap)
@@ -498,6 +514,7 @@ export async function finishGroupTimingGsapFallback<C extends { element: Timelin
   if (sdkGsap) {
     await finishTimelineTimingFallback({
       iframe: input.iframe,
+      projectId: input.projectId,
       reloadPreview: input.reloadPreview,
       gsapMutation: () => Promise.resolve(sdkGsap),
       onGsapError,
@@ -507,6 +524,7 @@ export async function finishGroupTimingGsapFallback<C extends { element: Timelin
   }
   await finishTimelineTimingFallback({
     iframe: input.iframe,
+    projectId: input.projectId,
     reloadPreview: input.reloadPreview,
     gsapMutation: () =>
       foldGsapMutationIntoHistory({
@@ -519,6 +537,7 @@ export async function finishGroupTimingGsapFallback<C extends { element: Timelin
         gsapMutation: async (runOwnedMutation) => {
           let mutated = false;
           let scriptText: GsapMutationStatus["scriptText"] = null;
+          let after: string | undefined;
           for (const change of input.changes) {
             const changePath = input.resolveChangePath(change.element);
             const status = await runOwnedMutation(changePath, () =>
@@ -527,9 +546,9 @@ export async function finishGroupTimingGsapFallback<C extends { element: Timelin
             mutated = mutated || status.mutated;
             // The LAST mutation against the active comp carries the cumulative
             // rewritten script for that file.
-            if (changePath === activePath) scriptText = status.scriptText;
+            if (changePath === activePath) ({ scriptText, after } = status);
           }
-          return { mutated, scriptText: otherFileChanged ? null : scriptText };
+          return { mutated, scriptText: otherFileChanged ? null : scriptText, after };
         },
         onRollbackError: onGsapError,
       }),

package/src/hooks/useAppHotkeys.ts

@@ -2,6 +2,8 @@ import { useCallback, useEffect, useRef } from "react";
 import { usePlayerStore } from "../player";
 import type { TimelineElement } from "../player";
 import type { DomEditSelection } from "../components/editor/domEditing";
+import { isTypingTarget } from "../utils/typingTarget";
+import { dispatchLinkShortcut, type LinkShortcutCallbacks } from "./linkShortcuts";
 import { useCaptionStore } from "../captions/store";
 import {
   applyCaptionModelToIframe,
@@ -71,6 +73,8 @@ function tryApplyBeatHistory(
 
 interface UseAppHotkeysParams {
   handleTimelineElementsDelete: (elements: TimelineElement[]) => Promise<void>;
+  handleLinkEdit?: LinkShortcutCallbacks["handleLinkEdit"];
+  handleTimelineElementDeleteOnly?: LinkShortcutCallbacks["handleTimelineElementDeleteOnly"];
   handleTimelineElementSplit: (element: TimelineElement, splitTime: number) => Promise<void>;
   handleDomEditElementDelete: (
     selection: DomEditSelection,
@@ -114,6 +118,8 @@ interface UseAppHotkeysParams {
 
 export function useAppHotkeys({
   handleTimelineElementsDelete,
+  handleLinkEdit,
+  handleTimelineElementDeleteOnly,
   handleTimelineElementSplit,
   handleDomEditElementDelete,
   domEditSelectionRef,
@@ -192,6 +198,8 @@ export function useAppHotkeys({
   const cbRef = useRef<HotkeyCallbacks>(null!);
   cbRef.current = {
     handleTimelineElementsDelete,
+    handleLinkEdit,
+    handleTimelineElementDeleteOnly,
     handleTimelineElementSplit,
     handleDomEditElementDelete,
     handleUndo,
@@ -215,6 +223,7 @@ export function useAppHotkeys({
   const handleAppKeyDown = useCallback((event: KeyboardEvent) => {
     const cb = cbRef.current;
     const key = event.key.toLowerCase();
+    if (!isTypingTarget(event.target) && dispatchLinkShortcut(event, cb)) return;
     if (event.metaKey || event.ctrlKey) {
       dispatchModifierKey(event, key, cb);
       return;