@office-kit/pptx-editor 0.0.0-stage → 0.1.0

package/dist/animation-player-D2mt2MI8.js

@@ -0,0 +1,1400 @@
+//#region src/core/animation-player.ts
+const INSTANT_EFFECTS = ["appear", "disappear"];
+const FILTER_FAMILIES = [
+	"blinds",
+	"checkerboard",
+	"peek",
+	"randomBars",
+	"shape",
+	"split",
+	"strips",
+	"wedge",
+	"wheel",
+	"wipe"
+];
+/** The `presetClass` of an effect the library names says which of the three it is. */
+const PRESET_CLASS_KINDS = {
+	entr: "entrance",
+	exit: "exit",
+	emph: "emphasis"
+};
+const motionOf = (effect) => {
+	if (INSTANT_EFFECTS.includes(effect)) return "none";
+	const family = effect.replace(/(In|Out)$/, "");
+	if (family === "fly" || family === "credits") return "fly";
+	if (family === "peek") return "peek";
+	return FILTER_FAMILIES.includes(family) ? "filter" : "pose";
+};
+/** Where an entrance starts and an exit ends, by preset family. */
+const AWAY = {
+	fade: { opacity: 0 },
+	dissolve: { opacity: 0 },
+	expand: {
+		opacity: 0,
+		scale: "0.7 1"
+	},
+	contract: {
+		opacity: 0,
+		scale: "0.7 1"
+	},
+	swivel: {
+		opacity: 0,
+		scale: "0 1"
+	},
+	zoom: {
+		opacity: 0,
+		scale: "0"
+	},
+	basicZoom: { scale: "0" },
+	float: {
+		opacity: 0,
+		translate: "0% 50%"
+	},
+	growTurn: {
+		opacity: 0,
+		scale: "0",
+		rotate: "90deg"
+	},
+	shrinkTurn: {
+		opacity: 0,
+		scale: "0",
+		rotate: "90deg"
+	},
+	spinner: {
+		opacity: 0,
+		scale: "0",
+		rotate: "-90deg"
+	},
+	stretch: { scale: "0 1" },
+	stretchy: { scale: "0 1" },
+	collapse: { scale: "0 1" },
+	pinwheel: {
+		opacity: 0,
+		scale: "0",
+		rotate: "720deg"
+	},
+	spiral: {
+		scale: "0",
+		translate: "-100% 100%"
+	},
+	basicSwivel: { scale: "0 1" }
+};
+/** Each property of a pose at the shape's own place. */
+const AT_REST = {
+	opacity: 1,
+	scale: "1",
+	rotate: "0deg",
+	translate: "0% 0%"
+};
+const restOf = (away) => Object.fromEntries(Object.keys(away).map((name) => [name, AT_REST[name]]));
+const turned = (from, to) => [{ filter: from }, { filter: to }];
+const flash = (from, to) => [
+	{ filter: from },
+	{ filter: to },
+	{ filter: from }
+];
+const HUE_TURN = turned("hue-rotate(0deg)", "hue-rotate(180deg)");
+const CONTRAST_FLASH = flash("contrast(1)", "contrast(1.8)");
+/** The frames of each emphasis effect, which starts and ends with the shape as drawn. */
+const EMPHASIS = {
+	pulse: [
+		{
+			offset: 0,
+			scale: "1",
+			opacity: 1
+		},
+		{
+			offset: .2,
+			opacity: .5
+		},
+		{
+			offset: .5,
+			scale: "1.05"
+		},
+		{
+			offset: .8,
+			opacity: .5
+		},
+		{
+			offset: 1,
+			scale: "1",
+			opacity: 1
+		}
+	],
+	teeter: [
+		{
+			offset: 0,
+			rotate: "0deg"
+		},
+		{
+			offset: .1,
+			rotate: "2deg"
+		},
+		{
+			offset: .2,
+			rotate: "2deg"
+		},
+		{
+			offset: .4,
+			rotate: "-2deg"
+		},
+		{
+			offset: .6,
+			rotate: "2deg"
+		},
+		{
+			offset: .8,
+			rotate: "-2deg"
+		},
+		{
+			offset: 1,
+			rotate: "0deg"
+		}
+	],
+	wave: [
+		{
+			offset: 0,
+			translate: "0% 0%",
+			rotate: "0deg",
+			easing: "ease-in-out"
+		},
+		{
+			offset: .25,
+			rotate: "25deg"
+		},
+		{
+			offset: .5,
+			translate: "0% -20%",
+			rotate: "0deg",
+			easing: "ease-in-out"
+		},
+		{
+			offset: .75,
+			rotate: "-25deg"
+		},
+		{
+			offset: 1,
+			translate: "0% 0%",
+			rotate: "0deg"
+		}
+	],
+	shimmer: [
+		{
+			scale: "1",
+			translate: "0% 0%",
+			rotate: "0deg"
+		},
+		{
+			scale: "0.8 1",
+			translate: "10% -10%",
+			rotate: "-8deg"
+		},
+		{
+			scale: "1",
+			translate: "0% 0%",
+			rotate: "0deg"
+		}
+	],
+	blink: [
+		{
+			offset: 0,
+			opacity: 0,
+			easing: "step-end"
+		},
+		{
+			offset: .5,
+			opacity: 1
+		},
+		{
+			offset: 1,
+			opacity: 1
+		}
+	],
+	fillColor: HUE_TURN,
+	lineColor: HUE_TURN,
+	fontColor: HUE_TURN,
+	objectColor: HUE_TURN,
+	brushColor: HUE_TURN,
+	complementaryColor: HUE_TURN,
+	complementaryColor2: HUE_TURN,
+	contrastingColor: HUE_TURN,
+	darken: turned("brightness(1)", "brightness(0.6)"),
+	lighten: turned("brightness(1)", "brightness(1.4)"),
+	desaturate: turned("saturate(1)", "saturate(0)"),
+	colorPulse: flash("brightness(1)", "brightness(1.4)"),
+	growWithColor: [{
+		scale: "1",
+		filter: "hue-rotate(0deg)"
+	}, {
+		scale: "1.1",
+		filter: "hue-rotate(180deg)"
+	}],
+	boldFlash: [
+		{
+			offset: 0,
+			filter: "contrast(1)",
+			easing: "step-end"
+		},
+		{
+			offset: .5,
+			filter: "contrast(1.8)",
+			easing: "step-end"
+		},
+		{
+			offset: .6,
+			filter: "contrast(1)"
+		},
+		{
+			offset: 1,
+			filter: "contrast(1)"
+		}
+	],
+	boldReveal: CONTRAST_FLASH,
+	underline: CONTRAST_FLASH
+};
+/**
+* The frames of an emphasis effect whose Effect Options decide how far it
+* goes: Spin's angle and direction, Grow/Shrink's size and axes,
+* Transparency's amount. `null` for every other effect.
+*/
+const optionedEmphasis = (step) => {
+	switch (step.effect) {
+		case "spin": return [{ rotate: "0deg" }, { rotate: `${(step.spinDirection === "counterclockwise" ? -1 : 1) * (step.spinDegrees ?? 360)}deg` }];
+		case "growShrink": {
+			const size = (step.scalePercent ?? 150) / 100;
+			return [{ scale: "1" }, { scale: step.scaleDirection === "horizontal" ? `${size} 1` : step.scaleDirection === "vertical" ? `1 ${size}` : `${size}` }];
+		}
+		case "transparency": return [{ opacity: 1 }, { opacity: 1 - (step.transparencyPercent ?? 50) / 100 }];
+		default: return null;
+	}
+};
+/** The time-to-progress curve of a `tmFilter`, read at `t`. */
+const filtered = (points, t) => {
+	for (let at = 1; at < points.length; at += 1) {
+		const [t1, p1] = points[at];
+		const [t0, p0] = points[at - 1];
+		if (t <= t1) return p0 + (p1 - p0) * (t - t0) / (t1 - t0);
+	}
+	return 1;
+};
+const BOUNCE_DRIFT = [
+	[0, 0],
+	[.14, .36],
+	[.43, .73],
+	[.71, .91],
+	[1, 1]
+];
+const BOUNCE_LENGTH = 1822;
+const BOUNCE_LANDINGS = [
+	664,
+	1324,
+	1656,
+	1822
+];
+const BOUNCE_HEIGHTS = [
+	1 / 9,
+	1 / 27,
+	1 / 81
+];
+const REVOLVE_ARC = [
+	[
+		0,
+		0,
+		.31
+	],
+	[
+		.25,
+		.1096,
+		.2646
+	],
+	[
+		.5,
+		.155,
+		.155
+	],
+	[
+		.75,
+		.1096,
+		.0454
+	],
+	[
+		1,
+		0,
+		0
+	]
+];
+const CURVE_POINTS = [
+	[-.46736, .92887],
+	[.0908, .66613],
+	[.23177, .40825],
+	[.18264, .09152],
+	[0, 0]
+];
+const frame = (offset, translate, rest = {}) => translate === null ? null : {
+	offset,
+	translate,
+	...rest
+};
+const all = (frames) => frames.every((f) => f !== null) ? frames : null;
+/**
+* The entrance presets made of several behaviours, as keyframes from where the
+* shape starts to its own place. Each offset is where one of the reference desktop app's
+* behaviours starts or ends, as a fraction of the preset's default length.
+*/
+const TRACKS = {
+	bounce: (g) => {
+		const at = (ms, height, easing) => frame(ms / BOUNCE_LENGTH, g.shift(-.25 * (1 - filtered(BOUNCE_DRIFT, ms / BOUNCE_LENGTH)), -height), { easing });
+		const frames = [at(0, 1 / 3, "ease-in")];
+		BOUNCE_LANDINGS.forEach((landing, i) => {
+			frames.push(at(landing, 0, "ease-out"));
+			const next = BOUNCE_LANDINGS[i + 1];
+			if (next !== void 0) frames.push(at((landing + next) / 2, BOUNCE_HEIGHTS[i], "ease-in"));
+		});
+		return all(frames);
+	},
+	boomerang: (g) => all([
+		frame(0, g.shift(.4, -.2), {
+			rotate: "-90deg",
+			scale: "1 1",
+			opacity: 0,
+			easing: "ease-out"
+		}),
+		frame(.5, g.shift(0, .1), {
+			rotate: "0deg",
+			scale: "0.05 1",
+			opacity: .5,
+			easing: "ease-in"
+		}),
+		frame(1, g.shift(0, 0), {
+			rotate: "0deg",
+			scale: "1 1",
+			opacity: 1
+		})
+	]),
+	centerRevolve: (g) => all([
+		frame(0, g.shift(0, .31), { opacity: 0 }),
+		frame(.1, g.shift(0, .31), { opacity: 1 }),
+		...REVOLVE_ARC.map(([t, x, y]) => frame(.4 + .6 * t, g.shift(x, y), { opacity: 1 }))
+	]),
+	riseUp: (g) => all([
+		frame(0, g.shift(0, 1), {
+			opacity: 0,
+			easing: "ease-out"
+		}),
+		frame(.9, g.shift(0, -.03), {
+			opacity: .9,
+			easing: "ease-in"
+		}),
+		frame(1, g.shift(0, 0), { opacity: 1 })
+	]),
+	floating: (g) => all([
+		frame(0, g.shift(.4, -.4), {
+			rotate: "-90deg",
+			opacity: 0,
+			easing: "ease-out"
+		}),
+		frame(.8, g.shift(-.05, .1), {
+			rotate: "0deg",
+			opacity: 1,
+			easing: "ease-in"
+		}),
+		frame(1, g.shift(0, 0), {
+			rotate: "0deg",
+			opacity: 1
+		})
+	]),
+	whip: (g) => all([
+		frame(0, g.shift(0, 0), {
+			scale: "0.1",
+			opacity: 0
+		}),
+		frame(.5, g.shift(.1, 0), {
+			scale: "1.02",
+			opacity: 1
+		}),
+		frame(1, g.shift(0, 0), {
+			scale: "1",
+			opacity: 1
+		})
+	]),
+	curveUp: (g) => all(CURVE_POINTS.map(([x, y], i) => frame(i / (CURVE_POINTS.length - 1), g.shift(x, y), {
+		scale: `${2.5 - 1.5 * i / (CURVE_POINTS.length - 1)}`,
+		opacity: i / (CURVE_POINTS.length - 1)
+	}))),
+	drop: (g) => all([
+		frame(0, g.shift(0, -1), {
+			rotate: "-45deg",
+			easing: "ease-in"
+		}),
+		frame(.455, g.shift(0, 0, 0, -10), {
+			rotate: "-45deg",
+			easing: "ease-out"
+		}),
+		frame(.611, g.shift(0, 0, 0, -50), {
+			rotate: "0deg",
+			easing: "ease-in"
+		}),
+		frame(.767, g.shift(0, 0, 0, -10), { rotate: "42deg" }),
+		frame(.864, g.shift(0, 0, 0, -10), { rotate: "15deg" }),
+		frame(.91, g.shift(0, 0, 0, -5), { rotate: "0deg" }),
+		frame(1, g.shift(0, 0), { rotate: "0deg" })
+	]),
+	flip: (g) => flipTrack(g, "top")
+};
+const flipTrack = (g, edge) => {
+	const past = g.past(edge);
+	if (past === null) return null;
+	const at = (share, own) => `calc(${past.dx * share}px + ${own}%) calc(${past.dy * share}px + 0%)`;
+	const entering = edge === "top";
+	const from = entering ? 1 : 0;
+	const to = entering ? 0 : 1;
+	return [
+		{
+			offset: 0,
+			translate: at(from, 0),
+			scale: "1 1",
+			rotate: "0deg"
+		},
+		{
+			offset: .5,
+			translate: at(.5, 50),
+			scale: "-1 1",
+			rotate: "180deg"
+		},
+		{
+			offset: 1,
+			translate: at(to, 0),
+			scale: "1 1",
+			rotate: "360deg"
+		}
+	];
+};
+/** The exits whose track is not their entrance's, played backwards. */
+const EXIT_TRACKS = {
+	drop: (g) => all([frame(0, g.shift(0, 0), {
+		rotate: "0deg",
+		easing: "ease-in"
+	}), frame(1, g.shift(0, 1), { rotate: "45deg" })]),
+	flip: (g) => flipTrack(g, "bottom")
+};
+/** The entrance track whose reverse is an exit's: Sink Down is Rise Up backwards. */
+const TRACK_OF_EXIT = {
+	sinkDown: "riseUp",
+	curveDown: "curveUp"
+};
+const SWAPPED_EASING = {
+	"ease-in": "ease-out",
+	"ease-out": "ease-in"
+};
+/**
+* A track played backwards: the last frame first, each offset mirrored, and
+* the easing of each stretch moved to the frame that now starts it, turned
+* round — a stretch that slowed into a frame speeds out of it.
+*/
+const reversed = (frames) => {
+	const count = frames.length;
+	return frames.map((_, i) => {
+		const pose = { ...frames[count - 1 - i] };
+		delete pose.easing;
+		if (typeof pose.offset === "number") pose.offset = 1 - pose.offset;
+		const easing = frames[count - 2 - i]?.easing;
+		if (typeof easing === "string") pose.easing = SWAPPED_EASING[easing] ?? easing;
+		return pose;
+	});
+};
+/** The track of a preset, in the direction the step plays it; `undefined` when it has none. */
+const trackOf = (item) => {
+	const family = item.step.effect?.replace(/(In|Out)$/, "");
+	if (family === void 0) return void 0;
+	if (item.kind === "entrance") return TRACKS[family];
+	const own = EXIT_TRACKS[family];
+	if (own !== void 0) return own;
+	const entrance = TRACKS[TRACK_OF_EXIT[family] ?? family];
+	return entrance === void 0 ? void 0 : (g) => {
+		const frames = entrance(g);
+		return frames === null ? null : reversed(frames);
+	};
+};
+const styled = (el) => el instanceof HTMLElement || el instanceof SVGElement ? el : null;
+/** Whether a step reveals its target, hides it, or neither; null when we cannot tell. */
+const kindOf = (step) => {
+	if (step.effect === null || step.presetClass === null) return null;
+	return PRESET_CLASS_KINDS[step.presetClass] ?? null;
+};
+/**
+* How long an effect runs, or null when the deck does not say. Null is not
+* zero: it is the reason nothing can be chained onto the end of this effect.
+*/
+const durationOf = (step) => {
+	if (step.durationMs !== null && Number.isFinite(step.durationMs) && step.durationMs >= 0) return step.durationMs;
+	if (step.effect !== null && INSTANT_EFFECTS.includes(step.effect)) return 0;
+	return null;
+};
+/**
+* Groups the steps into the stops the viewer clicks through, with each step's
+* start measured from the beginning of its stop, and lists the steps that are
+* left out with the reason why.
+*/
+const buildAnimationStops = (steps) => {
+	const stops = [];
+	const unsupported = [];
+	const skip = (step, reason) => {
+		unsupported.push({
+			step,
+			reason
+		});
+	};
+	let stop = null;
+	let groupStart = 0;
+	let groupEnd = 0;
+	let seen = false;
+	for (const step of steps ?? []) {
+		if (step.sequence !== "mainSeq") {
+			skip(step, "notInMainSeq");
+			continue;
+		}
+		const leading = !seen;
+		seen = true;
+		if (step.start === "unknown") {
+			groupStart = null;
+			groupEnd = null;
+			skip(step, "notModelled");
+			continue;
+		}
+		if (step.start === "click" || leading) {
+			stop = {
+				items: [],
+				auto: leading && step.start !== "click"
+			};
+			stops.push(stop);
+			groupStart = 0;
+			groupEnd = 0;
+		} else if (step.start === "afterPrevious") {
+			groupStart = groupEnd;
+			groupEnd = groupStart;
+		}
+		const kind = step.playable ? kindOf(step) : null;
+		const duration = kind === null ? null : durationOf(step);
+		const delay = step.delayMs;
+		if (kind === null || delay === null || groupStart === null) {
+			skip(step, kind === null || delay === null ? "notModelled" : "unknownTiming");
+			groupEnd = null;
+			continue;
+		}
+		const begin = groupStart + delay;
+		stop?.items.push({
+			step,
+			kind,
+			begin,
+			duration
+		});
+		groupEnd = duration === null || groupEnd === null ? null : Math.max(groupEnd, begin + duration);
+	}
+	return {
+		stops,
+		unsupported
+	};
+};
+const shapeSelector = (id) => `[data-pptx-shape-id="${id}"]`;
+/**
+* The elements one step animates: a whole object, or paragraphs of its text.
+* Empty when the step's target is one we do not act on.
+*/
+const targetsOf = (root, step, blocked) => {
+	const target = step.target;
+	if (target.kind !== "shape" && target.kind !== "paragraphs") return [];
+	if (!Number.isInteger(target.shapeId)) return [];
+	const id = String(target.shapeId);
+	if (blocked.has(id)) return [];
+	const shapes = root.querySelectorAll(shapeSelector(id));
+	const shape = shapes.length === 1 ? styled(shapes[0]) : null;
+	if (shape === null) return [];
+	if (target.kind !== "paragraphs") return [shape];
+	const out = [];
+	for (const marker of shape.querySelectorAll("[data-pptx-paragraph]")) {
+		if (marker.closest("[data-pptx-shape-id]") !== shape) continue;
+		const n = Number(marker.getAttribute("data-pptx-paragraph"));
+		if (n < target.firstParagraph || n > target.lastParagraph) continue;
+		const element = styled(marker);
+		if (element !== null) out.push(element);
+	}
+	return out;
+};
+const nowMs = () => typeof performance === "object" ? performance.now() : Date.now();
+/**
+* The slide's own box on screen. A fly is stated against the slide's edges
+* (`1+#ppt_h/2` puts the shape's centre one half-height below the bottom of it),
+* so that is what the distance has to be measured from — never the viewport,
+* which is not where the slide ends.
+*/
+const slideBoxOf = (el, root) => {
+	const svg = el.closest("svg");
+	if (svg !== null) return svg.getBoundingClientRect();
+	return root instanceof Element ? root.getBoundingClientRect() : null;
+};
+/**
+* The matrix taking the element's own coordinates to the screen, which is also
+* the space a CSS transform written on it is read in.
+*
+* The shape and paragraph markers carry no transform of their own — the
+* renderer wraps the drawn shape rather than transforming the wrapper — so the
+* matrix does not have to be un-done first, and a shape the deck rotates or a
+* group it scales is accounted for by the ancestors it comes through. Text laid
+* out as HTML sits in a `<foreignObject>`, whose own matrix is the one its
+* pixels are scaled by.
+*/
+const screenMatrixOf = (el) => {
+	if (el instanceof SVGGraphicsElement) return el.getScreenCTM();
+	const host = el.closest("foreignObject");
+	return host instanceof SVGGraphicsElement ? host.getScreenCTM() : null;
+};
+/**
+* How far the element has to move to sit just outside the named edge, in the
+* units its own CSS transform is written in. `null` when the slide has not been
+* laid out yet, or its matrix cannot be inverted.
+*/
+const flyOffset = (el, direction, root) => {
+	const slide = slideBoxOf(el, root);
+	if (slide === null || slide.width <= 0 || slide.height <= 0) return null;
+	const box = el.getBoundingClientRect();
+	const lower = direction.toLowerCase();
+	return toOwnUnits(el, lower.includes("right") ? slide.right - box.left : lower.includes("left") ? slide.left - box.right : 0, lower.includes("bottom") ? slide.bottom - box.top : lower.includes("top") ? slide.top - box.bottom : 0);
+};
+/** A distance on screen in the units the element's own CSS transform is written in. */
+const toOwnUnits = (el, dx, dy) => {
+	const matrix = screenMatrixOf(el);
+	if (matrix === null) return {
+		dx,
+		dy
+	};
+	const determinant = matrix.a * matrix.d - matrix.b * matrix.c;
+	if (determinant === 0) return null;
+	return {
+		dx: (matrix.d * dx - matrix.c * dy) / determinant,
+		dy: (matrix.a * dy - matrix.b * dx) / determinant
+	};
+};
+const geometryOf = (el, root) => ({
+	shift(slideX, slideY, ownX = 0, ownY = 0) {
+		const slide = slideBoxOf(el, root);
+		if (slide === null || slide.width <= 0 || slide.height <= 0) return null;
+		const own = toOwnUnits(el, slideX * slide.width, slideY * slide.height);
+		if (own === null) return null;
+		return `calc(${own.dx}px + ${ownX}%) calc(${own.dy}px + ${ownY}%)`;
+	},
+	past(edge) {
+		return flyOffset(el, edge, root);
+	}
+});
+/**
+* Each motion animates a property of its own — `translate`, `scale`, `rotate`
+* — rather than all of them sharing `transform`.
+*
+* Two reasons, both of them things the deck states and a single `transform`
+* would lose. The first is that PresentationML animates a shape's position, its
+* size and its rotation as separate attributes (`ppt_x`/`ppt_y`, `ppt_w`/
+* `ppt_h`, `r`), so a slide may well run a fly and a spin over one shape at the
+* same moment; written to one property, the animation that begins second
+* replaces the first outright and the shape would only turn. The second is that
+* the drawn slide uses `transform` itself, for the rotation and the group
+* scaling the deck gives a shape — and the individual properties apply on top
+* of it rather than in place of it, so nothing the renderer did is overwritten.
+*/
+/**
+* Whether a step's motion has to be measured against the drawn slide, so that a
+* movement of `null` means "not read yet" rather than "nothing to run".
+*/
+const needsGeometry = (item) => item.step.effect !== null && (motionOf(item.step.effect) === "fly" || trackOf(item) !== void 0);
+/**
+* The keyframes one step runs on one element, or `null` when there is nothing
+* to run: an instant effect, or a fly whose distance cannot be measured. Either
+* way the element is put where the step leaves it without motion, which for
+* every effect modelled here is the element's own untransformed place.
+*/
+const movementFor = (item, el, root) => {
+	const effect = item.step.effect;
+	const entering = item.kind === "entrance";
+	if (effect === null) return null;
+	switch (motionOf(effect)) {
+		case "none": return null;
+		case "pose": {
+			if (item.kind === "emphasis") {
+				const frames = optionedEmphasis(item.step) ?? EMPHASIS[effect];
+				return frames === void 0 ? null : {
+					frames,
+					aboutOwnCentre: true
+				};
+			}
+			const track = trackOf(item);
+			if (track !== void 0) {
+				const frames = track(geometryOf(el, root));
+				return frames === null ? null : {
+					frames,
+					aboutOwnCentre: true
+				};
+			}
+			const away = AWAY[effect.replace(/(In|Out)$/, "")];
+			if (away === void 0) return null;
+			const rest = restOf(away);
+			return {
+				frames: entering ? [away, rest] : [rest, away],
+				aboutOwnCentre: true
+			};
+		}
+		case "fly": {
+			const direction = effect === "creditsIn" ? "bottom" : effect === "creditsOut" ? "top" : item.step.direction;
+			if (direction === null) return null;
+			const offset = flyOffset(el, direction, root);
+			if (offset === null) return null;
+			const away = { translate: `${offset.dx}px ${offset.dy}px` };
+			const place = { translate: "0px 0px" };
+			return {
+				frames: entering ? [away, place] : [place, away],
+				aboutOwnCentre: false
+			};
+		}
+		case "filter":
+		case "peek": {
+			const reveal = filterReveal(item.step);
+			if (reveal === null) return null;
+			const covered = { clipPath: reveal.covered };
+			const uncovered = { clipPath: reveal.uncovered };
+			const shift = item.step.direction === null ? void 0 : EDGE_VECTORS[item.step.direction];
+			if (effect === "peekIn" || effect === "peekOut") {
+				if (shift === void 0) return null;
+				covered.translate = `${shift[0] * 112.5}% ${shift[1] * 112.5}%`;
+				uncovered.translate = "0% 0%";
+			}
+			return {
+				frames: entering ? [covered, uncovered] : [uncovered, covered],
+				aboutOwnCentre: true
+			};
+		}
+	}
+};
+/** Which way each edge lies from the centre, as unit steps in x and y. */
+const EDGE_VECTORS = {
+	top: [0, -1],
+	bottom: [0, 1],
+	left: [-1, 0],
+	right: [1, 0]
+};
+const OPPOSITE_EDGE = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+};
+/** `inset()` with nothing showing but the named edge's zero-width strip. */
+const COVERED_FROM_EDGE = {
+	top: "inset(0% 0% 100% 0%)",
+	bottom: "inset(100% 0% 0% 0%)",
+	left: "inset(0% 100% 0% 0%)",
+	right: "inset(0% 0% 0% 100%)"
+};
+const CORNERS = {
+	topLeft: [0, 0],
+	topRight: [100, 0],
+	bottomLeft: [0, 100],
+	bottomRight: [100, 100]
+};
+const polygon = (points, evenOdd = false) => `polygon(${evenOdd ? "evenodd, " : ""}${points.map(([x, y]) => `${x}% ${y}%`).join(", ")}) fill-box`;
+const FULL_BOX = [
+	[0, 0],
+	[100, 0],
+	[100, 100],
+	[0, 100]
+];
+/**
+* `count` bars across the box, each `fraction` of its slot wide. The bars are
+* one polygon, joined along the box's edge by lines of no width.
+*/
+const bars = (count, horizontal, fraction) => {
+	const points = [];
+	for (let i = 0; i < count; i++) {
+		const from = 100 * i / count;
+		const to = from + 100 * fraction / count;
+		if (horizontal) points.push([0, from], [100, from], [100, to], [0, to]);
+		else points.push([from, 0], [from, 100], [to, 100], [to, 0]);
+	}
+	return polygon(points);
+};
+const CIRCLE_RADIUS = 50 * Math.SQRT2;
+const CIRCLE_POINTS = 32;
+const FAN_POINTS = 12;
+/** An outline about the box's centre, `scale` 1 being large enough to cover the box. */
+const outline = (shape, scale) => {
+	const at = (x, y) => [50 + x * scale, 50 + y * scale];
+	switch (shape) {
+		case "box": return [
+			at(-50, -50),
+			at(50, -50),
+			at(50, 50),
+			at(-50, 50)
+		];
+		case "diamond": return [
+			at(0, -100),
+			at(100, 0),
+			at(0, 100),
+			at(-100, 0)
+		];
+		case "plus": return [
+			at(-50, -100),
+			at(50, -100),
+			at(50, -50),
+			at(100, -50),
+			at(100, 50),
+			at(50, 50),
+			at(50, 100),
+			at(-50, 100),
+			at(-50, 50),
+			at(-100, 50),
+			at(-100, -50),
+			at(-50, -50)
+		];
+		default: return Array.from({ length: CIRCLE_POINTS }, (_, i) => {
+			const angle = 2 * Math.PI * i / CIRCLE_POINTS;
+			return at(CIRCLE_RADIUS * Math.cos(angle), CIRCLE_RADIUS * Math.sin(angle));
+		});
+	}
+};
+/**
+* A fan from the centre, swept `sweep` of a turn from `start` — both in turns,
+* clockwise from 12 o'clock — and long enough to reach every corner.
+*/
+const fan = (start, sweep) => [[50, 50], ...Array.from({ length: 13 }, (_, i) => {
+	const angle = 2 * Math.PI * (start + sweep * i / FAN_POINTS);
+	return [50 + 100 * Math.sin(angle), 50 - 100 * Math.cos(angle)];
+})];
+const filterReveal = (step) => {
+	const effect = step.effect;
+	if (effect === null) return null;
+	const family = effect.replace(/(In|Out)$/, "");
+	const horizontal = step.orientation !== "vertical";
+	switch (family) {
+		case "wipe":
+		case "peek": {
+			const edge = step.direction === null ? void 0 : family === "peek" ? OPPOSITE_EDGE[step.direction] : step.direction;
+			const covered = edge === void 0 ? void 0 : COVERED_FROM_EDGE[edge];
+			if (covered === void 0) return null;
+			return {
+				covered: `${covered} fill-box`,
+				uncovered: "inset(0% 0% 0% 0%) fill-box"
+			};
+		}
+		case "blinds": return {
+			covered: bars(6, horizontal, 0),
+			uncovered: bars(6, horizontal, 1)
+		};
+		case "randomBars": return {
+			covered: bars(16, horizontal, 0),
+			uncovered: bars(16, horizontal, 1)
+		};
+		case "checkerboard": return {
+			covered: bars(8, !horizontal, 0),
+			uncovered: bars(8, !horizontal, 1)
+		};
+		case "split": {
+			const vertical = step.orientation === "vertical";
+			if (step.inOut === "out") {
+				const line = (open) => {
+					const side = `${50 - open / 2}%`;
+					return vertical ? `inset(0% ${side} 0% ${side}) fill-box` : `inset(${side} 0% ${side} 0%) fill-box`;
+				};
+				return {
+					covered: line(0),
+					uncovered: line(100)
+				};
+			}
+			const edges = (p) => polygon(vertical ? [
+				[0, 0],
+				[p, 0],
+				[p, 100],
+				[100 - p, 100],
+				[100 - p, 0],
+				[100, 0],
+				[100, 100],
+				[0, 100]
+			] : [
+				[0, 0],
+				[100, 0],
+				[100, p],
+				[0, p],
+				[0, 100 - p],
+				[100, 100 - p],
+				[100, 100],
+				[0, 100]
+			]);
+			return {
+				covered: edges(0),
+				uncovered: edges(50)
+			};
+		}
+		case "shape": {
+			const shape = step.shape ?? "circle";
+			if (step.inOut === "out") return {
+				covered: polygon(outline(shape, 0)),
+				uncovered: polygon(outline(shape, 1))
+			};
+			return {
+				covered: polygon([...FULL_BOX, ...outline(shape, 1)], true),
+				uncovered: polygon([...FULL_BOX, ...outline(shape, 0)], true)
+			};
+		}
+		case "strips": {
+			const corner = step.direction === null ? void 0 : CORNERS[step.direction];
+			if (corner === void 0) return null;
+			const [cx, cy] = corner;
+			const sx = cx === 0 ? 1 : -1;
+			const sy = cy === 0 ? 1 : -1;
+			const triangle = (size) => polygon([
+				[cx, cy],
+				[cx + sx * size, cy],
+				[cx, cy + sy * size]
+			]);
+			return {
+				covered: triangle(0),
+				uncovered: triangle(200)
+			};
+		}
+		case "wedge": return {
+			covered: polygon([...fan(0, 0), ...fan(0, 0)]),
+			uncovered: polygon([...fan(0, .5), ...fan(0, -.5)])
+		};
+		case "wheel": {
+			const spokes = step.spokes ?? 1;
+			const sectors = (sweep) => polygon(Array.from({ length: spokes }, (_, i) => fan(i / spokes, sweep / spokes)).flat());
+			return {
+				covered: sectors(0),
+				uncovered: sectors(1)
+			};
+		}
+		default: return null;
+	}
+};
+/** Plays a slide's animations against a rendered SVG. */
+const createAnimationPlayer = (options) => {
+	const root = () => typeof options.root === "function" ? options.root() : options.root;
+	const parsed = buildAnimationStops(options.steps);
+	const stops = parsed.stops;
+	const unsupported = [...parsed.unsupported];
+	const reduced = () => options.reducedMotion?.() === true;
+	const onChange = options.onChange ?? (() => {});
+	const animations = [];
+	const timers = [];
+	const touched = /* @__PURE__ */ new Set();
+	const inFlight = /* @__PURE__ */ new Map();
+	const frozen = /* @__PURE__ */ new Map();
+	const outstanding = /* @__PURE__ */ new Map();
+	const finished = /* @__PURE__ */ new Set();
+	let cursor = 0;
+	let disposed = false;
+	let startedAt = null;
+	let generation = 0;
+	const blocked = /* @__PURE__ */ new Set();
+	for (const entry of unsupported) for (const shapeId of entry.step.targetShapeIds) blocked.add(String(shapeId));
+	const drawn = /* @__PURE__ */ new Map();
+	for (const stop of stops) for (const item of stop.items) {
+		const id = String(item.step.target.shapeId);
+		if (!drawn.has(id)) drawn.set(id, root().querySelectorAll(shapeSelector(id)).length);
+	}
+	for (const stop of stops) for (const item of stop.items) if ((drawn.get(String(item.step.target.shapeId)) ?? 0) > 1) unsupported.push({
+		step: item.step,
+		reason: "ambiguousTarget"
+	});
+	for (const [id, count] of drawn) if (count > 1) blocked.add(id);
+	/**
+	* Where two effects animate one element at the same time, what the slide
+	* shows when the first of them ends turns on whether its value stays above
+	* the other or gives way to it. `valueAfterEnd` says which; where the tree
+	* does not say, there is nothing to play, so the step is reported and what it
+	* names is left as the renderer drew it. On its own such a step is no
+	* question at all — nothing is underneath it, and its own visibility decides
+	* where the shape is left — so it plays as usual.
+	*
+	* Read per element, which is where "the same thing" is actually settled: a
+	* build's paragraphs are separate elements. Each element's effects are sorted
+	* once and swept twice, for what begins before an earlier one has ended and
+	* what is still running when a later one begins — the pairs themselves are
+	* never enumerated.
+	*
+	* Run again whenever the slide is drawn again, because which elements a step
+	* reaches is a fact about the drawing: a transition hands over a layer, and a
+	* re-render replaces the nodes underneath us.
+	*/
+	const silence = (current) => {
+		const meets = /* @__PURE__ */ new Set();
+		for (const stop of stops) {
+			const spans = /* @__PURE__ */ new Map();
+			for (const item of stop.items) {
+				const end = item.duration === null ? Number.POSITIVE_INFINITY : item.begin + item.duration;
+				for (const el of targetsOf(current, item.step, blocked)) {
+					const span = {
+						item,
+						begin: item.begin,
+						end
+					};
+					const list = spans.get(el);
+					if (list === void 0) spans.set(el, [span]);
+					else list.push(span);
+				}
+			}
+			for (const list of spans.values()) {
+				if (list.length < 2) continue;
+				list.sort((a, b) => a.begin - b.begin);
+				let furthest = Number.NEGATIVE_INFINITY;
+				for (const span of list) {
+					if (span.begin < furthest) meets.add(span.item);
+					furthest = Math.max(furthest, span.end);
+				}
+				let earliest = Number.POSITIVE_INFINITY;
+				for (let at = list.length - 1; at >= 0; at -= 1) {
+					const span = list[at];
+					if (span === void 0) continue;
+					if (span.end > earliest) meets.add(span.item);
+					earliest = Math.min(earliest, span.begin);
+				}
+			}
+		}
+		for (const stop of stops) {
+			let kept = 0;
+			for (const item of stop.items) {
+				if (item.step.valueAfterEnd === "unstated" && meets.has(item)) {
+					unsupported.push({
+						step: item.step,
+						reason: "notModelled"
+					});
+					for (const shapeId of item.step.targetShapeIds) blocked.add(String(shapeId));
+					continue;
+				}
+				stop.items[kept] = item;
+				kept += 1;
+			}
+			stop.items.length = kept;
+		}
+	};
+	const clearPending = () => {
+		for (const timer of timers) clearTimeout(timer);
+		timers.length = 0;
+		for (const animation of animations) animation.cancel();
+		animations.length = 0;
+		for (const list of frozen.values()) for (const animation of list) animation.cancel();
+		frozen.clear();
+		inFlight.clear();
+		outstanding.clear();
+		finished.clear();
+	};
+	const drop = (list, entry) => {
+		const at = list.indexOf(entry);
+		if (at >= 0) list.splice(at, 1);
+	};
+	const notifyChanged = () => {
+		if (disposed) return;
+		if (timers.length === 0 && animations.length === 0) startedAt = null;
+		onChange(player);
+	};
+	const centreOn = (el) => {
+		touched.add(el);
+		el.style.transformBox = "fill-box";
+		el.style.transformOrigin = "50% 50%";
+	};
+	const uncentre = (el) => {
+		el.style.transformBox = "";
+		el.style.transformOrigin = "";
+	};
+	const show = (el) => {
+		touched.add(el);
+		el.style.visibility = "";
+		el.style.opacity = "";
+		uncentre(el);
+	};
+	const hide = (el) => {
+		touched.add(el);
+		el.style.visibility = "hidden";
+		el.style.opacity = "";
+		uncentre(el);
+	};
+	let indexedRoot = null;
+	let laidOut = true;
+	let plans = /* @__PURE__ */ new Map();
+	let placements = /* @__PURE__ */ new Map();
+	/** Every stop below this has run; within the stop in hand, `finished` says. */
+	let settledBelow = 0;
+	const hasPlayed = (entry) => entry.stopIndex < settledBelow || finished.has(entry.item);
+	/** Reads every element's standing from its effects, for a redraw or a seek. */
+	const recompute = () => {
+		for (const plan of plans.values()) {
+			plan.top = null;
+			for (const entry of plan.gates) if (hasPlayed(entry)) plan.top = entry;
+			const first = plan.gates[0];
+			plan.firstPlayed = first !== void 0 && hasPlayed(first);
+		}
+	};
+	const index = () => {
+		const current = root();
+		const sample = plans.keys().next();
+		if (current === indexedRoot && sample.done !== true && sample.value.isConnected && laidOut) return;
+		indexedRoot = current;
+		laidOut = true;
+		silence(current);
+		plans = /* @__PURE__ */ new Map();
+		placements = /* @__PURE__ */ new Map();
+		stops.forEach((stop, stopIndex) => {
+			for (const item of stop.items) {
+				const spots = [];
+				for (const el of targetsOf(current, item.step, blocked)) {
+					const plan = plans.get(el) ?? {
+						list: [],
+						gates: [],
+						top: null,
+						firstPlayed: false
+					};
+					plans.set(el, plan);
+					const entry = {
+						item,
+						stopIndex,
+						order: 0
+					};
+					plan.list.push(entry);
+					if (item.kind !== "emphasis") plan.gates.push(entry);
+					const movement = movementFor(item, el, current);
+					if (movement === null && needsGeometry(item)) laidOut = false;
+					spots.push({
+						el,
+						plan,
+						entry,
+						movement
+					});
+				}
+				placements.set(item, spots);
+			}
+		});
+		for (const plan of plans.values()) {
+			const byBegin = (a, b) => a.stopIndex - b.stopIndex || a.item.begin - b.item.begin;
+			plan.list.sort(byBegin);
+			plan.gates.sort(byBegin);
+			plan.list.forEach((entry, at) => {
+				entry.order = at;
+			});
+		}
+		recompute();
+	};
+	/** Where an element stands: the highest-priority effect that has run wins. */
+	const visibilityOf = (plan) => {
+		const first = plan.gates[0];
+		if (first === void 0) return true;
+		if (first.item.kind === "entrance" && !plan.firstPlayed) return false;
+		return plan.top === null || plan.top.item.kind !== "exit";
+	};
+	/** An element an effect is animating is left to that effect until it ends. */
+	const render = (el, plan) => {
+		if (inFlight.has(el)) return;
+		if (visibilityOf(plan)) show(el);
+		else hide(el);
+	};
+	/**
+	* Puts every animated element where it stands once `played` stops have run,
+	* with no motion. Idempotent, so back, jump and a cancelled advance all land
+	* on the same picture as playing forward to that point.
+	*/
+	const settle = (played) => {
+		finished.clear();
+		settledBelow = played;
+		index();
+		recompute();
+		for (const [el, plan] of plans) render(el, plan);
+	};
+	/**
+	* One effect has had its say on one element. Only that element can have
+	* changed, and only against the effect deciding it so far — so a stop of many
+	* effects costs one comparison each, not a re-reading of the slide each.
+	*/
+	const markPlayed = (spot) => {
+		const { plan, entry } = spot;
+		if (entry.item.kind !== "emphasis") {
+			if (entry === plan.gates[0]) plan.firstPlayed = true;
+			if (plan.top === null || entry.order > plan.top.order) plan.top = entry;
+		}
+		render(spot.el, plan);
+	};
+	/** One effect has had its say everywhere it reaches. */
+	const complete = (item) => {
+		finished.add(item);
+		index();
+		for (const spot of placements.get(item) ?? []) markPlayed(spot);
+	};
+	const play = (item, into) => {
+		index();
+		const spots = placements.get(item) ?? [];
+		if (spots.length === 0) {
+			complete(item);
+			return;
+		}
+		const moving = spots.filter((spot) => spot.movement !== null);
+		const duration = item.duration;
+		const from = Math.max(0, into);
+		const over = duration === null || duration === 0 || from >= duration;
+		const holds = item.step.valueAfterEnd !== "removed";
+		if (reduced() || moving.length === 0 || over && (!holds || !moving.some((spot) => inFlight.has(spot.el)))) {
+			complete(item);
+			return;
+		}
+		for (const spot of spots) if (spot.movement === null) markPlayed(spot);
+		const length = over ? 0 : duration;
+		outstanding.set(item, moving.length);
+		for (const spot of moving) {
+			const el = spot.el;
+			const movement = spot.movement;
+			touched.add(el);
+			if (item.kind !== "emphasis") el.style.visibility = "";
+			if (movement.aboutOwnCentre) centreOn(el);
+			inFlight.set(el, (inFlight.get(el) ?? 0) + 1);
+			const animation = el.animate(movement.frames, {
+				duration: length,
+				fill: "both"
+			});
+			animation.currentTime = over ? length : from;
+			animations.push(animation);
+			animation.finished.then(() => {
+				if (disposed) return;
+				drop(animations, animation);
+				const left = (inFlight.get(el) ?? 1) - 1;
+				if (left <= 0 || !holds) {
+					if (left <= 0) {
+						inFlight.delete(el);
+						for (const other of frozen.get(el) ?? []) other.cancel();
+						frozen.delete(el);
+					} else inFlight.set(el, left);
+					animation.cancel();
+				} else {
+					inFlight.set(el, left);
+					const held = frozen.get(el);
+					if (held === void 0) frozen.set(el, [animation]);
+					else held.push(animation);
+				}
+				markPlayed(spot);
+				const remaining = (outstanding.get(item) ?? 1) - 1;
+				outstanding.set(item, remaining);
+				if (remaining <= 0) complete(item);
+				notifyChanged();
+			}, () => {});
+		}
+	};
+	const runStop = (stopIndex, elapsed) => {
+		const stop = stops[stopIndex];
+		if (stop === void 0) return;
+		const since = Math.max(0, elapsed);
+		startedAt = nowMs() - since;
+		const ordered = [...stop.items].sort((a, b) => a.begin - b.begin);
+		for (const item of ordered) {
+			const wait = item.begin - since;
+			if (reduced() || wait <= 0) {
+				play(item, since - item.begin);
+				continue;
+			}
+			const timer = setTimeout(() => {
+				drop(timers, timer);
+				play(item, 0);
+				notifyChanged();
+			}, wait);
+			timers.push(timer);
+		}
+	};
+	const clamp = (next) => Math.max(0, Math.min(Number.isFinite(next) ? Math.round(next) : 0, stops.length));
+	const player = {
+		get cursor() {
+			return cursor;
+		},
+		get stopCount() {
+			return stops.length;
+		},
+		get pending() {
+			return cursor < stops.length;
+		},
+		get running() {
+			return timers.length > 0 || animations.length > 0;
+		},
+		get progress() {
+			return {
+				cursor,
+				stops: stops.length,
+				elapsed: startedAt === null ? null : Math.round(nowMs() - startedAt),
+				generation
+			};
+		},
+		get unsupported() {
+			return [...unsupported];
+		},
+		reset() {
+			generation += 1;
+			clearPending();
+			startedAt = null;
+			cursor = 0;
+			settle(0);
+			onChange(player);
+			if (stops[0]?.auto === true) player.advance();
+		},
+		advance() {
+			if (disposed || cursor >= stops.length) return false;
+			generation += 1;
+			clearPending();
+			settle(cursor);
+			const stopIndex = cursor;
+			cursor += 1;
+			runStop(stopIndex, 0);
+			onChange(player);
+			return true;
+		},
+		back() {
+			if (disposed || cursor <= 0) return false;
+			generation += 1;
+			clearPending();
+			startedAt = null;
+			cursor -= 1;
+			settle(cursor);
+			onChange(player);
+			return true;
+		},
+		jumpTo(next) {
+			if (disposed) return;
+			generation += 1;
+			clearPending();
+			startedAt = null;
+			cursor = clamp(next);
+			settle(cursor);
+			onChange(player);
+		},
+		resume(next, elapsed) {
+			if (disposed) return;
+			generation += 1;
+			clearPending();
+			startedAt = null;
+			cursor = clamp(next);
+			if (cursor > 0 && elapsed !== null && Number.isFinite(elapsed)) {
+				settle(cursor - 1);
+				runStop(cursor - 1, elapsed);
+			} else settle(cursor);
+			onChange(player);
+		},
+		finish() {
+			player.jumpTo(stops.length);
+		},
+		dispose() {
+			if (disposed) return;
+			disposed = true;
+			clearPending();
+			for (const el of touched) {
+				el.style.visibility = "";
+				el.style.opacity = "";
+				uncentre(el);
+			}
+			touched.clear();
+		}
+	};
+	index();
+	return player;
+};
+//#endregion
+export { createAnimationPlayer as n, buildAnimationStops as t };
+
+//# sourceMappingURL=animation-player-D2mt2MI8.js.map