@vibeo/cli 0.1.2 → 0.3.0

package/src/commands/render.ts

@@ -1,13 +1,11 @@
 import { resolve } from "node:path";
-import { availableParallelism } from "node:os";
-import { parseFrameRange } from "@vibeo/renderer";
-import { renderComposition } from "@vibeo/renderer";
+import { parseFrameRange, renderComposition } from "@vibeo/renderer";
 import type { Codec, ImageFormat, RenderProgress } from "@vibeo/renderer";
 
-interface RenderArgs {
+interface RenderOptions {
   entry: string;
   composition: string;
-  output: string | null;
+  output: string | undefined;
   fps: number | null;
   frames: string | null;
   codec: Codec;
@@ -16,100 +14,6 @@ interface RenderArgs {
   quality: number;
 }
 
-function parseArgs(args: string[]): RenderArgs {
-  const result: RenderArgs = {
-    entry: "",
-    composition: "",
-    output: null,
-    fps: null,
-    frames: null,
-    codec: "h264",
-    concurrency: Math.max(1, Math.floor(availableParallelism() / 2)),
-    imageFormat: "png",
-    quality: 80,
-  };
-
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i]!;
-    const next = args[i + 1];
-
-    if (arg === "--entry" && next) {
-      result.entry = next;
-      i++;
-    } else if (arg.startsWith("--entry=")) {
-      result.entry = arg.slice("--entry=".length);
-    } else if (arg === "--composition" && next) {
-      result.composition = next;
-      i++;
-    } else if (arg.startsWith("--composition=")) {
-      result.composition = arg.slice("--composition=".length);
-    } else if (arg === "--output" && next) {
-      result.output = next;
-      i++;
-    } else if (arg.startsWith("--output=")) {
-      result.output = arg.slice("--output=".length);
-    } else if (arg === "--fps" && next) {
-      result.fps = parseInt(next, 10);
-      i++;
-    } else if (arg.startsWith("--fps=")) {
-      result.fps = parseInt(arg.slice("--fps=".length), 10);
-    } else if (arg === "--frames" && next) {
-      result.frames = next;
-      i++;
-    } else if (arg.startsWith("--frames=")) {
-      result.frames = arg.slice("--frames=".length);
-    } else if (arg === "--codec" && next) {
-      result.codec = next as Codec;
-      i++;
-    } else if (arg.startsWith("--codec=")) {
-      result.codec = arg.slice("--codec=".length) as Codec;
-    } else if (arg === "--concurrency" && next) {
-      result.concurrency = parseInt(next, 10);
-      i++;
-    } else if (arg.startsWith("--concurrency=")) {
-      result.concurrency = parseInt(arg.slice("--concurrency=".length), 10);
-    } else if (arg === "--image-format" && next) {
-      result.imageFormat = next as ImageFormat;
-      i++;
-    } else if (arg.startsWith("--image-format=")) {
-      result.imageFormat = arg.slice("--image-format=".length) as ImageFormat;
-    } else if (arg === "--quality" && next) {
-      result.quality = parseInt(next, 10);
-      i++;
-    } else if (arg.startsWith("--quality=")) {
-      result.quality = parseInt(arg.slice("--quality=".length), 10);
-    } else if (arg === "--help" || arg === "-h") {
-      printHelp();
-      process.exit(0);
-    }
-  }
-
-  return result;
-}
-
-function printHelp(): void {
-  console.log(`
-vibeo render - Render a composition to video
-
-Usage:
-  vibeo render --entry <path> --composition <id> [options]
-
-Required:
-  --entry <path>           Path to the root file with compositions
-  --composition <id>       Composition ID to render
-
-Options:
-  --output <path>          Output file path (default: out/<compositionId>.mp4)
-  --fps <number>           Override fps
-  --frames <range>         Frame range "start-end" (e.g., "0-100")
-  --codec <codec>          h264 | h265 | vp9 | prores (default: h264)
-  --concurrency <number>   Parallel browser tabs (default: cpu count / 2)
-  --image-format <format>  png | jpeg (default: png)
-  --quality <number>       0-100 for jpeg quality / crf (default: 80)
-  --help                   Show this help
-`);
-}
-
 function formatTime(ms: number): string {
   const seconds = Math.floor(ms / 1000);
   const minutes = Math.floor(seconds / 60);
@@ -131,76 +35,49 @@ function renderProgressBar(progress: RenderProgress): void {
   );
 }
 
