feat(studio): wire hfId through DOM-edit patch targets, activate hfId lookup path (R7, T5a) (#1297)

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

@@ -26,6 +26,7 @@ export {
 // Layers, text fields, capabilities, selection, patch ops
 export {
   buildDefaultDomEditTextField,
+  buildDomEditPatchTarget,
   buildDomEditStylePatchOperation,
   buildDomEditTextPatchOperation,
   collectDomEditLayerItems,

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

@@ -1,9 +1,32 @@
 // @vitest-environment jsdom
 import { describe, expect, it } from "vitest";
-import { resolveDomEditSelection } from "./domEditingLayers";
+import { resolveDomEditSelection, buildDomEditPatchTarget } from "./domEditingLayers";
 
 const opts = { activeCompositionPath: "index.html", isMasterView: true, skipSourceProbe: true };
 
+describe("buildDomEditPatchTarget", () => {
+  it("includes hfId when selection has hfId", () => {
+    const target = buildDomEditPatchTarget({
+      id: undefined,
+      hfId: "hf-abc",
+      selector: ".foo",
+      selectorIndex: 0,
+    });
+    expect(target.hfId).toBe("hf-abc");
+  });
+
+  it("includes id and selector when hfId absent", () => {
+    const target = buildDomEditPatchTarget({
+      id: "hero",
+      hfId: undefined,
+      selector: "#hero",
+      selectorIndex: undefined,
+    });
+    expect(target.id).toBe("hero");
+    expect(target.hfId).toBeUndefined();
+  });
+});
+
 describe("resolveDomEditSelection — hfId from data-hf-id", () => {
   it("populates hfId from the element data-hf-id attribute", async () => {
     const el = document.createElement("div");

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

@@ -555,3 +555,14 @@ export function isTextEditableSelection(selection: DomEditSelection): boolean {
 }
 
 // buildElementAgentPrompt is in domEditingAgentPrompt.ts
+
+export function buildDomEditPatchTarget(
+  selection: Pick<DomEditSelection, "id" | "hfId" | "selector" | "selectorIndex">,
+): { id?: string | null; hfId?: string; selector?: string; selectorIndex?: number } {
+  return {
+    id: selection.id,
+    hfId: selection.hfId,
+    selector: selection.selector,
+    selectorIndex: selection.selectorIndex,
+  };
+}