hyperframes 0.2.3-alpha.1 → 0.2.3

package/dist/cli.js

@@ -54,7 +54,7 @@ var VERSION;
 var init_version = __esm({
   "src/version.ts"() {
     "use strict";
-    VERSION = true ? "0.2.3-alpha.1" : "0.0.0-dev";
+    VERSION = true ? "0.2.3" : "0.0.0-dev";
   }
 });
 
@@ -2631,8 +2631,8 @@ function flushSync() {
   eventQueue = [];
   const payload = JSON.stringify({ api_key: POSTHOG_API_KEY, batch });
   try {
-    const { spawn: spawn10 } = __require("child_process");
-    const child = spawn10(
+    const { spawn: spawn11 } = __require("child_process");
+    const child = spawn11(
       process.execPath,
       [
         "-e",
@@ -4561,6 +4561,28 @@ ${right.raw}`)
         }
         return findings;
       },
+      // gsap_infinite_repeat
+      ({ scripts }) => {
+        const findings = [];
+        for (const script of scripts) {
+          const content = script.content;
+          const pattern = /repeat\s*:\s*-1(?!\d)/g;
+          let match;
+          while ((match = pattern.exec(content)) !== null) {
+            const contextStart = Math.max(0, match.index - 60);
+            const contextEnd = Math.min(content.length, match.index + match[0].length + 60);
+            const snippet = content.slice(contextStart, contextEnd).trim();
+            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`.",
+              snippet: truncateSnippet(snippet)
+            });
+          }
+        }
+        return findings;
+      },
       // scene_layer_missing_visibility_kill
       ({ scripts, tags }) => {
         const findings = [];
@@ -5643,6 +5665,7 @@ var init_mime = __esm({
       ".webp": "image/webp",
       ".ico": "image/x-icon",
       ".mp4": "video/mp4",
+      ".mov": "video/quicktime",
       ".webm": "video/webm",
       ".mp3": "audio/mpeg",
       ".wav": "audio/wav",
@@ -18532,7 +18555,9 @@ function registerRenderRoutes(api, adapter2) {
     const project = await adapter2.resolveProject(c2.req.param("id"));
     if (!project) return c2.json({ error: "not found" }, 404);
     const body = await c2.req.json().catch(() => ({}));
-    const format = body.format === "webm" ? "webm" : "mp4";
+    const VALID_FORMATS = /* @__PURE__ */ new Set(["mp4", "webm", "mov"]);
+    const FORMAT_EXT2 = { mp4: ".mp4", webm: ".webm", mov: ".mov" };
+    const format = VALID_FORMATS.has(body.format ?? "") ? body.format : "mp4";
     const fps = body.fps === 24 || body.fps === 60 ? body.fps : 30;
     const quality = ["draft", "standard", "high"].includes(body.quality ?? "") ? body.quality : "standard";
     const now = /* @__PURE__ */ new Date();
@@ -18541,7 +18566,7 @@ function registerRenderRoutes(api, adapter2) {
     const jobId = `${project.id}_${datePart}_${timePart}`;
     const rendersDir = adapter2.rendersDir(project);
     if (!existsSync10(rendersDir)) mkdirSync6(rendersDir, { recursive: true });
-    const ext = format === "webm" ? ".webm" : ".mp4";
+    const ext = FORMAT_EXT2[format] ?? ".mp4";
     const outputPath = join12(rendersDir, `${jobId}${ext}`);
     const jobState = adapter2.startRender({
       project,
@@ -18594,14 +18619,23 @@ function registerRenderRoutes(api, adapter2) {
       }
     });
   });
+  const RENDER_MIME = {
+    ".mp4": "video/mp4",
+    ".webm": "video/webm",
+    ".mov": "video/quicktime"
+  };
+  const RENDER_EXTENSIONS = Object.keys(RENDER_MIME);
+  function renderContentType(filePath) {
+    const ext = RENDER_EXTENSIONS.find((e) => filePath.endsWith(e));
+    return (ext && RENDER_MIME[ext]) ?? "video/mp4";
+  }
   api.get("/render/:jobId/view", (c2) => {
     const { jobId } = c2.req.param();
     const job = renderJobs.get(jobId);
     if (!job?.outputPath || !existsSync10(job.outputPath)) {
       return c2.json({ error: "not found" }, 404);
     }
-    const isWebm = job.outputPath.endsWith(".webm");
-    const contentType = isWebm ? "video/webm" : "video/mp4";
+    const contentType = renderContentType(job.outputPath);
     const filename = job.outputPath.split("/").pop() ?? `render.mp4`;
     const content = readFileSync11(job.outputPath);
     return new Response(content, {
@@ -18619,8 +18653,7 @@ function registerRenderRoutes(api, adapter2) {
     if (!job?.outputPath || !existsSync10(job.outputPath)) {
       return c2.json({ error: "not found" }, 404);
     }
-    const isWebm = job.outputPath.endsWith(".webm");
-    const contentType = isWebm ? "video/webm" : "video/mp4";
+    const contentType = renderContentType(job.outputPath);
     const filename = job.outputPath.split("/").pop() ?? `render.mp4`;
     const content = readFileSync11(job.outputPath);
     return new Response(content, {
@@ -18635,7 +18668,7 @@ function registerRenderRoutes(api, adapter2) {
     for (const [, state] of renderJobs) {
       if (state.id === jobId && state.outputPath) {
         const dir = state.outputPath.replace(/\/[^/]+$/, "");
-        for (const ext of [".mp4", ".webm", ".meta.json"]) {
+        for (const ext of [".mp4", ".webm", ".mov", ".meta.json"]) {
           const fp = join12(dir, `${jobId}${ext}`);
           if (existsSync10(fp)) unlinkSync4(fp);
         }
@@ -18653,8 +18686,7 @@ function registerRenderRoutes(api, adapter2) {
     const rendersDir = adapter2.rendersDir(project);
     const fp = join12(rendersDir, filename);
     if (!existsSync10(fp)) return c2.json({ error: "not found" }, 404);
-    const isWebm = fp.endsWith(".webm");
-    const contentType = isWebm ? "video/webm" : "video/mp4";
+    const contentType = renderContentType(fp);
     const content = readFileSync11(fp);
     return new Response(content, {
       headers: {
@@ -18670,10 +18702,10 @@ function registerRenderRoutes(api, adapter2) {
     if (!project) return c2.json({ error: "not found" }, 404);
     const rendersDir = adapter2.rendersDir(project);
     if (!existsSync10(rendersDir)) return c2.json({ renders: [] });
-    const files = readdirSync5(rendersDir).filter((f) => f.endsWith(".mp4") || f.endsWith(".webm")).map((f) => {
+    const files = readdirSync5(rendersDir).filter((f) => f.endsWith(".mp4") || f.endsWith(".webm") || f.endsWith(".mov")).map((f) => {
       const fp = join12(rendersDir, f);
       const stat = statSync3(fp);
-      const rid = f.replace(/\.(mp4|webm)$/, "");
+      const rid = f.replace(/\.(mp4|webm|mov)$/, "");
       const metaPath = join12(rendersDir, `${rid}.meta.json`);
       let status = "complete";
       let durationMs;
@@ -20561,6 +20593,14 @@ function getEncoderPreset(quality, format = "mp4") {
       pixelFormat: "yuva420p"
     };
   }
+  if (format === "mov") {
+    return {
+      preset: "4444",
+      quality: base.quality,
+      codec: "prores",
+      pixelFormat: "yuva444p10le"
+    };
+  }
   return { ...base, pixelFormat: "yuv420p" };
 }
 function buildEncoderArgs(options, inputArgs, outputPath, gpuEncoder = null) {
@@ -20610,6 +20650,13 @@ function buildEncoderArgs(options, inputArgs, outputPath, gpuEncoder = null) {
       args.push("-c:v", encoderName, "-preset", preset);
       if (bitrate) args.push("-b:v", bitrate);
       else args.push("-crf", String(quality));
+      const xParamsFlag = codec === "h264" ? "-x264-params" : "-x265-params";
+      const colorParams = "colorprim=bt709:transfer=bt709:colormatrix=bt709";
+      if (preset === "ultrafast") {
+        args.push(xParamsFlag, `aq-mode=3:${colorParams}`);
+      } else {
+        args.push(xParamsFlag, `aq-mode=3:aq-strength=0.8:deblock=1,1:${colorParams}`);
+      }
     }
   } else if (codec === "vp9") {
     args.push("-c:v", "libvpx-vp9", "-b:v", bitrate || "0", "-crf", String(quality));
@@ -20621,8 +20668,30 @@ function buildEncoderArgs(options, inputArgs, outputPath, gpuEncoder = null) {
     }
   } else if (codec === "prores") {
     args.push("-c:v", "prores_ks", "-profile:v", preset, "-vendor", "apl0");
+    args.push("-pix_fmt", pixelFormat);
     return [...args, "-y", outputPath];
   }
+  if (codec === "h264" || codec === "h265") {
+    args.push(
+      "-colorspace:v",
+      "bt709",
+      "-color_primaries:v",
+      "bt709",
+      "-color_trc:v",
+      "bt709",
+      "-color_range",
+      "tv"
+    );
+    if (gpuEncoder === "vaapi") {
+      const vfIdx = args.indexOf("-vf");
+      if (vfIdx !== -1) {
+        args[vfIdx + 1] = `scale=in_range=pc:out_range=tv,${args[vfIdx + 1]}`;
+      }
+    } else if (!shouldUseGpu) {
+      args.push("-vf", "scale=in_range=pc:out_range=tv");
+    }
+    args.push("-video_track_timescale", "90000");
+  }
   if (gpuEncoder !== "vaapi") {
     args.push("-pix_fmt", pixelFormat);
   }
@@ -20746,7 +20815,7 @@ async function encodeFramesChunkedConcat(framesDir, framePattern, outputPath, op
     }
     const startNumber = i * chunkSize;
     const framesInChunk = Math.min(chunkSize, files.length - startNumber);
-    const ext = outputPath.endsWith(".webm") ? ".webm" : ".mp4";
+    const ext = outputPath.endsWith(".webm") ? ".webm" : outputPath.endsWith(".mov") ? ".mov" : ".mp4";
     const chunkPath = join17(chunkDir, `chunk_${String(i).padStart(4, "0")}${ext}`);
     const inputPath = join17(framesDir, framePattern);
     const inputArgs = [
@@ -20840,9 +20909,12 @@ async function muxVideoWithAudio(videoPath, audioPath, outputPath, signal, confi
   const outputDir = dirname4(outputPath);
   if (!existsSync15(outputDir)) mkdirSync9(outputDir, { recursive: true });
   const isWebm = outputPath.endsWith(".webm");
+  const isMov = outputPath.endsWith(".mov");
   const args = ["-i", videoPath, "-i", audioPath, "-c:v", "copy"];
   if (isWebm) {
     args.push("-c:a", "libopus", "-b:a", "128k");
+  } else if (isMov) {
+    args.push("-c:a", "aac", "-b:a", "192k");
   } else {
     args.push("-c:a", "aac", "-b:a", "192k", "-movflags", "+faststart");
   }
@@ -20865,7 +20937,7 @@ async function muxVideoWithAudio(videoPath, audioPath, outputPath, signal, confi
   };
 }
 async function applyFaststart(inputPath, outputPath, signal, config) {
-  if (outputPath.endsWith(".webm")) {
+  if (outputPath.endsWith(".webm") || outputPath.endsWith(".mov")) {
     if (inputPath !== outputPath) copyFileSync(inputPath, outputPath);
     return { success: true, outputPath, durationMs: 0 };
   }
@@ -20993,6 +21065,13 @@ function buildStreamingArgs(options, outputPath, gpuEncoder = null) {
       args.push("-c:v", encoderName, "-preset", preset);
       if (bitrate) args.push("-b:v", bitrate);
       else args.push("-crf", String(quality));
+      const xParamsFlag = codec === "h264" ? "-x264-params" : "-x265-params";
+      const colorParams = "colorprim=bt709:transfer=bt709:colormatrix=bt709";
+      if (preset === "ultrafast") {
+        args.push(xParamsFlag, `aq-mode=3:${colorParams}`);
+      } else {
+        args.push(xParamsFlag, `aq-mode=3:aq-strength=0.8:deblock=1,1:${colorParams}`);
+      }
     }
   } else if (codec === "vp9") {
     args.push("-c:v", "libvpx-vp9", "-b:v", bitrate || "0", "-crf", String(quality));
@@ -21004,8 +21083,30 @@ function buildStreamingArgs(options, outputPath, gpuEncoder = null) {
     }
   } else if (codec === "prores") {
     args.push("-c:v", "prores_ks", "-profile:v", preset, "-vendor", "apl0");
+    args.push("-pix_fmt", pixelFormat);
     return [...args, "-y", outputPath];
   }
+  if (codec === "h264" || codec === "h265") {
+    args.push(
+      "-colorspace:v",
+      "bt709",
+      "-color_primaries:v",
+      "bt709",
+      "-color_trc:v",
+      "bt709",
+      "-color_range",
+      "tv"
+    );
+    if (gpuEncoder === "vaapi") {
+      const vfIdx = args.indexOf("-vf");
+      if (vfIdx !== -1) {
+        args[vfIdx + 1] = `scale=in_range=pc:out_range=tv,${args[vfIdx + 1]}`;
+      }
+    } else if (!shouldUseGpu) {
+      args.push("-vf", "scale=in_range=pc:out_range=tv");
+    }
+    args.push("-video_track_timescale", "90000");
+  }
   if (gpuEncoder !== "vaapi") {
     args.push("-pix_fmt", pixelFormat);
   }
@@ -22915,6 +23016,17 @@ async function bundleToSingleHtml(projectDir, options) {
     const contentHtml = contentRoot ? contentRoot.innerHTML || "" : compDoc.body.innerHTML || "";
     const contentDoc = parseHTMLContent(contentHtml);
     const innerRoot = compId ? contentDoc.querySelector(`[data-composition-id="${compId}"]`) : contentDoc.querySelector("[data-composition-id]");
+    if (!contentRoot && compDoc.head) {
+      for (const s of [...compDoc.head.querySelectorAll("style")]) {
+        compStyleChunks.push(rewriteCssAssetUrls(s.textContent || "", src));
+      }
+      for (const s of [...compDoc.head.querySelectorAll("script")]) {
+        const externalSrc = (s.getAttribute("src") || "").trim();
+        if (externalSrc && !compExternalScriptSrcs.includes(externalSrc)) {
+          compExternalScriptSrcs.push(externalSrc);
+        }
+      }
+    }
     for (const s of [...contentDoc.querySelectorAll("style")]) {
       compStyleChunks.push(rewriteCssAssetUrls(s.textContent || "", src));
       s.remove();
@@ -24095,6 +24207,26 @@ function inlineSubCompositions(html, subCompositions, projectDir) {
     const contentDoc = parseHTML(contentHtml).document;
     const innerRoot = compId ? contentDoc.querySelector(`[data-composition-id="${compId}"]`) : contentDoc.querySelector("[data-composition-id]");
     const inferredCompId = innerRoot?.getAttribute("data-composition-id")?.trim() || null;
+    if (!templateEl) {
+      const compHead = compDoc.querySelector("head");
+      if (compHead) {
+        for (const styleEl of compHead.querySelectorAll("style")) {
+          const css = rewriteCssAssetUrls(styleEl.textContent || "", srcPath);
+          const scopeId = compId || inferredCompId;
+          if (scopeId && css.trim()) {
+            collectedStyles.push(scopeCssToComposition(css, scopeId));
+          } else {
+            collectedStyles.push(css);
+          }
+        }
+        for (const scriptEl of compHead.querySelectorAll("script")) {
+          const src = (scriptEl.getAttribute("src") || "").trim();
+          if (src && !collectedExternalScriptSrcs.includes(src)) {
+            collectedExternalScriptSrcs.push(src);
+          }
+        }
+      }
+    }
     for (const styleEl of contentDoc.querySelectorAll("style")) {
       const css = rewriteCssAssetUrls(styleEl.textContent || "", srcPath);
       const scopeId = compId || inferredCompId;
@@ -24702,7 +24834,9 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
   const cfg = { ...job.config.producerConfig ?? resolveConfig() };
   const outputFormat = job.config.format ?? "mp4";
   const isWebm = outputFormat === "webm";
-  if (isWebm) {
+  const isMov = outputFormat === "mov";
+  const needsAlpha = isWebm || isMov;
+  if (needsAlpha) {
     cfg.forceScreenshot = true;
   }
   const enableChunkedEncode = cfg.enableChunkedEncode;
@@ -24791,8 +24925,8 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
         width,
         height,
         fps: job.config.fps,
-        format: isWebm ? "png" : "jpeg",
-        quality: isWebm ? void 0 : 80
+        format: needsAlpha ? "png" : "jpeg",
+        quality: needsAlpha ? void 0 : 80
       };
       probeSession = await createCaptureSession(
         fileServer.url,
@@ -25032,11 +25166,12 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       width,
       height,
       fps: job.config.fps,
-      format: isWebm ? "png" : "jpeg",
-      quality: isWebm ? void 0 : job.config.quality === "draft" ? 80 : 95
+      format: needsAlpha ? "png" : "jpeg",
+      quality: needsAlpha ? void 0 : job.config.quality === "draft" ? 80 : 95
     };
     const workerCount = calculateOptimalWorkers(job.totalFrames, job.config.workers, cfg);
-    const videoExt = isWebm ? ".webm" : ".mp4";
+    const FORMAT_EXT2 = { mp4: ".mp4", webm: ".webm", mov: ".mov" };
+    const videoExt = FORMAT_EXT2[outputFormat] ?? ".mp4";
     const videoOnlyPath = join26(workDir, `video-only${videoExt}`);
     const preset = getEncoderPreset(job.config.quality, outputFormat);
     job.framesRendered = 0;
@@ -25222,7 +25357,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
       perfStages.captureMs = Date.now() - stage4Start;
       const stage5Start = Date.now();
       updateJobStatus(job, "encoding", "Encoding video", 75, onProgress);
-      const frameExt = isWebm ? "png" : "jpg";
+      const frameExt = needsAlpha ? "png" : "jpg";
       const framePattern = `frame_%06d.${frameExt}`;
       const encoderOpts = {
         fps: job.config.fps,
@@ -25316,7 +25451,7 @@ async function executeRenderJob(job, projectDir, outputPath, onProgress, abortSi
     }
     if (job.config.debug) {
       if (existsSync26(outputPath)) {
-        const debugOutput = join26(workDir, isWebm ? "output.webm" : "output.mp4");
+        const debugOutput = join26(workDir, `output${videoExt}`);
         copyFileSync2(outputPath, debugOutput);
       }
     } else {
@@ -25590,7 +25725,7 @@ function parseRenderOptions(body) {
   const debug = body.debug === true;
   const outputPath = typeof body.outputPath === "string" && body.outputPath.trim().length > 0 ? body.outputPath : typeof body.output === "string" && body.output.trim().length > 0 ? body.output : null;
   const entryFile = typeof body.entryFile === "string" && body.entryFile.trim().length > 0 ? body.entryFile.trim() : void 0;
-  const format = ["mp4", "webm"].includes(body.format) ? body.format : void 0;
+  const format = ["mp4", "webm", "mov"].includes(body.format) ? body.format : void 0;
   return { outputPath, fps, quality, workers, useGpu, debug, entryFile, format };
 }
 async function prepareRenderBody(body) {
@@ -26195,7 +26330,7 @@ function createStudioServer(options) {
           await executeRenderJob2(job, opts.project.dir, opts.outputPath, onProgress);
           state.status = "complete";
           state.progress = 100;
-          const metaPath = opts.outputPath.replace(/\.(mp4|webm)$/, ".meta.json");
+          const metaPath = opts.outputPath.replace(/\.(mp4|webm|mov)$/, ".meta.json");
           writeFileSync10(
             metaPath,
             JSON.stringify({ status: "complete", durationMs: Date.now() - startTime })
@@ -26204,7 +26339,7 @@ function createStudioServer(options) {
           state.status = "failed";
           state.error = err instanceof Error ? err.message : String(err);
           try {
-            const metaPath = opts.outputPath.replace(/\.(mp4|webm)$/, ".meta.json");
+            const metaPath = opts.outputPath.replace(/\.(mp4|webm|mov)$/, ".meta.json");
             writeFileSync10(metaPath, JSON.stringify({ status: "failed" }));
           } catch {
           }
@@ -26403,7 +26538,7 @@ async function runDevMode(dir, projectName) {
       console.log();
       console.log(`  ${c.dim("Press Ctrl+C to stop")}`);
       console.log();
-      const urlToOpen = `${frontendUrl}#/project/${pName}`;
+      const urlToOpen = `${frontendUrl}#project/${pName}`;
       import("open").then((mod) => mod.default(urlToOpen)).catch(() => {
       });
       child.stdout?.removeListener("data", handleOutput);
@@ -27520,30 +27655,149 @@ __export(render_exports, {
   default: () => render_default,
   examples: () => examples4
 });
-import { existsSync as existsSync34, mkdirSync as mkdirSync20, statSync as statSync12 } from "fs";
-import { cpus as cpus3, freemem as freemem3 } from "os";
-import { resolve as resolve20, dirname as dirname14, join as join33 } from "path";
+import { mkdirSync as mkdirSync20, readFileSync as readFileSync23, statSync as statSync12, writeFileSync as writeFileSync12, rmSync as rmSync8 } from "fs";
+import { cpus as cpus3, freemem as freemem3, tmpdir as tmpdir3 } from "os";
+import { resolve as resolve20, dirname as dirname14, join as join33, basename as basename6 } from "path";
+import { execFileSync as execFileSync5, spawn as spawn10 } from "child_process";
 function defaultWorkerCount() {
   return Math.max(1, Math.min(Math.floor(CPU_CORE_COUNT * 3 / 4), 8));
 }
+function dockerImageTag(version) {
+  return `${DOCKER_IMAGE_PREFIX}:${version}`;
+}
+function resolveDockerfilePath() {
+  const builtPath = resolve20(__dirname, "docker", "Dockerfile.render");
+  const devPath = resolve20(__dirname, "..", "src", "docker", "Dockerfile.render");
+  for (const p of [builtPath, devPath]) {
+    try {
+      statSync12(p);
+      return p;
+    } catch {
+      continue;
+    }
+  }
+  throw new Error("Dockerfile.render not found \u2014 CLI package may be corrupted");
+}
+function dockerImageExists(tag) {
+  try {
+    execFileSync5("docker", ["image", "inspect", tag], { stdio: "pipe", timeout: 1e4 });
+    return true;
+  } catch {
+    return false;
+  }
+}
+function ensureDockerImage(version, quiet) {
+  const tag = dockerImageTag(version);
+  if (dockerImageExists(tag)) {
+    if (!quiet) console.log(c.dim(`  Docker image: ${tag} (cached)`));
+    return tag;
+  }
+  if (!quiet) console.log(c.dim(`  Building Docker image: ${tag}...`));
+  const dockerfilePath = resolveDockerfilePath();
+  const tmpDir = join33(tmpdir3(), `hyperframes-docker-${Date.now()}`);
+  mkdirSync20(tmpDir, { recursive: true });
+  writeFileSync12(join33(tmpDir, "Dockerfile"), readFileSync23(dockerfilePath));
+  try {
+    execFileSync5(
+      "docker",
+      [
+        "build",
+        "--platform",
+        "linux/amd64",
+        "--build-arg",
+        `HYPERFRAMES_VERSION=${version}`,
+        "-t",
+        tag,
+        tmpDir
+      ],
+      { stdio: quiet ? "pipe" : "inherit", timeout: 6e5 }
+    );
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    throw new Error(`Failed to build Docker image: ${message}`);
+  } finally {
+    rmSync8(tmpDir, { recursive: true, force: true });
+  }
+  if (!quiet) console.log(c.dim(`  Docker image: ${tag} (built)`));
+  return tag;
+}
 async function renderDocker(projectDir, outputPath, options) {
-  const producer = await loadProducer();
   const startTime = Date.now();
-  let job;
+  const dockerVersion = isDevMode() ? "latest" : VERSION;
+  if (!options.quiet && isDevMode()) {
+    console.log(c.dim("  Dev mode: using hyperframes@latest in Docker image"));
+  }
+  let imageTag;
+  try {
+    imageTag = ensureDockerImage(dockerVersion, options.quiet);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    const isDockerMissing = /connect|not found|ENOENT/i.test(message);
+    errorBox(
+      isDockerMissing ? "Docker not available" : "Docker image build failed",
+      message,
+      isDockerMissing ? "Install Docker: https://docs.docker.com/get-docker/" : "Check Docker is running: docker info"
+    );
+    process.exit(1);
+  }
+  const outputDir = dirname14(outputPath);
+  const outputFilename = basename6(outputPath);
+  const dockerArgs = [
+    "run",
+    "--rm",
+    "--platform",
+    "linux/amd64",
+    "--shm-size=2g",
+    // GPU encoding requires host GPU passthrough
+    ...options.gpu ? ["--gpus", "all"] : [],
+    "-v",
+    `${resolve20(projectDir)}:/project:ro`,
+    "-v",
+    `${resolve20(outputDir)}:/output`,
+    imageTag,
+    "/project",
+    "--output",
+    `/output/${outputFilename}`,
+    "--fps",
+    String(options.fps),
+    "--quality",
+    options.quality,
+    "--format",
+    options.format,
+    "--workers",
+    String(options.workers),
+    ...options.quiet ? ["--quiet"] : [],
+    ...options.gpu ? ["--gpu"] : []
+  ];
+  if (!options.quiet) {
+    console.log(c.dim("  Running render in Docker container..."));
+    console.log("");
+  }
   try {
-    job = producer.createRenderJob({
-      fps: options.fps,
-      quality: options.quality,
-      format: options.format,
-      workers: options.workers,
-      useGpu: options.gpu
+    await new Promise((resolvePromise, reject) => {
+      const child = spawn10("docker", dockerArgs, {
+        // When quiet, still show stderr so container errors surface
+        stdio: options.quiet ? ["pipe", "pipe", "inherit"] : "inherit"
+      });
+      child.on("close", (code) => {
+        if (code === 0) resolvePromise();
+        else reject(new Error(`Docker render exited with code ${code}`));
+      });
+      child.on("error", (err) => reject(err));
     });
-    await producer.executeRenderJob(job, projectDir, outputPath);
   } catch (error) {
     handleRenderError(error, options, startTime, true, "Check Docker is running: docker info");
   }
   const elapsed = Date.now() - startTime;
-  trackRenderMetrics(job, elapsed, options, true);
+  trackRenderComplete({
+    durationMs: elapsed,
+    fps: options.fps,
+    quality: options.quality,
+    workers: options.workers,
+    docker: true,
+    gpu: options.gpu,
+    ...getMemorySnapshot()
+  });
   printRenderComplete(outputPath, elapsed, options.quiet);
 }
 async function renderLocal(projectDir, outputPath, options) {
@@ -27616,16 +27870,16 @@ function trackRenderMetrics(job, elapsedMs, options, docker) {
 function printRenderComplete(outputPath, elapsedMs, quiet) {
   if (quiet) return;
   let fileSize = "unknown";
-  if (existsSync34(outputPath)) {
-    const stat = statSync12(outputPath);
-    fileSize = formatBytes(stat.size);
+  try {
+    fileSize = formatBytes(statSync12(outputPath).size);
+  } catch {
   }
   const duration = formatDuration(elapsedMs);
   console.log("");
   console.log(c.success("\u25C7") + "  " + c.accent(outputPath));
   console.log("   " + c.bold(fileSize) + c.dim(" \xB7 " + duration + " \xB7 completed"));
 }
-var examples4, VALID_FPS, VALID_QUALITY, VALID_FORMAT, CPU_CORE_COUNT, render_default;
+var examples4, VALID_FPS, VALID_QUALITY, VALID_FORMAT, FORMAT_EXT, CPU_CORE_COUNT, render_default, DOCKER_IMAGE_PREFIX;
 var init_render2 = __esm({
   "src/commands/render.ts"() {
     "use strict";
@@ -27639,8 +27893,11 @@ var init_render2 = __esm({
     init_progress();
     init_events();
     init_system();
+    init_version();
+    init_env();
     examples4 = [
       ["Render to MP4", "hyperframes render --output output.mp4"],
+      ["Render transparent overlay (ProRes)", "hyperframes render --format mov --output overlay.mov"],
       ["Render transparent WebM overlay", "hyperframes render --format webm --output overlay.webm"],
       ["High quality at 60fps", "hyperframes render --fps 60 --quality high --output hd.mp4"],
       ["Deterministic render via Docker", "hyperframes render --docker --output deterministic.mp4"],
@@ -27648,12 +27905,13 @@ var init_render2 = __esm({
     ];
     VALID_FPS = /* @__PURE__ */ new Set([24, 30, 60]);
     VALID_QUALITY = /* @__PURE__ */ new Set(["draft", "standard", "high"]);
-    VALID_FORMAT = /* @__PURE__ */ new Set(["mp4", "webm"]);
+    VALID_FORMAT = /* @__PURE__ */ new Set(["mp4", "webm", "mov"]);
+    FORMAT_EXT = { mp4: ".mp4", webm: ".webm", mov: ".mov" };
     CPU_CORE_COUNT = cpus3().length;
     render_default = defineCommand({
       meta: {
         name: "render",
-        description: "Render a composition to MP4 or WebM"
+        description: "Render a composition to MP4, WebM, or MOV"
       },
       args: {
         dir: {
@@ -27677,7 +27935,7 @@ var init_render2 = __esm({
         },
         format: {
           type: "string",
-          description: "Output format: mp4, webm (WebM renders with transparency)",
+          description: "Output format: mp4, webm, mov (MOV/WebM render with transparency)",
           default: "mp4"
         },
         workers: {
@@ -27722,7 +27980,7 @@ var init_render2 = __esm({
         const quality = qualityRaw;
         const formatRaw = args.format ?? "mp4";
         if (!VALID_FORMAT.has(formatRaw)) {
-          errorBox("Invalid format", `Got "${formatRaw}". Must be mp4 or webm.`);
+          errorBox("Invalid format", `Got "${formatRaw}". Must be mp4, webm, or mov.`);
           process.exit(1);
         }
         const format = formatRaw;
@@ -27736,7 +27994,7 @@ var init_render2 = __esm({
           workers = parsed;
         }
         const rendersDir = resolve20("renders");
-        const ext = format === "webm" ? ".webm" : ".mp4";
+        const ext = FORMAT_EXT[format] ?? ".mp4";
         const now = /* @__PURE__ */ new Date();
         const datePart = now.toISOString().slice(0, 10);
         const timePart = now.toTimeString().slice(0, 8).replace(/:/g, "-");
@@ -27839,6 +28097,7 @@ var init_render2 = __esm({
         }
       }
     });
+    DOCKER_IMAGE_PREFIX = "hyperframes-renderer";
   }
 });
 
@@ -28059,7 +28318,7 @@ __export(info_exports, {
   default: () => info_default,
   examples: () => examples6
 });
-import { readFileSync as readFileSync23, readdirSync as readdirSync11, statSync as statSync13 } from "fs";
+import { readFileSync as readFileSync24, readdirSync as readdirSync11, statSync as statSync13 } from "fs";
 import { join as join34 } from "path";
 function totalSize(dir) {
   let total = 0;
@@ -28096,7 +28355,7 @@ var init_info = __esm({
       },
       async run({ args }) {
         const project = resolveProject(args.dir);
-        const html = readFileSync23(project.indexPath, "utf-8");
+        const html = readFileSync24(project.indexPath, "utf-8");
         ensureDOMParser();
         const parsed = parseHtml(html);
         const tracks = new Set(parsed.elements.map((el) => el.zIndex));
@@ -28152,7 +28411,7 @@ __export(compositions_exports, {
   default: () => compositions_default,
   examples: () => examples7
 });
-import { existsSync as existsSync35, readFileSync as readFileSync24 } from "fs";
+import { existsSync as existsSync34, readFileSync as readFileSync25 } from "fs";
 import { resolve as resolve21, dirname as dirname15 } from "path";
 function parseCompositions(html, baseDir) {
   const parser = new DOMParser();
@@ -28166,8 +28425,8 @@ function parseCompositions(html, baseDir) {
     const compositionSrc = div.getAttribute("data-composition-src");
     if (compositionSrc) {
       const subPath = resolve21(baseDir, compositionSrc);
-      if (existsSync35(subPath)) {
-        const subHtml = readFileSync24(subPath, "utf-8");
+      if (existsSync34(subPath)) {
+        const subHtml = readFileSync25(subPath, "utf-8");
         const subInfo = parseSubComposition(subHtml, id, width, height);
         compositions.push({ ...subInfo, source: compositionSrc });
         return;
@@ -28261,7 +28520,7 @@ var init_compositions = __esm({
       },
       async run({ args }) {
         const project = resolveProject(args.dir);
-        const html = readFileSync24(project.indexPath, "utf-8");
+        const html = readFileSync25(project.indexPath, "utf-8");
         ensureDOMParser();
         const compositions = parseCompositions(html, dirname15(project.indexPath));
         if (compositions.length === 0) {
@@ -28299,7 +28558,7 @@ __export(benchmark_exports, {
   default: () => benchmark_default,
   examples: () => examples8
 });
-import { existsSync as existsSync36, statSync as statSync14 } from "fs";
+import { existsSync as existsSync35, statSync as statSync14 } from "fs";
 import { resolve as resolve22, join as join35 } from "path";
 var examples8, DEFAULT_CONFIGS, benchmark_default;
 var init_benchmark = __esm({
@@ -28389,7 +28648,7 @@ var init_benchmark = __esm({
               await producer.executeRenderJob(job, project.dir, outputPath);
               const elapsedMs = Date.now() - startTime;
               let fileSize = null;
-              if (existsSync36(outputPath)) {
+              if (existsSync35(outputPath)) {
                 const stat = statSync14(outputPath);
                 fileSize = stat.size;
               }
@@ -28605,7 +28864,7 @@ __export(transcribe_exports2, {
   default: () => transcribe_default,
   examples: () => examples10
 });
-import { existsSync as existsSync37, writeFileSync as writeFileSync12 } from "fs";
+import { existsSync as existsSync36, writeFileSync as writeFileSync13 } from "fs";
 import { resolve as resolve23, join as join36, extname as extname7 } from "path";
 async function importTranscript(inputPath, dir, json) {
   const { loadTranscript: loadTranscript2, patchCaptionHtml: patchCaptionHtml2 } = await Promise.resolve().then(() => (init_normalize(), normalize_exports));
@@ -28615,7 +28874,7 @@ async function importTranscript(inputPath, dir, json) {
     process.exit(1);
   }
   const outPath = join36(dir, "transcript.json");
-  writeFileSync12(outPath, JSON.stringify(words, null, 2));
+  writeFileSync13(outPath, JSON.stringify(words, null, 2));
   patchCaptionHtml2(dir, words);
   if (json) {
     console.log(
@@ -28650,7 +28909,7 @@ async function transcribeAudio(inputPath, dir, opts) {
         );
       }
     }
-    writeFileSync12(result.transcriptPath, JSON.stringify(words, null, 2));
+    writeFileSync13(result.transcriptPath, JSON.stringify(words, null, 2));
     patchCaptionHtml2(dir, words);
     if (opts.json) {
       console.log(
@@ -28731,7 +28990,7 @@ var init_transcribe2 = __esm({
       },
       async run({ args }) {
         const inputPath = resolve23(args.input);
-        if (!existsSync37(inputPath)) {
+        if (!existsSync36(inputPath)) {
           console.error(c.error(`File not found: ${args.input}`));
           process.exit(1);
         }
@@ -28752,12 +29011,12 @@ var init_transcribe2 = __esm({
 });
 
 // src/tts/manager.ts
-import { existsSync as existsSync38, mkdirSync as mkdirSync21 } from "fs";
+import { existsSync as existsSync37, mkdirSync as mkdirSync21 } from "fs";
 import { homedir as homedir6 } from "os";
 import { join as join37 } from "path";
 async function ensureModel2(model = DEFAULT_MODEL2, options) {
   const modelPath = join37(MODELS_DIR2, `${model}.onnx`);
-  if (existsSync38(modelPath)) return modelPath;
+  if (existsSync37(modelPath)) return modelPath;
   const url = MODEL_URLS[model];
   if (!url) {
     throw new Error(
@@ -28767,18 +29026,18 @@ async function ensureModel2(model = DEFAULT_MODEL2, options) {
   mkdirSync21(MODELS_DIR2, { recursive: true });
   options?.onProgress?.(`Downloading TTS model ${model} (~311 MB)...`);
   await downloadFile(url, modelPath);
-  if (!existsSync38(modelPath)) {
+  if (!existsSync37(modelPath)) {
     throw new Error(`Model download failed: ${model}`);
   }
   return modelPath;
 }
 async function ensureVoices(options) {
   const voicesPath = join37(VOICES_DIR, "voices-v1.0.bin");
-  if (existsSync38(voicesPath)) return voicesPath;
+  if (existsSync37(voicesPath)) return voicesPath;
   mkdirSync21(VOICES_DIR, { recursive: true });
   options?.onProgress?.("Downloading voice data (~27 MB)...");
   await downloadFile(VOICES_URL, voicesPath);
-  if (!existsSync38(voicesPath)) {
+  if (!existsSync37(voicesPath)) {
     throw new Error("Voice data download failed");
   }
   return voicesPath;
@@ -28815,19 +29074,19 @@ var synthesize_exports = {};
 __export(synthesize_exports, {
   synthesize: () => synthesize
 });
-import { execFileSync as execFileSync5 } from "child_process";
-import { existsSync as existsSync39, writeFileSync as writeFileSync13, mkdirSync as mkdirSync22 } from "fs";
+import { execFileSync as execFileSync6 } from "child_process";
+import { existsSync as existsSync38, writeFileSync as writeFileSync14, mkdirSync as mkdirSync22 } from "fs";
 import { join as join38, dirname as dirname16 } from "path";
 import { homedir as homedir7 } from "os";
 function findPython() {
   for (const name of ["python3", "python"]) {
     try {
-      const result = execFileSync5("which", [name], {
+      const result = execFileSync6("which", [name], {
         encoding: "utf-8",
         stdio: ["pipe", "pipe", "pipe"],
         timeout: 5e3
       }).trim();
-      const version = execFileSync5(result, ["--version"], {
+      const version = execFileSync6(result, ["--version"], {
         encoding: "utf-8",
         stdio: ["pipe", "pipe", "pipe"],
         timeout: 5e3
@@ -28840,7 +29099,7 @@ function findPython() {
 }
 function hasPythonPackage(python, pkg) {
   try {
-    execFileSync5(python, ["-c", `import ${pkg}`], {
+    execFileSync6(python, ["-c", `import ${pkg}`], {
       stdio: ["pipe", "pipe", "pipe"],
       timeout: 1e4
     });
@@ -28850,9 +29109,9 @@ function hasPythonPackage(python, pkg) {
   }
 }
 function ensureSynthScript() {
-  if (!existsSync39(SCRIPT_PATH)) {
+  if (!existsSync38(SCRIPT_PATH)) {
     mkdirSync22(SCRIPT_DIR, { recursive: true });
-    writeFileSync13(SCRIPT_PATH, SYNTH_SCRIPT);
+    writeFileSync14(SCRIPT_PATH, SYNTH_SCRIPT);
   }
   return SCRIPT_PATH;
 }
@@ -28882,7 +29141,7 @@ async function synthesize(text, outputPath, options) {
   mkdirSync22(dirname16(outputPath), { recursive: true });
   options?.onProgress?.(`Generating speech with voice ${voice}...`);
   try {
-    const stdout2 = execFileSync5(
+    const stdout2 = execFileSync6(
       python,
       [scriptPath, modelPath, voicesPath, text, voice, String(speed), outputPath],
       {
@@ -28891,7 +29150,7 @@ async function synthesize(text, outputPath, options) {
         stdio: ["pipe", "pipe", "pipe"]
       }
     );
-    if (!existsSync39(outputPath)) {
+    if (!existsSync38(outputPath)) {
       throw new Error("Synthesis completed but no output file was created");
     }
     const lines = stdout2.trim().split("\n");
@@ -28903,7 +29162,7 @@ async function synthesize(text, outputPath, options) {
       durationSeconds: result.durationSeconds
     };
   } catch (err) {
-    if (err instanceof SyntaxError && existsSync39(outputPath)) {
+    if (err instanceof SyntaxError && existsSync38(outputPath)) {
       throw new Error(
         "Speech was generated but metadata could not be read. Check the output file manually."
       );
@@ -28957,7 +29216,7 @@ __export(tts_exports, {
   default: () => tts_default,
   examples: () => examples11
 });
-import { existsSync as existsSync40, readFileSync as readFileSync25 } from "fs";
+import { existsSync as existsSync39, readFileSync as readFileSync26 } from "fs";
 import { resolve as resolve24, extname as extname8 } from "path";
 function listVoices(json) {
   if (json) {
@@ -29047,8 +29306,8 @@ var init_tts = __esm({
         }
         let text;
         const maybeFile = resolve24(args.input);
-        if (existsSync40(maybeFile) && extname8(maybeFile).toLowerCase() === ".txt") {
-          text = readFileSync25(maybeFile, "utf-8").trim();
+        if (existsSync39(maybeFile) && extname8(maybeFile).toLowerCase() === ".txt") {
+          text = readFileSync26(maybeFile, "utf-8").trim();
           if (!text) {
             console.error(c.error("File is empty."));
             process.exit(1);
@@ -29113,7 +29372,7 @@ __export(docs_exports, {
   default: () => docs_default,
   examples: () => examples12
 });
-import { readFileSync as readFileSync26, existsSync as existsSync41 } from "fs";
+import { readFileSync as readFileSync27, existsSync as existsSync40 } from "fs";
 import { resolve as resolve25, dirname as dirname17, join as join39 } from "path";
 import { fileURLToPath as fileURLToPath6 } from "url";
 function docsDir() {
@@ -29121,7 +29380,7 @@ function docsDir() {
   const dir = dirname17(thisFile);
   const devPath = resolve25(dir, "..", "docs");
   const builtPath = resolve25(dir, "docs");
-  return existsSync41(devPath) ? devPath : builtPath;
+  return existsSync40(devPath) ? devPath : builtPath;
 }
 function formatInlineCode(line) {
   return line.replace(/`([^`]+)`/g, (_match, code) => c.accent(code));
@@ -29219,11 +29478,11 @@ var init_docs = __esm({
           process.exit(1);
         }
         const filePath = join39(docsDir(), entry.file);
-        if (!existsSync41(filePath)) {
+        if (!existsSync40(filePath)) {
           console.error(c.error(`Doc file not found: ${filePath}`));
           process.exit(1);
         }
-        const content = readFileSync26(filePath, "utf-8");
+        const content = readFileSync27(filePath, "utf-8");
         console.log();
         renderMarkdown(content);
       }
@@ -29637,7 +29896,7 @@ var validate_exports = {};
 __export(validate_exports, {
   default: () => validate_default
 });
-import { existsSync as existsSync42, readFileSync as readFileSync27 } from "fs";
+import { existsSync as existsSync41, readFileSync as readFileSync28 } from "fs";
 import { resolve as resolve26, join as join40, dirname as dirname18 } from "path";
 import { fileURLToPath as fileURLToPath7 } from "url";
 async function validateInBrowser(projectDir, opts) {
@@ -29653,8 +29912,8 @@ async function validateInBrowser(projectDir, opts) {
     "dist",
     "hyperframe.runtime.iife.js"
   );
-  if (existsSync42(runtimePath)) {
-    const runtimeSource = readFileSync27(runtimePath, "utf-8");
+  if (existsSync41(runtimePath)) {
+    const runtimeSource = readFileSync28(runtimePath, "utf-8");
     html = html.replace(
       /<script[^>]*data-hyperframes-preview-runtime[^>]*src="[^"]*"[^>]*><\/script>/,
       `<script data-hyperframes-preview-runtime="1">${runtimeSource}</script>`
@@ -29670,9 +29929,9 @@ async function validateInBrowser(projectDir, opts) {
       return;
     }
     const filePath = join40(projectDir, decodeURIComponent(url));
-    if (existsSync42(filePath)) {
+    if (existsSync41(filePath)) {
       res.writeHead(200, { "Content-Type": getMimeType2(filePath) });
-      res.end(readFileSync27(filePath));
+      res.end(readFileSync28(filePath));
       return;
     }
     res.writeHead(404);