@hyperframes/producer 0.2.2-alpha.4 → 0.2.3-alpha.1

package/dist/public-server.js

@@ -108452,6 +108452,34 @@ function getSingleClassSelector(selector) {
   const match2 = selector.trim().match(/^\.(?<name>[A-Za-z0-9_-]+)$/);
   return match2?.groups?.name || null;
 }
+function cssTransformToGsapProps(cssTransform) {
+  const parts = [];
+  const translateMatch = cssTransform.match(
+    /translate\(\s*(-?[\d.]+)(%|px)?\s*,\s*(-?[\d.]+)(%|px)?\s*\)/
+  );
+  if (translateMatch) {
+    const [, xVal, xUnit, yVal, yUnit] = translateMatch;
+    if (xUnit === "%") parts.push(`xPercent: ${xVal}`);
+    else parts.push(`x: ${xVal}`);
+    if (yUnit === "%") parts.push(`yPercent: ${yVal}`);
+    else parts.push(`y: ${yVal}`);
+  }
+  const txMatch = cssTransform.match(/translateX\(\s*(-?[\d.]+)(%|px)?\s*\)/);
+  if (txMatch) {
+    const [, val, unit] = txMatch;
+    parts.push(unit === "%" ? `xPercent: ${val}` : `x: ${val}`);
+  }
+  const tyMatch = cssTransform.match(/translateY\(\s*(-?[\d.]+)(%|px)?\s*\)/);
+  if (tyMatch) {
+    const [, val, unit] = tyMatch;
+    parts.push(unit === "%" ? `yPercent: ${val}` : `y: ${val}`);
+  }
+  const scaleMatch = cssTransform.match(/scale\(\s*([\d.]+)\s*\)/);
+  if (scaleMatch) {
+    parts.push(`scale: ${scaleMatch[1]}`);
+  }
+  return parts.length > 0 ? parts.join(", ") : null;
+}
 var gsapRules = [
   // overlapping_gsap_tweens + gsap_animates_clip_element + unscoped_gsap_selector
   ({ tags, scripts, rootCompositionId }) => {
@@ -108509,14 +108537,18 @@ ${right2.raw}`)
         const sel = win.targetSelector;
         const clipInfo = clipIds.get(sel) || clipClasses.get(sel);
         if (!clipInfo) continue;
+        const conflictingProps = win.properties.filter(
+          (p) => p === "visibility" || p === "display"
+        );
+        if (conflictingProps.length === 0) continue;
         const elDesc = `<${clipInfo.tag}${clipInfo.id ? ` id="${clipInfo.id}"` : ""} class="${clipInfo.classes}">`;
         findings.push({
           code: "gsap_animates_clip_element",
           severity: "error",
-          message: `GSAP animation targets a clip element. Selector "${sel}" resolves to element ${elDesc}. The framework manages clip visibility \u2014 animate an inner wrapper instead.`,
+          message: `GSAP animation sets ${conflictingProps.join(", ")} on a clip element. Selector "${sel}" resolves to element ${elDesc}. The framework manages clip visibility via ${conflictingProps.join("/")} \u2014 do not animate these properties on clip elements.`,
           selector: sel,
           elementId: clipInfo.id || void 0,
-          fixHint: "Wrap content in a child <div> and target that with GSAP.",
+          fixHint: "Remove the visibility/display tween, or move the content into a child <div> and target that instead.",
           snippet: truncateSnippet(win.raw)
         });
       }
@@ -108581,12 +108613,14 @@ ${right2.raw}`)
       }
       for (const [sel, { cssTransform, props, raw: raw2 }] of conflicts) {
         const propList = [...props].join("/");
+        const gsapEquivalent = cssTransformToGsapProps(cssTransform);
+        const fixHint = gsapEquivalent ? `Remove \`transform: ${cssTransform}\` from CSS and replace with GSAP properties: ${gsapEquivalent}. Example: tl.fromTo('${sel}', { ${gsapEquivalent} }, { ${gsapEquivalent}, ...yourAnimation }). tl.fromTo is exempt from this rule.` : `Remove the transform from CSS and use tl.fromTo('${sel}', { xPercent: -50, x: -1000 }, { xPercent: -50, x: 0 }) so GSAP owns the full transform state. tl.fromTo is exempt from this rule.`;
         findings.push({
           code: "gsap_css_transform_conflict",
           severity: "warning",
           message: `"${sel}" has CSS \`transform: ${cssTransform}\` and a GSAP tween animates ${propList}. GSAP will overwrite the full CSS transform, discarding any translateX(-50%) centering or CSS scale value.`,
           selector: sel,
-          fixHint: `Remove the transform from CSS and use tl.fromTo('${sel}', { xPercent: -50, x: -1000 }, { xPercent: -50, x: 0 }) so GSAP owns the full transform state. tl.fromTo is exempt from this rule.`,
+          fixHint,
           snippet: truncateSnippet(raw2)
         });
       }
