@hyperframes/studio 0.8.80 → 0.8.82

package/src/hooks/canvasQuickSaves.test.tsx

@@ -0,0 +1,195 @@
+// @vitest-environment happy-dom
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { DomEditSelection, DomEditTextField } from "../components/editor/domEditing";
+import type { TimelineElement } from "../player/store/playerStore";
+import { buildTimelineMoveTimingPatch, persistTimelineEdit } from "./timelineEditingHelpers";
+import { useDomEditCommits } from "./useDomEditCommits";
+
+Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
+vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
+
+const SOURCE =
+  '<!doctype html><html><head></head><body><div data-hf-id="hf-card" style="color: red">Card</div>' +
+  '<div id="clip" class="clip" data-start="1" data-duration="5" data-track-index="0"></div></body></html>';
+
+// The server patches whatever is on disk; the writer refuses a stale base like If-Match does.
+// The first write can be held mid-flight.
+function fakeProject() {
+  let disk = SOURCE;
+  const refused: string[] = [];
+  let writes = 0;
+  let release = () => {};
+  const firstWrite = new Promise<void>((resolve) => (release = resolve));
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (input: string, init?: RequestInit) => {
+      if (input.includes("/file-mutations/patch-element/")) {
+        const { operations } = JSON.parse(String(init?.body)) as {
+          operations: Array<{ property?: string; value?: string }>;
+        };
+        for (const op of operations) {
+          if (op.property === "color") disk = disk.replace(/color: \w+/, `color: ${op.value}`);
+        }
+        return Response.json({ ok: true, changed: true, matched: true, content: disk });
+      }
+      return Response.json({ content: disk });
+    }),
+  );
+  const writeProjectFile = async (path: string, content: string, expected?: string) => {
+    if (++writes === 1) await firstWrite;
+    if (expected !== undefined && expected !== disk && content !== disk) {
+      refused.push(path);
+      throw new Error(`409 conflict on ${path}`);
+    }
+    disk = content;
+  };
+  return { writeProjectFile, refused, release: () => release(), read: () => disk };
+}
+
+type Project = ReturnType<typeof fakeProject>;
+
+function mountCanvasCommits(project: Project) {
+  const iframe = document.createElement("iframe");
+  document.body.append(iframe);
+  iframe.contentDocument!.body.innerHTML =
+    '<div data-hf-id="hf-card" style="color: red">Card</div>';
+  const element = iframe.contentDocument!.querySelector<HTMLElement>('[data-hf-id="hf-card"]')!;
+  const selection = {
+    element,
+    label: "Card",
+    tagName: "div",
+    sourceFile: "index.html",
+    compositionPath: "index.html",
+    isCompositionHost: false,
+    isInsideLockedComposition: false,
+    boundingBox: { x: 0, y: 0, width: 120, height: 40 },
+    textContent: "Card",
+    dataAttributes: {},
+    inlineStyles: { color: "red" },
+    computedStyles: {},
+    textFields: [],
+    capabilities: { canSelect: true, canEditStyles: true, canMove: true, canResize: true },
+    hfId: "hf-card",
+    selector: '[data-hf-id="hf-card"]',
+    selectorIndex: 0,
+  } as unknown as DomEditSelection;
+  const captured: { current: ReturnType<typeof useDomEditCommits> | null } = { current: null };
+  const toasts: string[] = [];
+  function Probe() {
+    captured.current = useDomEditCommits({
+      activeCompPath: "index.html",
+      previewIframeRef: { current: iframe },
+      showToast: (message) => toasts.push(message),
+      queueDomEditSave: (save) => save(),
+      writeProjectFile: project.writeProjectFile,
+      editHistory: { recordEdit: async () => {} },
+      fileTree: [],
+      importedFontAssetsRef: { current: [] },
+      projectId: "p1",
+      projectIdRef: { current: "p1" },
+      reloadPreview: () => {},
+      domEditSelection: selection,
+      applyDomSelection: () => {},
+      clearDomSelection: () => {},
+      refreshDomEditSelectionFromPreview: () => {},
+      buildDomSelectionFromTarget: async () => null,
+      readOnlyPreview: false,
+    });
+    return null;
+  }
+  const root = createRoot(document.createElement("div"));
+  act(() => root.render(createElement(Probe)));
+  return { hook: captured.current!, selection, toasts };
+}
+
+const selfText: DomEditTextField = {
+  key: "self",
+  label: "self",
+  value: "Card",
+  tagName: "div",
+  attributes: [],
+  inlineStyles: {},
+  computedStyles: {},
+  source: "self",
+};
+
+const moveClip = (project: Project) =>
+  persistTimelineEdit({
+    projectId: "p1",
+    activeCompPath: "index.html",
+    element: {
+      id: "clip",
+      key: "clip",
+      domId: "clip",
+      tag: "div",
+      start: 1,
+      duration: 5,
+      track: 0,
+    } as TimelineElement,
+    label: "Move clip",
+    buildPatches: (original, target) => buildTimelineMoveTimingPatch(original, target, 3, 5),
+    writeProjectFile: project.writeProjectFile,
+    recordEdit: async () => {},
+    pendingTimelineEditPathRef: { current: new Set<string>() },
+  });
+
+// Starts the second save while the first one's write is in flight; both must land unrefused.
+async function expectBothLand(
+  project: Project,
+  first: () => Promise<unknown>,
+  second: () => Promise<unknown>,
+) {
+  await act(async () => {
+    const saves = [first()];
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    saves.push(second());
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    project.release();
+    await Promise.allSettled(saves);
+  });
+  expect(project.refused).toEqual([]);
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  document.body.innerHTML = "";
+});
+
+describe("canvas edit commits share the file queue", () => {
+  it("lands a second canvas commit started while the first one's font write is held", async () => {
+    const project = fakeProject();
+    const { hook, selection, toasts } = mountCanvasCommits(project);
+    const font = {
+      family: "Imported",
+      path: "fonts/Imported.woff2",
+      url: "/api/projects/p1/preview/fonts/Imported.woff2",
+    };
+
+    await expectBothLand(
+      project,
+      () => hook.commitDomTextFields(selection, [selfText], { importedFont: font }),
+      () => hook.handleDomStyleCommit("color", "green"),
+    );
+
+    expect(toasts).toEqual([]);
+    expect(project.read()).toContain("@font-face");
+    expect(project.read()).toContain("color: green");
+  });
+
+  it("lands a canvas commit started while a timeline save is writing", async () => {
+    const project = fakeProject();
+    const { hook, toasts } = mountCanvasCommits(project);
+
+    await expectBothLand(
+      project,
+      () => moveClip(project),
+      () => hook.handleDomStyleCommit("color", "green"),
+    );
+
+    expect(toasts).toEqual([]);
+    expect(project.read()).toContain('id="clip" class="clip" data-start="3"');
+    expect(project.read()).toContain("color: green");
+  });
+});

