@hyperframes/studio 0.7.55 → 0.7.57

package/src/hooks/useDomEditTextCommits.ts

@@ -174,7 +174,11 @@ export function useDomEditTextCommits({
       let editedElement: HTMLElement | null = null;
       let previousInlineValue: string | null = null;
       const operations = buildDomStyleCommitOperations(property, value, isImageBackgroundCommit);
-      const skipRefresh = property !== "z-index";
+      // Inline-style commits never full-reload the preview (that blanks the iframe
+      // until it re-renders): the live element was already mutated optimistically in
+      // apply(). z-index is no exception — setting `element.style.zIndex` restacks the
+      // element in-browser immediately, so a reload would only cost a black blink.
+      const skipRefresh = true;
 
       await runDomEditCommit({
         capture: () => {
@@ -305,6 +309,7 @@ export function useDomEditTextCommits({
       nextTextFields: DomEditTextField[],
       options?: { importedFont?: ImportedFontAsset | null },
     ) => {
+      const isLatestTextCommit = bumpDomEditCommitVersion(domTextCommitVersionRef);
       const textCommit = planDomTextCommit(
         selection.textFields,
         nextTextFields,
@@ -344,14 +349,14 @@ export function useDomEditTextCommits({
               : undefined,
           });
         },
-        shouldRevert: () => true,
+        shouldRevert: () => isLatestTextCommit(),
         revert: () => {
           if (!editedElement || previousInnerHtml === null) return;
           editedElement.innerHTML = previousInnerHtml;
         },
         onError: (error) =>
           reportDomEditPersistFailure(selection, textCommit.operations, error, showToast),
-        shouldResync: () => true,
+        shouldResync: isLatestTextCommit,
         resync: () =>
           resyncDomTextSelectionFromPreview(
             doc,

package/src/hooks/useDomEditWiring.ts

@@ -11,7 +11,6 @@ import { useCallback, useEffect, useRef } from "react";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { STUDIO_GSAP_PANEL_ENABLED } from "../components/editor/manualEditingAvailability";
 import { usePlayerStore } from "../player";
-import { resolveTimelineIdForSelection } from "../utils/studioHelpers";
 import { useDomEditPreviewSync } from "./useDomEditPreviewSync";
 import { useGsapAnimationsForElement, usePopulateKeyframeCacheForFile } from "./useGsapTweenCache";
 import { useGsapAnimationFetchFallback } from "./useGsapAnimationFetchFallback";
@@ -171,14 +170,13 @@ export function useDomEditWiring({
 
   useEffect(() => {
     if (!domEditSelection?.id) return;
-    const { selectedElementId, elements, setSelectionAnchor } = usePlayerStore.getState();
-    // Resolve through the canonical resolver (source-file + ancestor + active-comp
-    // fallback) rather than a narrow domId/id match, so a sub-composition selection
-    // maps to the same clip the rest of the selection pipeline picks. Use the
-    // anchor-only setter: this is a DOM->store echo and must not collapse a group.
-    const key = resolveTimelineIdForSelection(domEditSelection, elements, activeCompPath);
-    if (key && key !== selectedElementId) setSelectionAnchor(key);
-  }, [domEditSelection, activeCompPath]);
+    const { selectedElementId, elements, setSelectedElementId } = usePlayerStore.getState();
+    const matchKey = elements.find(
+      (el) => el.domId === domEditSelection.id || el.id === domEditSelection.id,
+    );
+    const key = matchKey ? (matchKey.key ?? matchKey.id) : null;
+    if (key && key !== selectedElementId) setSelectedElementId(key);
+  }, [domEditSelection?.id]);
 
   // ── GSAP cache sync ──
 

package/src/hooks/useDomGeometryCommits.ts

@@ -61,14 +61,29 @@ export function useDomGeometryCommits({
   );
 
   const handleDomBoxSizeCommit = useCallback(
-    (selection: DomEditSelection, next: { width: number; height: number }) => {
+    (
+      selection: DomEditSelection,
+      next: { width: number; height: number },
+      offset?: { x: number; y: number },
+    ) => {
       if (isElementGsapTargeted(previewIframeRef.current, selection.element)) {
         const error = new Error(GSAP_CSS_FALLBACK_BLOCKED_MESSAGE);
         showToast(error.message, "error");
         return Promise.reject(error);
       }
       applyStudioBoxSize(selection.element, next);
-      return commitPositionPatchToHtml(selection, buildBoxSizePatches(selection.element), {
+      // Anchored-corner resize (NW/NE/SW) also moves the element to keep the
+      // opposite corner fixed. Apply the offset and emit BOTH patch sets in a
+      // SINGLE commit: one persist = one undo entry, and there is no
+      // intermediate re-stamp where the new size is in source but the anchor
+      // offset is not (that frame was the release "jump"). Both builders read
+      // the already-mutated live element, so concatenation is safe.
+      const patches = buildBoxSizePatches(selection.element);
+      if (offset) {
+        applyStudioPathOffset(selection.element, offset);
+        patches.push(...buildPathOffsetPatches(selection.element));
+      }
+      return commitPositionPatchToHtml(selection, patches, {
         label: "Resize layer box",
         coalesceKey: `box-size:${getDomEditTargetKey(selection)}`,
       });

package/src/hooks/useDomSelection.test.ts

@@ -2,9 +2,7 @@
 
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import type { TimelineElement } from "../player";
-import { usePlayerStore } from "../player/store/playerStore";
+import { describe, expect, it, vi } from "vitest";
 import { installReactActEnvironment, makeSelection } from "./domSelectionTestHarness";
 import { useDomSelection } from "./useDomSelection";
 
@@ -14,7 +12,6 @@ interface HarnessProps {
   activeCompPath: string | null;
   projectId: string | null;
   refreshKey: number;
-  timelineElements?: TimelineElement[];
 }
 
 function renderHarness(initialProps: HarnessProps): {
@@ -35,7 +32,7 @@ function renderHarness(initialProps: HarnessProps): {
       compIdToSrc: new Map(),
       captionEditMode: false,
       previewIframeRef: { current: null },
-      timelineElements: props.timelineElements ?? [],
+      timelineElements: [],
       setSelectedTimelineElementId: vi.fn(),
       setRightCollapsed: vi.fn(),
       setRightPanelTab: vi.fn(),
@@ -67,10 +64,6 @@ function renderHarness(initialProps: HarnessProps): {
   };
 }
 
-afterEach(() => {
-  usePlayerStore.getState().reset();
-});
-
 function setupSelectedHarness() {
   const element = document.createElement("div");
   element.id = "headline";
@@ -138,31 +131,4 @@ describe("useDomSelection", () => {
     expect(harness.current().domEditSelection).toBe(selection);
     harness.cleanup();
   });
-
-  it("keeps preview marquee selections mirrored to the full timeline selection set", () => {
-    const first = document.createElement("div");
-    first.id = "clip-1";
-    const second = document.createElement("div");
-    second.id = "clip-2";
-    const firstSelection = makeSelection("First", first);
-    const secondSelection = makeSelection("Second", second);
-    const harness = renderHarness({
-      activeCompPath: "intro.html",
-      projectId: "project-1",
-      refreshKey: 0,
-      timelineElements: [
-        { id: "clip-1", domId: "clip-1", tag: "div", start: 0, duration: 1, track: 0 },
-        { id: "clip-2", domId: "clip-2", tag: "div", start: 1, duration: 1, track: 1 },
-      ],
-    });
-
-    act(() => harness.current().applyMarqueeSelection([secondSelection, firstSelection], false));
-
-    const state = usePlayerStore.getState();
-    expect([...state.selectedElementIds]).toEqual(["clip-2", "clip-1"]);
-    expect(state.selectedElementId).toBe("clip-2");
-    expect(harness.current().domEditGroupSelections).toHaveLength(2);
-    expect(harness.current().domEditSelection).toBe(secondSelection);
-    harness.cleanup();
-  });
 });

package/src/hooks/useDomSelection.ts

@@ -1,10 +1,14 @@
 import { useState, useCallback, useRef, useEffect } from "react";
-import type { TimelineElement } from "../player";
+import type { SelectElementOptions, TimelineElement } from "../player";
 import {
   getAllPreviewTargetsFromPointer,
   getPreviewTargetFromPointer,
 } from "../utils/studioPreviewHelpers";
-import { resolveTimelineIdForSelection, type RightPanelTab } from "../utils/studioHelpers";
+import {
+  findMatchingTimelineElementId,
+  findTimelineIdByAncestor,
+  type RightPanelTab,
+} from "../utils/studioHelpers";
 import {
   domEditSelectionsTargetSame,
   domEditSelectionInGroup,
@@ -20,7 +24,6 @@ import {
   type DomEditSelection,
 } from "../components/editor/domEditing";
 import { reapplyPositionEditsAfterSeek } from "../components/editor/manualEdits";
-import { usePlayerStore } from "../player/store/playerStore";
 
 // ── Types ──
 
@@ -44,7 +47,7 @@ export interface UseDomSelectionParams {
   captionEditMode: boolean;
   previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
   timelineElements: TimelineElement[];
-  setSelectedTimelineElementId: (id: string | null) => void;
+  setSelectedTimelineElementId: (id: string | null, options?: SelectElementOptions) => void;
   setRightCollapsed: (collapsed: boolean) => void;
   setRightPanelTab: (tab: RightPanelTab) => void;
   previewIframe: HTMLIFrameElement | null;
@@ -92,6 +95,7 @@ export interface UseDomSelectionReturn {
   ) => Promise<DomEditSelection | null>;
   handleTimelineElementSelect: (element: TimelineElement | null) => Promise<void>;
   refreshDomEditSelectionFromPreview: (selection: DomEditSelection) => Promise<void>;
+  refreshDomEditGroupSelectionsFromPreview: (selections: DomEditSelection[]) => Promise<void>;
   applyMarqueeSelection: (selections: DomEditSelection[], additive: boolean) => void;
 }
 
@@ -206,42 +210,27 @@ export function useDomSelection({
       if (nextSelection) {
         if (options?.revealPanel !== false) {
           setRightCollapsed(false);
-          // Keep the Variables tab in place — selecting elements is part of
-          // the bind flow there; yanking to Design would lose the context.
+          // Keep the Variables tab in place — selecting elements is part of the bind
+          // flow there; yanking to Design would lose the context.
           if (rightPanelTabRef.current !== "variables") {
             setRightPanelTab("design");
           }
         }
-        // Mirror the whole DOM group to the store so it stays the single source of
-        // truth: a single selection collapses to one id; a preserved group (echo
-        // during a gesture) keeps every member instead of shrinking to the anchor.
-        const anchorId = resolveTimelineIdForSelection(
-          nextSelection,
-          timelineElements,
-          activeCompPath,
-        );
-        const groupIds = nextGroup
-          .map((selection) =>
-            resolveTimelineIdForSelection(selection, timelineElements, activeCompPath),
-          )
-          .filter((id): id is string => Boolean(id));
-        if (groupIds.length > 0) {
-          usePlayerStore.getState().setSelection(groupIds, anchorId);
-        } else {
-          setSelectedTimelineElementId(anchorId);
-        }
+        const nextSelectedTimelineId =
+          findMatchingTimelineElementId(nextSelection, timelineElements) ??
+          findTimelineIdByAncestor(
+            nextSelection.element,
+            timelineElements,
+            nextSelection.sourceFile || "index.html",
+          );
+        // Late marquee notify: a primary already in the live set must not collapse it.
+        setSelectedTimelineElementId(nextSelectedTimelineId, { preserveSet: true });
         return;
       }
 
       setSelectedTimelineElementId(null);
     },
-    [
-      setSelectedTimelineElementId,
-      timelineElements,
-      setRightCollapsed,
-      setRightPanelTab,
-      activeCompPath,
-    ],
+    [setSelectedTimelineElementId, timelineElements, setRightCollapsed, setRightPanelTab],
   );
 
   const clearDomSelection = useCallback(() => {
@@ -424,6 +413,55 @@ export function useDomSelection({
     [activeCompPath, applyDomSelection, buildDomSelectionFromTarget, previewIframeRef],
   );
 
+  const refreshDomEditGroupSelectionsFromPreview = useCallback(
+    // fallow-ignore-next-line complexity
+    async (selections: DomEditSelection[]) => {
+      const iframe = previewIframeRef.current;
+      let doc: Document | null = null;
+      try {
+        doc = iframe?.contentDocument ?? null;
+      } catch {
+        return;
+      }
+      if (!doc) return;
+
+      const nextGroup: DomEditSelection[] = [];
+      for (const selection of selections) {
+        const element = findElementForSelection(doc, selection, activeCompPath);
+        if (!element) continue;
+        const nextSelection = await buildDomSelectionFromTarget(element);
+        if (nextSelection) nextGroup.push(nextSelection);
+      }
+      if (nextGroup.length === 0) return;
+
+      const currentSelection = domEditSelectionRef.current;
+      const nextSelection =
+        nextGroup.find((selection) => domEditSelectionsTargetSame(selection, currentSelection)) ??
+        nextGroup[0] ??
+        null;
+
+      domEditSelectionRef.current = nextSelection;
+      domEditGroupSelectionsRef.current = nextGroup;
+      setDomEditSelection(nextSelection);
+      setDomEditGroupSelections(nextGroup);
+
+      if (nextSelection) {
+        setSelectedTimelineElementId(
+          findMatchingTimelineElementId(nextSelection, timelineElements),
+        );
+      } else {
+        setSelectedTimelineElementId(null);
+      }
+    },
+    [
+      activeCompPath,
+      buildDomSelectionFromTarget,
+      setSelectedTimelineElementId,
+      timelineElements,
+      previewIframeRef,
+    ],
+  );
+
   // ── Effects ──
 
   // Clear hover unconditionally on composition/project/preview change
@@ -471,8 +509,7 @@ export function useDomSelection({
   const applyMarqueeSelection = useCallback(
     // fallow-ignore-next-line complexity
     (selections: DomEditSelection[], additive: boolean) => {
-      // Honor the inspector-panels kill switch like applyDomSelection does, so
-      // marquee can't land selections while the inspector UI is suppressed.
+      // Honor the inspector-panels kill switch like applyDomSelection does.
       if (!STUDIO_INSPECTOR_PANELS_ENABLED) {
         domEditSelectionRef.current = null;
         domEditGroupSelectionsRef.current = [];
@@ -493,8 +530,7 @@ export function useDomSelection({
           if (!domEditSelectionInGroup(nextGroup, s)) nextGroup = [...nextGroup, s];
         }
       } else {
-        // Dedupe by target: under select-as-unit several marquee'd members collapse
-        // to the same group, which must count as one selection, not many duplicates.
+        // Dedupe by target: select-as-unit collapses marquee'd members to one group.
         nextGroup = [];
         for (const s of selections) {
           if (!domEditSelectionInGroup(nextGroup, s)) nextGroup.push(s);
@@ -505,23 +541,16 @@ export function useDomSelection({
       domEditGroupSelectionsRef.current = nextGroup;
       setDomEditSelection(nextSelection);
       setDomEditGroupSelections(nextGroup);
-      const nextTimelineId = resolveTimelineIdForSelection(
-        nextSelection,
-        timelineElements,
-        activeCompPath,
-      );
-      const nextTimelineIds = nextGroup
-        .map((selection) =>
-          resolveTimelineIdForSelection(selection, timelineElements, activeCompPath),
-        )
-        .filter((id): id is string => Boolean(id));
-      if (nextTimelineIds.length > 0) {
-        usePlayerStore.getState().setSelection(nextTimelineIds, nextTimelineId);
-      } else {
-        setSelectedTimelineElementId(null);
-      }
+      const nextTimelineId =
+        findMatchingTimelineElementId(nextSelection, timelineElements) ??
+        findTimelineIdByAncestor(
+          nextSelection.element,
+          timelineElements,
+          nextSelection.sourceFile || "index.html",
+        );
+      setSelectedTimelineElementId(nextTimelineId);
     },
-    [applyDomSelection, timelineElements, setSelectedTimelineElementId, activeCompPath],
+    [applyDomSelection, timelineElements, setSelectedTimelineElementId],
   );
 
   // Disabled inspector effect
@@ -558,6 +587,7 @@ export function useDomSelection({
     buildDomSelectionForTimelineElement,
     handleTimelineElementSelect,
     refreshDomEditSelectionFromPreview,
+    refreshDomEditGroupSelectionsFromPreview,
     applyMarqueeSelection,
   };
 }

package/src/hooks/useDomSelectionSelectionGuards.test.ts

@@ -0,0 +1,276 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { installReactActEnvironment, makeSelection } from "./domSelectionTestHarness";
+import type { DomEditSelection } from "../components/editor/domEditing";
+import type { SelectElementOptions, TimelineElement } from "../player";
+import { usePlayerStore } from "../player";
+
+installReactActEnvironment();
+
+// ── Module mocks ──
+// Control the async selection-resolution ordering so the race guard can be
+// exercised deterministically, and neutralise the DOM re-apply side effect.
+vi.mock("../components/editor/manualEdits", () => ({
+  reapplyPositionEditsAfterSeek: () => undefined,
+}));
+
+const deferreds = new Map<string, { promise: Promise<DomEditSelection>; resolve: () => void }>();
+
+function deferredFor(el: HTMLElement): Promise<DomEditSelection> {
+  const id = el.id;
+  let resolveFn: () => void = () => undefined;
+  const promise = new Promise<DomEditSelection>((resolve) => {
+    resolveFn = () => resolve(makeSelection(id.toUpperCase(), el));
+  });
+  deferreds.set(id, { promise, resolve: resolveFn });
+  return promise;
+}
+
+vi.mock("../components/editor/domEditing", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../components/editor/domEditing")>();
+  return {
+    ...actual,
+    findElementForTimelineElement: (doc: Document, element: { id?: string }) =>
+      element.id ? doc.getElementById(element.id) : null,
+    resolveDomEditSelection: (startEl: HTMLElement | null) =>
+      startEl ? deferredFor(startEl) : Promise.resolve(null),
+  };
+});
+
+// Imported after the mocks so the hook picks up the mocked modules.
+const { useDomSelection } = await import("./useDomSelection");
+
+interface HarnessProps {
+  rightPanelTab: "design" | "variables";
+  setRightPanelTab: (tab: "design" | "variables") => void;
+  iframe: HTMLIFrameElement | null;
+  timelineElements: TimelineElement[];
+  setSelectedTimelineElementId?: (id: string | null, options?: SelectElementOptions) => void;
+}
+
+function renderHarness(props: HarnessProps) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  let currentHook: ReturnType<typeof useDomSelection> | null = null;
+
+  function Harness() {
+    currentHook = useDomSelection({
+      projectId: "project-1",
+      activeCompPath: "index.html",
+      isMasterView: false,
+      compIdToSrc: new Map(),
+      captionEditMode: false,
+      previewIframeRef: { current: props.iframe },
+      timelineElements: props.timelineElements,
+      setSelectedTimelineElementId: props.setSelectedTimelineElementId ?? vi.fn(),
+      setRightCollapsed: vi.fn(),
+      setRightPanelTab: props.setRightPanelTab,
+      previewIframe: props.iframe,
+      refreshKey: 0,
+      rightPanelTab: props.rightPanelTab,
+    });
+    return null;
+  }
+
+  act(() => root.render(React.createElement(Harness)));
+
+  return {
+    current: () => {
+      if (!currentHook) throw new Error("Expected hook result");
+      return currentHook;
+    },
+    cleanup: () => {
+      act(() => root.unmount());
+      host.remove();
+    },
+  };
+}
+
+describe("useDomSelection — Variables tab preservation", () => {
+  it("does not yank the user off the Variables tab when selecting on canvas", () => {
+    const setRightPanelTab = vi.fn();
+    const el = document.createElement("div");
+    el.id = "headline";
+    const harness = renderHarness({
+      rightPanelTab: "variables",
+      setRightPanelTab,
+      iframe: null,
+      timelineElements: [],
+    });
+
+    act(() => harness.current().applyDomSelection(makeSelection("Headline", el)));
+
+    expect(setRightPanelTab).not.toHaveBeenCalled();
+    harness.cleanup();
+  });
+
+  it("switches to the Design tab when not on Variables (control)", () => {
+    const setRightPanelTab = vi.fn();
+    const el = document.createElement("div");
+    el.id = "headline";
+    const harness = renderHarness({
+      rightPanelTab: "design",
+      setRightPanelTab,
+      iframe: null,
+      timelineElements: [],
+    });
+
+    act(() => harness.current().applyDomSelection(makeSelection("Headline", el)));
+
+    expect(setRightPanelTab).toHaveBeenCalledWith("design");
+    harness.cleanup();
+  });
+});
+
+describe("useDomSelection — timeline-select race guard", () => {
+  beforeEach(() => deferreds.clear());
+  afterEach(() => deferreds.clear());
+
+  it("a stale async resolution never clobbers a newer selection", async () => {
+    const iframe = document.createElement("iframe");
+    document.body.append(iframe);
+    const doc = iframe.contentDocument!;
+    const elA = doc.createElement("div");
+    elA.id = "a";
+    const elB = doc.createElement("div");
+    elB.id = "b";
+    doc.body.append(elA, elB);
+
+    const elementA: TimelineElement = { id: "a", tag: "div", start: 0, duration: 1, track: 0 };
+    const elementB: TimelineElement = { id: "b", tag: "div", start: 0, duration: 1, track: 0 };
+
+    const harness = renderHarness({
+      rightPanelTab: "design",
+      setRightPanelTab: vi.fn(),
+      iframe,
+      timelineElements: [elementA, elementB],
+    });
+
+    // Fire A then B; both suspend on their (pending) resolveDomEditSelection.
+    let pA: Promise<void> = Promise.resolve();
+    let pB: Promise<void> = Promise.resolve();
+    act(() => {
+      pA = harness.current().handleTimelineElementSelect(elementA);
+      pB = harness.current().handleTimelineElementSelect(elementB);
+    });
+
+    // Resolve the NEWER select (B) first, then the older one (A) last.
+    await act(async () => {
+      deferreds.get("b")?.resolve();
+      await pB;
+    });
+    await act(async () => {
+      deferreds.get("a")?.resolve();
+      await pA;
+    });
+
+    // The stale A resolution must be dropped: B wins.
+    expect(harness.current().domEditSelection?.id).toBe("b");
+    harness.cleanup();
+    iframe.remove();
+  });
+});
+
+describe("useDomSelection — marquee multi-select survives the late async primary", () => {
+  beforeEach(() => {
+    deferreds.clear();
+    const store = usePlayerStore.getState();
+    store.setSelectedElementId(null);
+    store.clearSelectedElementIds();
+  });
+  afterEach(() => {
+    deferreds.clear();
+    const store = usePlayerStore.getState();
+    store.setSelectedElementId(null);
+    store.clearSelectedElementIds();
+  });
+
+  function timelineEl(id: string): TimelineElement {
+    return { id, domId: id, tag: "div", start: 0, duration: 1, track: 0 };
+  }
+
+  // Reproduces the reported regression: a marquee over N clips leaves N members in
+  // selectedElementIds, then the inspector-open notify (finishMarquee →
+  // handleTimelineElementSelect → applyDomSelection) resolves LATE and writes the
+  // primary again. Before the fix that late write collapsed the set to one clip.
+  it("keeps all N members when a late primary-set targets a set member", async () => {
+    const iframe = document.createElement("iframe");
+    document.body.append(iframe);
+    const doc = iframe.contentDocument!;
+    for (const id of ["a", "b", "c"]) {
+      const el = doc.createElement("div");
+      el.id = id;
+      doc.body.append(el);
+    }
+
+    const store = usePlayerStore.getState();
+    // Marquee end state: primary written first, then the full set (real ordering).
+    store.setSelectedElementId("a");
+    store.setSelectedElementIds(new Set(["a", "b", "c"]));
+
+    const harness = renderHarness({
+      rightPanelTab: "design",
+      setRightPanelTab: vi.fn(),
+      iframe,
+      timelineElements: [timelineEl("a"), timelineEl("b"), timelineEl("c")],
+      // Wire the real store write so applyDomSelection's collapse decision is exercised.
+      setSelectedTimelineElementId: usePlayerStore.getState().setSelectedElementId,
+    });
+
+    let pending: Promise<void> = Promise.resolve();
+    act(() => {
+      pending = harness.current().handleTimelineElementSelect(timelineEl("a"));
+    });
+    await act(async () => {
+      deferreds.get("a")?.resolve();
+      await pending;
+    });
+
+    expect(usePlayerStore.getState().selectedElementIds.size).toBe(3);
+    expect(usePlayerStore.getState().selectedElementId).toBe("a");
+    harness.cleanup();
+    iframe.remove();
+  });
+
+  it("collapses the set when a late primary-set targets a non-member (fresh click)", async () => {
+    const iframe = document.createElement("iframe");
+    document.body.append(iframe);
+    const doc = iframe.contentDocument!;
+    for (const id of ["a", "b", "d"]) {
+      const el = doc.createElement("div");
+      el.id = id;
+      doc.body.append(el);
+    }
+
+    const store = usePlayerStore.getState();
+    // Stale set left over from a previous gesture.
+    store.setSelectedElementId("a");
+    store.setSelectedElementIds(new Set(["a", "b"]));
+
+    const harness = renderHarness({
+      rightPanelTab: "design",
+      setRightPanelTab: vi.fn(),
+      iframe,
+      timelineElements: [timelineEl("a"), timelineEl("b"), timelineEl("d")],
+      setSelectedTimelineElementId: usePlayerStore.getState().setSelectedElementId,
+    });
+
+    let pending: Promise<void> = Promise.resolve();
+    act(() => {
+      pending = harness.current().handleTimelineElementSelect(timelineEl("d"));
+    });
+    await act(async () => {
+      deferreds.get("d")?.resolve();
+      await pending;
+    });
+
+    expect(usePlayerStore.getState().selectedElementIds.size).toBe(0);
+    expect(usePlayerStore.getState().selectedElementId).toBe("d");
+    harness.cleanup();
+    iframe.remove();
+  });
+});