@hyperframes/studio 0.8.113 → 0.8.115

package/src/hooks/useDomSelection.test.ts

@@ -334,3 +334,29 @@ describe("useDomSelection", () => {
     harness.cleanup();
   });
 });
+
+it("reports unchanged marquee membership and one new additive member", () => {
+  const { harness, card, chip } = renderCardAndChip();
+  try {
+    act(() => harness.current().applyDomSelection(card));
+    let receipt!: ReturnType<ReturnType<typeof useDomSelection>["applyMarqueeSelection"]>;
+    act(() => {
+      receipt = harness.current().applyMarqueeSelection([chip], true);
+    });
+    expect(receipt).toEqual({ changed: true, count: 2 });
+    act(() => {
+      receipt = harness.current().applyMarqueeSelection([card, chip], true);
+    });
+    expect(receipt).toEqual({ changed: false, count: 2 });
+    act(() => {
+      receipt = harness.current().applyMarqueeSelection([], true);
+    });
+    expect(receipt).toEqual({ changed: false, count: 2 });
+    act(() => {
+      receipt = harness.current().applyMarqueeSelection([], false);
+    });
+    expect(receipt).toEqual({ changed: true, count: 0 });
+  } finally {
+    harness.cleanup();
+  }
+});

package/src/hooks/useDomSelection.ts

@@ -487,12 +487,13 @@ export function useDomSelection({
     // fallow-ignore-next-line complexity
     (selections: DomEditSelection[], additive: boolean) => {
       logSelect("marquee", { hits: selections.length, additive });
+      const current = domEditSelectionRef.current;
+      const currentGroup = domEditGroupSelectionsRef.current;
       if (selections.length === 0) {
+        const count = seedDomEditGroupWithSelection(currentGroup, current).length;
         if (!additive) applyDomSelection(null, { revealPanel: false });
-        return;
+        return { changed: !additive && count > 0, count: additive ? count : 0 };
       }
-      const current = domEditSelectionRef.current;
-      const currentGroup = domEditGroupSelectionsRef.current;
       let nextGroup: DomEditSelection[];
       if (additive) {
         nextGroup = seedDomEditGroupWithSelection(currentGroup, current);
@@ -507,11 +508,17 @@ export function useDomSelection({
         }
       }
       const nextSelection = additive && current ? current : selections[0];
+      const previous = seedDomEditGroupWithSelection(currentGroup, current);
+      const changed =
+        previous.length !== nextGroup.length ||
+        nextGroup.some((selection) => !domEditSelectionInGroup(previous, selection)) ||
+        !domEditSelectionsTargetSame(current, nextSelection);
       domEditSelectionRef.current = nextSelection;
       domEditGroupSelectionsRef.current = nextGroup;
       setDomEditSelection(nextSelection);
       setDomEditGroupSelections(nextGroup);
       announceTimelineSelection(nextGroup, nextSelection, true);
+      return { changed, count: nextGroup.length };
     },
     [applyDomSelection, announceTimelineSelection],
   );

package/src/hooks/useDomSelectionTypes.ts

@@ -3,6 +3,11 @@ import type { DomEditSelection } from "../components/editor/domEditing";
 import type { SelectElementOptions, TimelineElement } from "../player";
 import type { RightPanelTab } from "../utils/studioHelpers";
 
+export interface DomSelectionResult {
+  changed: boolean;
+  count: number;
+}
+
 export interface ApplyDomSelectionOptions {
   revealPanel?: boolean;
   additive?: boolean;
@@ -85,5 +90,5 @@ export interface UseDomSelectionReturn {
   handleTimelineElementSelect: (element: TimelineElement | null) => Promise<void>;
   refreshDomEditSelectionFromPreview: (selection: DomEditSelection) => Promise<void>;
   refreshDomEditGroupSelectionsFromPreview: (selections: DomEditSelection[]) => Promise<void>;
-  applyMarqueeSelection: (selections: DomEditSelection[], additive: boolean) => void;
+  applyMarqueeSelection: (selections: DomEditSelection[], additive: boolean) => DomSelectionResult;
 }

package/src/hooks/useEnableKeyframes.test.ts

@@ -314,7 +314,7 @@ describe("applyArcKeyframeAtPlayhead", () => {
         ],
         ease: "none",
       },
-      { label: "Add keyframe", softReload: true },
+      { label: "Add keyframe", softReload: true, keyframeAction: "add" },
     );
   });
 