package/src/hooks/gsapMutationClient.ts

@@ -0,0 +1,116 @@
+import { studioWriteHeaders } from "../utils/studioFileVersion";
+
+export class GsapPreviewConvergenceError extends Error {}
+export class GsapOwnershipProtocolError extends GsapPreviewConvergenceError {}
+
+/** Verify rollback ownership support before any GSAP mutation can land. */
+export async function requireGsapOwnershipProtocol(projectId: string): Promise<void> {
+  const response = await fetch(
+    `/api/projects/${encodeURIComponent(projectId)}/gsap-mutation-capabilities`,
+  );
+  if (!response.ok) {
+    throw new GsapOwnershipProtocolError("Server does not support owned GSAP mutations");
+  }
+  const body = await response.json().catch(() => null);
+  if (!isRecord(body) || body.atomicOwnershipPairs !== true) {
+    throw new GsapOwnershipProtocolError("Invalid GSAP mutation capability response");
+  }
+}
+
+/** Atomically restore one GSAP mutation only while its exact output still owns
+ * the file. The server performs compare + write synchronously, eliminating the
+ * client GET→PUT window that could overwrite a successor edit. */
+export async function rollbackOwnedMutation(
+  projectId: string,
+  targetPath: string,
+  expected: string,
+  restore: string,
+): Promise<"restored" | "conflict"> {
+  if (targetPath.includes("\0") || targetPath.includes("..")) {
+    throw new Error(`Unsafe path: ${targetPath}`);
+  }
+  const response = await fetch(
+    `/api/projects/${encodeURIComponent(projectId)}/gsap-mutation-rollback/${encodeURIComponent(targetPath)}`,
+    {
+      method: "POST",
+      // Deliberately unclaimed: a rollback runs because a mutation did not
+      // converge, so let the restored file reload the preview.
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ expected, restore }),
+    },
+  );
+  if (!response.ok) {
+    throw new Error(`Failed to restore ${targetPath}`);
+  }
+  const result = (await response.json()) as { restored?: unknown; conflict?: unknown };
+  if (result.restored === true && result.conflict === false) return "restored";
+  if (result.restored === false && result.conflict === true) return "conflict";
+  throw new Error(`Invalid restore response for ${targetPath}`);
+}
+
+/** The server's GSAP-mutation response. `scriptText` is the rewritten root script for a soft
+ * reload, null when none came back: the caller then full-reloads when `mutated`, or rebinds
+ * the runtime timing in place when nothing was rewritten (see syncTimingEditPreview). */
+export type GsapMutationStatus = {
+  mutated: boolean;
+  scriptText: string | null;
+  /** Atomic whole-file ownership pair returned by the mutation endpoint. */
+  before?: string;
+  after?: string;
+};
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+function readMutationStatus(value: unknown): GsapMutationStatus {
+  if (
+    !isRecord(value) ||
+    typeof value.mutated !== "boolean" ||
+    typeof value.before !== "string" ||
+    typeof value.after !== "string" ||
+    value.mutated !== (value.before !== value.after) ||
+    ("changed" in value && value.changed !== value.mutated)
+  ) {
+    throw new GsapOwnershipProtocolError("Invalid owned GSAP mutation response");
+  }
+  return {
+    mutated: value.mutated,
+    scriptText: typeof value.scriptText === "string" ? value.scriptText : null,
+    before: value.before,
+    after: value.after,
+  };
+}
+
+function readMutationError(value: unknown, fallback: string): string {
+  if (isRecord(value) && typeof value.error === "string") return value.error;
+  return fallback;
+}
+
+export async function postGsapMutation(
+  projectId: string,
+  filePath: string,
+  mutation: Record<string, unknown>,
+  fallback: string,
+): Promise<GsapMutationStatus> {
+  let response: Response;
+  try {
+    response = await fetch(
+      `/api/projects/${encodeURIComponent(projectId)}/gsap-mutations/${encodeURIComponent(filePath)}`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
+        body: JSON.stringify(mutation),
+      },
+    );
+  } catch (error) {
+    throw new GsapPreviewConvergenceError(`${fallback}: mutation outcome unknown`, {
+      cause: error,
+    });
+  }
+  const body: unknown = await response.json().catch(() => null);
+  if (!response.ok) {
+    throw new GsapPreviewConvergenceError(readMutationError(body, fallback));
+  }
+  return readMutationStatus(body);
+}

