@vibeo/renderer 0.1.0

package/dist/seek-to-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"seek-to-frame.d.ts","sourceRoot":"","sources":["../src/seek-to-frame.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAEvC;;;;;;;GAOG;AACH,wBAAsB,WAAW,CAC/B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,MAAM,EACb,aAAa,EAAE,MAAM,GACpB,OAAO,CAAC,IAAI,CAAC,CAqDf;AAED;;GAEG;AACH,wBAAsB,UAAU,CAC9B,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,MAAM,GACV,OAAO,CAAC,IAAI,CAAC,CAaf"}

package/dist/seek-to-frame.js

@@ -0,0 +1,58 @@
+/**
+ * Navigate the headless browser page to render a specific frame.
+ *
+ * 1. Call window.vibeo_setFrame(frame, compositionId) to update the React tree.
+ * 2. Wait for React render to complete (poll for window.vibeo_ready flag).
+ * 3. Wait for all fonts to load.
+ * 4. Wait for any pending delayRender handles to resolve.
+ */
+export async function seekToFrame(page, frame, compositionId) {
+    // Set the frame via the global bridge function
+    await page.evaluate(({ frame, compositionId }) => {
+        const win = window;
+        if (typeof win.vibeo_setFrame === "function") {
+            win.vibeo_setFrame(frame, compositionId);
+        }
+        else {
+            throw new Error("window.vibeo_setFrame is not defined. " +
+                "Make sure the bundle registers this function.");
+        }
+    }, { frame, compositionId });
+    // Wait for React to finish rendering and all delays to resolve
+    await page.evaluate(() => {
+        return new Promise((resolve, reject) => {
+            const timeout = 30_000;
+            const start = Date.now();
+            function poll() {
+                const win = window;
+                if (Date.now() - start > timeout) {
+                    reject(new Error("Timed out waiting for frame render"));
+                    return;
+                }
+                const ready = win.vibeo_ready === true;
+                const noPendingDelays = win.vibeo_pendingDelays === undefined || win.vibeo_pendingDelays === 0;
+                if (ready && noPendingDelays) {
+                    resolve();
+                }
+                else {
+                    requestAnimationFrame(poll);
+                }
+            }
+            poll();
+        });
+    });
+    // Wait for all fonts to be ready
+    await page.evaluate(() => document.fonts.ready);
+}
+/**
+ * Load the bundled app in the browser page.
+ */
+export async function loadBundle(page, url) {
+    await page.goto(url, { waitUntil: "networkidle" });
+    // Wait for the vibeo_setFrame bridge to be available
+    await page.waitForFunction(() => {
+        const win = window;
+        return typeof win.vibeo_setFrame === "function";
+    }, { timeout: 30_000 });
+}
+//# sourceMappingURL=seek-to-frame.js.map

