@amg555/frameforge-mcp 2.7.3 → 2.7.7

package/plugins/ai-video-editor/engine/hidpi.js

@@ -0,0 +1,117 @@
+// HiDPI shim for the style engines.
+// Every style draws in a fixed 1280x720 design space. When window.__RENDER.scale (S) is above 1, this file
+// makes every canvas S times bigger internally while the style code still sees 1280x720: canvas sizes,
+// transforms, drawImage of other canvases, patterns, shadows, blur filters and putImageData are all
+// translated. Result: sharp 1080p (S = 1.5) or 4K (S = 3) frames with no change to the style code.
+(function () {
+  const S = (window.__RENDER && window.__RENDER.scale) || 1;
+  if (S === 1) return;
+  const CP = HTMLCanvasElement.prototype;
+  const X = CanvasRenderingContext2D.prototype;
+  const wD = Object.getOwnPropertyDescriptor(CP, 'width');
+  const hD = Object.getOwnPropertyDescriptor(CP, 'height');
+  const LOG = new WeakMap(); // canvas -> { w, h } logical size
+
+  function init(c) {
+    let o = LOG.get(c);
+    if (o) return o;
+    o = { w: wD.get.call(c), h: hD.get.call(c) };
+    LOG.set(c, o);
+    wD.set.call(c, Math.round(o.w * S));
+    hD.set.call(c, Math.round(o.h * S));
+    return o;
+  }
+  const baseT = (ctx) => setT.call(ctx, S, 0, 0, S, 0, 0);
+
+  Object.defineProperty(CP, 'width', {
+    configurable: true, enumerable: true,
+    get() { return init(this).w; },
+    set(v) { const o = init(this); o.w = +v; wD.set.call(this, Math.round(o.w * S)); const x = CTX.get(this); if (x) baseT(x); },
+  });
+  Object.defineProperty(CP, 'height', {
+    configurable: true, enumerable: true,
+    get() { return init(this).h; },
+    set(v) { const o = init(this); o.h = +v; hD.set.call(this, Math.round(o.h * S)); const x = CTX.get(this); if (x) baseT(x); },
+  });
+
+  const CTX = new WeakMap();
+  const getCtx = CP.getContext;
+  CP.getContext = function (type, opts) {
+    init(this);
+    const x = getCtx.call(this, type, opts);
+    if (type === '2d' && x && !CTX.has(this)) { CTX.set(this, x); baseT(x); }
+    return x;
+  };
+
+  const setT = X.setTransform;
+  X.setTransform = function (a, b, c, d, e, f) {
+    if (typeof a === 'object' && a !== null) { const m = a; return setT.call(this, (m.a ?? m.m11) * S, (m.b ?? m.m12) * S, (m.c ?? m.m21) * S, (m.d ?? m.m22) * S, (m.e ?? m.m41) * S, (m.f ?? m.m42) * S); }
+    if (a === undefined) return baseT(this);
+    return setT.call(this, a * S, b * S, c * S, d * S, e * S, f * S);
+  };
+  X.resetTransform = function () { return baseT(this); };
+  const getT = X.getTransform;
+  X.getTransform = function () { const m = getT.call(this); return new DOMMatrix([m.a / S, m.b / S, m.c / S, m.d / S, m.e / S, m.f / S]); };
+
+  const scaled = (src) => src instanceof HTMLCanvasElement && LOG.has(src);
+  const draw = X.drawImage;
+  X.drawImage = function (src, ...a) {
+    if (scaled(src)) {
+      const o = LOG.get(src);
+      if (a.length === 2) return draw.call(this, src, a[0], a[1], o.w, o.h);
+      if (a.length === 8) return draw.call(this, src, a[0] * S, a[1] * S, a[2] * S, a[3] * S, a[4], a[5], a[6], a[7]);
+    }
+    return draw.call(this, src, ...a);
+  };
+
+  const cpat = X.createPattern;
+  const PT = CanvasPattern.prototype, pset = PT.setTransform, SCALED_PAT = new WeakSet();
+  X.createPattern = function (src, rep) {
+    const p = cpat.call(this, src, rep);
+    if (p && scaled(src)) { SCALED_PAT.add(p); pset.call(p, new DOMMatrix().scaleSelf(1 / S, 1 / S)); }
+    return p;
+  };
+  PT.setTransform = function (m) {
+    if (!SCALED_PAT.has(this)) return pset.call(this, m);
+    const M = DOMMatrix.fromMatrix(m || new DOMMatrix()).scaleSelf(1 / S, 1 / S);
+    return pset.call(this, M);
+  };
+
+  // putImageData ignores the transform: draw the pixels through a temporary canvas instead
+  const put = X.putImageData;
+  X.putImageData = function (img, dx, dy, ...rest) {
+    if (!CTX.has(this.canvas)) return put.call(this, img, dx, dy, ...rest);
+    const t = document.createElement('canvas'); LOG.set(t, { w: img.width, h: img.height });
+    wD.set.call(t, img.width); hD.set.call(t, img.height); put.call(getCtx.call(t, '2d'), img, 0, 0);
+    this.save(); setT.call(this, 1, 0, 0, 1, 0, 0); this.globalAlpha = 1; this.globalCompositeOperation = 'source-over'; this.filter = 'none';
+    this.clearRect(dx * S, dy * S, img.width * S, img.height * S);
+    draw.call(this, t, 0, 0, img.width, img.height, dx * S, dy * S, img.width * S, img.height * S);
+    this.restore();
+  };
+  const gid = X.getImageData;
+  X.getImageData = function (x, y, w, h, o) {
+    if (!CTX.has(this.canvas)) return gid.call(this, x, y, w, h, o);
+    // sample the scaled backing store down to logical pixels
+    const t = document.createElement('canvas'); wD.set.call(t, w); hD.set.call(t, h);
+    const tc = getCtx.call(t, '2d'); draw.call(tc, this.canvas, x * S, y * S, w * S, h * S, 0, 0, w, h);
+    return gid.call(tc, 0, 0, w, h, o);
+  };
+
+  // shadows and filters live in device pixels, so scale them too
+  for (const k of ['shadowBlur', 'shadowOffsetX', 'shadowOffsetY']) {
+    const d = Object.getOwnPropertyDescriptor(X, k);
+    Object.defineProperty(X, k, { configurable: true, enumerable: true, get() { return d.get.call(this) / S; }, set(v) { d.set.call(this, v * S); } });
+  }
+  const fD = Object.getOwnPropertyDescriptor(X, 'filter');
+  if (fD) {
+    const FL = new WeakMap();
+    Object.defineProperty(X, 'filter', {
+      configurable: true, enumerable: true,
+      get() { return FL.has(this) ? FL.get(this) : fD.get.call(this); },
+      set(v) { FL.set(this, v); fD.set.call(this, String(v).replace(/(-?\d*\.?\d+)px/g, (m, n) => (parseFloat(n) * S) + 'px')); },
+    });
+    const sv = X.save, rs = X.restore, STK = new WeakMap();
+    X.save = function () { (STK.get(this) || STK.set(this, []).get(this)).push(FL.get(this)); return sv.call(this); };
+    X.restore = function () { const s = STK.get(this); if (s && s.length) { const v = s.pop(); if (v === undefined) FL.delete(this); else FL.set(this, v); } return rs.call(this); };
+  }
+})();

