@cutcraft/player 0.1.0 → 0.2.0

package/dist/{nested-DSXA1q8d.mjs → render-DA1KFyei.mjs}

@@ -1,6 +1,113 @@
-import { E as trackItems, K as ENVELOPE_STEP_S, L as placementSourceTime, M as frameIndex, _ as fitRect, j as keyframedValue, n as buildFramePlan, tt as PICK_EPS } from "./frame-plan-BNwblf1s.mjs";
-import { capabilitiesOf, freezeHoldsOf, lookupAsset, rampAdvance, rampInverse, rampSpeed, resolveScene, speedKeysOf } from "@cutcraft/kit";
-import { ALL_FORMATS, AudioBufferSink, BlobSource, CanvasSink, FilePathSource, Input, UrlSource, VideoSampleSink } from "mediabunny";
+import { EASING_FN, MASK_TYPES, TRANSITION_TYPES, capabilitiesOf, freezeHoldsOf, freezeShift, lookupAsset, rampAdvance, rampInverse, rampSpeed, resolveScene, shaderFor, speedKeysOf } from "@cutcraft/kit";
+import { ALL_FORMATS, AudioBufferSink, BlobSource, CanvasSink, Input, UrlSource, VideoSampleSink } from "mediabunny";
+// src/constants.ts
+/** Seconds before a clip starts at which its decoder is mounted. */
+const MOUNT_AHEAD_S = 2;
+/** Seconds after a clip ends for which its decoder is kept. */
+const UNMOUNT_BEHIND_S = .5;
+/** Seconds an unreferenced mediabunny Input stays open before it is disposed. */
+const INPUT_IDLE_CLOSE_S = 10;
+/** Hard cap on open Inputs; idle ones are evicted LRU first. */
+const MAX_OPEN_INPUTS = 6;
+/** Decoded frames a clip decoder keeps queued ahead of the play head. */
+const QUEUE_TARGET = 8;
+const QUEUE_MAX = 10;
+/** Effective speed (clip speed × rate) above which frames are fetched by seek per tick instead of streamed. */
+const SEEK_MODE_SPEED = 4;
+/** Reverse playback pre-decodes this window behind the cursor. */
+const REVERSE_WINDOW_S = 1;
+const REVERSE_WINDOW_FRAMES = 16;
+/** Longest wait for a frame in `wait` mode (seek, export) before drawing without it. */
+const FRAME_WAIT_MS = 250;
+/** Audio scheduler period and horizon. */
+const SCHEDULER_MS = 100;
+const LOOKAHEAD_S = .2;
+/** Source ranges longer than twice this are decoded in chunks of this length. */
+const AUDIO_CHUNK_S = 30;
+/** LRU cap, in decoded seconds, on cached PCM. */
+const AUDIO_CACHE_S = 600;
+/** Pre-decode window on play, and how long play() waits for it. */
+const AUDIO_PRIME_S = .5;
+const PLAY_PRIME_TIMEOUT_MS = 500;
+/** Ducking defaults. */
+const DUCK_ATTACK_S = .1;
+const DUCK_RELEASE_S = .3;
+/** Sampling step for multiplied gain ramps. */
+const ENVELOPE_STEP_S = .05;
+/** Playback rate clamp. */
+const MIN_RATE = .25;
+const MAX_RATE = 4;
+/** Quiet time after the last setState before a paused preview fetches its exact frame. */
+const SETTLE_MS = 120;
+/** Tolerance when rounding a time to a frame index. */
+const FRAME_EPS = 1e-6;
+/**
+* Container timestamps are often rounded to the millisecond, so the frame for
+* the exact time n/fps can sit a fraction of a millisecond after it. A frame
+* is picked when its timestamp is at most this far past the wanted time.
+*/
+const PICK_EPS = .001;
+// src/warn.ts
+const seen = /* @__PURE__ */ new Set();
+let sink = null;
+/** Warn once per key. Tests capture warnings with `captureWarnings`. */
+function devWarn(key, message) {
+	if (seen.has(key)) return;
+	seen.add(key);
+	if (sink) sink(message);
+	else console.warn(`[cutcut/player] ${message}`);
+}
+function captureWarnings(fn) {
+	sink = fn;
+	seen.clear();
+}
+// src/model/keyframes.ts
+const clamp01 = (x) => x < 0 ? 0 : x > 1 ? 1 : x;
+function ease(name, x) {
+	const fn = EASING_FN[name];
+	if (!fn) {
+		if (name !== void 0) devWarn(`easing:${name}`, `unknown easing "${name}", using linear`);
+		return clamp01(x);
+	}
+	return fn(clamp01(x));
+}
+function keysFor(children, property) {
+	const keys = [];
+	for (const c of children) {
+		if (c.kind !== "keyframe" || c.props.property !== property) continue;
+		keys.push({
+			at: Number(c.props.at ?? 0),
+			value: c.props.value,
+			easing: c.props.easing
+		});
+	}
+	return keys.sort((a, b) => a.at - b.at);
+}
+/**
+* The keyframed value of `property` at element-relative time `rel`. Holds
+* before the first and after the last key; the segment between two keys uses
+* the easing of the key it leaves. Non-numeric values step.
+*/
+function keyframedValue(children, property, rel, fallback) {
+	const keys = keysFor(children, property);
+	const first = keys[0];
+	if (!first) return fallback;
+	const last = keys[keys.length - 1];
+	if (rel <= first.at) return first.value;
+	if (rel >= last.at) return last.value;
+	for (let i = 0; i < keys.length - 1; i++) {
+		const a = keys[i], b = keys[i + 1];
+		if (rel < a.at || rel >= b.at) continue;
+		if (typeof a.value !== "number" || typeof b.value !== "number") return a.value;
+		const span = b.at - a.at;
+		const u = span <= 0 ? 1 : ease(a.easing, (rel - a.at) / span);
+		return a.value + (b.value - a.value) * u;
+	}
+	return last.value;
+}
+function hasKeyframes(children, property) {
+	return children.some((c) => c.kind === "keyframe" && c.props.property === property);
+}
 // src/model/audio-plan.ts
 /** Every audio-bearing chunk that overlaps [from, to). */
 function buildAudioPlan(state, from, to, resolveNested) {
@@ -259,24 +366,6 @@ var PerformanceClock = class {
 		return performance.now() / 1e3;
 	}
 };
-// src/media/resolver.ts
-/** A resolver over a map of asset id → Blob or URL. */
-function fromMap(map) {
-	return { resolve: (assetId) => {
-		const v = map[assetId];
-		if (v === void 0) return Promise.reject(/* @__PURE__ */ new Error(`no media for asset "${assetId}"`));
-		return Promise.resolve(typeof v === "string" ? {
-			kind: "url",
-			url: v
-		} : {
-			kind: "blob",
-			blob: v
-		});
-	} };
-}
-function toResolver(media) {
-	return typeof media.resolve === "function" ? media : fromMap(media);
-}
 // src/media/frame-source.ts
 function defaultCreateCanvas(width, height) {
 	if (typeof OffscreenCanvas !== "undefined") return new OffscreenCanvas(width, height);
@@ -531,6 +620,62 @@ var LazyFrameSource = class {
 		this.inner?.then((o) => o.source.close()).catch(() => void 0);
 	}
 };
