@amg555/frameforge-mcp 2.7.3 → 2.7.7

package/plugins/faceless-shorts/styles/night-file/example/src/core/sets3d.js

@@ -0,0 +1,106 @@
+// Night File 3D sets: dark places with ONE light source. People are faceless Humans (human.js, face: false) in two looks:
+// witness = near-black with a thin red rim light, subject = solid glowing red (blooms). Each set returns { scene, update(t) }.
+import * as THREE from 'three';
+import { rbox, mesh } from './sdf.js';
+
+const std = (color, rough = 0.8, extra = {}) => new THREE.MeshStandardMaterial({ color, roughness: rough, ...extra });
+const box = (w, h, d, m, x, y, z) => { const o = new THREE.Mesh(new THREE.BoxGeometry(w, h, d), m); o.position.set(x, y, z); o.castShadow = o.receiveShadow = true; return o; };
+
+/** witness look: dark body, red fresnel rim */
+export function witnessMat() {
+  return new THREE.ShaderMaterial({
+    uniforms: { uRim: { value: new THREE.Color('#E4322B') }, uBase: { value: new THREE.Color('#07080B') } },
+    vertexShader: 'varying vec3 vN; varying vec3 vV; void main(){ vec4 mv = modelViewMatrix * vec4(position, 1.0); vN = normalize(normalMatrix * normal); vV = normalize(-mv.xyz); gl_Position = projectionMatrix * mv; }',
+    fragmentShader: 'uniform vec3 uRim, uBase; varying vec3 vN; varying vec3 vV; void main(){ float f = pow(1.0 - max(dot(normalize(vN), normalize(vV)), 0.0), 3.0); gl_FragColor = vec4(uBase + uRim * f * 2.2, 1.0); }',
+  });
+}
+/** subject look: glowing ember red */
+export function subjectMat(i = 2.2) { return new THREE.MeshStandardMaterial({ color: '#2A0503', emissive: '#E4322B', emissiveIntensity: i, roughness: 0.6 }); }
+/** a soft visible light cone (fake volumetric) from (x, y, z) pointing down */
+export function lightCone(h = 2.6, r = 1.1, color = '#F1D9A6', a = 0.12) {
+  const g = new THREE.ConeGeometry(r, h, 48, 1, true); g.translate(0, -h / 2, 0);
+  const m = new THREE.ShaderMaterial({ transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide, uniforms: { uC: { value: new THREE.Color(color) }, uA: { value: a }, uH: { value: h } },
+    vertexShader: 'varying float vY; varying vec3 vN; varying vec3 vV; void main(){ vY = position.y; vec4 mv = modelViewMatrix * vec4(position, 1.0); vN = normalize(normalMatrix * normal); vV = normalize(-mv.xyz); gl_Position = projectionMatrix * mv; }',
+    fragmentShader: 'uniform vec3 uC; uniform float uA, uH; varying float vY; varying vec3 vN; varying vec3 vV; void main(){ float e = abs(dot(normalize(vN), normalize(vV))); float fade = 1.0 + vY / uH; gl_FragColor = vec4(uC * uA * e * e * fade, 1.0); }' });
+  return new THREE.Mesh(g, m);
+}
+function lamp(scene, x, y, z, I = 18) {
+  const s = new THREE.SpotLight('#F6DDAE', I, 10, 0.85, 0.6, 1.3); s.position.set(x, y, z); s.target.position.set(x, 0, z); s.castShadow = true; s.shadow.mapSize.set(2048, 2048); s.shadow.bias = -0.0003; s.shadow.radius = 4;
+  scene.add(s, s.target); const fix = new THREE.Mesh(new THREE.CylinderGeometry(0.22, 0.26, 0.05, 32), new THREE.MeshBasicMaterial({ color: '#FFF0CF' })); fix.position.set(x, y + 0.02, z); scene.add(fix);
+  const c = lightCone(y, 1.35); c.position.set(x, y, z); scene.add(c); return s;
+}
+
+/** long apartment corridor, doors both sides, one working ceiling light. o.flicker(t) optional */
+export function corridor() {
+  const scene = new THREE.Scene(); scene.background = new THREE.Color('#050608'); scene.fog = new THREE.Fog('#050608', 4, 16);
+  const wall = std('#3A4258', 0.85), floorM = std('#262B36', 0.55), doorM = std('#3A3330', 0.6), frameM = std('#1B1E26', 0.7);
+  const fl = box(3, 0.1, 22, floorM, 0, -0.05, -8); scene.add(fl);
+  scene.add(box(0.1, 3, 22, wall, -1.5, 1.5, -8), box(0.1, 3, 22, wall, 1.5, 1.5, -8), box(3, 0.1, 22, std('#1A1E28'), 0, 3, -8), box(3, 3, 0.1, wall, 0, 1.5, -19));
+  for (let i = 0; i < 5; i++) for (const s of [-1, 1]) { const z = -1 - i * 3.4 - (s > 0 ? 1.7 : 0); scene.add(box(0.06, 2.1, 0.95, doorM, s * 1.44, 1.05, z), box(0.08, 2.25, 1.1, frameM, s * 1.47, 1.1, z)); const k = new THREE.Mesh(new THREE.SphereGeometry(0.035, 12, 8), std('#B89A5E', 0.3, { metalness: 0.8 })); k.position.set(s * 1.39, 1.0, z + 0.35); scene.add(k); }
+  const end = box(0.95, 2.1, 0.06, doorM, 0, 1.05, -18.94); scene.add(end);
+  const L1 = lamp(scene, 0, 2.95, -4.5, 22); const L2 = lamp(scene, 0, 2.95, -11.5, 9);
+  scene.add(new THREE.HemisphereLight('#4A5A80', '#0A0C12', 0.7));
+  return { scene, lights: [L1, L2], update(t) { L2.intensity = (Math.sin(t * 37) > 0.6 || Math.sin(t * 11.3) > 0.9) ? 1 : 9; } };
+}
+/** a house at night: one lit window, a streetlight, moonlight */
+export function houseNight() {
+  const scene = new THREE.Scene(); scene.background = new THREE.Color('#070B14'); scene.fog = new THREE.Fog('#070B14', 8, 30);
+  const g = box(40, 0.1, 40, std('#0F141C', 0.95), 0, -0.05, -5); scene.add(g);
+  const houseM = std('#2E3850', 0.85); scene.add(box(5, 3, 4, houseM, 0, 1.5, -6));
+  const roof = new THREE.Mesh(new THREE.CylinderGeometry(0.01, 3.4, 1.8, 4, 1), std('#151A25', 0.8)); roof.rotation.y = Math.PI / 4; roof.scale.set(1.05, 1, 0.85); roof.position.set(0, 3.9, -6); scene.add(roof);
+  const lit = new THREE.Mesh(new THREE.PlaneGeometry(0.9, 0.8), new THREE.MeshBasicMaterial({ color: new THREE.Color('#F4C67A').multiplyScalar(0.85) })); lit.position.set(1.3, 1.7, -3.98); scene.add(lit);
+  const dark = new THREE.Mesh(new THREE.PlaneGeometry(0.9, 0.8), std('#0A0D14')); dark.position.set(-1.3, 1.7, -3.98); scene.add(dark);
+  scene.add(box(0.9, 1.9, 0.05, std('#120F0E'), -0.1, 0.95, -3.98));
+  const wl = new THREE.PointLight('#F4C67A', 6, 6, 1.6); wl.position.set(1.3, 1.7, -3.4); scene.add(wl);
+  const pole = box(0.08, 4, 0.08, std('#1C2230'), 3.6, 2, -1.5); scene.add(pole); lamp(scene, 3.1, 3.9, -1.5, 14);
+  const moon = new THREE.DirectionalLight('#8FA8E0', 1.4); moon.position.set(-5, 8, 3); scene.add(moon); scene.add(new THREE.HemisphereLight('#2A3A60', '#05070C', 0.7));
+  for (let i = 0; i < 7; i++) { const tr = new THREE.Mesh(new THREE.ConeGeometry(0.9, 3 + (i % 3), 8), std('#080B12', 0.9)); tr.position.set(-9 + i * 3 + (i > 2 ? 5 : 0), 1.6 + (i % 3) / 2, -9 - (i % 2) * 2); scene.add(tr); }
+  return { scene, update() {} };
+}
+/** a cork case wall with pinned photos (canvas textures) and red string */
+export function caseWall(photos) {
+  const scene = new THREE.Scene(); scene.background = new THREE.Color('#0A0806');
+  const cork = document.createElement('canvas'); cork.width = cork.height = 512; const c = cork.getContext('2d'); c.fillStyle = '#5A3F2A'; c.fillRect(0, 0, 512, 512); for (let i = 0; i < 5000; i++) { c.fillStyle = `rgba(${Math.random() > 0.5 ? '20,10,5' : '140,100,60'},${Math.random() * 0.25})`; c.fillRect(Math.random() * 512, Math.random() * 512, 2, 2); }
+  const ct = new THREE.CanvasTexture(cork); ct.colorSpace = THREE.SRGBColorSpace; ct.wrapS = ct.wrapT = THREE.RepeatWrapping; ct.repeat.set(3, 4);
+  const board = new THREE.Mesh(new THREE.PlaneGeometry(4, 5.2), std('#ffffff', 0.95, { map: ct })); board.receiveShadow = true; scene.add(board);
+  const pins = [[-1.0, 1.4], [0.9, 1.6], [0.0, 0.2], [-1.1, -1.2], [1.0, -1.0]];
+  pins.forEach(([x, y], i) => { const tex = new THREE.CanvasTexture(photos[i % photos.length]); tex.colorSpace = THREE.SRGBColorSpace; const ph = new THREE.Mesh(new THREE.PlaneGeometry(0.9, 1.05), std('#ffffff', 0.6, { map: tex })); ph.position.set(x, y - 0.42, 0.02 + i * 0.002); ph.rotation.z = (i % 2 ? 1 : -1) * 0.06; ph.castShadow = true; scene.add(ph); const pin = new THREE.Mesh(new THREE.SphereGeometry(0.05, 16, 12), std('#D62828', 0.3)); pin.position.set(x, y, 0.06); scene.add(pin); });
+  const strM = new THREE.MeshStandardMaterial({ color: '#C21F1F', roughness: 0.6, emissive: '#5A0A0A', emissiveIntensity: 0.6 });
+  [[0, 2], [1, 2], [2, 3], [2, 4], [0, 1]].forEach(([a, b]) => { const A = new THREE.Vector3(pins[a][0], pins[a][1], 0.07), Bv = new THREE.Vector3(pins[b][0], pins[b][1], 0.07), mid = A.clone().lerp(Bv, 0.5); mid.z = 0.1; mid.y -= 0.08; scene.add(new THREE.Mesh(new THREE.TubeGeometry(new THREE.QuadraticBezierCurve3(A, mid, Bv), 20, 0.012, 6), strM)); });
+  const s = new THREE.SpotLight('#F6DDAE', 30, 10, 0.45, 0.6, 1.3); s.position.set(0.6, 1.4, 4); s.target.position.set(0, 0.2, 0); s.castShadow = true; s.shadow.mapSize.set(2048, 2048); scene.add(s, s.target);
+  scene.add(new THREE.HemisphereLight('#3A2A20', '#000000', 0.25));
+  return { scene, update() {} };
+}
+
+/** 1970s airliner cabin at night: rows of seats, dim window glow, overhead reading lights, a rear door that can open
+ * onto a storm. Aisle runs along -z (rear door at z = -14). update(t, { door: 0..1, rain: 0..1, flash }) */
+export function planeCabin() {
+  const scene = new THREE.Scene(); scene.background = new THREE.Color('#05060A'); scene.fog = new THREE.Fog('#05060A', 5, 18);
+  const shell = new THREE.Mesh(new THREE.CylinderGeometry(1.9, 1.9, 18, 48, 1, true, 0, Math.PI * 2), std('#2B3142', 0.85, { side: THREE.BackSide }));
+  shell.rotation.x = Math.PI / 2; shell.position.set(0, 1.05, -6); shell.receiveShadow = true; scene.add(shell);
+  scene.add(box(3.4, 0.1, 18, std('#3A2E34', 0.7), 0, -0.05, -6));
+  const seatM = std('#3E4A6A', 0.75), headM = std('#D8D2C4', 0.8);
+  for (let r = 0; r < 9; r++) for (const s of [-1, 1]) for (const c of [0, 1]) {
+    const x = s * (0.55 + c * 0.52), z = -0.4 - r * 1.25; scene.add(box(0.48, 0.45, 0.5, seatM, x, 0.42, z), box(0.48, 0.75, 0.1, seatM, x, 0.95, z - 0.22), box(0.36, 0.14, 0.03, headM, x, 1.25, z - 0.17));
+  }
+  const winM = new THREE.MeshBasicMaterial({ color: '#1B2A44' });
+  for (let r = 0; r < 9; r++) for (const s of [-1, 1]) { const w = new THREE.Mesh(new THREE.PlaneGeometry(0.22, 0.32), winM); w.position.set(s * 1.62, 1.35, -0.4 - r * 1.25); w.rotation.y = -s * Math.PI / 2 + s * 0.35; scene.add(w); }
+  scene.add(box(2.6, 0.12, 18, std('#20252F', 0.8), 0, 2.45, -6));
+  const doorFrame = box(1.0, 2.0, 0.08, std('#4A4F5E', 0.6), 0, 1.0, -14.2); scene.add(doorFrame);
+  const door = box(0.9, 1.9, 0.06, std('#3A3F4C', 0.6), 0, 0.95, -14.15); scene.add(door);
+  const storm = new THREE.Mesh(new THREE.PlaneGeometry(0.86, 1.86), new THREE.MeshBasicMaterial({ color: '#1A2440' })); storm.position.set(0, 0.95, -14.17); scene.add(storm);
+  const rainG = new THREE.BufferGeometry(), RN = 220, rp = new Float32Array(RN * 6); rainG.setAttribute('position', new THREE.BufferAttribute(rp, 3));
+  const rain = new THREE.LineSegments(rainG, new THREE.LineBasicMaterial({ color: '#C9D8F2', transparent: true, opacity: 0.85 })); scene.add(rain);
+  const L1 = lamp(scene, 0, 2.38, -2.0, 12), L2 = lamp(scene, 0, 2.38, -5.4, 8), L3 = lamp(scene, 0, 2.38, -8.9, 5);
+  scene.add(new THREE.HemisphereLight('#4A5A80', '#0A0C12', 0.55));
+  const flashL = new THREE.PointLight('#BFD3FF', 0, 12, 1.2); flashL.position.set(0, 1.2, -14.8); scene.add(flashL);
+  const exitL = new THREE.SpotLight('#9FB4E0', 6, 8, 0.7, 0.6, 1.2); exitL.position.set(0, 2.3, -12.2); exitL.target.position.set(0, 0, -14); scene.add(exitL, exitL.target);   // dim cold light by the rear door
+  return {
+    scene, update(t, o = {}) {
+      const dk = o.door || 0; door.position.x = dk * 0.95; door.position.z = -14.15 + dk * 0.3; storm.material.color.set(dk > 0.3 ? '#4A5C8E' : '#1A2440');
+      const ra = o.rain || 0; rain.visible = ra > 0;
+      for (let i = 0; i < RN; i++) { const x = (Math.sin(i * 12.9) * 0.5) * 0.8, y = ((i * 0.37 + t * 9) % 2.2) - 0.1, z = -14.3 - (i % 7) * 0.4; rp.set([x, 2 - y, z, x - 0.06, 2 - y - 0.25, z], i * 6); }
+      rainG.attributes.position.needsUpdate = true; flashL.intensity = o.flash ? 40 * o.flash : 0;
+    },
+  };
+}

