From c67e9dc1f843122225468ce63a67c57f70c2bba2 Mon Sep 17 00:00:00 2001
From: vanceingalls <vance@heygen.com>
Date: Thu, 23 Jul 2026 20:18:39 +0000
Subject: [PATCH 01/12] feat(registry): make caption-weight-shift data-driven
 via caption-data runtime

---
 .../caption-weight-shift.html                 | 381 ++++++++++++++----
 1 file changed, 300 insertions(+), 81 deletions(-)

diff --git a/registry/components/caption-weight-shift/caption-weight-shift.html b/registry/components/caption-weight-shift/caption-weight-shift.html
index a6f37fe0b7..8bcfbe9fbf 100644
--- a/registry/components/caption-weight-shift/caption-weight-shift.html
+++ b/registry/components/caption-weight-shift/caption-weight-shift.html
@@ -90,7 +90,7 @@
         max-width: 1400px;
         line-height: 1.1;
         white-space: nowrap;
-        color: #ffffff;
+        color: var(--hf-caption-primary, #ffffff);
         font-family: "Montserrat", Arial, sans-serif;
         font-weight: 300;
         font-size: 72px;
@@ -117,12 +117,188 @@
     </div>
 
     <script>
-      var DURATION = 8;
-      var SAFE_ZONE_WIDTH = 1400;
-      var MAX_LINE_WIDTH = SAFE_ZONE_WIDTH - 40;
-      var CAPTION_FONT_SIZE = 72;
+      var HF_COMPOSITION_ID = "caption-weight-shift";
+      var HF_ROOT_ID = "weight-shift";
+      var HF_GROUP_SELECTOR = ".caption-group";
+
+      var HF_DEMO_DATA = {
+        version: 1,
+        segments: [
+          {
+            start: 0,
+            text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
+            words: [
+              { text: "Every", start: 0.0, end: 0.3 },
+              { text: "great", start: 0.3, end: 0.55 },
+              { text: "video", start: 0.55, end: 0.85 },
+              { text: "starts", start: 0.85, end: 1.1 },
+              { text: "with", start: 1.1, end: 1.25 },
+              { text: "a", start: 1.25, end: 1.35 },
+              { text: "single", start: 1.35, end: 1.65 },
+              { text: "frame.", start: 1.65, end: 2.0 },
+              { text: "HyperFrames", start: 2.1, end: 2.65 },
+              { text: "lets", start: 2.65, end: 2.85 },
+              { text: "you", start: 2.85, end: 2.95 },
+              { text: "write", start: 2.95, end: 3.15 },
+              { text: "HTML", start: 3.15, end: 3.55 },
+              { text: "and", start: 3.55, end: 3.65 },
+              { text: "render", start: 3.65, end: 3.95 },
+              { text: "professional", start: 3.95, end: 4.45 },
+              { text: "video.", start: 4.45, end: 4.8 },
+              { text: "No", start: 4.9, end: 5.05 },
+              { text: "timeline.", start: 5.05, end: 5.45 },
+              { text: "No", start: 5.5, end: 5.65 },
+              { text: "drag", start: 5.65, end: 5.85 },
+              { text: "and", start: 5.85, end: 5.95 },
+              { text: "drop.", start: 5.95, end: 6.25 },
+              { text: "Just", start: 6.35, end: 6.55 },
+              { text: "code", start: 6.55, end: 6.8 },
+              { text: "that", start: 6.8, end: 6.95 },
+              { text: "becomes", start: 6.95, end: 7.3 },
+              { text: "cinema.", start: 7.3, end: 7.7 },
+            ],
+          },
+        ],
+      };
+
+      /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
+      var HF_CONTRACT_VERSION = 1;
+      var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
+
+      function hfFlattenSegments(segments) {
+        var out = [];
+        (segments || []).forEach(function (seg) {
+          ((seg && seg.words) || []).forEach(function (w) {
+            var start = Math.max(0, Number(w.start) || 0);
+            out.push({
+              text: String(w.word || w.text || "").trim(),
+              start: start,
+              end: Math.max(start, Number(w.end) || 0),
+            });
+          });
+        });
+        out.sort(function (a, b) {
+          return a.start - b.start;
+        });
+        return out.filter(function (w) {
+          return w.text.length > 0;
+        });
+      }
+
+      function hfDeriveDuration(words) {
+        var end = 0;
+        words.forEach(function (w) {
+          if (w.end > end) end = w.end;
+        });
+        return end;
+      }
+
+      function hfValidate(data) {
+        if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
+        if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
+          return { ok: false, reason: "unsupported-version" };
+        }
+        if (!Array.isArray(data.segments) || data.segments.length === 0) {
+          return { ok: false, reason: "no-segments" };
+        }
+        if (data.displayMode != null && data.displayMode !== "full") {
+          return { ok: false, reason: "unsupported-displayMode" };
+        }
+        var words = hfFlattenSegments(data.segments);
+        if (words.length === 0) return { ok: false, reason: "no-words" };
+        return { ok: true, words: words, durationS: hfDeriveDuration(words) };
+      }
+
+      function hfApplyStageConfig(data, durationS) {
+        var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
+        var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
+        var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
+        var root = document.getElementById(HF_ROOT_ID);
+        [document.documentElement, document.body, root].forEach(function (el) {
+          el.style.width = W + "px";
+          el.style.height = H + "px";
+        });
+        root.setAttribute("data-width", String(W));
+        root.setAttribute("data-height", String(H));
+        root.setAttribute("data-duration", String(durationS));
+        var brand = (data && data.brand) || {};
+        if (typeof brand.primaryColor === "string" && brand.primaryColor) {
+          root.style.setProperty("--hf-caption-primary", brand.primaryColor);
+        }
+        if (typeof brand.accentColor === "string" && brand.accentColor) {
+          root.style.setProperty("--hf-caption-accent", brand.accentColor);
+        }
+        return { W: W, H: H, scaleX: W / 1920, scaleY: H / 1080, fontScale: Math.min(W, H) / 1080 };
+      }
+
+      function hfPublishStatus(status) {
+        window.__HF_CAPTION_STATUS = status;
+        document
+          .getElementById(HF_ROOT_ID)
+          .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
+      }
+
+      function hfRunGate(words, durationS, failReason) {
+        if (failReason) {
+          hfPublishStatus({
+            ok: false,
+            present: false,
+            contained: false,
+            reason: failReason,
+            version: HF_CONTRACT_VERSION,
+            durationS: durationS || 0,
+          });
+          return;
+        }
+        var root = document.getElementById(HF_ROOT_ID);
+        var rootRect = root.getBoundingClientRect();
+        var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
+        var present = false;
+        var contained = true;
+        var tokens = [];
+        words.forEach(function (w) {
+          var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
+          if (t) tokens.push(t);
+        });
+        groups.forEach(function (el) {
+          var prevOpacity = el.style.opacity;
+          var prevVisibility = el.style.visibility;
+          el.style.opacity = "1";
+          el.style.visibility = "visible";
+          var r = el.getBoundingClientRect();
+          if (r.width > 0 && r.height > 0) {
+            var text = (el.textContent || "").toLowerCase();
+            for (var i = 0; i < tokens.length; i++) {
+              if (text.indexOf(tokens[i]) !== -1) {
+                present = true;
+                break;
+              }
+            }
+            if (
+              r.left < rootRect.left - 1 ||
+              r.right > rootRect.right + 1 ||
+              r.top < rootRect.top - 1 ||
+              r.bottom > rootRect.bottom + 1
+            ) {
+              contained = false;
+            }
+          }
+          el.style.opacity = prevOpacity;
+          el.style.visibility = prevVisibility;
+        });
+        hfPublishStatus({
+          ok: present && contained,
+          present: present,
+          contained: contained,
+          version: HF_CONTRACT_VERSION,
+          durationS: durationS,
+        });
+      }
+
+      var SAFE_ZONE_WIDTH, MAX_LINE_WIDTH, CAPTION_FONT_SIZE, DURATION;
       var MAX_WORDS_PER_GROUP = 4;
-      var WORD_SPACING = 12;
+      var WORD_SPACING_DESIGN = 12;
+      var WORD_SPACING;
       var PAUSE_THRESHOLD = 0.1;
       var ENTRY_DURATION = 100 / 1000;
       var WEIGHT_TRANSITION = 100 / 1000;
@@ -130,37 +306,6 @@
       var FONT_WEIGHT_LIGHT = 300;
       var FONT_WEIGHT_BOLD = 700;
 
