@hyperframes/studio 0.8.119 → 0.8.120

package/src/hooks/useGsapAnimationOps.ts

@@ -14,10 +14,9 @@ import {
   cutoverCommittedOrThrow,
   type CutoverDeps,
 } from "../utils/sdkCutover";
-import {
-  assignGsapTargetAutoIdIfNeeded,
-  ensureElementAddressable,
-} from "./gsapScriptCommitHelpers";
+import { ensureElementAddressable } from "./gsapScriptCommitHelpers";
+import { idSelector } from "./gsapShared";
+import { assignGsapTargetAutoIdIfNeeded } from "./useDomEditCommitsHelpers";
 import type { CommitMutation, SafeGsapCommitMutation } from "./gsapScriptCommitTypes";
 
 interface SdkAnimationDeps {
@@ -122,12 +121,14 @@ export function useGsapAnimationOps({
       method: "to" | "from" | "set" | "fromTo",
       _currentTime?: number,
     ) => {
-      const { selector, autoId } = ensureElementAddressable(selection);
+      const address = ensureElementAddressable(selection);
+      const { autoId } = address;
+      let selector = address.selector;
 
       if (autoId) {
         const pid = projectIdRef.current;
-        const targetPath = selection.sourceFile || activeCompPath || "index.html";
         if (!pid) return;
+        const targetPath = selection.sourceFile || activeCompPath || "index.html";
         const assign = () =>
           assignGsapTargetAutoIdIfNeeded({
             projectId: pid,
@@ -136,10 +137,12 @@ export function useGsapAnimationOps({
             autoId,
             showToast,
           });
-        const assigned = await (writeProjectFile
+        const savedId = await (writeProjectFile
           ? serializeStudioFileMutation(writeProjectFile, targetPath, assign)
           : assign());
-        if (!assigned) return;
+        if (!savedId) return;
+        selection.element.setAttribute("id", savedId);
+        selector = idSelector(savedId);
       }
 
       const elStart = Number.parseFloat(selection.dataAttributes?.start ?? "0") || 0;
@@ -153,10 +156,8 @@ export function useGsapAnimationOps({
         fromTo: { x: 0, y: 0, opacity: 1 },
       };
 
-      // Skip SDK path when an id was just assigned server-side (autoId): the
-      // SDK session hasn't reloaded that write yet, so persisting its
-      // serialization would clobber the new id — let the server add the tween
-      // atomically with the id it wrote.
+      // After an id write (autoId) the SDK session has not reloaded the file yet,
+      // so persisting its serialization would drop the new id.
       if (!autoId && selection.hfId && sdkSession && sdkDeps) {
         const targetPath = selection.sourceFile || activeCompPath || "index.html";
         const spec = {

package/src/hooks/useGsapScriptCommits.test.tsx

@@ -36,6 +36,7 @@ import type {
   MutationResult,
 } from "./gsapScriptCommitTypes";
 import { persistSdkSerialize } from "../utils/sdkCutover";
+import { jsonResponse } from "./fetchStubTestUtils";
 import { applyPreviewSync, useGsapScriptCommits } from "./useGsapScriptCommits";
 import { hasStudioPendingEdits } from "../utils/studioPendingEdits";
 
@@ -715,6 +716,22 @@ describe("runCommit — instantPatch wiring", () => {
     expect(trackStudioEvent.mock.calls.filter(([event]) => event === "keyframe")).toEqual([]);
   });
 
+  it("rejects a refused write with the server's reason in a toast", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => jsonResponse({ error: "file changed on disk" }, 409)),
+    );
+    const deps = renderCommitHook();
+
+    await expect(
+      deps.api.commitMutation(selection, { type: "add-keyframe" }, { label: "Add" }),
+    ).rejects.toThrow();
+    expect(deps.showToast).toHaveBeenCalledWith(
+      expect.stringContaining("file changed on disk"),
+      "error",
+    );
+  });
+
   const NESTED_SCRIPT = 'window.__timelines["root"] = tl;';
   const SUB = `<template><div data-composition-id="sub"><div id="nwid" style="left: 40px"></div></div></template>`;
 
@@ -867,6 +884,8 @@ describe("runCommit — instantPatch wiring", () => {
         body: JSON.stringify({ mutations: [firstMutation, lastMutation] }),
       }),
     );
+    const [, init] = vi.mocked(fetch).mock.calls[0]!;
+    expect(new Headers(init?.headers).get("X-Hyperframes-Write-Token")).toBeTruthy();
     expect(deps.recordEdit).toHaveBeenCalledTimes(1);
     expect(deps.recordEdit).toHaveBeenCalledWith(
       expect.objectContaining({ label: "Resize", coalesceKey: "tx:resize:1" }),

package/src/hooks/useGsapScriptCommits.ts

@@ -44,41 +44,15 @@ import {
   useGsapSaveFailureTelemetry,
   useSafeGsapCommitMutation,
 } from "./useSafeGsapCommitMutation";
-import { studioWriteHeaders } from "../utils/studioFileVersion";
-import { studioApiFetch } from "../utils/studioApiFetch";
+import { requestGsapMutation } from "./gsapMutationClient";
 
 async function mutateGsapScript(
   projectId: string,
+  route: "gsap-mutations" | "gsap-mutations-batch",
   sourceFile: string,
-  mutation: Record<string, unknown>,
+  body: unknown,
 ): Promise<MutationResult> {
-  const res = await studioApiFetch(
-    `/api/projects/${encodeURIComponent(projectId)}/gsap-mutations/${encodeURIComponent(sourceFile)}`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
-      body: JSON.stringify(mutation),
-    },
-  );
-  if (!res.ok) throw new GsapMutationHttpError(res.status, await readJsonResponseBody(res));
-  const result = (await res.json()) as MutationResult;
-  if (!result.ok) throw new Error(`Failed to update GSAP in ${sourceFile}`);
-  return result;
-}
-
-async function mutateGsapScriptBatch(
-  projectId: string,
-  sourceFile: string,
-  mutations: Record<string, unknown>[],
-): Promise<MutationResult> {
-  const res = await studioApiFetch(
-    `/api/projects/${encodeURIComponent(projectId)}/gsap-mutations-batch/${encodeURIComponent(sourceFile)}`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
-      body: JSON.stringify({ mutations }),
-    },
-  );
+  const res = await requestGsapMutation(projectId, route, sourceFile, body);
   if (!res.ok) throw new GsapMutationHttpError(res.status, await readJsonResponseBody(res));
   const result = (await res.json()) as MutationResult;
   if (!result.ok) throw new Error(`Failed to update GSAP in ${sourceFile}`);
@@ -392,7 +366,7 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
 
   const runCommit = useCallback(async (pid: string, compositionPath: string | null, targetPath: string, selection: DomEditSelection, mutation: Record<string, unknown>, options: CommitMutationOptions) => {
     const result = await runMutationRequest([mutation], options, showToast, () =>
-      mutateGsapScript(pid, targetPath, mutation),
+      mutateGsapScript(pid, "gsap-mutations", targetPath, mutation),
     );
     if (!result) return;
     trackKeyframeCommit([mutation], result, options);
@@ -406,7 +380,7 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
     if (!first || !last) return;
     const mutations = calls.map(({ mutation }) => mutation);
     const result = await runMutationRequest(mutations, options, showToast, () =>
-      mutateGsapScriptBatch(pid, targetPath, mutations),
+      mutateGsapScript(pid, "gsap-mutations-batch", targetPath, { mutations }),
     );
     if (!result) return;
     trackKeyframeCommit(mutations, result, options, calls.map((call) => call.options));

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

@@ -160,6 +160,37 @@ describe("ClipContextMenu tools", () => {
     return { labels, unmount: () => act(() => root.unmount()) };
   }
 
+  function splitRow(splitShortcut?: string) {
+    const host = document.body.appendChild(document.createElement("div"));
+    const root = createRoot(host);
+    act(() =>
+      root.render(
+        <ClipContextMenu
+          x={10}
+          y={10}
+          element={video}
+          currentTime={1}
+          onClose={vi.fn()}
+          onSplit={vi.fn()}
+          onDelete={vi.fn()}
+          splitShortcut={splitShortcut}
+        />,
+      ),
+    );
+    const row = Array.from(document.body.querySelectorAll("[role=menuitem]")).find((item) =>
+      item.textContent?.startsWith("Split"),
+    );
+    const text = row?.textContent;
+    act(() => root.unmount());
+    host.remove();
+    return text;
+  }
+
+  it("hints Split with Studio's own S, or with the key the host binds Split to", () => {
+    expect(splitRow()).toBe("Split at 1.00sS");
+    expect(splitRow("⌥S")).toBe("Split at 1.00s⌥S");
+  });
+
   it("offers Freeze frame and the attribute tools by default", () => {
     const { labels, unmount } = menuWith(undefined);
     expect(labels().some((label) => label?.startsWith("Freeze frame"))).toBe(true);

package/src/player/components/ClipContextMenu.tsx

@@ -10,6 +10,7 @@ import { ClipMenuAudioItems } from "./clipMenuAudioItems";
 import { ClipMenuLinkItems } from "./clipMenuLinkItems";
 import { menuClasses } from "../../components/ui/menuStyle";
 import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
+import { SPLIT_SHORTCUT_HINT } from "./studioShortcuts";
 
 const MENU_MARGIN = 8;
 
@@ -40,6 +41,7 @@ interface ClipContextMenuProps {
   onDuplicate?: () => Promise<boolean>;
   canPaste?: boolean;
   hostItems?: readonly TimelineClipMenuItem[] | undefined;
+  splitShortcut?: string | undefined;
 }
 
 const itemClass = (enabled: boolean) =>
@@ -95,6 +97,7 @@ export const ClipContextMenu = memo(function ClipContextMenu({
   onDuplicate,
   canPaste,
   hostItems = [],
+  splitShortcut = SPLIT_SHORTCUT_HINT,
 }: ClipContextMenuProps) {
   const menuRef = useContextMenuDismiss(onClose);
   useMenuKeyboardNav(menuRef);
@@ -157,7 +160,7 @@ export const ClipContextMenu = memo(function ClipContextMenu({
             }}
           >
             <span>{splitLabel}</span>
-            <span className="text-neutral-500 text-[10px] ml-3">S</span>
+            <span className="text-neutral-500 text-[10px] ml-3">{splitShortcut}</span>
           </button>
         )}
         {tools && splitLabel && (

package/src/player/components/TimelineOverlays.test.ts

@@ -216,4 +216,22 @@ describe("TimelineOverlays context lifecycle", () => {
     expect(clipMenuItems).toHaveBeenCalledExactlyOnceWith(current);
     expect(document.body.querySelector('[role="menuitem"]')?.textContent).toBe("Ask");
   });
+
+  it("hints Split in the clip menu with the host's key", () => {
+    const video = { ...captured, domId: "child", tag: "video" };
+    renderOverlay({
+      capturedElement: video,
+      currentElement: video,
+      overlays: {
+        kfContextMenu: null,
+        clipContextMenu: { x: 10, y: 10, sessionEpoch: 2, element: video },
+        currentTime: 2,
+        splitShortcut: "⌥S",
+      },
+    });
+    const rows = [...document.body.querySelectorAll('[role="menuitem"]')].map(
+      (row) => row.textContent,
+    );
+    expect(rows).toContain("Split at 2.00s⌥S");
+  });
 });

package/src/player/components/TimelineOverlays.tsx

@@ -190,6 +190,7 @@ export function TimelineClipMenuOverlay() {
       onDuplicate={overlay.onDuplicateClip}
       canPaste={overlay.canPasteClip?.() ?? false}
       hostItems={hostItems}
+      splitShortcut={overlay.splitShortcut}
     />
   );
 }

package/src/player/components/TimelineProvider.tsx

@@ -112,6 +112,7 @@ export interface TimelineOverlaysState {
   onDuplicateClip?: () => Promise<boolean>;
   canPasteClip?: () => boolean;
   clipMenuItems?: TimelineProps["clipMenuItems"];
+  splitShortcut?: TimelineProps["splitShortcut"];
   gapContextMenu: TrackGapContextMenuState | null;
   onDismissGapContextMenu: () => void;
   onCloseTrackGap: () => void;

package/src/player/components/TimelineTypes.ts

@@ -43,6 +43,7 @@ export interface TimelineProps
   onDuplicateClip?: () => Promise<boolean>;
   canPasteClip?: () => boolean;
   clipMenuItems?: (element: TimelineElement) => readonly TimelineClipMenuItem[];
+  splitShortcut?: string;
   theme?: Partial<TimelineTheme>;
   showAudioEffects?: boolean;
   showKeyframes?: boolean;

package/src/player/components/studioShortcuts.ts

@@ -19,6 +19,8 @@ export interface ShortcutSection {
 
 const hintKey = (key: string) => key.toUpperCase();
 
+export const SPLIT_SHORTCUT_HINT = hintKey(STUDIO_PLAIN_KEYS.split);
+
 /** What PlayerControls' shortcuts panel lists unless an embedder passes its own sections. */
 export const DEFAULT_SHORTCUT_SECTIONS: readonly ShortcutSection[] = [
   {
@@ -51,7 +53,7 @@ export const DEFAULT_SHORTCUT_SECTIONS: readonly ShortcutSection[] = [
       { key: "⌘C", label: "Copy element" },
       { key: "⌘V", label: "Paste element" },
       { key: "⌘X", label: "Cut element" },
-      { key: hintKey(STUDIO_PLAIN_KEYS.split), label: "Split clip at playhead" },
+      { key: SPLIT_SHORTCUT_HINT, label: "Split clip at playhead" },
       { key: hintKey(STUDIO_PLAIN_KEYS.audioGain), label: "Audio Gain for clips with sound" },
       { key: "⇧Click", label: "Razor tool: split all tracks" },
       { key: "[", label: "Select clips starting before the playhead" },

package/src/player/components/useTimelineProviderState.tsx

@@ -72,6 +72,7 @@ export function useTimelineProviderState({
   onDuplicateClip,
   canPasteClip,
   clipMenuItems,
+  splitShortcut,
   theme: themeOverrides,
   showAudioEffects = true,
   showKeyframes = true,
@@ -387,6 +388,7 @@ export function useTimelineProviderState({
     onDuplicateClip,
     canPasteClip,
     clipMenuItems,
+    splitShortcut,
     onSelectElement,
     selectedElementId,
     setRangeSelectionRef,