npm - hyperframes - Versions diffs - 0.7.8 → 0.7.10 - Mend

hyperframes 0.7.8 → 0.7.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/cli.js +148 -10
package/dist/studio/assets/{index-BSyZKYmH.js → index-CWTSv_j9.js} +99 -99
package/dist/studio/assets/{index-Dgeszckd.js → index-ClZvune4.js} +1 -1
package/dist/studio/assets/{index--lOAjFJl.js → index-TqAN2o6c.js} +1 -1
package/dist/studio/index.html +1 -1
package/dist/studio/index.js +16 -9
package/dist/studio/index.js.map +1 -1
package/package.json +1 -1

package/dist/cli.js CHANGED Viewed

@@ -50,7 +50,7 @@ var VERSION;
 var init_version = __esm({
   "src/version.ts"() {
     "use strict";
-    VERSION = true ? "0.7.8" : "0.0.0-dev";
+    VERSION = true ? "0.7.10" : "0.0.0-dev";
   }
 });
@@ -21074,6 +21074,10 @@ function resolveTimelinePositions(anims) {
   let cursor = 0;
   let prevStart = 0;
   for (const anim of anims) {
+    if (anim.method === "set" && anim.global) {
+      anim.resolvedStart = 0;
+      continue;
+    }
     const duration = anim.method === "set" ? 0 : anim.duration ?? GSAP_DEFAULT_DURATION;
     let start;
     if (anim.implicitPosition) {
@@ -25380,11 +25384,40 @@ function describeStudioElement(tag) {
   parts.push(">");
   return parts.join("");
 }
-var coreRules;
+function findCodeFenceLeak(headWithoutValidBlocks) {
+  return MARKDOWN_CODE_FENCE_PATTERN.exec(headWithoutValidBlocks)?.[0] ?? null;
+}
+function findOrphanCssLeak(headContent) {
+  const residualText = headContent.replace(HEAD_BLOCKS_TO_IGNORE_PATTERN, " ").replace(HTML_TAG_PATTERN, " ");
+  return ORPHAN_CSS_AT_RULE_PATTERN.exec(residualText)?.[0] ?? ORPHAN_CSS_RULE_PATTERN.exec(residualText)?.[0] ?? null;
+}
+function findStrayCloseLeak(headWithoutValidBlocks) {
+  return STRAY_HEAD_CLOSE_PATTERN.exec(headWithoutValidBlocks)?.[0] ?? null;
+}
+function findLeakedTextInHeadContent(headContent) {
+  const withoutValidBlocks = headContent.replace(HEAD_BLOCKS_TO_IGNORE_PATTERN, " ");
+  return findCodeFenceLeak(withoutValidBlocks) ?? findOrphanCssLeak(headContent) ?? findStrayCloseLeak(withoutValidBlocks);
+}
+function findLeakedTextInHead(rawSource) {
+  const headMatches = [...rawSource.matchAll(HEAD_CONTENT_PATTERN)];
+  for (const match of headMatches) {
+    const leakedText = findLeakedTextInHeadContent(match[1] ?? "");
+    if (leakedText) return leakedText;
+  }
+  return null;
+}
+var HEAD_BLOCKS_TO_IGNORE_PATTERN, HTML_TAG_PATTERN, HEAD_CONTENT_PATTERN, STRAY_HEAD_CLOSE_PATTERN, MARKDOWN_CODE_FENCE_PATTERN, ORPHAN_CSS_AT_RULE_PATTERN, ORPHAN_CSS_RULE_PATTERN, coreRules;
 var init_core = __esm({
   "../core/src/lint/rules/core.ts"() {
     "use strict";
     init_utils2();
+    HEAD_BLOCKS_TO_IGNORE_PATTERN = /<(?:style|script|template|title|noscript)\b[^>]*>[\s\S]*?<\/(?:style|script|template|title|noscript)(?:\s[^>]*)?>/gi;
+    HTML_TAG_PATTERN = /<[^>]+>/g;
+    HEAD_CONTENT_PATTERN = /<head\b[^>]*>([\s\S]*?)(?:<\/head>|<body\b|$)/gi;
+    STRAY_HEAD_CLOSE_PATTERN = /<\/(?:style|script)(?:\s[^>]*)?>/i;
+    MARKDOWN_CODE_FENCE_PATTERN = /```[^\r\n`]*(?:\r?\n|$)[\s\S]*?```/i;
+    ORPHAN_CSS_AT_RULE_PATTERN = /(?:^|\s)@(?:container|font-face|keyframes|layer|media|page|property|scope|supports)[^{<]*\{[\s\S]*?:[\s\S]*?\}/i;
+    ORPHAN_CSS_RULE_PATTERN = /(?:^|\s)(?:\/\*[\s\S]*?\*\/\s*)?(?:@[a-z-]+[^{}<]*|[.#][\w-]+[^{}<]*|[a-z][\w-]*(?:\s+[.#:[\w-][^{}<]*)?)\s*\{[^{}]*:[^{}]*\}/i;
     coreRules = [
       // root_missing_composition_id + root_missing_dimensions
       ({ rootTag }) => {
@@ -25411,6 +25444,20 @@ var init_core = __esm({
         }
         return findings;
       },
+      // head_leaked_text
+      ({ source }) => {
+        const snippet = findLeakedTextInHead(source);
+        if (!snippet) return [];
+        return [
+          {
+            code: "head_leaked_text",
+            severity: "error",
+            message: "Detected leaked code or CSS text in the document `<head>`. Browsers render this as visible text in the video.",
+            fixHint: "Move CSS into a single `<style>...</style>` block and remove stray close tags, markdown fences, or code text from `<head>`.",
+            snippet: truncateSnippet(snippet)
+          }
+        ];
+      },
       // missing_timeline_registry + timeline_registry_missing_init
       ({ source, rawSource, options }) => {
         if (options.isSubComposition || rawSource.trimStart().toLowerCase().startsWith("<template")) {
@@ -32424,6 +32471,7 @@ __export(src_exports, {
   HYPERFRAME_RUNTIME_GLOBALS: () => HYPERFRAME_RUNTIME_GLOBALS,
   ITEM_TYPES: () => ITEM_TYPES,
   ITEM_TYPE_DIRS: () => ITEM_TYPE_DIRS,
+  MEDIA_DURATION_CLAMP_EPSILON_SECONDS: () => MEDIA_DURATION_CLAMP_EPSILON_SECONDS,
   MEDIA_STYLES: () => MEDIA_STYLES,
   MEDIA_VISUAL_STYLE_PROPERTIES: () => MEDIA_VISUAL_STYLE_PROPERTIES,
   TEXT_STYLES: () => TEXT_STYLES,
@@ -39113,6 +39161,15 @@ function getFrameAtTime(extracted, globalTime, videoStart, loop = false, mediaSt
   if (frameIndex < 0 || frameIndex >= extracted.totalFrames) return null;
   return extracted.framePaths.get(frameIndex) || null;
 }
+function analyzeClipMediaFit(params) {
+  const { slotSeconds, mediaSeconds, loop } = params;
+  if (loop) return null;
+  if (!(slotSeconds > 0) || !Number.isFinite(mediaSeconds) || mediaSeconds < 0) return null;
+  const toleranceSeconds = MEDIA_DURATION_CLAMP_EPSILON_SECONDS;
+  const shortfallSeconds = slotSeconds - mediaSeconds;
+  if (shortfallSeconds <= toleranceSeconds) return null;
+  return { shortfallSeconds, toleranceSeconds };
+}
 function createFrameLookupTable(videos, extracted) {
   const table = new FrameLookupTable();
   const extractedMap = /* @__PURE__ */ new Map();
@@ -39123,7 +39180,7 @@ function createFrameLookupTable(videos, extracted) {
   }
   return table;
 }
-var VIDEO_FRAME_FORMATS, ALPHA_CAPABLE_CODECS, FrameLookupTable;
+var VIDEO_FRAME_FORMATS, ALPHA_CAPABLE_CODECS, HOLD_LAST_FRAME_TOLERANCE_FRAMES, FrameLookupTable;
 var init_videoFrameExtractor = __esm({
   "../engine/src/services/videoFrameExtractor.ts"() {
     "use strict";
@@ -39140,6 +39197,7 @@ var init_videoFrameExtractor = __esm({
     init_extractionCache();
     VIDEO_FRAME_FORMATS = ["auto", "jpg", "png"];
     ALPHA_CAPABLE_CODECS = /* @__PURE__ */ new Set(["vp9", "vp8", "prores"]);
+    HOLD_LAST_FRAME_TOLERANCE_FRAMES = 2;
     FrameLookupTable = class {
       videos = /* @__PURE__ */ new Map();
       orderedVideos = [];
@@ -39218,7 +39276,12 @@ var init_videoFrameExtractor = __esm({
             continue;
           }
           if (frameIndex < 0 || frameIndex >= video.extracted.totalFrames) {
-            if (globalTime >= video.end && video.extracted.totalFrames > 0) {
+            const fps = video.extracted.fps;
+            const holdTolerance = Math.max(
+              fps > 0 ? HOLD_LAST_FRAME_TOLERANCE_FRAMES / fps : 0,
+              MEDIA_DURATION_CLAMP_EPSILON_SECONDS
+            );
+            if (globalTime >= video.end - holdTolerance && video.extracted.totalFrames > 0) {
               const lastIndex = video.extracted.totalFrames - 1;
               const lastPath = video.extracted.framePaths.get(lastIndex);
               if (lastPath) frames.set(videoId, { framePath: lastPath, frameIndex: lastIndex });
@@ -42099,6 +42162,7 @@ __export(src_exports2, {
   TRANSITIONS: () => TRANSITIONS,
   VIDEO_FRAME_FORMATS: () => VIDEO_FRAME_FORMATS,
   acquireBrowser: () => acquireBrowser,
+  analyzeClipMediaFit: () => analyzeClipMediaFit,
   analyzeCompositionHdr: () => analyzeCompositionHdr,
   analyzeKeyframeIntervals: () => analyzeKeyframeIntervals,
   applyDomLayerMask: () => applyDomLayerMask,
@@ -84503,6 +84567,10 @@ function resolveTimelinePositions2(anims) {
   let cursor = 0;
   let prevStart = 0;
   for (const anim of anims) {
+    if (anim.method === "set" && anim.global) {
+      anim.resolvedStart = 0;
+      continue;
+    }
     const duration = anim.method === "set" ? 0 : anim.duration ?? GSAP_DEFAULT_DURATION2;
     let start;
     if (anim.implicitPosition) {
@@ -95590,7 +95658,7 @@ async function resolveMediaDuration(src, mediaStart, baseDir, downloadDir, tagNa
   const duration = effectiveDuration > 0 ? effectiveDuration : fileDuration;
   return { duration, resolvedPath: filePath };
 }
-async function compileHtmlFile(html, baseDir, downloadDir) {
+async function compileHtmlFile(html, baseDir, downloadDir, log2) {
   const { html: staticCompiled, unresolved } = compileTimingAttrs(html);
   const mediaUnresolved = unresolved.filter(
     (el) => (el.tagName === "video" || el.tagName === "audio") && el.src
@@ -95615,13 +95683,17 @@ async function compileHtmlFile(html, baseDir, downloadDir) {
         downloadDir,
         el.tagName
       );
-      return { id: el.id, duration: el.duration, maxDuration, src: el.src };
+      return { id: el.id, tagName: el.tagName, duration: el.duration, maxDuration, src: el.src };
     })
   );
   const clampList = [];
   for (const r2 of clampResults) {
     if (r2.maxDuration > 0 && shouldClampMediaDuration(r2.duration, r2.maxDuration)) {
       clampList.push({ id: r2.id, duration: r2.maxDuration });
+      const kind = r2.tagName === "audio" ? "Audio" : "Video";
+      log2?.warn(
+        `[compile] ${kind} "${r2.id}" (${r2.src}) is ${r2.maxDuration.toFixed(2)}s but its data-duration is ${r2.duration.toFixed(2)}s \u2014 the slot is shortened to the media length. Set data-duration to ~${r2.maxDuration.toFixed(2)}s, trim data-media-start, or use a longer/looping source if that isn't intended.`
+      );
     }
   }
   if (clampList.length > 0) {
@@ -96310,7 +96382,8 @@ async function compileForRender(projectDir, htmlPath, downloadDir, options = {})
   const { html: compiledHtml, unresolvedCompositions } = await compileHtmlFile(
     rawHtml,
     projectDir,
-    downloadDir
+    downloadDir,
+    options.log
   );
   const {
     videos: subVideos,
@@ -96709,6 +96782,7 @@ async function runCompileStage(input2) {
   } = input2;
   const compileStart = Date.now();
   const compiled = await compileForRender(projectDir, htmlPath, join43(workDir, "downloads"), {
+    log: log2,
     failClosedFontFetch: failClosedFontFetch === true,
     allowSystemFontCapture,
     animatedGifCacheDir: cfg.extractCacheDir ? join43(cfg.extractCacheDir, "animated-gif") : void 0,
@@ -101912,7 +101986,18 @@ function validateNoSystemFonts(compiledHtml) {
     );
   }
 }
-var PlanValidationError, SYSTEM_FONT_USED;
+function validateDistributedDuration(input2) {
+  const { duration, totalFrames, fps } = input2;
+  const maxFrames = Math.ceil(MAX_DISTRIBUTED_DURATION_SECONDS * fps);
+  if (Number.isFinite(duration) && duration > 0 && Number.isFinite(fps) && fps > 0 && Number.isSafeInteger(totalFrames) && totalFrames > 0 && totalFrames <= maxFrames) {
+    return;
+  }
+  throw new PlanValidationError(
+    DISTRIBUTED_DURATION_OUT_OF_RANGE,
+    `[planValidation] Distributed render duration is out of range: duration=${String(duration)}s totalFrames=${String(totalFrames)} fps=${String(fps)} (maxDuration=${String(MAX_DISTRIBUTED_DURATION_SECONDS)}s, maxFrames=${String(maxFrames)}). This usually means an unbounded timeline escaped into render planning, such as GSAP repeat:-1 / yoyo loops without an explicit finite root duration. Add a finite data-duration or replace infinite repeats with a finite repeat count before rendering.`
+  );
+}
+var PlanValidationError, SYSTEM_FONT_USED, DISTRIBUTED_DURATION_OUT_OF_RANGE, MAX_DISTRIBUTED_DURATION_SECONDS;
 var init_planValidation = __esm({
   "../producer/src/services/render/planValidation.ts"() {
     "use strict";
@@ -101929,6 +102014,8 @@ var init_planValidation = __esm({
       }
     };
     SYSTEM_FONT_USED = "SYSTEM_FONT_USED";
+    DISTRIBUTED_DURATION_OUT_OF_RANGE = "DISTRIBUTED_DURATION_OUT_OF_RANGE";
+    MAX_DISTRIBUTED_DURATION_SECONDS = 24 * 60 * 60;
   }
 });
@@ -102314,6 +102401,11 @@ async function plan(projectDir, config, planDir) {
   job.duration = probeResult.duration;
   job.totalFrames = probeResult.totalFrames;
   const totalFrames = probeResult.totalFrames;
+  validateDistributedDuration({
+    duration: probeResult.duration,
+    totalFrames,
+    fps: fpsToNumber(job.config.fps)
+  });
   if (probeResult.fileServer) closeFileServerSafely(probeResult.fileServer, "plan", log2);
   if (probeResult.probeSession) {
     try {
@@ -102456,6 +102548,7 @@ var PLAN_PROJECT_DIR_SKIP_SEGMENTS, DEFAULT_MAX_PARALLEL_CHUNKS, MIN_CHUNK_SIZE,
 var init_plan = __esm({
   "../producer/src/services/distributed/plan.ts"() {
     "use strict";
+    init_src();
     init_src2();
     init_logger();
     init_fileServer2();
@@ -102531,7 +102624,7 @@ function rebuildExtractedFramesFromPlanDir(planDir, videos) {
     for (let i2 = 0; i2 < frames.length; i2++) {
       const frameName = frames[i2];
       if (!frameName) continue;
-      framePaths.set(i2 + 1, join61(outputDir, frameName));
+      framePaths.set(i2, join61(outputDir, frameName));
     }
     result.push({
       videoId: v2.videoId,
@@ -103471,6 +103564,7 @@ var init_distributed = __esm({
     init_assemble();
     init_renderConfigValidation();
     init_projectHash();
+    init_planValidation();
   }
 });
@@ -113556,6 +113650,47 @@ async function seekTo2(page, time) {
   }, time);
   await new Promise((r2) => setTimeout(r2, SEEK_SETTLE_MS2));
 }
+async function auditClipDurations(page, analyzeClipMediaFit2) {
+  const clips = await page.evaluate(() => {
+    const rows = [];
+    document.querySelectorAll("video[data-duration], audio[data-duration]").forEach((node) => {
+      const el = node;
+      const slot = parseFloat(el.getAttribute("data-duration") ?? "");
+      if (!(slot > 0)) return;
+      rows.push({
+        id: el.id || el.getAttribute("src") || `(${el.tagName.toLowerCase()})`,
+        kind: el.tagName === "AUDIO" ? "Audio" : "Video",
+        slot,
+        mediaStart: parseFloat(el.getAttribute("data-media-start") ?? "0") || 0,
+        duration: el.duration,
+        loop: el.loop || el.getAttribute("data-loop") === "true"
+      });
+    });
+    return rows;
+  });
+  const warnings = [];
+  const unreadable = [];
+  for (const clip of clips) {
+    if (!Number.isFinite(clip.duration) || clip.duration <= 0) {
+      unreadable.push(clip.id);
+      continue;
+    }
+    const mediaSeconds = Math.max(0, clip.duration - clip.mediaStart);
+    const fit = analyzeClipMediaFit2({ slotSeconds: clip.slot, mediaSeconds, loop: clip.loop });
+    if (!fit) continue;
+    warnings.push({
+      level: "warning",
+      text: `${clip.kind} "${clip.id}" is ${mediaSeconds.toFixed(2)}s but its slot (data-duration) is ${clip.slot.toFixed(2)}s \u2014 the slot is shortened to the media length when rendered. Set data-duration to ~${mediaSeconds.toFixed(2)}s if that isn't intended.`
+    });
+  }
+  if (unreadable.length > 0) {
+    warnings.push({
+      level: "warning",
+      text: `Could not read the duration of ${unreadable.length} media element(s) within the validate timeout (${unreadable.join(", ")}); their slot vs. source fit was not checked. Re-run with a longer --timeout if the source is slow to load.`
+    });
+  }
+  return warnings;
+}
 async function runContrastAudit(page) {
   const duration = await getCompositionDuration3(page);
   if (duration <= 0) return [];
@@ -113597,7 +113732,7 @@ async function validateInBrowser(projectDir, opts) {
   try {
     const browser = await ensureBrowser2();
     const puppeteer = await import("puppeteer-core");
-    const { buildChromeArgs: buildChromeArgs2 } = await Promise.resolve().then(() => (init_src2(), src_exports2));
+    const { buildChromeArgs: buildChromeArgs2, analyzeClipMediaFit: analyzeClipMediaFit2 } = await Promise.resolve().then(() => (init_src2(), src_exports2));
     const browserGpuMode = process.env.PRODUCER_BROWSER_GPU_MODE === "software" ? "software" : "hardware";
     const chromeBrowser = await puppeteer.default.launch({
       headless: true,
@@ -113644,6 +113779,9 @@ async function validateInBrowser(projectDir, opts) {
     });
     await page.goto(server.url, { waitUntil: "domcontentloaded", timeout: 1e4 });
     await new Promise((r2) => setTimeout(r2, opts.timeout ?? 3e3));
+    for (const w3 of await auditClipDurations(page, analyzeClipMediaFit2)) {
+      warnings.push(w3);
+    }
     if (opts.contrast) {
       contrast = await runContrastAudit(page);
     }