@hyperframes/studio 0.8.105 → 0.8.107

package/src/utils/gsapUndoRestore.browser.test.ts

@@ -0,0 +1,94 @@
+// Real Chrome: the box GSAP and a stylesheet translate produce together is what no DOM emulation computes.
+import { mkdtempSync, readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+import puppeteer, { type Browser } from "puppeteer-core";
+import { build } from "vite";
+import { afterAll, beforeAll, expect, it } from "vitest";
+import { findSystemChrome } from "../../vite.browser";
+import { writeFixture } from "../../tests/e2e/edit-accuracy/grid.mjs";
+
+const require = createRequire(import.meta.url);
+const CROP = "inset(0px 40px 0px 0px)";
+let browser: Browser;
+let undoBundle: string;
+
+beforeAll(async () => {
+  const executablePath = findSystemChrome();
+  if (!executablePath) throw new Error("no Chrome found: set HYPERFRAMES_BROWSER_PATH");
+  browser = await puppeteer.launch({ executablePath, headless: true, args: ["--no-sandbox"] });
+  const out = await build({
+    configFile: false,
+    logLevel: "silent",
+    resolve: {
+      alias: { canvas: fileURLToPath(new URL("../shims/canvasBrowserStub.js", import.meta.url)) },
+    },
+    build: {
+      write: false,
+      minify: false,
+      lib: {
+        entry: fileURLToPath(new URL("./gsapUndoRestore.ts", import.meta.url)),
+        formats: ["iife"],
+        name: "hfUndo",
+      },
+    },
+  });
+  undoBundle = (Array.isArray(out) ? out[0]! : (out as { output: [{ code: string }] })).output[0]
+    .code;
+}, 60_000);
+
+afterAll(() => browser?.close());
+
+it.each([
+  { gsap: "hold", placement: "px", rotation: 0 },
+  { gsap: "tween", placement: "px", rotation: 0 },
+  { gsap: "tween", placement: "xpercent", rotation: 30 },
+])("an undone crop leaves a $gsap $placement r$rotation layer where it was", async (spec) => {
+  const dir = join(mkdtempSync(join(tmpdir(), "undo-gsap-")), "case");
+  writeFixture({ gesture: "crop", nesting: "root", zoom: 100, ...spec }, dir);
+  const restored = readFileSync(join(dir, "index.html"), "utf8");
+  const previous = restored.replace(
+    `<div id="target"`,
+    `<div id="target" style="clip-path: ${CROP}"`,
+  );
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1920, height: 1080 });
+  await page.setRequestInterception(true);
+  page.on("request", (request) =>
+    request.url().endsWith("/gsap.min.js")
+      ? request.respond({ body: readFileSync(require.resolve("gsap/dist/gsap.min.js"), "utf8") })
+      : request.continue(),
+  );
+  await page.setContent(restored, { waitUntil: "load" });
+  await page.evaluate(readFileSync(require.resolve("@hyperframes/core/runtime"), "utf8"));
+  await page.waitForFunction(() => "__player" in window);
+  await page.evaluate(undoBundle);
+
+  const box = () =>
+    page.evaluate(() => {
+      const { left, top, width, height } = document
+        .getElementById("target")!
+        .getBoundingClientRect();
+      return [left, top, width, height].map((n) => Math.round(n * 100) / 100);
+    });
+  await page.evaluate(() =>
+    (window as unknown as { __player: { seek(t: number): void } }).__player.seek(1),
+  );
+  const before = await box();
+  const outcome = await page.evaluate(
+    (files, crop) => {
+      document.getElementById("target")!.style.setProperty("clip-path", crop);
+      const undo = (window as unknown as { hfUndo: typeof import("./gsapUndoRestore") }).hfUndo;
+      const iframe = { contentDocument: document, contentWindow: window } as HTMLIFrameElement;
+      return undo.applyUndoRestoreToPreview(iframe, "index.html", files, 1, () => {});
+    },
+    { "index.html": { previous, restored } },
+    CROP,
+  );
+
+  expect(outcome).toBe("soft");
+  expect(await box()).toEqual(before);
+  await page.close();
+});

package/src/utils/gsapUndoRestore.test.ts

