@a-company/atelier 0.29.0 → 0.37.0

package/dist/cli.js

@@ -1,16 +1,25 @@
 #!/usr/bin/env node
 import {
+  applyRecipeCommand,
   assetsCommand,
+  captionsCommand,
+  carouselCommand,
+  exportImageCommand,
   exportLottieCommand,
   exportSvgCommand,
   infoCommand,
   parseAtelier,
+  recipeCommand,
   renderCommand,
+  serializeAtelier,
   stillCommand,
+  transcribeCommand,
+  transcriptCommand,
+  trimCommand,
   validateCommand,
   validateVideoLayer,
   variablesCommand
-} from "./chunk-JV7RGETS.js";
+} from "./chunk-5QQESXI6.js";
 import {
   validateAllDeltas
 } from "./chunk-JPZ4F4PW.js";
@@ -115,11 +124,19 @@ function lintCommand(program2) {
 }
 
 // src/commands/studio.ts
-import { resolve as resolve2, join, relative, dirname } from "path";
-import { mkdirSync, writeFileSync, rmSync, readFileSync as readFileSync2, readdirSync, statSync, realpathSync, symlinkSync, existsSync } from "fs";
+import { resolve as resolve2, join, relative, dirname, sep } from "path";
+import { mkdirSync, writeFileSync, rmSync, readFileSync as readFileSync2, readdirSync, statSync, realpathSync, symlinkSync, existsSync, copyFileSync } from "fs";
 import { tmpdir } from "os";
 import { randomBytes } from "crypto";
 import { exec } from "child_process";
