vargai 0.4.0-alpha49 → 0.4.0-alpha50

package/launch-videos/07-ugc-weight-loss.tsx

@@ -16,7 +16,7 @@ import {
   Music,
   Render,
   Speech,
-  SplitLayout,
+  Split,
   Title,
   Video,
 } from "vargai/react";
@@ -114,11 +114,7 @@ export default (
     {/* Main clip with split screen */}
     <Clip duration={5}>
       {/* Split layout - before on left, after on right */}
-      <SplitLayout
-        direction="horizontal"
-        left={beforeVideo}
-        right={afterVideo}
-      />
+      <Split direction="horizontal">{[beforeVideo, afterVideo]}</Split>
 
       {/* Title at top */}
       <Title position="top" color="#ffffff">

package/package.json

@@ -69,7 +69,7 @@
     "sharp": "^0.34.5",
     "zod": "^4.2.1"
   },
-  "version": "0.4.0-alpha49",
+  "version": "0.4.0-alpha50",
   "exports": {
     ".": "./src/index.ts",
     "./ai": "./src/ai-sdk/index.ts",

package/src/ai-sdk/file.ts

@@ -1,11 +1,30 @@
 import type { ImageModelV3File } from "@ai-sdk/provider";
 import type { StorageProvider } from "./storage/types";
 
+/** Type of generated content */
+export type GeneratedFileType =
+  | "image"
+  | "video"
+  | "speech"
+  | "music"
+  | "captions";
+
+/** Metadata for AI-generated files */
+export interface FileMetadata {
+  /** Type of generated content */
+  type?: GeneratedFileType;
+  /** Model used to generate */
+  model?: string;
+  /** Original prompt used */
+  prompt?: string;
+}
+
 export class File {
   private _data: Uint8Array | null = null;
   private _url: string | null = null;
   private _mediaType: string;
   private _loader: (() => Promise<Uint8Array>) | null = null;
+  private _metadata: FileMetadata = {};
 
   private constructor(
     options:
@@ -127,6 +146,17 @@ export class File {
     return this._url;
   }
 
+  /** Get file metadata (type, model, prompt) */
+  get metadata(): FileMetadata {
+    return this._metadata;
+  }
+
+  /** Set metadata and return this for chaining */
+  withMetadata(metadata: FileMetadata): this {
+    this._metadata = { ...this._metadata, ...metadata };
+    return this;
+  }
+
   async data(): Promise<Uint8Array> {
     if (this._data) return this._data;
     if (this._loader) {

package/src/ai-sdk/providers/editly/editly.test.ts

@@ -272,46 +272,50 @@ describe("editly", () => {
     expect(existsSync(outPath)).toBe(true);
   });
 
-  test("image pan left/right", async () => {
-    const outPath = "output/editly-test-image-pan.mp4";
-    if (existsSync(outPath)) unlinkSync(outPath);
-
-    await editly({
-      outPath,
-      width: 1280,
-      height: 720,
-      fps: 30,
-      clips: [
-        {
-          duration: 3,
-          layers: [
-            {
-              type: "image",
-              path: "media/cyberpunk-street.png",
-              zoomDirection: "left",
-              zoomAmount: 0.15,
-              resizeMode: "contain",
-            },
-          ],
-          transition: { name: "fade", duration: 0.5 },
-        },
-        {
-          duration: 3,
-          layers: [
-            {
-              type: "image",
-              path: "media/cyberpunk-street.png",
-              zoomDirection: "right",
-              zoomAmount: 0.15,
-              resizeMode: "contain",
-            },
-          ],
-        },
-      ],
-    });
+  test(
+    "image pan left/right",
+    async () => {
+      const outPath = "output/editly-test-image-pan.mp4";
+      if (existsSync(outPath)) unlinkSync(outPath);
+
+      await editly({
+        outPath,
+        width: 1280,
+        height: 720,
+        fps: 30,
+        clips: [
+          {
+            duration: 3,
+            layers: [
+              {
+                type: "image",
+                path: "media/cyberpunk-street.png",
+                zoomDirection: "left",
+                zoomAmount: 0.15,
+                resizeMode: "contain",
+              },
+            ],
+            transition: { name: "fade", duration: 0.5 },
+          },
+          {
+            duration: 3,
+            layers: [
+              {
+                type: "image",
+                path: "media/cyberpunk-street.png",
+                zoomDirection: "right",
+                zoomAmount: 0.15,
+                resizeMode: "contain",
+              },
+            ],
+          },
+        ],
+      });
 
-    expect(existsSync(outPath)).toBe(true);
-  });
+      expect(existsSync(outPath)).toBe(true);
+    },
+    { timeout: 10000 },
+  );
 
   test("title with custom font", async () => {
     const outPath = "output/editly-test-title-font.mp4";
@@ -906,27 +910,31 @@ describe("editly", () => {
     expect(existsSync(outPath)).toBe(true);
   });
 
-  test("contain-blur resize mode for video", async () => {
-    const outPath = "output/editly-test-contain-blur-video.mp4";
-    if (existsSync(outPath)) unlinkSync(outPath);
-
-    await editly({
-      outPath,
-      width: 1080,
-      height: 1920,
-      fps: 30,
-      clips: [
-        {
-          duration: 3,
-          layers: [
-            { type: "video", path: VIDEO_1, resizeMode: "contain-blur" },
-          ],
-        },
-      ],
-    });
+  test(
+    "contain-blur resize mode for video",
+    async () => {
+      const outPath = "output/editly-test-contain-blur-video.mp4";
+      if (existsSync(outPath)) unlinkSync(outPath);
+
+      await editly({
+        outPath,
+        width: 1080,
+        height: 1920,
+        fps: 30,
+        clips: [
+          {
+            duration: 3,
+            layers: [
+              { type: "video", path: VIDEO_1, resizeMode: "contain-blur" },
+            ],
+          },
+        ],
+      });
 
-    expect(existsSync(outPath)).toBe(true);
-  });
+      expect(existsSync(outPath)).toBe(true);
+    },
+    { timeout: 10000 },
+  );
 
   test("contain-blur resize mode for image", async () => {
     const outPath = "output/editly-test-contain-blur-image.mp4";
@@ -1153,4 +1161,177 @@ describe("editly", () => {
     expect(info.height).toBe(1920);
     expect(info.duration).toBeCloseTo(3, 0);
   });
+
+  // Regression tests for grid/split layout bugs
+  // https://github.com/vargHQ/sdk/issues/61
+  // https://github.com/vargHQ/sdk/issues/62
+
+  test("issue #61: same video in multiple grid positions renders both", async () => {
+    // Bug: when same video file is used in multiple positions within a clip,
+    // only one instance renders because collectContinuousVideoOverlays uses
+    // the video path as Map key, causing deduplication.
+    //
+    // Fix: use composite key including position (path:left:top:width:height)
+    const outPath = "output/editly-test-issue-61-grid-dedup.mp4";
+    if (existsSync(outPath)) unlinkSync(outPath);
+
+    await editly({
+      outPath,
+      width: 1920,
+      height: 1080,
+      fps: 30,
+      clips: [
+        {
+          duration: 3,
+          layers: [
+            { type: "fill-color", color: "#000000" },
+            {
+              type: "video",
+              path: VIDEO_1,
+              width: "50%",
+              height: "100%",
+              left: "0%",
+              top: "0%",
+              resizeMode: "cover",
+            },
+            {
+              type: "video",
+              path: VIDEO_1,
+              width: "50%",
+              height: "100%",
+              left: "50%",
+              top: "0%",
+              resizeMode: "cover",
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(existsSync(outPath)).toBe(true);
+    const info = await ffprobe(outPath);
+    expect(info.width).toBe(1920);
+    expect(info.height).toBe(1080);
+  });
+
+  test("issue #62: positioned videos in clip don't bleed into other clips", async () => {
+    // Bug: positioned videos from Grid/Split are treated as continuous overlays
+    // spanning entire video instead of being scoped to their clip.
+    // Fix: clip-local overlays (no cutFrom/cutTo) vs continuous (has cutFrom/cutTo)
+    const outPath = "output/editly-test-issue-62-clip-scope.mp4";
+    if (existsSync(outPath)) unlinkSync(outPath);
+
+    await editly({
+      outPath,
+      width: 1920,
+      height: 1080,
+      fps: 30,
+      clips: [
+        {
+          duration: 2,
+          layers: [{ type: "fill-color", color: "#ff0000" }],
+          transition: { name: "fade", duration: 0.3 },
+        },
+        {
+          duration: 2,
+          layers: [
+            { type: "fill-color", color: "#ff0000" },
+            {
+              type: "video",
+              path: VIDEO_1,
+              width: "50%",
+              height: "100%",
+              left: "0%",
+              top: "0%",
+              resizeMode: "cover",
+            },
+            {
+              type: "video",
+              path: VIDEO_2,
+              width: "50%",
+              height: "100%",
+              left: "50%",
+              top: "0%",
+              resizeMode: "cover",
+            },
+          ],
+          transition: { name: "fade", duration: 0.3 },
+        },
+        {
+          duration: 2,
+          layers: [{ type: "fill-color", color: "#0000ff" }],
+        },
+      ],
+    });
+
+    expect(existsSync(outPath)).toBe(true);
+    const info = await ffprobe(outPath);
+    expect(info.duration).toBeCloseTo(5.4, 0);
+  });
+
+  test("issue #62: continuous overlay (with cutFrom/cutTo) spans clips correctly", async () => {
+    const outPath = "output/editly-test-continuous-overlay-spans.mp4";
+    if (existsSync(outPath)) unlinkSync(outPath);
+
+    await editly({
+      outPath,
+      width: 1920,
+      height: 1080,
+      fps: 30,
+      clips: [
+        {
+          duration: 2,
+          layers: [
+            { type: "fill-color", color: "#ff0000" },
+            {
+              type: "video",
+              path: VIDEO_TALKING,
+              width: "25%",
+              height: "25%",
+              left: "73%",
+              top: "2%",
+              cutFrom: 0,
+              cutTo: 2,
+            },
+          ],
+          transition: { name: "fade", duration: 0.3 },
+        },
+        {
+          duration: 2,
+          layers: [
+            { type: "fill-color", color: "#00ff00" },
+            {
+              type: "video",
+              path: VIDEO_TALKING,
+              width: "25%",
+              height: "25%",
+              left: "73%",
+              top: "2%",
+              cutFrom: 2,
+              cutTo: 4,
+            },
+          ],
+          transition: { name: "fade", duration: 0.3 },
+        },
+        {
+          duration: 2,
+          layers: [
+            { type: "fill-color", color: "#0000ff" },
+            {
+              type: "video",
+              path: VIDEO_TALKING,
+              width: "25%",
+              height: "25%",
+              left: "73%",
+              top: "2%",
+              cutFrom: 4,
+              cutTo: 6,
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(existsSync(outPath)).toBe(true);
+  });
 });

package/src/ai-sdk/providers/editly/index.ts

@@ -7,6 +7,7 @@ import {
   getSlideInTextFilter,
   getSubtitleFilter,
   getTitleFilter,
+  getVideoFilter,
   getVideoFilterWithTrim,
   processLayer,
 } from "./layers";
@@ -142,6 +143,26 @@ function isVideoOverlayLayer(layer: Layer): boolean {
   );
 }
 
+/**
+ * Clip-local overlay: has positioning but NO cutFrom/cutTo
+ * These should be composited within their clip, not across the entire video
+ */
+function isClipLocalVideoOverlay(layer: Layer): boolean {
+  if (!isVideoOverlayLayer(layer)) return false;
+  const v = layer as VideoLayer;
+  return v.cutFrom === undefined && v.cutTo === undefined;
+}
+
+/**
+ * Continuous overlay: has positioning AND cutFrom/cutTo
+ * These span specific time ranges across the video (e.g., from <Overlay> element)
+ */
+function isContinuousVideoOverlay(layer: Layer): boolean {
+  if (!isVideoOverlayLayer(layer)) return false;
+  const v = layer as VideoLayer;
+  return v.cutFrom !== undefined || v.cutTo !== undefined;
+}
+
 function isImageOverlayLayer(layer: Layer): boolean {
   return layer.type === "image-overlay";
 }
@@ -161,7 +182,7 @@ function isTextOverlayLayer(layer: Layer): boolean {
 
 function buildBaseClipFilter(
   clip: ProcessedClip,
-  _clipIndex: number,
+  clipIndex: number,
   width: number,
   height: number,
   inputOffset: number,
@@ -186,11 +207,14 @@ function buildBaseClipFilter(
   let baseLabel = "";
   let inputIdx = inputOffset;
 
-  // Filter out overlay layers AND text overlay layers (text will be applied after image overlays)
   const baseLayers = clip.layers.filter(
     (l) => l && !isOverlayLayer(l) && !isTextOverlayLayer(l),
   );
 
+  const clipLocalOverlays = clip.layers.filter(
+    (l) => l && isClipLocalVideoOverlay(l),
+  ) as VideoLayer[];
+
   for (let i = 0; i < baseLayers.length; i++) {
     const layer = baseLayers[i];
     if (!layer) continue;
@@ -228,6 +252,36 @@ function buildBaseClipFilter(
     }
   }
 
+  for (let i = 0; i < clipLocalOverlays.length; i++) {
+    const layer = clipLocalOverlays[i];
+    if (!layer) continue;
+
+    const overlayFilter = getVideoFilter(
+      layer,
+      inputIdx,
+      width,
+      height,
+      clip.duration,
+      true,
+    );
+
+    inputs.push(layer.path);
+    filters.push(overlayFilter.filterComplex);
+
+    const outputLabel = `clip${clipIndex}ov${i}`;
+    const positionFilter = getOverlayFilter(
+      baseLabel,
+      overlayFilter.outputLabel,
+      layer,
+      width,
+      height,
+      outputLabel,
+    );
+    filters.push(positionFilter);
+    baseLabel = outputLabel;
+    inputIdx++;
+  }
+
   return {
     filters,
     inputs,
@@ -247,13 +301,15 @@ function collectContinuousVideoOverlays(
 
   for (const clip of clips) {
     for (const layer of clip.layers) {
-      if (layer && isVideoOverlayLayer(layer)) {
+      // Only collect continuous overlays (with cutFrom/cutTo), not clip-local ones
+      if (layer && isContinuousVideoOverlay(layer)) {
         const videoLayer = layer as VideoLayer;
-        const existing = overlays.get(videoLayer.path);
+        const key = `${videoLayer.path}:${videoLayer.left ?? ""}:${videoLayer.top ?? ""}:${videoLayer.width ?? ""}:${videoLayer.height ?? ""}`;
+        const existing = overlays.get(key);
         if (existing) {
           existing.totalDuration += clip.duration;
         } else {
-          overlays.set(videoLayer.path, {
+          overlays.set(key, {
             layer: videoLayer,
             totalDuration: clip.duration,
           });
@@ -277,11 +333,12 @@ function collectImageOverlays(
     for (const layer of clip.layers) {
       if (layer && isImageOverlayLayer(layer)) {
         const imgLayer = layer as ImageOverlayLayer;
-        const existing = overlays.get(imgLayer.path);
+        const key = `${imgLayer.path}:${JSON.stringify(imgLayer.position ?? "")}:${imgLayer.width ?? ""}:${imgLayer.height ?? ""}`;
+        const existing = overlays.get(key);
         if (existing) {
           existing.totalDuration += clip.duration;
         } else {
-          overlays.set(imgLayer.path, {
+          overlays.set(key, {
             layer: imgLayer,
             totalDuration: clip.duration,
           });
@@ -585,14 +642,14 @@ export async function editly(config: EditlyConfig): Promise<EditlyResult> {
   const videoOverlayInputMap = new Map<string, number>();
   const imageOverlayInputMap = new Map<string, number>();
 
-  for (const [path] of continuousVideoOverlays) {
-    videoOverlayInputMap.set(path, overlayInputs.length);
-    overlayInputs.push(path);
+  for (const [key, { layer }] of continuousVideoOverlays) {
+    videoOverlayInputMap.set(key, overlayInputs.length);
+    overlayInputs.push(layer.path);
   }
 
-  for (const [path] of imageOverlays) {
-    imageOverlayInputMap.set(path, overlayInputs.length);
-    overlayInputs.push(path);
+  for (const [key, { layer }] of imageOverlays) {
+    imageOverlayInputMap.set(key, overlayInputs.length);
+    overlayInputs.push(layer.path);
   }
 
   const allFilters: string[] = [];
@@ -685,8 +742,8 @@ export async function editly(config: EditlyConfig): Promise<EditlyResult> {
     let currentBase = finalVideoLabel;
     let overlayIdx = 0;
 
-    for (const [path, { layer }] of continuousVideoOverlays) {
-      const inputIndex = videoOverlayInputMap.get(path);
+    for (const [key, { layer }] of continuousVideoOverlays) {
+      const inputIndex = videoOverlayInputMap.get(key);
       if (inputIndex === undefined) continue;
 
       const trimmedLabel = `ovfinal${overlayIdx}`;
@@ -724,8 +781,8 @@ export async function editly(config: EditlyConfig): Promise<EditlyResult> {
     let currentBase = finalVideoLabel;
     let imgOverlayIdx = 0;
 
-    for (const [path, { layer }] of imageOverlays) {
-      const inputIndex = imageOverlayInputMap.get(path);
+    for (const [key, { layer }] of imageOverlays) {
+      const inputIndex = imageOverlayInputMap.get(key);
       if (inputIndex === undefined) continue;
 
       const imgFilter = getImageOverlayFilter(

package/src/ai-sdk/providers/editly/layers.ts

@@ -63,6 +63,20 @@ function parseSize(val: number | string | undefined, base: number): number {
   return Math.round(parseFloat(val));
 }
 
+let resizeModeWarningShown = false;
+
+function warnNoResizeMode(type: "video" | "image"): void {
+  if (resizeModeWarningShown) return;
+  resizeModeWarningShown = true;
+  console.warn(
+    `[varg] Deprecation warning: ${type} layer without resizeMode will change behavior in a future version. ` +
+      `Current default stretches/crops to fill frame. Future default will be 'contain' (letterbox with black bars). ` +
+      `To preserve current behavior, explicitly set resizeMode: 'cover'. ` +
+      `For letterboxing, set resizeMode: 'contain'. ` +
+      `See: https://github.com/vargHQ/sdk/issues/24`,
+  );
+}
+
 export interface FilterInput {
   label: string;
   path?: string;
@@ -96,9 +110,14 @@ export function getVideoFilter(
   const layerHeight = parseSize(layer.height, height);
 
   if (isOverlay) {
-    filters.push(
-      `scale=${layerWidth}:${layerHeight}:force_original_aspect_ratio=decrease`,
-    );
+    let scaleFilter = `scale=${layerWidth}:${layerHeight}:force_original_aspect_ratio=decrease`;
+    if (layer.resizeMode === "cover") {
+      const { x, y } = getCropPositionExpr(layer.cropPosition);
+      scaleFilter = `scale=${layerWidth}:${layerHeight}:force_original_aspect_ratio=increase,crop=${layerWidth}:${layerHeight}:${x}:${y}`;
+    } else if (layer.resizeMode === "stretch") {
+      scaleFilter = `scale=${layerWidth}:${layerHeight}`;
+    }
+    filters.push(scaleFilter);
     filters.push("setsar=1");
     filters.push("fps=30");
     filters.push("settb=1/30");
@@ -333,6 +352,9 @@ export function getImageFilter(
       filters.push(`pad=${width}:${height}:(ow-iw)/2:(oh-ih)/2:black`);
     } else {
       // Default: fast path - zoompan at target resolution directly
+      // WARNING: This path uses cover-like behavior (may crop). In a future version,
+      // the default will change to 'contain' (letterbox). See issue #24.
+      warnNoResizeMode("image");
       filters.push(
         `scale=${zoomWidth}:${zoomHeight}:force_original_aspect_ratio=increase`,
       );
@@ -502,9 +524,20 @@ export function getImageOverlayFilter(
   const targetWidth = layer.width
     ? parseSize(layer.width, width)
     : Math.round(width * 0.3);
-  const scaleExpr = layer.height
-    ? `scale=${targetWidth}:${parseSize(layer.height, height)}`
-    : `scale=${targetWidth}:-2`;
+  const hasExplicitHeight = layer.height !== undefined;
+  const targetHeight = hasExplicitHeight ? parseSize(layer.height, height) : -2;
+
+  let scaleExpr: string;
+  if (!hasExplicitHeight) {
+    scaleExpr = `scale=${targetWidth}:-2`;
+  } else if (layer.resizeMode === "cover") {
+    const { x, y } = getCropPositionExpr(layer.cropPosition);
+    scaleExpr = `scale=${targetWidth}:${targetHeight}:force_original_aspect_ratio=increase,crop=${targetWidth}:${targetHeight}:${x}:${y}`;
+  } else if (layer.resizeMode === "stretch") {
+    scaleExpr = `scale=${targetWidth}:${targetHeight}`;
+  } else {
+    scaleExpr = `scale=${targetWidth}:${targetHeight}:force_original_aspect_ratio=decrease,pad=${targetWidth}:${targetHeight}:(ow-iw)/2:(oh-ih)/2:black`;
+  }
 
   const zoomDir = layer.zoomDirection ?? null;
   const zoomAmt = layer.zoomAmount ?? 0.1;
@@ -532,7 +565,6 @@ export function getImageOverlayFilter(
       yExpr = "trunc((ih-ih/zoom)/2)";
     }
 
-    // Upscale, zoompan at high res, then scale to target preserving aspect ratio
     filters.push("scale=4000:-2");
     filters.push(
       `zoompan=z='${zoomExpr}':x='${xExpr}':y='${yExpr}':d=${totalFrames}:s=4000x4000:fps=30`,

package/src/ai-sdk/providers/editly/rendi/index.ts

@@ -131,6 +131,13 @@ export class RendiBackend implements FFmpegBackend {
       verbose,
     } = options;
 
+    if (!inputs || inputs.length === 0) {
+      throw new Error(
+        "Rendi backend requires at least one input file. " +
+          "Ensure your render contains media elements (Video, Image, etc.) with valid sources.",
+      );
+    }
+
     const inputFiles: Record<string, string> = {};
     const pathToPlaceholder = new Map<string, string>();