-/**
- * Execute the render command.
- */
-export async function renderCommand(args: string[]): Promise<void> {
-  const parsed = parseArgs(args);
-
-  if (!parsed.entry) {
-    console.error("Error: --entry is required");
-    printHelp();
-    process.exit(1);
-  }
-
-  if (!parsed.composition) {
-    console.error("Error: --composition is required");
-    printHelp();
-    process.exit(1);
-  }
+export async function renderVideo(
+  opts: RenderOptions,
+): Promise<{ output: string; elapsed: string }> {
+  const ext = opts.codec === "vp9" ? "webm" : opts.codec === "prores" ? "mov" : "mp4";
+  const output = opts.output
+    ? resolve(opts.output)
+    : resolve(`out/${opts.composition}.${ext}`);
 
-  const entry = resolve(parsed.entry);
-  const compositionId = parsed.composition;
-
-  // TODO: In a full implementation, we would bundle the entry, extract
-  // composition metadata, and use it here. For now we require the user
-  // to have the composition info available.
-  // This is a simplified flow that demonstrates the pipeline.
-
-  const ext = parsed.codec === "vp9" ? "webm" : parsed.codec === "prores" ? "mov" : "mp4";
-  const output = parsed.output
-    ? resolve(parsed.output)
-    : resolve(`out/${compositionId}.${ext}`);
-
-  console.log(`\nRendering composition "${compositionId}"`);
-  console.log(`  Entry: ${entry}`);
+  console.log(`\nRendering composition "${opts.composition}"`);
+  console.log(`  Entry: ${opts.entry}`);
   console.log(`  Output: ${output}`);
-  console.log(`  Codec: ${parsed.codec}`);
-  console.log(`  Image format: ${parsed.imageFormat}`);
-  console.log(`  Concurrency: ${parsed.concurrency}`);
+  console.log(`  Codec: ${opts.codec}`);
+  console.log(`  Concurrency: ${opts.concurrency}`);
   console.log();
 
-  // For a full render, we need composition info from the bundle.
-  // This would normally be extracted by bundling and evaluating the entry.
-  // Here we set up the render config and delegate to renderComposition.
   const compositionInfo = {
     width: 1920,
     height: 1080,
-    fps: parsed.fps ?? 30,
+    fps: opts.fps ?? 30,
     durationInFrames: 300,
   };
 
-  const frameRange = parseFrameRange(parsed.frames, compositionInfo.durationInFrames);
-
+  const frameRange = parseFrameRange(opts.frames, compositionInfo.durationInFrames);
   const startTime = Date.now();
 
   await renderComposition(
     {
-      entry,
-      compositionId,
+      entry: opts.entry,
+      compositionId: opts.composition,
       outputPath: output,
-      codec: parsed.codec,
-      imageFormat: parsed.imageFormat,
-      quality: parsed.quality,
-      fps: parsed.fps,
+      codec: opts.codec,
+      imageFormat: opts.imageFormat,
+      quality: opts.quality,
+      fps: opts.fps,
       frameRange,
-      concurrency: parsed.concurrency,
+      concurrency: opts.concurrency,
       pixelFormat: "yuv420p",
       onProgress: renderProgressBar,
     },
     compositionInfo,
   );
 
-  const elapsed = Date.now() - startTime;
-  console.log(`\n\nDone in ${formatTime(elapsed)}. Output: ${output}`);
+  const elapsed = formatTime(Date.now() - startTime);
+  console.log(`\n\nDone in ${elapsed}. Output: ${output}`);
+  return { output, elapsed };
 }

package/src/index.ts

@@ -1,63 +1,134 @@
-import { renderCommand } from "./commands/render.js";
-import { previewCommand } from "./commands/preview.js";
-import { listCommand } from "./commands/list.js";
-import { createCommand } from "./commands/create.js";
+import { Cli, z } from "incur";
+import { resolve } from "node:path";
+import { availableParallelism } from "node:os";
+import { createProject } from "./commands/create.js";
+import { startPreview } from "./commands/preview.js";
+import { listCompositions } from "./commands/list.js";
+import { renderVideo } from "./commands/render.js";
+import { installSkills } from "./commands/install-skills.js";
 
-const args = process.argv.slice(2);
-const command = args[0];
-
-function printUsage(): void {
-  console.log(`
-vibeo - React video framework CLI
-
-Usage:
-  vibeo <command> [options]
-
-Commands:
-  create    Create a new project from a template
-  render    Render a composition to video
-  preview   Start a dev server with live preview
-  list      List registered compositions
+const cli = Cli.create("vibeo", {
+  description: "React-based programmatic video framework CLI",
+  sync: {
+    suggestions: [
+      "create a new video project",
+      "preview a composition in the browser",
+      "render a composition to video",
+      "list all registered compositions",
+    ],
+  },
+});
 
-Options:
-  --help    Show help for a command
+cli.command("create", {
+  description: "Create a new Vibeo project from a template",
+  args: z.object({
+    name: z.string().describe("Project directory name"),
+  }),
+  options: z.object({
+    template: z
+      .enum(["basic", "audio-reactive", "transitions", "subtitles"])
+      .default("basic")
+      .describe("Template to scaffold from"),
+  }),
+  examples: [
+    { args: { name: "my-video" }, description: "Create with basic template" },
+    { args: { name: "viz" }, options: { template: "audio-reactive" }, description: "Create with audio-reactive template" },
+  ],
+  async run(c) {
+    return await createProject(c.args.name, c.options.template);
+  },
+});
 
-Examples:
-  vibeo create my-video
-  vibeo create music-viz --template audio-reactive
-  vibeo render --entry src/index.tsx --composition MyComp --output out.mp4
-  vibeo preview --entry src/index.tsx
-  vibeo list --entry src/index.tsx
-`);
-}
+cli.command("preview", {
+  description: "Start a dev server with live preview in the browser",
+  options: z.object({
+    entry: z.string().describe("Path to the root file with compositions"),
+    port: z.number().default(3000).describe("Port for the dev server"),
+  }),
+  examples: [
+    { options: { entry: "src/index.tsx" }, description: "Preview on default port" },
+  ],
+  async run(c) {
+    await startPreview(resolve(c.options.entry), c.options.port);
+  },
+});
 
-async function main(): Promise<void> {
-  if (!command || command === "--help" || command === "-h") {
-    printUsage();
-    process.exit(0);
-  }
+cli.command("render", {
+  description: "Render a composition to a video file",
+  options: z.object({
+    entry: z.string().describe("Path to the root file with compositions"),
+    composition: z.string().describe("Composition ID to render"),
+    output: z.string().optional().describe("Output file path (default: out/<id>.mp4)"),
+    fps: z.number().optional().describe("Override frames per second"),
+    frames: z.string().optional().describe('Frame range, e.g. "0-100" or "50"'),
+    codec: z
+      .enum(["h264", "h265", "vp9", "prores"])
+      .default("h264")
+      .describe("Video codec"),
+    concurrency: z
+      .number()
+      .default(Math.max(1, Math.floor(availableParallelism() / 2)))
+      .describe("Number of parallel browser tabs"),
+    imageFormat: z
+      .enum(["png", "jpeg"])
+      .default("png")
+      .describe("Intermediate frame image format"),
+    quality: z.number().default(80).describe("JPEG quality / CRF value (0-100)"),
+  }),
+  examples: [
+    { options: { entry: "src/index.tsx", composition: "MyComp" }, description: "Render with defaults" },
+    { options: { entry: "src/index.tsx", composition: "MyComp", codec: "vp9", frames: "0-100" }, description: "Render a frame range as WebM" },
+  ],
+  async run(c) {
+    return await renderVideo({
+      entry: resolve(c.options.entry),
+      composition: c.options.composition,
+      output: c.options.output,
+      fps: c.options.fps ?? null,
+      frames: c.options.frames ?? null,
+      codec: c.options.codec,
+      concurrency: c.options.concurrency,
+      imageFormat: c.options.imageFormat,
+      quality: c.options.quality,
+    });
+  },
+});
 
-  switch (command) {
-    case "create":
-      await createCommand(args.slice(1));
-      break;
-    case "render":
-      await renderCommand(args.slice(1));
-      break;
-    case "preview":
-      await previewCommand(args.slice(1));
-      break;
-    case "list":
-      await listCommand(args.slice(1));
-      break;
-    default:
-      console.error(`Unknown command: ${command}`);
-      printUsage();
-      process.exit(1);
-  }
-}
+cli.command("list", {
+  description: "List registered compositions in an entry file",
+  options: z.object({
+    entry: z.string().describe("Path to the root file with compositions"),
+  }),
+  examples: [
+    { options: { entry: "src/index.tsx" }, description: "List all compositions" },
+  ],
+  async run(c) {
+    const compositions = await listCompositions(resolve(c.options.entry));
+    return { compositions };
+  },
+});
 
-main().catch((err) => {
-  console.error(err);
-  process.exit(1);
+cli.command("install-skills", {
+  description:
+    "Install Vibeo skill/rule files for all supported LLM coding tools (Claude, Codex, Cursor, Gemini, OpenCode, Aider)",
+  options: z.object({
+    targets: z
+      .string()
+      .optional()
+      .describe(
+        'Comma-separated list of targets (default: all). Options: claude, codex, cursor, gemini, opencode, aider',
+      ),
+  }),
+  examples: [
+    { description: "Install for all supported tools" },
+    { options: { targets: "claude,cursor" }, description: "Install for Claude and Cursor only" },
+  ],
+  async run(c) {
+    const targets = c.options.targets
+      ? c.options.targets.split(",").map((t: string) => t.trim())
+      : [];
+    return await installSkills(targets, process.cwd());
+  },
 });
+
+cli.serve();