package/src/hooks/resizeObserverTestUtils.ts

@@ -0,0 +1,14 @@
+// Test-only ResizeObserver stand-in: a test delivers a size by hand with `reportResize`.
+let resizeCallback: ResizeObserverCallback | null = null;
+
+export function MockResizeObserver(callback: ResizeObserverCallback) {
+  resizeCallback = callback;
+  return { observe() {}, disconnect() {}, unobserve() {} };
+}
+
+export function reportResize(width: number, height: number): void {
+  resizeCallback!(
+    [{ contentRect: { width, height } } as ResizeObserverEntry],
+    {} as ResizeObserver,
+  );
+}

package/src/hooks/timelineAudioGroupCreate.ts

@@ -14,9 +14,9 @@ import { runtimeAudioId } from "../player/lib/timelineElementHelpers";
 import { invalidateGroupInfoCache } from "../player/lib/timelineGroupInfo";
 import { readTagSnippetByTarget, type PatchOperation } from "../utils/sourcePatcher";
 import {
-  applyPatchByTarget,
-  buildPatchTarget,
   findTimelineElementInIframe,
+  operationChanges,
+  patchTimelineChangesInSource,
   readFileContent,
   type RecordEditInput,
 } from "./timelineEditingHelpers";
@@ -197,52 +197,30 @@ export async function createAudioGroupAndAssignMembers({
     property: HF_AUDIO_GROUP_ATTR,
     value: groupId,
   };
-  const originalByPath = new Map<string, string>();
-  const files: Record<string, string> = {};
+  const groupPath = activeCompPath || "index.html";
+  const byPath = groupElementsByTargetPath(elements, activeCompPath);
+  const files: Record<string, (current: string) => string> = {};
+  for (const targetPath of new Set([...byPath.keys(), groupPath])) {
+    files[targetPath] = (current) => {
+      let patched = patchTimelineChangesInSource(
+        current,
+        targetPath,
+        operationChanges(byPath.get(targetPath) ?? [], groupOperation),
+      );
+      if (targetPath === groupPath) patched = insertGroupElement(patched, groupId, groupLabel);
+      if (patched !== current) pendingTimelineEditPathRef.current.add(targetPath);
+      return patched;
+    };
+  }
 
   try {
-    for (const [targetPath, fileElements] of groupElementsByTargetPath(elements, activeCompPath)) {
-      let patchedContent = await readFileContent(projectId, targetPath);
-      originalByPath.set(targetPath, patchedContent);
-
-      for (const element of fileElements) {
-        const patchTarget = buildPatchTarget(element);
-        if (!patchTarget) {
-          throw new Error(`Timeline element ${element.id} is missing a patchable target`);
-        }
-        if (readTagSnippetByTarget(patchedContent, patchTarget) === undefined) {
-          throw new Error(`Unable to patch timeline element ${element.id} in ${targetPath}`);
-        }
-        patchedContent = applyPatchByTarget(patchedContent, patchTarget, groupOperation);
-      }
-
-      files[targetPath] = patchedContent;
-      pendingTimelineEditPathRef.current.add(targetPath);
-    }
-
-    const groupPath = activeCompPath || "index.html";
-    let groupContent = files[groupPath];
-    if (groupContent === undefined) {
-      groupContent = await readFileContent(projectId, groupPath);
-      originalByPath.set(groupPath, groupContent);
-    }
-    const withGroupElement = insertGroupElement(groupContent, groupId, groupLabel);
-    if (withGroupElement !== groupContent) {
-      files[groupPath] = withGroupElement;
-      pendingTimelineEditPathRef.current.add(groupPath);
-    }
-
     const changedPaths = await saveProjectFilesWithHistory({
       projectId,
       label: groupLabel
         ? `Group ${elements.length} clips as ${groupLabel}`
         : `Group ${elements.length} voice clips`,
       files,
-      readFile: async (path) => {
-        const original = originalByPath.get(path);
-        if (original !== undefined) return original;
-        return readFileContent(projectId, path);
-      },
+      readFile: (path) => readFileContent(projectId, path),
       writeFile: writeProjectFile,
       recordEdit,
     });

package/src/hooks/timelineEditingHelpers.test.ts

@@ -12,6 +12,7 @@ import {
   type PersistTimelineBatchChange,
 } from "./timelineEditingHelpers";
 import type { TimelineElement } from "../player/store/playerStore";
+import { readMediaOffsetSeconds } from "@hyperframes/parsers/media-duration";
 import { usePlayerStore } from "../player/store/playerStore";
 import type { CommitMutationOptions } from "./gsapScriptCommitTypes";
 import { timelineKeyframeSelectionKey } from "../player/components/timelineKeyframeIdentity";
@@ -244,6 +245,26 @@ describe("buildTimelineResizeTimingPatch", () => {
   });
 });
 
