@hyperframes/studio 0.8.106 → 0.8.108

package/src/utils/gsapUndoRestore.ts

@@ -12,6 +12,8 @@ import { isCompositionTemplate } from "@hyperframes/parsers/hf-ids";
 import { findAuthoredElement, parseSavedSource } from "./authoredSource";
 import { STUDIO_EDIT_ATTRS } from "../components/editor/manualEditsSeekReapply";
 import { markScenesStale } from "../player/sceneSwap";
+import { STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR } from "../components/editor/manualEditsTypes";
+import { studioGestureDraws } from "../components/editor/manualEditsDom";
 
 type PreviewWindow = Window & {
   __player?: { seek?: (t: number) => void };
@@ -140,23 +142,55 @@ function diffRestoreDocs(prevDoc: Document, nextDoc: Document): string[] | null
   return prevRest === nextRest ? changedElementKeys : null;
 }
 
-/** Copy every attribute from `source` onto the live `target`, dropping extras. */
-function syncElementAttributes(target: Element, source: Element): void {
+/** Copies `source`'s attributes onto `target`; under a gesture mark it merges them (keepDrawn). */
+function syncElementAttributes(target: Element, source: Element, base?: Element): void {
+  const draws = base && studioGestureDraws(target);
+  const merged = draws ? keepDrawn(target, source, base, draws) : source;
   for (const name of [...target.getAttributeNames()]) {
-    if (!source.hasAttribute(name)) target.removeAttribute(name);
+    if (!merged.hasAttribute(name)) target.removeAttribute(name);
   }
-  for (const name of source.getAttributeNames()) {
-    target.setAttribute(name, source.getAttribute(name) ?? "");
+  for (const name of merged.getAttributeNames()) {
+    target.setAttribute(name, merged.getAttribute(name) ?? "");
+  }
+}
+
+/** `source`, plus what a gesture in progress draws on `live` (whatever its value) or changed since `base`. */
+function keepDrawn(live: Element, source: Element, base: Element, draws: readonly string[]) {
+  const merged = source.cloneNode(false) as Element;
+  const keepsMark = draws.includes("translate");
+  for (const name of live.getAttributeNames().filter((n) => n !== "style")) {
+    const value = live.getAttribute(name)!;
+    const mark = keepsMark && name === STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR;
+    if (mark || value !== base.getAttribute(name)) merged.setAttribute(name, value);
+  }
+  keepDrawnStyle(live as HTMLElement, base as HTMLElement, merged as HTMLElement, draws);
+  return merged;
+}
+
+function keepDrawnStyle(
+  live: HTMLElement,
+  base: HTMLElement,
+  merged: HTMLElement,
+  draws: readonly string[],
+) {
+  const value = (prop: string) => live.style.getPropertyValue(prop);
+  const drawn = (prop: string) =>
+    draws.includes(prop) || value(prop) !== base.style.getPropertyValue(prop);
+  const props = new Set([...Array.from(live.style), ...Array.from(base.style), ...draws]);
+  for (const prop of [...props].filter(drawn)) {
+    if (value(prop))
+      merged.style.setProperty(prop, value(prop), live.style.getPropertyPriority(prop));
+    else merged.style.removeProperty(prop);
   }
 }
 
 // A gesture folded into the script leaves marks on the live element that every seek would re-impose.
-function syncStaleEditMarks(doc: Document, restored: string): void {
-  const restoredDoc = parseSavedSource(restored);
+function syncStaleEditMarks(doc: Document, file: UndoRestoreFile): void {
+  const [restoredDoc, previousDoc] = [file.restored, file.previous].map(parseSavedSource);
   for (const live of doc.querySelectorAll(STUDIO_EDIT_ATTRS.map((attr) => `[${attr}]`).join())) {
     const source = findAuthoredElement(restoredDoc, live);
     if (source && STUDIO_EDIT_ATTRS.some((a) => live.getAttribute(a) !== source.getAttribute(a))) {
-      syncElementAttributes(live, source);
+      syncElementAttributes(live, source, findAuthoredElement(previousDoc, live) ?? undefined);
     }
   }
 }
@@ -172,7 +206,7 @@ function hasAmbiguousGsapScriptChange(
   );
 }
 
-type RestoreTarget = { live: Element; restored: Element };
+type RestoreTarget = { live: Element; restored: Element; previous?: Element };
 type RestorePlan = { targets: RestoreTarget[]; scripted: boolean };
 
 /** Whether either side has a GSAP script, or null when its scripts rule out an in-place restore. */
@@ -196,6 +230,7 @@ function scopeTargets(
   scope: ParentNode,
   keys: string[],
   restoredByKey: Map<string, Element>,
+  previousByKey: Map<string, Element>,
 ): RestoreTarget[] | null {
   const liveByKey = identityElementMap(scope);
   if (!liveByKey) return null;
@@ -205,7 +240,7 @@ function scopeTargets(
     const restored = restoredByKey.get(key);
     // The preview rewrites a sub-composition's own root, so its attributes are not the file's.
     if (!live || !restored || live.hasAttribute("data-hf-inner-root")) return null;
-    targets.push({ live, restored });
+    targets.push({ live, restored, previous: previousByKey.get(key) });
   }
   return targets;
 }
@@ -222,9 +257,10 @@ function fileTargets(
   if (scripted === null) return null;
   const keys = diffRestoreDocs(prevDoc, nextDoc);
   const restoredByKey = identityElementMap(nextDoc);
-  if (!keys || !restoredByKey) return null;
+  const previousByKey = identityElementMap(prevDoc);
+  if (!keys || !restoredByKey || !previousByKey) return null;
   const found = liveScopes(doc, path, isActive).map((scope) =>
-    scopeTargets(scope, keys, restoredByKey),
+    scopeTargets(scope, keys, restoredByKey, previousByKey),
   );
   if (!found.length || found.includes(null)) return null;
   return { targets: (found as RestoreTarget[][]).flat(), scripted };
@@ -273,11 +309,14 @@ export function showRestoreInPlace(
   const win = iframe?.contentWindow as PreviewWindow | null;
   const plan = doc && win ? planRestoreTargets(doc, activeCompPath ?? "index.html", files) : null;
   if (!iframe || !win || !plan || plan.scripted) return null;
-  const before = plan.targets.map(({ live }) => [live, live.cloneNode(false) as Element] as const);
-  for (const { live, restored } of plan.targets) syncElementAttributes(live, restored);
+  const before = plan.targets.map(
+    ({ live, restored }) => [live, live.cloneNode(false) as Element, restored] as const,
+  );
+  for (const { live, restored, previous } of plan.targets)
+    syncElementAttributes(live, restored, previous);
   const putBack = (time: number) => {
     if (iframe.contentDocument !== doc) return false;
-    for (const [live, attributes] of before) syncElementAttributes(live, attributes);
+    for (const [live, attributes, shown] of before) syncElementAttributes(live, attributes, shown);
     return finalizeInPlace(iframe, win, time);
   };
   if (finalizeInPlace(iframe, win, currentTime)) return putBack;
@@ -299,9 +338,10 @@ export function showRestoreInPlace(
  *      element — so a canvas-position revert lands on the live DOM the runtime's
  *      seek-reapply reads from, not just on disk.
  *   2. The runtime refresh depends on what changed:
- *      - GSAP script text actually CHANGED between previous and restored → the
- *        restored script is re-run in place via applySoftReload (re-seeks to
- *        `currentTime`, re-folds manual edits).
+ *      - GSAP script text actually CHANGED between previous and restored, or a
+ *        synced element was parsed by GSAP → the restored script is re-run in
+ *        place via applySoftReload (re-seeks to `currentTime`, re-folds manual
+ *        edits, re-parses those elements); several scripts can't, so it reloads.
  *      - Script unchanged or absent (the overwhelmingly common undo: z-order,
  *        lane move, timing shift, style tweak) → NO script execution — the
  *        blink-free finalization only (seek + __hfForceTimelineRebind + manual
@@ -338,17 +378,26 @@ export function applyUndoRestoreToPreview(
   }
   // Sync each changed element's attributes onto the live DOM from the restored
   // markup, so the runtime's seek-reapply reads the reverted values.
-  for (const target of plan.targets) syncElementAttributes(target.live, target.restored);
+  for (const target of plan.targets)
+    syncElementAttributes(target.live, target.restored, target.previous);
 
   const active = files[activeDocPath];
   const restoredScript = active ? extractGsapScriptText(active.restored) : null;
   const previousScript = active ? extractGsapScriptText(active.previous) : null;
-  if (restoredScript && restoredScript !== previousScript) {
-    syncStaleEditMarks(doc, active.restored);
+  const reparse = plan.scripted
+    ? plan.targets.map(({ live }) => live).filter((el) => "_gsap" in el)
+    : [];
+  if (reparse.length && !restoredScript) {
+    reloadPreview();
+    return "full";
+  }
+  if (restoredScript && (restoredScript !== previousScript || reparse.length)) {
+    syncStaleEditMarks(doc, active);
     const result = applySoftReload(iframe, restoredScript, {
       onAsyncFailure: reloadPreview,
       currentTimeOverride: currentTime,
       authoredHtml: active.restored,
+      reparse,
     });
     if (result === "cannot-soft-reload") {
       reloadPreview();

package/src/utils/previewRelativePath.ts

@@ -0,0 +1,19 @@
+import { buildProjectApiPath } from "./projectRouting";
+
+/** Resolve a media src to its project-relative preview path, or null. */
+export function resolvePreviewRelative(
+  src: string | undefined,
+  pid: string,
+  origin: string,
+): string | null {
+  if (!src) return null;
+  try {
+    const parsed = new URL(src, origin);
+    const base = new URL(buildProjectApiPath(pid, `/preview/`), origin).pathname;
+    return parsed.pathname.startsWith(base)
+      ? decodeURIComponent(parsed.pathname.slice(base.length))
+      : null;
+  } catch {
+    return null;
+  }
+}

package/src/utils/sourcePatcher.ts

@@ -12,7 +12,7 @@ function escapeStyleAttributeValue(value: string, quote: string): string {
 }
 
 /** Escape a string for safe use inside a double-quoted HTML attribute. */
-function escapeHtmlAttribute(value: string): string {
+export function escapeHtmlAttribute(value: string): string {
   return value
     .replace(/&/g, "&")
     .replace(/"/g, """)
@@ -21,7 +21,7 @@ function escapeHtmlAttribute(value: string): string {
 }
 
 /** Reverse escapeHtmlAttribute so callers get the original value. */
-function unescapeHtmlAttribute(value: string): string {
+export function unescapeHtmlAttribute(value: string): string {
   return value
     .replace(/"/g, '"')
     .replace(/&lt;/g, "<")

package/src/utils/studioFontHelpers.ts

@@ -60,27 +60,6 @@ export function injectPreviewImportedFont(doc: Document, asset: ImportedFontAsse
   doc.head.appendChild(style);
 }
 
-export function ensureImportedFontFace(
-  html: string,
-  asset: ImportedFontAsset,
-  sourceFile: string,
-): string {
-  const css = importedFontFaceCss(asset, toRelativeProjectAssetPath(sourceFile, asset.path));
-  if (html.includes(css)) return html;
-
-  const styleRe = /<style\b[^>]*data-hf-studio-fonts=(["'])true\1[^>]*>([\s\S]*?)<\/style>/i;
-  const styleMatch = styleRe.exec(html);
-  if (styleMatch) {
-    const nextCss = `${styleMatch[2].trim()}\n${css}`.trim();
-    return html.replace(
-      styleMatch[0],
-      () => `<style data-hf-studio-fonts="true">\n${nextCss}\n</style>`,
-    );
-  }
-
-  const styleTag = `<style data-hf-studio-fonts="true">\n${css}\n</style>`;
-  if (/<\/head>/i.test(html)) {
-    return html.replace(/<\/head>/i, () => `  ${styleTag}\n  </head>`);
-  }
-  return `${styleTag}\n${html}`;
+export function importedFontFaceCssFor(asset: ImportedFontAsset, sourceFile: string): string {
+  return importedFontFaceCss(asset, toRelativeProjectAssetPath(sourceFile, asset.path));
 }

package/src/utils/studioHelpers.test.ts

@@ -5,6 +5,7 @@ import {
   historyTooltipLabel,
   findMatchingTimelineElementId,
   findTimelineIdByAncestor,
+  resolveAssetHasAudio,
   resolveDroppedAssetDimensions,
   resolveElementTrack,
   resolveTimelineIdForSelection,
@@ -235,3 +236,32 @@ describe("historyTooltipLabel", () => {
     expect(historyTooltipLabel("redo", null)).toMatch(/^Redo \(.+\)$/);
   });
 });
+
+describe("resolveAssetHasAudio", () => {
+  afterEach(() => vi.unstubAllGlobals());
+
+  const stubMetadata = (response: Response | Error) =>
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => {
+        if (response instanceof Error) throw response;
+        return response;
+      }),
+    );
+
+  it("answers the metadata endpoint's audio flag", async () => {
+    stubMetadata(new Response(JSON.stringify({ metadata: { hasAudio: true } })));
+    expect(await resolveAssetHasAudio("p1", "assets/talk.mp4")).toBe(true);
+    stubMetadata(new Response(JSON.stringify({ metadata: { hasAudio: false } })));
+    expect(await resolveAssetHasAudio("p1", "assets/cutout.webm")).toBe(false);
+  });
+
+  it("answers null when the probe cannot tell", async () => {
+    stubMetadata(new Response("nope", { status: 500 }));
+    expect(await resolveAssetHasAudio("p1", "assets/talk.mp4")).toBeNull();
+    stubMetadata(new Error("offline"));
+    expect(await resolveAssetHasAudio("p1", "assets/talk.mp4")).toBeNull();
+    stubMetadata(new Response(JSON.stringify({ metadata: {} })));
+    expect(await resolveAssetHasAudio("p1", "assets/talk.mp4")).toBeNull();
+  });
+});

package/src/utils/studioHelpers.ts

@@ -388,13 +388,27 @@ export async function resolveDroppedAssetHasAudio(
   kind: TimelineAssetKind,
 ): Promise<boolean> {
   if (kind !== "video") return false;
+  return (await resolveAssetHasAudio(projectId, assetPath)) === true;
+}
+
+function isPlainRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+/** An asset's audio stream from the metadata endpoint: null when the probe can't tell. */
+export async function resolveAssetHasAudio(
+  projectId: string,
+  assetPath: string,
+): Promise<boolean | null> {
   try {
     const response = await fetch(mediaMetadataUrl(projectId, assetPath));
-    if (!response.ok) return false;
-    const data = (await response.json()) as { metadata?: { hasAudio?: boolean } } | null;
-    return data?.metadata?.hasAudio === true;
+    if (!response.ok) return null;
+    const data: unknown = await response.json();
+    const metadata = isPlainRecord(data) ? data.metadata : undefined;
+    const hasAudio = isPlainRecord(metadata) ? metadata.hasAudio : undefined;
+    return typeof hasAudio === "boolean" ? hasAudio : null;
   } catch {
-    return false;
+    return null;
   }
 }
 

package/src/utils/studioPendingEdits.test.ts

@@ -2,8 +2,12 @@
 import { describe, expect, it, vi } from "vitest";
 import {
   addStudioPendingEditFlushListener,
+  beginStudioPendingEdit,
   flushStudioPendingEdits,
+  hasStudioPendingEdits,
+  revertNewestStudioPendingEdit,
   trackStudioPendingEdit,
+  trackedStudioEdit,
 } from "./studioPendingEdits";
 import { StudioFileConflictError } from "./studioSaveDiagnostics";
 
@@ -36,6 +40,22 @@ describe("studio pending edit flush", () => {
     input.remove();
   });
 
+  it.each([
+    ["contenteditable", "plaintext-only"],
+    ["role", "combobox"],
+    ["role", "searchbox"],
+    ["role", "switch"],
+  ])("counts a focused [%s=%s] as a pending edit", (attribute, value) => {
+    const field = document.createElement("div");
+    field.setAttribute(attribute, value);
+    field.tabIndex = 0;
+    document.body.append(field);
+    field.focus();
+
+    expect(hasStudioPendingEdits()).toBe(true);
+    field.remove();
+  });
+
   it("waits for a post-blur effect to register its pending edit listener", async () => {
     const input = document.createElement("textarea");
     document.body.append(input);
@@ -148,3 +168,112 @@ describe("studio pending edit flush", () => {
     expect(steps).toEqual(["persisted", "flushed"]);
   });
 });
+
+describe("a drain that meets a conflict", () => {
+  it("still waits for the edits that started while it ran before it reports the conflict", async () => {
+    const conflict = new StudioFileConflictError({
+      filePath: "index.html",
+      currentVersion: "v2",
+      currentContent: "external",
+      attemptedContent: "studio",
+    });
+    let finish!: () => void;
+    let laterSaved = false;
+    trackStudioPendingEdit(
+      Promise.resolve().then(() => {
+        trackStudioPendingEdit(
+          new Promise<void>((resolve) => (finish = resolve)).then(() => (laterSaved = true)),
+        );
+        throw conflict;
+      }),
+    );
+    let drained = false;
+    const drain = flushStudioPendingEdits().then((result) => ((drained = true), result));
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    expect(drained).toBe(false);
+    finish();
+    await expect(drain).resolves.toEqual({ status: "conflict", error: conflict });
+    expect(laterSaved).toBe(true);
+  });
+});
+
+describe("trackedStudioEdit", () => {
+  it("counts each call as a pending edit until it settles, and reports a failure to the drain", async () => {
+    let fail!: () => void;
+    const failure = new Error("The save failed.");
+    const edit = trackedStudioEdit(
+      () => new Promise<void>((_, reject) => (fail = () => reject(failure))),
+    );
+    const saved = edit();
+    expect(hasStudioPendingEdits()).toBe(true);
+    const drain = flushStudioPendingEdits();
+    fail();
+    await expect(saved).rejects.toThrow("The save failed.");
+    await expect(drain).resolves.toEqual({ status: "failed", error: failure });
+    expect(hasStudioPendingEdits()).toBe(false);
+  });
+});
+
+describe("a pending edit undo can paint back", () => {
+  const shown: string[] = [];
+  const edit = (name: string) =>
+    beginStudioPendingEdit(() => {
+      shown.push(`${name} undone`);
+      return () => shown.push(`${name} again`);
+    });
+
+  it("paints back only the newest edit, once, and shows it again on request", () => {
+    shown.length = 0;
+    const first = edit("first");
+    const second = edit("second");
+    const again = revertNewestStudioPendingEdit();
+    expect(shown).toEqual(["second undone"]);
+    expect(second.reverted()).toBe(true);
+    expect(first.reverted()).toBe(false);
+    expect(revertNewestStudioPendingEdit()).toBeNull();
+    again!();
+    expect(shown).toEqual(["second undone", "second again"]);
+    first.settle();
+    second.settle();
+  });
+
+  it("paints nothing when the newest edit has no revert", async () => {
+    shown.length = 0;
+    const move = edit("move");
+    let saved!: () => void;
+    trackStudioPendingEdit(new Promise<void>((resolve) => (saved = resolve)));
+    expect(revertNewestStudioPendingEdit()).toBeNull();
+    expect(shown).toEqual([]);
+    saved();
+    move.settle();
+    await flushStudioPendingEdits();
+  });
+
+  it("counts what the edit starts inside adopt as that edit, not a newer one", async () => {
+    shown.length = 0;
+    const move = edit("move");
+    let saved!: () => void;
+    const save = move.adopt(() =>
+      trackStudioPendingEdit(new Promise<void>((resolve) => (saved = resolve))),
+    );
+    move.settle(save);
+    revertNewestStudioPendingEdit();
+    expect(shown).toEqual(["move undone"]);
+    saved();
+    await expect(flushStudioPendingEdits()).resolves.toEqual({ status: "clean" });
+    expect(hasStudioPendingEdits()).toBe(false);
+  });
+});
+
+describe("a pending edit whose start throws", () => {
+  it("ends, so undo and export never wait on it", async () => {
+    const edit = beginStudioPendingEdit(null);
+    expect(() =>
+      edit.adopt(() => {
+        throw new Error("The commit threw.");
+      }),
+    ).toThrow("The commit threw.");
+    await expect(flushStudioPendingEdits()).resolves.toEqual({ status: "clean" });
+    expect(hasStudioPendingEdits()).toBe(false);
+  });
+});

package/src/utils/studioPendingEdits.ts

@@ -1,4 +1,5 @@
 import { StudioFileConflictError, type StudioSaveDrainResult } from "./studioSaveDiagnostics";
+import { isTypingTarget } from "./typingTarget";
 
 const STUDIO_FLUSH_PENDING_EDITS_EVENT = "hf-studio-flush-pending-edits";
 
@@ -8,7 +9,10 @@ interface StudioFlushPendingEditsDetail {
 
 export type StudioPendingEditsDrainResult = StudioSaveDrainResult;
 
-const pendingEditPromises = new Set<Promise<unknown>>();
+export type StudioEditRevert = () => () => void;
+
+const pendingEdits = new Map<Promise<unknown>, { revert: StudioEditRevert | null }>();
+let adopting = false;
 
 function waitForPostBlurEffects(): Promise<void> {
   return new Promise((resolve) => setTimeout(resolve, 0));
@@ -29,18 +33,15 @@ function inspectDrainFailures(results: PromiseSettledResult<unknown>[]): {
 
 function focusedField(): HTMLElement | null {
   const active = document.activeElement;
-  return active instanceof HTMLElement &&
-    active.matches('input, textarea, select, [contenteditable="true"], [role="textbox"]')
-    ? active
-    : null;
+  return active instanceof HTMLElement && isTypingTarget(active) ? active : null;
 }
 
 export function hasStudioPendingEdits(): boolean {
-  return pendingEditPromises.size > 0 || focusedField() !== null;
+  return pendingEdits.size > 0 || focusedField() !== null;
 }
 
 export function isStudioEditSaving(): boolean {
-  return pendingEditPromises.size > 0;
+  return pendingEdits.size > 0;
 }
 
 export function afterStudioPendingEdits(run: () => void): () => void {
@@ -48,7 +49,7 @@ export function afterStudioPendingEdits(run: () => void): () => void {
   const check = () => {
     if (!waiting) return;
     if (isStudioEditSaving()) {
-      void Promise.allSettled([...pendingEditPromises]).then(check);
+      void Promise.allSettled([...pendingEdits.keys()]).then(check);
       return;
     }
     waiting = false;
@@ -65,20 +66,61 @@ export function trackStudioPendingEdit(
 ): Promise<unknown> | undefined {
   if (!result) return undefined;
   const promise = Promise.resolve(result);
-  pendingEditPromises.add(promise);
+  if (adopting) return promise;
+  pendingEdits.set(promise, { revert: null });
   promise.then(
-    () => pendingEditPromises.delete(promise),
-    () => pendingEditPromises.delete(promise),
+    () => pendingEdits.delete(promise),
+    () => pendingEdits.delete(promise),
   );
   return promise;
 }
 
+export function trackedStudioEdit<Args extends unknown[], R>(
+  edit: (...args: Args) => R,
+): (...args: Args) => R {
+  return (...args) => {
+    const result = edit(...args);
+    if (result instanceof Promise) trackStudioPendingEdit(result);
+    return result;
+  };
+}
+
+export function beginStudioPendingEdit(revert: StudioEditRevert | null) {
+  let settle!: (saved?: Promise<unknown>) => void;
+  const promise = trackStudioPendingEdit(new Promise<unknown>((resolve) => (settle = resolve)))!;
+  const entry = pendingEdits.get(promise)!;
+  entry.revert = revert;
+  return {
+    settle,
+    reverted: () => entry.revert === null && revert !== null,
+    // Only what `start` registers synchronously is adopted; a registration after an await is a newer edit.
+    adopt<T>(start: () => T): T {
+      adopting = true;
+      try {
+        return start();
+      } catch (error) {
+        settle();
+        throw error;
+      } finally {
+        adopting = false;
+      }
+    },
+  };
+}
+
+export function revertNewestStudioPendingEdit(): (() => void) | null {
+  const newest = [...pendingEdits.values()].at(-1);
+  const revert = newest?.revert;
+  if (!newest || !revert) return null;
+  newest.revert = null;
+  return revert();
+}
+
 export async function flushStudioPendingEdits(): Promise<StudioPendingEditsDrainResult> {
   const active = focusedField();
   if (active) {
     active.blur();
-    // ponytail: Preserve synchronous/microtask blur commits, then cross one task boundary
-    // so React effects triggered by the blur can register their flush listener.
+    // ponytail: keep blur commits, then cross one task so effects the blur runs can add their listener.
     await Promise.resolve();
     await waitForPostBlurEffects();
   }
@@ -86,15 +128,16 @@ export async function flushStudioPendingEdits(): Promise<StudioPendingEditsDrain
   window.dispatchEvent(
     new CustomEvent<StudioFlushPendingEditsDetail>(STUDIO_FLUSH_PENDING_EDITS_EVENT, { detail }),
   );
+  let conflict: StudioFileConflictError | undefined;
   let firstFailure: PromiseRejectedResult | undefined;
-  while (detail.promises.length > 0 || pendingEditPromises.size > 0) {
-    const promises = [...detail.promises, ...pendingEditPromises];
+  while (detail.promises.length > 0 || pendingEdits.size > 0) {
+    const promises = [...detail.promises, ...pendingEdits.keys()];
     detail.promises = [];
-    const results = await Promise.allSettled(promises);
-    const batchFailures = inspectDrainFailures(results);
-    if (batchFailures.conflict) return { status: "conflict", error: batchFailures.conflict };
+    const batchFailures = inspectDrainFailures(await Promise.allSettled(promises));
+    conflict ??= batchFailures.conflict;
     firstFailure ??= batchFailures.firstFailure;
   }
+  if (conflict) return { status: "conflict", error: conflict };
   return firstFailure ? { status: "failed", error: firstFailure.reason } : { status: "clean" };
 }
 

package/src/utils/timelineInspector.test.ts

@@ -4,6 +4,7 @@ import {
   canHideSelections,
   isAudioDomElement,
   isAudioTimelineElement,
+  isMusicSourceElement,
   isMusicTrack,
   resolveBeatSourceTrack,
 } from "./timelineInspector";
@@ -12,9 +13,15 @@ import type { TimelineElement } from "../player";
 // Minimal element factory for tests
 function el(
   overrides: Partial<
-    Pick<TimelineElement, "tag" | "src" | "id" | "domId" | "timelineRole" | "duration">
+    Pick<
+      TimelineElement,
+      "tag" | "src" | "id" | "domId" | "timelineRole" | "duration" | "hasAudio" | "muted"
+    >
   >,
-): Pick<TimelineElement, "tag" | "src" | "id" | "domId" | "timelineRole" | "duration"> {
+): Pick<
+  TimelineElement,
+  "tag" | "src" | "id" | "domId" | "timelineRole" | "duration" | "hasAudio" | "muted"
+> {
   return {
     tag: "audio",
     src: "assets/track.mp3",
@@ -153,3 +160,27 @@ describe("isAudioDomElement / canHideSelections", () => {
     expect(canHideSelections([{ element: el("hf-audio-group") }])).toBe(false);
   });
 });
+
+describe("beat source from a video with sound", () => {
+  const talk = { tag: "video", src: "assets/clip.mp4", hasAudio: true };
+
+  it("counts an audible video as a music source but never a muted or silent one", () => {
+    expect(isMusicSourceElement(el(talk))).toBe(true);
+    expect(isMusicSourceElement(el({ ...talk, muted: true }))).toBe(false);
+    expect(isMusicSourceElement(el({ ...talk, hasAudio: false }))).toBe(false);
+    expect(isAudioTimelineElement(el(talk))).toBe(false);
+  });
+
+  it("takes a video tagged as music as the beat source", () => {
+    const video = el({ ...talk, timelineRole: "music" });
+    expect(isMusicTrack(video)).toBe(true);
+    expect(resolveBeatSourceTrack([video])).toEqual({ element: video, isFallback: false });
+  });
+
+  it("falls back to the longest audible video when there is no audio", () => {
+    const short = el({ ...talk, id: "a", duration: 3 });
+    const long = el({ ...talk, id: "b", duration: 9 });
+    const muted = el({ ...talk, id: "c", duration: 20, muted: true });
+    expect(resolveBeatSourceTrack([short, long, muted])?.element).toBe(long);
+  });
+});