vargai 0.4.0-alpha49 → 0.4.0-alpha50

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

@@ -10,6 +10,32 @@ const mockStorage: StorageProvider = {
   },
 };
 
+describe("rendi backend validation", () => {
+  test("throws error when inputs array is empty", async () => {
+    const backend = createRendiBackend({ storage: mockStorage });
+
+    await expect(
+      backend.run({
+        inputs: [],
+        outputArgs: ["-c:v", "libx264"],
+        outputPath: "output.mp4",
+      }),
+    ).rejects.toThrow("Rendi backend requires at least one input file");
+  });
+
+  test("throws error when inputs is undefined", async () => {
+    const backend = createRendiBackend({ storage: mockStorage });
+
+    await expect(
+      backend.run({
+        inputs: undefined as unknown as string[],
+        outputArgs: ["-c:v", "libx264"],
+        outputPath: "output.mp4",
+      }),
+    ).rejects.toThrow("Rendi backend requires at least one input file");
+  });
+});
+
 describe.skipIf(!hasRendiKey)("rendi backend", () => {
   test("ffprobe remote file", async () => {
     const backend = createRendiBackend({ storage: mockStorage });

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

@@ -161,6 +161,8 @@ export interface ImageOverlayLayer extends BaseLayer, KenBurns {
   position?: Position;
   width?: SizeValue;
   height?: SizeValue;
+  resizeMode?: ResizeMode;
+  cropPosition?: CropPosition;
 }
 
 export interface TitleLayer extends TextLayer, KenBurns {

package/src/cli/commands/frame.tsx

@@ -22,7 +22,7 @@ import { Header, HelpBlock, VargBox, VargText } from "../ui/index.ts";
 import { renderStatic } from "../ui/render.ts";
 
 const AUTO_IMPORTS = `/** @jsxImportSource vargai */
-import { Captions, Clip, Image, Music, Overlay, Packshot, Render, Slider, Speech, Split, Subtitle, Swipe, TalkingHead, Title, Video, Grid, SplitLayout } from "vargai/react";
+import { Captions, Clip, Image, Music, Overlay, Packshot, Render, Slider, Speech, Split, Subtitle, Swipe, TalkingHead, Title, Video, Grid } from "vargai/react";
 import { fal, elevenlabs, replicate } from "vargai/ai";
 `;
 

package/src/cli/commands/render.tsx

@@ -10,7 +10,7 @@ import { Header, HelpBlock, VargBox, VargText } from "../ui/index.ts";
 import { renderStatic } from "../ui/render.ts";
 
 const AUTO_IMPORTS = `/** @jsxImportSource vargai */
-import { Captions, Clip, Image, Music, Overlay, Packshot, Render, Slider, Speech, Split, Subtitle, Swipe, TalkingHead, Title, Video, Grid, SplitLayout } from "vargai/react";
+import { Captions, Clip, Image, Music, Overlay, Packshot, Render, Slider, Speech, Split, Subtitle, Swipe, TalkingHead, Title, Video, Grid } from "vargai/react";
 import { fal, elevenlabs, replicate } from "vargai/ai";
 `;
 

package/src/cli/commands/storyboard.tsx

@@ -24,7 +24,7 @@ import { Header, HelpBlock, VargBox, VargText } from "../ui/index.ts";
 import { renderStatic } from "../ui/render.ts";
 
 const AUTO_IMPORTS = `/** @jsxImportSource vargai */
-import { Captions, Clip, Image, Music, Overlay, Packshot, Render, Slider, Speech, Split, Subtitle, Swipe, TalkingHead, Title, Video, Grid, SplitLayout } from "vargai/react";
+import { Captions, Clip, Image, Music, Overlay, Packshot, Render, Slider, Speech, Split, Subtitle, Swipe, TalkingHead, Title, Video, Grid } from "vargai/react";
 import { fal, elevenlabs, replicate } from "vargai/ai";
 `;
 

package/src/react/elements.ts

@@ -8,7 +8,6 @@ import type {
   RenderProps,
   SliderProps,
   SpeechProps,
-  SplitProps,
   SubtitleProps,
   SwipeProps,
   TalkingHeadProps,
@@ -112,14 +111,6 @@ export function Captions(props: CaptionsProps): VargElement<"captions"> {
   return createElement("captions", props as Record<string, unknown>, undefined);
 }
 
-export function Split(props: SplitProps): VargElement<"split"> {
-  return createElement(
-    "split",
-    props as Record<string, unknown>,
-    props.children,
-  );
-}
-
 export function Slider(props: SliderProps): VargElement<"slider"> {
   return createElement(
     "slider",

package/src/react/examples/character-video.tsx

@@ -80,7 +80,7 @@ async function main() {
     cache: ".cache/ai",
   });
 
-  console.log(`\ndone! ${buffer.byteLength} bytes`);
+  console.log(`\ndone! ${buffer.video.byteLength} bytes`);
   console.log("output: output/react-madi.mp4");
 }
 

package/src/react/examples/grid.tsx

@@ -46,7 +46,7 @@ async function main() {
     cache: ".cache/ai",
   });
 
-  console.log(`\ndone! ${buffer.byteLength} bytes`);
+  console.log(`\ndone! ${buffer.video.byteLength} bytes`);
   console.log("output: output/react-grid.mp4");
 }
 

package/src/react/examples/quickstart-test.tsx

@@ -77,7 +77,7 @@ async function main() {
 
     console.log("\n=== SUCCESS ===");
     console.log(
-      `Output: output/quickstart-test.mp4 (${(buffer.byteLength / 1024 / 1024).toFixed(2)} MB)`,
+      `Output: output/quickstart-test.mp4 (${(buffer.video.byteLength / 1024 / 1024).toFixed(2)} MB)`,
     );
     console.log("\nYour setup is working! You can now:");
     console.log("1. Try the templates in .claude/skills/video-generation.md");

package/src/react/examples/split-layout-demo.tsx

@@ -1,7 +1,7 @@
 /**
- * SplitLayout Demo - uses the layout helper (positions children in clip)
+ * Split Demo - uses the layout helper (positions children in clip)
  *
- * SplitLayout just adds position props to children, letting the clip handle rendering.
+ * Split just adds position props to children, letting the clip handle rendering.
  * Good for: when you want positioned images/videos within a clip alongside other layers
  */
 import {
@@ -11,13 +11,13 @@ import {
   Render,
   render,
   Slider,
-  SplitLayout,
+  Split,
   Swipe,
   Title,
 } from "..";
 
 async function main() {
-  console.log("SplitLayout Demo (uses layout helper)\n");
+  console.log("Split Demo (uses layout helper)\n");
 
   const img1 = Image({ src: "media/cyberpunk-street.png" });
   const img2 = Image({ src: "media/fal-coffee-shop.png" });
@@ -26,8 +26,8 @@ async function main() {
   const video = (
     <Render width={1280} height={720}>
       <Clip duration={3}>
-        <SplitLayout direction="horizontal" left={img1} right={img2} />
-        <Title position="bottom">SplitLayout (layout helper)</Title>
+        <Split direction="horizontal">{[img1, img2]}</Split>
+        <Title position="bottom">Split (layout helper)</Title>
       </Clip>
 
       <Clip duration={4} transition={{ name: "fade", duration: 0.5 }}>

package/src/react/examples/split.tsx

@@ -1,5 +1,5 @@
 import { fal } from "../../ai-sdk/providers/fal";
-import { Clip, Image, Render, render, SplitLayout as Split, Title } from "..";
+import { Clip, Image, Render, render, Split, Title } from "..";
 
 async function main() {
   console.log("creating before/after split screen...\n");
@@ -19,7 +19,7 @@ async function main() {
   const video = (
     <Render width={1920} height={1080}>
       <Clip duration={5}>
-        <Split left={before} right={after} />
+        <Split>{[before, after]}</Split>
         <Title position="bottom" color="#ffffff">
           30 Day Transformation
         </Title>
@@ -34,7 +34,7 @@ async function main() {
     cache: ".cache/ai",
   });
 
-  console.log(`\ndone! ${buffer.byteLength} bytes`);
+  console.log(`\ndone! ${buffer.video.byteLength} bytes`);
   console.log("output: output/react-split.mp4");
 }
 

package/src/react/examples/video-grid.tsx

@@ -39,7 +39,7 @@ async function main() {
     cache: ".cache/ai",
   });
 
-  console.log(`\ndone! ${buffer.byteLength} bytes`);
+  console.log(`\ndone! ${buffer.video.byteLength} bytes`);
   console.log("output: output/react-video-grid.mp4");
 }
 

package/src/react/index.ts

@@ -1,4 +1,5 @@
 export type { CacheStorage } from "../ai-sdk/cache";
+export { File } from "../ai-sdk/file";
 export type { SizeValue } from "../ai-sdk/providers/editly/types";
 export { assets } from "./assets";
 export {
@@ -11,18 +12,19 @@ export {
   Render,
   Slider,
   Speech,
-  Split,
   Subtitle,
   Swipe,
   TalkingHead,
   Title,
   Video,
 } from "./elements";
-export { Grid, Slot, SplitLayout } from "./layouts";
+export { Grid, Slot, Split } from "./layouts";
 export { render, renderStream } from "./render";
 export type {
   CaptionsProps,
   ClipProps,
+  FileMetadata,
+  GeneratedFileType,
   ImageProps,
   MusicProps,
   OverlayProps,
@@ -30,6 +32,7 @@ export type {
   PositionProps,
   RenderOptions,
   RenderProps,
+  RenderResult,
   SliderProps,
   SpeechProps,
   SplitProps,

package/src/react/layouts/grid.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource vargai */
 import type { VargElement } from "../types";
 
 export const Grid = ({
@@ -11,6 +12,9 @@ export const Grid = ({
   children: VargElement[];
   resize?: "cover" | "contain" | "stretch";
 }) => {
+  if (children.length === 0) {
+    return null;
+  }
   const cols = columns ?? children.length;
   const rowCount = rows ?? Math.ceil(children.length / cols);
   const positioned = children.map((el, i) => ({

package/src/react/layouts/index.ts

@@ -1,3 +1,3 @@
 export { Grid } from "./grid";
 export { Slot } from "./slot";
-export { Split, SplitLayout } from "./split";
+export { Split } from "./split";

package/src/react/layouts/layouts.test.ts

@@ -0,0 +1,345 @@
+import { describe, expect, test } from "bun:test";
+import { Video } from "../index";
+import type { VargElement } from "../types";
+import { Grid } from "./grid";
+import { Slot } from "./slot";
+import { Split } from "./split";
+
+// Grid/Split return arrays at runtime (JSX fragments serialize to arrays)
+function asArray(result: unknown): VargElement[] {
+  return result as VargElement[];
+}
+
+describe("Slot", () => {
+  test("parses fit-cover class", () => {
+    const child = Video({ src: "test.mp4" });
+    const result = Slot({ class: "fit-cover", children: child });
+
+    expect(result.props.resize).toBe("cover");
+  });
+
+  test("parses fit-contain class", () => {
+    const child = Video({ src: "test.mp4" });
+    const result = Slot({ class: "fit-contain", children: child });
+
+    expect(result.props.resize).toBe("contain");
+  });
+
+  test("parses fit-contain-blur class", () => {
+    const child = Video({ src: "test.mp4" });
+    const result = Slot({ class: "fit-contain-blur", children: child });
+
+    expect(result.props.resize).toBe("contain-blur");
+  });
+
+  test("parses fit-fill class as stretch", () => {
+    const child = Video({ src: "test.mp4" });
+    const result = Slot({ class: "fit-fill", children: child });
+
+    expect(result.props.resize).toBe("stretch");
+  });
+
+  test("parses pos-top class", () => {
+    const child = Video({ src: "test.mp4" });
+    const result = Slot({ class: "pos-top", children: child });
+
+    expect(result.props.cropPosition).toBe("top");
+  });
+
+  test("parses pos-bottom class", () => {
+    const child = Video({ src: "test.mp4" });
+    const result = Slot({ class: "pos-bottom", children: child });
+
+    expect(result.props.cropPosition).toBe("bottom");
+  });
+
+  test("parses pos-left class", () => {
+    const child = Video({ src: "test.mp4" });
+    const result = Slot({ class: "pos-left", children: child });
+
+    expect(result.props.cropPosition).toBe("left");
+  });
+
+  test("parses pos-right class", () => {
+    const child = Video({ src: "test.mp4" });
+    const result = Slot({ class: "pos-right", children: child });
+
+    expect(result.props.cropPosition).toBe("right");
+  });
+
+  test("parses compound position classes", () => {
+    const positions = [
+      "pos-top-left",
+      "pos-top-right",
+      "pos-bottom-left",
+      "pos-bottom-right",
+    ] as const;
+
+    for (const pos of positions) {
+      const child = Video({ src: "test.mp4" });
+      const result = Slot({ class: pos, children: child });
+      expect(result.props.cropPosition).toBe(pos.replace("pos-", ""));
+    }
+  });
+
+  test("parses combined fit and position classes", () => {
+    const child = Video({ src: "test.mp4" });
+    const result = Slot({ class: "fit-cover pos-top", children: child });
+
+    expect(result.props.resize).toBe("cover");
+    expect(result.props.cropPosition).toBe("top");
+  });
+
+  test("explicit props override class", () => {
+    const child = Video({ src: "test.mp4" });
+    const result = Slot({
+      class: "fit-cover pos-top",
+      fit: "contain",
+      position: "bottom",
+      children: child,
+    });
+
+    expect(result.props.resize).toBe("contain");
+    expect(result.props.cropPosition).toBe("bottom");
+  });
+
+  test("defaults to cover and center when no class or props", () => {
+    const child = Video({ src: "test.mp4" });
+    const result = Slot({ children: child });
+
+    expect(result.props.resize).toBe("cover");
+    expect(result.props.cropPosition).toBe("center");
+  });
+
+  test("preserves child props", () => {
+    const child = Video({ src: "test.mp4", volume: 0.5 });
+    const result = Slot({ class: "fit-cover pos-top", children: child });
+
+    expect(result.props.src).toBe("test.mp4");
+    expect(result.props.volume).toBe(0.5);
+    expect(result.type).toBe("video");
+  });
+});
+
+describe("Split", () => {
+  test("horizontal split positions children side by side", () => {
+    const children = [
+      Video({ src: "a.mp4" }),
+      Video({ src: "b.mp4" }),
+    ] as VargElement[];
+
+    const result = asArray(Split({ direction: "horizontal", children }));
+
+    expect(result.length).toBe(2);
+    expect(result[0]?.props.left).toBe("0%");
+    expect(result[0]?.props.width).toBe("50%");
+    expect(result[1]?.props.left).toBe("50%");
+    expect(result[1]?.props.width).toBe("50%");
+  });
+
+  test("vertical split stacks children", () => {
+    const children = [
+      Video({ src: "a.mp4" }),
+      Video({ src: "b.mp4" }),
+    ] as VargElement[];
+
+    const result = asArray(Split({ direction: "vertical", children }));
+
+    expect(result.length).toBe(2);
+    expect(result[0]?.props.top).toBe("0%");
+    expect(result[0]?.props.height).toBe("50%");
+    expect(result[1]?.props.top).toBe("50%");
+    expect(result[1]?.props.height).toBe("50%");
+  });
+
+  test("returns null for empty children", () => {
+    const result = Split({ children: [] });
+    expect(result).toBeNull();
+  });
+
+  test("defaults to horizontal", () => {
+    const children = [
+      Video({ src: "a.mp4" }),
+      Video({ src: "b.mp4" }),
+    ] as VargElement[];
+
+    const result = asArray(Split({ children }));
+
+    expect(result[0]?.props.left).toBe("0%");
+    expect(result[1]?.props.left).toBe("50%");
+  });
+});
+
+describe("Grid", () => {
+  test("2x1 grid positions children horizontally", () => {
+    const children = [
+      Video({ src: "a.mp4" }),
+      Video({ src: "b.mp4" }),
+    ] as VargElement[];
+
+    const result = asArray(Grid({ columns: 2, rows: 1, children }));
+
+    expect(result[0]?.props.left).toBe("0%");
+    expect(result[0]?.props.top).toBe("0%");
+    expect(result[0]?.props.width).toBe("50%");
+    expect(result[0]?.props.height).toBe("100%");
+
+    expect(result[1]?.props.left).toBe("50%");
+    expect(result[1]?.props.top).toBe("0%");
+    expect(result[1]?.props.width).toBe("50%");
+    expect(result[1]?.props.height).toBe("100%");
+  });
+
+  test("1x2 grid positions children vertically", () => {
+    const children = [
+      Video({ src: "a.mp4" }),
+      Video({ src: "b.mp4" }),
+    ] as VargElement[];
+
+    const result = asArray(Grid({ columns: 1, rows: 2, children }));
+
+    expect(result[0]?.props.left).toBe("0%");
+    expect(result[0]?.props.top).toBe("0%");
+    expect(result[0]?.props.width).toBe("100%");
+    expect(result[0]?.props.height).toBe("50%");
+
+    expect(result[1]?.props.left).toBe("0%");
+    expect(result[1]?.props.top).toBe("50%");
+    expect(result[1]?.props.width).toBe("100%");
+    expect(result[1]?.props.height).toBe("50%");
+  });
+
+  test("2x2 grid positions children in grid pattern", () => {
+    const children = [
+      Video({ src: "a.mp4" }),
+      Video({ src: "b.mp4" }),
+      Video({ src: "c.mp4" }),
+      Video({ src: "d.mp4" }),
+    ] as VargElement[];
+
+    const result = asArray(Grid({ columns: 2, rows: 2, children }));
+
+    expect(result[0]?.props.left).toBe("0%");
+    expect(result[0]?.props.top).toBe("0%");
+
+    expect(result[1]?.props.left).toBe("50%");
+    expect(result[1]?.props.top).toBe("0%");
+
+    expect(result[2]?.props.left).toBe("0%");
+    expect(result[2]?.props.top).toBe("50%");
+
+    expect(result[3]?.props.left).toBe("50%");
+    expect(result[3]?.props.top).toBe("50%");
+  });
+
+  test("defaults resize to contain", () => {
+    const children = [Video({ src: "a.mp4" })] as VargElement[];
+    const result = asArray(Grid({ columns: 1, children }));
+
+    expect(result[0]?.props.resize).toBe("contain");
+  });
+
+  test("child resize overrides grid default", () => {
+    const child = Video({ src: "a.mp4" });
+    (child.props as Record<string, unknown>).resize = "cover";
+
+    const result = asArray(Grid({ columns: 1, children: [child] }));
+
+    expect(result[0]?.props.resize).toBe("cover");
+  });
+
+  test("infers columns from children length when not specified", () => {
+    const children = [
+      Video({ src: "a.mp4" }),
+      Video({ src: "b.mp4" }),
+      Video({ src: "c.mp4" }),
+    ] as VargElement[];
+
+    const result = asArray(Grid({ children }));
+
+    expect((result[0]?.props.width as string).startsWith("33.33")).toBe(true);
+    expect((result[1]?.props.width as string).startsWith("33.33")).toBe(true);
+    expect((result[2]?.props.width as string).startsWith("33.33")).toBe(true);
+  });
+});
+
+describe("Split + Slot integration", () => {
+  test("vertical split with Slot applies fit and position", () => {
+    const video1 = Video({ src: "a.mp4" });
+    const video2 = Video({ src: "b.mp4" });
+
+    const slot1 = Slot({ class: "fit-cover pos-top", children: video1 });
+    const slot2 = Slot({ class: "fit-cover pos-bottom", children: video2 });
+
+    const result = asArray(
+      Split({ direction: "vertical", children: [slot1, slot2] }),
+    );
+
+    expect(result[0]?.props.top).toBe("0%");
+    expect(result[0]?.props.height).toBe("50%");
+    expect(result[0]?.props.resize).toBe("cover");
+    expect(result[0]?.props.cropPosition).toBe("top");
+
+    expect(result[1]?.props.top).toBe("50%");
+    expect(result[1]?.props.height).toBe("50%");
+    expect(result[1]?.props.resize).toBe("cover");
+    expect(result[1]?.props.cropPosition).toBe("bottom");
+  });
+
+  test("horizontal split with mixed Slot positions", () => {
+    const video1 = Video({ src: "a.mp4" });
+    const video2 = Video({ src: "b.mp4" });
+
+    const slot1 = Slot({ class: "fit-cover pos-left", children: video1 });
+    const slot2 = Slot({ class: "fit-contain pos-right", children: video2 });
+
+    const result = asArray(
+      Split({ direction: "horizontal", children: [slot1, slot2] }),
+    );
+
+    expect(result[0]?.props.resize).toBe("cover");
+    expect(result[0]?.props.cropPosition).toBe("left");
+
+    expect(result[1]?.props.resize).toBe("contain");
+    expect(result[1]?.props.cropPosition).toBe("right");
+  });
+});
+
+describe("Grid + Slot integration", () => {
+  test("2x2 grid with different Slot configurations", () => {
+    const videos = [
+      Video({ src: "a.mp4" }),
+      Video({ src: "b.mp4" }),
+      Video({ src: "c.mp4" }),
+      Video({ src: "d.mp4" }),
+    ];
+
+    const slots = [
+      Slot({
+        class: "fit-cover pos-top-left",
+        children: videos[0] as VargElement,
+      }),
+      Slot({
+        class: "fit-cover pos-top-right",
+        children: videos[1] as VargElement,
+      }),
+      Slot({
+        class: "fit-contain pos-bottom-left",
+        children: videos[2] as VargElement,
+      }),
+      Slot({
+        class: "fit-fill pos-bottom-right",
+        children: videos[3] as VargElement,
+      }),
+    ];
+
+    const result = asArray(Grid({ columns: 2, rows: 2, children: slots }));
+
+    expect(result[0]?.props.cropPosition).toBe("top-left");
+    expect(result[1]?.props.cropPosition).toBe("top-right");
+    expect(result[2]?.props.cropPosition).toBe("bottom-left");
+    expect(result[2]?.props.resize).toBe("contain");
+    expect(result[3]?.props.cropPosition).toBe("bottom-right");
+    expect(result[3]?.props.resize).toBe("stretch");
+  });
+});

package/src/react/layouts/split.tsx

@@ -1,24 +1,7 @@
+/** @jsxImportSource vargai */
 import type { VargElement } from "../types";
 import { Grid } from "./grid";
 
-export const SplitLayout = ({
-  left,
-  right,
-  direction = "horizontal",
-}: {
-  left: VargElement;
-  right: VargElement;
-  direction?: "horizontal" | "vertical";
-}) => (
-  <Grid
-    columns={direction === "horizontal" ? 2 : 1}
-    rows={direction === "vertical" ? 2 : 1}
-  >
-    {left}
-    {right}
-  </Grid>
-);
-
 export const Split = ({
   direction = "horizontal",
   children,