vargai 0.4.0-alpha4 → 0.4.0-alpha40

package/src/react/renderers/packshot.ts

@@ -4,14 +4,86 @@ import type {
   ImageOverlayLayer,
   Layer,
   Position,
+  PositionObject,
+  SizeValue,
   TitleLayer,
 } from "../../ai-sdk/providers/editly/types";
 import type { PackshotProps, VargElement } from "../types";
 import type { RenderContext } from "./context";
 import { renderImage } from "./image";
+import { createBlinkingButton } from "./packshot/blinking-button";
+
+/**
+ * Type guard: returns true if `pos` is a PositionObject ({ x, y }).
+ */
+function isPositionObject(pos: Position): pos is PositionObject {
+  return typeof pos === "object" && pos !== null && "x" in pos && "y" in pos;
+}
+
+/**
+ * Parse a SizeValue to a normalised 0-1 fraction.
+ *
+ * - `number`        – treated as a raw pixel value; divided by `total`.
+ * - `"50%"`         – percentage string; divided by 100.
+ * - `"120px"`       – pixel string; parsed and divided by `total`.
+ *
+ * Returns `0.5` (centre) when the value cannot be parsed.
+ */
+function sizeValueToFraction(value: SizeValue, total: number): number {
+  if (typeof value === "number") {
+    return total > 0 ? value / total : 0.5;
+  }
+  if (typeof value === "string") {
+    if (value.endsWith("%")) {
+      const n = parseFloat(value);
+      return Number.isFinite(n) ? n / 100 : 0.5;
+    }
+    if (value.endsWith("px")) {
+      const n = parseFloat(value);
+      return Number.isFinite(n) && total > 0 ? n / total : 0.5;
+    }
+  }
+  return 0.5;
+}
+
+/**
+ * Convert a PositionObject to the nearest string Position.
+ *
+ * The x axis is split into thirds: left (< 0.33), center, right (> 0.67).
+ * The y axis is split into thirds: top (< 0.33), center, bottom (> 0.67).
+ *
+ * `refWidth` / `refHeight` are only needed when the SizeValue is in pixels;
+ * when unknown, pass 1 and only percentage / fraction values will resolve
+ * correctly.
+ */
+function positionObjectToString(
+  obj: PositionObject,
+  refWidth = 1,
+  refHeight = 1,
+): Exclude<Position, PositionObject> {
+  const fx = sizeValueToFraction(obj.x, refWidth);
+  const fy = sizeValueToFraction(obj.y, refHeight);
+
+  const col: "left" | "center" | "right" =
+    fx < 0.33 ? "left" : fx > 0.67 ? "right" : "center";
+  const row: "top" | "center" | "bottom" =
+    fy < 0.33 ? "top" : fy > 0.67 ? "bottom" : "center";
+
+  if (row === "center" && col === "center") return "center";
+  if (row === "center")
+    return `center-${col}` as "center-left" | "center-right";
+  if (col === "center") return row; // "top" | "bottom"
+  return `${row}-${col}` as
+    | "top-left"
+    | "top-right"
+    | "bottom-left"
+    | "bottom-right";
+}
 
 function resolvePosition(pos: Position | undefined): Position {
-  return pos ?? "center";
+  if (pos === undefined) return "center";
+  if (isPositionObject(pos)) return positionObjectToString(pos);
+  return pos;
 }
 
 export async function renderPackshot(
@@ -23,6 +95,7 @@ export async function renderPackshot(
 
   const layers: Layer[] = [];
 
+  // ===== BACKGROUND LAYER =====
   if (props.background) {
     if (typeof props.background === "string") {
       layers.push({
@@ -44,17 +117,30 @@ export async function renderPackshot(
     });
   }
 
+  // ===== LOGO LAYER =====
   if (props.logo) {
     const logoLayer: ImageOverlayLayer = {
       type: "image-overlay",
       path: props.logo,
-      position: resolvePosition(props.logoPosition),
-      width: props.logoSize ?? "30%",
+      position: resolvePosition(props.logoPosition ?? "center"),
+      width: props.logoSize ?? "40%",
     };
     layers.push(logoLayer);
   }
 
-  if (props.cta) {
+  // ===== TITLE LAYER =====
+  if (props.title) {
+    const titleLayer: TitleLayer = {
+      type: "title",
+      text: props.title,
+      textColor: props.titleColor ?? "#FFFFFF",
+      position: resolvePosition(props.titlePosition ?? "center"),
+    };
+    layers.push(titleLayer);
+  }
+
+  // ===== STATIC CTA (non-blinking) =====
+  if (props.cta && !props.blinkCta) {
     const ctaLayer: TitleLayer = {
       type: "title",
       text: props.cta,
@@ -64,21 +150,97 @@ export async function renderPackshot(
     layers.push(ctaLayer);
   }
 
+  // Create base packshot video
   const clip: Clip = {
     layers,
     duration,
   };
 
-  const outPath = `/tmp/varg-packshot-${Date.now()}.mp4`;
+  const basePath = `/tmp/varg-packshot-${Date.now()}.mp4`;
 
   await editly({
-    outPath,
+    outPath: basePath,
     width: ctx.width,
     height: ctx.height,
     fps: ctx.fps,
     clips: [clip],
   });
 
-  ctx.tempFiles.push(outPath);
-  return outPath;
+  // ===== BLINKING CTA OVERLAY =====
+  if (props.cta && props.blinkCta) {
+    // Create animated button with Sharp at button-size canvas (fast)
+    const btn = await createBlinkingButton({
+      text: props.cta,
+      width: ctx.width,
+      height: ctx.height,
+      duration,
+      fps: ctx.fps,
+      bgColor: props.ctaColor ?? "#FF6B00",
+      textColor: props.ctaTextColor ?? "#FFFFFF",
+      blinkFrequency: props.blinkFrequency ?? 0.8,
+      position: mapCtaPosition(props.ctaPosition, ctx.height),
+      buttonWidth: props.ctaSize?.width,
+      buttonHeight: props.ctaSize?.height,
+    });
+
+    // Composite button-sized overlay at correct position on base video
+    const finalPath = `/tmp/varg-packshot-final-${Date.now()}.mp4`;
+    const { $ } = await import("bun");
+
+    // Overlay the blinking button (with alpha) on the packshot
+    await $`ffmpeg -y \
+      -i ${basePath} \
+      -i ${btn.path} \
+      -filter_complex "[0:v][1:v]overlay=${btn.x}:${btn.y}:format=auto" \
+      -c:v libx264 -preset fast -crf 18 -pix_fmt yuv420p \
+      ${finalPath}`.quiet();
+
+    ctx.tempFiles.push(basePath, btn.path);
+    return finalPath;
+  }
+
+  ctx.tempFiles.push(basePath);
+  return basePath;
+}
+
+/**
+ * Map a Position (string literal **or** PositionObject) to the vertical
+ * bucket that the blinking-button renderer understands.
+ *
+ * When a PositionObject ({ x, y }) is provided the y-coordinate is
+ * normalised to a 0-1 fraction and mapped to "top" (< 0.33),
+ * "center" (0.33-0.67), or "bottom" (> 0.67).  Pixel values are
+ * resolved against `refHeight` (defaults to 1, which means only
+ * percentages will convert correctly when the caller does not supply it).
+ */
+function mapCtaPosition(
+  pos: Position | undefined,
+  refHeight = 1,
+): "top" | "center" | "bottom" {
+  if (pos === undefined) return "bottom";
+
+  // Handle PositionObject ({ x, y }) explicitly
+  if (isPositionObject(pos)) {
+    const fy = sizeValueToFraction(pos.y, refHeight);
+    if (fy < 0.33) return "top";
+    if (fy > 0.67) return "bottom";
+    return "center";
+  }
+
+  // String literal positions
+  switch (pos) {
+    case "top":
+    case "top-left":
+    case "top-right":
+      return "top";
+    case "center":
+    case "center-left":
+    case "center-right":
+      return "center";
+    case "bottom":
+    case "bottom-left":
+    case "bottom-right":
+    default:
+      return "bottom";
+  }
 }

package/src/react/renderers/progress.ts

@@ -1,7 +1,6 @@
 export type GenerationType =
   | "image"
   | "video"
-  | "animate"
   | "speech"
   | "music"
   | "editly"
@@ -11,7 +10,6 @@ export type GenerationType =
 export const TIME_ESTIMATES: Record<GenerationType, number> = {
   image: 30,
   video: 120,
-  animate: 90,
   speech: 5,
   music: 45,
   editly: 15,
@@ -30,6 +28,9 @@ export const MODEL_TIME_ESTIMATES: Record<string, number> = {
   kling: 180,
   "kling-v2": 180,
   "kling-v2.5": 180,
+  "kling-v2.6": 180,
+  "kling-v2.6-motion": 240,
+  "kling-v2.6-motion-standard": 180,
   minimax: 90,
   luma: 90,
   runway: 45,
@@ -103,7 +104,7 @@ export function completeTask(tracker: ProgressTracker, id: string): void {
 }
 
 function getEstimate(task: ProgressTask): number {
-  const modelLower = task.model.toLowerCase();
+  const modelLower = task.model?.toLowerCase() ?? "";
   for (const [key, estimate] of Object.entries(MODEL_TIME_ESTIMATES)) {
     if (modelLower.includes(key.toLowerCase())) {
       return estimate;

package/src/react/renderers/render.ts

@@ -1,5 +1,5 @@
 import { generateImage, wrapImageModel } from "ai";
-import { withCache } from "../../ai-sdk/cache";
+import { type CacheStorage, withCache } from "../../ai-sdk/cache";
 import { fileCache } from "../../ai-sdk/file-cache";
 import { generateVideo } from "../../ai-sdk/generate-video";
 import {
@@ -14,6 +14,7 @@ import type {
   Layer,
   VideoLayer,
 } from "../../ai-sdk/providers/editly/types";
+
 import type {
   CaptionsProps,
   ClipProps,
@@ -25,7 +26,7 @@ import type {
   SpeechProps,
   VargElement,
 } from "../types";
-import { renderAnimate } from "./animate";
+import { burnCaptions } from "./burn-captions";
 import { renderCaptions } from "./captions";
 import { renderClip } from "./clip";
 import type { RenderContext } from "./context";
@@ -47,6 +48,16 @@ interface RenderedOverlay {
   isVideo: boolean;
 }
 
+function resolveCacheStorage(
+  cache: string | CacheStorage | undefined,
+): CacheStorage | undefined {
+  if (!cache) return undefined;
+  if (typeof cache === "string") {
+    return fileCache({ dir: cache });
+  }
+  return cache;
+}
+
 export async function renderRoot(
   element: VargElement<"render">,
   options: RenderOptions,
@@ -54,78 +65,74 @@ export async function renderRoot(
   const props = element.props as RenderProps;
   const progress = createProgressTracker(options.quiet ?? false);
 
-  const mode: RenderMode = options.mode ?? "default";
+  const mode: RenderMode = options.mode ?? "strict";
   const placeholderCount = { images: 0, videos: 0, total: 0 };
 
-  const onFallback = (error: Error, prompt: string) => {
-    if (!options.quiet) {
-      console.warn(
-        `\x1b[33m⚠ provider failed: ${error.message} → placeholder\x1b[0m`,
-      );
-    }
-  };
-
   const trackPlaceholder = (type: "image" | "video") => {
     placeholderCount[type === "image" ? "images" : "videos"]++;
     placeholderCount.total++;
   };
 
+  const cacheStorage = resolveCacheStorage(options.cache);
+
+  const cachedGenerateImage = cacheStorage
+    ? withCache(generateImage, { storage: cacheStorage })
+    : generateImage;
+
+  const cachedGenerateVideo = cacheStorage
+    ? withCache(generateVideo, { storage: cacheStorage })
+    : generateVideo;
+
   const wrapGenerateImage: typeof generateImage = async (opts) => {
     if (
       typeof opts.model === "string" ||
       opts.model.specificationVersion !== "v3"
     ) {
-      return generateImage(opts);
+      return cachedGenerateImage(opts);
     }
-    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;
+
+    if (mode === "preview") {
+      trackPlaceholder("image");
+      const wrappedModel = wrapImageModel({
+        model: opts.model,
+        middleware: imagePlaceholderFallbackMiddleware({
+          mode: "preview",
+          onFallback: () => {},
+        }),
+      });
+      return generateImage({ ...opts, model: wrappedModel });
+    }
+
+    return cachedGenerateImage(opts);
   };
 
   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");
+      const wrappedModel = wrapVideoModel({
+        model: opts.model,
+        middleware: placeholderFallbackMiddleware({
+          mode: "preview",
+          onFallback: () => {},
+        }),
+      });
+      return generateVideo({ ...opts, model: wrappedModel });
+    }
+
+    return cachedGenerateVideo(opts);
   };
 
   const ctx: RenderContext = {
     width: props.width ?? 1920,
     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,
+    cache: cacheStorage,
+    generateImage: wrapGenerateImage,
+    generateVideo: wrapGenerateVideo,
     tempFiles: [],
     progress,
     pending: new Map(),
+    defaults: options.defaults,
   };
 
   const clipElements: VargElement<"clip">[] = [];
@@ -177,13 +184,10 @@ export async function renderRoot(
       const childElement = child as VargElement;
 
       let path: string | undefined;
-      const isVideo =
-        childElement.type === "video" || childElement.type === "animate";
+      const isVideo = childElement.type === "video";
 
       if (childElement.type === "video") {
         path = await renderVideo(childElement as VargElement<"video">, ctx);
-      } else if (childElement.type === "animate") {
-        path = await renderAnimate(childElement as VargElement<"animate">, ctx);
       } else if (childElement.type === "image") {
         path = await renderImage(childElement as VargElement<"image">, ctx);
       }
@@ -201,10 +205,42 @@ export async function renderRoot(
     }
   }
 
-  const renderedClips = await Promise.all(
+  const clipResults = await Promise.allSettled(
     clipElements.map((clipElement) => renderClip(clipElement, ctx)),
   );
 
+  const failures = clipResults
+    .map((r, i) =>
+      r.status === "rejected" ? { index: i, reason: r.reason } : null,
+    )
+    .filter(Boolean) as { index: number; reason: Error }[];
+
+  if (failures.length > 0) {
+    const successCount = clipResults.length - failures.length;
+    if (successCount > 0) {
+      console.log(
+        `\x1b[33mℹ ${successCount} clip(s) cached, ${failures.length} failed\x1b[0m`,
+      );
+    }
+    const errorCounts = new Map<string, number>();
+    for (const f of failures) {
+      const msg = f.reason?.message || "Unknown error";
+      errorCounts.set(msg, (errorCounts.get(msg) || 0) + 1);
+    }
+    const errors = [...errorCounts.entries()]
+      .map(([msg, count]) => (count > 1 ? `${msg} (x${count})` : msg))
+      .join("; ");
+    throw new Error(
+      `${failures.length} of ${clipResults.length} clips failed: ${errors}`,
+    );
+  }
+
+  const renderedClips = clipResults.map(
+    (r) =>
+      (r as PromiseFulfilledResult<Awaited<ReturnType<typeof renderClip>>>)
+        .value,
+  );
+
   const clips: Clip[] = [];
   let currentTime = 0;
 
@@ -255,11 +291,11 @@ export async function renderRoot(
     let path: string;
     if (musicProps.src) {
       path = resolvePath(musicProps.src);
-    } else if (musicProps.prompt && musicProps.model) {
+    } else if (musicProps.prompt) {
       const result = await renderMusic(musicElement, ctx);
       path = result.path;
     } else {
-      throw new Error("Music requires either src or prompt+model");
+      throw new Error("Music requires either src or prompt");
     }
 
     audioTracks.push({
@@ -267,6 +303,7 @@ export async function renderRoot(
       mixVolume: musicProps.volume ?? 1,
       cutFrom,
       cutTo,
+      start: musicProps.start,
     });
   }
 
@@ -280,40 +317,59 @@ export async function renderRoot(
   const editlyTaskId = addTask(progress, "editly", "ffmpeg");
   startTask(progress, editlyTaskId);
 
-  await editly({
+  const editlyResult = await editly({
     outPath: tempOutPath,
     width: ctx.width,
     height: ctx.height,
     fps: ctx.fps,
     clips,
     audioTracks: audioTracks.length > 0 ? audioTracks : undefined,
+    shortest: props.shortest,
+    verbose: options.verbose,
+    backend: options.backend,
   });
 
   completeTask(progress, editlyTaskId);
 
+  let output = editlyResult.output;
+
   if (hasCaptions && captionsResult) {
     const captionsTaskId = addTask(progress, "captions", "ffmpeg");
     startTask(progress, captionsTaskId);
 
-    const { $ } = await import("bun");
-    await $`ffmpeg -y -i ${tempOutPath} -vf "ass=${captionsResult.assPath}" -c:a copy ${finalOutPath}`.quiet();
+    output = await burnCaptions({
+      video: output,
+      assPath: captionsResult.assPath,
+      outputPath: finalOutPath,
+      backend: options.backend,
+      verbose: options.verbose,
+    });
+
+    if (!options.backend) {
+      ctx.tempFiles.push(tempOutPath);
+    }
 
-    ctx.tempFiles.push(tempOutPath);
     completeTask(progress, captionsTaskId);
   }
 
-  if (!options.quiet && placeholderCount.total > 0) {
-    if (mode === "preview") {
-      console.log(
-        `\x1b[36mℹ preview mode: ${placeholderCount.total} placeholders used (${placeholderCount.images} images, ${placeholderCount.videos} videos)\x1b[0m`,
-      );
-    } else {
-      console.warn(
-        `\x1b[33m⚠ ${placeholderCount.total} elements used placeholders - run with --strict for production\x1b[0m`,
-      );
+  let finalBuffer: ArrayBuffer;
+  if (output.type === "url") {
+    const res = await fetch(output.url);
+    if (!res.ok)
+      throw new Error(`Failed to download final render: ${res.status}`);
+    finalBuffer = await res.arrayBuffer();
+    if (options.output) {
+      await Bun.write(options.output, finalBuffer);
     }
+  } else {
+    finalBuffer = await Bun.file(output.path).arrayBuffer();
+  }
+
+  if (!options.quiet && mode === "preview" && placeholderCount.total > 0) {
+    console.log(
+      `\x1b[36mℹ preview mode: ${placeholderCount.total} placeholders used (${placeholderCount.images} images, ${placeholderCount.videos} videos)\x1b[0m`,
+    );
   }
 
-  const result = await Bun.file(finalOutPath).arrayBuffer();
-  return new Uint8Array(result);
+  return new Uint8Array(finalBuffer);
 }

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);