@@ -1,7 +1,14 @@
 // @vitest-environment happy-dom
 
 import { describe, it, expect, vi } from "vitest";
-import { applyUndoRestoreToPreview, diffSoftReloadableRestore } from "./gsapUndoRestore";
+import {
+  applyUndoRestoreToPreview,
+  diffSoftReloadableRestore,
+  showRestoreInPlace,
+} from "./gsapUndoRestore";
+import { applyPatch } from "./sourcePatcher";
+import { beginStudioManualEditGesture } from "../components/editor/manualEdits";
+import { writePlainMove, writeTranslatePx } from "../components/editor/plainTranslate";
 
 // ── Bug 2: undo/redo restore soft-apply ──────────────────────────────────────
 
@@ -281,6 +288,25 @@ describe("applyUndoRestoreToPreview", () => {
     );
   });
 
+  it("full-reloads a style restore on a GSAP-parsed element when the file has two scripts", () => {
+    const scripts = [
+      `<script>window.__timelines["root"]=gsap.timeline().to("#a",{x:1});</script>`,
+      `<script>window.__timelines["captions"]=gsap.timeline().to("#a",{y:1});</script>`,
+    ].join("");
+    const { iframe, doc } = buildLiveIframe(`<div id="a" style="z-index: 8">t</div>${scripts}`);
+    Object.assign(doc.getElementById("a")!, { _gsap: {} });
+    const reloadPreview = vi.fn();
+    const files = {
+      [ROOT]: {
+        previous: wrap(`<div id="a" style="z-index: 8">t</div>${scripts}`),
+        restored: wrap(`<div id="a" style="z-index: 3">t</div>${scripts}`),
+      },
+    };
+
+    expect(applyUndoRestoreToPreview(iframe, ROOT, files, 3, reloadPreview)).toBe("full");
+    expect(reloadPreview).toHaveBeenCalledTimes(1);
+  });
+
   it("full-reloads a multi-file restore", () => {
     const { iframe } = buildLiveIframe(`<div id="a">t</div>`);
     const reloadPreview = vi.fn();
@@ -420,3 +446,121 @@ describe("applyUndoRestoreToPreview", () => {
     expect(reloadPreview).toHaveBeenCalledTimes(1);
   });
 });