package/dist/seek-to-frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"seek-to-frame.js","sourceRoot":"","sources":["../src/seek-to-frame.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,MAAM,CAAC,KAAK,UAAU,WAAW,CAC/B,IAAU,EACV,KAAa,EACb,aAAqB;IAErB,+CAA+C;IAC/C,MAAM,IAAI,CAAC,QAAQ,CACjB,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE;QAC3B,MAAM,GAAG,GAAG,MAEX,CAAC;QACF,IAAI,OAAO,GAAG,CAAC,cAAc,KAAK,UAAU,EAAE,CAAC;YAC7C,GAAG,CAAC,cAAc,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;QAC3C,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,KAAK,CACb,wCAAwC;gBACtC,+CAA+C,CAClD,CAAC;QACJ,CAAC;IACH,CAAC,EACD,EAAE,KAAK,EAAE,aAAa,EAAE,CACzB,CAAC;IAEF,+DAA+D;IAC/D,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;QACvB,OAAO,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;YAC3C,MAAM,OAAO,GAAG,MAAM,CAAC;YACvB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YAEzB,SAAS,IAAI;gBACX,MAAM,GAAG,GAAG,MAGX,CAAC;gBAEF,IAAI,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,OAAO,EAAE,CAAC;oBACjC,MAAM,CAAC,IAAI,KAAK,CAAC,oCAAoC,CAAC,CAAC,CAAC;oBACxD,OAAO;gBACT,CAAC;gBAED,MAAM,KAAK,GAAG,GAAG,CAAC,WAAW,KAAK,IAAI,CAAC;gBACvC,MAAM,eAAe,GACnB,GAAG,CAAC,mBAAmB,KAAK,SAAS,IAAI,GAAG,CAAC,mBAAmB,KAAK,CAAC,CAAC;gBAEzE,IAAI,KAAK,IAAI,eAAe,EAAE,CAAC;oBAC7B,OAAO,EAAE,CAAC;gBACZ,CAAC;qBAAM,CAAC;oBACN,qBAAqB,CAAC,IAAI,CAAC,CAAC;gBAC9B,CAAC;YACH,CAAC;YAED,IAAI,EAAE,CAAC;QACT,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,iCAAiC;IACjC,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AAClD,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,KAAK,UAAU,UAAU,CAC9B,IAAU,EACV,GAAW;IAEX,MAAM,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC,CAAC;IAEnD,qDAAqD;IACrD,MAAM,IAAI,CAAC,eAAe,CACxB,GAAG,EAAE;QACH,MAAM,GAAG,GAAG,MAEX,CAAC;QACF,OAAO,OAAO,GAAG,CAAC,cAAc,KAAK,UAAU,CAAC;IAClD,CAAC,EACD,EAAE,OAAO,EAAE,MAAM,EAAE,CACpB,CAAC;AACJ,CAAC"}

package/dist/stitch-audio.d.ts

@@ -0,0 +1,7 @@
+import type { AudioMuxOptions } from "./types.js";
+/**
+ * Mux audio tracks into a video file using FFmpeg.
+ * If multiple audio files are provided, they are mixed together.
+ */
+export declare function stitchAudio(options: AudioMuxOptions): Promise<string>;
+//# sourceMappingURL=stitch-audio.d.ts.map

package/dist/stitch-audio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stitch-audio.d.ts","sourceRoot":"","sources":["../src/stitch-audio.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD;;;GAGG;AACH,wBAAsB,WAAW,CAAC,OAAO,EAAE,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,CA6C3E"}

package/dist/stitch-audio.js

@@ -0,0 +1,53 @@
+import { spawn } from "node:child_process";
+/**
+ * Mux audio tracks into a video file using FFmpeg.
+ * If multiple audio files are provided, they are mixed together.
+ */
+export async function stitchAudio(options) {
+    const { videoPath, audioPaths, outputPath } = options;
+    if (audioPaths.length === 0) {
+        // No audio to mux — just copy the video
+        return videoPath;
+    }
+    const args = ["-y"];
+    // Input: video
+    args.push("-i", videoPath);
+    // Input: each audio track
+    for (const audioPath of audioPaths) {
+        args.push("-i", audioPath);
+    }
+    if (audioPaths.length === 1) {
+        // Simple case: one audio track, just mux
+        args.push("-c:v", "copy", "-c:a", "aac", "-b:a", "192k", "-shortest", outputPath);
+    }
+    else {
+        // Multiple audio tracks: use amix filter to mix them
+        const filterInputs = audioPaths.map((_, i) => `[${i + 1}:a]`).join("");
+        const filter = `${filterInputs}amix=inputs=${audioPaths.length}:duration=longest:dropout_transition=0[aout]`;
+        args.push("-filter_complex", filter, "-map", "0:v", "-map", "[aout]", "-c:v", "copy", "-c:a", "aac", "-b:a", "192k", "-shortest", outputPath);
+    }
+    return runFfmpeg(args);
+}
+function runFfmpeg(args) {
+    return new Promise((resolve, reject) => {
+        const proc = spawn("ffmpeg", args, {
+            stdio: ["ignore", "pipe", "pipe"],
+        });
+        let stderr = "";
+        proc.stderr.on("data", (data) => {
+            stderr += data.toString();
+        });
+        proc.on("close", (code) => {
+            if (code === 0) {
+                resolve(args[args.length - 1]);
+            }
+            else {
+                reject(new Error(`FFmpeg exited with code ${code}:\n${stderr}`));
+            }
+        });
+        proc.on("error", (err) => {
+            reject(new Error(`Failed to spawn FFmpeg: ${err.message}`));
+        });
+    });
+}
+//# sourceMappingURL=stitch-audio.js.map

