@scenar/cli 0.1.6 → 0.1.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@scenar/cli",
-  "version": "0.1.6",
-  "description": "Scenar CLI — validate scenario YAML and generate narration audio.",
+  "version": "0.1.8",
+  "description": "Scenar CLI — validate scenarios, generate narration, and render videos.",
   "license": "Apache-2.0",
   "type": "module",
   "repository": {
@@ -16,7 +16,10 @@
     "narration",
     "tts",
     "validate",
-    "yaml"
+    "yaml",
+    "video",
+    "render",
+    "remotion"
   ],
   "bin": {
     "scenar": "./bin/scenar.js"
@@ -24,14 +27,18 @@
   "main": "./src/index.js",
   "types": "./src/index.d.ts",
   "dependencies": {
-    "@scenar/preview": "0.1.6",
-    "@scenar/sdk": "0.1.6",
+    "@scenar/core": "0.1.8",
+    "@scenar/preview": "0.1.8",
+    "@scenar/sdk": "0.1.8",
     "commander": "^13.0.0",
     "yaml": "^2.7.0"
   },
   "peerDependencies": {
     "echogarden": ">=2.0.0",
-    "edge-tts-universal": ">=1.0.0"
+    "edge-tts-universal": ">=1.0.0",
+    "remotion": "4.0.448",
+    "@remotion/renderer": "4.0.448",
+    "@remotion/bundler": "4.0.448"
   },
   "peerDependenciesMeta": {
     "echogarden": {
@@ -39,6 +46,15 @@
     },
     "edge-tts-universal": {
       "optional": true
+    },
+    "remotion": {
+      "optional": true
+    },
+    "@remotion/renderer": {
+      "optional": true
+    },
+    "@remotion/bundler": {
+      "optional": true
     }
   }
 }

package/src/__tests__/load-bundle.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect, vi } from "vitest";
+import { join, basename } from "node:path";
+import { loadBundle } from "../util/load-bundle.js";
+import * as loadTs from "../util/load-ts.js";
+import * as fs from "node:fs/promises";
+
+vi.mock("../util/load-ts.js");
+vi.mock("node:fs/promises");
+
+describe("loadBundle", () => {
+  const mockSteps = [
+    { delayMs: 0, narration: "Step one narration" },
+    { delayMs: 2000, narration: "Step two narration" },
+    { delayMs: 1500 },
+  ];
+
+  const mockManifest = {
+    steps: [
+      { src: "/audio/step-0.mp3", durationMs: 3000 },
+      { src: "/audio/step-1.mp3", durationMs: 2500 },
+      null,
+    ],
+  };
+
+  it("loads steps and narration manifest from a directory", async () => {
+    vi.mocked(loadTs.loadStepsFromTs).mockResolvedValue(mockSteps);
+    vi.mocked(fs.access).mockResolvedValue(undefined);
+    vi.mocked(fs.readFile).mockResolvedValue(JSON.stringify(mockManifest) as never);
+
+    const bundle = await loadBundle("/fake/scenarios/quickstart-tour");
+
+    expect(bundle.id).toBe("quickstart-tour");
+    expect(bundle.steps).toHaveLength(3);
+    expect(bundle.steps[0]!.delayMs).toBe(0);
+    expect(bundle.narrationManifest).toBeDefined();
+    expect(bundle.narrationManifest!.steps).toHaveLength(3);
+    expect(bundle.narrationManifest!.steps[2]).toBeNull();
+  });
+
+  it("uses the directory basename as the bundle id", async () => {
+    vi.mocked(loadTs.loadStepsFromTs).mockResolvedValue(mockSteps);
+    vi.mocked(fs.access).mockResolvedValue(undefined);
+    vi.mocked(fs.readFile).mockResolvedValue(JSON.stringify(mockManifest) as never);
+
+    const bundle = await loadBundle("/some/path/my-demo");
+    expect(bundle.id).toBe("my-demo");
+  });
+
+  it("returns undefined manifest when no manifest.json exists", async () => {
+    vi.mocked(loadTs.loadStepsFromTs).mockResolvedValue(mockSteps);
+    vi.mocked(fs.access).mockRejectedValue(new Error("ENOENT"));
+
+    const bundle = await loadBundle("/fake/scenarios/no-audio-demo");
+    expect(bundle.narrationManifest).toBeUndefined();
+  });
+});

package/src/__tests__/render-command.test.ts