-      var TRANSCRIPT = [
-        { text: "Every", start: 0.0, end: 0.3 },
-        { text: "great", start: 0.3, end: 0.55 },
-        { text: "video", start: 0.55, end: 0.85 },
-        { text: "starts", start: 0.85, end: 1.1 },
-        { text: "with", start: 1.1, end: 1.25 },
-        { text: "a", start: 1.25, end: 1.35 },
-        { text: "single", start: 1.35, end: 1.65 },
-        { text: "frame.", start: 1.65, end: 2.0 },
-        { text: "HyperFrames", start: 2.1, end: 2.65 },
-        { text: "lets", start: 2.65, end: 2.85 },
-        { text: "you", start: 2.85, end: 2.95 },
-        { text: "write", start: 2.95, end: 3.15 },
-        { text: "HTML", start: 3.15, end: 3.55 },
-        { text: "and", start: 3.55, end: 3.65 },
-        { text: "render", start: 3.65, end: 3.95 },
-        { text: "professional", start: 3.95, end: 4.45 },
-        { text: "video.", start: 4.45, end: 4.8 },
-        { text: "No", start: 4.9, end: 5.05 },
-        { text: "timeline.", start: 5.05, end: 5.45 },
-        { text: "No", start: 5.5, end: 5.65 },
-        { text: "drag", start: 5.65, end: 5.85 },
-        { text: "and", start: 5.85, end: 5.95 },
-        { text: "drop.", start: 5.95, end: 6.25 },
-        { text: "Just", start: 6.35, end: 6.55 },
-        { text: "code", start: 6.55, end: 6.8 },
-        { text: "that", start: 6.8, end: 6.95 },
-        { text: "becomes", start: 6.95, end: 7.3 },
-        { text: "cinema.", start: 7.3, end: 7.7 },
-      ];
-
       function normalizeWords(rawWords) {
         return rawWords
           .map(function (item) {
@@ -190,7 +335,6 @@
 
       var measureCanvas = document.createElement("canvas");
       var measureContext = measureCanvas.getContext("2d");
-      measureContext.font = "700 " + CAPTION_FONT_SIZE + "px Montserrat";
 
       function measureWord(word) {
         return measureContext.measureText(word.text.toLowerCase()).width * FONT_WIDTH_SAFETY;
@@ -323,6 +467,7 @@
             lineEl.id = "caption-group-" + groupIndex + "-line-" + lineIndex;
             lineEl.style.fontWeight = lineIndex === 0 ? FONT_WEIGHT_BOLD : FONT_WEIGHT_LIGHT;
             lineEl.style.fontSize = computedSize + "px";
+            lineEl.style.maxWidth = SAFE_ZONE_WIDTH + "px";
             line.words.forEach(function (word, wordIndex) {
               var wordEl = document.createElement("span");
               wordEl.textContent = word.text.toLowerCase();
@@ -336,62 +481,136 @@
         });
       }
 
-      var WORDS = normalizeWords(TRANSCRIPT);
-      var GROUPS = makeGroups(WORDS);
-      buildCaptions(GROUPS);
+      function hfTeardown() {
+        document.getElementById("caption-stage").innerHTML = "";
+      }
 
-      window.__timelines = window.__timelines || {};
-      var tl = gsap.timeline({ paused: true });
+      function hfBuild(words, layout, durationS) {
+        DURATION = durationS;
+        CAPTION_FONT_SIZE = Math.round(72 * layout.fontScale);
+        SAFE_ZONE_WIDTH = Math.round(1400 * layout.scaleX);
+        MAX_LINE_WIDTH = SAFE_ZONE_WIDTH - Math.round(40 * layout.scaleX);
+        WORD_SPACING = Math.round(WORD_SPACING_DESIGN * layout.fontScale);
 
-      var visibleStarts = GROUPS.map(function (group, groupIndex) {
-        var prev = GROUPS[groupIndex - 1];
-        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
-        var entryLead = Math.min(ENTRY_DURATION, availableGap);
-        return Math.max(0, group.start - entryLead);
-      });
+        var stage = document.getElementById("caption-stage");
+        var stageHeight = Math.round(278 * layout.fontScale);
+        stage.style.width = SAFE_ZONE_WIDTH + "px";
+        stage.style.height = stageHeight + "px";
+        stage.style.bottom = Math.round(100 * layout.scaleY) + "px";
+
+        measureContext.font = "700 " + CAPTION_FONT_SIZE + "px Montserrat";
+
+        var WORDS = normalizeWords(words);
+        var GROUPS = makeGroups(WORDS);
+        buildCaptions(GROUPS);
+        // set per-group sizing to match the runtime stage
+        GROUPS.forEach(function (_, i) {
+          var el = document.getElementById("caption-group-" + i);
+          el.style.width = SAFE_ZONE_WIDTH + "px";
+          el.style.height = stageHeight + "px";
+        });
 
-      var allGroupEls = GROUPS.map(function (_, i) {
-        return document.getElementById("caption-group-" + i);
-      });
+        var tl = gsap.timeline({ paused: true });
 
-      GROUPS.forEach(function (group, groupIndex) {
-        var groupEl = allGroupEls[groupIndex];
-        var visibleStart = visibleStarts[groupIndex];
-        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+        var visibleStarts = GROUPS.map(function (group, groupIndex) {
+          var prev = GROUPS[groupIndex - 1];
+          var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+          var entryLead = Math.min(ENTRY_DURATION, availableGap);
+          return Math.max(0, group.start - entryLead);
+        });
 
-        allGroupEls.forEach(function (otherEl, otherIndex) {
-          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+        var allGroupEls = GROUPS.map(function (_, i) {
+          return document.getElementById("caption-group-" + i);
         });
 
-        tl.set(groupEl, { opacity: 0, scale: 0.85 }, visibleStart);
-        tl.to(
-          groupEl,
-          { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
-          visibleStart,
-        );
+        GROUPS.forEach(function (group, groupIndex) {
+          var groupEl = allGroupEls[groupIndex];
+          var visibleStart = visibleStarts[groupIndex];
+          var visibleEnd =
+            groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
 
-        if (group.lines.length === 2) {
-          var line1El = document.getElementById("caption-group-" + groupIndex + "-line-0");
-          var line2El = document.getElementById("caption-group-" + groupIndex + "-line-1");
-          var line2FirstWord = group.lines[1].words[0];
-          var switchTime = line2FirstWord.start;
+          allGroupEls.forEach(function (otherEl, otherIndex) {
+            if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+          });
 
+          tl.set(groupEl, { opacity: 0, scale: 0.85 }, visibleStart);
           tl.to(
-            line1El,
-            { fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.out" },
-            switchTime,
+            groupEl,
+            { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+            visibleStart,
           );
-          tl.to(
-            line2El,
-            { fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" },
-            switchTime,
-          );
-        }
 
-        tl.set(groupEl, { opacity: 0 }, visibleEnd);
-      });
+          if (group.lines.length === 2) {
+            var line1El = document.getElementById("caption-group-" + groupIndex + "-line-0");
+            var line2El = document.getElementById("caption-group-" + groupIndex + "-line-1");
+            var line2FirstWord = group.lines[1].words[0];
+            var switchTime = line2FirstWord.start;
+
+            tl.to(
+              line1El,
+              { fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.out" },
+              switchTime,
+            );
+            tl.to(
+              line2El,
+              { fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" },
+              switchTime,
+            );
+          }
+
+          tl.set(groupEl, { opacity: 0 }, visibleEnd);
+        });
+
+        return tl;
+      }
 
-      window.__timelines["caption-weight-shift"] = tl;
+      var hfCurrentTimeline = null;
+
+      function hfAttach(data) {
+        var v = hfValidate(data);
+        if (!v.ok) {
+          hfRunGate([], 0, v.reason);
+          return;
+        }
+        if (hfCurrentTimeline) {
+          hfCurrentTimeline.kill();
+          hfCurrentTimeline = null;
+        }
+        hfTeardown();
+        var layout = hfApplyStageConfig(data, v.durationS);
+        var tl = hfBuild(v.words, layout, v.durationS);
+        tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
+        tl.seek(0);
+        hfCurrentTimeline = tl;
+        window.__timelines = window.__timelines || {};
+        window.__timelines[HF_COMPOSITION_ID] = tl;
+        hfRunGate(v.words, v.durationS, null);
+      }
+      window.__HF_CAPTION_ATTACH__ = hfAttach;
+
+      (function hfBoot() {
+        function start(data) {
+          var ready =
+            document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
+          ready.then(function () {
+            hfAttach(data);
+          });
+        }
+        if (window.__HF_CAPTION__) {
+          start(window.__HF_CAPTION__);
+          return;
+        }
+        fetch("./caption-data.json")
+          .then(function (r) {
+            return r.ok ? r.json() : null;
+          })
+          .catch(function () {
+            return null;
+          })
+          .then(function (json) {
+            start(json || HF_DEMO_DATA);
+          });
+      })();
     </script>
   </body>
 </html>

From 08620b75df5275739fd9b0b8f480527fdc1d9a98 Mon Sep 17 00:00:00 2001
From: vanceingalls <vance@heygen.com>
Date: Thu, 23 Jul 2026 20:46:26 +0000
Subject: [PATCH 02/12] feat(registry): make caption-pill-karaoke data-driven
 via caption-data runtime

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../caption-pill-karaoke.html                 | 359 ++++++++++++++----
 1 file changed, 289 insertions(+), 70 deletions(-)

diff --git a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
index 06b5a4ac2c..712823c802 100644
--- a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
+++ b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
@@ -131,56 +131,199 @@
     </div>
 
     <script>
-      var DURATION = 8;
-      var SAFE_ZONE_WIDTH = 1400;
-      var PILL_MAX_WIDTH = 1400;
+      var HF_COMPOSITION_ID = "caption-pill-karaoke";
+      var HF_ROOT_ID = "pill-karaoke";
+      var HF_GROUP_SELECTOR = ".caption-group";
+
+      var HF_DEMO_DATA = {
+        version: 1,
+        segments: [
+          {
+            start: 0,
+            text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
+            words: [
+              { text: "Every", start: 0.0, end: 0.3 },
+              { text: "great", start: 0.3, end: 0.55 },
+              { text: "video", start: 0.55, end: 0.85 },
+              { text: "starts", start: 0.85, end: 1.1 },
+              { text: "with", start: 1.1, end: 1.25 },
+              { text: "a", start: 1.25, end: 1.35 },
+              { text: "single", start: 1.35, end: 1.65 },
+              { text: "frame.", start: 1.65, end: 2.0 },
+              { text: "HyperFrames", start: 2.1, end: 2.65 },
+              { text: "lets", start: 2.65, end: 2.85 },
+              { text: "you", start: 2.85, end: 2.95 },
+              { text: "write", start: 2.95, end: 3.15 },
+              { text: "HTML", start: 3.15, end: 3.55 },
+              { text: "and", start: 3.55, end: 3.65 },
+              { text: "render", start: 3.65, end: 3.95 },
+              { text: "professional", start: 3.95, end: 4.45 },
+              { text: "video.", start: 4.45, end: 4.8 },
+              { text: "No", start: 4.9, end: 5.05 },
+              { text: "timeline.", start: 5.05, end: 5.45 },
+              { text: "No", start: 5.5, end: 5.65 },
+              { text: "drag", start: 5.65, end: 5.85 },
+              { text: "and", start: 5.85, end: 5.95 },
+              { text: "drop.", start: 5.95, end: 6.25 },
+              { text: "Just", start: 6.35, end: 6.55 },
+              { text: "code", start: 6.55, end: 6.8 },
+              { text: "that", start: 6.8, end: 6.95 },
+              { text: "becomes", start: 6.95, end: 7.3 },
+              { text: "cinema.", start: 7.3, end: 7.7 },
+            ],
+          },
+        ],
+      };
+
+      /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
+      var HF_CONTRACT_VERSION = 1;
+      var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
+
+      function hfFlattenSegments(segments) {
+        var out = [];
+        (segments || []).forEach(function (seg) {
+          ((seg && seg.words) || []).forEach(function (w) {
+            var start = Math.max(0, Number(w.start) || 0);
+            out.push({
+              text: String(w.word || w.text || "").trim(),
+              start: start,
+              end: Math.max(start, Number(w.end) || 0),
+            });
+          });
+        });
+        out.sort(function (a, b) {
+          return a.start - b.start;
+        });
+        return out.filter(function (w) {
+          return w.text.length > 0;
+        });
+      }
+
+      function hfDeriveDuration(words) {
+        var end = 0;
+        words.forEach(function (w) {
+          if (w.end > end) end = w.end;
+        });
+        return end;
+      }
+
+      function hfValidate(data) {
+        if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
+        if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
+          return { ok: false, reason: "unsupported-version" };
+        }
+        if (!Array.isArray(data.segments) || data.segments.length === 0) {
+          return { ok: false, reason: "no-segments" };
+        }
+        if (data.displayMode != null && data.displayMode !== "full") {
+          return { ok: false, reason: "unsupported-displayMode" };
+        }
+        var words = hfFlattenSegments(data.segments);
+        if (words.length === 0) return { ok: false, reason: "no-words" };
+        return { ok: true, words: words, durationS: hfDeriveDuration(words) };
+      }
+
+      function hfApplyStageConfig(data, durationS) {
+        var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
+        var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
+        var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
+        var root = document.getElementById(HF_ROOT_ID);
+        [document.documentElement, document.body, root].forEach(function (el) {
+          el.style.width = W + "px";
+          el.style.height = H + "px";
+        });
+        root.setAttribute("data-width", String(W));
+        root.setAttribute("data-height", String(H));
+        root.setAttribute("data-duration", String(durationS));
+        var brand = (data && data.brand) || {};
+        if (typeof brand.primaryColor === "string" && brand.primaryColor) {
+          root.style.setProperty("--hf-caption-primary", brand.primaryColor);
+        }
+        if (typeof brand.accentColor === "string" && brand.accentColor) {
+          root.style.setProperty("--hf-caption-accent", brand.accentColor);
+        }
+        return { W: W, H: H, scaleX: W / 1920, scaleY: H / 1080, fontScale: Math.min(W, H) / 1080 };
+      }
+
+      function hfPublishStatus(status) {
+        window.__HF_CAPTION_STATUS = status;
+        document
+          .getElementById(HF_ROOT_ID)
+          .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
+      }
+
+      function hfRunGate(words, durationS, failReason) {
+        if (failReason) {
+          hfPublishStatus({
+            ok: false,
+            present: false,
+            contained: false,
+            reason: failReason,
+            version: HF_CONTRACT_VERSION,
+            durationS: durationS || 0,
+          });
+          return;
+        }
+        var root = document.getElementById(HF_ROOT_ID);
+        var rootRect = root.getBoundingClientRect();
+        var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
+        var present = false;
+        var contained = true;
+        var tokens = [];
+        words.forEach(function (w) {
+          var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
+          if (t) tokens.push(t);
+        });
+        groups.forEach(function (el) {
+          var prevOpacity = el.style.opacity;
+          var prevVisibility = el.style.visibility;
+          el.style.opacity = "1";
+          el.style.visibility = "visible";
+          var r = el.getBoundingClientRect();
+          if (r.width > 0 && r.height > 0) {
+            var text = (el.textContent || "").toLowerCase();
+            for (var i = 0; i < tokens.length; i++) {
+              if (text.indexOf(tokens[i]) !== -1) {
+                present = true;
+                break;
+              }
+            }
+            if (
+              r.left < rootRect.left - 1 ||
+              r.right > rootRect.right + 1 ||
+              r.top < rootRect.top - 1 ||
+              r.bottom > rootRect.bottom + 1
+            ) {
+              contained = false;
+            }
+          }
+          el.style.opacity = prevOpacity;
+          el.style.visibility = prevVisibility;
+        });
+        hfPublishStatus({
+          ok: present && contained,
+          present: present,
+          contained: contained,
+          version: HF_CONTRACT_VERSION,
+          durationS: durationS,
+        });
+      }
+
+      var DURATION, SAFE_ZONE_WIDTH, PILL_MAX_WIDTH, BASE_FONT_SIZE, MIN_FONT_SIZE, WORD_SPACING;
       var PILL_MIN_PADDING_X = 30;
       var PILL_MAX_PADDING_X = 60;
       var FONT_WIDTH_SAFETY = 1.18;
       var FONT_FAMILY = "Poppins";
       var FONT_WEIGHT = "700";
-      var BASE_FONT_SIZE = 72;
-      var MIN_FONT_SIZE = 52;
       var MAX_WORDS_PER_GROUP = 4;
-      var WORD_SPACING = 16;
       var PAUSE_THRESHOLD = 0.1;
       var GROUP_END_BUFFER = 0.3;
       var COLOR_INACTIVE = "#A6A6A6";
       var COLOR_ACTIVE = "#1C1E1D";
+      var hfColorActive = COLOR_ACTIVE;
       var COLOR_FADE_DURATION = 0.1;
       var WORD_FADE_LEAD = 0.05;
 
-      var TRANSCRIPT = [
-        { text: "Every", start: 0.0, end: 0.3 },
-        { text: "great", start: 0.3, end: 0.55 },
-        { text: "video", start: 0.55, end: 0.85 },
-        { text: "starts", start: 0.85, end: 1.1 },
-        { text: "with", start: 1.1, end: 1.25 },
-        { text: "a", start: 1.25, end: 1.35 },
-        { text: "single", start: 1.35, end: 1.65 },
-        { text: "frame.", start: 1.65, end: 2.0 },
-        { text: "HyperFrames", start: 2.1, end: 2.65 },
-        { text: "lets", start: 2.65, end: 2.85 },
-        { text: "you", start: 2.85, end: 2.95 },
-        { text: "write", start: 2.95, end: 3.15 },
-        { text: "HTML", start: 3.15, end: 3.55 },
-        { text: "and", start: 3.55, end: 3.65 },
-        { text: "render", start: 3.65, end: 3.95 },
-        { text: "professional", start: 3.95, end: 4.45 },
-        { text: "video.", start: 4.45, end: 4.8 },
-        { text: "No", start: 4.9, end: 5.05 },
-        { text: "timeline.", start: 5.05, end: 5.45 },
-        { text: "No", start: 5.5, end: 5.65 },
-        { text: "drag", start: 5.65, end: 5.85 },
-        { text: "and", start: 5.85, end: 5.95 },
-        { text: "drop.", start: 5.95, end: 6.25 },
-        { text: "Just", start: 6.35, end: 6.55 },
-        { text: "code", start: 6.55, end: 6.8 },
-        { text: "that", start: 6.8, end: 6.95 },
-        { text: "becomes", start: 6.95, end: 7.3 },
-        { text: "cinema.", start: 7.3, end: 7.7 },
-      ];
-
       function normalizeWords(rawWords) {
         return rawWords
           .map(function (item) {
@@ -322,6 +465,7 @@
           });
           var layout = planPillLayout(indexedWords, fontSize);
           pillEl.style.width = layout.pillWidth + "px";
+          pillEl.style.maxWidth = PILL_MAX_WIDTH + "px";
           pillEl.style.paddingLeft = layout.padX + "px";
           pillEl.style.paddingRight = layout.padX + "px";
           layout.lines.slice(0, 2).forEach(function (lineWords) {
@@ -342,41 +486,116 @@
         });
       }
 
-      var WORDS = normalizeWords(TRANSCRIPT);
-      var GROUPS = makeGroups(WORDS);
-      buildCaptions(GROUPS);
-
-      window.__timelines = window.__timelines || {};
-      var tl = gsap.timeline({ paused: true });
-
-      GROUPS.forEach(function (group, groupIndex) {
-        var groupEl = document.getElementById("caption-group-" + groupIndex);
-        var nextGroup = GROUPS[groupIndex + 1];
-        var isLastGroup = groupIndex === GROUPS.length - 1;
-        var effectiveEnd = isLastGroup
-          ? DURATION
-          : Math.min(nextGroup.start, group.end + GROUP_END_BUFFER);
-        var visibleStart = Math.max(0, group.start);
-        var visibleEnd = Math.max(visibleStart + 0.01, effectiveEnd);
-
-        tl.set(groupEl, { opacity: 1 }, visibleStart);
-        tl.set(groupEl, { opacity: 0 }, visibleEnd);
-
-        group.words.forEach(function (word, wordIndex) {
-          var wordEl = document.getElementById("caption-word-" + groupIndex + "-" + wordIndex);
-          var isFirstWord = wordIndex === 0;
-          var wordStart = Math.max(visibleStart, word.start - WORD_FADE_LEAD);
-          tl.set(wordEl, { color: isFirstWord ? COLOR_ACTIVE : COLOR_INACTIVE }, visibleStart);
-          if (isFirstWord) return;
-          tl.to(
-            wordEl,
-            { color: COLOR_ACTIVE, duration: COLOR_FADE_DURATION, ease: "none" },
-            wordStart,
-          );
+      function hfTeardown() {
+        document.getElementById("caption-stage").innerHTML = "";
+      }
+
+      function hfBuild(words, layout, durationS) {
+        DURATION = durationS;
+        BASE_FONT_SIZE = Math.round(72 * layout.fontScale);
+        MIN_FONT_SIZE = Math.round(52 * layout.fontScale);
+        SAFE_ZONE_WIDTH = Math.round(1600 * layout.scaleX);
+        PILL_MAX_WIDTH = SAFE_ZONE_WIDTH;
+        WORD_SPACING = Math.round(16 * layout.fontScale);
+
+        var stage = document.getElementById("caption-stage");
+        var stageHeight = Math.round(220 * layout.fontScale);
+        stage.style.width = SAFE_ZONE_WIDTH + "px";
+        stage.style.height = stageHeight + "px";
+        stage.style.bottom = Math.round(90 * layout.scaleY) + "px";
+
+        var rootEl = document.getElementById(HF_ROOT_ID);
+        var accent = getComputedStyle(rootEl).getPropertyValue("--hf-caption-accent").trim();
+        hfColorActive = accent || COLOR_ACTIVE;
+
+        var WORDS = normalizeWords(words);
+        var GROUPS = makeGroups(WORDS);
+        buildCaptions(GROUPS);
+        GROUPS.forEach(function (_, i) {
+          var el = document.getElementById("caption-group-" + i);
+          el.style.width = SAFE_ZONE_WIDTH + "px";
+          el.style.height = stageHeight + "px";
         });
-      });
 
-      window.__timelines["caption-pill-karaoke"] = tl;
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (group, groupIndex) {
+          var groupEl = document.getElementById("caption-group-" + groupIndex);
+          var nextGroup = GROUPS[groupIndex + 1];
+          var isLastGroup = groupIndex === GROUPS.length - 1;
+          var effectiveEnd = isLastGroup
+            ? DURATION
+            : Math.min(nextGroup.start, group.end + GROUP_END_BUFFER);
+          var visibleStart = Math.max(0, group.start);
+          var visibleEnd = Math.max(visibleStart + 0.01, effectiveEnd);
+
+          tl.set(groupEl, { opacity: 1 }, visibleStart);
+          tl.set(groupEl, { opacity: 0 }, visibleEnd);
+
+          group.words.forEach(function (word, wordIndex) {
+            var wordEl = document.getElementById("caption-word-" + groupIndex + "-" + wordIndex);
+            var isFirstWord = wordIndex === 0;
+            var wordStart = Math.max(visibleStart, word.start - WORD_FADE_LEAD);
+            tl.set(wordEl, { color: isFirstWord ? hfColorActive : COLOR_INACTIVE }, visibleStart);
+            if (isFirstWord) return;
+            tl.to(
+              wordEl,
+              { color: hfColorActive, duration: COLOR_FADE_DURATION, ease: "none" },
+              wordStart,
+            );
+          });
+        });
+
+        return tl;
+      }
+
+      var hfCurrentTimeline = null;
+
+      function hfAttach(data) {
+        var v = hfValidate(data);
+        if (!v.ok) {
+          hfRunGate([], 0, v.reason);
+          return;
+        }
+        if (hfCurrentTimeline) {
+          hfCurrentTimeline.kill();
+          hfCurrentTimeline = null;
+        }
+        hfTeardown();
+        var layout = hfApplyStageConfig(data, v.durationS);
+        var tl = hfBuild(v.words, layout, v.durationS);
+        tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
+        tl.seek(0);
+        hfCurrentTimeline = tl;
+        window.__timelines = window.__timelines || {};
+        window.__timelines[HF_COMPOSITION_ID] = tl;
+        hfRunGate(v.words, v.durationS, null);
+      }
+      window.__HF_CAPTION_ATTACH__ = hfAttach;
+
+      (function hfBoot() {
+        function start(data) {
+          var ready =
+            document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
+          ready.then(function () {
+            hfAttach(data);
+          });
+        }
+        if (window.__HF_CAPTION__) {
+          start(window.__HF_CAPTION__);
+          return;
+        }
+        fetch("./caption-data.json")
+          .then(function (r) {
+            return r.ok ? r.json() : null;
+          })
+          .catch(function () {
+            return null;
+          })
+          .then(function (json) {
+            start(json || HF_DEMO_DATA);
+          });
+      })();
     </script>
   </body>
 </html>

From 020c8986f46f795757203900cd251ad551ccc620 Mon Sep 17 00:00:00 2001
From: vanceingalls <vance@heygen.com>
Date: Thu, 23 Jul 2026 21:01:24 +0000
Subject: [PATCH 03/12] =?UTF-8?q?fix(registry):=20force=20GSAP=20render=20?=
 =?UTF-8?q?at=20attach=20=E2=80=94=20seek(0)=20is=20a=20no-op=20on=20a=20f?=
 =?UTF-8?q?resh=20timeline?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../caption-pill-karaoke/caption-pill-karaoke.html          | 6 +++++-
 .../caption-weight-shift/caption-weight-shift.html          | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
index 712823c802..741048027c 100644
--- a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
+++ b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
@@ -565,7 +565,11 @@
         var layout = hfApplyStageConfig(data, v.durationS);
         var tl = hfBuild(v.words, layout, v.durationS);
         tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
-        tl.seek(0);
+        // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
+        // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
+        // at t=0 — the first frame would show pre-timeline CSS defaults (usually
+        // hidden). render(time, suppressEvents, force) with force=true bypasses that.
+        tl.render(0, true, true);
         hfCurrentTimeline = tl;
         window.__timelines = window.__timelines || {};
         window.__timelines[HF_COMPOSITION_ID] = tl;
diff --git a/registry/components/caption-weight-shift/caption-weight-shift.html b/registry/components/caption-weight-shift/caption-weight-shift.html
index 8bcfbe9fbf..2ead4d717f 100644
--- a/registry/components/caption-weight-shift/caption-weight-shift.html
+++ b/registry/components/caption-weight-shift/caption-weight-shift.html
@@ -580,7 +580,11 @@
         var layout = hfApplyStageConfig(data, v.durationS);
         var tl = hfBuild(v.words, layout, v.durationS);
         tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
-        tl.seek(0);
+        // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
+        // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
+        // at t=0 — the first frame would show pre-timeline CSS defaults (usually
+        // hidden). render(time, suppressEvents, force) with force=true bypasses that.
+        tl.render(0, true, true);
         hfCurrentTimeline = tl;
         window.__timelines = window.__timelines || {};
         window.__timelines[HF_COMPOSITION_ID] = tl;

From 392a9d251a4feadbf7703ba4f9157c1857c7a59b Mon Sep 17 00:00:00 2001
From: vanceingalls <vance@heygen.com>
Date: Thu, 23 Jul 2026 21:31:46 +0000
Subject: [PATCH 04/12] feat(registry): make caption-emoji-pop data-driven with
 generic emoji lexicon

Retrofits caption-emoji-pop onto the shared HyperFrames caption-data runtime
(Blocks A-D) and the emphasis heuristic (Block E), replacing the hardcoded
7-word emoji map, fixed KEYWORDS set, and TRANSITION_WORDS set with a
generic ~40-entry lexicon and HF_STOPWORDS/hfIsEmphasisWord. The component
now consumes brand.primaryColor (hfPrimaryColor) and brand.accentColor
(hfAccentColors) and rescales stage/font/emoji sizing to the runtime
resolution via layout.fontScale/scaleX/scaleY.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../caption-emoji-pop/caption-emoji-pop.html  | 511 ++++++++++++++----
 1 file changed, 415 insertions(+), 96 deletions(-)

diff --git a/registry/components/caption-emoji-pop/caption-emoji-pop.html b/registry/components/caption-emoji-pop/caption-emoji-pop.html
index f8a863d2e8..d4107123b0 100644
--- a/registry/components/caption-emoji-pop/caption-emoji-pop.html
+++ b/registry/components/caption-emoji-pop/caption-emoji-pop.html
@@ -125,22 +125,185 @@
     </div>
 
     <script>
-      var DURATION = 8;
-      var SAFE_ZONE_WIDTH = 1400;
-      var CAPTION_FONT_SIZE = 72;
-      var MAX_WORDS_PER_GROUP = 3;
-      var WORD_SPACING = 14;
-      var PAUSE_THRESHOLD = 0.1;
-      var ENTRY_FRAMES = 4;
-      var EXIT_FRAMES = 3;
-      var FPS = 30;
-      var ENTRY_DURATION = ENTRY_FRAMES / FPS;
-      var EXIT_DURATION = EXIT_FRAMES / FPS;
-      var FONT_WIDTH_SAFETY = 1.14;
-      var PRIMARY_COLOR = "#FFFFFF";
-      var ACCENT_COLORS = ["#FF76FF", "#FF0002", "#B2F7FF"];
-      var KEYWORDS = new Set(["hyperframes", "html", "professional", "code", "cinema"]);
-      var TRANSITION_WORDS = new Set([
+      var HF_COMPOSITION_ID = "caption-emoji-pop";
+      var HF_ROOT_ID = "emoji-pop";
+      var HF_GROUP_SELECTOR = ".caption-group";
+
+      var HF_DEMO_DATA = {
+        version: 1,
+        segments: [
+          {
+            start: 0,
+            text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
+            words: [
+              { text: "Every", start: 0.0, end: 0.3 },
+              { text: "great", start: 0.3, end: 0.55 },
+              { text: "video", start: 0.55, end: 0.85 },
+              { text: "starts", start: 0.85, end: 1.1 },
+              { text: "with", start: 1.1, end: 1.25 },
+              { text: "a", start: 1.25, end: 1.35 },
+              { text: "single", start: 1.35, end: 1.65 },
+              { text: "frame.", start: 1.65, end: 2.0 },
+              { text: "HyperFrames", start: 2.1, end: 2.65 },
+              { text: "lets", start: 2.65, end: 2.85 },
+              { text: "you", start: 2.85, end: 2.95 },
+              { text: "write", start: 2.95, end: 3.15 },
+              { text: "HTML", start: 3.15, end: 3.55 },
+              { text: "and", start: 3.55, end: 3.65 },
+              { text: "render", start: 3.65, end: 3.95 },
+              { text: "professional", start: 3.95, end: 4.45 },
+              { text: "video.", start: 4.45, end: 4.8 },
+              { text: "No", start: 4.9, end: 5.05 },
+              { text: "timeline.", start: 5.05, end: 5.45 },
+              { text: "No", start: 5.5, end: 5.65 },
+              { text: "drag", start: 5.65, end: 5.85 },
+              { text: "and", start: 5.85, end: 5.95 },
+              { text: "drop.", start: 5.95, end: 6.25 },
+              { text: "Just", start: 6.35, end: 6.55 },
+              { text: "code", start: 6.55, end: 6.8 },
+              { text: "that", start: 6.8, end: 6.95 },
+              { text: "becomes", start: 6.95, end: 7.3 },
+              { text: "cinema.", start: 7.3, end: 7.7 },
+            ],
+          },
+        ],
+      };
+
+      /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
+      var HF_CONTRACT_VERSION = 1;
+      var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
+
+      function hfFlattenSegments(segments) {
+        var out = [];
+        (segments || []).forEach(function (seg) {
+          ((seg && seg.words) || []).forEach(function (w) {
+            var start = Math.max(0, Number(w.start) || 0);
+            out.push({
+              text: String(w.word || w.text || "").trim(),
+              start: start,
+              end: Math.max(start, Number(w.end) || 0),
+            });
+          });
+        });
+        out.sort(function (a, b) {
+          return a.start - b.start;
+        });
+        return out.filter(function (w) {
+          return w.text.length > 0;
+        });
+      }
+
+      function hfDeriveDuration(words) {
+        var end = 0;
+        words.forEach(function (w) {
+          if (w.end > end) end = w.end;
+        });
+        return end;
+      }
+
+      function hfValidate(data) {
+        if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
+        if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
+          return { ok: false, reason: "unsupported-version" };
+        }
+        if (!Array.isArray(data.segments) || data.segments.length === 0) {
+          return { ok: false, reason: "no-segments" };
+        }
+        if (data.displayMode != null && data.displayMode !== "full") {
+          return { ok: false, reason: "unsupported-displayMode" };
+        }
+        var words = hfFlattenSegments(data.segments);
+        if (words.length === 0) return { ok: false, reason: "no-words" };
+        return { ok: true, words: words, durationS: hfDeriveDuration(words) };
+      }
+
+      function hfApplyStageConfig(data, durationS) {
+        var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
+        var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
+        var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
+        var root = document.getElementById(HF_ROOT_ID);
+        [document.documentElement, document.body, root].forEach(function (el) {
+          el.style.width = W + "px";
+          el.style.height = H + "px";
+        });
+        root.setAttribute("data-width", String(W));
+        root.setAttribute("data-height", String(H));
+        root.setAttribute("data-duration", String(durationS));
+        var brand = (data && data.brand) || {};
+        if (typeof brand.primaryColor === "string" && brand.primaryColor) {
+          root.style.setProperty("--hf-caption-primary", brand.primaryColor);
+        }
+        if (typeof brand.accentColor === "string" && brand.accentColor) {
+          root.style.setProperty("--hf-caption-accent", brand.accentColor);
+        }
+        return { W: W, H: H, scaleX: W / 1920, scaleY: H / 1080, fontScale: Math.min(W, H) / 1080 };
+      }
+
+      function hfPublishStatus(status) {
+        window.__HF_CAPTION_STATUS = status;
+        document
+          .getElementById(HF_ROOT_ID)
+          .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
+      }
+
+      function hfRunGate(words, durationS, failReason) {
+        if (failReason) {
+          hfPublishStatus({
+            ok: false,
+            present: false,
+            contained: false,
+            reason: failReason,
+            version: HF_CONTRACT_VERSION,
+            durationS: durationS || 0,
+          });
+          return;
+        }
+        var root = document.getElementById(HF_ROOT_ID);
+        var rootRect = root.getBoundingClientRect();
+        var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
+        var present = false;
+        var contained = true;
+        var tokens = [];
+        words.forEach(function (w) {
+          var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
+          if (t) tokens.push(t);
+        });
+        groups.forEach(function (el) {
+          var prevOpacity = el.style.opacity;
+          var prevVisibility = el.style.visibility;
+          el.style.opacity = "1";
+          el.style.visibility = "visible";
+          var r = el.getBoundingClientRect();
+          if (r.width > 0 && r.height > 0) {
+            var text = (el.textContent || "").toLowerCase();
+            for (var i = 0; i < tokens.length; i++) {
+              if (text.indexOf(tokens[i]) !== -1) {
+                present = true;
+                break;
+              }
+            }
+            if (
+              r.left < rootRect.left - 1 ||
+              r.right > rootRect.right + 1 ||
+              r.top < rootRect.top - 1 ||
+              r.bottom > rootRect.bottom + 1
+            ) {
+              contained = false;
+            }
+          }
+          el.style.opacity = prevOpacity;
+          el.style.visibility = prevVisibility;
+        });
+        hfPublishStatus({
+          ok: present && contained,
+          present: present,
+          contained: contained,
+          version: HF_CONTRACT_VERSION,
+          durationS: durationS,
+        });
+      }
+
+      var HF_STOPWORDS = new Set([
         "the",
         "a",
         "an",
@@ -193,50 +356,116 @@
         "up",
         "out",
         "about",
+        "into",
+        "over",
+        "after",
+        "before",
+        "your",
+        "you",
+        "our",
+        "we",
+        "they",
+        "them",
+        "their",
+        "there",
+        "here",
+        "when",
+        "what",
+        "which",
+        "who",
+        "how",
+        "all",
+        "any",
+        "some",
+        "more",
+        "most",
+        "other",
+        "than",
+        "too",
+        "very",
+        "also",
+        "because",
       ]);
 
-      // Emoji map for key words
+      function hfIsEmphasisWord(text) {
+        var clean = String(text)
+          .toLowerCase()
+          .replace(/[^a-z]/g, "");
+        return clean.length >= 5 && !HF_STOPWORDS.has(clean);
+      }
+
+      var DURATION, SAFE_ZONE_WIDTH, CAPTION_FONT_SIZE, WORD_SPACING;
+      var MAX_WORDS_PER_GROUP = 3;
+      var PAUSE_THRESHOLD = 0.1;
+      var ENTRY_FRAMES = 4;
+      var EXIT_FRAMES = 3;
+      var FPS = 30;
+      var ENTRY_DURATION = ENTRY_FRAMES / FPS;
+      var EXIT_DURATION = EXIT_FRAMES / FPS;
+      var FONT_WIDTH_SAFETY = 1.14;
+      var PRIMARY_COLOR = "#FFFFFF";
+      var ACCENT_COLORS = ["#FF76FF", "#FF0002", "#B2F7FF"];
+      var hfPrimaryColor = PRIMARY_COLOR;
+      var hfAccentColors = ACCENT_COLORS;
+      var hfFontScale = 1;
+
+      // Emoji map for a generic keyword lexicon (not tied to the demo transcript)
       var WORD_EMOJI = {
-        hyperframes: "🎬",
-        html: "💻",
-        professional: "✨",
-        code: "⌨️",
+        amazing: "🤩",
+        awesome: "🔥",
+        big: "🐘",
+        brain: "🧠",
+        build: "🛠️",
+        built: "🛠️",
+        celebrate: "🎉",
+        change: "🔄",
         cinema: "🎥",
-        video: "📹",
+        code: "⌨️",
+        customers: "🤝",
+        data: "📊",
+        dream: "💭",
+        easy: "👌",
+        fast: "⚡",
+        fire: "🔥",
         frame: "🖼️",
+        free: "🎁",
+        fun: "🎈",
+        future: "🔮",
+        global: "🌍",
+        grow: "📈",
+        growth: "📈",
+        heart: "❤️",
+        huge: "🐘",
+        idea: "💡",
+        launch: "🚀",
+        learn: "📚",
+        love: "❤️",
+        magic: "✨",
+        money: "💰",
+        music: "🎵",
+        new: "✨",
+        party: "🎉",
+        perfect: "💯",
+        power: "💪",
+        professional: "✨",
+        rocket: "🚀",
+        save: "🛟",
+        saves: "🛟",
+        secret: "🤫",
+        smart: "🧠",
+        star: "⭐",
+        stop: "✋",
+        strong: "💪",
+        success: "🏆",
+        team: "👥",
+        time: "⏰",
+        today: "📅",
+        video: "📹",
+        win: "🏆",
+        world: "🌍",
+        wow: "😮",
       };
 
-      var TRANSCRIPT = [
-        { text: "Every", start: 0.0, end: 0.3 },
-        { text: "great", start: 0.3, end: 0.55 },
-        { text: "video", start: 0.55, end: 0.85 },
-        { text: "starts", start: 0.85, end: 1.1 },
-        { text: "with", start: 1.1, end: 1.25 },
-        { text: "a", start: 1.25, end: 1.35 },
-        { text: "single", start: 1.35, end: 1.65 },
-        { text: "frame.", start: 1.65, end: 2.0 },
-        { text: "HyperFrames", start: 2.1, end: 2.65 },
-        { text: "lets", start: 2.65, end: 2.85 },
-        { text: "you", start: 2.85, end: 2.95 },
-        { text: "write", start: 2.95, end: 3.15 },
-        { text: "HTML", start: 3.15, end: 3.55 },
-        { text: "and", start: 3.55, end: 3.65 },
-        { text: "render", start: 3.65, end: 3.95 },
-        { text: "professional", start: 3.95, end: 4.45 },
-        { text: "video.", start: 4.45, end: 4.8 },
-        { text: "No", start: 4.9, end: 5.05 },
-        { text: "timeline.", start: 5.05, end: 5.45 },
-        { text: "No", start: 5.5, end: 5.65 },
-        { text: "drag", start: 5.65, end: 5.85 },
-        { text: "and", start: 5.85, end: 5.95 },
-        { text: "drop.", start: 5.95, end: 6.25 },
-        { text: "Just", start: 6.35, end: 6.55 },
-        { text: "code", start: 6.55, end: 6.8 },
-        { text: "that", start: 6.8, end: 6.95 },
-        { text: "becomes", start: 6.95, end: 7.3 },
-        { text: "cinema.", start: 7.3, end: 7.7 },
-      ];
-
       function normalizeWords(rawWords) {
         return rawWords
           .map(function (item) {
@@ -262,17 +491,17 @@
       function assignWordColors(words, groupIndex) {
         return words.map(function (word, index) {
           var clean = word.text.toLowerCase().replace(/[^a-z]/g, "");
-          if (KEYWORDS.has(clean)) {
-            var ci = Math.floor(seededRandom(groupIndex * 23 + index * 31) * ACCENT_COLORS.length);
-            return ACCENT_COLORS[ci];
+          if (hfIsEmphasisWord(word.text)) {
+            var ci = Math.floor(seededRandom(groupIndex * 23 + index * 31) * hfAccentColors.length);
+            return hfAccentColors[ci];
           }
-          if (TRANSITION_WORDS.has(clean)) return PRIMARY_COLOR;
+          if (HF_STOPWORDS.has(clean)) return hfPrimaryColor;
           var rand = seededRandom(groupIndex * 13 + index);
           if (rand > 0.55) {
-            var ci2 = Math.floor(rand * ACCENT_COLORS.length) % ACCENT_COLORS.length;
-            return ACCENT_COLORS[ci2];
+            var ci2 = Math.floor(rand * hfAccentColors.length) % hfAccentColors.length;
+            return hfAccentColors[ci2];
           }
-          return PRIMARY_COLOR;
+          return hfPrimaryColor;
         });
       }
 
@@ -398,13 +627,14 @@
             var emojiEl = document.createElement("div");
             emojiEl.className = "caption-emoji";
             emojiEl.textContent = group.emoji;
+            emojiEl.style.fontSize = Math.round(56 * hfFontScale) + "px";
             groupEl.appendChild(emojiEl);
           }
 
           var lineEl = document.createElement("div");
           lineEl.className = "caption-line";
           group.words.forEach(function (word, wordIndex) {
-            var color = group.colors[wordIndex] || PRIMARY_COLOR;
+            var color = group.colors[wordIndex] || hfPrimaryColor;
             var wordEl = document.createElement("span");
             wordEl.className = "caption-word";
             wordEl.textContent = word.text.toUpperCase();
@@ -419,49 +649,138 @@
         });
       }
 
-      var WORDS = normalizeWords(TRANSCRIPT);
-      var GROUPS = makeGroups(WORDS);
-      buildCaptions(GROUPS);
+      function hfTeardown() {
+        document.getElementById("caption-stage").innerHTML = "";
+      }
+
+      function hfBuild(words, layout, durationS) {
+        DURATION = durationS;
+        CAPTION_FONT_SIZE = Math.round(72 * layout.fontScale);
+        SAFE_ZONE_WIDTH = Math.round(1400 * layout.scaleX);
+        WORD_SPACING = Math.round(14 * layout.fontScale);
+        hfFontScale = layout.fontScale;
+
+        var stage = document.getElementById("caption-stage");
+        var stageHeight = Math.round(280 * layout.fontScale);
+        stage.style.width = SAFE_ZONE_WIDTH + "px";
+        stage.style.height = stageHeight + "px";
+        stage.style.bottom = Math.round(80 * layout.scaleY) + "px";
+
+        var rootEl = document.getElementById(HF_ROOT_ID);
+        var primary = getComputedStyle(rootEl).getPropertyValue("--hf-caption-primary").trim();
+        var accent = getComputedStyle(rootEl).getPropertyValue("--hf-caption-accent").trim();
+        hfPrimaryColor = /^#[0-9a-f]{6}$/i.test(primary) ? primary : "#FFFFFF";
+        hfAccentColors = /^#[0-9a-f]{6}$/i.test(accent)
+          ? [accent]
+          : ["#FF76FF", "#FF0002", "#B2F7FF"];
+
+        var WORDS = normalizeWords(words);
+        var GROUPS = makeGroups(WORDS);
+        buildCaptions(GROUPS);
+        GROUPS.forEach(function (_, i) {
+          var el = document.getElementById("caption-group-" + i);
+          el.style.width = SAFE_ZONE_WIDTH + "px";
+          el.style.height = stageHeight + "px";
+        });
+
+        var tl = gsap.timeline({ paused: true });
 
-      window.__timelines = window.__timelines || {};
-      var tl = gsap.timeline({ paused: true });
+        var visibleStarts = GROUPS.map(function (group, groupIndex) {
+          var prev = GROUPS[groupIndex - 1];
+          var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+          var entryLead = Math.min(ENTRY_DURATION, availableGap);
+          return Math.max(0, group.start - entryLead);
+        });
 
-      var visibleStarts = GROUPS.map(function (group, groupIndex) {
-        var prev = GROUPS[groupIndex - 1];
-        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
-        var entryLead = Math.min(ENTRY_DURATION, availableGap);
-        return Math.max(0, group.start - entryLead);
-      });
+        var allGroupEls = GROUPS.map(function (_, i) {
+          return document.getElementById("caption-group-" + i);
+        });
 
-      var allGroupEls = GROUPS.map(function (_, i) {
-        return document.getElementById("caption-group-" + i);
-      });
+        GROUPS.forEach(function (group, groupIndex) {
+          var groupEl = allGroupEls[groupIndex];
+          var visibleStart = visibleStarts[groupIndex];
+          var visibleEnd =
+            groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+          var exitStart = Math.max(visibleStart, visibleEnd - EXIT_DURATION);
 
-      GROUPS.forEach(function (group, groupIndex) {
-        var groupEl = allGroupEls[groupIndex];
-        var visibleStart = visibleStarts[groupIndex];
-        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
-        var exitStart = Math.max(visibleStart, visibleEnd - EXIT_DURATION);
+          allGroupEls.forEach(function (otherEl, otherIndex) {
+            if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+          });
 
-        allGroupEls.forEach(function (otherEl, otherIndex) {
-          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+          tl.set(groupEl, { opacity: 0, scaleX: 0.8, scaleY: 1 }, visibleStart);
+          tl.to(
+            groupEl,
+            { opacity: 1, scaleX: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+            visibleStart,
+          );
+          tl.to(
+            groupEl,
+            {
+              scaleX: 0.75,
+              opacity: 0.8,
+              duration: EXIT_DURATION,
+              ease: "power2.in",
+              force3D: true,
+            },
+            exitStart,
+          );
+          tl.set(groupEl, { opacity: 0 }, visibleEnd);
         });
 
-        tl.set(groupEl, { opacity: 0, scaleX: 0.8, scaleY: 1 }, visibleStart);
-        tl.to(
-          groupEl,
-          { opacity: 1, scaleX: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
-          visibleStart,
-        );
-        tl.to(
-          groupEl,
-          { scaleX: 0.75, opacity: 0.8, duration: EXIT_DURATION, ease: "power2.in", force3D: true },
-          exitStart,
-        );
-        tl.set(groupEl, { opacity: 0 }, visibleEnd);
-      });
+        return tl;
+      }
 
-      window.__timelines["caption-emoji-pop"] = tl;
+      var hfCurrentTimeline = null;
+
+      function hfAttach(data) {
+        var v = hfValidate(data);
+        if (!v.ok) {
+          hfRunGate([], 0, v.reason);
+          return;
+        }
+        if (hfCurrentTimeline) {
+          hfCurrentTimeline.kill();
+          hfCurrentTimeline = null;
+        }
+        hfTeardown();
+        var layout = hfApplyStageConfig(data, v.durationS);
+        var tl = hfBuild(v.words, layout, v.durationS);
+        tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
+        // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
+        // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
+        // at t=0 — the first frame would show pre-timeline CSS defaults (usually
+        // hidden). render(time, suppressEvents, force) with force=true bypasses that.
+        tl.render(0, true, true);
+        hfCurrentTimeline = tl;
+        window.__timelines = window.__timelines || {};
+        window.__timelines[HF_COMPOSITION_ID] = tl;
+        hfRunGate(v.words, v.durationS, null);
+      }
+      window.__HF_CAPTION_ATTACH__ = hfAttach;
+
+      (function hfBoot() {
+        function start(data) {
+          var ready =
+            document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
+          ready.then(function () {
+            hfAttach(data);
+          });
+        }
+        if (window.__HF_CAPTION__) {
+          start(window.__HF_CAPTION__);
+          return;
+        }
+        fetch("./caption-data.json")
+          .then(function (r) {
+            return r.ok ? r.json() : null;
+          })
+          .catch(function () {
+            return null;
+          })
+          .then(function (json) {
+            start(json || HF_DEMO_DATA);
+          });
+      })();
     </script>
   </body>
 </html>

From 7d4e71d10b617b858fde2e764e15d530e9ffdf19 Mon Sep 17 00:00:00 2001
From: vanceingalls <vance@heygen.com>
Date: Thu, 23 Jul 2026 21:52:56 +0000
Subject: [PATCH 05/12] feat(registry): make caption-highlight data-driven with
 automatic grouping

Replaces the hardcoded RAW_GROUPS index-pair array with hfMakeGroups, a
real fitting/pause/punctuation-based grouper, and wires the component
into the shared caption-data runtime (validate/gate/attach). Adds CSS
brand hooks: .hl-word text color from --hf-caption-primary, .hl-word-bg
gradient from --hf-caption-accent (second stop via color-mix()).
---
 .../caption-highlight/caption-highlight.html  | 462 ++++++++++++++----
 1 file changed, 356 insertions(+), 106 deletions(-)

diff --git a/registry/components/caption-highlight/caption-highlight.html b/registry/components/caption-highlight/caption-highlight.html
index 2617005887..b53e981803 100644
--- a/registry/components/caption-highlight/caption-highlight.html
+++ b/registry/components/caption-highlight/caption-highlight.html
@@ -73,7 +73,7 @@
         font-weight: 800;
         font-size: 80px;
         text-transform: uppercase;
-        color: #ffffff;
+        color: var(--hf-caption-primary, #ffffff);
         display: inline-block;
         letter-spacing: 0.02em;
         line-height: 1;
@@ -86,7 +86,11 @@
       .hl-word-bg {
         position: absolute;
         inset: 0;
-        background: linear-gradient(135deg, #ff1745 0%, #df1238 100%);
+        background: linear-gradient(
+          135deg,
+          var(--hf-caption-accent, #ff1745) 0%,
+          color-mix(in srgb, var(--hf-caption-accent, #ff1745) 82%, #000) 100%
+        );
         border-radius: 10px;
         box-shadow: 0 12px 30px rgba(229, 20, 58, 0.32);
         opacity: 0;
@@ -117,6 +121,10 @@
 
     <script>
       (function () {
+        var HF_COMPOSITION_ID = "caption-highlight";
+        var HF_ROOT_ID = "highlight";
+        var HF_GROUP_SELECTOR = ".hl-group";
+
         window.__timelines = window.__timelines || {};
 
         var _fitCanvas = document.createElement("canvas");
@@ -132,129 +140,371 @@
           return minSize;
         }
 
-        var WORDS = [
-          { text: "Every", start: 0.0, end: 0.3 },
-          { text: "great", start: 0.3, end: 0.55 },
-          { text: "video", start: 0.55, end: 0.85 },
-          { text: "starts", start: 0.85, end: 1.1 },
-          { text: "with", start: 1.1, end: 1.25 },
-          { text: "a", start: 1.25, end: 1.35 },
-          { text: "single", start: 1.35, end: 1.65 },
-          { text: "frame.", start: 1.65, end: 2.0 },
-          { text: "HyperFrames", start: 2.1, end: 2.65 },
-          { text: "lets", start: 2.65, end: 2.85 },
-          { text: "you", start: 2.85, end: 2.95 },
-          { text: "write", start: 2.95, end: 3.15 },
-          { text: "HTML", start: 3.15, end: 3.55 },
-          { text: "and", start: 3.55, end: 3.65 },
-          { text: "render", start: 3.65, end: 3.95 },
-          { text: "professional", start: 3.95, end: 4.45 },
-          { text: "video.", start: 4.45, end: 4.8 },
-          { text: "No", start: 4.9, end: 5.05 },
-          { text: "timeline.", start: 5.05, end: 5.45 },
-          { text: "No", start: 5.5, end: 5.65 },
-          { text: "drag", start: 5.65, end: 5.85 },
-          { text: "and", start: 5.85, end: 5.95 },
-          { text: "drop.", start: 5.95, end: 6.25 },
-          { text: "Just", start: 6.35, end: 6.55 },
-          { text: "code", start: 6.55, end: 6.8 },
-          { text: "that", start: 6.8, end: 6.95 },
-          { text: "becomes", start: 6.95, end: 7.3 },
-          { text: "cinema.", start: 7.3, end: 7.7 },
-        ];
+        var HF_DEMO_DATA = {
+          version: 1,
+          segments: [
+            {
+              start: 0,
+              text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
+              words: [
+                { text: "Every", start: 0.0, end: 0.3 },
+                { text: "great", start: 0.3, end: 0.55 },
+                { text: "video", start: 0.55, end: 0.85 },
+                { text: "starts", start: 0.85, end: 1.1 },
+                { text: "with", start: 1.1, end: 1.25 },
+                { text: "a", start: 1.25, end: 1.35 },
+                { text: "single", start: 1.35, end: 1.65 },
+                { text: "frame.", start: 1.65, end: 2.0 },
+                { text: "HyperFrames", start: 2.1, end: 2.65 },
+                { text: "lets", start: 2.65, end: 2.85 },
+                { text: "you", start: 2.85, end: 2.95 },
+                { text: "write", start: 2.95, end: 3.15 },
+                { text: "HTML", start: 3.15, end: 3.55 },
+                { text: "and", start: 3.55, end: 3.65 },
+                { text: "render", start: 3.65, end: 3.95 },
+                { text: "professional", start: 3.95, end: 4.45 },
+                { text: "video.", start: 4.45, end: 4.8 },
+                { text: "No", start: 4.9, end: 5.05 },
+                { text: "timeline.", start: 5.05, end: 5.45 },
+                { text: "No", start: 5.5, end: 5.65 },
+                { text: "drag", start: 5.65, end: 5.85 },
+                { text: "and", start: 5.85, end: 5.95 },
+                { text: "drop.", start: 5.95, end: 6.25 },
+                { text: "Just", start: 6.35, end: 6.55 },
+                { text: "code", start: 6.55, end: 6.8 },
+                { text: "that", start: 6.8, end: 6.95 },
+                { text: "becomes", start: 6.95, end: 7.3 },
+                { text: "cinema.", start: 7.3, end: 7.7 },
+              ],
+            },
+          ],
+        };
 
-        var RAW_GROUPS = [
-          [0, 3],
-          [4, 7],
-          [8, 8],
-          [9, 12],
-          [13, 15],
-          [16, 16],
-          [17, 19],
-          [20, 22],
-          [23, 24],
-          [25, 27],
-        ];
-        var GROUPS = RAW_GROUPS.map(function (pair, gi) {
-          var ws = pair[0],
-            we = pair[1];
-          var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;
-          var gEnd = Math.min(WORDS[we].end + 0.5, nextStart - 0.05);
-          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
-        });
+        /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
+        var HF_CONTRACT_VERSION = 1;
+        var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
 
-        var container = document.getElementById("hl-container");
-        var tl = gsap.timeline({ paused: true });
+        function hfFlattenSegments(segments) {
+          var out = [];
+          (segments || []).forEach(function (seg) {
+            ((seg && seg.words) || []).forEach(function (w) {
+              var start = Math.max(0, Number(w.start) || 0);
+              out.push({
+                text: String(w.word || w.text || "").trim(),
+                start: start,
+                end: Math.max(start, Number(w.end) || 0),
+              });
+            });
+          });
+          out.sort(function (a, b) {
+            return a.start - b.start;
+          });
+          return out.filter(function (w) {
+            return w.text.length > 0;
+          });
+        }
 
-        GROUPS.forEach(function (g, gi) {
-          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
-          var grp = document.createElement("div");
-          grp.className = "hl-group";
-          grp.id = "hl-grp-" + gi;
+        function hfDeriveDuration(words) {
+          var end = 0;
+          words.forEach(function (w) {
+            if (w.end > end) end = w.end;
+          });
+          return end;
+        }
 
-          var groupText = groupWords
-            .map(function (w) {
-              return w.text.toUpperCase();
-            })
-            .join(" ");
-          var computedSize = fitFontSize(groupText, 80, "800", "Montserrat", 1620);
+        function hfValidate(data) {
+          if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
+          if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
+            return { ok: false, reason: "unsupported-version" };
+          }
+          if (!Array.isArray(data.segments) || data.segments.length === 0) {
+            return { ok: false, reason: "no-segments" };
+          }
+          if (data.displayMode != null && data.displayMode !== "full") {
+            return { ok: false, reason: "unsupported-displayMode" };
+          }
+          var words = hfFlattenSegments(data.segments);
+          if (words.length === 0) return { ok: false, reason: "no-words" };
+          return { ok: true, words: words, durationS: hfDeriveDuration(words) };
+        }
+
+        function hfApplyStageConfig(data, durationS) {
+          var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
+          var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
+          var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
+          var root = document.getElementById(HF_ROOT_ID);
+          [document.documentElement, document.body, root].forEach(function (el) {
+            el.style.width = W + "px";
+            el.style.height = H + "px";
+          });
+          root.setAttribute("data-width", String(W));
+          root.setAttribute("data-height", String(H));
+          root.setAttribute("data-duration", String(durationS));
+          var brand = (data && data.brand) || {};
+          if (typeof brand.primaryColor === "string" && brand.primaryColor) {
+            root.style.setProperty("--hf-caption-primary", brand.primaryColor);
+          }
+          if (typeof brand.accentColor === "string" && brand.accentColor) {
+            root.style.setProperty("--hf-caption-accent", brand.accentColor);
+          }
+          return {
+            W: W,
+            H: H,
+            scaleX: W / 1920,
+            scaleY: H / 1080,
+            fontScale: Math.min(W, H) / 1080,
+          };
+        }
 
-          groupWords.forEach(function (w, i) {
-            var wi = g.wordStart + i;
-            var wordEl = document.createElement("span");
-            wordEl.className = "hl-word";
-            wordEl.id = "hl-w-" + wi;
-            wordEl.style.fontSize = computedSize + "px";
+        function hfPublishStatus(status) {
+          window.__HF_CAPTION_STATUS = status;
+          document
+            .getElementById(HF_ROOT_ID)
+            .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
+        }
 
-            var bgEl = document.createElement("span");
-            bgEl.className = "hl-word-bg";
-            bgEl.id = "hl-bg-" + wi;
+        function hfRunGate(words, durationS, failReason) {
+          if (failReason) {
+            hfPublishStatus({
+              ok: false,
+              present: false,
+              contained: false,
+              reason: failReason,
+              version: HF_CONTRACT_VERSION,
+              durationS: durationS || 0,
+            });
+            return;
+          }
+          var root = document.getElementById(HF_ROOT_ID);
+          var rootRect = root.getBoundingClientRect();
+          var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
+          var present = false;
+          var contained = true;
+          var tokens = [];
+          words.forEach(function (w) {
+            var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
+            if (t) tokens.push(t);
+          });
+          groups.forEach(function (el) {
+            var prevOpacity = el.style.opacity;
+            var prevVisibility = el.style.visibility;
+            el.style.opacity = "1";
+            el.style.visibility = "visible";
+            var r = el.getBoundingClientRect();
+            if (r.width > 0 && r.height > 0) {
+              var text = (el.textContent || "").toLowerCase();
+              for (var i = 0; i < tokens.length; i++) {
+                if (text.indexOf(tokens[i]) !== -1) {
+                  present = true;
+                  break;
+                }
+              }
+              if (
+                r.left < rootRect.left - 1 ||
+                r.right > rootRect.right + 1 ||
+                r.top < rootRect.top - 1 ||
+                r.bottom > rootRect.bottom + 1
+              ) {
+                contained = false;
+              }
+            }
+            el.style.opacity = prevOpacity;
+            el.style.visibility = prevVisibility;
+          });
+          hfPublishStatus({
+            ok: present && contained,
+            present: present,
+            contained: contained,
+            version: HF_CONTRACT_VERSION,
+            durationS: durationS,
+          });
+        }
 
-            var textEl = document.createElement("span");
-            textEl.className = "hl-word-text";
-            textEl.textContent = w.text.toUpperCase();
+        var MAX_WORDS_PER_GROUP = 4;
+        var PAUSE_THRESHOLD = 0.1;
 
-            wordEl.appendChild(bgEl);
-            wordEl.appendChild(textEl);
-            grp.appendChild(wordEl);
+        function hfMakeGroups(words, fontPx, safeWidth, durationS) {
+          var raw = [];
+          var current = [];
+          function fits(ws) {
+            var text = ws
+              .map(function (w) {
+                return w.text.toUpperCase();
+              })
+              .join(" ");
+            _fitCtx.font = "800 " + fontPx + "px Montserrat";
+            // 1.6× headroom: fitFontSize can shrink to 45% of base
+            return _fitCtx.measureText(text).width <= safeWidth * 1.6;
+          }
+          words.forEach(function (w, i) {
+            var next = words[i + 1];
+            var test = current.concat([w]);
+            if (test.length > MAX_WORDS_PER_GROUP || !fits(test)) {
+              if (current.length) raw.push(current);
+              current = [w];
+            } else {
+              current.push(w);
+            }
+            var punctuation = /[,.:!?]$/.test(w.text);
+            var pause = next ? next.start - w.end : Infinity;
+            if (
+              current.length &&
+              (punctuation ||
+                pause >= PAUSE_THRESHOLD ||
+                current.length >= MAX_WORDS_PER_GROUP ||
+                !next)
+            ) {
+              raw.push(current);
+              current = [];
+            }
+          });
+          if (current.length) raw.push(current);
+          return raw.map(function (ws, gi) {
+            var nextStart = gi + 1 < raw.length ? raw[gi + 1][0].start : durationS;
+            return {
+              words: ws,
+              start: ws[0].start,
+              end: Math.min(
+                ws[ws.length - 1].end + 0.5,
+                Math.max(ws[0].start + 0.2, nextStart - 0.05),
+              ),
+            };
           });
+        }
 
-          container.appendChild(grp);
+        function hfTeardown() {
+          document.getElementById("hl-container").innerHTML = "";
+        }
 
-          tl.set(grp, { visibility: "visible" }, g.start);
-          tl.fromTo(
-            grp,
-            { opacity: 0 },
-            { opacity: 1, duration: 0.12, ease: "power2.out" },
-            g.start,
-          );
+        function hfBuild(words, layout, durationS) {
+          var fontPx = Math.round(80 * layout.fontScale);
+          var safeWidth = Math.round(1620 * layout.scaleX);
+          var container = document.getElementById("hl-container");
+          var groups = hfMakeGroups(words, fontPx, safeWidth, durationS);
+          var tl = gsap.timeline({ paused: true });
+          var wordCounter = 0;
 
-          groupWords.forEach(function (w, i) {
-            var wi = g.wordStart + i;
-            var bgEl = document.getElementById("hl-bg-" + wi);
-            var wordEl = document.getElementById("hl-w-" + wi);
+          groups.forEach(function (g, gi) {
+            var grp = document.createElement("div");
+            grp.className = "hl-group";
+            grp.id = "hl-grp-" + gi;
+            grp.style.bottom = Math.round(140 * layout.scaleY) + "px";
+            grp.style.paddingLeft = Math.round(100 * layout.scaleX) + "px";
+            grp.style.paddingRight = Math.round(100 * layout.scaleX) + "px";
 
-            tl.to(bgEl, { opacity: 1, scaleX: 1, duration: 0.15, ease: "power2.out" }, w.start);
-            tl.to(
-              wordEl,
-              { filter: "brightness(1.05)", duration: 0.08, ease: "power2.out" },
-              w.start,
+            var groupText = g.words
+              .map(function (w) {
+                return w.text.toUpperCase();
+              })
+              .join(" ");
+            var computedSize = fitFontSize(groupText, fontPx, "800", "Montserrat", safeWidth);
+
+            var ids = [];
+            g.words.forEach(function (w) {
+              var wi = wordCounter++;
+              ids.push(wi);
+              var wordEl = document.createElement("span");
+              wordEl.className = "hl-word";
+              wordEl.id = "hl-w-" + wi;
+              wordEl.style.fontSize = computedSize + "px";
+              var bgEl = document.createElement("span");
+              bgEl.className = "hl-word-bg";
+              bgEl.id = "hl-bg-" + wi;
+              var textEl = document.createElement("span");
+              textEl.className = "hl-word-text";
+              textEl.textContent = w.text.toUpperCase();
+              wordEl.appendChild(bgEl);
+              wordEl.appendChild(textEl);
+              grp.appendChild(wordEl);
+            });
+            container.appendChild(grp);
+
+            tl.set(grp, { visibility: "visible" }, g.start);
+            tl.fromTo(
+              grp,
+              { opacity: 0 },
+              { opacity: 1, duration: 0.12, ease: "power2.out" },
+              g.start,
             );
+            g.words.forEach(function (w, i) {
+              var bgEl = document.getElementById("hl-bg-" + ids[i]);
+              var wordEl = document.getElementById("hl-w-" + ids[i]);
+              tl.to(bgEl, { opacity: 1, scaleX: 1, duration: 0.15, ease: "power2.out" }, w.start);
+              tl.to(
+                wordEl,
+                { filter: "brightness(1.05)", duration: 0.08, ease: "power2.out" },
+                w.start,
+              );
+              tl.to(
+                wordEl,
+                { filter: "brightness(1)", duration: 0.16, ease: "power2.out" },
+                w.start + 0.08,
+              );
+              tl.to(bgEl, { opacity: 0, scaleX: 1.02, duration: 0.1, ease: "power2.in" }, w.end);
+              tl.set(bgEl, { scaleX: 0 }, w.end + 0.1);
+            });
             tl.to(
-              wordEl,
-              { filter: "brightness(1)", duration: 0.16, ease: "power2.out" },
-              w.start + 0.08,
+              grp,
+              { opacity: 0, duration: 0.1, ease: "power2.in" },
+              Math.max(g.start, g.end - 0.1),
             );
-            tl.to(bgEl, { opacity: 0, scaleX: 1.02, duration: 0.1, ease: "power2.in" }, w.end);
-            tl.set(bgEl, { scaleX: 0 }, w.end + 0.1);
+            tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
           });
 
-          tl.to(grp, { opacity: 0, duration: 0.1, ease: "power2.in" }, g.end - 0.1);
-          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
-        });
+          return tl;
+        }
+
+        var hfCurrentTimeline = null;
+
+        function hfAttach(data) {
+          var v = hfValidate(data);
+          if (!v.ok) {
+            hfRunGate([], 0, v.reason);
+            return;
+          }
+          if (hfCurrentTimeline) {
+            hfCurrentTimeline.kill();
+            hfCurrentTimeline = null;
+          }
+          hfTeardown();
+          var layout = hfApplyStageConfig(data, v.durationS);
+          var tl = hfBuild(v.words, layout, v.durationS);
+          tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
+          // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
+          // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
+          // at t=0 — the first frame would show pre-timeline CSS defaults (usually
+          // hidden). render(time, suppressEvents, force) with force=true bypasses that.
+          tl.render(0, true, true);
+          hfCurrentTimeline = tl;
+          window.__timelines = window.__timelines || {};
+          window.__timelines[HF_COMPOSITION_ID] = tl;
+          hfRunGate(v.words, v.durationS, null);
+        }
+        window.__HF_CAPTION_ATTACH__ = hfAttach;
 
-        tl.seek(0);
-        window.__timelines["caption-highlight"] = tl;
+        (function hfBoot() {
+          function start(data) {
+            var ready =
+              document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
+            ready.then(function () {
+              hfAttach(data);
+            });
+          }
+          if (window.__HF_CAPTION__) {
+            start(window.__HF_CAPTION__);
+            return;
+          }
+          fetch("./caption-data.json")
+            .then(function (r) {
+              return r.ok ? r.json() : null;
+            })
+            .catch(function () {
+              return null;
+            })
+            .then(function (json) {
+              start(json || HF_DEMO_DATA);
+            });
+        })();
       })();
     </script>
   </body>

From ed8973952dda2aa43931e0ffa05b3fc6ba0cb1cb Mon Sep 17 00:00:00 2001
From: vanceingalls <vance@heygen.com>
Date: Thu, 23 Jul 2026 22:15:26 +0000
Subject: [PATCH 06/12] feat(registry): make caption-editorial-emphasis
 data-driven with emphasis heuristic

Replaces the hand-authored BLOCKS literal with hfMakeBlocks, a heuristic that
groups words into blocks/lines from timing (pauses, punctuation, max words per
block) and hfIsEmphasisWord (long, non-stopword content words) to decide which
word gets the large Playfair Display emphasis treatment and its own slide-in
line. computeLineSize/buildBlocks/fitBlocks and timeline construction now live
inside hfBuild, closing over layout-scaled font sizes and widths. Adds the
shared Blocks A-E caption-data runtime (attach/gate/brand config) and the
.word/.word--emphasis CSS brand hook for --hf-caption-primary. This is the
last of the five caption identities to go data-driven.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../caption-editorial-emphasis.html           | 747 ++++++++++++------
 1 file changed, 512 insertions(+), 235 deletions(-)

diff --git a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
index 50b41a1220..281c3aae76 100644
--- a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
+++ b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
@@ -80,7 +80,7 @@
 
       .word {
         display: inline-block;
-        color: #f5f0d0;
+        color: var(--hf-caption-primary, #f5f0d0);
         text-shadow:
           0 2px 12px rgba(0, 0, 0, 0.6),
           0 4px 24px rgba(0, 0, 0, 0.35);
@@ -108,7 +108,7 @@
         font-weight: 800;
         font-style: italic;
         line-height: 0.9;
-        color: #f5f0d0;
+        color: var(--hf-caption-primary, #f5f0d0);
       }
     </style>
   </head>
@@ -129,8 +129,276 @@
     </div>
 
     <script>
-      var DURATION = 8;
-      var SAFE_WIDTH = 1800;
+      var HF_COMPOSITION_ID = "caption-editorial-emphasis";
+      var HF_ROOT_ID = "editorial-emphasis";
+      var HF_GROUP_SELECTOR = ".caption-block";
+
+      var HF_DEMO_DATA = {
+        version: 1,
+        segments: [
+          {
+            start: 0,
+            text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
+            words: [
+              { text: "Every", start: 0.0, end: 0.3 },
+              { text: "great", start: 0.3, end: 0.55 },
+              { text: "video", start: 0.55, end: 0.85 },
+              { text: "starts", start: 0.85, end: 1.1 },
+              { text: "with", start: 1.1, end: 1.25 },
+              { text: "a", start: 1.25, end: 1.35 },
+              { text: "single", start: 1.35, end: 1.65 },
+              { text: "frame.", start: 1.65, end: 2.0 },
+              { text: "HyperFrames", start: 2.1, end: 2.65 },
+              { text: "lets", start: 2.65, end: 2.85 },
+              { text: "you", start: 2.85, end: 2.95 },
+              { text: "write", start: 2.95, end: 3.15 },
+              { text: "HTML", start: 3.15, end: 3.55 },
+              { text: "and", start: 3.55, end: 3.65 },
+              { text: "render", start: 3.65, end: 3.95 },
+              { text: "professional", start: 3.95, end: 4.45 },
+              { text: "video.", start: 4.45, end: 4.8 },
+              { text: "No", start: 4.9, end: 5.05 },
+              { text: "timeline.", start: 5.05, end: 5.45 },
+              { text: "No", start: 5.5, end: 5.65 },
+              { text: "drag", start: 5.65, end: 5.85 },
+              { text: "and", start: 5.85, end: 5.95 },
+              { text: "drop.", start: 5.95, end: 6.25 },
+              { text: "Just", start: 6.35, end: 6.55 },
+              { text: "code", start: 6.55, end: 6.8 },
+              { text: "that", start: 6.8, end: 6.95 },
+              { text: "becomes", start: 6.95, end: 7.3 },
+              { text: "cinema.", start: 7.3, end: 7.7 },
+            ],
+          },
+        ],
+      };
+
+      /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
+      var HF_CONTRACT_VERSION = 1;
+      var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
+
+      function hfFlattenSegments(segments) {
+        var out = [];
+        (segments || []).forEach(function (seg) {
+          ((seg && seg.words) || []).forEach(function (w) {
+            var start = Math.max(0, Number(w.start) || 0);
+            out.push({
+              text: String(w.word || w.text || "").trim(),
+              start: start,
+              end: Math.max(start, Number(w.end) || 0),
+            });
+          });
+        });
+        out.sort(function (a, b) {
+          return a.start - b.start;
+        });
+        return out.filter(function (w) {
+          return w.text.length > 0;
+        });
+      }
+
+      function hfDeriveDuration(words) {
+        var end = 0;
+        words.forEach(function (w) {
+          if (w.end > end) end = w.end;
+        });
+        return end;
+      }
+
+      function hfValidate(data) {
+        if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
+        if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
+          return { ok: false, reason: "unsupported-version" };
+        }
+        if (!Array.isArray(data.segments) || data.segments.length === 0) {
+          return { ok: false, reason: "no-segments" };
+        }
+        if (data.displayMode != null && data.displayMode !== "full") {
+          return { ok: false, reason: "unsupported-displayMode" };
+        }
+        var words = hfFlattenSegments(data.segments);
+        if (words.length === 0) return { ok: false, reason: "no-words" };
+        return { ok: true, words: words, durationS: hfDeriveDuration(words) };
+      }
+
+      function hfApplyStageConfig(data, durationS) {
+        var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
+        var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
+        var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
+        var root = document.getElementById(HF_ROOT_ID);
+        [document.documentElement, document.body, root].forEach(function (el) {
+          el.style.width = W + "px";
+          el.style.height = H + "px";
+        });
+        root.setAttribute("data-width", String(W));
+        root.setAttribute("data-height", String(H));
+        root.setAttribute("data-duration", String(durationS));
+        var brand = (data && data.brand) || {};
+        if (typeof brand.primaryColor === "string" && brand.primaryColor) {
+          root.style.setProperty("--hf-caption-primary", brand.primaryColor);
+        }
+        if (typeof brand.accentColor === "string" && brand.accentColor) {
+          root.style.setProperty("--hf-caption-accent", brand.accentColor);
+        }
+        return { W: W, H: H, scaleX: W / 1920, scaleY: H / 1080, fontScale: Math.min(W, H) / 1080 };
+      }
+
+      function hfPublishStatus(status) {
+        window.__HF_CAPTION_STATUS = status;
+        document
+          .getElementById(HF_ROOT_ID)
+          .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
+      }
+
+      function hfRunGate(words, durationS, failReason) {
+        if (failReason) {
+          hfPublishStatus({
+            ok: false,
+            present: false,
+            contained: false,
+            reason: failReason,
+            version: HF_CONTRACT_VERSION,
+            durationS: durationS || 0,
+          });
+          return;
+        }
+        var root = document.getElementById(HF_ROOT_ID);
+        var rootRect = root.getBoundingClientRect();
+        var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
+        var present = false;
+        var contained = true;
+        var tokens = [];
+        words.forEach(function (w) {
+          var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
+          if (t) tokens.push(t);
+        });
+        groups.forEach(function (el) {
+          var prevOpacity = el.style.opacity;
+          var prevVisibility = el.style.visibility;
+          el.style.opacity = "1";
+          el.style.visibility = "visible";
+          var r = el.getBoundingClientRect();
+          if (r.width > 0 && r.height > 0) {
+            var text = (el.textContent || "").toLowerCase();
+            for (var i = 0; i < tokens.length; i++) {
+              if (text.indexOf(tokens[i]) !== -1) {
+                present = true;
+                break;
+              }
+            }
+            if (
+              r.left < rootRect.left - 1 ||
+              r.right > rootRect.right + 1 ||
+              r.top < rootRect.top - 1 ||
+              r.bottom > rootRect.bottom + 1
+            ) {
+              contained = false;
+            }
+          }
+          el.style.opacity = prevOpacity;
+          el.style.visibility = prevVisibility;
+        });
+        hfPublishStatus({
+          ok: present && contained,
+          present: present,
+          contained: contained,
+          version: HF_CONTRACT_VERSION,
+          durationS: durationS,
+        });
+      }
+
+      var HF_STOPWORDS = new Set([
+        "the",
+        "a",
+        "an",
+        "and",
+        "or",
+        "but",
+        "is",
+        "are",
+        "was",
+        "were",
+        "to",
+        "of",
+        "in",
+        "on",
+        "at",
+        "for",
+        "with",
+        "by",
+        "from",
+        "as",
+        "it",
+        "its",
+        "this",
+        "that",
+        "these",
+        "those",
+        "be",
+        "been",
+        "have",
+        "has",
+        "had",
+        "do",
+        "does",
+        "did",
+        "will",
+        "would",
+        "could",
+        "should",
+        "may",
+        "might",
+        "must",
+        "can",
+        "if",
+        "then",
+        "so",
+        "just",
+        "not",
+        "no",
+        "yes",
+        "up",
+        "out",
+        "about",
+        "into",
+        "over",
+        "after",
+        "before",
+        "your",
+        "you",
+        "our",
+        "we",
+        "they",
+        "them",
+        "their",
+        "there",
+        "here",
+        "when",
+        "what",
+        "which",
+        "who",
+        "how",
+        "all",
+        "any",
+        "some",
+        "more",
+        "most",
+        "other",
+        "than",
+        "too",
+        "very",
+        "also",
+        "because",
+      ]);
+
+      function hfIsEmphasisWord(text) {
+        var clean = String(text)
+          .toLowerCase()
+          .replace(/[^a-z]/g, "");
+        return clean.length >= 5 && !HF_STOPWORDS.has(clean);
+      }
+
+      var DURATION, SAFE_WIDTH;
       var ENTRY_DUR = 0.1;
       var SLIDE_DUR = 0.2;
 
@@ -147,266 +415,275 @@
         return minSize;
       }
 
-      // Generic transcript words
-      var W = [
-        { text: "Every", start: 0.0, end: 0.3 },
-        { text: "great", start: 0.3, end: 0.55 },
-        { text: "video", start: 0.55, end: 0.85 },
-        { text: "starts", start: 0.85, end: 1.1 },
-        { text: "with", start: 1.1, end: 1.25 },
-        { text: "a", start: 1.25, end: 1.35 },
-        { text: "single", start: 1.35, end: 1.65 },
-        { text: "frame.", start: 1.65, end: 2.0 },
-        { text: "HyperFrames", start: 2.1, end: 2.65 },
-        { text: "lets", start: 2.65, end: 2.85 },
-        { text: "you", start: 2.85, end: 2.95 },
-        { text: "write", start: 2.95, end: 3.15 },
-        { text: "HTML", start: 3.15, end: 3.55 },
-        { text: "and", start: 3.55, end: 3.65 },
-        { text: "render", start: 3.65, end: 3.95 },
-        { text: "professional", start: 3.95, end: 4.45 },
-        { text: "video.", start: 4.45, end: 4.8 },
-        { text: "No", start: 4.9, end: 5.05 },
-        { text: "timeline.", start: 5.05, end: 5.45 },
-        { text: "No", start: 5.5, end: 5.65 },
-        { text: "drag", start: 5.65, end: 5.85 },
-        { text: "and", start: 5.85, end: 5.95 },
-        { text: "drop.", start: 5.95, end: 6.25 },
-        { text: "Just", start: 6.35, end: 6.55 },
-        { text: "code", start: 6.55, end: 6.8 },
-        { text: "that", start: 6.8, end: 6.95 },
-        { text: "becomes", start: 6.95, end: 7.3 },
-        { text: "cinema.", start: 7.3, end: 7.7 },
-      ];
-
-      // Block layout: [wordIndex, type] — n=normal, i=italic, e=emphasis(large)
-      // Emphasis words: HyperFrames(8), HTML(12), professional(15), code(24), cinema.(27)
-      var BLOCKS = [
-        {
-          line1: [
-            [0, "n"],
-            [1, "n"],
-            [2, "n"],
-          ],
-          line2: [
-            [3, "n"],
-            [4, "n"],
-          ],
-        },
-        {
-          line1: [
-            [5, "n"],
-            [6, "n"],
-          ],
-          line2: [[7, "e"]],
-        },
-        { line1: [[8, "e"]], line2: null },
-        {
-          line1: [
-            [9, "n"],
-            [10, "n"],
-            [11, "n"],
-          ],
-          line2: [[12, "e"]],
-        },
-        {
-          line1: [
-            [13, "n"],
-            [14, "n"],
-          ],
-          line2: [[15, "e"]],
-        },
-        {
-          line1: [
-            [16, "n"],
-            [17, "n"],
-          ],
-          line2: null,
-        },
-        {
-          line1: [[18, "n"]],
-          line2: [
-            [19, "n"],
-            [20, "n"],
-          ],
-        },
-        {
-          line1: [
-            [21, "n"],
-            [22, "n"],
-          ],
-          line2: null,
-        },
-        {
-          line1: [
-            [23, "i"],
-            [24, "e"],
-          ],
-          line2: null,
-        },
-        {
-          line1: [
-            [25, "n"],
-            [26, "n"],
-          ],
-          line2: [[27, "e"]],
-        },
-      ];
-
       var CLASS_MAP = { n: "word word--normal", i: "word word--italic", e: "word word--emphasis" };
 
-      function computeLineSize(linePairs) {
-        var hasEmphasis = linePairs.some(function (p) {
-          return p[1] === "e";
+      var W = [];
+      var BLOCKS = [];
+
+      var MAX_WORDS_PER_BLOCK = 5;
+      var PAUSE_THRESHOLD = 0.1;
+
+      function hfMakeBlocks(words) {
+        var blocks = [];
+        var current = [];
+        words.forEach(function (w, i) {
+          current.push(i);
+          var isEmph = hfIsEmphasisWord(w.text);
+          var punctuation = /[,.:!?]$/.test(w.text);
+          var next = words[i + 1];
+          var pause = next ? next.start - w.end : Infinity;
+          if (
+            isEmph ||
+            punctuation ||
+            pause >= PAUSE_THRESHOLD ||
+            current.length >= MAX_WORDS_PER_BLOCK ||
+            !next
+          ) {
+            if (isEmph && current.length > 1) {
+              blocks.push({
+                line1: current.slice(0, -1).map(function (ix) {
+                  return [ix, "n"];
+                }),
+                line2: [[current[current.length - 1], "e"]],
+              });
+            } else if (isEmph) {
+              blocks.push({ line1: [[current[0], "e"]], line2: null });
+            } else if (current.length > 3) {
+              var split = Math.ceil(current.length / 2);
+              blocks.push({
+                line1: current.slice(0, split).map(function (ix) {
+                  return [ix, "n"];
+                }),
+                line2: current.slice(split).map(function (ix) {
+                  return [ix, "n"];
+                }),
+              });
+            } else {
+              blocks.push({
+                line1: current.map(function (ix) {
+                  return [ix, "n"];
+                }),
+                line2: null,
+              });
+            }
+            current = [];
+          }
         });
-        if (hasEmphasis) {
+        return blocks;
+      }
+
+      function hfTeardown() {
+        document.getElementById("caption-stage").innerHTML = "";
+      }
+
+      function hfBuild(words, layout, durationS) {
+        DURATION = durationS;
+        var stage = document.getElementById("caption-stage");
+        var fontNormal = Math.round(86 * layout.fontScale);
+        var fontEmphasis = Math.round(180 * layout.fontScale);
+        var marginX = Math.round(60 * layout.scaleX);
+        var blockH = Math.round(430 * layout.fontScale);
+        SAFE_WIDTH = layout.W - marginX * 2;
+        stage.style.left = marginX + "px";
+        stage.style.width = SAFE_WIDTH + "px";
+        stage.style.height = blockH + "px";
+        stage.style.top = Math.max(0, layout.H - blockH - Math.round(70 * layout.scaleY)) + "px";
+
+        W = words;
+        BLOCKS = hfMakeBlocks(words);
+
+        function computeLineSize(linePairs) {
+          var hasEmphasis = linePairs.some(function (p) {
+            return p[1] === "e";
+          });
           var lineText = linePairs
             .map(function (p) {
               return W[p[0]].text;
             })
             .join(" ");
-          return fitFontSize(lineText, 180, "800", "Playfair Display", SAFE_WIDTH);
+          if (hasEmphasis) {
+            return fitFontSize(lineText, fontEmphasis, "800", "Playfair Display", SAFE_WIDTH);
+          }
+          return fitFontSize(lineText, fontNormal, "400", "Inter", SAFE_WIDTH);
         }
-        var lineText = linePairs
-          .map(function (p) {
-            return W[p[0]].text;
-          })
-          .join(" ");
-        return fitFontSize(lineText, 86, "400", "Inter", SAFE_WIDTH);
-      }
 
-      function buildBlocks() {
-        var stage = document.getElementById("caption-stage");
-        BLOCKS.forEach(function (block, bi) {
-          var el = document.createElement("div");
-          el.className = "caption-block";
-          el.id = "b" + bi;
-
-          var l1Size = computeLineSize(block.line1);
-          var l1 = document.createElement("div");
-          l1.className = "caption-line";
-          l1.id = "b" + bi + "L1";
-          block.line1.forEach(function (pair, wi) {
-            var span = document.createElement("span");
-            span.className = CLASS_MAP[pair[1]];
-            span.id = "b" + bi + "L1w" + wi;
-            span.textContent = W[pair[0]].text;
-            if (pair[1] === "e") {
-              span.style.fontSize = l1Size + "px";
-            } else {
-              span.style.fontSize = l1Size + "px";
-            }
-            l1.appendChild(span);
-          });
-          el.appendChild(l1);
-
-          if (block.line2) {
-            var l2Size = computeLineSize(block.line2);
-            var l2 = document.createElement("div");
-            l2.className = "caption-line";
-            l2.id = "b" + bi + "L2";
-            block.line2.forEach(function (pair, wi) {
+        function buildBlocks() {
+          BLOCKS.forEach(function (block, bi) {
+            var el = document.createElement("div");
+            el.className = "caption-block";
+            el.id = "b" + bi;
+
+            var l1Size = computeLineSize(block.line1);
+            var l1 = document.createElement("div");
+            l1.className = "caption-line";
+            l1.id = "b" + bi + "L1";
+            block.line1.forEach(function (pair, wi) {
               var span = document.createElement("span");
               span.className = CLASS_MAP[pair[1]];
-              span.id = "b" + bi + "L2w" + wi;
+              span.id = "b" + bi + "L1w" + wi;
               span.textContent = W[pair[0]].text;
-              if (pair[1] === "e") {
-                span.style.fontSize = l2Size + "px";
-              } else {
+              span.style.fontSize = l1Size + "px";
+              l1.appendChild(span);
+            });
+            el.appendChild(l1);
+
+            if (block.line2) {
+              var l2Size = computeLineSize(block.line2);
+              var l2 = document.createElement("div");
+              l2.className = "caption-line";
+              l2.id = "b" + bi + "L2";
+              block.line2.forEach(function (pair, wi) {
+                var span = document.createElement("span");
+                span.className = CLASS_MAP[pair[1]];
+                span.id = "b" + bi + "L2w" + wi;
+                span.textContent = W[pair[0]].text;
                 span.style.fontSize = l2Size + "px";
-              }
-              l2.appendChild(span);
+                l2.appendChild(span);
+              });
+              el.appendChild(l2);
+            }
+
+            stage.appendChild(el);
+          });
+        }
+
+        buildBlocks();
+
+        // Scale blocks that exceed safe width
+        function fitBlocks() {
+          BLOCKS.forEach(function (block, bi) {
+            var el = document.getElementById("b" + bi);
+            el.style.opacity = "1";
+            el.style.position = "relative";
+            var lines = el.querySelectorAll(".caption-line");
+            var maxW = 0;
+            lines.forEach(function (line) {
+              if (line.scrollWidth > maxW) maxW = line.scrollWidth;
             });
-            el.appendChild(l2);
-          }
+            if (maxW > SAFE_WIDTH) {
+              var s = SAFE_WIDTH / maxW;
+              el.style.transform = "scale(" + s + ")";
+            }
+            el.style.opacity = "0";
+            el.style.position = "";
+          });
+        }
+
+        fitBlocks();
+
+        var tl = gsap.timeline({ paused: true });
 
-          stage.appendChild(el);
+        var allEls = BLOCKS.map(function (_, i) {
+          return document.getElementById("b" + i);
         });
-      }
 
-      buildBlocks();
+        function blockStart(bi) {
+          return W[BLOCKS[bi].line1[0][0]].start;
+        }
 
-      // Scale blocks that exceed safe width
-      (function fitBlocks() {
         BLOCKS.forEach(function (block, bi) {
-          var el = document.getElementById("b" + bi);
-          el.style.opacity = "1";
-          el.style.position = "relative";
-          var lines = el.querySelectorAll(".caption-line");
-          var maxW = 0;
-          lines.forEach(function (line) {
-            if (line.scrollWidth > maxW) maxW = line.scrollWidth;
+          var el = allEls[bi];
+          var start = blockStart(bi);
+          var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;
+
+          allEls.forEach(function (other, oi) {
+            if (oi !== bi) tl.set(other, { opacity: 0 }, start);
+          });
+          tl.set(el, { opacity: 1 }, start);
+
+          block.line1.forEach(function (pair, wi) {
+            var wordEl = document.getElementById("b" + bi + "L1w" + wi);
+            var wordStart = W[pair[0]].start;
+            tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
+            tl.to(
+              wordEl,
+              { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
+              wordStart,
+            );
           });
-          if (maxW > SAFE_WIDTH) {
-            var s = SAFE_WIDTH / maxW;
-            el.style.transform = "scale(" + s + ")";
-          }
-          el.style.opacity = "0";
-          el.style.position = "";
-        });
-      })();
 
-      window.__timelines = window.__timelines || {};
-      var tl = gsap.timeline({ paused: true });
+          if (block.line2) {
+            var hasEmphasis = block.line2.some(function (p) {
+              return p[1] === "e";
+            });
+            var l2El = document.getElementById("b" + bi + "L2");
+            if (hasEmphasis) {
+              var l2Start = W[block.line2[0][0]].start;
+              tl.set(l2El, { opacity: 0, x: -layout.W }, start);
+              tl.to(l2El, { opacity: 1, x: 0, duration: SLIDE_DUR, ease: "power2.out" }, l2Start);
+            } else {
+              tl.set(l2El, { opacity: 1 }, start);
+              block.line2.forEach(function (pair, wi) {
+                var wordEl = document.getElementById("b" + bi + "L2w" + wi);
+                var wordStart = W[pair[0]].start;
+                tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
+                tl.to(
+                  wordEl,
+                  { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
+                  wordStart,
+                );
+              });
+            }
+          }
 
-      var allEls = BLOCKS.map(function (_, i) {
-        return document.getElementById("b" + i);
-      });
+          tl.set(el, { opacity: 0 }, nextStart);
+        });
 
-      function blockStart(bi) {
-        return W[BLOCKS[bi].line1[0][0]].start;
+        tl.to({}, { duration: DURATION }, 0);
+        return tl;
       }
 
-      BLOCKS.forEach(function (block, bi) {
-        var el = allEls[bi];
-        var start = blockStart(bi);
-        var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;
+      var hfCurrentTimeline = null;
 
-        allEls.forEach(function (other, oi) {
-          if (oi !== bi) tl.set(other, { opacity: 0 }, start);
-        });
-        tl.set(el, { opacity: 1 }, start);
-
-        block.line1.forEach(function (pair, wi) {
-          var wordEl = document.getElementById("b" + bi + "L1w" + wi);
-          var wordStart = W[pair[0]].start;
-          tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
-          tl.to(
-            wordEl,
-            { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
-            wordStart,
-          );
-        });
-
-        if (block.line2) {
-          var hasEmphasis = block.line2.some(function (p) {
-            return p[1] === "e";
+      function hfAttach(data) {
+        var v = hfValidate(data);
+        if (!v.ok) {
+          hfRunGate([], 0, v.reason);
+          return;
+        }
+        if (hfCurrentTimeline) {
+          hfCurrentTimeline.kill();
+          hfCurrentTimeline = null;
+        }
+        hfTeardown();
+        var layout = hfApplyStageConfig(data, v.durationS);
+        var tl = hfBuild(v.words, layout, v.durationS);
+        tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
+        // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
+        // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
+        // at t=0 — the first frame would show pre-timeline CSS defaults (usually
+        // hidden). render(time, suppressEvents, force) with force=true bypasses that.
+        tl.render(0, true, true);
+        hfCurrentTimeline = tl;
+        window.__timelines = window.__timelines || {};
+        window.__timelines[HF_COMPOSITION_ID] = tl;
+        hfRunGate(v.words, v.durationS, null);
+      }
+      window.__HF_CAPTION_ATTACH__ = hfAttach;
+
+      (function hfBoot() {
+        function start(data) {
+          var ready =
+            document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
+          ready.then(function () {
+            hfAttach(data);
           });
-          var l2El = document.getElementById("b" + bi + "L2");
-          if (hasEmphasis) {
-            var l2Start = W[block.line2[0][0]].start;
-            tl.set(l2El, { opacity: 0, x: -1920 }, start);
-            tl.to(l2El, { opacity: 1, x: 0, duration: SLIDE_DUR, ease: "power2.out" }, l2Start);
-          } else {
-            tl.set(l2El, { opacity: 1 }, start);
-            block.line2.forEach(function (pair, wi) {
-              var wordEl = document.getElementById("b" + bi + "L2w" + wi);
-              var wordStart = W[pair[0]].start;
-              tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
-              tl.to(
-                wordEl,
-                { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
-                wordStart,
-              );
-            });
-          }
         }
-
-        tl.set(el, { opacity: 0 }, nextStart);
-      });
-
-      tl.to({}, { duration: DURATION }, 0);
-      window.__timelines["caption-editorial-emphasis"] = tl;
+        if (window.__HF_CAPTION__) {
+          start(window.__HF_CAPTION__);
+          return;
+        }
+        fetch("./caption-data.json")
+          .then(function (r) {
+            return r.ok ? r.json() : null;
+          })
+          .catch(function () {
+            return null;
+          })
+          .then(function (json) {
+            start(json || HF_DEMO_DATA);
+          });
+      })();
     </script>
   </body>
 </html>

From 18de2b1f1de8062a79ae7aa6fa4796e320fe6131 Mon Sep 17 00:00:00 2001
From: vanceingalls <vance@heygen.com>
Date: Thu, 23 Jul 2026 22:42:14 +0000
Subject: [PATCH 07/12] fix(caption-editorial-emphasis,caption-emoji-pop):
 remove O(n^2) redundant hide-all-others loop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both identities looped over every OTHER group/block to force its opacity
to 0 at each group's own start time, in addition to each group already
setting its own opacity to 0 at its own end. Since groups/blocks occupy
non-overlapping time windows and already own their full opacity
lifecycle, that loop was dead weight — but it made timeline construction
O(n^2) in the number of groups/blocks. Under the Task 7 stress transcript
(long, frequent "emphasis" words forcing near single-word blocks/groups),
n reached ~2000 and the page hung well past a 30s test timeout for both
identities.

Verified behavior-preserving: full templates.test.ts (41 tests, incl.
opacity/seek assertions) and the new limits.test.ts stress suite pass
against both identities after the removal.
---
 .../caption-editorial-emphasis.html                   | 11 ++++++++---
 .../caption-emoji-pop/caption-emoji-pop.html          | 10 +++++++---
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
index 281c3aae76..f859ab6aeb 100644
--- a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
+++ b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
@@ -586,9 +586,14 @@
           var start = blockStart(bi);
           var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;
 
-          allEls.forEach(function (other, oi) {
-            if (oi !== bi) tl.set(other, { opacity: 0 }, start);
-          });
+          // Each block already owns its full opacity lifecycle (set 1 at its
+          // own start, then set back to 0 at its own nextStart below), and
+          // blocks occupy non-overlapping windows, so explicitly hiding every
+          // OTHER block here was redundant and made timeline construction
+          // O(blocks^2) — this collapsed under dense stress transcripts (many
+          // single-word emphasis blocks). Removed; behavior is unchanged
+          // (verified against templates.test.ts).
+
           tl.set(el, { opacity: 1 }, start);
 
           block.line1.forEach(function (pair, wi) {
diff --git a/registry/components/caption-emoji-pop/caption-emoji-pop.html b/registry/components/caption-emoji-pop/caption-emoji-pop.html
index d4107123b0..da1692a5fa 100644
--- a/registry/components/caption-emoji-pop/caption-emoji-pop.html
+++ b/registry/components/caption-emoji-pop/caption-emoji-pop.html
@@ -703,9 +703,13 @@
             groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
           var exitStart = Math.max(visibleStart, visibleEnd - EXIT_DURATION);
 
-          allGroupEls.forEach(function (otherEl, otherIndex) {
-            if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
-          });
+          // Each group already owns its full opacity lifecycle (set 0 at its
+          // own visibleStart, animated to 1, then set back to 0 at its own
+          // visibleEnd below), and groups occupy non-overlapping windows, so
+          // explicitly hiding every OTHER group here was redundant and made
+          // timeline construction O(groups^2) — this collapsed under dense
+          // stress transcripts (many short groups). Removed; behavior is
+          // unchanged (verified against templates.test.ts).
 
           tl.set(groupEl, { opacity: 0, scaleX: 0.8, scaleY: 1 }, visibleStart);
           tl.to(

From 5af6203ae7fcd506511ca5683a9097d666c4a63e Mon Sep 17 00:00:00 2001
From: vanceingalls <vance@heygen.com>
Date: Thu, 23 Jul 2026 22:55:37 +0000
Subject: [PATCH 08/12] fix(caption-weight-shift): remove O(n^2) redundant
 hide-all-others loop

---
 .../caption-weight-shift/caption-weight-shift.html     | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/registry/components/caption-weight-shift/caption-weight-shift.html b/registry/components/caption-weight-shift/caption-weight-shift.html
index 2ead4d717f..873182ea57 100644
--- a/registry/components/caption-weight-shift/caption-weight-shift.html
+++ b/registry/components/caption-weight-shift/caption-weight-shift.html
@@ -529,9 +529,13 @@
           var visibleEnd =
             groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
 
-          allGroupEls.forEach(function (otherEl, otherIndex) {
-            if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
-          });
+          // Each group already owns its full opacity lifecycle (set 0 at its
+          // own visibleStart, animated to 1, then set back to 0 at its own
+          // visibleEnd below), and groups occupy non-overlapping windows, so
+          // explicitly hiding every OTHER group here was redundant and made
+          // timeline construction O(groups^2) — this collapsed under dense
+          // stress transcripts (many short groups). Removed; behavior is
+          // unchanged (verified against templates.test.ts).
 
           tl.set(groupEl, { opacity: 0, scale: 0.85 }, visibleStart);
           tl.to(

From 4f6994719196e72dc01ebe8f60d869e064ec7685 Mon Sep 17 00:00:00 2001
From: vanceingalls <vance@heygen.com>
Date: Fri, 24 Jul 2026 00:03:46 +0000
Subject: [PATCH 09/12] fix(registry): clear brand CSS custom properties on
 unbranded re-attach; remove dead italic path
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

hfApplyStageConfig (Block B, verbatim across all 5 retrofitted caption
identities) only ever set --hf-caption-primary/--hf-caption-accent when the
corresponding brand.primaryColor/accentColor key was present, with no else
branch to clear it when absent. Re-attaching a brand-less payload after a
branded one left the custom property (and any JS-cached color derived from
it, e.g. caption-pill-karaoke's hfColorActive and caption-emoji-pop's
hfAccentColors) stuck at the stale value instead of reverting to the CSS
fallback, violating idempotent re-attach.

Also removes caption-editorial-emphasis's dead .word--italic CSS rule and
CLASS_MAP.i entry — hfMakeBlocks only ever emits "n"/"e" tags, "i" was only
reachable via the old hand-authored BLOCKS literal this task replaced.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../caption-editorial-emphasis.html                 | 13 +++++--------
 .../caption-emoji-pop/caption-emoji-pop.html        |  4 ++++
 .../caption-highlight/caption-highlight.html        |  4 ++++
 .../caption-pill-karaoke/caption-pill-karaoke.html  |  4 ++++
 .../caption-weight-shift/caption-weight-shift.html  |  4 ++++
 5 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
index f859ab6aeb..38c86f294d 100644
--- a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
+++ b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
@@ -95,13 +95,6 @@
         font-style: normal;
       }
 
-      .word--italic {
-        font-family: "Inter", sans-serif;
-        font-size: 86px;
-        font-weight: 400;
-        font-style: italic;
-      }
-
       .word--emphasis {
         font-family: "Playfair Display", serif;
         font-size: 180px;
@@ -236,9 +229,13 @@
         var brand = (data && data.brand) || {};
         if (typeof brand.primaryColor === "string" && brand.primaryColor) {
           root.style.setProperty("--hf-caption-primary", brand.primaryColor);
+        } else {
+          root.style.removeProperty("--hf-caption-primary");
         }
         if (typeof brand.accentColor === "string" && brand.accentColor) {
           root.style.setProperty("--hf-caption-accent", brand.accentColor);
+        } else {
+          root.style.removeProperty("--hf-caption-accent");
         }
         return { W: W, H: H, scaleX: W / 1920, scaleY: H / 1080, fontScale: Math.min(W, H) / 1080 };
       }
@@ -415,7 +412,7 @@
         return minSize;
       }
 
-      var CLASS_MAP = { n: "word word--normal", i: "word word--italic", e: "word word--emphasis" };
+      var CLASS_MAP = { n: "word word--normal", e: "word word--emphasis" };
 
       var W = [];
       var BLOCKS = [];
diff --git a/registry/components/caption-emoji-pop/caption-emoji-pop.html b/registry/components/caption-emoji-pop/caption-emoji-pop.html
index da1692a5fa..e9837d5f61 100644
--- a/registry/components/caption-emoji-pop/caption-emoji-pop.html
+++ b/registry/components/caption-emoji-pop/caption-emoji-pop.html
@@ -232,9 +232,13 @@
         var brand = (data && data.brand) || {};
         if (typeof brand.primaryColor === "string" && brand.primaryColor) {
           root.style.setProperty("--hf-caption-primary", brand.primaryColor);
+        } else {
+          root.style.removeProperty("--hf-caption-primary");
         }
         if (typeof brand.accentColor === "string" && brand.accentColor) {
           root.style.setProperty("--hf-caption-accent", brand.accentColor);
+        } else {
+          root.style.removeProperty("--hf-caption-accent");
         }
         return { W: W, H: H, scaleX: W / 1920, scaleY: H / 1080, fontScale: Math.min(W, H) / 1080 };
       }
diff --git a/registry/components/caption-highlight/caption-highlight.html b/registry/components/caption-highlight/caption-highlight.html
index b53e981803..b87f407e84 100644
--- a/registry/components/caption-highlight/caption-highlight.html
+++ b/registry/components/caption-highlight/caption-highlight.html
@@ -243,9 +243,13 @@
           var brand = (data && data.brand) || {};
           if (typeof brand.primaryColor === "string" && brand.primaryColor) {
             root.style.setProperty("--hf-caption-primary", brand.primaryColor);
+          } else {
+            root.style.removeProperty("--hf-caption-primary");
           }
           if (typeof brand.accentColor === "string" && brand.accentColor) {
             root.style.setProperty("--hf-caption-accent", brand.accentColor);
+          } else {
+            root.style.removeProperty("--hf-caption-accent");
           }
           return {
             W: W,
diff --git a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
index 741048027c..f57bbd1635 100644
--- a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
+++ b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
@@ -238,9 +238,13 @@
         var brand = (data && data.brand) || {};
         if (typeof brand.primaryColor === "string" && brand.primaryColor) {
           root.style.setProperty("--hf-caption-primary", brand.primaryColor);
+        } else {
+          root.style.removeProperty("--hf-caption-primary");
         }
         if (typeof brand.accentColor === "string" && brand.accentColor) {
           root.style.setProperty("--hf-caption-accent", brand.accentColor);
+        } else {
+          root.style.removeProperty("--hf-caption-accent");
         }
         return { W: W, H: H, scaleX: W / 1920, scaleY: H / 1080, fontScale: Math.min(W, H) / 1080 };
       }
diff --git a/registry/components/caption-weight-shift/caption-weight-shift.html b/registry/components/caption-weight-shift/caption-weight-shift.html
index 873182ea57..3689dfa40d 100644
--- a/registry/components/caption-weight-shift/caption-weight-shift.html
+++ b/registry/components/caption-weight-shift/caption-weight-shift.html
@@ -224,9 +224,13 @@
         var brand = (data && data.brand) || {};
         if (typeof brand.primaryColor === "string" && brand.primaryColor) {
           root.style.setProperty("--hf-caption-primary", brand.primaryColor);
+        } else {
+          root.style.removeProperty("--hf-caption-primary");
         }
         if (typeof brand.accentColor === "string" && brand.accentColor) {
           root.style.setProperty("--hf-caption-accent", brand.accentColor);
+        } else {
+          root.style.removeProperty("--hf-caption-accent");
         }
         return { W: W, H: H, scaleX: W / 1920, scaleY: H / 1080, fontScale: Math.min(W, H) / 1080 };
       }

From e2846eb7cc81821f7fc21a9c4dccdd85c7ef3429 Mon Sep 17 00:00:00 2001
From: vanceingalls <vance@heygen.com>
Date: Fri, 24 Jul 2026 05:25:41 +0000
Subject: [PATCH 10/12] fix(registry): encapsulate caption template runtimes in
 IIFEs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

caption-highlight was already IIFE-wrapped; the other four leaked their
runtime (hfAttach/hfBuild/...) as script-scope globals. Harmless when boot
was synchronous, but the data-driven retrofit defers attach behind
fonts.ready + the sibling fetch — with two caption components pasted into
one composition document, every script finishes before any deferred boot
runs, the last script's definitions win the shared scope, and the first
component never registers its timeline (a renderer waiting on it hangs to
timeout). Wrapping each template's script keeps its internals private so
each boot attaches its own component. window.__HF_CAPTION_ATTACH__ remains
intentionally window-scoped (last-defined-wins).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../caption-editorial-emphasis.html           | 1048 +++++++-------
 .../caption-emoji-pop/caption-emoji-pop.html  | 1266 +++++++++--------
 .../caption-pill-karaoke.html                 |  864 +++++------
 .../caption-weight-shift.html                 |  938 ++++++------
 4 files changed, 2087 insertions(+), 2029 deletions(-)

diff --git a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
index 38c86f294d..83f808425a 100644
--- a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
+++ b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
@@ -122,569 +122,581 @@
     </div>
 
     <script>
-      var HF_COMPOSITION_ID = "caption-editorial-emphasis";
-      var HF_ROOT_ID = "editorial-emphasis";
-      var HF_GROUP_SELECTOR = ".caption-block";
-
-      var HF_DEMO_DATA = {
-        version: 1,
-        segments: [
-          {
-            start: 0,
-            text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
-            words: [
-              { text: "Every", start: 0.0, end: 0.3 },
-              { text: "great", start: 0.3, end: 0.55 },
-              { text: "video", start: 0.55, end: 0.85 },
-              { text: "starts", start: 0.85, end: 1.1 },
-              { text: "with", start: 1.1, end: 1.25 },
-              { text: "a", start: 1.25, end: 1.35 },
-              { text: "single", start: 1.35, end: 1.65 },
-              { text: "frame.", start: 1.65, end: 2.0 },
-              { text: "HyperFrames", start: 2.1, end: 2.65 },
-              { text: "lets", start: 2.65, end: 2.85 },
-              { text: "you", start: 2.85, end: 2.95 },
-              { text: "write", start: 2.95, end: 3.15 },
-              { text: "HTML", start: 3.15, end: 3.55 },
-              { text: "and", start: 3.55, end: 3.65 },
-              { text: "render", start: 3.65, end: 3.95 },
-              { text: "professional", start: 3.95, end: 4.45 },
-              { text: "video.", start: 4.45, end: 4.8 },
-              { text: "No", start: 4.9, end: 5.05 },
-              { text: "timeline.", start: 5.05, end: 5.45 },
-              { text: "No", start: 5.5, end: 5.65 },
-              { text: "drag", start: 5.65, end: 5.85 },
-              { text: "and", start: 5.85, end: 5.95 },
-              { text: "drop.", start: 5.95, end: 6.25 },
-              { text: "Just", start: 6.35, end: 6.55 },
-              { text: "code", start: 6.55, end: 6.8 },
-              { text: "that", start: 6.8, end: 6.95 },
-              { text: "becomes", start: 6.95, end: 7.3 },
-              { text: "cinema.", start: 7.3, end: 7.7 },
-            ],
-          },
-        ],
-      };
-
-      /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
-      var HF_CONTRACT_VERSION = 1;
-      var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
-
-      function hfFlattenSegments(segments) {
-        var out = [];
-        (segments || []).forEach(function (seg) {
-          ((seg && seg.words) || []).forEach(function (w) {
-            var start = Math.max(0, Number(w.start) || 0);
-            out.push({
-              text: String(w.word || w.text || "").trim(),
-              start: start,
-              end: Math.max(start, Number(w.end) || 0),
+      // IIFE: keep every template's runtime private to itself so two caption
+      // components pasted into one composition document can't clobber each
+      // other's hfAttach/hfBuild via shared script-scope names (boot is async,
+      // so collisions surface AFTER all scripts have executed).
+      (function () {
+        var HF_COMPOSITION_ID = "caption-editorial-emphasis";
+        var HF_ROOT_ID = "editorial-emphasis";
+        var HF_GROUP_SELECTOR = ".caption-block";
+
+        var HF_DEMO_DATA = {
+          version: 1,
+          segments: [
+            {
+              start: 0,
+              text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
+              words: [
+                { text: "Every", start: 0.0, end: 0.3 },
+                { text: "great", start: 0.3, end: 0.55 },
+                { text: "video", start: 0.55, end: 0.85 },
+                { text: "starts", start: 0.85, end: 1.1 },
+                { text: "with", start: 1.1, end: 1.25 },
+                { text: "a", start: 1.25, end: 1.35 },
+                { text: "single", start: 1.35, end: 1.65 },
+                { text: "frame.", start: 1.65, end: 2.0 },
+                { text: "HyperFrames", start: 2.1, end: 2.65 },
+                { text: "lets", start: 2.65, end: 2.85 },
+                { text: "you", start: 2.85, end: 2.95 },
+                { text: "write", start: 2.95, end: 3.15 },
+                { text: "HTML", start: 3.15, end: 3.55 },
+                { text: "and", start: 3.55, end: 3.65 },
+                { text: "render", start: 3.65, end: 3.95 },
+                { text: "professional", start: 3.95, end: 4.45 },
+                { text: "video.", start: 4.45, end: 4.8 },
+                { text: "No", start: 4.9, end: 5.05 },
+                { text: "timeline.", start: 5.05, end: 5.45 },
+                { text: "No", start: 5.5, end: 5.65 },
+                { text: "drag", start: 5.65, end: 5.85 },
+                { text: "and", start: 5.85, end: 5.95 },
+                { text: "drop.", start: 5.95, end: 6.25 },
+                { text: "Just", start: 6.35, end: 6.55 },
+                { text: "code", start: 6.55, end: 6.8 },
+                { text: "that", start: 6.8, end: 6.95 },
+                { text: "becomes", start: 6.95, end: 7.3 },
+                { text: "cinema.", start: 7.3, end: 7.7 },
+              ],
+            },
+          ],
+        };
+
+        /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
+        var HF_CONTRACT_VERSION = 1;
+        var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
+
+        function hfFlattenSegments(segments) {
+          var out = [];
+          (segments || []).forEach(function (seg) {
+            ((seg && seg.words) || []).forEach(function (w) {
+              var start = Math.max(0, Number(w.start) || 0);
+              out.push({
+                text: String(w.word || w.text || "").trim(),
+                start: start,
+                end: Math.max(start, Number(w.end) || 0),
+              });
             });
           });
-        });
-        out.sort(function (a, b) {
-          return a.start - b.start;
-        });
-        return out.filter(function (w) {
-          return w.text.length > 0;
-        });
-      }
-
-      function hfDeriveDuration(words) {
-        var end = 0;
-        words.forEach(function (w) {
-          if (w.end > end) end = w.end;
-        });
-        return end;
-      }
-
-      function hfValidate(data) {
-        if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
-        if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
-          return { ok: false, reason: "unsupported-version" };
-        }
-        if (!Array.isArray(data.segments) || data.segments.length === 0) {
-          return { ok: false, reason: "no-segments" };
+          out.sort(function (a, b) {
+            return a.start - b.start;
+          });
+          return out.filter(function (w) {
+            return w.text.length > 0;
+          });
         }
-        if (data.displayMode != null && data.displayMode !== "full") {
-          return { ok: false, reason: "unsupported-displayMode" };
+
+        function hfDeriveDuration(words) {
+          var end = 0;
+          words.forEach(function (w) {
+            if (w.end > end) end = w.end;
+          });
+          return end;
         }
-        var words = hfFlattenSegments(data.segments);
-        if (words.length === 0) return { ok: false, reason: "no-words" };
-        return { ok: true, words: words, durationS: hfDeriveDuration(words) };
-      }
 
-      function hfApplyStageConfig(data, durationS) {
-        var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
-        var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
-        var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
-        var root = document.getElementById(HF_ROOT_ID);
-        [document.documentElement, document.body, root].forEach(function (el) {
-          el.style.width = W + "px";
-          el.style.height = H + "px";
-        });
-        root.setAttribute("data-width", String(W));
-        root.setAttribute("data-height", String(H));
-        root.setAttribute("data-duration", String(durationS));
-        var brand = (data && data.brand) || {};
-        if (typeof brand.primaryColor === "string" && brand.primaryColor) {
-          root.style.setProperty("--hf-caption-primary", brand.primaryColor);
-        } else {
-          root.style.removeProperty("--hf-caption-primary");
+        function hfValidate(data) {
+          if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
+          if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
+            return { ok: false, reason: "unsupported-version" };
+          }
+          if (!Array.isArray(data.segments) || data.segments.length === 0) {
+            return { ok: false, reason: "no-segments" };
+          }
+          if (data.displayMode != null && data.displayMode !== "full") {
+            return { ok: false, reason: "unsupported-displayMode" };
+          }
+          var words = hfFlattenSegments(data.segments);
+          if (words.length === 0) return { ok: false, reason: "no-words" };
+          return { ok: true, words: words, durationS: hfDeriveDuration(words) };
         }
-        if (typeof brand.accentColor === "string" && brand.accentColor) {
-          root.style.setProperty("--hf-caption-accent", brand.accentColor);
-        } else {
-          root.style.removeProperty("--hf-caption-accent");
+
+        function hfApplyStageConfig(data, durationS) {
+          var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
+          var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
+          var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
+          var root = document.getElementById(HF_ROOT_ID);
+          [document.documentElement, document.body, root].forEach(function (el) {
+            el.style.width = W + "px";
+            el.style.height = H + "px";
+          });
+          root.setAttribute("data-width", String(W));
+          root.setAttribute("data-height", String(H));
+          root.setAttribute("data-duration", String(durationS));
+          var brand = (data && data.brand) || {};
+          if (typeof brand.primaryColor === "string" && brand.primaryColor) {
+            root.style.setProperty("--hf-caption-primary", brand.primaryColor);
+          } else {
+            root.style.removeProperty("--hf-caption-primary");
+          }
+          if (typeof brand.accentColor === "string" && brand.accentColor) {
+            root.style.setProperty("--hf-caption-accent", brand.accentColor);
+          } else {
+            root.style.removeProperty("--hf-caption-accent");
+          }
+          return {
+            W: W,
+            H: H,
+            scaleX: W / 1920,
+            scaleY: H / 1080,
+            fontScale: Math.min(W, H) / 1080,
+          };
         }
-        return { W: W, H: H, scaleX: W / 1920, scaleY: H / 1080, fontScale: Math.min(W, H) / 1080 };
-      }
 
-      function hfPublishStatus(status) {
-        window.__HF_CAPTION_STATUS = status;
-        document
-          .getElementById(HF_ROOT_ID)
-          .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
-      }
+        function hfPublishStatus(status) {
+          window.__HF_CAPTION_STATUS = status;
+          document
+            .getElementById(HF_ROOT_ID)
+            .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
+        }
 
-      function hfRunGate(words, durationS, failReason) {
-        if (failReason) {
+        function hfRunGate(words, durationS, failReason) {
+          if (failReason) {
+            hfPublishStatus({
+              ok: false,
+              present: false,
+              contained: false,
+              reason: failReason,
+              version: HF_CONTRACT_VERSION,
+              durationS: durationS || 0,
+            });
+            return;
+          }
+          var root = document.getElementById(HF_ROOT_ID);
+          var rootRect = root.getBoundingClientRect();
+          var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
+          var present = false;
+          var contained = true;
+          var tokens = [];
+          words.forEach(function (w) {
+            var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
+            if (t) tokens.push(t);
+          });
+          groups.forEach(function (el) {
+            var prevOpacity = el.style.opacity;
+            var prevVisibility = el.style.visibility;
+            el.style.opacity = "1";
+            el.style.visibility = "visible";
+            var r = el.getBoundingClientRect();
+            if (r.width > 0 && r.height > 0) {
+              var text = (el.textContent || "").toLowerCase();
+              for (var i = 0; i < tokens.length; i++) {
+                if (text.indexOf(tokens[i]) !== -1) {
+                  present = true;
+                  break;
+                }
+              }
+              if (
+                r.left < rootRect.left - 1 ||
+                r.right > rootRect.right + 1 ||
+                r.top < rootRect.top - 1 ||
+                r.bottom > rootRect.bottom + 1
+              ) {
+                contained = false;
+              }
+            }
+            el.style.opacity = prevOpacity;
+            el.style.visibility = prevVisibility;
+          });
           hfPublishStatus({
-            ok: false,
-            present: false,
-            contained: false,
-            reason: failReason,
+            ok: present && contained,
+            present: present,
+            contained: contained,
             version: HF_CONTRACT_VERSION,
-            durationS: durationS || 0,
+            durationS: durationS,
           });
-          return;
         }
-        var root = document.getElementById(HF_ROOT_ID);
-        var rootRect = root.getBoundingClientRect();
-        var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
-        var present = false;
-        var contained = true;
-        var tokens = [];
-        words.forEach(function (w) {
-          var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
-          if (t) tokens.push(t);
-        });
-        groups.forEach(function (el) {
-          var prevOpacity = el.style.opacity;
-          var prevVisibility = el.style.visibility;
-          el.style.opacity = "1";
-          el.style.visibility = "visible";
-          var r = el.getBoundingClientRect();
-          if (r.width > 0 && r.height > 0) {
-            var text = (el.textContent || "").toLowerCase();
-            for (var i = 0; i < tokens.length; i++) {
-              if (text.indexOf(tokens[i]) !== -1) {
-                present = true;
-                break;
-              }
-            }
-            if (
-              r.left < rootRect.left - 1 ||
-              r.right > rootRect.right + 1 ||
-              r.top < rootRect.top - 1 ||
-              r.bottom > rootRect.bottom + 1
-            ) {
-              contained = false;
-            }
-          }
-          el.style.opacity = prevOpacity;
-          el.style.visibility = prevVisibility;
-        });
-        hfPublishStatus({
-          ok: present && contained,
-          present: present,
-          contained: contained,
-          version: HF_CONTRACT_VERSION,
-          durationS: durationS,
-        });
-      }
-
-      var HF_STOPWORDS = new Set([
-        "the",
-        "a",
-        "an",
-        "and",
-        "or",
-        "but",
-        "is",
-        "are",
-        "was",
-        "were",
-        "to",
-        "of",
-        "in",
-        "on",
-        "at",
-        "for",
-        "with",
-        "by",
-        "from",
-        "as",
-        "it",
-        "its",
-        "this",
-        "that",
-        "these",
-        "those",
-        "be",
-        "been",
-        "have",
-        "has",
-        "had",
-        "do",
-        "does",
-        "did",
-        "will",
-        "would",
-        "could",
-        "should",
-        "may",
-        "might",
-        "must",
-        "can",
-        "if",
-        "then",
-        "so",
-        "just",
-        "not",
-        "no",
-        "yes",
-        "up",
-        "out",
-        "about",
-        "into",
-        "over",
-        "after",
-        "before",
-        "your",
-        "you",
-        "our",
-        "we",
-        "they",
-        "them",
-        "their",
-        "there",
-        "here",
-        "when",
-        "what",
-        "which",
-        "who",
-        "how",
-        "all",
-        "any",
-        "some",
-        "more",
-        "most",
-        "other",
-        "than",
-        "too",
-        "very",
-        "also",
-        "because",
-      ]);
-
-      function hfIsEmphasisWord(text) {
-        var clean = String(text)
-          .toLowerCase()
-          .replace(/[^a-z]/g, "");
-        return clean.length >= 5 && !HF_STOPWORDS.has(clean);
-      }
 
-      var DURATION, SAFE_WIDTH;
-      var ENTRY_DUR = 0.1;
-      var SLIDE_DUR = 0.2;
-
-      var _fitCanvas = document.createElement("canvas");
-      var _fitCtx = _fitCanvas.getContext("2d");
-      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
-        var size = baseFontSize;
-        var minSize = Math.floor(baseFontSize * 0.45);
-        while (size > minSize) {
-          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
-          if (_fitCtx.measureText(text).width <= maxWidth) return size;
-          size -= 2;
+        var HF_STOPWORDS = new Set([
+          "the",
+          "a",
+          "an",
+          "and",
+          "or",
+          "but",
+          "is",
+          "are",
+          "was",
+          "were",
+          "to",
+          "of",
+          "in",
+          "on",
+          "at",
+          "for",
+          "with",
+          "by",
+          "from",
+          "as",
+          "it",
+          "its",
+          "this",
+          "that",
+          "these",
+          "those",
+          "be",
+          "been",
+          "have",
+          "has",
+          "had",
+          "do",
+          "does",
+          "did",
+          "will",
+          "would",
+          "could",
+          "should",
+          "may",
+          "might",
+          "must",
+          "can",
+          "if",
+          "then",
+          "so",
+          "just",
+          "not",
+          "no",
+          "yes",
+          "up",
+          "out",
+          "about",
+          "into",
+          "over",
+          "after",
+          "before",
+          "your",
+          "you",
+          "our",
+          "we",
+          "they",
+          "them",
+          "their",
+          "there",
+          "here",
+          "when",
+          "what",
+          "which",
+          "who",
+          "how",
+          "all",
+          "any",
+          "some",
+          "more",
+          "most",
+          "other",
+          "than",
+          "too",
+          "very",
+          "also",
+          "because",
+        ]);
+
+        function hfIsEmphasisWord(text) {
+          var clean = String(text)
+            .toLowerCase()
+            .replace(/[^a-z]/g, "");
+          return clean.length >= 5 && !HF_STOPWORDS.has(clean);
         }
-        return minSize;
-      }
 
-      var CLASS_MAP = { n: "word word--normal", e: "word word--emphasis" };
-
-      var W = [];
-      var BLOCKS = [];
-
-      var MAX_WORDS_PER_BLOCK = 5;
-      var PAUSE_THRESHOLD = 0.1;
-
-      function hfMakeBlocks(words) {
-        var blocks = [];
-        var current = [];
-        words.forEach(function (w, i) {
-          current.push(i);
-          var isEmph = hfIsEmphasisWord(w.text);
-          var punctuation = /[,.:!?]$/.test(w.text);
-          var next = words[i + 1];
-          var pause = next ? next.start - w.end : Infinity;
-          if (
-            isEmph ||
-            punctuation ||
-            pause >= PAUSE_THRESHOLD ||
-            current.length >= MAX_WORDS_PER_BLOCK ||
-            !next
-          ) {
-            if (isEmph && current.length > 1) {
-              blocks.push({
-                line1: current.slice(0, -1).map(function (ix) {
-                  return [ix, "n"];
-                }),
-                line2: [[current[current.length - 1], "e"]],
-              });
-            } else if (isEmph) {
-              blocks.push({ line1: [[current[0], "e"]], line2: null });
-            } else if (current.length > 3) {
-              var split = Math.ceil(current.length / 2);
-              blocks.push({
-                line1: current.slice(0, split).map(function (ix) {
-                  return [ix, "n"];
-                }),
-                line2: current.slice(split).map(function (ix) {
-                  return [ix, "n"];
-                }),
-              });
-            } else {
-              blocks.push({
-                line1: current.map(function (ix) {
-                  return [ix, "n"];
-                }),
-                line2: null,
-              });
-            }
-            current = [];
+        var DURATION, SAFE_WIDTH;
+        var ENTRY_DUR = 0.1;
+        var SLIDE_DUR = 0.2;
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
           }
-        });
-        return blocks;
-      }
+          return minSize;
+        }
 
-      function hfTeardown() {
-        document.getElementById("caption-stage").innerHTML = "";
-      }
+        var CLASS_MAP = { n: "word word--normal", e: "word word--emphasis" };
 
-      function hfBuild(words, layout, durationS) {
-        DURATION = durationS;
-        var stage = document.getElementById("caption-stage");
-        var fontNormal = Math.round(86 * layout.fontScale);
-        var fontEmphasis = Math.round(180 * layout.fontScale);
-        var marginX = Math.round(60 * layout.scaleX);
-        var blockH = Math.round(430 * layout.fontScale);
-        SAFE_WIDTH = layout.W - marginX * 2;
-        stage.style.left = marginX + "px";
-        stage.style.width = SAFE_WIDTH + "px";
-        stage.style.height = blockH + "px";
-        stage.style.top = Math.max(0, layout.H - blockH - Math.round(70 * layout.scaleY)) + "px";
-
-        W = words;
-        BLOCKS = hfMakeBlocks(words);
-
-        function computeLineSize(linePairs) {
-          var hasEmphasis = linePairs.some(function (p) {
-            return p[1] === "e";
+        var W = [];
+        var BLOCKS = [];
+
+        var MAX_WORDS_PER_BLOCK = 5;
+        var PAUSE_THRESHOLD = 0.1;
+
+        function hfMakeBlocks(words) {
+          var blocks = [];
+          var current = [];
+          words.forEach(function (w, i) {
+            current.push(i);
+            var isEmph = hfIsEmphasisWord(w.text);
+            var punctuation = /[,.:!?]$/.test(w.text);
+            var next = words[i + 1];
+            var pause = next ? next.start - w.end : Infinity;
+            if (
+              isEmph ||
+              punctuation ||
+              pause >= PAUSE_THRESHOLD ||
+              current.length >= MAX_WORDS_PER_BLOCK ||
+              !next
+            ) {
+              if (isEmph && current.length > 1) {
+                blocks.push({
+                  line1: current.slice(0, -1).map(function (ix) {
+                    return [ix, "n"];
+                  }),
+                  line2: [[current[current.length - 1], "e"]],
+                });
+              } else if (isEmph) {
+                blocks.push({ line1: [[current[0], "e"]], line2: null });
+              } else if (current.length > 3) {
+                var split = Math.ceil(current.length / 2);
+                blocks.push({
+                  line1: current.slice(0, split).map(function (ix) {
+                    return [ix, "n"];
+                  }),
+                  line2: current.slice(split).map(function (ix) {
+                    return [ix, "n"];
+                  }),
+                });
+              } else {
+                blocks.push({
+                  line1: current.map(function (ix) {
+                    return [ix, "n"];
+                  }),
+                  line2: null,
+                });
+              }
+              current = [];
+            }
           });
-          var lineText = linePairs
-            .map(function (p) {
-              return W[p[0]].text;
-            })
-            .join(" ");
-          if (hasEmphasis) {
-            return fitFontSize(lineText, fontEmphasis, "800", "Playfair Display", SAFE_WIDTH);
-          }
-          return fitFontSize(lineText, fontNormal, "400", "Inter", SAFE_WIDTH);
+          return blocks;
         }
 
-        function buildBlocks() {
-          BLOCKS.forEach(function (block, bi) {
-            var el = document.createElement("div");
-            el.className = "caption-block";
-            el.id = "b" + bi;
-
-            var l1Size = computeLineSize(block.line1);
-            var l1 = document.createElement("div");
-            l1.className = "caption-line";
-            l1.id = "b" + bi + "L1";
-            block.line1.forEach(function (pair, wi) {
-              var span = document.createElement("span");
-              span.className = CLASS_MAP[pair[1]];
-              span.id = "b" + bi + "L1w" + wi;
-              span.textContent = W[pair[0]].text;
-              span.style.fontSize = l1Size + "px";
-              l1.appendChild(span);
+        function hfTeardown() {
+          document.getElementById("caption-stage").innerHTML = "";
+        }
+
+        function hfBuild(words, layout, durationS) {
+          DURATION = durationS;
+          var stage = document.getElementById("caption-stage");
+          var fontNormal = Math.round(86 * layout.fontScale);
+          var fontEmphasis = Math.round(180 * layout.fontScale);
+          var marginX = Math.round(60 * layout.scaleX);
+          var blockH = Math.round(430 * layout.fontScale);
+          SAFE_WIDTH = layout.W - marginX * 2;
+          stage.style.left = marginX + "px";
+          stage.style.width = SAFE_WIDTH + "px";
+          stage.style.height = blockH + "px";
+          stage.style.top = Math.max(0, layout.H - blockH - Math.round(70 * layout.scaleY)) + "px";
+
+          W = words;
+          BLOCKS = hfMakeBlocks(words);
+
+          function computeLineSize(linePairs) {
+            var hasEmphasis = linePairs.some(function (p) {
+              return p[1] === "e";
             });
-            el.appendChild(l1);
+            var lineText = linePairs
+              .map(function (p) {
+                return W[p[0]].text;
+              })
+              .join(" ");
+            if (hasEmphasis) {
+              return fitFontSize(lineText, fontEmphasis, "800", "Playfair Display", SAFE_WIDTH);
+            }
+            return fitFontSize(lineText, fontNormal, "400", "Inter", SAFE_WIDTH);
+          }
 
-            if (block.line2) {
-              var l2Size = computeLineSize(block.line2);
-              var l2 = document.createElement("div");
-              l2.className = "caption-line";
-              l2.id = "b" + bi + "L2";
-              block.line2.forEach(function (pair, wi) {
+          function buildBlocks() {
+            BLOCKS.forEach(function (block, bi) {
+              var el = document.createElement("div");
+              el.className = "caption-block";
+              el.id = "b" + bi;
+
+              var l1Size = computeLineSize(block.line1);
+              var l1 = document.createElement("div");
+              l1.className = "caption-line";
+              l1.id = "b" + bi + "L1";
+              block.line1.forEach(function (pair, wi) {
                 var span = document.createElement("span");
                 span.className = CLASS_MAP[pair[1]];
-                span.id = "b" + bi + "L2w" + wi;
+                span.id = "b" + bi + "L1w" + wi;
                 span.textContent = W[pair[0]].text;
-                span.style.fontSize = l2Size + "px";
-                l2.appendChild(span);
+                span.style.fontSize = l1Size + "px";
+                l1.appendChild(span);
               });
-              el.appendChild(l2);
-            }
-
-            stage.appendChild(el);
-          });
-        }
+              el.appendChild(l1);
+
+              if (block.line2) {
+                var l2Size = computeLineSize(block.line2);
+                var l2 = document.createElement("div");
+                l2.className = "caption-line";
+                l2.id = "b" + bi + "L2";
+                block.line2.forEach(function (pair, wi) {
+                  var span = document.createElement("span");
+                  span.className = CLASS_MAP[pair[1]];
+                  span.id = "b" + bi + "L2w" + wi;
+                  span.textContent = W[pair[0]].text;
+                  span.style.fontSize = l2Size + "px";
+                  l2.appendChild(span);
+                });
+                el.appendChild(l2);
+              }
 
-        buildBlocks();
+              stage.appendChild(el);
+            });
+          }
 
-        // Scale blocks that exceed safe width
-        function fitBlocks() {
-          BLOCKS.forEach(function (block, bi) {
-            var el = document.getElementById("b" + bi);
-            el.style.opacity = "1";
-            el.style.position = "relative";
-            var lines = el.querySelectorAll(".caption-line");
-            var maxW = 0;
-            lines.forEach(function (line) {
-              if (line.scrollWidth > maxW) maxW = line.scrollWidth;
+          buildBlocks();
+
+          // Scale blocks that exceed safe width
+          function fitBlocks() {
+            BLOCKS.forEach(function (block, bi) {
+              var el = document.getElementById("b" + bi);
+              el.style.opacity = "1";
+              el.style.position = "relative";
+              var lines = el.querySelectorAll(".caption-line");
+              var maxW = 0;
+              lines.forEach(function (line) {
+                if (line.scrollWidth > maxW) maxW = line.scrollWidth;
+              });
+              if (maxW > SAFE_WIDTH) {
+                var s = SAFE_WIDTH / maxW;
+                el.style.transform = "scale(" + s + ")";
+              }
+              el.style.opacity = "0";
+              el.style.position = "";
             });
-            if (maxW > SAFE_WIDTH) {
-              var s = SAFE_WIDTH / maxW;
-              el.style.transform = "scale(" + s + ")";
-            }
-            el.style.opacity = "0";
-            el.style.position = "";
-          });
-        }
+          }
 
-        fitBlocks();
+          fitBlocks();
 
-        var tl = gsap.timeline({ paused: true });
+          var tl = gsap.timeline({ paused: true });
 
-        var allEls = BLOCKS.map(function (_, i) {
-          return document.getElementById("b" + i);
-        });
+          var allEls = BLOCKS.map(function (_, i) {
+            return document.getElementById("b" + i);
+          });
 
-        function blockStart(bi) {
-          return W[BLOCKS[bi].line1[0][0]].start;
-        }
+          function blockStart(bi) {
+            return W[BLOCKS[bi].line1[0][0]].start;
+          }
 
-        BLOCKS.forEach(function (block, bi) {
-          var el = allEls[bi];
-          var start = blockStart(bi);
-          var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;
-
-          // Each block already owns its full opacity lifecycle (set 1 at its
-          // own start, then set back to 0 at its own nextStart below), and
-          // blocks occupy non-overlapping windows, so explicitly hiding every
-          // OTHER block here was redundant and made timeline construction
-          // O(blocks^2) — this collapsed under dense stress transcripts (many
-          // single-word emphasis blocks). Removed; behavior is unchanged
-          // (verified against templates.test.ts).
-
-          tl.set(el, { opacity: 1 }, start);
-
-          block.line1.forEach(function (pair, wi) {
-            var wordEl = document.getElementById("b" + bi + "L1w" + wi);
-            var wordStart = W[pair[0]].start;
-            tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
-            tl.to(
-              wordEl,
-              { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
-              wordStart,
-            );
-          });
+          BLOCKS.forEach(function (block, bi) {
+            var el = allEls[bi];
+            var start = blockStart(bi);
+            var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;
 
-          if (block.line2) {
-            var hasEmphasis = block.line2.some(function (p) {
-              return p[1] === "e";
+            // Each block already owns its full opacity lifecycle (set 1 at its
+            // own start, then set back to 0 at its own nextStart below), and
+            // blocks occupy non-overlapping windows, so explicitly hiding every
+            // OTHER block here was redundant and made timeline construction
+            // O(blocks^2) — this collapsed under dense stress transcripts (many
+            // single-word emphasis blocks). Removed; behavior is unchanged
+            // (verified against templates.test.ts).
+
+            tl.set(el, { opacity: 1 }, start);
+
+            block.line1.forEach(function (pair, wi) {
+              var wordEl = document.getElementById("b" + bi + "L1w" + wi);
+              var wordStart = W[pair[0]].start;
+              tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
+              tl.to(
+                wordEl,
+                { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
+                wordStart,
+              );
             });
-            var l2El = document.getElementById("b" + bi + "L2");
-            if (hasEmphasis) {
-              var l2Start = W[block.line2[0][0]].start;
-              tl.set(l2El, { opacity: 0, x: -layout.W }, start);
-              tl.to(l2El, { opacity: 1, x: 0, duration: SLIDE_DUR, ease: "power2.out" }, l2Start);
-            } else {
-              tl.set(l2El, { opacity: 1 }, start);
-              block.line2.forEach(function (pair, wi) {
-                var wordEl = document.getElementById("b" + bi + "L2w" + wi);
-                var wordStart = W[pair[0]].start;
-                tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
-                tl.to(
-                  wordEl,
-                  { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
-                  wordStart,
-                );
+
+            if (block.line2) {
+              var hasEmphasis = block.line2.some(function (p) {
+                return p[1] === "e";
               });
+              var l2El = document.getElementById("b" + bi + "L2");
+              if (hasEmphasis) {
+                var l2Start = W[block.line2[0][0]].start;
+                tl.set(l2El, { opacity: 0, x: -layout.W }, start);
+                tl.to(l2El, { opacity: 1, x: 0, duration: SLIDE_DUR, ease: "power2.out" }, l2Start);
+              } else {
+                tl.set(l2El, { opacity: 1 }, start);
+                block.line2.forEach(function (pair, wi) {
+                  var wordEl = document.getElementById("b" + bi + "L2w" + wi);
+                  var wordStart = W[pair[0]].start;
+                  tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
+                  tl.to(
+                    wordEl,
+                    { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
+                    wordStart,
+                  );
+                });
+              }
             }
-          }
 
-          tl.set(el, { opacity: 0 }, nextStart);
-        });
+            tl.set(el, { opacity: 0 }, nextStart);
+          });
 
-        tl.to({}, { duration: DURATION }, 0);
-        return tl;
-      }
+          tl.to({}, { duration: DURATION }, 0);
+          return tl;
+        }
 
-      var hfCurrentTimeline = null;
+        var hfCurrentTimeline = null;
 
-      function hfAttach(data) {
-        var v = hfValidate(data);
-        if (!v.ok) {
-          hfRunGate([], 0, v.reason);
-          return;
-        }
-        if (hfCurrentTimeline) {
-          hfCurrentTimeline.kill();
-          hfCurrentTimeline = null;
-        }
-        hfTeardown();
-        var layout = hfApplyStageConfig(data, v.durationS);
-        var tl = hfBuild(v.words, layout, v.durationS);
-        tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
-        // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
-        // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
-        // at t=0 — the first frame would show pre-timeline CSS defaults (usually
-        // hidden). render(time, suppressEvents, force) with force=true bypasses that.
-        tl.render(0, true, true);
-        hfCurrentTimeline = tl;
-        window.__timelines = window.__timelines || {};
-        window.__timelines[HF_COMPOSITION_ID] = tl;
-        hfRunGate(v.words, v.durationS, null);
-      }
-      window.__HF_CAPTION_ATTACH__ = hfAttach;
-
-      (function hfBoot() {
-        function start(data) {
-          var ready =
-            document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
-          ready.then(function () {
-            hfAttach(data);
-          });
-        }
-        if (window.__HF_CAPTION__) {
-          start(window.__HF_CAPTION__);
-          return;
+        function hfAttach(data) {
+          var v = hfValidate(data);
+          if (!v.ok) {
+            hfRunGate([], 0, v.reason);
+            return;
+          }
+          if (hfCurrentTimeline) {
+            hfCurrentTimeline.kill();
+            hfCurrentTimeline = null;
+          }
+          hfTeardown();
+          var layout = hfApplyStageConfig(data, v.durationS);
+          var tl = hfBuild(v.words, layout, v.durationS);
+          tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
+          // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
+          // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
+          // at t=0 — the first frame would show pre-timeline CSS defaults (usually
+          // hidden). render(time, suppressEvents, force) with force=true bypasses that.
+          tl.render(0, true, true);
+          hfCurrentTimeline = tl;
+          window.__timelines = window.__timelines || {};
+          window.__timelines[HF_COMPOSITION_ID] = tl;
+          hfRunGate(v.words, v.durationS, null);
         }
-        fetch("./caption-data.json")
-          .then(function (r) {
-            return r.ok ? r.json() : null;
-          })
-          .catch(function () {
-            return null;
-          })
-          .then(function (json) {
-            start(json || HF_DEMO_DATA);
-          });
+        window.__HF_CAPTION_ATTACH__ = hfAttach;
+
+        (function hfBoot() {
+          function start(data) {
+            var ready =
+              document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
+            ready.then(function () {
+              hfAttach(data);
+            });
+          }
+          if (window.__HF_CAPTION__) {
+            start(window.__HF_CAPTION__);
+            return;
+          }
+          fetch("./caption-data.json")
+            .then(function (r) {
+              return r.ok ? r.json() : null;
+            })
+            .catch(function () {
+              return null;
+            })
+            .then(function (json) {
+              start(json || HF_DEMO_DATA);
+            });
+        })();
       })();
     </script>
   </body>
diff --git a/registry/components/caption-emoji-pop/caption-emoji-pop.html b/registry/components/caption-emoji-pop/caption-emoji-pop.html
index e9837d5f61..6d6f15c697 100644
--- a/registry/components/caption-emoji-pop/caption-emoji-pop.html
+++ b/registry/components/caption-emoji-pop/caption-emoji-pop.html
@@ -125,669 +125,689 @@
     </div>
 
     <script>
-      var HF_COMPOSITION_ID = "caption-emoji-pop";
-      var HF_ROOT_ID = "emoji-pop";
-      var HF_GROUP_SELECTOR = ".caption-group";
-
-      var HF_DEMO_DATA = {
-        version: 1,
-        segments: [
-          {
-            start: 0,
-            text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
-            words: [
-              { text: "Every", start: 0.0, end: 0.3 },
-              { text: "great", start: 0.3, end: 0.55 },
-              { text: "video", start: 0.55, end: 0.85 },
-              { text: "starts", start: 0.85, end: 1.1 },
-              { text: "with", start: 1.1, end: 1.25 },
-              { text: "a", start: 1.25, end: 1.35 },
-              { text: "single", start: 1.35, end: 1.65 },
-              { text: "frame.", start: 1.65, end: 2.0 },
-              { text: "HyperFrames", start: 2.1, end: 2.65 },
-              { text: "lets", start: 2.65, end: 2.85 },
-              { text: "you", start: 2.85, end: 2.95 },
-              { text: "write", start: 2.95, end: 3.15 },
-              { text: "HTML", start: 3.15, end: 3.55 },
-              { text: "and", start: 3.55, end: 3.65 },
-              { text: "render", start: 3.65, end: 3.95 },
-              { text: "professional", start: 3.95, end: 4.45 },
-              { text: "video.", start: 4.45, end: 4.8 },
-              { text: "No", start: 4.9, end: 5.05 },
-              { text: "timeline.", start: 5.05, end: 5.45 },
-              { text: "No", start: 5.5, end: 5.65 },
-              { text: "drag", start: 5.65, end: 5.85 },
-              { text: "and", start: 5.85, end: 5.95 },
-              { text: "drop.", start: 5.95, end: 6.25 },
-              { text: "Just", start: 6.35, end: 6.55 },
-              { text: "code", start: 6.55, end: 6.8 },
-              { text: "that", start: 6.8, end: 6.95 },
-              { text: "becomes", start: 6.95, end: 7.3 },
-              { text: "cinema.", start: 7.3, end: 7.7 },
-            ],
-          },
-        ],
-      };
-
-      /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
-      var HF_CONTRACT_VERSION = 1;
-      var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
-
-      function hfFlattenSegments(segments) {
-        var out = [];
-        (segments || []).forEach(function (seg) {
-          ((seg && seg.words) || []).forEach(function (w) {
-            var start = Math.max(0, Number(w.start) || 0);
-            out.push({
-              text: String(w.word || w.text || "").trim(),
-              start: start,
-              end: Math.max(start, Number(w.end) || 0),
+      // IIFE: keep every template's runtime private to itself so two caption
+      // components pasted into one composition document can't clobber each
+      // other's hfAttach/hfBuild via shared script-scope names (boot is async,
+      // so collisions surface AFTER all scripts have executed).
+      (function () {
+        var HF_COMPOSITION_ID = "caption-emoji-pop";
+        var HF_ROOT_ID = "emoji-pop";
+        var HF_GROUP_SELECTOR = ".caption-group";
+
+        var HF_DEMO_DATA = {
+          version: 1,
+          segments: [
+            {
+              start: 0,
+              text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
+              words: [
+                { text: "Every", start: 0.0, end: 0.3 },
+                { text: "great", start: 0.3, end: 0.55 },
+                { text: "video", start: 0.55, end: 0.85 },
+                { text: "starts", start: 0.85, end: 1.1 },
+                { text: "with", start: 1.1, end: 1.25 },
+                { text: "a", start: 1.25, end: 1.35 },
+                { text: "single", start: 1.35, end: 1.65 },
+                { text: "frame.", start: 1.65, end: 2.0 },
+                { text: "HyperFrames", start: 2.1, end: 2.65 },
+                { text: "lets", start: 2.65, end: 2.85 },
+                { text: "you", start: 2.85, end: 2.95 },
+                { text: "write", start: 2.95, end: 3.15 },
+                { text: "HTML", start: 3.15, end: 3.55 },
+                { text: "and", start: 3.55, end: 3.65 },
+                { text: "render", start: 3.65, end: 3.95 },
+                { text: "professional", start: 3.95, end: 4.45 },
+                { text: "video.", start: 4.45, end: 4.8 },
+                { text: "No", start: 4.9, end: 5.05 },
+                { text: "timeline.", start: 5.05, end: 5.45 },
+                { text: "No", start: 5.5, end: 5.65 },
+                { text: "drag", start: 5.65, end: 5.85 },
+                { text: "and", start: 5.85, end: 5.95 },
+                { text: "drop.", start: 5.95, end: 6.25 },
+                { text: "Just", start: 6.35, end: 6.55 },
+                { text: "code", start: 6.55, end: 6.8 },
+                { text: "that", start: 6.8, end: 6.95 },
+                { text: "becomes", start: 6.95, end: 7.3 },
+                { text: "cinema.", start: 7.3, end: 7.7 },
+              ],
+            },
+          ],
+        };
+
+        /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
+        var HF_CONTRACT_VERSION = 1;
+        var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
+
+        function hfFlattenSegments(segments) {
+          var out = [];
+          (segments || []).forEach(function (seg) {
+            ((seg && seg.words) || []).forEach(function (w) {
+              var start = Math.max(0, Number(w.start) || 0);
+              out.push({
+                text: String(w.word || w.text || "").trim(),
+                start: start,
+                end: Math.max(start, Number(w.end) || 0),
+              });
             });
           });
-        });
-        out.sort(function (a, b) {
-          return a.start - b.start;
-        });
-        return out.filter(function (w) {
-          return w.text.length > 0;
-        });
-      }
-
-      function hfDeriveDuration(words) {
-        var end = 0;
-        words.forEach(function (w) {
-          if (w.end > end) end = w.end;
-        });
-        return end;
-      }
-
-      function hfValidate(data) {
-        if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
-        if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
-          return { ok: false, reason: "unsupported-version" };
-        }
-        if (!Array.isArray(data.segments) || data.segments.length === 0) {
-          return { ok: false, reason: "no-segments" };
+          out.sort(function (a, b) {
+            return a.start - b.start;
+          });
+          return out.filter(function (w) {
+            return w.text.length > 0;
+          });
         }
-        if (data.displayMode != null && data.displayMode !== "full") {
-          return { ok: false, reason: "unsupported-displayMode" };
+
+        function hfDeriveDuration(words) {
+          var end = 0;
+          words.forEach(function (w) {
+            if (w.end > end) end = w.end;
+          });
+          return end;
         }
-        var words = hfFlattenSegments(data.segments);
-        if (words.length === 0) return { ok: false, reason: "no-words" };
-        return { ok: true, words: words, durationS: hfDeriveDuration(words) };
-      }
 
-      function hfApplyStageConfig(data, durationS) {
-        var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
-        var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
-        var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
-        var root = document.getElementById(HF_ROOT_ID);
-        [document.documentElement, document.body, root].forEach(function (el) {
-          el.style.width = W + "px";
-          el.style.height = H + "px";
-        });
-        root.setAttribute("data-width", String(W));
-        root.setAttribute("data-height", String(H));
-        root.setAttribute("data-duration", String(durationS));
-        var brand = (data && data.brand) || {};
-        if (typeof brand.primaryColor === "string" && brand.primaryColor) {
-          root.style.setProperty("--hf-caption-primary", brand.primaryColor);
-        } else {
-          root.style.removeProperty("--hf-caption-primary");
+        function hfValidate(data) {
+          if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
+          if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
+            return { ok: false, reason: "unsupported-version" };
+          }
+          if (!Array.isArray(data.segments) || data.segments.length === 0) {
+            return { ok: false, reason: "no-segments" };
+          }
+          if (data.displayMode != null && data.displayMode !== "full") {
+            return { ok: false, reason: "unsupported-displayMode" };
+          }
+          var words = hfFlattenSegments(data.segments);
+          if (words.length === 0) return { ok: false, reason: "no-words" };
+          return { ok: true, words: words, durationS: hfDeriveDuration(words) };
         }
-        if (typeof brand.accentColor === "string" && brand.accentColor) {
-          root.style.setProperty("--hf-caption-accent", brand.accentColor);
-        } else {
-          root.style.removeProperty("--hf-caption-accent");
+
+        function hfApplyStageConfig(data, durationS) {
+          var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
+          var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
+          var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
+          var root = document.getElementById(HF_ROOT_ID);
+          [document.documentElement, document.body, root].forEach(function (el) {
+            el.style.width = W + "px";
+            el.style.height = H + "px";
+          });
+          root.setAttribute("data-width", String(W));
+          root.setAttribute("data-height", String(H));
+          root.setAttribute("data-duration", String(durationS));
+          var brand = (data && data.brand) || {};
+          if (typeof brand.primaryColor === "string" && brand.primaryColor) {
+            root.style.setProperty("--hf-caption-primary", brand.primaryColor);
+          } else {
+            root.style.removeProperty("--hf-caption-primary");
+          }
+          if (typeof brand.accentColor === "string" && brand.accentColor) {
+            root.style.setProperty("--hf-caption-accent", brand.accentColor);
+          } else {
+            root.style.removeProperty("--hf-caption-accent");
+          }
+          return {
+            W: W,
+            H: H,
+            scaleX: W / 1920,
+            scaleY: H / 1080,
+            fontScale: Math.min(W, H) / 1080,
+          };
         }
-        return { W: W, H: H, scaleX: W / 1920, scaleY: H / 1080, fontScale: Math.min(W, H) / 1080 };
-      }
 
-      function hfPublishStatus(status) {
-        window.__HF_CAPTION_STATUS = status;
-        document
-          .getElementById(HF_ROOT_ID)
-          .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
-      }
+        function hfPublishStatus(status) {
+          window.__HF_CAPTION_STATUS = status;
+          document
+            .getElementById(HF_ROOT_ID)
+            .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
+        }
 
-      function hfRunGate(words, durationS, failReason) {
-        if (failReason) {
+        function hfRunGate(words, durationS, failReason) {
+          if (failReason) {
+            hfPublishStatus({
+              ok: false,
+              present: false,
+              contained: false,
+              reason: failReason,
+              version: HF_CONTRACT_VERSION,
+              durationS: durationS || 0,
+            });
+            return;
+          }
+          var root = document.getElementById(HF_ROOT_ID);
+          var rootRect = root.getBoundingClientRect();
+          var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
+          var present = false;
+          var contained = true;
+          var tokens = [];
+          words.forEach(function (w) {
+            var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
+            if (t) tokens.push(t);
+          });
+          groups.forEach(function (el) {
+            var prevOpacity = el.style.opacity;
+            var prevVisibility = el.style.visibility;
+            el.style.opacity = "1";
+            el.style.visibility = "visible";
+            var r = el.getBoundingClientRect();
+            if (r.width > 0 && r.height > 0) {
+              var text = (el.textContent || "").toLowerCase();
+              for (var i = 0; i < tokens.length; i++) {
+                if (text.indexOf(tokens[i]) !== -1) {
+                  present = true;
+                  break;
+                }
+              }
+              if (
+                r.left < rootRect.left - 1 ||
+                r.right > rootRect.right + 1 ||
+                r.top < rootRect.top - 1 ||
+                r.bottom > rootRect.bottom + 1
+              ) {
+                contained = false;
+              }
+            }
+            el.style.opacity = prevOpacity;
+            el.style.visibility = prevVisibility;
+          });
           hfPublishStatus({
-            ok: false,
-            present: false,
-            contained: false,
-            reason: failReason,
+            ok: present && contained,
+            present: present,
+            contained: contained,
             version: HF_CONTRACT_VERSION,
-            durationS: durationS || 0,
+            durationS: durationS,
           });
-          return;
         }
-        var root = document.getElementById(HF_ROOT_ID);
-        var rootRect = root.getBoundingClientRect();
-        var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
-        var present = false;
-        var contained = true;
-        var tokens = [];
-        words.forEach(function (w) {
-          var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
-          if (t) tokens.push(t);
-        });
-        groups.forEach(function (el) {
-          var prevOpacity = el.style.opacity;
-          var prevVisibility = el.style.visibility;
-          el.style.opacity = "1";
-          el.style.visibility = "visible";
-          var r = el.getBoundingClientRect();
-          if (r.width > 0 && r.height > 0) {
-            var text = (el.textContent || "").toLowerCase();
-            for (var i = 0; i < tokens.length; i++) {
-              if (text.indexOf(tokens[i]) !== -1) {
-                present = true;
-                break;
-              }
-            }
-            if (
-              r.left < rootRect.left - 1 ||
-              r.right > rootRect.right + 1 ||
-              r.top < rootRect.top - 1 ||
-              r.bottom > rootRect.bottom + 1
-            ) {
-              contained = false;
-            }
-          }
-          el.style.opacity = prevOpacity;
-          el.style.visibility = prevVisibility;
-        });
-        hfPublishStatus({
-          ok: present && contained,
-          present: present,
-          contained: contained,
-          version: HF_CONTRACT_VERSION,
-          durationS: durationS,
-        });
-      }
 
-      var HF_STOPWORDS = new Set([
-        "the",
-        "a",
-        "an",
-        "and",
-        "or",
-        "but",
-        "is",
-        "are",
-        "was",
-        "were",
-        "to",
-        "of",
-        "in",
-        "on",
-        "at",
-        "for",
-        "with",
-        "by",
-        "from",
-        "as",
-        "it",
-        "its",
-        "this",
-        "that",
-        "these",
-        "those",
-        "be",
-        "been",
-        "have",
-        "has",
-        "had",
-        "do",
-        "does",
-        "did",
-        "will",
-        "would",
-        "could",
-        "should",
-        "may",
-        "might",
-        "must",
-        "can",
-        "if",
-        "then",
-        "so",
-        "just",
-        "not",
-        "no",
-        "yes",
-        "up",
-        "out",
-        "about",
-        "into",
-        "over",
-        "after",
-        "before",
-        "your",
-        "you",
-        "our",
-        "we",
-        "they",
-        "them",
-        "their",
-        "there",
-        "here",
-        "when",
-        "what",
-        "which",
-        "who",
-        "how",
-        "all",
-        "any",
-        "some",
-        "more",
-        "most",
-        "other",
-        "than",
-        "too",
-        "very",
-        "also",
-        "because",
-      ]);
-
-      function hfIsEmphasisWord(text) {
-        var clean = String(text)
-          .toLowerCase()
-          .replace(/[^a-z]/g, "");
-        return clean.length >= 5 && !HF_STOPWORDS.has(clean);
-      }
+        var HF_STOPWORDS = new Set([
+          "the",
+          "a",
+          "an",
+          "and",
+          "or",
+          "but",
+          "is",
+          "are",
+          "was",
+          "were",
+          "to",
+          "of",
+          "in",
+          "on",
+          "at",
+          "for",
+          "with",
+          "by",
+          "from",
+          "as",
+          "it",
+          "its",
+          "this",
+          "that",
+          "these",
+          "those",
+          "be",
+          "been",
+          "have",
+          "has",
+          "had",
+          "do",
+          "does",
+          "did",
+          "will",
+          "would",
+          "could",
+          "should",
+          "may",
+          "might",
+          "must",
+          "can",
+          "if",
+          "then",
+          "so",
+          "just",
+          "not",
+          "no",
+          "yes",
+          "up",
+          "out",
+          "about",
+          "into",
+          "over",
+          "after",
+          "before",
+          "your",
+          "you",
+          "our",
+          "we",
+          "they",
+          "them",
+          "their",
+          "there",
+          "here",
+          "when",
+          "what",
+          "which",
+          "who",
+          "how",
+          "all",
+          "any",
+          "some",
+          "more",
+          "most",
+          "other",
+          "than",
+          "too",
+          "very",
+          "also",
+          "because",
+        ]);
+
+        function hfIsEmphasisWord(text) {
+          var clean = String(text)
+            .toLowerCase()
+            .replace(/[^a-z]/g, "");
+          return clean.length >= 5 && !HF_STOPWORDS.has(clean);
+        }
 
-      var DURATION, SAFE_ZONE_WIDTH, CAPTION_FONT_SIZE, WORD_SPACING;
-      var MAX_WORDS_PER_GROUP = 3;
-      var PAUSE_THRESHOLD = 0.1;
-      var ENTRY_FRAMES = 4;
-      var EXIT_FRAMES = 3;
-      var FPS = 30;
-      var ENTRY_DURATION = ENTRY_FRAMES / FPS;
-      var EXIT_DURATION = EXIT_FRAMES / FPS;
-      var FONT_WIDTH_SAFETY = 1.14;
-      var PRIMARY_COLOR = "#FFFFFF";
-      var ACCENT_COLORS = ["#FF76FF", "#FF0002", "#B2F7FF"];
-      var hfPrimaryColor = PRIMARY_COLOR;
-      var hfAccentColors = ACCENT_COLORS;
-      var hfFontScale = 1;
-
-      // Emoji map for a generic keyword lexicon (not tied to the demo transcript)
-      var WORD_EMOJI = {
-        amazing: "🤩",
-        awesome: "🔥",
-        big: "🐘",
-        brain: "🧠",
-        build: "🛠️",
-        built: "🛠️",
-        celebrate: "🎉",
-        change: "🔄",
-        cinema: "🎥",
-        code: "⌨️",
-        customers: "🤝",
-        data: "📊",
-        dream: "💭",
-        easy: "👌",
-        fast: "⚡",
-        fire: "🔥",
-        frame: "🖼️",
-        free: "🎁",
-        fun: "🎈",
-        future: "🔮",
-        global: "🌍",
-        grow: "📈",
-        growth: "📈",
-        heart: "❤️",
-        huge: "🐘",
-        idea: "💡",
-        launch: "🚀",
-        learn: "📚",
-        love: "❤️",
-        magic: "✨",
-        money: "💰",
-        music: "🎵",
-        new: "✨",
-        party: "🎉",
-        perfect: "💯",
-        power: "💪",
-        professional: "✨",
-        rocket: "🚀",
-        save: "🛟",
-        saves: "🛟",
-        secret: "🤫",
-        smart: "🧠",
-        star: "⭐",
-        stop: "✋",
-        strong: "💪",
-        success: "🏆",
-        team: "👥",
-        time: "⏰",
-        today: "📅",
-        video: "📹",
-        win: "🏆",
-        world: "🌍",
-        wow: "😮",
-      };
-
-      function normalizeWords(rawWords) {
-        return rawWords
-          .map(function (item) {
-            var text = String(item.word || item.text || "").trim();
-            var clean = text.toLowerCase().replace(/[^a-z]/g, "");
-            return {
-              text: text,
-              start: Math.max(0, Number(item.start) || 0),
-              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
-              emoji: WORD_EMOJI[clean] || null,
-            };
-          })
-          .filter(function (word) {
-            return word.text.length > 0;
-          });
-      }
+        var DURATION, SAFE_ZONE_WIDTH, CAPTION_FONT_SIZE, WORD_SPACING;
+        var MAX_WORDS_PER_GROUP = 3;
+        var PAUSE_THRESHOLD = 0.1;
+        var ENTRY_FRAMES = 4;
+        var EXIT_FRAMES = 3;
+        var FPS = 30;
+        var ENTRY_DURATION = ENTRY_FRAMES / FPS;
+        var EXIT_DURATION = EXIT_FRAMES / FPS;
+        var FONT_WIDTH_SAFETY = 1.14;
+        var PRIMARY_COLOR = "#FFFFFF";
+        var ACCENT_COLORS = ["#FF76FF", "#FF0002", "#B2F7FF"];
+        var hfPrimaryColor = PRIMARY_COLOR;
+        var hfAccentColors = ACCENT_COLORS;
+        var hfFontScale = 1;
+
+        // Emoji map for a generic keyword lexicon (not tied to the demo transcript)
+        var WORD_EMOJI = {
+          amazing: "🤩",
+          awesome: "🔥",
+          big: "🐘",
+          brain: "🧠",
+          build: "🛠️",
+          built: "🛠️",
+          celebrate: "🎉",
+          change: "🔄",
+          cinema: "🎥",
+          code: "⌨️",
+          customers: "🤝",
+          data: "📊",
+          dream: "💭",
+          easy: "👌",
+          fast: "⚡",
+          fire: "🔥",
+          frame: "🖼️",
+          free: "🎁",
+          fun: "🎈",
+          future: "🔮",
+          global: "🌍",
+          grow: "📈",
+          growth: "📈",
+          heart: "❤️",
+          huge: "🐘",
+          idea: "💡",
+          launch: "🚀",
+          learn: "📚",
+          love: "❤️",
+          magic: "✨",
+          money: "💰",
+          music: "🎵",
+          new: "✨",
+          party: "🎉",
+          perfect: "💯",
+          power: "💪",
+          professional: "✨",
+          rocket: "🚀",
+          save: "🛟",
+          saves: "🛟",
+          secret: "🤫",
+          smart: "🧠",
+          star: "⭐",
+          stop: "✋",
+          strong: "💪",
+          success: "🏆",
+          team: "👥",
+          time: "⏰",
+          today: "📅",
+          video: "📹",
+          win: "🏆",
+          world: "🌍",
+          wow: "😮",
+        };
 
-      function seededRandom(seed) {
-        var x = Math.sin(seed * 9999) * 10000;
-        return x - Math.floor(x);
-      }
+        function normalizeWords(rawWords) {
+          return rawWords
+            .map(function (item) {
+              var text = String(item.word || item.text || "").trim();
+              var clean = text.toLowerCase().replace(/[^a-z]/g, "");
+              return {
+                text: text,
+                start: Math.max(0, Number(item.start) || 0),
+                end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+                emoji: WORD_EMOJI[clean] || null,
+              };
+            })
+            .filter(function (word) {
+              return word.text.length > 0;
+            });
+        }
 
-      function assignWordColors(words, groupIndex) {
-        return words.map(function (word, index) {
-          var clean = word.text.toLowerCase().replace(/[^a-z]/g, "");
-          if (hfIsEmphasisWord(word.text)) {
-            var ci = Math.floor(seededRandom(groupIndex * 23 + index * 31) * hfAccentColors.length);
-            return hfAccentColors[ci];
-          }
-          if (HF_STOPWORDS.has(clean)) return hfPrimaryColor;
-          var rand = seededRandom(groupIndex * 13 + index);
-          if (rand > 0.55) {
-            var ci2 = Math.floor(rand * hfAccentColors.length) % hfAccentColors.length;
-            return hfAccentColors[ci2];
-          }
-          return hfPrimaryColor;
-        });
-      }
+        function seededRandom(seed) {
+          var x = Math.sin(seed * 9999) * 10000;
+          return x - Math.floor(x);
+        }
 
-      var _fitCanvas = document.createElement("canvas");
-      var _fitCtx = _fitCanvas.getContext("2d");
-      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
-        var size = baseFontSize;
-        var minSize = Math.floor(baseFontSize * 0.45);
-        while (size > minSize) {
-          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
-          if (_fitCtx.measureText(text).width <= maxWidth) return size;
-          size -= 2;
+        function assignWordColors(words, groupIndex) {
+          return words.map(function (word, index) {
+            var clean = word.text.toLowerCase().replace(/[^a-z]/g, "");
+            if (hfIsEmphasisWord(word.text)) {
+              var ci = Math.floor(
+                seededRandom(groupIndex * 23 + index * 31) * hfAccentColors.length,
+              );
+              return hfAccentColors[ci];
+            }
+            if (HF_STOPWORDS.has(clean)) return hfPrimaryColor;
+            var rand = seededRandom(groupIndex * 13 + index);
+            if (rand > 0.55) {
+              var ci2 = Math.floor(rand * hfAccentColors.length) % hfAccentColors.length;
+              return hfAccentColors[ci2];
+            }
+            return hfPrimaryColor;
+          });
+        }
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
         }
-        return minSize;
-      }
 
-      var measureCanvas = document.createElement("canvas");
-      var measureContext = measureCanvas.getContext("2d");
+        var measureCanvas = document.createElement("canvas");
+        var measureContext = measureCanvas.getContext("2d");
 
-      function measureWord(word, fontSize) {
-        measureContext.font = "900 " + fontSize + "px Gabarito";
-        return measureContext.measureText(word.text.toUpperCase()).width * FONT_WIDTH_SAFETY;
-      }
+        function measureWord(word, fontSize) {
+          measureContext.font = "900 " + fontSize + "px Gabarito";
+          return measureContext.measureText(word.text.toUpperCase()).width * FONT_WIDTH_SAFETY;
+        }
 
-      function measureLineWidth(words, fontSize) {
-        return words.reduce(function (total, word, index) {
-          return total + measureWord(word, fontSize) + (index ? WORD_SPACING : 0);
-        }, 0);
-      }
+        function measureLineWidth(words, fontSize) {
+          return words.reduce(function (total, word, index) {
+            return total + measureWord(word, fontSize) + (index ? WORD_SPACING : 0);
+          }, 0);
+        }
 
-      function fitsLine(words) {
-        return measureLineWidth(words, CAPTION_FONT_SIZE) <= SAFE_ZONE_WIDTH;
-      }
+        function fitsLine(words) {
+          return measureLineWidth(words, CAPTION_FONT_SIZE) <= SAFE_ZONE_WIDTH;
+        }
 
-      function makeGroups(words) {
-        var groups = [];
-        var current = [];
-        words.forEach(function (word, index) {
-          var nextWord = words[index + 1];
-          var testGroup = current.concat([word]);
-          if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsLine(testGroup)) {
-            if (current.length) groups.push(makeGroup(current, groups.length));
-            current = [word];
-            return;
-          }
-          current.push(word);
-          var punctuation = /[,.:!?]$/.test(word.text);
-          var pause = nextWord ? nextWord.start - word.end : 0;
-          if (
-            !nextWord ||
-            punctuation ||
-            pause >= PAUSE_THRESHOLD ||
-            current.length >= MAX_WORDS_PER_GROUP
-          ) {
-            groups.push(makeGroup(current, groups.length));
-            current = [];
-          }
-        });
-        if (current.length) groups.push(makeGroup(current, groups.length));
-        return groups;
-      }
+        function makeGroups(words) {
+          var groups = [];
+          var current = [];
+          words.forEach(function (word, index) {
+            var nextWord = words[index + 1];
+            var testGroup = current.concat([word]);
+            if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsLine(testGroup)) {
+              if (current.length) groups.push(makeGroup(current, groups.length));
+              current = [word];
+              return;
+            }
+            current.push(word);
+            var punctuation = /[,.:!?]$/.test(word.text);
+            var pause = nextWord ? nextWord.start - word.end : 0;
+            if (
+              !nextWord ||
+              punctuation ||
+              pause >= PAUSE_THRESHOLD ||
+              current.length >= MAX_WORDS_PER_GROUP
+            ) {
+              groups.push(makeGroup(current, groups.length));
+              current = [];
+            }
+          });
+          if (current.length) groups.push(makeGroup(current, groups.length));
+          return groups;
+        }
 
-      function makeGroup(words, groupIndex) {
-        var colors = assignWordColors(words, groupIndex);
-        var emoji = null;
-        for (var i = 0; i < words.length; i++) {
-          if (words[i].emoji) {
-            emoji = words[i].emoji;
-            break;
+        function makeGroup(words, groupIndex) {
+          var colors = assignWordColors(words, groupIndex);
+          var emoji = null;
+          for (var i = 0; i < words.length; i++) {
+            if (words[i].emoji) {
+              emoji = words[i].emoji;
+              break;
+            }
           }
+          return {
+            words: words.slice(),
+            colors: colors,
+            emoji: emoji,
+            start: words[0].start,
+            end: words[words.length - 1].end,
+          };
         }
-        return {
-          words: words.slice(),
-          colors: colors,
-          emoji: emoji,
-          start: words[0].start,
-          end: words[words.length - 1].end,
-        };
-      }
-
-      function shadowForColor(color) {
-        var hex = color.replace("#", "");
-        var r = parseInt(hex.slice(0, 2), 16);
-        var g = parseInt(hex.slice(2, 4), 16);
-        var b = parseInt(hex.slice(4, 6), 16);
-        return (
-          "0 4px 8px rgba(0,0,0,0.7), 0 0 2px rgba(" +
-          r +
-          "," +
-          g +
-          "," +
-          b +
-          ",1), 0 0 8px rgba(" +
-          r +
-          "," +
-          g +
-          "," +
-          b +
-          ",0.6)"
-        );
-      }
 
-      function buildCaptions(groups) {
-        var stage = document.getElementById("caption-stage");
-        groups.forEach(function (group, groupIndex) {
-          var groupText = group.words
-            .map(function (w) {
-              return w.text.toUpperCase();
-            })
-            .join(" ");
-          var computedSize = fitFontSize(
-            groupText,
-            CAPTION_FONT_SIZE,
-            "900",
-            "Gabarito",
-            SAFE_ZONE_WIDTH,
+        function shadowForColor(color) {
+          var hex = color.replace("#", "");
+          var r = parseInt(hex.slice(0, 2), 16);
+          var g = parseInt(hex.slice(2, 4), 16);
+          var b = parseInt(hex.slice(4, 6), 16);
+          return (
+            "0 4px 8px rgba(0,0,0,0.7), 0 0 2px rgba(" +
+            r +
+            "," +
+            g +
+            "," +
+            b +
+            ",1), 0 0 8px rgba(" +
+            r +
+            "," +
+            g +
+            "," +
+            b +
+            ",0.6)"
           );
-          var groupEl = document.createElement("div");
-          groupEl.id = "caption-group-" + groupIndex;
-          groupEl.className = "caption-group";
-
-          if (group.emoji) {
-            var emojiEl = document.createElement("div");
-            emojiEl.className = "caption-emoji";
-            emojiEl.textContent = group.emoji;
-            emojiEl.style.fontSize = Math.round(56 * hfFontScale) + "px";
-            groupEl.appendChild(emojiEl);
-          }
+        }
+
+        function buildCaptions(groups) {
+          var stage = document.getElementById("caption-stage");
+          groups.forEach(function (group, groupIndex) {
+            var groupText = group.words
+              .map(function (w) {
+                return w.text.toUpperCase();
+              })
+              .join(" ");
+            var computedSize = fitFontSize(
+              groupText,
+              CAPTION_FONT_SIZE,
+              "900",
+              "Gabarito",
+              SAFE_ZONE_WIDTH,
+            );
+            var groupEl = document.createElement("div");
+            groupEl.id = "caption-group-" + groupIndex;
+            groupEl.className = "caption-group";
+
+            if (group.emoji) {
+              var emojiEl = document.createElement("div");
+              emojiEl.className = "caption-emoji";
+              emojiEl.textContent = group.emoji;
+              emojiEl.style.fontSize = Math.round(56 * hfFontScale) + "px";
+              groupEl.appendChild(emojiEl);
+            }
+
+            var lineEl = document.createElement("div");
+            lineEl.className = "caption-line";
+            group.words.forEach(function (word, wordIndex) {
+              var color = group.colors[wordIndex] || hfPrimaryColor;
+              var wordEl = document.createElement("span");
+              wordEl.className = "caption-word";
+              wordEl.textContent = word.text.toUpperCase();
+              wordEl.style.color = color;
+              wordEl.style.fontSize = computedSize + "px";
+              wordEl.style.textShadow = shadowForColor(color);
+              lineEl.appendChild(wordEl);
+            });
 
-          var lineEl = document.createElement("div");
-          lineEl.className = "caption-line";
-          group.words.forEach(function (word, wordIndex) {
-            var color = group.colors[wordIndex] || hfPrimaryColor;
-            var wordEl = document.createElement("span");
-            wordEl.className = "caption-word";
-            wordEl.textContent = word.text.toUpperCase();
-            wordEl.style.color = color;
-            wordEl.style.fontSize = computedSize + "px";
-            wordEl.style.textShadow = shadowForColor(color);
-            lineEl.appendChild(wordEl);
+            groupEl.appendChild(lineEl);
+            stage.appendChild(groupEl);
           });
+        }
 
-          groupEl.appendChild(lineEl);
-          stage.appendChild(groupEl);
-        });
-      }
+        function hfTeardown() {
+          document.getElementById("caption-stage").innerHTML = "";
+        }
 
-      function hfTeardown() {
-        document.getElementById("caption-stage").innerHTML = "";
-      }
+        function hfBuild(words, layout, durationS) {
+          DURATION = durationS;
+          CAPTION_FONT_SIZE = Math.round(72 * layout.fontScale);
+          SAFE_ZONE_WIDTH = Math.round(1400 * layout.scaleX);
+          WORD_SPACING = Math.round(14 * layout.fontScale);
+          hfFontScale = layout.fontScale;
+
+          var stage = document.getElementById("caption-stage");
+          var stageHeight = Math.round(280 * layout.fontScale);
+          stage.style.width = SAFE_ZONE_WIDTH + "px";
+          stage.style.height = stageHeight + "px";
+          stage.style.bottom = Math.round(80 * layout.scaleY) + "px";
+
+          var rootEl = document.getElementById(HF_ROOT_ID);
+          var primary = getComputedStyle(rootEl).getPropertyValue("--hf-caption-primary").trim();
+          var accent = getComputedStyle(rootEl).getPropertyValue("--hf-caption-accent").trim();
+          hfPrimaryColor = /^#[0-9a-f]{6}$/i.test(primary) ? primary : "#FFFFFF";
+          hfAccentColors = /^#[0-9a-f]{6}$/i.test(accent)
+            ? [accent]
+            : ["#FF76FF", "#FF0002", "#B2F7FF"];
+
+          var WORDS = normalizeWords(words);
+          var GROUPS = makeGroups(WORDS);
+          buildCaptions(GROUPS);
+          GROUPS.forEach(function (_, i) {
+            var el = document.getElementById("caption-group-" + i);
+            el.style.width = SAFE_ZONE_WIDTH + "px";
+            el.style.height = stageHeight + "px";
+          });
 
-      function hfBuild(words, layout, durationS) {
-        DURATION = durationS;
-        CAPTION_FONT_SIZE = Math.round(72 * layout.fontScale);
-        SAFE_ZONE_WIDTH = Math.round(1400 * layout.scaleX);
-        WORD_SPACING = Math.round(14 * layout.fontScale);
-        hfFontScale = layout.fontScale;
-
-        var stage = document.getElementById("caption-stage");
-        var stageHeight = Math.round(280 * layout.fontScale);
-        stage.style.width = SAFE_ZONE_WIDTH + "px";
-        stage.style.height = stageHeight + "px";
-        stage.style.bottom = Math.round(80 * layout.scaleY) + "px";
-
-        var rootEl = document.getElementById(HF_ROOT_ID);
-        var primary = getComputedStyle(rootEl).getPropertyValue("--hf-caption-primary").trim();
-        var accent = getComputedStyle(rootEl).getPropertyValue("--hf-caption-accent").trim();
-        hfPrimaryColor = /^#[0-9a-f]{6}$/i.test(primary) ? primary : "#FFFFFF";
-        hfAccentColors = /^#[0-9a-f]{6}$/i.test(accent)
-          ? [accent]
-          : ["#FF76FF", "#FF0002", "#B2F7FF"];
-
-        var WORDS = normalizeWords(words);
-        var GROUPS = makeGroups(WORDS);
-        buildCaptions(GROUPS);
-        GROUPS.forEach(function (_, i) {
-          var el = document.getElementById("caption-group-" + i);
-          el.style.width = SAFE_ZONE_WIDTH + "px";
-          el.style.height = stageHeight + "px";
-        });
-
-        var tl = gsap.timeline({ paused: true });
-
-        var visibleStarts = GROUPS.map(function (group, groupIndex) {
-          var prev = GROUPS[groupIndex - 1];
-          var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
-          var entryLead = Math.min(ENTRY_DURATION, availableGap);
-          return Math.max(0, group.start - entryLead);
-        });
-
-        var allGroupEls = GROUPS.map(function (_, i) {
-          return document.getElementById("caption-group-" + i);
-        });
-
-        GROUPS.forEach(function (group, groupIndex) {
-          var groupEl = allGroupEls[groupIndex];
-          var visibleStart = visibleStarts[groupIndex];
-          var visibleEnd =
-            groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
-          var exitStart = Math.max(visibleStart, visibleEnd - EXIT_DURATION);
-
-          // Each group already owns its full opacity lifecycle (set 0 at its
-          // own visibleStart, animated to 1, then set back to 0 at its own
-          // visibleEnd below), and groups occupy non-overlapping windows, so
-          // explicitly hiding every OTHER group here was redundant and made
-          // timeline construction O(groups^2) — this collapsed under dense
-          // stress transcripts (many short groups). Removed; behavior is
-          // unchanged (verified against templates.test.ts).
-
-          tl.set(groupEl, { opacity: 0, scaleX: 0.8, scaleY: 1 }, visibleStart);
-          tl.to(
-            groupEl,
-            { opacity: 1, scaleX: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
-            visibleStart,
-          );
-          tl.to(
-            groupEl,
-            {
-              scaleX: 0.75,
-              opacity: 0.8,
-              duration: EXIT_DURATION,
-              ease: "power2.in",
-              force3D: true,
-            },
-            exitStart,
-          );
-          tl.set(groupEl, { opacity: 0 }, visibleEnd);
-        });
+          var tl = gsap.timeline({ paused: true });
 
-        return tl;
-      }
+          var visibleStarts = GROUPS.map(function (group, groupIndex) {
+            var prev = GROUPS[groupIndex - 1];
+            var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+            var entryLead = Math.min(ENTRY_DURATION, availableGap);
+            return Math.max(0, group.start - entryLead);
+          });
 
-      var hfCurrentTimeline = null;
+          var allGroupEls = GROUPS.map(function (_, i) {
+            return document.getElementById("caption-group-" + i);
+          });
 
-      function hfAttach(data) {
-        var v = hfValidate(data);
-        if (!v.ok) {
-          hfRunGate([], 0, v.reason);
-          return;
-        }
-        if (hfCurrentTimeline) {
-          hfCurrentTimeline.kill();
-          hfCurrentTimeline = null;
-        }
-        hfTeardown();
-        var layout = hfApplyStageConfig(data, v.durationS);
-        var tl = hfBuild(v.words, layout, v.durationS);
-        tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
-        // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
-        // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
-        // at t=0 — the first frame would show pre-timeline CSS defaults (usually
-        // hidden). render(time, suppressEvents, force) with force=true bypasses that.
-        tl.render(0, true, true);
-        hfCurrentTimeline = tl;
-        window.__timelines = window.__timelines || {};
-        window.__timelines[HF_COMPOSITION_ID] = tl;
-        hfRunGate(v.words, v.durationS, null);
-      }
-      window.__HF_CAPTION_ATTACH__ = hfAttach;
-
-      (function hfBoot() {
-        function start(data) {
-          var ready =
-            document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
-          ready.then(function () {
-            hfAttach(data);
+          GROUPS.forEach(function (group, groupIndex) {
+            var groupEl = allGroupEls[groupIndex];
+            var visibleStart = visibleStarts[groupIndex];
+            var visibleEnd =
+              groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+            var exitStart = Math.max(visibleStart, visibleEnd - EXIT_DURATION);
+
+            // Each group already owns its full opacity lifecycle (set 0 at its
+            // own visibleStart, animated to 1, then set back to 0 at its own
+            // visibleEnd below), and groups occupy non-overlapping windows, so
+            // explicitly hiding every OTHER group here was redundant and made
+            // timeline construction O(groups^2) — this collapsed under dense
+            // stress transcripts (many short groups). Removed; behavior is
+            // unchanged (verified against templates.test.ts).
+
+            tl.set(groupEl, { opacity: 0, scaleX: 0.8, scaleY: 1 }, visibleStart);
+            tl.to(
+              groupEl,
+              {
+                opacity: 1,
+                scaleX: 1,
+                duration: ENTRY_DURATION,
+                ease: "power3.out",
+                force3D: true,
+              },
+              visibleStart,
+            );
+            tl.to(
+              groupEl,
+              {
+                scaleX: 0.75,
+                opacity: 0.8,
+                duration: EXIT_DURATION,
+                ease: "power2.in",
+                force3D: true,
+              },
+              exitStart,
+            );
+            tl.set(groupEl, { opacity: 0 }, visibleEnd);
           });
+
+          return tl;
         }
-        if (window.__HF_CAPTION__) {
-          start(window.__HF_CAPTION__);
-          return;
+
+        var hfCurrentTimeline = null;
+
+        function hfAttach(data) {
+          var v = hfValidate(data);
+          if (!v.ok) {
+            hfRunGate([], 0, v.reason);
+            return;
+          }
+          if (hfCurrentTimeline) {
+            hfCurrentTimeline.kill();
+            hfCurrentTimeline = null;
+          }
+          hfTeardown();
+          var layout = hfApplyStageConfig(data, v.durationS);
+          var tl = hfBuild(v.words, layout, v.durationS);
+          tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
+          // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
+          // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
+          // at t=0 — the first frame would show pre-timeline CSS defaults (usually
+          // hidden). render(time, suppressEvents, force) with force=true bypasses that.
+          tl.render(0, true, true);
+          hfCurrentTimeline = tl;
+          window.__timelines = window.__timelines || {};
+          window.__timelines[HF_COMPOSITION_ID] = tl;
+          hfRunGate(v.words, v.durationS, null);
         }
-        fetch("./caption-data.json")
-          .then(function (r) {
-            return r.ok ? r.json() : null;
-          })
-          .catch(function () {
-            return null;
-          })
-          .then(function (json) {
-            start(json || HF_DEMO_DATA);
-          });
+        window.__HF_CAPTION_ATTACH__ = hfAttach;
+
+        (function hfBoot() {
+          function start(data) {
+            var ready =
+              document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
+            ready.then(function () {
+              hfAttach(data);
+            });
+          }
+          if (window.__HF_CAPTION__) {
+            start(window.__HF_CAPTION__);
+            return;
+          }
+          fetch("./caption-data.json")
+            .then(function (r) {
+              return r.ok ? r.json() : null;
+            })
+            .catch(function () {
+              return null;
+            })
+            .then(function (json) {
+              start(json || HF_DEMO_DATA);
+            });
+        })();
       })();
     </script>
   </body>
diff --git a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
index f57bbd1635..341400fb80 100644
--- a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
+++ b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
@@ -131,478 +131,492 @@
     </div>
 
     <script>
-      var HF_COMPOSITION_ID = "caption-pill-karaoke";
-      var HF_ROOT_ID = "pill-karaoke";
-      var HF_GROUP_SELECTOR = ".caption-group";
-
-      var HF_DEMO_DATA = {
-        version: 1,
-        segments: [
-          {
-            start: 0,
-            text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
-            words: [
-              { text: "Every", start: 0.0, end: 0.3 },
-              { text: "great", start: 0.3, end: 0.55 },
-              { text: "video", start: 0.55, end: 0.85 },
-              { text: "starts", start: 0.85, end: 1.1 },
-              { text: "with", start: 1.1, end: 1.25 },
-              { text: "a", start: 1.25, end: 1.35 },
-              { text: "single", start: 1.35, end: 1.65 },
-              { text: "frame.", start: 1.65, end: 2.0 },
-              { text: "HyperFrames", start: 2.1, end: 2.65 },
-              { text: "lets", start: 2.65, end: 2.85 },
-              { text: "you", start: 2.85, end: 2.95 },
-              { text: "write", start: 2.95, end: 3.15 },
-              { text: "HTML", start: 3.15, end: 3.55 },
-              { text: "and", start: 3.55, end: 3.65 },
-              { text: "render", start: 3.65, end: 3.95 },
-              { text: "professional", start: 3.95, end: 4.45 },
-              { text: "video.", start: 4.45, end: 4.8 },
-              { text: "No", start: 4.9, end: 5.05 },
-              { text: "timeline.", start: 5.05, end: 5.45 },
-              { text: "No", start: 5.5, end: 5.65 },
-              { text: "drag", start: 5.65, end: 5.85 },
-              { text: "and", start: 5.85, end: 5.95 },
-              { text: "drop.", start: 5.95, end: 6.25 },
-              { text: "Just", start: 6.35, end: 6.55 },
-              { text: "code", start: 6.55, end: 6.8 },
-              { text: "that", start: 6.8, end: 6.95 },
-              { text: "becomes", start: 6.95, end: 7.3 },
-              { text: "cinema.", start: 7.3, end: 7.7 },
-            ],
-          },
-        ],
-      };
-
-      /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
-      var HF_CONTRACT_VERSION = 1;
-      var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
-
-      function hfFlattenSegments(segments) {
-        var out = [];
-        (segments || []).forEach(function (seg) {
-          ((seg && seg.words) || []).forEach(function (w) {
-            var start = Math.max(0, Number(w.start) || 0);
-            out.push({
-              text: String(w.word || w.text || "").trim(),
-              start: start,
-              end: Math.max(start, Number(w.end) || 0),
+      // IIFE: keep every template's runtime private to itself so two caption
+      // components pasted into one composition document can't clobber each
+      // other's hfAttach/hfBuild via shared script-scope names (boot is async,
+      // so collisions surface AFTER all scripts have executed).
+      (function () {
+        var HF_COMPOSITION_ID = "caption-pill-karaoke";
+        var HF_ROOT_ID = "pill-karaoke";
+        var HF_GROUP_SELECTOR = ".caption-group";
+
+        var HF_DEMO_DATA = {
+          version: 1,
+          segments: [
+            {
+              start: 0,
+              text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
+              words: [
+                { text: "Every", start: 0.0, end: 0.3 },
+                { text: "great", start: 0.3, end: 0.55 },
+                { text: "video", start: 0.55, end: 0.85 },
+                { text: "starts", start: 0.85, end: 1.1 },
+                { text: "with", start: 1.1, end: 1.25 },
+                { text: "a", start: 1.25, end: 1.35 },
+                { text: "single", start: 1.35, end: 1.65 },
+                { text: "frame.", start: 1.65, end: 2.0 },
+                { text: "HyperFrames", start: 2.1, end: 2.65 },
+                { text: "lets", start: 2.65, end: 2.85 },
+                { text: "you", start: 2.85, end: 2.95 },
+                { text: "write", start: 2.95, end: 3.15 },
+                { text: "HTML", start: 3.15, end: 3.55 },
+                { text: "and", start: 3.55, end: 3.65 },
+                { text: "render", start: 3.65, end: 3.95 },
+                { text: "professional", start: 3.95, end: 4.45 },
+                { text: "video.", start: 4.45, end: 4.8 },
+                { text: "No", start: 4.9, end: 5.05 },
+                { text: "timeline.", start: 5.05, end: 5.45 },
+                { text: "No", start: 5.5, end: 5.65 },
+                { text: "drag", start: 5.65, end: 5.85 },
+                { text: "and", start: 5.85, end: 5.95 },
+                { text: "drop.", start: 5.95, end: 6.25 },
+                { text: "Just", start: 6.35, end: 6.55 },
+                { text: "code", start: 6.55, end: 6.8 },
+                { text: "that", start: 6.8, end: 6.95 },
+                { text: "becomes", start: 6.95, end: 7.3 },
+                { text: "cinema.", start: 7.3, end: 7.7 },
+              ],
+            },
+          ],
+        };
+
+        /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
+        var HF_CONTRACT_VERSION = 1;
+        var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
+
+        function hfFlattenSegments(segments) {
+          var out = [];
+          (segments || []).forEach(function (seg) {
+            ((seg && seg.words) || []).forEach(function (w) {
+              var start = Math.max(0, Number(w.start) || 0);
+              out.push({
+                text: String(w.word || w.text || "").trim(),
+                start: start,
+                end: Math.max(start, Number(w.end) || 0),
+              });
             });
           });
-        });
-        out.sort(function (a, b) {
-          return a.start - b.start;
-        });
-        return out.filter(function (w) {
-          return w.text.length > 0;
-        });
-      }
-
-      function hfDeriveDuration(words) {
-        var end = 0;
-        words.forEach(function (w) {
-          if (w.end > end) end = w.end;
-        });
-        return end;
-      }
-
-      function hfValidate(data) {
-        if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
-        if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
-          return { ok: false, reason: "unsupported-version" };
-        }
-        if (!Array.isArray(data.segments) || data.segments.length === 0) {
-          return { ok: false, reason: "no-segments" };
+          out.sort(function (a, b) {
+            return a.start - b.start;
+          });
+          return out.filter(function (w) {
+            return w.text.length > 0;
+          });
         }
-        if (data.displayMode != null && data.displayMode !== "full") {
-          return { ok: false, reason: "unsupported-displayMode" };
+
+        function hfDeriveDuration(words) {
+          var end = 0;
+          words.forEach(function (w) {
+            if (w.end > end) end = w.end;
+          });
+          return end;
         }
-        var words = hfFlattenSegments(data.segments);
-        if (words.length === 0) return { ok: false, reason: "no-words" };
-        return { ok: true, words: words, durationS: hfDeriveDuration(words) };
-      }
 
-      function hfApplyStageConfig(data, durationS) {
-        var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
-        var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
-        var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
-        var root = document.getElementById(HF_ROOT_ID);
-        [document.documentElement, document.body, root].forEach(function (el) {
-          el.style.width = W + "px";
-          el.style.height = H + "px";
-        });
-        root.setAttribute("data-width", String(W));
-        root.setAttribute("data-height", String(H));
-        root.setAttribute("data-duration", String(durationS));
-        var brand = (data && data.brand) || {};
-        if (typeof brand.primaryColor === "string" && brand.primaryColor) {
-          root.style.setProperty("--hf-caption-primary", brand.primaryColor);
-        } else {
-          root.style.removeProperty("--hf-caption-primary");
+        function hfValidate(data) {
+          if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
+          if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
+            return { ok: false, reason: "unsupported-version" };
+          }
+          if (!Array.isArray(data.segments) || data.segments.length === 0) {
+            return { ok: false, reason: "no-segments" };
+          }
+          if (data.displayMode != null && data.displayMode !== "full") {
+            return { ok: false, reason: "unsupported-displayMode" };
+          }
+          var words = hfFlattenSegments(data.segments);
+          if (words.length === 0) return { ok: false, reason: "no-words" };
+          return { ok: true, words: words, durationS: hfDeriveDuration(words) };
         }
-        if (typeof brand.accentColor === "string" && brand.accentColor) {
-          root.style.setProperty("--hf-caption-accent", brand.accentColor);
-        } else {
-          root.style.removeProperty("--hf-caption-accent");
+
+        function hfApplyStageConfig(data, durationS) {
+          var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
+          var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
+          var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
+          var root = document.getElementById(HF_ROOT_ID);
+          [document.documentElement, document.body, root].forEach(function (el) {
+            el.style.width = W + "px";
+            el.style.height = H + "px";
+          });
+          root.setAttribute("data-width", String(W));
+          root.setAttribute("data-height", String(H));
+          root.setAttribute("data-duration", String(durationS));
+          var brand = (data && data.brand) || {};
+          if (typeof brand.primaryColor === "string" && brand.primaryColor) {
+            root.style.setProperty("--hf-caption-primary", brand.primaryColor);
+          } else {
+            root.style.removeProperty("--hf-caption-primary");
+          }
+          if (typeof brand.accentColor === "string" && brand.accentColor) {
+            root.style.setProperty("--hf-caption-accent", brand.accentColor);
+          } else {
+            root.style.removeProperty("--hf-caption-accent");
+          }
+          return {
+            W: W,
+            H: H,
+            scaleX: W / 1920,
+            scaleY: H / 1080,
+            fontScale: Math.min(W, H) / 1080,
+          };
         }
-        return { W: W, H: H, scaleX: W / 1920, scaleY: H / 1080, fontScale: Math.min(W, H) / 1080 };
-      }
 
-      function hfPublishStatus(status) {
-        window.__HF_CAPTION_STATUS = status;
-        document
-          .getElementById(HF_ROOT_ID)
-          .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
-      }
+        function hfPublishStatus(status) {
+          window.__HF_CAPTION_STATUS = status;
+          document
+            .getElementById(HF_ROOT_ID)
+            .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
+        }
 
-      function hfRunGate(words, durationS, failReason) {
-        if (failReason) {
-          hfPublishStatus({
-            ok: false,
-            present: false,
-            contained: false,
-            reason: failReason,
-            version: HF_CONTRACT_VERSION,
-            durationS: durationS || 0,
+        function hfRunGate(words, durationS, failReason) {
+          if (failReason) {
+            hfPublishStatus({
+              ok: false,
+              present: false,
+              contained: false,
+              reason: failReason,
+              version: HF_CONTRACT_VERSION,
+              durationS: durationS || 0,
+            });
+            return;
+          }
+          var root = document.getElementById(HF_ROOT_ID);
+          var rootRect = root.getBoundingClientRect();
+          var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
+          var present = false;
+          var contained = true;
+          var tokens = [];
+          words.forEach(function (w) {
+            var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
+            if (t) tokens.push(t);
           });
-          return;
-        }
-        var root = document.getElementById(HF_ROOT_ID);
-        var rootRect = root.getBoundingClientRect();
-        var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
-        var present = false;
-        var contained = true;
-        var tokens = [];
-        words.forEach(function (w) {
-          var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
-          if (t) tokens.push(t);
-        });
-        groups.forEach(function (el) {
-          var prevOpacity = el.style.opacity;
-          var prevVisibility = el.style.visibility;
-          el.style.opacity = "1";
-          el.style.visibility = "visible";
-          var r = el.getBoundingClientRect();
-          if (r.width > 0 && r.height > 0) {
-            var text = (el.textContent || "").toLowerCase();
-            for (var i = 0; i < tokens.length; i++) {
-              if (text.indexOf(tokens[i]) !== -1) {
-                present = true;
-                break;
+          groups.forEach(function (el) {
+            var prevOpacity = el.style.opacity;
+            var prevVisibility = el.style.visibility;
+            el.style.opacity = "1";
+            el.style.visibility = "visible";
+            var r = el.getBoundingClientRect();
+            if (r.width > 0 && r.height > 0) {
+              var text = (el.textContent || "").toLowerCase();
+              for (var i = 0; i < tokens.length; i++) {
+                if (text.indexOf(tokens[i]) !== -1) {
+                  present = true;
+                  break;
+                }
+              }
+              if (
+                r.left < rootRect.left - 1 ||
+                r.right > rootRect.right + 1 ||
+                r.top < rootRect.top - 1 ||
+                r.bottom > rootRect.bottom + 1
+              ) {
+                contained = false;
               }
             }
-            if (
-              r.left < rootRect.left - 1 ||
-              r.right > rootRect.right + 1 ||
-              r.top < rootRect.top - 1 ||
-              r.bottom > rootRect.bottom + 1
-            ) {
-              contained = false;
-            }
-          }
-          el.style.opacity = prevOpacity;
-          el.style.visibility = prevVisibility;
-        });
-        hfPublishStatus({
-          ok: present && contained,
-          present: present,
-          contained: contained,
-          version: HF_CONTRACT_VERSION,
-          durationS: durationS,
-        });
-      }
-
-      var DURATION, SAFE_ZONE_WIDTH, PILL_MAX_WIDTH, BASE_FONT_SIZE, MIN_FONT_SIZE, WORD_SPACING;
-      var PILL_MIN_PADDING_X = 30;
-      var PILL_MAX_PADDING_X = 60;
-      var FONT_WIDTH_SAFETY = 1.18;
-      var FONT_FAMILY = "Poppins";
-      var FONT_WEIGHT = "700";
-      var MAX_WORDS_PER_GROUP = 4;
-      var PAUSE_THRESHOLD = 0.1;
-      var GROUP_END_BUFFER = 0.3;
-      var COLOR_INACTIVE = "#A6A6A6";
-      var COLOR_ACTIVE = "#1C1E1D";
-      var hfColorActive = COLOR_ACTIVE;
-      var COLOR_FADE_DURATION = 0.1;
-      var WORD_FADE_LEAD = 0.05;
-
-      function normalizeWords(rawWords) {
-        return rawWords
-          .map(function (item) {
-            var text = String(item.word || item.text || "").trim();
-            return {
-              text: text,
-              start: Math.max(0, Number(item.start) || 0),
-              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
-            };
-          })
-          .filter(function (w) {
-            return w.text.length > 0;
+            el.style.opacity = prevOpacity;
+            el.style.visibility = prevVisibility;
           });
-      }
+          hfPublishStatus({
+            ok: present && contained,
+            present: present,
+            contained: contained,
+            version: HF_CONTRACT_VERSION,
+            durationS: durationS,
+          });
+        }
 
-      var measureCanvas = document.createElement("canvas");
-      var measureContext = measureCanvas.getContext("2d");
+        var DURATION, SAFE_ZONE_WIDTH, PILL_MAX_WIDTH, BASE_FONT_SIZE, MIN_FONT_SIZE, WORD_SPACING;
+        var PILL_MIN_PADDING_X = 30;
+        var PILL_MAX_PADDING_X = 60;
+        var FONT_WIDTH_SAFETY = 1.18;
+        var FONT_FAMILY = "Poppins";
+        var FONT_WEIGHT = "700";
+        var MAX_WORDS_PER_GROUP = 4;
+        var PAUSE_THRESHOLD = 0.1;
+        var GROUP_END_BUFFER = 0.3;
+        var COLOR_INACTIVE = "#A6A6A6";
+        var COLOR_ACTIVE = "#1C1E1D";
+        var hfColorActive = COLOR_ACTIVE;
+        var COLOR_FADE_DURATION = 0.1;
+        var WORD_FADE_LEAD = 0.05;
+
+        function normalizeWords(rawWords) {
+          return rawWords
+            .map(function (item) {
+              var text = String(item.word || item.text || "").trim();
+              return {
+                text: text,
+                start: Math.max(0, Number(item.start) || 0),
+                end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+              };
+            })
+            .filter(function (w) {
+              return w.text.length > 0;
+            });
+        }
 
-      function measureWordWidth(text, fontSize) {
-        measureContext.font = FONT_WEIGHT + " " + fontSize + "px " + FONT_FAMILY;
-        return measureContext.measureText(text).width * FONT_WIDTH_SAFETY;
-      }
+        var measureCanvas = document.createElement("canvas");
+        var measureContext = measureCanvas.getContext("2d");
 
-      function measureLineWidth(words, fontSize) {
-        return words.reduce(function (total, word, index) {
-          return (
-            total + measureWordWidth(word.text.toLowerCase(), fontSize) + (index ? WORD_SPACING : 0)
-          );
-        }, 0);
-      }
+        function measureWordWidth(text, fontSize) {
+          measureContext.font = FONT_WEIGHT + " " + fontSize + "px " + FONT_FAMILY;
+          return measureContext.measureText(text).width * FONT_WIDTH_SAFETY;
+        }
 
-      function splitLinesForGroup(words, fontSize) {
-        var maxLineWidth = PILL_MAX_WIDTH - PILL_MIN_PADDING_X * 2;
-        if (
-          words.some(function (w) {
-            return measureWordWidth(w.text.toLowerCase(), fontSize) > maxLineWidth;
-          })
-        ) {
-          return null;
+        function measureLineWidth(words, fontSize) {
+          return words.reduce(function (total, word, index) {
+            return (
+              total +
+              measureWordWidth(word.text.toLowerCase(), fontSize) +
+              (index ? WORD_SPACING : 0)
+            );
+          }, 0);
         }
-        if (measureLineWidth(words, fontSize) <= maxLineWidth) return [words];
-        var bestSplit = null;
-        var bestImbalance = Infinity;
-        for (var split = 1; split < words.length; split++) {
-          var firstLine = words.slice(0, split);
-          var secondLine = words.slice(split);
-          var firstWidth = measureLineWidth(firstLine, fontSize);
-          var secondWidth = measureLineWidth(secondLine, fontSize);
-          if (firstWidth <= maxLineWidth && secondWidth <= maxLineWidth) {
-            var imbalance = Math.abs(firstWidth - secondWidth);
-            if (imbalance < bestImbalance) {
-              bestSplit = [firstLine, secondLine];
-              bestImbalance = imbalance;
+
+        function splitLinesForGroup(words, fontSize) {
+          var maxLineWidth = PILL_MAX_WIDTH - PILL_MIN_PADDING_X * 2;
+          if (
+            words.some(function (w) {
+              return measureWordWidth(w.text.toLowerCase(), fontSize) > maxLineWidth;
+            })
+          ) {
+            return null;
+          }
+          if (measureLineWidth(words, fontSize) <= maxLineWidth) return [words];
+          var bestSplit = null;
+          var bestImbalance = Infinity;
+          for (var split = 1; split < words.length; split++) {
+            var firstLine = words.slice(0, split);
+            var secondLine = words.slice(split);
+            var firstWidth = measureLineWidth(firstLine, fontSize);
+            var secondWidth = measureLineWidth(secondLine, fontSize);
+            if (firstWidth <= maxLineWidth && secondWidth <= maxLineWidth) {
+              var imbalance = Math.abs(firstWidth - secondWidth);
+              if (imbalance < bestImbalance) {
+                bestSplit = [firstLine, secondLine];
+                bestImbalance = imbalance;
+              }
             }
           }
+          return bestSplit;
         }
-        return bestSplit;
-      }
 
-      function fitsInTwoLinesAtSize(words, fontSize) {
-        return splitLinesForGroup(words, fontSize) !== null;
-      }
+        function fitsInTwoLinesAtSize(words, fontSize) {
+          return splitLinesForGroup(words, fontSize) !== null;
+        }
 
-      function planPillLayout(words, fontSize) {
-        var lines = splitLinesForGroup(words, fontSize) || [words];
-        var widestLine = lines.reduce(function (max, lineWords) {
-          return Math.max(max, measureLineWidth(lineWords, fontSize));
-        }, 0);
-        var availablePadding = Math.floor((PILL_MAX_WIDTH - widestLine) / 2);
-        var padX = Math.max(PILL_MIN_PADDING_X, Math.min(PILL_MAX_PADDING_X, availablePadding));
-        var pillWidth = Math.min(PILL_MAX_WIDTH, Math.ceil(widestLine + padX * 2));
-        return { lines: lines, padX: padX, pillWidth: pillWidth };
-      }
+        function planPillLayout(words, fontSize) {
+          var lines = splitLinesForGroup(words, fontSize) || [words];
+          var widestLine = lines.reduce(function (max, lineWords) {
+            return Math.max(max, measureLineWidth(lineWords, fontSize));
+          }, 0);
+          var availablePadding = Math.floor((PILL_MAX_WIDTH - widestLine) / 2);
+          var padX = Math.max(PILL_MIN_PADDING_X, Math.min(PILL_MAX_PADDING_X, availablePadding));
+          var pillWidth = Math.min(PILL_MAX_WIDTH, Math.ceil(widestLine + padX * 2));
+          return { lines: lines, padX: padX, pillWidth: pillWidth };
+        }
 
-      function makeGroups(words) {
-        var groups = [];
-        var current = [];
-        words.forEach(function (word, index) {
-          var testGroup = current.concat([word]);
-          var nextWord = words[index + 1];
-          var wouldExceedMaxWords = testGroup.length > MAX_WORDS_PER_GROUP;
-          var wouldExceedTwoLines = !fitsInTwoLinesAtSize(testGroup, BASE_FONT_SIZE);
-          if (wouldExceedMaxWords || wouldExceedTwoLines) {
-            if (current.length) {
+        function makeGroups(words) {
+          var groups = [];
+          var current = [];
+          words.forEach(function (word, index) {
+            var testGroup = current.concat([word]);
+            var nextWord = words[index + 1];
+            var wouldExceedMaxWords = testGroup.length > MAX_WORDS_PER_GROUP;
+            var wouldExceedTwoLines = !fitsInTwoLinesAtSize(testGroup, BASE_FONT_SIZE);
+            if (wouldExceedMaxWords || wouldExceedTwoLines) {
+              if (current.length) {
+                groups.push({
+                  words: current.slice(),
+                  start: current[0].start,
+                  end: current[current.length - 1].end,
+                });
+              }
+              current = [word];
+              return;
+            }
+            current.push(word);
+            var hasPunctuation = /[,.:!?]$/.test(word.text);
+            var pauseDuration = nextWord ? nextWord.start - word.end : 0;
+            var hasNaturalPause = pauseDuration >= PAUSE_THRESHOLD;
+            var maxWordsReached = current.length >= MAX_WORDS_PER_GROUP;
+            if (maxWordsReached || !nextWord || hasPunctuation || hasNaturalPause) {
               groups.push({
                 words: current.slice(),
                 start: current[0].start,
                 end: current[current.length - 1].end,
               });
+              current = [];
             }
-            current = [word];
-            return;
-          }
-          current.push(word);
-          var hasPunctuation = /[,.:!?]$/.test(word.text);
-          var pauseDuration = nextWord ? nextWord.start - word.end : 0;
-          var hasNaturalPause = pauseDuration >= PAUSE_THRESHOLD;
-          var maxWordsReached = current.length >= MAX_WORDS_PER_GROUP;
-          if (maxWordsReached || !nextWord || hasPunctuation || hasNaturalPause) {
+          });
+          if (current.length)
             groups.push({
               words: current.slice(),
               start: current[0].start,
               end: current[current.length - 1].end,
             });
-            current = [];
-          }
-        });
-        if (current.length)
-          groups.push({
-            words: current.slice(),
-            start: current[0].start,
-            end: current[current.length - 1].end,
-          });
-        return groups;
-      }
+          return groups;
+        }
 
-      function fontSizeForGroup(words) {
-        var size = BASE_FONT_SIZE;
-        while (size > MIN_FONT_SIZE && !fitsInTwoLinesAtSize(words, size)) {
-          size -= 2;
+        function fontSizeForGroup(words) {
+          var size = BASE_FONT_SIZE;
+          while (size > MIN_FONT_SIZE && !fitsInTwoLinesAtSize(words, size)) {
+            size -= 2;
+          }
+          return size;
         }
-        return size;
-      }
 
-      function buildCaptions(groups) {
-        var stage = document.getElementById("caption-stage");
-        groups.forEach(function (group, groupIndex) {
-          var groupEl = document.createElement("div");
-          var pillEl = document.createElement("div");
-          var copyEl = document.createElement("div");
-          var fontSize = fontSizeForGroup(group.words);
-          groupEl.id = "caption-group-" + groupIndex;
-          groupEl.className = "caption-group";
-          pillEl.className = "caption-pill";
-          copyEl.className = "caption-copy";
-          copyEl.style.fontSize = fontSize + "px";
-          var indexedWords = group.words.map(function (word, wordIndex) {
-            return { text: word.text, start: word.start, end: word.end, wordIndex: wordIndex };
-          });
-          var layout = planPillLayout(indexedWords, fontSize);
-          pillEl.style.width = layout.pillWidth + "px";
-          pillEl.style.maxWidth = PILL_MAX_WIDTH + "px";
-          pillEl.style.paddingLeft = layout.padX + "px";
-          pillEl.style.paddingRight = layout.padX + "px";
-          layout.lines.slice(0, 2).forEach(function (lineWords) {
-            var lineEl = document.createElement("div");
-            lineEl.className = "caption-line";
-            lineWords.forEach(function (word) {
-              var wordEl = document.createElement("span");
-              wordEl.id = "caption-word-" + groupIndex + "-" + word.wordIndex;
-              wordEl.className = "caption-word";
-              wordEl.textContent = word.text.toLowerCase();
-              lineEl.appendChild(wordEl);
+        function buildCaptions(groups) {
+          var stage = document.getElementById("caption-stage");
+          groups.forEach(function (group, groupIndex) {
+            var groupEl = document.createElement("div");
+            var pillEl = document.createElement("div");
+            var copyEl = document.createElement("div");
+            var fontSize = fontSizeForGroup(group.words);
+            groupEl.id = "caption-group-" + groupIndex;
+            groupEl.className = "caption-group";
+            pillEl.className = "caption-pill";
+            copyEl.className = "caption-copy";
+            copyEl.style.fontSize = fontSize + "px";
+            var indexedWords = group.words.map(function (word, wordIndex) {
+              return { text: word.text, start: word.start, end: word.end, wordIndex: wordIndex };
+            });
+            var layout = planPillLayout(indexedWords, fontSize);
+            pillEl.style.width = layout.pillWidth + "px";
+            pillEl.style.maxWidth = PILL_MAX_WIDTH + "px";
+            pillEl.style.paddingLeft = layout.padX + "px";
+            pillEl.style.paddingRight = layout.padX + "px";
+            layout.lines.slice(0, 2).forEach(function (lineWords) {
+              var lineEl = document.createElement("div");
+              lineEl.className = "caption-line";
+              lineWords.forEach(function (word) {
+                var wordEl = document.createElement("span");
+                wordEl.id = "caption-word-" + groupIndex + "-" + word.wordIndex;
+                wordEl.className = "caption-word";
+                wordEl.textContent = word.text.toLowerCase();
+                lineEl.appendChild(wordEl);
+              });
+              copyEl.appendChild(lineEl);
             });
-            copyEl.appendChild(lineEl);
+            pillEl.appendChild(copyEl);
+            groupEl.appendChild(pillEl);
+            stage.appendChild(groupEl);
           });
-          pillEl.appendChild(copyEl);
-          groupEl.appendChild(pillEl);
-          stage.appendChild(groupEl);
-        });
-      }
+        }
 
-      function hfTeardown() {
-        document.getElementById("caption-stage").innerHTML = "";
-      }
+        function hfTeardown() {
+          document.getElementById("caption-stage").innerHTML = "";
+        }
 
-      function hfBuild(words, layout, durationS) {
-        DURATION = durationS;
-        BASE_FONT_SIZE = Math.round(72 * layout.fontScale);
-        MIN_FONT_SIZE = Math.round(52 * layout.fontScale);
-        SAFE_ZONE_WIDTH = Math.round(1600 * layout.scaleX);
-        PILL_MAX_WIDTH = SAFE_ZONE_WIDTH;
-        WORD_SPACING = Math.round(16 * layout.fontScale);
-
-        var stage = document.getElementById("caption-stage");
-        var stageHeight = Math.round(220 * layout.fontScale);
-        stage.style.width = SAFE_ZONE_WIDTH + "px";
-        stage.style.height = stageHeight + "px";
-        stage.style.bottom = Math.round(90 * layout.scaleY) + "px";
-
-        var rootEl = document.getElementById(HF_ROOT_ID);
-        var accent = getComputedStyle(rootEl).getPropertyValue("--hf-caption-accent").trim();
-        hfColorActive = accent || COLOR_ACTIVE;
-
-        var WORDS = normalizeWords(words);
-        var GROUPS = makeGroups(WORDS);
-        buildCaptions(GROUPS);
-        GROUPS.forEach(function (_, i) {
-          var el = document.getElementById("caption-group-" + i);
-          el.style.width = SAFE_ZONE_WIDTH + "px";
-          el.style.height = stageHeight + "px";
-        });
-
-        var tl = gsap.timeline({ paused: true });
-
-        GROUPS.forEach(function (group, groupIndex) {
-          var groupEl = document.getElementById("caption-group-" + groupIndex);
-          var nextGroup = GROUPS[groupIndex + 1];
-          var isLastGroup = groupIndex === GROUPS.length - 1;
-          var effectiveEnd = isLastGroup
-            ? DURATION
-            : Math.min(nextGroup.start, group.end + GROUP_END_BUFFER);
-          var visibleStart = Math.max(0, group.start);
-          var visibleEnd = Math.max(visibleStart + 0.01, effectiveEnd);
-
-          tl.set(groupEl, { opacity: 1 }, visibleStart);
-          tl.set(groupEl, { opacity: 0 }, visibleEnd);
-
-          group.words.forEach(function (word, wordIndex) {
-            var wordEl = document.getElementById("caption-word-" + groupIndex + "-" + wordIndex);
-            var isFirstWord = wordIndex === 0;
-            var wordStart = Math.max(visibleStart, word.start - WORD_FADE_LEAD);
-            tl.set(wordEl, { color: isFirstWord ? hfColorActive : COLOR_INACTIVE }, visibleStart);
-            if (isFirstWord) return;
-            tl.to(
-              wordEl,
-              { color: hfColorActive, duration: COLOR_FADE_DURATION, ease: "none" },
-              wordStart,
-            );
+        function hfBuild(words, layout, durationS) {
+          DURATION = durationS;
+          BASE_FONT_SIZE = Math.round(72 * layout.fontScale);
+          MIN_FONT_SIZE = Math.round(52 * layout.fontScale);
+          SAFE_ZONE_WIDTH = Math.round(1600 * layout.scaleX);
+          PILL_MAX_WIDTH = SAFE_ZONE_WIDTH;
+          WORD_SPACING = Math.round(16 * layout.fontScale);
+
+          var stage = document.getElementById("caption-stage");
+          var stageHeight = Math.round(220 * layout.fontScale);
+          stage.style.width = SAFE_ZONE_WIDTH + "px";
+          stage.style.height = stageHeight + "px";
+          stage.style.bottom = Math.round(90 * layout.scaleY) + "px";
+
+          var rootEl = document.getElementById(HF_ROOT_ID);
+          var accent = getComputedStyle(rootEl).getPropertyValue("--hf-caption-accent").trim();
+          hfColorActive = accent || COLOR_ACTIVE;
+
+          var WORDS = normalizeWords(words);
+          var GROUPS = makeGroups(WORDS);
+          buildCaptions(GROUPS);
+          GROUPS.forEach(function (_, i) {
+            var el = document.getElementById("caption-group-" + i);
+            el.style.width = SAFE_ZONE_WIDTH + "px";
+            el.style.height = stageHeight + "px";
           });
-        });
-
-        return tl;
-      }
-
-      var hfCurrentTimeline = null;
 
-      function hfAttach(data) {
-        var v = hfValidate(data);
-        if (!v.ok) {
-          hfRunGate([], 0, v.reason);
-          return;
-        }
-        if (hfCurrentTimeline) {
-          hfCurrentTimeline.kill();
-          hfCurrentTimeline = null;
-        }
-        hfTeardown();
-        var layout = hfApplyStageConfig(data, v.durationS);
-        var tl = hfBuild(v.words, layout, v.durationS);
-        tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
-        // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
-        // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
-        // at t=0 — the first frame would show pre-timeline CSS defaults (usually
-        // hidden). render(time, suppressEvents, force) with force=true bypasses that.
-        tl.render(0, true, true);
-        hfCurrentTimeline = tl;
-        window.__timelines = window.__timelines || {};
-        window.__timelines[HF_COMPOSITION_ID] = tl;
-        hfRunGate(v.words, v.durationS, null);
-      }
-      window.__HF_CAPTION_ATTACH__ = hfAttach;
-
-      (function hfBoot() {
-        function start(data) {
-          var ready =
-            document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
-          ready.then(function () {
-            hfAttach(data);
+          var tl = gsap.timeline({ paused: true });
+
+          GROUPS.forEach(function (group, groupIndex) {
+            var groupEl = document.getElementById("caption-group-" + groupIndex);
+            var nextGroup = GROUPS[groupIndex + 1];
+            var isLastGroup = groupIndex === GROUPS.length - 1;
+            var effectiveEnd = isLastGroup
+              ? DURATION
+              : Math.min(nextGroup.start, group.end + GROUP_END_BUFFER);
+            var visibleStart = Math.max(0, group.start);
+            var visibleEnd = Math.max(visibleStart + 0.01, effectiveEnd);
+
+            tl.set(groupEl, { opacity: 1 }, visibleStart);
+            tl.set(groupEl, { opacity: 0 }, visibleEnd);
+
+            group.words.forEach(function (word, wordIndex) {
+              var wordEl = document.getElementById("caption-word-" + groupIndex + "-" + wordIndex);
+              var isFirstWord = wordIndex === 0;
+              var wordStart = Math.max(visibleStart, word.start - WORD_FADE_LEAD);
+              tl.set(wordEl, { color: isFirstWord ? hfColorActive : COLOR_INACTIVE }, visibleStart);
+              if (isFirstWord) return;
+              tl.to(
+                wordEl,
+                { color: hfColorActive, duration: COLOR_FADE_DURATION, ease: "none" },
+                wordStart,
+              );
+            });
           });
+
+          return tl;
         }
-        if (window.__HF_CAPTION__) {
-          start(window.__HF_CAPTION__);
-          return;
+
+        var hfCurrentTimeline = null;
+
+        function hfAttach(data) {
+          var v = hfValidate(data);
+          if (!v.ok) {
+            hfRunGate([], 0, v.reason);
+            return;
+          }
+          if (hfCurrentTimeline) {
+            hfCurrentTimeline.kill();
+            hfCurrentTimeline = null;
+          }
+          hfTeardown();
+          var layout = hfApplyStageConfig(data, v.durationS);
+          var tl = hfBuild(v.words, layout, v.durationS);
+          tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
+          // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
+          // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
+          // at t=0 — the first frame would show pre-timeline CSS defaults (usually
+          // hidden). render(time, suppressEvents, force) with force=true bypasses that.
+          tl.render(0, true, true);
+          hfCurrentTimeline = tl;
+          window.__timelines = window.__timelines || {};
+          window.__timelines[HF_COMPOSITION_ID] = tl;
+          hfRunGate(v.words, v.durationS, null);
         }
-        fetch("./caption-data.json")
-          .then(function (r) {
-            return r.ok ? r.json() : null;
-          })
-          .catch(function () {
-            return null;
-          })
-          .then(function (json) {
-            start(json || HF_DEMO_DATA);
-          });
+        window.__HF_CAPTION_ATTACH__ = hfAttach;
+
+        (function hfBoot() {
+          function start(data) {
+            var ready =
+              document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
+            ready.then(function () {
+              hfAttach(data);
+            });
+          }
+          if (window.__HF_CAPTION__) {
+            start(window.__HF_CAPTION__);
+            return;
+          }
+          fetch("./caption-data.json")
+            .then(function (r) {
+              return r.ok ? r.json() : null;
+            })
+            .catch(function () {
+              return null;
+            })
+            .then(function (json) {
+              start(json || HF_DEMO_DATA);
+            });
+        })();
       })();
     </script>
   </body>
diff --git a/registry/components/caption-weight-shift/caption-weight-shift.html b/registry/components/caption-weight-shift/caption-weight-shift.html
index 3689dfa40d..f2c42f10ff 100644
--- a/registry/components/caption-weight-shift/caption-weight-shift.html
+++ b/registry/components/caption-weight-shift/caption-weight-shift.html
@@ -117,511 +117,523 @@
     </div>
 
     <script>
-      var HF_COMPOSITION_ID = "caption-weight-shift";
-      var HF_ROOT_ID = "weight-shift";
-      var HF_GROUP_SELECTOR = ".caption-group";
-
-      var HF_DEMO_DATA = {
-        version: 1,
-        segments: [
-          {
-            start: 0,
-            text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
-            words: [
-              { text: "Every", start: 0.0, end: 0.3 },
-              { text: "great", start: 0.3, end: 0.55 },
-              { text: "video", start: 0.55, end: 0.85 },
-              { text: "starts", start: 0.85, end: 1.1 },
-              { text: "with", start: 1.1, end: 1.25 },
-              { text: "a", start: 1.25, end: 1.35 },
-              { text: "single", start: 1.35, end: 1.65 },
-              { text: "frame.", start: 1.65, end: 2.0 },
-              { text: "HyperFrames", start: 2.1, end: 2.65 },
-              { text: "lets", start: 2.65, end: 2.85 },
-              { text: "you", start: 2.85, end: 2.95 },
-              { text: "write", start: 2.95, end: 3.15 },
-              { text: "HTML", start: 3.15, end: 3.55 },
-              { text: "and", start: 3.55, end: 3.65 },
-              { text: "render", start: 3.65, end: 3.95 },
-              { text: "professional", start: 3.95, end: 4.45 },
-              { text: "video.", start: 4.45, end: 4.8 },
-              { text: "No", start: 4.9, end: 5.05 },
-              { text: "timeline.", start: 5.05, end: 5.45 },
-              { text: "No", start: 5.5, end: 5.65 },
-              { text: "drag", start: 5.65, end: 5.85 },
-              { text: "and", start: 5.85, end: 5.95 },
-              { text: "drop.", start: 5.95, end: 6.25 },
-              { text: "Just", start: 6.35, end: 6.55 },
-              { text: "code", start: 6.55, end: 6.8 },
-              { text: "that", start: 6.8, end: 6.95 },
-              { text: "becomes", start: 6.95, end: 7.3 },
-              { text: "cinema.", start: 7.3, end: 7.7 },
-            ],
-          },
-        ],
-      };
-
-      /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
-      var HF_CONTRACT_VERSION = 1;
-      var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
-
-      function hfFlattenSegments(segments) {
-        var out = [];
-        (segments || []).forEach(function (seg) {
-          ((seg && seg.words) || []).forEach(function (w) {
-            var start = Math.max(0, Number(w.start) || 0);
-            out.push({
-              text: String(w.word || w.text || "").trim(),
-              start: start,
-              end: Math.max(start, Number(w.end) || 0),
+      // IIFE: keep every template's runtime private to itself so two caption
+      // components pasted into one composition document can't clobber each
+      // other's hfAttach/hfBuild via shared script-scope names (boot is async,
+      // so collisions surface AFTER all scripts have executed).
+      (function () {
+        var HF_COMPOSITION_ID = "caption-weight-shift";
+        var HF_ROOT_ID = "weight-shift";
+        var HF_GROUP_SELECTOR = ".caption-group";
+
+        var HF_DEMO_DATA = {
+          version: 1,
+          segments: [
+            {
+              start: 0,
+              text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
+              words: [
+                { text: "Every", start: 0.0, end: 0.3 },
+                { text: "great", start: 0.3, end: 0.55 },
+                { text: "video", start: 0.55, end: 0.85 },
+                { text: "starts", start: 0.85, end: 1.1 },
+                { text: "with", start: 1.1, end: 1.25 },
+                { text: "a", start: 1.25, end: 1.35 },
+                { text: "single", start: 1.35, end: 1.65 },
+                { text: "frame.", start: 1.65, end: 2.0 },
+                { text: "HyperFrames", start: 2.1, end: 2.65 },
+                { text: "lets", start: 2.65, end: 2.85 },
+                { text: "you", start: 2.85, end: 2.95 },
+                { text: "write", start: 2.95, end: 3.15 },
+                { text: "HTML", start: 3.15, end: 3.55 },
+                { text: "and", start: 3.55, end: 3.65 },
+                { text: "render", start: 3.65, end: 3.95 },
+                { text: "professional", start: 3.95, end: 4.45 },
+                { text: "video.", start: 4.45, end: 4.8 },
+                { text: "No", start: 4.9, end: 5.05 },
+                { text: "timeline.", start: 5.05, end: 5.45 },
+                { text: "No", start: 5.5, end: 5.65 },
+                { text: "drag", start: 5.65, end: 5.85 },
+                { text: "and", start: 5.85, end: 5.95 },
+                { text: "drop.", start: 5.95, end: 6.25 },
+                { text: "Just", start: 6.35, end: 6.55 },
+                { text: "code", start: 6.55, end: 6.8 },
+                { text: "that", start: 6.8, end: 6.95 },
+                { text: "becomes", start: 6.95, end: 7.3 },
+                { text: "cinema.", start: 7.3, end: 7.7 },
+              ],
+            },
+          ],
+        };
+
+        /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
+        var HF_CONTRACT_VERSION = 1;
+        var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
+
+        function hfFlattenSegments(segments) {
+          var out = [];
+          (segments || []).forEach(function (seg) {
+            ((seg && seg.words) || []).forEach(function (w) {
+              var start = Math.max(0, Number(w.start) || 0);
+              out.push({
+                text: String(w.word || w.text || "").trim(),
+                start: start,
+                end: Math.max(start, Number(w.end) || 0),
+              });
             });
           });
-        });
-        out.sort(function (a, b) {
-          return a.start - b.start;
-        });
-        return out.filter(function (w) {
-          return w.text.length > 0;
-        });
-      }
-
-      function hfDeriveDuration(words) {
-        var end = 0;
-        words.forEach(function (w) {
-          if (w.end > end) end = w.end;
-        });
-        return end;
-      }
-
-      function hfValidate(data) {
-        if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
-        if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
-          return { ok: false, reason: "unsupported-version" };
-        }
-        if (!Array.isArray(data.segments) || data.segments.length === 0) {
-          return { ok: false, reason: "no-segments" };
+          out.sort(function (a, b) {
+            return a.start - b.start;
+          });
+          return out.filter(function (w) {
+            return w.text.length > 0;
+          });
         }
-        if (data.displayMode != null && data.displayMode !== "full") {
-          return { ok: false, reason: "unsupported-displayMode" };
+
+        function hfDeriveDuration(words) {
+          var end = 0;
+          words.forEach(function (w) {
+            if (w.end > end) end = w.end;
+          });
+          return end;
         }
-        var words = hfFlattenSegments(data.segments);
-        if (words.length === 0) return { ok: false, reason: "no-words" };
-        return { ok: true, words: words, durationS: hfDeriveDuration(words) };
-      }
 
-      function hfApplyStageConfig(data, durationS) {
-        var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
-        var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
-        var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
-        var root = document.getElementById(HF_ROOT_ID);
-        [document.documentElement, document.body, root].forEach(function (el) {
-          el.style.width = W + "px";
-          el.style.height = H + "px";
-        });
-        root.setAttribute("data-width", String(W));
-        root.setAttribute("data-height", String(H));
-        root.setAttribute("data-duration", String(durationS));
-        var brand = (data && data.brand) || {};
-        if (typeof brand.primaryColor === "string" && brand.primaryColor) {
-          root.style.setProperty("--hf-caption-primary", brand.primaryColor);
-        } else {
-          root.style.removeProperty("--hf-caption-primary");
+        function hfValidate(data) {
+          if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
+          if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
+            return { ok: false, reason: "unsupported-version" };
+          }
+          if (!Array.isArray(data.segments) || data.segments.length === 0) {
+            return { ok: false, reason: "no-segments" };
+          }
+          if (data.displayMode != null && data.displayMode !== "full") {
+            return { ok: false, reason: "unsupported-displayMode" };
+          }
+          var words = hfFlattenSegments(data.segments);
+          if (words.length === 0) return { ok: false, reason: "no-words" };
+          return { ok: true, words: words, durationS: hfDeriveDuration(words) };
         }
-        if (typeof brand.accentColor === "string" && brand.accentColor) {
-          root.style.setProperty("--hf-caption-accent", brand.accentColor);
-        } else {
-          root.style.removeProperty("--hf-caption-accent");
+
+        function hfApplyStageConfig(data, durationS) {
+          var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
+          var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
+          var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
+          var root = document.getElementById(HF_ROOT_ID);
+          [document.documentElement, document.body, root].forEach(function (el) {
+            el.style.width = W + "px";
+            el.style.height = H + "px";
+          });
+          root.setAttribute("data-width", String(W));
+          root.setAttribute("data-height", String(H));
+          root.setAttribute("data-duration", String(durationS));
+          var brand = (data && data.brand) || {};
+          if (typeof brand.primaryColor === "string" && brand.primaryColor) {
+            root.style.setProperty("--hf-caption-primary", brand.primaryColor);
+          } else {
+            root.style.removeProperty("--hf-caption-primary");
+          }
+          if (typeof brand.accentColor === "string" && brand.accentColor) {
+            root.style.setProperty("--hf-caption-accent", brand.accentColor);
+          } else {
+            root.style.removeProperty("--hf-caption-accent");
+          }
+          return {
+            W: W,
+            H: H,
+            scaleX: W / 1920,
+            scaleY: H / 1080,
+            fontScale: Math.min(W, H) / 1080,
+          };
         }
-        return { W: W, H: H, scaleX: W / 1920, scaleY: H / 1080, fontScale: Math.min(W, H) / 1080 };
-      }
 
-      function hfPublishStatus(status) {
-        window.__HF_CAPTION_STATUS = status;
-        document
-          .getElementById(HF_ROOT_ID)
-          .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
-      }
+        function hfPublishStatus(status) {
+          window.__HF_CAPTION_STATUS = status;
+          document
+            .getElementById(HF_ROOT_ID)
+            .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
+        }
 
-      function hfRunGate(words, durationS, failReason) {
-        if (failReason) {
-          hfPublishStatus({
-            ok: false,
-            present: false,
-            contained: false,
-            reason: failReason,
-            version: HF_CONTRACT_VERSION,
-            durationS: durationS || 0,
+        function hfRunGate(words, durationS, failReason) {
+          if (failReason) {
+            hfPublishStatus({
+              ok: false,
+              present: false,
+              contained: false,
+              reason: failReason,
+              version: HF_CONTRACT_VERSION,
+              durationS: durationS || 0,
+            });
+            return;
+          }
+          var root = document.getElementById(HF_ROOT_ID);
+          var rootRect = root.getBoundingClientRect();
+          var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
+          var present = false;
+          var contained = true;
+          var tokens = [];
+          words.forEach(function (w) {
+            var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
+            if (t) tokens.push(t);
           });
-          return;
-        }
-        var root = document.getElementById(HF_ROOT_ID);
-        var rootRect = root.getBoundingClientRect();
-        var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
-        var present = false;
-        var contained = true;
-        var tokens = [];
-        words.forEach(function (w) {
-          var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
-          if (t) tokens.push(t);
-        });
-        groups.forEach(function (el) {
-          var prevOpacity = el.style.opacity;
-          var prevVisibility = el.style.visibility;
-          el.style.opacity = "1";
-          el.style.visibility = "visible";
-          var r = el.getBoundingClientRect();
-          if (r.width > 0 && r.height > 0) {
-            var text = (el.textContent || "").toLowerCase();
-            for (var i = 0; i < tokens.length; i++) {
-              if (text.indexOf(tokens[i]) !== -1) {
-                present = true;
-                break;
+          groups.forEach(function (el) {
+            var prevOpacity = el.style.opacity;
+            var prevVisibility = el.style.visibility;
+            el.style.opacity = "1";
+            el.style.visibility = "visible";
+            var r = el.getBoundingClientRect();
+            if (r.width > 0 && r.height > 0) {
+              var text = (el.textContent || "").toLowerCase();
+              for (var i = 0; i < tokens.length; i++) {
+                if (text.indexOf(tokens[i]) !== -1) {
+                  present = true;
+                  break;
+                }
+              }
+              if (
+                r.left < rootRect.left - 1 ||
+                r.right > rootRect.right + 1 ||
+                r.top < rootRect.top - 1 ||
+                r.bottom > rootRect.bottom + 1
+              ) {
+                contained = false;
               }
             }
-            if (
-              r.left < rootRect.left - 1 ||
-              r.right > rootRect.right + 1 ||
-              r.top < rootRect.top - 1 ||
-              r.bottom > rootRect.bottom + 1
-            ) {
-              contained = false;
-            }
-          }
-          el.style.opacity = prevOpacity;
-          el.style.visibility = prevVisibility;
-        });
-        hfPublishStatus({
-          ok: present && contained,
-          present: present,
-          contained: contained,
-          version: HF_CONTRACT_VERSION,
-          durationS: durationS,
-        });
-      }
-
-      var SAFE_ZONE_WIDTH, MAX_LINE_WIDTH, CAPTION_FONT_SIZE, DURATION;
-      var MAX_WORDS_PER_GROUP = 4;
-      var WORD_SPACING_DESIGN = 12;
-      var WORD_SPACING;
-      var PAUSE_THRESHOLD = 0.1;
-      var ENTRY_DURATION = 100 / 1000;
-      var WEIGHT_TRANSITION = 100 / 1000;
-      var FONT_WIDTH_SAFETY = 1.14;
-      var FONT_WEIGHT_LIGHT = 300;
-      var FONT_WEIGHT_BOLD = 700;
-
-      function normalizeWords(rawWords) {
-        return rawWords
-          .map(function (item) {
-            return {
-              text: String(item.word || item.text || "").trim(),
-              start: Math.max(0, Number(item.start) || 0),
-              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
-            };
-          })
-          .filter(function (word) {
-            return word.text.length > 0;
+            el.style.opacity = prevOpacity;
+            el.style.visibility = prevVisibility;
+          });
+          hfPublishStatus({
+            ok: present && contained,
+            present: present,
+            contained: contained,
+            version: HF_CONTRACT_VERSION,
+            durationS: durationS,
           });
-      }
-
-      var _fitCanvas = document.createElement("canvas");
-      var _fitCtx = _fitCanvas.getContext("2d");
-      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
-        var size = baseFontSize;
-        var minSize = Math.floor(baseFontSize * 0.45);
-        while (size > minSize) {
-          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
-          if (_fitCtx.measureText(text).width <= maxWidth) return size;
-          size -= 2;
         }
-        return minSize;
-      }
 
-      var measureCanvas = document.createElement("canvas");
-      var measureContext = measureCanvas.getContext("2d");
+        var SAFE_ZONE_WIDTH, MAX_LINE_WIDTH, CAPTION_FONT_SIZE, DURATION;
+        var MAX_WORDS_PER_GROUP = 4;
+        var WORD_SPACING_DESIGN = 12;
+        var WORD_SPACING;
+        var PAUSE_THRESHOLD = 0.1;
+        var ENTRY_DURATION = 100 / 1000;
+        var WEIGHT_TRANSITION = 100 / 1000;
+        var FONT_WIDTH_SAFETY = 1.14;
+        var FONT_WEIGHT_LIGHT = 300;
+        var FONT_WEIGHT_BOLD = 700;
+
+        function normalizeWords(rawWords) {
+          return rawWords
+            .map(function (item) {
+              return {
+                text: String(item.word || item.text || "").trim(),
+                start: Math.max(0, Number(item.start) || 0),
+                end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+              };
+            })
+            .filter(function (word) {
+              return word.text.length > 0;
+            });
+        }
 
-      function measureWord(word) {
-        return measureContext.measureText(word.text.toLowerCase()).width * FONT_WIDTH_SAFETY;
-      }
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
 
-      function measureLineWidth(words) {
-        return words.reduce(function (total, word, index) {
-          return total + measureWord(word) + (index ? WORD_SPACING : 0);
-        }, 0);
-      }
+        var measureCanvas = document.createElement("canvas");
+        var measureContext = measureCanvas.getContext("2d");
 
-      function fitsInTwoLines(words) {
-        return measureLineWidth(words) <= MAX_LINE_WIDTH * 1.8;
-      }
+        function measureWord(word) {
+          return measureContext.measureText(word.text.toLowerCase()).width * FONT_WIDTH_SAFETY;
+        }
 
-      function splitLines(words) {
-        if (words.length < 2) {
-          return [{ words: words, startIndex: 0 }];
+        function measureLineWidth(words) {
+          return words.reduce(function (total, word, index) {
+            return total + measureWord(word) + (index ? WORD_SPACING : 0);
+          }, 0);
         }
-        var bestSplit = Math.ceil(words.length / 2);
-        var bestDiff = Infinity;
-        for (var s = 1; s < words.length; s++) {
-          var w1 = measureLineWidth(words.slice(0, s));
-          var w2 = measureLineWidth(words.slice(s));
-          if (w1 <= MAX_LINE_WIDTH && w2 <= MAX_LINE_WIDTH) {
-            var diff = Math.abs(w1 - w2);
-            if (diff < bestDiff) {
-              bestDiff = diff;
-              bestSplit = s;
-            }
-          }
+
+        function fitsInTwoLines(words) {
+          return measureLineWidth(words) <= MAX_LINE_WIDTH * 1.8;
         }
-        var result = [];
-        var line1 = words.slice(0, bestSplit);
-        var line2 = words.slice(bestSplit);
-        if (line1.length) result.push({ words: line1, startIndex: 0 });
-        if (line2.length) result.push({ words: line2, startIndex: line1.length });
-        return result;
-      }
 
-      function avoidSingleWordGroups(groups) {
-        var out = [];
-        groups.forEach(function (group) {
-          if (
-            group.words.length === 1 &&
-            out.length > 0 &&
-            out[out.length - 1].words.length < MAX_WORDS_PER_GROUP
-          ) {
-            out[out.length - 1] = makeGroup(out[out.length - 1].words.concat(group.words));
-          } else {
-            out.push(group);
+        function splitLines(words) {
+          if (words.length < 2) {
+            return [{ words: words, startIndex: 0 }];
           }
-        });
-
-        for (var i = 0; i < out.length; i++) {
-          if (out[i].words.length !== 1) continue;
-          if (i + 1 < out.length && out[i + 1].words.length < MAX_WORDS_PER_GROUP) {
-            out[i] = makeGroup(out[i].words.concat(out[i + 1].words));
-            out.splice(i + 1, 1);
-          } else if (i > 0 && out[i - 1].words.length < MAX_WORDS_PER_GROUP) {
-            out[i - 1] = makeGroup(out[i - 1].words.concat(out[i].words));
-            out.splice(i, 1);
-            i--;
+          var bestSplit = Math.ceil(words.length / 2);
+          var bestDiff = Infinity;
+          for (var s = 1; s < words.length; s++) {
+            var w1 = measureLineWidth(words.slice(0, s));
+            var w2 = measureLineWidth(words.slice(s));
+            if (w1 <= MAX_LINE_WIDTH && w2 <= MAX_LINE_WIDTH) {
+              var diff = Math.abs(w1 - w2);
+              if (diff < bestDiff) {
+                bestDiff = diff;
+                bestSplit = s;
+              }
+            }
           }
+          var result = [];
+          var line1 = words.slice(0, bestSplit);
+          var line2 = words.slice(bestSplit);
+          if (line1.length) result.push({ words: line1, startIndex: 0 });
+          if (line2.length) result.push({ words: line2, startIndex: line1.length });
+          return result;
         }
 
-        return out;
-      }
+        function avoidSingleWordGroups(groups) {
+          var out = [];
+          groups.forEach(function (group) {
+            if (
+              group.words.length === 1 &&
+              out.length > 0 &&
+              out[out.length - 1].words.length < MAX_WORDS_PER_GROUP
+            ) {
+              out[out.length - 1] = makeGroup(out[out.length - 1].words.concat(group.words));
+            } else {
+              out.push(group);
+            }
+          });
 
-      function makeGroups(words) {
-        var groups = [];
-        var current = [];
-        words.forEach(function (word, index) {
-          var nextWord = words[index + 1];
-          var testGroup = current.concat([word]);
-          if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsInTwoLines(testGroup)) {
-            if (current.length) groups.push(makeGroup(current));
-            current = [word];
-            return;
-          }
-          current.push(word);
-          var punctuation = /[,.:!?]$/.test(word.text);
-          var pause = nextWord ? nextWord.start - word.end : 0;
-          if (
-            !nextWord ||
-            punctuation ||
-            pause >= PAUSE_THRESHOLD ||
-            current.length >= MAX_WORDS_PER_GROUP
-          ) {
-            groups.push(makeGroup(current));
-            current = [];
+          for (var i = 0; i < out.length; i++) {
+            if (out[i].words.length !== 1) continue;
+            if (i + 1 < out.length && out[i + 1].words.length < MAX_WORDS_PER_GROUP) {
+              out[i] = makeGroup(out[i].words.concat(out[i + 1].words));
+              out.splice(i + 1, 1);
+            } else if (i > 0 && out[i - 1].words.length < MAX_WORDS_PER_GROUP) {
+              out[i - 1] = makeGroup(out[i - 1].words.concat(out[i].words));
+              out.splice(i, 1);
+              i--;
+            }
           }
-        });
-        if (current.length) groups.push(makeGroup(current));
-        return avoidSingleWordGroups(groups);
-      }
 
-      function makeGroup(words) {
-        return {
-          words: words.slice(),
-          lines: splitLines(words),
-          start: words[0].start,
-          end: words[words.length - 1].end,
-        };
-      }
+          return out;
+        }
 
-      function buildCaptions(groups) {
-        var stage = document.getElementById("caption-stage");
-        groups.forEach(function (group, groupIndex) {
-          var groupText = group.words
-            .map(function (w) {
-              return w.text.toLowerCase();
-            })
-            .join(" ");
-          var computedSize = fitFontSize(
-            groupText,
-            CAPTION_FONT_SIZE,
-            "700",
-            "Montserrat",
-            MAX_LINE_WIDTH,
-          );
-          var groupEl = document.createElement("div");
-          var copyEl = document.createElement("div");
-          groupEl.id = "caption-group-" + groupIndex;
-          groupEl.className = "caption-group";
-          copyEl.className = "caption-copy";
-          group.lines.forEach(function (line, lineIndex) {
-            var lineEl = document.createElement("div");
-            lineEl.className = "caption-line";
-            lineEl.id = "caption-group-" + groupIndex + "-line-" + lineIndex;
-            lineEl.style.fontWeight = lineIndex === 0 ? FONT_WEIGHT_BOLD : FONT_WEIGHT_LIGHT;
-            lineEl.style.fontSize = computedSize + "px";
-            lineEl.style.maxWidth = SAFE_ZONE_WIDTH + "px";
-            line.words.forEach(function (word, wordIndex) {
-              var wordEl = document.createElement("span");
-              wordEl.textContent = word.text.toLowerCase();
-              wordEl.style.display = "inline-block";
-              lineEl.appendChild(wordEl);
+        function makeGroups(words) {
+          var groups = [];
+          var current = [];
+          words.forEach(function (word, index) {
+            var nextWord = words[index + 1];
+            var testGroup = current.concat([word]);
+            if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsInTwoLines(testGroup)) {
+              if (current.length) groups.push(makeGroup(current));
+              current = [word];
+              return;
+            }
+            current.push(word);
+            var punctuation = /[,.:!?]$/.test(word.text);
+            var pause = nextWord ? nextWord.start - word.end : 0;
+            if (
+              !nextWord ||
+              punctuation ||
+              pause >= PAUSE_THRESHOLD ||
+              current.length >= MAX_WORDS_PER_GROUP
+            ) {
+              groups.push(makeGroup(current));
+              current = [];
+            }
+          });
+          if (current.length) groups.push(makeGroup(current));
+          return avoidSingleWordGroups(groups);
+        }
+
+        function makeGroup(words) {
+          return {
+            words: words.slice(),
+            lines: splitLines(words),
+            start: words[0].start,
+            end: words[words.length - 1].end,
+          };
+        }
+
+        function buildCaptions(groups) {
+          var stage = document.getElementById("caption-stage");
+          groups.forEach(function (group, groupIndex) {
+            var groupText = group.words
+              .map(function (w) {
+                return w.text.toLowerCase();
+              })
+              .join(" ");
+            var computedSize = fitFontSize(
+              groupText,
+              CAPTION_FONT_SIZE,
+              "700",
+              "Montserrat",
+              MAX_LINE_WIDTH,
+            );
+            var groupEl = document.createElement("div");
+            var copyEl = document.createElement("div");
+            groupEl.id = "caption-group-" + groupIndex;
+            groupEl.className = "caption-group";
+            copyEl.className = "caption-copy";
+            group.lines.forEach(function (line, lineIndex) {
+              var lineEl = document.createElement("div");
+              lineEl.className = "caption-line";
+              lineEl.id = "caption-group-" + groupIndex + "-line-" + lineIndex;
+              lineEl.style.fontWeight = lineIndex === 0 ? FONT_WEIGHT_BOLD : FONT_WEIGHT_LIGHT;
+              lineEl.style.fontSize = computedSize + "px";
+              lineEl.style.maxWidth = SAFE_ZONE_WIDTH + "px";
+              line.words.forEach(function (word, wordIndex) {
+                var wordEl = document.createElement("span");
+                wordEl.textContent = word.text.toLowerCase();
+                wordEl.style.display = "inline-block";
+                lineEl.appendChild(wordEl);
+              });
+              copyEl.appendChild(lineEl);
             });
-            copyEl.appendChild(lineEl);
+            groupEl.appendChild(copyEl);
+            stage.appendChild(groupEl);
           });
-          groupEl.appendChild(copyEl);
-          stage.appendChild(groupEl);
-        });
-      }
+        }
 
-      function hfTeardown() {
-        document.getElementById("caption-stage").innerHTML = "";
-      }
+        function hfTeardown() {
+          document.getElementById("caption-stage").innerHTML = "";
+        }
+
+        function hfBuild(words, layout, durationS) {
+          DURATION = durationS;
+          CAPTION_FONT_SIZE = Math.round(72 * layout.fontScale);
+          SAFE_ZONE_WIDTH = Math.round(1400 * layout.scaleX);
+          MAX_LINE_WIDTH = SAFE_ZONE_WIDTH - Math.round(40 * layout.scaleX);
+          WORD_SPACING = Math.round(WORD_SPACING_DESIGN * layout.fontScale);
+
+          var stage = document.getElementById("caption-stage");
+          var stageHeight = Math.round(278 * layout.fontScale);
+          stage.style.width = SAFE_ZONE_WIDTH + "px";
+          stage.style.height = stageHeight + "px";
+          stage.style.bottom = Math.round(100 * layout.scaleY) + "px";
+
+          measureContext.font = "700 " + CAPTION_FONT_SIZE + "px Montserrat";
+
+          var WORDS = normalizeWords(words);
+          var GROUPS = makeGroups(WORDS);
+          buildCaptions(GROUPS);
+          // set per-group sizing to match the runtime stage
+          GROUPS.forEach(function (_, i) {
+            var el = document.getElementById("caption-group-" + i);
+            el.style.width = SAFE_ZONE_WIDTH + "px";
+            el.style.height = stageHeight + "px";
+          });
 
-      function hfBuild(words, layout, durationS) {
-        DURATION = durationS;
-        CAPTION_FONT_SIZE = Math.round(72 * layout.fontScale);
-        SAFE_ZONE_WIDTH = Math.round(1400 * layout.scaleX);
-        MAX_LINE_WIDTH = SAFE_ZONE_WIDTH - Math.round(40 * layout.scaleX);
-        WORD_SPACING = Math.round(WORD_SPACING_DESIGN * layout.fontScale);
-
-        var stage = document.getElementById("caption-stage");
-        var stageHeight = Math.round(278 * layout.fontScale);
-        stage.style.width = SAFE_ZONE_WIDTH + "px";
-        stage.style.height = stageHeight + "px";
-        stage.style.bottom = Math.round(100 * layout.scaleY) + "px";
-
-        measureContext.font = "700 " + CAPTION_FONT_SIZE + "px Montserrat";
-
-        var WORDS = normalizeWords(words);
-        var GROUPS = makeGroups(WORDS);
-        buildCaptions(GROUPS);
-        // set per-group sizing to match the runtime stage
-        GROUPS.forEach(function (_, i) {
-          var el = document.getElementById("caption-group-" + i);
-          el.style.width = SAFE_ZONE_WIDTH + "px";
-          el.style.height = stageHeight + "px";
-        });
-
-        var tl = gsap.timeline({ paused: true });
-
-        var visibleStarts = GROUPS.map(function (group, groupIndex) {
-          var prev = GROUPS[groupIndex - 1];
-          var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
-          var entryLead = Math.min(ENTRY_DURATION, availableGap);
-          return Math.max(0, group.start - entryLead);
-        });
-
-        var allGroupEls = GROUPS.map(function (_, i) {
-          return document.getElementById("caption-group-" + i);
-        });
-
-        GROUPS.forEach(function (group, groupIndex) {
-          var groupEl = allGroupEls[groupIndex];
-          var visibleStart = visibleStarts[groupIndex];
-          var visibleEnd =
-            groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
-
-          // Each group already owns its full opacity lifecycle (set 0 at its
-          // own visibleStart, animated to 1, then set back to 0 at its own
-          // visibleEnd below), and groups occupy non-overlapping windows, so
-          // explicitly hiding every OTHER group here was redundant and made
-          // timeline construction O(groups^2) — this collapsed under dense
-          // stress transcripts (many short groups). Removed; behavior is
-          // unchanged (verified against templates.test.ts).
-
-          tl.set(groupEl, { opacity: 0, scale: 0.85 }, visibleStart);
-          tl.to(
-            groupEl,
-            { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
-            visibleStart,
-          );
-
-          if (group.lines.length === 2) {
-            var line1El = document.getElementById("caption-group-" + groupIndex + "-line-0");
-            var line2El = document.getElementById("caption-group-" + groupIndex + "-line-1");
-            var line2FirstWord = group.lines[1].words[0];
-            var switchTime = line2FirstWord.start;
+          var tl = gsap.timeline({ paused: true });
 
-            tl.to(
-              line1El,
-              { fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.out" },
-              switchTime,
-            );
-            tl.to(
-              line2El,
-              { fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" },
-              switchTime,
-            );
-          }
+          var visibleStarts = GROUPS.map(function (group, groupIndex) {
+            var prev = GROUPS[groupIndex - 1];
+            var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+            var entryLead = Math.min(ENTRY_DURATION, availableGap);
+            return Math.max(0, group.start - entryLead);
+          });
 
-          tl.set(groupEl, { opacity: 0 }, visibleEnd);
-        });
+          var allGroupEls = GROUPS.map(function (_, i) {
+            return document.getElementById("caption-group-" + i);
+          });
 
-        return tl;
-      }
+          GROUPS.forEach(function (group, groupIndex) {
+            var groupEl = allGroupEls[groupIndex];
+            var visibleStart = visibleStarts[groupIndex];
+            var visibleEnd =
+              groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+
+            // Each group already owns its full opacity lifecycle (set 0 at its
+            // own visibleStart, animated to 1, then set back to 0 at its own
+            // visibleEnd below), and groups occupy non-overlapping windows, so
+            // explicitly hiding every OTHER group here was redundant and made
+            // timeline construction O(groups^2) — this collapsed under dense
+            // stress transcripts (many short groups). Removed; behavior is
+            // unchanged (verified against templates.test.ts).
+
+            tl.set(groupEl, { opacity: 0, scale: 0.85 }, visibleStart);
+            tl.to(
+              groupEl,
+              { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+              visibleStart,
+            );
 
-      var hfCurrentTimeline = null;
+            if (group.lines.length === 2) {
+              var line1El = document.getElementById("caption-group-" + groupIndex + "-line-0");
+              var line2El = document.getElementById("caption-group-" + groupIndex + "-line-1");
+              var line2FirstWord = group.lines[1].words[0];
+              var switchTime = line2FirstWord.start;
+
+              tl.to(
+                line1El,
+                { fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.out" },
+                switchTime,
+              );
+              tl.to(
+                line2El,
+                { fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" },
+                switchTime,
+              );
+            }
 
-      function hfAttach(data) {
-        var v = hfValidate(data);
-        if (!v.ok) {
-          hfRunGate([], 0, v.reason);
-          return;
-        }
-        if (hfCurrentTimeline) {
-          hfCurrentTimeline.kill();
-          hfCurrentTimeline = null;
-        }
-        hfTeardown();
-        var layout = hfApplyStageConfig(data, v.durationS);
-        var tl = hfBuild(v.words, layout, v.durationS);
-        tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
-        // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
-        // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
-        // at t=0 — the first frame would show pre-timeline CSS defaults (usually
-        // hidden). render(time, suppressEvents, force) with force=true bypasses that.
-        tl.render(0, true, true);
-        hfCurrentTimeline = tl;
-        window.__timelines = window.__timelines || {};
-        window.__timelines[HF_COMPOSITION_ID] = tl;
-        hfRunGate(v.words, v.durationS, null);
-      }
-      window.__HF_CAPTION_ATTACH__ = hfAttach;
-
-      (function hfBoot() {
-        function start(data) {
-          var ready =
-            document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
-          ready.then(function () {
-            hfAttach(data);
+            tl.set(groupEl, { opacity: 0 }, visibleEnd);
           });
+
+          return tl;
         }
-        if (window.__HF_CAPTION__) {
-          start(window.__HF_CAPTION__);
-          return;
+
+        var hfCurrentTimeline = null;
+
+        function hfAttach(data) {
+          var v = hfValidate(data);
+          if (!v.ok) {
+            hfRunGate([], 0, v.reason);
+            return;
+          }
+          if (hfCurrentTimeline) {
+            hfCurrentTimeline.kill();
+            hfCurrentTimeline = null;
+          }
+          hfTeardown();
+          var layout = hfApplyStageConfig(data, v.durationS);
+          var tl = hfBuild(v.words, layout, v.durationS);
+          tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
+          // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
+          // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
+          // at t=0 — the first frame would show pre-timeline CSS defaults (usually
+          // hidden). render(time, suppressEvents, force) with force=true bypasses that.
+          tl.render(0, true, true);
+          hfCurrentTimeline = tl;
+          window.__timelines = window.__timelines || {};
+          window.__timelines[HF_COMPOSITION_ID] = tl;
+          hfRunGate(v.words, v.durationS, null);
         }
-        fetch("./caption-data.json")
-          .then(function (r) {
-            return r.ok ? r.json() : null;
-          })
-          .catch(function () {
-            return null;
-          })
-          .then(function (json) {
-            start(json || HF_DEMO_DATA);
-          });
+        window.__HF_CAPTION_ATTACH__ = hfAttach;
+
+        (function hfBoot() {
+          function start(data) {
+            var ready =
+              document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
+            ready.then(function () {
+              hfAttach(data);
+            });
+          }
+          if (window.__HF_CAPTION__) {
+            start(window.__HF_CAPTION__);
+            return;
+          }
+          fetch("./caption-data.json")
+            .then(function (r) {
+              return r.ok ? r.json() : null;
+            })
+            .catch(function () {
+              return null;
+            })
+            .then(function (json) {
+              start(json || HF_DEMO_DATA);
+            });
+        })();
       })();
     </script>
   </body>

From 5c2981d066480000d623e4d023e9cf918b2772e3 Mon Sep 17 00:00:00 2001
From: vanceingalls <vance@heygen.com>
Date: Fri, 24 Jul 2026 05:55:21 +0000
Subject: [PATCH 11/12] fix(registry): reject non-numeric caption-data
 versions; boot fetch never clobbers a manual attach
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two review findings on the caption-data runtime, applied to all 5 templates:
- hfValidate's version gate used Math.floor(Number(v)) > HF_CONTRACT_VERSION,
  and Number("v2") is NaN — NaN comparisons are always false, so malformed
  versions slid through with no unsupported-version signal. An explicit
  Number.isFinite check closes it.
- hfBoot's sibling-fetch .then called hfAttach unconditionally; a manual
  window.__HF_CAPTION_ATTACH__ call landing while the fetch or fonts.ready
  was still pending got clobbered by the late boot payload. Boot now yields
  if a timeline already exists.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../caption-editorial-emphasis.html                 | 13 +++++++++++--
 .../caption-emoji-pop/caption-emoji-pop.html        | 13 +++++++++++--
 .../caption-highlight/caption-highlight.html        | 13 +++++++++++--
 .../caption-pill-karaoke/caption-pill-karaoke.html  | 13 +++++++++++--
 .../caption-weight-shift/caption-weight-shift.html  | 13 +++++++++++--
 5 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
index 83f808425a..3790946ee0 100644
--- a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
+++ b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
@@ -205,8 +205,13 @@
 
         function hfValidate(data) {
           if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
-          if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
-            return { ok: false, reason: "unsupported-version" };
+          if (data.version != null) {
+            // Number("v2") is NaN and NaN > x is always false — an explicit
+            // finite check keeps malformed versions from slipping past the gate.
+            var hfVersion = Number(data.version);
+            if (!Number.isFinite(hfVersion) || Math.floor(hfVersion) > HF_CONTRACT_VERSION) {
+              return { ok: false, reason: "unsupported-version" };
+            }
           }
           if (!Array.isArray(data.segments) || data.segments.length === 0) {
             return { ok: false, reason: "no-segments" };
@@ -679,6 +684,10 @@
             var ready =
               document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
             ready.then(function () {
+              // A manual window.__HF_CAPTION_ATTACH__ call that lands while the
+              // sibling fetch / fonts.ready are still pending must win — never
+              // clobber it with the late-arriving boot payload.
+              if (hfCurrentTimeline) return;
               hfAttach(data);
             });
           }
diff --git a/registry/components/caption-emoji-pop/caption-emoji-pop.html b/registry/components/caption-emoji-pop/caption-emoji-pop.html
index 6d6f15c697..7c982e2781 100644
--- a/registry/components/caption-emoji-pop/caption-emoji-pop.html
+++ b/registry/components/caption-emoji-pop/caption-emoji-pop.html
@@ -208,8 +208,13 @@
 
         function hfValidate(data) {
           if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
-          if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
-            return { ok: false, reason: "unsupported-version" };
+          if (data.version != null) {
+            // Number("v2") is NaN and NaN > x is always false — an explicit
+            // finite check keeps malformed versions from slipping past the gate.
+            var hfVersion = Number(data.version);
+            if (!Number.isFinite(hfVersion) || Math.floor(hfVersion) > HF_CONTRACT_VERSION) {
+              return { ok: false, reason: "unsupported-version" };
+            }
           }
           if (!Array.isArray(data.segments) || data.segments.length === 0) {
             return { ok: false, reason: "no-segments" };
@@ -790,6 +795,10 @@
             var ready =
               document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
             ready.then(function () {
+              // A manual window.__HF_CAPTION_ATTACH__ call that lands while the
+              // sibling fetch / fonts.ready are still pending must win — never
+              // clobber it with the late-arriving boot payload.
+              if (hfCurrentTimeline) return;
               hfAttach(data);
             });
           }
diff --git a/registry/components/caption-highlight/caption-highlight.html b/registry/components/caption-highlight/caption-highlight.html
index b87f407e84..a1d1b8be96 100644
--- a/registry/components/caption-highlight/caption-highlight.html
+++ b/registry/components/caption-highlight/caption-highlight.html
@@ -214,8 +214,13 @@
 
         function hfValidate(data) {
           if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
-          if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
-            return { ok: false, reason: "unsupported-version" };
+          if (data.version != null) {
+            // Number("v2") is NaN and NaN > x is always false — an explicit
+            // finite check keeps malformed versions from slipping past the gate.
+            var hfVersion = Number(data.version);
+            if (!Number.isFinite(hfVersion) || Math.floor(hfVersion) > HF_CONTRACT_VERSION) {
+              return { ok: false, reason: "unsupported-version" };
+            }
           }
           if (!Array.isArray(data.segments) || data.segments.length === 0) {
             return { ok: false, reason: "no-segments" };
@@ -491,6 +496,10 @@
             var ready =
               document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
             ready.then(function () {
+              // A manual window.__HF_CAPTION_ATTACH__ call that lands while the
+              // sibling fetch / fonts.ready are still pending must win — never
+              // clobber it with the late-arriving boot payload.
+              if (hfCurrentTimeline) return;
               hfAttach(data);
             });
           }
diff --git a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
index 341400fb80..c0025e2629 100644
--- a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
+++ b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
@@ -214,8 +214,13 @@
 
         function hfValidate(data) {
           if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
-          if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
-            return { ok: false, reason: "unsupported-version" };
+          if (data.version != null) {
+            // Number("v2") is NaN and NaN > x is always false — an explicit
+            // finite check keeps malformed versions from slipping past the gate.
+            var hfVersion = Number(data.version);
+            if (!Number.isFinite(hfVersion) || Math.floor(hfVersion) > HF_CONTRACT_VERSION) {
+              return { ok: false, reason: "unsupported-version" };
+            }
           }
           if (!Array.isArray(data.segments) || data.segments.length === 0) {
             return { ok: false, reason: "no-segments" };
@@ -599,6 +604,10 @@
             var ready =
               document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
             ready.then(function () {
+              // A manual window.__HF_CAPTION_ATTACH__ call that lands while the
+              // sibling fetch / fonts.ready are still pending must win — never
+              // clobber it with the late-arriving boot payload.
+              if (hfCurrentTimeline) return;
               hfAttach(data);
             });
           }
diff --git a/registry/components/caption-weight-shift/caption-weight-shift.html b/registry/components/caption-weight-shift/caption-weight-shift.html
index f2c42f10ff..d6340fd6a2 100644
--- a/registry/components/caption-weight-shift/caption-weight-shift.html
+++ b/registry/components/caption-weight-shift/caption-weight-shift.html
@@ -200,8 +200,13 @@
 
         function hfValidate(data) {
           if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
-          if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
-            return { ok: false, reason: "unsupported-version" };
+          if (data.version != null) {
+            // Number("v2") is NaN and NaN > x is always false — an explicit
+            // finite check keeps malformed versions from slipping past the gate.
+            var hfVersion = Number(data.version);
+            if (!Number.isFinite(hfVersion) || Math.floor(hfVersion) > HF_CONTRACT_VERSION) {
+              return { ok: false, reason: "unsupported-version" };
+            }
           }
           if (!Array.isArray(data.segments) || data.segments.length === 0) {
             return { ok: false, reason: "no-segments" };
@@ -616,6 +621,10 @@
             var ready =
               document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
             ready.then(function () {
+              // A manual window.__HF_CAPTION_ATTACH__ call that lands while the
+              // sibling fetch / fonts.ready are still pending must win — never
+              // clobber it with the late-arriving boot payload.
+              if (hfCurrentTimeline) return;
               hfAttach(data);
             });
           }

From 8bf939043fb44e05f6dd7caba81822ac5ef18334 Mon Sep 17 00:00:00 2001
From: vanceingalls <vance@heygen.com>
Date: Fri, 24 Jul 2026 06:10:00 +0000
Subject: [PATCH 12/12] fix(registry): liberal emoji-pop brand colors,
 weight-shift fit fixes, 8192 clamp
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- caption-emoji-pop: shadowForColor now builds its glow via color-mix()
  instead of hex-pair slicing, so the strict 6-digit brand-color gate is
  gone — any CSS color the sibling templates accept (#fff, rgb(), named)
  now renders instead of silently falling back to the default palette

- caption-weight-shift: fitFontSize now sizes against the WIDEST split
  line rather than the joined group text (two-line groups no longer shrink
  unnecessarily), and avoidSingleWordGroups' merges re-check fitsInTwoLines
  like makeGroups' first pass does (merged groups can no longer overflow
  the split budget)

- all 5: hfApplyStageConfig clamps resolution to the published validator's
  <=8192 bound (validator is optional pre-flight; unbounded stages OOM
  render workers), and fit floors carry a comment documenting that the
  minimum size is returned unverified by design

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../caption-editorial-emphasis.html           | 16 +++++-
 .../caption-emoji-pop/caption-emoji-pop.html  | 52 +++++++++--------
 .../caption-highlight/caption-highlight.html  | 16 +++++-
 .../caption-pill-karaoke.html                 | 16 +++++-
 .../caption-weight-shift.html                 | 57 +++++++++++++++----
 5 files changed, 117 insertions(+), 40 deletions(-)

diff --git a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
index 3790946ee0..2622b09a80 100644
--- a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
+++ b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
@@ -226,8 +226,17 @@
 
         function hfApplyStageConfig(data, durationS) {
           var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
-          var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
-          var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
+          // Mirror the published validator's <=8192 bound defensively — the
+          // validator is an optional pre-flight, and an unbounded stage size
+          // would OOM render workers.
+          var W = Math.min(
+            8192,
+            Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width)),
+          );
+          var H = Math.min(
+            8192,
+            Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height)),
+          );
           var root = document.getElementById(HF_ROOT_ID);
           [document.documentElement, document.body, root].forEach(function (el) {
             el.style.width = W + "px";
@@ -420,6 +429,9 @@
         function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
           var size = baseFontSize;
           var minSize = Math.floor(baseFontSize * 0.45);
+          // minSize is a hard floor returned unverified below — self-heal
+          // accepts residual overflow at the floor (clipped by the stage)
+          // rather than shrinking below legibility.
           while (size > minSize) {
             _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
             if (_fitCtx.measureText(text).width <= maxWidth) return size;
diff --git a/registry/components/caption-emoji-pop/caption-emoji-pop.html b/registry/components/caption-emoji-pop/caption-emoji-pop.html
index 7c982e2781..11d7c77f86 100644
--- a/registry/components/caption-emoji-pop/caption-emoji-pop.html
+++ b/registry/components/caption-emoji-pop/caption-emoji-pop.html
@@ -229,8 +229,17 @@
 
         function hfApplyStageConfig(data, durationS) {
           var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
-          var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
-          var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
+          // Mirror the published validator's <=8192 bound defensively — the
+          // validator is an optional pre-flight, and an unbounded stage size
+          // would OOM render workers.
+          var W = Math.min(
+            8192,
+            Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width)),
+          );
+          var H = Math.min(
+            8192,
+            Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height)),
+          );
           var root = document.getElementById(HF_ROOT_ID);
           [document.documentElement, document.body, root].forEach(function (el) {
             el.style.width = W + "px";
@@ -532,6 +541,9 @@
         function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
           var size = baseFontSize;
           var minSize = Math.floor(baseFontSize * 0.45);
+          // minSize is a hard floor returned unverified below — self-heal
+          // accepts residual overflow at the floor (clipped by the stage)
+          // rather than shrinking below legibility.
           while (size > minSize) {
             _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
             if (_fitCtx.measureText(text).width <= maxWidth) return size;
@@ -605,24 +617,16 @@
         }
 
         function shadowForColor(color) {
-          var hex = color.replace("#", "");
-          var r = parseInt(hex.slice(0, 2), 16);
-          var g = parseInt(hex.slice(2, 4), 16);
-          var b = parseInt(hex.slice(4, 6), 16);
+          // color-mix handles ANY CSS color (hex of either length, rgb()/hsl(),
+          // named colors) — the old hex-pair slicing was why brand colors were
+          // gated behind a strict 6-digit regex, silently dropping payloads the
+          // sibling templates accept.
           return (
-            "0 4px 8px rgba(0,0,0,0.7), 0 0 2px rgba(" +
-            r +
-            "," +
-            g +
-            "," +
-            b +
-            ",1), 0 0 8px rgba(" +
-            r +
-            "," +
-            g +
-            "," +
-            b +
-            ",0.6)"
+            "0 4px 8px rgba(0,0,0,0.7), 0 0 2px " +
+            color +
+            ", 0 0 8px color-mix(in srgb, " +
+            color +
+            " 60%, transparent)"
           );
         }
 
@@ -689,12 +693,14 @@
           stage.style.bottom = Math.round(80 * layout.scaleY) + "px";
 
           var rootEl = document.getElementById(HF_ROOT_ID);
+          // Any non-empty CSS color is honored (mirrors caption-pill-karaoke) —
+          // shadowForColor no longer needs parseable hex, so the old 6-digit
+          // gate (which silently dropped #fff / rgb() / named colors that the
+          // sibling templates accept) is gone.
           var primary = getComputedStyle(rootEl).getPropertyValue("--hf-caption-primary").trim();
           var accent = getComputedStyle(rootEl).getPropertyValue("--hf-caption-accent").trim();
-          hfPrimaryColor = /^#[0-9a-f]{6}$/i.test(primary) ? primary : "#FFFFFF";
-          hfAccentColors = /^#[0-9a-f]{6}$/i.test(accent)
-            ? [accent]
-            : ["#FF76FF", "#FF0002", "#B2F7FF"];
+          hfPrimaryColor = primary || "#FFFFFF";
+          hfAccentColors = accent ? [accent] : ["#FF76FF", "#FF0002", "#B2F7FF"];
 
           var WORDS = normalizeWords(words);
           var GROUPS = makeGroups(WORDS);
diff --git a/registry/components/caption-highlight/caption-highlight.html b/registry/components/caption-highlight/caption-highlight.html
index a1d1b8be96..2156930ceb 100644
--- a/registry/components/caption-highlight/caption-highlight.html
+++ b/registry/components/caption-highlight/caption-highlight.html
@@ -132,6 +132,9 @@
         function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
           var size = baseFontSize;
           var minSize = Math.floor(baseFontSize * 0.45);
+          // minSize is a hard floor returned unverified below — self-heal
+          // accepts residual overflow at the floor (clipped by the stage)
+          // rather than shrinking below legibility.
           while (size > minSize) {
             _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
             if (_fitCtx.measureText(text).width <= maxWidth) return size;
@@ -235,8 +238,17 @@
 
         function hfApplyStageConfig(data, durationS) {
           var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
-          var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
-          var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
+          // Mirror the published validator's <=8192 bound defensively — the
+          // validator is an optional pre-flight, and an unbounded stage size
+          // would OOM render workers.
+          var W = Math.min(
+            8192,
+            Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width)),
+          );
+          var H = Math.min(
+            8192,
+            Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height)),
+          );
           var root = document.getElementById(HF_ROOT_ID);
           [document.documentElement, document.body, root].forEach(function (el) {
             el.style.width = W + "px";
diff --git a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
index c0025e2629..5e19c8ed47 100644
--- a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
+++ b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
@@ -235,8 +235,17 @@
 
         function hfApplyStageConfig(data, durationS) {
           var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
-          var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
-          var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
+          // Mirror the published validator's <=8192 bound defensively — the
+          // validator is an optional pre-flight, and an unbounded stage size
+          // would OOM render workers.
+          var W = Math.min(
+            8192,
+            Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width)),
+          );
+          var H = Math.min(
+            8192,
+            Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height)),
+          );
           var root = document.getElementById(HF_ROOT_ID);
           [document.documentElement, document.body, root].forEach(function (el) {
             el.style.width = W + "px";
@@ -464,6 +473,9 @@
 
         function fontSizeForGroup(words) {
           var size = BASE_FONT_SIZE;
+          // MIN_FONT_SIZE is a hard floor returned unverified below — self-heal
+          // accepts residual overflow at the floor (clipped by the stage)
+          // rather than shrinking below legibility.
           while (size > MIN_FONT_SIZE && !fitsInTwoLinesAtSize(words, size)) {
             size -= 2;
           }
diff --git a/registry/components/caption-weight-shift/caption-weight-shift.html b/registry/components/caption-weight-shift/caption-weight-shift.html
index d6340fd6a2..b42c4e59ae 100644
--- a/registry/components/caption-weight-shift/caption-weight-shift.html
+++ b/registry/components/caption-weight-shift/caption-weight-shift.html
@@ -221,8 +221,17 @@
 
         function hfApplyStageConfig(data, durationS) {
           var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
-          var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
-          var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
+          // Mirror the published validator's <=8192 bound defensively — the
+          // validator is an optional pre-flight, and an unbounded stage size
+          // would OOM render workers.
+          var W = Math.min(
+            8192,
+            Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width)),
+          );
+          var H = Math.min(
+            8192,
+            Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height)),
+          );
           var root = document.getElementById(HF_ROOT_ID);
           [document.documentElement, document.body, root].forEach(function (el) {
             el.style.width = W + "px";
@@ -345,6 +354,9 @@
         function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
           var size = baseFontSize;
           var minSize = Math.floor(baseFontSize * 0.45);
+          // minSize is a hard floor returned unverified below — self-heal
+          // accepts residual overflow at the floor (clipped by the stage)
+          // rather than shrinking below legibility.
           while (size > minSize) {
             _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
             if (_fitCtx.measureText(text).width <= maxWidth) return size;
@@ -401,7 +413,11 @@
             if (
               group.words.length === 1 &&
               out.length > 0 &&
-              out[out.length - 1].words.length < MAX_WORDS_PER_GROUP
+              out[out.length - 1].words.length < MAX_WORDS_PER_GROUP &&
+              // makeGroups guards every addition with fitsInTwoLines; this
+              // second-pass merge must too, or it can produce a group that
+              // splitLines cannot fit within MAX_LINE_WIDTH.
+              fitsInTwoLines(out[out.length - 1].words.concat(group.words))
             ) {
               out[out.length - 1] = makeGroup(out[out.length - 1].words.concat(group.words));
             } else {
@@ -411,10 +427,18 @@
 
           for (var i = 0; i < out.length; i++) {
             if (out[i].words.length !== 1) continue;
-            if (i + 1 < out.length && out[i + 1].words.length < MAX_WORDS_PER_GROUP) {
+            if (
+              i + 1 < out.length &&
+              out[i + 1].words.length < MAX_WORDS_PER_GROUP &&
+              fitsInTwoLines(out[i].words.concat(out[i + 1].words))
+            ) {
               out[i] = makeGroup(out[i].words.concat(out[i + 1].words));
               out.splice(i + 1, 1);
-            } else if (i > 0 && out[i - 1].words.length < MAX_WORDS_PER_GROUP) {
+            } else if (
+              i > 0 &&
+              out[i - 1].words.length < MAX_WORDS_PER_GROUP &&
+              fitsInTwoLines(out[i - 1].words.concat(out[i].words))
+            ) {
               out[i - 1] = makeGroup(out[i - 1].words.concat(out[i].words));
               out.splice(i, 1);
               i--;
@@ -464,13 +488,24 @@
         function buildCaptions(groups) {
           var stage = document.getElementById("caption-stage");
           groups.forEach(function (group, groupIndex) {
-            var groupText = group.words
-              .map(function (w) {
-                return w.text.toLowerCase();
-              })
-              .join(" ");
+            // Fit the WIDEST split line, not the joined group text: the group
+            // renders across up to two lines, so sizing against the joined
+            // string shrank two-line groups that already fit at full size.
+            var widestLineText = "";
+            var widestLineWidth = -1;
+            group.lines.forEach(function (line) {
+              var lineWidth = measureLineWidth(line.words);
+              if (lineWidth > widestLineWidth) {
+                widestLineWidth = lineWidth;
+                widestLineText = line.words
+                  .map(function (w) {
+                    return w.text.toLowerCase();
+                  })
+                  .join(" ");
+              }
+            });
             var computedSize = fitFontSize(
-              groupText,
+              widestLineText,
               CAPTION_FONT_SIZE,
               "700",
               "Montserrat",