chore(catalog): publish generated catalog

docs/catalog/blocks/mk-callout-highlight.mdx

@@ -18,7 +18,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   compositionSrc="compositions/mk-callout-highlight.html"
   title="Word-Sweep Highlight"
   variables={[]}
-  meta={{"duration":8,"width":1920,"height":1080,"category":"Captions","badge":"Stable","codeLines":156}}
+  meta={{"duration":8,"width":1920,"height":1080,"category":"Captions","badge":"Stable","codeLines":182}}
   attribution={{"path":"registry/blocks/mk-callout-highlight","tags":["typography","karaoke","captions","minimal"]}}
   hasCode
   rawUrl="https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/mk-callout-highlight/mk-callout-highlight.html"
@@ -59,8 +59,20 @@ import { InstallCommand } from "/snippets/install-command.jsx";
         overflow: hidden;
         background: transparent; /* overlays footage or mk-background */
       }
-      #mk-ch-box {
+      #mk-ch-center {
+        /* CSS centring. The box is a flex item of this full-frame wrapper, so its
+           place is laid out by the browser rather than measured from a DOM rect
+           taken before web fonts are ready. An explicit CONFIG.x / CONFIG.y turns
+           that axis into an edge offset (see the script). No pointer-events:none
+           here: it inherits to the word spans and the contrast audit skips them. */
         position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      #mk-ch-box {
+        flex: none; /* max-content width, clamped by max-width; never shrunk */
         font-family: var(--mk-font);
         font-weight: 500;
         letter-spacing: -0.015em;
@@ -79,7 +91,9 @@ import { InstallCommand } from "/snippets/install-command.jsx";
       data-width="1920"
       data-height="1080"
     >
-      <div id="mk-ch-box" data-layout-allow-occlusion></div>
+      <div id="mk-ch-center">
+        <div id="mk-ch-box" data-layout-allow-occlusion></div>
+      </div>
       <div
         id="mk-ch-drv"
         class="clip"
@@ -103,7 +117,9 @@ import { InstallCommand } from "/snippets/install-command.jsx";
           fontSize: 60,
           lineHeight: 1.3,
           maxWidth: 700, // px; sentence wraps inside this
-          x: 1030, // box left edge; null = centered horizontally
+          x: 1030, // box left edge; null = centered horizontally. Keep x + maxWidth <= 1920:
+          //         the box never shrinks (flex: none), so past the frame edge it is clipped
+          //         by the root's overflow instead of wrapping earlier.
           y: null, // box top edge; null = centered vertically
           align: "left",
           sweep: { start: 1.2, end: 6.2 }, // block-local seconds, linear
@@ -136,12 +152,19 @@ import { InstallCommand } from "/snippets/install-command.jsx";
           wordEls.push(span);
         });
 
-        /* position (measure after building) */
-        var rect = box.getBoundingClientRect();
-        box.style.left =
-          (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
-        box.style.top =
-          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) : CONFIG.y) + "px";
+        /* position: #mk-ch-center centres the box with flex (no measurement, so the
+           placement does not depend on font timing). A non-null CONFIG.x / CONFIG.y
+           switches that axis to an edge offset: the box keeps its content width
+           (clamped by maxWidth) and is pushed from the frame edge by a margin. */
+        var center = document.getElementById("mk-ch-center");
+        if (CONFIG.x !== null) {
+          center.style.justifyContent = "flex-start";
+          box.style.marginLeft = CONFIG.x + "px";
+        }
+        if (CONFIG.y !== null) {
+          center.style.alignItems = "flex-start";
+          box.style.marginTop = CONFIG.y + "px";
+        }
 
         /* state proxy: GSAP animates st.p, render derives every word color from it */
         var st = { p: 0 };
@@ -156,6 +179,9 @@ import { InstallCommand } from "/snippets/install-command.jsx";
 
         var tl = gsap.timeline({ paused: true });
 
