@vibeo/cli 0.1.1 → 0.2.0

package/src/commands/create.ts

@@ -1,145 +1,261 @@
-import { resolve, join, basename } from "node:path";
-import { cp, mkdir, readdir, readFile, writeFile } from "node:fs/promises";
+import { resolve, join } from "node:path";
+import { mkdir, 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",
-  },
-};
+// ---------------------------------------------------------------------------
+// Embedded templates
+// ---------------------------------------------------------------------------
+
+const TEMPLATE_BASIC = `import React from "react";
+import {
+  Composition, Sequence, VibeoRoot,
+  useCurrentFrame, useVideoConfig, interpolate, easeInOut,
+} from "@vibeo/core";
+
+function TitleScene() {
+  const frame = useCurrentFrame();
+  const { width, height } = useVideoConfig();
+  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
+  const y = interpolate(frame, [0, 30], [40, 0], { easing: easeInOut, extrapolateRight: "clamp" });
+
+  return (
+    <div style={{ width, height, display: "flex", justifyContent: "center", alignItems: "center", background: "linear-gradient(135deg, #0f0c29, #302b63, #24243e)" }}>
+      <h1 style={{ color: "white", fontSize: 72, fontFamily: "sans-serif", opacity, transform: \`translateY(\${y}px)\` }}>Hello, Vibeo!</h1>
+    </div>
+  );
+}
+
+function ContentScene() {
+  const frame = useCurrentFrame();
+  const { width, height, fps } = useVideoConfig();
+  const seconds = (frame / fps).toFixed(1);
+  const scale = interpolate(frame, [0, 20], [0.8, 1], { easing: easeInOut, extrapolateRight: "clamp" });
+
+  return (
+    <div style={{ width, height, display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", background: "#24243e" }}>
+      <div style={{ transform: \`scale(\${scale})\`, color: "white", fontSize: 48, fontFamily: "sans-serif", textAlign: "center" }}>
+        <p>Scene 2</p>
+        <p style={{ fontSize: 32, opacity: 0.7 }}>{seconds}s elapsed</p>
+      </div>
+    </div>
+  );
+}
+
+function MyVideo() {
+  return (
+    <>
+      <Sequence from={0} durationInFrames={75} name="Title"><TitleScene /></Sequence>
+      <Sequence from={75} durationInFrames={75} name="Content"><ContentScene /></Sequence>
+    </>
+  );
+}
+
+export function Root() {
+  return (
+    <VibeoRoot>
+      <Composition id="BasicComposition" component={MyVideo} width={1920} height={1080} fps={30} durationInFrames={150} />
+    </VibeoRoot>
+  );
+}
+`;
+
+const TEMPLATE_AUDIO_REACTIVE = `import React from "react";
+import { Composition, VibeoRoot, useCurrentFrame, useVideoConfig, interpolate } from "@vibeo/core";
+import { Audio } from "@vibeo/audio";
+import { useAudioData } from "@vibeo/effects";
+
+const AUDIO_SRC = "/music.mp3";
+
+function FrequencyBars() {
+  const { width, height } = useVideoConfig();
+  const audio = useAudioData(AUDIO_SRC, { fftSize: 1024 });
+  if (!audio) return <div style={{ width, height }} />;
+
+  const barCount = 48;
+  const step = Math.floor(audio.frequencies.length / barCount);
+  const barWidth = (width * 0.8) / barCount;
+  const maxBarHeight = height * 0.6;
+
+  return (
+    <div style={{ position: "absolute", bottom: 60, left: width * 0.1, display: "flex", alignItems: "flex-end", gap: 2 }}>
+      {Array.from({ length: barCount }, (_, i) => {
+        const db = audio.frequencies[i * step];
+        const normalized = Math.max(0, (db + 100) / 100);
+        const hue = interpolate(i, [0, barCount - 1], [220, 340]);
+        return (
+          <div key={i} style={{ width: barWidth - 2, height: Math.max(2, normalized * maxBarHeight), background: \`hsl(\${hue}, 80%, 60%)\`, borderRadius: 2 }} />
+        );
+      })}
+    </div>
+  );
+}
+
+function AudioViz() {
+  const frame = useCurrentFrame();
+  const { width, height, fps } = useVideoConfig();
+  const audio = useAudioData(AUDIO_SRC);
+  const hue = 240 + (audio ? audio.amplitude * 60 : 0);
+  const lightness = audio ? 8 + audio.amplitude * 12 : 8;
+
+  return (
+    <div style={{ width, height, background: \`radial-gradient(ellipse at center, hsl(\${hue}, 40%, \${lightness + 5}%), hsl(\${hue}, 30%, \${lightness}%))\`, position: "relative", overflow: "hidden" }}>
+      <div style={{ position: "absolute", top: 40, left: 40, color: "white", fontFamily: "sans-serif" }}>
+        <h1 style={{ fontSize: 36, margin: 0, opacity: 0.9 }}>Audio Visualizer</h1>
+        <p style={{ fontSize: 18, margin: "8px 0 0", opacity: 0.5 }}>{(frame / fps).toFixed(1)}s</p>
+      </div>
+      <FrequencyBars />
+      <Audio src={AUDIO_SRC} volume={0.8} />
+    </div>
+  );
+}
+
+export function Root() {
+  return (
+    <VibeoRoot>
+      <Composition id="AudioReactiveViz" component={AudioViz} width={1920} height={1080} fps={30} durationInFrames={900} />
+    </VibeoRoot>
+  );
+}
+`;
+
+const TEMPLATE_TRANSITIONS = `import React from "react";
+import { Composition, Sequence, VibeoRoot, useCurrentFrame, useVideoConfig, interpolate, easeOut } from "@vibeo/core";
+import { Transition } from "@vibeo/effects";
+
+function ColorScene({ title, color }: { title: string; color: string }) {
+  const frame = useCurrentFrame();
+  const { width, height } = useVideoConfig();
+  const opacity = interpolate(frame, [0, 20], [0, 1], { easing: easeOut, extrapolateRight: "clamp" });
+
+  return (
+    <div style={{ width, height, background: color, display: "flex", justifyContent: "center", alignItems: "center" }}>
+      <h1 style={{ color: "white", fontSize: 80, fontFamily: "sans-serif", opacity }}>{title}</h1>
+    </div>
+  );
+}
+
+function SceneA() { return <ColorScene title="Scene One" color="linear-gradient(135deg, #667eea, #764ba2)" />; }
+function SceneB() { return <ColorScene title="Scene Two" color="linear-gradient(135deg, #f093fb, #f5576c)" />; }
+function SceneC() { return <ColorScene title="Scene Three" color="linear-gradient(135deg, #4facfe, #00f2fe)" />; }
 
-interface CreateArgs {
-  name: string;
-  template: string;
+function TransitionDemo() {
+  return (
+    <>
+      <Sequence from={0} durationInFrames={85}><SceneA /></Sequence>
+      <Sequence from={65} durationInFrames={20}>
+        <Transition type="fade" durationInFrames={20}><SceneA /><SceneB /></Transition>
+      </Sequence>
+      <Sequence from={85} durationInFrames={85}><SceneB /></Sequence>
+      <Sequence from={150} durationInFrames={20}>
+        <Transition type="slide" durationInFrames={20} direction="left"><SceneB /><SceneC /></Transition>
+      </Sequence>
+      <Sequence from={170} durationInFrames={70}><SceneC /></Sequence>
+    </>
+  );
 }
 
-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;
+export function Root() {
+  return (
+    <VibeoRoot>
+      <Composition id="TransitionDemo" component={TransitionDemo} width={1920} height={1080} fps={30} durationInFrames={240} />
+    </VibeoRoot>
+  );
 }
+`;
+
+const TEMPLATE_SUBTITLES = `import React from "react";
+import { Composition, Sequence, VibeoRoot, useCurrentFrame, useVideoConfig, interpolate } from "@vibeo/core";
+import { Subtitle } from "@vibeo/extras";
 
-function printHelp(): void {
-  console.log(`
-vibeo create - Create a new Vibeo project
+const SUBTITLES_SRT = \`1
+00:00:00,500 --> 00:00:03,000
+Welcome to the Vibeo demo.
 
-Usage:
-  vibeo create <project-name> [options]
+2
+00:00:03,500 --> 00:00:06,000
+This shows subtitle overlays.
 
-Options:
-  --template <name>   Template to use (default: basic)
-  --help              Show this help
+3
+00:00:06,500 --> 00:00:09,000
+Subtitles are synced to the frame timeline.
 
-Templates:`);
+4
+00:00:09,500 --> 00:00:12,000
+You can use <b>bold</b> and <i>italic</i> text.
 