@@ -108613,6 +108647,62 @@ ${right2.raw}`)
         fixHint: 'Add <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script> before your animation script.'
       }
     ];
+  },
+  // audio_reactive_single_tween_per_group
+  ({ scripts, styles }) => {
+    const findings = [];
+    const isCaptionFile = styles.some((s) => /\.caption[-_]?(?:group|word)/i.test(s.content));
+    if (!isCaptionFile) return findings;
+    for (const script of scripts) {
+      const content = script.content;
+      const hasAudioData = /AUDIO|audio[-_]?data|bands\[/.test(content);
+      if (!hasAudioData) continue;
+      const hasCaptionLoop = /forEach/.test(content) && /caption|group|cg-/.test(content);
+      if (!hasCaptionLoop) continue;
+      const hasInnerSamplingLoop = /for\s*\(\s*var\s+\w+\s*=\s*group\.start/.test(content) || /for\s*\(\s*var\s+at\s*=/.test(content) || /while\s*\(\s*\w+\s*<\s*group\.end/.test(content);
+      if (!hasInnerSamplingLoop) {
+        const hasPeakTween = /peak(?:Bass|Treble|Energy)/.test(content) && /group\.start/.test(content);
+        if (hasPeakTween) {
+          findings.push({
+            code: "audio_reactive_single_tween_per_group",
+            severity: "warning",
+            message: "Audio-reactive captions use a single tween per group based on peak values. This sets one static value at group.start \u2014 not perceptible as audio reactivity.",
+            fixHint: "Sample audio data at 100-200ms intervals throughout each group's lifetime (for loop from group.start to group.end) and create a tween at each sample point for visible pulsing."
+          });
+        }
+      }
+    }
+    return findings;
+  },
+  // scene_layer_missing_visibility_kill
+  ({ scripts, tags }) => {
+    const findings = [];
+    const sceneElements = tags.filter((t) => {
+      const id = readAttr(t.raw, "id") || "";
+      return /^scene\d+$/i.test(id);
+    });
+    if (sceneElements.length < 2) return findings;
+    for (const script of scripts) {
+      const content = script.content;
+      for (const tag of sceneElements) {
+        const id = readAttr(tag.raw, "id") || "";
+        const exitPattern = new RegExp(`["']#${id}["'][^)]*opacity\\s*:\\s*0`);
+        const hasExit = exitPattern.test(content);
+        if (!hasExit) continue;
+        const killPattern = new RegExp(`["']#${id}["'][^)]*visibility\\s*:\\s*["']hidden["']`);
+        const hasKill = killPattern.test(content);
+        if (!hasKill) {
+          findings.push({
+            code: "scene_layer_missing_visibility_kill",
+            severity: "warning",
+            elementId: id,
+            message: `Scene layer "#${id}" exits via opacity tween but has no visibility: hidden hard kill. When scrubbing or when tweens conflict, the scene may remain partially visible and overlap the next scene.`,
+            fixHint: `Add \`tl.set("#${id}", { visibility: "hidden" }, <exit-end-time>)\` after the scene's exit tweens.`
+          });
+        }
+      }
+    }
+    return findings;
   }
 ];
 
@@ -108720,6 +108810,80 @@ var captionRules = [
       }
     }
     return findings;
