@cutcraft/player 0.1.0 → 0.2.0

package/dist/index.mjs

@@ -1,117 +1,10 @@
-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 { $ 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";
-// 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;
-	}
-};
+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
@@ -367,10 +260,10 @@ function automate(param, points, when, fallback) {
 		return;
 	}
 	const sorted = [...points].sort((a, b) => a.at - b.at);
-	param.setValueAtTime(valueAt(sorted, when, fallback), Math.max(0, when));
+	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(points, at, fallback) {
+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;
@@ -381,6 +274,114 @@ function valueAt(points, at, fallback) {
 	}
 	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),
@@ -415,6 +416,9 @@ var PlayerCore = class {
 	_muted;
 	_volume = 1;
 	disposed = false;
+	fonts = Promise.resolve();
+	fontsOf = null;
+	fontsWanted;
 	constructor(options) {
 		this._state = options.state;
 		this.media = toResolver(options.media);
@@ -466,6 +470,23 @@ var PlayerCore = class {
 		});
 		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;
@@ -627,6 +648,7 @@ var PlayerCore = class {
 	*/
 	setState(state) {
 		this._state = state;
+		this.loadFonts(state);
 		this.transport.duration = state.composition.duration;
 		this.compositor.setState(state);
 		if (this.transport.playing) return;
@@ -751,6 +773,43 @@ function drawLabel(ctx, text, x, y, w, h) {
 	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. */
@@ -787,43 +846,1858 @@ function retainUseT() {
 		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,
+// 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: layerClock(p.placement, p.time, comp.fps),
-			children: layerContent(p.interior, p.placement.interior?.props)
+			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) {
@@ -843,24 +2717,47 @@ function Shape(p) {
 		})
 	});
 }
-// 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
+// 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
 			},
-			dangerouslySetInnerHTML: { __html: d.prepared.markup }
-		}), graphicLabels(d.labels)]
-	});
+			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. */
@@ -989,10 +2886,103 @@ function Title(p) {
 		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) {
@@ -1018,6 +3008,7 @@ function DomLayer({ state, interiors, layer = "front" }) {
 				item,
 				state,
 				time,
+				exact,
 				interior: interiors.get(item.placement.id)
 			}, item.placement.id))
 		}, track.id);
@@ -1037,13 +3028,25 @@ function DomLayer({ state, interiors, layer = "front" }) {
 }
 /** Re-renders only when the element's own relative frame or placement changes. */
 const Element = memo(function Element({ item, state, time, interior }) {
-	const props = {
+	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,
@@ -1060,7 +3063,7 @@ const Element = memo(function Element({ item, state, time, 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
@@ -1076,121 +3079,9 @@ function sameElement(a, b) {
 	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;
+	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/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
@@ -1407,4 +3298,4 @@ function refOf(core, canvas) {
 		}
 	};
 }
-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 };
+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 };