@cutcraft/player 0.0.0-stage → 0.2.0

package/dist/index.mjs

@@ -0,0 +1,3301 @@
+import { $ as ClipDecoder, A as transformMatrix, At as ENVELOPE_STEP_S, B as toResolver, Bt as PLAY_PRIME_TIMEOUT_MS, C as cssTransform, Ct as captureWarnings, D as multiply, Dt as AUDIO_PRIME_S, E as matrixToCss, Et as AUDIO_CHUNK_S, F as paramsAt, Ft as MAX_OPEN_INPUTS, G as MediabunnyAudioSource, Gt as SCHEDULER_MS, H as MediabunnyFrameSource, Ht as QUEUE_TARGET, I as postEffects, It as MAX_RATE, J as loadFileFonts, Jt as UNMOUNT_BEHIND_S, K as mediabunnyAudioSourceFactory, Kt as SEEK_MODE_SPEED, L as OVERLAY_KINDS, Lt as MIN_RATE, M as declaredEffects, Mt as FRAME_WAIT_MS, N as effectPasses, Nt as INPUT_IDLE_CLOSE_S, O as rotate, Ot as DUCK_ATTACK_S, P as filterString, Pt as LOOKAHEAD_S, Q as visiblePlacements, R as backdropTracks, Rt as MOUNT_AHEAD_S, S as boundsOf, St as keyframedValue, T as layoutRect, Tt as AUDIO_CACHE_S, U as SampleFrame, Ut as REVERSE_WINDOW_FRAMES, V as MediabunnyInputs, Vt as QUEUE_MAX, W as mediabunnyFrameSourceFactory, Wt as REVERSE_WINDOW_S, X as isVisibleAt, Y as DecoderPool, Z as trackItems, _ as combine, _t as buildGainEnvelope, a as coversCanvas, at as placementSourceTime, b as IDENTITY, bt as ease, c as ShaderRunner, ct as ErrorFrame, d as makeNestedResolver, dt as ImageFrameSource, et as frameIndex, f as blendOf, ft as copyFrame, g as STILL, gt as buildAudioPlan, h as transitionLook, ht as PerformanceClock, i as backgroundFill, it as nestedSourceTime, j as translate, jt as FRAME_EPS, k as scaleM, kt as DUCK_RELEASE_S, l as roundedRect, lt as ErrorFrameSource, m as compositionBackground, mt as ManualClock, n as CanvasPainter, nt as layerClock, o as paintBackground, ot as timecode, p as buildFramePlan, pt as defaultCreateCanvas, q as addFontFaces, qt as SETTLE_MS, r as backgroundCss, rt as localT, s as setMatrix, st as AssetSources, t as Compositor, tt as frameTime, u as traceMask, ut as ImageFrame, v as effect, vt as duckIntervals, w as fitRect, wt as devWarn, x as animatedTransform, xt as hasKeyframes, y as motionAt, yt as EASING_FN, z as fromMap, zt as PICK_EPS } from "./render-DA1KFyei.mjs";
+import { TEXT_ANIMATION_PRESETS, holdLayerFrame, installLayerClock, isVocabulary, layerEngine, rampAdvance, rampSpeed } from "@cutcraft/kit";
+import { Children, Fragment, cloneElement, createContext, forwardRef, isValidElement, memo, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { z } from "zod";
+import { GRAPHIC_KINDS, drawGraphic, graphicSize, isIcon } from "@cutcraft/graphics";
+import { SaxesParser } from "saxes";
+// src/audio/audio-engine.ts
+/**
+* Schedules audio chunks on the output ahead of the transport. Every play
+* starts a session; a scheduler tick plans the window since the last tick
+* up to the lookahead and schedules each new chunk once, with offset,
+* duration and playback rate derived from the transport. Pause cancels
+* everything; seek and rate changes restart the session.
+*/
+var AudioEngine = class {
+	deps;
+	session = 0;
+	timer = null;
+	scheduled = /* @__PURE__ */ new Set();
+	scheduledUpTo = 0;
+	running = false;
+	cache = /* @__PURE__ */ new Map();
+	cacheSeconds = 0;
+	_muted = false;
+	_volume = 1;
+	constructor(deps) {
+		this.deps = deps;
+	}
+	get muted() {
+		return this._muted;
+	}
+	get volume() {
+		return this._volume;
+	}
+	get active() {
+		return this.running;
+	}
+	setMaster(volume, muted) {
+		this._volume = volume;
+		this._muted = muted;
+		this.deps.output.setMaster(muted ? 0 : volume);
+	}
+	/** Decode what plays in the first moments after `t`, bounded by a timeout, so play starts on time. */
+	prime(t) {
+		const plan = buildAudioPlan(this.deps.state(), t, t + AUDIO_PRIME_S, this.deps.resolveNested);
+		const all = Promise.all(plan.map((occ) => this.buffer(occ).catch(() => void 0))).then(() => void 0);
+		const timeout = new Promise((resolve) => setTimeout(resolve, 500));
+		return Promise.race([all, timeout]);
+	}
+	start() {
+		this.session++;
+		this.scheduled.clear();
+		this.scheduledUpTo = this.deps.transport.time();
+		this.running = true;
+		this.deps.output.resume();
+		this.tick();
+		this.timer = this.deps.setInterval(() => this.tick(), 100);
+	}
+	stop() {
+		if (this.timer !== null) this.deps.clearInterval(this.timer);
+		this.timer = null;
+		this.running = false;
+		this.session++;
+		this.deps.output.cancelAll();
+	}
+	/** After a seek, a rate change or a loop: reschedule from the new position. */
+	reseek() {
+		const wasRunning = this.running;
+		this.stop();
+		if (wasRunning) this.start();
+	}
+	tick() {
+		if (!this.running) return;
+		const now = this.deps.transport.time();
+		const horizon = Math.max(now, this.scheduledUpTo) + LOOKAHEAD_S;
+		const from = Math.min(now, this.scheduledUpTo);
+		const plan = buildAudioPlan(this.deps.state(), from, horizon, this.deps.resolveNested);
+		const session = this.session;
+		for (const occ of plan) {
+			const key = `${occ.id}#${occ.chunk}`;
+			if (this.scheduled.has(key)) continue;
+			this.scheduled.add(key);
+			this.schedule(occ, session, key);
+		}
+		this.scheduledUpTo = horizon;
+	}
+	dispose() {
+		this.stop();
+		this.cache.clear();
+	}
+	async schedule(occ, session, key) {
+		let buffer;
+		try {
+			buffer = await this.buffer(occ);
+		} catch (error) {
+			this.deps.onError?.({
+				id: occ.id,
+				asset: occ.asset,
+				error: error instanceof Error ? error : new Error(String(error)),
+				fatal: false
+			});
+			return;
+		}
+		if (session !== this.session) return;
+		const transport = this.deps.transport;
+		const now = transport.time();
+		const startComp = Math.max(occ.compStart, now);
+		if (startComp >= occ.compEnd) return;
+		const ctxTime = (t) => this.deps.toContextTime(transport.clockTimeFor(t));
+		const envelope = occ.gain.map(([t, value]) => ({
+			at: ctxTime(t),
+			value
+		}));
+		const pan = occ.pan?.map(([t, value]) => ({
+			at: ctxTime(t),
+			value
+		}));
+		const keys = occ.rate?.map(([t, speed]) => ({
+			at: t - occ.compStart,
+			speed
+		}));
+		const played = (t) => keys ? rampAdvance(keys, t - occ.compStart) : (t - occ.compStart) * occ.speed;
+		const offset = played(startComp);
+		this.deps.output.schedule({
+			key: `${key}#${session}`,
+			buffer,
+			when: ctxTime(startComp),
+			offset,
+			duration: played(occ.compEnd) - offset,
+			playbackRate: (keys ? rampSpeed(keys, startComp - occ.compStart) : occ.speed) * transport.rate,
+			...occ.rate ? { rate: occ.rate.map(([t, value]) => ({
+				at: ctxTime(t),
+				value: value * transport.rate
+			})) } : {},
+			envelope,
+			...pan ? { pan } : {}
+		});
+	}
+	buffer(occ) {
+		const key = `${occ.asset}|${occ.bufferFrom}|${occ.bufferTo}${occ.reverse ? "|r" : ""}`;
+		const hit = this.cache.get(key);
+		if (hit) {
+			this.cache.delete(key);
+			this.cache.set(key, hit);
+			return hit.buffer;
+		}
+		const seconds = occ.bufferTo - occ.bufferFrom;
+		const buffer = this.deps.audioSource(occ.asset).then((s) => s.range(occ.bufferFrom, occ.bufferTo)).then((b) => {
+			if (occ.reverse) for (let ch = 0; ch < b.numberOfChannels; ch++) b.getChannelData(ch).reverse();
+			return b;
+		});
+		buffer.catch(() => {
+			this.cache.delete(key);
+			this.cacheSeconds -= seconds;
+		});
+		this.cache.set(key, {
+			buffer,
+			seconds
+		});
+		this.cacheSeconds += seconds;
+		while (this.cacheSeconds > 600 && this.cache.size > 1) {
+			const [oldest, entry] = this.cache.entries().next().value;
+			this.cache.delete(oldest);
+			this.cacheSeconds -= entry.seconds;
+		}
+		return buffer;
+	}
+};
+// src/audio/web-audio-output.ts
+/** Web Audio graph: per scheduled chunk `source → gain(envelope) → [pan] → master → destination`. */
+var WebAudioOutput = class {
+	ctx;
+	master;
+	live = /* @__PURE__ */ new Map();
+	constructor(ctx) {
+		this.ctx = ctx;
+		this.master = ctx.createGain();
+		this.master.connect(ctx.destination);
+	}
+	get contextTime() {
+		return this.ctx.currentTime;
+	}
+	get running() {
+		return this.ctx.state === "running";
+	}
+	schedule(src) {
+		this.cancel(src.key);
+		const source = this.ctx.createBufferSource();
+		source.buffer = src.buffer;
+		automate(source.playbackRate, src.rate ?? [], src.when, src.playbackRate);
+		const gain = this.ctx.createGain();
+		automate(gain.gain, src.envelope, src.when, 1);
+		const nodes = [gain];
+		let tail = gain;
+		if (src.pan && src.pan.length > 0 && typeof this.ctx.createStereoPanner === "function") {
+			const panner = this.ctx.createStereoPanner();
+			automate(panner.pan, src.pan, src.when, 0);
+			tail.connect(panner);
+			tail = panner;
+			nodes.push(panner);
+		}
+		source.connect(gain);
+		tail.connect(this.master);
+		const when = Math.max(src.when, this.ctx.currentTime);
+		const late = when - src.when;
+		const offset = src.offset + late * src.playbackRate;
+		const duration = src.duration - late * src.playbackRate;
+		if (duration <= 0) return;
+		source.onended = () => this.drop(src.key, source);
+		source.start(when, offset, duration);
+		this.live.set(src.key, {
+			source,
+			nodes
+		});
+	}
+	cancel(keyPrefix) {
+		for (const [key, entry] of this.live) {
+			if (!key.startsWith(keyPrefix)) continue;
+			this.stop(entry);
+			this.live.delete(key);
+		}
+	}
+	cancelAll() {
+		for (const entry of this.live.values()) this.stop(entry);
+		this.live.clear();
+	}
+	setMaster(gain) {
+		this.master.gain.cancelScheduledValues(this.ctx.currentTime);
+		this.master.gain.setTargetAtTime(gain, this.ctx.currentTime, .01);
+	}
+	async resume() {
+		if (this.ctx.state === "suspended") try {
+			await this.ctx.resume();
+		} catch {}
+	}
+	drop(key, source) {
+		const entry = this.live.get(key);
+		if (entry && entry.source === source) {
+			this.disconnect(entry);
+			this.live.delete(key);
+		}
+	}
+	stop(entry) {
+		entry.source.onended = null;
+		try {
+			entry.source.stop();
+		} catch {}
+		this.disconnect(entry);
+	}
+	disconnect(entry) {
+		entry.source.disconnect();
+		for (const n of entry.nodes) n.disconnect();
+	}
+};
+/** Set an AudioParam from envelope points: the value at `when` first, then linear ramps for later points. */
+function automate(param, points, when, fallback) {
+	if (points.length === 0) {
+		param.value = fallback;
+		return;
+	}
+	const sorted = [...points].sort((a, b) => a.at - b.at);
+	param.setValueAtTime(valueAt$1(sorted, when, fallback), Math.max(0, when));
+	for (const p of sorted) if (p.at > when) param.linearRampToValueAtTime(p.value, p.at);
+}
+function valueAt$1(points, at, fallback) {
+	const first = points[0], last = points[points.length - 1];
+	if (!first || !last) return fallback;
+	if (at <= first.at) return first.value;
+	if (at >= last.at) return last.value;
+	for (let i = 0; i < points.length - 1; i++) {
+		const a = points[i], b = points[i + 1];
+		if (at >= a.at && at < b.at) return b.at === a.at ? b.value : a.value + (b.value - a.value) * (at - a.at) / (b.at - a.at);
+	}
+	return last.value;
+}
+// src/clock/audio-clock.ts
+/**
+* `AudioContext.currentTime` while the context runs, the performance clock
+* otherwise, with an offset captured at every state change so `now()` never
+* jumps. Audio scheduling converts back with `toContextTime`.
+*/
+var AudioContextClock = class {
+	ctx;
+	offset = 0;
+	wasRunning = false;
+	lastNow = 0;
+	constructor(ctx) {
+		this.ctx = ctx;
+	}
+	get running() {
+		return this.ctx.state === "running";
+	}
+	now() {
+		const running = this.running;
+		const raw = running ? this.ctx.currentTime : performance.now() / 1e3;
+		if (running !== this.wasRunning) {
+			this.offset = this.lastNow - raw;
+			this.wasRunning = running;
+		}
+		const now = raw + this.offset;
+		this.lastNow = Math.max(now, this.lastNow);
+		return this.lastNow;
+	}
+	/** Audio context seconds for a clock time; exact while the context runs. */
+	toContextTime(clockTime) {
+		this.now();
+		return this.running ? clockTime - this.offset : this.ctx.currentTime + (clockTime - this.lastNow);
+	}
+};
+// src/clock/transport.ts
+/**
+* Composition time as an anchor on the clock: `anchorTime + (now − anchorClock) × rate`.
+* Every play, pause, seek and rate change re-anchors, so time is always derived from
+* the clock and never accumulates drift.
+*/
+var Transport = class {
+	clock;
+	duration;
+	anchorTime = 0;
+	anchorClock = 0;
+	_rate = 1;
+	_playing = false;
+	loop = false;
+	constructor(clock, duration) {
+		this.clock = clock;
+		this.duration = duration;
+	}
+	get playing() {
+		return this._playing;
+	}
+	get rate() {
+		return this._rate;
+	}
+	time() {
+		return this.timeAt(this.clock.now());
+	}
+	timeAt(clockTime) {
+		if (!this._playing) return this.anchorTime;
+		return this.clamp(this.anchorTime + (clockTime - this.anchorClock) * this._rate);
+	}
+	/** Clock time at which composition time `t` plays; the inverse of `timeAt` while playing. */
+	clockTimeFor(t) {
+		if (!this._playing) return this.clock.now();
+		return this.anchorClock + (t - this.anchorTime) / this._rate;
+	}
+	play() {
+		if (this._playing) return;
+		if (this.anchorTime >= this.duration && this.duration > 0) this.anchorTime = 0;
+		this.anchorClock = this.clock.now();
+		this._playing = true;
+	}
+	pause() {
+		if (!this._playing) return;
+		this.anchorTime = this.time();
+		this._playing = false;
+	}
+	seek(t) {
+		this.anchorTime = this.clamp(t);
+		this.anchorClock = this.clock.now();
+	}
+	setRate(rate) {
+		const r = Math.min(4, Math.max(MIN_RATE, rate));
+		this.anchorTime = this.time();
+		this.anchorClock = this.clock.now();
+		this._rate = r;
+	}
+	/** Advance bookkeeping at the end: loops wrap, otherwise playback stops on the last time. */
+	check() {
+		if (!this._playing || this.duration <= 0) return null;
+		const raw = this.anchorTime + (this.clock.now() - this.anchorClock) * this._rate;
+		if (raw < this.duration) return null;
+		if (this.loop) {
+			this.seek(raw - this.duration >= this.duration ? 0 : raw - this.duration);
+			return "looped";
+		}
+		this.anchorTime = this.duration;
+		this._playing = false;
+		return "ended";
+	}
+	clamp(t) {
+		return t < 0 ? 0 : t > this.duration ? this.duration : t;
+	}
+};
+// src/player.ts
+/**
+* The framework-free player: owns the transport, the compositor (canvas),
+* the audio engine and the media sources. React's `<Player>` is a thin
+* wrapper over it; a headless exporter can drive `renderFrame` directly.
+*/
+var PlayerCore = class {
+	_state;
+	media;
+	clock;
+	transport;
+	compositor;
+	engine;
+	sources;
+	inputs;
+	audioContext;
+	audioSources = /* @__PURE__ */ new Map();
+	listeners = /* @__PURE__ */ new Map();
+	timeListeners = /* @__PURE__ */ new Set();
+	createCanvas;
+	raf;
+	cancelRaf;
+	rafId = null;
+	setTimeoutFn;
+	clearTimeoutFn;
+	settleTimer = null;
+	seekGeneration = 0;
+	snapshot = {
+		time: 0,
+		frame: 0
+	};
+	_muted;
+	_volume = 1;
+	disposed = false;
+	fonts = Promise.resolve();
+	fontsOf = null;
+	fontsWanted;
+	constructor(options) {
+		this._state = options.state;
+		this.media = toResolver(options.media);
+		const comp = options.state.composition;
+		const wantsBrowserAudio = !options.audioOutput || !options.clock || !options.audioSourceFactory;
+		this.audioContext = wantsBrowserAudio && typeof AudioContext !== "undefined" ? options.audioContext ?? new AudioContext({ sampleRate: Number(options.state.items.get(comp.id)?.props.sampleRate ?? 48e3) }) : options.audioContext ?? null;
+		const audioClock = this.audioContext && !options.clock ? new AudioContextClock(this.audioContext) : null;
+		this.clock = options.clock ?? audioClock ?? new PerformanceClock();
+		const toContextTime = options.toContextTime ?? (audioClock ? (t) => audioClock.toContextTime(t) : (t) => t);
+		this.transport = new Transport(this.clock, comp.duration);
+		this.transport.loop = options.loop ?? false;
+		if (options.playbackRate !== void 0) this.transport.setRate(options.playbackRate);
+		this.raf = options.raf ?? ((cb) => requestAnimationFrame(cb));
+		this.cancelRaf = options.cancelRaf ?? ((id) => cancelAnimationFrame(id));
+		this.setTimeoutFn = options.setTimeout ?? ((fn, ms) => setTimeout(fn, ms));
+		this.clearTimeoutFn = options.clearTimeout ?? ((id) => clearTimeout(id));
+		const createCanvas = options.createCanvas ?? defaultCreateCanvas;
+		this.createCanvas = createCanvas;
+		this.inputs = options.frameSourceFactory && options.audioSourceFactory ? null : new MediabunnyInputs();
+		const frameSourceFactory = options.frameSourceFactory ?? mediabunnyFrameSourceFactory(this.inputs, createCanvas);
+		const audioSourceFactory = options.audioSourceFactory ?? mediabunnyAudioSourceFactory(this.inputs);
+		const resolveNested = options.resolveNested ?? makeNestedResolver(() => this._state);
+		this.sources = new AssetSources({
+			media: this.media,
+			manifest: options.state.manifest,
+			frameSourceFactory,
+			clock: this.clock,
+			onError: (e) => this.emit("error", e)
+		});
+		this.compositor = new Compositor(options.state, {
+			sources: this.sources,
+			createCanvas,
+			resolveNested,
+			onFrame: (time, frame) => this.publish(time, frame)
+		});
+		this.compositor.setRate(this.transport.rate);
+		const output = options.audioOutput ?? (this.audioContext ? new WebAudioOutput(this.audioContext) : null);
+		if (!output) throw new Error("PlayerCore needs an AudioOutput: no AudioContext in this environment");
+		this.engine = new AudioEngine({
+			output,
+			transport: this.transport,
+			toContextTime,
+			state: () => this._state,
+			resolveNested,
+			audioSource: (assetId) => this.audioSource(assetId, audioSourceFactory),
+			setInterval: options.setInterval ?? ((fn, ms) => setInterval(fn, ms)),
+			clearInterval: options.clearInterval ?? ((id) => clearInterval(id)),
+			onError: (e) => this.emit("error", e)
+		});
+		this._muted = options.initiallyMuted ?? false;
+		this.engine.setMaster(this._volume, this._muted);
+		this.fontsWanted = options.loadFonts ?? true;
+		this.exactTime = options.exactTime ?? false;
+		this.loadFonts(options.state);
+	}
+	/** Resolves once the file's fonts (`state.fonts`) have loaded; a face that fails is reported as an error event. */
+	/** Overlays follow every change of time, not each frame (`exactTime`). */
+	exactTime;
+	get fontsReady() {
+		return this.fonts;
+	}
+	loadFonts(state) {
+		if (!this.fontsWanted || state.fonts === this.fontsOf) return;
+		this.fontsOf = state.fonts;
+		this.fonts = loadFileFonts(state.fonts, this.media, (family, error) => this.emit("error", {
+			error: /* @__PURE__ */ new Error(`font "${family}": ${error.message}`),
+			fatal: false
+		}));
+	}
+	get state() {
+		return this._state;
+	}
+	get duration() {
+		return this.transport.duration;
+	}
+	get playbackRate() {
+		return this.transport.rate;
+	}
+	set playbackRate(rate) {
+		const r = Math.min(4, Math.max(MIN_RATE, rate));
+		if (r === this.transport.rate) return;
+		this.transport.setRate(r);
+		this.compositor.setRate(r);
+		if (this.transport.playing) this.engine.reseek();
+		this.emit("ratechange", { rate: r });
+	}
+	get loop() {
+		return this.transport.loop;
+	}
+	set loop(v) {
+		this.transport.loop = v;
+	}
+	get muted() {
+		return this._muted;
+	}
+	set muted(v) {
+		if (v === this._muted) return;
+		this._muted = v;
+		this.engine.setMaster(this._volume, v);
+		this.emit("volumechange", {
+			volume: this._volume,
+			muted: v
+		});
+	}
+	get volume() {
+		return this._volume;
+	}
+	set volume(v) {
+		const vol = Math.min(1, Math.max(0, v));
+		if (vol === this._volume) return;
+		this._volume = vol;
+		this.engine.setMaster(vol, this._muted);
+		this.emit("volumechange", {
+			volume: vol,
+			muted: this._muted
+		});
+	}
+	/** The media handle for an asset id, for DOM elements that show images. */
+	resolveMedia(assetId) {
+		return this.media.resolve(assetId);
+	}
+	getCurrentTime() {
+		return this.transport.time();
+	}
+	getCurrentFrame() {
+		return frameIndex(this.transport.time(), this._state.composition.fps);
+	}
+	isPlaying() {
+		return this.transport.playing;
+	}
+	getTime() {
+		return this.snapshot;
+	}
+	async play() {
+		if (this.disposed || this.transport.playing) return;
+		const t = this.transport.time() >= this.duration ? 0 : this.transport.time();
+		await this.engine.prime(t);
+		if (this.disposed || this.transport.playing) return;
+		if (this.transport.time() >= this.duration) {
+			this.transport.seek(0);
+			await this.compositor.seek(0);
+		}
+		this.transport.play();
+		this.engine.start();
+		this.startLoop();
+		this.emit("play", { time: this.transport.time() });
+	}
+	pause() {
+		if (!this.transport.playing) return;
+		this.transport.pause();
+		this.engine.stop();
+		this.stopLoop();
+		this.emit("pause", { time: this.transport.time() });
+	}
+	toggle() {
+		if (this.transport.playing) {
+			this.pause();
+			return Promise.resolve();
+		}
+		return this.play();
+	}
+	/** Jump to `time` and draw its exact frame before resolving, playing or not. */
+	async seekTo(time) {
+		if (this.disposed) return;
+		const generation = ++this.seekGeneration;
+		this.transport.seek(time);
+		const t = this.transport.time();
+		if (this.transport.playing) this.engine.reseek();
+		await this.compositor.seek(t);
+		if (this.disposed || generation !== this.seekGeneration) return;
+		await this.compositor.tick(t, { wait: true });
+		if (this.disposed || generation !== this.seekGeneration) return;
+		this.publish(t, frameIndex(t, this._state.composition.fps));
+		this.emit("seeked", { time: t });
+	}
+	seekToFrame(frame) {
+		return this.seekTo(frameTime(frame, this._state.composition.fps));
+	}
+	/** Draw `time` without moving the transport; decoders return to the play head afterwards. */
+	async renderFrame(time) {
+		if (this.disposed) return;
+		const t = Math.min(this.duration, Math.max(0, time));
+		await this.compositor.seek(t);
+		await this.compositor.tick(t, { wait: true });
+		if (this.transport.playing) await this.compositor.seek(this.transport.time());
+	}
+	/**
+	* A contact sheet of the canvas plane at `times`: each cell is `renderFrame`
+	* of that time with a timecode label, laid out `columns` wide. The way an
+	* agent or a test looks at the result without exporting. DOM overlays
+	* (titles, shapes, Layer interiors) are not on the canvas and do not appear.
+	*/
+	async captureSheet(times, options = {}) {
+		const comp = this._state.composition;
+		const count = times.length;
+		const columns = Math.max(1, Math.min(Math.floor(options.columns ?? 4), Math.max(1, count)));
+		const cellWidth = Math.max(1, Math.round(options.cellWidth ?? Math.min(comp.width, DEFAULT_SHEET_CELL_WIDTH)));
+		const cellHeight = Math.max(1, Math.round(cellWidth * comp.height / comp.width));
+		const rows = Math.max(1, Math.ceil(count / columns));
+		const sheet = this.createCanvas(columns * cellWidth, rows * cellHeight);
+		const ctx = sheet.getContext("2d");
+		const scratch = this.createCanvas(comp.width, comp.height);
+		const scratchCtx = scratch.getContext("2d");
+		if (!ctx || !scratchCtx) throw new Error("captureSheet: no 2d context");
+		const previous = this.compositor.attachedContext;
+		this.compositor.attach(scratchCtx);
+		try {
+			for (let i = 0; i < count; i++) {
+				const t = times[i];
+				await this.renderFrame(t);
+				const x = i % columns * cellWidth;
+				const y = Math.floor(i / columns) * cellHeight;
+				ctx.drawImage(scratch, x, y, cellWidth, cellHeight);
+				if (options.labels !== false) drawLabel(ctx, timecode(Math.min(this.duration, Math.max(0, t)), comp.fps), x, y, cellWidth, cellHeight);
+			}
+		} finally {
+			this.compositor.attach(previous);
+			if (previous && !this.disposed && !this.transport.playing) this.compositor.tick(this.transport.time(), { wait: true });
+		}
+		return sheet;
+	}
+	/**
+	* The editor pushes a new resolve on every drag step. Decoders of the same
+	* asset keep their frames and take the new trim; a paused preview paints at
+	* once with what is decoded and fetches the exact frame after the gesture
+	* has been quiet for `SETTLE_MS`.
+	*/
+	setState(state) {
+		this._state = state;
+		this.loadFonts(state);
+		this.transport.duration = state.composition.duration;
+		this.compositor.setState(state);
+		if (this.transport.playing) return;
+		this.compositor.tick(this.transport.time(), { wait: false });
+		if (this.settleTimer !== null) this.clearTimeoutFn(this.settleTimer);
+		this.settleTimer = this.setTimeoutFn(() => {
+			this.settleTimer = null;
+			if (!this.disposed && !this.transport.playing) this.compositor.tick(this.transport.time(), { wait: true });
+		}, 120);
+	}
+	attachCanvas(canvas) {
+		const ctx = canvas ? canvas.getContext("2d") : null;
+		if (canvas) {
+			canvas.width = this._state.composition.width;
+			canvas.height = this._state.composition.height;
+		}
+		this.compositor.attach(ctx);
+		if (ctx && !this.transport.playing) this.compositor.tick(this.transport.time(), { wait: true });
+	}
+	addEventListener(type, fn) {
+		let set = this.listeners.get(type);
+		if (!set) {
+			set = /* @__PURE__ */ new Set();
+			this.listeners.set(type, set);
+		}
+		set.add(fn);
+		return () => this.removeEventListener(type, fn);
+	}
+	removeEventListener(type, fn) {
+		this.listeners.get(type)?.delete(fn);
+	}
+	/** For `useSyncExternalStore`: notified once per painted frame and on every seek. */
+	subscribeTime(fn) {
+		this.timeListeners.add(fn);
+		return () => {
+			this.timeListeners.delete(fn);
+		};
+	}
+	dispose() {
+		if (this.disposed) return;
+		this.pause();
+		this.disposed = true;
+		if (this.settleTimer !== null) this.clearTimeoutFn(this.settleTimer);
+		this.settleTimer = null;
+		this.engine.dispose();
+		this.compositor.dispose();
+		this.sources.dispose();
+		for (const p of this.audioSources.values()) p.then((s) => s.close()).catch(() => void 0);
+		this.audioSources.clear();
+		this.inputs?.dispose();
+		this.listeners.clear();
+		this.timeListeners.clear();
+	}
+	startLoop() {
+		if (this.rafId !== null) return;
+		const tick = () => {
+			this.rafId = null;
+			if (this.disposed || !this.transport.playing) return;
+			const result = this.transport.check();
+			const t = this.transport.time();
+			if (result === "ended") {
+				this.engine.stop();
+				this.compositor.tick(t, { wait: true }).then(() => this.emit("ended", { time: t }));
+				return;
+			}
+			if (result === "looped") {
+				this.compositor.seek(t);
+				this.engine.reseek();
+			}
+			this.compositor.tick(t, { wait: false });
+			this.rafId = this.raf(tick);
+		};
+		this.rafId = this.raf(tick);
+	}
+	stopLoop() {
+		if (this.rafId !== null) this.cancelRaf(this.rafId);
+		this.rafId = null;
+	}
+	publish(time, frame) {
+		if (this.snapshot.time === time && this.snapshot.frame === frame) return;
+		this.snapshot = {
+			time,
+			frame
+		};
+		for (const fn of this.timeListeners) fn();
+		this.emit("frameupdate", {
+			time,
+			frame
+		});
+	}
+	emit(type, event) {
+		const set = this.listeners.get(type);
+		if (!set) return;
+		for (const fn of [...set]) fn(event);
+	}
+	audioSource(assetId, factory) {
+		let p = this.audioSources.get(assetId);
+		if (!p) {
+			p = this.media.resolve(assetId).then(async (handle) => {
+				const source = factory(assetId, handle, this.audioContext ?? { createBuffer: () => {
+					throw new Error("no AudioContext");
+				} });
+				if (!(await source.open()).decodable) throw new Error(`audio of "${assetId}" cannot be decoded`);
+				return source;
+			});
+			this.audioSources.set(assetId, p);
+			p.catch(() => void 0);
+		}
+		return p;
+	}
+};
+const DEFAULT_SHEET_CELL_WIDTH = 320;
+function drawLabel(ctx, text, x, y, w, h) {
+	const band = Math.max(12, Math.round(h * .1));
+	ctx.setTransform(1, 0, 0, 1, 0, 0);
+	ctx.globalAlpha = 1;
+	ctx.globalCompositeOperation = "source-over";
+	ctx.fillStyle = "rgba(0, 0, 0, 0.6)";
+	ctx.fillRect(x, y + h - band, w, band);
+	ctx.fillStyle = "#ffffff";
+	ctx.font = `${Math.round(band * .7)}px monospace`;
+	ctx.textBaseline = "middle";
+	ctx.fillText(text, x + Math.round(band / 3), y + h - band / 2);
+}
+// src/overlays/layer-interiors.ts
+/**
+* Walk the file's element tree the way the kit's `collect` does (fragments,
+* vocabulary elements, pure helpers expanded by calling them) and record the
+* children of every `<Layer id>`: the resolver drops them, the Player renders them.
+*/
+function indexLayerInteriors(element) {
+	const out = /* @__PURE__ */ new Map();
+	walk(element, out);
+	return out;
+}
+function walk(node, out) {
+	Children.forEach(node, (child) => {
+		if (!isValidElement(child)) return;
+		const element = child;
+		const type = element.type;
+		if (type === Fragment) {
+			walk(element.props.children, out);
+			return;
+		}
+		if (isVocabulary(type)) {
+			if (type.kind === "layer") {
+				if (typeof element.props.id === "string") out.set(element.props.id, element.props.children);
+				return;
+			}
+			walk(element.props.children, out);
+			return;
+		}
+		if (typeof type === "function") {
+			try {
+				walk(type(element.props), out);
+			} catch {}
+			return;
+		}
+		walk(element.props.children, out);
+	});
+}
+// src/react/context.ts
+const PlayerContext = createContext(null);
+/** The layer's clock inside a `<Layer>`; null outside one. */
+const LayerContext = createContext(null);
+// src/react/hooks.ts
+function usePlayer() {
+	const core = useContext(PlayerContext);
+	if (!core) throw new Error("usePlayer() must be used inside <Player>");
+	return core;
+}
+function useCompositionTime() {
+	const core = usePlayer();
+	return useSyncExternalStore((fn) => core.subscribeTime(fn), () => core.getTime().time, () => core.getTime().time);
+}
+function useCompositionFrame() {
+	const core = usePlayer();
+	return useSyncExternalStore((fn) => core.subscribeTime(fn), () => core.getTime().frame, () => core.getTime().frame);
+}
+/** What the kit's `useLayer()` and `useT()` delegate to while a Player is mounted. */
+function useLayerClock() {
+	const clock = useContext(LayerContext);
+	if (!clock) throw new Error("useLayer() and useT() are only valid inside a <Layer>");
+	return clock;
+}
+/** 0..1 progress through the enclosing Layer. */
+function useLayerT() {
+	return useLayerClock().t;
+}
+let mounted = 0;
+/** Installs the kit's layer hooks for the first mounted Player and removes them after the last unmounts. */
+function retainUseT() {
+	if (mounted++ === 0) installLayerClock(useLayerClock);
+	return () => {
+		if (--mounted === 0) installLayerClock(null);
+	};
+}
+// src/react/Controls.tsx
+const bar = {
+	display: "flex",
+	alignItems: "center",
+	gap: 8,
+	padding: "6px 8px",
+	background: "rgba(0,0,0,0.75)",
+	color: "#eee",
+	font: "12px system-ui, sans-serif",
+	position: "absolute",
+	left: 0,
+	right: 0,
+	bottom: 0,
+	zIndex: 1e3
+};
+const button = {
+	background: "none",
+	border: "1px solid #777",
+	color: "inherit",
+	borderRadius: 4,
+	padding: "2px 8px",
+	cursor: "pointer",
+	font: "inherit"
+};
+/** Play/pause, scrubber, time readout, mute and rate. */
+function Controls() {
+	const core = usePlayer();
+	const time = useCompositionTime();
+	const [playing, setPlaying] = useState(core.isPlaying());
+	const [muted, setMuted] = useState(core.muted);
+	const [rate, setRate] = useState(core.playbackRate);
+	const resumeAfterScrub = useRef(false);
+	useEffect(() => {
+		const offs = [
+			core.addEventListener("play", () => setPlaying(true)),
+			core.addEventListener("pause", () => setPlaying(false)),
+			core.addEventListener("ended", () => setPlaying(false)),
+			core.addEventListener("volumechange", (e) => setMuted(e.muted)),
+			core.addEventListener("ratechange", (e) => setRate(e.rate))
+		];
+		return () => offs.forEach((off) => off());
+	}, [core]);
+	const fps = core.state.composition.fps;
+	return /* @__PURE__ */ jsxs("div", {
+		style: bar,
+		"data-controls": "",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				style: button,
+				onClick: () => void core.toggle(),
+				"aria-label": playing ? "Pause" : "Play",
+				children: playing ? "❚❚" : "▶"
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "range",
+				min: 0,
+				max: core.duration,
+				step: 1 / fps,
+				value: time,
+				"aria-label": "Scrub",
+				style: { flex: 1 },
+				onPointerDown: () => {
+					resumeAfterScrub.current = core.isPlaying();
+					core.pause();
+				},
+				onPointerUp: () => {
+					if (resumeAfterScrub.current) core.play();
+					resumeAfterScrub.current = false;
+				},
+				onChange: (e) => void core.seekTo(Number(e.target.value))
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				style: { fontVariantNumeric: "tabular-nums" },
+				children: [
+					timecode(time, fps),
+					" / ",
+					timecode(core.duration, fps)
+				]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				style: button,
+				onClick: () => {
+					core.muted = !core.muted;
+				},
+				"aria-label": muted ? "Unmute" : "Mute",
+				children: muted ? "🔇" : "🔊"
+			}),
+			/* @__PURE__ */ jsx("select", {
+				value: rate,
+				onChange: (e) => {
+					core.playbackRate = Number(e.target.value);
+				},
+				"aria-label": "Speed",
+				style: {
+					...button,
+					padding: 2
+				},
+				children: [
+					.5,
+					1,
+					1.5,
+					2
+				].map((r) => /* @__PURE__ */ jsxs("option", {
+					value: r,
+					children: [r, "×"]
+				}, r))
+			})
+		]
+	});
+}
+// src/overlays/layout.ts
+/**
+* `drawable` elements (shapes, SVG) draw their strokes progressively for a `draw` entrance;
+* others fade instead.
+*/
+function overlayLayout(p, size, fit = "none", drawable = false) {
+	const rel = p.time - p.placement.start;
+	const transform = animatedTransform(p.placement.props.transform, p.children, rel);
+	const layout = layoutRect(p.state.composition, size, fit, transform);
+	const { filter } = filterString(p.children, p.placement.id, rel, declaredEffects(p.state));
+	const blend = p.placement.props.blend;
+	const props = p.placement.props;
+	const motion = combine(motionAt(props.enter, props.exit, rel, p.placement.duration, layout.rect.w, layout.rect.h), transitionMotion(p.transition, layout.rect.w, layout.rect.h));
+	const fadeForDraw = !drawable && motion.draw !== null ? motion.draw : 1;
+	return {
+		rect: {
+			w: layout.rect.w,
+			h: layout.rect.h
+		},
+		matrix: multiply(layout.matrix, motion.matrix),
+		opacity: (transform.opacity ?? 1) * motion.opacity * fadeForDraw,
+		filter: filter || null,
+		blend: blend && blend !== "normal" ? blendOf(blend) : null,
+		borderRadius: transform.borderRadius ?? 0,
+		clip: motion.clip,
+		draw: drawable ? motion.draw : null
+	};
+}
+/**
+* A transition as an entrance or exit: the footage's look, played across the element's box.
+* shortcut: an overlay slides and wipes across its own box, not the frame, and a dip shows as a fade; fine for full-frame titles, measure against the frame if small overlays need it.
+*/
+function transitionMotion(t, w, h) {
+	if (!t) return STILL;
+	const look = transitionLook(t, w, h);
+	return {
+		opacity: look.opacity * (1 - (look.dip ?? 0)),
+		matrix: translate(look.offset?.x ?? 0, look.offset?.y ?? 0),
+		clip: look.clip ?? null,
+		draw: null
+	};
+}
+/** A clip as a CSS `path()`: rectangles in the element's own pixels, an empty one when nothing shows. */
+function clipPathCss(clip) {
+	const n = (v) => String(Math.round(v * 100) / 100);
+	return `path("${clip.map((r) => `M${n(r.x)} ${n(r.y)}h${n(r.w)}v${n(r.h)}h${n(-r.w)}Z`).join("") || "M0 0Z"}")`;
+}
+/** Position an overlay of `size` composition pixels with its transform, filter and blend as CSS. */
+function overlayStyle(p, size, fit = "none", drawable = false) {
+	return layoutStyle(overlayLayout(p, size, fit, drawable));
+}
+/** The CSS that puts an element where its layout says. */
+function layoutStyle(l) {
+	return {
+		position: "absolute",
+		left: 0,
+		top: 0,
+		width: l.rect.w,
+		height: l.rect.h,
+		transformOrigin: "0 0",
+		transform: matrixToCss(l.matrix),
+		opacity: l.opacity,
+		...l.filter ? { filter: l.filter } : {},
+		...l.blend ? { mixBlendMode: cssBlend(l.blend) } : {},
+		...l.borderRadius ? {
+			borderRadius: l.borderRadius,
+			overflow: "hidden"
+		} : {},
+		...l.clip ? { clipPath: clipPathCss(l.clip) } : {},
+		boxSizing: "border-box"
+	};
+}
+function cssBlend(op) {
+	return op === "source-over" ? "normal" : op === "lighter" ? "plus-lighter" : op;
+}
+function dataAttrs(p) {
+	return {
+		"data-el": p.id,
+		"data-kind": p.kind
+	};
+}
+// src/react/elements/Adjustment.tsx
+/**
+* The painter's adjustment op filters the footage; overlays stay unfiltered, as in the export.
+* A backdrop filter here would filter the canvas a second time.
+*/
+function Adjustment(p) {
+	return /* @__PURE__ */ jsx("div", {
+		...dataAttrs(p.placement),
+		style: {
+			position: "absolute",
+			inset: 0,
+			pointerEvents: "none"
+		}
+	});
+}
+// src/overlays/content.tsx
+/** @jsxRuntime automatic */
+/** @jsxImportSource react */
+/**
+* What each overlay element draws, as a React tree with no hooks and no DOM
+* calls. The player mounts these inside positioned divs.
+*/
+const SUPPORTED = new Set(TEXT_ANIMATION_PRESETS);
+/** A title's box: its width and height props, the whole frame when left out. */
+function titleBox(props, comp) {
+	return {
+		width: typeof props.width === "number" ? props.width : comp.width,
+		height: typeof props.height === "number" ? props.height : comp.height
+	};
+}
+/** Text title: the file's text content with font props; entrance/exit presets as CSS transforms. */
+function titleContent(p) {
+	const props = p.placement.props;
+	const text = p.text;
+	const rel = p.time - p.placement.start;
+	const anim = props.animation;
+	const { effect, visibleChars } = animation(anim, rel, p.placement.duration, text.length, p.placement.id);
+	const weight = props.weight;
+	const shadow = props.shadow;
+	const stroke = props.stroke;
+	const inner = {
+		width: "100%",
+		height: "100%",
+		display: "flex",
+		alignItems: props.valign === "top" ? "flex-start" : props.valign === "bottom" ? "flex-end" : "center",
+		justifyContent: props.align === "left" ? "flex-start" : props.align === "right" ? "flex-end" : "center",
+		textAlign: props.align ?? "center",
+		fontFamily: String(props.font ?? "Inter"),
+		fontSize: Number(props.size ?? 48),
+		fontWeight: typeof weight === "number" ? weight : weight === "normal" ? 400 : 700,
+		fontStyle: props.italic ? "italic" : "normal",
+		color: String(props.color ?? "#ffffff"),
+		lineHeight: Number(props.lineHeight ?? 1.2),
+		letterSpacing: Number(props.letterSpacing ?? 0),
+		textDecoration: typeof props.decoration === "string" ? props.decoration : "none",
+		whiteSpace: "pre-wrap",
+		...props.background ? { background: String(props.background) } : {},
+		...shadow ? { textShadow: `${shadow.x ?? 0}px ${shadow.y ?? 0}px ${shadow.blur ?? 0}px ${shadow.color}` } : {},
+		...stroke ? { WebkitTextStroke: `${stroke.width}px ${stroke.color}` } : {},
+		...effect
+	};
+	const shown = visibleChars === null ? text : text.slice(0, visibleChars);
+	return /* @__PURE__ */ jsx("div", {
+		style: inner,
+		children: anim?.preset === "word-by-word" ? words(text, rel, anim, p.placement.duration) : shown
+	});
+}
+function animation(anim, rel, duration, chars, id) {
+	if (!anim || anim.preset === "none") return {
+		effect: {},
+		visibleChars: null
+	};
+	let preset = anim.preset;
+	if (!SUPPORTED.has(preset)) {
+		devWarn(`title-anim:${id}:${preset}`, `text animation "${preset}" on "${id}" is shown as a fade`);
+		preset = "fade";
+	}
+	const inP = anim.in > 0 ? Math.min(1, rel / anim.in) : 1;
+	const outP = anim.out > 0 ? Math.min(1, Math.max(0, (duration - rel) / anim.out)) : 1;
+	const k = Math.min(inP, outP);
+	if (preset === "typewriter") return {
+		effect: {},
+		visibleChars: Math.round(chars * inP)
+	};
+	if (preset === "word-by-word") return {
+		effect: {},
+		visibleChars: null
+	};
+	const slide = {
+		"slide-up": [0, 40],
+		"slide-down": [0, -40],
+		"slide-left": [40, 0],
+		"slide-right": [-40, 0]
+	}[preset];
+	if (slide) return {
+		effect: {
+			opacity: k,
+			transform: `translate(${slide[0] * (1 - k)}px, ${slide[1] * (1 - k)}px)`
+		},
+		visibleChars: null
+	};
+	if (preset === "scale") return {
+		effect: {
+			opacity: k,
+			transform: `scale(${.6 + .4 * k})`
+		},
+		visibleChars: null
+	};
+	return {
+		effect: { opacity: k },
+		visibleChars: null
+	};
+}
+function words(text, rel, anim, duration) {
+	const parts = text.split(/(\s+)/);
+	const wordCount = parts.filter((w) => w.trim().length > 0).length;
+	const stagger = anim.stagger ?? (wordCount > 0 ? anim.in / wordCount : 0);
+	let i = 0;
+	return parts.map((part, idx) => {
+		if (part.trim().length === 0) return /* @__PURE__ */ jsx("span", { children: part }, idx);
+		const shown = rel >= i++ * stagger && rel <= duration;
+		return /* @__PURE__ */ jsx("span", {
+			style: { opacity: shown ? 1 : 0 },
+			children: part
+		}, idx);
+	});
+}
+/** The active caption lines, positioned by the captions style; karaoke colours words by their timing. */
+function captionsContent(p) {
+	const props = p.placement.props;
+	const style = props.style ?? {};
+	const animation = String(props.animation ?? "none");
+	const active = [...p.state.items.values()].filter((c) => c.parent === p.placement.id && c.kind === "caption" && isVisibleAt(c, p.time, p.state.composition.duration)).sort((a, b) => a.start - b.start);
+	const comp = p.state.composition;
+	const portrait = comp.height > comp.width;
+	const shadow = style.shadow ? `${style.shadow.x ?? 0}px ${style.shadow.y ?? 0}px ${style.shadow.blur ?? 0}px ${style.shadow.color}` : "0 0 3px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.55), 0 2px 14px rgba(0,0,0,0.75)";
+	const container = {
+		position: "absolute",
+		left: 0,
+		right: 0,
+		padding: portrait ? "0 12%" : "0 8%",
+		...style.position === "top" ? { top: comp.height * .08 } : style.position === "center" ? {
+			top: "50%",
+			transform: "translateY(-50%)"
+		} : { bottom: comp.height * (portrait ? .2 : .08) },
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		gap: 8,
+		pointerEvents: "none",
+		fontFamily: style.font ?? "Inter",
+		fontSize: style.size ?? Math.round(comp.height / 24),
+		color: style.color ?? "#ffffff",
+		fontWeight: style.weight === "normal" ? 400 : style.weight === "bold" ? 700 : Number(style.weight ?? 800),
+		textShadow: shadow,
+		...style.stroke ? {
+			WebkitTextStroke: `${style.stroke.width}px ${style.stroke.color}`,
+			paintOrder: "stroke fill"
+		} : {},
+		textAlign: "center",
+		lineHeight: 1.15
+	};
+	return /* @__PURE__ */ jsx("div", {
+		"data-el": p.placement.id,
+		"data-kind": "captions",
+		style: container,
+		children: active.map((c) => /* @__PURE__ */ jsx("div", {
+			"data-el": c.id,
+			"data-kind": "caption",
+			style: {
+				padding: "0.2em 0.5em",
+				borderRadius: 6,
+				textWrap: "balance",
+				...style.background ? { background: style.background } : {}
+			},
+			children: line(c, p.time, animation, style)
+		}, c.id))
+	});
+}
+function line(c, time, animation, style) {
+	const text = String(c.props.text ?? "");
+	const words = c.props.words;
+	if (!words || words.length === 0 || animation === "none") {
+		if (animation === "typewriter" && c.duration > 0) return text.slice(0, Math.round(text.length * (time - c.start) / c.duration));
+		return text;
+	}
+	return words.map((w, i) => {
+		const done = time >= w.end;
+		const color = time >= w.start && time < w.end ? style.highlight ?? "#ffd400" : done || animation === "word-highlight" ? void 0 : style.upcoming ?? "rgba(255,255,255,0.5)";
+		const hidden = animation === "word-by-word" && time < w.start;
+		return /* @__PURE__ */ jsxs("span", {
+			style: {
+				...color ? { color } : {},
+				...hidden ? { opacity: 0 } : {}
+			},
+			children: [w.text, i < words.length - 1 ? " " : ""]
+		}, i);
+	});
+}
+/** The interior as written, with the Layer's handles (edited props) applied to its one component. */
+function layerContent(interior, props) {
+	if (!props) return interior;
+	const only = Children.toArray(interior).filter((c) => c !== null && typeof c !== "boolean" && c !== "");
+	const child = only.length === 1 ? only[0] : null;
+	return isValidElement(child) ? cloneElement(child, props) : interior;
+}
+/** The labelled box shown for a sticker with no media. */
+function stickerPlaceholder(label) {
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			width: "100%",
+			height: "100%",
+			background: "#333",
+			color: "#ccc",
+			font: "16px monospace",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			borderRadius: 8
+		},
+		children: label
+	});
+}
+/** Side length of the box a sticker is drawn in. */
+function stickerSize(p) {
+	return Math.round(Math.min(p.state.composition.width, p.state.composition.height) / 4);
+}
+// src/react/elements/Captions.tsx
+/** The active caption lines, positioned by the captions style; karaoke colours words by their timing. */
+function Captions(p) {
+	return captionsContent(p);
+}
+// src/overlays/smil.ts
+/**
+* SVG animation (SMIL) evaluated at one moment of the element's own time and
+* written into plain attributes, so the frame follows the video's clock rather
+* than the browser's, which would otherwise play SMIL on its own.
+*
+* Covered: `<animate>`, `<set>`, `<animateTransform>` and `<animateColor>`;
+* `values`, `from`/`to`/`by`, `keyTimes`, `keySplines`; linear, discrete,
+* spline and paced (as linear) timing; `begin` and `end` as offsets or
+* `id.begin`/`id.end` with an offset; `dur`, `repeatCount`, `repeatDur`,
+* `fill="freeze"`, `additive` and `accumulate="sum"`; a target by `href`.
+* Not covered, and dropped with a warning: `<animateMotion>`, and begins on
+* events (`click`, `mouseover`) or `indefinite`.
+*/
+const ANIMATIONS = /* @__PURE__ */ new Set([
+	"animate",
+	"set",
+	"animateTransform",
+	"animateColor",
+	"animateMotion"
+]);
+/** Whether a tree has SMIL animations in it. */
+function hasSmil(node) {
+	return ANIMATIONS.has(node.name) || node.children.some((c) => typeof c !== "string" && hasSmil(c));
+}
+/** The tree with every animation applied at `time` seconds and removed. Returns a copy; the input is not changed. */
+function freezeSmil(root, time, warnings) {
+	const copy = clone(root);
+	const ids = /* @__PURE__ */ new Map();
+	const anims = [];
+	const collect = (node, parent) => {
+		if (node.attrs.id) ids.set(node.attrs.id, node);
+		if (ANIMATIONS.has(node.name) && parent) anims.push({
+			node,
+			target: parent,
+			order: anims.length
+		});
+		for (const c of node.children) if (typeof c !== "string") collect(c, node);
+	};
+	collect(copy, null);
+	if (anims.length === 0) return copy;
+	const byId = /* @__PURE__ */ new Map();
+	for (const a of anims) {
+		const href = a.node.attrs.href ?? a.node.attrs["xlink:href"];
+		if (href?.startsWith("#")) {
+			const t = ids.get(href.slice(1));
+			if (t) a.target = t;
+		}
+		if (a.node.attrs.id) byId.set(a.node.attrs.id, a);
+	}
+	const warned = /* @__PURE__ */ new Set();
+	const warn = (key, message) => {
+		if (!warned.has(key)) {
+			warned.add(key);
+			warnings.push(message);
+		}
+	};
+	const intervals = /* @__PURE__ */ new Map();
+	const resolving = /* @__PURE__ */ new Set();
+	const intervalOf = (a) => {
+		if (intervals.has(a)) return intervals.get(a);
+		if (resolving.has(a)) {
+			warn("cycle", "SMIL animations that begin on each other in a loop are left out");
+			return null;
+		}
+		resolving.add(a);
+		const result = activeInterval(a, time, (id, edge) => {
+			const other = byId.get(id);
+			const iv = other ? intervalOf(other) : null;
+			return iv ? edge === "begin" ? iv.begin : iv.end : null;
+		}, warn);
+		resolving.delete(a);
+		intervals.set(a, result);
+		return result;
+	};
+	const base = /* @__PURE__ */ new Map();
+	const sandwich = /* @__PURE__ */ new Map();
+	for (const a of anims) {
+		if (a.node.name === "animateMotion") {
+			warn("motion", "<animateMotion> is not played; the element stays where it is");
+			continue;
+		}
+		const name = a.node.name === "animateTransform" ? "transform" : a.node.attrs.attributeName;
+		if (!name) continue;
+		const iv = intervalOf(a);
+		if (!iv) continue;
+		const baseAttrs = base.get(a.target) ?? {
+			...a.target.attrs,
+			...styleProps(a.target.attrs.style)
+		};
+		base.set(a.target, baseAttrs);
+		const current = sandwich.get(a.target) ?? /* @__PURE__ */ new Map();
+		sandwich.set(a.target, current);
+		const value = valueAt(a, iv, time, current.get(name) ?? baseAttrs[name] ?? "", baseAttrs[name] ?? "");
+		if (value !== null) current.set(name, value);
+	}
+	for (const [target, values] of sandwich) for (const [name, value] of values) {
+		target.attrs[name] = value;
+		if (target.attrs.style) target.attrs.style = withoutProp(target.attrs.style, name);
+	}
+	return strip(copy);
+}
+/** The first interval of an animation that has begun by `time` (the latest such), or null when it never applies. */
+function activeInterval(a, time, sync, warn) {
+	const attrs = a.node.attrs;
+	const begins = timeList(attrs.begin ?? "0", sync, (spec) => warn(`begin:${spec}`, `SMIL begin "${spec}" waits for an event or a script; that animation is left out`));
+	const started = begins.filter((b) => b <= time + 1e-9);
+	if (begins.length === 0) return null;
+	const begin = started.length ? Math.max(...started) : Math.min(...begins);
+	const simple = durationOf(a);
+	const repeatCount = attrs.repeatCount === "indefinite" ? Infinity : attrs.repeatCount !== void 0 ? Number(attrs.repeatCount) : null;
+	const repeatDur = attrs.repeatDur === "indefinite" ? Infinity : attrs.repeatDur !== void 0 ? clock(attrs.repeatDur) : null;
+	let active = simple;
+	if (repeatCount !== null || repeatDur !== null) active = Math.min(repeatCount === null ? Infinity : simple * repeatCount, repeatDur ?? Infinity);
+	if (attrs.end !== void 0) {
+		const ends = timeList(attrs.end, sync, () => void 0).filter((e) => e >= begin);
+		if (ends.length) active = Math.min(active, Math.min(...ends) - begin);
+	}
+	return {
+		begin,
+		end: begin + Math.max(0, active)
+	};
+}
+function durationOf(a) {
+	const dur = a.node.attrs.dur;
+	if (dur === void 0 || dur === "indefinite" || dur === "media") return Infinity;
+	const d = clock(dur);
+	return d !== null && d > 0 ? d : Infinity;
+}
+/** The animation's value at `time`, over `under` (what lower animations or the base give), or null when it does not apply. */
+function valueAt(a, iv, time, under, baseValue) {
+	const attrs = a.node.attrs;
+	if (time < iv.begin) return null;
+	const frozen = time >= iv.end;
+	if (frozen && attrs.fill !== "freeze") return null;
+	if (a.node.name === "set") return attrs.to ?? null;
+	const dur = durationOf(a);
+	const t = (frozen ? iv.end : time) - iv.begin;
+	let iteration = 0, k;
+	if (!Number.isFinite(dur)) k = 0;
+	else {
+		iteration = Math.floor(t / dur);
+		k = (t - iteration * dur) / dur;
+		if (frozen && iteration > 0 && k < 1e-9) {
+			iteration -= 1;
+			k = 1;
+		}
+	}
+	const list = valuesOf(a, baseValue);
+	if (list.length === 0) return null;
+	let value = sample(list, k, attrs);
+	if (attrs.accumulate === "sum" && iteration > 0) value = addValues(value, scaleValue(list[list.length - 1], iteration));
+	const transform = a.node.name === "animateTransform";
+	if (transform) value = `${attrs.type ?? "translate"}(${value})`;
+	if (attrs.additive === "sum" || !attrs.values && !attrs.from && attrs.by !== void 0) return transform ? `${under} ${value}`.trim() : addValues(under, value);
+	return value;
+}
+function valuesOf(a, baseValue) {
+	const attrs = a.node.attrs;
+	if (attrs.values) return attrs.values.split(";").map((v) => v.trim()).filter((v) => v.length > 0);
+	if (attrs.from !== void 0 && attrs.to !== void 0) return [attrs.from, attrs.to];
+	if (attrs.from !== void 0 && attrs.by !== void 0) return [attrs.from, addValues(attrs.from, attrs.by)];
+	if (attrs.to !== void 0) return [a.node.name === "animateTransform" ? "0" : baseValue || attrs.to, attrs.to];
+	if (attrs.by !== void 0) return [scaleValue(attrs.by, 0), attrs.by];
+	return [];
+}
+/** The value `k` (0..1) of the way through a list, by the animation's calcMode, keyTimes and keySplines. */
+function sample(values, k, attrs) {
+	const mode = attrs.calcMode ?? "linear";
+	const n = values.length;
+	if (n === 1) return values[0];
+	const times = attrs.keyTimes?.split(";").map(Number);
+	const keys = times && times.length === n && times.every(Number.isFinite) ? times : null;
+	if (mode === "discrete") {
+		if (keys) {
+			let i = 0;
+			while (i + 1 < n && keys[i + 1] <= k + 1e-9) i++;
+			return values[i];
+		}
+		return values[Math.min(n - 1, Math.floor(k * n))];
+	}
+	let i, local;
+	if (keys) {
+		i = 0;
+		while (i + 2 < n && keys[i + 1] <= k) i++;
+		const a = keys[i], b = keys[i + 1];
+		local = b > a ? (k - a) / (b - a) : 1;
+	} else {
+		const x = k * (n - 1);
+		i = Math.min(n - 2, Math.floor(x));
+		local = x - i;
+	}
+	local = Math.max(0, Math.min(1, local));
+	if (mode === "spline") {
+		const spline = attrs.keySplines?.split(";")[i]?.trim().split(/[\s,]+/).map(Number);
+		if (spline && spline.length === 4 && spline.every(Number.isFinite)) local = bezier(local, spline);
+	}
+	return interpolate(values[i], values[i + 1], local);
+}
+/** Two values `k` of the way from `a` to `b`: numbers in the same places interpolate, colours mix, anything else switches halfway. */
+function interpolate(a, b, k) {
+	const ca = colour(a), cb = colour(b);
+	if (ca && cb) {
+		const ch = (i) => Math.round(ca[i] + (cb[i] - ca[i]) * k);
+		return `rgb(${ch(0)}, ${ch(1)}, ${ch(2)})`;
+	}
+	const pa = split(a), pb = split(b);
+	if (pa.text.length === pb.text.length && pa.text.every((t, i) => t === pb.text[i])) {
+		let out = pa.text[0];
+		for (let i = 0; i < pa.nums.length; i++) out += fmt(pa.nums[i] + (pb.nums[i] - pa.nums[i]) * k) + pa.text[i + 1];
+		return out;
+	}
+	return k < .5 ? a : b;
+}
+const NUMBER = /[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][-+]?\d+)?/g;
+/** A value as the text between its numbers, and the numbers. */
+function split(v) {
+	const text = [], nums = [];
+	let last = 0;
+	for (const m of v.matchAll(NUMBER)) {
+		text.push(v.slice(last, m.index));
+		nums.push(Number(m[0]));
+		last = (m.index ?? 0) + m[0].length;
+	}
+	text.push(v.slice(last));
+	return {
+		text,
+		nums
+	};
+}
+function addValues(a, b) {
+	if (!a) return b;
+	const ca = colour(a), cb = colour(b);
+	if (ca && cb) return `rgb(${ca.map((x, i) => Math.min(255, Math.round(x + cb[i]))).join(", ")})`;
+	const pa = split(a), pb = split(b);
+	if (pa.nums.length !== pb.nums.length) return b;
+	let out = pb.text[0];
+	for (let i = 0; i < pb.nums.length; i++) out += fmt(pa.nums[i] + pb.nums[i]) + pb.text[i + 1];
+	return out;
+}
+function scaleValue(v, k) {
+	const p = split(v);
+	let out = p.text[0];
+	for (let i = 0; i < p.nums.length; i++) out += fmt(p.nums[i] * k) + p.text[i + 1];
+	return out;
+}
+const NAMED = {
+	black: [
+		0,
+		0,
+		0
+	],
+	white: [
+		255,
+		255,
+		255
+	],
+	red: [
+		255,
+		0,
+		0
+	],
+	green: [
+		0,
+		128,
+		0
+	],
+	blue: [
+		0,
+		0,
+		255
+	],
+	yellow: [
+		255,
+		255,
+		0
+	],
+	orange: [
+		255,
+		165,
+		0
+	],
+	purple: [
+		128,
+		0,
+		128
+	],
+	gray: [
+		128,
+		128,
+		128
+	],
+	grey: [
+		128,
+		128,
+		128
+	],
+	cyan: [
+		0,
+		255,
+		255
+	],
+	magenta: [
+		255,
+		0,
+		255
+	]
+};
+function colour(v) {
+	const c = v.trim().toLowerCase();
+	const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/.exec(c);
+	if (hex) {
+		const h = hex[1].length === 3 ? hex[1].split("").map((x) => x + x).join("") : hex[1];
+		return [
+			parseInt(h.slice(0, 2), 16),
+			parseInt(h.slice(2, 4), 16),
+			parseInt(h.slice(4, 6), 16)
+		];
+	}
+	const fn = /^rgb\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)\s*\)$/.exec(c);
+	if (fn) return [
+		Number(fn[1]),
+		Number(fn[2]),
+		Number(fn[3])
+	];
+	return NAMED[c] ?? null;
+}
+/** A cubic-bezier easing (x1 y1 x2 y2) at progress x. */
+function bezier(x, [x1, y1, x2, y2]) {
+	const at = (t, a, b) => 3 * (1 - t) * (1 - t) * t * a + 3 * (1 - t) * t * t * b + t * t * t;
+	let lo = 0, hi = 1, t = x;
+	for (let i = 0; i < 30; i++) {
+		t = (lo + hi) / 2;
+		if (at(t, x1, x2) < x) lo = t;
+		else hi = t;
+	}
+	return at(t, y1, y2);
+}
+/** A begin or end list: offsets and `id.begin`/`id.end` with an offset. Event and `indefinite` entries are left out (and reported). */
+function timeList(spec, sync, unsupported) {
+	const out = [];
+	for (const raw of spec.split(";")) {
+		const s = raw.trim();
+		if (!s) continue;
+		const offset = clock(s);
+		if (offset !== null) {
+			out.push(offset);
+			continue;
+		}
+		const m = /^([A-Za-z_][\w-]*)\.(begin|end)\s*(?:([+-])\s*(.+))?$/.exec(s);
+		if (m) {
+			const at = sync(m[1], m[2]);
+			const extra = m[4] ? clock(m[4]) : 0;
+			if (at !== null && extra !== null && Number.isFinite(at)) out.push(at + (m[3] === "-" ? -extra : extra));
+			continue;
+		}
+		unsupported(s);
+	}
+	return out;
+}
+/** A SMIL clock value in seconds: `2s`, `500ms`, `1.5`, `1min`, `0.1h`, `01:02.5`, `00:01:02`. */
+function clock(v) {
+	const s = v.trim();
+	const unit = /^([-+]?[\d.]+)\s*(h|min|s|ms)?$/.exec(s);
+	if (unit) {
+		const n = Number(unit[1]);
+		if (!Number.isFinite(n)) return null;
+		return n * {
+			h: 3600,
+			min: 60,
+			s: 1,
+			ms: .001
+		}[unit[2] ?? "s"];
+	}
+	const parts = /^(?:(\d+):)?(\d+):(\d+(?:\.\d+)?)$/.exec(s);
+	if (parts) return Number(parts[1] ?? 0) * 3600 + Number(parts[2]) * 60 + Number(parts[3]);
+	return null;
+}
+function styleProps(style) {
+	const out = {};
+	for (const decl of (style ?? "").split(";")) {
+		const i = decl.indexOf(":");
+		if (i > 0) out[decl.slice(0, i).trim()] = decl.slice(i + 1).trim();
+	}
+	return out;
+}
+function withoutProp(style, name) {
+	return style.split(";").filter((d) => d.split(":")[0]?.trim() !== name).join(";");
+}
+function clone(node) {
+	return {
+		name: node.name,
+		attrs: { ...node.attrs },
+		children: node.children.map((c) => typeof c === "string" ? c : clone(c))
+	};
+}
+function strip(node) {
+	return {
+		...node,
+		children: node.children.filter((c) => typeof c === "string" || !ANIMATIONS.has(c.name)).map((c) => typeof c === "string" ? c : strip(c))
+	};
+}
+function fmt(v) {
+	return String(Math.round(v * 1e3) / 1e3);
+}
+// src/overlays/svg-length.ts
+/**
+* Stroke lengths of SVG shapes in their own user units, for drawing strokes
+* progressively with dashes. Skia ignores `pathLength`, so the lengths are
+* measured here and the dashes written in absolute units. Curves and arcs are
+* flattened into short segments; the result is close, not exact, which is
+* enough to hide and reveal a stroke.
+*/
+const SEGMENTS = 24;
+/** The length of the outline a shape element strokes, or null for elements with no outline of their own. */
+function shapeLength(name, a) {
+	const n = (k, d = 0) => {
+		const v = parseFloat(a[k] ?? "");
+		return Number.isFinite(v) ? v : d;
+	};
+	switch (name) {
+		case "path": return a.d ? pathLength(a.d) : 0;
+		case "line": return Math.hypot(n("x2") - n("x1"), n("y2") - n("y1"));
+		case "polyline": return polyLength(points(a.points ?? ""), false);
+		case "polygon": return polyLength(points(a.points ?? ""), true);
+		case "circle": return 2 * Math.PI * n("r");
+		case "ellipse": return ellipseLength(n("rx"), n("ry"));
+		case "rect": {
+			const w = n("width"), h = n("height");
+			let rx = Math.min(n("rx", n("ry")), w / 2), ry = Math.min(n("ry", n("rx")), h / 2);
+			if (rx <= 0 || ry <= 0) rx = ry = 0;
+			return 2 * (w - 2 * rx) + 2 * (h - 2 * ry) + ellipseLength(rx, ry);
+		}
+		default: return null;
+	}
+}
+/** Ramanujan's approximation of an ellipse's circumference. */
+function ellipseLength(rx, ry) {
+	if (rx <= 0 || ry <= 0) return 0;
+	return Math.PI * (3 * (rx + ry) - Math.sqrt((3 * rx + ry) * (rx + 3 * ry)));
+}
+function points(list) {
+	const v = list.trim().split(/[\s,]+/).map(Number).filter((x) => Number.isFinite(x));
+	const out = [];
+	for (let i = 0; i + 1 < v.length; i += 2) out.push([v[i], v[i + 1]]);
+	return out;
+}
+function polyLength(p, closed) {
+	let len = 0;
+	for (let i = 1; i < p.length; i++) len += dist(p[i - 1], p[i]);
+	if (closed && p.length > 2) len += dist(p[p.length - 1], p[0]);
+	return len;
+}
+function dist(a, b) {
+	return Math.hypot(b[0] - a[0], b[1] - a[1]);
+}
+/** The length of an SVG path's outline, every command included. */
+function pathLength(d) {
+	const tokens = d.match(/[a-zA-Z]|[-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?/g) ?? [];
+	let i = 0;
+	let cmd = "";
+	let x = 0, y = 0, sx = 0, sy = 0;
+	let cx = 0, cy = 0;
+	let prev = "";
+	let len = 0;
+	const num = () => Number(tokens[i++]);
+	const more = () => i < tokens.length && !/^[a-zA-Z]$/.test(tokens[i]);
+	const line = (nx, ny) => {
+		len += Math.hypot(nx - x, ny - y);
+		x = nx;
+		y = ny;
+	};
+	const cubic = (x1, y1, x2, y2, nx, ny) => {
+		let px = x, py = y;
+		for (let s = 1; s <= SEGMENTS; s++) {
+			const t = s / SEGMENTS, u = 1 - t;
+			const qx = u * u * u * x + 3 * u * u * t * x1 + 3 * u * t * t * x2 + t * t * t * nx;
+			const qy = u * u * u * y + 3 * u * u * t * y1 + 3 * u * t * t * y2 + t * t * t * ny;
+			len += Math.hypot(qx - px, qy - py);
+			px = qx;
+			py = qy;
+		}
+		cx = x2;
+		cy = y2;
+		x = nx;
+		y = ny;
+	};
+	const quad = (x1, y1, nx, ny) => {
+		let px = x, py = y;
+		for (let s = 1; s <= SEGMENTS; s++) {
+			const t = s / SEGMENTS, u = 1 - t;
+			const qx = u * u * x + 2 * u * t * x1 + t * t * nx, qy = u * u * y + 2 * u * t * y1 + t * t * ny;
+			len += Math.hypot(qx - px, qy - py);
+			px = qx;
+			py = qy;
+		}
+		cx = x1;
+		cy = y1;
+		x = nx;
+		y = ny;
+	};
+	while (i < tokens.length) {
+		const t = tokens[i];
+		if (/^[a-zA-Z]$/.test(t)) {
+			cmd = t;
+			i++;
+		} else if (!cmd) {
+			i++;
+			continue;
+		}
+		const rel = cmd === cmd.toLowerCase();
+		const ox = rel ? x : 0, oy = rel ? y : 0;
+		switch (cmd.toUpperCase()) {
+			case "M":
+				if (!more()) break;
+				x = ox + num();
+				y = oy + num();
+				sx = x;
+				sy = y;
+				cmd = rel ? "l" : "L";
+				break;
+			case "L":
+				if (more()) line(ox + num(), oy + num());
+				break;
+			case "H":
+				if (more()) line(ox + num(), y);
+				break;
+			case "V":
+				if (more()) line(x, oy + num());
+				break;
+			case "C":
+				if (more()) cubic(ox + num(), oy + num(), ox + num(), oy + num(), ox + num(), oy + num());
+				break;
+			case "S":
+				if (more()) {
+					const [x1, y1] = /[CS]/i.test(prev) ? [2 * x - cx, 2 * y - cy] : [x, y];
+					cubic(x1, y1, ox + num(), oy + num(), ox + num(), oy + num());
+				}
+				break;
+			case "Q":
+				if (more()) quad(ox + num(), oy + num(), ox + num(), oy + num());
+				break;
+			case "T":
+				if (more()) {
+					const [x1, y1] = /[QT]/i.test(prev) ? [2 * x - cx, 2 * y - cy] : [x, y];
+					quad(x1, y1, ox + num(), oy + num());
+				}
+				break;
+			case "A":
+				if (more()) {
+					const rx = Math.abs(num()), ry = Math.abs(num()), phi = num(), large = num(), sweep = num();
+					const nx = ox + num(), ny = oy + num();
+					len += arcLength(x, y, rx, ry, phi, large !== 0, sweep !== 0, nx, ny);
+					x = nx;
+					y = ny;
+				}
+				break;
+			case "Z":
+				line(sx, sy);
+				break;
+			default: i++;
+		}
+		prev = cmd;
+		if (cmd.toUpperCase() === "Z") cmd = "";
+	}
+	return len;
+}
+/** An elliptical arc from the endpoint form (SVG implementation notes, F.6.5), flattened. */
+function arcLength(x1, y1, rx, ry, phiDeg, large, sweep, x2, y2) {
+	if (rx === 0 || ry === 0) return Math.hypot(x2 - x1, y2 - y1);
+	const phi = phiDeg * Math.PI / 180, cos = Math.cos(phi), sin = Math.sin(phi);
+	const dx = (x1 - x2) / 2, dy = (y1 - y2) / 2;
+	const x1p = cos * dx + sin * dy, y1p = -sin * dx + cos * dy;
+	const lambda = x1p * x1p / (rx * rx) + y1p * y1p / (ry * ry);
+	if (lambda > 1) {
+		rx *= Math.sqrt(lambda);
+		ry *= Math.sqrt(lambda);
+	}
+	const num = rx * rx * ry * ry - rx * rx * y1p * y1p - ry * ry * x1p * x1p;
+	const den = rx * rx * y1p * y1p + ry * ry * x1p * x1p;
+	const coef = (large === sweep ? -1 : 1) * Math.sqrt(Math.max(0, num / den));
+	const cxp = coef * rx * y1p / ry, cyp = -coef * ry * x1p / rx;
+	const angle = (ux, uy, vx, vy) => Math.atan2(ux * vy - uy * vx, ux * vx + uy * vy);
+	const t1 = angle(1, 0, (x1p - cxp) / rx, (y1p - cyp) / ry);
+	let dt = angle((x1p - cxp) / rx, (y1p - cyp) / ry, (-x1p - cxp) / rx, (-y1p - cyp) / ry);
+	if (!sweep && dt > 0) dt -= 2 * Math.PI;
+	if (sweep && dt < 0) dt += 2 * Math.PI;
+	const cx = cos * cxp - sin * cyp + (x1 + x2) / 2, cy = sin * cxp + cos * cyp + (y1 + y2) / 2;
+	let len = 0, px = x1, py = y1;
+	const steps = Math.max(SEGMENTS, Math.ceil(Math.abs(dt) / (2 * Math.PI) * SEGMENTS * 4));
+	for (let s = 1; s <= steps; s++) {
+		const t = t1 + dt * s / steps;
+		const ex = rx * Math.cos(t), ey = ry * Math.sin(t);
+		const qx = cos * ex - sin * ey + cx, qy = sin * ex + cos * ey + cy;
+		len += Math.hypot(qx - px, qy - py);
+		px = qx;
+		py = qy;
+	}
+	return len;
+}
+// src/overlays/svg.ts
+const SVG_NS = "http://www.w3.org/2000/svg";
+const XLINK_NS = "http://www.w3.org/1999/xlink";
+/** Elements that run code, embed other documents or reach outside the file. */
+const DROPPED = /* @__PURE__ */ new Set([
+	"script",
+	"foreignObject",
+	"iframe",
+	"object",
+	"embed",
+	"audio",
+	"video",
+	"canvas",
+	"handler",
+	"listener"
+]);
+const DEFAULT_SIZE = {
+	width: 300,
+	height: 150
+};
+const PARSE_CACHE = 64;
+const parsed = /* @__PURE__ */ new Map();
+/** Parses SVG markup into a small tree; the result is cached by the markup string. */
+function parseSvg(markup) {
+	const hit = parsed.get(markup);
+	if (hit) return hit;
+	const result = parse(markup);
+	parsed.set(markup, result);
+	if (parsed.size > PARSE_CACHE) parsed.delete(parsed.keys().next().value);
+	return result;
+}
+const animatedRoots = /* @__PURE__ */ new WeakMap();
+/** Whether markup animates (SMIL or CSS animations): such markup is prepared for each moment, the rest once. */
+function svgAnimated(markup) {
+	const root = parseSvg(markup).root;
+	if (!root) return false;
+	let hit = animatedRoots.get(root);
+	if (hit === void 0) {
+		hit = hasSmil(root);
+		animatedRoots.set(root, hit);
+	}
+	return hit;
+}
+/** The size an SVG asks for: its width and height, else its viewBox, else the HTML default of 300 by 150. */
+function svgIntrinsicSize(markup, viewBox) {
+	const root = parseSvg(markup).root;
+	const box = viewBox ?? (root ? viewBoxOf(root) : null);
+	const w = root ? length(root.attrs.width) : null, h = root ? length(root.attrs.height) : null;
+	if (w !== null && h !== null) return {
+		width: w,
+		height: h
+	};
+	if (box) {
+		if (w !== null) return {
+			width: w,
+			height: w * box.height / box.width
+		};
+		if (h !== null) return {
+			width: h * box.width / box.height,
+			height: h
+		};
+		return {
+			width: box.width,
+			height: box.height
+		};
+	}
+	return {
+		width: w ?? DEFAULT_SIZE.width,
+		height: h ?? DEFAULT_SIZE.height
+	};
+}
+const PREPARED_CACHE = 128;
+const prepared = /* @__PURE__ */ new Map();
+/** The markup to draw for an SVG element in a box of `options.box` pixels. Results are cached by markup and options. */
+function prepareSvg(markup, options) {
+	const key = `${JSON.stringify(options)}\u0000${markup}`;
+	const hit = prepared.get(key);
+	if (hit) return hit;
+	const result = build(markup, options);
+	prepared.set(key, result);
+	if (prepared.size > PREPARED_CACHE) prepared.delete(prepared.keys().next().value);
+	return result;
+}
+function build(markup, options) {
+	const { root: parsedRoot, warnings: parseWarnings } = parseSvg(markup);
+	const warnings = [...parseWarnings];
+	if (!parsedRoot) return {
+		markup: "",
+		animated: false,
+		warnings
+	};
+	const animated = svgAnimated(markup);
+	const root = animated ? freezeSmil(parsedRoot, options.time ?? 0, warnings) : parsedRoot;
+	const prefix = options.idPrefix ? `${options.idPrefix.replace(/[^A-Za-z0-9_-]/g, "_")}-` : "";
+	const draw = options.draw === null || options.draw === void 0 || options.draw >= 1 ? null : Math.max(0, options.draw);
+	const ctx = {
+		prefix,
+		tokens: options.tokens ?? {},
+		warnings,
+		unknownTokens: /* @__PURE__ */ new Set(),
+		draw,
+		inDefs: false
+	};
+	const body = root.children.map((c) => clean(c, ctx)).filter((c) => c !== null);
+	const box = options.viewBox ?? viewBoxOf(root) ?? {
+		minX: 0,
+		minY: 0,
+		...svgIntrinsicSize(markup)
+	};
+	const bleed = Math.max(0, options.bleed ?? 0);
+	const bx = bleed * (box.width / Math.max(1e-9, options.box.width)), by = bleed * (box.height / Math.max(1e-9, options.box.height));
+	const rootAttrs = {};
+	for (const [k, v] of Object.entries(root.attrs)) {
+		if (k === "width" || k === "height" || k === "viewBox" || k === "preserveAspectRatio" || k === "x" || k === "y" || k.startsWith("xmlns")) continue;
+		const kept = cleanAttr(k, v, ctx);
+		if (kept !== null) rootAttrs[k] = kept;
+	}
+	const head = {
+		xmlns: SVG_NS,
+		"xmlns:xlink": XLINK_NS,
+		width: num$1(options.box.width + 2 * bleed),
+		height: num$1(options.box.height + 2 * bleed),
+		viewBox: `${num$1(box.minX - bx)} ${num$1(box.minY - by)} ${num$1(box.width + 2 * bx)} ${num$1(box.height + 2 * by)}`,
+		preserveAspectRatio: options.preserveAspectRatio ?? root.attrs.preserveAspectRatio ?? "xMidYMid meet"
+	};
+	let children = body;
+	const filter = colorFilter(options.color, `${prefix}cc-color`, {
+		minX: box.minX - bx,
+		minY: box.minY - by,
+		width: box.width + 2 * bx,
+		height: box.height + 2 * by
+	});
+	if (filter) children = [{
+		name: "defs",
+		attrs: {},
+		children: [filter]
+	}, {
+		name: "g",
+		attrs: { filter: `url(#${prefix}cc-color)` },
+		children: body
+	}];
+	return {
+		markup: serialize({
+			name: "svg",
+			attrs: {
+				...head,
+				...rootAttrs
+			},
+			children
+		}),
+		animated,
+		warnings
+	};
+}
+const DEFINITIONS = /* @__PURE__ */ new Set([
+	"defs",
+	"clipPath",
+	"mask",
+	"marker",
+	"pattern",
+	"symbol",
+	"linearGradient",
+	"radialGradient",
+	"filter"
+]);
+const FILLED = /* @__PURE__ */ new Set([
+	"path",
+	"line",
+	"polyline",
+	"polygon",
+	"circle",
+	"ellipse",
+	"rect",
+	"text"
+]);
+function clean(node, ctx) {
+	if (typeof node === "string") return node;
+	if (DROPPED.has(node.name)) {
+		ctx.warnings.push(`<${node.name}> is not drawn and was removed`);
+		return null;
+	}
+	const attrs = {};
+	for (const [k, v] of Object.entries(node.attrs)) {
+		const kept = cleanAttr(k, v, ctx);
+		if (kept !== null) attrs[k] = kept;
+	}
+	const inner = DEFINITIONS.has(node.name) && !ctx.inDefs ? {
+		...ctx,
+		inDefs: true
+	} : ctx;
+	const children = node.children.map((c) => node.name === "style" && typeof c === "string" ? cleanStyleSheet(c, inner) : clean(c, inner)).filter((c) => c !== null);
+	if (ctx.draw !== null && !ctx.inDefs && FILLED.has(node.name)) drawProgress(node.name, attrs, ctx.draw);
+	if (node.name === "a") return {
+		name: "g",
+		attrs: Object.fromEntries(Object.entries(attrs).filter(([k]) => k !== "href" && k !== "xlink:href" && k !== "target")),
+		children
+	};
+	return {
+		name: node.name,
+		attrs,
+		children
+	};
+}
+/** Hides the stroke beyond `draw` of its length with a dash, and fades the fill in over the last 40%. */
+function drawProgress(name, attrs, draw) {
+	const style = attrs.style ?? "";
+	const stroke = attrs.stroke ?? style.match(/(?:^|;)\s*stroke\s*:\s*([^;]+)/)?.[1]?.trim();
+	if (stroke && stroke !== "none") {
+		const len = shapeLength(name, attrs);
+		if (len !== null && len > 0) {
+			attrs["stroke-dasharray"] = `${num$1(len)} ${num$1(len)}`;
+			attrs["stroke-dashoffset"] = num$1(len * (1 - draw));
+		}
+	}
+	const fade = Math.max(0, Math.min(1, (draw - .6) / .4));
+	const own = parseFloat(attrs["fill-opacity"] ?? "1");
+	attrs["fill-opacity"] = num$1((Number.isFinite(own) ? own : 1) * fade);
+}
+function cleanAttr(name, value, ctx) {
+	if (/^on/i.test(name)) return null;
+	if (name.startsWith("xmlns")) return null;
+	if (name === "href" || name === "xlink:href") {
+		const v = value.trim();
+		if (v.startsWith("#")) return `#${ctx.prefix}${v.slice(1)}`;
+		if (/^data:image\/(png|jpe?g|gif|webp);/i.test(v)) return v;
+		ctx.warnings.push(`a link to "${v.slice(0, 40)}" was removed: only #ids and embedded raster images are drawn`);
+		return null;
+	}
+	if (name === "id") return `${ctx.prefix}${value}`;
+	let v = withTokens(value, ctx);
+	if (name === "style") v = cleanStyleSheet(v, ctx);
+	else v = prefixUrls(v, ctx.prefix);
+	return v;
+}
+/** Drops imports and outside URLs from CSS, prefixes `url(#id)` and fills in tokens. */
+function cleanStyleSheet(css, ctx) {
+	let out = withoutCssAnimation(withTokens(css, ctx).replace(/@import[^;]*;?/gi, ""), ctx);
+	out = out.replace(/url\(\s*(['"]?)([^'")]+)\1\s*\)/gi, (_m, _q, target) => {
+		const t = target.trim();
+		if (t.startsWith("#")) return `url(#${ctx.prefix}${t.slice(1)})`;
+		if (/^data:image\/(png|jpe?g|gif|webp);/i.test(t)) return `url(${t})`;
+		return "none";
+	});
+	return ctx.prefix ? out.replace(/#([A-Za-z_][\w-]*)(?=[^{}]*\{)/g, `#${ctx.prefix}$1`) : out;
+}
+/**
+* CSS animations are removed: the browser would play them on its own clock, not the video's, so the element is drawn
+* as it is styled without them.
+*/
+function withoutCssAnimation(css, ctx) {
+	if (!/@keyframes|animation/i.test(css)) return css;
+	let out = "", i = 0;
+	const keyframes = /@(-webkit-)?keyframes\b/gi;
+	for (let m = keyframes.exec(css); m; m = keyframes.exec(css)) {
+		out += css.slice(i, m.index);
+		const open = css.indexOf("{", m.index);
+		if (open < 0) {
+			i = css.length;
+			break;
+		}
+		let depth = 0, j = open;
+		for (; j < css.length; j++) if (css[j] === "{") depth++;
+		else if (css[j] === "}" && --depth === 0) break;
+		i = j + 1;
+		keyframes.lastIndex = i;
+	}
+	out += css.slice(i);
+	const stripped = out.replace(/(^|[;{\s])animation(-[a-z-]+)?\s*:[^;}]*;?/gi, "$1");
+	if (stripped !== css && !ctx.warnings.includes(CSS_ANIMATION_WARNING)) ctx.warnings.push(CSS_ANIMATION_WARNING);
+	return stripped;
+}
+const CSS_ANIMATION_WARNING = "CSS animations are not played; the SVG is drawn without them (use SMIL <animate>, which is)";
+function prefixUrls(value, prefix) {
+	if (!prefix || !value.includes("url(")) return value;
+	return value.replace(/url\(\s*(['"]?)#([^'")]+)\1\s*\)/g, (_m, _q, id) => `url(#${prefix}${id})`);
+}
+function withTokens(value, ctx) {
+	if (!value.includes("$") && !value.includes("--cc-")) return value;
+	const look = (name, whole) => {
+		const v = ctx.tokens[name];
+		if (v !== void 0) return v;
+		if (!ctx.unknownTokens.has(name)) {
+			ctx.unknownTokens.add(name);
+			ctx.warnings.push(`unknown token "${name}" is left as written`);
+		}
+		return whole;
+	};
+	return value.replace(/var\(\s*--cc-([A-Za-z][\w-]*)\s*(?:,\s*([^)]*))?\)/g, (whole, name, fallback) => ctx.tokens[name] ?? (fallback?.trim() || look(name, whole))).replace(/\$([A-Za-z][\w-]*)/g, (whole, name) => look(name, whole));
+}
+/** `replace` paints every drawn pixel in the colour; `tint` keeps the shading and colours it. `opacity` is how much. */
+function colorFilter(color, id, region) {
+	if (!color || color.mode === "none" || !color.tint) return null;
+	const amount = Math.max(0, Math.min(1, color.opacity ?? 1));
+	const steps = (color.mode === "replace" ? {
+		name: "g",
+		attrs: {},
+		children: [{
+			name: "feFlood",
+			attrs: {
+				"flood-color": color.tint,
+				result: "flood"
+			},
+			children: []
+		}, {
+			name: "feComposite",
+			attrs: {
+				in: "flood",
+				in2: "SourceAlpha",
+				operator: "in",
+				result: "coloured"
+			},
+			children: []
+		}]
+	} : (() => {
+		const [r, g, b] = rgb(color.tint);
+		const row = (k) => `${num$1(.2126 * k)} ${num$1(.7152 * k)} ${num$1(.0722 * k)} 0 0`;
+		return {
+			name: "g",
+			attrs: {},
+			children: [{
+				name: "feColorMatrix",
+				attrs: {
+					in: "SourceGraphic",
+					type: "matrix",
+					values: `${row(r)}  ${row(g)}  ${row(b)}  0 0 0 1 0`,
+					result: "coloured"
+				},
+				children: []
+			}]
+		};
+	})()).children.slice();
+	if (amount < 1) steps.push({
+		name: "feComposite",
+		attrs: {
+			in: "coloured",
+			in2: "SourceGraphic",
+			operator: "arithmetic",
+			k1: "0",
+			k2: num$1(amount),
+			k3: num$1(1 - amount),
+			k4: "0"
+		},
+		children: []
+	});
+	return {
+		name: "filter",
+		attrs: {
+			id,
+			filterUnits: "userSpaceOnUse",
+			x: num$1(region.minX),
+			y: num$1(region.minY),
+			width: num$1(region.width),
+			height: num$1(region.height),
+			"color-interpolation-filters": "sRGB"
+		},
+		children: steps
+	};
+}
+/** A CSS colour as 0..1 channels; named colours other than black and white count as white. */
+function rgb(color) {
+	const c = color.trim().toLowerCase();
+	const hex = c.match(/^#([0-9a-f]{3,8})$/);
+	if (hex) {
+		const h = hex[1];
+		const full = h.length <= 4 ? h.split("").map((x) => x + x).join("") : h;
+		return [
+			parseInt(full.slice(0, 2), 16) / 255,
+			parseInt(full.slice(2, 4), 16) / 255,
+			parseInt(full.slice(4, 6), 16) / 255
+		];
+	}
+	const fn = c.match(/^rgba?\(\s*([\d.]+)%?[\s,]+([\d.]+)%?[\s,]+([\d.]+)%?/);
+	if (fn) return [
+		Number(fn[1]) / 255,
+		Number(fn[2]) / 255,
+		Number(fn[3]) / 255
+	];
+	return c === "black" ? [
+		0,
+		0,
+		0
+	] : [
+		1,
+		1,
+		1
+	];
+}
+function viewBoxOf(node) {
+	const raw = node.attrs.viewBox;
+	if (!raw) return null;
+	const n = raw.trim().split(/[\s,]+/).map(Number);
+	if (n.length !== 4 || n.some((x) => !Number.isFinite(x)) || n[2] <= 0 || n[3] <= 0) return null;
+	return {
+		minX: n[0],
+		minY: n[1],
+		width: n[2],
+		height: n[3]
+	};
+}
+/** A length attribute in user units; percentages and font-relative units have no size of their own. */
+function length(v) {
+	if (!v) return null;
+	const m = v.trim().match(/^([\d.]+)(px)?$/);
+	return m ? Number(m[1]) : null;
+}
+function parse(markup) {
+	const warnings = [];
+	const parser = new SaxesParser({ xmlns: false });
+	const stack = [];
+	let root = null;
+	parser.on("opentag", (tag) => {
+		const node = {
+			name: tag.name,
+			attrs: { ...tag.attributes },
+			children: []
+		};
+		const parent = stack[stack.length - 1];
+		if (parent) parent.children.push(node);
+		else if (!root) root = node;
+		stack.push(node);
+	});
+	parser.on("closetag", () => {
+		stack.pop();
+	});
+	const text = (t) => {
+		const parent = stack[stack.length - 1];
+		if (parent && t.length > 0) parent.children.push(t);
+	};
+	parser.on("text", text);
+	parser.on("cdata", text);
+	parser.on("error", (e) => {
+		throw e;
+	});
+	try {
+		parser.write(markup).close();
+	} catch (error) {
+		warnings.push(`the SVG could not be read: ${error instanceof Error ? error.message.split("\n")[0] : String(error)}`);
+		return {
+			root: null,
+			warnings
+		};
+	}
+	const found = root;
+	if (found?.name !== "svg") {
+		warnings.push("the markup is not an <svg> element");
+		return {
+			root: null,
+			warnings
+		};
+	}
+	return {
+		root: found,
+		warnings
+	};
+}
+function serialize(node) {
+	if (typeof node === "string") return escapeText(node);
+	const attrs = Object.entries(node.attrs).map(([k, v]) => ` ${k}="${escapeAttr(v)}"`).join("");
+	if (node.children.length === 0) return `<${node.name}${attrs}/>`;
+	return `<${node.name}${attrs}>${node.children.map(serialize).join("")}</${node.name}>`;
+}
+function escapeText(t) {
+	return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeAttr(t) {
+	return escapeText(t).replace(/"/g, "&quot;");
+}
+function num$1(v) {
+	return String(Math.round(v * 1e3) / 1e3);
+}
+// src/overlays/graphic.tsx
+/**
+* How a `<Graphic>` draws at the element's time: the kind's art through the
+* same SVG preparation as `<Svg>` (so `draw` and the theme apply), and its
+* labels, which both surfaces lay out as text the way they lay out titles.
+*/
+function graphicDrawing(p) {
+	const props = p.placement.props;
+	return drawingOf(p, props, graphicSize(props, p.state.composition));
+}
+const iconShape = z.strictObject(GRAPHIC_KINDS.icon.shape);
+/** A sticker whose `src` is `icon:name`, drawn as the icon graphic in the sticker's square. Null for other stickers. */
+function iconStickerDrawing(p, side) {
+	const src = String(p.placement.props.src ?? "");
+	if (!src.startsWith("icon:") || !isIcon(src.slice(5))) return null;
+	return drawingOf(p, {
+		kind: "icon",
+		...iconShape.parse({ name: src.slice(5) })
+	}, {
+		width: side,
+		height: side
+	});
+}
+function drawingOf(p, props, size) {
+	const layout = overlayLayout(p, size, "none", true);
+	const box = {
+		width: layout.rect.w,
+		height: layout.rect.h
+	};
+	const drawn = drawGraphic(props, {
+		...box,
+		t: p.time - p.placement.start,
+		duration: p.placement.duration,
+		id: p.placement.id,
+		tokens: p.state.theme?.tokens ?? {}
+	});
+	return {
+		layout,
+		prepared: prepareSvg(drawn.svg, {
+			box,
+			idPrefix: p.placement.id,
+			draw: layout.draw
+		}),
+		labels: drawn.labels
+	};
+}
+/** A graphic's labels as positioned text, laid out by the DOM. */
+function graphicLabels(labels) {
+	return labels.map((l, i) => /* @__PURE__ */ jsx("div", {
+		style: {
+			position: "absolute",
+			left: l.x,
+			top: l.y,
+			width: l.w,
+			height: l.h,
+			display: "flex",
+			alignItems: l.valign === "top" ? "flex-start" : l.valign === "bottom" ? "flex-end" : "center",
+			justifyContent: l.align === "left" ? "flex-start" : l.align === "right" ? "flex-end" : "center",
+			textAlign: l.align,
+			fontFamily: l.font,
+			fontSize: l.size,
+			fontWeight: l.weight,
+			fontStyle: l.italic ? "italic" : "normal",
+			color: l.color,
+			lineHeight: l.lineHeight ?? 1.2,
+			letterSpacing: l.letterSpacing ?? 0,
+			whiteSpace: "pre-wrap"
+		},
+		children: l.text
+	}, i));
+}
+// src/react/elements/Graphic.tsx
+/** A built-in graphic: the kind's art from the same markup as the export, its labels as text above it. */
+function Graphic(p) {
+	const d = graphicDrawing(p);
+	for (const w of d.prepared.warnings) devWarn(`graphic:${p.placement.id}:${w}`, `graphic "${p.placement.id}": ${w}`);
+	return /* @__PURE__ */ jsxs("div", {
+		...dataAttrs(p.placement),
+		style: layoutStyle(d.layout),
+		children: [/* @__PURE__ */ jsx("div", {
+			style: {
+				position: "absolute",
+				left: 0,
+				top: 0,
+				lineHeight: 0
+			},
+			dangerouslySetInnerHTML: { __html: d.prepared.markup }
+		}), graphicLabels(d.labels)]
+	});
+}
+// src/react/hold-animations.ts
+/**
+* Holds the CSS animations under `root` at `seconds` past the layer's start: paused, and seeked there. They then
+* follow the video's clock (play, pause, scrub both ways) and an export captures the same frame twice.
+*
+* Only CSS animations: their zero is the moment their element got the style, which inside a Layer is the layer's
+* start. A Web Animation made with `element.animate()` or by a library keeps its own start and its owner's clock.
+*/
+function holdCssAnimations(root, seconds) {
+	if (!root || typeof root.getAnimations !== "function" || typeof CSSAnimation === "undefined") return;
+	const ms = seconds * 1e3;
+	for (const animation of root.getAnimations({ subtree: true })) {
+		if (!(animation instanceof CSSAnimation)) continue;
+		if (animation.playState !== "paused") animation.pause();
+		if (animation.currentTime !== ms) animation.currentTime = ms;
+	}
+}
+// src/react/elements/Layer.tsx
+/** Arbitrary React inside the composition, driven by `useLayer()` and `useT()` through LayerContext. */
+function Layer(p) {
+	const comp = p.state.composition;
+	const style = overlayStyle(p, {
+		width: comp.width,
+		height: comp.height
+	});
+	const clock = layerClock(p.placement, p.time, comp.fps);
+	const ref = useRef(null);
+	useLayoutEffect(() => {
+		holdCssAnimations(ref.current, clock.elapsed);
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...dataAttrs(p.placement),
+		style,
+		children: /* @__PURE__ */ jsx(LayerContext.Provider, {
+			value: clock,
+			children: typeof p.placement.props.engine === "string" ? /* @__PURE__ */ jsx(Engine, {
+				name: p.placement.props.engine,
+				props: p.placement.props,
+				children: p.interior
+			}) : layerContent(p.interior, p.placement.interior?.props)
+		})
+	});
+}
+/** An engine Layer (`<Three>`, `<Motion>`): drawn by the engine the host installed, with the Layer's resolved props. */
+function Engine({ name, props, children }) {
+	const Draw = layerEngine(name);
+	if (!Draw) {
+		devWarn(`engine:${name}`, `no layer engine "${name}" is installed, so <${name === "three" ? "Three" : name === "motion" ? "Motion" : name}> draws nothing; the host installs it (installFreeCodeLibraries from @cutcraft/graphics/libraries)`);
+		return null;
+	}
+	return /* @__PURE__ */ jsx(Draw, {
+		...props,
+		children
+	});
+}
+// src/overlays/shape.ts
+/** The size a shape draws at, before layout. */
+function shapeSize(p) {
+	return {
+		width: Number(p.placement.props.width ?? 200),
+		height: Number(p.placement.props.height ?? 200)
+	};
+}
+function shapeMarkup(props, size) {
+	const { width: w, height: h } = size;
+	const warnings = [];
+	const defs = [];
+	const attrs = {};
+	const fill = props.fill;
+	if (typeof fill === "string") attrs.fill = fill;
+	else if (!fill) attrs.fill = "#ffffff";
+	else if (fill.type === "none") attrs.fill = "none";
+	else if (fill.type === "gradient" && fill.gradient) {
+		defs.push(gradient("fill", fill.gradient, warnings));
+		attrs.fill = "url(#fill)";
+	} else attrs.fill = fill.color ?? "#ffffff";
+	if (typeof fill === "object" && fill?.opacity !== void 0) attrs["fill-opacity"] = num(fill.opacity);
+	const stroke = props.stroke;
+	if (stroke) {
+		if (stroke.gradient) {
+			defs.push(gradient("stroke", stroke.gradient, warnings));
+			attrs.stroke = "url(#stroke)";
+		} else attrs.stroke = stroke.color;
+		attrs["stroke-width"] = num(stroke.width);
+		if (stroke.opacity !== void 0) attrs["stroke-opacity"] = num(stroke.opacity);
+		if (stroke.dashArray?.length) attrs["stroke-dasharray"] = stroke.dashArray.map(num).join(" ");
+		if (stroke.dashOffset !== void 0) attrs["stroke-dashoffset"] = num(stroke.dashOffset);
+		if (stroke.lineCap) attrs["stroke-linecap"] = stroke.lineCap;
+		if (stroke.lineJoin) attrs["stroke-linejoin"] = stroke.lineJoin;
+	}
+	const shadows = props.shadows ?? (props.shadow ? [props.shadow] : []);
+	const outer = shadows.filter((s) => !s.inset);
+	if (outer.length < shadows.length) warnings.push("inset shadows are not drawn");
+	const strokeReach = stroke ? stroke.width / 2 + 1 : 0;
+	const shadowReach = outer.reduce((m, s) => Math.max(m, Math.max(Math.abs(s.x ?? 0), Math.abs(s.y ?? 0)) + (s.blur ?? 0) * 1.5 + Math.max(0, s.spread ?? 0)), 0);
+	const bleed = Math.ceil(Math.max(strokeReach, shadowReach + strokeReach));
+	if (outer.length > 0) {
+		defs.push(shadowFilter(outer, {
+			x: -bleed,
+			y: -bleed,
+			w: w + 2 * bleed,
+			h: h + 2 * bleed
+		}));
+		attrs.filter = "url(#shadow)";
+	}
+	const body = geometry(String(props.shape ?? "rectangle"), w, h, props, attrs);
+	return {
+		markup: `<svg xmlns="http://www.w3.org/2000/svg" width="${num(w)}" height="${num(h)}" viewBox="0 0 ${num(w)} ${num(h)}">${defs.length ? `<defs>${defs.join("")}</defs>` : ""}${body}</svg>`,
+		size,
+		bleed,
+		warnings
+	};
+}
+/** How a `<Shape>` element draws at its time: its layout, and the markup with entrance drawing applied. */
+function shapeDrawing(p, tokens) {
+	const size = shapeSize(p);
+	const layout = overlayLayout(p, size, "none", true);
+	const shape = shapeMarkup(p.placement.props, size);
+	const prepared = prepareSvg(shape.markup, {
+		box: {
+			width: layout.rect.w,
+			height: layout.rect.h
+		},
+		idPrefix: p.placement.id,
+		draw: layout.draw,
+		bleed: shape.bleed,
+		tokens
+	});
+	return {
+		layout,
+		prepared: shape.warnings.length ? {
+			...prepared,
+			warnings: [...shape.warnings, ...prepared.warnings]
+		} : prepared,
+		bleed: shape.bleed
+	};
+}
+function geometry(shape, w, h, props, a) {
+	const el = (name, own) => {
+		const all = {
+			...Object.fromEntries(Object.entries(own).map(([k, v]) => [k, typeof v === "number" ? num(v) : v])),
+			...a
+		};
+		return `<${name}${Object.entries(all).map(([k, v]) => ` ${k}="${escapeXml(v)}"`).join("")}/>`;
+	};
+	const pts = (list) => list.map(([x, y]) => `${num(x)},${num(y)}`).join(" ");
+	switch (shape) {
+		case "circle": return el("circle", {
+			cx: w / 2,
+			cy: h / 2,
+			r: Math.min(w, h) / 2
+		});
+		case "ellipse": return el("ellipse", {
+			cx: w / 2,
+			cy: h / 2,
+			rx: w / 2,
+			ry: h / 2
+		});
+		case "triangle": return el("polygon", { points: pts([
+			[w / 2, 0],
+			[w, h],
+			[0, h]
+		]) });
+		case "line":
+			if (!a.stroke || a.stroke === "none") {
+				a.stroke = a.fill ?? "#ffffff";
+				a["stroke-width"] ??= "4";
+			}
+			return el("line", {
+				x1: 0,
+				y1: h / 2,
+				x2: w,
+				y2: h / 2
+			});
+		case "arrow": {
+			const head = Math.min(h, w * .3);
+			return el("polygon", { points: pts([
+				[0, h * .35],
+				[w - head, h * .35],
+				[w - head, 0],
+				[w, h / 2],
+				[w - head, h],
+				[w - head, h * .65],
+				[0, h * .65]
+			]) });
+		}
+		case "polygon": return el("polygon", { points: pts((props.points ?? []).map((q) => [q.x * w, q.y * h])) });
+		case "star": {
+			const n = Number(props.starPoints ?? 5), inner = Number(props.innerRadius ?? .5);
+			const R = Math.min(w, h) / 2;
+			const list = [];
+			for (let i = 0; i < n * 2; i++) {
+				const rad = i % 2 === 0 ? R : R * inner;
+				const angle = -Math.PI / 2 + i * Math.PI / n;
+				list.push([w / 2 + rad * Math.cos(angle), h / 2 + rad * Math.sin(angle)]);
+			}
+			return el("polygon", { points: pts(list) });
+		}
+		case "path": return el("path", { d: (props.points ?? []).map((q, i) => `${i === 0 ? "M" : "L"}${num(q.x * w)} ${num(q.y * h)}`).join(" ") });
+		default: {
+			const radii = props.cornerRadii;
+			if (radii) return el("path", { d: roundedRect$1(w, h, radii) });
+			const r = Number(props.cornerRadius ?? 0);
+			return el("rect", {
+				x: 0,
+				y: 0,
+				width: w,
+				height: h,
+				...r > 0 ? {
+					rx: r,
+					ry: r
+				} : {}
+			});
+		}
+	}
+}
+/** A rectangle with its own radius at each corner, each clamped to half the shorter side. */
+function roundedRect$1(w, h, r) {
+	const c = (v) => Math.max(0, Math.min(v, w / 2, h / 2));
+	const tl = c(r.topLeft), tr = c(r.topRight), br = c(r.bottomRight), bl = c(r.bottomLeft);
+	return [
+		`M${num(tl)} 0`,
+		`H${num(w - tr)}`,
+		tr ? `A${num(tr)} ${num(tr)} 0 0 1 ${num(w)} ${num(tr)}` : "",
+		`V${num(h - br)}`,
+		br ? `A${num(br)} ${num(br)} 0 0 1 ${num(w - br)} ${num(h)}` : "",
+		`H${num(bl)}`,
+		bl ? `A${num(bl)} ${num(bl)} 0 0 1 0 ${num(h - bl)}` : "",
+		`V${num(tl)}`,
+		tl ? `A${num(tl)} ${num(tl)} 0 0 1 ${num(tl)} 0` : "",
+		"Z"
+	].filter(Boolean).join(" ");
+}
+/** CSS angles: 0 points up, 90 right; the default, 180, runs top to bottom. */
+function gradient(id, g, warnings) {
+	const stops = [...g.stops].sort((a, b) => a.offset - b.offset).map((s) => `<stop offset="${num(s.offset)}" stop-color="${escapeXml(s.color)}"${s.opacity !== void 0 ? ` stop-opacity="${num(s.opacity)}"` : ""}/>`).join("");
+	if (g.type === "radial") {
+		const c = g.center ?? {
+			x: .5,
+			y: .5
+		};
+		return `<radialGradient id="${id}" cx="${num(c.x)}" cy="${num(c.y)}" r="0.5">${stops}</radialGradient>`;
+	}
+	if (g.type === "conic") warnings.push("conic gradients are drawn as linear ones on shapes");
+	const rad = (g.angle ?? 180) % 360 * Math.PI / 180;
+	const dx = Math.sin(rad), dy = -Math.cos(rad);
+	return `<linearGradient id="${id}" x1="${num(.5 - dx / 2)}" y1="${num(.5 - dy / 2)}" x2="${num(.5 + dx / 2)}" y2="${num(.5 + dy / 2)}">${stops}</linearGradient>`;
+}
+/** Drop shadows under the shape, as SVG filter primitives. */
+function shadowFilter(shadows, region) {
+	const parts = [];
+	const merged = [];
+	shadows.forEach((s, i) => {
+		const src = (s.spread ?? 0) > 0 ? `spread${i}` : "SourceAlpha";
+		if ((s.spread ?? 0) > 0) parts.push(`<feMorphology in="SourceAlpha" operator="dilate" radius="${num(s.spread ?? 0)}" result="spread${i}"/>`);
+		parts.push(`<feGaussianBlur in="${src}" stdDeviation="${num((s.blur ?? 0) / 2)}" result="blur${i}"/>`, `<feOffset in="blur${i}" dx="${num(s.x ?? 0)}" dy="${num(s.y ?? 0)}" result="offset${i}"/>`, `<feFlood flood-color="${escapeXml(s.color)}" result="colour${i}"/>`, `<feComposite in="colour${i}" in2="offset${i}" operator="in" result="shadow${i}"/>`);
+		merged.push(`<feMergeNode in="shadow${i}"/>`);
+	});
+	return `<filter id="shadow" filterUnits="userSpaceOnUse" x="${num(region.x)}" y="${num(region.y)}" width="${num(region.w)}" height="${num(region.h)}" color-interpolation-filters="sRGB">${parts.join("")}<feMerge>${merged.join("")}<feMergeNode in="SourceGraphic"/></feMerge></filter>`;
+}
+function escapeXml(v) {
+	return v.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
+}
+function num(v) {
+	return String(Math.round(v * 1e3) / 1e3);
+}
+// src/react/elements/Shape.tsx
+/** A vector shape, drawn from the same markup as the export, with room around it for its stroke and shadows. */
+function Shape(p) {
+	const d = shapeDrawing(p);
+	for (const w of d.prepared.warnings) devWarn(`shape:${p.placement.id}:${w}`, `shape "${p.placement.id}": ${w}`);
+	return /* @__PURE__ */ jsx("div", {
+		...dataAttrs(p.placement),
+		style: layoutStyle(d.layout),
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				position: "absolute",
+				left: -d.bleed,
+				top: -d.bleed,
+				lineHeight: 0
+			},
+			dangerouslySetInnerHTML: { __html: d.prepared.markup }
+		})
+	});
+}
+// src/overlays/svg-element.ts
+/**
+* How an `<Svg>` element draws its markup: at the size the SVG asks for (or fitted to the
+* composition with `fit`), with its `viewBox`, `preserveAspectRatio` and `color` applied, and
+* `$name` / `var(--cc-name)` filled from `tokens` (by default the composition's theme).
+*/
+function svgDrawing(p, markup, tokens = themeTokens(p.state.theme)) {
+	const props = p.placement.props;
+	const viewBox = props.viewBox;
+	const size = svgIntrinsicSize(markup, viewBox);
+	const fit = props.fit ?? "none";
+	const layout = overlayLayout(p, size, fit, true);
+	return {
+		size,
+		fit,
+		layout,
+		prepared: prepareSvg(markup, {
+			box: {
+				width: layout.rect.w,
+				height: layout.rect.h
+			},
+			viewBox,
+			preserveAspectRatio: props.preserveAspectRatio,
+			color: props.color,
+			tokens,
+			idPrefix: p.placement.id,
+			draw: layout.draw,
+			...svgAnimated(markup) ? { time: p.time - p.placement.start } : {}
+		})
+	};
+}
+const tokensByTheme = /* @__PURE__ */ new WeakMap();
+/** A theme's tokens as SVG attribute values. */
+function themeTokens(theme) {
+	if (!theme) return {};
+	let tokens = tokensByTheme.get(theme);
+	if (!tokens) {
+		tokens = Object.fromEntries(Object.entries(theme.tokens).map(([k, v]) => [k, String(v)]));
+		tokensByTheme.set(theme, tokens);
+	}
+	return tokens;
+}
+// src/react/elements/Svg.tsx
+/** Inline SVG markup, or an SVG asset read as text, prepared the way the export prepares it. */
+function Svg(p) {
+	const props = p.placement.props;
+	const content = typeof props.content === "string" ? props.content : null;
+	const text = useMediaText(content === null && typeof props.src === "string" ? props.src : null);
+	const markup = content ?? text;
+	if (markup === null) return /* @__PURE__ */ jsx("div", {
+		...dataAttrs(p.placement),
+		style: overlayStyle(p, {
+			width: 0,
+			height: 0
+		})
+	});
+	const drawing = svgDrawing(p, markup);
+	for (const w of drawing.prepared.warnings) devWarn(`svg:${p.placement.id}:${w}`, `svg "${p.placement.id}": ${w}`);
+	return /* @__PURE__ */ jsx("div", {
+		...dataAttrs(p.placement),
+		style: {
+			...layoutStyle(drawing.layout),
+			lineHeight: 0
+		},
+		dangerouslySetInnerHTML: { __html: drawing.prepared.markup }
+	});
+}
+/** Resolves an `asset:` reference to an object URL or a plain URL. */
+function useMediaUrl(ref) {
+	const core = usePlayer();
+	const [url, setUrl] = useState(null);
+	useEffect(() => {
+		if (!ref) {
+			setUrl(null);
+			return;
+		}
+		const id = ref.startsWith("asset:") ? ref.slice(6) : ref;
+		let revoke = null;
+		let cancelled = false;
+		core.resolveMedia(id).then((handle) => {
+			if (cancelled) return;
+			if (handle.kind === "url") setUrl(handle.url);
+			else if (handle.kind === "blob") {
+				revoke = URL.createObjectURL(handle.blob);
+				setUrl(revoke);
+			} else setUrl(null);
+		}).catch(() => {
+			if (!cancelled) setUrl(null);
+		});
+		return () => {
+			cancelled = true;
+			if (revoke) URL.revokeObjectURL(revoke);
+		};
+	}, [core, ref]);
+	return url;
+}
+/** Reads an `asset:` reference as text, for markup that is inlined rather than loaded as an image. */
+function useMediaText(ref) {
+	const core = usePlayer();
+	const [text, setText] = useState(null);
+	useEffect(() => {
+		if (!ref) {
+			setText(null);
+			return;
+		}
+		const id = ref.startsWith("asset:") ? ref.slice(6) : ref;
+		let cancelled = false;
+		core.resolveMedia(id).then((handle) => handle.kind === "url" ? fetch(handle.url).then((r) => r.text()) : handle.kind === "blob" ? handle.blob.text() : null).then((t) => {
+			if (!cancelled) setText(t);
+		}).catch(() => {
+			if (!cancelled) setText(null);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [core, ref]);
+	return text;
+}
+// src/react/elements/Sticker.tsx
+/** An image asset, or a Lucide icon for `icon:name`; other `src` schemes (sticker packs) show a labelled placeholder. */
+function Sticker(p) {
+	const props = p.placement.props;
+	const src = String(props.src ?? "");
+	const isAsset = src.startsWith("asset:");
+	const url = useMediaUrl(isAsset ? src : null);
+	const icon = iconStickerDrawing(p, stickerSize(p));
+	if (icon) return /* @__PURE__ */ jsx("div", {
+		...dataAttrs(p.placement),
+		style: {
+			...layoutStyle(icon.layout),
+			lineHeight: 0
+		},
+		dangerouslySetInnerHTML: { __html: icon.prepared.markup }
+	});
+	if (!isAsset) devWarn(`sticker:${p.placement.id}`, `sticker "${src}" on "${p.placement.id}" has no media; showing a placeholder`);
+	const size = stickerSize(p);
+	const style = overlayStyle(p, {
+		width: size,
+		height: size
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...dataAttrs(p.placement),
+		style: {
+			...style,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		children: isAsset && url ? /* @__PURE__ */ jsx("img", {
+			src: url,
+			alt: "",
+			style: {
+				width: "100%",
+				height: "100%",
+				objectFit: "contain"
+			}
+		}) : stickerPlaceholder(String(props.name ?? src))
+	});
+}
+// src/react/elements/Title.tsx
+/** Text title: the file's text content with font props; entrance/exit presets as CSS transforms. */
+function Title(p) {
+	const comp = p.state.composition;
+	return /* @__PURE__ */ jsx("div", {
+		...dataAttrs(p.placement),
+		style: overlayStyle(p, titleBox(p.placement.props, comp)),
+		children: titleContent(p)
+	});
+}
+// src/react/ShaderBox.tsx
+/** Whether this browser draws live DOM into a canvas (HTML-in-Canvas: Chrome with the CanvasDrawElement feature). */
+function htmlInCanvas() {
+	return typeof CanvasRenderingContext2D !== "undefined" && typeof CanvasRenderingContext2D.prototype.drawElementImage === "function";
+}
+/** One WebGL runner per frame size for the whole page: a browser allows only a few WebGL contexts at once. */
+const runners = /* @__PURE__ */ new Map();
+function runnerFor(width, height) {
+	const key = `${width}x${height}`;
+	let runner = runners.get(key);
+	if (!runner) {
+		runner = new ShaderRunner(width, height, defaultCreateCanvas);
+		runners.set(key, runner);
+	}
+	return runner;
+}
+/**
+* An overlay drawn through the effects the file declares (`defineEffect()`): its DOM lives inside a canvas
+* (HTML-in-Canvas), which draws it, runs the shaders over the picture and shows the result. The box is the frame's
+* size, so the overlay keeps its place in it. A browser without HTML-in-Canvas shows the overlay without the effects.
+*/
+function ShaderBox(p) {
+	const canvasRef = useRef(null);
+	const innerRef = useRef(null);
+	const supported = htmlInCanvas();
+	useLayoutEffect(() => {
+		const canvas = canvasRef.current;
+		const inner = innerRef.current;
+		if (!supported || !canvas || !inner) return;
+		const release = holdLayerFrame();
+		let done = false;
+		const draw = () => {
+			if (done) return;
+			done = true;
+			try {
+				const ctx = canvas.getContext("2d");
+				if (!ctx) return;
+				ctx.setTransform(1, 0, 0, 1, 0, 0);
+				ctx.clearRect(0, 0, p.width, p.height);
+				ctx.drawElementImage(inner, 0, 0);
+				const result = runnerFor(p.width, p.height).effects(canvas, p.passes);
+				if (result) {
+					ctx.clearRect(0, 0, p.width, p.height);
+					ctx.drawImage(result, 0, 0);
+				}
+			} catch (error) {
+				devWarn(`shader-error:${p.id}`, `"${p.id}": ${error instanceof Error ? error.message : String(error)}`);
+			} finally {
+				release();
+			}
+		};
+		const request = canvas.requestPaint;
+		canvas.addEventListener("paint", draw, { once: true });
+		if (typeof request === "function") request.call(canvas);
+		const frame = requestAnimationFrame(() => requestAnimationFrame(draw));
+		return () => {
+			canvas.removeEventListener("paint", draw);
+			cancelAnimationFrame(frame);
+			done = true;
+			release();
+		};
+	});
+	if (!supported) {
+		devWarn(`html-in-canvas:${p.id}`, `"${p.id}" has an effect the file declares; this browser has no HTML-in-Canvas (Chrome's CanvasDrawElement feature), so it shows without it (the export draws it)`);
+		return /* @__PURE__ */ jsx(Fragment$1, { children: p.children });
+	}
+	const box = {
+		position: "absolute",
+		left: 0,
+		top: 0,
+		width: p.width,
+		height: p.height
+	};
+	return /* @__PURE__ */ jsx("canvas", {
+		ref: canvasRef,
+		"data-shader-box": p.id,
+		width: p.width,
+		height: p.height,
+		style: {
+			...box,
+			pointerEvents: "none"
+		},
+		layoutsubtree: "",
+		content: "drawable",
+		children: /* @__PURE__ */ jsx("div", {
+			ref: innerRef,
+			style: box,
+			drawable: "",
+			children: p.children
+		})
+	});
+}
+// src/react/DomLayer.tsx
+/** Overlay elements as DOM, one absolutely positioned group per track in compositing order, above the canvas (or, for the backdrop, below it). */
+function DomLayer({ state, interiors, layer = "front" }) {
+	const time = useCompositionTime();
+	const exact = usePlayer().exactTime;
+	const items = visiblePlacements(state, time).filter((v) => OVERLAY_KINDS.has(v.placement.kind));
+	const byTrack = /* @__PURE__ */ new Map();
+	for (const item of items) {
+		const list = byTrack.get(item.track.id) ?? [];
+		list.push(item);
+		byTrack.set(item.track.id, list);
+	}
+	const backdrop = backdropTracks(state);
+	const tracks = state.tracks.filter((t) => backdrop.has(t.id) === (layer === "backdrop"));
+	const captions = layer === "front" ? [...state.items.values()].filter((p) => p.kind === "captions") : [];
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [tracks.map((track) => {
+		const list = byTrack.get(track.id);
+		if (!list) return null;
+		return /* @__PURE__ */ jsx("div", {
+			"data-track": track.id,
+			style: {
+				position: "absolute",
+				inset: 0,
+				zIndex: track.order + 1,
+				pointerEvents: "none"
+			},
+			children: list.map((item) => /* @__PURE__ */ jsx(Element, {
+				item,
+				state,
+				time,
+				exact,
+				interior: interiors.get(item.placement.id)
+			}, item.placement.id))
+		}, track.id);
+	}), captions.map((c) => /* @__PURE__ */ jsx("div", {
+		style: {
+			position: "absolute",
+			inset: 0,
+			zIndex: state.tracks.length + 1,
+			pointerEvents: "none"
+		},
+		children: /* @__PURE__ */ jsx(Captions, {
+			placement: c,
+			state,
+			time
+		})
+	}, c.id))] });
+}
+/** Re-renders only when the element's own relative frame or placement changes. */
+const Element = memo(function Element({ item, state, time, interior }) {
+	const content = elementContent(item, {
+		placement: item.placement,
+		children: item.children,
+		state,
+		time,
+		transition: item.transition
+	}, state, interior);
+	const passes = item.placement.kind === "adjustment" ? void 0 : effectPasses(state, item.children, time - item.placement.start);
+	if (!passes || !content) return content;
+	const { width, height } = state.composition;
+	return /* @__PURE__ */ jsx(ShaderBox, {
+		id: item.placement.id,
+		width,
+		height,
+		passes,
+		children: content
+	});
+}, (a, b) => sameElement(a, b));
+function elementContent(item, props, state, interior) {
+	switch (item.placement.kind) {
+		case "title": return /* @__PURE__ */ jsx(Title, {
+			...props,
+			text: state.tree.byId.get(item.placement.id)?.text ?? ""
+		});
+		case "shape": return /* @__PURE__ */ jsx(Shape, { ...props });
+		case "svg": return /* @__PURE__ */ jsx(Svg, { ...props });
+		case "sticker": return /* @__PURE__ */ jsx(Sticker, { ...props });
+		case "graphic": return /* @__PURE__ */ jsx(Graphic, { ...props });
+		case "layer": return /* @__PURE__ */ jsx(Layer, {
+			...props,
+			interior
+		});
+		case "adjustment": return /* @__PURE__ */ jsx(Adjustment, { ...props });
+		default: return null;
+	}
+}
+/**
+* Whether two renders of an overlay would produce the same DOM. Placements
+* are new objects on every resolve, so compare what matters: timing, the
+* parsed props (referentially stable while untouched), children, the
+* element-relative frame, the transition progress, the text and the
+* composition box.
+*/
+function sameElement(a, b) {
+	const p = a.item.placement, q = b.item.placement;
+	if (p !== q && (p.id !== q.id || p.kind !== q.kind || p.start !== q.start || p.end !== q.end || p.props !== q.props || p.interior !== q.interior)) return false;
+	if (a.interior !== b.interior) return false;
+	if (a.item.children.length !== b.item.children.length || a.item.children.some((c, i) => c !== b.item.children[i] && (c.props !== b.item.children[i].props || c.start !== b.item.children[i].start))) return false;
+	const ca = a.state.composition, cb = b.state.composition;
+	if (ca.width !== cb.width || ca.height !== cb.height || ca.fps !== cb.fps) return false;
+	if (p.kind === "title" && a.state.tree.byId.get(p.id)?.text !== b.state.tree.byId.get(p.id)?.text) return false;
+	if (a.exact || b.exact ? a.time - p.start !== b.time - q.start : frameIndex(a.time - p.start, ca.fps) !== frameIndex(b.time - q.start, cb.fps)) return false;
+	return (a.item.transition?.progress ?? -1) === (b.item.transition?.progress ?? -1);
+}
+// src/react/Player.tsx
+/**
+* Canvas for media, DOM for overlays, controls below. The root carries
+* `data-time` and `data-frame`; every element carries `data-el`/`data-kind`.
+*/
+const Player = forwardRef(function Player(props, ref) {
+	const { state, media, element, controls, loop, autoPlay, initiallyMuted, playbackRate, fit = "contain", style, className, audioContext, onError, onFrame, coreOptions } = props;
+	const canvasRef = useRef(null);
+	const rootRef = useRef(null);
+	const [core, setCore] = useState(null);
+	const interiors = useMemo(() => indexLayerInteriors(element ?? null), [element]);
+	const [scale, setScale] = useState(1);
+	useLayoutEffect(() => {
+		const c = new PlayerCore({
+			state,
+			media,
+			...audioContext ? { audioContext } : {},
+			loop: loop ?? false,
+			initiallyMuted: initiallyMuted ?? false,
+			...playbackRate !== void 0 ? { playbackRate } : {},
+			...coreOptions ?? {}
+		});
+		const release = retainUseT();
+		setCore(c);
+		return () => {
+			release();
+			c.dispose();
+		};
+	}, [media, audioContext]);
+	useLayoutEffect(() => {
+		if (core && core.state !== state) core.setState(state);
+	}, [core, state]);
+	useLayoutEffect(() => {
+		core?.attachCanvas(canvasRef.current);
+		return () => core?.attachCanvas(null);
+	}, [core]);
+	useEffect(() => {
+		if (core && loop !== void 0) core.loop = loop;
+	}, [core, loop]);
+	useEffect(() => {
+		if (core && playbackRate !== void 0) core.playbackRate = playbackRate;
+	}, [core, playbackRate]);
+	useEffect(() => core && onError ? core.addEventListener("error", onError) : void 0, [core, onError]);
+	useEffect(() => core && onFrame ? core.addEventListener("frameupdate", onFrame) : void 0, [core, onFrame]);
+	useEffect(() => {
+		if (core && autoPlay) core.play();
+	}, [core, autoPlay]);
+	useEffect(() => {
+		const root = rootRef.current;
+		if (!root || fit === "none" || typeof ResizeObserver === "undefined") return;
+		const update = () => setScale(root.clientWidth / state.composition.width || 1);
+		update();
+		const ro = new ResizeObserver(update);
+		ro.observe(root);
+		return () => ro.disconnect();
+	}, [fit, state.composition.width]);
+	useImperativeHandle(ref, () => core ? refOf(core, canvasRef.current) : null, [core]);
+	const { width, height } = state.composition;
+	const snapshot = core?.getTime() ?? {
+		time: 0,
+		frame: 0
+	};
+	const backdrop = backdropTracks(state).size > 0;
+	const layerStyle = {
+		position: "absolute",
+		left: 0,
+		top: 0,
+		width,
+		height,
+		transformOrigin: "0 0",
+		transform: fit === "none" ? void 0 : `scale(${scale})`,
+		pointerEvents: "none"
+	};
+	const rootStyle = fit === "none" ? {
+		position: "relative",
+		width,
+		height,
+		overflow: "hidden",
+		background: "#000",
+		...style
+	} : {
+		position: "relative",
+		width: "100%",
+		aspectRatio: `${width} / ${height}`,
+		overflow: "hidden",
+		background: "#000",
+		...style
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		className,
+		style: rootStyle,
+		"data-time": snapshot.time.toFixed(4),
+		"data-frame": snapshot.frame,
+		"data-player": "",
+		children: [
+			backdrop && /* @__PURE__ */ jsx("div", {
+				"data-ground": "",
+				style: {
+					position: "absolute",
+					inset: 0,
+					zIndex: 0,
+					background: backgroundCss(compositionBackground(state))
+				}
+			}),
+			backdrop && core && /* @__PURE__ */ jsx(PlayerContext.Provider, {
+				value: core,
+				children: /* @__PURE__ */ jsx("div", {
+					"data-dom-layer": "backdrop",
+					style: {
+						...layerStyle,
+						zIndex: 0
+					},
+					children: /* @__PURE__ */ jsx(DomLayer, {
+						state,
+						interiors,
+						layer: "backdrop"
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx("canvas", {
+				ref: canvasRef,
+				"data-el": state.composition.id,
+				"data-kind": "composition",
+				width,
+				height,
+				style: {
+					position: "absolute",
+					inset: 0,
+					width: "100%",
+					height: "100%",
+					display: "block",
+					zIndex: 1
+				}
+			}),
+			core && /* @__PURE__ */ jsxs(PlayerContext.Provider, {
+				value: core,
+				children: [/* @__PURE__ */ jsxs("div", {
+					"data-dom-layer": "",
+					style: {
+						...layerStyle,
+						zIndex: 2
+					},
+					children: [/* @__PURE__ */ jsx(TimeAttrs, {}), /* @__PURE__ */ jsx(DomLayer, {
+						state,
+						interiors
+					})]
+				}), controls && /* @__PURE__ */ jsx(Controls, {})]
+			})
+		]
+	});
+});
+/** Keeps `data-time`/`data-frame` on the root current without re-rendering the whole player. */
+function TimeAttrs() {
+	const core = usePlayer();
+	const ref = useRef(null);
+	useEffect(() => core.subscribeTime(() => {
+		const root = ref.current?.closest("[data-player]");
+		if (!root) return;
+		const { time, frame } = core.getTime();
+		root.dataset.time = time.toFixed(4);
+		root.dataset.frame = String(frame);
+	}), [core]);
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		hidden: true
+	});
+}
+function refOf(core, canvas) {
+	return {
+		core,
+		canvas,
+		play: () => core.play(),
+		pause: () => core.pause(),
+		toggle: () => core.toggle(),
+		seekTo: (t) => core.seekTo(t),
+		seekToFrame: (f) => core.seekToFrame(f),
+		getCurrentTime: () => core.getCurrentTime(),
+		getCurrentFrame: () => core.getCurrentFrame(),
+		isPlaying: () => core.isPlaying(),
+		addEventListener: (type, fn) => core.addEventListener(type, fn),
+		removeEventListener: (type, fn) => core.removeEventListener(type, fn),
+		renderFrame: (t) => core.renderFrame(t),
+		captureSheet: (times, o) => core.captureSheet(times, o),
+		get duration() {
+			return core.duration;
+		},
+		get state() {
+			return core.state;
+		},
+		get playbackRate() {
+			return core.playbackRate;
+		},
+		set playbackRate(v) {
+			core.playbackRate = v;
+		},
+		get loop() {
+			return core.loop;
+		},
+		set loop(v) {
+			core.loop = v;
+		},
+		get muted() {
+			return core.muted;
+		},
+		set muted(v) {
+			core.muted = v;
+		},
+		get volume() {
+			return core.volume;
+		},
+		set volume(v) {
+			core.volume = v;
+		}
+	};
+}
+export { AUDIO_CACHE_S, AUDIO_CHUNK_S, AUDIO_PRIME_S, AssetSources, AudioContextClock, AudioEngine, CanvasPainter, ClipDecoder, Compositor, Controls, DUCK_ATTACK_S, DUCK_RELEASE_S, DecoderPool, DomLayer, EASING_FN, ENVELOPE_STEP_S, ErrorFrame, ErrorFrameSource, FRAME_EPS, FRAME_WAIT_MS, IDENTITY, INPUT_IDLE_CLOSE_S, ImageFrame, ImageFrameSource, LOOKAHEAD_S, LayerContext, MAX_OPEN_INPUTS, MAX_RATE, MIN_RATE, MOUNT_AHEAD_S, ManualClock, MediabunnyAudioSource, MediabunnyFrameSource, MediabunnyInputs, OVERLAY_KINDS, PICK_EPS, PLAY_PRIME_TIMEOUT_MS, PerformanceClock, Player, PlayerContext, PlayerCore, QUEUE_MAX, QUEUE_TARGET, REVERSE_WINDOW_FRAMES, REVERSE_WINDOW_S, SCHEDULER_MS, SEEK_MODE_SPEED, SETTLE_MS, STILL, SampleFrame, Transport, UNMOUNT_BEHIND_S, WebAudioOutput, addFontFaces, animatedTransform, backdropTracks, backgroundCss, backgroundFill, blendOf, boundsOf, buildAudioPlan, buildFramePlan, buildGainEnvelope, captureWarnings, combine, compositionBackground, copyFrame, coversCanvas, cssTransform, defaultCreateCanvas, devWarn, duckIntervals, ease, effect, filterString, fitRect, frameIndex, frameTime, fromMap, hasKeyframes, holdCssAnimations, indexLayerInteriors, isVisibleAt, keyframedValue, layerClock, layoutRect, loadFileFonts, localT, makeNestedResolver, matrixToCss, mediabunnyAudioSourceFactory, mediabunnyFrameSourceFactory, motionAt, multiply, nestedSourceTime, paintBackground, paramsAt, placementSourceTime, postEffects, retainUseT, rotate, roundedRect, sameElement, scaleM, setMatrix, timecode, toResolver, traceMask, trackItems, transformMatrix, translate, useCompositionFrame, useCompositionTime, useLayerClock, useLayerT, usePlayer, visiblePlacements };