+import {
+  DocumentStore,
+  WebSocketServerTransport,
+  createServer as createMcpServer,
+  BRIDGE_PROTOCOL_VERSION,
+  isBridgeEnvelope
+} from "@a-company/atelier-mcp";
+import { WebSocketServer } from "ws";
 function findAtelierFiles(dir, base = dir) {
   const results = [];
   let entries;
@@ -146,9 +163,119 @@ function findAtelierFiles(dir, base = dir) {
   return results.sort();
 }
 function isSafePath(filePath) {
-  if (!filePath || filePath.includes("..") || filePath.startsWith("/")) return false;
-  const resolved = resolve2(process.cwd(), filePath);
-  return resolved.startsWith(process.cwd());
+  if (!filePath || filePath.startsWith("/")) return false;
+  const cwd = process.cwd();
+  const resolved = resolve2(cwd, filePath);
+  return resolved === cwd || resolved.startsWith(cwd + sep);
+}
+function writeFileEnsuringDir(absPath, body) {
+  mkdirSync(dirname(absPath), { recursive: true });
+  writeFileSync(absPath, body, "utf-8");
+}
+function isAllowedOrigin(origin, port) {
+  if (!origin) return false;
+  return origin === `http://localhost:${port}` || origin === `http://127.0.0.1:${port}`;
+}
+function isAllowedMcpOrigin(origin, port) {
+  return origin === void 0 || isAllowedOrigin(origin, port);
+}
+function shouldBroadcastMutation(source) {
+  return source === "llm";
+}
+function attachBridgeClient(ws, state, clients, loadDocFromDisk, persistHumanPatch) {
+  clients.add(ws);
+  const clientId = randomBytes(6).toString("hex");
+  const send = (env) => {
+    if (ws.readyState !== ws.OPEN) return;
+    ws.send(JSON.stringify(env));
+  };
+  send({ type: "hello", clientId, protocolVersion: BRIDGE_PROTOCOL_VERSION });
+  if (state.currentDocId) {
+    const existing = state.store.get(state.currentDocId);
+    if (existing) {
+      send({ type: "doc:loaded", documentId: state.currentDocId, doc: existing });
+    } else {
+      const raw = loadDocFromDisk(state.currentDocId);
+      if (raw) {
+        const parsed = parseAtelier(raw);
+        if (parsed.success) {
+          state.store.set(state.currentDocId, parsed.data, "system");
+          send({ type: "doc:loaded", documentId: state.currentDocId, doc: parsed.data });
+        }
+      }
+    }
+  }
+  const onMessage = (data) => {
+    let text;
+    if (typeof data === "string") text = data;
+    else if (data instanceof Buffer) text = data.toString("utf-8");
+    else if (Array.isArray(data)) text = Buffer.concat(data).toString("utf-8");
+    else text = String(data);
+    let env;
+    try {
+      env = JSON.parse(text);
+    } catch {
+      send({ type: "error", code: "parse_error", message: "invalid JSON" });
+      return;
+    }
+    if (!isBridgeEnvelope(env)) {
+      send({ type: "error", code: "invalid_envelope", message: "unknown envelope shape" });
+      return;
+    }
+    if (env.type === "doc:patch") {
+      try {
+        state.store.set(env.documentId, env.doc, "human");
+        state.currentDocId = env.documentId;
+        persistHumanPatch(env.documentId, env.doc);
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        send({ type: "error", code: "persist_failed", message: msg, opId: env.opId });
+      }
+      return;
+    }
+    if (env.type === "doc:load") {
+      const existing = state.store.get(env.documentId);
+      if (existing) {
+        send({ type: "doc:loaded", documentId: env.documentId, doc: existing });
+        return;
+      }
+      const raw = loadDocFromDisk(env.documentId);
+      if (raw) {
+        const parsed = parseAtelier(raw);
+        if (parsed.success) {
+          state.store.set(env.documentId, parsed.data, "system");
+          send({ type: "doc:loaded", documentId: env.documentId, doc: parsed.data });
+          return;
+        }
+      }
+      send({ type: "error", code: "not_found", message: `document ${env.documentId} not found` });
+      return;
+    }
+  };
+  const onClose = () => {
+    clients.delete(ws);
+  };
+  ws.on("message", onMessage);
+  ws.on("close", onClose);
+  ws.on("error", onClose);
+  return () => {
+    clients.delete(ws);
+    try {
+      ws.close();
+    } catch {
+    }
+  };
+}
+function broadcastToBridge(clients, envelope) {
+  const payload = JSON.stringify(envelope);
+  for (const ws of clients) {
+    if (ws.readyState === ws.OPEN) {
+      try {
+        ws.send(payload);
+      } catch {
+      }
+    }
+  }
 }
 function getInlineHTML() {
   return `<!DOCTYPE html>
@@ -167,431 +294,59 @@ function getInlineHTML() {
   </body>
 </html>`;
 }
-function getInlineApp(initialFile) {
+function getInlineApp(initialFile, cliPackageDir) {
   const initialFileStr = initialFile ? JSON.stringify(initialFile) : "null";
-  return `import { AtelierStudio, exportDocument, ImageCache } from "@a-company/atelier-studio";
-import "@a-company/atelier-studio/styles.css";
-import { parseAtelier, serializeAtelier } from "@a-company/atelier-schema";
-
-// \u2500\u2500 Types \u2500\u2500
-interface FileEntry {
-  path: string;
-  name: string;
-  folder: string;
-}
-
-// \u2500\u2500 State \u2500\u2500
-let studio: AtelierStudio | null = null;
-let currentFile: string | null = null;
-let files: FileEntry[] = [];
-let saveTimeout: ReturnType<typeof setTimeout> | null = null;
-
-// \u2500\u2500 API helpers \u2500\u2500
-async function fetchFiles(): Promise<FileEntry[]> {
-  const res = await fetch("/api/files");
-  return res.json();
-}
-
-async function fetchFileContent(path: string): Promise<string> {
-  const res = await fetch("/api/file?path=" + encodeURIComponent(path));
-  return res.text();
-}
-
-async function saveFileContent(path: string, content: string): Promise<void> {
-  await fetch("/api/file?path=" + encodeURIComponent(path), {
-    method: "POST",
-    headers: { "Content-Type": "text/plain" },
-    body: content,
-  });
-}
-
-async function saveExportBlob(path: string, blob: Blob): Promise<void> {
-  const buf = await blob.arrayBuffer();
-  await fetch("/api/export?path=" + encodeURIComponent(path), {
-    method: "POST",
-    headers: { "Content-Type": "application/octet-stream" },
-    body: buf,
-  });
+  const appModulePath = join(cliPackageDir, "src", "web", "inline-app.ts").split(sep).join("/");
+  return `import { bootStudioApp } from ${JSON.stringify(appModulePath)};
+bootStudioApp({ initialFile: ${initialFileStr} });
+`;
 }
-
-async function exportAll(format: "gif" | "mp4" | "webm"): Promise<void> {
-  if (files.length === 0) return;
-
-  // Create progress overlay
-  const overlay = document.createElement("div");
-  overlay.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,0.75);display:flex;align-items:center;justify-content:center;z-index:10000";
-  const card = document.createElement("div");
-  card.style.cssText = "background:#333;border:1px solid #4A4A4A;border-radius:8px;padding:32px 40px;min-width:360px;color:#F5F0EB;font-family:'Cormorant Garamond',Georgia,serif";
-  overlay.appendChild(card);
-  document.body.appendChild(overlay);
-
-  const title = document.createElement("div");
-  title.style.cssText = "font-size:18px;margin-bottom:16px;font-weight:600";
-  title.textContent = "Exporting All Files\u2026";
-  card.appendChild(title);
-
-  const fileLabel = document.createElement("div");
-  fileLabel.style.cssText = "font-size:13px;color:#A89F95;margin-bottom:8px;font-family:'SF Mono','Fira Code',monospace";
-  card.appendChild(fileLabel);
-
-  const progress = document.createElement("progress");
-  progress.style.cssText = "width:100%;height:6px;appearance:none;-webkit-appearance:none";
-  progress.max = files.length;
-  progress.value = 0;
-  card.appendChild(progress);
-
-  const statusText = document.createElement("div");
-  statusText.style.cssText = "font-size:12px;color:#A89F95;margin-top:8px";
-  card.appendChild(statusText);
-
-  let exported = 0;
-  let errors = 0;
-
-  for (const file of files) {
-    fileLabel.textContent = file.path;
-    statusText.textContent = (exported + errors + 1) + " / " + files.length;
-
-    try {
-      const content = await fetchFileContent(file.path);
-      const result = parseAtelier(content);
-      if (!result.success) {
-        errors++;
-        progress.value = exported + errors;
-        continue;
-      }
-
-      const doc = result.data;
-      const w = doc.canvas.width;
-      const h = doc.canvas.height;
-      const canvas = document.createElement("canvas");
-      canvas.width = w;
-      canvas.height = h;
-      const imageCache = new ImageCache();
-
-      const exportResult = await exportDocument(doc, canvas, imageCache, {
-        format,
-        onProgress: ({ percent }) => {
-          statusText.textContent = (exported + errors + 1) + " / " + files.length + " \u2014 " + percent + "%";
-        },
-      });
-
-      // Save alongside the source file: e.g. "dir/my-anim.atelier" \u2192 "dir/my-anim.gif"
-      const outPath = file.path.replace(/\\.atelier$/, "." + format);
-      await saveExportBlob(outPath, exportResult.blob);
-      exported++;
-    } catch (e) {
-      console.error("Export failed:", file.path, e);
-      errors++;
+function resolveCliPackageDir() {
+  const here = dirname(new URL(import.meta.url).pathname);
+  const candidates = [
+    resolve2(here, ".."),
+    resolve2(here, "..", "..")
+  ];
+  for (const c of candidates) {
+    if (existsSync(join(c, "package.json"))) {
+      return c;
     }
-    progress.value = exported + errors;
   }
-
-  // Done
-  title.textContent = "Export Complete";
-  fileLabel.textContent = "";
-  statusText.textContent = exported + " exported" + (errors > 0 ? ", " + errors + " failed" : "");
-  if (errors > 0) console.warn("Export All finished with " + errors + " error(s). Check console for details.");
-
-  const closeBtn = document.createElement("button");
-  closeBtn.style.cssText = "margin-top:16px;padding:6px 20px;background:#3D3D3D;color:#F5F0EB;border:1px solid #4A4A4A;border-radius:4px;cursor:pointer;font-family:inherit;font-size:13px";
-  closeBtn.textContent = "Close";
-  closeBtn.addEventListener("click", () => document.body.removeChild(overlay));
-  card.appendChild(closeBtn);
+  return candidates[0];
 }
-
-// \u2500\u2500 Theme (matches branded theme from showcase) \u2500\u2500
-const theme = {
-  bg: "#2C2C2C",
-  bgSecondary: "#333333",
-  bgTertiary: "#3D3D3D",
-  text: "#F5F0EB",
-  textMuted: "#A89F95",
-  textAccent: "#F5F0EB",
-  border: "#4A4A4A",
-  buttonBg: "#3D3D3D",
-  buttonHover: "#4A4A4A",
-  buttonActive: "#555555",
-  accent: "#C75B39",
-  accentHover: "#D4724E",
-  sliderTrack: "#4A4A4A",
-  sliderThumb: "#C75B39",
-  fontFamily: "'Cormorant Garamond', Georgia, serif",
-  fontMono: "'SF Mono', 'Fira Code', monospace",
-  canvasShadow: "0 4px 60px rgba(199, 91, 57, 0.12), 0 0 40px rgba(0,0,0,0.4)",
-};
-
-// \u2500\u2500 Styles \u2500\u2500
-const style = document.createElement("style");
-style.textContent = \`
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  html, body { height: 100%; overflow: hidden; background: #2C2C2C; color: #F5F0EB; }
-  body { font-family: 'Cormorant Garamond', Georgia, serif; }
-  #studio { display: flex; height: 100vh; width: 100vw; }
-
-  .sidebar {
-    width: 260px;
-    min-width: 260px;
-    background: #333333;
-    border-right: 1px solid #4A4A4A;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-  .sidebar__header {
-    padding: 16px 20px;
-    border-bottom: 1px solid #4A4A4A;
-    font-size: 11px;
-    font-weight: 600;
-    letter-spacing: 2px;
-    text-transform: uppercase;
-    color: #A89F95;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  .sidebar__header span {
-    color: #C75B39;
-    font-size: 13px;
-  }
-  .sidebar__list {
-    flex: 1;
-    overflow-y: auto;
-    padding: 8px 0;
-  }
-  .sidebar__list::-webkit-scrollbar { width: 6px; }
-  .sidebar__list::-webkit-scrollbar-track { background: transparent; }
-  .sidebar__list::-webkit-scrollbar-thumb { background: #4A4A4A; border-radius: 3px; }
-
-  .sidebar__folder {
-    padding: 10px 20px 4px;
-    font-size: 10px;
-    font-weight: 600;
-    letter-spacing: 1.5px;
-    text-transform: uppercase;
-    color: #A89F95;
-  }
-  .sidebar__item {
-    padding: 8px 20px 8px 28px;
-    font-size: 13px;
-    cursor: pointer;
-    color: #A89F95;
-    transition: background 0.15s, color 0.15s;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-family: 'SF Mono', 'Fira Code', monospace;
-    font-size: 11.5px;
-  }
-  .sidebar__item:hover { background: #363636; color: #F5F0EB; }
-  .sidebar__item--active {
-    background: rgba(199, 91, 57, 0.12) !important;
-    color: #C75B39 !important;
-  }
-
-  .main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-  .main__status {
-    height: 32px;
-    min-height: 32px;
-    display: flex;
-    align-items: center;
-    padding: 0 16px;
-    background: #333333;
-    border-bottom: 1px solid #4A4A4A;
-    font-size: 11px;
-    color: #A89F95;
-    font-family: 'SF Mono', 'Fira Code', monospace;
-    gap: 12px;
-  }
-  .main__status .save-indicator {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    margin-left: auto;
-    transition: opacity 0.3s;
-  }
-  .main__status .save-indicator--saving { color: #C75B39; }
-  .main__status .save-indicator--saved { color: #6B8E6B; }
-  .main__editor {
-    flex: 1;
-    overflow: hidden;
-  }
-  .main__empty {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #A89F95;
-    font-size: 18px;
+function scaffoldWelcomeIfEmpty(cwd, cliPackageDir) {
+  const existing = findAtelierFiles(cwd);
+  if (existing.length > 0) return null;
+  const templatesDir = join(cliPackageDir, "templates");
+  const welcomeSrc = join(templatesDir, "welcome.atelier");
+  if (!existsSync(welcomeSrc)) return null;
+  const welcomeDest = join(cwd, "welcome.atelier");
+  if (existsSync(welcomeDest)) return null;
+  try {
+    copyFileSync(welcomeSrc, welcomeDest);
+  } catch {
+    return null;
   }
-\`;
-document.head.appendChild(style);
-
-// \u2500\u2500 Build UI \u2500\u2500
-const root = document.getElementById("studio")!;
-const sidebar = document.createElement("div");
-sidebar.className = "sidebar";
-
-const sidebarHeader = document.createElement("div");
-sidebarHeader.className = "sidebar__header";
-sidebarHeader.innerHTML = '<span>&#9670;</span> ATELIER STUDIO';
-sidebar.appendChild(sidebarHeader);
-
-const sidebarList = document.createElement("div");
-sidebarList.className = "sidebar__list";
-sidebar.appendChild(sidebarList);
-
-const sidebarFooter = document.createElement("div");
-sidebarFooter.style.cssText = "padding:12px 16px;border-top:1px solid #4A4A4A;display:flex;gap:8px;align-items:center";
-const exportAllSelect = document.createElement("select");
-exportAllSelect.style.cssText = "flex:1;background:#3D3D3D;color:#F5F0EB;border:1px solid #4A4A4A;border-radius:4px;padding:4px 8px;font-size:11px;font-family:'SF Mono','Fira Code',monospace;cursor:pointer";
-for (const [val, label] of [["gif","GIF"],["mp4","MP4"],["webm","WebM"]] as const) {
-  const o = document.createElement("option");
-  o.value = val;
-  o.textContent = label;
-  exportAllSelect.appendChild(o);
-}
-sidebarFooter.appendChild(exportAllSelect);
-const exportAllBtn = document.createElement("button");
-exportAllBtn.style.cssText = "background:#C75B39;color:#F5F0EB;border:none;border-radius:4px;padding:5px 12px;font-size:11px;font-family:inherit;cursor:pointer;white-space:nowrap";
-exportAllBtn.textContent = "Export All";
-exportAllBtn.addEventListener("click", () => {
-  exportAll(exportAllSelect.value as "gif" | "mp4" | "webm");
-});
-sidebarFooter.appendChild(exportAllBtn);
-sidebar.appendChild(sidebarFooter);
-
-const main = document.createElement("div");
-main.className = "main";
-
-const statusBar = document.createElement("div");
-statusBar.className = "main__status";
-main.appendChild(statusBar);
-
-const editorContainer = document.createElement("div");
-editorContainer.className = "main__editor";
-main.appendChild(editorContainer);
-
-root.appendChild(sidebar);
-root.appendChild(main);
-
-// \u2500\u2500 File list rendering \u2500\u2500
-function renderFileList(): void {
-  sidebarList.innerHTML = "";
-  let lastFolder = "";
-
-  for (const file of files) {
-    if (file.folder && file.folder !== lastFolder) {
-      lastFolder = file.folder;
-      const folder = document.createElement("div");
-      folder.className = "sidebar__folder";
-      folder.textContent = file.folder;
-      sidebarList.appendChild(folder);
+  const bgSrc = join(templatesDir, "welcome-bg.png");
+  if (existsSync(bgSrc)) {
+    const bgDest = join(cwd, "welcome-bg.png");
+    if (!existsSync(bgDest)) {
+      try {
+        copyFileSync(bgSrc, bgDest);
+      } catch {
+      }
     }
-
-    const item = document.createElement("div");
-    item.className = "sidebar__item" + (file.path === currentFile ? " sidebar__item--active" : "");
-    item.textContent = file.name;
-    item.title = file.path;
-    item.addEventListener("click", () => loadFile(file.path));
-    sidebarList.appendChild(item);
   }
+  return "welcome.atelier";
 }
-
-// \u2500\u2500 Load a file into the studio \u2500\u2500
-async function loadFile(path: string): Promise<void> {
-  currentFile = path;
-  renderFileList();
-
-  const content = await fetchFileContent(path);
-  const result = parseAtelier(content);
-
-  if (!result.success) {
-    editorContainer.innerHTML = "";
-    const err = document.createElement("div");
-    err.className = "main__empty";
-    err.style.flexDirection = "column";
-    err.style.gap = "8px";
-    err.innerHTML = '<div style="color:#C75B39">Parse Error</div><div style="font-size:13px;font-family:monospace">' +
-      result.errors.map(e => e.path + ": " + e.message).join("<br>") + "</div>";
-    editorContainer.appendChild(err);
-    return;
-  }
-
-  statusBar.innerHTML = '<span>' + path + '</span><span class="save-indicator save-indicator--saved">&#10003; saved</span>';
-
-  if (studio) {
-    studio.destroy();
-    studio = null;
-  }
-
-  // Set filename for export downloads (strip path and .atelier extension)
-  const baseName = path.split("/").pop()?.replace(/\\.atelier$/, "") || null;
-
-  studio = new AtelierStudio(editorContainer, {
-    mode: "full",
-    initialTab: "yaml",
-    allowSave: true,
-    onDocumentChange: (doc) => {
-      // Auto-save with debounce
-      const indicator = statusBar.querySelector(".save-indicator");
-      if (indicator) {
-        indicator.className = "save-indicator save-indicator--saving";
-        indicator.innerHTML = "&#9679; saving...";
-      }
-
-      if (saveTimeout) clearTimeout(saveTimeout);
-      saveTimeout = setTimeout(async () => {
-        if (!currentFile) return;
-        const yaml = serializeAtelier(doc);
-        await saveFileContent(currentFile, yaml);
-        const ind = statusBar.querySelector(".save-indicator");
-        if (ind) {
-          ind.className = "save-indicator save-indicator--saved";
-          ind.innerHTML = "&#10003; saved";
-        }
-      }, 800);
-    },
-  });
-  studio.setTheme(theme);
-  studio.setFilename(baseName);
-  studio.loadDocument(result.data);
-}
-
-// \u2500\u2500 Boot \u2500\u2500
-async function boot(): Promise<void> {
-  files = await fetchFiles();
-
-  if (files.length === 0) {
-    editorContainer.innerHTML = "";
-    const empty = document.createElement("div");
-    empty.className = "main__empty";
-    empty.textContent = "No .atelier files found in this directory";
-    editorContainer.appendChild(empty);
-    statusBar.textContent = "No files";
-    renderFileList();
-    return;
-  }
-
-  renderFileList();
-
-  const initialFile = ${initialFileStr};
-  const target = initialFile
-    ? files.find(f => f.path === initialFile || f.path.endsWith(initialFile))
-    : files[0];
-
-  if (target) {
-    await loadFile(target.path);
+function readCliVersion(cliPackageDir) {
+  try {
+    const pkg = JSON.parse(readFileSync2(join(cliPackageDir, "package.json"), "utf-8"));
+    return typeof pkg.version === "string" ? pkg.version : "unknown";
+  } catch {
+    return "unknown";
   }
 }
-
-boot();
-`;
-}
 function studioCommand(program2) {
   program2.command("studio [file]").description("Launch the browser-based Atelier editor").option("-p, --port <number>", "Port to serve on", "4321").option("--no-open", "Don't auto-open browser").action(
     async (file, options) => {
@@ -601,13 +356,20 @@ function studioCommand(program2) {
         process.exit(1);
       }
       const cwd = process.cwd();
-      const cliPackageDir = resolve2(dirname(new URL(import.meta.url).pathname), "..");
+      const cliPackageDir = resolveCliPackageDir();
+      const version = readCliVersion(cliPackageDir);
+      const scaffolded = scaffoldWelcomeIfEmpty(cwd, cliPackageDir);
+      console.log("");
+      console.log(`  Atelier Studio \xB7 v${version}`);
+      if (scaffolded) {
+        console.log(`   Scaffolded ${scaffolded} \u2014 opening\u2026`);
+      }
       const tmpId = randomBytes(4).toString("hex");
       const tmpDirRaw = join(tmpdir(), `atelier-studio-${tmpId}`);
       mkdirSync(tmpDirRaw, { recursive: true });
       const tmpDir = realpathSync(tmpDirRaw);
       writeFileSync(join(tmpDir, "index.html"), getInlineHTML());
-      writeFileSync(join(tmpDir, "main.ts"), getInlineApp(file ?? null));
+      writeFileSync(join(tmpDir, "main.ts"), getInlineApp(file ?? null, cliPackageDir));
       const cliNodeModules = join(cliPackageDir, "node_modules");
       if (existsSync(cliNodeModules)) {
         try {
@@ -615,7 +377,6 @@ function studioCommand(program2) {
         } catch {
         }
       }
-      console.log(`Starting Atelier Studio...`);
       console.log(`  Working directory: ${cwd}`);
       let vite;
       try {
@@ -626,9 +387,42 @@ function studioCommand(program2) {
         process.exit(1);
         return;
       }
+      const HOSTNAME = "127.0.0.1";
+      const bridgeState = {
+        store: new DocumentStore(),
+        currentDocId: null
+      };
+      const bridgeClients = /* @__PURE__ */ new Set();
+      const loadDocFromDisk = (docId) => {
+        if (!isSafePath(docId)) return null;
+        try {
+          return readFileSync2(resolve2(cwd, docId), "utf-8");
+        } catch {
+          return null;
+        }
+      };
+      const persistHumanPatch = (docId, doc) => {
+        if (!isSafePath(docId)) return;
+        writeFileEnsuringDir(resolve2(cwd, docId), serializeAtelier(doc));
+      };
+      bridgeState.store.onChange((id, doc, source) => {
+        if (!shouldBroadcastMutation(source)) return;
+        if (doc === null) return;
+        try {
+          persistHumanPatch(id, doc);
+        } catch {
+        }
+        broadcastToBridge(bridgeClients, {
+          type: "llm:mutation",
+          documentId: id,
+          doc,
+          source
+        });
+      });
       const server = await vite.createServer({
         root: tmpDir,
         server: {
+          host: HOSTNAME,
           port,
           strictPort: false,
           fs: {
@@ -639,8 +433,21 @@ function studioCommand(program2) {
           {
             name: "atelier-api",
             configureServer(server2) {
+              const allowedOrigins = /* @__PURE__ */ new Set([
+                `http://localhost:${port}`,
+                `http://127.0.0.1:${port}`
+              ]);
+              const MUTATING = /* @__PURE__ */ new Set(["POST", "PUT", "DELETE", "PATCH"]);
               server2.middlewares.use((req, res, next) => {
-                const url2 = new URL(req.url ?? "/", `http://localhost:${port}`);
+                const url2 = new URL(req.url ?? "/", `http://${HOSTNAME}:${port}`);
+                if (req.method && MUTATING.has(req.method) && url2.pathname.startsWith("/api/")) {
+                  const origin = req.headers.origin;
+                  if (!origin || !allowedOrigins.has(origin)) {
+                    res.statusCode = 403;
+                    res.end("Forbidden: cross-origin mutating request rejected");
+                    return;
+                  }
+                }
                 if (url2.pathname === "/api/files") {
                   const atelierFiles2 = findAtelierFiles(cwd);
                   const entries = atelierFiles2.map((p) => {
@@ -666,6 +473,11 @@ function studioCommand(program2) {
                   if (req.method === "GET") {
                     try {
                       const content = readFileSync2(absPath, "utf-8");
+                      const parsed = parseAtelier(content);
+                      if (parsed.success) {
+                        bridgeState.store.set(filePath, parsed.data, "system");
+                        bridgeState.currentDocId = filePath;
+                      }
                       res.setHeader("Content-Type", "text/plain");
                       res.end(content);
                     } catch {
@@ -681,11 +493,17 @@ function studioCommand(program2) {
                     });
                     req.on("end", () => {
                       try {
-                        writeFileSync(absPath, body, "utf-8");
+                        writeFileEnsuringDir(absPath, body);
+                        const parsed = parseAtelier(body);
+                        if (parsed.success) {
+                          bridgeState.store.set(filePath, parsed.data, "human");
+                          bridgeState.currentDocId = filePath;
+                        }
                         res.end("OK");
-                      } catch {
+                      } catch (e) {
+                        const msg = e instanceof Error ? e.message : String(e);
                         res.statusCode = 500;
-                        res.end("Write failed");
+                        res.end(msg);
                       }
                     });
                     return;
@@ -708,9 +526,10 @@ function studioCommand(program2) {
                       mkdirSync(dirname(absPath), { recursive: true });
                       writeFileSync(absPath, Buffer.concat(chunks));
                       res.end("OK");
-                    } catch {
+                    } catch (e) {
+                      const msg = e instanceof Error ? e.message : String(e);
                       res.statusCode = 500;
-                      res.end("Write failed");
+                      res.end(msg);
                     }
                   });
                   return;
@@ -728,6 +547,51 @@ function studioCommand(program2) {
         logLevel: "warn"
       });
       await server.listen();
+      const httpServer = server.httpServer;
+      if (httpServer) {
+        const wssBridge = new WebSocketServer({ noServer: true });
+        const wssMcp = new WebSocketServer({ noServer: true });
+        httpServer.on("upgrade", (req, socket, head) => {
+          const url2 = new URL(req.url ?? "/", `http://${HOSTNAME}:${port}`);
+          if (url2.pathname !== "/bridge" && url2.pathname !== "/mcp") return;
+          const origin = req.headers.origin;
+          const originOk = url2.pathname === "/mcp" ? isAllowedMcpOrigin(origin, port) : isAllowedOrigin(origin, port);
+          if (!originOk) {
+            socket.write("HTTP/1.1 403 Forbidden\r\n\r\n");
+            socket.destroy();
+            return;
+          }
+          if (url2.pathname === "/bridge") {
+            wssBridge.handleUpgrade(req, socket, head, (ws) => {
+              wssBridge.emit("connection", ws, req);
+            });
+            return;
+          }
+          wssMcp.handleUpgrade(req, socket, head, (ws) => {
+            wssMcp.emit("connection", ws, req);
+          });
+        });
+        wssBridge.on("connection", (ws) => {
+          attachBridgeClient(
+            ws,
+            bridgeState,
+            bridgeClients,
+            loadDocFromDisk,
+            persistHumanPatch
+          );
+        });
+        wssMcp.on("connection", (ws) => {
+          const { server: mcpServer } = createMcpServer(bridgeState.store);
+          const transport = new WebSocketServerTransport(ws);
+          mcpServer.connect(transport).catch((err) => {
+            console.error("MCP-over-WS connect failed:", err);
+            try {
+              ws.close();
+            } catch {
+            }
+          });
+        });
+      }
       const resolvedUrl = server.resolvedUrls?.local[0] ?? `http://localhost:${port}`;
       const url = resolvedUrl;
       console.log(`  Server running at: ${url}`);
@@ -761,11 +625,19 @@ var program = new Command();
 program.name("atelier").description("Atelier animation CLI").version(createRequire(import.meta.url)("../package.json").version);
 validateCommand(program);
 lintCommand(program);
+trimCommand(program);
+transcribeCommand(program);
+transcriptCommand(program);
+captionsCommand(program);
+recipeCommand(program);
+applyRecipeCommand(program);
+carouselCommand(program);
 infoCommand(program);
 stillCommand(program);
 renderCommand(program);
 exportSvgCommand(program);
 exportLottieCommand(program);
+exportImageCommand(program);
 assetsCommand(program);
 variablesCommand(program);
 studioCommand(program);