@hyperframes/studio 0.8.79 → 0.8.81

package/src/player/components/useAutomationLanes.ts

@@ -5,15 +5,15 @@
  * Reading lives in `automationLaneData`, shared with the row layout, which needs
  * the lane count to reserve height.
  *
- * Edits go to the *selected* element, because that is what the attribute commit
- * path targets. An unselected clip still draws its envelopes — they are just
- * read only, which is also what stops a stray drag from editing the wrong track.
+ * Edits save through the timeline's gated save, as an effect preset does, so a
+ * locked clip or group refuses them. Only the selected element is editable: an
+ * unselected one still draws its envelopes read only, which is also what stops a
+ * stray drag from editing the wrong track.
  */
 
-import { useCallback, useMemo, useRef } from "react";
+import { useCallback, useMemo } from "react";
 import {
   HF_AUDIO_AUTOMATION_ATTR,
-  serializeAutomation,
   type HfAutomation,
   type HfAutomationLane,
 } from "@hyperframes/core/audio-automation";
@@ -22,22 +22,25 @@ import {
   useDomEditActionsContextOptional,
   useDomEditSelectionContextOptional,
 } from "../../contexts/DomEditContext";
-import { resolveTimelineIdForSelection } from "../../utils/studioHelpers";
+import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
+import type { TimelineEditOutcome } from "../../hooks/timelineEditPermission";
 import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import type { AutomationSelection } from "../store/automationSelectionSlice";
+import { automationAttrValue } from "../../components/editor/propertyPanelAutomation";
 import { elementAutomation, elementFxChain } from "./automationLaneData";
