@hyperframes/studio 0.7.56 → 0.7.57

package/src/hooks/timelineEditingHelpers.test.ts

@@ -2,8 +2,11 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 import {
   applyTimelineStackingReorder,
+  buildTimelineMoveTimingPatch,
   deleteSelectedKeyframes,
   extendRootDurationIfNeeded,
+  persistTimelineBatchEdit,
+  type PersistTimelineBatchChange,
 } from "./timelineEditingHelpers";
 import type { TimelineElement } from "../player/store/playerStore";
 import { usePlayerStore } from "../player/store/playerStore";
@@ -108,6 +111,94 @@ describe("extendRootDurationIfNeeded", () => {
   });
 });
 
+describe("persistTimelineBatchEdit", () => {
+  const SOURCE = `<div id="root"><video id="a" class="clip" data-start="1" data-track-index="0"></video><video id="b" class="clip" data-start="2" data-track-index="1"></video></div>`;
+
+  function batchInput(changes: PersistTimelineBatchChange[], writes: Array<[string, string]>) {
+    return {
+      projectId: "p1",
+      activeCompPath: "index.html",
+      label: "Move timeline clips",
+      changes,
+      writeProjectFile: async (path: string, content: string) => {
+        writes.push([path, content]);
+      },
+      recordEdit: async () => {},
+      domEditSaveTimestampRef: { current: 0 },
+      pendingTimelineEditPathRef: { current: new Set<string>() },
+    };
+  }
+
+  function stubReadFileContent(content: string) {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => ({
+        ok: true,
+        json: async () => ({ content }),
+      })),
+    );
+  }
+
+  function moveMember(
+    id: string,
+    start: number,
+    fromTrack: number,
+    toTrack: number,
+  ): PersistTimelineBatchChange {
+    return {
+      element: el({ id, tag: "video", domId: id, start, track: fromTrack }),
+      buildPatches: (original, target) =>
+        buildTimelineMoveTimingPatch(original, target, start, 5, toTrack),
+    };
+  }
+
+  async function runBatch(changes: PersistTimelineBatchChange[]) {
+    stubReadFileContent(SOURCE);
+    const writes: Array<[string, string]> = [];
+    await persistTimelineBatchEdit(batchInput(changes, writes));
+    return writes;
+  }
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("skips no-op members instead of aborting the batch (track-insert renumber)", async () => {
+    // A track-insert renumber can include a member whose attributes already
+    // hold the target values — its patch is string-identical. The batch must
+    // skip it and still persist the members that DID change.
+    const writes = await runBatch([
+      // no-op: data-start already "1", track already 0
+      moveMember("a", 1, 0, 0),
+      // real change: track 1 -> 2
+      moveMember("b", 2, 1, 2),
+    ]);
+
+    expect(writes).toHaveLength(1);
+    expect(writes[0]![0]).toBe("index.html");
+    expect(writes[0]![1]).toContain('id="b" class="clip" data-start="2" data-track-index="2"');
+  });
+
+  it("saves nothing when every member is a no-op", async () => {
+    const writes = await runBatch([moveMember("a", 1, 0, 0)]);
+
+    expect(writes).toHaveLength(0);
+  });
+
+  it("throws on a mistargeted member instead of silently dropping it", async () => {
+    // A member whose target does not resolve in the source (stale id) patches
+    // to the identical string too — but that is a targeting FAILURE, not an
+    // already-at-target no-op, and must abort the batch like the single path.
+    stubReadFileContent(SOURCE);
+    const writes: Array<[string, string]> = [];
+
+    await expect(
+      persistTimelineBatchEdit(batchInput([moveMember("ghost", 3, 0, 2)], writes)),
+    ).rejects.toThrow("Unable to patch timeline element ghost in index.html");
+    expect(writes).toHaveLength(0);
+  });
+});
+
 describe("deleteSelectedKeyframes", () => {
   it("coalesces all removals and reloads only after the last one", () => {
     usePlayerStore.setState({

package/src/hooks/timelineEditingHelpers.ts

@@ -1,15 +1,20 @@
 import { type TimelineElement, usePlayerStore } from "../player/store/playerStore";
-import { applyPatchByTarget, readAttributeByTarget } from "../utils/sourcePatcher";
+import { applyPatchByTarget, findTagByTarget, readAttributeByTarget } from "../utils/sourcePatcher";
 import {
   formatTimelineAttributeNumber,
   type TimelineStackingReorderIntent,
 } from "../player/components/timelineEditing";
 import { getElementZIndex } from "../player/lib/layerOrdering";
-import { getTimelineElementIdentity } from "../player/lib/timelineElementHelpers";
+import {
+  furthestClipEndFromSource,
+  getTimelineElementIdentity,
+} from "../player/lib/timelineElementHelpers";
 import { saveProjectFilesWithHistory, type RecordEditInput } from "../utils/studioFileHistory";
 import type { TimelineZIndexReorderCommit } from "./useTimelineEditingTypes";
-import { extendRootDurationInSource } from "../utils/rootDuration";
+import { setCompositionDurationToContent } from "../utils/timelineAssetDrop";
+import { readFileContent } from "./timelineTimingSync";
 export { deleteSelectedKeyframes } from "./deleteSelectedKeyframes";
+export { readFileContent };
 function isHTMLElement(element: Element | null): element is HTMLElement {
   if (!element) return false;
   // Use the element's OWN realm's HTMLElement: timeline clips live in the preview
@@ -147,22 +152,6 @@ export function patchIframeDomTiming(
     // Cross-origin or mid-navigation — file save is enqueued; iframe patch is best-effort.
   }
 }
-function postRootDurationToPreview(
-  iframe: HTMLIFrameElement | null,
-  durationSeconds: number,
-): void {
-  const duration = Number(durationSeconds);
-  if (!Number.isFinite(duration) || duration <= 0) return;
-  iframe?.contentWindow?.postMessage(
-    {
-      source: "hf-parent",
-      type: "control",
-      action: "set-root-duration",
-      durationSeconds: duration,
-    },
-    "*",
-  );
-}
 // fallow-ignore-next-line complexity
 function resolveResizePlaybackStart(
   original: string,
@@ -215,7 +204,12 @@ export function buildTimelineMoveTimingPatch(
       value: formatTimelineAttributeNumber(track),
     });
   }
-  return extendRootDurationInSource(patched, start + duration);
+  // Content-driven duration: sync data-duration to the furthest clip end read
+  // from the PATCHED SOURCE (raw data-duration), so it grows if a clip moved
+  // past the end and shrinks if the furthest clip moved left. Measured from the
+  // source, NOT the store — store durations are runtime-truncated to the current
+  // comp length, which would ratchet the duration down every move.
+  return setCompositionDurationToContent(patched, furthestClipEndFromSource(patched));
 }
 
 export function buildTimelineResizeTimingPatch(
@@ -242,7 +236,10 @@ export function buildTimelineResizeTimingPatch(
       value: formatTimelineAttributeNumber(pbs.value),
     });
   }
-  return extendRootDurationInSource(patched, updates.start + updates.duration);
+  // Content-driven duration from the PATCHED SOURCE (raw data-duration) —
+  // grows/shrinks to the furthest clip end. Not from the store, whose
+  // durations are runtime-truncated.
+  return setCompositionDurationToContent(patched, furthestClipEndFromSource(patched));
 }
 
 export interface PersistTimelineEditInput {
@@ -322,13 +319,24 @@ export async function persistTimelineBatchEdit(
     }
 
     const current = patchedByPath.get(targetPath) ?? original;
-    const patched = change.buildPatches(current, patchTarget);
-    if (patched === current) {
+    // Resolve the target FIRST: byte-identical output below is only a legit
+    // no-op when the member actually resolved in the source. A mistargeted
+    // member (stale id/selector) must fail loudly like the single-edit path,
+    // not be silently dropped as "already at target".
+    if (!findTagByTarget(current, patchTarget)) {
       throw new Error(`Unable to patch timeline element ${change.element.id} in ${targetPath}`);
     }
+    const patched = change.buildPatches(current, patchTarget);
+    // The target resolved, so a member whose attributes already hold the target
+    // values patches to the identical string — e.g. a track-insert renumber
+    // where one clip's lane is already correct. That is a legitimate no-op:
+    // skip it instead of aborting (and rolling back) the whole batch.
+    if (patched === current) continue;
     patchedByPath.set(targetPath, patched);
   }
 
+  if (patchedByPath.size === 0) return;
+
   const files = Object.fromEntries(patchedByPath);
   for (const targetPath of Object.keys(files)) {
     input.pendingTimelineEditPathRef.current.add(targetPath);
@@ -347,227 +355,6 @@ export async function persistTimelineBatchEdit(
   input.domEditSaveTimestampRef.current = Date.now();
 }
 
-export async function readFileContent(projectId: string, targetPath: string): Promise<string> {
-  if (targetPath.includes("\0") || targetPath.includes("..")) {
-    throw new Error(`Unsafe path: ${targetPath}`);
-  }
-  const response = await fetch(
-    `/api/projects/${projectId}/files/${encodeURIComponent(targetPath)}`,
-  );
-  if (!response.ok) {
-    throw new Error(`Failed to read ${targetPath}`);
-  }
-  const data = (await response.json()) as { content?: string };
-  if (typeof data.content !== "string") {
-    throw new Error(`Missing file contents for ${targetPath}`);
-  }
-  return data.content;
-}
-
-export type GsapMutationStatus = { mutated: boolean };
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === "object" && value !== null;
-}
-
-function readMutationStatus(value: unknown): GsapMutationStatus {
-  if (!isRecord(value)) return { mutated: false };
-  return { mutated: value.mutated === true || value.changed === true };
-}
-
-function readMutationError(value: unknown, fallback: string): string {
-  if (isRecord(value) && typeof value.error === "string") return value.error;
-  return fallback;
-}
-
-export async function finishTimelineTimingFallback(input: {
-  iframe: HTMLIFrameElement | null;
-  needsExtension: boolean;
-  rootDurationSeconds: number;
-  reloadPreview: () => void;
-  gsapMutation?: () => Promise<GsapMutationStatus>;
-  onGsapError: (error: unknown) => void;
-}): Promise<void> {
-  let gsapMutated = false;
-  if (input.gsapMutation) {
-    try {
-      gsapMutated = (await input.gsapMutation()).mutated;
-    } catch (error) {
-      input.onGsapError(error);
-      return;
-    }
-  }
-  if (input.needsExtension) {
-    postRootDurationToPreview(input.iframe, input.rootDurationSeconds);
-    if (gsapMutated) input.reloadPreview();
-    return;
-  }
-  input.reloadPreview();
-}
-
-// Coalesce window for folding a GSAP mutation into the preceding timing edit; only has to
-// outlast one GSAP server round-trip, never a real second edit.
-const GSAP_HISTORY_COALESCE_MS = 10_000;
-
-/**
- * A server GSAP rewrite mutates the same file the timing patch just wrote, but AFTER the
- * timing edit was recorded, leaving the recorded `after` stale so an undo hits a hash
- * conflict. This snapshots every touched file, runs the mutation, then records a follow-up
- * edit under the same coalesceKey with a window wide enough to survive the GSAP round-trip,
- * folding both writes into one undo step. Returns the mutation status for caller reloads.
- */
-export async function foldGsapMutationIntoHistory(input: {
-  projectId: string;
-  paths: string[];
-  label: string;
-  coalesceKey?: string;
-  recordEdit: (edit: RecordEditInput) => Promise<void>;
-  gsapMutation: () => Promise<GsapMutationStatus>;
-}): Promise<GsapMutationStatus> {
-  const uniquePaths = [...new Set(input.paths)];
-  const before = new Map<string, string>();
-  for (const path of uniquePaths) {
-    before.set(path, await readFileContent(input.projectId, path));
-  }
-  const status = await input.gsapMutation();
-  if (status.mutated) {
-    const files: Record<string, { before: string; after: string }> = {};
-    for (const path of uniquePaths) {
-      const priorContent = before.get(path);
-      const finalContent = await readFileContent(input.projectId, path);
-      if (priorContent !== undefined && finalContent !== priorContent) {
-        files[path] = { before: priorContent, after: finalContent };
-      }
-    }
-    if (Object.keys(files).length > 0) {
-      await input.recordEdit({
-        label: input.label,
-        kind: "timeline",
-        coalesceKey: input.coalesceKey,
-        coalesceMs: GSAP_HISTORY_COALESCE_MS,
-        files,
-      });
-    }
-  }
-  return status;
-}
-
-/**
- * Shift all GSAP animation positions targeting a given element by a time delta.
- * Calls the server-side GSAP mutation endpoint which uses the AST-based parser.
- */
-export async function shiftGsapPositions(
-  projectId: string,
-  filePath: string,
-  elementId: string,
-  delta: number,
-): Promise<GsapMutationStatus> {
-  if (delta === 0 || !elementId) return { mutated: false };
-  const res = await fetch(
-    `/api/projects/${projectId}/gsap-mutations/${encodeURIComponent(filePath)}`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        type: "shift-positions",
-        targetSelector: `#${elementId}`,
-        delta,
-      }),
-    },
-  );
-  if (!res.ok) {
-    const err = await res.json().catch(() => null);
-    throw new Error(readMutationError(err, "shift-positions failed"));
-  }
-  return readMutationStatus(await res.json().catch(() => null));
-}
-
-export async function scaleGsapPositions(
-  projectId: string,
-  filePath: string,
-  elementId: string,
-  oldStart: number,
-  oldDuration: number,
-  newStart: number,
-  newDuration: number,
-): Promise<GsapMutationStatus> {
-  if (!elementId || oldDuration <= 0 || newDuration <= 0) return { mutated: false };
-  if (oldStart === newStart && oldDuration === newDuration) return { mutated: false };
-  const res = await fetch(
-    `/api/projects/${projectId}/gsap-mutations/${encodeURIComponent(filePath)}`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        type: "scale-positions",
-        targetSelector: `#${elementId}`,
-        oldStart,
-        oldDuration,
-        newStart,
-        newDuration,
-      }),
-    },
-  );
-  if (!res.ok) {
-    const err = await res.json().catch(() => null);
-    throw new Error(readMutationError(err, "scale-positions failed"));
-  }
-  return readMutationStatus(await res.json().catch(() => null));
-}
-
-/** Single-clip move GSAP shift, folded into the timing edit's history entry (see above). */
-export function foldedShiftGsapMutation(input: {
-  projectId: string;
-  targetPath: string;
-  domId: string;
-  delta: number;
-  label: string;
-  coalesceKey?: string;
-  recordEdit: (edit: RecordEditInput) => Promise<void>;
-}): () => Promise<GsapMutationStatus> {
-  return () =>
-    foldGsapMutationIntoHistory({
-      projectId: input.projectId,
-      paths: [input.targetPath],
-      label: input.label,
-      coalesceKey: input.coalesceKey,
-      recordEdit: input.recordEdit,
-      gsapMutation: () =>
-        shiftGsapPositions(input.projectId, input.targetPath, input.domId, input.delta),
-    });
-}
-
-/** Single-clip resize GSAP scale, folded into the timing edit's history entry (see above). */
-export function foldedScaleGsapMutation(input: {
-  projectId: string;
-  targetPath: string;
-  domId: string;
-  from: { start: number; duration: number };
-  to: { start: number; duration: number };
-  label: string;
-  coalesceKey?: string;
-  recordEdit: (edit: RecordEditInput) => Promise<void>;
-}): () => Promise<GsapMutationStatus> {
-  return () =>
-    foldGsapMutationIntoHistory({
-      projectId: input.projectId,
-      paths: [input.targetPath],
-      label: input.label,
-      coalesceKey: input.coalesceKey,
-      recordEdit: input.recordEdit,
-      gsapMutation: () =>
-        scaleGsapPositions(
-          input.projectId,
-          input.targetPath,
-          input.domId,
-          input.from.start,
-          input.from.duration,
-          input.to.start,
-          input.to.duration,
-        ),
-    });
-}
-
 export { applyPatchByTarget, formatTimelineAttributeNumber };
 
 export { patchDocumentRootDuration } from "./timelineEditingGsap";