package/dist/stitch-audio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stitch-audio.js","sourceRoot":"","sources":["../src/stitch-audio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C;;;GAGG;AACH,MAAM,CAAC,KAAK,UAAU,WAAW,CAAC,OAAwB;IACxD,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;IAEtD,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC5B,wCAAwC;QACxC,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,MAAM,IAAI,GAAa,CAAC,IAAI,CAAC,CAAC;IAE9B,eAAe;IACf,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE3B,0BAA0B;IAC1B,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;QACnC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAC7B,CAAC;IAED,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC5B,yCAAyC;QACzC,IAAI,CAAC,IAAI,CACP,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,KAAK,EACb,MAAM,EAAE,MAAM,EACd,WAAW,EACX,UAAU,CACX,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,qDAAqD;QACrD,MAAM,YAAY,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACvE,MAAM,MAAM,GAAG,GAAG,YAAY,eAAe,UAAU,CAAC,MAAM,8CAA8C,CAAC;QAE7G,IAAI,CAAC,IAAI,CACP,iBAAiB,EAAE,MAAM,EACzB,MAAM,EAAE,KAAK,EACb,MAAM,EAAE,QAAQ,EAChB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,KAAK,EACb,MAAM,EAAE,MAAM,EACd,WAAW,EACX,UAAU,CACX,CAAC;IACJ,CAAC;IAED,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC;AACzB,CAAC;AAED,SAAS,SAAS,CAAC,IAAc;IAC/B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;QACrC,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE;YACjC,KAAK,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC;SAClC,CAAC,CAAC;QAEH,IAAI,MAAM,GAAG,EAAE,CAAC;QAEhB,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,IAAY,EAAE,EAAE;YACtC,MAAM,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC5B,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE;YACxB,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC;gBACf,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAE,CAAC,CAAC;YAClC,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,IAAI,KAAK,CAAC,2BAA2B,IAAI,MAAM,MAAM,EAAE,CAAC,CAAC,CAAC;YACnE,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE;YACvB,MAAM,CAAC,IAAI,KAAK,CAAC,2BAA2B,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QAC9D,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC"}

package/dist/stitch-frames.d.ts

@@ -0,0 +1,11 @@
+import type { StitchOptions } from "./types.js";
+/**
+ * Get the output container format for the given codec.
+ */
+declare function getContainerExt(codec: string): string;
+/**
+ * Stitch a sequence of frame images into a video using FFmpeg.
+ */
+export declare function stitchFrames(options: StitchOptions): Promise<string>;
+export { getContainerExt };
+//# sourceMappingURL=stitch-frames.d.ts.map

package/dist/stitch-frames.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stitch-frames.d.ts","sourceRoot":"","sources":["../src/stitch-frames.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAoBhD;;GAEG;AACH,iBAAS,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAS9C;AAED;;GAEG;AACH,wBAAsB,YAAY,CAAC,OAAO,EAAE,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CAwB1E;AAgCD,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/stitch-frames.js

