npm - @hyperframes/studio - Versions diffs - 0.6.84 → 0.6.85 - Mend

@hyperframes/studio 0.6.84 → 0.6.85

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/assets/{hyperframes-player-WXAuftNy.js → hyperframes-player-DRpY3xHh.js} +1 -1
package/dist/assets/{index-Cw-8psGW.js → index-DtSCUvYQ.js} +34 -34
package/dist/index.html +1 -1
package/package.json +4 -4
package/src/components/editor/manualEditsTypes.ts +7 -5
package/src/utils/sourcePatcher.test.ts +79 -8
package/src/utils/sourcePatcher.ts +48 -41

package/dist/index.html CHANGED Viewed

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-Cw-8psGW.js"></script>
+    <script type="module" crossorigin src="/assets/index-DtSCUvYQ.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-DHcptK1_.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.6.84",
+  "version": "0.6.85",
   "description": "",
   "repository": {
     "type": "git",
@@ -31,8 +31,8 @@
     "@codemirror/view": "6.40.0",
     "@phosphor-icons/react": "^2.1.10",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.6.84",
-    "@hyperframes/player": "0.6.84"
+    "@hyperframes/core": "0.6.85",
+    "@hyperframes/player": "0.6.85"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -46,7 +46,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.6.84"
+    "@hyperframes/producer": "0.6.85"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/editor/manualEditsTypes.ts CHANGED Viewed

@@ -1,13 +1,15 @@
 /* ── Public constants ──────────────────────────────────────────────── */
-export const STUDIO_OFFSET_X_PROP = "--hf-studio-offset-x";
-export const STUDIO_OFFSET_Y_PROP = "--hf-studio-offset-y";
-export const STUDIO_WIDTH_PROP = "--hf-studio-width";
-export const STUDIO_HEIGHT_PROP = "--hf-studio-height";
+export {
+  STUDIO_OFFSET_X_PROP,
+  STUDIO_OFFSET_Y_PROP,
+  STUDIO_WIDTH_PROP,
+  STUDIO_HEIGHT_PROP,
+  STUDIO_MANUAL_EDIT_GESTURE_ATTR,
+} from "@hyperframes/core/studio-api/draft-markers";
 export const STUDIO_ROTATION_PROP = "--hf-studio-rotation";
 /* ── Internal DOM attribute names ─────────────────────────────────── */
 export const STUDIO_PATH_OFFSET_ATTR = "data-hf-studio-path-offset";
-export const STUDIO_MANUAL_EDIT_GESTURE_ATTR = "data-hf-studio-manual-edit-gesture";
 export const STUDIO_BOX_SIZE_ATTR = "data-hf-studio-box-size";
 export const STUDIO_ROTATION_ATTR = "data-hf-studio-rotation";
 export const STUDIO_ORIGINAL_TRANSLATE_ATTR = "data-hf-studio-original-translate";

package/src/utils/sourcePatcher.test.ts CHANGED Viewed

@@ -517,17 +517,88 @@ describe("motion attribute round-trip via sourcePatcher", () => {
   });
 });
-// T3 — id-based targeting (spec for R1).
-// R1 adds `hfId?: string` to PatchTarget and a `[data-hf-id="…"]` lookup branch
-// in findTagByTarget. Convert from it.todo to real assertions in the R1 PR.
+// T3 — id-based targeting (R1).
 describe("T3 — hfId targeting (spec for R1)", () => {
-  it.todo("updates inline style by data-hf-id");
+  it("updates inline style by data-hf-id", () => {
+    const html = `<h1 data-hf-id="hf-x7k2" style="color: red">Hello</h1>`;
+    const result = applyPatchByTarget(
+      html,
+      { hfId: "hf-x7k2" },
+      {
+        type: "inline-style",
+        property: "color",
+        value: "blue",
+      },
+    );
+    expect(result).toContain("color: blue");
+    expect(result).toContain('data-hf-id="hf-x7k2"');
+  });
-  it.todo("updates text content by data-hf-id");
+  it("updates text content by data-hf-id", () => {
+    const html = `<p data-hf-id="hf-a1b2">Old text</p>`;
+    const result = applyPatchByTarget(
+      html,
+      { hfId: "hf-a1b2" },
+      {
+        type: "text-content",
+        property: "",
+        value: "New text",
+      },
+    );
+    expect(result).toContain(">New text<");
+  });
-  it.todo("updates attribute by data-hf-id");
+  it("updates attribute by data-hf-id", () => {
+    const html = `<div data-hf-id="hf-c3d4" data-start="0"></div>`;
+    const result = applyPatchByTarget(
+      html,
+      { hfId: "hf-c3d4" },
+      {
+        type: "attribute",
+        property: "start",
+        value: "2.5",
+      },
+    );
+    expect(result).toContain('data-start="2.5"');
+  });
+  it("data-hf-id attribute is preserved after a style patch", () => {
+    const html = `<h1 data-hf-id="hf-x7k2" style="color: red">Hello</h1>`;
+    const patched = applyPatchByTarget(
+      html,
+      { hfId: "hf-x7k2" },
+      {
+        type: "inline-style",
+        property: "color",
+        value: "blue",
+      },
+    );
+    expect(readAttributeByTarget(patched, { hfId: "hf-x7k2" }, "data-hf-id")).toBe("hf-x7k2");
+  });
-  it.todo("data-hf-id attribute is preserved after a style patch");
+  it("hfId lookup falls through to selector when hfId not found", () => {
+    const html = `<h1 class="headline" style="color: red">Hello</h1>`;
+    const result = applyPatchByTarget(
+      html,
+      { hfId: "hf-missing", selector: ".headline" },
+      { type: "inline-style", property: "color", value: "blue" },
+    );
+    expect(result).toContain("color: blue");
+  });
-  it.todo("hfId lookup falls through to selector when hfId not found");
+  it("hfId match is authoritative — selector is not used as a narrowing filter", () => {
+    // hfId matches h1; selector points at h2. hfId wins — patch lands on h1, h2 untouched.
+    const html = `<h1 data-hf-id="hf-x7k2" class="a">A</h1><h2 class="b">B</h2>`;
+    const result = applyPatchByTarget(
+      html,
+      { hfId: "hf-x7k2", selector: ".b" },
+      { type: "inline-style", property: "color", value: "blue" },
+    );
+    expect(result).toContain('data-hf-id="hf-x7k2"');
+    const h1End = result.indexOf("</h1>");
+    const bluePos = result.indexOf("color: blue");
+    expect(bluePos).toBeGreaterThan(-1);
+    expect(bluePos).toBeLessThan(h1End);
+    expect(result).toContain('<h2 class="b">B</h2>');
+  });
 });

