Skip to content

feat(core): clip-model hf- ids minted at parse, emitted as data-hf-id (R1) #1270

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vanceingalls merged 4 commits into from
Jun 9, 2026
+28 −16
Merged

feat(core): clip-model hf- ids minted at parse, emitted as data-hf-id (R1) #1270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0a1583d
feat(core): clip-model hf- ids minted at parse, emitted as data-hf-id…
vanceingalls Jun 8, 2026
2d1d724
docs(core): document legacy-id round-trip in clip-model readback (R1 …
vanceingalls Jun 8, 2026
9ddd145
docs(core): fix misleading legacy-id migration comment in htmlParser.ts
vanceingalls Jun 9, 2026
cafc27f
test(core): update htmlParser tests for R1 hf- id minting
vanceingalls Jun 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/core/src/generators/hyperframes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -368,21 +368,21 @@
const resolutionAttr = ` data-resolution="${resolution}"`;

return `<!DOCTYPE html>
<html data-composition-id="${compositionId}" data-composition-duration="${calculatedDuration}"${resolutionAttr}${customStylesAttr}>

Check warning

Code scanning / CodeQL

Unsafe HTML constructed from library input Medium

This HTML construction which depends on
library input
Loading
might later allow
cross-site scripting
Loading
.

Check warning

Code scanning / CodeQL

Unsafe HTML constructed from library input Medium

This HTML construction which depends on
library input
Loading
might later allow
cross-site scripting
Loading
.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
${includeStyles ? googleFontsLink : ""}
${gsapCdnTag}
${styleTags ? ` ${styleTags}` : ""}

Check warning

Code scanning / CodeQL

Unsafe HTML constructed from library input Medium

This HTML construction which depends on
library input
Loading
might later allow
cross-site scripting
Loading
.
This HTML construction which depends on
library input
Loading
might later allow
cross-site scripting
Loading
.
</head>
<body>
<div id="stage">
<div id="stage-zoom-container"${zoomKeyframesAttr}>
${elementsHtml}

Check warning

Code scanning / CodeQL

Unsafe HTML constructed from library input Medium

This HTML construction which depends on
library input
Loading
might later allow
cross-site scripting
Loading
.
</div>
</div>
${gsapScriptTag}

Check warning

Code scanning / CodeQL

Unsafe HTML constructed from library input Medium

This HTML construction which depends on
library input
Loading
might later allow
cross-site scripting
Loading
.
This HTML construction which depends on
library input
Loading
might later allow
cross-site scripting
Loading
.
This HTML construction which depends on
library input
Loading
might later allow
cross-site scripting
Loading
.
</body>
</html>`;
}
Expand Down Expand Up @@ -447,6 +447,7 @@
function generateElementHtml(element: TimelineElement, keyframes?: Keyframe[]): string {
const baseAttrs = [
`id="${element.id}"`,
`data-hf-id="${element.id}"`,
`data-start="${element.startTime}"`,
`data-end="${element.startTime + element.duration}"`,
`data-layer="${element.zIndex}"`,
Expand Down
16 changes: 8 additions & 8 deletions packages/core/src/parsers/htmlParser.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ describe("parseHtml", () => {
<html>
<body>
<div id="stage">
<div id="text1" data-start="0" data-end="5" data-name="Title"><div>Hello World</div></div>
<div id="text2" data-start="2" data-end="7" data-name="Subtitle"><div>Sub</div></div>
<div id="text1" data-hf-id="text1" data-start="0" data-end="5" data-name="Title"><div>Hello World</div></div>
<div id="text2" data-hf-id="text2" data-start="2" data-end="7" data-name="Subtitle"><div>Sub</div></div>
</div>
</body>
</html>
Expand All @@ -42,7 +42,7 @@ describe("parseHtml", () => {
<html>
<body>
<div id="stage">
<div id="comp1" data-start="0" data-end="10" data-type="composition" data-composition-id="abc123">
<div id="comp1" data-hf-id="comp1" data-start="0" data-end="10" data-type="composition" data-composition-id="abc123">
<iframe src="/compositions/abc123"></iframe>
</div>
</div>
Expand All @@ -65,9 +65,9 @@ describe("parseHtml", () => {
<html>
<body>
<div id="stage">
<video id="vid1" data-start="0" data-end="10" src="video.mp4" data-name="My Video"></video>
<audio id="aud1" data-start="0" data-end="5" src="music.mp3" data-name="Music"></audio>
<img id="img1" data-start="2" data-end="8" src="photo.jpg" data-name="Photo" />
<video id="vid1" data-hf-id="vid1" data-start="0" data-end="10" src="video.mp4" data-name="My Video"></video>
<audio id="aud1" data-hf-id="aud1" data-start="0" data-end="5" src="music.mp3" data-name="Music"></audio>
<img id="img1" data-hf-id="img1" data-start="2" data-end="8" src="photo.jpg" data-name="Photo" />
</div>
</body>
</html>
Expand Down Expand Up @@ -123,7 +123,7 @@ describe("parseHtml", () => {
const result = parseHtml(html);

expect(result.elements).toHaveLength(1);
expect(result.elements[0].id).toMatch(/^element-\d+$/);
expect(result.elements[0].id).toMatch(/^hf-[a-z0-9]{4}$/);
});

it("extracts GSAP script from script tags", () => {
Expand Down Expand Up @@ -391,7 +391,7 @@ describe("parseHtml", () => {
<html>
<body>
<div id="stage">
<div id="text1" data-start="0" data-end="5" data-keyframes='${keyframes}'><div>Hello</div></div>
<div id="text1" data-hf-id="text1" data-start="0" data-end="5" data-keyframes='${keyframes}'><div>Hello</div></div>
</div>
</body>
</html>
Expand Down
15 changes: 13 additions & 2 deletions packages/core/src/parsers/htmlParser.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
CompositionVariable,
} from "../core.types";
import { validateCompositionGsap } from "./gsapSerialize";
import { ensureHfIds } from "./hfIds.js";
import type { ValidationResult } from "../core.types";

const MEDIA_TYPES = new Set<string>(["video", "image", "audio"]);
Expand Down Expand Up @@ -156,8 +157,9 @@
}

export function parseHtml(html: string): ParsedHtml {
const withIds = ensureHfIds(html);
const parser = new DOMParser();
const doc = parser.parseFromString(html, "text/html");
const doc = parser.parseFromString(withIds, "text/html");

Check failure

Code scanning / CodeQL

DOM text reinterpreted as HTML High

DOM text
Loading
is reinterpreted as HTML without escaping meta-characters.

const elements: TimelineElement[] = [];
const keyframes: Record<string, Keyframe[]> = {};
Expand Down Expand Up @@ -190,7 +192,16 @@
duration = 5;
}

const id = el.id || `element-${++idCounter}`;
// R1: stable hf- id minted by ensureHfIds above; clips just read it.
// Legacy/migration note: ensureHfIds pins a pre-existing `data-hf-id`, and
// the generator emits `data-hf-id="${element.id}"`. So a clip authored
// before R1 with `id="my-title"` round-trips as `data-hf-id="my-title"` —
// a non-`hf-`-shaped but still stable, exact-match handle. This is safe
// indefinitely: targeting uses exact `[data-hf-id="…"]` match (it does not
// require the hf- prefix). ensureHfIds skips elements that already carry
// data-hf-id, so legacy values are NOT re-minted automatically — they
// persist until the user re-saves the composition through Studio. Not a bug.
const id = el.getAttribute("data-hf-id") || el.id || `element-${++idCounter}`;
const name = getElementName(el);
const zIndex = getZIndex(el);

Expand Down
12 changes: 6 additions & 6 deletions packages/core/src/parsers/stableIds.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { serialize } from "./test-utils.js";
describe("T2 — stable element ids (spec for R1)", () => {
// --- Spec (red until R1) ---

it.fails("[spec] elements without an id get a hf- prefixed id at parse", () => {
it("[spec] elements without an id get a hf- prefixed id at parse", () => {
const html = `<html><body><div id="stage">
<img src="logo.svg" data-start="0" data-end="5" data-name="Logo" />
<div data-start="0" data-end="5" data-name="Card"><div>Text</div></div>
Expand All @@ -29,7 +29,7 @@ describe("T2 — stable element ids (spec for R1)", () => {
}
});

it.fails("[spec] generated hf- ids match /^hf-[a-z0-9]{4}$/", () => {
it("[spec] generated hf- ids match /^hf-[a-z0-9]{4}$/", () => {
const html = `<html><body><div id="stage">
<div data-start="0" data-end="5" data-name="Unnamed"><div>X</div></div>
<video data-start="1" data-end="6" src="v.mp4" data-name="Clip"></video>
Expand All @@ -41,7 +41,7 @@ describe("T2 — stable element ids (spec for R1)", () => {
}
});

it.fails("[spec] adding an element before existing ones does not change existing ids", () => {
it("[spec] adding an element before existing ones does not change existing ids", () => {
const base = `<html><body><div id="stage">
<div data-start="0" data-end="5" data-name="AlphaEl"><div>A</div></div>
<div data-start="1" data-end="6" data-name="BetaEl"><div>B</div></div>
Expand All @@ -62,12 +62,12 @@ describe("T2 — stable element ids (spec for R1)", () => {

// --- Baseline (already pass, must not regress) ---

it("elements with an existing id keep it unchanged", () => {
it("existing data-hf-id is pinned and becomes the clip id (never re-minted)", () => {
const html = `<html><body><div id="stage">
<div id="my-title" data-start="0" data-end="5" data-name="Title"><div>Hi</div></div>
<div data-hf-id="hf-anch" data-start="0" data-end="5" data-name="Title"><div>Hi</div></div>
</div></body></html>`;
const { elements } = parseHtml(html);
expect(elements.some((e) => e.id === "my-title")).toBe(true);
expect(elements.some((e) => e.id === "hf-anch")).toBe(true);
});

it("ids are deterministic: same input produces same ids on re-parse", () => {
Expand Down
Loading