@@ -0,0 +1,77 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { createProgram } from "../index.js";
+
+describe("scenar render", () => {
+  let stderrOutput: string;
+
+  beforeEach(() => {
+    stderrOutput = "";
+    vi.spyOn(process.stderr, "write").mockImplementation((chunk) => {
+      stderrOutput += String(chunk);
+      return true;
+    });
+    process.exitCode = undefined;
+  });
+
+  it("registers the render command with correct description", () => {
+    const program = createProgram();
+    const renderCmd = program.commands.find((c) => c.name() === "render");
+    expect(renderCmd).toBeDefined();
+    expect(renderCmd!.description()).toContain("MP4 video");
+    expect(renderCmd!.description()).toContain("Remotion");
+  });
+
+  it("accepts a directory argument", () => {
+    const program = createProgram();
+    const renderCmd = program.commands.find((c) => c.name() === "render");
+    expect(renderCmd).toBeDefined();
+    expect(renderCmd!.registeredArguments).toHaveLength(1);
+    expect(renderCmd!.registeredArguments[0]!.name()).toBe("dir");
+  });
+
+  it("exposes all required options", () => {
+    const program = createProgram();
+    const renderCmd = program.commands.find((c) => c.name() === "render");
+    expect(renderCmd).toBeDefined();
+
+    const optionNames = renderCmd!.options.map((o) => o.long);
+    expect(optionNames).toContain("--out");
+    expect(optionNames).toContain("--fps");
+    expect(optionNames).toContain("--width");
+    expect(optionNames).toContain("--height");
+    expect(optionNames).toContain("--entry");
+    expect(optionNames).toContain("--composition-id");
+  });
+
+  it("defaults fps to 30, width to 1920, height to 1080", () => {
+    const program = createProgram();
+    const renderCmd = program.commands.find((c) => c.name() === "render");
+    expect(renderCmd).toBeDefined();
+
+    const getDefault = (long: string) =>
+      renderCmd!.options.find((o) => o.long === long)?.defaultValue;
+
+    expect(getDefault("--fps")).toBe("30");
+    expect(getDefault("--width")).toBe("1920");
+    expect(getDefault("--height")).toBe("1080");
+  });
+
+  it("sets exit code 1 when given a nonexistent path", async () => {
+    const program = createProgram();
+    program.exitOverride();
+
+    try {
+      await program.parseAsync([
+        "node",
+        "scenar",
+        "render",
+        "/tmp/__nonexistent_scenar_test_path__",
+      ]);
+    } catch {
+      // Commander may throw on exitOverride.
+    }
+
+    expect(process.exitCode).toBe(1);
+    expect(stderrOutput).toContain("Error");
+  });
+});

package/src/commands/render.d.ts

@@ -0,0 +1,3 @@
+import { Command } from "commander";
+export declare function registerRenderCommand(program: Command): void;
+//# sourceMappingURL=render.d.ts.map

package/src/commands/render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../src/commands/render.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAYpC,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CA0E5D"}

package/src/commands/render.js

