@cutcraft/player 0.0.0-stage → 0.2.0

package/dist/render-DA1KFyei.mjs

@@ -0,0 +1,3176 @@
+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) {
+	const out = [];
+	const anySolo = state.tracks.some((t) => t.solo);
+	for (const track of state.tracks) {
+		if (track.hidden || track.muted || anySolo && !track.solo) continue;
+		for (const p of [...state.items.values()].filter((q) => q.track === track.id && q.parent !== null && q.kind !== "transition")) {
+			if (!capabilitiesOf(p.kind).audio) continue;
+			if (p.end <= from || p.start >= to) continue;
+			if (p.kind === "nested") {
+				out.push(...nestedOccurrences(state, p, track, from, to, resolveNested));
+				continue;
+			}
+			const src = p.source;
+			if (!src || src.out <= src.in) continue;
+			const asset = lookupAsset(state.manifest, src.asset);
+			if (!asset || asset.kind === "image" || asset.kind === "video" && !asset.audio) continue;
+			const reverse = p.props.reverse === true;
+			const envelope = buildGainEnvelope(p, track, state, p.start, p.end);
+			const children = p.children.map((id) => state.items.get(id)).filter((c) => c !== void 0);
+			const pan = panEnvelope(p, children);
+			for (const chunk of chunksOf(p, src, reverse, speedKeysOf(children), freezeHoldsOf(children))) {
+				if (chunk.compEnd <= from || chunk.compStart >= to) continue;
+				out.push({
+					id: p.id,
+					asset: asset.id,
+					chunk: chunk.index,
+					compStart: chunk.compStart,
+					compEnd: chunk.compEnd,
+					bufferFrom: chunk.bufferFrom,
+					bufferTo: chunk.bufferTo,
+					speed: src.speed,
+					...chunk.rate ? { rate: chunk.rate } : {},
+					gain: envelope,
+					...pan ? { pan } : {},
+					...reverse ? { reverse } : {}
+				});
+			}
+		}
+	}
+	return out;
+}
+/**
+* Pieces of the source range in source order: cut every `AUDIO_CHUNK_S` when
+* long, and where each freeze hold starts, so a hold is a gap with no audio.
+* A piece maps to composition time through the speed (or the speed-key ramp's
+* inverse) plus the holds before it. A reversed placement plays its last
+* piece first, so its range counts back from `src.out`.
+*/
+function chunksOf(p, src, reverse, keys, holds) {
+	const length = src.out - src.in;
+	const ramp = keys.length > 0;
+	const advance = (u) => ramp ? rampAdvance(keys, u) : u * src.speed;
+	const inverse = (a) => ramp ? rampInverse(keys, a) : a / src.speed;
+	let before = 0;
+	const holdAt = holds.map((h) => {
+		const u = h.start - before;
+		before += h.duration;
+		return {
+			u,
+			duration: h.duration
+		};
+	});
+	const cuts = /* @__PURE__ */ new Set([0, length]);
+	if (length > 60) for (let s = 30; s < length; s += 30) cuts.add(s);
+	for (const { u } of holdAt) {
+		const a = Math.min(length, Math.max(0, advance(u)));
+		cuts.add(reverse ? length - a : a);
+	}
+	const sorted = [...cuts].sort((x, y) => x - y);
+	const chunks = [];
+	for (let i = 0; i < sorted.length - 1; i++) {
+		const s1 = sorted[i], s2 = sorted[i + 1];
+		if (s2 - s1 < 1e-9) continue;
+		const [u1, u2] = (reverse ? [length - s2, length - s1] : [s1, s2]).map(inverse);
+		const mid = (u1 + u2) / 2;
+		const offset = p.start + holdAt.reduce((n, h) => h.u <= mid ? n + h.duration : n, 0);
+		const compStart = round(offset + u1), compEnd = round(offset + u2);
+		const rate = ramp ? rateEnvelope(keys, u1, u2).map(([u, v]) => [round(offset + u), v]) : void 0;
+		chunks.push({
+			index: chunks.length,
+			compStart,
+			compEnd,
+			bufferFrom: src.in + s1,
+			bufferTo: src.in + s2,
+			...rate ? { rate } : {}
+		});
+	}
+	return chunks;
+}
+/** Ramp speed over clip seconds [u1, u2] (holds taken out): the key times plus a fixed step inside ramps, as the gain envelope samples. */
+function rateEnvelope(keys, u1, u2) {
+	const times = /* @__PURE__ */ new Set([u1, u2]);
+	for (let i = 0; i < keys.length; i++) {
+		const a = keys[i], b = keys[i + 1];
+		if (a.at > u1 && a.at < u2) times.add(a.at);
+		if (b && a.speed !== b.speed) {
+			for (let u = a.at + ENVELOPE_STEP_S; u < b.at; u += ENVELOPE_STEP_S) if (u > u1 && u < u2) times.add(u);
+		}
+	}
+	return [...times].sort((x, y) => x - y).map((u) => [u, round(rampSpeed(keys, u))]);
+}
+function nestedOccurrences(state, p, track, from, to, resolveNested) {
+	const inner = resolveNested?.(p);
+	const src = p.source;
+	if (!inner || !src) return [];
+	const toInner = (t) => src.in + (t - p.start) * src.speed;
+	const toOuter = (t) => p.start + (t - src.in) / src.speed;
+	const outerEnvelope = buildGainEnvelope(p, track, state, p.start, p.end);
+	return buildAudioPlan(inner, toInner(Math.max(from, p.start)), toInner(Math.min(to, p.end)), resolveNested).map((o) => {
+		const compStart = Math.max(p.start, toOuter(o.compStart));
+		const compEnd = Math.min(p.end, toOuter(o.compEnd));
+		const inner = o.gain.map(([t, v]) => [toOuter(t), v]);
+		return {
+			...o,
+			id: `${p.id}/${o.id}`,
+			compStart,
+			compEnd,
+			speed: o.speed * src.speed,
+			...o.rate ? { rate: o.rate.map(([t, v]) => [round(toOuter(t)), v * src.speed]) } : {},
+			gain: multiplyEnvelopes([inner, outerEnvelope], compStart, compEnd)
+		};
+	}).filter((o) => o.compEnd > o.compStart);
+}
+/**
+* Gain over [winFrom, winTo] in composition seconds: volume × keyframed
+* `audio.volume` × fades × automation × ducking. The factors are multiplied
+* and sampled at their breakpoints plus a fixed step inside ramps, so the
+* product stays close to piecewise linear.
+*/
+function buildGainEnvelope(p, track, state, winFrom, winTo) {
+	const children = p.children.map((id) => state.items.get(id)).filter((c) => c !== void 0);
+	const volume = typeof p.props.volume === "number" ? p.props.volume : 1;
+	const factors = [];
+	const breaks = /* @__PURE__ */ new Set([winFrom, winTo]);
+	const ramps = [];
+	const kfs = children.filter((c) => c.kind === "keyframe" && c.props.property === "audio.volume");
+	if (kfs.length > 0) {
+		factors.push((t) => Number(keyframedValue(children, "audio.volume", t - p.start, volume)));
+		const ats = kfs.map((k) => p.start + Number(k.props.at ?? 0)).sort((a, b) => a - b);
+		ats.forEach((at) => breaks.add(at));
+		for (let i = 0; i < ats.length - 1; i++) ramps.push([ats[i], ats[i + 1]]);
+	} else factors.push(() => volume);
+	const fade = p.props.fade;
+	if (fade?.in && fade.in > 0) {
+		const a = p.start, b = p.start + fade.in;
+		factors.push((t) => t <= a ? 0 : t >= b ? 1 : (t - a) / (b - a));
+		breaks.add(a);
+		breaks.add(b);
+	}
+	if (fade?.out && fade.out > 0) {
+		const a = p.end - fade.out, b = p.end;
+		factors.push((t) => t <= a ? 1 : t >= b ? 0 : (b - t) / (b - a));
+		breaks.add(a);
+		breaks.add(b);
+	}
+	const automation = p.props.automation?.volume;
+	if (automation && automation.length > 0) {
+		const pts = [...automation].sort((x, y) => x[0] - y[0]).map(([rel, v]) => [p.start + rel, v]);
+		factors.push((t) => interpolate(pts, t));
+		pts.forEach(([t]) => breaks.add(t));
+	}
+	const duck = p.props.duck;
+	if (duck) {
+		const attack = duck.attack ?? .1, release = duck.release ?? .3;
+		const intervals = duckIntervals(state, duck.under, p.id);
+		for (const [a, b] of intervals) {
+			breaks.add(a - attack);
+			breaks.add(a);
+			breaks.add(b);
+			breaks.add(b + release);
+			if (attack > 0) ramps.push([a - attack, a]);
+			if (release > 0) ramps.push([b, b + release]);
+		}
+		factors.push((t) => {
+			let f = 1;
+			for (const [a, b] of intervals) {
+				let g = 1;
+				if (t >= a && t <= b) g = duck.to;
+				else if (t < a && t > a - attack) g = 1 - (1 - duck.to) * ((t - (a - attack)) / attack);
+				else if (t > b && t < b + release) g = duck.to + (1 - duck.to) * ((t - b) / release);
+				f = Math.min(f, g);
+			}
+			return f;
+		});
+	}
+	const times = [...breaks].filter((t) => t >= winFrom && t <= winTo).sort((a, b) => a - b);
+	const sampled = new Set(times);
+	for (const [a, b] of ramps) for (let t = a + ENVELOPE_STEP_S; t < b; t += ENVELOPE_STEP_S) if (t > winFrom && t < winTo) sampled.add(round(t));
+	const value = (t) => factors.reduce((acc, f) => acc * f(t), 1);
+	return [...sampled].sort((a, b) => a - b).map((t) => [round(t), round(value(t))]);
+}
+/** Composition intervals where sound plays on the track `under` names by id, else on the tracks of that role; silent assets and muted clips do not duck. */
+function duckIntervals(state, under, exceptId) {
+	const tracks = state.tracks.some((t) => t.id === under) ? [under] : state.tracks.filter((t) => t.role === under).map((t) => t.id);
+	const ranges = [...state.items.values()].filter((q) => q.track !== null && tracks.includes(q.track) && q.id !== exceptId && q.parent !== null && capabilitiesOf(q.kind).audio && hasSound(state, q)).filter((q) => q.end > q.start).map((q) => [q.start, q.end]).sort((a, b) => a[0] - b[0]);
+	const merged = [];
+	for (const r of ranges) {
+		const last = merged[merged.length - 1];
+		if (last && r[0] <= last[1]) last[1] = Math.max(last[1], r[1]);
+		else merged.push([r[0], r[1]]);
+	}
+	return merged;
+}
+function hasSound(state, p) {
+	if (p.kind === "nested") return true;
+	const asset = p.source ? lookupAsset(state.manifest, p.source.asset) : null;
+	return asset !== null && asset.kind !== "image" && (asset.kind === "audio" || asset.audio !== void 0) && p.props.volume !== 0;
+}
+/** Pan over the placement: its `audio.pan` keyframes (sampled inside each segment), else `automation.pan`; keyframes win when both are written. */
+function panEnvelope(p, children) {
+	const ats = children.filter((c) => c.kind === "keyframe" && c.props.property === "audio.pan").map((k) => Number(k.props.at ?? 0)).sort((a, b) => a - b);
+	if (ats.length > 0) {
+		const rels = new Set(ats);
+		for (let i = 0; i < ats.length - 1; i++) for (let r = ats[i] + ENVELOPE_STEP_S; r < ats[i + 1]; r += ENVELOPE_STEP_S) rels.add(r);
+		return [...rels].sort((a, b) => a - b).map((rel) => [round(p.start + rel), round(Number(keyframedValue(children, "audio.pan", rel, 0)))]);
+	}
+	const automation = p.props.automation?.pan;
+	if (!automation || automation.length === 0) return void 0;
+	return [...automation].sort((x, y) => x[0] - y[0]).map(([rel, v]) => [round(p.start + rel), v]);
+}
+function interpolate(pts, t) {
+	const first = pts[0], last = pts[pts.length - 1];
+	if (t <= first[0]) return first[1];
+	if (t >= last[0]) return last[1];
+	for (let i = 0; i < pts.length - 1; i++) {
+		const a = pts[i], b = pts[i + 1];
+		if (t >= a[0] && t < b[0]) return b[0] === a[0] ? b[1] : a[1] + (b[1] - a[1]) * (t - a[0]) / (b[0] - a[0]);
+	}
+	return last[1];
+}
+function multiplyEnvelopes(envs, from, to) {
+	const times = /* @__PURE__ */ new Set([from, to]);
+	for (const e of envs) for (const [t] of e) if (t >= from && t <= to) times.add(t);
+	return [...times].sort((a, b) => a - b).map((t) => [round(t), round(envs.reduce((acc, e) => acc * (e.length ? interpolate(e, t) : 1), 1))]);
+}
+function round(v) {
+	return Math.round(v * 1e6) / 1e6;
+}
+// src/clock/clock.ts
+var ManualClock = class {
+	t = 0;
+	now() {
+		return this.t;
+	}
+	advance(dt) {
+		this.t += dt;
+	}
+	set(t) {
+		this.t = t;
+	}
+};
+var PerformanceClock = class {
+	now() {
+		return performance.now() / 1e3;
+	}
+};
+// src/media/frame-source.ts
+function defaultCreateCanvas(width, height) {
+	if (typeof OffscreenCanvas !== "undefined") return new OffscreenCanvas(width, height);
+	const c = document.createElement("canvas");
+	c.width = width;
+	c.height = height;
+	return c;
+}
+/** A frame backed by an image we own (canvas or bitmap); `retain` is free. */
+var ImageFrame = class {
+	image;
+	timestamp;
+	duration;
+	owned;
+	constructor(image, timestamp, duration, owned) {
+		this.image = image;
+		this.timestamp = timestamp;
+		this.duration = duration;
+		this.owned = owned;
+	}
+	get width() {
+		return this.image.width;
+	}
+	get height() {
+		return this.image.height;
+	}
+	draw(ctx, dx, dy, dw, dh, crop) {
+		if (crop) ctx.drawImage(this.image, crop.x, crop.y, crop.w, crop.h, dx, dy, dw, dh);
+		else ctx.drawImage(this.image, dx, dy, dw, dh);
+	}
+	retain() {
+		return this;
+	}
+	close() {
+		if (this.owned && "close" in this.image && typeof this.image.close === "function") this.image.close();
+	}
+};
+/** Copies any frame into a canvas we own. */
+function copyFrame(frame, createCanvas) {
+	const canvas = createCanvas(Math.max(1, frame.width), Math.max(1, frame.height));
+	const ctx = canvas.getContext("2d");
+	if (ctx) frame.draw(ctx, 0, 0, frame.width, frame.height);
+	return new ImageFrame(canvas, frame.timestamp, frame.duration, false);
+}
+/** Still images: one bitmap, returned for every time. */
+var ImageFrameSource = class {
+	load;
+	bitmap = null;
+	constructor(load) {
+		this.load = load;
+	}
+	async open() {
+		const f = await this.frame();
+		return {
+			width: f.width,
+			height: f.height,
+			duration: 0,
+			decodable: true
+		};
+	}
+	async frameAt() {
+		return this.frame();
+	}
+	async *stream() {
+		yield await this.frame();
+	}
+	close() {
+		this.bitmap?.then((f) => f.close()).catch(() => void 0);
+		this.bitmap = null;
+	}
+	frame() {
+		this.bitmap ??= this.load().then((img) => new ImageFrame(img, 0, Number.POSITIVE_INFINITY, "close" in img));
+		return this.bitmap;
+	}
+};
+/** Draws a grey box with a label; used for missing or undecodable assets. */
+var ErrorFrame = class {
+	width;
+	height;
+	label;
+	timestamp = 0;
+	duration = Number.POSITIVE_INFINITY;
+	constructor(width, height, label) {
+		this.width = width;
+		this.height = height;
+		this.label = label;
+	}
+	draw(ctx, dx, dy, dw, dh) {
+		ctx.fillStyle = "#444444";
+		ctx.fillRect(dx, dy, dw, dh);
+		ctx.fillStyle = "#cccccc";
+		ctx.font = "24px monospace";
+		ctx.textAlign = "center";
+		ctx.textBaseline = "middle";
+		ctx.fillText(this.label, dx + dw / 2, dy + dh / 2);
+	}
+	retain() {
+		return this;
+	}
+	close() {}
+};
+var ErrorFrameSource = class {
+	frame;
+	constructor(label, width = 640, height = 360) {
+		this.frame = new ErrorFrame(width, height, label);
+	}
+	open() {
+		return Promise.resolve({
+			width: this.frame.width,
+			height: this.frame.height,
+			duration: 0,
+			decodable: false
+		});
+	}
+	frameAt() {
+		return Promise.resolve(this.frame);
+	}
+	async *stream() {
+		yield this.frame;
+	}
+	close() {}
+};
+// src/media/asset-sources.ts
+/**
+* One FrameSource per asset, shared by every clip of that asset and by nested
+* compositors. Ref-counted; an unreferenced source stays open for a while
+* (a seek back is cheap) and is closed when idle too long or when too many
+* are open.
+*/
+var AssetSources = class {
+	deps;
+	entries = /* @__PURE__ */ new Map();
+	errored = /* @__PURE__ */ new Set();
+	constructor(deps) {
+		this.deps = deps;
+	}
+	/** Acquire a reference; the source opens lazily on first use. */
+	acquire(assetId) {
+		let e = this.entries.get(assetId);
+		if (!e) {
+			const source = new LazyFrameSource(() => this.open(assetId));
+			e = {
+				source,
+				info: source.open(),
+				refs: 0,
+				idleSince: null,
+				lastUse: this.deps.clock.now()
+			};
+			e.info.catch(() => void 0);
+			this.entries.set(assetId, e);
+		}
+		e.refs++;
+		e.idleSince = null;
+		e.lastUse = this.deps.clock.now();
+		return {
+			source: e.source,
+			info: e.info
+		};
+	}
+	release(assetId) {
+		const e = this.entries.get(assetId);
+		if (!e) return;
+		e.refs = Math.max(0, e.refs - 1);
+		if (e.refs === 0) e.idleSince = this.deps.clock.now();
+	}
+	/** Close sources idle for too long, then the least recently used idle ones beyond the cap. */
+	sweep() {
+		const now = this.deps.clock.now();
+		for (const [id, e] of this.entries) if (e.idleSince !== null && now - e.idleSince >= 10) this.close(id);
+		const idle = [...this.entries].filter(([, e]) => e.idleSince !== null).sort((a, b) => a[1].lastUse - b[1].lastUse);
+		let open = this.entries.size;
+		for (const [id] of idle) {
+			if (open <= 6) break;
+			this.close(id);
+			open--;
+		}
+	}
+	get openCount() {
+		return this.entries.size;
+	}
+	isOpen(assetId) {
+		return this.entries.has(assetId);
+	}
+	dispose() {
+		for (const id of [...this.entries.keys()]) this.close(id);
+	}
+	close(id) {
+		const e = this.entries.get(id);
+		if (!e) return;
+		e.source.close();
+		this.entries.delete(id);
+	}
+	async open(assetId) {
+		const asset = lookupAsset(this.deps.manifest, assetId);
+		const fail = async (error) => {
+			if (!this.errored.has(assetId)) {
+				this.errored.add(assetId);
+				this.deps.onError({
+					asset: assetId,
+					error,
+					fatal: false
+				});
+			}
+			const source = new ErrorFrameSource(assetId, asset?.width ?? 640, asset?.height ?? 360);
+			return {
+				source,
+				info: await source.open()
+			};
+		};
+		try {
+			const handle = await this.deps.media.resolve(assetId);
+			const source = this.deps.frameSourceFactory(assetId, handle, asset?.kind ?? "video");
+			const info = await source.open();
+			if (!info.decodable) {
+				source.close();
+				return fail(/* @__PURE__ */ new Error(`asset "${assetId}" cannot be decoded in this browser`));
+			}
+			return {
+				source,
+				info
+			};
+		} catch (error) {
+			return fail(error instanceof Error ? error : new Error(String(error)));
+		}
+	}
+};
+/** Opens the real source once, on first use, and forwards every call to it. */
+var LazyFrameSource = class {
+	factory;
+	inner = null;
+	closed = false;
+	constructor(factory) {
+		this.factory = factory;
+	}
+	get() {
+		this.inner ??= this.factory();
+		return this.inner;
+	}
+	async open() {
+		return (await this.get()).info;
+	}
+	async frameAt(t) {
+		return (await this.get()).source.frameAt(t);
+	}
+	async *stream(from, to) {
+		const { source } = await this.get();
+		yield* source.stream(from, to);
+	}
+	close() {
+		if (this.closed) return;
+		this.closed = true;
+		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;
+/**
+* Decoded frames for one placement. Forward playback streams from the source
+* into a short queue; reverse pre-decodes windows behind the cursor; seek
+* mode (high speeds, scrubbing) fetches single frames. Freezes hold one
+* retained frame. The decoder never blocks a playing tick: when the frame for
+* `t` is not ready it returns the last frame it delivered.
+*/
+var ClipDecoder = class {
+	source;
+	effectiveSpeed;
+	id;
+	sourceKey;
+	queue = [];
+	current = null;
+	generation = 0;
+	gen = null;
+	pumping = null;
+	streamEnd = 0;
+	seekPending = null;
+	reverseLow = Number.POSITIVE_INFINITY;
+	reverseLoading = null;
+	freezes = /* @__PURE__ */ new Map();
+	disposed = false;
+	primed = null;
+	_placement;
+	_children;
+	constructor(source, placement, children, effectiveSpeed) {
+		this.source = source;
+		this.effectiveSpeed = effectiveSpeed;
+		this.id = placement.id;
+		this.sourceKey = sourceKeyOf(placement);
+		this._placement = placement;
+		this._children = children;
+	}
+	/** Asset and direction: everything else (trim, speed, freezes) may change under a live decoder. */
+	static sourceKey(p) {
+		return sourceKeyOf(p);
+	}
+	get placement() {
+		return this._placement;
+	}
+	get children() {
+		return this._children;
+	}
+	/**
+	* Take a new resolve of the same placement. A trim or speed change moves
+	* where source time lands; the queue is kept and the next `frameFor` reseeks
+	* only if the new source time falls outside what is queued.
+	*/
+	update(placement, children) {
+		this._placement = placement;
+		this._children = children;
+	}
+	get mode() {
+		if (this.placement.props.reverse === true) return "reverse";
+		return Math.abs(this.effectiveSpeed()) > 4 ? "seek" : "forward";
+	}
+	get queued() {
+		return this.queue.length;
+	}
+	get ready() {
+		return this.primed ?? Promise.resolve();
+	}
+	sourceTime(t) {
+		return placementSourceTime(this.placement, this.children, t);
+	}
+	/** Jump to composition time `t`: cancel streaming, fetch the frame, restart from there. */
+	prime(t) {
+		this.cancelStream();
+		const st = this.sourceTime(t);
+		const run = async () => {
+			const gen = this.generation;
+			const frame = await this.source.frameAt(st);
+			if (gen !== this.generation || this.disposed) {
+				frame?.close();
+				return;
+			}
+			this.setCurrent(frame);
+			if (this.mode === "forward") this.startStream(st);
+			else if (this.mode === "reverse") this.reverseLow = st;
+		};
+		this.primed = run();
+		return this.primed;
+	}
+	/**
+	* The frame to draw at composition time `t`. With `wait`, fetch it if it is
+	* not queued, for at most `FRAME_WAIT_MS`; with `exact` as well, for as long
+	* as it takes, so an export never draws a frame it did not wait for.
+	*/
+	async frameFor(t, wait, exact = false) {
+		if (this.disposed) return null;
+		const freeze = this.activeFreeze(t);
+		if (freeze) return this.freezeFrame(freeze, wait);
+		const st = this.sourceTime(t);
+		if (this.mode === "seek") return this.seekFrame(st, wait);
+		if (this.mode === "reverse") return this.reverseFrame(st, wait);
+		return this.forwardFrame(st, wait, exact);
+	}
+	/** Close consumed frames; called after a frame was painted. */
+	advance(t) {
+		if (this.mode !== "forward") return;
+		const st = this.sourceTime(t);
+		while (this.queue.length > 0 && this.queue[0].timestamp + this.queue[0].duration <= st && this.queue.length > 1 && this.queue[1].timestamp <= st + .001) this.queue.shift().close();
+		this.pump();
+	}
+	dispose() {
+		this.disposed = true;
+		this.cancelStream();
+		this.setCurrent(null);
+		for (const p of this.freezes.values()) p.then((f) => f?.close());
+		this.freezes.clear();
+	}
+	async forwardFrame(st, wait, exact = false) {
+		const newest = this.queue[this.queue.length - 1] ?? this.current;
+		const behind = newest !== null && st - (newest.timestamp + newest.duration) > BEHIND_RESEEK_S;
+		const before = this.current !== null && st + .001 < this.current.timestamp && !this.queue.some((f) => f.timestamp <= st + .001);
+		if (this.gen === null && this.queue.length === 0 && this.current === null) {
+			if (wait) {
+				await this.primeAtSource(st);
+				return this.current;
+			}
+			this.primeAtSource(st);
+			return null;
+		}
+		if (behind || before) {
+			if (wait) {
+				await this.primeAtSource(st);
+				return this.current;
+			}
+			this.primeAtSource(st);
+			return this.current;
+		}
+		if (!wait) {
+			const picked = this.forwardPick(st);
+			this.pump();
+			return picked ?? this.current;
+		}
+		const deadline = exact ? Number.POSITIVE_INFINITY : Date.now() + 250;
+		for (;;) {
+			const picked = this.forwardPick(st);
+			const next = this.queue[0];
+			if (next !== void 0 && next.timestamp > st + .001 || this.gen === null || picked !== null && picked.timestamp + picked.duration > st + .001 || Date.now() >= deadline || this.disposed) {
+				this.pump();
+				return picked ?? this.current;
+			}
+			await this.pumpOnce();
+		}
+	}
+	/** The newest queued frame at or before `st` becomes current; older ones are consumed. */
+	forwardPick(st) {
+		let best = null;
+		let index = -1;
+		for (let i = 0; i < this.queue.length; i++) if (this.queue[i].timestamp <= st + .001) {
+			best = this.queue[i];
+			index = i;
+		} else break;
+		if (!best) return null;
+		for (let i = 0; i < index; i++) this.queue[i].close();
+		this.queue.splice(0, index + 1);
+		this.setCurrent(best);
+		return best;
+	}
+	primeAtSource(st) {
+		this.cancelStream();
+		const gen = this.generation;
+		this.primed = this.source.frameAt(st).then((frame) => {
+			if (gen !== this.generation || this.disposed) {
+				frame?.close();
+				return;
+			}
+			this.setCurrent(frame);
+			this.startStream(st);
+		});
+		return this.primed;
+	}
+	startStream(from) {
+		this.streamEnd = Number.POSITIVE_INFINITY;
+		this.gen = this.source.stream(from, this.streamEnd);
+		this.pump();
+	}
+	pump() {
+		if (this.pumping || this.gen === null || this.queue.length >= 8 || this.disposed) return;
+		this.pumpOnce();
+	}
+	/** Pull frames until the queue is at target; a caller that finds a pump running awaits that one. */
+	pumpOnce() {
+		if (this.pumping) return this.pumping;
+		if (this.gen === null) return Promise.resolve();
+		const gen = this.gen, generation = this.generation;
+		const run = async () => {
+			try {
+				while (this.queue.length < 8 && this.gen === gen) {
+					let next;
+					try {
+						next = await gen.next();
+					} catch (error) {
+						if (generation !== this.generation || this.disposed) return;
+						throw error;
+					}
+					if (generation !== this.generation || this.disposed) {
+						if (!next.done) next.value.close();
+						return;
+					}
+					if (next.done) {
+						this.gen = null;
+						return;
+					}
+					const frame = next.value;
+					const last = this.queue[this.queue.length - 1];
+					if (last && frame.timestamp <= last.timestamp) {
+						frame.close();
+						continue;
+					}
+					this.queue.push(frame);
+					while (this.queue.length > 10) this.queue.shift().close();
+				}
+			} finally {
+				this.pumping = null;
+			}
+		};
+		this.pumping = run();
+		return this.pumping;
+	}
+	seekFrame(st, wait) {
+		if (this.current && this.current.timestamp <= st + .001 && st + .001 < this.current.timestamp + this.current.duration) return Promise.resolve(this.current);
+		if (!this.seekPending) {
+			const gen = this.generation;
+			this.seekPending = this.source.frameAt(st).then((frame) => {
+				this.seekPending = null;
+				if (gen !== this.generation || this.disposed) {
+					frame?.close();
+					return;
+				}
+				this.setCurrent(frame);
+			});
+		}
+		return wait ? this.seekPending.then(() => this.current) : Promise.resolve(this.current);
+	}
+	async reverseFrame(st, wait) {
+		const pick = () => {
+			let best = null;
+			let index = -1;
+			for (let i = 0; i < this.queue.length; i++) if (this.queue[i].timestamp <= st) {
+				best = this.queue[i];
+				index = i;
+			}
+			if (!best) return null;
+			for (let i = index + 1; i < this.queue.length; i++) {
+				const f = this.queue[i];
+				if (f === this.current) this.current = null;
+				f.close();
+			}
+			this.queue.length = index + 1;
+			this.setCurrent(best);
+			return best;
+		};
+		const have = pick();
+		const needEarlier = this.queue.length === 0 || this.queue[0].timestamp > st - 1e-6 || st < this.reverseLow;
+		const src = this.placement.source;
+		const low = Math.min(this.reverseLow, this.queue[0]?.timestamp ?? Number.POSITIVE_INFINITY);
+		if (needEarlier && src && low > src.in && !this.reverseLoading) this.reverseLoading = this.loadReverseWindow(Math.min(low, st + 1e-6), src.in);
+		if (have && (!needEarlier || !wait)) return have;
+		if (wait && this.reverseLoading) {
+			await this.reverseLoading;
+			return pick() ?? this.current;
+		}
+		return have ?? this.current;
+	}
+	async loadReverseWindow(to, floor) {
+		const gen = this.generation;
+		const from = Math.max(floor, to - 1);
+		const frames = [];
+		try {
+			for await (const f of this.source.stream(from, to)) {
+				if (gen !== this.generation || this.disposed) {
+					f.close();
+					return;
+				}
+				if (f.timestamp >= to) {
+					f.close();
+					break;
+				}
+				frames.push(f);
+				if (frames.length > 16) frames.shift().close();
+			}
+			if (gen !== this.generation || this.disposed) {
+				frames.forEach((f) => f.close());
+				return;
+			}
+			this.queue = [...frames, ...this.queue];
+			this.reverseLow = from;
+		} finally {
+			this.reverseLoading = null;
+		}
+	}
+	activeFreeze(t) {
+		const rel = t - this.placement.start;
+		for (const c of this.children) {
+			if (c.kind !== "freeze") continue;
+			const fs = Number(c.props.start ?? 0), fd = Number(c.props.duration ?? 0);
+			if (rel >= fs && rel < fs + fd) return c;
+		}
+		return null;
+	}
+	freezeFrame(freeze, wait) {
+		let p = this.freezes.get(freeze.id);
+		if (!p) {
+			p = this.source.frameAt(Number(freeze.props.at ?? 0)).then((f) => {
+				if (!f) return null;
+				const held = f.retain();
+				if (held !== f) f.close();
+				return held;
+			});
+			this.freezes.set(freeze.id, p);
+		}
+		return wait ? p : Promise.race([p, Promise.resolve(this.current)]);
+	}
+	setCurrent(frame) {
+		if (this.current && this.current !== frame && !this.queue.includes(this.current)) this.current.close();
+		this.current = frame;
+	}
+	cancelStream() {
+		this.generation++;
+		const gen = this.gen;
+		this.gen = null;
+		if (gen) gen.return(void 0).catch(() => void 0);
+		for (const f of this.queue) if (f !== this.current) f.close();
+		this.queue = [];
+		this.reverseLow = Number.POSITIVE_INFINITY;
+	}
+};
+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
+* the rest. Asset sources are shared through `AssetSources`, so nested
+* compositors handed the same registry never open an asset twice.
+*/
+var DecoderPool = class {
+	sources;
+	decoders = /* @__PURE__ */ new Map();
+	rate = 1;
+	constructor(sources) {
+		this.sources = sources;
+	}
+	setRate(rate) {
+		this.rate = rate;
+	}
+	/** Mount decoders for placements within the window around `t`; unmount the rest. */
+	sync(state, t) {
+		const want = /* @__PURE__ */ new Map();
+		for (const track of state.tracks) {
+			if (track.hidden) continue;
+			for (const p of trackItems(state, track)) {
+				if (p.kind !== "clip" || !p.source) continue;
+				if (!lookupAsset(state.manifest, p.source.asset)) continue;
+				if (t < p.start - 2 || t >= p.end + .5) continue;
+				want.set(p.id, {
+					p,
+					children: p.children.map((id) => state.items.get(id)).filter((c) => c !== void 0)
+				});
+			}
+		}
+		for (const [id, d] of this.decoders) {
+			const w = want.get(id);
+			if (!w || ClipDecoder.sourceKey(w.p) !== d.sourceKey) this.unmount(id);
+			else if (w.p !== d.placement) d.update(w.p, w.children);
+		}
+		for (const [id, w] of want) {
+			if (this.decoders.has(id)) continue;
+			const { source } = this.sources.acquire(w.p.source.asset);
+			const d = new ClipDecoder(source, w.p, w.children, () => w.p.source.speed * this.rate);
+			this.decoders.set(id, d);
+			d.prime(Math.max(t, w.p.start));
+		}
+		this.sources.sweep();
+	}
+	decoderFor(id) {
+		return this.decoders.get(id);
+	}
+	get mounted() {
+		return [...this.decoders.keys()];
+	}
+	/** After a seek: every decoder jumps to `t`. */
+	seekAll(t) {
+		return Promise.all([...this.decoders.values()].map((d) => d.prime(Math.max(t, d.placement.start)))).then(() => void 0);
+	}
+	/** Resolves when every decoder has its first frame. */
+	settle() {
+		return Promise.all([...this.decoders.values()].map((d) => d.ready)).then(() => void 0);
+	}
+	dispose() {
+		for (const id of [...this.decoders.keys()]) this.unmount(id);
+	}
+	unmount(id) {
+		const d = this.decoders.get(id);
+		if (!d) return;
+		d.dispose();
+		this.decoders.delete(id);
+		if (d.placement.source) this.sources.release(d.placement.source.asset);
+	}
+};
+// 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));
+		}
+		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;
+	}
+	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;
+	}
+	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
+		};
+	}
+	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 {
+	sample;
+	createCanvas;
+	timestamp;
+	duration;
+	width;
+	height;
+	constructor(sample, createCanvas) {
+		this.sample = sample;
+		this.createCanvas = createCanvas;
+		this.timestamp = sample.timestamp;
+		this.duration = sample.duration;
+		this.width = sample.displayWidth;
+		this.height = sample.displayHeight;
+	}
+	draw(ctx, dx, dy, dw, dh, crop) {
+		if (crop) this.sample.draw(ctx, crop.x, crop.y, crop.w, crop.h, dx, dy, dw, dh);
+		else this.sample.draw(ctx, dx, dy, dw, dh);
+	}
+	retain() {
+		return copyFrame(this, this.createCanvas);
+	}
+	close() {
+		this.sample.close();
+	}
+};
+/** Frames of one video asset through a shared `VideoSampleSink`. */
+var MediabunnyFrameSource = class {
+	assetId;
+	handle;
+	inputs;
+	createCanvas;
+	input = null;
+	track = null;
+	sink = null;
+	stillSink = null;
+	constructor(assetId, handle, inputs, createCanvas) {
+		this.assetId = assetId;
+		this.handle = handle;
+		this.inputs = inputs;
+		this.createCanvas = createCanvas;
+	}
+	wrap(sample) {
+		return new SampleFrame(sample, this.createCanvas);
+	}
+	async open() {
+		this.input = this.inputs.acquire(this.assetId, this.handle);
+		const track = await this.input.getPrimaryVideoTrack();
+		if (!track) return {
+			width: 0,
+			height: 0,
+			duration: 0,
+			decodable: false
+		};
+		const decodable = await track.canDecode();
+		const [width, height, duration] = await Promise.all([
+			track.getDisplayWidth(),
+			track.getDisplayHeight(),
+			track.computeDuration()
+		]);
+		this.track = track;
+		this.sink = new VideoSampleSink(track, {
+			hardwareAcceleration: "no-preference",
+			optimizeForLatency: true
+		});
+		return {
+			width,
+			height,
+			duration,
+			decodable
+		};
+	}
+	async frameAt(sourceTime) {
+		if (!this.sink) return null;
+		const sample = await this.sink.getSample(Math.max(0, sourceTime) + PICK_EPS);
+		return sample ? this.wrap(sample) : null;
+	}
+	async *stream(from, to) {
+		if (!this.sink) return;
+		for await (const sample of this.sink.samples(Math.max(0, from), to)) yield await this.wrap(sample);
+	}
+	/** A canvas copy of the frame at `sourceTime`, for freeze frames; pooled canvases are copied right away. */
+	async still(sourceTime) {
+		if (!this.track) return null;
+		this.stillSink ??= new CanvasSink(this.track, { poolSize: 2 });
+		const wrapped = await this.stillSink.getCanvas(Math.max(0, sourceTime));
+		if (!wrapped) return null;
+		const canvas = this.createCanvas(wrapped.canvas.width, wrapped.canvas.height);
+		canvas.getContext("2d")?.drawImage(wrapped.canvas, 0, 0);
+		return copyFrame({
+			timestamp: wrapped.timestamp,
+			duration: wrapped.duration,
+			width: canvas.width,
+			height: canvas.height,
+			draw: (ctx, dx, dy, dw, dh) => ctx.drawImage(canvas, dx, dy, dw, dh),
+			retain: () => {
+				throw new Error("unreachable");
+			},
+			close: () => void 0
+		}, this.createCanvas);
+	}
+	close() {
+		this.sink = null;
+		this.stillSink = null;
+		this.track = null;
+		if (this.input) this.inputs.release(this.assetId);
+		this.input = null;
+	}
+};
+async function loadImage(handle) {
+	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) {
+	return (assetId, handle, kind) => kind === "image" ? new ImageFrameSource(() => loadImage(handle)) : new MediabunnyFrameSource(assetId, handle, inputs, createCanvas);
+}
+// 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);
+		}
+		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();
+	}
+};
+// 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
+/**
+* Trace the mask outline onto the context's current path, in local element
+* pixels. Shape coordinates are fractions of the element box; bezier paths
+* are in pixels with handles. Returns false when the spec has no usable shape.
+*/
+function traceMask(ctx, mask, rect) {
+	const w = rect.w, h = rect.h;
+	const shape = mask.shape ?? {};
+	if ("rect" in shape && shape.rect) {
+		const r = shape.rect;
+		const x = r.x * w, y = r.y * h, rw = r.width * w, rh = r.height * h;
+		if (r.cornerRadius && r.cornerRadius > 0) roundedRect(ctx, x, y, rw, rh, r.cornerRadius);
+		else ctx.rect(x, y, rw, rh);
+		return true;
+	}
+	if ("ellipse" in shape && shape.ellipse) {
+		const e = shape.ellipse;
+		ctx.ellipse(e.cx * w, e.cy * h, e.rx * w, e.ry * h, 0, 0, Math.PI * 2);
+		return true;
+	}
+	if ("polygon" in shape && Array.isArray(shape.polygon)) {
+		shape.polygon.forEach((p, i) => i === 0 ? ctx.moveTo(p.x * w, p.y * h) : ctx.lineTo(p.x * w, p.y * h));
+		ctx.closePath();
+		return true;
+	}
+	if (mask.path && mask.path.points.length >= 2) {
+		const pts = mask.path.points;
+		ctx.moveTo(pts[0].x, pts[0].y);
+		for (let i = 1; i <= (mask.path.closed ? pts.length : pts.length - 1); i++) {
+			const a = pts[(i - 1) % pts.length], b = pts[i % pts.length];
+			const c1 = a.handleOut ?? a, c2 = b.handleIn ?? b;
+			ctx.bezierCurveTo(c1.x, c1.y, c2.x, c2.y, b.x, b.y);
+		}
+		if (mask.path.closed) ctx.closePath();
+		return true;
+	}
+	return false;
+}
+function roundedRect(ctx, x, y, w, h, r) {
+	const rr = Math.min(r, w / 2, h / 2);
+	ctx.moveTo(x + rr, y);
+	ctx.lineTo(x + w - rr, y);
+	ctx.arcTo(x + w, y, x + w, y + rr, rr);
+	ctx.lineTo(x + w, y + h - rr);
+	ctx.arcTo(x + w, y + h, x + w - rr, y + h, rr);
+	ctx.lineTo(x + rr, y + h);
+	ctx.arcTo(x, y + h, x, y + h - rr, rr);
+	ctx.lineTo(x, y + rr);
+	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
+* drawn under its own transform, alpha, blend and filter; masks clip; an
+* adjustment op re-filters everything drawn so far through a scratch canvas.
+*/
+var CanvasPainter = class {
+	width;
+	height;
+	createCanvas;
+	scratch = null;
+	/** 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;
+		this.createCanvas = createCanvas;
+	}
+	paint(ctx, plan, inputs) {
+		ctx.setTransform(1, 0, 0, 1, 0, 0);
+		ctx.globalAlpha = 1;
+		ctx.globalCompositeOperation = "source-over";
+		ctx.filter = "none";
+		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) {
+		const frame = op.kind === "nested" ? null : inputs.frames.get(op.id) ?? null;
+		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;
+		ctx.filter = op.filter || "none";
+		clipFrame(ctx, op);
+		setMatrix(ctx, op.matrix);
+		const clipped = this.clip(ctx, op);
+		const feathered = !!op.mask && op.mask.feather > 0 && clipped;
+		if (feathered || op.post) {
+			ctx.restore();
+			this.drawLayered(ctx, op, frame, nested, feathered);
+			return;
+		}
+		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);
+		if (!op || coversCanvas(op, this.width, this.height)) return;
+		const nested = op.kind === "nested" ? inputs.nested.get(id) ?? null : null;
+		const frame = op.kind === "nested" ? null : inputs.frames.get(id) ?? null;
+		const picture = nested ?? frame;
+		if (!picture) return;
+		const r = Math.round(.04 * this.height);
+		const { x, y, w, h } = fitRect(this, picture, "cover");
+		ctx.save();
+		ctx.setTransform(1, 0, 0, 1, 0, 0);
+		ctx.filter = `blur(${r}px)`;
+		if (nested) ctx.drawImage(nested, x - 2 * r, y - 2 * r, w + 4 * r, h + 4 * r);
+		else frame.draw(ctx, x - 2 * r, y - 2 * r, w + 4 * r, h + 4 * r);
+		ctx.restore();
+	}
+	blit(ctx, op, frame, nested) {
+		const { w, h } = op.rect;
+		if (nested) ctx.drawImage(nested, 0, 0, w, h);
+		else if (frame) {
+			const reference = op.cropReference;
+			const crop = op.crop && reference ? {
+				x: op.crop.x * frame.width / reference.width,
+				y: op.crop.y * frame.height / reference.height,
+				w: op.crop.w * frame.width / reference.width,
+				h: op.crop.h * frame.height / reference.height
+			} : op.crop;
+			frame.draw(ctx, 0, 0, w, h, crop);
+		}
+	}
+	/** Applies the border radius and mask as a clip in local coordinates. Returns true when a mask clip was set. */
+	clip(ctx, op) {
+		if (op.borderRadius > 0) {
+			ctx.beginPath();
+			roundedRect(ctx, 0, 0, op.rect.w, op.rect.h, op.borderRadius);
+			ctx.clip();
+		}
+		if (!op.mask) return false;
+		ctx.beginPath();
+		if (!traceMask(ctx, op.mask, op.rect)) return false;
+		if (op.mask.inverted) {
+			ctx.rect(0, 0, op.rect.w, op.rect.h);
+			ctx.clip("evenodd");
+		} else ctx.clip();
+		return true;
+	}
+	/**
+	* The element alone on the layer canvas, then composited: a feathered mask punches it out with a
+	* 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 null;
+		lctx.setTransform(1, 0, 0, 1, 0, 0);
+		lctx.clearRect(0, 0, this.width, this.height);
+		lctx.save();
+		setMatrix(lctx, op.matrix);
+		if (!feathered) this.clip(lctx, op);
+		this.blit(lctx, op, frame, nested);
+		lctx.restore();
+		if (feathered) {
+			lctx.save();
+			lctx.globalCompositeOperation = "destination-in";
+			lctx.filter = `blur(${op.mask.feather}px)`;
+			setMatrix(lctx, op.matrix);
+			lctx.beginPath();
+			traceMask(lctx, op.mask, op.rect);
+			if (op.mask.inverted) {
+				lctx.rect(0, 0, op.rect.w, op.rect.h);
+				lctx.fill("evenodd");
+			} else lctx.fill();
+			lctx.restore();
+		}
+		for (const fx of op.post ?? []) {
+			lctx.save();
+			lctx.globalCompositeOperation = "source-atop";
+			if (fx.type === "vignette") {
+				setMatrix(lctx, op.matrix);
+				const { w, h } = op.rect;
+				const r = Math.hypot(w, h) / 2;
+				const g = lctx.createRadialGradient(w / 2, h / 2, r * .4, w / 2, h / 2, r);
+				g.addColorStop(0, "rgba(0,0,0,0)");
+				g.addColorStop(1, `rgba(0,0,0,${fx.amount})`);
+				lctx.fillStyle = g;
+				lctx.fillRect(0, 0, w, h);
+			} else {
+				const pattern = lctx.createPattern(this.noise(fx.seed, fx.amount), "repeat");
+				if (pattern) {
+					lctx.fillStyle = pattern;
+					lctx.fillRect(0, 0, this.width, this.height);
+				}
+			}
+			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;
+		ctx.filter = op.filter || "none";
+		clipFrame(ctx, op);
+		if (op.borderRadius > 0) {
+			setMatrix(ctx, op.matrix);
+			ctx.beginPath();
+			roundedRect(ctx, 0, 0, op.rect.w, op.rect.h, op.borderRadius);
+			ctx.clip();
+		}
+		ctx.setTransform(1, 0, 0, 1, 0, 0);
+		ctx.drawImage(layer, 0, 0);
+		ctx.restore();
+	}
+	/** A tile of black and white specks, the same for the same seed; alpha up to `amount`. */
+	noise(seed, amount) {
+		this.grain ??= this.createCanvas(GRAIN_TILE, GRAIN_TILE);
+		const gctx = this.grain.getContext("2d");
+		if (!gctx) return this.grain;
+		const img = gctx.createImageData(GRAIN_TILE, GRAIN_TILE);
+		const rand = mulberry32(seed);
+		for (let i = 0; i < img.data.length; i += 4) {
+			const r = rand();
+			const v = r < .5 ? 0 : 255;
+			img.data[i] = img.data[i + 1] = img.data[i + 2] = v;
+			img.data[i + 3] = Math.round(Math.abs(r - .5) * 2 * amount * 255);
+		}
+		gctx.putImageData(img, 0, 0);
+		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");
+		if (!sctx) return;
+		sctx.setTransform(1, 0, 0, 1, 0, 0);
+		sctx.globalCompositeOperation = "copy";
+		sctx.filter = "none";
+		sctx.globalAlpha = 1;
+		sctx.drawImage(canvasOf(ctx), 0, 0);
+		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(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;
+	return () => {
+		a = a + 1831565813 >>> 0;
+		let t = a;
+		t = Math.imul(t ^ t >>> 15, t | 1);
+		t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+		return ((t ^ t >>> 14) >>> 0) / 4294967296;
+	};
+}
+function setMatrix(ctx, m) {
+	ctx.setTransform(m.a, m.b, m.c, m.d, m.e, m.f);
+}
+/** Clips to the op's shown part in composition pixels (a wipe), leaving the transform at identity. */
+function clipFrame(ctx, op) {
+	if (!op.clip) return;
+	ctx.setTransform(1, 0, 0, 1, 0, 0);
+	ctx.beginPath();
+	for (const r of op.clip) ctx.rect(r.x, r.y, r.w, r.h);
+	ctx.clip();
+}
+function canvasOf(ctx) {
+	return ctx.canvas;
+}
+/** Whether a draw op puts its picture over the whole canvas as it is: no transform, crop, clip, fade, filter or blend. */
+function coversCanvas(op, width, height) {
+	const m = op.matrix;
+	return m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1 && m.e === 0 && m.f === 0 && op.rect.w === width && op.rect.h === height && !op.crop && op.opacity >= 1 && op.blend === "source-over" && !op.filter && op.borderRadius === 0 && !op.mask && !op.clip && !op.post;
+}
+/** The composition background (a colour or a gradient) over the whole frame. */
+function paintBackground(ctx, plan, w, h) {
+	ctx.save();
+	ctx.setTransform(1, 0, 0, 1, 0, 0);
+	ctx.globalAlpha = 1;
+	ctx.globalCompositeOperation = "source-over";
+	ctx.filter = "none";
+	ctx.fillStyle = plan.backgroundGradient ? backgroundFill(ctx, plan.backgroundGradient, w, h) : plan.background;
+	ctx.fillRect(0, 0, w, h);
+	ctx.restore();
+}
+/** The same background as CSS, for the preview's ground under backdrop overlays. */
+function backgroundCss(plan) {
+	const g = plan.backgroundGradient;
+	if (!g) return plan.background;
+	const stops = [...g.stops].sort((a, b) => a.offset - b.offset).map((s) => `${withOpacity(s.color, s.opacity)} ${Math.round(Math.max(0, Math.min(1, s.offset)) * 1e4) / 100}%`).join(", ");
+	if (g.type === "radial") return `radial-gradient(farthest-corner at ${(g.center?.x ?? .5) * 100}% ${(g.center?.y ?? .5) * 100}%, ${stops})`;
+	if (g.type === "conic") return `conic-gradient(from ${g.angle ?? 0}deg at ${(g.center?.x ?? .5) * 100}% ${(g.center?.y ?? .5) * 100}%, ${stops})`;
+	return `linear-gradient(${g.angle ?? 180}deg, ${stops})`;
+}
+/** A canvas gradient for the frame, laid out the way CSS lays out the same gradient on a box of this size. */
+function backgroundFill(ctx, g, w, h) {
+	const c = g.center ?? {
+		x: .5,
+		y: .5
+	};
+	const cx = c.x * w, cy = c.y * h;
+	let grad;
+	if (g.type === "radial") {
+		const r = Math.max(Math.hypot(cx, cy), Math.hypot(w - cx, cy), Math.hypot(cx, h - cy), Math.hypot(w - cx, h - cy));
+		grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, r);
+	} else if (g.type === "conic" && typeof ctx.createConicGradient === "function") grad = ctx.createConicGradient(((g.angle ?? 0) - 90) * Math.PI / 180, cx, cy);
+	else {
+		const rad = (g.angle ?? 180) * Math.PI / 180;
+		const dx = Math.sin(rad), dy = -Math.cos(rad);
+		const half = (Math.abs(w * dx) + Math.abs(h * dy)) / 2;
+		grad = ctx.createLinearGradient(w / 2 - dx * half, h / 2 - dy * half, w / 2 + dx * half, h / 2 + dy * half);
+	}
+	for (const s of [...g.stops].sort((a, b) => a.offset - b.offset)) grad.addColorStop(Math.max(0, Math.min(1, s.offset)), withOpacity(s.color, s.opacity));
+	return grad;
+}
+function withOpacity(color, opacity) {
+	if (opacity === void 0 || opacity >= 1) return color;
+	const hex = color.trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+	if (!hex) return color;
+	const h = hex[1].length === 3 ? hex[1].split("").map((x) => x + x).join("") : hex[1];
+	return `rgba(${parseInt(h.slice(0, 2), 16)}, ${parseInt(h.slice(2, 4), 16)}, ${parseInt(h.slice(4, 6), 16)}, ${Math.max(0, opacity)})`;
+}
+// src/render/compositor.ts
+/**
+* One tick: plan the frame, sync decoders, gather frames, paint. A tick that
+* arrives while another is in flight is coalesced into one re-run; a tick on
+* the same frame index as the last paint only keeps decoders prefetching.
+*/
+var Compositor = class Compositor {
+	deps;
+	pool;
+	painter;
+	ctx = null;
+	state;
+	inFlight = null;
+	pending = null;
+	lastFrame = -1;
+	lastPlan = null;
+	nested = /* @__PURE__ */ new Map();
+	disposed = false;
+	constructor(state, deps) {
+		this.deps = deps;
+		this.state = state;
+		this.pool = new DecoderPool(deps.sources);
+		this.painter = new CanvasPainter(state.composition.width, state.composition.height, deps.createCanvas);
+	}
+	attach(ctx) {
+		this.ctx = ctx;
+		this.lastFrame = -1;
+	}
+	get renderedFrame() {
+		return this.lastFrame;
+	}
+	get attachedContext() {
+		return this.ctx;
+	}
+	get lastPlanBuilt() {
+		return this.lastPlan;
+	}
+	get currentState() {
+		return this.state;
+	}
+	setState(state) {
+		this.state = state;
+		if (state.composition.width !== this.painter.width || state.composition.height !== this.painter.height) this.painter = new CanvasPainter(state.composition.width, state.composition.height, this.deps.createCanvas);
+		this.lastFrame = -1;
+	}
+	setRate(rate) {
+		this.pool.setRate(rate);
+		for (const n of this.nested.values()) n.compositor.setRate(rate);
+	}
+	plan(t) {
+		return buildFramePlan(this.state, t, this.deps.resolveNested);
+	}
+	/** Jump every decoder (nested ones too) to `t`. */
+	seek(t) {
+		const nested = this.plan(t).ops.filter((op) => op.nested).map((op) => this.nested.get(op.id)?.compositor.seek(op.nested.time) ?? Promise.resolve());
+		return Promise.all([this.pool.seekAll(t), ...nested]).then(() => void 0);
+	}
+	/**
+	* The next frame of a sequential render (export): decoders keep streaming
+	* from where they are instead of being re-primed, and every frame is waited
+	* for. Paint order and output are the same as `seek` then `tick`, at a
+	* fraction of the decode work.
+	*/
+	step(t) {
+		return this.tick(t, {
+			wait: true,
+			exact: true
+		});
+	}
+	tick(t, opts) {
+		if (this.disposed) return Promise.resolve();
+		if (this.inFlight) {
+			if (this.pending) {
+				this.pending.t = t;
+				this.pending.opts = {
+					wait: opts.wait || this.pending.opts.wait,
+					exact: Boolean(opts.exact || this.pending.opts.exact)
+				};
+				return this.pending.done;
+			}
+			let resolve = () => void 0;
+			const done = new Promise((r) => {
+				resolve = r;
+			});
+			this.pending = {
+				t,
+				opts,
+				done,
+				resolve
+			};
+			return done;
+		}
+		const run = this.run(t, opts).catch(() => void 0).then(() => {
+			this.inFlight = null;
+			const next = this.pending;
+			this.pending = null;
+			if (next) this.tick(next.t, next.opts).then(next.resolve, next.resolve);
+		});
+		this.inFlight = run;
+		return run;
+	}
+	dispose() {
+		this.disposed = true;
+		this.pool.dispose();
+		for (const n of this.nested.values()) n.compositor.dispose();
+		this.nested.clear();
+	}
+	async run(t, opts) {
+		const frame = frameIndex(t, this.state.composition.fps);
+		this.pool.sync(this.state, t);
+		if (frame === this.lastFrame && !opts.wait) return;
+		const plan = this.plan(t);
+		this.lastPlan = plan;
+		this.syncNested(plan);
+		if (opts.wait) await this.pool.settle();
+		const frames = /* @__PURE__ */ new Map();
+		const nestedCanvases = /* @__PURE__ */ new Map();
+		await Promise.all(plan.ops.map(async (op) => {
+			if (op.nested) {
+				const n = this.nested.get(op.id);
+				if (!n) return;
+				await n.compositor.tick(op.nested.time, {
+					wait: opts.wait,
+					exact: Boolean(opts.exact)
+				});
+				nestedCanvases.set(op.id, n.canvas);
+				return;
+			}
+			if (op.kind !== "video" && op.kind !== "image" && op.kind !== "error") return;
+			const d = this.pool.decoderFor(op.id);
+			frames.set(op.id, d ? await d.frameFor(t, opts.wait, opts.exact) : null);
+		}));
+		if (this.disposed) return;
+		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);
+	}
+	syncNested(plan) {
+		const want = /* @__PURE__ */ new Set();
+		for (const op of plan.ops) {
+			if (!op.nested) continue;
+			want.add(op.id);
+			const existing = this.nested.get(op.id);
+			if (existing && existing.compositor.currentState === op.nested.state) continue;
+			existing?.compositor.dispose();
+			const inner = op.nested.state;
+			const canvas = this.deps.createCanvas(inner.composition.width, inner.composition.height);
+			const compositor = new Compositor(inner, {
+				...this.deps,
+				onFrame: void 0
+			});
+			compositor.attach(canvas.getContext("2d"));
+			this.nested.set(op.id, {
+				compositor,
+				canvas
+			});
+		}
+		for (const [id, n] of this.nested) {
+			if (want.has(id)) continue;
+			n.compositor.dispose();
+			this.nested.delete(id);
+		}
+	}
+};
+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 };