From d64050d41edbc13e56c512d4e81c6c560dde3950 Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Wed, 25 Mar 2026 16:22:11 -0700
Subject: [PATCH] fix(cli): add window.__timelines guard to all templates

The studio bundler doesn't always initialize window.__timelines
before template scripts run, causing "Cannot set properties of
undefined" errors. Add defensive guard to every template.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/cli/src/templates/play-mode/compositions/captions.html  | 1 +
 packages/cli/src/templates/play-mode/compositions/intro.html     | 1 +
 packages/cli/src/templates/play-mode/compositions/stats.html     | 1 +
 packages/cli/src/templates/swiss-grid/compositions/captions.html | 1 +
 packages/cli/src/templates/swiss-grid/compositions/graphics.html | 1 +
 packages/cli/src/templates/swiss-grid/compositions/intro.html    | 1 +
 packages/cli/src/templates/vignelli/compositions/captions.html   | 1 +
 packages/cli/src/templates/vignelli/compositions/overlays.html   | 1 +
 packages/cli/src/templates/vignelli/index.html                   | 1 +
 packages/cli/src/templates/warm-grain/compositions/captions.html | 1 +
 packages/cli/src/templates/warm-grain/compositions/graphics.html | 1 +
 packages/cli/src/templates/warm-grain/compositions/intro.html    | 1 +
 packages/cli/src/templates/warm-grain/index.html                 | 1 +
 13 files changed, 13 insertions(+)

diff --git a/packages/cli/src/templates/play-mode/compositions/captions.html b/packages/cli/src/templates/play-mode/compositions/captions.html
index f5b26127e3..e3b2290fae 100644
--- a/packages/cli/src/templates/play-mode/compositions/captions.html
+++ b/packages/cli/src/templates/play-mode/compositions/captions.html
@@ -150,6 +150,7 @@
           );
         });
 
+        window.__timelines = window.__timelines || {};
         window.__timelines["captions"] = tl;
       })();
     </script>
diff --git a/packages/cli/src/templates/play-mode/compositions/intro.html b/packages/cli/src/templates/play-mode/compositions/intro.html
index 67f3da4768..3c1388b435 100644
--- a/packages/cli/src/templates/play-mode/compositions/intro.html
+++ b/packages/cli/src/templates/play-mode/compositions/intro.html
@@ -99,6 +99,7 @@
           ease: "elastic.out(1, 0.3)",
         });
 
+        window.__timelines = window.__timelines || {};
         window.__timelines["intro"] = tl;
       })();
     </script>
diff --git a/packages/cli/src/templates/play-mode/compositions/stats.html b/packages/cli/src/templates/play-mode/compositions/stats.html
index 2496c74efc..af1bf31c34 100644
--- a/packages/cli/src/templates/play-mode/compositions/stats.html
+++ b/packages/cli/src/templates/play-mode/compositions/stats.html
@@ -375,6 +375,7 @@
           }
         });
 
+        window.__timelines = window.__timelines || {};
         window.__timelines["stats"] = tl;
       })();
     </script>
diff --git a/packages/cli/src/templates/swiss-grid/compositions/captions.html b/packages/cli/src/templates/swiss-grid/compositions/captions.html
index 198f31f88e..2a0641384f 100644
--- a/packages/cli/src/templates/swiss-grid/compositions/captions.html
+++ b/packages/cli/src/templates/swiss-grid/compositions/captions.html
@@ -97,6 +97,7 @@
         const tl = gsap.timeline({ paused: true });
 
         if (!TRANSCRIPT || TRANSCRIPT.length === 0) {
+          window.__timelines = window.__timelines || {};
           window.__timelines["captions"] = tl;
           return;
         }
diff --git a/packages/cli/src/templates/swiss-grid/compositions/graphics.html b/packages/cli/src/templates/swiss-grid/compositions/graphics.html
index 60bc7e48d0..b1e48eb211 100644
--- a/packages/cli/src/templates/swiss-grid/compositions/graphics.html
+++ b/packages/cli/src/templates/swiss-grid/compositions/graphics.html
@@ -199,6 +199,7 @@
           S3_END - SLIDE_DUR,
         );
 
+        window.__timelines = window.__timelines || {};
         window.__timelines["graphics"] = tl;
       })();
     </script>
diff --git a/packages/cli/src/templates/swiss-grid/compositions/intro.html b/packages/cli/src/templates/swiss-grid/compositions/intro.html
index 9f5881d373..168280faf4 100644
--- a/packages/cli/src/templates/swiss-grid/compositions/intro.html
+++ b/packages/cli/src/templates/swiss-grid/compositions/intro.html
@@ -123,6 +123,7 @@
           0.7,
         );
 
