@amg555/frameforge-mcp 2.7.6 → 2.7.7

package/.agent/skills/ai-video-editor/engine/hidpi.js

@@ -1,117 +0,0 @@
-// 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/.agent/skills/ai-video-editor/engine/page.html

@@ -1,43 +0,0 @@
-<!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/.agent/skills/ai-video-editor/engine/player.js

@@ -1,145 +0,0 @@
-// 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/.agent/skills/ai-video-editor/references/example-story-warm-canvas.js

@@ -1,95 +0,0 @@
-// 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/.agent/skills/ai-video-editor/references/story-guide.md

@@ -1,112 +0,0 @@
-# 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/.agent/skills/ai-video-editor/requirements.txt

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