vargai 0.4.0-alpha3 → 0.4.0-alpha5

package/package.json

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

package/src/cli/commands/index.ts

@@ -3,4 +3,5 @@ export { helpCmd, showHelp } from "./help.tsx";
 export { listCmd, showListHelp } from "./list.tsx";
 export { renderCmd } from "./render.tsx";
 export { runCmd, showRunHelp, showTargetHelp } from "./run.tsx";
+export { studioCmd } from "./studio.tsx";
 export { showWhichHelp, whichCmd } from "./which.tsx";

package/src/cli/commands/render.tsx

@@ -1,7 +1,44 @@
+import { existsSync, mkdirSync } from "node:fs";
+import { dirname, resolve } from "node:path";
 import { defineCommand } from "citty";
 import { render } from "../../react/render";
 import type { RenderMode, VargElement } from "../../react/types";
 
+const AUTO_IMPORTS = `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 loadComponent(filePath: string): Promise<VargElement> {
+  const resolvedPath = resolve(filePath);
+  const source = await Bun.file(resolvedPath).text();
+
+  const hasImports =
+    source.includes("from 'vargai") ||
+    source.includes('from "vargai') ||
+    source.includes("from '@vargai") ||
+    source.includes('from "@vargai');
+
+  if (hasImports) {
+    const mod = await import(resolvedPath);
+    return mod.default;
+  }
+
+  const tmpDir = ".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(resolve(tmpFile));
+    return mod.default;
+  } finally {
+    (await Bun.file(tmpFile).exists()) && (await Bun.write(tmpFile, ""));
+  }
+}
+
 export const renderCmd = defineCommand({
   meta: {
     name: "render",
@@ -49,21 +86,18 @@ export const renderCmd = defineCommand({
       process.exit(1);
     }
 
-    const resolvedPath = Bun.resolveSync(file, process.cwd());
-    const mod = await import(resolvedPath);
-    const component: VargElement = mod.default;
+    const component = await loadComponent(file);
 
     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 basename = file
+      .replace(/\.tsx?$/, "")
+      .split("/")
+      .pop();
+    const outputPath = args.output ?? `output/${basename}.mp4`;
 
     const mode: RenderMode = args.strict
       ? "strict"

package/src/cli/commands/studio.tsx

@@ -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/index.ts

@@ -23,6 +23,7 @@ import {
   showRunHelp,
   showTargetHelp,
   showWhichHelp,
+  studioCmd,
   whichCmd,
 } from "./commands";
 
@@ -92,15 +93,18 @@ if (hasHelp) {
   }
 }
 
+const pkg = await import("../../package.json");
+
 const main = defineCommand({
   meta: {
     name: "varg",
-    version: "0.3.0",
+    version: pkg.version,
     description: "ai video infrastructure from your terminal",
   },
   subCommands: {
     run: runCmd,
     render: renderCmd,
+    studio: studioCmd,
     list: listCmd,
     ls: listCmd,
     find: findCmd,

package/src/react/renderers/clip.ts

@@ -32,9 +32,15 @@ type PendingLayer =
   | { type: "sync"; layer: Layer }
   | { type: "async"; promise: Promise<Layer> };
 
+interface ClipLayerOptions {
+  cutFrom?: number;
+  cutTo?: number;
+}
+
 async function renderClipLayers(
   children: VargNode[],
   ctx: RenderContext,
+  clipOptions?: ClipLayerOptions,
 ): Promise<Layer[]> {
   const pending: PendingLayer[] = [];
 
@@ -86,8 +92,9 @@ async function renderClipLayers(
                 type: "video",
                 path,
                 resizeMode: props.resize,
-                cutFrom: props.cutFrom,
-                cutTo: props.cutTo,
+                // Video-level cutFrom/cutTo take precedence over clip-level
+                cutFrom: props.cutFrom ?? clipOptions?.cutFrom,
+                cutTo: props.cutTo ?? clipOptions?.cutTo,
                 mixVolume: props.keepAudio ? (props.volume ?? 1) : 0,
                 left: props.left,
                 top: props.top,
@@ -220,7 +227,10 @@ export async function renderClip(
   ctx: RenderContext,
 ): Promise<Clip> {
   const props = element.props as ClipProps;
-  const layers = await renderClipLayers(element.children, ctx);
+  const layers = await renderClipLayers(element.children, ctx, {
+    cutFrom: props.cutFrom,
+    cutTo: props.cutTo,
+  });
 
   const isOverlayVideo = (l: Layer) =>
     l.type === "video" &&

package/src/react/types.ts

@@ -75,6 +75,10 @@ export interface RenderProps extends BaseProps {
 export interface ClipProps extends BaseProps {
   duration?: number | "auto";
   transition?: TransitionOptions;
+  /** Start trim point in seconds (e.g., 1 to start from 1 second) */
+  cutFrom?: number;
+  /** End trim point in seconds (e.g., 3 to end at 3 seconds) */
+  cutTo?: number;
   children?: VargNode;
 }
 

package/src/react/cli.ts

@@ -1,52 +0,0 @@
-#!/usr/bin/env bun
-
-import { parseArgs } from "node:util";
-import { render } from "./render";
-import type { VargElement } from "./types";
-
-const { values, positionals } = parseArgs({
-  args: Bun.argv.slice(2),
-  options: {
-    output: { type: "string", short: "o" },
-    cache: { type: "string", short: "c", default: ".cache/ai" },
-    quiet: { type: "boolean", short: "q", default: false },
-  },
-  allowPositionals: true,
-});
-
-const [file] = positionals;
-
-if (!file) {
-  console.error("usage: bun react/cli.ts <component.tsx> [-o output.mp4]");
-  process.exit(1);
-}
-
-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 =
-  values.output ??
-  `output/${file
-    .replace(/\.tsx?$/, "")
-    .split("/")
-    .pop()}.mp4`;
-
-if (!values.quiet) {
-  console.log(`rendering ${file} → ${outputPath}`);
-}
-
-const buffer = await render(component, {
-  output: outputPath,
-  cache: values.cache,
-  quiet: values.quiet,
-});
-
-if (!values.quiet) {
-  console.log(`done! ${buffer.byteLength} bytes → ${outputPath}`);
-}