@@ -0,0 +1,77 @@
+import { spawn } from "node:child_process";
+/**
+ * Get the FFmpeg codec arguments for the given codec.
+ */
+function getCodecArgs(codec, quality) {
+    switch (codec) {
+        case "h264":
+            return ["-c:v", "libx264", "-crf", String(quality), "-preset", "fast", "-pix_fmt", "yuv420p"];
+        case "h265":
+            return ["-c:v", "libx265", "-crf", String(quality), "-preset", "fast", "-pix_fmt", "yuv420p"];
+        case "vp9":
+            return ["-c:v", "libvpx-vp9", "-crf", String(quality), "-b:v", "0", "-pix_fmt", "yuv420p"];
+        case "prores":
+            return ["-c:v", "prores_ks", "-profile:v", String(Math.min(quality, 5)), "-pix_fmt", "yuva444p10le"];
+        default:
+            throw new Error(`Unsupported codec: ${codec}`);
+    }
+}
+/**
+ * Get the output container format for the given codec.
+ */
+function getContainerExt(codec) {
+    switch (codec) {
+        case "vp9":
+            return "webm";
+        case "prores":
+            return "mov";
+        default:
+            return "mp4";
+    }
+}
+/**
+ * Stitch a sequence of frame images into a video using FFmpeg.
+ */
+export async function stitchFrames(options) {
+    const { framesDir, outputPath, fps, codec, imageFormat, quality, } = options;
+    const ext = imageFormat === "jpeg" ? "jpg" : "png";
+    const inputPattern = `${framesDir}/frame-%06d.${ext}`;
+    const codecArgs = getCodecArgs(codec, quality);
+    const args = [
+        "-y",
+        "-framerate", String(fps),
+        "-i", inputPattern,
+        ...codecArgs,
+        "-r", String(fps),
+        outputPath,
+    ];
+    return runFfmpeg(args);
+}
+/**
+ * Run an FFmpeg command and return the output path.
+ */
+function runFfmpeg(args) {
+    return new Promise((resolve, reject) => {
+        const proc = spawn("ffmpeg", args, {
+            stdio: ["ignore", "pipe", "pipe"],
+        });
+        let stderr = "";
+        proc.stderr.on("data", (data) => {
+            stderr += data.toString();
+        });
+        proc.on("close", (code) => {
+            if (code === 0) {
+                // The output path is the last argument
+                resolve(args[args.length - 1]);
+            }
+            else {
+                reject(new Error(`FFmpeg exited with code ${code}:\n${stderr}`));
+            }
+        });
+        proc.on("error", (err) => {
+            reject(new Error(`Failed to spawn FFmpeg: ${err.message}`));
+        });
+    });
+}
+export { getContainerExt };
+//# sourceMappingURL=stitch-frames.js.map

package/dist/stitch-frames.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stitch-frames.js","sourceRoot":"","sources":["../src/stitch-frames.ts"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,74 @@
+export type Codec = "h264" | "h265" | "vp9" | "prores";
+export type ImageFormat = "png" | "jpeg";
+export type FrameRange = [startFrame: number, endFrame: number];
+export interface RenderConfig {
+    /** Path to the entry file containing compositions */
+    entry: string;
+    /** Composition ID to render */
+    compositionId: string;
+    /** Output file path */
+    outputPath: string;
+    /** Video codec */
+    codec: Codec;
+    /** Image format for intermediate frames */
+    imageFormat: ImageFormat;
+    /** JPEG quality (0-100), only used when imageFormat is "jpeg" */
+    quality: number;
+    /** Frames per second override (uses composition fps if not set) */
+    fps: number | null;
+    /** Frame range to render [start, end] */
+    frameRange: FrameRange | null;
+    /** Number of parallel browser tabs */
+    concurrency: number;
+    /** Pixel format for ffmpeg */
+    pixelFormat: string;
+    /** Progress callback */
+    onProgress?: (progress: RenderProgress) => void;
+}
+export interface RenderProgress {
+    /** Number of frames rendered so far */
+    framesRendered: number;
+    /** Total frames to render */
+    totalFrames: number;
+    /** Progress as a fraction 0-1 */
+    percent: number;
+    /** Estimated time remaining in milliseconds */
+    etaMs: number | null;
+}
+export interface StitchOptions {
+    /** Directory containing frame images */
+    framesDir: string;
+    /** Output video file path */
+    outputPath: string;
+    /** Frames per second */
+    fps: number;
+    /** Video codec */
+    codec: Codec;
+    /** Image format of the frames */
+    imageFormat: ImageFormat;
+    /** Pixel format */
+    pixelFormat: string;
+    /** Quality (crf for h264/h265/vp9, profile for prores) */
+    quality: number;
+    /** Width of the video */
+    width: number;
+    /** Height of the video */
+    height: number;
+}
+export interface AudioMuxOptions {
+    /** Video file to mux audio into */
+    videoPath: string;
+    /** Audio file paths */
+    audioPaths: string[];
+    /** Output file path */
+    outputPath: string;
+}
+export interface BundleResult {
+    /** Directory containing the bundled output */
+    outDir: string;
+    /** URL to access the bundled app */
+    url: string;
+    /** Cleanup function to stop the server and remove temp files */
+    cleanup: () => Promise<void>;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEvD,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,MAAM,CAAC;AAEzC,MAAM,MAAM,UAAU,GAAG,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;AAEhE,MAAM,WAAW,YAAY;IAC3B,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,KAAK,EAAE,KAAK,CAAC;IACb,2CAA2C;IAC3C,WAAW,EAAE,WAAW,CAAC;IACzB,iEAAiE;IACjE,OAAO,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,yCAAyC;IACzC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,sCAAsC;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,8BAA8B;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,wBAAwB;IACxB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,cAAc;IAC7B,uCAAuC;IACvC,cAAc,EAAE,MAAM,CAAC;IACvB,6BAA6B;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,+CAA+C;IAC/C,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,wCAAwC;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,kBAAkB;IAClB,KAAK,EAAE,KAAK,CAAC;IACb,iCAAiC;IACjC,WAAW,EAAE,WAAW,CAAC;IACzB,mBAAmB;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,OAAO,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,mCAAmC;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,uBAAuB;IACvB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,8CAA8C;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@vibeo/renderer",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "@vibeo/core": "0.1.0",
+    "@vibeo/player": "0.1.0",
+    "@vibeo/audio": "0.1.0",
+    "playwright": "^1.52.0"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "clean": "rm -rf dist"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/patcito/vibeo.git",
+    "directory": "packages/renderer"
+  },
+  "license": "MIT"
+}

