feat(skills): product-launch-video skill + consolidate motion knowledge into hyperframes-animation (#1745)

* feat(skills): product-launch-video + consolidate motion knowledge into hyperframes-animation - Add the product-launch-video skill: shot-sequence architecture where each visual frame is a time-coded shot sequence picked from a blueprint menu and paced to the voiceover (anti-PowerPoint). Includes the frame-worker sub-agent, story/visual/motion-design references, and audio/captions/transitions/ stage-assets/assemble-index scripts. - Consolidate motion knowledge in hyperframes-animation as the single source of truth: promote the updated atomic rules (31 -> 36) and rename product-launch- video's archetypes into hyperframes-animation blueprints (13 -> 15, replacing the old set). product-launch-video, faceless-explainer, and pr-to-video now reference them via ../hyperframes-animation/{rules-index,blueprints-index}.md and the rules/blueprints dirs. Fixes the discrete-text-sequence broken links; blueprints no longer ship per-id runnable examples, so example references in the consumers were dropped. - Default HeyGen TTS voice to Marcia (deterministic; was the API's first English voice, which drifts on catalog re-sort). Override with --voice. - assemble-index pre-assembly frame guards: auto-repair a sub-comp root missing canvas dims; hard-fail on <video>/<audio> inside a sub-comp; hard-fail on a timed non-root element missing class="clip" or overlapping same-track clips. - Lint/CLI: lint media inside sub-compositions as an error; stop false-positive caption layout/lint findings; contrast/layout-audit skip elements hidden by an invisible ancestor. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(skills): clear CodeQL alerts in assemble-index.mjs - script/style blanking regex now matches closing tags with trailing whitespace (</script >, </style >) — js/bad-tag-filter (high). - drop the existsSync precheck before reading/repairing a frame file; read directly and handle ENOENT, removing the check->write TOCTOU window — js/file-system-race (high). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-09-04 07:19:52 +00:00 · 2026-06-27 02:51:35 +08:00
parent 413d8187fd
commit 05af482f22
67 changed files with 3838 additions and 3006 deletions
@@ -88,6 +88,25 @@ window.__contrastAudit = async function (imgBase64, time) {
    var cs = getComputedStyle(el);
    if (cs.visibility === "hidden" || cs.display === "none") continue;
    if (parseFloat(cs.opacity) <= 0.01) continue;
+    // Also skip when an ANCESTOR is effectively invisible (opacity≈0 / hidden / display:none).
+    // Karaoke captions keep every word at opacity 1 but toggle the GROUP's opacity per beat,
+    // so an inactive word's OWN opacity is 1 — only an ancestor reveals it's hidden. Without
+    // this, the hidden caption words flood the audit with false ~1:1 contrast warnings.
+    var anc = el.parentElement,
+      ancHidden = false;
+    while (anc && anc !== document.body) {
+      var acs = getComputedStyle(anc);
+      if (
+        acs.visibility === "hidden" ||
+        acs.display === "none" ||
+        parseFloat(acs.opacity) <= 0.01
+      ) {
+        ancHidden = true;
+        break;
+      }
+      anc = anc.parentElement;
+    }
+    if (ancHidden) continue;
    var rect = el.getBoundingClientRect();
    if (rect.width < 8 || rect.height < 8) continue;
    if (rect.right <= 0 || rect.bottom <= 0 || rect.left >= w || rect.top >= h) continue;
@@ -27,14 +27,18 @@
    return Math.round(value * 100) / 100;
  }

