creator-editing-studio 1.3.8 → 1.4.1

package/template/package.json

@@ -15,6 +15,7 @@
     "new-video": "node scripts/new-video.mjs",
     "prep": "node scripts/prep.mjs",
     "stills": "node scripts/stills.mjs",
+    "final-check": "node scripts/final-check.mjs",
     "refs": "node scripts/refs.mjs",
     "refstyle": "node scripts/refstyle.mjs",
     "refmotion": "node scripts/refmotion.mjs",
@@ -23,7 +24,9 @@
     "ramp": "node scripts/ramp.mjs",
     "trim": "node scripts/trim.mjs",
     "assemble": "node scripts/assemble.mjs",
-    "sound": "node scripts/sounddesign.mjs"
+    "sound": "node scripts/sounddesign.mjs",
+    "plan-sheet": "node scripts/plan-sheet.mjs",
+    "approve": "node scripts/approve.mjs"
   },
   "dependencies": {
     "@modelcontextprotocol/ext-apps": "1.7.5",

package/template/preview/lib.mjs

@@ -6,10 +6,10 @@
  * For a video it finds: the preview module (Comp, META, BEATS), every file the edit reads with
  * staticFile() as a small preview copy, and the edit compiled to one script.
  */
-import {spawnSync} from 'node:child_process';
+import {spawn, spawnSync} from 'node:child_process';
 import {createHash} from 'node:crypto';
 import {createRequire} from 'node:module';
-import {existsSync, mkdirSync, readdirSync, readFileSync, statSync} from 'node:fs';
+import {existsSync, mkdirSync, readdirSync, readFileSync, rmSync, statSync, writeFileSync} from 'node:fs';
 import {dirname, extname, join, resolve} from 'node:path';
 import {fileURLToPath, pathToFileURL} from 'node:url';
 
@@ -76,8 +76,65 @@ export function configFor(name) {
 
 /* ----------------------------------------------------------------------------- the footage */
 
+const MEDIA = /\.(mp4|mov|webm|png|jpe?g|webp|gif|svg|mp3|wav|m4a|ttf|otf|woff2?)$/i;
+const isFile = (rel) => {
+  try {
+    return statSync(join(PUBLIC, rel)).isFile();
+  } catch {
+    return false;
+  }
+};
+/** Every file under a folder of assets/, as names relative to assets/ (cached per build: cutout folders hold thousands). */
+const walked = new Map();
+const walk = (rel) => {
+  if (walked.has(rel)) return walked.get(rel);
+  const dir = join(PUBLIC, rel);
+  const list = !existsSync(dir) || !statSync(dir).isDirectory() ? [] : readdirSync(dir, {recursive: true}).map((f) => `${rel}/${String(f).replace(/\\/g, '/')}`.replace(/^\//, '')).filter(isFile);
+  walked.set(rel, list);
+  return list;
+};
+const escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+/**
+ * The files the edit's code names, found in the code itself (the compiled edit, so every component it imports
+ * is included). Edits name files three ways, and customers' edits use all of them:
+ *   staticFile('brand/logo.png')                     a whole name
+ *   P('Cake photo 1.jpg') with P = (p) => staticFile(`projects/cake/${p}`)   a name under a helper's folder
+ *   staticFile(`projects/x/cutouts/${shot}/f${n}.png`)                       a pattern
+ * Missing these left customers' own photos and logo out of the preview (2026-11-01).
+ */
+function namedInCode(text) {
+  const found = new Set();
+  // Helper folders: a template that is a folder followed only by a value, like `projects/cake/${p}`.
+  const prefixes = new Set(['']);
+  for (const m of text.matchAll(/`([\w ./@()-]*\/)\$\{[^}]+\}`/g)) prefixes.add(m[1].replace(/^\.?\//, ''));
+  // Whole names: quoted (may contain spaces) or bare words ending in a media extension.
+  const names = new Set();
+  for (const m of text.matchAll(/["'`]([^"'`\n$]{1,200})["'`]/g)) if (MEDIA.test(m[1])) names.add(m[1].trim());
+  for (const m of text.matchAll(/[\w./@()-]+\.(?:mp4|mov|webm|png|jpe?g|webp|gif|svg|mp3|wav|m4a|ttf|otf|woff2?)\b/gi)) names.add(m[0]);
+  for (const n of names) {
+    const name = n.replace(/^\.?\/+/, '');
+    for (const p of prefixes) if (isFile(p + name)) found.add(p + name);
+  }
+  // Patterns: a template with a value in the middle and something fixed after it, like `sfx/${name}.mp3`.
+  for (const m of text.matchAll(/`([^`]*\$\{[^`]*)`/g)) {
+    const t = m[1];
+    if (/\$\{[^}]+\}$/.test(t) || !MEDIA.test(t.replace(/\$\{[^}]+\}/g, 'x'))) continue;
+    const parts = t.split(/\$\{[^}]+\}/);
+    const re = parts.map(escapeRe).join('[^/]*?');
+    const root = parts[0].includes('/') ? parts[0].slice(0, parts[0].lastIndexOf('/')) : '';
+    for (const p of prefixes) {
+      const base = (p + root).replace(/\/$/, '');
+      if (!base && !p) continue; // never walk all of assets/ for a pattern with no folder
+      const full = new RegExp(`^${escapeRe(p)}${re}$`);
+      for (const f of walk(base)) if (full.test(f)) found.add(f);
+    }
+  }
+  return found;
+}
+
 /** Every file the edit asks for by name (staticFile), plus the stems. Keys are the names the edit uses. */
-function assetList(c) {
+function assetList(c, code = '', extra = []) {
   const files = {};
   const addDir = (rel) => {
     const dir = join(PUBLIC, rel);
@@ -88,42 +145,78 @@ function assetList(c) {
     }
   };
   for (const d of c.assets) addDir(d);
+  walked.clear();
+  // A font only when named outright — a pattern like `fonts/${f}` would pull in every font (~1 MB each).
+  const fontOk = (f) => !f.startsWith('fonts/') || c.fonts?.includes(f.slice(6)) || code.includes(f.slice(6));
+  for (const f of [...namedInCode(code), ...extra]) if (fontOk(f) && isFile(f)) files[f] = join(PUBLIC, f);
   for (const [k, f] of Object.entries(c.stems ?? {})) if (existsSync(join(STUDIO, f))) files[`__stems/${k}.mp3`] = join(STUDIO, f);
-  return Object.fromEntries(Object.entries(files).filter(([k]) => /\.(mp4|mov|png|jpe?g|webp|svg|ttf|woff2?|mp3)$/i.test(k)));
+  return Object.fromEntries(Object.entries(files).filter(([k]) => MEDIA.test(k)));
 }
 
 /**
  * Preview copies: small enough to travel inside the player page, good enough to judge the edit in a chat-
  * sized player. Anything fits a 540px box on its longest side. The final render always uses the originals.
  */
-const FIT = "scale='if(gt(iw,ih),min(540,iw),-2)':'if(gt(iw,ih),-2,min(540,ih))'";
-const PROXY = {
-  video: ['-vf', FIT, '-an', '-c:v', 'libx264', '-preset', 'veryfast', '-crf', '31', '-g', '15', '-pix_fmt', 'yuv420p', '-movflags', '+faststart'],
-  image: ['-vf', FIT, '-c:v', 'libwebp', '-quality', '72'],
-  audio: ['-vn', '-ac', '2', '-ar', '44100', '-c:a', 'libmp3lame', '-b:a', '128k'],
-};
-const MIME = {'.mp4': 'video/mp4', '.webp': 'image/webp', '.mp3': 'audio/mpeg', '.svg': 'image/svg+xml', '.ttf': 'font/ttf', '.woff': 'font/woff', '.woff2': 'font/woff2', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.png': 'image/png'};
+const fit = (px) => `scale='if(gt(iw,ih),min(${px},iw),-2)':'if(gt(iw,ih),-2,min(${px},ih))'`;
+/**
+ * Two sizes. The page travels as ONE message, and the MCP connection drops any message over 10 MB
+ * (STDIO_DEFAULT_MAX_BUFFER_SIZE) — on 2026-10-22 a 13 MB page never arrived and the chat showed an older
+ * one instead. So the server tries the normal copies first and falls back to the small ones (see PAGE_LIMIT).
+ */
+export const PROXY_TIERS = [
+  {
+    video: ['-vf', fit(540), '-an', '-c:v', 'libx264', '-preset', 'veryfast', '-crf', '31', '-g', '15', '-pix_fmt', 'yuv420p', '-movflags', '+faststart'],
+    image: ['-vf', fit(540), '-c:v', 'libwebp', '-quality', '72'],
+    audio: ['-vn', '-ac', '1', '-ar', '44100', '-c:a', 'libmp3lame', '-b:a', '96k'],
+  },
+  {
+    video: ['-vf', fit(400), '-an', '-c:v', 'libx264', '-preset', 'veryfast', '-crf', '35', '-g', '15', '-pix_fmt', 'yuv420p', '-movflags', '+faststart'],
+    image: ['-vf', fit(400), '-c:v', 'libwebp', '-quality', '55'],
+    audio: ['-vn', '-ac', '1', '-ar', '32000', '-c:a', 'libmp3lame', '-b:a', '56k'],
+    alpha: '450k',
+  },
+  {
+    video: ['-vf', fit(320), '-an', '-c:v', 'libx264', '-preset', 'veryfast', '-crf', '38', '-g', '15', '-pix_fmt', 'yuv420p', '-movflags', '+faststart'],
+    image: ['-vf', fit(320), '-c:v', 'libwebp', '-quality', '45'],
+    audio: ['-vn', '-ac', '1', '-ar', '24000', '-c:a', 'libmp3lame', '-b:a', '40k'],
+    alpha: '250k',
+  },
+];
+// Cut-out (transparent) videos were 2 Mbit/s at every tier — one 30 s cut-out alone filled the page (ceos-ad-2: 16 MB,
+// 2026-11-01). Their rate now shrinks with the tier; tier 0 keeps the old rate so existing copies stay valid.
+/** The biggest page the chat can be sent, with room for the message around it. */
+export const PAGE_LIMIT = 9.5e6;
+const MIME = {'.mp4': 'video/mp4', '.webm': 'video/webm', '.webp': 'image/webp', '.mp3': 'audio/mpeg', '.svg': 'image/svg+xml', '.ttf': 'font/ttf', '.otf': 'font/otf', '.woff': 'font/woff', '.woff2': 'font/woff2', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.png': 'image/png', '.gif': 'image/gif'};
 
-function proxyOf(name, original) {
+export function proxyOf(name, original, PROXY = PROXY_TIERS[0]) {
   const st = statSync(original);
   // The settings are part of the key, so changing them makes new copies instead of reusing old ones.
-  const key = createHash('sha1').update(`${original}:${st.size}:${st.mtimeMs}:${JSON.stringify(PROXY)}`).digest('hex').slice(0, 16);
   const ext = extname(name).toLowerCase();
-  const kind = /\.(mp4|mov)$/.test(ext) ? 'video' : /\.(png|jpe?g)$/.test(ext) ? 'image' : ext === '.mp3' ? 'audio' : null;
+  const kind = /\.(mp4|mov)$/.test(ext) ? 'video' : ext === '.webm' ? 'alpha' : /\.(png|jpe?g)$/.test(ext) ? 'image' : /\.(mp3|wav|m4a)$/.test(ext) ? 'audio' : null;
+  const alphaRate = PROXY.alpha ?? '2M';
+  const key = createHash('sha1')
+    .update(`${original}:${st.size}:${st.mtimeMs}:${JSON.stringify({...PROXY, alpha: undefined})}${kind === 'alpha' && PROXY.alpha ? `:${alphaRate}` : ''}`)
+    .digest('hex')
+    .slice(0, 16);
   if (!kind) return {file: original, mime: MIME[ext] ?? 'application/octet-stream'};
-  const outExt = kind === 'video' ? '.mp4' : kind === 'image' ? '.webp' : '.mp3';
+  const outExt = kind === 'video' ? '.mp4' : kind === 'alpha' ? '.webm' : kind === 'image' ? '.webp' : '.mp3';
   const out = join(CACHE, `${key}${outExt}`);
   if (!existsSync(out)) {
-    const r = spawnSync(FFMPEG, ['-y', '-v', 'error', '-i', original, ...PROXY[kind], out], {encoding: 'utf8'});
+    // a transparent video (a keyed subject): read with libvpx so the alpha survives, and keep it transparent
+    const args =
+      kind === 'alpha'
+        ? ['-c:v', 'libvpx-vp9', '-i', original, '-vf', PROXY.video[1], '-an', '-c:v', 'libvpx-vp9', '-pix_fmt', 'yuva420p', '-b:v', alphaRate, '-deadline', 'realtime', '-cpu-used', '8', '-row-mt', '1', '-auto-alt-ref', '0', '-g', '15']
+        : ['-i', original, ...PROXY[kind]];
+    const r = spawnSync(FFMPEG, ['-y', '-v', 'error', ...args, out], {encoding: 'utf8'});
     if (r.status !== 0) throw new Error(`could not make a preview copy of ${name}: ${r.stderr}`);
   }
   return {file: out, mime: MIME[outExt]};
 }
 
 /** [{name, file, mime, size, hash}] — hash is of the preview copy, so unchanged files are never re-sent. */
-export function buildManifest(c) {
-  return Object.entries(assetList(c)).map(([name, original]) => {
-    const p = proxyOf(name, original);
+export function buildManifest(c, tier = 0, code = '', extra = []) {
+  return Object.entries(assetList(c, code, extra)).map(([name, original]) => {
+    const p = proxyOf(name, original, PROXY_TIERS[tier]);
     const hash = createHash('sha256').update(readFileSync(p.file)).digest('hex').slice(0, 32);
     return {name, file: p.file, mime: p.mime, size: statSync(p.file).size, hash};
   });
@@ -162,6 +255,55 @@ export async function compileEdit(c) {
   }
 }
 
+/* ----------------------------------------------------------------------------- the check before the chat sees it */
+
+/** Remotion's own headless Chrome (every studio has it: renders need it), else Edge or Chrome. */
+async function headlessBrowser() {
+  try {
+    const r = await require('@remotion/renderer').ensureBrowser();
+    if (r?.path && existsSync(r.path)) return r.path;
+  } catch {}
+  const pf = [process.env['ProgramFiles(x86)'], process.env.ProgramFiles, process.env.LOCALAPPDATA].filter(Boolean);
+  const found = [
+    ...pf.map((p) => join(p, 'Microsoft', 'Edge', 'Application', 'msedge.exe')),
+    ...pf.map((p) => join(p, 'Google', 'Chrome', 'Application', 'chrome.exe')),
+    '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+    '/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge',
+  ].find((p) => existsSync(p));
+  return found ?? null;
+}
+
+/**
+ * Opens the finished page headless (#lpcheck), lets it step through 13 points of the video, and returns what the
+ * page reported: {ok, missing: [files the edit asked for that aren't in the page], errors}. null = could not check
+ * (no browser), which never blocks the preview.
+ */
+export async function checkPage(html, budget = 40000) {
+  const browser = await headlessBrowser();
+  if (!browser) return null;
+  const file = join(CACHE, `check-${process.pid}.html`);
+  writeFileSync(file, html);
+  const args = ['--headless', '--disable-gpu', '--no-sandbox', '--autoplay-policy=no-user-gesture-required', '--mute-audio', '--virtual-time-budget=20000', '--dump-dom', `${pathToFileURL(file).href}#lpcheck`];
+  let outOfTime = false;
+  const dom = await new Promise((done) => {
+    const p = spawn(browser, args, {stdio: ['ignore', 'pipe', 'ignore'], windowsHide: true});
+    let out = '';
+    p.stdout.on('data', (d) => (out += d));
+    const kill = setTimeout(() => ((outOfTime = true), p.kill()), budget);
+    p.on('close', () => (clearTimeout(kill), done(out)));
+    p.on('error', () => (clearTimeout(kill), done('')));
+  });
+  rmSync(file, {force: true});
+  if (outOfTime) return null; // slow machine: no verdict, never a false alarm
+  const m = /<pre id="lpcheck-result">([\s\S]*?)<\/pre>/.exec(dom);
+  if (!m) return {ok: false, missing: [], errors: ['The check page never finished — the preview may not load.'], unfinished: true};
+  try {
+    return JSON.parse(m[1].replace(/&quot;/g, '"').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&'));
+  } catch {
+    return {ok: false, missing: [], errors: ['The check result could not be read.'], unfinished: true};
+  }
+}
+
 /**
  * The player page. Customers get it pre-built (player.html, made when the studio ships), so they need none of
  * the player's build tools; in the source studio it is built from ui/app.tsx.