chore(fork): merge upstream v0.8.3 into tabario (TAB-802)

Base moves v0.8.1 -> v0.8.3, taking two upstream releases. Merged the tag, not
moving `main`, so the branch stays pinned to a release (TAB-782).

Price, measured before starting: our patch surface is 87 files, upstream churned
297 to v0.8.3, and the two sets overlapped in 4. Three of those merged
themselves. One conflict, in one file.

That conflict is the TAB-792 nested-clip timing patch in
packages/core/src/runtime/init.ts, and it is worth recording what it actually
was. Upstream's only change to that function since our merge base was hardening
the parse of the authored duration — parseNumeric -> parseStrictFiniteTimingNumber
(heygen-com#3322). Our patch deletes that variable outright, because deciding the timing
convention by where a clip *starts* never reads its duration. So upstream edited
a line we had removed. Resolved by keeping ours; nothing of their fix is lost,
and the reasoning is now in the comment rather than in this message alone.

Upstream has not taken PR heygen-com#3326, so v0.8.3 still ships the end-based test and
this patch stays ours. Patch surface does not shrink.

Checked for the TAB-783 failure — an upstream refactor giving a patched concept a
second caller that no conflict marker would reveal. heygen-com#3322 is a 24-file change
that adds packages/engine/src/services/mediaTimelineWindow.ts, which was the
candidate. It is not one: it consumes an already-resolved start and only asks
whether a window is explicitly inactive, and its callers in audioMixer and
videoFrameExtractor resolve starts by their own path, as they did before.

Rebuilt before trusting any result, then: core 2397/2397 across 118 files —
including the 24 lines of tests heygen-com#3322 added to init.test.ts, run against our
start-based logic — studio-server 504/504, engine 1599 (3 skipped), cli 2686
(3 skipped).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: felipecaldas

.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "hyperframes",
   "description": "HyperFrames by HeyGen. Write HTML, render video. Compositions, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website capture for HyperFrames.",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "author": {
     "name": "HeyGen",
     "email": "hyperframes@heygen.com",

.codex-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "hyperframes",
   "description": "Write HTML, render video. Compositions, Tailwind v4 styles, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website capture for HyperFrames.",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "author": {
     "name": "HeyGen",
     "email": "hyperframes@heygen.com",

.cursor-plugin/plugin.json

@@ -3,7 +3,7 @@
   "name": "hyperframes",
   "displayName": "HyperFrames by HeyGen",
   "description": "Write HTML, render video. Compositions, Tailwind v4 styles, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website capture for HyperFrames.",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "author": {
     "name": "HeyGen",
     "email": "hyperframes@heygen.com"

docs/changelog.mdx

@@ -8,6 +8,45 @@ Recent HyperFrames releases, including user-facing features, fixes, and migratio
 
 {/* New release entries are prepended by `bun run changelog:draft <version> --write`. */}
 
+<Update
+  label="HyperFrames v0.8.3"
+  description="Released - 2026-08-18"
+  tags={["Release"]}
+>
+Studio now keeps voices natural at every preview speed and applies authored track gain and user volume exactly once.
+Creator skills also add copyable recipes for cuts, trims, zooms, masks, transitions, and placed audio.
+
+## Features
+
+- Make creator media edits render-safe ([afafca4b9](https://github.com/heygen-com/hyperframes/commit/afafca4b9670cad60afd66475207ef6a016a759b), [#3322](https://github.com/heygen-com/hyperframes/pull/3322)).
+
+## Fixes
+
+- Separate Studio author and user audio gain ([995c9e346](https://github.com/heygen-com/hyperframes/commit/995c9e346e5b1bfff015db3979896ec576cff12c), [#3328](https://github.com/heygen-com/hyperframes/pull/3328)).
+
+[View the full commit range](https://github.com/heygen-com/hyperframes/compare/v0.8.2...v0.8.3).
+</Update>
+
+<Update
+  label="HyperFrames v0.8.2"
+  description="Released - 2026-08-18"
+  tags={["Release", "Catalog", "Skills"]}
+>
+The variables panel on a component's catalog page now changes its preview. Pick an accent or a size and the preview answers, so what you see is what the copied snippet installs.
+
+## Fixes
+
+- **Skills:** Count proxy-driver tweens in the animation map ([0d874adc6](https://github.com/heygen-com/hyperframes/commit/0d874adc685a94a519311cf9ed9e4107bb0347c9), [#3301](https://github.com/heygen-com/hyperframes/pull/3301)).
+- **Skills:** Declare the caption brand font's style axis, not just its weight ([a41da8651](https://github.com/heygen-com/hyperframes/commit/a41da8651768942adf588a959d9dc062c90c6a13), [#3300](https://github.com/heygen-com/hyperframes/pull/3300)).
+- **Skills:** Pin UTF-8 in Python scripts instead of the platform code page ([f8a1e2d31](https://github.com/heygen-com/hyperframes/commit/f8a1e2d315e51856491af003958914152371c29d), [#3298](https://github.com/heygen-com/hyperframes/pull/3298)).
+
+## Catalog
+
+- **Catalog:** Make component previews answer their variables panel ([406bf316a](https://github.com/heygen-com/hyperframes/commit/406bf316a38d8a6ff24c00696d9e537ee85997d4), [#3323](https://github.com/heygen-com/hyperframes/pull/3323)).
+
+[View the full commit range](https://github.com/heygen-com/hyperframes/compare/v0.8.1...v0.8.2).
+</Update>
+
 <Update
   label="HyperFrames v0.8.1"
   description="Released - 2026-08-18"

docs/public/catalog/components/ascii-trail-reveal.json

@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Avatar Group Hover - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        min-width: 760px;\n        min-height: 480px;\n        padding: 56px;\n        /* ponytail: scale-only fix — GSAP animates the spans inside, not this wrapper */\n        transform: scale(3.5);\n      }\n      .hf-transition-avatar-group-hover {\n        display: inline-flex;\n        align-items: center;\n        padding-left: 18px;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-transition-avatar-group-hover span {\n        display: grid;\n        place-items: center;\n        width: 54px;\n        height: 54px;\n        margin-left: -18px;\n        border: 3px solid #fff;\n        border-radius: 999px;\n        background: linear-gradient(135deg, #111827, #0ea5e9);\n        color: #fff;\n        font-size: 18px;\n        font-weight: 700;\n        letter-spacing: 0.01em;\n        box-shadow: 0 12px 30px rgba(24, 24, 27, 0.18);\n        transform: translateY(var(--hf-avatar-y, 0px));\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"avatar-group-hover-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-transition-avatar-group-hover\">\n          <span>A</span><span>B</span><span>C</span><span>D</span>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.to(\n          \".hf-transition-avatar-group-hover span\",\n          {\n            \"--hf-avatar-y\": \"-18px\",\n            duration: 0.28,\n            stagger: { each: 0.035, from: \"center\" },\n            ease: \"back.out(1.8)\",\n          },\n          startTime,\n        );\n        tl.to(\n          \".hf-transition-avatar-group-hover span\",\n          {\n            \"--hf-avatar-y\": \"0px\",\n            duration: 0.42,\n            stagger: { each: 0.035, from: \"center\" },\n            ease: \"bounce.out\",\n          },\n          startTime + 0.36,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"avatar-group-hover-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Avatar Group Hover - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        min-width: 760px;\n        min-height: 480px;\n        padding: 56px;\n        /* ponytail: scale-only fix — GSAP animates the spans inside, not this wrapper */\n        transform: scale(3.5);\n      }\n      .hf-transition-avatar-group-hover {\n        display: inline-flex;\n        align-items: center;\n        padding-left: 18px;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-transition-avatar-group-hover span {\n        display: grid;\n        place-items: center;\n        width: 54px;\n        height: 54px;\n        margin-left: -18px;\n        border: 3px solid #fff;\n        border-radius: 999px;\n        background: linear-gradient(135deg, #111827, #0ea5e9);\n        color: #fff;\n        font-size: 18px;\n        font-weight: 700;\n        letter-spacing: 0.01em;\n        box-shadow: 0 12px 30px rgba(24, 24, 27, 0.18);\n        transform: translateY(var(--hf-avatar-y, 0px));\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"avatar-group-hover-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-transition-avatar-group-hover\" data-composition-variables='[\n    { \"id\": \"size\", \"type\": \"enum\", \"role\": \"style\", \"label\": \"Size\", \"description\": \"Avatar diameter, with the initials scaling alongside it.\", \"default\": \"standard\", \"options\": [{ \"value\": \"small\", \"label\": \"Small\" }, { \"value\": \"standard\", \"label\": \"Standard\" }, { \"value\": \"large\", \"label\": \"Large\" }] },\n    { \"id\": \"overlap\", \"type\": \"enum\", \"role\": \"style\", \"label\": \"Overlap\", \"description\": \"How far each avatar tucks under the one before it, as a share of its own diameter.\", \"default\": \"standard\", \"options\": [{ \"value\": \"tight\", \"label\": \"Tight\" }, { \"value\": \"standard\", \"label\": \"Standard\" }, { \"value\": \"loose\", \"label\": \"Loose\" }] },\n    { \"id\": \"accent\", \"type\": \"enum\", \"role\": \"style\", \"label\": \"Accent\", \"description\": \"Colour the avatar gradient resolves into.\", \"default\": \"blue\", \"options\": [{ \"value\": \"blue\", \"label\": \"Blue\" }, { \"value\": \"violet\", \"label\": \"Violet\" }, { \"value\": \"green\", \"label\": \"Green\" }] }\n  ]'>\n          <span>A</span><span>B</span><span>C</span><span>D</span>\n        </div>\n      </div>\n      <script>\n  (function () {\n    \"use strict\";\n\n    var vars =\n      window.__hyperframes && window.__hyperframes.getVariables\n        ? window.__hyperframes.getVariables()\n        : {};\n\n    // Unrecognised overrides return to their declared defaults.\n    var sizes = { small: 42, standard: 54, large: 70 };\n    var fonts = { small: \"0.8em\", standard: \"1em\", large: \"1.3em\" };\n    // Overlap is a share of the diameter, so the two knobs stay independent.\n    var overlaps = { tight: 0.5, standard: 1 / 3, loose: 0.12 };\n    var accents = { blue: \"#0ea5e9\", violet: \"#a78bfa\", green: \"#34d399\" };\n\n    function pick(table, value, fallback) {\n      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;\n    }\n\n    var sizeName = pick(sizes, vars.size, \"standard\");\n    var overlapName = pick(overlaps, vars.overlap, \"standard\");\n    var accent = accents[pick(accents, vars.accent, \"blue\")];\n    var diameter = sizes[sizeName];\n    var overlap = Math.round(diameter * overlaps[overlapName]);\n\n    var roots = document.querySelectorAll(\".hf-transition-avatar-group-hover\");\n    for (var i = 0; i < roots.length; i += 1) {\n      var style = roots[i].style;\n      style.setProperty(\"--hf-avatar-size\", diameter + \"px\");\n      style.setProperty(\"--hf-avatar-font\", fonts[sizeName]);\n      style.setProperty(\"--hf-avatar-overlap\", overlap + \"px\");\n      style.setProperty(\"--hf-avatar-accent\", accent);\n    }\n  })();\n</script>\n<script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.to(\n          \".hf-transition-avatar-group-hover span\",\n          {\n            \"--hf-avatar-y\": \"-18px\",\n            duration: 0.28,\n            stagger: { each: 0.035, from: \"center\" },\n            ease: \"back.out(1.8)\",\n          },\n          startTime,\n        );\n        tl.to(\n          \".hf-transition-avatar-group-hover span\",\n          {\n            \"--hf-avatar-y\": \"0px\",\n            duration: 0.42,\n            stagger: { each: 0.035, from: \"center\" },\n            ease: \"bounce.out\",\n          },\n          startTime + 0.36,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"avatar-group-hover-demo\"] = tl;\n      </script>\n    </div>\n  <style>\n  .hf-transition-avatar-group-hover {\n    display: inline-flex;\n    align-items: center;\n    padding-left: var(--hf-avatar-overlap, 18px);\n    font-family: Inter, system-ui, sans-serif;\n  }\n  .hf-transition-avatar-group-hover span {\n    display: grid;\n    place-items: center;\n    width: var(--hf-avatar-size, 54px);\n    height: var(--hf-avatar-size, 54px);\n    margin-left: calc(-1 * var(--hf-avatar-overlap, 18px));\n    border: 3px solid #fff;\n    border-radius: 999px;\n    background: linear-gradient(135deg, #111827, var(--hf-avatar-accent, #0ea5e9));\n    color: #fff;\n    font-size: var(--hf-avatar-font, 1em);\n    font-weight: 900;\n    box-shadow: 0 12px 30px rgba(24, 24, 27, 0.18);\n    transform: translateY(var(--hf-avatar-y, 0px));\n  }\n</style>\n</body>\n</html>\n"}