@pixerate/editor 0.123.0 → 0.124.1

package/dist/{chunk-IPFRWILU.js → chunk-ORHMVUR6.js}

@@ -1,13 +1,25 @@
+import {
+  EffectControlError,
+  EffectRendererPool,
+  EffectUnsupportedError,
+  EffectsSlot,
+  createEffectPixels,
+  effectValueErrors
+} from "./chunk-QEG3GRN2.js";
+import {
+  validateJsonSchema
+} from "./chunk-4FX5ACVG.js";
+
 // src/video-editor/types.ts
 var VIDEO_FITS = ["contain", "cover", "fill", "none"];
-var VIDEO_TRANSITION_TYPES = ["crossfade", "dip", "wipe", "push", "slide", "iris"];
+var VIDEO_TRANSITION_TYPES = ["crossfade", "dip", "wipe", "push", "slide", "iris", "effect"];
 var VIDEO_WIPE_DIRECTIONS = ["left", "right", "up", "down"];
 var videoTransitionAudioCurve = (t) => t.audioCurve ?? (t.type === "dip" ? "linear" : "equal-power");
 var VIDEO_BLEND_MODES = ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "add"];
 var VIDEO_CLIP_ANIMATION_EFFECTS = ["fade", "rise", "drop", "slide-left", "slide-right", "zoom", "pop"];
 var VIDEO_FADE_CURVES = ["linear", "equal-power", "s-curve", "exponential", "logarithmic"];
 var VIDEO_PLACEMENT_MODES = ["refuse", "overwrite", "insert"];
-var VIDEO_CLIP_TYPES = ["media", "text", "color", "sequence"];
+var VIDEO_CLIP_TYPES = ["media", "text", "color", "sequence", "effect"];
 
 // src/video-editor/keyframes.ts
 var VIDEO_EASE_NAMES = ["linear", "hold", "ease-in", "ease-out", "ease-in-out"];
@@ -953,6 +965,11 @@ function videoClipAnimated(clip, project) {
 }
 
 // src/video-editor/evaluate.ts
+function videoEffectValuesAt(values, clipTime) {
+  const out = {};
+  for (const [k, v] of Object.entries(values ?? {})) out[k] = isVideoKeyframes(v) ? videoValueAt(v, clipTime, 0) : v;
+  return out;
+}
 function videoTransformAt(transform, clipTime = 0) {
   return { x: videoValueAt(transform?.x, clipTime, 0), y: videoValueAt(transform?.y, clipTime, 0), scale: videoValueAt(transform?.scale, clipTime, 1), rotation: videoValueAt(transform?.rotation, clipTime, 0) };
 }