+  },
+  // caption_overflow_clips_scaled_words
+  ({ styles, scripts }) => {
+    const findings = [];
+    const hasScaledWords = scripts.some(
+      (s) => /scale\s*:\s*1\.[2-9]/.test(s.content) && /caption|word|cg-/.test(s.content)
+    );
+    if (!hasScaledWords) return findings;
+    for (const style of styles) {
+      const captionBlocks = style.content.matchAll(
+        /(\.caption[-_]?(?:group|container)|#caption[-_]?(?:layer|container))\s*\{([^}]+)\}/gi
+      );
+      for (const [, selector, body] of captionBlocks) {
+        if (!body) continue;
+        if (/overflow\s*:\s*hidden/i.test(body)) {
+          findings.push({
+            code: "caption_overflow_clips_scaled_words",
+            severity: "warning",
+            selector: (selector ?? "").trim(),
+            message: `"${(selector ?? "").trim()}" has overflow: hidden but GSAP scales caption words above 1.0x. Scaled emphasis words and their glow effects will be clipped.`,
+            fixHint: "Use overflow: visible on caption containers. Rely on fitTextFontSize with reduced maxWidth to prevent overflow instead."
+          });
+        }
+      }
+    }
+    return findings;
+  },
+  // caption_textshadow_on_group_container
+  ({ scripts, styles }) => {
+    const findings = [];
+    const isCaptionFile = styles.some((s) => /\.caption[-_]?(?:group|word)/i.test(s.content));
+    if (!isCaptionFile) return findings;
+    for (const script of scripts) {
+      const groupShadowPattern = /\.to\s*\(\s*(?:div|groupEl|el|captionEl|document\.getElementById\s*\(\s*["']cg-)\s*[^,]*,\s*\{[^}]*textShadow/g;
+      const selectorShadowPattern = /\.to\s*\(\s*["'](?:#cg-\d+|\.caption[-_]?group)["']\s*,\s*\{[^}]*textShadow/g;
+      if (groupShadowPattern.test(script.content) || selectorShadowPattern.test(script.content)) {
+        findings.push({
+          code: "caption_textshadow_on_group_container",
+          severity: "warning",
+          message: "textShadow is tweened on a caption group container. When children have semi-transparent color (e.g., inactive karaoke words at rgba opacity), the glow renders as a visible rectangle behind the entire group.",
+          fixHint: "Apply textShadow to individual active word elements instead of the group container. Use scale on the group for bass-reactive pulsing."
+        });
+      }
+    }
+    return findings;
+  },
+  // caption_fittext_scale_mismatch
+  ({ scripts }) => {
+    const findings = [];
+    for (const script of scripts) {
+      const content = script.content;
+      const fitTextMatch = content.match(/fitTextFontSize\s*\([^)]*maxWidth\s*:\s*(\d+)/);
+      if (!fitTextMatch) continue;
+      const maxWidth = parseInt(fitTextMatch[1] ?? "0", 10);
+      if (!maxWidth) continue;
+      const scaleMatches = [...content.matchAll(/scale\s*:\s*(1\.\d+)/g)];
+      const captionContext = /caption|word|cg-|karaoke/i.test(content);
+      if (!captionContext || scaleMatches.length === 0) continue;
+      let maxScale = 1;
+      for (const m of scaleMatches) {
+        const val = parseFloat(m[1] ?? "1");
+        if (val > maxScale) maxScale = val;
+      }
+      const effectiveWidth = maxWidth * maxScale;
+      if (effectiveWidth > 1760) {
+        findings.push({
+          code: "caption_fittext_scale_mismatch",
+          severity: "warning",
+          message: `fitTextFontSize uses maxWidth: ${maxWidth}px but emphasis words scale up to ${maxScale}x. Effective width ${Math.round(effectiveWidth)}px may overflow the composition (1920px minus margins).`,
+          fixHint: `Reduce maxWidth to ${Math.floor(1700 / maxScale)}px to leave headroom for scaled emphasis words.`
+        });
+      }
+    }
+    return findings;
   }
 ];
 
@@ -109299,7 +109463,8 @@ async function initializeSession(session) {
     const type = msg.type();
     const text = msg.text();
     const isFontLoadError = type === "error" && text.startsWith("Failed to load resource") && /fonts\.googleapis|fonts\.gstatic|\.woff2?(\b|$)/i.test(text);
-    const prefix = type === "error" ? "[Browser:ERROR]" : type === "warn" ? "[Browser:WARN]" : "[Browser]";
+    const isResourceLoadError = type === "error" && text.startsWith("Failed to load resource") && !isFontLoadError;
+    const prefix = isResourceLoadError ? "[non-blocking]" : type === "error" ? "[Browser:ERROR]" : type === "warn" ? "[Browser:WARN]" : "[Browser]";
     if (!isFontLoadError) {
       console.log(`${prefix} ${text}`);
     }
@@ -111932,6 +112097,23 @@ function buildFontFaceCss(requestedFamilies) {
     unresolved: unresolved.sort()
   };
 }
+function warnUnresolvedFonts(unresolved) {
+  const mapped = Object.entries(FONT_ALIASES).reduce((acc, [alias, canonical]) => {
+    const display = alias === canonical ? alias : `${alias} \u2192 ${canonical}`;
+    if (!acc.includes(display)) acc.push(display);
+    return acc;
+  }, []).sort();
+  console.warn(
+    `[Compiler] No deterministic font mapping for: ${unresolved.join(", ")}
+  Mapped fonts: ${mapped.join(", ")}
+  To fix, pick one:
+    1. Use a mapped font name instead (see list above)
+    2. Add a @font-face block in your HTML with a local or hosted font file
+    3. Install the font locally on the render machine (Docker: add to Dockerfile)
+    4. Add an alias to FONT_ALIASES in deterministicFonts.ts (for contributors)
+  Docs: https://hyperframes.heygen.com/docs/fonts`
+  );
+}
 function injectDeterministicFontFaces(html) {
   const existingFaces = extractExistingFontFaces(html);
   const requestedFamilies = extractRequestedFontFamilies(html);
@@ -111947,7 +112129,7 @@ function injectDeterministicFontFaces(html) {
   const { css, unresolved } = buildFontFaceCss(pendingFamilies);
   if (!css) {
     if (unresolved.length > 0) {
-      console.warn(`[Compiler] No deterministic font mapping for: ${unresolved.join(", ")}`);
+      warnUnresolvedFonts(unresolved);
     }
     return html;
   }
@@ -111964,7 +112146,7 @@ function injectDeterministicFontFaces(html) {
     `[Compiler] Injected deterministic @font-face rules for ${pendingFamilies.size - unresolved.length} requested font families`
   );
   if (unresolved.length > 0) {
-    console.warn(`[Compiler] Unresolved font families left dynamic: ${unresolved.join(", ")}`);
+    warnUnresolvedFonts(unresolved);
   }
   return document3.toString();
 }