@cutcraft/player 0.1.0 → 0.2.0

package/dist/svg-element-BUXbz-U5.mjs

@@ -1,1736 +0,0 @@
-import { B as devWarn, T as isVisibleAt, b as multiply, c as combine, d as filterString, m as animatedTransform, o as transitionLook, s as STILL, t as blendOf, u as motionAt, v as layoutRect, w as translate, y as matrixToCss } from "./frame-plan-BNwblf1s.mjs";
-import { RENDERED_TITLE_ANIMATIONS, isVocabulary } from "@cutcraft/kit";
-import { Children, Fragment, cloneElement, isValidElement } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { SaxesParser } from "saxes";
-import { GRAPHIC_KINDS, drawGraphic, graphicSize, isIcon } from "@cutcraft/graphics";
-import { z } from "zod";
-// 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/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);
-	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/overlays/content.tsx
-/** @jsxRuntime automatic */
-/** @jsxImportSource react */
-/**
-* What each overlay element draws, as a React tree with no hooks and no DOM
-* calls. The browser mounts these inside positioned divs; the Node renderer
-* hands the same trees to Satori and draws the result with the same layout.
-*/
-const SUPPORTED = new Set(RENDERED_TITLE_ANIMATIONS);
-/** 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/overlays/smil.ts
-/**
-* SVG animation (SMIL) evaluated at one moment of the element's own time and
-* written into plain attributes, so the frame is the same in the browser
-* (which would otherwise play SMIL on its own clock) and in skia (which does
-* not play it at all).
-*
-* 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 and skia not at all,
-* 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 || 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/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}="${escape(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(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(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="${escape(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 skia and browsers both draw. */
-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="${escape(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 escape(v) {
-	return v.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
-}
-function num(v) {
-	return String(Math.round(v * 1e3) / 1e3);
-}
-// src/overlays/graphic.tsx
-/** @jsxRuntime automatic */
-/** @jsxImportSource react */
-/**
-* 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, a tree both the DOM and Satori lay out. */
-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/overlays/svg-element.ts
-/**
-* How an `<Svg>` element draws its markup: at the size the SVG asks for (or fitted to the
-* composition with `fit`), with its `viewBox`, `preserveAspectRatio` and `color` applied, and
-* `$name` / `var(--cc-name)` filled from `tokens` (by default the composition's theme).
-*/
-function svgDrawing(p, markup, tokens = themeTokens(p.state.theme)) {
-	const props = p.placement.props;
-	const viewBox = props.viewBox;
-	const size = svgIntrinsicSize(markup, viewBox);
-	const fit = props.fit ?? "none";
-	const layout = overlayLayout(p, size, fit, true);
-	return {
-		size,
-		fit,
-		layout,
-		prepared: prepareSvg(markup, {
-			box: {
-				width: layout.rect.w,
-				height: layout.rect.h
-			},
-			viewBox,
-			preserveAspectRatio: props.preserveAspectRatio,
-			color: props.color,
-			tokens,
-			idPrefix: p.placement.id,
-			draw: layout.draw,
-			...svgAnimated(markup) ? { time: p.time - p.placement.start } : {}
-		})
-	};
-}
-const tokensByTheme = /* @__PURE__ */ new WeakMap();
-/** A theme's tokens as SVG attribute values. */
-function themeTokens(theme) {
-	if (!theme) return {};
-	let tokens = tokensByTheme.get(theme);
-	if (!tokens) {
-		tokens = Object.fromEntries(Object.entries(theme.tokens).map(([k, v]) => [k, String(v)]));
-		tokensByTheme.set(theme, tokens);
-	}
-	return tokens;
-}
-export { indexLayerInteriors as A, titleBox as C, layoutStyle as D, dataAttrs as E, overlayLayout as O, stickerSize as S, clipPathCss as T, hasSmil as _, iconStickerDrawing as a, layerContent as b, shapeSize as c, rgb as d, serialize as f, freezeSmil as g, clock as h, graphicLabels as i, overlayStyle as k, parseSvg as l, svgIntrinsicSize as m, themeTokens as n, shapeDrawing as o, svgAnimated as p, graphicDrawing as r, shapeMarkup as s, svgDrawing as t, prepareSvg as u, interpolate as v, titleContent as w, stickerPlaceholder as x, captionsContent as y };