@@ -1068,12 +1085,14 @@ function tracksAt(project, tracks, time, scope) {
       let wipe;
       let dip = null;
       let iris;
+      let effectIn;
       let shift = 0;
       let shiftDirection = "right";
       if (incoming) {
         if (incoming.type === "crossfade") opacity *= incoming.progress;
         else if (incoming.type === "wipe") wipe = { direction: incoming.transition.direction ?? "right", progress: incoming.progress };
         else if (incoming.type === "iris") iris = { progress: incoming.progress };
+        else if (incoming.type === "effect") effectIn = incoming;
         else if (incoming.type === "push" || incoming.type === "slide") {
           shiftDirection = incoming.transition.direction ?? "right";
           shift = videoTransitionEase(incoming.progress) - 1;
@@ -1100,14 +1119,279 @@ function tracksAt(project, tracks, time, scope) {
       if (clip.type === "sequence") Object.assign(layer, { sequence: clip.sequence, sourceTime, layers: nested.layers });
       if (clip.type === "text") layer.text = videoTextStyle(clip);
       if (clip.type === "color") layer.color = clip.color;
+      if (clip.type === "effect") layer.generator = { effect: clip.effect, ...clip.name ? { name: clip.name } : {}, values: videoEffectValuesAt(clip.values, clipTime), time: Math.max(0, clipTime) };
+      const effects = (clip.effects ?? []).filter((e) => e.enabled !== false).map((e) => ({ id: e.id, effect: e.effect, ...e.name ? { name: e.name } : {}, opacity: clamp012(videoValueAt(e.opacity, clipTime, 1)), values: videoEffectValuesAt(e.values, clipTime), time: clipTime })).filter((e) => e.opacity > 0);
+      if (effects.length) layer.effects = effects;
+      if (effectIn) {
+        const before = videoClipBefore(track, clip);
+        const i = before ? layers.findIndex((l) => l.clip === prefix + before.id && l.track === track.id) : -1;
+        const from = i >= 0 ? layers.splice(i, 1)[0] : null;
+        const t = effectIn.transition;
+        layer.transitionEffect = { effect: t.effect.effect, ...t.effect.name ? { name: t.effect.name } : {}, values: videoEffectValuesAt(t.effect.values, 0), progress: effectIn.progress, time: effectIn.progress * t.duration, from };
+      }
       if (layer.opacity > 0) layers.push(layer);
       if (dip && dip.opacity > 0) layers.push({ clip: `transition:${prefix}${incoming ? clip.id : outgoing.next.id}`, track: track.id, type: "color", color: dip.color, opacity: clamp012(dip.opacity), rect: { x: 0, y: 0, width: project.width, height: project.height }, rotation: 0 });
     }
   }
   return { layers, audio };
 }
+function videoLayersWithoutTransitionEffects(layers) {
+  return layers.flatMap((l) => {
+    const t = l.transitionEffect;
+    if (!t) return [l];
+    const { transitionEffect: _t, ...rest } = l;
+    const self = { ...rest, opacity: rest.opacity * t.progress };
+    return t.from ? [t.from, self] : [self];
+  });
+}
 function videoFrameLeafLayers(layers) {
-  return layers.flatMap((l) => l.layers ? videoFrameLeafLayers(l.layers) : [l]);
+  return layers.flatMap((l) => [...l.transitionEffect?.from ? videoFrameLeafLayers([l.transitionEffect.from]) : [], ...l.layers ? videoFrameLeafLayers(l.layers) : [l]]);
+}
+
+// src/video-editor/effects.ts
+function videoProjectEffects(project) {
+  const out = [];
+  for (const { track } of allVideoTracks(project)) for (const clip of track.clips) out.push(...videoClipEffectUses(clip));
+  return out;
+}
+var refFields = (r) => ({ effect: r.effect, ...r.name ? { name: r.name } : {}, ...r.provider ? { provider: r.provider } : {} });
+function videoClipEffectUses(clip) {
+  const out = [];
+  if (clip.type === "effect") out.push({ clip: clip.id, kind: "generator", ...refFields(clip), enabled: true });
+  if (clip.transition?.type === "effect" && clip.transition.effect) out.push({ clip: clip.id, kind: "transition", ...refFields(clip.transition.effect), enabled: true });
+  for (const e of clip.effects ?? []) out.push({ clip: clip.id, kind: "clip", instance: e.id, ...refFields(e), enabled: e.enabled !== false });
+  return out;
+}
+var videoLayersUseEffects = (layers) => layers.some((l) => !!(l.effects?.length || l.generator || l.transitionEffect || l.layers && videoLayersUseEffects(l.layers)));
+var videoEffectFrameTime = (time, fps) => Math.floor(time * fps / 1e3 + 1e-6) * 1e3 / fps;
+var PLACEMENT = /* @__PURE__ */ new Set(["opacity", "rect", "rotation", "blend", "wipe", "iris", "grade", "track"]);
+var round = (_k, v) => typeof v === "number" ? Math.round(v * 100) / 100 : v;
+function videoEffectLayerKey(layer, width, height) {
+  const content = layer.transitionEffect ? layer : Object.fromEntries(Object.entries(layer).filter(([k]) => !PLACEMENT.has(k)));
+  return `${width}x${height}:${JSON.stringify(content, round)}`;
+}
+function mixEffectPixels(a, b, k) {
+  if (k >= 1) return b;
+  const out = createEffectPixels(a.width, a.height);
+  for (let i = 0; i < out.data.length; i++) out.data[i] = a.data[i] + (b.data[i] - a.data[i]) * k;
+  return out;
+}
+function overEffectPixels(base, top, opacity = 1) {
+  const out = createEffectPixels(base.width, base.height);
+  const o = out.data;
+  const b = base.data;
+  const t = top.data;
+  for (let i = 0; i < o.length; i += 4) {
+    const ta = t[i + 3] / 255 * opacity;
+    const ba = b[i + 3] / 255;
+    const a = ta + ba * (1 - ta);
+    o[i + 3] = Math.round(a * 255);
+    if (a <= 0) continue;
+    for (let c = 0; c < 3; c++) o[i + c] = (t[i + c] * ta + b[i + c] * ba * (1 - ta)) / a;
+  }
+  return out;
+}
+function defaultToImage(p) {
+  const data = new Uint8ClampedArray(p.data);
+  if (typeof ImageData === "undefined") return null;
+  const image = new ImageData(data, p.width, p.height);
+  if (typeof OffscreenCanvas !== "undefined") {
+    const c = new OffscreenCanvas(p.width, p.height);
+    c.getContext("2d")?.putImageData(image, 0, 0);
+    return c;
+  }
+  if (typeof document !== "undefined") {
+    const c = document.createElement("canvas");
+    c.width = p.width;
+    c.height = p.height;
+    c.getContext("2d")?.putImageData(image, 0, 0);
+    return c;
+  }
+  return null;
+}
+var VideoEffectsEngine = class {
+  slot;
+  cache = /* @__PURE__ */ new Map();
+  pending = /* @__PURE__ */ new Map();
+  failures = /* @__PURE__ */ new Map();
+  pool;
+  descriptions = /* @__PURE__ */ new Map();
+  listeners = /* @__PURE__ */ new Set();
+  maxEntries;
+  toImage;
+  generation = 0;
+  detach;
+  constructor(options = {}) {
+    this.slot = options.slot ?? new EffectsSlot();
+    this.maxEntries = options.maxEntries ?? 120;
+    this.toImage = options.toImage ?? defaultToImage;
+    this.pool = new EffectRendererPool({ maxRenderers: options.maxRenderers });
+    this.detach = this.slot.subscribe(() => {
+      this.reset();
+      this.notify();
+    });
+  }
+  get provider() {
+    return this.slot.provider;
+  }
+  /** True when a provider is registered, so effects can be drawn. */
+  get available() {
+    return !!this.slot.provider;
+  }
+  /** The drawable picture for `key`, or `undefined` when it is not rendered (yet). */
+  get(key) {
+    const e = this.cache.get(key);
+    if (!e) return void 0;
+    this.cache.delete(key);
+    this.cache.set(key, e);
+    if (e.image === void 0) e.image = this.toImage(e.pixels);
+    return e.image;
+  }
+  /** The rendered pixels for `key`. */
+  pixels(key) {
+    return this.cache.get(key)?.pixels;
+  }
+  /** Why the render for `key` failed, if it did (it is not retried until the cache is cleared). */
+  failure(key) {
+    return this.failures.get(key);
+  }
+  /** Every failure so far, newest last. */
+  failuresList() {
+    return [...this.failures].map(([key, error]) => ({ key, error }));
+  }
+  /** Whether `key` is being rendered. */
+  isPending(key) {
+    return this.pending.has(key);
+  }
+  /**
+   * Starts rendering `job` into `key` unless it is cached, pending or failed. Returns true while
+   * the picture is on its way (so the frame is waiting for it).
+   */
+  request(key, job) {
+    if (this.cache.has(key)) return false;
+    if (this.pending.has(key)) return true;
+    if (this.failures.has(key) || !this.slot.provider) return false;
+    const generation = this.generation;
+    const run = this.run(job).then((pixels) => {
+      if (generation !== this.generation) return;
+      this.cache.set(key, { pixels });
+      while (this.cache.size > this.maxEntries) this.cache.delete(this.cache.keys().next().value);
+    }).catch((error) => {
+      if (generation !== this.generation) return;
+      this.failures.set(key, error instanceof Error ? error : new Error(String(error)));
+    }).finally(() => {
+      if (this.pending.get(key) === run) this.pending.delete(key);
+      if (generation === this.generation) this.notify();
+    });
+    this.pending.set(key, run);
+    return true;
+  }
+  /** Resolves when nothing is being rendered. */
+  async idle() {
+    while (this.pending.size) await Promise.all([...this.pending.values()]);
+  }
+  /** Renders a job now, without the cache. Rejects with the provider's error. */
+  async run(job) {
+    const provider = this.slot.require();
+    if (job.kind === "transition") {
+      const out = await this.render(provider, job.effect, job.from.width, job.from.height, { time: job.time, progress: job.progress, values: job.values, inputs: { from: job.from, to: job.to } });
+      return out;
+    }
+    let cur;
+    if (job.kind === "generator") cur = await this.render(provider, job.effect, job.width, job.height, { time: job.time, values: job.values });
+    else cur = job.input;
+    return this.stack(provider, cur, job.effects);
+  }
+  async stack(provider, input, effects) {
+    let cur = input;
+    for (const e of effects) {
+      const d = await this.describe(provider, e.effect);
+      if (d.inputs.some((i) => i.name === "source")) {
+        const out = await this.render(provider, e.effect, cur.width, cur.height, { time: e.time, values: e.values, inputs: { source: cur } });
+        cur = mixEffectPixels(cur, out, e.opacity);
+      } else {
+        const out = await this.render(provider, e.effect, cur.width, cur.height, { time: e.time, values: e.values });
+        cur = overEffectPixels(cur, out, e.opacity);
+      }
+    }
+    return cur;
+  }
+  /** The provider's description of an effect, fetched once. */
+  describe(provider, id) {
+    let d = this.descriptions.get(id);
+    if (!d) {
+      d = Promise.resolve().then(() => provider.describe(id));
+      d.catch(() => this.descriptions.delete(id));
+      this.descriptions.set(id, d);
+    }
+    return d;
+  }
+  /** Renders through the pool: a few live renderers, one render at a time on each. */
+  render(provider, id, width, height, request) {
+    return this.pool.render(provider, id, { width, height }, request);
+  }
+  /** Forgets every picture and failure and disposes the renderers (e.g. after the provider changes). */
+  reset() {
+    this.generation++;
+    this.cache.clear();
+    this.pending.clear();
+    this.failures.clear();
+    this.descriptions.clear();
+    this.pool.clear();
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  notify() {
+    for (const l of [...this.listeners]) l();
+  }
+  destroy() {
+    this.reset();
+    this.detach();
+    this.listeners.clear();
+  }
+};
+var VIDEO_EFFECT_PLACES = {
+  /** A clip's effect stack: filters change the picture, overlays draw over it. */
+  clip: ["filter", "overlay"],
+  transition: ["transition"],
+  /** An effect clip's picture. */
+  generator: ["generator", "title", "overlay"]
+};
+function checkVideoEffectPlace(d, place) {
+  const allowed = VIDEO_EFFECT_PLACES[place];
+  if (d.kind === "motion" || !d.uses.some((u) => allowed.includes(u))) {
+    const where = place === "clip" ? "on a clip" : place === "transition" ? "as a transition" : "as an effect clip";
+    const instead = d.uses.includes("transition") ? "set_video_effect_transition" : d.uses.some((u) => VIDEO_EFFECT_PLACES.generator.includes(u)) ? "add_video_effect_clip" : d.uses.some((u) => u === "filter") ? "apply_effect" : null;
+    throw new EffectUnsupportedError(
+      `"${d.id}" (${d.name}) is a ${d.uses.join(" / ")} effect and cannot be used ${where}, which takes ${allowed.join(" or ")} effects${instead ? `; use ${instead} instead` : ""}. search_effects with use "${allowed[0]}" lists ones that fit.`,
+      d.id
+    );
+  }
+}
+function checkVideoEffectValues(d, values, options = {}) {
+  const plain = {};
+  const errors = [];
+  for (const [k, v] of Object.entries(values ?? {})) {
+    if (!isVideoKeyframes(v)) {
+      plain[k] = v;
+      continue;
+    }
+    const schema = d.controls.properties[k];
+    const type = schema?.type;
+    if (!options.keyframes) errors.push({ path: `/${k}`, message: "cannot be keyframed here; give a plain value." });
+    else if (!schema) errors.push({ path: `/${k}`, message: `is not a control of "${d.id}"; its controls are ${Object.keys(d.controls.properties).join(", ") || "none"}.` });
+    else if (type !== "number" && type !== "integer") errors.push({ path: `/${k}`, message: "only number controls can be keyframed." });
+    else for (const [i, key] of v.keys.entries()) for (const e of validateJsonSchema(key.v, schema)) errors.push({ path: `/${k}/keys/${i}/v`, message: e.message });
+  }
+  for (const e of effectValueErrors(d, plain)) {
+    const name = e.path.split("/")[1];
+    const about = name && d.controls.properties[name]?.description;
+    errors.push(about ? { path: e.path, message: `${e.message} (${about})` } : e);
+  }
+  if (errors.length) throw new EffectControlError(d.id, errors);
+  return { ...options.base ?? d.defaults, ...values ?? {} };
 }
 
 // src/video-editor/render.ts
@@ -1127,7 +1411,7 @@ function videoWipeRect(rect, wipe) {
 function videoFrameToSvg(frame, options = {}, assets = []) {
   const defs = [];
   const posters = new Map(assets.map((a) => [a.id, a.poster]));
-  const draw = (layers, prefix) => layers.map((layer, index) => {
+  const draw = (layers, prefix) => videoLayersWithoutTransitionEffects(layers).map((layer, index) => {
     const i = `${prefix}${index}`;
     const { rect } = layer;
     const attrs = [];
@@ -1168,7 +1452,7 @@ function videoFrameToSvg(frame, options = {}, assets = []) {
       const href = options.imageFor ? options.imageFor(layer, frame) : layer.assetKind === "image" ? layer.src ?? null : posters.get(layer.asset ?? "") ?? null;
       if (href) inner = `<image href="${esc(href)}" ${box} preserveAspectRatio="none"/>`;
       else {
-        const label = `${layer.asset ?? layer.clip} \xB7 ${formatVideoTimecode(layer.sourceTime ?? 0, options.fps ?? 30)}`;
+        const label = layer.generator ? `Effect: ${layer.generator.name ?? layer.generator.effect}` : `${layer.asset ?? layer.clip} \xB7 ${formatVideoTimecode(layer.sourceTime ?? 0, options.fps ?? 30)}`;
         const size = Math.max(10, Math.min(rect.height / 8, rect.width / Math.max(8, label.length * 0.6)));
         inner = `<rect ${box} fill="#334155" stroke="#94a3b8" stroke-width="2"/><text x="${n(rect.x + rect.width / 2)}" y="${n(rect.y + rect.height / 2)}" text-anchor="middle" dominant-baseline="central" font-family="sans-serif" font-size="${n(size)}" fill="#e2e8f0">${esc(label)}</text>`;
       }
@@ -1256,6 +1540,14 @@ function paintVideoLayer(ctx, frame, layer, sourceFor, options) {
       ctx.strokeStyle = "#94a3b8";
       ctx.lineWidth = 2;
       ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
+      if (layer.generator) {
+        const label = `Effect: ${layer.generator.name ?? layer.generator.effect}`;
+        ctx.font = `600 ${Math.max(12, Math.min(rect.height / 10, rect.width / Math.max(8, label.length * 0.6)))}px sans-serif`;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillStyle = "#e2e8f0";
+        ctx.fillText(label, rect.x + rect.width / 2, rect.y + rect.height / 2);
+      }
     }
   }
 }
@@ -1265,18 +1557,118 @@ function drawVideoFrame(ctx, frame, sourceFor, scale = 1, options = {}) {
   ctx.globalAlpha = 1;
   ctx.fillStyle = frame.background;
   ctx.fillRect(0, 0, frame.width, frame.height);
-  drawVideoLayers(ctx, frame, frame.layers, sourceFor, scale, options, 0);
+  const state = { missing: 0, waiting: 0 };
+  const counted = (layer) => {
+    const source = sourceFor(layer);
+    if (!source && layer.type === "media") state.missing++;
+    return source;
+  };
+  drawVideoLayers(ctx, frame, frame.layers, counted, scale, options, 0, state);
   ctx.restore();
 }
-function drawVideoLayers(ctx, frame, layers, sourceFor, scale, options, depth) {
+var unplaced = (layer) => {
+  const { rotation: _r, wipe: _w, iris: _i, grade: _g, blend: _b, effects: _e, transitionEffect: _t, ...rest } = layer;
+  return { ...rest, opacity: 1, rotation: 0 };
+};
+var readPixels = (s, width, height) => {
+  const img = s.ctx.getImageData(0, 0, width, height);
+  return { width, height, data: img.data };
+};
+function begin(s, width, height, scale, dx = 0, dy = 0) {
+  const g = s.ctx;
+  g.save();
+  g.setTransform(1, 0, 0, 1, 0, 0);
+  g.clearRect(0, 0, width, height);
+  g.setTransform(scale, 0, 0, scale, dx, dy);
+  g.globalAlpha = 1;
+  g.globalCompositeOperation = "source-over";
+  return g;
+}
+function effectPicture(frame, layer, source, scale, options, depth, state) {
+  const engine = options.effects;
+  if (!engine?.available) return null;
+  const { rect } = layer;
+  const w = Math.max(1, Math.round(rect.width * scale));
+  const h = Math.max(1, Math.round(rect.height * scale));
+  const key = videoEffectLayerKey(layer, w, h);
+  const hit = engine.get(key);
+  if (hit !== void 0 || engine.failure(key)) return hit ?? null;
+  let job;
+  if (layer.generator) job = { kind: "generator", width: w, height: h, ...layer.generator, effects: layer.effects ?? [] };
+  else {
+    const s = options.scratch?.(w, h, 1e3 + 4 * depth);
+    if (!s) return null;
+    const missing = state.missing;
+    const g = begin(s, w, h, scale, -rect.x * scale, -rect.y * scale);
+    const bare = unplaced(layer);
+    paintVideoLayer(g, frame, bare, (l) => source(l === bare ? layer : l), options);
+    g.restore();
+    if (state.missing !== missing) return null;
+    job = { kind: "stack", input: readPixels(s, w, h), effects: layer.effects ?? [] };
+  }
+  if (engine.request(key, job)) {
+    state.waiting++;
+    options.onEffectWaiting?.();
+  }
+  return null;
+}
+function drawEffectTransition(ctx, frame, layer, sourceFor, scale, options, depth, state) {
+  const engine = options.effects;
+  const t = layer.transitionEffect;
+  if (!engine?.available) return false;
   const cw = Math.max(1, Math.round(frame.width * scale));
   const ch = Math.max(1, Math.round(frame.height * scale));
-  for (const layer of layers) {
+  const key = videoEffectLayerKey(layer, cw, ch);
+  const hit = engine.get(key);
+  if (hit) {
+    ctx.save();
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.globalAlpha = 1;
+    ctx.globalCompositeOperation = "source-over";
+    ctx.drawImage(hit, 0, 0, cw, ch);
+    ctx.restore();
+    return true;
+  }
+  if (hit === null || engine.failure(key) || engine.isPending(key)) {
+    if (engine.isPending(key)) {
+      state.waiting++;
+      options.onEffectWaiting?.();
+    }
+    return false;
+  }
+  const a = options.scratch?.(cw, ch, 1e3 + 4 * depth + 1);
+  const b = options.scratch?.(cw, ch, 1e3 + 4 * depth + 2);
+  if (!a || !b) return false;
+  const before = { ...state };
+  const ga = begin(a, cw, ch, scale);
+  drawVideoLayers(ga, frame, t.from ? [t.from] : [], sourceFor, scale, options, depth + 1, state);
+  ga.restore();
+  const { transitionEffect: _t, ...incoming } = layer;
+  const gb = begin(b, cw, ch, scale);
+  drawVideoLayers(gb, frame, [incoming], sourceFor, scale, options, depth + 1, state);
+  gb.restore();
+  if (state.missing !== before.missing || state.waiting !== before.waiting) return false;
+  const job = { kind: "transition", effect: t.effect, values: t.values, progress: t.progress, time: t.time, from: readPixels(a, cw, ch), to: readPixels(b, cw, ch) };
+  if (engine.request(key, job)) {
+    state.waiting++;
+    options.onEffectWaiting?.();
+  }
+  return false;
+}
+function drawVideoLayers(ctx, frame, layers, sourceFor, scale, options, depth, state) {
+  const cw = Math.max(1, Math.round(frame.width * scale));
+  const ch = Math.max(1, Math.round(frame.height * scale));
+  for (const original of layers) {
+    let layer = original;
+    if (layer.transitionEffect) {
+      if (!drawEffectTransition(ctx, frame, layer, sourceFor, scale, options, depth, state)) drawVideoLayers(ctx, frame, videoLayersWithoutTransitionEffects([layer]), sourceFor, scale, options, depth, state);
+      continue;
+    }
     let source = sourceFor;
     if (layer.layers) {
       const group = options.scratch?.(cw, ch, 2 * depth);
       if (!group) {
-        drawVideoLayers(ctx, frame, layer.layers, sourceFor, scale, options, depth + 1);
+        drawVideoLayers(ctx, frame, layer.layers, sourceFor, scale, options, depth + 1, state);
         continue;
       }
       const g = group.ctx;
@@ -1286,9 +1678,19 @@ function drawVideoLayers(ctx, frame, layers, sourceFor, scale, options, depth) {
       g.setTransform(scale, 0, 0, scale, 0, 0);
       g.globalAlpha = 1;
       g.globalCompositeOperation = "source-over";
-      drawVideoLayers(g, frame, layer.layers, sourceFor, scale, options, depth + 1);
+      drawVideoLayers(g, frame, layer.layers, sourceFor, scale, options, depth + 1, state);
       g.restore();
-      source = (l) => l === layer ? group.canvas : sourceFor(l);
+      const self = layer;
+      source = (l) => l === self ? group.canvas : sourceFor(l);
+    }
+    if (layer.effects?.length || layer.generator) {
+      const picture = effectPicture(frame, layer, source, scale, options, depth, state);
+      if (picture) {
+        const { layers: _l, text: _t, color: _c, generator: _g, effects: _e, ...rest } = layer;
+        const drawn = { ...rest, type: "media" };
+        layer = drawn;
+        source = (l) => l === drawn ? picture : sourceFor(l);
+      }
     }
     const setting = layer.grade?.lut;
     const lut = setting ? options.lutFor?.(setting.src) : null;
@@ -1320,6 +1722,41 @@ function drawVideoLayers(ctx, frame, layers, sourceFor, scale, options, depth) {
     ctx.restore();
   }
 }
+async function renderVideoFrameExact(ctx, project, time, sourceFor, options = {}) {
+  const frame = videoFrameAt(project, videoEffectFrameTime(time, project.fps));
+  const engine = options.effects;
+  const before = new Set(engine?.failuresList().map((f) => f.error) ?? []);
+  let complete = false;
+  for (let pass = 0; pass < (options.maxPasses ?? 8); pass++) {
+    let waiting = 0;
+    let missing = 0;
+    drawVideoFrame(
+      ctx,
+      frame,
+      (layer) => {
+        if (layer.type === "effect") return null;
+        const s = sourceFor(layer);
+        if (!s) missing++;
+        return s;
+      },
+      options.scale ?? 1,
+      {
+        ...options,
+        onEffectWaiting: () => {
+          waiting++;
+          options.onEffectWaiting?.();
+        }
+      }
+    );
+    if (!waiting) {
+      complete = missing === 0;
+      break;
+    }
+    await engine.idle();
+  }
+  const failures = (engine?.failuresList() ?? []).map((f) => f.error).filter((e) => !before.has(e));
+  return { frame, complete: complete && !failures.length, failures };
+}
 
 // src/video-editor/export.ts
 var reelName = (asset) => (asset?.name ?? asset?.id ?? "AX").replace(/\.[a-z0-9]+$/i, "").replace(/[^A-Za-z0-9]/g, "").toUpperCase().slice(0, 8) || "AX";
@@ -1360,11 +1797,17 @@ function toVideoEdl(project, options = {}) {
     if (clip.type === "media") lines.push(`* FROM CLIP NAME: ${asset?.name ?? asset?.src ?? clip.asset}`);
     if (clip.type === "text") lines.push(`* TITLE: ${clip.text.replace(/\n/g, " ")}`);
     if (clip.type === "color") lines.push(`* COLOR: ${clip.color}`);
+    if (clip.type === "effect") lines.push(`* EFFECT CLIP: ${clip.name ?? clip.effect} (${clip.effect})`);
+    if (clip.transition?.type === "effect") lines.push(`* EFFECT TRANSITION: ${clip.transition.effect?.name ?? clip.transition.effect?.effect}`);
+    for (const e of clip.effects ?? []) if (e.enabled !== false) lines.push(`* EFFECT: ${e.name ?? e.effect} (${e.effect})`);
     if (clip.type === "sequence") lines.push(`* COMPOUND CLIP: ${clip.name ?? clip.sequence} (sequence ${clip.sequence} from ${tc(clip.in ?? 0)}, not flattened)`);
     lines.push("");
   }
   return lines.join("\n");
 }
+function videoFfmpegUnsupportedEffects(project) {
+  return allVideoTracks(project).filter(({ track }) => track.kind === "video" && !track.hidden).flatMap(({ track }) => track.clips.flatMap(videoClipEffectUses)).filter((u) => u.enabled);
+}
 function loudnormFilter(target = {}, measure = false) {
   const I = target.integrated ?? -14;
   const TP = target.truePeak ?? -1;
@@ -1447,7 +1890,21 @@ function buildFfmpeg(project, options, measure) {
   const H = even(project.height);
   const fps = project.fps;
   const inputs = [];
-  const graph = measure ? [] : [`color=c=${color(project.background ?? "#000000")}:s=${W}x${H}:r=${fps}:d=${sec(D)},format=yuva420p[base]`];
+  const frames = measure ? void 0 : options.frames;
+  if (!measure && !frames) {
+    const effects = videoFfmpegUnsupportedEffects(project);
+    if (effects.length) {
+      const list = effects.slice(0, 5).map((u) => `${u.kind === "generator" ? "effect clip" : u.kind === "transition" ? "the transition into" : "an effect on"} "${u.clip}" (${u.name ?? u.effect})`).join(", ");
+      throw new Error(
+        `ffmpeg cannot draw provider effects, and this project uses ${effects.length}: ${list}${effects.length > 5 ? ", ..." : ""}. Render the picture frame by frame with renderVideoFrameExact (the preview's drawing, with the effects provider) to PNGs or raw RGBA and pass them as frames: { input: "frames/%06d.png" } (or { input: "pipe:0", format: "rawvideo" }); ffmpeg still mixes the sound. Or turn the effects off.`
+      );
+    }
+  }
+  if (frames) {
+    if (frames.format === "rawvideo") inputs.push(["-f", "rawvideo", "-pix_fmt", "rgba", "-s", `${W}x${H}`, "-framerate", String(fps), "-i", frames.input]);
+    else inputs.push(["-framerate", String(fps), "-i", frames.input]);
+  }
+  const graph = measure || frames ? [] : [`color=c=${color(project.background ?? "#000000")}:s=${W}x${H}:r=${fps}:d=${sec(D)},format=yuva420p[base]`];
   let usesDrawtext = false;
   const animated = /* @__PURE__ */ new Set();
   const ramped = /* @__PURE__ */ new Set();
@@ -1739,10 +2196,11 @@ function buildFfmpeg(project, options, measure) {
     }
     return { video: cur2, audio: sounds };
   };
-  const top = compose(project.tracks, measure ? null : "base", D, { within: [], picture: !measure, sound: true });
+  const top = compose(project.tracks, measure || frames ? null : "base", D, { within: [], picture: !measure && !frames, sound: true });
   const audio = top.audio;
   const cur = top.video;
-  if (!measure) graph.push(`[${cur}]format=yuv420p[vout]`);
+  if (frames) graph.push(`[0:v]scale=${W}:${H},format=yuv420p,trim=duration=${sec(D)}[vout]`);
+  else if (!measure) graph.push(`[${cur}]format=yuv420p[vout]`);
   if (measure && !audio.length) throw new Error("Nothing on the timeline makes a sound, so there is no loudness to measure.");
   const loudness = options.loudness || measure ? `,${loudnormFilter(options.loudness, measure)}` : "";
   if (audio.length) graph.push(`${audio.join("")}amix=inputs=${audio.length}:normalize=0:duration=longest,apad,atrim=0:${sec(D)}${loudness}[aout]`);
@@ -1883,6 +2341,7 @@ export {
   videoClipAnimationProperties,
   videoClipAnimationSpans,
   videoClipAnimated,
+  videoEffectValuesAt,
   videoTransformAt,
   placeVideoRect,
   videoTextStyle,
@@ -1891,18 +2350,32 @@ export {
   videoFadeCurveGain,
   videoClipSoundGain,
   videoFrameAt,
+  videoLayersWithoutTransitionEffects,
   videoFrameLeafLayers,
+  videoProjectEffects,
+  videoClipEffectUses,
+  videoLayersUseEffects,
+  videoEffectFrameTime,
+  videoEffectLayerKey,
+  mixEffectPixels,
+  overEffectPixels,
+  VideoEffectsEngine,
+  VIDEO_EFFECT_PLACES,
+  checkVideoEffectPlace,
+  checkVideoEffectValues,
   videoIrisRadius,
   videoWipeRect,
   videoFrameToSvg,
   videoProjectSvg,
   videoContactSheetSvg,
   drawVideoFrame,
+  renderVideoFrameExact,
   toVideoEdl,
+  videoFfmpegUnsupportedEffects,
   parseVideoLoudnessMeasurement,
   ffmpegFilterValue,
   videoShellQuote,
   toVideoFfmpeg,
   toVideoLoudnessMeasure
 };
-//# sourceMappingURL=chunk-IPFRWILU.js.map
+//# sourceMappingURL=chunk-ORHMVUR6.js.map