@hyperframes/producer 0.2.3 → 0.2.5

package/dist/index.js

@@ -99285,7 +99285,8 @@ function truncateSnippet(value, maxLength = 220) {
 
 // ../core/src/lint/context.ts
 function buildLintContext(html, options = {}) {
-  let source2 = html || "";
+  const rawSource = html || "";
+  let source2 = rawSource;
   const templateMatch = source2.match(/<template[^>]*>([\s\S]*)<\/template>/i);
   if (templateMatch?.[1]) source2 = templateMatch[1];
   const tags = extractOpenTags(source2);
@@ -99296,6 +99297,7 @@ function buildLintContext(html, options = {}) {
   const rootCompositionId = readAttr(rootTag?.raw || "", "data-composition-id");
   return {
     source: source2,
+    rawSource,
     tags,
     styles,
     scripts,
@@ -100086,8 +100088,30 @@ ${right2.raw}`)
         findings.push({
           code: "gsap_infinite_repeat",
           severity: "error",
-          message: "GSAP tween uses `repeat: -1` (infinite). Infinite repeats break the deterministic capture engine which seeks to exact frame times. Use a finite repeat count calculated from the composition duration: `repeat: Math.ceil(duration / cycleDuration) - 1`.",
-          fixHint: "Replace `repeat: -1` with a finite count, e.g. `repeat: Math.ceil(totalDuration / singleCycleDuration) - 1`.",
+          message: "GSAP tween uses `repeat: -1` (infinite). Infinite repeats break the deterministic capture engine which seeks to exact frame times. Use a finite repeat count calculated from the composition duration: `repeat: Math.floor(duration / cycleDuration) - 1`.",
+          fixHint: "Replace `repeat: -1` with a finite count, e.g. `repeat: Math.floor(totalDuration / singleCycleDuration) - 1`. Use Math.floor (not Math.ceil) to ensure the animation fits within the total duration.",
+          snippet: truncateSnippet(snippet)
+        });
+      }
+    }
+    return findings;
+  },
+  // gsap_repeat_ceil_overshoot
+  ({ scripts }) => {
+    const findings = [];
+    for (const script of scripts) {
+      const content = script.content;
+      const pattern = /repeat\s*:\s*Math\.ceil\s*\([^)]+\)\s*-\s*1/g;
+      let match2;
+      while ((match2 = pattern.exec(content)) !== null) {
+        const contextStart = Math.max(0, match2.index - 40);
+        const contextEnd = Math.min(content.length, match2.index + match2[0].length + 40);
+        const snippet = content.slice(contextStart, contextEnd).trim();
+        findings.push({
+          code: "gsap_repeat_ceil_overshoot",
+          severity: "warning",
+          message: "GSAP repeat calculation uses `Math.ceil` which can overshoot the composition duration. For example, Math.ceil(10.5 / 2) - 1 = 5 repeats \u2192 6 cycles \xD7 2s = 12s, exceeding 10.5s.",
+          fixHint: "Use `Math.floor` instead of `Math.ceil` to ensure the animation fits within the duration: `repeat: Math.floor(totalDuration / cycleDuration) - 1`. Math.floor(10.5 / 2) - 1 = 4 repeats \u2192 5 cycles \xD7 2s = 10s \u2713",
           snippet: truncateSnippet(snippet)
         });
       }
@@ -100469,6 +100493,76 @@ var compositionRules = [
     }
     return findings;
   },
+  // root_composition_missing_data_start
+  ({ rootTag }) => {
+    const findings = [];
+    if (!rootTag) return findings;
+    const compId = readAttr(rootTag.raw, "data-composition-id");
+    if (!compId) return findings;
+    const hasStart = readAttr(rootTag.raw, "data-start") !== null;
+    if (!hasStart) {
+      findings.push({
+        code: "root_composition_missing_data_start",
+        severity: "warning",
+        message: `Root composition "${compId}" is missing data-start. The runtime needs data-start="0" on the root element to begin playback.`,
+        fixHint: 'Add data-start="0" to the root composition element.',
+        snippet: truncateSnippet(rootTag.raw)
+      });
+    }
+    return findings;
+  },
+  // root_composition_missing_data_duration
+  ({ rootTag }) => {
+    const findings = [];
+    if (!rootTag) return findings;
+    const compId = readAttr(rootTag.raw, "data-composition-id");
+    if (!compId) return findings;
+    const hasDuration = readAttr(rootTag.raw, "data-duration") !== null;
+    if (!hasDuration) {
+      findings.push({
+        code: "root_composition_missing_data_duration",
+        severity: "warning",
+        message: `Root composition "${compId}" is missing data-duration. Without an explicit duration, the runtime may infer Infinity for compositions with repeating animations, causing playback issues.`,
+        fixHint: 'Add data-duration="X" to the root composition element, where X is the total duration in seconds.',
+        snippet: truncateSnippet(rootTag.raw)
+      });
+    }
+    return findings;
+  },
+  // standalone_composition_wrapped_in_template
+  ({ rawSource, options }) => {
+    const findings = [];
+    if (options.isSubComposition) return findings;
+    const trimmed = rawSource.trimStart().toLowerCase();
+    if (trimmed.startsWith("<template")) {
+      findings.push({
+        code: "standalone_composition_wrapped_in_template",
+        severity: "warning",
+        message: "Root index.html is wrapped in a <template> tag. Only sub-compositions loaded via data-composition-src should use <template> wrappers. The runtime cannot play a standalone composition inside a template.",
+        fixHint: "Remove the <template> wrapper. Use <!DOCTYPE html><html>...<div data-composition-id>...</div>...</html> instead."
+      });
+    }
+    return findings;
+  },
+  // root_composition_missing_html_wrapper
+  ({ rawSource, rootTag, options }) => {
+    const findings = [];
+    if (options.isSubComposition) return findings;
+    const trimmed = rawSource.trimStart().toLowerCase();
+    if (trimmed.startsWith("<template")) return findings;
+    const hasDoctype = trimmed.startsWith("<!doctype") || trimmed.startsWith("<html");
+    const hasComposition = rawSource.includes("data-composition-id");
+    if (hasComposition && !hasDoctype) {
+      findings.push({
+        code: "root_composition_missing_html_wrapper",
+        severity: "error",
+        message: "Composition starts with a bare element instead of a proper HTML document. An index.html that contains data-composition-id but no <!DOCTYPE html>, <html>, or <body> is a fragment \u2014 browsers quirks-mode it, the preview server cannot load it, and the bundler will fail to inject runtime scripts.",
+        fixHint: 'Wrap the composition in <!DOCTYPE html><html><head><meta charset="UTF-8"></head><body>...</body></html>.',
+        snippet: rootTag ? truncateSnippet(rootTag.raw) : void 0
+      });
+    }
+    return findings;
+  },
   // requestanimationframe_in_composition
   ({ scripts }) => {
     const findings = [];
@@ -100650,12 +100744,12 @@ function quantizeTimeToFrame(timeSeconds, fps) {
   return frameIndex / safeFps;
 }
 
-// ../../node_modules/.bun/@chenglou+pretext@0.0.3/node_modules/@chenglou/pretext/dist/analysis.js
+// ../../node_modules/.bun/@chenglou+pretext@0.0.5/node_modules/@chenglou/pretext/dist/analysis.js
 var arabicScriptRe = new RegExp("\\p{Script=Arabic}", "u");
 var combiningMarkRe = new RegExp("\\p{M}", "u");
 var decimalDigitRe = new RegExp("\\p{Nd}", "u");
 
-// ../../node_modules/.bun/@chenglou+pretext@0.0.3/node_modules/@chenglou/pretext/dist/measurement.js
+// ../../node_modules/.bun/@chenglou+pretext@0.0.5/node_modules/@chenglou/pretext/dist/measurement.js
 var emojiPresentationRe = new RegExp("\\p{Emoji_Presentation}", "u");
 
 // ../engine/src/services/screenshotService.ts
@@ -100669,18 +100763,36 @@ async function getCdpSession(page) {
   return client;
 }
 var lastFrameCache = /* @__PURE__ */ new WeakMap();
+var PENDING_FRAME_RETRIES = 5;
+async function sendBeginFrame(client, params) {
+  for (let attempt = 0; ; attempt++) {
+    try {
+      return await client.send("HeadlessExperimental.beginFrame", params);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      const isPending = msg.includes("Another frame is pending");
+      if (isPending && attempt < PENDING_FRAME_RETRIES) {
+        await new Promise((r) => setTimeout(r, 50 * 2 ** attempt));
+        continue;
+      }
+      if (isPending) {
+        throw new Error(
+          `[BeginFrame] Frame still pending after ${PENDING_FRAME_RETRIES} retries \u2014 CPU overloaded by parallel renders. Reduce concurrent renders or use --docker for isolation.`
+        );
+      }
+      throw err;
+    }
+  }
+}
 async function beginFrameCapture(page, options, frameTimeTicks, interval) {
   const client = await getCdpSession(page);
-  const format3 = options.format === "png" ? "png" : "jpeg";
-  const result = await client.send("HeadlessExperimental.beginFrame", {
-    frameTimeTicks,
-    interval,
-    screenshot: {
-      format: format3,
-      quality: format3 === "jpeg" ? options.quality ?? 80 : void 0,
-      optimizeForSpeed: true
-    }
-  });
+  const isPng = options.format === "png";
+  const screenshot = {
+    format: isPng ? "png" : "jpeg",
+    quality: isPng ? void 0 : options.quality ?? 80,
+    optimizeForSpeed: true
+  };
+  const result = await sendBeginFrame(client, { frameTimeTicks, interval, screenshot });
   let buffer;
   if (result.screenshotData) {
     buffer = Buffer.from(result.screenshotData, "base64");
@@ -100690,16 +100802,12 @@ async function beginFrameCapture(page, options, frameTimeTicks, interval) {
     if (cached) {
       buffer = cached;
     } else {
-      const retry2 = await client.send("HeadlessExperimental.beginFrame", {
+      const fallback = await sendBeginFrame(client, {
         frameTimeTicks: frameTimeTicks + 1e-3,
         interval,
-        screenshot: {
-          format: format3,
-          quality: format3 === "jpeg" ? options.quality ?? 80 : void 0,
-          optimizeForSpeed: true
-        }
+        screenshot
       });
-      buffer = retry2.screenshotData ? Buffer.from(retry2.screenshotData, "base64") : Buffer.alloc(0);
+      buffer = fallback.screenshotData ? Buffer.from(fallback.screenshotData, "base64") : Buffer.alloc(0);
       if (buffer.length > 0) lastFrameCache.set(page, buffer);
     }
   }
@@ -102202,7 +102310,7 @@ async function extractVideoFramesRange(videoPath, videoId, startTime, duration,
     });
   });
 }
-async function extractAllVideoFrames(videos, baseDir, options, signal, config2) {
+async function extractAllVideoFrames(videos, baseDir, options, signal, config2, compiledDir) {
   const startTime = Date.now();
   const extracted = [];
   const errors = [];
@@ -102215,7 +102323,8 @@ async function extractAllVideoFrames(videos, baseDir, options, signal, config2)
       try {
         let videoPath = video.src;
         if (!videoPath.startsWith("/") && !isHttpUrl(videoPath)) {
-          videoPath = join8(baseDir, videoPath);
+          const fromCompiled = compiledDir ? join8(compiledDir, videoPath) : null;
+          videoPath = fromCompiled && existsSync8(fromCompiled) ? fromCompiled : join8(baseDir, videoPath);
         }
         if (isHttpUrl(videoPath)) {
           const downloadDir = join8(options.outputDir, "_downloads");
@@ -102676,7 +102785,7 @@ async function mixAudioTracks(tracks, outputPath, totalDuration, signal, config2
     tracksProcessed: tracks.length
   };
 }
-async function processCompositionAudio(elements, baseDir, workDir, outputPath, totalDuration, signal, config2) {
+async function processCompositionAudio(elements, baseDir, workDir, outputPath, totalDuration, signal, config2, compiledDir) {
   const startMs = Date.now();
   const tracks = [];
   const errors = [];
@@ -102690,7 +102799,8 @@ async function processCompositionAudio(elements, baseDir, workDir, outputPath, t
       try {
         let srcPath = element.src;
         if (!srcPath.startsWith("/") && !isHttpUrl(srcPath)) {
-          srcPath = join9(baseDir, srcPath);
+          const fromCompiled = compiledDir ? join9(compiledDir, srcPath) : null;
+          srcPath = fromCompiled && existsSync9(fromCompiled) ? fromCompiled : join9(baseDir, srcPath);
         }
         if (isHttpUrl(srcPath)) {
           try {
@@ -102703,7 +102813,7 @@ async function processCompositionAudio(elements, baseDir, workDir, outputPath, t
           }
         }
         if (!existsSync9(srcPath)) {
-          errors.push(`Source not found: ${element.id}`);
+          errors.push(`Source not found: ${element.id} (${element.src})`);
           return;
         }
         if (element.end - element.start <= 0) {
@@ -107405,12 +107515,15 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
     const stage2Start = Date.now();
     updateJobStatus(job, "preprocessing", "Extracting video frames", 10, onProgress);
     let frameLookup = null;
+    const compiledDir = join13(workDir, "compiled");
     if (composition.videos.length > 0) {
       const extractionResult = await extractAllVideoFrames(
         composition.videos,
         projectDir,
         { fps: job.config.fps, outputDir: join13(workDir, "video-frames") },
-        abortSignal
+        abortSignal,
+        void 0,
+        compiledDir
       );
       assertNotAborted();
       if (extractionResult.extracted.length > 0) {
@@ -107450,7 +107563,9 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
         join13(workDir, "audio-work"),
         audioOutputPath,
         job.duration,
-        abortSignal
+        abortSignal,
+        void 0,
+        compiledDir
       );
       assertNotAborted();
       hasAudio = audioResult.success;
@@ -108117,6 +108232,40 @@ function resolveRenderPaths(projectDir, outputPath, rendersDir = DEFAULT_RENDERS
   return { absoluteProjectDir, absoluteOutputPath };
 }
 
+// src/utils/semaphore.ts
+var Semaphore = class {
+  constructor(maxConcurrent) {
+    this.maxConcurrent = maxConcurrent;
+  }
+  queue = [];
+  active = 0;
+  async acquire() {
+    if (this.active < this.maxConcurrent) {
+      this.active++;
+      return () => this.release();
+    }
+    return new Promise((resolve13) => {
+      this.queue.push(() => {
+        this.active++;
+        resolve13(() => this.release());
+      });
+    });
+  }
+  release() {
+    this.active--;
+    const next = this.queue.shift();
+    if (next) next();
+  }
+  /** Current number of active slots. */
+  get activeCount() {
+    return this.active;
+  }
+  /** Number of waiters in the queue. */
+  get waitingCount() {
+    return this.queue.length;
+  }
+};
+
 // src/server.ts
 function parseRenderOptions(body) {
   const fps = [24, 30, 60].includes(body.fps) ? body.fps : 30;
@@ -108230,6 +108379,8 @@ function createRenderHandlers(options = {}) {
   const rendersDir = options.rendersDir ?? process.env.PRODUCER_RENDERS_DIR ?? "/tmp";
   const artifactTtlMs = options.artifactTtlMs ?? Number(process.env.PRODUCER_OUTPUT_ARTIFACT_TTL_MS || 15 * 60 * 1e3);
   const store = createArtifactStore(artifactTtlMs);
+  const maxConcurrentRenders = options.maxConcurrentRenders ?? Number(process.env.PRODUCER_MAX_CONCURRENT_RENDERS || 2);
+  const renderSemaphore = new Semaphore(maxConcurrentRenders);
   const startTime = Date.now();
   const health = (c) => c.json({
     status: "ok",
@@ -108286,6 +108437,7 @@ function createRenderHandlers(options = {}) {
     );
     const outputDir = dirname11(absoluteOutputPath);
     if (!existsSync16(outputDir)) mkdirSync10(outputDir, { recursive: true });
+    const release = await renderSemaphore.acquire();
     log.info("render started", {
       requestId,
       projectDir: input2.projectDir,
@@ -108353,6 +108505,7 @@ function createRenderHandlers(options = {}) {
         500
       );
     } finally {
+      release();
       cleanupTempDir(cleanupProjectDir, log);
     }
   };
@@ -108409,6 +108562,16 @@ function createRenderHandlers(options = {}) {
       const abortController = new AbortController();
       const onRequestAbort = () => abortController.abort(new RenderCancelledError("request_aborted"));
       c.req.raw.signal.addEventListener("abort", onRequestAbort, { once: true });
+      if (renderSemaphore.activeCount >= maxConcurrentRenders) {
+        await stream2.writeSSE({
+          data: JSON.stringify({
+            type: "queued",
+            requestId,
+            position: renderSemaphore.waitingCount
+          })
+        });
+      }
+      const release = await renderSemaphore.acquire();
       try {
         await executeRenderJob(
           job,
@@ -108476,6 +108639,7 @@ function createRenderHandlers(options = {}) {
           })
         });
       } finally {
+        release();
         c.req.raw.signal.removeEventListener("abort", onRequestAbort);
         cleanupTempDir(cleanupProjectDir, log);
       }
@@ -108500,7 +108664,12 @@ function createRenderHandlers(options = {}) {
       }
     });
   };
-  return { render: render2, renderStream, lint, health, outputs };
+  const queue = (c) => c.json({
+    maxConcurrentRenders,
+    activeRenders: renderSemaphore.activeCount,
+    queuedRenders: renderSemaphore.waitingCount
+  });
+  return { render: render2, renderStream, lint, health, outputs, queue };
 }
 function createProducerApp(options = {}) {
   const app = new Hono2();
@@ -108508,6 +108677,7 @@ function createProducerApp(options = {}) {
   app.get("/health", handlers.health);
   app.post("/render", handlers.render);
   app.post("/render/stream", handlers.renderStream);
+  app.get("/render/queue", handlers.queue);
   app.post("/lint", handlers.lint);
   app.get("/outputs/:token", handlers.outputs);
   return app;