@devmotion/cli 0.0.1

package/dist/index.js

@@ -0,0 +1,1002 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { defineCommand as defineCommand8, runMain } from "citty";
+
+// src/commands/init.ts
+import { defineCommand } from "citty";
+import { writeFile, mkdir } from "fs/promises";
+import { join } from "path";
+var DEVMOTION_JSON_TEMPLATE = (name) => JSON.stringify(
+  {
+    version: 1,
+    name,
+    width: 1920,
+    height: 1080,
+    fps: 30,
+    duration: 10,
+    background: { type: "solid", color: "#0a0a0a" },
+    scenes: [{ id: "intro", file: "scenes/intro.html", start: 0, duration: 10 }]
+  },
+  null,
+  2
+) + "\n";
+var INTRO_HTML_TEMPLATE = `<!doctype html>
+<html>
+  <head><meta charset="utf-8" /></head>
+  <body>
+    <!-- Each element with data-dm-* becomes a layer in the timeline -->
+    <div data-dm-id="title"
+         data-dm-enter="fade-in"
+         data-dm-enter-time="0.5"
+         data-dm-duration="0.8"
+         data-dm-easing="ease-out"
+         data-dm-keyframe-opacity="0:0; 0.5:1; 9:1; 10:0"
+         style="display: flex; align-items: center; justify-content: center;
+                width: 100%; height: 100%; color: #fff; font-size: 48px;
+                font-family: system-ui, sans-serif;">
+      Hello DevMotion
+    </div>
+
+    <!-- <dm-*> custom elements for premium layers -->
+    <dm-phone data-dm-id="phone-demo"
+              data-dm-enter="slide-in-right"
+              data-dm-enter-time="1.5"
+              data-dm-duration="0.6"
+              data-dm-easing="ease-out"
+              src="./assets/screen.mp4">
+    </dm-phone>
+  </body>
+</html>
+`;
+var GITIGNORE_TEMPLATE = `# DevMotion build artifacts
+build/
+dist/
+out/
+*.mp4
+*.webm
+
+# Dependencies
+node_modules/
+
+# OS
+.DS_Store
+Thumbs.db
+`;
+var README_TEMPLATE = (name) => `# ${name}
+
+Created with [DevMotion](https://devmotion.com) \u2014 HTML-first video tooling.
+
+## Quick start
+
+\`\`\`bash
+# Preview in the Studio
+devmotion preview
+
+# Render to MP4
+devmotion render
+
+# Add a new scene
+devmotion add-scene outro
+\`\`\`
+
+## Project structure
+
+- \`devmotion.json\` \u2014 project configuration (resolution, FPS, duration)
+- \`scenes/*.html\` \u2014 one HTML file per scene, layers = elements with \`data-dm-*\`
+- \`assets/\` \u2014 images, videos, fonts
+
+## How it works
+
+Every HTML element with \`data-dm-*\` attributes becomes a layer on the timeline.
+Use \`<dm-*>\` custom elements for premium layers (phone, browser, captions, etc.).
+Edit in any text editor or the DevMotion Studio.
+`;
+var initCommand = defineCommand({
+  meta: {
+    name: "init",
+    description: "Scaffold a new DevMotion project"
+  },
+  args: {
+    name: {
+      type: "positional",
+      description: "Project name (folder name)",
+      required: true
+    }
+  },
+  async run({ args }) {
+    const projectName = args.name;
+    const cwd = process.cwd();
+    const projectDir = join(cwd, projectName);
+    await mkdir(join(projectDir, "scenes"), { recursive: true });
+    await mkdir(join(projectDir, "assets"), { recursive: true });
+    await writeFile(join(projectDir, "devmotion.json"), DEVMOTION_JSON_TEMPLATE(projectName));
+    await writeFile(join(projectDir, "scenes", "intro.html"), INTRO_HTML_TEMPLATE);
+    await writeFile(join(projectDir, ".gitignore"), GITIGNORE_TEMPLATE);
+    await writeFile(join(projectDir, "README.md"), README_TEMPLATE(projectName));
+    console.log(`
+\u2728 DevMotion project created at ./${projectName}/
+`);
+    console.log("  Next steps:");
+    console.log(`    cd ${projectName}`);
+    console.log("    devmotion preview");
+    console.log();
+  }
+});
+
+// src/commands/preview.ts
+import { defineCommand as defineCommand2 } from "citty";
+import { existsSync as existsSync3 } from "fs";
+import { join as join4 } from "path";
+
+// src/lib/studio.ts
+import { spawn } from "child_process";
+import { existsSync } from "fs";
+import { dirname, join as join2 } from "path";
+import { fileURLToPath } from "url";
+import { createRequire } from "module";
+var require2 = createRequire(import.meta.url);
+function findStudioBuild() {
+  try {
+    const pkgJsonPath = require2.resolve("@devmotion/studio/package.json");
+    const studioDir = dirname(pkgJsonPath);
+    const distEntry = join2(studioDir, "dist", "index.js");
+    if (existsSync(distEntry)) return join2(studioDir, "dist");
+  } catch {
+  }
+  let dir = process.cwd();
+  for (let i = 0; i < 10; i++) {
+    const buildEntry = join2(dir, "build", "index.js");
+    if (existsSync(buildEntry)) return join2(dir, "build");
+    const parent = join2(dir, "..");
+    if (parent === dir) break;
+    dir = parent;
+  }
+  const srcDir = fileURLToPath(new URL(".", import.meta.url));
+  let walk = srcDir;
+  for (let i = 0; i < 8; i++) {
+    const buildEntry = join2(walk, "build", "index.js");
+    if (existsSync(buildEntry)) return join2(walk, "build");
+    const parent = join2(walk, "..");
+    if (parent === walk) break;
+    walk = parent;
+  }
+  throw new Error(
+    "Studio bundle not found. If you installed @devmotion/cli from npm, try reinstalling. If you are developing from source, run `pnpm build` at the repo root first."
+  );
+}
+function findFfmpegPath() {
+  try {
+    const installer = require2("@ffmpeg-installer/ffmpeg");
+    if (installer.path && existsSync(installer.path)) return installer.path;
+  } catch {
+  }
+  return void 0;
+}
+function spawnStudio(opts) {
+  const buildDir = findStudioBuild();
+  const ffmpegPath = findFfmpegPath();
+  const env = {
+    ...process.env,
+    PORT: opts.port,
+    HOST: "127.0.0.1",
+    PUBLIC_LOCAL_PROJECT_DIR: opts.projectDir,
+    PUBLIC_DESKTOP_MODE: "false",
+    PUBLIC_NO_AUTH: "true"
+  };
+  if (ffmpegPath) env.DEVMOTION_FFMPEG_PATH = ffmpegPath;
+  return spawn("node", [join2(buildDir, "index.js")], {
+    cwd: buildDir,
+    env,
+    stdio: opts.verbose ? "inherit" : ["ignore", "ignore", "pipe"]
+  });
+}
+async function waitForStudio(baseUrl, timeoutMs = 3e4) {
+  const start = Date.now();
+  const probeUrl = `${baseUrl}/api/local/project`;
+  while (Date.now() - start < timeoutMs) {
+    try {
+      const res = await fetch(probeUrl, { method: "GET" });
+      if (res.ok || res.status === 404) return;
+    } catch {
+    }
+    await new Promise((r) => setTimeout(r, 250));
+  }
+  throw new Error(`Studio did not become ready within ${timeoutMs}ms at ${baseUrl}`);
+}
+async function isStudioRunning(baseUrl) {
+  try {
+    const res = await fetch(`${baseUrl}/api/local/project`, { method: "GET" });
+    return res.ok || res.status === 404;
+  } catch {
+    return false;
+  }
+}
+
+// src/lib/doctor.ts
+import { existsSync as existsSync2 } from "fs";
+import { dirname as dirname2, join as join3 } from "path";
+import { createRequire as createRequire2 } from "module";
+import { spawnSync } from "child_process";
+var require3 = createRequire2(import.meta.url);
+function checkFfmpeg() {
+  try {
+    const installer = require3("@ffmpeg-installer/ffmpeg");
+    if (installer.path && existsSync2(installer.path)) {
+      return {
+        name: "ffmpeg",
+        ok: true,
+        detail: `${installer.version ?? "bundled"} \u2014 ${installer.path}`
+      };
+    }
+    return {
+      name: "ffmpeg",
+      ok: false,
+      detail: "bundled binary missing on disk",
+      fix: "reinstall @devmotion/cli"
+    };
+  } catch {
+    return {
+      name: "ffmpeg",
+      ok: false,
+      detail: "@ffmpeg-installer/ffmpeg not installed",
+      fix: "reinstall @devmotion/cli (it ships ffmpeg as a dependency)"
+    };
+  }
+}
+function checkPlaywright() {
+  try {
+    const { chromium } = require3("playwright");
+    const execPath = chromium.executablePath();
+    if (execPath && existsSync2(execPath)) {
+      return { name: "playwright (chromium)", ok: true, detail: execPath };
+    }
+    return {
+      name: "playwright (chromium)",
+      ok: false,
+      detail: "browser not downloaded",
+      fix: "npx playwright install chromium"
+    };
+  } catch {
+    return {
+      name: "playwright (chromium)",
+      ok: false,
+      detail: "playwright not installed",
+      fix: "reinstall @devmotion/cli (it ships playwright as a dependency)"
+    };
+  }
+}
+function runAllChecks() {
+  return [checkFfmpeg(), checkPlaywright()];
+}
+function formatCheck(c) {
+  const status = c.ok ? "\u2705" : "\u274C";
+  const detail = c.detail ? ` \u2014 ${c.detail}` : "";
+  const fix = !c.ok && c.fix ? `
+     fix: ${c.fix}` : "";
+  return `   ${status} ${c.name}${detail}${fix}`;
+}
+function isChromiumInstalled() {
+  try {
+    const { chromium } = require3("playwright");
+    const execPath = chromium.executablePath();
+    return !!execPath && existsSync2(execPath);
+  } catch {
+    return false;
+  }
+}
+function ensureChromium() {
+  if (isChromiumInstalled()) return true;
+  let cliPath;
+  try {
+    const pkgJson = require3.resolve("playwright/package.json");
+    cliPath = join3(dirname2(pkgJson), "cli.js");
+  } catch {
+    return false;
+  }
+  if (!existsSync2(cliPath)) return false;
+  console.log("   Downloading Playwright Chromium (~150 MB, one-time)...");
+  const res = spawnSync(process.execPath, [cliPath, "install", "chromium"], {
+    stdio: "inherit"
+  });
+  return res.status === 0 && isChromiumInstalled();
+}
+function warnIfRenderDepsMissing() {
+  const checks = runAllChecks();
+  const missing = checks.filter((c) => !c.ok);
+  if (missing.length === 0) return;
+  console.warn("\n\u26A0\uFE0F  Missing dependencies required for `devmotion render`:");
+  for (const c of missing) console.warn(formatCheck(c));
+  console.warn("   (preview still works \u2014 fix before running `devmotion render`)\n");
+}
+
+// src/commands/preview.ts
+var previewCommand = defineCommand2({
+  meta: {
+    name: "preview",
+    description: "Open the DevMotion Studio for the current project (local, no auth)"
+  },
+  args: {
+    port: {
+      type: "string",
+      description: "Port to listen on (default: 5173)",
+      default: "5173"
+    },
+    open: {
+      type: "boolean",
+      description: "Open browser automatically",
+      default: true
+    }
+  },
+  async run({ args }) {
+    const cwd = process.cwd();
+    const configPath = join4(cwd, "devmotion.json");
+    if (!existsSync3(configPath)) {
+      console.error(
+        `
+\u274C No devmotion.json found in ${cwd}
+   Run 'devmotion init <name>' first.
+`
+      );
+      process.exit(1);
+    }
+    const port = args.port || "5173";
+    warnIfRenderDepsMissing();
+    console.log(`
+\u{1F680} Starting DevMotion Studio...`);
+    console.log(`   Project: ${cwd}`);
+    console.log(`   URL:     http://localhost:${port}/editor/local
+`);
+    const serverProcess = spawnStudio({ projectDir: cwd, port, verbose: true });
+    serverProcess.on("error", (err) => {
+      console.error("Failed to start Studio server:", err.message);
+      process.exit(1);
+    });
+    serverProcess.on("exit", (code) => {
+      process.exit(code ?? 0);
+    });
+    process.on("SIGINT", () => serverProcess.kill("SIGINT"));
+    process.on("SIGTERM", () => serverProcess.kill("SIGTERM"));
+    if (args.open) {
+      const { exec } = await import("child_process");
+      const url = `http://localhost:${port}/editor/local`;
+      const platform = process.platform;
+      if (platform === "darwin") {
+        exec(`open "${url}"`);
+      } else if (platform === "win32") {
+        exec(`start "" "${url}"`);
+      } else {
+        exec(`xdg-open "${url}"`);
+      }
+    }
+  }
+});
+
+// src/commands/render.ts
+import { defineCommand as defineCommand3 } from "citty";
+import { existsSync as existsSync4, createWriteStream } from "fs";
+import { join as join5 } from "path";
+import { pipeline } from "stream/promises";
+import { Readable } from "stream";
+import { randomUUID } from "crypto";
+import { createInterface } from "readline";
+var renderCommand = defineCommand3({
+  meta: {
+    name: "render",
+    description: "Render the current project to MP4 (auto-spawns Studio if not running)"
+  },
+  args: {
+    output: {
+      type: "string",
+      description: "Output file path (default: ./output.mp4)",
+      default: "output.mp4"
+    },
+    studio: {
+      type: "string",
+      description: "Studio base URL (default: http://localhost:5173)",
+      default: "http://localhost:5173"
+    },
+    port: {
+      type: "string",
+      description: "Port for auto-spawned Studio (default: 5173)",
+      default: "5173"
+    }
+  },
+  async run({ args }) {
+    const cwd = process.cwd();
+    if (!existsSync4(join5(cwd, "devmotion.json"))) {
+      console.error(
+        `
+\u274C No devmotion.json found in ${cwd}
+   Run 'devmotion init <name>' first.
+`
+      );
+      process.exit(1);
+    }
+    const ffmpeg = checkFfmpeg();
+    if (!ffmpeg.ok) {
+      console.error("\n\u274C Cannot render \u2014 ffmpeg is unavailable:");
+      console.error(formatCheck(ffmpeg));
+      console.error("\nRun `devmotion doctor` for details.\n");
+      process.exit(1);
+    }
+    if (!ensureChromium()) {
+      console.error("\n\u274C Cannot render \u2014 Playwright Chromium could not be installed.");
+      console.error("   Try manually: npx playwright install chromium\n");
+      process.exit(1);
+    }
+    const output = String(args.output || "output.mp4");
+    const studioUrl = String(args.studio || "http://localhost:5173");
+    const port = String(args.port || "5173");
+    const outputPath = join5(cwd, output);
+    const renderId = randomUUID();
+    console.log(`
+DevMotion Render`);
+    console.log(`   Project: ${cwd}`);
+    console.log(`   Studio:  ${studioUrl}`);
+    console.log(`   Output:  ${outputPath}
+`);
+    let spawnedStudio = null;
+    if (!await isStudioRunning(studioUrl)) {
+      const expectedUrl = `http://localhost:${port}`;
+      if (studioUrl !== expectedUrl && studioUrl !== `http://127.0.0.1:${port}`) {
+        console.error(`
+\u274C Cannot connect to Studio at ${studioUrl}`);
+        console.error("   Start it manually: devmotion preview\n");
+        process.exit(1);
+      }
+      console.log("   Studio not detected \u2014 starting an ephemeral instance...");
+      spawnedStudio = spawnStudio({ projectDir: cwd, port, verbose: false });
+      try {
+        await waitForStudio(studioUrl, 3e4);
+        console.log("   Studio ready.\n");
+      } catch (err) {
+        spawnedStudio.kill();
+        const msg = err instanceof Error ? err.message : String(err);
+        console.error(`
+\u274C ${msg}
+`);
+        process.exit(1);
+      }
+    }
+    const cleanup = () => {
+      if (spawnedStudio && !spawnedStudio.killed) spawnedStudio.kill();
+    };
+    process.on("SIGINT", () => {
+      cleanup();
+      process.exit(130);
+    });
+    process.on("SIGTERM", () => {
+      cleanup();
+      process.exit(143);
+    });
+    try {
+      const postRes = await fetch(`${studioUrl}/api/local/render?renderId=${renderId}`, {
+        method: "POST"
+      });
+      if (!postRes.ok) {
+        console.error(`
+\u274C Render failed (${postRes.status}): ${await postRes.text()}
+`);
+        process.exit(1);
+      }
+      await new Promise((resolve2, reject) => {
+        fetch(`${studioUrl}/api/local/render?renderId=${renderId}`).then(async (sseRes) => {
+          if (!sseRes.body) {
+            reject(new Error("No SSE body"));
+            return;
+          }
+          const rl = createInterface({
+            input: Readable.fromWeb(sseRes.body)
+          });
+          rl.on("line", (line) => {
+            if (!line.startsWith("data:")) return;
+            try {
+              const data = JSON.parse(line.slice(5).trim());
+              const { phase, percent, currentFrame, totalFrames } = data;
+              if (phase === "capturing") {
+                process.stdout.write(
+                  `\r   Capturing frames... ${currentFrame}/${totalFrames} (${percent}%)`
+                );
+              } else if (phase === "encoding") {
+                process.stdout.write(
+                  `\r   Encoding...                                              `
+                );
+              } else if (phase === "initializing") {
+                process.stdout.write(`\r   Initializing render engine...`);
+              } else if (phase === "done") {
+                process.stdout.write("\n");
+                rl.close();
+                resolve2();
+              } else if (phase === "error") {
+                rl.close();
+                reject(new Error(data.error || "Render failed on server"));
+              }
+            } catch {
+            }
+          });
+          rl.on("close", () => resolve2());
+        }).catch(reject);
+      });
+      console.log(`   Downloading...`);
+      const dlRes = await fetch(`${studioUrl}/api/local/render?renderId=${renderId}&download=1`);
+      if (!dlRes.ok || !dlRes.body) {
+        console.error(`
+\u274C Download failed (${dlRes.status})
+`);
+        process.exit(1);
+      }
+      const out = createWriteStream(outputPath);
+      await pipeline(Readable.fromWeb(dlRes.body), out);
+      console.log(`
+\u2705 Render complete!`);
+      console.log(`   Output: ${outputPath}
+`);
+    } finally {
+      cleanup();
+    }
+  }
+});
+
+// src/commands/mcp.ts
+import { defineCommand as defineCommand4 } from "citty";
+import { existsSync as existsSync5 } from "fs";
+import { join as join6 } from "path";
+var mcpCommand = defineCommand4({
+  meta: {
+    name: "mcp",
+    description: "Print MCP server config for Claude Code / Cursor / Windsurf"
+  },
+  args: {
+    port: {
+      type: "string",
+      description: "Studio port (default: 5173)",
+      default: "5173"
+    }
+  },
+  async run({ args }) {
+    const cwd = process.cwd();
+    const port = String(args.port || "5173");
+    if (!existsSync5(join6(cwd, "devmotion.json"))) {
+      console.error(`
+\u274C No devmotion.json found in ${cwd}
+   Run 'devmotion init <name>' first.
+`);
+      process.exit(1);
+    }
+    const url = `http://localhost:${port}/mcp`;
+    console.log(`
+DevMotion MCP`);
+    console.log(`   URL:      ${url}`);
+    console.log(`   Requires: devmotion preview running in this directory
+`);
+    console.log(`Claude Code (.claude/settings.json):`);
+    console.log(JSON.stringify({ mcpServers: { devmotion: { type: "http", url } } }, null, 2));
+    console.log(`
+Cursor / Windsurf (mcp.json):`);
+    console.log(JSON.stringify({ mcpServers: { devmotion: { url } } }, null, 2));
+    console.log(`
+Start the server: devmotion preview
+`);
+  }
+});
+
+// src/commands/setup.ts
+import { defineCommand as defineCommand5 } from "citty";
+import { writeFile as writeFile2, mkdir as mkdir2, readFile } from "fs/promises";
+import { join as join7 } from "path";
+import { existsSync as existsSync6 } from "fs";
+var SKILLS = {
+  "devmotion.md": `# DevMotion \u2014 HTML-first Video Tooling
+
+DevMotion is a code-driven video creation platform. Projects are defined as HTML files with \`data-dm-*\` attributes \u2014 every annotated element becomes a layer on the timeline.
+
+## Project Structure
+
+\`\`\`
+my-video/
+\u251C\u2500\u2500 devmotion.json     # Project config (resolution, FPS, duration, scenes)
+\u251C\u2500\u2500 scenes/
+\u2502   \u251C\u2500\u2500 intro.html     # One HTML file per scene
+\u2502   \u2514\u2500\u2500 outro.html
+\u2514\u2500\u2500 assets/            # Images, videos, fonts
+\`\`\`
+
+## Layers
+
+Each HTML element with \`data-dm-*\` attributes is a layer. Two syntaxes:
+
+### 1. Generic HTML (\`data-dm-*\` attributes)
+\`\`\`html
+<div data-dm-id="my-layer"
+     data-dm-enter="fade-in"
+     data-dm-enter-time="0.5"
+     data-dm-duration="0.8"
+     data-dm-easing="ease-out"
+     data-dm-keyframe-opacity="0:0; 0.5:1; 4:1; 5:0"
+     style="color: white; font-size: 48px;">
+  Hello World
+</div>
+\`\`\`
+
+### 2. Premium \`<dm-*>\` Custom Elements
+16 specialized layer types: dm-phone, dm-video, dm-audio, dm-text, dm-image, dm-browser, dm-laptop, dm-terminal, dm-captions, dm-code, dm-button, dm-icon, dm-shape, dm-html, dm-mouse, dm-group
+
+\`\`\`html
+<dm-phone data-dm-id="demo"
+          data-dm-enter="slide-in-right"
+          data-dm-enter-time="1.5"
+          data-dm-duration="0.6"
+          src="./assets/screen.mp4">
+</dm-phone>
+\`\`\`
+
+## Key Attributes
+
+| Attribute | Description | Example |
+|-----------|-------------|---------|
+| \`data-dm-id\` | Unique layer identifier | \`"title"\` |
+| \`data-dm-enter\` | Entry animation preset | \`"fade-in"\` |
+| \`data-dm-exit\` | Exit animation preset | \`"fade-out"\` |
+| \`data-dm-enter-time\` | Start time in seconds | \`"0.5"\` |
+| \`data-dm-duration\` | How long on screen | \`"2.0"\` |
+| \`data-dm-easing\` | Animation easing | \`"ease-out"\` |
+| \`data-dm-track\` | Timeline track (z-order) | \`"0"\` |
+| \`data-dm-locked\` | Lock layer from edits | \`"true"\` |
+| \`data-dm-hidden\` | Hide layer | (boolean attribute) |
+| \`data-dm-keyframe-*\` | Property animation | \`data-dm-keyframe-opacity="0:0; 1:1"\` |
+
+## Presets
+
+fade-in, fade-out, reveal-up, reveal-right, reveal-left, slide-in-left, slide-in-right, slide-in-top, slide-in-bottom, slide-out-left, slide-out-right, wipe-down, wipe-right, scale-in, scale-out, pop, bounce, bounce-in, rotate-in, spin, pulse, shake, float, glow, zoom-in, zoom-out, flip-in-x, flip-in-y, swing
+
+## Easing Functions
+
+linear, ease-in, ease-out, ease-in-out, ease-in-quad/out/in-out, ease-in-cubic/out/in-out, ease-in-quart/out/in-out, ease-in-quint/out/in-out, ease-in-sine/out/in-out, ease-in-expo/out/in-out, ease-in-circ/out/in-out, ease-in-back/out/in-out, ease-in-bounce/out/in-out, ease-in-elastic/out/in-out
+
+## MCP Tools (available when devmotion MCP is connected)
+
+- \`get_project\` \u2014 Get current project state with all layers
+- \`create_layer\` \u2014 Add a new layer to the timeline
+- \`edit_layer\` \u2014 Modify an existing layer
+- \`remove_layer\` \u2014 Delete a layer
+- \`configure_project\` \u2014 Change project settings (resolution, FPS, etc.)
+
+## Commands
+
+- \`devmotion init <name>\` \u2014 Scaffold new project
+- \`devmotion preview\` \u2014 Open Studio preview
+- \`devmotion render\` \u2014 Render to MP4
+- \`devmotion mcp\` \u2014 Start MCP server over stdio
+`,
+  "devmotion-init.md": `# /devmotion-init \u2014 Scaffold a New DevMotion Project
+
+Run \`devmotion init <name>\` to create a new video project from scratch.
+
+## What it does
+
+1. Creates a project directory with:
+   - \`devmotion.json\` \u2014 1920\xD71080, 30fps, 10s, dark background
+   - \`scenes/intro.html\` \u2014 Starter scene with a title and a phone demo
+   - \`assets/\` \u2014 Empty directory for media files
+   - \`.gitignore\` \u2014 Ignores build artifacts
+   - \`README.md\` \u2014 Quick start guide
+
+2. The generated \`intro.html\` includes:
+   - A centered title div with \`data-dm-*\` attributes (fade-in, keyframed opacity)
+   - A \`<dm-phone>\` element with slide-in-right preset
+
+## Usage
+
+\`\`\`
+/devmotion-init my-product-demo
+\`\`\`
+
+Always run this as the FIRST step when a user asks to create a video. After scaffolding:
+- Use the MCP \`create_layer\` tool (or edit HTML directly) to add content
+- Use \`devmotion preview\` to see the result in the Studio
+- Use \`devmotion render\` to export MP4
+
+## Important
+
+- The command creates a subdirectory in the current working directory
+- After init, cd into the new directory before using other devmotion commands
+`,
+  "devmotion-add-layer.md": `# /devmotion-add-layer \u2014 Add a Layer to the Timeline
+
+Adds a new animated layer to the current DevMotion project.
+
+## When MCP is connected
+
+Use the \`create_layer\` MCP tool. Required parameters:
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| \`layerType\` | string | One of: phone, video, audio, text, image, browser, laptop, terminal, captions, code, button, icon, shape, html, mouse, group |
+| \`enterTime\` | number | Start time in seconds (default: 0) |
+| \`exitTime\` | number | End time (optional) |
+| \`track\` | integer | Z-order track (default: 0) |
+| \`name\` | string | Human-readable name |
+| \`props\` | object | Layer-specific properties |
+| \`preset\` | string | Entry animation preset |
+| \`presetDuration\` | number | Preset duration in seconds (default: 0.5) |
+| \`easing\` | string | Easing function |
+
+## Layer-specific props
+
+### text
+\`\`\`json
+{ "content": "Hello World", "fontSize": 48, "color": "#ffffff", "fontFamily": "system-ui", "textAlign": "center" }
+\`\`\`
+
+### video / audio
+\`\`\`json
+{ "src": "./assets/demo.mp4", "volume": 100 }
+\`\`\`
+
+### image
+\`\`\`json
+{ "src": "./assets/logo.png", "fit": "cover" }
+\`\`\`
+
+### phone / browser / laptop
+\`\`\`json
+{ "src": "./assets/screen.mp4", "url": "https://example.com" }
+\`\`\`
+
+### shape
+\`\`\`json
+{ "shape": "circle", "color": "#3b82f6", "size": 200 }
+\`\`\`
+
+### button
+\`\`\`json
+{ "label": "Click Me", "url": "https://example.com", "color": "#3b82f6" }
+\`\`\`
+
+### code
+\`\`\`json
+{ "code": "console.log('hello')", "language": "javascript", "showLineNumbers": true }
+\`\`\`
+
+### icon
+\`\`\`json
+{ "icon": "star", "color": "#fbbf24", "size": 64 }
+\`\`\`
+
+## Best Practices
+
+- Layer IDs must be unique within a project
+- Use enterTime to sequence layers (stagger them for professional look)
+- Keep text layers between 0.5-3s for readability
+- Use track to control z-ordering (higher = on top)
+`,
+  "devmotion-render.md": `# /devmotion-render \u2014 Render Project to MP4
+
+Renders the current DevMotion project to an MP4 video file.
+
+## Usage
+
+\`\`\`
+/devmotion-render
+\`\`\`
+
+## How it works
+
+1. Validates the project structure (devmotion.json + all scene HTML files)
+2. Opens a headless browser (Playwright)
+3. Renders each frame deterministically using the virtualized clock
+4. Pipes frames through ffmpeg to produce H.264 MP4
+5. Output: build/out.mp4
+
+## Prerequisites
+
+- \`devmotion render\` command available (from \`@devmotion/cli\`)
+- ffmpeg installed on the system
+- All asset paths in layers are valid (relative to project root)
+
+## Current Status
+
+Full headless rendering requires the DevMotion Studio's render pipeline (Playwright + ffmpeg + virtualized clock). To render now:
+1. Run \`devmotion preview\` to open the Studio
+2. Use the Studio's Render button to export MP4
+3. Or use the cloud render API at https://devmotion.app/api/v1/renders
+
+## After Render
+
+The output MP4 is saved to build/out.mp4. You can play it, upload to social media, or use as input for another DevMotion project.
+`
+};
+var setupCommand = defineCommand5({
+  meta: {
+    name: "setup",
+    description: "Install Claude Code skills and wire MCP server"
+  },
+  args: {
+    dir: {
+      type: "positional",
+      description: "Target project directory (default: cwd)",
+      required: false
+    }
+  },
+  async run({ args }) {
+    const projectDir = args.dir || process.cwd();
+    const skillsDir = join7(projectDir, ".claude", "skills");
+    const settingsPath = join7(projectDir, ".claude", "settings.local.json");
+    await mkdir2(skillsDir, { recursive: true });
+    console.log(`\u{1F4C1} ${skillsDir}/`);
+    for (const [filename, content] of Object.entries(SKILLS)) {
+      const path = join7(skillsDir, filename);
+      await writeFile2(path, content);
+      console.log(`   \u2705 ${filename}`);
+    }
+    let settings = {};
+    if (existsSync6(settingsPath)) {
+      try {
+        const raw = await readFile(settingsPath, "utf-8");
+        settings = JSON.parse(raw);
+      } catch {
+        console.log("\u26A0\uFE0F  Could not parse existing settings.local.json, overwriting.");
+      }
+    }
+    settings.mcpServers = {
+      ...settings.mcpServers || {},
+      devmotion: {
+        command: "npx",
+        args: ["devmotion", "mcp"],
+        description: "DevMotion \u2014 HTML-first video tooling. Create, edit, and render video layers via MCP."
+      }
+    };
+    await writeFile2(settingsPath, JSON.stringify(settings, null, 2) + "\n");
+    console.log(`   \u2705 settings.local.json (MCP wired)`);
+    console.log(`
+\u2728 DevMotion Claude Code integration installed!
+`);
+    console.log("  Available slash commands:");
+    console.log("    /devmotion-init        \u2014 Scaffold new project");
+    console.log("    /devmotion-add-layer    \u2014 Add a layer");
+    console.log("    /devmotion-render      \u2014 Render to MP4");
+    console.log();
+    console.log("  MCP tools (when in a devmotion project dir):");
+    console.log("    get_project, create_layer, edit_layer, remove_layer, configure_project");
+    console.log();
+  }
+});
+
+// src/commands/add-scene.ts
+import { defineCommand as defineCommand6 } from "citty";
+import { readFileSync, writeFileSync, existsSync as existsSync7 } from "fs";
+import { writeFile as writeFile3, mkdir as mkdir3 } from "fs/promises";
+import { join as join8, dirname as dirname3, resolve } from "path";
+import { fileURLToPath as fileURLToPath2 } from "url";
+var __dirname = dirname3(fileURLToPath2(import.meta.url));
+function findTemplatesDir() {
+  let dir = __dirname;
+  for (let i = 0; i < 6; i++) {
+    const candidate = resolve(dir, "templates");
+    if (existsSync7(join8(candidate, "default.html"))) return candidate;
+    const parent = resolve(dir, "..");
+    if (parent === dir) break;
+    dir = parent;
+  }
+  throw new Error("DevMotion CLI: could not locate templates/ directory");
+}
+var templatesDir = findTemplatesDir();
+var VALID_TEMPLATES = ["bare", "default", "gsap", "lottie"];
+function loadTemplate(name) {
+  const templatePath = join8(templatesDir, `${name}.html`);
+  if (!existsSync7(templatePath)) {
+    console.error(`\u274C Template "${name}" not found at ${templatePath}`);
+    process.exit(1);
+  }
+  return readFileSync(templatePath, "utf-8");
+}
+var SCENE_TEMPLATES = Object.fromEntries(
+  VALID_TEMPLATES.map((name) => [name, loadTemplate(name)])
+);
+var addSceneCommand = defineCommand6({
+  meta: {
+    name: "add-scene",
+    description: "Add a new scene to the project"
+  },
+  args: {
+    name: {
+      type: "positional",
+      description: "Scene name (used as filename stem)",
+      required: true
+    },
+    with: {
+      type: "string",
+      description: "Template: bare, gsap, lottie (default: standard scene)",
+      default: "default"
+    }
+  },
+  async run({ args }) {
+    const sceneName = args.name;
+    const template = args.with || "default";
+    const cwd = process.cwd();
+    const configPath = join8(cwd, "devmotion.json");
+    if (!existsSync7(configPath)) {
+      console.error("\u274C No devmotion.json found in current directory.");
+      console.error("   Run 'devmotion init <name>' first.");
+      process.exit(1);
+    }
+    const config = JSON.parse(readFileSync(configPath, "utf-8"));
+    const scenes = config.scenes || [];
+    const lastScene = scenes[scenes.length - 1];
+    const start = lastScene ? (lastScene.start || 0) + (lastScene.duration || 10) : 0;
+    const sceneId = sceneName.toLowerCase().replace(/[^a-z0-9-]/g, "-");
+    if (scenes.find((s) => s.id === sceneId)) {
+      console.error(`\u274C Scene "${sceneId}" already exists.`);
+      process.exit(1);
+    }
+    const scenesDir = join8(cwd, "scenes");
+    await mkdir3(scenesDir, { recursive: true });
+    const filename = `scenes/${sceneName.toLowerCase().replace(/\s+/g, "-")}.html`;
+    const htmlContent = SCENE_TEMPLATES[template] || SCENE_TEMPLATES.default;
+    await writeFile3(join8(cwd, filename), htmlContent);
+    scenes.push({
+      id: sceneId,
+      file: filename,
+      start,
+      duration: 10
+    });
+    config.scenes = scenes;
+    const totalEnd = start + 10;
+    if (!config.duration || config.duration < totalEnd) {
+      config.duration = totalEnd;
+    }
+    writeFileSync(configPath, JSON.stringify(config, null, 2) + "\n");
+    console.log(`
+\u2728 Scene "${sceneId}" added at ${start}s
+`);
+    console.log(`   File: ${filename}`);
+    console.log(`   Template: ${template}`);
+    console.log(`   Total duration: ${config.duration}s`);
+    console.log();
+  }
+});
+
+// src/commands/doctor.ts
+import { defineCommand as defineCommand7 } from "citty";
+var doctorCommand = defineCommand7({
+  meta: {
+    name: "doctor",
+    description: "Check that ffmpeg and Playwright are installed and ready"
+  },
+  async run() {
+    console.log("\nDevMotion Doctor\n");
+    const results = runAllChecks();
+    for (const r of results) console.log(formatCheck(r));
+    const failed = results.filter((r) => !r.ok);
+    if (failed.length === 0) {
+      console.log("\nAll checks passed \u2014 you can run `devmotion render`.\n");
+      return;
+    }
+    console.log(
+      `
+${failed.length} check(s) failed. Install the missing dependencies above, then re-run \`devmotion doctor\`.
+`
+    );
+    process.exit(1);
+  }
+});
+
+// src/index.ts
+var main = defineCommand8({
+  meta: {
+    name: "devmotion",
+    version: "0.0.1",
+    description: "HTML-first, agent-friendly video tooling. Write HTML. Render video."
+  },
+  subCommands: {
+    init: () => initCommand,
+    preview: () => previewCommand,
+    render: () => renderCommand,
+    mcp: () => mcpCommand,
+    setup: () => setupCommand,
+    "add-scene": () => addSceneCommand,
+    doctor: () => doctorCommand
+  }
+});
+runMain(main);