-import { createAutomationGestureKeys } from "./automationGestureKeys";
+import { isGroupAutomationElement } from "./groupAutomationElement";
+import type { TimelineEditCallbacks } from "./timelineCallbacks";
 
 export interface AutomationLaneBinding {
   automation: HfAutomation;
   /** One entry per lane, in draw order — each gets its own row. */
   lanes: HfAutomationLane[];
   chain: HfAudioFxChain | null;
-  /** Continuous write while dragging; does not persist. */
-  onPreview(next: HfAutomation): void;
+  /** Continuous write while dragging; does not persist. `ended`: a cancel put the start back. */
+  onPreview(next: HfAutomation, ended?: boolean): void;
   /** Gesture-end write; this is the one that persists and lands in undo. */
-  onCommit(next: HfAutomation): void;
+  onCommit(next: HfAutomation): Promise<TimelineEditOutcome | void>;
   /**
    * Select this clip, which is what makes its lanes editable. A lane calls this
    * instead of writing when it is read-only — pressing the lane is the only
@@ -46,15 +49,6 @@ export interface AutomationLaneBinding {
    */
   onSelect(): void;
   readOnly: boolean;
-  /**
-   * The timeline clip `onCommit`/`onPreview` will ACTUALLY persist to, which is
-   * whatever the dom-edit layer has selected — not necessarily the element this
-   * binding was made for (see `onSelect` below). Null outside an edit session or
-   * when the dom-edit selection maps to no clip. Resolved exactly the way
-   * applyDomSelection resolves it, so in a settled selection it equals the bound
-   * element's key; it lags only in the window a non-gesture caller can hit.
-   */
-  commitTargetKey: string | null;
   /** This element's active selection box, or null if none / it belongs to a
    *  different element. */
   selection: AutomationSelection | null;
@@ -69,80 +63,69 @@ export interface UseAutomationLanesResult {
   bind(element: TimelineElement, isSelected: boolean): AutomationLaneBinding;
 }
 
+const AUTOMATION_LABEL = "Edit automation";
+
+/** A group's lanes save on the group, gated by its members; a clip's on the clip. */
+function automationWriters(edit: TimelineEditCallbacks, element: TimelineElement) {
+  if (isGroupAutomationElement(element)) {
+    const { onSetAudioGroupAttributeLive: live, onSetAudioGroupAttributeQuiet: save } = edit;
+    if (!live || !save) return null;
+    return {
+      live: (value: string | null) => live(element.id, HF_AUDIO_AUTOMATION_ATTR, value),
+      revert: () => edit.onRevertAudioGroupAttributeLive?.(element.id, HF_AUDIO_AUTOMATION_ATTR),
+      save: (value: string | null) =>
+        save(element.id, HF_AUDIO_AUTOMATION_ATTR, value, AUTOMATION_LABEL),
+    };
+  }
+  const { onSetElementAttributeLive: live, onSetElementAttributeQuiet: save } = edit;
+  if (!live || !save) return null;
+  return {
+    live: (value: string | null) => live(element, HF_AUDIO_AUTOMATION_ATTR, value),
+    revert: () => edit.onRevertElementAttributeLive?.(element, HF_AUDIO_AUTOMATION_ATTR),
+    save: (value: string | null) =>
+      save(element, HF_AUDIO_AUTOMATION_ATTR, value, AUTOMATION_LABEL),
+  };
+}
+
 export function useAutomationLanes(): UseAutomationLanesResult {
-  // One per hook instance, held across renders: a gesture spans many commits and
-  // they all have to record under the same key for undo to take the whole drag.
-  const gestureKeys = useRef(createAutomationGestureKeys());
   // Optional: the player also runs outside Studio, where there is no edit
   // session. There the lanes render read-only, which is the right fallback.
   const domEdit = useDomEditActionsContextOptional();
-  const domEditSelection = useDomEditSelectionContextOptional()?.domEditSelection ?? null;
-  const elements = usePlayerStore((s) => s.elements);
+  const domEditSelectionRef = useDomEditSelectionContextOptional()?.domEditSelectionRef;
+  const timelineEdit = useTimelineEditContextOptional();
   const automationSelection = usePlayerStore((s) => s.automationSelection);
   const setAutomationSelection = usePlayerStore((s) => s.setAutomationSelection);
   const clearAutomationSelection = usePlayerStore((s) => s.clearAutomationSelection);
 
-  // Read from the SAME render as the commit handlers below: both contexts update
-  // in one commit, so a handler and this key can never describe different
-  // moments. activeCompPath is not needed — resolveTimelineIdForSelection only
-  // uses it as a fallback for a selection with no sourceFile of its own, and
-  // DomEditSelection always carries one.
-  const commitTargetKey = useMemo(
-    () =>
-      domEditSelection ? resolveTimelineIdForSelection(domEditSelection, elements, null) : null,
-    [domEditSelection, elements],
-  );
-
   const bind = useCallback(
     (element: TimelineElement, isSelected: boolean): AutomationLaneBinding => {
       const chain = elementFxChain(element);
       const automation = elementAutomation(element);
       const elementKey = getTimelineElementIdentity(element);
 
-      const write = (next: HfAutomation, persist: boolean): void => {
-        if (!domEdit || !isSelected) return;
-        const value = next.lanes.length > 0 ? serializeAutomation(next) : "";
-        // Every write of one gesture under one key, so undo takes back the whole
-        // drag rather than the last fragment history happened to keep.
-        const coalesce = persist ? gestureKeys.current.commit() : gestureKeys.current.live();
-        // Quiet, not the refreshing commit: releasing a dragged point used to
-        // reload the preview, which restarts every playing track — the same chop
-        // the live write during the drag exists to avoid. Quiet still persists
-        // and still resyncs the selection, so the next edit sees this one.
-        if (persist) {
-          void domEdit.handleDomAttributeQuietCommit(HF_AUDIO_AUTOMATION_ATTR, value, coalesce);
-        }
-        // Dragging a point writes live: no preview refresh, so the composition
-        // does not reload and restart playback on every pixel.
-        else {
-          // Preview only, because a gesture writes on every pointermove: the
-          // preview and the running audio follow the pointer, and the release
-          // below is the one write that reaches the file and the undo stack.
-          void domEdit.handleDomAttributeLiveCommit(
-            HF_AUDIO_AUTOMATION_ATTR,
-            value || null,
-            undefined,
-            {
-              coalesce,
-              previewOnly: true,
-            },
-          );
-        }
-      };
+      const writers = domEdit && isSelected ? automationWriters(timelineEdit, element) : null;
 
       return {
         automation,
         lanes: automation.lanes,
         chain,
-        onPreview: (next) => write(next, false),
-        onCommit: (next) => write(next, true),
-        // Deliberately not awaited before an edit: the commit handlers close
-        // over the selection as it was when they were built, so writing in the
-        // same tick would land on whichever element was selected before.
-        // Selecting is its own gesture; the lane goes live after it.
+        onPreview: (next, ended) => {
+          writers?.live(automationAttrValue(next) || null);
+          if (ended) writers?.revert();
+        },
+        onCommit: async (next) => {
+          if (!writers) return;
+          const outcome = await writers.save(automationAttrValue(next) || null);
+          // The FX panel reads the selection snapshot; a stale one makes its next
+          // edit start from the automation this one replaced.
+          const selection = domEditSelectionRef?.current;
+          if (selection) void domEdit?.refreshDomEditSelectionFromPreview(selection);
+          return outcome;
+        },
+        // Deliberately not awaited before an edit: the lane goes live when the
+        // selection lands and it re-renders as selected.
         onSelect: () => void domEdit?.handleTimelineElementSelect(element),
-        readOnly: !domEdit || !isSelected,
-        commitTargetKey: domEdit ? commitTargetKey : null,
+        readOnly: !writers,
         selection: automationSelection?.elementKey === elementKey ? automationSelection : null,
         // Not gated on `isSelected`, unlike the writes above. A selection is
         // ephemeral store state, and the drag that draws one on a read-only lane is
@@ -159,7 +142,8 @@ export function useAutomationLanes(): UseAutomationLanesResult {
     },
     [
       domEdit,
-      commitTargetKey,
+      domEditSelectionRef,
+      timelineEdit,
       automationSelection,
       setAutomationSelection,
       clearAutomationSelection,

package/src/player/lib/automationStoreSync.ts

@@ -6,8 +6,9 @@
  * an envelope afterwards writes to the preview document and the source file, and the
  * store would go on holding the value it was born with until a reload.
  *
- * One reader, called from the two places a change lands: the resync every dom-edit
- * attribute commit already runs, and the soft restore an undo or redo applies. It
+ * One reader, called where a change lands: the resync every dom-edit attribute
+ * commit runs, and an undo or redo's soft restore (timeline saves record their own
+ * value through syncStoredElementAttribute below). It
  * reads the preview rather than being told, because those callers know a file
  * changed, not which attribute — and because three separate writers shipped without
  * remembering to sync, which is what a single sink prevents.
@@ -17,7 +18,7 @@ import { HF_AUDIO_AUTOMATION_ATTR } from "@hyperframes/core/audio-automation";
 import { HF_AUDIO_FX_ATTR } from "@hyperframes/core/audio-fx";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import { groupInfoFor } from "./timelineGroupInfo";
-import { previewElementFinder } from "./timelineElementHelpers";
+import { getTimelineElementIdentity, previewElementFinder } from "./timelineElementHelpers";
 
 /**
  * Re-read every element's automation and FX-chain attributes from the preview
@@ -72,3 +73,29 @@ export function syncStoredAutomationFromPreview(doc: Document | null | undefined
     return changed ? { elements } : {};
   });
 }
+
+const STORED_FIELD: Record<string, "automation" | "fxChain"> = {
+  [HF_AUDIO_AUTOMATION_ATTR]: "automation",
+  [HF_AUDIO_FX_ATTR]: "fxChain",
+};
+
+/** Record a saved automation or FX-chain value on one element's stored copy. */
+export function syncStoredElementAttribute(
+  target: TimelineElement,
+  attr: string,
+  value: string | null,
+): void {
+  const field = STORED_FIELD[attr];
+  if (!field) return;
+  const key = getTimelineElementIdentity(target);
+  const next = value ?? undefined;
+  usePlayerStore.setState((state) => {
+    let changed = false;
+    const elements = state.elements.map((element) => {
+      if (getTimelineElementIdentity(element) !== key || element[field] === next) return element;
+      changed = true;
+      return { ...element, [field]: next };
+    });
+    return changed ? { elements } : {};
+  });
+}

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

@@ -0,0 +1,82 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { decodeImageThumbnail } from "./thumbnailImageDecoder";
+
+class TestImage {
+  static instances: TestImage[] = [];
+  naturalWidth = 180;
+  naturalHeight = 135;
+  src = "";
+  onload: (() => void) | null = null;
+  onerror: (() => void) | null = null;
+  constructor() {
+    TestImage.instances.push(this);
+  }
+}
+beforeEach(() => {
+  TestImage.instances = [];
+  vi.stubGlobal("Image", TestImage);
+});
+afterEach(() => vi.unstubAllGlobals());
+function latest() {
+  const image = TestImage.instances.at(-1);
+  if (!image) throw new Error("missing image");
+  return image;
+}
+
+describe("timeline image thumbnails", () => {
+  it("requests a bounded local JPEG and accounts for its actual decoded dimensions", async () => {
+    const result = decodeImageThumbnail(
+      "/api/projects/p/preview/photo.jpg?v=2",
+      new AbortController().signal,
+    );
+    expect(latest().src).toBe(
+      new URL("/api/projects/p/image-thumbnail/photo.jpg?v=2", location.href).href,
+    );
+    latest().onload?.();
+    expect(await result).toEqual({
+      value: {
+        kind: "image",
+        url: new URL("/api/projects/p/image-thumbnail/photo.jpg?v=2", location.href).href,
+        aspect: 4 / 3,
+      },
+      weight: 180 * 135 * 4,
+    });
+    expect(latest().src).toBe("");
+  });
+  it.each([
+    "https://remote.test/photo.jpg",
+    "/api/projects/p/preview/image.png",
+    "/api/projects/p/preview/image.gif",
+    "/api/projects/p/preview/image.webp",
+    "/api/projects/p/preview/image.svg",
+    "/other/photo.jpg",
+  ])("preserves %s", async (source) => {
+    const result = decodeImageThumbnail(source, new AbortController().signal);
+    expect(latest().src).toBe(source);
+    latest().onload?.();
+    expect((await result).value).toMatchObject({ url: source });
+  });
+  it("falls back for an older server and accounts for original dimensions", async () => {
+    const result = decodeImageThumbnail(
+      "/api/projects/p/preview/photo.jpg",
+      new AbortController().signal,
+    );
+    latest().onerror?.();
+    await Promise.resolve();
+    expect(latest().src).toBe("/api/projects/p/preview/photo.jpg");
+    latest().naturalWidth = 2560;
+    latest().naturalHeight = 1920;
+    latest().onload?.();
+    expect((await result).weight).toBe(2560 * 1920 * 4);
+  });
+  it("does not retry a cancelled request", async () => {
+    const controller = new AbortController();
+    const result = decodeImageThumbnail("/api/projects/p/preview/photo.jpg", controller.signal);
+    controller.abort();
+    await expect(result).rejects.toMatchObject({ name: "AbortError" });
+    expect(TestImage.instances).toHaveLength(1);
+    expect(latest().src).toBe("");
+    expect(latest().onload).toBeNull();
+  });
+});

package/src/player/lib/thumbnailImageDecoder.ts

@@ -0,0 +1,73 @@
+import type { ThumbnailLoadedResult } from "./thumbnailScheduler";
+import { TIMELINE_VIEWPORT_BUDGETS } from "./timelineViewportBudgets";
+
+function thumbnailSource(source: string): string {
+  const url = new URL(source, window.location.href);
+  if (
+    url.origin !== window.location.origin ||
+    !/^\/api\/projects\/[^/]+\/preview\/.+\.jpe?g$/i.test(url.pathname)
+  )
+    return source;
+  url.pathname = url.pathname.replace(
+    /^(\/api\/projects\/[^/]+)\/preview\//,
+    "$1/image-thumbnail/",
+  );
+  return url.href;
+}
+
+function loadImage(source: string, signal: AbortSignal): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    const cleanup = () => {
+      image.onload = null;
+      image.onerror = null;
+      signal.removeEventListener("abort", onAbort);
+    };
+    const onAbort = () => {
+      cleanup();
+      image.src = "";
+      reject(new DOMException("Aborted", "AbortError"));
+    };
+    if (signal.aborted) {
+      onAbort();
+      return;
+    }
+    image.onload = () => {
+      cleanup();
+      resolve(image);
+    };
+    image.onerror = () => {
+      cleanup();
+      if (/\.svg($|\?)/i.test(source)) resolve(image);
+      else {
+        image.src = "";
+        reject(new Error("Image thumbnail failed to load"));
+      }
+    };
+    signal.addEventListener("abort", onAbort, { once: true });
+    image.src = source;
+  });
+}
+
+export async function decodeImageThumbnail(
+  source: string,
+  signal: AbortSignal,
+): Promise<ThumbnailLoadedResult> {
+  let url = thumbnailSource(source);
+  let image: HTMLImageElement;
+  try {
+    image = await loadImage(url, signal);
+  } catch (error) {
+    if (signal.aborted || url === source) throw error;
+    url = source;
+    image = await loadImage(source, signal);
+  }
+  try {
+    signal.throwIfAborted();
+    const width = image.naturalWidth || TIMELINE_VIEWPORT_BUDGETS.posterMaxPhysicalWidth;
+    const height = image.naturalHeight || TIMELINE_VIEWPORT_BUDGETS.posterMaxPhysicalHeight;
+    return { value: { kind: "image", url, aspect: width / height }, weight: width * height * 4 };
+  } finally {
+    image.src = "";
+  }
+}

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/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;
 }