hyperframes 0.4.2 → 0.4.4

package/dist/cli.js

@@ -54,7 +54,7 @@ var VERSION;
 var init_version = __esm({
   "src/version.ts"() {
     "use strict";
-    VERSION = true ? "0.4.2" : "0.0.0-dev";
+    VERSION = true ? "0.4.4" : "0.0.0-dev";
   }
 });
 
@@ -6333,7 +6333,9 @@ function lintProject(project) {
   }
   const projectFindings = [
     ...lintProjectAudioFiles(project.dir, allHtmlSources),
-    ...lintAudioSrcNotFound(project.dir, allHtmlSources)
+    ...lintAudioSrcNotFound(project.dir, allHtmlSources),
+    ...lintMultipleRootCompositions(project.dir),
+    ...lintDuplicateAudioTracks(allHtmlSources)
   ];
   if (projectFindings.length > 0) {
     for (const finding of projectFindings) {
@@ -6370,7 +6372,7 @@ function lintProjectAudioFiles(projectDir, htmlSources) {
       code: "audio_file_without_element",
       severity: "warning",
       message: `Found audio file(s) in project (${audioFiles.join(", ")}) but no <audio> element in any composition. The rendered video will be silent.`,
-      fixHint: 'Add an <audio id="my-audio" src="' + audioFiles[0] + '" data-start="0" data-track-index="0" data-volume="1"></audio> element inside the composition root.'
+      fixHint: 'Add an <audio id="my-audio" src="' + audioFiles[0] + '" data-start="0" data-duration="__DURATION__" data-track-index="0" data-volume="1"></audio> element inside the composition root. Replace __DURATION__ with the audio length in seconds.'
     });
   }
   return findings;
@@ -6402,6 +6404,74 @@ function lintAudioSrcNotFound(projectDir, htmlSources) {
   }
   return findings;
 }
+function lintMultipleRootCompositions(projectDir) {
+  const findings = [];
+  try {
+    const rootHtmlFiles = readdirSync2(projectDir).filter((f3) => f3.endsWith(".html"));
+    const rootCompositions = [];
+    for (const file of rootHtmlFiles) {
+      const content = readFileSync7(join9(projectDir, file), "utf-8");
+      if (/data-composition-id/i.test(content)) {
+        rootCompositions.push(file);
+      }
+    }
+    if (rootCompositions.length > 1) {
+      findings.push({
+        code: "multiple_root_compositions",
+        severity: "error",
+        message: `Multiple root-level HTML files with data-composition-id: ${rootCompositions.join(", ")}. The runtime may discover both as entry points, causing duplicate audio playback.`,
+        fixHint: "A project should have exactly one root index.html with data-composition-id. Remove or rename extra files."
+      });
+    }
+  } catch {
+  }
+  return findings;
+}
+function lintDuplicateAudioTracks(htmlSources) {
+  const findings = [];
+  function extractAttr(tag, name) {
+    const re2 = new RegExp(`\\b${name}\\s*=\\s*["']([^"']+)["']`, "i");
+    const m2 = tag.match(re2);
+    return m2?.[1] ?? null;
+  }
+  const tracks = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const html of htmlSources) {
+    const audioTagRe = /<audio\b[^>]*>/gi;
+    let match;
+    while ((match = audioTagRe.exec(html)) !== null) {
+      const tag = match[0];
+      const trackStr = extractAttr(tag, "data-track-index");
+      const startStr = extractAttr(tag, "data-start");
+      const durStr = extractAttr(tag, "data-duration");
+      const src = extractAttr(tag, "src") ?? "unknown";
+      if (!trackStr || !startStr) continue;
+      const trackIndex = parseInt(trackStr, 10);
+      const start = parseFloat(startStr);
+      const duration = durStr ? parseFloat(durStr) : Infinity;
+      const key2 = `${src}:${start}:${duration}:${trackIndex}`;
+      if (seen.has(key2)) continue;
+      seen.add(key2);
+      tracks.push({ trackIndex, start, end: start + duration, src });
+    }
+  }
+  for (let i2 = 0; i2 < tracks.length; i2++) {
+    for (let j2 = i2 + 1; j2 < tracks.length; j2++) {
+      const a = tracks[i2];
+      const b = tracks[j2];
+      if (a.trackIndex !== b.trackIndex) continue;
+      if (a.start < b.end && b.start < a.end) {
+        findings.push({
+          code: "duplicate_audio_track",
+          severity: "warning",
+          message: `Multiple <audio> elements on track ${a.trackIndex} overlap (${a.src} at ${a.start}-${Number.isFinite(a.end) ? a.end.toFixed(1) : "end"}s, ${b.src} at ${b.start}-${Number.isFinite(b.end) ? b.end.toFixed(1) : "end"}s). This causes layered audio playback.`,
+          fixHint: "Use non-overlapping time windows or different track indices."
+        });
+      }
+    }
+  }
+  return findings;
+}
 function shouldBlockRender(strictErrors, strictAll, totalErrors, totalWarnings) {
   return strictErrors && totalErrors > 0 || strictAll && (totalErrors > 0 || totalWarnings > 0);
 }