@@ -336,7 +336,7 @@ describe("applyArcKeyframeAtPlayhead", () => {
         duration: 10,
         keyframes: expect.arrayContaining([{ percentage: 25, properties: { x: 25, y: 25 } }]),
       }),
-      { label: "Add keyframe", softReload: true },
+      { label: "Add keyframe", softReload: true, keyframeAction: "add" },
     );
   });
 });

package/src/hooks/useEnableKeyframes.ts

@@ -159,7 +159,7 @@ async function replaceSetWithSingleKeyframe(
       keyframes: [{ percentage: 0, properties: position }],
       ease: setAnim.ease,
     },
-    { label: "Enable keyframes", softReload: true },
+    { label: "Enable keyframes", keyframeAction: "add", softReload: true },
   );
 }
 
@@ -270,6 +270,7 @@ async function extendKeyframedTweenToPlayhead(
     },
     {
       label: "Add keyframe",
+      keyframeAction: "add",
       softReload: true,
       ...commitOverrides,
     },
@@ -377,7 +378,7 @@ export async function promoteSetToKeyframes(
       ],
       ease: setAnim.ease,
     },
-    { label: "Add keyframe", softReload: true },
+    { label: "Add keyframe", keyframeAction: "add", softReload: true },
   );
 }
 
@@ -454,7 +455,7 @@ export async function applyArcKeyframeAtPlayhead(
       }),
       ease: "none",
     },
-    { label: "Add keyframe", softReload: true },
+    { label: "Add keyframe", keyframeAction: "add", softReload: true },
   );
 }
 
