vargai 0.4.0-alpha2 → 0.4.0-alpha4

package/package.json

@@ -63,7 +63,7 @@
     "replicate": "^1.4.0",
     "zod": "^4.2.1"
   },
-  "version": "0.4.0-alpha2",
+  "version": "0.4.0-alpha4",
   "exports": {
     ".": "./src/index.ts",
     "./ai": "./src/ai-sdk/index.ts",
@@ -71,6 +71,8 @@
     "./providers": "./src/providers/index.ts",
     "./definitions": "./src/definitions/index.ts",
     "./react": "./src/react/index.ts",
-    "./studio": "./src/studio/index.ts"
+    "./studio": "./src/studio/index.ts",
+    "./jsx-runtime": "./src/react/runtime/jsx-runtime.ts",
+    "./jsx-dev-runtime": "./src/react/runtime/jsx-dev-runtime.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/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/tsconfig.json

@@ -6,7 +6,7 @@
     "module": "ESNext",
     "moduleDetection": "force",
     "jsx": "react-jsx",
-    "jsxImportSource": "@/react/runtime",
+    "jsxImportSource": "vargai",
     "allowJs": true,
 
     // Bundler mode
@@ -30,7 +30,9 @@
     // Base URL for imports
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "vargai/jsx-runtime": ["./src/react/runtime/jsx-runtime.ts"],
+      "vargai/jsx-dev-runtime": ["./src/react/runtime/jsx-dev-runtime.ts"]
     }
   },
   "include": ["src/**/*"],

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