package/plugins/faceless-shorts/styles/night-file/example/src/core/timing.js

@@ -0,0 +1,23 @@
+// Timing: everything on screen is placed on the narration's clock.
+//   data/lines.json  { duration, lines: [{ i, text, start, end }] }   (voice.py, or estimate.py for captions-only)
+//   data/words.json  [{ w, line, s, e }]                                (words.py, or estimate.py)
+// L(i) = line i start · Le(i) = line i end · Wd(word, line) = start of the first word in that line matching
+// the prefix (case/punctuation ignored; throws if it isn't there, so a rewritten script can't silently drift).
+export const T = { dur: 0, lines: [], words: [] };
+const norm = (w) => String(w).toLowerCase().replace(/[^a-z0-9']+/g, '');
+
+export async function loadTiming() {
+  const get = async (f) => { const r = await fetch(f, { cache: 'no-store' }); if (!r.ok) throw new Error(`missing ${f}: run voice.py + words.py (or estimate.py)`); return r.json(); };
+  const lines = await get('data/lines.json'), words = await get('data/words.json');
+  T.lines = lines.lines; T.words = words; T.dur = lines.duration;
+  return T;
+}
+export const L = (i) => { const l = T.lines[i]; if (!l) throw new Error(`no line ${i}`); return l.start; };
+export const Le = (i) => { const l = T.lines[i]; if (!l) throw new Error(`no line ${i}`); return l.end; };
+export function Wd(word, line, which = 's') {
+  const n = norm(word);
+  const hit = T.words.find((w) => (line == null || w.line === line) && norm(w.w).startsWith(n));
+  if (!hit) throw new Error(`word "${word}" not found${line != null ? ` in line ${line}` : ''}`);
+  return hit[which];
+}
+export const lineWords = (i) => T.words.filter((w) => w.line === i);

package/plugins/faceless-shorts/styles/night-file/example/src/main.js

@@ -0,0 +1,56 @@
+// Boot: fonts → script + timing → 3D engine + sets → captions → shots. draw(t) renders film time t (pure function of t):
+// the shot renders its 3D frame into the hidden WebGL canvas, which is copied onto the 2D canvas, then the 2D layer
+// (labels, counters) and the captions go on top. window.OP is the API tools/capture.mjs drives.
+import { W, H, setCtx, ctx, clamp } from './core/lib.js';
+import { T, loadTiming } from './core/timing.js';
+import { buildCaptions, drawCaption, captionList } from './core/captions.js';
+import { makeEngine, RES, AA } from './core/engine.js';
+import { buildShots } from './shots.js';
+
+const cv = document.getElementById('cv'), GL = document.getElementById('gl');
+setCtx(cv.getContext('2d'));
+const OP = (window.OP = { ready: false });
+
+function draw(t) {
+  t = clamp(t, 0, T.dur - 1e-4);
+  ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.globalAlpha = 1; ctx.letterSpacing = '0px';
+  const S = OP._shots; let i = S.length - 1; while (i > 0 && S[i].at > t) i--;
+  const sh = S[i], end = i < S.length - 1 ? S[i + 1].at : T.dur, d = end - sh.at, lt = t - sh.at;
+  const blit = () => ctx.drawImage(GL, 0, 0, W, H);
+  ctx.save(); sh.draw(lt, d, t, blit); ctx.restore();
+  ctx.globalAlpha = 1; ctx.letterSpacing = '0px';
+  const fade = Math.min(clamp(t / 0.25), clamp((T.dur - t) / 0.4));
+  if (fade < 1) { ctx.fillStyle = '#000'; ctx.globalAlpha = 1 - fade; ctx.fillRect(0, 0, W, H); ctx.globalAlpha = 1; }
+  drawCaption(t);
+}
+
+(async () => {
+  try {
+    await document.fonts.load('900 100px Inter'); await document.fonts.load('700 100px FreeMono');
+    const script = await (await fetch('script.json', { cache: 'no-store' })).json();
+    await loadTiming();
+    buildCaptions(script);
+    GL.width = Math.round(1080 * RES); GL.height = Math.round(1920 * RES);
+    const E = makeEngine(GL, { w: GL.width, h: GL.height, samples: AA });
+    const { shots, cues } = buildShots(E);
+    shots.sort((a, b) => a.at - b.at);
+    OP._shots = shots; OP.script = script;
+    OP.duration = () => T.dur;
+    OP.draw = draw;
+    OP.frame = (t, q = 0.92) => { draw(t); return cv.toDataURL('image/jpeg', q); };
+    OP.shots = () => shots.map((s, i) => ({ id: s.id, at: +s.at.toFixed(3), end: +(i < shots.length - 1 ? shots[i + 1].at : T.dur).toFixed(3), note: s.note || '' }));
+    OP.captions = () => captionList().map((c) => ({ s: +c.s.toFixed(3), e: +c.e.toFixed(3), text: c.words.map((w) => (w.hi ? '*' : '') + w.txt).join(' ') }));
+    OP.cues = () => cues.slice().sort((a, b) => a.t - b.t);
+    OP.ready = true;
+    const q = new URLSearchParams(location.search);
+    if (!q.has('capture')) {
+      if (q.has('t')) draw(+q.get('t'));
+      else {
+        const audio = new Audio('data/mix.wav'); let t0 = null; const btn = document.getElementById('play'); btn.hidden = false;
+        btn.onclick = () => { btn.hidden = true; t0 = performance.now(); audio.currentTime = 0; audio.play().catch(() => {}); };
+        const loop = (now) => { const t = t0 == null ? 0 : (now - t0) / 1000; draw(t); if (t0 != null && t > T.dur) { t0 = null; btn.hidden = false; } requestAnimationFrame(loop); };
+        requestAnimationFrame(loop);
+      }
+    }
+  } catch (e) { OP.bootError = String(e && e.stack || e); console.error(e); }
+})();

package/plugins/faceless-shorts/styles/night-file/example/src/sheet.js

@@ -0,0 +1,86 @@
+// The Night File (3D) style sheet: 3D renders from the engine + the 2D evidence inserts and typewriter type.
+import * as THREE from 'three';
+import { ctx, setCtx } from './core/lib.js';
+import { startBoard, panel, frame, cell, small, swatches, rules } from './core/board.js';
+import { makeEngine, camera } from './core/engine.js';
+import { Human } from './core/human.js';
+import * as SETS from './core/sets3d.js';
+import * as K from './core/kit.js';
+const { P } = K;
+
+await document.fonts.load('900 40px Inter'); await document.fonts.load('700 40px FreeMono');
+const GL = document.getElementById('gl'), GL2 = document.getElementById('gl2');
+const E = makeEngine(GL), E2 = makeEngine(GL2, { w: 1280, h: 860 });
+const NIGHT = { exposure: 1.05, bloom: 0.85, bloomThreshold: 0.55, vignette: 0.65, grain: 0.05, warm: 0 };
+const cam = camera(32);
+// photos for the case wall, drawn with the 2D kit
+const photo = (kind) => { const c = document.createElement('canvas'); c.width = 360; c.height = 420; const g = c.getContext('2d'); setCtx(g); g.fillStyle = '#D8CFBA'; g.fillRect(0, 0, 360, 420); g.save(); g.translate(180, 210); g.scale(1.5, 1.5); K.polaroid(0, 0, 1, 0, kind); g.restore(); return c; };
+const photos = [photo('dark'), photo('house'), photo('glow'), photo('dark'), photo('house')];
+const B = startBoard(document.getElementById('cv'), { title: 'NIGHT FILE 3D: VIDEO STYLE SHEET', bg: '#0D0F14', line: '#3A2A2C', head: P.cream, accent: P.red });
+const shot = (x, y, w, renderFn, over) => frame(x, y, w, () => { renderFn(); ctx.drawImage(GL, 0, 0); if (over) over(); });
+const wide = (box, renderFn, over) => { renderFn(); B.save(); B.beginPath(); B.roundRect(box.x, box.y, box.w, box.h, 12); B.clip(); B.drawImage(GL2, box.x, box.y, box.w, box.h); B.restore(); setCtx(B); if (over) over(); };
+const person = (kind, look = {}) => { const h = new Human({ face: false, ...look }); h.setAllMaterial(kind === 'subject' ? SETS.subjectMat() : SETS.witnessMat()); return h; };
+
+const C = SETS.corridor();
+const subj = person('subject'), wit = person('witness'); C.scene.add(subj.group, wit.group);
+
+// 1 · hero frame
+let b = panel(20, 80, 560, 520, 1, 'HERO FRAME');
+shot(b.x + 6, b.y, 240, () => {
+  subj.group.position.set(0.1, 0, -6.2); subj.pose({ head: [6, 0, 0] });
+  wit.group.position.set(0.75, 0, 0.4); wit.group.rotation.y = Math.PI + 0.25; wit.walk(0.4, 0.5);
+  cam.position.set(0.25, 1.55, 2.6); cam.lookAt(0, 1.25, -6); C.update(0.1); E.render(C.scene, cam, { ...NIGHT, focus: 8.8, aperture: 0.0008 });
+}, () => { K.dateStamp('OCT 19, 1994', '2:13 A.M. · 4TH FLOOR', 1, 80, 230); K.captionMono([{ txt: 'Nobody' }, { txt: 'opened', hi: 1 }], 540, K.CAPLOOK.y); K.captionMono([{ txt: 'the' }, { txt: 'door.' }], 540, K.CAPLOOK.y + 105); });
+small('REAL 3D ROOMS,\nONE LIGHT SOURCE', b.x + 270, b.y + 40, 'left', 17);
+small('FACELESS PEOPLE,\nRIM-LIT IN RED', b.x + 270, b.y + 130, 'left', 17);
+small('THE SUBJECT\nGLOWS SOLID RED', b.x + 270, b.y + 220, 'left', 17);
+small('TYPED DATES,\nFILM GRAIN', b.x + 270, b.y + 310, 'left', 17);
+
+// 2 · palette + people
+b = panel(590, 80, 660, 520, 2, 'PALETTE & PEOPLE');
+const yy = swatches(b, [['VOID', P.void], ['ROOM', P.room], ['WALL', P.light], ['LAMP', P.beam], ['RED', P.red], ['EMBER', P.redDeep], ['TYPE', P.cream], ['TAPE', P.tape]]);
+{
+  const s = new THREE.Scene(); s.background = new THREE.Color('#06070A'); s.fog = new THREE.Fog('#06070A', 5, 12);
+  const f = new THREE.Mesh(new THREE.PlaneGeometry(20, 20), new THREE.MeshStandardMaterial({ color: '#1A1E28', roughness: 0.6 })); f.rotation.x = -Math.PI / 2; f.receiveShadow = true; s.add(f);
+  const sp = new THREE.SpotLight('#F6DDAE', 40, 10, 0.9, 0.6, 1.2); sp.position.set(0, 4, 2); sp.target.position.set(0, 0, 0); sp.castShadow = true; s.add(sp, sp.target);
+  const ppl = [['witness', -1.35, (h) => h.pose({})], ['witness', -0.45, (h) => h.walk(1.1)], ['subject', 0.45, (h) => h.pose({ head: [8, 0, 0] })], ['memory', 1.35, (h) => h.pose({ shR: [20, 0, 10] })]];
+  ppl.forEach(([k, x, pose]) => { const h = person(k === 'memory' ? 'subject' : k); if (k === 'memory') h.setAllMaterial(Object.assign(SETS.subjectMat(0.9), { transparent: true, opacity: 0.35 })); h.group.position.x = x; pose(h); s.add(h.group); });
+  const c2 = new THREE.PerspectiveCamera(26, 1280 / 860, 0.05, 100); c2.position.set(0, 1.1, 5.4); c2.lookAt(0, 0.95, 0);
+  wide({ x: b.x, y: yy + 6, w: b.w, h: 262 }, () => E2.render(s, c2, { ...NIGHT, aperture: 0 }), () => [['WITNESS', 0.13], ['WALKING', 0.38], ['THE SUBJECT', 0.62], ['MEMORY', 0.87]].forEach(([t, fx]) => small(t, b.x + b.w * fx, yy + 255, 'center', 14, '#E9DCCB')));
+  small('RED = THE PERSON THE STORY IS ABOUT. NOTHING ELSE IS RED.', b.x + b.w / 2, yy + 300, 'center', 14, '#C9C2B2');
+}
+
+// 3 · evidence inserts (2D graphics laid over the 3D)
+b = panel(1260, 80, 640, 520, 3, 'EVIDENCE INSERTS');
+ctx.fillStyle = '#05060A'; ctx.beginPath(); ctx.roundRect(b.x, b.y, b.w, b.h, 14); ctx.fill();
+const gx = (i) => b.x + 80 + i * 158, gy = (r) => b.y + 110 + r * 205, L = '#C9C2B2';
+cell(gx(0) + 40, gy(0), 0.32, () => K.caseFile(0, 0, 1), 'CASE FILE', 100, L);
+cell(gx(2), gy(0), 0.42, () => K.polaroid(0, 0, 1, -0.08, 'glow'), 'POLAROID', 100, L);
+cell(gx(3) - 14, gy(0), 0.42, () => K.clock(0, 0, 1, 2, 13), 'CLOCK', 100, L);
+cell(gx(0), gy(1), 0.35, () => K.cassette(0, 0, 1), 'TAPE', 90, L);
+cell(gx(1), gy(1) + 40, 0.6, () => { K.marker(-50, 0, 0.9, 1); K.marker(60, 0, 0.9, 2); }, 'MARKERS', 50, L);
+cell(gx(2), gy(1), 0.5, () => { ctx.fillStyle = P.paper; ctx.fillRect(-130, -70, 260, 160); K.redacted(-110, -50, [220, 160, 200]); }, 'REDACTED', 90, L);
+cell(gx(3), gy(1), 0.5, () => { K.polaroid(0, 0, 0.8, 0.05, 'house'); K.redCircle(0, -10, 120, 90); }, 'RED CIRCLE', 90, L);
+
+// 4 · scenes
+b = panel(20, 610, 760, 456, 4, 'SCENES');
+const sw = 200, sx = (i) => b.x + 20 + i * (sw + 45);
+shot(sx(0), b.y, sw, () => { subj.group.position.set(0, 0, -30); wit.group.position.set(0, 0, -3.2); wit.group.rotation.y = Math.PI; wit.walk(1.4); cam.position.set(0.5, 1.3, 1.8); cam.lookAt(0, 1.1, -6); C.update(0.3); E.render(C.scene, cam, { ...NIGHT, exposure: 1.4, focus: 5, aperture: 0.001 }); });
+const Hs = SETS.houseNight(), s2 = person('subject'); s2.group.position.set(1.4, 0, -1.2); s2.group.rotation.y = Math.PI * 0.85; s2.pose({}); Hs.scene.add(s2.group);
+shot(sx(1), b.y, sw, () => { cam.position.set(-2.2, 1.9, 10.5); cam.lookAt(0.4, 2.3, -5); E.render(Hs.scene, cam, { ...NIGHT, exposure: 1.5, bloom: 0.45, bloomThreshold: 0.8, focus: 10.5, aperture: 0.0008 }); });
+const CW = SETS.caseWall(photos);
+shot(sx(2), b.y, sw, () => { cam.position.set(0.3, 0.1, 9.2); cam.lookAt(0, 0.1, 0); E.render(CW.scene, cam, { ...NIGHT, bloom: 0.4, focus: 9.2, aperture: 0.0008 }); });
+['(A) THE CORRIDOR', '(B) THE HOUSE', '(C) THE CASE WALL'].forEach((t, i) => small(t, sx(i) + sw / 2, b.y + sw * 16 / 9 + 26, 'center', 15, '#C9C2B2'));
+
+// 5 · captions
+b = panel(790, 610, 520, 456, 5, 'CAPTIONS');
+wide({ x: b.x, y: b.y, w: b.w, h: b.h - 10 }, () => { const c3 = new THREE.PerspectiveCamera(32, 1280 / 860, 0.05, 100); c3.position.set(0, 1.5, 1); c3.lookAt(0, 1.4, -8); E2.render(C.scene, c3, { ...NIGHT, focus: 0.5, aperture: 0.01, maxblur: 0.015 }); }, () => {
+  [[[{ txt: 'She' }, { txt: 'never' }, { txt: 'came', hi: 1 }, { txt: 'home.' }], 70], [[{ txt: 'The' }, { txt: 'phone', hi: 1 }, { txt: 'rang' }, { txt: 'again.' }], 165], [[{ txt: 'At' }, { txt: '2:13', hi: 1 }, { txt: 'A.M.' }], 260]]
+    .forEach(([w, y]) => cell(b.x + b.w / 2, b.y + y, 0.48, () => K.captionMono(w, 0, 0), null));
+  cell(b.x + 30, b.y + 312, 0.34, () => K.dateStamp('JUNE 3, 1987', 'MILLBROOK, OHIO', 1, 0, 0), null);
+});
+
+// 6 · rules
+b = panel(1320, 610, 580, 456, 6, 'RULES');
+rules(b, ['SLOW: PUSH-INS AND DRIFTS, 3-5 S SHOTS.', 'ONE LIGHT PER SCENE. THE REST IS DARK.', 'NO FACES, NO GORE, NO WEAPONS SHOWN.', 'REAL CASES: CHECKED FACTS, RESPECTFUL.', 'TYPEWRITER CAPTIONS, ONE RED WORD.', 'SOUND: LOW DRONE, ROOM TONE, ONE HIT.', 'MOOD: QUIET, UNEASY, INVESTIGATIVE.'], b.y + 26, 17, 52);
+window.SHEET_READY = true;

package/plugins/faceless-shorts/styles/night-file/example/src/shots.js

@@ -0,0 +1,130 @@
+// THE MAN WHO JUMPED OUT OF A PLANE (D.B. Cooper, 1971) : the shot list (Night File 3D example).
+// Faceless people: witnesses are dark with a red rim, the subject glows solid red. Slow camera, one light per scene.
+import * as THREE from 'three';
+import { ctx, setCtx, W, H, clamp, lerp, seg, eo, eio, eob, rr } from './core/lib.js';
+import { L, Wd, T } from './core/timing.js';
+import { camera } from './core/engine.js';
+import { Human } from './core/human.js';
+import * as SETS from './core/sets3d.js';
+import * as K from './core/kit.js';
+
+const V3 = (x, y, z) => new THREE.Vector3(x, y, z), lerpV = (a, b, k) => a.clone().lerp(b, k);
+const NIGHT = { exposure: 1.25, bloom: 0.85, bloomThreshold: 0.55, vignette: 0.6, grain: 0.05, warm: 0 };
+/** paper insert (ticket / note) drawn in 2D */
+function paper(x, y, w, h, rot, lines, sc = 1) {
+  if (sc <= 0) return; ctx.save(); ctx.translate(x, y); ctx.rotate(rot); ctx.scale(sc, sc); ctx.shadowColor = 'rgba(0,0,0,0.7)'; ctx.shadowBlur = 40;
+  rr(-w / 2, -h / 2, w, h, 6); ctx.fillStyle = K.P.paper; ctx.fill(); ctx.shadowBlur = 0; ctx.textAlign = 'left'; ctx.textBaseline = 'alphabetic';
+  lines.forEach(([txt, size, col, dy]) => { ctx.font = `700 ${size}px FreeMono`; ctx.fillStyle = col || K.P.ink; ctx.fillText(txt, -w / 2 + 40, -h / 2 + dy); });
+  ctx.restore();
+}
+
+export function buildShots(E) {
+  const S = [], CUES = [], add = (o) => (S.push(o), o), cue = (t, type, o = {}) => CUES.push({ t: +t.toFixed(3), type, ...o });
+  const cut = (i) => (i === 0 ? 0 : L(i) - 0.1);
+  const cam = camera(34);
+  const C = SETS.planeCabin(), CW = SETS.caseWall([0, 1, 2].map((k) => { const c = document.createElement('canvas'); c.width = 360; c.height = 420; const g = c.getContext('2d'), prev = ctx; setCtx(g); g.fillStyle = '#D8CFBA'; g.fillRect(0, 0, 360, 420); g.save(); g.translate(180, 210); g.scale(1.5, 1.5); K.polaroid(0, 0, 1, 0, ['glow', 'house', 'dark'][k]); g.restore(); setCtx(prev); return c; }));
+  const person = (kind) => { const h = new Human({ face: false }); h.setAllMaterial(kind === 'subject' ? SETS.subjectMat() : SETS.witnessMat()); return h; };
+  const cooper = person('subject'), crew = person('witness'); C.scene.add(cooper.group, crew.group);
+  const seated = []; [[-1.07, -0.4], [1.07, -1.65], [-0.55, -2.9], [1.07, -4.15], [-1.07, -5.4], [0.55, -6.65]].forEach(([x, z]) => { const h = person('witness'); h.group.position.set(x, 0, z + 0.08); h.hips.position.y = 0.66; h.pose({ hipL: [88, 0, 2], hipR: [88, 0, 2], knL: 88, knR: 88, spine: [-6, 0, 0], shL: [30, 0, 4], shR: [30, 0, 4], elL: 50, elR: 50 }); C.scene.add(h.group); seated.push(h); });
+  const sit = (h, x, z) => { h.group.position.set(x, 0, z); h.group.rotation.set(0, 0, 0); h.hips.position.y = 0.66; h.pose({ hipL: [88, 0, 2], hipR: [88, 0, 2], knL: 88, knR: 88, spine: [-4, 0, 0], shL: [30, 0, 4], shR: [30, 0, 4], elL: 55, elR: 55 }); };
+  const render = (scene, focusP, extra = {}) => { if (cam.fov !== (extra.fov || 34)) { cam.fov = extra.fov || 34; cam.updateProjectionMatrix(); } E.render(scene, cam, { ...NIGHT, focus: cam.position.distanceTo(focusP), aperture: 0.0012, ...extra }); };
+  const hideAll = () => { cooper.group.visible = crew.group.visible = false; seated.forEach((h) => (h.group.visible = true)); C.update(0, {}); };
+
+  // 1 · the date types on over the dark cabin
+  add({ id: 'S01', at: 0, note: 'cabin from the front, date types on', draw(lt, d, t, blit) {
+    hideAll(); cam.position.copy(lerpV(V3(0.3, 1.55, 1.8), V3(0.15, 1.5, 0.6), eio(lt / d))); cam.lookAt(0, 1.1, -10); render(C.scene, V3(0, 1, -5)); blit();
+    K.dateStamp('NOV 24, 1971', 'FLIGHT 305 · PORTLAND', clamp(lt / 1.6), 80, 300);
+  } });
+  cue(0.3, 'tock', { gain: 0.4 });
+
+  // 2 · a quiet man boards (the subject walks up the aisle, glowing)
+  { const st = cut(1);
+    add({ id: 'S02', at: st, note: 'the subject walks up the aisle toward us', draw(lt, d, t, blit) {
+      hideAll(); cooper.group.visible = true; cooper.group.rotation.y = 0; cooper.group.position.set(0, 0, lerp(-7, -3.2, lt / d)); cooper.walk(lt * 5.2, 0.8);
+      cam.position.copy(lerpV(V3(0.25, 1.5, 0.4), V3(0.2, 1.45, -0.2), eio(lt / d))); cam.lookAt(0, 1.2, -6); render(C.scene, cooper.group.position.clone().add(V3(0, 1.2, 0))); blit();
+    } });
+    cue(st, 'whoosh', { gain: 0.5 }); }
+
+  // 3 · the ticket: DAN COOPER (2D insert over the blurred cabin)
+  { const st = cut(2), nm = Wd('cooper', 2) - st;
+    add({ id: 'S03', at: st, note: 'paper ticket insert, name circled', draw(lt, d, t, blit) {
+      hideAll(); cooper.group.visible = true; sit(cooper, 0.55, -10.1); cam.position.set(0.1, 1.4, -6.5); cam.lookAt(0.5, 0.9, -10); render(C.scene, V3(0, 1, -2), { aperture: 0.01, maxblur: 0.014 }); blit();
+      const k = eo(clamp(lt / 0.5)); paper(540, lerp(1100, 860, k), 820, 460, -0.04, [['NORTHWEST ORIENT AIRLINES', 34, K.P.redDeep, 70], ['FLIGHT 305  PDX → SEA', 40, null, 140], ['PASSENGER:', 34, '#6A6458', 230], ['DAN COOPER', 74, null, 320], ['ONE WAY · CASH', 34, '#6A6458', 400]], k);
+      if (lt > nm) K.redCircle(540 - 410 + 40 + 190, lerp(1100, 860, k) - 230 + 300, 230, 70, seg(lt, nm, nm + 0.5));
+    } });
+    cue(st, 'whoosh', { gain: 0.5 }); cue(st + nm, 'slide', { dur: 0.5, gain: 0.4 }); }
+
+  // 4 · he hands the flight attendant a note
+  { const st = cut(3), nt = Wd('note', 3) - st;
+    add({ id: 'S04', at: st, note: 'attendant stops at his row; the note appears', draw(lt, d, t, blit) {
+      hideAll(); cooper.group.visible = crew.group.visible = true; sit(cooper, 0.55, -10.1);
+      crew.group.position.set(-0.05, 0, lerp(-8.4, -9.4, eo(clamp(lt / 1.2)))); crew.group.rotation.y = Math.PI * 0.9; crew.pose({ shR: [40, 0, 10], elR: 40, head: [10, 30, 0] });
+      cam.position.copy(lerpV(V3(-0.9, 1.6, -6.8), V3(-0.7, 1.55, -7.6), eio(lt / d))); cam.lookAt(0.3, 1.0, -10); render(C.scene, V3(0.3, 1, -9.8)); blit();
+      if (lt > nt) paper(540, 520, 560, 300, 0.06, [['TO THE STEWARDESS:', 32, K.P.redDeep, 70], ['████████████████', 34, null, 140], ['████████  ███████', 34, null, 200], ['██████', 34, null, 260]], eob(seg(lt, nt, nt + 0.3)));
+    } });
+    cue(st, 'whoosh', { gain: 0.5 }); cue(st + nt, 'pop', { gain: 0.4 }); }
+
+  // 5 · $200,000 and four parachutes (case file insert)
+  { const st = cut(4), pc = Wd('parachutes', 4) - st;
+    add({ id: 'S05', at: st, note: 'case file: the demands type on', draw(lt, d, t, blit) {
+      hideAll(); cam.position.set(0, 1.5, -2); cam.lookAt(0, 1.1, -12); render(C.scene, V3(0, 1, 0), { aperture: 0.012, maxblur: 0.016, exposure: 0.9 }); blit();
+      K.caseFile(540, 820, 1.25, 'CASE NO. 71-305', 0, -0.03);
+      K.dateStamp('$200,000', '4 PARACHUTES', lt > pc ? 1 : clamp(lt / 1.2) * 0.62, 250, 1000);
+    } });
+    cue(st, 'whoosh', { gain: 0.5 }); cue(st + 0.2, 'tock', { gain: 0.4 }); cue(st + pc, 'tock', { gain: 0.4 }); }
+
+  // 6 · in Seattle, every passenger goes (they fade, he stays)
+  { const st = cut(5);
+    add({ id: 'S06', at: st, note: 'passengers vanish one by one; the subject stays', draw(lt, d, t, blit) {
+      hideAll(); cooper.group.visible = true; sit(cooper, 0.55, -10.1); seated.forEach((h, i) => (h.group.visible = lt < 0.4 + i * (d - 0.6) / 6));
+      cam.position.copy(lerpV(V3(0.0, 1.7, 1.2), V3(0.0, 1.6, -1.5), eio(lt / d))); cam.lookAt(0.2, 1.0, -10); render(C.scene, V3(0.5, 1, -10)); blit();
+      K.dateStamp('SEATTLE', '7:40 P.M.', clamp(lt / 1.2), 80, 300);
+    } });
+    cue(st, 'whoosh', { gain: 0.5 }); for (let i = 0; i < 6; i++) cue(st + 0.4 + i * (cut(6) - st - 0.6) / 6, 'tock', { gain: 0.25 }); }
+
+  // 7 · somewhere over the forests, in the rain (the rear door, lightning)
+  { const st = cut(6);
+    add({ id: 'S07', at: st, note: 'the rear door: rain, lightning flashes', draw(lt, d, t, blit) {
+      hideAll(); seated.forEach((h) => (h.group.visible = false)); const fl = (Math.sin(t * 13) > 0.94 ? 1 : 0) * (lt > 0.6 ? 1 : 0); C.update(t, { door: 0.15, rain: 1, flash: fl });
+      cam.position.copy(lerpV(V3(0.0, 1.72, -9.6), V3(0.0, 1.66, -10.4), eio(lt / d))); cam.lookAt(0, 1.0, -14.2); render(C.scene, V3(0, 1, -14.2), { fov: 58, exposure: 1.3 + fl * 0.5 }); blit();
+    } });
+    cue(st, 'whoosh', { gain: 0.5 }); cue(st + 0.6, 'slide', { dur: cut(7) - st - 0.6, gain: 0.6 }); }
+
+  // 8 · he opens the rear stairs and jumps
+  { const st = cut(7), op = Wd('opens', 7) - st, jp = Wd('jumps', 7) - st;
+    add({ id: 'S08', at: st, note: 'door opens on "opens"; he is gone on "jumps"', draw(lt, d, t, blit) {
+      hideAll(); seated.forEach((h) => (h.group.visible = false)); cooper.group.visible = true;
+      const door = eio(seg(lt, op, op + 0.5)), out = eio(seg(lt, jp, jp + 0.35));
+      cooper.group.rotation.set(0, Math.PI, 0); cooper.group.position.set(0, -out * 3, lerp(-11.0, -13.7, eio(clamp(lt / jp))) - out * 3); if (out < 0.05) cooper.walk(lt * 4, 0.5);
+      C.update(t, { door: Math.max(0.15, door), rain: 1, flash: out > 0 && out < 1 ? 1 : 0 });
+      cam.position.copy(lerpV(V3(0.0, 1.72, -9.3), V3(0.0, 1.68, -9.9), eio(lt / d))); cam.lookAt(0, 1.0, -14); render(C.scene, V3(0, 1, -13), { fov: 58 }); blit();
+    } });
+    cue(st, 'whoosh', { gain: 0.5 }); cue(st + op, 'thud', { gain: 0.6 }); cue(st + jp, 'whoosh'); cue(st + jp + 0.05, 'slam', { gain: 0.7 }); }
+
+  // 9 · never seen again (empty cabin, open door)
+  { const st = cut(8);
+    add({ id: 'S09', at: st, note: 'empty cabin, door open, rain', draw(lt, d, t, blit) {
+      hideAll(); seated.forEach((h) => (h.group.visible = false)); C.update(t, { door: 1, rain: 1 });
+      cam.position.copy(lerpV(V3(0, 1.72, -9.6), V3(0, 1.66, -10.6), eio(lt / d))); cam.lookAt(0, 1.0, -14); render(C.scene, V3(0, 1, -14), { fov: 58 }); blit();
+    } });
+    cue(st, 'slide', { dur: 2, gain: 0.4 }); }
+
+  // 10 · nine years later: the cash by the river (case wall)
+  { const st = cut(9), cs = Wd('cash', 9) - st;
+    add({ id: 'S10', at: st, note: 'case wall, 1980 date, red circle', draw(lt, d, t, blit) {
+      cam.position.copy(lerpV(V3(0.4, 0.3, 9.5), V3(0.2, 0.2, 7.2), eio(lt / d))); cam.lookAt(0, 0.2, 0); render(CW.scene, V3(0, 0.2, 0), { bloom: 0.4 }); blit();
+      K.dateStamp('FEB 10, 1980', 'COLUMBIA RIVER · $5,800', clamp(lt / 1.6), 80, 300);
+      if (lt > cs) K.redCircle(540, 1000, 300, 230, seg(lt, cs, cs + 0.6));
+    } });
+    cue(st, 'whoosh', { gain: 0.5 }); cue(st + 0.2, 'tock', { gain: 0.35 }); }
+
+  // 11 · still missing: UNSOLVED stamp
+  { const st = cut(10), ms = Wd('missing', 10) - st;
+    add({ id: 'S11', at: st, note: 'case file slams down, UNSOLVED stamp', draw(lt, d, t, blit) {
+      cam.position.set(0.1, 0.1, 6.5); cam.lookAt(0, 0.1, 0); render(CW.scene, V3(0, 0, 0), { bloom: 0.4, aperture: 0.01, maxblur: 0.014, exposure: 0.9 }); blit();
+      K.caseFile(540, lerp(1500, 860, eob(seg(lt, 0, 0.45))), 1.3, 'CASE NO. 71-305', lt > ms ? seg(lt, ms, ms + 0.25) : 0, -0.04);
+    } });
+    cue(st, 'whoosh', { gain: 0.6 }); cue(st + 0.4, 'thud', { gain: 0.5 }); cue(st + ms, 'slam'); }
+
+  return { shots: S, cues: CUES };
+}

package/plugins/faceless-shorts/styles/night-file/example/tools/capture.mjs

@@ -0,0 +1,122 @@
+// Frame-exact capture through headless Chrome. No npm packages (Node 22+). Run from the project folder.
+//   node tools/capture.mjs check                         boot, list shots + captions, report errors
+//   node tools/capture.mjs cues                          write data/cues.json (the sound cues, for tools/mix.py)
+//   node tools/capture.mjs sheet review/all.jpg [step=0.5] [cols=9]   contact sheet, a frame every `step` s, time-stamped
+//   node tools/capture.mjs frames review/full "1.2,8.4"  full-size JPEGs of those times
+//   node tools/capture.mjs video renders/out.mp4 [start end] [--draft]   the film (30 fps) with data/mix.wav if it exists
+//   node tools/capture.mjs preview                       serve the project and print a URL to watch it in a browser
+// CHROME=/path/to/chrome overrides the browser.
+import { spawn, spawnSync } from 'node:child_process';
+import http from 'node:http';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const FPS = +(process.env.FPS || 30);
+const CHROME = [process.env.CHROME, '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome', '/Applications/Chromium.app/Contents/MacOS/Chromium',
+  '/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge', '/usr/bin/google-chrome', '/usr/bin/google-chrome-stable', '/usr/bin/chromium',
+  '/usr/bin/chromium-browser', '/snap/bin/chromium', 'C:/Program Files/Google/Chrome/Application/chrome.exe',
+  'C:/Program Files (x86)/Google/Chrome/Application/chrome.exe'].find((p) => p && fs.existsSync(p));
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+const args = process.argv.slice(2), flags = new Set(args.filter((a) => a.startsWith('--')));
+const [mode, ...rest] = args.filter((a) => !a.startsWith('--'));
+
+const MIME = { '.html': 'text/html', '.js': 'text/javascript', '.mjs': 'text/javascript', '.json': 'application/json', '.otf': 'font/otf',
+  '.ttf': 'font/ttf', '.woff2': 'font/woff2', '.wav': 'audio/wav', '.mp3': 'audio/mpeg', '.png': 'image/png', '.jpg': 'image/jpeg' };
+function serve(port = 0) {
+  return new Promise((res) => {
+    const srv = http.createServer((req, r) => {
+      const u = decodeURIComponent(req.url.split('?')[0]), f = path.join(ROOT, u === '/' ? 'index.html' : u);
+      if (!f.startsWith(ROOT) || !fs.existsSync(f) || fs.statSync(f).isDirectory()) { r.writeHead(404); r.end(); return; }
+      r.writeHead(200, { 'Content-Type': MIME[path.extname(f)] || 'application/octet-stream', 'Cache-Control': 'no-store' });
+      fs.createReadStream(f).pipe(r);
+    });
+    srv.listen(port, '127.0.0.1', () => res(srv));
+  });
+}
+
+async function openPage(port) {
+  if (!CHROME) throw new Error('Chrome not found: install Google Chrome or set CHROME=/path/to/chrome');
+  const prof = fs.mkdtempSync(path.join(os.tmpdir(), 'fs-chrome-'));
+  const chrome = spawn(CHROME, ['--headless=new', '--remote-debugging-port=0', `--user-data-dir=${prof}`, '--no-first-run', '--no-default-browser-check',
+    '--hide-scrollbars', '--window-size=1080,1920', '--ignore-gpu-blocklist', '--enable-unsafe-swiftshader', ...(process.env.SOFTWARE_GL ? ['--use-angle=swiftshader'] : []), ...(process.getuid?.() === 0 ? ['--no-sandbox'] : []), '--disable-background-timer-throttling', '--disable-renderer-backgrounding', 'about:blank'], { stdio: 'ignore' });
+  let dbg;
+  for (let i = 0; i < 200 && !dbg; i++) { try { dbg = fs.readFileSync(path.join(prof, 'DevToolsActivePort'), 'utf8').split('\n')[0].trim(); } catch { await sleep(100); } }
+  if (!dbg) throw new Error('Chrome did not start');
+  const r = await fetch(`http://127.0.0.1:${dbg}/json/new?${encodeURIComponent(`http://127.0.0.1:${port}/index.html?capture=1${process.env.QS || ''}`)}`, { method: 'PUT' });
+  const target = await r.json();
+  const ws = new WebSocket(target.webSocketDebuggerUrl);
+  await new Promise((res, rej) => { ws.onopen = res; ws.onerror = rej; });
+  let id = 0; const pend = new Map(), logs = [];
+  ws.onmessage = (e) => {
+    const m = JSON.parse(e.data);
+    if (m.id && pend.has(m.id)) { const p = pend.get(m.id); pend.delete(m.id); m.error ? p.rej(new Error(m.error.message)) : p.res(m.result); }
+    else if (m.method === 'Runtime.exceptionThrown') logs.push('EXCEPTION ' + (m.params.exceptionDetails.exception?.description || m.params.exceptionDetails.text));
+    else if (m.method === 'Runtime.consoleAPICalled' && m.params.type === 'error') logs.push('ERROR ' + m.params.args.map((a) => a.value ?? a.description).join(' '));
+  };
+  const send = (method, params = {}) => new Promise((res, rej) => { const i = ++id; pend.set(i, { res, rej }); ws.send(JSON.stringify({ id: i, method, params })); });
+  const ev = async (expr) => { const x = await send('Runtime.evaluate', { expression: expr, returnByValue: true, awaitPromise: true }); if (x.exceptionDetails) throw new Error(x.exceptionDetails.exception?.description || x.exceptionDetails.text); return x.result.value; };
+  await send('Runtime.enable');
+  for (let i = 0; ; i++) {
+    const st = await ev('window.OP ? (OP.bootError ? "ERR:" + OP.bootError : OP.ready) : false').catch(() => false);
+    if (st === true) break;
+    if (typeof st === 'string') throw new Error('boot failed: ' + st + '\n' + logs.join('\n'));
+    if (i > 1200) throw new Error('boot timeout\n' + logs.join('\n'));
+    await sleep(100);
+  }
+  const close = () => { try { ws.close(); } catch {} chrome.kill('SIGKILL'); setTimeout(() => { try { fs.rmSync(prof, { recursive: true, force: true }); } catch {} }, 300); };
+  return { ev, logs, close };
+}
+const jpg = (d) => Buffer.from(d.slice(d.indexOf(',') + 1), 'base64');
+const FRAME = (t, q, label) => `(() => { const d = OP.frame(${t}, ${q}); ${label ? `const cv = document.getElementById('cv'), c = cv.getContext('2d'); c.setTransform(1,0,0,1,0,0); c.fillStyle = '#000'; c.fillRect(0, 0, 250, 86); c.fillStyle = '#fff'; c.font = '700 60px sans-serif'; c.textAlign = 'left'; c.textBaseline = 'alphabetic'; c.fillText('${(+t).toFixed(2)}', 14, 64); return cv.toDataURL('image/jpeg', ${q});` : 'return d;'} })()`;
+
+const srv = await serve(mode === 'preview' ? 8765 : 0), port = srv.address().port;
+if (mode === 'preview') { console.log(`open http://127.0.0.1:${port}/  (Ctrl+C to stop)`); }
+else {
+  const P = await openPage(port);
+  try {
+    const dur = await P.ev('OP.duration()');
+    if (mode === 'check') {
+      console.log(`duration ${dur.toFixed(2)} s`);
+      for (const s of await P.ev('OP.shots()')) console.log(`${s.id.padEnd(5)} ${s.at.toFixed(2).padStart(6)} → ${s.end.toFixed(2).padStart(6)}  (${(s.end - s.at).toFixed(2)} s)  ${s.note}`);
+      console.log('captions:'); for (const c of await P.ev('OP.captions()')) console.log(`  ${c.s.toFixed(2).padStart(6)}–${c.e.toFixed(2).padEnd(6)} ${c.text}`);
+      let bad = 0; for (let t = 0; t < dur; t += 0.25) { try { await P.ev(`OP.draw(${t})`); } catch (e) { bad++; console.log(`ERROR at ${t.toFixed(2)}: ${e.message.split('\n')[0]}`); } }
+      if (P.logs.length) console.log(P.logs.join('\n'));
+      console.log(bad || P.logs.length ? 'CHECK FAILED' : 'CHECK OK');
+    } else if (mode === 'cues') {
+      const cues = await P.ev('OP.cues()');
+      fs.mkdirSync(path.join(ROOT, 'data'), { recursive: true });
+      fs.writeFileSync(path.join(ROOT, 'data/cues.json'), JSON.stringify({ duration: dur, cues }, null, 1));
+      console.log(`data/cues.json: ${cues.length} cues, ${dur.toFixed(2)} s`);
+    } else if (mode === 'frames') {
+      const dir = path.resolve(ROOT, rest[0] || 'review/frames'); fs.mkdirSync(dir, { recursive: true });
+      for (const t of (rest[1] || '0').split(',').map(Number)) { fs.writeFileSync(path.join(dir, `t${t.toFixed(2)}.jpg`), jpg(await P.ev(FRAME(t, 0.92)))); }
+      console.log(dir);
+    } else if (mode === 'sheet') {
+      const out = path.resolve(ROOT, rest[0] || 'review/all.jpg'), step = +(rest[1] || 0.5), cols = +(rest[2] || 9);
+      const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'fs-sheet-')); let n = 0;
+      for (let t = step / 2; t < dur; t += step) fs.writeFileSync(path.join(tmp, `f${String(n++).padStart(4, '0')}.jpg`), jpg(await P.ev(FRAME(t, 0.8, true))));
+      const rows = Math.ceil(n / cols); fs.mkdirSync(path.dirname(out), { recursive: true });
+      const r = spawnSync('ffmpeg', ['-v', 'error', '-y', '-framerate', '1', '-i', path.join(tmp, 'f%04d.jpg'), '-vf', `scale=216:384,tile=${cols}x${rows}:padding=4:color=black`, '-frames:v', '1', '-q:v', '3', out]);
+      fs.rmSync(tmp, { recursive: true, force: true });
+      if (r.status) throw new Error('ffmpeg: ' + r.stderr); console.log(`${out} (${n} frames, every ${step} s)`);
+    } else if (mode === 'video') {
+      const out = path.resolve(ROOT, rest[0] || 'renders/video.mp4'); fs.mkdirSync(path.dirname(out), { recursive: true });
+      const mix = path.join(ROOT, 'data/mix.wav'), hasMix = fs.existsSync(mix), a0 = rest[1] ? +rest[1] : 0, a1 = rest[2] ? Math.min(+rest[2], dur) : dur, n = Math.round((a1 - a0) * FPS);
+      const ff = spawn('ffmpeg', ['-v', 'error', '-y', '-f', 'image2pipe', '-framerate', String(FPS), '-i', '-',
+        ...(hasMix ? ['-ss', String(a0), '-t', String(a1 - a0), '-i', mix] : ['-f', 'lavfi', '-i', 'anullsrc=r=48000:cl=stereo']), '-map', '0:v', '-map', '1:a',
+        '-c:v', 'libx264', '-preset', flags.has('--draft') ? 'ultrafast' : 'veryfast', '-crf', flags.has('--draft') ? '28' : '18', '-pix_fmt', 'yuv420p',
+        '-c:a', 'aac', '-b:a', '192k', '-shortest', '-movflags', '+faststart', out], { stdio: ['pipe', 'inherit', 'inherit'] });
+      const t0 = Date.now();
+      for (let i = 0; i < n; i++) {
+        const b = jpg(await P.ev(FRAME(a0 + i / FPS, flags.has('--draft') ? 0.8 : 0.93)));
+        if (!ff.stdin.write(b)) await new Promise((r) => ff.stdin.once('drain', r));
+        if (i % 150 === 0) process.stdout.write(`\r${i}/${n} frames`);
+      }
+      ff.stdin.end(); await new Promise((r) => ff.on('close', r));
+      console.log(`\r${out} (${n} frames, ${hasMix ? 'with data/mix.wav' : 'SILENT: no data/mix.wav'}, ${((Date.now() - t0) / 1000).toFixed(0)} s)`);
+    } else console.log('modes: check · cues · sheet · frames · video · preview');
+  } finally { P.close(); srv.close(); }
+}