@hyperframes/studio 0.8.78 → 0.8.80

package/src/player/lib/thumbnailVideoDecoder.test.ts

@@ -5,6 +5,7 @@ import { decodeVideoThumbnail, videoThumbnailTimestamps } from "./thumbnailVideo
 
 const dispose = vi.fn();
 const canvasesAtTimestamps = vi.fn();
+const getKeyPacket = vi.fn(async (_time: number) => null as { timestamp: number } | null);
 const input = {
   getPrimaryVideoTrack: vi.fn(),
   dispose,
@@ -22,10 +23,25 @@ vi.mock("mediabunny", () => ({
   CanvasSink: class {
     canvasesAtTimestamps = canvasesAtTimestamps;
   },
+  EncodedPacketSink: class {
+    getKeyPacket = getKeyPacket;
+  },
 }));
 
+function recordDecodes(decoded: number[][]): void {
+  canvasesAtTimestamps.mockImplementation(async function* (timestamps: AsyncIterable<number>) {
+    const run: number[] = [];
+    decoded.push(run);
+    for await (const time of timestamps) {
+      run.push(time);
+      yield { canvas: document.createElement("canvas") };
+    }
+  });
+}
+
 beforeEach(() => {
   vi.clearAllMocks();
+  getKeyPacket.mockImplementation(async () => null);
   vi.spyOn(URL, "createObjectURL").mockReturnValueOnce("blob:one").mockReturnValueOnce("blob:two");
   vi.spyOn(URL, "revokeObjectURL").mockImplementation(() => {});
   HTMLCanvasElement.prototype.toBlob = function toBlob(callback) {
@@ -52,17 +68,14 @@ describe("videoThumbnailTimestamps", () => {
 
 describe("decodeVideoThumbnail", () => {
   it("extracts sparse frames, returns object URLs, and disposes once", async () => {
-    const canvas = document.createElement("canvas");
-    canvasesAtTimestamps.mockImplementation(async function* (timestamps: number[]) {
-      expect(timestamps).toEqual([2, 8]);
-      yield { canvas, timestamp: 2, duration: 1 };
-      yield { canvas, timestamp: 8, duration: 1 };
-    });
+    const decoded: number[][] = [];
+    recordDecodes(decoded);
     const result = await decodeVideoThumbnail(
       { source: "/clip.mp4", sourceStart: 2, sourceRangeDuration: 6, frameCount: 2 },
       new AbortController().signal,
     );
 
+    expect(decoded).toEqual([[2, 8]]);
     expect(result.value).toEqual({
       kind: "filmstrip",
       urls: ["blob:one", "blob:two"],
@@ -74,6 +87,89 @@ describe("decodeVideoThumbnail", () => {
     expect(dispose).toHaveBeenCalledTimes(1);
   });
 
+  it("decodes each strip frame at its keyframe unless that keyframe is before the clip's range", async () => {
+    getKeyPacket.mockImplementation(async (time) => ({ timestamp: Math.floor(time / 4) * 4 }));
+    const decoded: number[][] = [];
+    recordDecodes(decoded);
+    await decodeVideoThumbnail(
+      { source: "/clip.mp4", sourceStart: 2, sourceRangeDuration: 8, frameCount: 3 },
+      new AbortController().signal,
+    );
+    expect(decoded).toEqual([[2, 4, 8]]);
+  });
+
+  it("keeps a slot's own time when its keyframe is more than half a slot earlier", async () => {
+    getKeyPacket.mockImplementation(async () => ({ timestamp: 0 }));
+    const decoded: number[][] = [];
+    recordDecodes(decoded);
+    await decodeVideoThumbnail(
+      { source: "/clip.mp4", sourceStart: 0, sourceRangeDuration: 10, frameCount: 3 },
+      new AbortController().signal,
+    );
+    await decodeVideoThumbnail(
+      { source: "/clip.mp4", sourceStart: 0, sourceRangeDuration: 10, frameCount: 1 },
+      new AbortController().signal,
+    );
+    expect(decoded).toEqual([[0, 5, 10], [5]]);
+  });
+
+  it("looks up each keyframe just before decoding it", async () => {
+    const events: string[] = [];
+    getKeyPacket.mockImplementation(async (time) => {
+      events.push(`key ${time}`);
+      return { timestamp: time };
+    });
+    canvasesAtTimestamps.mockImplementation(async function* (timestamps: AsyncIterable<number>) {
+      for await (const time of timestamps) {
+        events.push(`frame ${time}`);
+        yield { canvas: document.createElement("canvas") };
+      }
+    });
+    await decodeVideoThumbnail(
+      { source: "/clip.mp4", sourceStart: 0, sourceRangeDuration: 10, frameCount: 3 },
+      new AbortController().signal,
+    );
+    expect(events).toEqual(["key 0", "frame 0", "key 5", "frame 5", "key 10", "frame 10"]);
+  });
+
+  it("ends the decode times without throwing when cancelled during a keyframe lookup", async () => {
+    const controller = new AbortController();
+    getKeyPacket.mockImplementation(async () => (controller.abort(), null));
+    const decoded: number[] = [];
+    let timesEnded = false;
+    canvasesAtTimestamps.mockImplementation(async function* (timestamps: AsyncIterable<number>) {
+      for await (const time of timestamps) {
+        decoded.push(time);
+        yield { canvas: document.createElement("canvas") };
+      }
+      timesEnded = true;
+    });
+    await expect(
+      decodeVideoThumbnail(
+        { source: "/clip.mp4", sourceStart: 0, sourceRangeDuration: 10, frameCount: 3 },
+        controller.signal,
+      ),
+    ).rejects.toThrow("Aborted");
+    expect(getKeyPacket).toHaveBeenCalledTimes(1);
+    expect(decoded).toEqual([]);
+    expect(timesEnded).toBe(true);
+  });
+
+  it("spreads a trimmed strip across its range when the file reports no duration", async () => {
+    input.getPrimaryVideoTrack.mockResolvedValue({
+      getDisplayWidth: vi.fn(async () => 1080),
+      getDisplayHeight: vi.fn(async () => 1920),
+      getDurationFromMetadata: vi.fn(async () => null),
+    });
+    const decoded: number[][] = [];
+    recordDecodes(decoded);
+    await decodeVideoThumbnail(
+      { source: "/clip.mp4", sourceStart: 5, sourceRangeDuration: 5, frameCount: 3 },
+      new AbortController().signal,
+    );
+    expect(decoded).toEqual([[5, 7.5, 10]]);
+  });
+
   it("releases input and degrades when the source has no video track", async () => {
     input.getPrimaryVideoTrack.mockResolvedValue(null);
     await expect(

package/src/player/lib/thumbnailVideoDecoder.ts

@@ -44,7 +44,7 @@ interface DecodedResources {
 
 interface ThumbnailCanvasSink {
   canvasesAtTimestamps(
-    timestamps: number[],
+    timestamps: AsyncIterable<number>,
   ): AsyncIterable<{ canvas: HTMLCanvasElement | OffscreenCanvas } | null>;
 }
 
@@ -77,7 +77,7 @@ function targetDimensions(
 
 async function decodeFrames(
   sink: ThumbnailCanvasSink,
-  timestamps: number[],
+  timestamps: AsyncIterable<number>,
   signal: AbortSignal,
   resources: DecodedResources,
 ): Promise<void> {
@@ -89,6 +89,7 @@ async function decodeFrames(
     throwIfAborted(signal);
     resources.urls.push(URL.createObjectURL(blob));
   }
+  throwIfAborted(signal);
 }
 
 function loadedResult(
@@ -138,8 +139,12 @@ export async function decodeVideoThumbnail(
     }
     const metadataDuration = await track.getDurationFromMetadata({ skipLiveWait: true });
     throwIfAborted(signal);
-    const sourceDuration = Math.max(0, metadataDuration ?? request.sourceRangeDuration ?? 0);
-    const sourceStart = Math.min(Math.max(0, request.sourceStart ?? 0), sourceDuration);
+    const requestedStart = Math.max(0, request.sourceStart ?? 0);
+    const sourceDuration = Math.max(
+      0,
+      metadataDuration ?? requestedStart + (request.sourceRangeDuration ?? 0),
+    );
+    const sourceStart = Math.min(requestedStart, sourceDuration);
     const requestedDuration =
       request.sourceRangeDuration ?? Math.max(0, sourceDuration - sourceStart);
     const duration = Math.min(
@@ -151,6 +156,16 @@ export async function decodeVideoThumbnail(
       duration,
       Math.min(request.frameCount, budgets.richPreviewFrameCount),
     );
+    const keys = new mediabunny.EncodedPacketSink(track);
+    const maxKeyframeLead = duration / Math.max(2, timestamps.length - 1) / 2;
+    async function* decodeTimesAtNearbyKeyframes() {
+      for (const time of timestamps) {
+        const key = await keys.getKeyPacket(time, { metadataOnly: true });
+        if (signal.aborted) return;
+        const near = key && key.timestamp >= sourceStart && time - key.timestamp <= maxKeyframeLead;
+        yield near ? key.timestamp : time;
+      }
+    }
     const aspect = displayWidth / displayHeight;
     const target = targetDimensions(aspect, budgets);
     const sink = new mediabunny.CanvasSink(track, {
@@ -159,7 +174,7 @@ export async function decodeVideoThumbnail(
       fit: request.fit ?? "cover",
       poolSize: 1,
     });
-    await decodeFrames(sink, timestamps, signal, resources);
+    await decodeFrames(sink, decodeTimesAtNearbyKeyframes(), signal, resources);
     return loadedResult(resources, aspect, target.width, target.height);
   } catch (error) {
     releaseDecodedResources(resources);

package/src/player/lib/timelineDOM.test.ts

@@ -8,7 +8,6 @@ import {
 } from "./timelineDOM";
 import { isTimelineIgnoredElement } from "./timelineElementHelpers";
 import { computeResizePreview } from "../components/timelineClipDragPreview";
-import { invalidateGroupInfoCache } from "./timelineGroupInfo";
 import type { TimelineElement } from "../store/playerStore";
 
 function el(id: string, extra: Partial<TimelineElement> = {}): TimelineElement {
@@ -21,6 +20,32 @@ function makeDoc(html: string): Document {
   return d;
 }
 
+describe("parseTimelineFromDOM — media in-point", () => {
+  it("reads a negative in-point as 0, as the runtime does, so a head trim keeps the clip", () => {
+    const doc = makeDoc(`
+      <div data-composition-id="root">
+        <video id="v" class="clip" data-start="2" data-duration="1" data-media-start="-1"></video>
+      </div>
+    `);
+    const element = parseTimelineFromDOM(doc, 10).find((e) => e.domId === "v")!;
+    expect(element.playbackStart).toBe(0);
+
+    const preview = computeResizePreview(
+      {
+        element,
+        edge: "start",
+        originClientX: 0,
+        previewStart: 2,
+        previewDuration: 1,
+        started: true,
+      },
+      10,
+      { scroll: null, pps: 100, buildSnapTargets: () => [] },
+    );
+    expect(preview.previewDuration).toBe(0.9);
+  });
+});
+
 describe("parseTimelineFromDOM — hfId from data-hf-id", () => {
   it("bridges a real GSAP transition marker onto both named clips", () => {
     document.body.innerHTML = `
@@ -166,7 +191,7 @@ describe("group info cache", () => {
   // changes either. Without an explicit drop, a muted group could never be
   // unmuted: the header kept reading the cached `hidden: false` and re-wrote
   // `data-hidden` forever.
-  it("re-reads group state after an invalidation", () => {
+  it("re-reads group state written earlier in the same task", () => {
     const doc = makeDoc(`
       <div data-composition-id="root">
         <audio id="voice-1" data-start="0" data-duration="5" data-audio-group="voiceover"></audio>
@@ -175,15 +200,10 @@ describe("group info cache", () => {
     `);
 
     expect(parseMember(doc).audioGroupHidden).toBe(false);
-
+    // No await: the observer has not delivered either write when the next read runs.
     doc.getElementById("voiceover")?.setAttribute("data-hidden", "");
-    expect(parseMember(doc).audioGroupHidden).toBe(false); // still the cached scan
-
-    invalidateGroupInfoCache(doc);
     expect(parseMember(doc).audioGroupHidden).toBe(true);
-
     doc.getElementById("voiceover")?.removeAttribute("data-hidden");
-    invalidateGroupInfoCache(doc);
     expect(parseMember(doc).audioGroupHidden).toBe(false);
   });
 

package/src/player/lib/timelineElementHelpers.ts

@@ -13,6 +13,7 @@ import { isFinitePositive } from "./playbackAdapter";
 import { getSourceScopedSelectorIndex } from "../../utils/sourceScopedSelectorIndex";
 import { HF_AUDIO_GROUP_TAG } from "@hyperframes/core/audio-groups";
 import { readElementFades } from "@hyperframes/core/audio-fade";
+import { readMediaOffsetSeconds } from "@hyperframes/parsers/media-duration";
 
 // ---------------------------------------------------------------------------
 // Layer-reveal lift transparency
@@ -171,10 +172,8 @@ function applyPlaybackMetadataFromElement(entry: TimelineElement, el: Element):
   const playbackStartValue = el.getAttribute("data-playback-start");
   const legacyMediaStartValue = el.getAttribute("data-media-start");
   const mediaStartValue = playbackStartValue ?? legacyMediaStartValue;
-  if (mediaStartValue != null) {
-    const playbackStart = parseFloat(mediaStartValue);
-    if (Number.isFinite(playbackStart)) entry.playbackStart = playbackStart;
-  }
+  if (mediaStartValue != null)
+    entry.playbackStart = readMediaOffsetSeconds((n) => el.getAttribute(n));
   if (playbackStartValue != null) entry.playbackStartAttr = "playback-start";
   else if (legacyMediaStartValue != null) entry.playbackStartAttr = "media-start";
 

package/src/player/lib/timelineGroupInfo.ts

@@ -42,7 +42,24 @@ const groupInfoCache = new WeakMap<
 
 /** Bumped by every observed mutation to group state in a document. */
 const groupRevisions = new WeakMap<Document, number>();
-const groupObservers = new WeakSet<Document>();
+const groupObservers = new WeakMap<Document, MutationObserver>();
+
+function countGroupChanges(doc: Document, records: readonly MutationRecord[]): void {
+  // Only a group element added or removed counts: childList fires for every node a playing
+  // preview inserts. Attribute records always count; the observer filter already narrowed them.
+  const relevant = records.some(
+    (record) =>
+      record.type !== "childList" ||
+      [...record.addedNodes, ...record.removedNodes].some(
+        (node) =>
+          node instanceof Element &&
+          (node.tagName.toLowerCase() === HF_AUDIO_GROUP_TAG ||
+            node.hasAttribute(HF_AUDIO_GROUP_ATTR) ||
+            node.querySelector?.(`${HF_AUDIO_GROUP_TAG},[${HF_AUDIO_GROUP_ATTR}]`) != null),
+      ),
+  );
+  if (relevant) groupRevisions.set(doc, (groupRevisions.get(doc) ?? 0) + 1);
+}
 
 /**
  * Watch a document for any change to group state, so the cache expires itself.
@@ -55,28 +72,8 @@ const groupObservers = new WeakSet<Document>();
  */
 function observeGroupState(doc: Document): void {
   if (groupObservers.has(doc) || typeof MutationObserver === "undefined" || !doc.body) return;
-  groupObservers.add(doc);
-  const observer = new MutationObserver((records) => {
-    // `childList` fires for EVERY node added or removed anywhere in the live
-    // preview, which on a composition that churns nodes during playback
-    // (SplitText, a typewriter, anything runtime-inserted) would expire this
-    // cache permanently and put it back to one whole-tree scan per parse. Only
-    // a group ELEMENT appearing or leaving actually changes the answer, so
-    // childList records are filtered rather than trusted; attribute records
-    // always count, because the filter below already narrowed them.
-    const relevant = records.some(
-      (record) =>
-        record.type !== "childList" ||
-        [...record.addedNodes, ...record.removedNodes].some(
-          (node) =>
-            node instanceof Element &&
-            (node.tagName.toLowerCase() === HF_AUDIO_GROUP_TAG ||
-              node.hasAttribute(HF_AUDIO_GROUP_ATTR) ||
-              node.querySelector?.(`${HF_AUDIO_GROUP_TAG},[${HF_AUDIO_GROUP_ATTR}]`) != null),
-        ),
-    );
-    if (relevant) groupRevisions.set(doc, (groupRevisions.get(doc) ?? 0) + 1);
-  });
+  const observer = new MutationObserver((records) => countGroupChanges(doc, records));
+  groupObservers.set(doc, observer);
   observer.observe(doc.body, {
     subtree: true,
     childList: true,
@@ -112,6 +109,9 @@ export function invalidateGroupInfoCache(doc: Document | null | undefined): void
 export function groupInfoFor(doc: Document | null | undefined, groupId: string): GroupInfo {
   if (!doc) return { label: groupId, volume: 1, hidden: false };
   observeGroupState(doc);
+  // A write earlier in this task has not reached the observer's callback yet.
+  const unseen = groupObservers.get(doc)?.takeRecords();
+  if (unseen?.length) countGroupChanges(doc, unseen);
   const revision = groupRevisions.get(doc) ?? 0;
   const cached = groupInfoCache.get(doc);
   let info = cached && cached.revision === revision ? cached.entries : undefined;

package/src/utils/authoredSource.ts

@@ -0,0 +1,92 @@
+import { ensureHfIds, isCompositionTemplate } from "@hyperframes/parsers/hf-ids";
+
+// Stamped as the preview stamps the files it serves, so a live element's hf-id finds its source.
+export function parseSavedSource(html: string): Document {
+  return new DOMParser().parseFromString(ensureHfIds(html), "text/html");
+}
+
+const rootsByDoc = new WeakMap<Document, ParentNode[]>();
+
+// A plain template is a runtime clone source, so ids inside it repeat across clones.
+function searchRoots(root: ParentNode): ParentNode[] {
+  const templates = Array.from(root.querySelectorAll("template")).filter(isCompositionTemplate);
+  return [root, ...templates.flatMap((template) => searchRoots(template.content))];
+}
+
+function findByAttribute(doc: Document, name: string, value: string): Element | null {
+  let roots = rootsByDoc.get(doc);
+  if (!roots) rootsByDoc.set(doc, (roots = searchRoots(doc)));
+  const selector = `[${name}="${value.replace(/["\\]/g, "\\$&")}"]`;
+  for (const root of roots) {
+    const match = root.querySelector(selector);
+    if (match) return match;
+  }
+  return null;
+}
+
+export function findAuthoredElement(doc: Document, live: Element): Element | null {
+  const hfId = live.getAttribute("data-hf-id");
+  if (hfId) return findByAttribute(doc, "data-hf-id", hfId);
+  return live.id ? findByAttribute(doc, "id", live.id) : null;
+}
+
+export function findAuthoredElementById(doc: Document, live: Element): Element | null {
+  return live.id ? findByAttribute(doc, "id", live.id) : null;
+}
+
+const PATH_ATTRS = ["src", "href"];
+const CSS_URL = /\burl\(\s*(["']?)([^)"'\s](?:[^)"']*[^)"'\s])?)\1\s*\)/g;
+
+function isRelative(path: string): boolean {
+  return !!path && !/^(?:[a-z][a-z\d+.-]*:|\/|#)/i.test(path);
+}
+
+function toProjectPath(sourceFile: string, path: string): string {
+  const parts = sourceFile.split("/").slice(0, -1);
+  for (const part of path.split("/")) {
+    if (part === "..") parts.pop();
+    else if (part !== "." && part !== "") parts.push(part);
+  }
+  return parts.join("/");
+}
+
+function livePathsOf(live: Element): Set<string> {
+  const paths = new Set<string>();
+  for (const el of [live, ...Array.from(live.querySelectorAll("*"))]) {
+    for (const attr of PATH_ATTRS) paths.add(el.getAttribute(attr) ?? "");
+    for (const match of (el.getAttribute("style") ?? "").matchAll(CSS_URL)) paths.add(match[2]);
+  }
+  return paths;
+}
+
+// The preview inlines a sub-composition with its relative asset paths rebased to the project
+// root (rewriteAssetPath in @hyperframes/parsers, which is not browser-safe); copy does the same.
+export function authoredMarkup(authored: Element, live: Element, sourceFile: string): string {
+  if (!sourceFile.includes("/")) return authored.outerHTML;
+  const livePaths = livePathsOf(live);
+  const rebase = (path: string): string => {
+    if (!isRelative(path)) return path;
+    const cut = path.search(/[?#]/);
+    const suffix = cut < 0 ? "" : path.slice(cut);
+    const rebased = toProjectPath(sourceFile, cut < 0 ? path : path.slice(0, cut)) + suffix;
+    return path.startsWith("../") || livePaths.has(rebased) ? rebased : path;
+  };
+  const copy = authored.cloneNode(true) as Element;
+  for (const el of [copy, ...Array.from(copy.querySelectorAll("*"))]) {
+    for (const attr of PATH_ATTRS) {
+      const value = el.getAttribute(attr);
+      if (value) el.setAttribute(attr, rebase(value.trim()));
+    }
+    const style = el.getAttribute("style");
+    if (style) {
+      el.setAttribute(
+        "style",
+        style.replace(
+          CSS_URL,
+          (_, quote: string, url: string) => `url(${quote}${rebase(url)}${quote})`,
+        ),
+      );
+    }
+  }
+  return copy.outerHTML;
+}

package/src/utils/gsapSoftReload.test.ts

@@ -488,6 +488,35 @@ describe("applySoftReload authored-opacity restore", () => {
     expect(el.style.getPropertyPriority("opacity")).toBe("");
   });
 
+  it("keeps the stamp for an element whose hf-id the written file lacks, even if it shares an id", () => {
+    const el = document.createElement("img");
+    el.id = "title-card";
+    el.setAttribute("data-hf-id", "hf-from-another-file");
+    el.setAttribute("data-hf-authored-opacity", "0.5");
+    el.style.opacity = "0";
+
+    const opacity = restoreOpacity(
+      el,
+      '<html><body><img id="title-card" style="opacity: 0.9"></body></html>',
+    );
+
+    expect(opacity).toBe("0.5");
+  });
+
+  it("does not take a runtime clone's opacity from its plain template", () => {
+    const el = document.createElement("li");
+    el.id = "item";
+    el.setAttribute("data-hf-authored-opacity", "0.5");
+    el.style.opacity = "0";
+
+    const opacity = restoreOpacity(
+      el,
+      '<html><body><template><li id="item" style="opacity: 0.3"></li></template></body></html>',
+    );
+
+    expect(opacity).toBe("0.5");
+  });
+
   it("falls back to the parse-time stamp when no after-write HTML is given", () => {
     const el = document.createElement("img");
     el.setAttribute("data-hf-authored-opacity", "0.75");

package/src/utils/gsapSoftReload.ts

@@ -1,4 +1,5 @@
 import { COLOR_GRADING_SOURCE_HIDDEN_ATTR } from "@hyperframes/core/color-grading";
+import { findAuthoredElement, parseSavedSource } from "./authoredSource";
 import { applyAuthoredInlineOpacity, readStampedAuthoredOpacity } from "./authoredOpacity";
 
 type IframeWindow = Window & {
@@ -301,17 +302,12 @@ export function applySoftReload(
   const findAuthoredSource = (el: HTMLElement): Element | null => {
     if (authoredDoc === undefined) {
       try {
-        authoredDoc = authoredHtml
-          ? new DOMParser().parseFromString(authoredHtml, "text/html")
-          : null;
+        authoredDoc = authoredHtml ? parseSavedSource(authoredHtml) : null;
       } catch {
         authoredDoc = null;
       }
     }
-    if (!authoredDoc) return null;
-    const hfId = el.getAttribute("data-hf-id");
-    if (hfId) return authoredDoc.querySelector(`[data-hf-id="${hfId}"]`);
-    return el.id ? authoredDoc.getElementById(el.id) : null;
+    return authoredDoc ? findAuthoredElement(authoredDoc, el) : null;
   };
   const readAuthoredOpacity = (el: HTMLElement): string | null => {
     const source = findAuthoredSource(el);

package/src/utils/studioFileHistory.ts

@@ -60,7 +60,15 @@ export async function readProjectFileContent(pid: string, path: string): Promise
   return data.content;
 }
 
-export async function saveProjectFilesWithHistory({
+export async function saveProjectFilesWithHistory(
+  input: SaveProjectFilesWithHistoryInput,
+): Promise<string[]> {
+  return serializeStudioFileMutations(input.writeFile, Object.keys(input.files), () =>
+    writeProjectFilesWithHistoryInQueue(input),
+  );
+}
+
+export async function writeProjectFilesWithHistoryInQueue({
   label,
   coalesceKey,
   coalesceMs,
@@ -70,39 +78,37 @@ export async function saveProjectFilesWithHistory({
   recordEdit,
   diskContent,
 }: SaveProjectFilesWithHistoryInput): Promise<string[]> {
-  return serializeStudioFileMutations(writeFile, Object.keys(files), async () => {
-    const snapshots: Record<string, { before: string; after: string }> = {};
-    for (const [path, after] of Object.entries(files)) {
-      const before = await readFile(path);
-      if (before !== after) {
-        snapshots[path] = { before, after };
-      }
+  const snapshots: Record<string, { before: string; after: string }> = {};
+  for (const [path, after] of Object.entries(files)) {
+    const before = await readFile(path);
+    if (before !== after) {
+      snapshots[path] = { before, after };
     }
+  }
 
-    const changedPaths = Object.keys(snapshots);
-    if (changedPaths.length === 0) return [];
+  const changedPaths = Object.keys(snapshots);
+  if (changedPaths.length === 0) return [];
 
-    const writtenPaths: string[] = [];
-    try {
-      for (const path of changedPaths) {
-        await writeFile(path, snapshots[path].after, diskContent?.[path] ?? snapshots[path].before);
-        writtenPaths.push(path);
-      }
+  const writtenPaths: string[] = [];
+  try {
+    for (const path of changedPaths) {
+      await writeFile(path, snapshots[path].after, diskContent?.[path] ?? snapshots[path].before);
+      writtenPaths.push(path);
+    }
 
-      await recordEdit({ label, coalesceKey, coalesceMs, files: snapshots });
-    } catch (error) {
-      try {
-        for (const path of writtenPaths.reverse()) {
-          await writeFile(path, snapshots[path].before, snapshots[path].after);
-        }
-      } catch (rollbackError) {
-        throw new AggregateError(
-          [error, rollbackError],
-          "Failed to save project files and rollback did not complete",
-        );
+    await recordEdit({ label, coalesceKey, coalesceMs, files: snapshots });
+  } catch (error) {
+    try {
+      for (const path of writtenPaths.reverse()) {
+        await writeFile(path, snapshots[path].before, snapshots[path].after);
       }
-      throw error;
+    } catch (rollbackError) {
+      throw new AggregateError(
+        [error, rollbackError],
+        "Failed to save project files and rollback did not complete",
+      );
     }
-    return changedPaths;
-  });
+    throw error;
+  }
+  return changedPaths;
 }