package/src/hooks/timelineMoveAdapter.test.ts

@@ -2,6 +2,8 @@ import { describe, expect, it, vi } from "vitest";
 import type { TimelineElement } from "../player";
 import { persistTimelineMoveEditsAtomically } from "./timelineMoveAdapter";
 
+type MoveArgs = Parameters<typeof persistTimelineMoveEditsAtomically>;
+
 const element = (id: string, track: number): TimelineElement => ({
   id,
   key: id,
@@ -11,64 +13,66 @@ const element = (id: string, track: number): TimelineElement => ({
   track,
 });
 
+const twoLaneEdits = (bTrack: number): MoveArgs[0] => [
+  { element: element("a", 0), updates: { start: 1, track: 1 } },
+  { element: element("b", bTrack), updates: { start: 3, track: 2 } },
+];
+
+const movedPair = (edits: MoveArgs[0]) => [
+  { element: edits[0].element, start: 1, track: 1 },
+  { element: edits[1].element, start: 3, track: 2 },
+];
+
+const runMove = async (edits: MoveArgs[0], coalesceKey: MoveArgs[1], intent: MoveArgs[2]) => {
+  const handleTimelineGroupMove = vi.fn().mockResolvedValue(undefined);
+  await persistTimelineMoveEditsAtomically(edits, coalesceKey, intent, {
+    handleTimelineGroupMove,
+  });
+  return handleTimelineGroupMove;
+};
+
 describe("persistTimelineMoveEditsAtomically", () => {
   it("persists two vertical edits as one group with the gesture coalesce key", async () => {
-    const handleTimelineGroupMove = vi.fn().mockResolvedValue(undefined);
-    const edits = [
-      { element: element("a", 0), updates: { start: 1, track: 1 } },
-      { element: element("b", 1), updates: { start: 3, track: 2 } },
-    ];
-    await persistTimelineMoveEditsAtomically(edits, "clip-lane-move:7", "track-insert", {
-      handleTimelineGroupMove,
-    });
+    const edits = twoLaneEdits(1);
+    const handleTimelineGroupMove = await runMove(edits, "clip-lane-move:7", "track-insert");
     expect(handleTimelineGroupMove).toHaveBeenCalledTimes(1);
-    expect(handleTimelineGroupMove).toHaveBeenCalledWith(
-      [
-        { element: edits[0].element, start: 1, track: 1 },
-        { element: edits[1].element, start: 3, track: 2 },
-      ],
-      { coalesceKey: "clip-lane-move:7" },
-    );
+    expect(handleTimelineGroupMove).toHaveBeenCalledWith(movedPair(edits), {
+      coalesceKey: "clip-lane-move:7",
+    });
   });
 
-  it("does not persist track attrs for a single z-only lane reorder", async () => {
-    const handleTimelineGroupMove = vi.fn().mockResolvedValue(undefined);
-    const edit = { element: element("a", 0), updates: { start: 1, track: 1 } };
-    await persistTimelineMoveEditsAtomically([edit], "clip-lane-move:7", "lane-reorder", {
-      handleTimelineGroupMove,
-    });
+  it("omits track attrs for plain timing moves (keeps the SDK fast path eligible)", async () => {
+    const edit = { element: element("a", 0), updates: { start: 1, track: 0 } };
+    const handleTimelineGroupMove = await runMove([edit], undefined, "timing");
     expect(handleTimelineGroupMove).toHaveBeenCalledWith([{ element: edit.element, start: 1 }], {
-      coalesceKey: "clip-lane-move:7",
+      coalesceKey: undefined,
     });
   });
 
-  it("does not persist track attrs for a multi-selection lane drag", async () => {
-    const handleTimelineGroupMove = vi.fn().mockResolvedValue(undefined);
-    const edits = [
-      { element: element("a", 0), updates: { start: 1, track: 1 } },
-      { element: element("b", 2), updates: { start: 3, track: 2 } },
-    ];
-    await persistTimelineMoveEditsAtomically(edits, "clip-lane-move:7", "lane-reorder", {
-      handleTimelineGroupMove,
-    });
+  it("persists the track attr for a single lane reorder (stable track lanes)", async () => {
+    // Lane = authored data-track-index; a vertical move that never hits disk
+    // snaps back on the next normalize, so the lane change MUST persist.
+    const edit = { element: element("a", 0), updates: { start: 1, track: 1 } };
+    const handleTimelineGroupMove = await runMove([edit], "clip-lane-move:7", "lane-reorder");
     expect(handleTimelineGroupMove).toHaveBeenCalledWith(
-      [
-        { element: edits[0].element, start: 1 },
-        { element: edits[1].element, start: 3 },
-      ],
+      [{ element: edit.element, start: 1, track: 1 }],
       { coalesceKey: "clip-lane-move:7" },
     );
   });
 
+  it("persists track attrs for a multi-selection lane drag (stable track lanes)", async () => {
+    const edits = twoLaneEdits(2);
+    const handleTimelineGroupMove = await runMove(edits, "clip-lane-move:7", "lane-reorder");
+    expect(handleTimelineGroupMove).toHaveBeenCalledWith(movedPair(edits), {
+      coalesceKey: "clip-lane-move:7",
+    });
+  });
+
   it("rejects without retrying individual members when the atomic batch fails", async () => {
     const failure = new Error("batch failed");
     const handleTimelineGroupMove = vi.fn().mockRejectedValue(failure);
-    const edits = [
-      { element: element("a", 0), updates: { start: 1, track: 1 } },
-      { element: element("b", 1), updates: { start: 3, track: 2 } },
-    ];
     await expect(
-      persistTimelineMoveEditsAtomically(edits, "clip-lane-move:7", "track-insert", {
+      persistTimelineMoveEditsAtomically(twoLaneEdits(1), "clip-lane-move:7", "track-insert", {
         handleTimelineGroupMove,
       }),
     ).rejects.toBe(failure);

package/src/hooks/timelineMoveAdapter.ts

@@ -28,9 +28,11 @@ export function persistTimelineMoveEditsAtomically(
     edits.map(({ element, updates }) => ({
       element,
       start: updates.start,
-      // A single vertical edit is the z-only reorder path. Multi-edit gestures
-      // are track inserts/ripples and must persist every resulting lane index.
-      track: operation === "track-insert" ? updates.track : undefined,
+      // Stable track lanes: a lane is the authored data-track-index, so every
+      // vertical gesture (lane-reorder AND track-insert) must persist the track;
+      // z is paint order only and is synced separately. Plain horizontal moves
+      // ("timing") omit it so they stay eligible for the SDK fast path.
+      track: operation === "timing" ? undefined : updates.track,
     })),
     { coalesceKey },
   );