vargai 0.4.0-alpha13 → 0.4.0-alpha15

package/package.json

@@ -64,7 +64,7 @@
     "replicate": "^1.4.0",
     "zod": "^4.2.1"
   },
-  "version": "0.4.0-alpha13",
+  "version": "0.4.0-alpha15",
   "exports": {
     ".": "./src/index.ts",
     "./ai": "./src/ai-sdk/index.ts",

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

@@ -137,6 +137,15 @@ function isOverlayLayer(layer: Layer): boolean {
   return isVideoOverlayLayer(layer) || isImageOverlayLayer(layer);
 }
 
+function isTextOverlayLayer(layer: Layer): boolean {
+  return (
+    layer.type === "title" ||
+    layer.type === "subtitle" ||
+    layer.type === "news-title" ||
+    layer.type === "slide-in-text"
+  );
+}
+
 function buildBaseClipFilter(
   clip: ProcessedClip,
   clipIndex: number,
@@ -164,7 +173,10 @@ function buildBaseClipFilter(
   let baseLabel = "";
   let inputIdx = inputOffset;
 
-  const baseLayers = clip.layers.filter((l) => l && !isOverlayLayer(l));
+  // 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),
+  );
 
   for (let i = 0; i < baseLayers.length; i++) {
     const layer = baseLayers[i];
@@ -201,58 +213,6 @@ function buildBaseClipFilter(
         inputIdx++;
       }
     }
-
-    if (layer.type === "title") {
-      const titleFilter = getTitleFilter(
-        layer as TitleLayer,
-        baseLabel,
-        width,
-        height,
-        clip.duration,
-      );
-      const newLabel = `title${clipIndex}_${i}`;
-      filters.push(`${titleFilter}[${newLabel}]`);
-      baseLabel = newLabel;
-    }
-
-    if (layer.type === "subtitle") {
-      const subtitleFilter = getSubtitleFilter(
-        layer as SubtitleLayer,
-        baseLabel,
-        width,
-        height,
-        clip.duration,
-      );
-      const newLabel = `sub${clipIndex}_${i}`;
-      filters.push(`${subtitleFilter}[${newLabel}]`);
-      baseLabel = newLabel;
-    }
-
-    if (layer.type === "news-title") {
-      const newsFilter = getNewsTitleFilter(
-        layer as NewsTitleLayer,
-        baseLabel,
-        width,
-        height,
-        clip.duration,
-      );
-      const newLabel = `news${clipIndex}_${i}`;
-      filters.push(`${newsFilter}[${newLabel}]`);
-      baseLabel = newLabel;
-    }
-
-    if (layer.type === "slide-in-text") {
-      const slideFilter = getSlideInTextFilter(
-        layer as SlideInTextLayer,
-        baseLabel,
-        width,
-        height,
-        clip.duration,
-      );
-      const newLabel = `slide${clipIndex}_${i}`;
-      filters.push(`${slideFilter}[${newLabel}]`);
-      baseLabel = newLabel;
-    }
   }
 
   return {
@@ -358,6 +318,41 @@ function collectAudioLayers(
   return audioLayers;
 }
 
+type TextLayer = TitleLayer | SubtitleLayer | NewsTitleLayer | SlideInTextLayer;
+
+interface TimedTextLayer {
+  layer: TextLayer;
+  startTime: number;
+  duration: number;
+}
+
+function collectTextLayers(clips: ProcessedClip[]): TimedTextLayer[] {
+  const textLayers: TimedTextLayer[] = [];
+  let currentTime = 0;
+
+  for (let i = 0; i < clips.length; i++) {
+    const clip = clips[i];
+    if (!clip) continue;
+
+    for (const layer of clip.layers) {
+      if (layer && isTextOverlayLayer(layer)) {
+        textLayers.push({
+          layer: layer as TextLayer,
+          startTime: currentTime,
+          duration: clip.duration,
+        });
+      }
+    }
+
+    currentTime += clip.duration;
+    if (i < clips.length - 1) {
+      currentTime -= clip.transition.duration;
+    }
+  }
+
+  return textLayers;
+}
+
 function buildTransitionFilter(
   fromLabel: string,
   toLabel: string,
@@ -744,6 +739,67 @@ export async function editly(config: EditlyConfig): Promise<void> {
     finalVideoLabel = currentBase;
   }
 
+  const textLayers = collectTextLayers(clips);
+  if (textLayers.length > 0) {
+    let currentBase = finalVideoLabel;
+
+    for (let i = 0; i < textLayers.length; i++) {
+      const timedLayer = textLayers[i];
+      if (!timedLayer) continue;
+
+      const { layer, startTime, duration } = timedLayer;
+      const outputLabel = `vwithtext${i}`;
+
+      const timedLayerWithEnable = {
+        ...layer,
+        start: layer.start ?? startTime,
+        stop: layer.stop ?? startTime + duration,
+      };
+
+      if (layer.type === "title") {
+        const titleFilter = getTitleFilter(
+          timedLayerWithEnable as TitleLayer,
+          currentBase,
+          width,
+          height,
+          totalDuration,
+        );
+        allFilters.push(`${titleFilter}[${outputLabel}]`);
+      } else if (layer.type === "subtitle") {
+        const subtitleFilter = getSubtitleFilter(
+          timedLayerWithEnable as SubtitleLayer,
+          currentBase,
+          width,
+          height,
+          totalDuration,
+        );
+        allFilters.push(`${subtitleFilter}[${outputLabel}]`);
+      } else if (layer.type === "news-title") {
+        const newsFilter = getNewsTitleFilter(
+          timedLayerWithEnable as NewsTitleLayer,
+          currentBase,
+          width,
+          height,
+          totalDuration,
+        );
+        allFilters.push(`${newsFilter}[${outputLabel}]`);
+      } else if (layer.type === "slide-in-text") {
+        const slideFilter = getSlideInTextFilter(
+          timedLayerWithEnable as SlideInTextLayer,
+          currentBase,
+          width,
+          height,
+          totalDuration,
+        );
+        allFilters.push(`${slideFilter}[${outputLabel}]`);
+      }
+
+      currentBase = outputLabel;
+    }
+
+    finalVideoLabel = currentBase;
+  }
+
   const clipAudioLayers = collectAudioLayers(clips);
   const videoInputCount = allInputs.length;
   const audioFilter = buildAudioFilter(

package/src/cli/commands/render.ts

@@ -1,19 +1,38 @@
 import { existsSync, mkdirSync } from "node:fs";
-import { dirname, resolve } from "node:path";
+import { resolve } from "node:path";
 import { defineCommand } from "citty";
 import { render } from "../../react/render";
-import type { RenderMode, VargElement } from "../../react/types";
+import type { DefaultModels, RenderMode, VargElement } from "../../react/types";
 
 const AUTO_IMPORTS = `/** @jsxImportSource vargai */
 import { Animate, Captions, Clip, Image, Music, Overlay, Packshot, Render, Slider, Speech, Split, Subtitle, Swipe, TalkingHead, Title, Video, Grid, SplitLayout } from "vargai/react";
 import { fal, elevenlabs, replicate } from "vargai/ai";
 `;
 
+async function detectDefaultModels(): Promise<DefaultModels | undefined> {
+  const defaults: DefaultModels = {};
+
+  if (process.env.FAL_KEY) {
+    const { fal } = await import("../../ai-sdk/providers/fal");
+    defaults.image = fal.imageModel("flux-schnell");
+    defaults.video = fal.videoModel("wan-2.5");
+  }
+
+  if (process.env.ELEVENLABS_API_KEY) {
+    const { elevenlabs } = await import("../../ai-sdk/providers/elevenlabs");
+    defaults.speech = elevenlabs.speechModel("eleven_multilingual_v2");
+    defaults.music = elevenlabs.musicModel("music_v1");
+  }
+
+  return Object.keys(defaults).length > 0 ? defaults : undefined;
+}
+
 async function loadComponent(filePath: string): Promise<VargElement> {
   const resolvedPath = resolve(filePath);
   const source = await Bun.file(resolvedPath).text();
 
-  const hasImports =
+  const hasAnyImport = source.includes(" from ");
+  const hasVargaiImport =
     source.includes("from 'vargai") ||
     source.includes('from "vargai') ||
     source.includes("from '@vargai") ||
@@ -22,22 +41,21 @@ async function loadComponent(filePath: string): Promise<VargElement> {
   const hasJsxPragma =
     source.includes("@jsxImportSource") || source.includes("@jsx ");
 
-  if (hasImports && hasJsxPragma) {
+  // file has imports (relative or absolute) - import directly to preserve paths
+  if (hasAnyImport) {
     const mod = await import(resolvedPath);
     return mod.default;
   }
 
+  // no imports - inject auto-imports and jsx pragma
   const pkgDir = new URL("../../..", import.meta.url).pathname;
   const tmpDir = `${pkgDir}/.cache/varg-render`;
   if (!existsSync(tmpDir)) {
     mkdirSync(tmpDir, { recursive: true });
   }
 
-  const prepended = hasImports
-    ? `/** @jsxImportSource vargai */\n`
-    : AUTO_IMPORTS;
   const tmpFile = `${tmpDir}/${Date.now()}.tsx`;
-  await Bun.write(tmpFile, prepended + source);
+  await Bun.write(tmpFile, AUTO_IMPORTS + source);
 
   try {
     const mod = await import(tmpFile);
@@ -130,10 +148,13 @@ export const renderCmd = defineCommand({
 
     const useCache = !args["no-cache"] && mode !== "preview";
 
+    const defaults = await detectDefaultModels();
+
     const buffer = await render(component, {
       output: outputPath,
       cache: useCache ? args.cache : undefined,
       mode,
+      defaults,
     });
 
     if (!args.quiet) {

package/src/react/renderers/context.ts

@@ -1,6 +1,7 @@
 import type { generateImage } from "ai";
 import type { fileCache } from "../../ai-sdk/file-cache";
 import type { generateVideo } from "../../ai-sdk/generate-video";
+import type { DefaultModels } from "../types";
 import type { ProgressTracker } from "./progress";
 
 export interface RenderContext {
@@ -14,4 +15,6 @@ export interface RenderContext {
   progress?: ProgressTracker;
   /** In-memory deduplication for concurrent renders of the same element */
   pending: Map<string, Promise<string>>;
+  /** Default models for elements that don't specify one */
+  defaults?: DefaultModels;
 }

package/src/react/renderers/image.ts

@@ -54,9 +54,11 @@ export async function renderImage(
     throw new Error("Image element requires either 'prompt' or 'src'");
   }
 
-  const model = props.model;
+  const model = props.model ?? ctx.defaults?.image;
   if (!model) {
-    throw new Error("Image element requires 'model' prop when using prompt");
+    throw new Error(
+      "Image element requires 'model' prop (or set defaults.image in render options)",
+    );
   }
 
   // Compute cache key for deduplication

package/src/react/renderers/music.ts

@@ -10,9 +10,9 @@ export async function renderMusic(
   const props = element.props as MusicProps;
 
   const prompt = props.prompt;
-  const model = props.model;
+  const model = props.model ?? ctx.defaults?.music;
   if (!prompt || !model) {
-    throw new Error("Music generation requires both prompt and model");
+    throw new Error("Music requires prompt and model (or set defaults.music)");
   }
 
   const cacheKey = JSON.stringify({

package/src/react/renderers/render.ts

@@ -70,42 +70,63 @@ export async function renderRoot(
     placeholderCount.total++;
   };
 
+  const cachedGenerateImage = options.cache
+    ? withCache(generateImage, { storage: fileCache({ dir: options.cache }) })
+    : generateImage;
+
+  const cachedGenerateVideo = options.cache
+    ? withCache(generateVideo, { storage: fileCache({ dir: options.cache }) })
+    : generateVideo;
+
   const wrapGenerateImage: typeof generateImage = async (opts) => {
     if (
       typeof opts.model === "string" ||
       opts.model.specificationVersion !== "v3"
     ) {
-      return generateImage(opts);
+      return cachedGenerateImage(opts);
+    }
+
+    if (mode === "preview") {
+      trackPlaceholder("image");
+    }
+
+    try {
+      return await cachedGenerateImage(opts);
+    } catch (error) {
+      if (mode === "strict") throw error;
+      trackPlaceholder("image");
+      onFallback(error as Error, String(opts.prompt));
+      const wrappedModel = wrapImageModel({
+        model: opts.model,
+        middleware: imagePlaceholderFallbackMiddleware({
+          mode: "preview",
+          onFallback: () => {},
+        }),
+      });
+      return generateImage({ ...opts, model: wrappedModel });
     }
-    const wrappedModel = wrapImageModel({
-      model: opts.model,
-      middleware: imagePlaceholderFallbackMiddleware({
-        mode,
-        onFallback: (error, prompt) => {
-          trackPlaceholder("image");
-          onFallback(error, prompt);
-        },
-      }),
-    });
-    const result = await generateImage({ ...opts, model: wrappedModel });
-    if (mode === "preview") trackPlaceholder("image");
-    return result;
   };
 
   const wrapGenerateVideo: typeof generateVideo = async (opts) => {
-    const wrappedModel = wrapVideoModel({
-      model: opts.model,
-      middleware: placeholderFallbackMiddleware({
-        mode,
-        onFallback: (error, prompt) => {
-          trackPlaceholder("video");
-          onFallback(error, prompt);
-        },
-      }),
-    });
-    const result = await generateVideo({ ...opts, model: wrappedModel });
-    if (mode === "preview") trackPlaceholder("video");
-    return result;
+    if (mode === "preview") {
+      trackPlaceholder("video");
+    }
+
+    try {
+      return await cachedGenerateVideo(opts);
+    } catch (error) {
+      if (mode === "strict") throw error;
+      trackPlaceholder("video");
+      onFallback(error as Error, String(opts.prompt));
+      const wrappedModel = wrapVideoModel({
+        model: opts.model,
+        middleware: placeholderFallbackMiddleware({
+          mode: "preview",
+          onFallback: () => {},
+        }),
+      });
+      return generateVideo({ ...opts, model: wrappedModel });
+    }
   };
 
   const ctx: RenderContext = {
@@ -113,19 +134,12 @@ export async function renderRoot(
     height: props.height ?? 1080,
     fps: props.fps ?? 30,
     cache: options.cache ? fileCache({ dir: options.cache }) : undefined,
-    generateImage: options.cache
-      ? withCache(wrapGenerateImage, {
-          storage: fileCache({ dir: options.cache }),
-        })
-      : wrapGenerateImage,
-    generateVideo: options.cache
-      ? withCache(wrapGenerateVideo, {
-          storage: fileCache({ dir: options.cache }),
-        })
-      : wrapGenerateVideo,
+    generateImage: wrapGenerateImage,
+    generateVideo: wrapGenerateVideo,
     tempFiles: [],
     progress,
     pending: new Map(),
+    defaults: options.defaults,
   };
 
   const clipElements: VargElement<"clip">[] = [];
@@ -287,6 +301,7 @@ export async function renderRoot(
     fps: ctx.fps,
     clips,
     audioTracks: audioTracks.length > 0 ? audioTracks : undefined,
+    verbose: options.verbose,
   });
 
   completeTask(progress, editlyTaskId);

package/src/react/renderers/speech.ts

@@ -21,9 +21,9 @@ export async function renderSpeech(
     throw new Error("Speech element requires text content");
   }
 
-  const model = props.model;
+  const model = props.model ?? ctx.defaults?.speech;
   if (!model) {
-    throw new Error("Speech element requires 'model' prop");
+    throw new Error("Speech requires 'model' prop (or set defaults.speech)");
   }
 
   const cacheKey = computeCacheKey(element);

package/src/react/renderers/video.ts

@@ -81,9 +81,11 @@ export async function renderVideo(
     throw new Error("Video element requires either 'prompt' or 'src'");
   }
 
-  const model = props.model;
+  const model = props.model ?? ctx.defaults?.video;
   if (!model) {
-    throw new Error("Video element requires 'model' prop when using prompt");
+    throw new Error(
+      "Video element requires 'model' prop (or set defaults.video in render options)",
+    );
   }
 
   // Compute cache key for deduplication

package/src/react/types.ts

@@ -212,11 +212,20 @@ export interface PackshotProps extends BaseProps {
 
 export type RenderMode = "strict" | "default" | "preview";
 
+export interface DefaultModels {
+  image?: ImageModelV3;
+  video?: VideoModelV3;
+  speech?: SpeechModelV3;
+  music?: MusicModelV3;
+}
+
 export interface RenderOptions {
   output?: string;
   cache?: string;
   quiet?: boolean;
+  verbose?: boolean;
   mode?: RenderMode;
+  defaults?: DefaultModels;
 }
 
 export interface ElementPropsMap {