-  for (const [name, { description }] of Object.entries(TEMPLATES)) {
-    console.log(`  ${name.padEnd(18)} ${description}`);
-  }
+5
+00:00:13,000 --> 00:00:16,000
+The end. Thanks for watching!\`;
 
-  console.log(`
-Examples:
-  vibeo create my-video
-  vibeo create music-viz --template audio-reactive
-  vibeo create intro --template transitions
-`);
+function SubtitleVideo() {
+  const frame = useCurrentFrame();
+  const { width, height } = useVideoConfig();
+  const hue = interpolate(frame, [0, 480], [200, 280]);
+
+  return (
+    <div style={{ width, height, position: "relative" }}>
+      <div style={{ width, height, background: \`linear-gradient(135deg, hsl(\${hue}, 50%, 15%), hsl(\${hue + 40}, 40%, 10%))\` }} />
+      <div style={{ position: "absolute", top: 0, left: 0, width, height }}>
+        <Subtitle src={SUBTITLES_SRT} format="srt" position="bottom" fontSize={36} color="white" outlineColor="black" outlineWidth={2} style={{ padding: "0 80px 60px" }} />
+      </div>
+    </div>
+  );
 }
 
-// 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 function Root() {
+  return (
+    <VibeoRoot>
+      <Composition id="SubtitleOverlay" component={SubtitleVideo} width={1920} height={1080} fps={30} durationInFrames={480} />
+    </VibeoRoot>
+  );
 }
+`;
 