@@ -0,0 +1,169 @@
+import { resolve, join } from "node:path";
+import { stat, mkdir, access } from "node:fs/promises";
+import { loadBundle } from "../util/load-bundle.js";
+export function registerRenderCommand(program) {
+    program
+        .command("render")
+        .description("Render a scenario as an MP4 video using Remotion.\n\n" +
+        "Accepts a scenario directory containing steps.ts and an optional\n" +
+        "narration/ subfolder with manifest.json + audio clips.\n\n" +
+        "Output defaults to ./<scenario-id>.mp4 in the current working\n" +
+        "directory. Use --out to write to a different path.")
+        .argument("<dir>", "path to a scenario directory (must contain steps.ts)")
+        .option("--out <path>", "output file path or directory for the MP4")
+        .option("--fps <number>", "frames per second (default: 30)", "30")
+        .option("--width <number>", "video width in pixels (default: 1920)", "1920")
+        .option("--height <number>", "video height in pixels (default: 1080)", "1080")
+        .option("--composition-id <id>", "Remotion composition ID to render")
+        .option("--entry <path>", "path to a Remotion entry file (Root.tsx)")
+        .action(async (dir, options) => {
+        const resolved = resolve(dir);
+        let info;
+        try {
+            info = await stat(resolved);
+        }
+        catch {
+            process.stderr.write(`\x1b[31mError:\x1b[0m ${dir} does not exist.\n`);
+            process.exitCode = 1;
+            return;
+        }
+        if (!info.isDirectory()) {
+            process.stderr.write(`\x1b[31mError:\x1b[0m ${dir} is not a directory.\n` +
+                "The render command requires a scenario directory (with steps.ts).\n");
+            process.exitCode = 1;
+            return;
+        }
+        const fps = Number(options.fps) || 30;
+        const width = Number(options.width) || 1920;
+        const height = Number(options.height) || 1080;
+        try {
+            const bundle = await loadBundle(resolved);
+            const scenarioId = bundle.id;
+            const outputPath = resolveOutputPath(options.out, scenarioId);
+            const entryPoint = await resolveEntryPoint(options.entry);
+            process.stderr.write(`Scenario: ${scenarioId}\n`);
+            process.stderr.write(`Steps:    ${bundle.steps.length}\n`);
+            process.stderr.write(`Audio:    ${bundle.narrationManifest ? "yes (manifest found)" : "none"}\n`);
+            process.stderr.write(`Entry:    ${entryPoint}\n`);
+            process.stderr.write(`Output:   ${outputPath}\n`);
+            process.stderr.write(`Config:   ${width}x${height} @ ${fps}fps\n\n`);
+            await renderScenario({
+                bundle,
+                entryPoint,
+                compositionId: options.compositionId ?? scenarioId,
+                outputPath,
+                fps,
+                width,
+                height,
+            });
+            process.stderr.write(`\n\x1b[32m✓\x1b[0m Video saved to ${outputPath}\n`);
+        }
+        catch (error) {
+            const msg = error instanceof Error ? error.message : String(error);
+            process.stderr.write(`\x1b[31mError:\x1b[0m ${msg}\n`);
+            process.exitCode = 1;
+        }
+    });
+}
+// ---------------------------------------------------------------------------
+// Output path resolution
+// ---------------------------------------------------------------------------
+function resolveOutputPath(outOption, scenarioId) {
+    if (!outOption) {
+        return resolve(`./${scenarioId}.mp4`);
+    }
+    if (outOption.endsWith(".mp4")) {
+        return resolve(outOption);
+    }
+    return resolve(join(outOption, `${scenarioId}.mp4`));
+}
+// ---------------------------------------------------------------------------
+// Entry point resolution
+// ---------------------------------------------------------------------------
+async function resolveEntryPoint(entryOption) {
+    if (entryOption) {
+        const resolved = resolve(entryOption);
+        try {
+            await access(resolved);
+        }
+        catch {
+            throw new Error(`Remotion entry point not found: ${entryOption}`);
+        }
+        return resolved;
+    }
+    const candidates = [
+        resolve("remotion/index.tsx"),
+        resolve("remotion/index.ts"),
+        resolve("src/remotion/index.tsx"),
+        resolve("src/remotion/index.ts"),
+    ];
+    for (const candidate of candidates) {
+        try {
+            await access(candidate);
+            return candidate;
+        }
+        catch {
+            // Try next.
+        }
+    }
+    throw new Error("No Remotion entry point found.\n\n" +
+        "Create a remotion/index.tsx that exports your Remotion Root component,\n" +
+        "or use --entry to specify a custom path.\n\n" +
+        "Example remotion/index.tsx:\n\n" +
+        '  import { Composition } from "remotion";\n' +
+        '  import { ScenarioComposition, calculateScenarioTimeline } from "@scenar/remotion";\n' +
+        "  import { myBundle } from \"../scenarios/my-demo/bundle\";\n\n" +
+        "  export const RemotionRoot = () => (\n" +
+        "    <Composition\n" +
+        '      id="my-demo"\n' +
+        "      component={() => (\n" +
+        "        <ScenarioComposition bundle={myBundle}>\n" +
+        "          {(data) => <MyView data={data} />}\n" +
+        "        </ScenarioComposition>\n" +
+        "      )}\n" +
+        "      fps={30}\n" +
+        "      width={1920}\n" +
+        "      height={1080}\n" +
+        "      durationInFrames={\n" +
+        "        calculateScenarioTimeline(myBundle.steps, myBundle.narrationManifest, 30)\n" +
+        "          .durationInFrames\n" +
+        "      }\n" +
+        "    />\n" +
+        "  );\n");
+}
+async function renderScenario(config) {
+    // Dynamic imports — these are optional peer deps.
+    const bundler = await import("@remotion/bundler").catch(() => {
+        throw new Error("Could not load @remotion/bundler.\n" +
+            "Install it: pnpm add @remotion/bundler@4.0.448");
+    });
+    const renderer = await import("@remotion/renderer").catch(() => {
+        throw new Error("Could not load @remotion/renderer.\n" +
+            "Install it: pnpm add @remotion/renderer@4.0.448");
+    });
+    process.stderr.write("Bundling Remotion project...\n");
+    const serveUrl = await bundler.bundle({ entryPoint: config.entryPoint });
+    process.stderr.write(`Selecting composition: ${config.compositionId}\n`);
+    const composition = await renderer.selectComposition({
+        serveUrl,
+        id: config.compositionId,
+    });
+    process.stderr.write(`Composition: ${composition.width}x${composition.height} @ ${composition.fps}fps, ` +
+        `${composition.durationInFrames} frames ` +
+        `(${(composition.durationInFrames / composition.fps).toFixed(1)}s)\n`);
+    const outDir = resolve(config.outputPath, "..");
+    await mkdir(outDir, { recursive: true });
+    process.stderr.write("Rendering...\n");
+    await renderer.renderMedia({
+        composition,
+        serveUrl,
+        codec: "h264",
+        outputLocation: config.outputPath,
+        onProgress: ({ progress }) => {
+            const pct = Math.round(progress * 100);
+            process.stderr.write(`\r  Progress: ${pct}%`);
+        },
+    });
+    process.stderr.write("\n");
+}
+//# sourceMappingURL=render.js.map