@@ -503,6 +504,7 @@ export function useEnableKeyframes(
       enableKeyframesTransactionCounter += 1;
       const coalesceKey = `enable-keyframes:${flatAnim.id}:${enableKeyframesTransactionCounter}`;
       const convertCommitOverrides: Partial<CommitMutationOptions> = {
+        keyframeTelemetry: false,
         skipReload: true,
         coalesceKey,
         coalesceMs: Number.POSITIVE_INFINITY,

package/src/hooks/useExternalFileChangeCoordinator.test.tsx

@@ -143,6 +143,85 @@ describe("external file change coordinator", () => {
     expect(onAcceptedPersistedFileChange).toHaveBeenLastCalledWith("scene.html", ["scene.html"]);
   });
 
+  it("keeps a waiting head edit's thumbnail refresh when a later write replaces it", async () => {
+    let release = () => {};
+    const inFlight = new Promise<void>((resolve) => (release = resolve));
+    const onAcceptedPersistedFileChange = vi.fn();
+    let drains = 0;
+    await mountCoordinator({
+      onAcceptedPersistedFileChange,
+      drainPendingChanges: async () => {
+        if (drains++ === 0) await inFlight;
+        return { status: "clean" as const };
+      },
+    });
+    await act(async () => handler?.({ path: "other.html", content: "a", version: "v1" }));
+    await act(async () => handler?.({ path: "index.html", content: "b", version: "v2" }));
+    await act(async () =>
+      handler?.({
+        path: "index.html",
+        content: "c",
+        version: "v3",
+        affectedCompositions: ["index.html"],
+      }),
+    );
+    await act(async () => release());
+    expect(onAcceptedPersistedFileChange).toHaveBeenLastCalledWith("index.html", null);
+  });
+
+  it("keeps a head edit's thumbnail refresh through a conflict that a later write replaces", async () => {
+    const onAcceptedPersistedFileChange = vi.fn();
+    const conflict = new StudioFileConflictError({
+      filePath: "index.html",
+      currentVersion: "v1",
+      currentContent: "theirs",
+      attemptedContent: "mine",
+    });
+    const { captured } = await mountCoordinator({
+      onAcceptedPersistedFileChange,
+      drainPendingChanges: async () => ({ status: "conflict" as const, error: conflict }),
+    });
+    await act(async () => handler?.({ path: "index.html", content: "head", version: "v1" }));
+    await act(async () =>
+      handler?.({
+        path: "index.html",
+        content: "body",
+        version: "v2",
+        affectedCompositions: ["index.html"],
+      }),
+    );
+    await act(async () => captured.handle?.useExternalFile());
+    expect(onAcceptedPersistedFileChange).toHaveBeenLastCalledWith("index.html", null);
+  });
+
+  it("keeps a held head edit's thumbnail refresh when a later write saves cleanly", async () => {
+    const onAcceptedPersistedFileChange = vi.fn();
+    const conflict = new StudioFileConflictError({
+      filePath: "index.html",
+      currentVersion: "v1",
+      currentContent: "theirs",
+      attemptedContent: "mine",
+    });
+    let drains = 0;
+    await mountCoordinator({
+      onAcceptedPersistedFileChange,
+      drainPendingChanges: async () =>
+        drains++ === 0
+          ? { status: "conflict" as const, error: conflict }
+          : { status: "clean" as const },
+    });
+    await act(async () => handler?.({ path: "index.html", content: "head", version: "v1" }));
+    await act(async () =>
+      handler?.({
+        path: "index.html",
+        content: "body",
+        version: "v2",
+        affectedCompositions: ["index.html"],
+      }),
+    );
+    expect(onAcceptedPersistedFileChange).toHaveBeenLastCalledWith("index.html", null);
+  });
+
   it("does not refresh the tree for a suppressed self-write echo", async () => {
     const refreshFileTree = vi.fn();
     await mountCoordinator({ refreshFileTree });
@@ -333,6 +412,29 @@ describe("external file change coordinator", () => {
     expect(onAcceptedPersistedFileChange).toHaveBeenCalledOnce();
   });
 
+  it("keeps the failed file's payload when a snapshot delete fails for another file", async () => {
+    const { captured } = await mountCoordinator({
+      drainPendingChanges: vi
+        .fn()
+        .mockResolvedValueOnce({ status: "failed" as const, error: new Error("offline") })
+        .mockResolvedValueOnce({ status: "clean" as const }),
+      getPendingCandidate: () => ({ path: "scene.html", content: "studio" }),
+      deleteConflictSnapshot: vi.fn(async () => {
+        throw new Error("delete failed");
+      }),
+    });
+    await act(async () =>
+      handler?.({ path: "scene.html", content: "scene-external", version: "s1" }),
+    );
+    await act(async () =>
+      handler?.({ path: "index.html", content: "index-external", version: "i1" }),
+    );
+    expect(captured.handle?.blocked).toMatchObject({
+      status: "failed",
+      payload: { path: "scene.html", content: "scene-external", version: "s1" },
+    });
+  });
+
   it("restores and overwrites from a durable failed draft", async () => {
     const overwriteConflict = vi.fn(async () => undefined);
     const onAcceptedPersistedFileChange = vi.fn();

package/src/hooks/useExternalFileChangeCoordinator.ts

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState, type MutableRefObject } from "react";
 import {
+  mergeFileChangeAffectedCompositions,
   readFileChangeAffectedCompositions,
   readFileChangeAffectsPreview,
   readFileChangeField,
@@ -163,7 +164,7 @@ export function useExternalFileChangeCoordinator({
   onAcceptedPersistedFileChange,
   refreshFileTree,
 }: ExternalFileChangeCoordinatorOptions): ExternalFileChangeCoordinatorHandle {
-  const [blocked, setBlocked] = useState<ExternalFileChangeBlockedState | null>(null);
+  const [blocked, setBlockedState] = useState<ExternalFileChangeBlockedState | null>(null);
   const generationRef = useRef(0);
   const mountedRef = useRef(true);
   const lastEventIdentityRef = useRef<string | null>(null);
@@ -172,6 +173,14 @@ export function useExternalFileChangeCoordinator({
   const drainingRef = useRef(false);
   const pendingPayloadRef = useRef<{ payload: unknown } | null>(null);
   blockedRef.current = blocked;
+  // A newer blocked change replaces the held one, so it inherits the thumbnails the held one owed.
+  const setBlocked = useCallback((next: ExternalFileChangeBlockedState | null) => {
+    setBlockedState((held) =>
+      next && held
+        ? { ...next, payload: mergeFileChangeAffectedCompositions(held.payload, next.payload) }
+        : next,
+    );
+  }, []);
 
   useEffect(() => {
     mountedRef.current = true;
@@ -185,7 +194,7 @@ export function useExternalFileChangeCoordinator({
     generationRef.current += 1;
     setBlocked(null);
     lastEventIdentityRef.current = null;
-  }, [projectId, activeCompPath]);
+  }, [projectId, activeCompPath, setBlocked]);
 
   useEffect(() => {
     if (!projectId || !recoveryFilePath || !loadConflictSnapshot) return;
@@ -229,7 +238,7 @@ export function useExternalFileChangeCoordinator({
     return () => {
       cancelled = true;
     };
-  }, [loadConflictSnapshot, projectId, recoveryFilePath]);
+  }, [loadConflictSnapshot, projectId, recoveryFilePath, setBlocked]);
 
   const reloadAcceptedGeneration = useCallback(
     (path: string, affectsPreview = true) => {
@@ -275,14 +284,22 @@ export function useExternalFileChangeCoordinator({
             await deleteConflictSnapshot(projectId!, path);
           } catch (error) {
             if (mountedRef.current && generation === generationRef.current) {
-              setBlocked({ ...previousBlocked, generation, error });
+              setBlocked({
+                ...previousBlocked,
+                generation,
+                error,
+                payload: mergeFileChangeAffectedCompositions(payload, previousBlocked.payload),
+              });
             }
             return;
           }
         }
         if (!mountedRef.current || generation !== generationRef.current) return;
         setBlocked(null);
-        onAcceptedPersistedFileChange(path, readFileChangeAffectedCompositions(payload));
+        const owed = previousBlocked
+          ? mergeFileChangeAffectedCompositions(previousBlocked.payload, payload)
+          : payload;
+        onAcceptedPersistedFileChange(path, readFileChangeAffectedCompositions(owed));
         reloadAcceptedGeneration(path, readFileChangeAffectsPreview(payload));
         return;
       }
@@ -344,6 +361,7 @@ export function useExternalFileChangeCoordinator({
     },
     [
       drainPendingChanges,
+      setBlocked,
       projectId,
       deleteConflictSnapshot,
       getPendingCandidate,
@@ -419,7 +437,12 @@ export function useExternalFileChangeCoordinator({
         waiting != null &&
         readFileChangeAffectsPreview(waiting) &&
         !readFileChangeAffectsPreview(payload);
-      if (!waitingChangeOutranksThis) pendingPayloadRef.current = { payload };
+      if (!waitingChangeOutranksThis) {
+        pendingPayloadRef.current = {
+          payload:
+            waiting == null ? payload : mergeFileChangeAffectedCompositions(waiting, payload),
+        };
+      }
       void startDrainLoop();
     },
     [projectId, pendingTimelineEditPathRef, startDrainLoop, onAcceptedPersistedFileChange],
@@ -469,6 +492,7 @@ export function useExternalFileChangeCoordinator({
     },
     [
       deleteConflictSnapshot,
+      setBlocked,
       discardPendingChanges,
       onUseExternalFile,
       onAcceptedPersistedFileChange,
@@ -527,6 +551,7 @@ export function useExternalFileChangeCoordinator({
     reloadAcceptedGeneration(conflict.filePath);
   }, [
     deleteConflictSnapshot,
+    setBlocked,
     discardPendingChanges,
     overwriteConflict,
     projectId,

package/src/hooks/useFrameCapture.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef, type MouseEvent } from "react";
+import { useMemo, useState, useCallback, useRef, type MouseEvent } from "react";
 import { useMountEffect } from "./useMountEffect";
 import { liveTime, usePlayerStore } from "../player";
 import { buildFrameCaptureFilename, buildFrameCaptureUrl } from "../utils/frameCapture";
@@ -34,8 +34,10 @@ export function useFrameCapture({
     return isPlaying ? livePlayheadRef.current : currentTime;
   }, []);
 
+  const [captureStamp, setCaptureStamp] = useState(Date.now);
   const refreshCaptureFrameTime = useCallback(() => {
     setCaptureFrameTime(playheadTime());
+    setCaptureStamp(Date.now());
   }, [playheadTime]);
 
   const handleCaptureFrameClick = useCallback(
@@ -103,13 +105,18 @@ export function useFrameCapture({
     [activeCompPath, playheadTime, projectId, showToast, waitForPendingDomEditSaves],
   );
 
-  const captureFrameHref = projectId
-    ? buildFrameCaptureUrl({
-        projectId,
-        compositionPath: activeCompPath,
-        currentTime: captureFrameTime,
-      })
-    : "#";
+  const captureFrameHref = useMemo(
+    () =>
+      projectId
+        ? buildFrameCaptureUrl({
+            projectId,
+            compositionPath: activeCompPath,
+            currentTime: captureFrameTime,
+            version: captureStamp,
+          })
+        : "#",
+    [projectId, activeCompPath, captureFrameTime, captureStamp],
+  );
   const captureFrameFilename = buildFrameCaptureFilename(activeCompPath, captureFrameTime);
 
   return {