+        /* entrance / exit motion stays a GSAP transform on the box itself: the box
+           carries no CSS transform (centring is flex on the parent), so there is
+           nothing for the tween to fight. */
         if (CONFIG.animationIn) {
           gsap.set(box, { opacity: 0, y: 24 });
           tl.to(box, { opacity: 1, y: 0, duration: 0.7, ease: "power3.out" }, 0.3);

docs/catalog/blocks/spain-map.mdx

@@ -18,7 +18,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   compositionSrc="compositions/spain-map.html"
   title="Spain Map"
   variables={[]}
-  meta={{"duration":12,"width":1920,"height":1080,"category":"Data","badge":"Stable","codeLines":393}}
+  meta={{"duration":12,"width":1920,"height":1080,"category":"Data","badge":"Stable","codeLines":397}}
   attribution={{"path":"registry/blocks/spain-map","tags":["data","map","geography","spain","europe","choropleth"]}}
   hasCode
   rawUrl="https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/spain-map/spain-map.html"
@@ -40,7 +40,11 @@ import { InstallCommand } from "/snippets/install-command.jsx";
       rel="stylesheet"
     />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"
+      integrity="sha384-CjloA8y00+1SDAUkjs099PVfnY2KmDC2BZnws9kh8D/lX1s46w6EPhpXdqMfjK6i"
+      crossorigin="anonymous"
+    ></script>
     <script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
     <style>
       * {

docs/catalog/blocks/us-map-bubble.mdx

@@ -18,7 +18,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   compositionSrc="compositions/us-map-bubble.html"
   title="US Bubble Map"
   variables={[]}
-  meta={{"duration":12,"width":1920,"height":1080,"category":"Data","badge":"Stable","codeLines":479}}
+  meta={{"duration":12,"width":1920,"height":1080,"category":"Data","badge":"Stable","codeLines":483}}
   attribution={{"path":"registry/blocks/us-map-bubble","tags":["data","map","geography","usa","bubble","cities"]}}
   hasCode
   rawUrl="https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/us-map-bubble/us-map-bubble.html"
@@ -40,7 +40,11 @@ import { InstallCommand } from "/snippets/install-command.jsx";
       rel="stylesheet"
     />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"
+      integrity="sha384-CjloA8y00+1SDAUkjs099PVfnY2KmDC2BZnws9kh8D/lX1s46w6EPhpXdqMfjK6i"
+      crossorigin="anonymous"
+    ></script>
     <script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
     <style>
       * {
@@ -194,7 +198,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
 
       <script>
         (function () {
-          var US_TOPO_URL = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";
+          var US_TOPO_URL = "https://cdn.jsdelivr.net/npm/us-atlas@3.0.1/states-10m.json";
 
           var cities = [
             { name: "New York", lat: 40.7128, lon: -74.006, pop: 8300000 },

docs/catalog/blocks/us-map-flow.mdx

@@ -18,7 +18,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   compositionSrc="compositions/us-map-flow.html"
   title="US Flow Map"
   variables={[]}
-  meta={{"duration":12,"width":1920,"height":1080,"category":"Data","badge":"Stable","codeLines":429}}
+  meta={{"duration":12,"width":1920,"height":1080,"category":"Data","badge":"Stable","codeLines":434}}
   attribution={{"path":"registry/blocks/us-map-flow","tags":["data","map","geography","usa","flow","connections","arcs"]}}
   hasCode
   rawUrl="https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/us-map-flow/us-map-flow.html"
@@ -40,7 +40,11 @@ import { InstallCommand } from "/snippets/install-command.jsx";
       rel="stylesheet"
     />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"
+      integrity="sha384-CjloA8y00+1SDAUkjs099PVfnY2KmDC2BZnws9kh8D/lX1s46w6EPhpXdqMfjK6i"
+      crossorigin="anonymous"
+    ></script>
     <script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
     <style>
       * {
@@ -267,7 +271,8 @@ import { InstallCommand } from "/snippets/install-command.jsx";
           }
 
           /* --- Load topology and render states --- */
-          d3.json("https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json").then(function (us) {
+          var US_TOPO_URL = "https://cdn.jsdelivr.net/npm/us-atlas@3.0.1/states-10m.json";
+          d3.json(US_TOPO_URL).then(function (us) {
             var states = topojson.feature(us, us.objects.states).features;
 
             states.forEach(function (feature) {

docs/catalog/blocks/us-map.mdx

@@ -18,7 +18,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   compositionSrc="compositions/us-map.html"
   title="US Map"
   variables={[]}
-  meta={{"duration":12,"width":1920,"height":1080,"category":"Data","badge":"Stable","codeLines":402}}
+  meta={{"duration":12,"width":1920,"height":1080,"category":"Data","badge":"Stable","codeLines":406}}
   attribution={{"path":"registry/blocks/us-map","tags":["data","map","geography","usa","choropleth"]}}
   hasCode
   rawUrl="https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/us-map/us-map.html"
@@ -40,7 +40,11 @@ import { InstallCommand } from "/snippets/install-command.jsx";
       rel="stylesheet"
     />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"
+      integrity="sha384-CjloA8y00+1SDAUkjs099PVfnY2KmDC2BZnws9kh8D/lX1s46w6EPhpXdqMfjK6i"
+      crossorigin="anonymous"
+    ></script>
     <script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
     <style>
       * {
@@ -187,7 +191,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
 
       <script>
         (function () {
-          const US_TOPO_URL = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";
+          const US_TOPO_URL = "https://cdn.jsdelivr.net/npm/us-atlas@3.0.1/states-10m.json";
 
           const stateData = {
             "01": { name: "Alabama", abbr: "AL", density: 99.2 },

docs/catalog/blocks/world-map.mdx

@@ -18,7 +18,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   compositionSrc="compositions/world-map.html"
   title="World Map"
   variables={[]}
-  meta={{"duration":14,"width":1920,"height":1080,"category":"Data","badge":"Stable","codeLines":435}}
+  meta={{"duration":14,"width":1920,"height":1080,"category":"Data","badge":"Stable","codeLines":439}}
   attribution={{"path":"registry/blocks/world-map","tags":["data","map","geography","world","choropleth"]}}
   hasCode
   rawUrl="https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/world-map/world-map.html"
@@ -40,7 +40,11 @@ import { InstallCommand } from "/snippets/install-command.jsx";
       rel="stylesheet"
     />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"
+      integrity="sha384-CjloA8y00+1SDAUkjs099PVfnY2KmDC2BZnws9kh8D/lX1s46w6EPhpXdqMfjK6i"
+      crossorigin="anonymous"
+    ></script>
     <script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
     <style>
       * {
@@ -307,7 +311,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
         var tooltipEl = document.querySelector("#world-map .tooltip");
 
         /* Fetch topology and render countries */
-        d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json").then(
+        d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/countries-110m.json").then(
           function (world) {
             var countries = topojson.feature(world, world.objects.countries).features;
 

docs/catalog/components/camera-scan-gate.mdx

@@ -17,7 +17,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   compositionId="camera-scan-gate"
   compositionSrc="compositions/components/camera-scan-gate.html"
   title="Camera Scan Gate"
-  variables={[{"id":"scanColor","type":"string","role":"style","label":"Scan color","description":"Any CSS color value used by the scan line and recognition glow.","default":"var(--brand)"},{"id":"targetLabel","type":"string","role":"content","label":"Target label","description":"Confirmation label revealed at recognition lock. Blank hides the line.","default":"Verified"},{"id":"sweepSpeed","type":"number","role":"timing","label":"Sweep speed","description":"Speed multiplier for the scan sweep phase only.","default":1,"min":0.8,"max":1.6,"step":0.1,"unit":"x"}]}
+  variables={[{"id":"scanColor","type":"string","role":"style","label":"Scan color","description":"Any CSS color value used by the scan line and recognition glow.","default":"var(--brand, #22c55e)"},{"id":"targetLabel","type":"string","role":"content","label":"Target label","description":"Confirmation label revealed at recognition lock. Blank hides the line.","default":"Verified"},{"id":"sweepSpeed","type":"number","role":"timing","label":"Sweep speed","description":"Speed multiplier for the scan sweep phase only.","default":1,"min":0.8,"max":1.6,"step":0.1,"unit":"x"}]}
   meta={{"category":"Camera","badge":"Stable","codeLines":522}}
   attribution={{"path":"registry/components/camera-scan-gate","tags":["prop","ui-props","camera","qr","scan","recognition","interaction","demonstrate"]}}
   hasCode
@@ -44,7 +44,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   it for passive camera decoration or a generic loading state.
 
   Variables (declared in data-composition-variables below):
-    - scanColor (string, default "var(--brand)"): any CSS color value used by
+    - scanColor (string, default "var(--brand, #22c55e)"): any CSS color value used by
       the scan line, lock brackets, and confirmation glow.
     - targetLabel (string, default "Verified"): label revealed at lock. Empty
       string hides the label line entirely.
@@ -84,7 +84,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
 <html
   lang="en"
   data-composition-variables='[
-    { "id": "scanColor", "type": "string", "role": "style", "label": "Scan color", "description": "Any CSS color value used by the scan line and recognition glow.", "default": "var(--brand)" },
+    { "id": "scanColor", "type": "string", "role": "style", "label": "Scan color", "description": "Any CSS color value used by the scan line and recognition glow.", "default": "var(--brand, #22c55e)" },
     { "id": "targetLabel", "type": "string", "role": "content", "label": "Target label", "description": "Confirmation label revealed at recognition lock. Blank hides the line.", "default": "Verified" },
     { "id": "sweepSpeed", "type": "number", "role": "timing", "label": "Sweep speed", "description": "Speed multiplier for the scan sweep phase only.", "default": 1, "min": 0.8, "max": 1.6, "step": 0.1, "unit": "x" }
   ]'
@@ -398,7 +398,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
                 : {};
             var scanColor =
               vars.scanColor == null || String(vars.scanColor).trim() === ""
-                ? "var(--brand)"
+                ? "var(--brand, #22c55e)"
                 : String(vars.scanColor);
             var targetLabel = vars.targetLabel == null ? "" : String(vars.targetLabel);
             var rawSweepSpeed = Number(vars.sweepSpeed);
@@ -579,7 +579,7 @@ want to change on the element:
 
 | Variable | Default | Accepts | What it does |
 | --- | --- | --- | --- |
-| `scanColor` | `var(--brand)` | string | Any CSS color value used by the scan line and recognition glow. |
+| `scanColor` | `var(--brand, #22c55e)` | string | Any CSS color value used by the scan line and recognition glow. |
 | `targetLabel` | `Verified` | string | Confirmation label revealed at recognition lock. Blank hides the line. |
 | `sweepSpeed` | `1` | 0.8x to 1.6x, step 0.1x | Speed multiplier for the scan sweep phase only. |
 
@@ -590,7 +590,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 <div
   data-composition-id="camera-scan-gate"
   data-composition-src="compositions/components/camera-scan-gate.html"
-  data-variable-values='{"scanColor":"var(--brand)","targetLabel":"Verified","sweepSpeed":1}'
+  data-variable-values='{"scanColor":"var(--brand, #22c55e)","targetLabel":"Verified","sweepSpeed":1}'
 ></div>
 ```
 

docs/catalog/components/caption-clip-wipe.mdx

@@ -18,7 +18,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   compositionSrc="compositions/components/caption-clip-wipe.html"
   title="Clip Wipe"
   variables={[]}
-  meta={{"category":"Captions","badge":"Stable","codeLines":226}}
+  meta={{"category":"Captions","badge":"Stable","codeLines":227}}
   attribution={{"path":"registry/components/caption-clip-wipe","tags":["captions","caption-style","wipe","clip-path","reveal"]}}
   hasCode
   rawUrl="https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/components/caption-clip-wipe/caption-clip-wipe.html"
@@ -182,7 +182,8 @@ import { InstallCommand } from "/snippets/install-command.jsx";
         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 nextStart =
+            gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : Infinity;
           var gEnd = Math.min(WORDS[we].end + 0.5, nextStart - 0.05);
           return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
         });

docs/catalog/components/caption-glitch-rgb.mdx

@@ -233,7 +233,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
           var ws = pair[0];
           var we = pair[1];
           var nextStart =
-            gi + 1 < RAW_GROUPS.length ? TRANSCRIPT[RAW_GROUPS[gi + 1][0]].start : 8.0;
+            gi + 1 < RAW_GROUPS.length ? TRANSCRIPT[RAW_GROUPS[gi + 1][0]].start : Infinity;
           var end = Math.min(TRANSCRIPT[we].end + 0.24, nextStart - 0.04);
           return { wordStart: ws, wordEnd: we, start: TRANSCRIPT[ws].start, end: end };
         });