+describe("buildTimelineResizeTimingPatch — source in-point read as playback reads it", () => {
+  it.each([
+    ['data-playback-start="-1" data-media-start="2"', 4.5, 1.5],
+    ['data-playback-start="2"', 4.5, 1.5],
+    ['data-media-start="junk"', 5.5, 0.5],
+    ['data-media-start="1.5s"', 5.5, 0.5],
+  ])("%s, head to %s", (inPoint, start, expected) => {
+    const source = `<div id="root"><video id="a" class="clip" data-start="5" data-duration="3" ${inPoint}></video></div>`;
+    const element = el({ id: "a", tag: "video", domId: "a", start: 5, duration: 3 });
+    const host = document.createElement("div");
+    host.innerHTML = buildTimelineResizeTimingPatch(source, { id: "a" }, element, {
+      start,
+      duration: 8 - start,
+      playbackStart: undefined,
+    });
+    const video = host.querySelector("#a")!;
+    expect(readMediaOffsetSeconds((name) => video.getAttribute(name))).toBe(expected);
+  });
+});
+
 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>`;
 

package/src/hooks/timelineEditingHelpers.ts

@@ -15,7 +15,10 @@ import { getElementZIndex } from "../player/lib/layerOrdering";
 import {
   furthestClipEndFromSource,
   getTimelineElementIdentity,
+  playbackStartAttributeForElement,
+  readPlaybackStartAttributes,
 } from "../player/lib/timelineElementHelpers";
+import { resolveTimelinePlaybackRate } from "../player/components/timelineGroupEditing";
 import {
   saveProjectFilesWithHistory,
   writeProjectFilesWithHistoryInQueue,
@@ -199,13 +202,6 @@ export function removeIframeTimelineElements(
     findTimelineElementInIframe(iframe, element, activeCompositionPath)?.remove();
 }
 
-export function playbackStartAttributeForElement(
-  element: Pick<TimelineElement, "kind" | "playbackStartAttr">,
-): "data-media-start" | "data-playback-start" {
-  return element.playbackStartAttr === "playback-start" || element.kind === "composition"
-    ? "data-playback-start"
-    : "data-media-start";
-}
 // fallow-ignore-next-line complexity
 function resolveResizePlaybackStart(
   original: string,
@@ -219,15 +215,19 @@ function resolveResizePlaybackStart(
   }
   const trimDelta = updates.start - element.start;
   if (trimDelta === 0) return null;
-  const raw =
-    readAttributeByTarget(original, target, "playback-start") ??
-    readAttributeByTarget(original, target, "media-start");
-  const current = raw != null ? parseFloat(raw) : undefined;
-  if (current == null || !Number.isFinite(current)) return null;
-  const attrName = playbackStartAttributeForElement(element).slice("data-".length);
+  const source = readPlaybackStartAttributes((name) =>
+    readAttributeByTarget(original, target, name),
+  );
+  if (source.playbackStart == null) return null;
+  const attrName = playbackStartAttributeForElement({ kind: element.kind, ...source }).slice(
+    "data-".length,
+  );
   return {
     attrName,
-    value: Math.max(0, current + trimDelta * Math.max(element.playbackRate ?? 1, 0.1)),
+    value: Math.max(
+      0,
+      source.playbackStart + trimDelta * resolveTimelinePlaybackRate(element.playbackRate),
+    ),
   };
 }
 
@@ -308,25 +308,26 @@ export interface PersistTimelineEditInput {
 
 export async function persistTimelineEdit(input: PersistTimelineEditInput): Promise<void> {
   const targetPath = input.element.sourceFile || input.activeCompPath || "index.html";
-  const originalContent = await readFileContent(input.projectId, targetPath);
-
   const patchTarget = buildPatchTarget(input.element);
   if (!patchTarget) {
     throw new Error(`Timeline element ${input.element.id} is missing a patchable target`);
   }
 
-  const patchedContent = input.buildPatches(originalContent, patchTarget);
-  if (patchedContent === originalContent) {
-    throw new Error(`Unable to patch timeline element ${input.element.id} in ${targetPath}`);
-  }
-
   input.pendingTimelineEditPathRef.current.add(targetPath);
   await saveProjectFilesWithHistory({
     projectId: input.projectId,
     label: input.label,
     coalesceKey: input.coalesceKey,
-    files: { [targetPath]: patchedContent },
-    readFile: async () => originalContent,
+    files: {
+      [targetPath]: (current) => {
+        const patched = input.buildPatches(current, patchTarget);
+        if (patched === current) {
+          throw new Error(`Unable to patch timeline element ${input.element.id} in ${targetPath}`);
+        }
+        return patched;
+      },
+    },
+    readFile: (path) => readFileContent(input.projectId, path),
     writeFile: input.writeProjectFile,
     recordEdit: input.recordEdit,
   });
@@ -337,6 +338,36 @@ export interface PersistTimelineBatchChange {
   buildPatches: (original: string, target: PatchTarget) => string;
 }
 
+/** One batch change per element, each applying the same patch operation. */
+export function operationChanges(
+  elements: readonly TimelineElement[],
+  operation: PatchOperation,
+): PersistTimelineBatchChange[] {
+  return elements.map((element) => ({
+    element,
+    buildPatches: (html, target) => applyPatchByTarget(html, target, operation),
+  }));
+}
+
+/** Patches each change into `source`, failing loudly on a target the file does not hold. */
+export function patchTimelineChangesInSource(
+  source: string,
+  targetPath: string,
+  changes: readonly PersistTimelineBatchChange[],
+): string {
+  let current = source;
+  for (const { element, buildPatches } of changes) {
+    const target = buildPatchTarget(element);
+    if (!target) throw new Error(`Timeline element ${element.id} is missing a patchable target`);
+    // Resolve first: a member already at its target values patches to the same string, a missing one must throw.
+    if (!findTagByTarget(current, target)) {
+      throw new Error(`Unable to patch timeline element ${element.id} in ${targetPath}`);
+    }
+    current = buildPatches(current, target);
+  }
+  return current;
+}
+
 export interface PersistTimelineBatchEditInput {
   projectId: string;
   activeCompPath: string | null;
@@ -353,50 +384,24 @@ export interface PersistTimelineBatchEditInput {
 export async function persistTimelineBatchEdit(
   input: PersistTimelineBatchEditInput,
 ): Promise<void> {
-  const originals = new Map<string, string>();
-  const patchedByPath = new Map<string, string>();
-
+  const changesByPath = new Map<string, PersistTimelineBatchChange[]>();
   for (const change of input.changes) {
     const targetPath = change.element.sourceFile || input.activeCompPath || "index.html";
-    const original =
-      originals.get(targetPath) ?? (await readFileContent(input.projectId, targetPath));
-    originals.set(targetPath, original);
-
-    const patchTarget = buildPatchTarget(change.element);
-    if (!patchTarget) {
-      throw new Error(`Timeline element ${change.element.id} is missing a patchable target`);
-    }
-
-    const current = patchedByPath.get(targetPath) ?? original;
-    // 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);
+    changesByPath.set(targetPath, [...(changesByPath.get(targetPath) ?? []), change]);
   }
+  const buildFile = (targetPath: string) => (original: string) => {
+    const next = patchTimelineChangesInSource(original, targetPath, changesByPath.get(targetPath)!);
+    if (next !== original) input.pendingTimelineEditPathRef.current.add(targetPath);
+    return next;
+  };
 
-  if (patchedByPath.size === 0) return;
-
-  const files = Object.fromEntries(patchedByPath);
-  for (const targetPath of Object.keys(files)) {
-    input.pendingTimelineEditPathRef.current.add(targetPath);
-  }
   await saveProjectFilesWithHistory({
     projectId: input.projectId,
     label: input.label,
     coalesceKey: input.coalesceKey,
     coalesceMs: input.coalesceMs,
-    files,
-    readFile: async (path) => originals.get(path) ?? readFileContent(input.projectId, path),
+    files: Object.fromEntries([...changesByPath.keys()].map((path) => [path, buildFile(path)])),
+    readFile: (path) => readFileContent(input.projectId, path),
     writeFile: input.writeProjectFile,
     recordEdit: input.recordEdit,
   });
@@ -427,7 +432,7 @@ export function readTargetAttribute(
   return readAttributeByTarget(html, patchTarget, attr) ?? null;
 }
 
-export { applyPatchByTarget, formatTimelineAttributeNumber, formatTimelineMediaOffset };
+export { formatTimelineAttributeNumber, formatTimelineMediaOffset };
 
 export { patchDocumentRootDuration } from "./timelineEditingGsap";
 
@@ -490,8 +495,8 @@ export async function persistElementAttribute({
       return await writeProjectFilesWithHistoryInQueue({
         projectId,
         label,
-        files: { [targetPath]: patched },
-        readFile: async (path) => (path === targetPath ? before : readFileContent(projectId, path)),
+        files: { [targetPath]: () => patched },
+        readFile: async () => before,
         writeFile: writeProjectFile,
         recordEdit,
       });