+
+describe("an undo that lands while the layer is being dragged", () => {
+  const ROOT = "index.html";
+  const undone = `<div id="a" style="width: 120px; translate: 90px 60px" data-start="2" data-hf-studio-original-inline-translate="">t</div>`;
+  const restored = wrap(`<div id="a" style="width: 100px" data-start="1">t</div>`);
+  const files = { [ROOT]: { previous: wrap(undone), restored } };
+  const saveDrop = (el: HTMLElement, file: string) =>
+    writePlainMove(el, { x: 20, y: 110 }).reduce((html, op) => applyPatch(html, "a", op), file);
+
+  function dragging(drag: boolean) {
+    const { iframe, doc } = buildLiveIframe(undone);
+    const el = doc.getElementById("a")!;
+    if (drag) beginStudioManualEditGesture(el, "move");
+    if (drag) writeTranslatePx(el, { x: 70, y: 110 });
+    else el.style.setProperty("opacity", "0.5");
+    applyUndoRestoreToPreview(iframe, ROOT, files, 3, vi.fn());
+    return el;
+  }
+
+  it("keeps the translate the drag is drawing and reverts the rest", () => {
+    const el = dragging(true);
+
+    expect(el.style.getPropertyValue("translate")).toBe("70px 110px");
+    expect(el.style.getPropertyValue("width")).toBe("100px");
+    expect(el.getAttribute("data-start")).toBe("1");
+    expect(el.hasAttribute("data-hf-studio-manual-edit-gesture")).toBe(true);
+  });
+
+  it("saves the drop onto the undone file, the same bytes as dragging the undone layer", () => {
+    const el = dragging(true);
+    const fresh = new DOMParser().parseFromString(restored, "text/html").getElementById("a")!;
+
+    const saved = saveDrop(el, restored);
+
+    expect(saved).toBe(saveDrop(fresh, restored));
+    expect(saved).toContain("width: 100px; translate: 20px 110px");
+    expect(saved).not.toContain("120px");
+  });
+
+  it("keeps the box where it is when the press has not moved it yet", () => {
+    const { iframe, doc } = buildLiveIframe(undone);
+    const el = doc.getElementById("a")!;
+    beginStudioManualEditGesture(el, "move");
+
+    applyUndoRestoreToPreview(iframe, ROOT, files, 3, vi.fn());
+
+    expect(el.style.getPropertyValue("translate")).toBe("90px 60px");
+    expect(el.style.getPropertyValue("width")).toBe("100px");
+  });
+
+  it("reverts the translate under a gesture that draws nothing, such as a text edit", () => {
+    const { iframe, doc } = buildLiveIframe(undone);
+    const el = doc.getElementById("a")!;
+    beginStudioManualEditGesture(el, "edit");
+
+    applyUndoRestoreToPreview(iframe, ROOT, files, 3, vi.fn());
+
+    expect(el.style.getPropertyValue("translate")).toBe("");
+    expect(el.hasAttribute("data-hf-studio-manual-edit-gesture")).toBe(true);
+  });
+
+  it("keeps the drag's translate when the undo is shown in place", () => {
+    const { iframe, doc } = buildLiveIframe(undone);
+    const el = doc.getElementById("a")!;
+    beginStudioManualEditGesture(el, "move");
+    writeTranslatePx(el, { x: 70, y: 110 });
+
+    expect(showRestoreInPlace(iframe, ROOT, files, 3)).not.toBeNull();
+
+    expect(el.style.getPropertyValue("translate")).toBe("70px 110px");
+    expect(el.style.getPropertyValue("width")).toBe("100px");
+  });
+
+  it("keeps a drag that started after the undo was shown when the undo is put back", () => {
+    const { iframe, doc } = buildLiveIframe(undone);
+    const el = doc.getElementById("a")!;
+    const putBack = showRestoreInPlace(iframe, ROOT, files, 3)!;
+    beginStudioManualEditGesture(el, "move");
+    writeTranslatePx(el, { x: 70, y: 110 });
+
+    putBack(3);
+
+    expect(el.style.getPropertyValue("translate")).toBe("70px 110px");
+    expect(el.style.getPropertyValue("width")).toBe("120px");
+  });
+
+  it("keeps the drag's translate when the undo re-runs a GSAP script", () => {
+    const script = (extra: string) =>
+      `<script>window.__timelines["root"]=gsap.timeline();${extra}</script>`;
+    const layer = `<div id="a" data-hf-studio-path-offset="true" style="translate: 40px 30px">t</div>`;
+    const { iframe, contentWindow, doc } = buildLiveIframe(
+      `${layer}${script("tl.set('#b',{x:1});")}`,
+    );
+    Object.assign(contentWindow.gsap, { set: () => {} });
+    const el = doc.getElementById("a")!;
+    beginStudioManualEditGesture(el, "move");
+    writeTranslatePx(el, { x: 70, y: 110 });
+    const scripted = {
+      [ROOT]: {
+        previous: wrap(`<div id="a">t</div>${script("tl.set('#b',{x:1});")}`),
+        restored: wrap(`<div id="a">t</div>${script("")}`),
+      },
+    };
+
+    expect(applyUndoRestoreToPreview(iframe, ROOT, scripted, 3, vi.fn())).toBe("soft");
+
+    expect(el.style.getPropertyValue("translate")).toBe("70px 110px");
+  });
+
+  it("restores a layer no gesture is drawing exactly as before", () => {
+    const el = dragging(false);
+    const want = new DOMParser().parseFromString(restored, "text/html").getElementById("a")!;
+
+    expect(el.getAttributeNames().map((n) => [n, el.getAttribute(n)])).toEqual(
+      want.getAttributeNames().map((n) => [n, want.getAttribute(n)]),
+    );
+  });
+});

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/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, """)

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

@@ -3,7 +3,9 @@ import { describe, expect, it, vi } from "vitest";
 import {
   addStudioPendingEditFlushListener,
   flushStudioPendingEdits,
+  hasStudioPendingEdits,
   trackStudioPendingEdit,
+  trackedStudioEdit,
 } from "./studioPendingEdits";
 import { StudioFileConflictError } from "./studioSaveDiagnostics";
 
@@ -36,6 +38,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 +166,48 @@ 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);
+  });
+});