@vibeo/cli 0.1.0

package/dist/index.js

@@ -0,0 +1,60 @@
+#!/usr/bin/env bun
+import { renderCommand } from "./commands/render.js";
+import { previewCommand } from "./commands/preview.js";
+import { listCommand } from "./commands/list.js";
+import { createCommand } from "./commands/create.js";
+const args = process.argv.slice(2);
+const command = args[0];
+function printUsage() {
+    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
+
+Options:
+  --help    Show help for a command
+
+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
+`);
+}
+async function main() {
+    if (!command || command === "--help" || command === "-h") {
+        printUsage();
+        process.exit(0);
+    }
+    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);
+    }
+}
+main().catch((err) => {
+    console.error(err);
+    process.exit(1);
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACnC,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;AAExB,SAAS,UAAU;IACjB,OAAO,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;CAqBb,CAAC,CAAC;AACH,CAAC;AAED,KAAK,UAAU,IAAI;IACjB,IAAI,CAAC,OAAO,IAAI,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;QACzD,UAAU,EAAE,CAAC;QACb,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAClB,CAAC;IAED,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,QAAQ;YACX,MAAM,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YACnC,MAAM;QACR,KAAK,QAAQ;YACX,MAAM,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YACnC,MAAM;QACR,KAAK,SAAS;YACZ,MAAM,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YACpC,MAAM;QACR,KAAK,MAAM;YACT,MAAM,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YACjC,MAAM;QACR;YACE,OAAO,CAAC,KAAK,CAAC,oBAAoB,OAAO,EAAE,CAAC,CAAC;YAC7C,UAAU,EAAE,CAAC;YACb,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC;AACH,CAAC;AAED,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE;IACnB,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACnB,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAClB,CAAC,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@vibeo/cli",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "vibeo": "./dist/index.js"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "@vibeo/core": "0.1.0",
+    "@vibeo/renderer": "0.1.0",
+    "@vibeo/player": "0.1.0",
+    "@vibeo/audio": "0.1.0"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "clean": "rm -rf dist"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/patcito/vibeo.git",
+    "directory": "packages/cli"
+  },
+  "license": "MIT"
+}

package/src/commands/create.ts

@@ -0,0 +1,197 @@
+import { resolve, join, basename } from "node:path";
+import { cp, mkdir, readdir, readFile, writeFile } from "node:fs/promises";
+import { existsSync } from "node:fs";
+
+const TEMPLATES: Record<string, { description: string; example: string }> = {
+  basic: {
+    description: "Minimal composition with text animation and two scenes",
+    example: "basic-composition.tsx",
+  },
+  "audio-reactive": {
+    description: "Audio visualization with frequency bars and amplitude-driven effects",
+    example: "audio-reactive-viz.tsx",
+  },
+  transitions: {
+    description: "Scene transitions (fade, slide) between multiple scenes",
+    example: "transition-demo.tsx",
+  },
+  subtitles: {
+    description: "Video with SRT subtitle overlay",
+    example: "subtitle-overlay.tsx",
+  },
+};
+
+interface CreateArgs {
+  name: string;
+  template: string;
+}
+
+function parseArgs(args: string[]): CreateArgs {
+  const result: CreateArgs = { name: "", template: "basic" };
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i]!;
+    const next = args[i + 1];
+
+    if (arg === "--template" && next) {
+      result.template = next;
+      i++;
+    } else if (arg.startsWith("--template=")) {
+      result.template = arg.slice("--template=".length);
+    } else if (arg === "--help" || arg === "-h") {
+      printHelp();
+      process.exit(0);
+    } else if (!arg.startsWith("-") && !result.name) {
+      result.name = arg;
+    }
+  }
+
+  return result;
+}
+
+function printHelp(): void {
+  console.log(`
+vibeo create - Create a new Vibeo project
+
+Usage:
+  vibeo create <project-name> [options]
+
+Options:
+  --template <name>   Template to use (default: basic)
+  --help              Show this help
+
+Templates:`);
+
+  for (const [name, { description }] of Object.entries(TEMPLATES)) {
+    console.log(`  ${name.padEnd(18)} ${description}`);
+  }
+
+  console.log(`
+Examples:
+  vibeo create my-video
+  vibeo create music-viz --template audio-reactive
+  vibeo create intro --template transitions
+`);
+}
+
+// Find the examples directory relative to the CLI package
+function findExamplesDir(): string {
+  // Walk up from this file to find the repo root with examples/
+  let dir = import.meta.dir;
+  for (let i = 0; i < 6; i++) {
+    const candidate = join(dir, "examples");
+    if (existsSync(candidate)) return candidate;
+    dir = resolve(dir, "..");
+  }
+  throw new Error("Could not find examples directory");
+}
+
+export async function createCommand(args: string[]): Promise<void> {
+  const parsed = parseArgs(args);
+
+  if (!parsed.name) {
+    console.error("Error: project name is required\n");
+    printHelp();
+    process.exit(1);
+  }
+
+  const template = TEMPLATES[parsed.template];
+  if (!template) {
+    console.error(`Error: unknown template "${parsed.template}"`);
+    console.error(`Available: ${Object.keys(TEMPLATES).join(", ")}`);
+    process.exit(1);
+  }
+
+  const projectDir = resolve(parsed.name);
+  if (existsSync(projectDir)) {
+    console.error(`Error: directory "${parsed.name}" already exists`);
+    process.exit(1);
+  }
+
+  console.log(`\nCreating Vibeo project: ${parsed.name}`);
+  console.log(`Template: ${parsed.template}\n`);
+
+  // Create project structure
+  await mkdir(join(projectDir, "src"), { recursive: true });
+  await mkdir(join(projectDir, "public"), { recursive: true });
+
+  // Copy example as src/index.tsx
+  const examplesDir = findExamplesDir();
+  const exampleSrc = await readFile(join(examplesDir, template.example), "utf-8");
+  await writeFile(join(projectDir, "src", "index.tsx"), exampleSrc);
+
+  // Write package.json
+  const pkg = {
+    name: parsed.name,
+    version: "0.0.1",
+    private: true,
+    type: "module",
+    scripts: {
+      dev: "vibeo preview --entry src/index.tsx",
+      build: "vibeo render --entry src/index.tsx",
+      list: "vibeo list --entry src/index.tsx",
+      typecheck: "bunx tsc --noEmit",
+    },
+    dependencies: {
+      "@vibeo/core": "workspace:*",
+      "@vibeo/audio": "workspace:*",
+      "@vibeo/effects": "workspace:*",
+      "@vibeo/extras": "workspace:*",
+      "@vibeo/player": "workspace:*",
+      "@vibeo/renderer": "workspace:*",
+      "@vibeo/cli": "workspace:*",
+      react: "^19.0.0",
+      "react-dom": "^19.0.0",
+    },
+    devDependencies: {
+      "@types/react": "^19.0.0",
+      typescript: "^5.0.0",
+    },
+  };
+  await writeFile(join(projectDir, "package.json"), JSON.stringify(pkg, null, 2) + "\n");
+
+  // Write tsconfig.json
+  const tsconfig = {
+    compilerOptions: {
+      target: "ES2022",
+      module: "ESNext",
+      moduleResolution: "bundler",
+      jsx: "react-jsx",
+      strict: true,
+      esModuleInterop: true,
+      skipLibCheck: true,
+      outDir: "dist",
+      declaration: true,
+      declarationMap: true,
+      sourceMap: true,
+    },
+    include: ["src"],
+  };
+  await writeFile(join(projectDir, "tsconfig.json"), JSON.stringify(tsconfig, null, 2) + "\n");
+
+  // Write .gitignore
+  await writeFile(
+    join(projectDir, ".gitignore"),
+    `node_modules/
+dist/
+out/
+*.tmp
+.DS_Store
+`,
+  );
+
+  console.log(`  Created ${parsed.name}/`);
+  console.log(`  ├── src/index.tsx`);
+  console.log(`  ├── public/`);
+  console.log(`  ├── package.json`);
+  console.log(`  ├── tsconfig.json`);
+  console.log(`  └── .gitignore`);
+
+  console.log(`
+Next steps:
+  cd ${parsed.name}
+  bun install
+  bun run dev        # preview in browser
+  bun run build      # render to video
+`);
+}

package/src/commands/list.ts

@@ -0,0 +1,136 @@
+import { resolve } from "node:path";
+import { bundle } from "@vibeo/renderer";
+import { launchBrowser, createPage, closeBrowser } from "@vibeo/renderer";
+
+interface ListArgs {
+  entry: string;
+}
+
+function parseArgs(args: string[]): ListArgs {
+  const result: ListArgs = {
+    entry: "",
+  };
+
+  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 === "--help" || arg === "-h") {
+      printHelp();
+      process.exit(0);
+    }
+  }
+
+  return result;
+}
+
+function printHelp(): void {
+  console.log(`
+vibeo list - List registered compositions
+
+Usage:
+  vibeo list --entry <path>
+
+Required:
+  --entry <path>    Path to the root file with compositions
+
+Options:
+  --help            Show this help
+`);
+}
+
+interface CompositionMeta {
+  id: string;
+  width: number;
+  height: number;
+  fps: number;
+  durationInFrames: number;
+}
+
+/**
+ * Bundle the entry, launch a browser to evaluate it,
+ * extract registered compositions, and print a table.
+ */
+export async function listCommand(args: string[]): Promise<void> {
+  const parsed = parseArgs(args);
+
+  if (!parsed.entry) {
+    console.error("Error: --entry is required");
+    printHelp();
+    process.exit(1);
+  }
+
+  const entry = resolve(parsed.entry);
+
+  console.log(`Bundling ${entry}...`);
+  const bundleResult = await bundle(entry);
+
+  try {
+    const browser = await launchBrowser();
+    const page = await createPage(browser, 1920, 1080);
+
+    await page.goto(bundleResult.url, { waitUntil: "networkidle" });
+
+    // Wait briefly for React to register compositions
+    await page.waitForTimeout(2000);
+
+    // Extract composition data from the page
+    const compositions = await page.evaluate(() => {
+      const win = window as typeof window & {
+        vibeo_getCompositions?: () => CompositionMeta[];
+      };
+      if (typeof win.vibeo_getCompositions === "function") {
+        return win.vibeo_getCompositions();
+      }
+      return [];
+    });
+
+    await page.close();
+    await closeBrowser();
+
+    if (compositions.length === 0) {
+      console.log("\nNo compositions found.");
+      console.log(
+        "Make sure your entry file exports compositions via <Composition /> components.",
+      );
+      return;
+    }
+
+    // Print table
+    console.log("\nRegistered compositions:\n");
+    console.log(
+      padRight("ID", 25) +
+        padRight("Width", 8) +
+        padRight("Height", 8) +
+        padRight("FPS", 6) +
+        padRight("Frames", 8) +
+        "Duration",
+    );
+    console.log("-".repeat(70));
+
+    for (const comp of compositions) {
+      const duration = (comp.durationInFrames / comp.fps).toFixed(1) + "s";
+      console.log(
+        padRight(comp.id, 25) +
+          padRight(String(comp.width), 8) +
+          padRight(String(comp.height), 8) +
+          padRight(String(comp.fps), 6) +
+          padRight(String(comp.durationInFrames), 8) +
+          duration,
+      );
+    }
+
+    console.log();
+  } finally {
+    await bundleResult.cleanup();
+  }
+}
+
+function padRight(str: string, len: number): string {
+  return str.length >= len ? str : str + " ".repeat(len - str.length);
+}

package/src/commands/preview.ts

@@ -0,0 +1,88 @@
+import { resolve } from "node:path";
+import { bundle } from "@vibeo/renderer";
+
+interface PreviewArgs {
+  entry: string;
+  port: number;
+}
+
+function parseArgs(args: string[]): PreviewArgs {
+  const result: PreviewArgs = {
+    entry: "",
+    port: 3000,
+  };
+
+  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 === "--port" && next) {
+      result.port = parseInt(next, 10);
+      i++;
+    } else if (arg.startsWith("--port=")) {
+      result.port = parseInt(arg.slice("--port=".length), 10);
+    } else if (arg === "--help" || arg === "-h") {
+      printHelp();
+      process.exit(0);
+    }
+  }
+
+  return result;
+}
+
+function printHelp(): void {
+  console.log(`
+vibeo preview - Start a dev server with live preview
+
+Usage:
+  vibeo preview --entry <path> [options]
+
+Required:
+  --entry <path>    Path to the root file with compositions
+
+Options:
+  --port <number>   Port for the dev server (default: 3000)
+  --help            Show this help
+`);
+}
+
+/**
+ * Start a dev server hosting the Player with hot reload.
+ */
+export async function previewCommand(args: string[]): Promise<void> {
+  const parsed = parseArgs(args);
+
+  if (!parsed.entry) {
+    console.error("Error: --entry is required");
+    printHelp();
+    process.exit(1);
+  }
+
+  const entry = resolve(parsed.entry);
+
+  console.log(`Starting preview server...`);
+  console.log(`  Entry: ${entry}`);
+
+  const bundleResult = await bundle(entry);
+
+  console.log(`\n  Preview running at ${bundleResult.url}`);
+  console.log(`  Press Ctrl+C to stop\n`);
+
+  // Keep the process alive until interrupted
+  const shutdown = async () => {
+    console.log("\nShutting down preview server...");
+    await bundleResult.cleanup();
+    process.exit(0);
+  };
+
+  process.on("SIGINT", shutdown);
+  process.on("SIGTERM", shutdown);
+
+  // Block forever
+  await new Promise(() => {});
+}