fix(sdk): moveElement writes data-x/data-y, not left/top CSS

HF elements use data-x/data-y for positioning (read by htmlParser.ts,
emitted by hyperframes generator). CSS left/top is not the runtime convention.

Adds inverse round-trip test for prior position restore.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: vanceingalls

packages/sdk/src/engine/mutate.test.ts

@@ -330,19 +330,30 @@ describe("setCompositionMetadata", () => {
 // ─── moveElement ─────────────────────────────────────────────────────────────
 
 describe("moveElement", () => {
-  it("sets left and top as inline styles", () => {
+  it("sets data-x and data-y attributes (HF positioning convention)", () => {
     const parsed = fresh();
     const result = applyOp(parsed, {
       type: "moveElement",
       target: "hf-title",
       x: 100,
       y: 200,
     });
-    expect(result.forward.some((p) => p.path.endsWith("/left"))).toBe(true);
-    expect(result.forward.some((p) => p.path.endsWith("/top"))).toBe(true);
     const el = parsed.document.querySelector('[data-hf-id="hf-title"]');
-    expect(el?.getAttribute("style")).toContain("left: 100px");
-    expect(el?.getAttribute("style")).toContain("top: 200px");
+    expect(el?.getAttribute("data-x")).toBe("100");
+    expect(el?.getAttribute("data-y")).toBe("200");
+    expect(result.forward.some((p) => p.path.endsWith("/data-x"))).toBe(true);
+    expect(result.forward.some((p) => p.path.endsWith("/data-y"))).toBe(true);
+  });
+
+  it("inverse restores prior data-x/data-y", () => {
+    const parsed = fresh();
+    const el = parsed.document.querySelector('[data-hf-id="hf-title"]') as Element;
+    el.setAttribute("data-x", "50");
+    el.setAttribute("data-y", "75");
+    const result = applyOp(parsed, { type: "moveElement", target: "hf-title", x: 100, y: 200 });
+    applyPatchesToDocument(parsed, result.inverse);
+    expect(el.getAttribute("data-x")).toBe("50");
+    expect(el.getAttribute("data-y")).toBe("75");
   });
 });
 

packages/sdk/src/engine/mutate.ts

@@ -91,10 +91,7 @@ export function applyOp(parsed: ParsedDocument, op: EditOp): MutationResult {
     case "setHold":
       return handleSetHold(parsed, targets(op.target), op.hold);
     case "moveElement":
-      return handleSetStyle(parsed, targets(op.target), {
-        left: `${op.x}px`,
-        top: `${op.y}px`,
-      });
+      return handleMoveElement(parsed, targets(op.target), op.x, op.y);
     case "removeElement":
       return handleRemoveElement(parsed, targets(op.target));
     case "setCompositionMetadata":
@@ -147,6 +144,22 @@ function handleSetStyle(
   return result;
 }
 
+function handleMoveElement(
+  parsed: ParsedDocument,
+  ids: HfId[],
+  x: number,
+  y: number,
+): MutationResult {
+  // HF elements are positioned via data-x / data-y (parsed by htmlParser.ts,
+  // emitted by hyperframes generator). CSS left/top is not the convention.
+  const rx = handleSetAttribute(parsed, ids, "data-x", String(x));
+  const ry = handleSetAttribute(parsed, ids, "data-y", String(y));
+  return {
+    forward: [...rx.forward, ...ry.forward],
+    inverse: [...ry.inverse, ...rx.inverse],
+  };
+}
+
 function handleSetText(parsed: ParsedDocument, ids: HfId[], value: string): MutationResult {
   const result: MutationResult = { forward: [], inverse: [] };
   for (const id of ids) {