+        window.__timelines = window.__timelines || {};
         window.__timelines["intro"] = tl;
       })();
     </script>
diff --git a/packages/cli/src/templates/vignelli/compositions/captions.html b/packages/cli/src/templates/vignelli/compositions/captions.html
index 40a077d0ae..8d7af98718 100644
--- a/packages/cli/src/templates/vignelli/compositions/captions.html
+++ b/packages/cli/src/templates/vignelli/compositions/captions.html
@@ -168,6 +168,7 @@
           );
         });
 
+        window.__timelines = window.__timelines || {};
         window.__timelines["captions"] = tl;
       })();
     </script>
diff --git a/packages/cli/src/templates/vignelli/compositions/overlays.html b/packages/cli/src/templates/vignelli/compositions/overlays.html
index 535c74d4fd..25f04455e3 100644
--- a/packages/cli/src/templates/vignelli/compositions/overlays.html
+++ b/packages/cli/src/templates/vignelli/compositions/overlays.html
@@ -316,6 +316,7 @@
       );
       tl.from("#branding .logo-underline", { scaleX: 0, duration: 0.8, ease: "expo.out" }, 13.04);
 
+      window.__timelines = window.__timelines || {};
       window.__timelines["overlays"] = tl;
     </script>
   </div>
diff --git a/packages/cli/src/templates/vignelli/index.html b/packages/cli/src/templates/vignelli/index.html
index b9f153f52a..4d90800a5e 100644
--- a/packages/cli/src/templates/vignelli/index.html
+++ b/packages/cli/src/templates/vignelli/index.html
@@ -171,6 +171,7 @@
         tl.to("#a-roll-wrapper", { opacity: 1, duration: 0 }, 7.3);
         tl.to("#curtain-red", { left: "100%", duration: 0.4, ease: "power2.inOut" }, 7.3);
 
+        window.__timelines = window.__timelines || {};
         window.__timelines["main-comp"] = tl;
       </script>
     </div>
diff --git a/packages/cli/src/templates/warm-grain/compositions/captions.html b/packages/cli/src/templates/warm-grain/compositions/captions.html
index 1761d4a24f..fb0bb5469b 100644
--- a/packages/cli/src/templates/warm-grain/compositions/captions.html
+++ b/packages/cli/src/templates/warm-grain/compositions/captions.html
@@ -134,6 +134,7 @@
           );
         });
 
+        window.__timelines = window.__timelines || {};
         window.__timelines["captions"] = tl;
       })();
     </script>
diff --git a/packages/cli/src/templates/warm-grain/compositions/graphics.html b/packages/cli/src/templates/warm-grain/compositions/graphics.html
index 2e1bdea0a7..a0f0bf14e3 100644
--- a/packages/cli/src/templates/warm-grain/compositions/graphics.html
+++ b/packages/cli/src/templates/warm-grain/compositions/graphics.html
@@ -156,6 +156,7 @@
         // Hold until end (14s)
         tl.to("#moment-3", { opacity: 0, duration: 0.5, ease: "power2.in" }, 13.5);
 
+        window.__timelines = window.__timelines || {};
         window.__timelines["graphics"] = tl;
       })();
     </script>
diff --git a/packages/cli/src/templates/warm-grain/compositions/intro.html b/packages/cli/src/templates/warm-grain/compositions/intro.html
index 83e9c181cf..234f06150d 100644
--- a/packages/cli/src/templates/warm-grain/compositions/intro.html
+++ b/packages/cli/src/templates/warm-grain/compositions/intro.html
@@ -78,6 +78,7 @@
           1.8,
         );
 
+        window.__timelines = window.__timelines || {};
         window.__timelines["intro"] = tl;
       })();
     </script>
diff --git a/packages/cli/src/templates/warm-grain/index.html b/packages/cli/src/templates/warm-grain/index.html
index 3ba4b507ba..694556baa8 100644
--- a/packages/cli/src/templates/warm-grain/index.html
+++ b/packages/cli/src/templates/warm-grain/index.html
@@ -118,6 +118,7 @@
         <div class="grain-texture"></div>
         <script>
           const grainTl = gsap.timeline({ paused: true });
+          window.__timelines = window.__timelines || {};
           window.__timelines["grain-overlay"] = grainTl;
         </script>
       </div>