@@ -6480,10 +6550,12 @@ function isPortAvailableOnHost(port, host) {
     });
   });
 }
-async function testPortOnAllHosts(port) {
-  const hosts = ["127.0.0.1", "0.0.0.0", "::1", "::"];
-  const results = await Promise.all(hosts.map((h3) => isPortAvailableOnHost(port, h3)));
-  return results.every(Boolean);
+async function testPortOnAllHosts(port, probe = isPortAvailableOnHost) {
+  for (const host of PORT_PROBE_HOSTS) {
+    const available = await probe(port, host);
+    if (!available) return false;
+  }
+  return true;
 }
 function detectHyperframesServer(port, normalizedProjectDir) {
   return new Promise((resolveResult) => {
@@ -6680,7 +6752,7 @@ async function findPortAndServe(fetch4, startPort, projectDir, forceNew) {
     `Ports ${startPort}\u2013${endPort} are all in use. Use --port to specify a different starting port.`
   );
 }
-var execFileAsync, MAX_PORT_SCAN, PROBE_TIMEOUT_MS, PROBE_MAX_BYTES;
+var execFileAsync, MAX_PORT_SCAN, PROBE_TIMEOUT_MS, PROBE_MAX_BYTES, PORT_PROBE_HOSTS;
 var init_portUtils = __esm({
   "src/server/portUtils.ts"() {
     "use strict";
@@ -6689,6 +6761,7 @@ var init_portUtils = __esm({
     MAX_PORT_SCAN = 100;
     PROBE_TIMEOUT_MS = 300;
     PROBE_MAX_BYTES = 4096;
+    PORT_PROBE_HOSTS = ["127.0.0.1", "0.0.0.0", "::1", "::"];
   }
 });
 
@@ -20850,12 +20923,20 @@ async function createCaptureSession(serverUrl, outputDir, options, onBeforeCaptu
     config
   };
 }
+function isFontResourceError(type, text, locationUrl) {
+  if (type !== "error") return false;
+  if (!text.startsWith("Failed to load resource")) return false;
+  return /fonts\.googleapis|fonts\.gstatic|\.(woff2?|ttf|otf)(\b|$)/i.test(
+    `${locationUrl} ${text}`
+  );
+}
 async function initializeSession(session) {
   const { page, serverUrl } = session;
   page.on("console", (msg) => {
     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 locationUrl = msg.location()?.url ?? "";
+    const isFontLoadError = isFontResourceError(type, text, locationUrl);
     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) {
@@ -73405,7 +73486,7 @@ async function captionImagesWithGemini(outputDir, progress, warnings) {
     const imageFiles = readdirSync13(join47(outputDir, "assets")).filter(
       (f3) => /\.(png|jpg|jpeg|webp|gif)$/i.test(f3)
     );
-    const model = "gemini-2.5-flash";
+    const model = process.env.HYPERFRAMES_GEMINI_MODEL || "gemini-3.1-flash-lite-preview";
     const BATCH_SIZE = 20;
     for (let i2 = 0; i2 < imageFiles.length; i2 += BATCH_SIZE) {
       const batch = imageFiles.slice(i2, i2 + BATCH_SIZE);
@@ -73667,50 +73748,7 @@ function loadEnvFile(startDir) {
   }
 }
 async function generateProjectScaffold(outputDir, url, tokens, animationCatalog, hasScreenshots, hasLotties, hasShaders, catalogedAssets, progress, warnings) {
-  const indexPath = join49(outputDir, "index.html");
   const metaPath = join49(outputDir, "meta.json");
-  if (!existsSync45(indexPath)) {
-    writeFileSync20(
-      indexPath,
-      `<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=1920, height=1080" />
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <style>
-      * { margin: 0; padding: 0; box-sizing: border-box; }
-      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #000; }
-    </style>
-  </head>
-  <body>
-    <!-- Root composition wrapper \u2014 AGENT: update data-duration to match total video length -->
-    <div data-composition-id="main" data-width="1920" data-height="1080" data-start="0" data-duration="28">
-
-      <!-- SCENE SLOTS \u2014 AGENT: adjust count, durations, and IDs to match your scene plan -->
-      <div id="scene-1" data-composition-src="compositions/scene-1.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
-      <div id="scene-2" data-composition-src="compositions/scene-2.html" data-start="7" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
-      <div id="scene-3" data-composition-src="compositions/scene-3.html" data-start="14" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
-      <div id="scene-4" data-composition-src="compositions/scene-4.html" data-start="21" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
-
-      <!-- NARRATION \u2014 AGENT: update src after generating TTS -->
-      <audio id="narration" data-start="0" data-duration="28" data-track-index="0" data-volume="1" src="narration.wav"></audio>
-
-      <!-- CAPTIONS (optional \u2014 only add if user requests captions/subtitles) -->
-
-    </div>
-
-    <script>
-      window.__timelines = window.__timelines || {};
-      var tl = gsap.timeline({ paused: true });
-      window.__timelines["main"] = tl;
-    </script>
-  </body>
-</html>
-`,
-      "utf-8"
-    );
-  }
   if (!existsSync45(metaPath)) {
     const hostname = new URL(url).hostname.replace(/^www\./, "");
     writeFileSync20(