package/src/browser.ts

@@ -0,0 +1,48 @@
+import type { Browser, Page } from "playwright";
+
+let _browser: Browser | null = null;
+
+/**
+ * Launch a headless Chromium browser via Playwright.
+ * Reuses the existing browser if already launched.
+ */
+export async function launchBrowser(): Promise<Browser> {
+  if (_browser && _browser.isConnected()) {
+    return _browser;
+  }
+  const { chromium } = await import("playwright");
+  _browser = await chromium.launch({
+    headless: true,
+    args: [
+      "--disable-web-security",
+      "--allow-file-access-from-files",
+      "--autoplay-policy=no-user-gesture-required",
+    ],
+  });
+  return _browser;
+}
+
+/**
+ * Close the browser and release resources.
+ */
+export async function closeBrowser(): Promise<void> {
+  if (_browser) {
+    await _browser.close();
+    _browser = null;
+  }
+}
+
+/**
+ * Create a new browser page with a viewport matching the composition dimensions.
+ */
+export async function createPage(
+  browser: Browser,
+  width: number,
+  height: number,
+): Promise<Page> {
+  const page = await browser.newPage({
+    viewport: { width, height },
+    deviceScaleFactor: 1,
+  });
+  return page;
+}

package/src/bundler.ts

@@ -0,0 +1,146 @@
+import { mkdtemp, rm } from "node:fs/promises";
+import { join, dirname } from "node:path";
+import { tmpdir } from "node:os";
+import type { BundleResult } from "./types.js";
+
+/**
+ * Bundle the user's React entry point using Bun.build,
+ * then serve it via a local HTTP server for the headless browser to load.
+ *
+ * Generates a thin bootstrap entry that imports the user's Root export
+ * and mounts it with ReactDOM.createRoot.
+ */
+export async function bundle(entryPoint: string): Promise<BundleResult> {
+  const outDir = await mkdtemp(join(tmpdir(), "vibeo-bundle-"));
+
+  // Create a bootstrap entry next to the user's file so Bun.build
+  // resolves node_modules from the project root, not from /tmp.
+  const entryDir = dirname(entryPoint);
+  const bootstrapPath = join(entryDir, "__vibeo_entry.tsx");
+  await Bun.write(
+    bootstrapPath,
+    `import React from "react";
+import { createRoot } from "react-dom/client";
+import { Root } from ${JSON.stringify(entryPoint)};
+import { Player } from "@vibeo/player";
+import { VibeoRoot, useCompositionContext } from "@vibeo/core";
+
+/**
+ * PreviewShell: renders <Root> to register compositions,
+ * then picks the first one and renders it inside a <Player>.
+ */
+function CompositionPlayer() {
+  const { compositions } = useCompositionContext();
+
+  // Derive comp directly during render — no useEffect delay
+  const hash = window.location.hash.slice(1);
+  let comp: any = null;
+  if (hash && compositions.has(hash)) {
+    comp = compositions.get(hash);
+  } else if (compositions.size > 0) {
+    // Get first value from map
+    for (const v of compositions.values()) { comp = v; break; }
+  }
+
+  if (!comp) {
+    return React.createElement("div", {
+      style: { color: "#888", fontFamily: "sans-serif", padding: 40 }
+    }, "Loading composition...");
+  }
+
+  return React.createElement(Player, {
+    component: comp.component,
+    durationInFrames: comp.durationInFrames,
+    compositionWidth: comp.width,
+    compositionHeight: comp.height,
+    fps: comp.fps,
+    controls: true,
+    loop: true,
+    autoPlay: true,
+    style: { width: "100vw", height: "100vh" },
+    inputProps: comp.defaultProps,
+  });
+}
+
+function PreviewApp() {
+  return React.createElement(VibeoRoot, null,
+    React.createElement(Root),
+    React.createElement(CompositionPlayer),
+  );
+}
+
+const container = document.getElementById("root")!;
+const root = createRoot(container);
+root.render(React.createElement(PreviewApp));
+
+window.vibeo_ready = true;
+`,
+  );
+
+  try {
+  const result = await Bun.build({
+    entrypoints: [bootstrapPath],
+    outdir: outDir,
+    target: "browser",
+    format: "esm",
+    minify: false,
+    splitting: false,
+    define: {
+      "process.env.NODE_ENV": JSON.stringify("production"),
+    },
+  });
+
+  if (!result.success) {
+    const messages = result.logs.map((l) => l.message).join("\n");
+    throw new Error(`Bundle failed:\n${messages}`);
+  }
+
+  // Write a minimal HTML shell that loads the bundle
+  const bundleName = result.outputs[0]?.path.split("/").pop() ?? "__vibeo_entry.js";
+  const html = `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body, #root { width: 100%; height: 100%; overflow: hidden; }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/${bundleName}"></script>
+</body>
+</html>`;
+
+  await Bun.write(join(outDir, "index.html"), html);
+
+  // Start a local HTTP server to serve the bundle
+  const server = Bun.serve({
+    port: 0, // auto-assign
+    async fetch(req) {
+      const url = new URL(req.url);
+      const filePath = join(outDir, url.pathname === "/" ? "index.html" : url.pathname);
+      const file = Bun.file(filePath);
+      if (await file.exists()) {
+        return new Response(file);
+      }
+      return new Response("Not found", { status: 404 });
+    },
+  });
+  const serverPort = server.port ?? 0;
+
+  const cleanup = async () => {
+    server.stop(true);
+    await rm(outDir, { recursive: true, force: true });
+  };
+
+  return {
+    outDir,
+    url: `http://localhost:${serverPort}`,
+    cleanup,
+  };
+  } finally {
+    // Always clean up the bootstrap file we dropped next to the user's entry
+    await rm(bootstrapPath, { force: true });
+  }
+}

package/src/capture-frame.ts

@@ -0,0 +1,39 @@
+import { join } from "node:path";
+import type { Page } from "playwright";
+import type { ImageFormat } from "./types.js";
+
+/**
+ * Capture a screenshot of the current page state and write it to disk.
+ *
+ * @returns The file path of the saved frame.
+ */
+export async function captureFrame(
+  page: Page,
+  outputDir: string,
+  frameNumber: number,
+  options: {
+    imageFormat: ImageFormat;
+    quality?: number;
+  },
+): Promise<string> {
+  const ext = options.imageFormat === "jpeg" ? "jpg" : "png";
+  const paddedFrame = String(frameNumber).padStart(6, "0");
+  const filePath = join(outputDir, `frame-${paddedFrame}.${ext}`);
+
+  const screenshotOptions: {
+    type: "png" | "jpeg";
+    path: string;
+    quality?: number;
+  } = {
+    type: options.imageFormat,
+    path: filePath,
+  };
+
+  if (options.imageFormat === "jpeg" && options.quality !== undefined) {
+    screenshotOptions.quality = options.quality;
+  }
+
+  await page.screenshot(screenshotOptions);
+
+  return filePath;
+}