vargai 0.4.0-alpha2 → 0.4.0-alpha21

package/src/cli/commands/render.tsx

@@ -1,94 +1,306 @@
+/** @jsxImportSource react */
+
+import { existsSync, mkdirSync } from "node:fs";
+import { resolve } from "node:path";
 import { defineCommand } from "citty";
+import { Box, Text } from "ink";
 import { render } from "../../react/render";
-import type { RenderMode, VargElement } from "../../react/types";
+import type { DefaultModels, RenderMode, VargElement } from "../../react/types";
+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 { 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 hasAnyImport = source.includes(" from ");
+  const hasVargaiImport =
+    source.includes("from 'vargai") ||
+    source.includes('from "vargai') ||
+    source.includes("from '@vargai") ||
+    source.includes('from "@vargai');
+
+  const hasJsxPragma =
+    source.includes("@jsxImportSource") || source.includes("@jsx ");
+
+  // 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 tmpFile = `${tmpDir}/${Date.now()}.tsx`;
+  await Bun.write(tmpFile, AUTO_IMPORTS + source);
+
+  try {
+    const mod = await import(tmpFile);
+    return mod.default;
+  } finally {
+    (await Bun.file(tmpFile).exists()) && (await Bun.write(tmpFile, ""));
+  }
+}
+
+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)" : "";
+    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",
+  args: sharedArgs,
+  async run({ args }) {
+    await runRender(args, "strict", "render");
+  },
+});
+
+export const previewCmd = defineCommand({
+  meta: {
+    name: "preview",
+    description: "render with all placeholders (no generation)",
+  },
+  args: sharedArgs,
+  async run({ args }) {
+    await runRender(args, "preview", "preview");
+  },
+});
+
+function RenderHelpView() {
+  const examples = [
+    {
+      command: "varg render video.tsx",
+      description: "render component to output/video.mp4",
     },
-    cache: {
-      type: "string",
-      alias: "c",
-      description: "cache directory",
-      default: ".cache/ai",
+    {
+      command: "varg render video.tsx -o my-video.mp4",
+      description: "custom output path",
     },
-    quiet: {
-      type: "boolean",
-      alias: "q",
-      description: "minimal output",
-      default: false,
+    {
+      command: "varg preview video.tsx",
+      description: "fast preview with placeholders",
     },
-    strict: {
-      type: "boolean",
-      description: "fail on provider errors (no fallback)",
-      default: false,
+  ];
+
+  return (
+    <VargBox title="varg render">
+      <Box marginBottom={1}>
+        <Text>
+          render jsx components to video. the react engine for ai video.
+        </Text>
+      </Box>
+
+      <Header>USAGE</Header>
+      <Box paddingLeft={2} marginBottom={1}>
+        <VargText variant="accent">
+          varg render {"<file.tsx>"} [options]
+        </VargText>
+      </Box>
+
+      <Header>OPTIONS</Header>
+      <Box flexDirection="column" paddingLeft={2} marginBottom={1}>
+        <Text>
+          <VargText variant="accent">-o, --output </VargText>output path
+          (default: output/{"<name>"}.mp4)
+        </Text>
+        <Text>
+          <VargText variant="accent">-c, --cache </VargText>cache directory
+          (default: .cache/ai)
+        </Text>
+        <Text>
+          <VargText variant="accent">--no-cache </VargText>disable cache
+        </Text>
+        <Text>
+          <VargText variant="accent">-q, --quiet </VargText>minimal output
+        </Text>
+        <Text>
+          <VargText variant="accent">-v, --verbose </VargText>show ffmpeg
+          commands
+        </Text>
+      </Box>
+
+      <Header>COMPONENTS</Header>
+      <Box flexDirection="column" paddingLeft={2} marginBottom={1}>
+        <Text>{"<Render>"} root container (width, height, fps)</Text>
+        <Text>{"<Clip>"} time segment with duration</Text>
+        <Text>{"<Video>"} ai-generated or source video</Text>
+        <Text>{"<Image>"} ai-generated or static image</Text>
+        <Text>{"<Speech>"} text-to-speech audio</Text>
+        <Text>{"<Music>"} background music</Text>
+        <Text>{"<Captions>"} auto-generated subtitles</Text>
+      </Box>
+
+      <Header>EXAMPLES</Header>
+      <Box marginTop={1}>
+        <HelpBlock examples={examples} />
+      </Box>
+    </VargBox>
+  );
+}
+
+function PreviewHelpView() {
+  const examples = [
+    {
+      command: "varg preview video.tsx",
+      description: "quick test without ai calls",
     },
-    preview: {
-      type: "boolean",
-      description: "skip all generation, use placeholders only",
-      default: false,
+    {
+      command: "varg preview video.tsx -o test.mp4",
+      description: "preview to custom path",
     },
-  },
-  async run({ args }) {
-    const file = args.file as string;
+  ];
 
-    if (!file) {
-      console.error("usage: varg render <component.tsx> [-o output.mp4]");
-      process.exit(1);
-    }
+  return (
+    <VargBox title="varg preview">
+      <Box marginBottom={1}>
+        <Text>
+          fast preview mode - uses placeholders instead of ai generation.
+        </Text>
+      </Box>
 
-    const resolvedPath = Bun.resolveSync(file, process.cwd());
-    const mod = await import(resolvedPath);
-    const component: VargElement = mod.default;
-
-    if (!component || component.type !== "render") {
-      console.error("error: default export must be a <Render> element");
-      process.exit(1);
-    }
-
-    const outputPath =
-      args.output ??
-      `output/${file
-        .replace(/\.tsx?$/, "")
-        .split("/")
-        .pop()}.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 buffer = await render(component, {
-      output: outputPath,
-      cache: args.cache,
-      mode,
-    });
-
-    if (!args.quiet) {
-      console.log(`done! ${buffer.byteLength} bytes → ${outputPath}`);
-    }
-  },
-});
+      <Header>USAGE</Header>
+      <Box paddingLeft={2} marginBottom={1}>
+        <VargText variant="accent">
+          varg preview {"<file.tsx>"} [options]
+        </VargText>
+      </Box>
+
+      <Header>OPTIONS</Header>
+      <Box flexDirection="column" paddingLeft={2} marginBottom={1}>
+        <Text>
+          <VargText variant="accent">-o, --output </VargText>output path
+          (default: output/{"<name>"}.mp4)
+        </Text>
+        <Text>
+          <VargText variant="accent">-q, --quiet </VargText>minimal output
+        </Text>
+        <Text>
+          <VargText variant="accent">-v, --verbose </VargText>show ffmpeg
+          commands
+        </Text>
+      </Box>
+
+      <Header>EXAMPLES</Header>
+      <Box marginTop={1}>
+        <HelpBlock examples={examples} />
+      </Box>
+    </VargBox>
+  );
+}
+
+export function showRenderHelp() {
+  renderStatic(<RenderHelpView />);
+}
+
+export function showPreviewHelp() {
+  renderStatic(<PreviewHelpView />);
+}

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/studio.ts

@@ -0,0 +1,47 @@
+import { resolve } from "node:path";
+import { defineCommand } from "citty";
+import { createStudioServer } from "../../studio/server";
+
+export const studioCmd = defineCommand({
+  meta: {
+    name: "studio",
+    description: "launch varg studio - visual editor for workflows",
+  },
+  args: {
+    file: {
+      type: "positional",
+      description: "initial file to open",
+      required: false,
+    },
+    cache: {
+      type: "string",
+      description: "cache directory",
+      default: ".cache/ai",
+    },
+    port: {
+      type: "string",
+      description: "port to run on",
+      default: "8282",
+    },
+  },
+  run: async ({ args }) => {
+    const initialFile = args.file ? resolve(args.file) : undefined;
+    const cacheDir = args.cache;
+    const port = Number.parseInt(args.port, 10);
+
+    console.log("varg studio starting...");
+    console.log(`cache folder: ${cacheDir}`);
+    if (initialFile) {
+      console.log(`initial file: ${initialFile}`);
+    }
+
+    const server = createStudioServer({ cacheDir, initialFile, port });
+
+    console.log(`\nopen http://localhost:${server.port}`);
+    console.log("  /editor - code editor");
+    console.log("  /cache  - cache viewer");
+
+    // Keep process alive
+    await new Promise(() => {});
+  },
+});

package/src/cli/commands/which.tsx

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

package/src/cli/index.ts

@@ -13,16 +13,23 @@ import { registry } from "../core/registry";
 import { allDefinitions } from "../definitions";
 import {
   findCmd,
+  helloCmd,
   helpCmd,
+  initCmd,
   listCmd,
+  previewCmd,
   renderCmd,
   runCmd,
   showFindHelp,
   showHelp,
+  showInitHelp,
   showListHelp,
+  showPreviewHelp,
+  showRenderHelp,
   showRunHelp,
   showTargetHelp,
   showWhichHelp,
+  studioCmd,
   whichCmd,
 } from "./commands";
 
@@ -44,9 +51,11 @@ for (const provider of providers.all()) {
 const args = process.argv.slice(2);
 const hasHelp = args.includes("--help") || args.includes("-h");
 
-// Map subcommands to their help functions
 const subcommandHelp: Record<string, () => void> = {
   run: showRunHelp,
+  render: showRenderHelp,
+  preview: showPreviewHelp,
+  init: showInitHelp,
   list: showListHelp,
   ls: showListHelp,
   find: showFindHelp,
@@ -92,15 +101,21 @@ if (hasHelp) {
   }
 }
 
+const pkg = await import("../../package.json");
+
 const main = defineCommand({
   meta: {
-    name: "varg",
-    version: "0.3.0",
-    description: "ai video infrastructure from your terminal",
+    name: "vargai",
+    version: pkg.version,
+    description: "ai video generation sdk",
   },
   subCommands: {
-    run: runCmd,
+    hello: helloCmd,
+    init: initCmd,
     render: renderCmd,
+    preview: previewCmd,
+    studio: studioCmd,
+    run: runCmd,
     list: listCmd,
     ls: listCmd,
     find: findCmd,

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/assets.ts

@@ -0,0 +1,9 @@
+export const assets = {
+  characters: {
+    orangeGirl: "https://s3.varg.ai/uploads/images/1_0475e227.png",
+  },
+  backgrounds: {
+    orangeGradient:
+      "https://s3.varg.ai/uploads/images/xyearp51qvve-zi3nrcve-zbno2hfgt5gergjrof_995f553d.png",
+  },
+} as const;

package/src/react/elements.ts

@@ -1,5 +1,4 @@
 import type {
-  AnimateProps,
   CaptionsProps,
   ClipProps,
   ImageProps,
@@ -71,10 +70,6 @@ export function Video(props: VideoProps): VargElement<"video"> {
   return createElement("video", props as Record<string, unknown>, undefined);
 }
 
-export function Animate(props: AnimateProps): VargElement<"animate"> {
-  return createElement("animate", props as Record<string, unknown>, undefined);
-}
-
 export function Speech(props: SpeechProps): VargElement<"speech"> {
   return createElement(
     "speech",

package/src/react/examples/branching.tsx

@@ -1,6 +1,6 @@
 import { elevenlabs } from "../../ai-sdk/providers/elevenlabs";
 import { fal } from "../../ai-sdk/providers/fal";
-import { Animate, Clip, Image, Render, Speech, Title } from "..";
+import { Clip, Image, Render, Speech, Title, Video } from "..";
 
 // Non-linear tree: multiple clips with independent branches
 // Clip 1: TalkingHead (Image -> Animate + Speech)
@@ -35,10 +35,12 @@ export default (
   <Render width={1080} height={1920}>
     {/* Clip 1: Talking head intro */}
     <Clip duration={5}>
-      <Animate
-        image={character}
+      <Video
+        prompt={{
+          text: "talking naturally, slight head movements, friendly expression",
+          images: [character],
+        }}
         model={fal.videoModel("wan-2.5")}
-        motion="talking naturally, slight head movements, friendly expression"
       />
       <Speech voice="adam" model={elevenlabs.speechModel("turbo")}>
         Hey everyone! Today we're looking at the biggest smartphone upgrade of

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

@@ -1,6 +1,6 @@
 import { elevenlabs } from "../../ai-sdk/providers/elevenlabs";
 import { fal } from "../../ai-sdk/providers/fal";
-import { Animate, Clip, Image, Music, Render, render } from "..";
+import { Clip, Image, Music, Render, render, Video } from "..";
 
 const MADI_REF =
   "https://s3.varg.ai/fellowers/madi/character_shots/madi_shot_03_closeup.png";
@@ -54,16 +54,19 @@ async function main() {
 
       {SCENES.map((scene) => (
         <Clip key={scene.prompt} duration={2}>
-          <Animate
-            image={Image({
-              prompt: { text: scene.prompt, images: [MADI_REF] },
-              model: fal.imageModel("nano-banana-pro/edit"),
-              aspectRatio: "9:16",
-              resize: "cover",
-            })}
-            motion={scene.motion}
+          <Video
+            prompt={{
+              text: scene.motion,
+              images: [
+                Image({
+                  prompt: { text: scene.prompt, images: [MADI_REF] },
+                  model: fal.imageModel("nano-banana-pro/edit"),
+                  aspectRatio: "9:16",
+                  resize: "cover",
+                }),
+              ],
+            }}
             model={fal.videoModel("wan-2.5")}
-            duration={5}
           />
         </Clip>
       ))}