feat(core): add data-props interpolation for parameterized sub-compositions

[miguel-heygen]

What

Adds parameterized sub-compositions to HyperFrames via data-props and {{key:default}} interpolation.

A composition file can now contain mustache-style placeholders. A parent passes values via data-props JSON; the placeholders resolve at build time, render time, and in the live preview. Placeholders with defaults ({{key:default}}) resolve standalone — no parent required.

<!-- Parent: same component, 3 different instances -->
<div class="clip"
  data-composition-src="compositions/card.html"
  data-props='{"title":"Pro","price":"$29","bgColor":"#ec4899"}'
  data-start="0" data-duration="5" data-track-index="0">
</div>

<!-- compositions/card.html: renders standalone with defaults, or with parent props -->
<style>.card { background: {{bgColor:#6366f1}}; }</style>
<h2>{{title:Card Title}}</h2>
<p>{{price:$0}}/mo</p>

Why

Before this PR, every repeated element in a HyperFrames composition was hand-coded. 3 pricing cards = 3x copy-pasted HTML. 10 countdown numbers = 10 nearly-identical blocks. 4 team members = 4 duplicated structures. There was no way to write a component once and reuse it with different data.

This was the #1 pain point across 40 stress-test projects built by AI agents comparing HyperFrames to Remotion. Every agent independently flagged it. Remotion solves this naturally with React components and props — HyperFrames had no equivalent.

data-props closes that gap without adding React, TypeScript, node_modules, or a build step. It fits the existing data-* attribute model and works with the linter, renderer, and studio as-is.

The {{key:default}} syntax solves a follow-on problem: if a composition contains {{bgColor}} and is opened standalone (preview, lint, render without a parent), the CSS breaks. Inline defaults make every composition self-contained.

How

New file: interpolateProps.ts — shared interpolation engine with three context-aware functions:

• interpolateProps() — HTML-escaped for content (XSS-safe)
• interpolateCssProps() — raw values for CSS (entity escaping breaks CSS)
• interpolateScriptProps() — JS-escaped for scripts (prevents string breakout)

Wired into three pipelines:

1. htmlBundler.ts — build-time (npx hyperframes render via bundler)
2. producer/htmlCompiler.ts — render-time (before PostCSS scoping)
3. compositionLoader.ts — browser runtime (preview + studio)

Also:

• Renamed data-variable-values → data-props (the old attribute was never shipped publicly)
• Updated htmlParser.ts and generators/hyperframes.ts for the rename
• Updated skill docs (SKILL.md, patterns.md) and CLI docs (compositions.md)

Test plan

• 465/465 core tests pass (40 unit + 4 integration — 21 new)
• Build succeeds across all packages (core, cli, producer, studio)
• Pre-commit hooks pass (oxlint, oxfmt, typecheck, commitlint)
• E2E: created a project with 3 parameterized pricing cards using data-props, linted (0 errors), rendered to MP4 (12s, 1920x1080, 49KB)
• Verified CSS interpolation works with PostCSS scoping (producer pipeline)
• Verified XSS: <script>alert(1)</script> in props is escaped to <script> in output
• Verified standalone rendering: composition with {{key:default}} renders without parent data-props
• Verified unmatched placeholders without defaults are preserved as-is