package/plugins/ai-video-editor/engine/page.html

@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>{{TITLE}}</title>
+<link rel="stylesheet" href="{{SKILL}}/assets/fonts/fonts.css">
+<style>
+  :root { color-scheme: dark; --bg: #0b0b0d; --panel: #141417; --ink: #f2f0ea; --dim: #8d8c93; --line: #26262c; --acc: #7aa7ff; }
+  html, body { margin: 0; background: var(--bg); color: var(--ink); font: 14px "Inter", system-ui, sans-serif; }
+  .wrap { max-width: 1180px; margin: 0 auto; padding: 20px 16px 28px; display: grid; gap: 12px; }
+  h1 { font-size: 20px; margin: 0; font-weight: 700; }
+  .meta { color: var(--dim); margin: 0; }
+  .stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
+  .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
+  .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
+  .bar button { font: 600 14px inherit; font-family: inherit; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 7px; padding: 8px 12px; cursor: pointer; }
+  #play { min-width: 82px; background: var(--ink); color: #0b0b0d; border-color: var(--ink); }
+  .track { position: relative; flex: 1 1 260px; min-width: 0; }
+  #scrub { width: 100%; accent-color: var(--acc); }
+  #marks { position: absolute; left: 0; right: 0; top: -6px; height: 4px; pointer-events: none; }
+  #marks i { position: absolute; top: 0; height: 4px; border-radius: 2px; background: var(--acc); opacity: 0.8; }
+  #time { font-variant-numeric: tabular-nums; color: var(--dim); min-width: 110px; text-align: right; }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <h1>{{TITLE}}</h1>
+  <p class="meta">Preview of the edit. Blue marks on the timeline are where graphics play. Space to play or pause.</p>
+  <div class="stage"><canvas id="stage" width="1280" height="720"></canvas></div>
+  <div class="bar">
+    <button id="play" type="button">Play</button>
+    <div class="track"><div id="marks"></div><input id="scrub" type="range" min="0" max="1" step="0.01" value="0" aria-label="Timeline"></div>
+    <span id="time">0:00.0</span>
+    <button id="sound" type="button" aria-pressed="true">Effects on</button>
+  </div>
+</div>
+<script>window.STYLE_FONTS = {{FONTS}}; window.FOOTAGE_URL = {{FOOTAGE}};</script>
+<script src="{{SKILL}}/styles/{{STYLE}}/base.js"></script>
+<script src="{{STORY}}"></script>
+<script src="{{SKILL}}/engine/player.js"></script>
+</body>
+</html>

package/plugins/ai-video-editor/engine/player.js

@@ -0,0 +1,145 @@
+// Editor player for the ai-video-editor skill. Loaded after the style's base.js and your story.js.
+// story.js must define:
+//   var EDIT = {
+//     D: <edited video length in seconds>,
+//     SPANS: [[t0, t1], ...],   // where graphics are on screen; outside them the plain footage plays
+//     draw(ctx, t) { ... },     // draws frame t (only called inside a span); draw the footage yourself with FOOTAGE
+//     score(k) { ... },         // sound effects for the whole timeline, same times as the picture
+//   };
+// FOOTAGE gives the edited A-roll at the current time (the renderer swaps in the exact frame before each draw).
+(function () {
+  const W0 = 1280, H0 = 720;
+  const RENDER = !!window.__RENDER;
+  const clampN = (v, a, b) => (v < a ? a : v > b ? b : v);
+
+  // ---------------- footage source ----------------
+  let el; // <video> in preview, <img> while rendering
+  if (RENDER) {
+    el = new Image();
+    Object.defineProperty(el, 'videoWidth', { get: () => el.naturalWidth });
+    Object.defineProperty(el, 'videoHeight', { get: () => el.naturalHeight });
+  } else {
+    el = document.createElement('video');
+    el.src = window.FOOTAGE_URL || 'cut.mp4'; el.preload = 'auto'; el.playsInline = true; el.crossOrigin = 'anonymous';
+  }
+  const size = () => (RENDER ? [el.naturalWidth, el.naturalHeight] : [el.videoWidth, el.videoHeight]);
+  const FOOTAGE = {
+    el,
+    ready() { const [w] = size(); return w > 0; },
+    // cover-fit the footage into a rect, zoomed by z around the face point (fx, fy as 0..1 of the frame)
+    draw(c, x, y, w, h, z = 1, fx = 0.5, fy = 0.38) {
+      const [sw, sh] = size(); if (!sw) { c.save(); c.fillStyle = '#222'; c.fillRect(x, y, w, h); c.restore(); return; }
+      const s = Math.max(w / sw, h / sh) * z, dw = sw * s, dh = sh * s;
+      let dx = x + w / 2 - fx * dw, dy = y + h * 0.42 - fy * dh;
+      dx = clampN(dx, x + w - dw, x); dy = clampN(dy, y + h - dh, y);
+      c.save(); c.beginPath(); c.rect(x, y, w, h); c.clip(); c.drawImage(el, dx, dy, dw, dh); c.restore();
+    },
+    full(c, z = 1, fx = 0.5, fy = 0.38) { c.save(); c.fillStyle = '#000'; c.fillRect(0, 0, W0, H0); c.restore(); this.draw(c, 0, 0, W0, H0, z, fx, fy); },
+  };
+  window.FOOTAGE = FOOTAGE;
+
+  // Transition between the footage and a full-screen graphics span [a, b], at both edges.
+  // type: 'cut' (none), 'fade', 'push' (sideways), 'up' (vertical). d: seconds per transition.
+  let GL = null;
+  window.gfxInOut = (c, t, a, b, draw, o = {}) => {
+    const type = o.type || 'push', d = o.d == null ? 0.4 : o.d;
+    const u = d > 0 ? Math.min(clampN((t - a) / d, 0, 1), clampN((b - t) / d, 0, 1)) : 1;
+    if (type === 'cut' || u >= 1) { draw(c, t); return; }
+    const entering = t - a < b - t, e = u < 0.5 ? 4 * u * u * u : 1 - Math.pow(-2 * u + 2, 3) / 2;
+    if (!GL) { GL = document.createElement('canvas'); GL.width = W0; GL.height = H0; }
+    const g = GL.getContext('2d'); g.setTransform(1, 0, 0, 1, 0, 0); g.globalAlpha = 1; g.globalCompositeOperation = 'source-over'; g.filter = 'none'; g.clearRect(0, 0, W0, H0);
+    draw(g, t);
+    if (type === 'fade') { FOOTAGE.full(c); c.save(); c.globalAlpha = e; c.drawImage(GL, 0, 0); c.restore(); return; }
+    const dir = entering ? 1 : -1;
+    if (type === 'up') {
+      c.save(); c.translate(0, -e * H0 * dir); FOOTAGE.full(c); c.restore();
+      c.save(); c.translate(0, (1 - e) * H0 * dir); c.drawImage(GL, 0, 0); c.restore(); return;
+    }
+    c.save(); c.translate(-e * W0 * dir, 0); FOOTAGE.full(c); c.restore();
+    c.save(); c.translate((1 - e) * W0 * dir, 0); c.drawImage(GL, 0, 0); c.restore();
+  };
+  // styles built around A-roll (Warm Canvas) read AR.el: point it at the real footage
+  try { if (typeof AR !== 'undefined') AR = { el }; } catch (e) {}
+  try { if (typeof OVERLAY !== 'undefined') OVERLAY = false; } catch (e) {}
+
+  if (typeof EDIT === 'undefined') throw new Error('story.js must define var EDIT = { D, SPANS, draw, score }');
+  const D = EDIT.D, SPANS = (EDIT.SPANS || []).map((s) => [+s[0], +s[1]]).sort((a, b) => a[0] - b[0]);
+  const inSpan = (t) => SPANS.some(([a, b]) => t >= a && t < b);
+  const cvs = document.getElementById('stage'), ctx = cvs.getContext('2d');
+  function frame(t) {
+    ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.globalAlpha = 1; ctx.globalCompositeOperation = 'source-over'; ctx.filter = 'none';
+    if (inSpan(t)) EDIT.draw(ctx, t); else FOOTAGE.full(ctx);
+  }
+
+  // note: never assign window.scoreSound here, it would replace a style's own scoreSound function
+  const SCORE = (k) => EDIT.score(k);
+  window.DURATION = D; window.SPANS = SPANS; window.EDIT_SCORE = SCORE;
+  window.drawAt = frame;
+
+  // ---------------- render hooks (used by scripts/render.py) ----------------
+  window.__renderFrame = async (t, jpegB64, quality) => {
+    if (jpegB64) { el.src = 'data:image/jpeg;base64,' + jpegB64; await el.decode(); }
+    frame(t);
+    return cvs.toDataURL('image/jpeg', quality || 0.93).slice(23);
+  };
+  window.__renderStill = async (t, jpegB64) => {
+    if (jpegB64) { el.src = 'data:image/jpeg;base64,' + jpegB64; await el.decode(); }
+    frame(t); return cvs.toDataURL('image/png').slice(22);
+  };
+  let SFXBUF = null;
+  window.__renderSfx = async (sr) => {
+    const r = await SFX.render(SCORE, D, sr || 48000, { voiceover: true });
+    const n = r.inter.length, pcm = new Int16Array(n);
+    for (let i = 0; i < n; i++) { const v = Math.max(-1, Math.min(1, r.inter[i])); pcm[i] = v < 0 ? v * 32768 : v * 32767; }
+    SFXBUF = new Uint8Array(pcm.buffer); return { bytes: SFXBUF.length, peak: r.peak, frames: r.frames };
+  };
+  window.__sfxChunk = (off, len) => {
+    const part = SFXBUF.subarray(off, Math.min(off + len, SFXBUF.length)); let s = '';
+    for (let i = 0; i < part.length; i += 0x8000) s += String.fromCharCode.apply(null, part.subarray(i, i + 0x8000));
+    return btoa(s);
+  };
+
+  // ---------------- preview player ----------------
+  const ui = { play: document.getElementById('play'), scrub: document.getElementById('scrub'), time: document.getElementById('time'), sound: document.getElementById('sound'), marks: document.getElementById('marks') };
+  let T = 0, playing = false, last = 0, soundOn = true, stopSound = null;
+  const fmt = (t) => { const m = Math.floor(t / 60), s = (t % 60).toFixed(1).padStart(4, '0'); return m + ':' + s; };
+  async function show() {
+    if (!RENDER && !playing && el.readyState >= 1 && Math.abs(el.currentTime - T) > 0.02) {
+      await new Promise((res) => { el.addEventListener('seeked', res, { once: true }); el.currentTime = Math.min(T, (el.duration || D) - 0.02); });
+    }
+    frame(T); if (ui.scrub) ui.scrub.value = T; if (ui.time) ui.time.textContent = fmt(T) + ' / ' + fmt(D);
+  }
+  window.seek = (t) => { T = clampN(t, 0, D); return show(); };
+  function startSound() { stopSnd(); if (playing && soundOn) stopSound = SFX.live(SCORE, T, { voiceover: true }); }
+  function stopSnd() { if (stopSound) { stopSound(); stopSound = null; } }
+  function setPlaying(p) {
+    playing = p; if (ui.play) ui.play.textContent = p ? 'Pause' : 'Play';
+    if (p) { el.currentTime = T; el.muted = false; el.play().catch(() => {}); last = performance.now(); startSound(); } else { el.pause(); stopSnd(); }
+  }
+  function tick(now) {
+    if (playing) {
+      T = el.readyState >= 2 && !el.paused ? el.currentTime : T + (now - last) / 1000; last = now;
+      if (T >= D) { T = D; setPlaying(false); }
+      frame(T); if (ui.scrub) ui.scrub.value = T; if (ui.time) ui.time.textContent = fmt(T) + ' / ' + fmt(D);
+    }
+    requestAnimationFrame(tick);
+  }
+  if (!RENDER && ui.play) {
+    ui.scrub.max = D;
+    ui.play.addEventListener('click', () => { if (!playing && T >= D - 0.01) T = 0; setPlaying(!playing); });
+    ui.scrub.addEventListener('input', () => { T = parseFloat(ui.scrub.value); if (playing) { el.currentTime = T; startSound(); } else show(); });
+    ui.sound.addEventListener('click', () => { soundOn = !soundOn; ui.sound.setAttribute('aria-pressed', soundOn); ui.sound.textContent = soundOn ? 'Effects on' : 'Effects off'; startSound(); });
+    if (ui.marks) ui.marks.innerHTML = SPANS.map(([a, b]) => `<i style="left:${(a / D) * 100}%;width:${((b - a) / D) * 100}%"></i>`).join('');
+    document.addEventListener('keydown', (e) => { if (e.code === 'Space') { e.preventDefault(); ui.play.click(); } });
+  }
+
+  // ---------------- startup: fonts first, then the first frame ----------------
+  (async () => {
+    const want = window.STYLE_FONTS || [];
+    try { await Promise.all(want.map((f) => document.fonts.load(f, 'AaZz09'))); await document.fonts.ready; } catch (e) {}
+    if (!RENDER) { await new Promise((res) => { if (el.readyState >= 2) res(); else { el.addEventListener('loadeddata', res, { once: true }); setTimeout(res, 4000); } }); }
+    T = SPANS.length ? SPANS[0][0] + 0.5 : 0; await show();
+    window.__ready = true;
+    if (!RENDER) requestAnimationFrame((n) => { last = n; tick(n); });
+  })();
+})();

package/plugins/ai-video-editor/references/example-story-warm-canvas.js

@@ -0,0 +1,95 @@
+// Example story.js (Warm Canvas) for a 21.8 s edited clip. Times are seconds in cut.mp4 (transcript_edited.txt).
+// Script of the clip: "Hey everyone, welcome back to the channel. Today I'm going to show you how to edit a video with AI
+// for free. The first step is cutting out the silent parts. Then we add motion graphics that explain the idea. Most editors
+// charge around five hundred dollars for this. And the best part is, it costs nothing."
+var TL = {
+  cap1: { words: [5.29, 5.61, 5.75, 6.13, 6.45, 6.65, 6.91], out: 7.45 },
+  steps: { title: 7.75, cardA: 8.36, waveCut: 9.9, arrow: 11.15, cardB: 11.7, out: 14.55 },
+  cost: { title: 14.96, cardA: 15.3, cnt: [16.6, 17.5], cardB: 19.3, zero: 20.7 },
+};
+
+// a voice waveform; the quiet gaps shrink away when cut
+function waveStrip(c, x, y, w, h, cutP) {
+  const r = CM.rng('wave'), bars = 34, gaps = [9, 10, 22, 23, 24];
+  let cx = x; const bw = w / bars;
+  for (let i = 0; i < bars; i++) {
+    const gap = gaps.includes(i), k = gap ? 1 - cutP : 1;
+    const amp = gap ? 0.08 : 0.25 + r() * 0.7;
+    if (k > 0.02) {
+      c.fillStyle = gap ? C.red : C.sky; c.globalAlpha = gap ? 0.55 * k : 1;
+      rr(c, cx + 2, y + h / 2 - (amp * h) / 2, Math.max(1, bw * k - 4), amp * h, 3); c.fill(); c.globalAlpha = 1;
+    }
+    cx += bw * k;
+  }
+}
+function stepCard(c, x, y, n, title, sub, draw) {
+  const w = 360, h = 330; shadowCard(c, x, y, w, h, 22);
+  c.save(); c.fillStyle = C.sky; rr(c, x + 26, y + 26, 52, 52, 14); c.fill(); c.font = SERIF(32, 600); c.fillStyle = '#fff'; c.textAlign = 'center'; c.fillText(String(n), x + 52, y + 63); c.restore();
+  c.font = SERIF(32, 600); c.letterSpacing = LS(32); c.fillStyle = C.ink; c.fillText(title, x + 96, y + 62); c.letterSpacing = '0px';
+  c.font = SANS(18, 500); c.fillStyle = C.sub; c.fillText(sub, x + 28, y + 118);
+  draw(x + 28, y + 150, w - 56, 140);
+}
+
+function sceneTalk(c, t) {
+  FOOTAGE.full(c, 1.08, 0.5, 0.36);
+  const k = TL.cap1.words;
+  caption(c, t, [[['Edit', k[0]], ['a', k[1]], ['video', k[2]]], [['with', k[3]], ['AI', k[4], C.sky], ['for', k[5], C.sky], ['free', k[6], C.sky]]], TL.cap1.out);
+}
+
+function sceneSteps(c, t) {
+  canvasBG(c); pip(c, t);
+  const S = TL.steps;
+  titleChip(c, [['Two ', C.ink], ['steps', C.sky]], t, S.title, S.out);
+  const a = fadeOut(t, S.out);
+  if (t > S.cardA) { c.save(); c.globalAlpha = a; enter(c, t, S.cardA);
+    stepCard(c, 70, 220, 1, 'Cut the pauses', 'Silent gaps get removed', (x, y, w, h) => {
+      c.save(); c.fillStyle = C.head; rr(c, x, y, w, h, 14); c.fill(); c.restore();
+      waveStrip(c, x + 14, y + 10, w - 28, h - 20, inout(span(t, S.waveCut, S.waveCut + 0.7)));
+    }); c.restore(); }
+  c.save(); c.globalAlpha = a; dashArrow(c, 448, 385, 64, span(t, S.arrow, S.arrow + 0.35)); c.restore();
+  if (t > S.cardB) { c.save(); c.globalAlpha = a; enter(c, t, S.cardB);
+    stepCard(c, 532, 220, 2, 'Add graphics', 'Only where they explain', (x, y, w, h) => {
+      c.save(); c.fillStyle = C.head; rr(c, x, y, w, h, 14); c.fill();
+      const p = outC(span(t, S.cardB + 0.4, S.cardB + 0.9));
+      shadowCard(c, x + 24, y + 22, (w - 48) * p, 40, 10, { blur: 12, offY: 4 });
+      c.globalAlpha *= p; tag(c, x + 36, y + 30, 'Title', C.skyTint, C.skyDeep, 15);
+      const q = outC(span(t, S.cardB + 0.8, S.cardB + 1.3)); c.globalAlpha = a * q;
+      shadowCard(c, x + 24, y + 76, (w - 48) * 0.7, 40, 10, { blur: 12, offY: 4 }); tag(c, x + 36, y + 84, 'Chart', C.purpleTint, C.purple, 15);
+      c.restore();
+    }); c.restore(); }
+}
+
+function sceneCost(c, t) {
+  canvasBG(c); pip(c, t);
+  const K = TL.cost;
+  titleChip(c, [['What it ', C.ink], ['costs', C.sky]], t, K.title, 99);
+  const card = (x, t0, label, tagBg, value, valCol, footOk, foot, footT) => {
+    if (t < t0) return; c.save(); enter(c, t, t0);
+    shadowCard(c, x, 220, 360, 330, 22);
+    c.font = SERIF(96, 600); c.letterSpacing = LS(96); c.fillStyle = valCol; c.textAlign = 'center'; c.fillText(value, x + 180, 380); c.letterSpacing = '0px';
+    c.font = SANS(22, 600); c.fillStyle = C.sub; c.fillText(label, x + 180, 430); c.textAlign = 'left';
+    cardFooter(c, x, 515, 360, footOk, foot, span(t, footT, footT + 0.3)); c.restore();
+  };
+  const n = Math.round(500 * outC(span(t, K.cnt[0], K.cnt[1])));
+  card(70, K.cardA, 'Hiring an editor', C.purpleSoft, '$' + n, C.ink, false, 'Per video', K.cnt[1]);
+  card(532, K.cardB, 'This skill', C.sky, '$0', C.skyDeep, true, 'Runs on your computer', K.zero);
+}
+
+var SCENES = [sceneTalk, sceneSteps, sceneCost];
+var CUTS = [{ t: 7.6 }, { t: 14.85 }];
+function storyDraw(c, t) { let i = 0; for (const cu of CUTS) if (t >= cu.t) i++; SCENES[i](c, t); }
+
+function storyScore(k) {
+  const tap = (t, g = 1, pan = 0) => { k.voice(t, { f: [[0, 120], [0.12, 60]], dur: 0.2, gain: 0.16 * g, pan, soft: true }); k.hiss(t, { color: 'brown', dur: 0.06, filter: 'lowpass', ff: 650, gain: 0.06 * g, pan, soft: true }); };
+  const slide = (t, g = 1, pan = 0) => k.hiss(t, { color: 'pink', dur: 0.32, filter: 'bandpass', ff: [[0, 380], [0.3, 1100]], q: 0.8, gain: 0.08 * g, a: 0.12, pan, soft: true });
+  const S = TL.steps, K = TL.cost;
+  k.voice(S.title - 0.2, { type: 'triangle', f: 'D3', dur: 14.4, gain: 0.022, a: 1.2, hold: 12, filter: 'lowpass', ff: 700, verb: 0.3, bus: 'music' });
+  slide(S.title, 0.7); slide(S.cardA, 0.9, -0.4);
+  k.hiss(S.waveCut, { color: 'pink', dur: 0.6, filter: 'bandpass', ff: [[0, 1200], [0.6, 420]], q: 0.9, gain: 0.07, a: 0.1 });
+  slide(S.arrow, 0.5); slide(S.cardB, 0.9, 0.4); tap(S.cardB + 0.45, 0.5); tap(S.cardB + 0.85, 0.5);
+  slide(K.title, 0.7); slide(K.cardA, 0.9, -0.4);
+  const r = CM.rng('cnt'); for (let x = K.cnt[0]; x < K.cnt[1]; x += 0.07 + r() * 0.05) k.hiss(x, { dur: 0.014, filter: 'bandpass', ff: 1500 + r() * 500, q: 1.8, gain: 0.05, soft: true });
+  tap(K.cnt[1], 0.8); slide(K.cardB, 0.9, 0.4); tap(K.zero, 0.8, 0.4);
+}
+
+var EDIT = { D: 21.8, SPANS: [[5.2, 7.5], [7.6, 21.8]], draw: storyDraw, score: storyScore };

package/plugins/ai-video-editor/references/story-guide.md

@@ -0,0 +1,112 @@
+# Writing story.js
+
+story.js is the only code you write for an edit. It draws the motion graphics for the edited video
+(cut.mp4) in one of the seven styles. The page loads, in order:
+
+1. `styles/<style>/base.js`: the style engine, unchanged from the Motion Graphics Style Library reference. It holds
+   CM (helpers and seeded randomness), SFX (synthesized sound kit), the style's palette `C`, fonts, drawing
+   helpers, and the reference demo (scene functions, `explainer`, `scoreSound`) as a worked example.
+2. `story.js`: yours.
+3. `engine/player.js`: the editor player. It defines `FOOTAGE`, `gfxInOut`, `window.seek` and the render hooks.
+
+## The contract
+
+```js
+var EDIT = {
+  D: 312.4,                         // length of cut.mp4 in seconds (edit.json "cut_seconds")
+  SPANS: [[12.1, 18.6], [40.0, 52.3]], // where graphics are on screen. Outside them the plain footage plays.
+  draw(ctx, t) { ... },             // draws frame t, only called inside a span. Design space is 1280 x 720.
+  score(k) { ... },                 // all sound effects for the whole video, at the same times as the picture
+};
+```
+
+- Times are seconds of the EDITED video. Take them from `transcript_edited.txt` / `transcript_edited.json`.
+- Start a span about 0.1 to 0.3 s before the first word it illustrates; end it when the idea is done.
+  Leave plain footage between spans. Spans must not overlap.
+- Every frame is a pure function of t (the renderer draws frames out of order on several workers).
+  Use `CM.rng(seed)` and `CM.noise1(seed)`, never `Math.random`. Caching static layers is fine.
+- Keep each frame fast (well under 50 ms). Make offscreen canvases once (`CM.layer(w, h)`), not per frame.
+- Declare `TL`, `CUTS`, `PUNCH`, `SCENES` with `var` if you reuse those names (base.js declares them with var
+  so you can redefine them). Name your own scene functions freshly (for example `gfxIntro`, `gfxSteps`).
+- Never assign `window.scoreSound` or `window.seek`, and do not redefine the style's helpers unless you mean to
+  change them everywhere.
+- Draw at 1280 x 720 always. The renderer makes it sharp at 1080p or 4K by itself.
+- Text in any script works: Devanagari falls back to Noto Sans Devanagari inside every style font.
+
+## Footage
+
+```js
+FOOTAGE.full(c, z = 1, fx = 0.5, fy = 0.38)      // the footage full frame, zoomed z around the face point
+FOOTAGE.draw(c, x, y, w, h, z, fx, fy)           // cover-fit into any rect (picture-in-picture, cards, phones)
+gfxInOut(c, t, a, b, drawFn, { type, d })        // full-screen graphics for span [a, b] with an entrance and exit
+                                                 // from/to the footage: type 'push' | 'up' | 'fade' | 'cut'
+```
+
+`FOOTAGE` is always the footage at time t. Warm Canvas's own A-roll helpers (`fullARoll`, `pip`,
+`arollFeed`) already use it, so call them directly.
+
+## Two ways to use a style
+
+**Talking-head styles (Warm Canvas):** the speaker stays the star. Mode 1 is full-frame footage with a caption
+(`caption()`) or side chips (`sideChip()`); mode 2 is the warm canvas with the speaker in the PiP (`canvasBG()`,
+`pip()`) and cards in the left column (`COLX`). See `references/example-story-warm-canvas.js`, a complete,
+rendered example.
+
+**Full-screen styles (Creator Motion Graphics, Chalk Talk, Clean Tech, Software Walkthrough, Data Story,
+Pop Info):** the graphics replace the picture for a beat while the voice continues, then cut back to the
+speaker. Wrap each beat in `gfxInOut` (or use the style's own transitions between beats inside one span).
+Creator Motion Graphics also works over the footage: draw `FOOTAGE.full(c)`, darken it
+(`c.fillStyle = 'rgba(0,0,0,0.55)'; c.fillRect(0, 0, 1280, 720)`), then its kinetic words on top.
+
+To learn a style, read in base.js everything after the `STYLE:` banner: the palette, the helpers, and the demo
+scene functions (`sceneXxx`), which show exactly how backgrounds, type, cards and motion are built. Copy their
+patterns and invent new content for this video. The demo's own `explainer(ctx, t)` composites its scenes with
+`CUTS`; you can build your own small compositor the same way, or call one scene function per span.
+
+A useful pattern for long videos: one function per beat, each with its own local time.
+
+```js
+var BEATS = [
+  { a: 12.1, b: 18.6, draw: gfxIntro },
+  { a: 40.0, b: 52.3, draw: gfxSteps },
+];
+var EDIT = {
+  D: 312.4,
+  SPANS: BEATS.map((x) => [x.a, x.b]),
+  draw(c, t) { const x = BEATS.find((x) => t >= x.a && t < x.b); gfxInOut(c, t, x.a, x.b, (g, tt) => x.draw(g, tt, tt - x.a), { type: 'push' }); },
+  score(k) { BEATS.forEach((x) => x.sound && x.sound(k, x.a)); },
+};
+```
+
+## Sound
+
+- `score(k)` gets the SFX kit: `k.play(name, t, opts)` for the named sounds in base.js (`slam`, `whoosh`, `click`,
+  `tick`, `keys`, `marker`, `strike`, `stamp`, `boom`, ...), plus `k.voice()`, `k.hiss()`, `k.drone()`.
+  Each style's demo `scoreSound` shows its own palette (Warm Canvas: soft paper slides, low wooden taps).
+- The mix is always rendered in voiceover mode (music bus low, `soft` sounds at 55%), because it sits under
+  a real voice. Keep it sparse: one sound per visual event that deserves one, never more than two at once.
+- No chimes, bells, pings, sparkles or high-pitched game-style pops (`ping`, `shimmer`, `sparkle`, `pop`).
+  No music beat under speech.
+- Every sound time must come from the same TL numbers as the picture.
+
+## Taste rules (the user's defaults)
+
+- Add motion graphics only where they communicate something: a list, a number, a comparison, a process, a
+  definition, a before/after. Never decoration for its own sake. Plenty of the video stays plain footage.
+- Never put a small coloured label or tag above a title or heading. Put supporting text below or beside.
+- One idea per beat; on-screen words are short (2 to 6 words), spelled exactly as spoken where possible.
+- Double-check any facts and numbers you show; if the speaker says them, match what they said.
+- Follow the style's own rules in `styles/<style>/style.md`. Ignore the parts of that file about storyboards,
+  asking for a topic, the player, target duration or rendering: this skill handles those.
+
+## Checking your work
+
+```
+python scripts/render.py WORK --check           # loads the page; prints errors, spans, output size
+python scripts/render.py WORK --stills auto     # 3 stills per span -> WORK/stills/contact.png
+python scripts/render.py WORK --stills 14.2,15  # stills at chosen times
+```
+
+Open the contact sheet (it is an image file) and look at it: text inside the frame and not overlapping,
+nothing covering the speaker's face in a PiP, readable sizes, the style's look. Fix and re-check before
+the full render.

package/plugins/ai-video-editor/requirements.txt

@@ -0,0 +1,4 @@
+faster-whisper>=1.1
+playwright>=1.40
+numpy
+pillow