fix(studio): preview lookups prefer the element's own file, and a pasted element gets its own hf-id

Author: miguel-heygen

packages/studio/src/components/editor/gsapLivePreview.test.ts

@@ -13,3 +13,14 @@ it("previews on the selected element, not an earlier same-id copy in a sub-compo
   preview({ id: "card", hfId: "hf-root" } as DomEditSelection, { x: 10 });
   expect(set.mock.calls[0]?.[0]).toBe(document.querySelector('[data-hf-id="hf-root"]'));
 });
+
+it("previews on the copy in the selection's own file when a sub-composition repeats its hf-id", () => {
+  document.body.innerHTML =
+    '<div data-composition-id="strip" data-composition-src="compositions/strip.html">' +
+    '<div id="card" data-hf-id="hf-card"></div></div><div id="card" data-hf-id="hf-card" class="root"></div>';
+  const set = vi.fn();
+  const iframe = { contentWindow: { gsap: { set } }, contentDocument: document };
+  const preview = createGsapLivePreview({ current: iframe as unknown as HTMLIFrameElement });
+  preview({ id: "card", hfId: "hf-card", sourceFile: "index.html" } as DomEditSelection, { x: 10 });
+  expect(set.mock.calls[0]?.[0]).toBe(document.querySelector(".root"));
+});

packages/studio/src/components/editor/gsapLivePreview.ts

@@ -1,5 +1,5 @@
 import type { DomEditSelection } from "./domEditingTypes";
-import { findPreviewElement } from "../../player/lib/timelineElementHelpers";
+import { findElementForSelection } from "./domEditingElement";
 
 /**
  * Build the "live preview" callback the 3D-transform sub-view fires while a
@@ -9,17 +9,17 @@ import { findPreviewElement } from "../../player/lib/timelineElementHelpers";
  * Extracted so the identical closure exists once — shared by the legacy
  * PropertyPanel Layout section and the flat Layout group (PropertyPanelFlat).
  */
-// Resolve by id when unique, otherwise by selector + selectorIndex — a bare
-// querySelector(selector) always hits the FIRST match, so dragging on the
-// second of two same-selector siblings would animate the wrong element.
+// hf-ids and ids repeat across flattened sub-compositions and a selector's first match may be a sibling, so look in
+// the selection's own file first, then anywhere.
 function resolvePreviewNode(
   doc: Document | null | undefined,
   el: DomEditSelection,
 ): Element | null {
   if (!doc) return null;
-  if (el.hfId || el.id) return findPreviewElement(doc, el);
-  if (!el.selector) return null;
-  return doc.querySelectorAll(el.selector)[el.selectorIndex ?? 0] ?? null;
+  return (
+    findElementForSelection(doc, el) ??
+    findElementForSelection(doc, { ...el, sourceFile: undefined })
+  );
 }
 
 export function createGsapLivePreview(iframeRef: { readonly current: HTMLIFrameElement | null }) {

packages/studio/src/hooks/useClipboard.test.ts

@@ -1,6 +1,11 @@
 // @vitest-environment jsdom
 import { describe, expect, it } from "vitest";
-import { pasteTimelineClips, resolveFreeTrack, type PlacedClip } from "./useClipboard";
+import {
+  pasteDomElement,
+  pasteTimelineClips,
+  resolveFreeTrack,
+  type PlacedClip,
+} from "./useClipboard";
 import { extendRootDurationInSource } from "../utils/rootDuration";
 import type { TimelineClipboardClip } from "../utils/clipboardPayload";
 import type { TimelineElement } from "../player";
@@ -232,3 +237,13 @@ describe("pasteTimelineClips + extendRootDurationInSource", () => {
     expect(extended).toContain('data-duration="10"');
   });
 });
+
+describe("pasteDomElement", () => {
+  it("strips the copied data-hf-id so the pasted element does not share its original's", () => {
+    const source = '<div data-composition-id="main"><p id="card" data-hf-id="hf-card">Hi</p></div>';
+    const html = '<p id="card" data-hf-id="hf-card">Hi</p>';
+    const content = pasteDomElement(source, { html, originSelector: "#card" });
+    expect(content.match(/data-hf-id/g)).toHaveLength(1);
+    expect(content).toContain('id="card-2"');
+  });
+});

packages/studio/src/hooks/useClipboard.ts

@@ -117,6 +117,14 @@ function stripHfIds(html: string, parser: DOMParser): string {
   return root.outerHTML;
 }
 
