fix(studio): name a repeated section by its authored id in the Design panel (#4768)

* fix(studio): name a repeated section by its authored id in the Design panel

* fix(studio): the timeline's page-read fallback also names a repeated section by its authored id

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

@@ -17,7 +17,7 @@ import {
   resolveDomEditCapabilities,
   resolveDomEditSelection,
 } from "./domEditing";
-import { normalizeTimelineCompositionSource } from "./domEditingDom";
+import { buildElementLabel, normalizeTimelineCompositionSource } from "./domEditingDom";
 
 function createDocument(markup: string): Document {
   const window = new Window();
@@ -925,6 +925,14 @@ describe("resolveDomEditSelection", () => {
     );
   });
 
+  it("names a repeated section by its authored id, not its runtime instance id", () => {
+    const document = createDocument(`
+      <div data-composition-id="benefit-fresh__hf2" data-hf-original-composition-id="benefit-fresh"></div>
+    `);
+
+    expect(buildElementLabel(document.querySelector("div") as HTMLElement)).toBe("Benefit Fresh");
+  });
+
   it("finds a composition host authored with a ./ path", () => {
     const document = createDocument(`
       <div data-composition-id="scene" data-composition-file="./compositions/scene.html"></div>

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

@@ -312,7 +312,8 @@ function getPreferredClassSelector(el: HTMLElement): string | undefined {
 
 // fallow-ignore-next-line complexity
 export function buildElementLabel(el: HTMLElement): string {
-  const compositionId = el.getAttribute("data-composition-id");
+  const compositionId =
+    el.getAttribute("data-hf-original-composition-id") ?? el.getAttribute("data-composition-id");
   if (compositionId && compositionId !== "main") {
     return humanizeIdentifier(compositionId);
   }

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

@@ -71,6 +71,20 @@ describe("parseTimelineFromDOM — nested master time", () => {
   });
 });
 
+describe("parseTimelineFromDOM — repeated sections", () => {
+  it("names each instance by its authored id and keeps them apart", () => {
+    const doc = makeDoc(`
+      <div data-composition-id="main" data-start="0" data-duration="20">
+        <div data-composition-id="card__hf1" data-hf-original-composition-id="card" data-start="0" data-duration="4"></div>
+        <div data-composition-id="card__hf2" data-hf-original-composition-id="card" data-start="4" data-duration="4"></div>
+      </div>
+    `);
+    const rows = parseTimelineFromDOM(doc, 20);
+    expect(rows.map((e) => e.label)).toEqual(["card", "card"]);
+    expect(new Set(rows.map((e) => e.id)).size).toBe(2);
+  });
+});
+
 describe("parseTimelineFromDOM — nested rows' keyframe basis", () => {
   const doc = () =>
     makeDoc(`

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

@@ -265,7 +265,7 @@ export function parseTimelineFromDOM(
     const sourceFile = getTimelineElementSourceFile(el);
     const selectorIndex = getTimelineElementSelectorIndex(doc, el, selector);
     const label = getTimelineElementDisplayLabel({
-      id: el.id || compId || null,
+      id: el.id || el.getAttribute("data-hf-original-composition-id") || compId || null,
       label: el.getAttribute("data-timeline-label") ?? el.getAttribute("data-label"),
       tag: tagLower,
     });