-  function overflowFor(subject, container, tolerance) {
+  function overflowFor(subject, container, tolerance, vTolerance) {
+    // Horizontal axis uses `tolerance`; vertical axis uses `vTolerance` (defaults to the same).
+    // A separate vertical tolerance lets text overflow checks absorb glyph ink that exceeds a
+    // snug line-height — see textOverflowIssues.
+    if (vTolerance == null) vTolerance = tolerance;
    const overflow = {};
    if (subject.left < container.left - tolerance)
      overflow.left = round(container.left - subject.left);
    if (subject.right > container.right + tolerance)
      overflow.right = round(subject.right - container.right);
-    if (subject.top < container.top - tolerance) overflow.top = round(container.top - subject.top);
-    if (subject.bottom > container.bottom + tolerance)
+    if (subject.top < container.top - vTolerance) overflow.top = round(container.top - subject.top);
+    if (subject.bottom > container.bottom + vTolerance)
      overflow.bottom = round(subject.bottom - container.bottom);
    return Object.keys(overflow).length > 0 ? overflow : null;
  }
@@ -319,9 +323,22 @@

    const container = nearestConstraint(element, root, rootRect);
    const containerRect = container === root ? rootRect : toRect(container.getBoundingClientRect());
-    const containerOverflow = overflowFor(textRect, containerRect, tolerance);
+    // Glyph ink (ascenders / descenders / accents / heavy display faces) routinely exceeds a
+    // snug line-height box by a few px, proportional to font size. When the constraining box
+    // does NOT clip, that vertical spill is normal typography — it shows in the padding, nothing
+    // is hidden — not a layout defect (it false-flagged caption words). Allow a font-metric
+    // vertical tolerance there; keep it tight when the box actually clips (a real cut-off) and
+    // always tight horizontally (too-wide text is a real wrap/legibility issue).
+    const elementStyle = getComputedStyle(element);
+    const containerClips = clipsOverflow(
+      container === root ? getComputedStyle(root) : getComputedStyle(container),
+    );
+    const verticalTolerance = containerClips
+      ? tolerance
+      : Math.max(tolerance, parsePx(elementStyle.fontSize) * 0.2);
+    const containerOverflow = overflowFor(textRect, containerRect, tolerance, verticalTolerance);
    if (containerOverflow && !hasAllowOverflowFlag(element)) {
-      const style = getComputedStyle(element);
+      const style = elementStyle;
      issues.push({
        code: "text_box_overflow",
        severity: "error",
@@ -98,6 +98,42 @@ describe("layout-audit.browser", () => {

    expect(runAudit()).toEqual([]);
  });
+
+  it("does not flag glyph-ink vertical spill within the font-metric band on a non-clipping box", () => {
+    // A painted, non-clipping caption-word-like box whose glyph ink (text rect) exceeds its snug
+    // line-height box by a few px vertically — normal typography, nothing is clipped. (fontSize
+    // 36 → vertical tolerance ~7.2px; the ink spills ~5px each side, well within it.)
+    document.body.innerHTML = `
+      <div id="root" data-composition-id="main" data-width="640" data-height="360">
+        <div id="bubble"><div id="headline">crews,</div></div>
+      </div>
+    `;
+    installGeometry({
+      root: rect({ left: 0, top: 0, width: 640, height: 360 }),
+      bubble: rect({ left: 80, top: 120, width: 400, height: 80 }),
+      text: rect({ left: 100, top: 115, width: 300, height: 90 }),
+    });
+    installAuditScript();
+
+    expect(runAudit().some((issue) => issue.code === "text_box_overflow")).toBe(false);
+  });
+
+  it("still flags vertical text overflow beyond the font-metric band", () => {
+    // Ink is 40px / 80px beyond the box — far past the ~7px font-metric band: a real overflow.
+    document.body.innerHTML = `
+      <div id="root" data-composition-id="main" data-width="640" data-height="360">
+        <div id="bubble"><div id="headline">two crammed lines</div></div>
+      </div>
+    `;
+    installGeometry({
+      root: rect({ left: 0, top: 0, width: 640, height: 360 }),
+      bubble: rect({ left: 80, top: 120, width: 400, height: 80 }),
+      text: rect({ left: 100, top: 80, width: 300, height: 200 }),
+    });
+    installAuditScript();
+
+    expect(runAudit().some((issue) => issue.code === "text_box_overflow")).toBe(true);
+  });
 });

 describe("layout-audit.browser content overlap", () => {