+export function pasteDomElement(
+  content: string,
+  payload: { html: string; originSelector?: string; originSelectorIndex?: number },
+): string {
+  const html = deduplicateIds(stripHfIds(payload.html, new DOMParser()), collectHtmlIds(content));
+  return insertAsSibling(content, html, payload.originSelector, payload.originSelectorIndex);
+}
+
 /** Shared insertion path for paste and duplicate, anchored at the playhead or
  *  the selection's end respectively. Returns the final ids so the caller can
  *  select what it just placed, and the furthest end any clip lands at so the
@@ -280,13 +288,7 @@ export function useClipboard({
         patchedContent = extendRootDurationInSource(pasted.content, pasted.requiredEnd);
         pastedIds = pasted.ids;
       } else {
-        const deduped = deduplicateIds(payload.html, collectHtmlIds(originalContent));
-        patchedContent = insertAsSibling(
-          originalContent,
-          deduped,
-          payload.originSelector,
-          payload.originSelectorIndex,
-        );
+        patchedContent = pasteDomElement(originalContent, payload);
       }
 
       const label =

packages/studio/src/player/lib/automationStoreSync.test.ts

@@ -45,6 +45,18 @@ describe("syncStoredAutomationFromPreview", () => {
     expect(usePlayerStore.getState().elements[0]?.automation).toBe(RESTORED);
   });
 
+  it("reads the copy in the element's own file when a sub-composition repeats its hf-id", () => {
+    usePlayerStore.setState({ elements: [el({ hfId: "hf-bgm" })] });
+    const doc = document.implementation.createHTMLDocument("preview");
+    doc.body.innerHTML =
+      '<div data-composition-id="strip" data-composition-src="compositions/strip.html">' +
+      '<audio id="bgm" data-hf-id="hf-bgm"></audio></div><audio id="bgm" data-hf-id="hf-bgm"></audio>';
+    doc.querySelectorAll("audio")[0]?.setAttribute("data-automation", TWO_POINTS);
+    doc.querySelectorAll("audio")[1]?.setAttribute("data-automation", RESTORED);
+    syncStoredAutomationFromPreview(doc);
+    expect(usePlayerStore.getState().elements[0]?.automation).toBe(RESTORED);
+  });
+
   it("reads back an envelope an undo restored on the preview", () => {
     // The bug: a soft undo patches the preview document and re-runs the timeline, but
     // the store keeps its own copy of the attributes and that copy is what a lane

packages/studio/src/player/lib/automationStoreSync.ts

@@ -58,7 +58,11 @@ export function syncStoredAutomationFromPreview(doc: Document | null | undefined
   usePlayerStore.setState((state) => {
     let changed = false;
     const elements = state.elements.map((element) => {
-      const node = findPreviewElement(doc, { hfId: element.hfId, id: element.domId ?? element.id });
+      const node = findPreviewElement(doc, {
+        hfId: element.hfId,
+        id: element.domId ?? element.id,
+        sourceFile: element.sourceFile,
+      });
       if (!node) return element;
       const fields = syncedFields(doc, element, node);
       // Same array back when nothing moved: `elements` keys memos all over the

packages/studio/src/player/lib/timelineDOM.test.ts

@@ -285,6 +285,34 @@ describe("createTimelineElementFromManifestClip — source-scoped selector ident
     });
   });
 
+  it("keeps the host it was given when a sub-composition is mounted twice", () => {
+    const doc = makeDoc(`
+      <div data-composition-id="root" data-composition-file="index.html">
+        <div id="a" data-hf-id="hf-a" data-composition-id="card" data-composition-src="card.html"></div>
+        <div id="b" data-hf-id="hf-b" data-composition-id="card" data-composition-src="card.html"></div>
+      </div>
+    `);
+    const element = createTimelineElementFromManifestClip({
+      clip: {
+        id: "b",
+        label: "Card",
+        kind: "composition",
+        tagName: "div",
+        start: 4,
+        duration: 4,
+        track: 0,
+        compositionId: "card",
+        parentCompositionId: "root",
+        compositionSrc: null,
+        assetUrl: null,
+      },
+      fallbackIndex: 1,
+      doc,
+      hostEl: doc.getElementById("b"),
+    });
+    expect(element).toMatchObject({ domId: "b", hfId: "hf-b", compositionSrc: "card.html" });
+  });
+
   it("ignores an index.html duplicate when indexing a scene.html selector", () => {
     const doc = makeDoc(`
       <div data-composition-id="root" data-composition-file="index.html">

packages/studio/src/player/lib/timelineDOM.ts

@@ -171,8 +171,10 @@ export function createTimelineElementFromManifestClip(params: {
     entry.playbackRate ??= 1;
     let resolvedSrc = clip.compositionSrc;
     if (!resolvedSrc) {
-      hostEl =
-        doc?.querySelector(`[data-composition-id="${CSS.escape(clip.compositionId)}"]`) ?? hostEl;
+      if (hostEl?.getAttribute("data-composition-id") !== clip.compositionId) {
+        hostEl =
+          doc?.querySelector(`[data-composition-id="${CSS.escape(clip.compositionId)}"]`) ?? hostEl;
+      }
       resolvedSrc =
         hostEl?.getAttribute("data-composition-src") ??
         hostEl?.getAttribute("data-composition-file") ??

packages/studio/src/player/lib/timelineElementHelpers.ts

@@ -458,15 +458,23 @@ function findInClipScope(
   return lone;
 }
 
-/** A preview element by the `data-hf-id` the timeline bound it with, then by id, which can repeat across files. */
+/** A preview element by `data-hf-id` then id, which both repeat across files, preferring one in its own file. */
 export function findPreviewElement(
   doc: Document,
-  target: { hfId?: string; id?: string },
+  target: { hfId?: string; id?: string | null; sourceFile?: string },
 ): Element | null {
-  const byHfId = target.hfId
-    ? doc.querySelector(`[data-hf-id="${CSS.escape(target.hfId)}"]`)
-    : null;
-  return byHfId ?? (target.id ? doc.getElementById(target.id) : null);
+  const selectors = [
+    target.hfId && `[data-hf-id="${CSS.escape(target.hfId)}"]`,
+    target.id && `[id="${CSS.escape(target.id)}"]`,
+  ];
+  const matches = selectors.flatMap((selector) =>
+    selector ? Array.from(doc.querySelectorAll(selector)) : [],
+  );
+  return (
+    matches.find((node) => getTimelineElementSourceFile(node) === target.sourceFile) ??
+    matches[0] ??
+    null
+  );
 }
 
 export function findClipElementById(doc: Document, clip: ClipManifestClip): Element | null {