package/src/commands/render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.js","sourceRoot":"","sources":["../../../src/commands/render.ts"],"names":[],"mappings":"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"}

package/src/commands/render.ts

@@ -0,0 +1,225 @@
+import { resolve, join } from "node:path";
+import { stat, mkdir, access } from "node:fs/promises";
+import { Command } from "commander";
+import { loadBundle, type CliBundle } from "../util/load-bundle.js";
+
+interface RenderOptions {
+  out?: string;
+  fps?: string;
+  width?: string;
+  height?: string;
+  compositionId?: string;
+  entry?: string;
+}
+
+export function registerRenderCommand(program: Command): void {
+  program
+    .command("render")
+    .description(
+      "Render a scenario as an MP4 video using Remotion.\n\n" +
+      "Accepts a scenario directory containing steps.ts and an optional\n" +
+      "narration/ subfolder with manifest.json + audio clips.\n\n" +
+      "Output defaults to ./<scenario-id>.mp4 in the current working\n" +
+      "directory. Use --out to write to a different path.",
+    )
+    .argument("<dir>", "path to a scenario directory (must contain steps.ts)")
+    .option("--out <path>", "output file path or directory for the MP4")
+    .option("--fps <number>", "frames per second (default: 30)", "30")
+    .option("--width <number>", "video width in pixels (default: 1920)", "1920")
+    .option("--height <number>", "video height in pixels (default: 1080)", "1080")
+    .option("--composition-id <id>", "Remotion composition ID to render")
+    .option("--entry <path>", "path to a Remotion entry file (Root.tsx)")
+    .action(async (dir: string, options: RenderOptions) => {
+      const resolved = resolve(dir);
+
+      let info;
+      try {
+        info = await stat(resolved);
+      } catch {
+        process.stderr.write(`\x1b[31mError:\x1b[0m ${dir} does not exist.\n`);
+        process.exitCode = 1;
+        return;
+      }
+
+      if (!info.isDirectory()) {
+        process.stderr.write(
+          `\x1b[31mError:\x1b[0m ${dir} is not a directory.\n` +
+          "The render command requires a scenario directory (with steps.ts).\n",
+        );
+        process.exitCode = 1;
+        return;
+      }
+
+      const fps = Number(options.fps) || 30;
+      const width = Number(options.width) || 1920;
+      const height = Number(options.height) || 1080;
+
+      try {
+        const bundle = await loadBundle(resolved);
+        const scenarioId = bundle.id;
+        const outputPath = resolveOutputPath(options.out, scenarioId);
+        const entryPoint = await resolveEntryPoint(options.entry);
+
+        process.stderr.write(`Scenario: ${scenarioId}\n`);
+        process.stderr.write(`Steps:    ${bundle.steps.length}\n`);
+        process.stderr.write(
+          `Audio:    ${bundle.narrationManifest ? "yes (manifest found)" : "none"}\n`,
+        );
+        process.stderr.write(`Entry:    ${entryPoint}\n`);
+        process.stderr.write(`Output:   ${outputPath}\n`);
+        process.stderr.write(`Config:   ${width}x${height} @ ${fps}fps\n\n`);
+
+        await renderScenario({
+          bundle,
+          entryPoint,
+          compositionId: options.compositionId ?? scenarioId,
+          outputPath,
+          fps,
+          width,
+          height,
+        });
+
+        process.stderr.write(`\n\x1b[32m✓\x1b[0m Video saved to ${outputPath}\n`);
+      } catch (error) {
+        const msg = error instanceof Error ? error.message : String(error);
+        process.stderr.write(`\x1b[31mError:\x1b[0m ${msg}\n`);
+        process.exitCode = 1;
+      }
+    });
+}
+
+// ---------------------------------------------------------------------------
+// Output path resolution
+// ---------------------------------------------------------------------------
+
+function resolveOutputPath(outOption: string | undefined, scenarioId: string): string {
+  if (!outOption) {
+    return resolve(`./${scenarioId}.mp4`);
+  }
+  if (outOption.endsWith(".mp4")) {
+    return resolve(outOption);
+  }
+  return resolve(join(outOption, `${scenarioId}.mp4`));
+}
+
+// ---------------------------------------------------------------------------
+// Entry point resolution
+// ---------------------------------------------------------------------------
+
+async function resolveEntryPoint(entryOption: string | undefined): Promise<string> {
+  if (entryOption) {
+    const resolved = resolve(entryOption);
+    try {
+      await access(resolved);
+    } catch {
+      throw new Error(`Remotion entry point not found: ${entryOption}`);
+    }
+    return resolved;
+  }
+
+  const candidates = [
+    resolve("remotion/index.tsx"),
+    resolve("remotion/index.ts"),
+    resolve("src/remotion/index.tsx"),
+    resolve("src/remotion/index.ts"),
+  ];
+
+  for (const candidate of candidates) {
+    try {
+      await access(candidate);
+      return candidate;
+    } catch {
+      // Try next.
+    }
+  }
+
+  throw new Error(
+    "No Remotion entry point found.\n\n" +
+    "Create a remotion/index.tsx that exports your Remotion Root component,\n" +
+    "or use --entry to specify a custom path.\n\n" +
+    "Example remotion/index.tsx:\n\n" +
+    '  import { Composition } from "remotion";\n' +
+    '  import { ScenarioComposition, calculateScenarioTimeline } from "@scenar/remotion";\n' +
+    "  import { myBundle } from \"../scenarios/my-demo/bundle\";\n\n" +
+    "  export const RemotionRoot = () => (\n" +
+    "    <Composition\n" +
+    '      id="my-demo"\n' +
+    "      component={() => (\n" +
+    "        <ScenarioComposition bundle={myBundle}>\n" +
+    "          {(data) => <MyView data={data} />}\n" +
+    "        </ScenarioComposition>\n" +
+    "      )}\n" +
+    "      fps={30}\n" +
+    "      width={1920}\n" +
+    "      height={1080}\n" +
+    "      durationInFrames={\n" +
+    "        calculateScenarioTimeline(myBundle.steps, myBundle.narrationManifest, 30)\n" +
+    "          .durationInFrames\n" +
+    "      }\n" +
+    "    />\n" +
+    "  );\n",
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Render orchestration
+// ---------------------------------------------------------------------------
+
+interface RenderConfig {
+  bundle: CliBundle;
+  entryPoint: string;
+  compositionId: string;
+  outputPath: string;
+  fps: number;
+  width: number;
+  height: number;
+}
+
+async function renderScenario(config: RenderConfig): Promise<void> {
+  // Dynamic imports — these are optional peer deps.
+  const bundler = await import("@remotion/bundler").catch(() => {
+    throw new Error(
+      "Could not load @remotion/bundler.\n" +
+      "Install it: pnpm add @remotion/bundler@4.0.448",
+    );
+  });
+
+  const renderer = await import("@remotion/renderer").catch(() => {
+    throw new Error(
+      "Could not load @remotion/renderer.\n" +
+      "Install it: pnpm add @remotion/renderer@4.0.448",
+    );
+  });
+
+  process.stderr.write("Bundling Remotion project...\n");
+  const serveUrl = await bundler.bundle({ entryPoint: config.entryPoint });
+
+  process.stderr.write(`Selecting composition: ${config.compositionId}\n`);
+  const composition = await renderer.selectComposition({
+    serveUrl,
+    id: config.compositionId,
+  });
+
+  process.stderr.write(
+    `Composition: ${composition.width}x${composition.height} @ ${composition.fps}fps, ` +
+    `${composition.durationInFrames} frames ` +
+    `(${(composition.durationInFrames / composition.fps).toFixed(1)}s)\n`,
+  );
+
+  const outDir = resolve(config.outputPath, "..");
+  await mkdir(outDir, { recursive: true });
+
+  process.stderr.write("Rendering...\n");
+  await renderer.renderMedia({
+    composition,
+    serveUrl,
+    codec: "h264" as const,
+    outputLocation: config.outputPath,
+    onProgress: ({ progress }) => {
+      const pct = Math.round(progress * 100);
+      process.stderr.write(`\r  Progress: ${pct}%`);
+    },
+  });
+
+  process.stderr.write("\n");
+}

package/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAKpC,wBAAgB,aAAa,IAAI,OAAO,CAavC;AAED,wBAAgB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAGxC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAMpC,wBAAgB,aAAa,IAAI,OAAO,CAcvC;AAED,wBAAgB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAGxC"}

package/src/index.js

@@ -2,14 +2,16 @@ import { Command } from "commander";
 import { registerValidateCommand } from "./commands/validate.js";
 import { registerNarrateCommand } from "./commands/narrate.js";
 import { registerPreviewCommand } from "./commands/preview.js";
+import { registerRenderCommand } from "./commands/render.js";
 export function createProgram() {
     const program = new Command();
     program
         .name("scenar")
-        .description("Scenar CLI — validate scenarios, generate narration, and manage previews.")
+        .description("Scenar CLI — validate scenarios, generate narration, render videos, and manage previews.")
         .version("0.0.1");
     registerValidateCommand(program);
     registerNarrateCommand(program);
+    registerRenderCommand(program);
     registerPreviewCommand(program);
     return program;
 }

package/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,MAAM,UAAU,aAAa;IAC3B,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;IAE9B,OAAO;SACJ,IAAI,CAAC,QAAQ,CAAC;SACd,WAAW,CAAC,2EAA2E,CAAC;SACxF,OAAO,CAAC,OAAO,CAAC,CAAC;IAEpB,uBAAuB,CAAC,OAAO,CAAC,CAAC;IACjC,sBAAsB,CAAC,OAAO,CAAC,CAAC;IAChC,sBAAsB,CAAC,OAAO,CAAC,CAAC;IAEhC,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,GAAG,CAAC,IAAc;IAChC,MAAM,OAAO,GAAG,aAAa,EAAE,CAAC;IAChC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;AACtB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,MAAM,UAAU,aAAa;IAC3B,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;IAE9B,OAAO;SACJ,IAAI,CAAC,QAAQ,CAAC;SACd,WAAW,CAAC,0FAA0F,CAAC;SACvG,OAAO,CAAC,OAAO,CAAC,CAAC;IAEpB,uBAAuB,CAAC,OAAO,CAAC,CAAC;IACjC,sBAAsB,CAAC,OAAO,CAAC,CAAC;IAChC,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAC/B,sBAAsB,CAAC,OAAO,CAAC,CAAC;IAEhC,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,GAAG,CAAC,IAAc;IAChC,MAAM,OAAO,GAAG,aAAa,EAAE,CAAC;IAChC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;AACtB,CAAC"}

package/src/index.ts

@@ -2,17 +2,19 @@ import { Command } from "commander";
 import { registerValidateCommand } from "./commands/validate.js";
 import { registerNarrateCommand } from "./commands/narrate.js";
 import { registerPreviewCommand } from "./commands/preview.js";
+import { registerRenderCommand } from "./commands/render.js";
 
 export function createProgram(): Command {
   const program = new Command();
 
   program
     .name("scenar")
-    .description("Scenar CLI — validate scenarios, generate narration, and manage previews.")
+    .description("Scenar CLI — validate scenarios, generate narration, render videos, and manage previews.")
     .version("0.0.1");
 
   registerValidateCommand(program);
   registerNarrateCommand(program);
+  registerRenderCommand(program);
   registerPreviewCommand(program);
 
   return program;