@cutcraft/player 0.0.0-stage → 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1410 @@
+import { $ as MIN_RATE, A as hasKeyframes, B as devWarn, C as transformMatrix, D as visiblePlacements, E as trackItems, F as localT, G as DUCK_RELEASE_S, H as AUDIO_CHUNK_S, I as nestedSourceTime, J as FRAME_WAIT_MS, K as ENVELOPE_STEP_S, L as placementSourceTime, M as frameIndex, N as frameTime, O as EASING_FN, P as layerClock, Q as MAX_RATE, R as timecode, S as scaleM, T as isVisibleAt, U as AUDIO_PRIME_S, V as AUDIO_CACHE_S, W as DUCK_ATTACK_S, X as LOOKAHEAD_S, Y as INPUT_IDLE_CLOSE_S, Z as MAX_OPEN_INPUTS, _ as fitRect, a as backdropTracks, at as REVERSE_WINDOW_FRAMES, b as multiply, c as combine, ct as SEEK_MODE_SPEED, d as filterString, et as MOUNT_AHEAD_S, f as postEffects, g as cssTransform, h as boundsOf, i as OVERLAY_KINDS, it as QUEUE_TARGET, j as keyframedValue, k as ease, l as effect, lt as SETTLE_MS, m as animatedTransform, n as buildFramePlan, nt as PLAY_PRIME_TIMEOUT_MS, ot as REVERSE_WINDOW_S, p as IDENTITY, q as FRAME_EPS, r as compositionBackground, rt as QUEUE_MAX, s as STILL, st as SCHEDULER_MS, t as blendOf, tt as PICK_EPS, u as motionAt, ut as UNMOUNT_BEHIND_S, v as layoutRect, w as translate, x as rotate, y as matrixToCss, z as captureWarnings } from "./frame-plan-BNwblf1s.mjs";
+import { A as buildAudioPlan, C as ImageFrameSource, D as toResolver, E as fromMap, M as duckIntervals, O as ManualClock, S as ImageFrame, T as defaultCreateCanvas, _ as DecoderPool, a as backgroundFill, b as ErrorFrame, c as setMatrix, d as MediabunnyAudioSource, f as mediabunnyAudioSourceFactory, g as MediabunnyInputs, h as mediabunnyFrameSourceFactory, i as backgroundCss, j as buildGainEnvelope, k as PerformanceClock, l as roundedRect, m as SampleFrame, n as Compositor, o as coversCanvas, p as MediabunnyFrameSource, r as CanvasPainter, s as paintBackground, t as makeNestedResolver, u as traceMask, v as ClipDecoder, w as copyFrame, x as ErrorFrameSource, y as AssetSources } from "./nested-DSXA1q8d.mjs";
+import { A as indexLayerInteriors, C as titleBox, D as layoutStyle, E as dataAttrs, S as stickerSize, a as iconStickerDrawing, b as layerContent, i as graphicLabels, k as overlayStyle, o as shapeDrawing, r as graphicDrawing, t as svgDrawing, w as titleContent, x as stickerPlaceholder, y as captionsContent } from "./svg-element-BUXbz-U5.mjs";
+import { installLayerClock, rampAdvance, rampSpeed } from "@cutcraft/kit";
+import { createContext, forwardRef, memo, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// 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/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(sorted, when, fallback), Math.max(0, when));
+	for (const p of sorted) if (p.at > when) param.linearRampToValueAtTime(p.value, p.at);
+}
+function valueAt(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/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;
+	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);
+	}
+	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.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/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/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/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/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
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...dataAttrs(p.placement),
+		style,
+		children: /* @__PURE__ */ jsx(LayerContext.Provider, {
+			value: layerClock(p.placement, p.time, comp.fps),
+			children: layerContent(p.interior, p.placement.interior?.props)
+		})
+	});
+}
+// 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/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/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/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 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,
+				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 props = {
+		placement: item.placement,
+		children: item.children,
+		state,
+		time,
+		transition: item.transition
+	};
+	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;
+	}
+}, (a, b) => sameElement(a, b));
+/**
+* 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 (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/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/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, 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, indexLayerInteriors, isVisibleAt, keyframedValue, layerClock, layoutRect, localT, makeNestedResolver, matrixToCss, mediabunnyAudioSourceFactory, mediabunnyFrameSourceFactory, motionAt, multiply, nestedSourceTime, paintBackground, placementSourceTime, postEffects, retainUseT, rotate, roundedRect, sameElement, scaleM, setMatrix, timecode, toResolver, traceMask, trackItems, transformMatrix, translate, useCompositionFrame, useCompositionTime, useLayerClock, useLayerT, usePlayer, visiblePlacements };