-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 TEMPLATES: Record<string, { description: string; source: string }> = {
+  basic: { description: "Minimal composition with text animation and two scenes", source: TEMPLATE_BASIC },
+  "audio-reactive": { description: "Audio visualization with frequency bars", source: TEMPLATE_AUDIO_REACTIVE },
+  transitions: { description: "Scene transitions (fade, slide)", source: TEMPLATE_TRANSITIONS },
+  subtitles: { description: "Video with SRT subtitle overlay", source: TEMPLATE_SUBTITLES },
+};
 
-  const template = TEMPLATES[parsed.template];
-  if (!template) {
-    console.error(`Error: unknown template "${parsed.template}"`);
-    console.error(`Available: ${Object.keys(TEMPLATES).join(", ")}`);
-    process.exit(1);
-  }
+export const TEMPLATE_NAMES = Object.keys(TEMPLATES);
 
-  const projectDir = resolve(parsed.name);
-  if (existsSync(projectDir)) {
-    console.error(`Error: directory "${parsed.name}" already exists`);
-    process.exit(1);
-  }
+export async function createProject(
+  name: string,
+  template: string,
+): Promise<{ project: string; template: string; files: string[] }> {
+  const tmpl = TEMPLATES[template];
+  if (!tmpl) throw new Error(`Unknown template: ${template}`);
 
-  console.log(`\nCreating Vibeo project: ${parsed.name}`);
-  console.log(`Template: ${parsed.template}\n`);
+  const projectDir = resolve(name);
+  if (existsSync(projectDir)) throw new Error(`Directory "${name}" already exists`);
 
-  // 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);
+  await writeFile(join(projectDir, "src", "index.tsx"), tmpl.source);
 
-  // Write package.json
   const pkg = {
-    name: parsed.name,
+    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",
+      dev: "bunx @vibeo/cli preview --entry src/index.tsx",
+      build: "bunx @vibeo/cli render --entry src/index.tsx",
+      list: "bunx @vibeo/cli 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:*",
+      "@vibeo/core": "^0.1.0",
+      "@vibeo/audio": "^0.1.0",
+      "@vibeo/effects": "^0.1.0",
+      "@vibeo/extras": "^0.1.0",
+      "@vibeo/player": "^0.1.0",
+      "@vibeo/renderer": "^0.1.0",
+      "@vibeo/cli": "^0.1.0",
       react: "^19.0.0",
       "react-dom": "^19.0.0",
     },
@@ -150,7 +266,6 @@ export async function createCommand(args: string[]): Promise<void> {
   };
   await writeFile(join(projectDir, "package.json"), JSON.stringify(pkg, null, 2) + "\n");
 
-  // Write tsconfig.json
   const tsconfig = {
     compilerOptions: {
       target: "ES2022",
@@ -169,29 +284,8 @@ export async function createCommand(args: string[]): Promise<void> {
   };
   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
-`,
-  );
+  await writeFile(join(projectDir, ".gitignore"), "node_modules/\ndist/\nout/\n*.tmp\n.DS_Store\n");
 
-  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
-`);
+  const files = ["src/index.tsx", "package.json", "tsconfig.json", ".gitignore", "public/"];
+  return { project: name, template, files };
 }

package/src/commands/list.ts

@@ -1,49 +1,6 @@
-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;
@@ -52,21 +9,7 @@ interface CompositionMeta {
   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);
-
+export async function listCompositions(entry: string): Promise<CompositionMeta[]> {
   console.log(`Bundling ${entry}...`);
   const bundleResult = await bundle(entry);
 
@@ -75,11 +18,8 @@ export async function listCommand(args: string[]): Promise<void> {
     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[];
@@ -93,44 +33,8 @@ export async function listCommand(args: string[]): Promise<void> {
     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();
+    return compositions;
   } 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

@@ -1,70 +1,6 @@
-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);
-
+export async function startPreview(entry: string, _port: number): Promise<void> {
   console.log(`Starting preview server...`);
   console.log(`  Entry: ${entry}`);
 
@@ -73,7 +9,6 @@ export async function previewCommand(args: string[]): Promise<void> {
   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();