vargai 0.4.0-alpha15 → 0.4.0-alpha17

package/package.json

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

package/src/ai-sdk/cache.ts

@@ -106,7 +106,7 @@ function flatten(value: unknown): unknown {
  * });
  * ```
  */
-const DEFAULT_TTL = "1h";
+const DEFAULT_TTL = "7d";
 
 export function withCache<T extends object, R>(
   fn: (options: T) => Promise<R>,

package/src/cli/commands/find.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * varg find command
  * Ink-based search view

package/src/cli/commands/help.tsx

@@ -1,7 +1,4 @@
-/**
- * varg help command
- * Ink-based help display
- */
+/** @jsxImportSource react */
 
 import { defineCommand } from "citty";
 import { Box, Text } from "ink";

package/src/cli/commands/index.ts

@@ -1,7 +1,7 @@
 export { findCmd, showFindHelp } from "./find.tsx";
 export { helpCmd, showHelp } from "./help.tsx";
 export { listCmd, showListHelp } from "./list.tsx";
-export { renderCmd } from "./render.ts";
+export { fastCmd, previewCmd, renderCmd } from "./render.ts";
 export { runCmd, showRunHelp, showTargetHelp } from "./run.tsx";
 export { studioCmd } from "./studio.ts";
 export { showWhichHelp, whichCmd } from "./which.tsx";

package/src/cli/commands/list.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * varg list command
  * Ink-based discovery view

package/src/cli/commands/render.ts

@@ -65,100 +65,119 @@ async function loadComponent(filePath: string): Promise<VargElement> {
   }
 }
 
+const sharedArgs = {
+  file: {
+    type: "positional" as const,
+    description: "component file (.tsx)",
+    required: true,
+  },
+  output: {
+    type: "string" as const,
+    alias: "o",
+    description: "output path",
+  },
+  cache: {
+    type: "string" as const,
+    alias: "c",
+    description: "cache directory",
+    default: ".cache/ai",
+  },
+  quiet: {
+    type: "boolean" as const,
+    alias: "q",
+    description: "minimal output",
+    default: false,
+  },
+  "no-cache": {
+    type: "boolean" as const,
+    description: "disable cache (don't read or write)",
+    default: false,
+  },
+  verbose: {
+    type: "boolean" as const,
+    alias: "v",
+    description: "show ffmpeg commands",
+    default: false,
+  },
+};
+
+async function runRender(
+  args: Record<string, unknown>,
+  mode: RenderMode,
+  commandName: string,
+) {
+  const file = args.file as string;
+
+  if (!file) {
+    console.error(`usage: varg ${commandName} <component.tsx> [-o output.mp4]`);
+    process.exit(1);
+  }
+
+  const component = await loadComponent(file);
+
+  if (!component || component.type !== "render") {
+    console.error("error: default export must be a <Render> element");
+    process.exit(1);
+  }
+
+  const basename = file
+    .replace(/\.tsx?$/, "")
+    .split("/")
+    .pop();
+  const outputPath = (args.output as string) ?? `output/${basename}.mp4`;
+
+  if (!args.quiet) {
+    const modeLabel =
+      mode === "preview" ? " (fast)" : mode === "strict" ? "" : " (preview)";
+    console.log(`rendering ${file} → ${outputPath}${modeLabel}`);
+  }
+
+  const useCache = !args["no-cache"] && mode !== "preview";
+
+  const defaults = await detectDefaultModels();
+
+  const buffer = await render(component, {
+    output: outputPath,
+    cache: useCache ? (args.cache as string) : undefined,
+    mode,
+    defaults,
+    verbose: args.verbose as boolean,
+  });
+
+  if (!args.quiet) {
+    console.log(`done! ${buffer.byteLength} bytes → ${outputPath}`);
+  }
+}
+
 export const renderCmd = defineCommand({
   meta: {
     name: "render",
-    description: "render a react component to video",
+    description: "render to video (strict mode - fails on errors)",
   },
-  args: {
-    file: {
-      type: "positional",
-      description: "component file (.tsx)",
-      required: true,
-    },
-    output: {
-      type: "string",
-      alias: "o",
-      description: "output path",
-    },
-    cache: {
-      type: "string",
-      alias: "c",
-      description: "cache directory",
-      default: ".cache/ai",
-    },
-    quiet: {
-      type: "boolean",
-      alias: "q",
-      description: "minimal output",
-      default: false,
-    },
-    strict: {
-      type: "boolean",
-      description: "fail on provider errors (no fallback)",
-      default: false,
-    },
-    preview: {
-      type: "boolean",
-      description: "skip all generation, use placeholders only",
-      default: false,
-    },
-    "no-cache": {
-      type: "boolean",
-      description: "disable cache (don't read or write)",
-      default: false,
-    },
+  args: sharedArgs,
+  async run({ args }) {
+    await runRender(args, "strict", "render");
+  },
+});
+
+export const previewCmd = defineCommand({
+  meta: {
+    name: "preview",
+    description: "render with fallback placeholders on errors",
+  },
+  args: sharedArgs,
+  async run({ args }) {
+    await runRender(args, "default", "preview");
+  },
+});
+
+export const fastCmd = defineCommand({
+  meta: {
+    name: "fast",
+    description: "render with all placeholders (no generation)",
   },
+  args: sharedArgs,
   async run({ args }) {
-    const file = args.file as string;
-
-    if (!file) {
-      console.error("usage: varg render <component.tsx> [-o output.mp4]");
-      process.exit(1);
-    }
-
-    const component = await loadComponent(file);
-
-    if (!component || component.type !== "render") {
-      console.error("error: default export must be a <Render> element");
-      process.exit(1);
-    }
-
-    const basename = file
-      .replace(/\.tsx?$/, "")
-      .split("/")
-      .pop();
-    const outputPath = args.output ?? `output/${basename}.mp4`;
-
-    const mode: RenderMode = args.strict
-      ? "strict"
-      : args.preview
-        ? "preview"
-        : "default";
-
-    if (!args.quiet) {
-      const modeLabel =
-        mode === "preview"
-          ? " (preview)"
-          : mode === "strict"
-            ? " (strict)"
-            : "";
-      console.log(`rendering ${file} → ${outputPath}${modeLabel}`);
-    }
-
-    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) {
-      console.log(`done! ${buffer.byteLength} bytes → ${outputPath}`);
-    }
+    await runRender(args, "preview", "fast");
   },
 });

package/src/cli/commands/run.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * varg run command
  * Ink-based execution with live status updates

package/src/cli/commands/which.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * varg which command
  * Ink-based inspection view

package/src/cli/index.ts

@@ -12,9 +12,11 @@ import { defineCommand, runMain } from "citty";
 import { registry } from "../core/registry";
 import { allDefinitions } from "../definitions";
 import {
+  fastCmd,
   findCmd,
   helpCmd,
   listCmd,
+  previewCmd,
   renderCmd,
   runCmd,
   showFindHelp,
@@ -104,6 +106,8 @@ const main = defineCommand({
   subCommands: {
     run: runCmd,
     render: renderCmd,
+    preview: previewCmd,
+    fast: fastCmd,
     studio: studioCmd,
     list: listCmd,
     ls: listCmd,

package/src/cli/ui/components/Badge.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * Badge - Type indicator badge
  * Shows [model] [action] [skill] with appropriate styling

package/src/cli/ui/components/DataTable.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * DataTable - Table display component
  * Clean text-based table for listing items

package/src/cli/ui/components/Header.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * Header - Section header component
  * Bold dimmed text for section titles

package/src/cli/ui/components/HelpBlock.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * HelpBlock - Command help and examples
  * Displays usage patterns and command examples

package/src/cli/ui/components/KeyValue.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * KeyValue - Label-value pair display
  * Aligned key-value pairs with optional required marker

package/src/cli/ui/components/OptionRow.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * OptionRow - CLI option display with better spacing
  * Shows option name, description, type hints, defaults, and enums

package/src/cli/ui/components/Separator.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * Separator - Horizontal divider line
  * Minimal visual separator between sections

package/src/cli/ui/components/StatusBox.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * StatusBox - Execution status display
  * Shows running/done/error state with params and results

package/src/cli/ui/components/VargBox.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * VargBox - Container component
  * Luxury minimal styled box with optional title and borders

package/src/cli/ui/components/VargProgress.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * VargProgress - Progress bar component
  * Elegant thin progress visualization

package/src/cli/ui/components/VargSpinner.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * VargSpinner - Animated loading indicator
  * Elegant braille spinner with label

package/src/cli/ui/components/VargText.tsx

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 /**
  * VargText - Typography component
  * Provides semantic text variants for consistent styling

package/src/react/examples/mcmeows.tsx

@@ -0,0 +1,40 @@
+import { elevenlabs } from "../../ai-sdk/providers/elevenlabs";
+import { fal } from "../../ai-sdk/providers/fal";
+import { Clip, Music, Render, render, Title, Video } from "..";
+
+export default (
+  <Render>
+    <Clip duration={4}>
+      <Video prompt="A sophisticated tabby cat wearing a tailored tiny business suit and small round glasses, standing upright at a McDonald's counter. One paw raised pointing assertively at the illuminated menu board above. The cat has an extremely serious, concentrated expression with furrowed brows. Cinematic lighting with warm McDonald's interior ambiance, shallow depth of field focusing on the cat's determined face, photorealistic fur texture with fine detail. Professional business atmosphere meets fast food chaos." />
+    </Clip>
+
+    <Clip duration={4}>
+      <Video prompt="Absolute mayhem - four to five cats in a chaotic pile fight. Orange tabby, black and white tuxedo cat, calico with patches, and fluffy gray cat all scrambling, paws flailing, tumbling over each other in exaggerated cartoon-style motion. They're all desperately reaching for a single perfect golden McDonald's french fry sitting on a red plastic tray in the center. Wide-eyed expressions, mouths open mid-meow, dynamic motion blur, comedic timing. Fast food restaurant background slightly blurred. Playful, over-the-top energy." />
+    </Clip>
+
+    <Clip duration={3}>
+      <Video prompt="Proud orange tabby cat wearing an official McDonald's crew member visor and name tag, standing upright behind a restaurant register counter. Front paws crossed confidently across chest, chin lifted with a smug, self-satisfied expression. Perfect posture, professional demeanor. Bright McDonald's interior lighting, red and yellow color scheme in background. The cat radiates 'employee of the month' energy. Crisp, clean, professional fast food aesthetic." />
+      <Title position="bottom">McMeow's: NOW HIRING</Title>
+    </Clip>
+
+    <Music
+      model={elevenlabs.musicModel()}
+      prompt="playful upbeat comedy music with quirky pizzicato strings and light percussion, funny corporate training video vibes"
+      duration={11}
+    />
+  </Render>
+);
+
+async function main() {
+  const component = await import("./mcmeows.tsx").then((m) => m.default);
+  await render(component, {
+    output: "output/mcmeows.mp4",
+    cache: ".cache/ai",
+    verbose: true,
+    defaults: {
+      video: fal.videoModel("wan-2.5"),
+    },
+  });
+}
+
+main().catch(console.error);

package/src/react/examples/music-defaults.tsx

@@ -0,0 +1,24 @@
+import { elevenlabs } from "../../ai-sdk/providers/elevenlabs";
+import { Clip, Image, Music, Render, render } from "..";
+
+export default (
+  <Render width={1920} height={1080}>
+    <Clip duration={5}>
+      <Image src="media/cyberpunk-street.png" />
+    </Clip>
+    <Music prompt="calm ambient electronic music" duration={5} />
+  </Render>
+);
+
+async function main() {
+  const component = await import("./music-defaults.tsx").then((m) => m.default);
+  await render(component, {
+    output: "output/music-defaults.mp4",
+    defaults: {
+      music: elevenlabs.musicModel(),
+    },
+  });
+  console.log("done! check output/music-defaults.mp4");
+}
+
+main().catch(console.error);

package/src/react/renderers/music.ts

@@ -22,7 +22,7 @@ export async function renderMusic(
     duration: props.duration,
   });
 
-  const modelId = model.modelId;
+  const modelId = model.modelId ?? "music";
   const taskId = ctx.progress ? addTask(ctx.progress, "music", modelId) : null;
 
   const generateFn = async () => {

package/src/react/renderers/progress.ts

@@ -103,7 +103,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

@@ -269,11 +269,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({