package/src/utils/sourcePatcher.ts CHANGED Viewed

@@ -94,6 +94,7 @@ export interface PatchOperation {
 export interface PatchTarget {
   id?: string | null;
+  hfId?: string;
   selector?: string;
   selectorIndex?: number;
 }
@@ -232,61 +233,67 @@ function replaceTagAtMatch(html: string, match: TagMatch, newTag: string): strin
   return `${html.slice(0, match.start)}${newTag}${html.slice(match.end)}`;
 }
-export function findTagByTarget(html: string, target: PatchTarget): TagMatch | null {
-  if (target.id) {
-    const idPattern = new RegExp(`(<[^>]*\\bid=(["'])${escapeRegex(target.id)}\\2[^>]*)>`, "i");
-    const match = idPattern.exec(html);
-    if (match?.index != null) {
+function execDataAttrPattern(html: string, attr: string, value: string): TagMatch | null {
+  const pattern = new RegExp(`(<[^>]*\\b${attr}=(["'])${escapeRegex(value)}\\2[^>]*)>`, "i");
+  const match = pattern.exec(html);
+  if (match?.index == null) return null;
+  // Defensive: a second exact match means a duplicate id/attr in the source
+  // (id drift). Don't silently patch the first while leaving the other stale —
+  // surface it. By the mint contract this should never fire.
+  const all = html.match(new RegExp(`<[^>]*\\b${attr}=(["'])${escapeRegex(value)}\\1[^>]*>`, "gi"));
+  if (all && all.length > 1) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `sourcePatcher: ${attr}="${value}" matched ${all.length} elements; patching the first. ids/attrs must be unique per document.`,
+    );
+  }
+  return { tag: match[1], start: match.index, end: match.index + match[1].length };
+}
+function findTagByClass(html: string, target: PatchTarget): TagMatch | null {
+  const classMatch = target.selector?.match(/^\.([a-zA-Z0-9_-]+)$/);
+  if (!classMatch) return null;
+  const cls = classMatch[1];
+  const pattern = new RegExp(
+    `(<[^>]*\\bclass=(["'])[^"']*\\b${escapeRegex(cls)}\\b[^"']*\\2[^>]*)>`,
+    "gi",
+  );
+  const selectorIndex = target.selectorIndex ?? 0;
+  let match: RegExpExecArray | null;
+  let currentIndex = 0;
+  while ((match = pattern.exec(html)) !== null) {
+    if (currentIndex === selectorIndex && match.index != null) {
       return {
         tag: match[1],
         start: match.index,
         end: match.index + match[1].length,
       };
     }
+    currentIndex += 1;
+  }
+  return null;
+}
+export function findTagByTarget(html: string, target: PatchTarget): TagMatch | null {
+  if (target.hfId) {
+    const result = execDataAttrPattern(html, "data-hf-id", target.hfId);
+    if (result) return result;
+  }
+  if (target.id) {
+    const result = execDataAttrPattern(html, "id", target.id);
+    if (result) return result;
   }
   if (!target.selector) return null;
   const compositionIdMatch = target.selector.match(/^\[data-composition-id="([^"]+)"\]$/);
   if (compositionIdMatch) {
-    const compId = compositionIdMatch[1];
-    const pattern = new RegExp(
-      `(<[^>]*\\bdata-composition-id=(["'])${escapeRegex(compId)}\\2[^>]*)>`,
-      "i",
-    );
-    const match = pattern.exec(html);
-    if (match?.index != null) {
-      return {
-        tag: match[1],
-        start: match.index,
-        end: match.index + match[1].length,
-      };
-    }
+    const result = execDataAttrPattern(html, "data-composition-id", compositionIdMatch[1]);
+    if (result) return result;
   }
-  const classMatch = target.selector.match(/^\.([a-zA-Z0-9_-]+)$/);
-  if (classMatch) {
-    const cls = classMatch[1];
-    const pattern = new RegExp(
-      `(<[^>]*\\bclass=(["'])[^"']*\\b${escapeRegex(cls)}\\b[^"']*\\2[^>]*)>`,
-      "gi",
-    );
-    const selectorIndex = target.selectorIndex ?? 0;
-    let match: RegExpExecArray | null;
-    let currentIndex = 0;
-    while ((match = pattern.exec(html)) !== null) {
-      if (currentIndex === selectorIndex && match.index != null) {
-        return {
-          tag: match[1],
-          start: match.index,
-          end: match.index + match[1].length,
-        };
-      }
-      currentIndex += 1;
-    }
-  }
-  return null;
+  return findTagByClass(html, target);
 }
 export function readAttributeByTarget(