@cutcraft/player 0.0.0-stage → 0.1.0

package/dist/nested-DSXA1q8d.mjs

@@ -0,0 +1,1698 @@
+import { E as trackItems, K as ENVELOPE_STEP_S, L as placementSourceTime, M as frameIndex, _ as fitRect, j as keyframedValue, n as buildFramePlan, tt as PICK_EPS } from "./frame-plan-BNwblf1s.mjs";
+import { capabilitiesOf, freezeHoldsOf, lookupAsset, rampAdvance, rampInverse, rampSpeed, resolveScene, speedKeysOf } from "@cutcraft/kit";
+import { ALL_FORMATS, AudioBufferSink, BlobSource, CanvasSink, FilePathSource, Input, UrlSource, VideoSampleSink } from "mediabunny";
+// 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/resolver.ts
+/** A resolver over a map of asset id → Blob or URL. */
+function fromMap(map) {
+	return { resolve: (assetId) => {
+		const v = map[assetId];
+		if (v === void 0) return Promise.reject(/* @__PURE__ */ new Error(`no media for asset "${assetId}"`));
+		return Promise.resolve(typeof v === "string" ? {
+			kind: "url",
+			url: v
+		} : {
+			kind: "blob",
+			blob: v
+		});
+	} };
+}
+function toResolver(media) {
+	return typeof media.resolve === "function" ? media : fromMap(media);
+}
+// src/media/frame-source.ts
+function defaultCreateCanvas(width, height) {
+	if (typeof OffscreenCanvas !== "undefined") return new OffscreenCanvas(width, height);
+	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/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/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/mediabunny-input.ts
+/** One mediabunny `Input` per asset, shared by the video and audio sources of that asset. */
+var MediabunnyInputs = class {
+	entries = /* @__PURE__ */ new Map();
+	acquire(assetId, handle) {
+		let e = this.entries.get(assetId);
+		if (!e) {
+			const source = handle.kind === "blob" ? new BlobSource(handle.blob) : handle.kind === "path" ? new FilePathSource(handle.path) : new UrlSource(handle.url);
+			e = {
+				input: new Input({
+					source,
+					formats: ALL_FORMATS
+				}),
+				refs: 0
+			};
+			this.entries.set(assetId, e);
+		}
+		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/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;
+	hooks;
+	input = null;
+	track = null;
+	sink = null;
+	stillSink = null;
+	constructor(assetId, handle, inputs, createCanvas, hooks = {}) {
+		this.assetId = assetId;
+		this.handle = handle;
+		this.inputs = inputs;
+		this.createCanvas = createCanvas;
+		this.hooks = hooks;
+	}
+	wrap(sample) {
+		return this.hooks.makeFrame ? this.hooks.makeFrame(sample) : new SampleFrame(sample, this.createCanvas);
+	}
+	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: this.hooks.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 file path needs a host image loader (hooks.loadImage)");
+	const blob = handle.kind === "blob" ? handle.blob : await (await fetch(handle.url)).blob();
+	return createImageBitmap(blob);
+}
+function mediabunnyFrameSourceFactory(inputs, createCanvas, hooks = {}) {
+	return (assetId, handle, kind) => kind === "image" ? new ImageFrameSource(() => (hooks.loadImage ?? loadImage)(handle)) : new MediabunnyFrameSource(assetId, handle, inputs, createCanvas, hooks);
+}
+// src/media/mediabunny-audio-source.ts
+/** PCM ranges of one audio track, decoded on demand into AudioBuffers of the track's sample rate. */
+var MediabunnyAudioSource = class {
+	assetId;
+	handle;
+	inputs;
+	context;
+	trackIndex;
+	input = null;
+	track = null;
+	sink = null;
+	sampleRate = 48e3;
+	channels = 2;
+	constructor(assetId, handle, inputs, context, trackIndex = 0) {
+		this.assetId = assetId;
+		this.handle = handle;
+		this.inputs = inputs;
+		this.context = context;
+		this.trackIndex = trackIndex;
+	}
+	async open() {
+		this.input = this.inputs.acquire(this.assetId, this.handle);
+		const track = (await this.input.getAudioTracks())[this.trackIndex] ?? await this.input.getPrimaryAudioTrack();
+		if (!track) return {
+			sampleRate: 0,
+			channels: 0,
+			duration: 0,
+			decodable: false
+		};
+		const [decodable, sampleRate, channels, duration] = await Promise.all([
+			track.canDecode(),
+			track.getSampleRate(),
+			track.getNumberOfChannels(),
+			track.computeDuration()
+		]);
+		this.track = track;
+		this.sampleRate = sampleRate;
+		this.channels = channels;
+		this.sink = new AudioBufferSink(track);
+		return {
+			sampleRate,
+			channels,
+			duration,
+			decodable
+		};
+	}
+	async range(from, to) {
+		const sr = this.sampleRate;
+		const length = Math.max(1, Math.ceil((to - from) * sr));
+		const out = this.context.createBuffer(Math.max(1, this.channels), length, sr);
+		if (!this.sink) return out;
+		for await (const { buffer, timestamp } of this.sink.buffers(Math.max(0, from), to)) {
+			const offset = Math.round((timestamp - from) * sr);
+			const srcStart = Math.max(0, -offset);
+			const dstStart = Math.max(0, offset);
+			const n = Math.min(buffer.length - srcStart, length - dstStart);
+			if (n <= 0) continue;
+			for (let ch = 0; ch < out.numberOfChannels; ch++) {
+				const data = buffer.getChannelData(Math.min(ch, buffer.numberOfChannels - 1));
+				out.copyToChannel(data.subarray(srcStart, srcStart + n), ch, dstStart);
+			}
+		}
+		return out;
+	}
+	close() {
+		this.sink = null;
+		this.track = 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/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/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;
+	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);
+		for (const op of plan.ops) if (op.kind === "adjustment") this.adjust(ctx, op);
+		else this.drawOp(ctx, op, inputs);
+		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;
+		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();
+	}
+	/** 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 && !(coversCanvas(op, this.width, this.height) && frame.paintFull?.(ctx, this.width, this.height))) {
+			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) {
+		this.layer ??= this.createCanvas(this.width, this.height);
+		const layer = this.layer;
+		const lctx = layer.getContext("2d");
+		if (!lctx) return;
+		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();
+		}
+		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.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();
+	}
+};
+const GRAIN_TILE = 128;
+/** 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, intercept) {
+		return this.tick(t, {
+			wait: true,
+			exact: true,
+			...intercept ? { intercept } : {}
+		});
+	}
+	tick(t, opts) {
+		if (this.disposed) return Promise.resolve();
+		if (this.inFlight) {
+			if (this.pending) {
+				this.pending.t = t;
+				const intercept = opts.intercept ?? this.pending.opts.intercept;
+				this.pending.opts = {
+					wait: opts.wait || this.pending.opts.wait,
+					exact: Boolean(opts.exact || this.pending.opts.exact),
+					...intercept ? { intercept } : {}
+				};
+				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 (!opts.intercept?.(plan, frames)) {
+			await Promise.all([...frames.values()].map((f) => f?.prepare?.()));
+			if (this.disposed) return;
+			if (this.ctx) this.painter.paint(this.ctx, plan, {
+				frames,
+				nested: nestedCanvases
+			});
+		}
+		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);
+		}
+	}
+};
+// src/nested.ts
+/**
+* Resolves `<Nested of={Helper}>` through the kit's `resolveScene`, once per
+* helper. File references (`of="file:..."`) have no loader yet and resolve
+* to nothing.
+*/
+function makeNestedResolver(parent) {
+	const cache = /* @__PURE__ */ new WeakMap();
+	return (p) => {
+		const of = p.props.of;
+		if (typeof of !== "function") return null;
+		const hit = cache.get(of);
+		if (hit) return hit;
+		const outer = parent();
+		const state = resolveScene(of, p.props, outer.composition, outer.manifest);
+		cache.set(of, state);
+		return state;
+	};
+}
+export { buildAudioPlan as A, ImageFrameSource as C, toResolver as D, fromMap as E, duckIntervals as M, ManualClock as O, ImageFrame as S, defaultCreateCanvas as T, DecoderPool as _, backgroundFill as a, ErrorFrame as b, setMatrix as c, MediabunnyAudioSource as d, mediabunnyAudioSourceFactory as f, MediabunnyInputs as g, mediabunnyFrameSourceFactory as h, backgroundCss as i, buildGainEnvelope as j, PerformanceClock as k, roundedRect as l, SampleFrame as m, Compositor as n, coversCanvas as o, MediabunnyFrameSource as p, CanvasPainter as r, paintBackground as s, makeNestedResolver as t, traceMask as u, ClipDecoder as v, copyFrame as w, ErrorFrameSource as x, AssetSources as y };