+// src/model/time.ts
+function frameIndex(t, fps) {
+	return Math.max(0, Math.floor(t * fps + FRAME_EPS));
+}
+function frameTime(frame, fps) {
+	return frame / fps;
+}
+/** `mm:ss.ff` for a composition time, what the controls show and the contact sheet labels. */
+function timecode(t, fps) {
+	const total = Math.max(0, t);
+	const m = Math.floor(total / 60), s = Math.floor(total % 60), f = Math.floor((total - Math.floor(total)) * fps + 1e-6);
+	return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}.${String(f).padStart(2, "0")}`;
+}
+/** 0..1 progress through a placement, what `useT()` returns inside a Layer. */
+function localT(p, t) {
+	if (p.duration <= 0) return 0;
+	const u = (t - p.start) / p.duration;
+	return u < 0 ? 0 : u > 1 ? 1 : u;
+}
+/** What `useLayer()` returns inside a Layer: progress plus real seconds. */
+function layerClock(p, t, fps) {
+	const duration = Math.max(0, p.duration);
+	const elapsed = Math.min(duration, Math.max(0, t - p.start));
+	return {
+		t: localT(p, t),
+		elapsed,
+		remaining: duration - elapsed,
+		duration,
+		time: t,
+		fps
+	};
+}
+/**
+* Source seconds a media placement shows at composition time `t`: in/out
+* trim, constant speed or a speed-key ramp, reverse, and freeze holds.
+* A freeze is an insert hold: it shows `at` over its window, then the clip
+* resumes from where it stopped; the result is clamped to the trimmed range.
+*/
+function placementSourceTime(p, children, t) {
+	const src = p.source;
+	if (!src) return Math.max(0, t - p.start);
+	const shifted = freezeShift(freezeHoldsOf(children), Math.max(0, t - p.start));
+	if ("held" in shifted) return clampSource(shifted.held, src);
+	const keys = speedKeysOf(children);
+	const advance = keys.length > 0 ? rampAdvance(keys, shifted.rel) : shifted.rel * src.speed;
+	return clampSource(p.props.reverse === true ? src.out - advance : src.in + advance, src);
+}
+function nestedSourceTime(p, t) {
+	const src = p.source;
+	if (!src) return Math.max(0, t - p.start);
+	return clampSource(src.in + Math.max(0, t - p.start) * src.speed, src);
+}
+function clampSource(v, src) {
+	const end = src.out > src.in ? src.out : src.in;
+	return v < src.in ? src.in : v > end ? end : v;
+}
 // src/media/clip-decoder.ts
 /** How far the play head may run past the newest queued frame before the stream is restarted from the head. */
 const BEHIND_RESEEK_S = 1;
@@ -869,6 +1014,75 @@ function sourceKeyOf(p) {
 	const s = p.source;
 	return s ? `${s.asset}|${p.props.reverse === true ? "r" : "f"}` : p.id;
 }
+// src/model/visible.ts
+/** Visual, timed placements that show at `t`: tracks in document order (the first track is the bottom), items in track order. */
+function visiblePlacements(state, t) {
+	const out = [];
+	const tracks = [...state.tracks].sort((a, b) => a.order - b.order);
+	for (const track of tracks) {
+		if (track.hidden) continue;
+		const roles = transitionRoles(state, track, t);
+		for (const placement of trackItems(state, track)) {
+			const caps = capabilitiesOf(placement.kind);
+			if (!caps.visual || !caps.timed || placement.kind === "transition") continue;
+			if (!isVisibleAt(placement, t, state.composition.duration)) continue;
+			const role = roles.get(placement.id);
+			out.push({
+				placement,
+				track,
+				children: placement.children.map((id) => state.items.get(id)).filter((c) => c !== void 0),
+				...role ? { transition: role } : {}
+			});
+		}
+	}
+	return out;
+}
+function isVisibleAt(p, t, compositionDuration) {
+	if (t >= p.start && t < p.end) return true;
+	return t === compositionDuration && p.end === t && p.end > p.start;
+}
+/** Placements that sit on a track, in track order; a multicam's generated clips follow their parent. */
+function trackItems(state, track) {
+	const out = [];
+	for (const id of track.items) {
+		const p = state.items.get(id);
+		if (!p) continue;
+		if (p.kind === "multicam") {
+			const generated = [...state.items.values()].filter((q) => q.parent === id && q.kind === "clip").sort((a, b) => a.start - b.start);
+			out.push(...generated);
+			continue;
+		}
+		out.push(p);
+	}
+	return out;
+}
+function transitionRoles(state, track, t) {
+	const roles = /* @__PURE__ */ new Map();
+	for (const id of track.items) {
+		const x = state.items.get(id);
+		if (x?.kind !== "transition" || x.duration <= 0) continue;
+		if (t < x.start || t >= x.end) continue;
+		const params = x.props.params ?? {};
+		const progress = ease(typeof params.curve === "string" ? params.curve : "linear", (t - x.start) / x.duration);
+		if (x.between) {
+			roles.set(x.between[0], {
+				placement: x,
+				role: "out",
+				progress
+			});
+			roles.set(x.between[1], {
+				placement: x,
+				role: "in",
+				progress
+			});
+		} else if (typeof x.props.on === "string") roles.set(x.props.on, {
+			placement: x,
+			role: x.props.edge === "in" ? "in" : "out",
+			progress
+		});
+	}
+	return roles;
+}
 // src/media/decoder-pool.ts
 /**
 * Keeps a ClipDecoder for every media placement near the play head and drops
@@ -939,43 +1153,148 @@ var DecoderPool = class {
 		if (d.placement.source) this.sources.release(d.placement.source.asset);
 	}
 };
-// src/media/mediabunny-input.ts
-/** One mediabunny `Input` per asset, shared by the video and audio sources of that asset. */
-var MediabunnyInputs = class {
-	entries = /* @__PURE__ */ new Map();
-	acquire(assetId, handle) {
-		let e = this.entries.get(assetId);
-		if (!e) {
-			const source = handle.kind === "blob" ? new BlobSource(handle.blob) : handle.kind === "path" ? new FilePathSource(handle.path) : new UrlSource(handle.url);
-			e = {
-				input: new Input({
-					source,
-					formats: ALL_FORMATS
-				}),
-				refs: 0
-			};
-			this.entries.set(assetId, e);
+// src/media/fonts.ts
+/** Faces already added to `document.fonts`, by family, weight, style and source, so a remount adds none twice. */
+const added = /* @__PURE__ */ new Map();
+/**
+* Adds faces to `document.fonts` and resolves once every one has loaded. A URL source loads from that URL; bytes load as
+* given. Does nothing where there is no `FontFace` (Node, tests).
+*/
+function addFontFaces(faces) {
+	if (typeof FontFace === "undefined" || typeof document === "undefined") return Promise.resolve();
+	return Promise.all(faces.map((face) => {
+		const weight = String(face.weight ?? 400);
+		const style = face.style ?? "normal";
+		const key = `${face.family}|${weight}|${style}|${typeof face.source === "string" ? face.source : face.source.byteLength}`;
+		let loading = added.get(key);
+		if (!loading) {
+			const font = new FontFace(face.family, typeof face.source === "string" ? `url("${face.source}")` : face.source, {
+				weight,
+				style
+			});
+			loading = font.load().then(() => {
+				document.fonts.add(font);
+			});
+			added.set(key, loading);
+			loading.catch(() => added.delete(key));
 		}
-		e.refs++;
-		return e.input;
+		return loading;
+	})).then(() => void 0);
+}
+/** The stylesheet URL Google Fonts serves a family's face from, for a browser. */
+function googleCss(face) {
+	return `https://fonts.googleapis.com/css2?family=${encodeURIComponent(face.family).replace(/%20/g, "+")}:ital,wght@${face.style === "italic" ? 1 : 0},${face.weight}&display=block`;
+}
+async function addGoogleFace(face) {
+	const href = googleCss(face);
+	if (!document.querySelector(`link[href="${href}"]`)) {
+		const link = document.createElement("link");
+		link.rel = "stylesheet";
+		link.href = href;
+		const loaded = new Promise((ok, fail) => {
+			link.onload = () => ok();
+			link.onerror = () => fail(/* @__PURE__ */ new Error(`Google Fonts did not serve ${face.family} ${face.weight} ${face.style}`));
+		});
+		document.head.append(link);
+		await loaded;
 	}
-	release(assetId) {
-		const e = this.entries.get(assetId);
-		if (!e) return;
-		e.refs--;
-		if (e.refs <= 0) {
-			e.input.dispose();
-			this.entries.delete(assetId);
+	if ((await document.fonts.load(`${face.style} ${face.weight} 16px "${face.family}"`)).length === 0) throw new Error(`Google Fonts has no ${face.family} ${face.weight} ${face.style}`);
+}
+/**
+* Loads the faces a file declares (`state.fonts`) into the page: an `asset:` face is asked of `media` as an asset is,
+* a Google face loads from Google's stylesheet. Resolves once all have loaded; a face that fails is reported through
+* `onError` and the rest load. Does nothing where there is no `FontFace` (Node, tests).
+*/
+async function loadFileFonts(faces, media, onError) {
+	if (typeof FontFace === "undefined" || typeof document === "undefined") return;
+	await Promise.all(faces.map(async (face) => {
+		try {
+			if (face.source.kind === "google") return await addGoogleFace(face);
+			const handle = await media.resolve(face.source.id);
+			if (handle.kind === "path") throw new Error(`a browser cannot read the path ${handle.path}; give it a URL`);
+			const source = handle.kind === "url" ? handle.url : await handle.blob.arrayBuffer();
+			await addFontFaces([{
+				family: face.family,
+				weight: face.weight,
+				style: face.style,
+				source
+			}]);
+		} catch (error) {
+			onError(face.family, error instanceof Error ? error : new Error(String(error)));
 		}
+	}));
+}
+// src/media/mediabunny-audio-source.ts
+/** PCM ranges of one audio track, decoded on demand into AudioBuffers of the track's sample rate. */
+var MediabunnyAudioSource = class {
+	assetId;
+	handle;
+	inputs;
+	context;
+	trackIndex;
+	input = null;
+	sink = null;
+	sampleRate = 48e3;
+	channels = 2;
+	constructor(assetId, handle, inputs, context, trackIndex = 0) {
+		this.assetId = assetId;
+		this.handle = handle;
+		this.inputs = inputs;
+		this.context = context;
+		this.trackIndex = trackIndex;
 	}
-	get openCount() {
-		return this.entries.size;
+	async open() {
+		this.input = this.inputs.acquire(this.assetId, this.handle);
+		const track = (await this.input.getAudioTracks())[this.trackIndex] ?? await this.input.getPrimaryAudioTrack();
+		if (!track) return {
+			sampleRate: 0,
+			channels: 0,
+			duration: 0,
+			decodable: false
+		};
+		const [decodable, sampleRate, channels, duration] = await Promise.all([
+			track.canDecode(),
+			track.getSampleRate(),
+			track.getNumberOfChannels(),
+			track.computeDuration()
+		]);
+		this.sampleRate = sampleRate;
+		this.channels = channels;
+		this.sink = new AudioBufferSink(track);
+		return {
+			sampleRate,
+			channels,
+			duration,
+			decodable
+		};
 	}
-	dispose() {
-		for (const e of this.entries.values()) e.input.dispose();
-		this.entries.clear();
+	async range(from, to) {
+		const sr = this.sampleRate;
+		const length = Math.max(1, Math.ceil((to - from) * sr));
+		const out = this.context.createBuffer(Math.max(1, this.channels), length, sr);
+		if (!this.sink) return out;
+		for await (const { buffer, timestamp } of this.sink.buffers(Math.max(0, from), to)) {
+			const offset = Math.round((timestamp - from) * sr);
+			const srcStart = Math.max(0, -offset);
+			const dstStart = Math.max(0, offset);
+			const n = Math.min(buffer.length - srcStart, length - dstStart);
+			if (n <= 0) continue;
+			for (let ch = 0; ch < out.numberOfChannels; ch++) {
+				const data = buffer.getChannelData(Math.min(ch, buffer.numberOfChannels - 1));
+				out.copyToChannel(data.subarray(srcStart, srcStart + n), ch, dstStart);
+			}
+		}
+		return out;
+	}
+	close() {
+		this.sink = null;
+		if (this.input) this.inputs.release(this.assetId);
+		this.input = null;
 	}
 };
+function mediabunnyAudioSourceFactory(inputs) {
+	return (assetId, handle, context) => new MediabunnyAudioSource(assetId, handle, inputs, context);
+}
 // src/media/mediabunny-frame-source.ts
 /** A decoded `VideoSample`: GPU-backed, drawn straight to the context, closed when consumed. */
 var SampleFrame = class {
@@ -1010,20 +1329,18 @@ var MediabunnyFrameSource = class {
 	handle;
 	inputs;
 	createCanvas;
-	hooks;
 	input = null;
 	track = null;
 	sink = null;
 	stillSink = null;
-	constructor(assetId, handle, inputs, createCanvas, hooks = {}) {
+	constructor(assetId, handle, inputs, createCanvas) {
 		this.assetId = assetId;
 		this.handle = handle;
 		this.inputs = inputs;
 		this.createCanvas = createCanvas;
-		this.hooks = hooks;
 	}
 	wrap(sample) {
-		return this.hooks.makeFrame ? this.hooks.makeFrame(sample) : new SampleFrame(sample, this.createCanvas);
+		return new SampleFrame(sample, this.createCanvas);
 	}
 	async open() {
 		this.input = this.inputs.acquire(this.assetId, this.handle);
@@ -1042,7 +1359,7 @@ var MediabunnyFrameSource = class {
 		]);
 		this.track = track;
 		this.sink = new VideoSampleSink(track, {
-			hardwareAcceleration: this.hooks.hardwareAcceleration ?? "no-preference",
+			hardwareAcceleration: "no-preference",
 			optimizeForLatency: true
 		});
 		return {
@@ -1090,86 +1407,969 @@ var MediabunnyFrameSource = class {
 	}
 };
 async function loadImage(handle) {
-	if (handle.kind === "path") throw new Error("a file path needs a host image loader (hooks.loadImage)");
+	if (handle.kind === "path") throw new Error(`a browser cannot read the path ${handle.path}; give it a URL`);
 	const blob = handle.kind === "blob" ? handle.blob : await (await fetch(handle.url)).blob();
 	return createImageBitmap(blob);
 }
-function mediabunnyFrameSourceFactory(inputs, createCanvas, hooks = {}) {
-	return (assetId, handle, kind) => kind === "image" ? new ImageFrameSource(() => (hooks.loadImage ?? loadImage)(handle)) : new MediabunnyFrameSource(assetId, handle, inputs, createCanvas, hooks);
+function mediabunnyFrameSourceFactory(inputs, createCanvas) {
+	return (assetId, handle, kind) => kind === "image" ? new ImageFrameSource(() => loadImage(handle)) : new MediabunnyFrameSource(assetId, handle, inputs, createCanvas);
 }
-// src/media/mediabunny-audio-source.ts
-/** PCM ranges of one audio track, decoded on demand into AudioBuffers of the track's sample rate. */
-var MediabunnyAudioSource = class {
-	assetId;
-	handle;
-	inputs;
-	context;
-	trackIndex;
-	input = null;
-	track = null;
-	sink = null;
-	sampleRate = 48e3;
-	channels = 2;
-	constructor(assetId, handle, inputs, context, trackIndex = 0) {
-		this.assetId = assetId;
-		this.handle = handle;
-		this.inputs = inputs;
-		this.context = context;
-		this.trackIndex = trackIndex;
-	}
-	async open() {
-		this.input = this.inputs.acquire(this.assetId, this.handle);
-		const track = (await this.input.getAudioTracks())[this.trackIndex] ?? await this.input.getPrimaryAudioTrack();
-		if (!track) return {
-			sampleRate: 0,
-			channels: 0,
-			duration: 0,
-			decodable: false
-		};
-		const [decodable, sampleRate, channels, duration] = await Promise.all([
-			track.canDecode(),
-			track.getSampleRate(),
-			track.getNumberOfChannels(),
-			track.computeDuration()
-		]);
-		this.track = track;
-		this.sampleRate = sampleRate;
-		this.channels = channels;
-		this.sink = new AudioBufferSink(track);
-		return {
-			sampleRate,
-			channels,
-			duration,
-			decodable
-		};
-	}
-	async range(from, to) {
-		const sr = this.sampleRate;
-		const length = Math.max(1, Math.ceil((to - from) * sr));
-		const out = this.context.createBuffer(Math.max(1, this.channels), length, sr);
-		if (!this.sink) return out;
-		for await (const { buffer, timestamp } of this.sink.buffers(Math.max(0, from), to)) {
-			const offset = Math.round((timestamp - from) * sr);
-			const srcStart = Math.max(0, -offset);
-			const dstStart = Math.max(0, offset);
-			const n = Math.min(buffer.length - srcStart, length - dstStart);
-			if (n <= 0) continue;
-			for (let ch = 0; ch < out.numberOfChannels; ch++) {
-				const data = buffer.getChannelData(Math.min(ch, buffer.numberOfChannels - 1));
-				out.copyToChannel(data.subarray(srcStart, srcStart + n), ch, dstStart);
-			}
+// src/media/mediabunny-input.ts
+/** One mediabunny `Input` per asset, shared by the video and audio sources of that asset. */
+var MediabunnyInputs = class {
+	entries = /* @__PURE__ */ new Map();
+	acquire(assetId, handle) {
+		let e = this.entries.get(assetId);
+		if (!e) {
+			if (handle.kind === "path") throw new Error(`a browser cannot read the path ${handle.path}; give it a URL`);
+			const source = handle.kind === "blob" ? new BlobSource(handle.blob) : new UrlSource(handle.url);
+			e = {
+				input: new Input({
+					source,
+					formats: ALL_FORMATS
+				}),
+				refs: 0
+			};
+			this.entries.set(assetId, e);
 		}
-		return out;
-	}
-	close() {
-		this.sink = null;
-		this.track = null;
-		if (this.input) this.inputs.release(this.assetId);
-		this.input = null;
+		e.refs++;
+		return e.input;
+	}
+	release(assetId) {
+		const e = this.entries.get(assetId);
+		if (!e) return;
+		e.refs--;
+		if (e.refs <= 0) {
+			e.input.dispose();
+			this.entries.delete(assetId);
+		}
+	}
+	get openCount() {
+		return this.entries.size;
+	}
+	dispose() {
+		for (const e of this.entries.values()) e.input.dispose();
+		this.entries.clear();
 	}
 };
-function mediabunnyAudioSourceFactory(inputs) {
-	return (assetId, handle, context) => new MediabunnyAudioSource(assetId, handle, inputs, context);
+// src/media/resolver.ts
+/** A resolver over a map of asset id → Blob or URL. */
+function fromMap(map) {
+	return { resolve: (assetId) => {
+		const v = map[assetId];
+		if (v === void 0) return Promise.reject(/* @__PURE__ */ new Error(`no media for asset "${assetId}"`));
+		return Promise.resolve(typeof v === "string" ? {
+			kind: "url",
+			url: v
+		} : {
+			kind: "blob",
+			blob: v
+		});
+	} };
+}
+function toResolver(media) {
+	return typeof media.resolve === "function" ? media : fromMap(media);
+}
+// src/model/backdrop.ts
+/** Kinds the overlay plane draws (as DOM, in the preview and the export) rather than the canvas. */
+const OVERLAY_KINDS = /* @__PURE__ */ new Set([
+	"title",
+	"shape",
+	"svg",
+	"sticker",
+	"graphic",
+	"layer",
+	"adjustment"
+]);
+/** Kinds that put footage on the canvas. */
+const FOOTAGE_KINDS = /* @__PURE__ */ new Set([
+	"clip",
+	"nested",
+	"multicam"
+]);
+const memo = /* @__PURE__ */ new WeakMap();
+/**
+* The tracks whose overlays draw beneath the footage: those below every
+* visible track that holds footage, when one of them holds an overlay (a
+* background graphic under the cut, say). Empty otherwise, and then every
+* overlay draws above the footage as before. When it is not empty, the canvas
+* holds only the footage over a transparent ground, and the composition
+* background is painted beneath the backdrop instead.
+*/
+function backdropTracks(state) {
+	const hit = memo.get(state);
+	if (hit) return hit;
+	const footage = state.tracks.filter((t) => !t.hidden && t.items.some((id) => FOOTAGE_KINDS.has(state.items.get(id)?.kind ?? "")));
+	const lowest = footage.length ? Math.min(...footage.map((t) => t.order)) : -1;
+	const drawn = (id) => {
+		const k = state.items.get(id)?.kind ?? "";
+		return k !== "adjustment" && OVERLAY_KINDS.has(k);
+	};
+	const below = state.tracks.filter((t) => t.order < lowest && !t.hidden && t.items.some(drawn));
+	const set = new Set(below.map((t) => t.id));
+	memo.set(state, set);
+	return set;
+}
+// src/model/effects.ts
+function num(params, keys, fallback) {
+	for (const k of keys) {
+		const v = params[k];
+		if (typeof v === "number" && Number.isFinite(v)) return v;
+	}
+	return fallback;
+}
+/**
+* Levels as `brightness(k) contrast(c)`: out = (in − black) / (white − black), with c = 1 + 2·black·s
+* and k = s/c for s = 1/(white − black). Gamma has no filter form; the lint reports it.
+*/
+function levels(p) {
+	const black = Math.max(0, Math.min(1, num(p, ["black"], 0))), white = Math.max(0, Math.min(1, num(p, ["white"], 1)));
+	if (white <= black) return "";
+	const s = 1 / (white - black), c = 1 + 2 * black * s;
+	return `brightness(${s / c}) contrast(${c})`;
+}
+/** Effects the painter draws over the element after it (`postEffects`), not as filters. */
+const POST_TYPES = ["vignette", "grain"];
+/** One filter per effect type (kit's VIDEO_EFFECT_TYPES), less the post effects. */
+const CANVAS_FILTERABLE = {
+	brightness: (p) => `brightness(${1 + num(p, ["amount", "value"], 0) / 100})`,
+	contrast: (p) => `contrast(${1 + num(p, ["amount", "value"], 0) / 100})`,
+	saturation: (p) => `saturate(${1 + num(p, ["amount", "value"], 0) / 100})`,
+	hue: (p) => `hue-rotate(${num(p, [
+		"angle",
+		"amount",
+		"value"
+	], 0)}deg)`,
+	blur: (p) => `blur(${num(p, [
+		"radius",
+		"amount",
+		"value"
+	], 4)}px)`,
+	grayscale: (p) => `grayscale(${num(p, ["amount", "value"], 100) / 100})`,
+	sepia: (p) => `sepia(${num(p, ["amount", "value"], 100) / 100})`,
+	invert: (p) => `invert(${num(p, ["amount", "value"], 100) / 100})`,
+	temperature: (p) => colorGradeFilters({ temperature: num(p, ["amount", "value"], 0) }).join(" "),
+	tint: (p) => colorGradeFilters({ tint: num(p, ["amount", "value"], 0) }).join(" "),
+	levels,
+	shadow: (p) => `drop-shadow(${num(p, ["x"], 0)}px ${num(p, ["y"], 4)}px ${num(p, ["blur"], 8)}px ${typeof p.color === "string" ? p.color : "rgba(0,0,0,0.5)"})`
+};
+/** An effect's params with its keyframed ones (`effect.<id>.<param>` keyframes on the element) evaluated at element-relative `rel`. */
+function paramsAt(children, effect, rel) {
+	const base = effect.props.params ?? {};
+	const prefix = `effect.${effect.id}.`;
+	let out = null;
+	for (const k of children) {
+		const property = k.kind === "keyframe" ? String(k.props.property) : "";
+		if (!property.startsWith(prefix)) continue;
+		const name = property.slice(prefix.length);
+		out ??= { ...base };
+		out[name] = keyframedValue(children, property, rel, base[name]);
+	}
+	return out ?? base;
+}
+/** A single canvas/CSS `filter` string for an element's effect and colour-grade children at element-relative `rel`; unsupported types are listed. */
+function filterString(children, elementId, rel, declared = /* @__PURE__ */ new Set()) {
+	const parts = [];
+	const unsupported = [];
+	for (const c of children) if (c.kind === "effect") {
+		if (c.props.enabled === false) continue;
+		const type = String(c.props.type);
+		if (POST_TYPES.includes(type) || declared.has(type)) continue;
+		const make = CANVAS_FILTERABLE[type];
+		if (make) {
+			const f = make(paramsAt(children, c, rel));
+			if (f) parts.push(f);
+		} else {
+			unsupported.push(type);
+			devWarn(`effect:${elementId}:${type}`, `effect "${type}" on "${elementId}" is not rendered by the browser player`);
+		}
+	} else if (c.kind === "colorGrade") parts.push(...colorGradeFilters({
+		temperature: keyframedValue(children, "colorGrade.temperature", rel, c.props.temperature),
+		tint: keyframedValue(children, "colorGrade.tint", rel, c.props.tint)
+	}));
+	return {
+		filter: parts.join(" "),
+		unsupported
+	};
+}
+/** Vignette and grain, in order, with `amount` on 0..1; grain is seeded by the frame, so a frame always looks the same. */
+function postEffects(children, frame, rel) {
+	const out = [];
+	for (const c of children) {
+		if (c.kind !== "effect" || c.props.enabled === false) continue;
+		const amount = Math.max(0, Math.min(1, num(paramsAt(children, c, rel), [
+			"amount",
+			"intensity",
+			"value"
+		], c.props.type === "grain" ? 20 : 50) / 100));
+		if (amount <= 0) continue;
+		if (c.props.type === "vignette") out.push({
+			type: "vignette",
+			amount
+		});
+		else if (c.props.type === "grain") out.push({
+			type: "grain",
+			amount,
+			seed: frame
+		});
+	}
+	return out.length ? out : void 0;
+}
+/**
+* Temperature and tint approximated with CSS filters: warm pulls toward
+* sepia, cool toward a slight hue rotation; tint rotates hue. Wheels, curves,
+* LUTs and HSL bands are not rendered by the browser player.
+*/
+function colorGradeFilters(props) {
+	const out = [];
+	const temperature = typeof props.temperature === "number" ? props.temperature : 0;
+	const tint = typeof props.tint === "number" ? props.tint : 0;
+	if (temperature > 0) out.push(`sepia(${temperature / 100 * .5})`);
+	else if (temperature < 0) out.push(`hue-rotate(${-temperature / 10}deg) saturate(${1 + -temperature / 200})`);
+	if (tint !== 0) out.push(`hue-rotate(${tint / 4}deg)`);
+	return out;
+}
+// src/model/shaders.ts
+/** The element's declared effects, in file order, with keyframed params evaluated at element-relative `rel`. */
+function effectPasses(state, children, rel) {
+	if (state.shaders.length === 0) return void 0;
+	const out = [];
+	for (const c of children) {
+		if (c.kind !== "effect" || c.props.enabled === false) continue;
+		const def = shaderFor(state.shaders, "effect", c.props.type);
+		if (def) out.push({
+			name: def.name,
+			source: def.shader,
+			params: paramsAt(children, c, rel),
+			time: rel
+		});
+	}
+	return out.length > 0 ? out : void 0;
+}
+/** The side of a declared transition this clip plays, or undefined for a built-in transition. */
+function transitionPass(state, role) {
+	const x = role.placement;
+	const def = shaderFor(state.shaders, "transition", x.props.type);
+	if (!def) return void 0;
+	return {
+		id: x.id,
+		name: def.name,
+		source: def.shader,
+		params: x.props.params ?? {},
+		progress: role.progress,
+		time: role.progress * x.duration,
+		role: role.role,
+		paired: x.between !== void 0
+	};
+}
+/** The effect types the file declares, which the filter string leaves to the shader passes. */
+function declaredEffects(state) {
+	return new Set(state.shaders.filter((s) => s.kind === "effect").map((s) => s.name));
+}
+// src/model/transform.ts
+const IDENTITY = {
+	a: 1,
+	b: 0,
+	c: 0,
+	d: 1,
+	e: 0,
+	f: 0
+};
+function multiply(m, n) {
+	return {
+		a: m.a * n.a + m.c * n.b,
+		b: m.b * n.a + m.d * n.b,
+		c: m.a * n.c + m.c * n.d,
+		d: m.b * n.c + m.d * n.d,
+		e: m.a * n.e + m.c * n.f + m.e,
+		f: m.b * n.e + m.d * n.f + m.f
+	};
+}
+const translate = (x, y) => ({
+	...IDENTITY,
+	e: x,
+	f: y
+});
+const scaleM = (sx, sy) => ({
+	...IDENTITY,
+	a: sx,
+	d: sy
+});
+function rotate(deg) {
+	const r = deg * Math.PI / 180;
+	const cos = Math.cos(r), sin = Math.sin(r);
+	return {
+		a: cos,
+		b: sin,
+		c: -sin,
+		d: cos,
+		e: 0,
+		f: 0
+	};
+}
+function matrixToCss(m) {
+	const n = (v) => Math.abs(v) < 1e-9 ? "0" : String(Math.round(v * 1e6) / 1e6);
+	return `matrix(${n(m.a)}, ${n(m.b)}, ${n(m.c)}, ${n(m.d)}, ${n(m.e)}, ${n(m.f)})`;
+}
+/** The fitted rectangle of a source inside the composition, centred. */
+function fitRect(comp, src, fit) {
+	const W = comp.width, H = comp.height;
+	const w = src.width > 0 ? src.width : W, h = src.height > 0 ? src.height : H;
+	if (fit === "stretch") return {
+		x: 0,
+		y: 0,
+		w: W,
+		h: H
+	};
+	let s = 1;
+	if (fit === "contain") s = Math.min(W / w, H / h);
+	else if (fit === "cover") s = Math.max(W / w, H / h);
+	const dw = w * s, dh = h * s;
+	return {
+		x: (W - dw) / 2,
+		y: (H - dh) / 2,
+		w: dw,
+		h: dh
+	};
+}
+/**
+* Lay out a source of `src` pixels in the composition: crop, fit, then the
+* element transform (position offset, scale, rotation about the anchor).
+*/
+function layoutRect(comp, src, fit, transform) {
+	const t = transform ?? {};
+	let crop;
+	let effective = src;
+	if (t.crop && t.crop.width > 0 && t.crop.height > 0) {
+		crop = {
+			x: t.crop.x * src.width,
+			y: t.crop.y * src.height,
+			w: t.crop.width * src.width,
+			h: t.crop.height * src.height
+		};
+		effective = {
+			width: crop.w,
+			height: crop.h
+		};
+	}
+	const rect = fitRect(comp, effective, fit);
+	return {
+		rect,
+		matrix: transformMatrix(rect, t),
+		...crop ? { crop } : {},
+		opacity: t.opacity ?? 1
+	};
+}
+/** The matrix mapping an element's local pixels to the composition, given its untransformed rect. */
+function transformMatrix(rect, t) {
+	const tr = t ?? {};
+	const anchor = tr.anchor ?? {
+		x: .5,
+		y: .5
+	};
+	const ox = rect.x + anchor.x * rect.w, oy = rect.y + anchor.y * rect.h;
+	const sx = typeof tr.scale === "number" ? tr.scale : tr.scale?.x ?? 1;
+	const sy = typeof tr.scale === "number" ? tr.scale : tr.scale?.y ?? 1;
+	const px = tr.position?.x ?? 0, py = tr.position?.y ?? 0;
+	let m = translate(px + ox, py + oy);
+	if (tr.rotation) m = multiply(m, rotate(tr.rotation));
+	if (sx !== 1 || sy !== 1) m = multiply(m, scaleM(sx, sy));
+	m = multiply(m, translate(-ox, -oy));
+	return multiply(m, translate(rect.x, rect.y));
+}
+/** The upright box around `rect` after `m`: where a rectangle of an element's local pixels lands in the composition. */
+function boundsOf(rect, m) {
+	const xs = [
+		rect.x,
+		rect.x + rect.w,
+		rect.x,
+		rect.x + rect.w
+	], ys = [
+		rect.y,
+		rect.y,
+		rect.y + rect.h,
+		rect.y + rect.h
+	];
+	const px = xs.map((x, i) => m.a * x + m.c * ys[i] + m.e), py = xs.map((x, i) => m.b * x + m.d * ys[i] + m.f);
+	const x = Math.min(...px), y = Math.min(...py);
+	return {
+		x,
+		y,
+		w: Math.max(...px) - x,
+		h: Math.max(...py) - y
+	};
+}
+/** The transform with its keyframed properties evaluated at element-relative time `rel`. */
+function animatedTransform(base, children, rel) {
+	if (!children.some((c) => c.kind === "keyframe")) return base ?? {};
+	const t = { ...base ?? {} };
+	const num = (prop, fallback) => Number(keyframedValue(children, prop, rel, fallback));
+	const pos = base?.position ?? {
+		x: 0,
+		y: 0
+	};
+	const scl = typeof base?.scale === "number" ? {
+		x: base.scale,
+		y: base.scale
+	} : base?.scale ?? {
+		x: 1,
+		y: 1
+	};
+	const anc = base?.anchor ?? {
+		x: .5,
+		y: .5
+	};
+	const crop = base?.crop ?? {
+		x: 0,
+		y: 0,
+		width: 1,
+		height: 1
+	};
+	t.position = {
+		x: num("transform.position.x", pos.x),
+		y: num("transform.position.y", pos.y)
+	};
+	t.scale = {
+		x: num("transform.scale.x", scl.x),
+		y: num("transform.scale.y", scl.y)
+	};
+	t.rotation = num("transform.rotation", base?.rotation ?? 0);
+	t.opacity = num("transform.opacity", base?.opacity ?? 1);
+	t.anchor = {
+		x: num("transform.anchor.x", anc.x),
+		y: num("transform.anchor.y", anc.y)
+	};
+	t.borderRadius = num("transform.borderRadius", base?.borderRadius ?? 0);
+	if (base?.crop || [
+		"x",
+		"y",
+		"width",
+		"height"
+	].some((k) => children.some((c) => c.kind === "keyframe" && c.props.property === `transform.crop.${k}`))) t.crop = {
+		x: num("transform.crop.x", crop.x),
+		y: num("transform.crop.y", crop.y),
+		width: num("transform.crop.width", crop.width),
+		height: num("transform.crop.height", crop.height)
+	};
+	return t;
+}
+/** CSS for a DOM element laid out like `layoutRect` does: it sits at the origin with `transform-origin: 0 0`. */
+function cssTransform(layout) {
+	return matrixToCss(layout.matrix);
+}
+// src/model/motion.ts
+const STILL = {
+	opacity: 1,
+	matrix: IDENTITY,
+	clip: null,
+	draw: null
+};
+const DEFAULT_DURATION = .5;
+/** How far a slide travels: a quarter of the element's size, at most this many pixels (a title's box is the frame). */
+const SLIDE = .25;
+const SLIDE_MAX = 160;
+/**
+* The entrance and exit of an element `rel` seconds into its `duration`, for a
+* `width` by `height` box. Both can play at once on a short element; their
+* effects multiply. Pop, bounce and elastic carry their own curve; the others
+* follow the animation's easing (default ease-out).
+*/
+function motionAt(enter, exit, rel, duration, width, height) {
+	if (!enter && !exit) return STILL;
+	let m = STILL;
+	if (enter && enter.type !== "none") {
+		const len = enter.duration ?? DEFAULT_DURATION;
+		m = combine(m, effect(enter, len > 0 ? rel / len : 1, width, height));
+	}
+	if (exit && exit.type !== "none") {
+		const len = exit.duration ?? DEFAULT_DURATION;
+		m = combine(m, effect(exit, len > 0 ? (duration - rel) / len : 1, width, height));
+	}
+	return m;
+}
+/** One animation at raw progress `x` (0 hidden, 1 fully shown). */
+function effect(anim, x, w, h) {
+	const raw = Math.max(0, Math.min(1, x));
+	if (raw >= 1) return STILL;
+	const k = ease(anim.easing ?? "ease-out", raw);
+	const about = (m) => multiply(multiply(translate(w / 2, h / 2), m), translate(-w / 2, -h / 2));
+	const fadeIn = Math.min(1, raw * 3);
+	switch (anim.type) {
+		case "fade": return {
+			...STILL,
+			opacity: k
+		};
+		case "slide-left": return {
+			...STILL,
+			opacity: k,
+			matrix: translate(Math.min(w * SLIDE, SLIDE_MAX) * (1 - k), 0)
+		};
+		case "slide-right": return {
+			...STILL,
+			opacity: k,
+			matrix: translate(-Math.min(w * SLIDE, SLIDE_MAX) * (1 - k), 0)
+		};
+		case "slide-up": return {
+			...STILL,
+			opacity: k,
+			matrix: translate(0, Math.min(h * SLIDE, SLIDE_MAX) * (1 - k))
+		};
+		case "slide-down": return {
+			...STILL,
+			opacity: k,
+			matrix: translate(0, -Math.min(h * SLIDE, SLIDE_MAX) * (1 - k))
+		};
+		case "scale": return {
+			...STILL,
+			opacity: k,
+			matrix: about(scaleM(.6 + .4 * k, .6 + .4 * k))
+		};
+		case "rotate": return {
+			...STILL,
+			opacity: k,
+			matrix: about(multiply(rotate(-90 * (1 - k)), scaleM(.8 + .2 * k, .8 + .2 * k)))
+		};
+		case "pop": {
+			const s = ease("easeOutBack", raw);
+			return {
+				...STILL,
+				opacity: fadeIn,
+				matrix: about(scaleM(s, s))
+			};
+		}
+		case "bounce": {
+			const s = ease("easeOutBounce", raw);
+			return {
+				...STILL,
+				opacity: fadeIn,
+				matrix: about(scaleM(s, s))
+			};
+		}
+		case "elastic": {
+			const s = ease("easeOutElastic", raw);
+			return {
+				...STILL,
+				opacity: fadeIn,
+				matrix: about(scaleM(s, s))
+			};
+		}
+		case "flip-horizontal": return {
+			...STILL,
+			matrix: about(scaleM(Math.max(.001, Math.sin(k * Math.PI / 2)), 1))
+		};
+		case "flip-vertical": return {
+			...STILL,
+			matrix: about(scaleM(1, Math.max(.001, Math.sin(k * Math.PI / 2))))
+		};
+		case "wipe-right": return {
+			...STILL,
+			clip: [{
+				x: 0,
+				y: 0,
+				w: w * k,
+				h
+			}]
+		};
+		case "wipe-left": return {
+			...STILL,
+			clip: [{
+				x: w * (1 - k),
+				y: 0,
+				w: w * k,
+				h
+			}]
+		};
+		case "wipe-down": return {
+			...STILL,
+			clip: [{
+				x: 0,
+				y: 0,
+				w,
+				h: h * k
+			}]
+		};
+		case "wipe-up": return {
+			...STILL,
+			clip: [{
+				x: 0,
+				y: h * (1 - k),
+				w,
+				h: h * k
+			}]
+		};
+		case "reveal-center": return {
+			...STILL,
+			clip: [{
+				x: w * (1 - k) / 2,
+				y: h * (1 - k) / 2,
+				w: w * k,
+				h: h * k
+			}]
+		};
+		case "reveal-edges": return {
+			...STILL,
+			clip: [{
+				x: 0,
+				y: 0,
+				w: w * k / 2,
+				h
+			}, {
+				x: w - w * k / 2,
+				y: 0,
+				w: w * k / 2,
+				h
+			}]
+		};
+		case "draw": return {
+			...STILL,
+			draw: k
+		};
+		default: return {
+			...STILL,
+			opacity: k
+		};
+	}
+}
+/** Both effects at once: opacities and draw amounts multiply, matrices compose, clips intersect. */
+function combine(a, b) {
+	if (b === STILL) return a;
+	if (a === STILL) return b;
+	return {
+		opacity: a.opacity * b.opacity,
+		matrix: multiply(a.matrix, b.matrix),
+		clip: a.clip && b.clip ? intersect(a.clip, b.clip) : a.clip ?? b.clip,
+		draw: a.draw !== null && b.draw !== null ? a.draw * b.draw : a.draw ?? b.draw
+	};
+}
+function intersect(a, b) {
+	const out = [];
+	for (const r of a) for (const s of b) {
+		const x = Math.max(r.x, s.x), y = Math.max(r.y, s.y);
+		const x2 = Math.min(r.x + r.w, s.x + s.w), y2 = Math.min(r.y + r.h, s.y + s.h);
+		if (x2 > x && y2 > y) out.push({
+			x,
+			y,
+			w: x2 - x,
+			h: y2 - y
+		});
+	}
+	return out;
+}
+// src/model/transition.ts
+const DIRECTION = {
+	left: [-1, 0],
+	right: [1, 0],
+	up: [0, -1],
+	down: [0, 1]
+};
+/**
+* One side of a transition at its eased progress. Between two clips the
+* incoming one goes over the outgoing one, which stays put unless the
+* transition moves it; an edge transition plays its side against what is beneath.
+* Types without a look of their own draw as a crossfade.
+*/
+function transitionLook(t, W, H) {
+	const x = t.placement, p = t.progress, role = t.role, between = x.between !== void 0;
+	const type = String(x.props.type ?? "crossfade");
+	const params = x.props.params ?? {};
+	const dir = DIRECTION[String(params.direction)] ?? DIRECTION.left;
+	switch (type) {
+		case "dipToBlack":
+		case "dipToWhite": {
+			if (!between) return {
+				opacity: 1,
+				dip: role === "in" ? 1 - p : p
+			};
+			if (role === "out") return { opacity: 1 };
+			const ramp = (1 - (x.duration > 0 ? Math.max(0, Math.min(1, Number(params.holdDuration ?? .1) / x.duration)) : 1)) / 2;
+			const dip = ramp <= 0 ? 1 : Math.min(1, p / ramp, (1 - p) / ramp);
+			return {
+				opacity: p >= .5 ? 1 : 0,
+				dip
+			};
+		}
+		case "wipe":
+			if (role === "out" && between) return { opacity: 1 };
+			return {
+				opacity: 1,
+				clip: effect({
+					type: `wipe-${params.direction === "diagonal" || params.direction === void 0 ? "left" : String(params.direction)}`,
+					easing: "linear"
+				}, role === "in" ? p : 1 - p, W, H).clip ?? [{
+					x: 0,
+					y: 0,
+					w: W,
+					h: H
+				}]
+			};
+		case "slide":
+		case "push":
+			if (role === "in") return {
+				opacity: 1,
+				offset: {
+					x: -dir[0] * W * (1 - p),
+					y: -dir[1] * H * (1 - p)
+				}
+			};
+			if (between && type === "slide" && params.pushOut !== true) return { opacity: 1 };
+			return {
+				opacity: 1,
+				offset: {
+					x: dir[0] * W * p,
+					y: dir[1] * H * p
+				}
+			};
+		default: return { opacity: role === "in" ? p : between ? 1 : 1 - p };
+	}
+}
+// src/model/frame-plan.ts
+const BLEND_TO_CANVAS = {
+	normal: "source-over",
+	multiply: "multiply",
+	screen: "screen",
+	overlay: "overlay",
+	darken: "darken",
+	lighten: "lighten",
+	"color-dodge": "color-dodge",
+	"color-burn": "color-burn",
+	"hard-light": "hard-light",
+	"soft-light": "soft-light",
+	difference: "difference",
+	exclusion: "exclusion",
+	hue: "hue",
+	saturation: "saturation",
+	color: "color",
+	luminosity: "luminosity",
+	add: "lighter",
+	"linear-dodge": "lighter"
+};
+function blendOf(value) {
+	return BLEND_TO_CANVAS[value] ?? "source-over";
+}
+/**
+* Everything the painter needs to draw composition time `t`, in draw order.
+* Pure: the same state and time give a deep-equal plan. DOM-rendered kinds
+* (title, shape, svg, sticker, layer, captions) are not in it; the DOM layer
+* reads `visiblePlacements` itself.
+*/
+function buildFramePlan(state, t, resolveNested) {
+	const comp = state.composition;
+	const warnings = [];
+	const ops = [];
+	const { background, backgroundGradient: gradient, blur } = compositionBackground(state);
+	const clear = backdropTracks(state).size > 0;
+	if (blur && clear) warnings.push("background mode blur is drawn as a colour under backdrop overlays");
+	for (const item of visiblePlacements(state, t)) {
+		const p = item.placement;
+		if (p.kind === "clip" || p.kind === "nested") {
+			const op = mediaOp(state, item, t, resolveNested, warnings);
+			if (op) ops.push(op);
+			const dip = item.transition && !op?.transition && transitionLook(item.transition, comp.width, comp.height).dip;
+			if (op && dip) ops.push(dipOp(item.transition.placement, dip, comp.width, comp.height));
+		} else if (p.kind === "adjustment") {
+			if (p.props.enabled === false) continue;
+			const { filter } = filterString(item.children, p.id, t - p.start, declaredEffects(state));
+			const shaders = effectPasses(state, item.children, t - p.start);
+			if (ops.length === 0) continue;
+			ops.push({
+				id: p.id,
+				kind: "adjustment",
+				rect: {
+					x: 0,
+					y: 0,
+					w: comp.width,
+					h: comp.height
+				},
+				matrix: {
+					a: 1,
+					b: 0,
+					c: 0,
+					d: 1,
+					e: 0,
+					f: 0
+				},
+				fit: "stretch",
+				opacity: Number(p.props.opacity ?? 1),
+				blend: blendOf(p.props.blend),
+				filter,
+				borderRadius: 0,
+				...shaders ? { shaders } : {}
+			});
+		}
+	}
+	const footage = blur && !clear ? ops.find((o) => o.kind === "video" || o.kind === "image" || o.kind === "nested") : void 0;
+	return {
+		time: t,
+		frame: frameIndex(t, comp.fps),
+		background,
+		...gradient ? { backgroundGradient: gradient } : {},
+		...clear ? { clear: true } : {},
+		...footage ? { backgroundBlur: { id: footage.id } } : {},
+		ops,
+		warnings
+	};
+}
+/** The composition's background as the painter draws it: a colour, or a gradient (whose first colour is `background`). */
+function compositionBackground(state) {
+	const bg = state.items.get(state.composition.id)?.props.background;
+	const gradient = bg?.mode === "gradient" && bg.gradient && bg.gradient.stops.length >= 2 ? bg.gradient : void 0;
+	return {
+		background: bg?.color ?? gradient?.stops[0]?.color ?? "#000000",
+		...gradient ? { backgroundGradient: gradient } : {},
+		blur: bg?.mode === "blur"
+	};
+}
+function mediaOp(state, item, t, resolveNested, warnings) {
+	const p = item.placement;
+	const comp = state.composition;
+	const rel = t - p.start;
+	const transform = animatedTransform(p.props.transform, item.children, rel);
+	const fit = p.props.fit ?? "contain";
+	let opacity = (transform.opacity ?? 1) * (typeof p.props.blendOpacity === "number" ? p.props.blendOpacity : 1);
+	let look;
+	const shaded = item.transition ? transitionPass(state, item.transition) : void 0;
+	if (item.transition && !shaded) {
+		const x = item.transition.placement;
+		const type = String(x.props.type ?? "crossfade");
+		if (!TRANSITION_TYPES.includes(type)) {
+			devWarn(`transition:${x.id}:${type}`, `transition "${type}" on "${x.id}" is drawn as a crossfade`);
+			warnings.push(`transition ${x.id}: ${type} drawn as crossfade`);
+		}
+		look = transitionLook(item.transition, comp.width, comp.height);
+		opacity *= look.opacity;
+	}
+	const { filter } = filterString(item.children, p.id, rel, declaredEffects(state));
+	const shaders = effectPasses(state, item.children, rel);
+	const mask = maskOf(item.children, warnings);
+	const post = postEffects(item.children, frameIndex(t, comp.fps), rel);
+	const common = {
+		id: p.id,
+		fit,
+		opacity,
+		blend: blendOf(p.props.blend),
+		filter,
+		borderRadius: transform.borderRadius ?? 0,
+		...mask ? { mask } : {},
+		...look?.clip ? { clip: look.clip } : {},
+		...post ? { post } : {},
+		...shaders ? { shaders } : {},
+		...shaded ? { transition: shaded } : {}
+	};
+	const shift = (m) => look?.offset ? multiply(translate(look.offset.x, look.offset.y), m) : m;
+	if (p.kind === "nested") {
+		const nested = resolveNested?.(p) ?? null;
+		if (!nested) {
+			warnings.push(`nested ${p.id}: no resolver`);
+			const layout = layoutRect(comp, comp, fit, transform);
+			return {
+				...common,
+				kind: "error",
+				rect: layout.rect,
+				matrix: shift(layout.matrix)
+			};
+		}
+		const layout = layoutRect(comp, nested.composition, fit, transform);
+		return {
+			...common,
+			kind: "nested",
+			nested: {
+				state: nested,
+				time: nestedSourceTime(p, t)
+			},
+			rect: layout.rect,
+			matrix: shift(layout.matrix),
+			...layout.crop ? { crop: layout.crop } : {}
+		};
+	}
+	const src = p.source;
+	const asset = src ? lookupAsset(state.manifest, src.asset) : null;
+	if (!src || !asset) {
+		const layout = layoutRect(comp, comp, "contain", transform);
+		return {
+			...common,
+			kind: "error",
+			...src ? { asset: src.asset } : {},
+			rect: layout.rect,
+			matrix: shift(layout.matrix)
+		};
+	}
+	const size = {
+		width: asset.width ?? comp.width,
+		height: asset.height ?? comp.height
+	};
+	const layout = layoutRect(comp, size, fit, transform);
+	return {
+		...common,
+		kind: asset.kind === "image" ? "image" : "video",
+		asset: asset.id,
+		sourceTime: placementSourceTime(p, item.children, t),
+		rect: layout.rect,
+		matrix: shift(layout.matrix),
+		...layout.crop ? {
+			crop: layout.crop,
+			cropReference: size
+		} : {}
+	};
+}
+/** A dip to black or white over everything drawn so far: an adjustment that maps the picture to the colour, `amount` of the way. */
+function dipOp(x, amount, width, height) {
+	return {
+		id: x.id,
+		kind: "adjustment",
+		rect: {
+			x: 0,
+			y: 0,
+			w: width,
+			h: height
+		},
+		matrix: {
+			a: 1,
+			b: 0,
+			c: 0,
+			d: 1,
+			e: 0,
+			f: 0
+		},
+		fit: "stretch",
+		opacity: amount,
+		blend: "source-over",
+		filter: x.props.type === "dipToWhite" ? "brightness(0) invert(1)" : "brightness(0)",
+		borderRadius: 0
+	};
+}
+function maskOf(children, warnings) {
+	const m = children.find((c) => c.kind === "mask");
+	if (!m) return void 0;
+	if (!MASK_TYPES.includes(m.props.type ?? "shape")) {
+		warnings.push(`mask ${m.id}: type ${String(m.props.type)} is not rendered`);
+		return;
+	}
+	return {
+		shape: m.props.shape,
+		path: m.props.path,
+		feather: Number(m.props.feather ?? 0),
+		inverted: m.props.inverted === true,
+		opacity: Number(m.props.opacity ?? 1)
+	};
+}
+// src/nested.ts
+/**
+* Resolves `<Nested of={Helper}>` through the kit's `resolveScene`, once per
+* helper. File references (`of="file:..."`) have no loader yet and resolve
+* to nothing.
+*/
+function makeNestedResolver(parent) {
+	const cache = /* @__PURE__ */ new WeakMap();
+	return (p) => {
+		const of = p.props.of;
+		if (typeof of !== "function") return null;
+		const hit = cache.get(of);
+		if (hit) return hit;
+		const outer = parent();
+		const state = resolveScene(of, p.props, outer.composition, outer.manifest);
+		cache.set(of, state);
+		return state;
+	};
 }
 // src/render/masks.ts
 /**
@@ -1223,6 +2423,201 @@ function roundedRect(ctx, x, y, w, h, r) {
 	ctx.arcTo(x, y, x + rr, y, rr);
 	ctx.closePath();
 }
+// src/render/shaders.ts
+const VERTEX = `#version 300 es
+in vec2 position;
+out vec2 cutcraft_uv;
+void main() {
+  // uv (0, 0) is the picture's top left, as in CSS.
+  cutcraft_uv = vec2((position.x + 1.0) / 2.0, (1.0 - position.y) / 2.0);
+  gl_Position = vec4(position, 0.0, 1.0);
+}`;
+/** Names the runner gives every shader; a param may not take one. */
+const RESERVED = /* @__PURE__ */ new Set([
+	"image",
+	"from",
+	"to",
+	"resolution",
+	"time",
+	"progress",
+	"position"
+]);
+/** A param as a uniform: a number as a float, a boolean as a bool, 2 to 4 numbers as a vec, `#rgb`/`#rrggbb` as a vec3. */
+function uniformOf(value) {
+	if (typeof value === "number" && Number.isFinite(value)) return {
+		type: "float",
+		value: [value]
+	};
+	if (typeof value === "boolean") return {
+		type: "bool",
+		value: [value ? 1 : 0]
+	};
+	if (Array.isArray(value) && value.length >= 2 && value.length <= 4 && value.every((v) => typeof v === "number")) return {
+		type: `vec${value.length}`,
+		value
+	};
+	if (typeof value === "string") {
+		const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(value)?.[1];
+		if (!hex) return null;
+		const full = hex.length === 3 ? [...hex].map((c) => c + c).join("") : hex;
+		return {
+			type: "vec3",
+			value: [
+				0,
+				2,
+				4
+			].map((i) => Number.parseInt(full.slice(i, i + 2), 16) / 255)
+		};
+	}
+	return null;
+}
+/** The fragment shader around a declared GLSL function: its inputs, its params as uniforms, and a `main` that calls it. */
+function fragmentSource(kind, source, params) {
+	const uniforms = Object.entries(params).map(([name, value]) => [name, uniformOf(value)]).filter(([name, u]) => u && /^[A-Za-z_]\w*$/.test(name) && !RESERVED.has(name)).map(([name, u]) => `uniform ${u.type} ${name};`);
+	return `#version 300 es
+precision highp float;
+${kind === "effect" ? "uniform sampler2D image;" : "uniform sampler2D from;\nuniform sampler2D to;\nuniform float progress;"}
+uniform vec2 resolution;
+uniform float time;
+${uniforms.join("\n")}
+in vec2 cutcraft_uv;
+out vec4 cutcraft_out;
+#line 1
+${source}
+void main() {
+  vec4 c = ${kind}(cutcraft_uv);
+  cutcraft_out = vec4(c.rgb * c.a, c.a);
+}`;
+}
+var ShaderRunner = class {
+	width;
+	height;
+	createCanvas;
+	canvas = null;
+	gl = null;
+	tried = false;
+	programs = /* @__PURE__ */ new Map();
+	textures = [];
+	blank = null;
+	constructor(width, height, createCanvas) {
+		this.width = width;
+		this.height = height;
+		this.createCanvas = createCanvas;
+	}
+	/** Whether WebGL 2 is there to run shaders. */
+	get available() {
+		return this.context() !== null;
+	}
+	/** The effects run in order over `source`; the result is the runner's own canvas, valid until its next run. */
+	effects(source, passes) {
+		const gl = this.context();
+		if (!gl) return null;
+		let input = source;
+		for (const pass of passes) {
+			this.draw(gl, "effect", pass.source, pass.params, { image: input }, { time: pass.time });
+			input = this.canvas;
+		}
+		return this.canvas;
+	}
+	/** The transition between two pictures (either may be absent: an edge blends with nothing). */
+	transition(from, to, pass) {
+		const gl = this.context();
+		if (!gl) return null;
+		const empty = this.empty();
+		this.draw(gl, "transition", pass.source, pass.params, {
+			from: from ?? empty,
+			to: to ?? empty
+		}, {
+			time: pass.time,
+			progress: pass.progress
+		});
+		return this.canvas;
+	}
+	context() {
+		if (this.tried) return this.gl;
+		this.tried = true;
+		try {
+			this.canvas = this.createCanvas(this.width, this.height);
+			const gl = this.canvas.getContext?.("webgl2", {
+				premultipliedAlpha: true,
+				preserveDrawingBuffer: true,
+				antialias: false
+			});
+			if (!gl) return null;
+			const buffer = gl.createBuffer();
+			gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+			gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+				-1,
+				-1,
+				3,
+				-1,
+				-1,
+				3
+			]), gl.STATIC_DRAW);
+			this.gl = gl;
+		} catch {
+			this.gl = null;
+		}
+		return this.gl;
+	}
+	empty() {
+		this.blank ??= this.createCanvas(this.width, this.height);
+		return this.blank;
+	}
+	program(gl, fragment) {
+		const cached = this.programs.get(fragment);
+		if (cached) return cached;
+		const compile = (type, text) => {
+			const shader = gl.createShader(type);
+			gl.shaderSource(shader, text);
+			gl.compileShader(shader);
+			if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(`the shader does not compile: ${gl.getShaderInfoLog(shader)?.trim()}`);
+			return shader;
+		};
+		const program = gl.createProgram();
+		gl.attachShader(program, compile(gl.VERTEX_SHADER, VERTEX));
+		gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fragment));
+		gl.bindAttribLocation(program, 0, "position");
+		gl.linkProgram(program);
+		if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error(`the shader does not link: ${gl.getProgramInfoLog(program)?.trim()}`);
+		this.programs.set(fragment, program);
+		return program;
+	}
+	draw(gl, kind, source, params, images, values) {
+		const program = this.program(gl, fragmentSource(kind, source, params));
+		gl.useProgram(program);
+		gl.viewport(0, 0, this.width, this.height);
+		Object.entries(images).forEach(([name, image], unit) => {
+			this.textures[unit] ??= gl.createTexture();
+			gl.activeTexture(gl.TEXTURE0 + unit);
+			gl.bindTexture(gl.TEXTURE_2D, this.textures[unit]);
+			gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+			gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+			gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+			gl.uniform1i(gl.getUniformLocation(program, name), unit);
+		});
+		gl.uniform2f(gl.getUniformLocation(program, "resolution"), this.width, this.height);
+		for (const [name, value] of Object.entries(values)) gl.uniform1f(gl.getUniformLocation(program, name), value);
+		for (const [name, value] of Object.entries(params)) {
+			const u = uniformOf(value);
+			const at = u && gl.getUniformLocation(program, name);
+			if (!u || !at) continue;
+			if (u.type === "float" || u.type === "bool") gl.uniform1f(at, u.value[0]);
+			else if (u.type === "vec2") gl.uniform2fv(at, u.value);
+			else if (u.type === "vec3") gl.uniform3fv(at, u.value);
+			else gl.uniform4fv(at, u.value);
+		}
+		gl.enableVertexAttribArray(0);
+		gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+		gl.clearColor(0, 0, 0, 0);
+		gl.clear(gl.COLOR_BUFFER_BIT);
+		gl.drawArrays(gl.TRIANGLES, 0, 3);
+	}
+};
 // src/render/painter.ts
 /**
 * Executes a FramePlan on a 2D context of composition size. Each op is
@@ -1237,6 +2632,11 @@ var CanvasPainter = class {
 	/** An element drawn on its own before compositing: a feathered mask, vignette, grain. */
 	layer = null;
 	grain = null;
+	/** Runs the effects and transitions the file declares; made on first use. */
+	shaders = null;
+	/** The outgoing side of a declared transition between two clips, waiting for the incoming side. */
+	outgoing = null;
+	outgoingPicture = null;
 	constructor(width, height, createCanvas) {
 		this.width = width;
 		this.height = height;
@@ -1250,8 +2650,12 @@ var CanvasPainter = class {
 		if (plan.clear) ctx.clearRect(0, 0, this.width, this.height);
 		else paintBackground(ctx, plan, this.width, this.height);
 		if (plan.backgroundBlur) this.blurBackground(ctx, plan, plan.backgroundBlur.id, inputs);
+		this.outgoing = null;
 		for (const op of plan.ops) if (op.kind === "adjustment") this.adjust(ctx, op);
 		else this.drawOp(ctx, op, inputs);
+		const left = this.outgoing;
+		if (left) this.composite(ctx, left.op, left.canvas);
+		this.outgoing = null;
 		ctx.setTransform(1, 0, 0, 1, 0, 0);
 	}
 	drawOp(ctx, op, inputs) {
@@ -1259,6 +2663,11 @@ var CanvasPainter = class {
 		const nested = op.kind === "nested" ? inputs.nested.get(op.id) ?? null : null;
 		if (op.kind !== "nested" && !frame) return;
 		if (op.kind === "nested" && !nested) return;
+		if ((op.shaders || op.transition) && this.runner().available) {
+			this.drawShaded(ctx, op, frame, nested);
+			return;
+		}
+		if (op.shaders || op.transition) warnNoShaders(op);
 		ctx.save();
 		ctx.globalAlpha = op.opacity;
 		ctx.globalCompositeOperation = op.blend;
@@ -1275,6 +2684,48 @@ var CanvasPainter = class {
 		this.blit(ctx, op, frame, nested);
 		ctx.restore();
 	}
+	/**
+	* An element with effects or a transition the file declares: drawn alone, run through its shaders, then composited.
+	* The outgoing side of a transition between two clips is kept until the incoming side arrives, and the two are
+	* blended in one pass.
+	*/
+	drawShaded(ctx, op, frame, nested) {
+		const feathered = !!op.mask && op.mask.feather > 0;
+		const layer = this.alone(op, frame, nested, feathered);
+		if (!layer) return;
+		const runner = this.runner();
+		let picture = layer;
+		try {
+			if (op.shaders) picture = runner.effects(layer, op.shaders) ?? layer;
+			const x = op.transition;
+			if (x?.paired && x.role === "out") {
+				this.outgoing = {
+					id: x.id,
+					canvas: copyInto(this.outgoingCanvas(), picture),
+					op
+				};
+				return;
+			}
+			if (x) {
+				const from = x.paired ? this.outgoing?.id === x.id ? this.outgoing.canvas : null : x.role === "out" ? picture : null;
+				const to = x.paired || x.role === "in" ? picture : null;
+				picture = runner.transition(from, to, x) ?? picture;
+				if (x.paired) this.outgoing = null;
+			}
+		} catch (error) {
+			warnShaderError(op, error);
+			picture = layer;
+		}
+		this.composite(ctx, op, picture);
+	}
+	runner() {
+		this.shaders ??= new ShaderRunner(this.width, this.height, this.createCanvas);
+		return this.shaders;
+	}
+	outgoingCanvas() {
+		this.outgoingPicture ??= this.createCanvas(this.width, this.height);
+		return this.outgoingPicture;
+	}
 	/** The footage's picture, blurred and scaled to cover the frame, under everything; skipped when the footage covers the frame itself. */
 	blurBackground(ctx, plan, id, inputs) {
 		const op = plan.ops.find((o) => o.id === id);
@@ -1295,7 +2746,7 @@ var CanvasPainter = class {
 	blit(ctx, op, frame, nested) {
 		const { w, h } = op.rect;
 		if (nested) ctx.drawImage(nested, 0, 0, w, h);
-		else if (frame && !(coversCanvas(op, this.width, this.height) && frame.paintFull?.(ctx, this.width, this.height))) {
+		else if (frame) {
 			const reference = op.cropReference;
 			const crop = op.crop && reference ? {
 				x: op.crop.x * frame.width / reference.width,
@@ -1327,10 +2778,15 @@ var CanvasPainter = class {
 	* blurred alpha there, and vignette and grain darken or speckle only its own pixels.
 	*/
 	drawLayered(ctx, op, frame, nested, feathered) {
+		const layer = this.alone(op, frame, nested, feathered);
+		if (layer) this.composite(ctx, op, layer);
+	}
+	/** The element drawn alone on the layer canvas, at its place in the frame, its mask and vignette or grain applied. */
+	alone(op, frame, nested, feathered) {
 		this.layer ??= this.createCanvas(this.width, this.height);
 		const layer = this.layer;
 		const lctx = layer.getContext("2d");
-		if (!lctx) return;
+		if (!lctx) return null;
 		lctx.setTransform(1, 0, 0, 1, 0, 0);
 		lctx.clearRect(0, 0, this.width, this.height);
 		lctx.save();
@@ -1372,6 +2828,10 @@ var CanvasPainter = class {
 			}
 			lctx.restore();
 		}
+		return layer;
+	}
+	/** A picture of the whole frame composited as the op: its opacity, blend, filter, wipe and rounded corners. */
+	composite(ctx, op, layer) {
 		ctx.save();
 		ctx.globalAlpha = op.opacity;
 		ctx.globalCompositeOperation = op.blend;
@@ -1404,6 +2864,13 @@ var CanvasPainter = class {
 		return this.grain;
 	}
 	adjust(ctx, op) {
+		if (op.shaders) {
+			if (this.runner().available) {
+				this.adjustShaded(ctx, op);
+				return;
+			}
+			warnNoShaders(op);
+		}
 		if (!op.filter && op.opacity >= 1) return;
 		this.scratch ??= this.createCanvas(this.width, this.height);
 		const sctx = this.scratch.getContext("2d");
@@ -1421,8 +2888,45 @@ var CanvasPainter = class {
 		ctx.drawImage(this.scratch, 0, 0);
 		ctx.restore();
 	}
+	/** An adjustment with declared effects: everything drawn so far, through the shaders, back over itself. */
+	adjustShaded(ctx, op) {
+		this.scratch ??= this.createCanvas(this.width, this.height);
+		const scratch = copyInto(this.scratch, canvasOf(ctx));
+		let picture = scratch;
+		try {
+			picture = this.runner().effects(scratch, op.shaders ?? []) ?? scratch;
+		} catch (error) {
+			warnShaderError(op, error);
+			return;
+		}
+		ctx.save();
+		ctx.setTransform(1, 0, 0, 1, 0, 0);
+		ctx.globalCompositeOperation = "source-over";
+		ctx.globalAlpha = op.opacity;
+		ctx.filter = op.filter || "none";
+		ctx.drawImage(picture, 0, 0);
+		ctx.restore();
+	}
 };
 const GRAIN_TILE = 128;
+/** `target` holding a copy of `source`, both the frame's size. */
+function copyInto(target, source) {
+	const c = target.getContext("2d");
+	if (!c) return source;
+	c.setTransform(1, 0, 0, 1, 0, 0);
+	c.globalCompositeOperation = "copy";
+	c.globalAlpha = 1;
+	c.filter = "none";
+	c.drawImage(source, 0, 0);
+	c.globalCompositeOperation = "source-over";
+	return target;
+}
+function warnNoShaders(op) {
+	devWarn(`shaders:${op.id}`, `"${op.id}" uses an effect or transition the file declares; this renderer has no WebGL, so it draws without it (the browser export draws it)`);
+}
+function warnShaderError(op, error) {
+	devWarn(`shader-error:${op.id}`, `"${op.id}": ${error instanceof Error ? error.message : String(error)}`);
+}
 /** A small seeded PRNG on 0..1. */
 function mulberry32(seed) {
 	let a = seed >>> 0;
@@ -1564,11 +3068,10 @@ var Compositor = class Compositor {
 	* for. Paint order and output are the same as `seek` then `tick`, at a
 	* fraction of the decode work.
 	*/
-	step(t, intercept) {
+	step(t) {
 		return this.tick(t, {
 			wait: true,
-			exact: true,
-			...intercept ? { intercept } : {}
+			exact: true
 		});
 	}
 	tick(t, opts) {
@@ -1576,11 +3079,9 @@ var Compositor = class Compositor {
 		if (this.inFlight) {
 			if (this.pending) {
 				this.pending.t = t;
-				const intercept = opts.intercept ?? this.pending.opts.intercept;
 				this.pending.opts = {
 					wait: opts.wait || this.pending.opts.wait,
-					exact: Boolean(opts.exact || this.pending.opts.exact),
-					...intercept ? { intercept } : {}
+					exact: Boolean(opts.exact || this.pending.opts.exact)
 				};
 				return this.pending.done;
 			}
@@ -1637,14 +3138,10 @@ var Compositor = class Compositor {
 			frames.set(op.id, d ? await d.frameFor(t, opts.wait, opts.exact) : null);
 		}));
 		if (this.disposed) return;
-		if (!opts.intercept?.(plan, frames)) {
-			await Promise.all([...frames.values()].map((f) => f?.prepare?.()));
-			if (this.disposed) return;
-			if (this.ctx) this.painter.paint(this.ctx, plan, {
-				frames,
-				nested: nestedCanvases
-			});
-		}
+		if (this.ctx) this.painter.paint(this.ctx, plan, {
+			frames,
+			nested: nestedCanvases
+		});
 		for (const op of plan.ops) this.pool.decoderFor(op.id)?.advance(t);
 		this.lastFrame = frame;
 		this.deps.onFrame?.(t, frame);
@@ -1676,23 +3173,4 @@ var Compositor = class Compositor {
 		}
 	}
 };
-// src/nested.ts
-/**
-* Resolves `<Nested of={Helper}>` through the kit's `resolveScene`, once per
-* helper. File references (`of="file:..."`) have no loader yet and resolve
-* to nothing.
-*/
-function makeNestedResolver(parent) {
-	const cache = /* @__PURE__ */ new WeakMap();
-	return (p) => {
-		const of = p.props.of;
-		if (typeof of !== "function") return null;
-		const hit = cache.get(of);
-		if (hit) return hit;
-		const outer = parent();
-		const state = resolveScene(of, p.props, outer.composition, outer.manifest);
-		cache.set(of, state);
-		return state;
-	};
-}
-export { buildAudioPlan as A, ImageFrameSource as C, toResolver as D, fromMap as E, duckIntervals as M, ManualClock as O, ImageFrame as S, defaultCreateCanvas as T, DecoderPool as _, backgroundFill as a, ErrorFrame as b, setMatrix as c, MediabunnyAudioSource as d, mediabunnyAudioSourceFactory as f, MediabunnyInputs as g, mediabunnyFrameSourceFactory as h, backgroundCss as i, buildGainEnvelope as j, PerformanceClock as k, roundedRect as l, SampleFrame as m, Compositor as n, coversCanvas as o, MediabunnyFrameSource as p, CanvasPainter as r, paintBackground as s, makeNestedResolver as t, traceMask as u, ClipDecoder as v, copyFrame as w, ErrorFrameSource as x, AssetSources as y };
+export { ClipDecoder as $, transformMatrix as A, ENVELOPE_STEP_S as At, toResolver as B, PLAY_PRIME_TIMEOUT_MS as Bt, cssTransform as C, captureWarnings as Ct, multiply as D, AUDIO_PRIME_S as Dt, matrixToCss as E, AUDIO_CHUNK_S as Et, paramsAt as F, MAX_OPEN_INPUTS as Ft, MediabunnyAudioSource as G, SCHEDULER_MS as Gt, MediabunnyFrameSource as H, QUEUE_TARGET as Ht, postEffects as I, MAX_RATE as It, loadFileFonts as J, UNMOUNT_BEHIND_S as Jt, mediabunnyAudioSourceFactory as K, SEEK_MODE_SPEED as Kt, OVERLAY_KINDS as L, MIN_RATE as Lt, declaredEffects as M, FRAME_WAIT_MS as Mt, effectPasses as N, INPUT_IDLE_CLOSE_S as Nt, rotate as O, DUCK_ATTACK_S as Ot, filterString as P, LOOKAHEAD_S as Pt, visiblePlacements as Q, backdropTracks as R, MOUNT_AHEAD_S as Rt, boundsOf as S, keyframedValue as St, layoutRect as T, AUDIO_CACHE_S as Tt, SampleFrame as U, REVERSE_WINDOW_FRAMES as Ut, MediabunnyInputs as V, QUEUE_MAX as Vt, mediabunnyFrameSourceFactory as W, REVERSE_WINDOW_S as Wt, isVisibleAt as X, DecoderPool as Y, trackItems as Z, combine as _, buildGainEnvelope as _t, coversCanvas as a, placementSourceTime as at, IDENTITY as b, ease as bt, ShaderRunner as c, ErrorFrame as ct, makeNestedResolver as d, ImageFrameSource as dt, frameIndex as et, blendOf as f, copyFrame as ft, STILL as g, buildAudioPlan as gt, transitionLook as h, PerformanceClock as ht, backgroundFill as i, nestedSourceTime as it, translate as j, FRAME_EPS as jt, scaleM as k, DUCK_RELEASE_S as kt, roundedRect as l, ErrorFrameSource as lt, compositionBackground as m, ManualClock as mt, CanvasPainter as n, layerClock as nt, paintBackground as o, timecode as ot, buildFramePlan as p, defaultCreateCanvas as pt, addFontFaces as q, SETTLE_MS as qt, backgroundCss as r, localT as rt, setMatrix as s, AssetSources as st, Compositor as t, frameTime as tt, traceMask as u, ImageFrame as ut, effect as v, duckIntervals as vt, fitRect as w, devWarn as wt, animatedTransform as x, hasKeyframes as xt, motionAt as y, EASING_FN as yt, fromMap as z, PICK_EPS as zt };