react-useanimations 3.0.0-beta.2 → 3.1.0

package/index.mjs

@@ -1,475 +1,1396 @@
 'use client';
-
-// src/index.tsx
-import React, { useEffect, useRef, useState } from "react";
-
-// src/icons.ts
-var interactions = {
-  activity: "loop",
-  airplay: "loop",
-  alertCircle: "loop",
-  alertOctagon: "loop",
-  alertTriangle: "loop",
-  alignCenter: "click-replay",
-  alignJustify: "click-replay",
-  alignLeft: "click-replay",
-  alignRight: "click-replay",
-  anchor: "hover-replay",
-  aperture: "hover-replay",
-  archive: "hover",
-  arrowDown: "loop",
-  arrowDownCircle: "click-replay",
-  arrowDownLeft: "hover-replay",
-  arrowDownRight: "hover-replay",
-  arrowLeft: "hover-replay",
-  arrowLeftCircle: "click-replay",
-  arrowRight: "hover-replay",
-  arrowRightCircle: "click-replay",
-  arrowUp: "loop",
-  arrowUpCircle: "click-replay",
-  arrowUpLeft: "hover-replay",
-  arrowUpRight: "hover-replay",
-  atSign: "hover-replay",
-  award: "hover-replay",
-  barChart: "hover-replay",
-  barChart2: "hover-replay",
-  battery: "hover-replay",
-  batteryCharging: "hover-replay",
-  behance: "hover-loop",
-  bluetooth: "hover-replay",
-  bold: "click-replay",
-  book: "hover-replay",
-  bookmark: "click-toggle",
-  bookOpen: "hover-replay",
-  box: "hover-replay",
-  briefcase: "hover-replay",
-  calendar: "hover",
-  camera: "click-replay",
-  cameraOff: "click-toggle",
-  cast: "hover-replay",
-  check: "click-replay",
-  checkBox: "click-toggle",
-  checkCircle: "click-replay",
-  checkmark: "loop",
-  chevronDown: "hover-replay",
-  chevronLeft: "click-replay",
-  chevronRight: "click-replay",
-  chevronsDown: "hover-replay",
-  chevronsLeft: "hover-replay",
-  chevronsRight: "hover-replay",
-  chevronsUp: "hover-replay",
-  chevronUp: "hover-replay",
-  chrome: "hover-replay",
-  circle: "hover-replay",
-  clipboard: "hover-replay",
-  clock: "hover-replay",
-  cloud: "hover-loop",
-  cloudDrizzle: "hover-replay",
-  cloudLightning: "hover-replay",
-  cloudOff: "click-toggle",
-  cloudRain: "hover-replay",
-  cloudSnow: "hover-replay",
-  code: "hover-replay",
-  codepen: "hover-loop",
-  codesandbox: "hover-replay",
-  coffee: "hover-replay",
-  columns: "hover-replay",
-  command: "hover-replay",
-  copy: "hover",
-  cornerDownLeft: "hover-replay",
-  cornerDownRight: "hover-replay",
-  cornerLeftDown: "hover-replay",
-  cornerLeftUp: "hover-replay",
-  cornerRightDown: "hover-replay",
-  cornerRightUp: "hover-replay",
-  cornerUpLeft: "hover-replay",
-  cornerUpRight: "hover-replay",
-  cpu: "hover-replay",
-  creditCard: "hover-replay",
-  crop: "click-replay",
-  crosshair: "hover-replay",
-  database: "hover-replay",
-  delete: "click-replay",
-  disc: "hover-replay",
-  divide: "hover-replay",
-  divideCircle: "hover-replay",
-  divideSquare: "hover-replay",
-  dollarSign: "hover-replay",
-  download: "click-replay",
-  download2: "click-replay",
-  downloadCloud: "click-replay",
-  dribbble: "hover-loop",
-  droplet: "hover-replay",
-  edit: "hover",
-  edit2: "click-replay",
-  edit3: "click-replay",
-  error: "loop",
-  explore: "hover",
-  externalLink: "hover-replay",
-  facebook: "hover-loop",
-  fastForward: "hover-replay",
-  figma: "hover-replay",
-  file: "hover-replay",
-  fileMinus: "click-replay",
-  filePlus: "click-replay",
-  fileText: "hover-replay",
-  film: "hover-replay",
-  filter: "click-replay",
-  flag: "hover-loop",
-  folder: "hover",
-  folderMinus: "click-replay",
-  folderPlus: "click-replay",
-  framer: "hover-replay",
-  frown: "hover-replay",
-  gift: "hover-replay",
-  gitBranch: "hover-replay",
-  gitCommit: "hover-replay",
-  github: "hover-loop",
-  gitlab: "hover-replay",
-  gitMerge: "hover-replay",
-  gitPullRequest: "hover-replay",
-  globe: "hover-loop",
-  grid: "hover-replay",
-  hardDrive: "hover-replay",
-  hash: "hover-replay",
-  headphones: "hover-replay",
-  heart: "click-toggle",
-  heart2: "click-replay",
-  help: "loop",
-  hexagon: "hover-replay",
-  home: "hover",
-  image: "hover-replay",
-  inbox: "hover-replay",
-  infinity: "loop",
-  info: "hover",
-  instagram: "hover",
-  italic: "click-replay",
-  key: "hover-replay",
-  layers: "hover-replay",
-  layout: "hover-replay",
-  lifeBuoy: "hover-replay",
-  link: "click-replay",
-  link2: "click-replay",
-  linkedin: "hover-loop",
-  list: "hover-replay",
-  loading: "loop",
-  loading2: "loop",
-  loading3: "loop",
-  loading4: "loop",
-  lock: "click-toggle",
-  logIn: "click-replay",
-  logOut: "click-replay",
-  mail: "hover",
-  map: "hover-replay",
-  mapPin: "hover-replay",
-  maximize2: "hover-replay",
-  maximizeMinimize: "click-toggle",
-  maximizeMinimize2: "click-toggle",
-  meh: "hover-replay",
-  menu: "click-toggle",
-  menu2: "click-toggle",
-  menu3: "click-toggle",
-  menu4: "click-toggle",
-  messageCircle: "hover-replay",
-  messageSquare: "hover-replay",
-  micOff: "click-toggle",
-  microphone: "click-toggle",
-  microphone2: "click-toggle",
-  minimize2: "hover-replay",
-  minus: "click-replay",
-  minusCircle: "click-replay",
-  minusSquare: "click-replay",
-  monitor: "hover-replay",
-  moon: "hover-replay",
-  moreHorizontal: "loop",
-  moreVertical: "loop",
-  mousePointer: "click-replay",
-  move: "hover-replay",
-  music: "hover-replay",
-  navigation: "hover-replay",
-  navigation2: "hover-replay",
-  notification: "click-toggle",
-  notification2: "click-toggle",
-  notification3: "loop",
-  notification4: "loop",
-  octagon: "hover-replay",
-  package: "hover-replay",
-  paperclip: "hover-replay",
-  penTool: "hover-replay",
-  percent: "hover-replay",
-  phone: "click-replay",
-  phoneCall: "click-replay",
-  phoneForwarded: "hover-replay",
-  phoneIncoming: "hover-replay",
-  phoneMissed: "hover-replay",
-  phoneOff: "click-toggle",
-  phoneOutgoing: "hover-replay",
-  pieChart: "hover-replay",
-  playPause: "click-toggle",
-  playPauseCircle: "click-toggle",
-  plusCircle: "click-replay",
-  plusSquare: "click-replay",
-  plusToX: "click-toggle",
-  pocket: "hover-loop",
-  power: "click-replay",
-  printer: "click-replay",
-  radio: "hover-replay",
-  radioButton: "click-toggle",
-  refresh: "click-replay",
-  refresh2: "click-replay",
-  refreshCcw: "click-replay",
-  repeat: "click-replay",
-  rewind: "hover-replay",
-  rotateCcw: "click-replay",
-  rotateCw: "click-replay",
-  rss: "hover-replay",
-  save: "click-replay",
-  scissors: "click-replay",
-  scrollDown: "loop",
-  searchToX: "click-toggle",
-  send: "click-replay",
-  server: "hover-replay",
-  settings: "hover",
-  settings2: "click-toggle",
-  share: "hover",
-  shield: "hover-replay",
-  shieldOff: "click-toggle",
-  shoppingBag: "hover-replay",
-  shoppingCart: "click-replay",
-  shuffle: "click-replay",
-  sidebar: "hover-replay",
-  skipBack: "click-replay",
-  skipForward: "click-replay",
-  slack: "hover-replay",
-  slash: "hover-replay",
-  smartphone: "hover-replay",
-  smile: "hover-replay",
-  speaker: "hover-replay",
-  square: "hover-replay",
-  star: "click-toggle",
-  stopCircle: "click-replay",
-  sun: "hover-replay",
-  sunrise: "hover-replay",
-  sunset: "hover-replay",
-  table: "hover-replay",
-  tablet: "hover-replay",
-  tag: "hover-replay",
-  target: "hover-replay",
-  terminal: "loop",
-  thermometer: "hover-replay",
-  thumbsDown: "click-replay",
-  thumbUp: "click-toggle",
-  toggle: "click-toggle",
-  tool: "hover-replay",
-  trash: "hover",
-  trash2: "hover",
-  trello: "hover-replay",
-  trendingDown: "hover-replay",
-  trendingUp: "hover-replay",
-  triangle: "hover-replay",
-  truck: "hover-replay",
-  tv: "hover-replay",
-  twitch: "hover-replay",
-  twitter: "hover-loop",
-  twitterX: "hover-replay",
-  type: "click-replay",
-  umbrella: "hover-replay",
-  underline: "click-replay",
-  upload: "click-replay",
-  uploadCloud: "click-replay",
-  user: "hover-replay",
-  userCheck: "click-replay",
-  userMinus: "hover",
-  userPlus: "hover",
-  users: "hover-replay",
-  userX: "hover",
-  video: "click-toggle",
-  video2: "click-toggle",
-  videoOff: "click-toggle",
-  visibility: "click-toggle",
-  visibility2: "click-toggle",
-  visibility3: "click-toggle",
-  voicemail: "hover-replay",
-  volume: "click-toggle",
-  watch: "hover-replay",
-  wifi: "hover-replay",
-  wifiOff: "click-toggle",
-  wind: "hover-replay",
-  xOctagon: "click-replay",
-  xSquare: "click-replay",
-  youtube: "hover",
-  youtube2: "hover",
-  zap: "hover-replay",
-  zapOff: "click-toggle",
-  zoomIn: "hover",
-  zoomOut: "hover"
-};
-var fullPlayerIcons = /* @__PURE__ */ new Set(["error", "twitter"]);
-
-// src/interactions.ts
-var getInteraction = (key) => (
-  // Unknown keys (e.g. custom animations) fall back to replaying on click.
-  interactions[key] ?? "click-replay"
-);
-var playToggle = (animation, toEnd) => {
-  animation.setDirection(toEnd ? 1 : -1);
-  animation.play();
-};
-var replay = (animation) => {
-  animation.setDirection(1);
-  animation.playSegments([0, animation.totalFrames], true);
-};
-var isHover = (interaction) => interaction === "hover" || interaction === "hover-loop" || interaction === "hover-replay";
-var hoverStart = (animation, interaction) => {
-  if (interaction === "hover-replay") {
-    if (animation.isPaused) replay(animation);
-    return;
-  }
-  if (interaction === "hover") animation.setDirection(1);
-  animation.play();
-};
-var hoverEnd = (animation, interaction) => {
-  if (interaction === "hover-replay") return;
-  if (interaction === "hover") {
-    animation.setDirection(-1);
-    animation.play();
-  } else {
-    animation.stop();
-  }
-};
-
-// src/lottie.ts
-var light;
-var full;
-var unwrap = (mod) => mod.default ?? mod;
-var loadLottie = (needsFullPlayer) => {
-  if (needsFullPlayer) {
-    full ?? (full = import("lottie-web").then(unwrap));
-    return full;
-  }
-  light ?? (light = import("lottie-web/build/player/lottie_light").then(unwrap));
-  return light;
-};
-var lottie_default = loadLottie;
-
-// src/index.tsx
-var idCounter = 0;
-var UseAnimations = (props) => {
-  const {
-    animation: { animationData, animationKey },
-    interaction: interactionProp,
-    reverse = false,
-    size = 24,
-    speed = 1,
-    strokeColor,
-    fillColor,
-    pathCss,
-    loop,
-    autoplay,
-    wrapperStyle,
-    options,
-    render,
-    style,
-    onClick,
-    onMouseEnter,
-    onMouseLeave,
-    ...other
-  } = props;
-  const containerRef = useRef(null);
-  const [player, setPlayer] = useState(null);
-  const [id] = useState(() => `useanimations-${idCounter += 1}`);
-  const atEnd = useRef(false);
-  const latest = useRef({ options, speed });
-  const interaction = interactionProp ?? getInteraction(animationKey);
-  const shouldLoop = loop ?? (interaction === "loop" || interaction === "hover-loop");
-  const shouldAutoplay = autoplay ?? interaction === "loop";
-  useEffect(() => {
-    latest.current = { options, speed };
-  });
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return void 0;
-    let cancelled = false;
-    let instance;
-    lottie_default(fullPlayerIcons.has(animationKey)).then((lottie) => {
-      if (cancelled) return;
-      const { options: custom, speed: initialSpeed } = latest.current;
-      instance = lottie.loadAnimation({
-        container,
-        renderer: "svg",
-        animationData,
-        loop: shouldLoop,
-        autoplay: shouldAutoplay,
-        ...custom,
-        // lottie-web supports `id` (set on the <svg>) but its types don't declare it.
-        rendererSettings: {
-          progressiveLoad: true,
-          ...custom?.rendererSettings,
-          id
-        }
-      });
-      instance.setSpeed(initialSpeed);
-      atEnd.current = false;
-      setPlayer(instance);
-    });
-    return () => {
-      cancelled = true;
-      instance?.destroy();
-      setPlayer(null);
-    };
-  }, [animationData, animationKey, shouldLoop, shouldAutoplay, id]);
-  useEffect(() => {
-    player?.setSpeed(speed);
-  }, [player, speed]);
-  useEffect(() => {
-    if (!player || interaction !== "click-toggle" || reverse === atEnd.current) return;
-    atEnd.current = reverse;
-    playToggle(player, reverse);
-  }, [player, interaction, reverse]);
-  useEffect(() => {
-    if (!strokeColor && !fillColor && !pathCss) return void 0;
-    const sheet = document.createElement("style");
-    sheet.textContent = `#${id} path { ${strokeColor ? `stroke: ${strokeColor};` : ""} ${fillColor ? `fill: ${fillColor};` : ""} ${pathCss ?? ""} }`;
-    document.head.appendChild(sheet);
-    return () => sheet.remove();
-  }, [id, strokeColor, fillColor, pathCss]);
-  const eventProps = {
-    onClick: (event) => {
-      onClick?.(event);
-      if (!player || event.defaultPrevented) return;
-      if (interaction === "click-toggle") {
-        atEnd.current = !atEnd.current;
-        playToggle(player, atEnd.current);
-      } else if (interaction === "click-replay") {
-        replay(player);
-      }
-    },
-    onMouseEnter: (event) => {
-      onMouseEnter?.(event);
-      if (!player || event.defaultPrevented) return;
-      if (isHover(interaction)) hoverStart(player, interaction);
-    },
-    onMouseLeave: (event) => {
-      onMouseLeave?.(event);
-      if (!player || event.defaultPrevented) return;
-      if (isHover(interaction)) hoverEnd(player, interaction);
-    }
-  };
-  const animationProps = {
-    ...other,
-    ref: containerRef,
-    style: {
-      overflow: "hidden",
-      outline: "none",
-      width: `${size}px`,
-      height: `${size}px`,
-      ...wrapperStyle,
-      ...style
-    }
-  };
-  return render ? render(eventProps, animationProps) : /* @__PURE__ */ React.createElement("div", { ...eventProps, ...animationProps });
-};
-var src_default = UseAnimations;
-export {
-  src_default as default
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/interactions.ts
+const isHover = (interaction) => interaction === "hover" || interaction === "hover-loop" || interaction === "hover-replay";
+const toggle = (animation, toEnd, reducedMotion) => {
+	if (reducedMotion) {
+		animation.goToAndStop(toEnd ? animation.totalFrames - 1 : 0);
+		return;
+	}
+	animation.setDirection(toEnd ? 1 : -1);
+	animation.play();
 };
+const replay = (animation) => {
+	animation.setDirection(1);
+	animation.playSegments([0, animation.totalFrames]);
+};
+const hoverStart = (animation, interaction) => {
+	if (interaction === "hover-replay") {
+		if (animation.isPaused) replay(animation);
+		return;
+	}
+	animation.setDirection(1);
+	animation.play();
+};
+const hoverEnd = (animation, interaction) => {
+	if (interaction === "hover") {
+		animation.setDirection(-1);
+		animation.play();
+	} else if (interaction === "hover-loop") {
+		if (!animation.isPaused) return true;
+		animation.goToAndStop(0);
+	}
+	return false;
+};
+//#endregion
+//#region src/player/matrix.ts
+const identity = () => [
+	1,
+	0,
+	0,
+	1,
+	0,
+	0
+];
+const isIdentity = (m) => m[0] === 1 && m[1] === 0 && m[2] === 0 && m[3] === 1 && m[4] === 0 && m[5] === 0;
+const multiply = (m, n) => [
+	m[0] * n[0] + m[1] * n[2],
+	m[0] * n[1] + m[1] * n[3],
+	m[2] * n[0] + m[3] * n[2],
+	m[2] * n[1] + m[3] * n[3],
+	m[4] * n[0] + m[5] * n[2] + n[4],
+	m[4] * n[1] + m[5] * n[3] + n[5]
+];
+const translate = (m, x, y) => x === 0 && y === 0 ? m : [
+	m[0],
+	m[1],
+	m[2],
+	m[3],
+	m[4] + x,
+	m[5] + y
+];
+const scale = (m, x, y) => x === 1 && y === 1 ? m : multiply(m, [
+	x,
+	0,
+	0,
+	y,
+	0,
+	0
+]);
+const rotate = (m, angle) => {
+	if (angle === 0) return m;
+	const cos = Math.cos(angle);
+	const sin = Math.sin(angle);
+	return multiply(m, [
+		cos,
+		sin,
+		-sin,
+		cos,
+		0,
+		0
+	]);
+};
+const skewFromAxis = (m, skew, axis) => {
+	if (skew === 0) return m;
+	const cos = Math.cos(axis);
+	const sin = Math.sin(axis);
+	const rotated = multiply(m, [
+		cos,
+		sin,
+		-sin,
+		cos,
+		0,
+		0
+	]);
+	return multiply(multiply(rotated, [
+		1,
+		0,
+		Math.tan(skew),
+		1,
+		0,
+		0
+	]), [
+		cos,
+		-sin,
+		sin,
+		cos,
+		0,
+		0
+	]);
+};
+const invert = (m) => {
+	const det = m[0] * m[3] - m[1] * m[2];
+	return [
+		m[3] / det,
+		-m[1] / det,
+		-m[2] / det,
+		m[0] / det,
+		(m[2] * m[5] - m[3] * m[4]) / det,
+		-(m[0] * m[5] - m[1] * m[4]) / det
+	];
+};
+const round = (value) => Math.round(value * 100) / 100;
+const applyToPoint = (m, x, y) => isIdentity(m) ? `${x},${y}` : `${round(x * m[0] + y * m[2] + m[4])},${round(x * m[1] + y * m[3] + m[5])}`;
+const round4 = (value) => Math.round(value * 1e4) / 1e4;
+const toCss = (m) => `matrix(${m.map(round4).join(",")})`;
+//#endregion
+//#region src/player/bezier.ts
+const CURVE_SEGMENTS = 150;
+const NEWTON_ITERATIONS = 4;
+const SAMPLES = 11;
+const SAMPLE_STEP = 1 / 10;
+const coefficients = (p1, p2) => [
+	1 - 3 * p2 + 3 * p1,
+	3 * p2 - 6 * p1,
+	3 * p1
+];
+const calc = (t, [a, b, c]) => ((a * t + b) * t + c) * t;
+const slope = (t, [a, b, c]) => 3 * a * t * t + 2 * b * t + c;
+const easings = /* @__PURE__ */ new Map();
+const easing = (x1, y1, x2, y2) => {
+	const key = `${x1},${y1},${x2},${y2}`;
+	let fn = easings.get(key);
+	if (fn) return fn;
+	if (x1 === y1 && x2 === y2) fn = (x) => x;
+	else {
+		const cx = coefficients(x1, x2);
+		const cy = coefficients(y1, y2);
+		const samples = Array.from({ length: SAMPLES }, (_, i) => calc(i * SAMPLE_STEP, cx));
+		const tForX = (x) => {
+			let start = 0;
+			let i = 1;
+			for (; i !== 10 && samples[i] <= x; i += 1) start += SAMPLE_STEP;
+			i -= 1;
+			let t = start + (x - samples[i]) / (samples[i + 1] - samples[i]) * SAMPLE_STEP;
+			const initialSlope = slope(t, cx);
+			if (initialSlope >= .001) {
+				for (let n = 0; n < NEWTON_ITERATIONS; n += 1) {
+					const currentSlope = slope(t, cx);
+					if (currentSlope === 0) break;
+					t -= (calc(t, cx) - x) / currentSlope;
+				}
+				return t;
+			}
+			if (initialSlope === 0) return t;
+			let a = start;
+			let b = start + SAMPLE_STEP;
+			for (let n = 0; n < 10; n += 1) {
+				t = a + (b - a) / 2;
+				const value = calc(t, cx) - x;
+				if (Math.abs(value) <= 1e-7) break;
+				if (value > 0) b = t;
+				else a = t;
+			}
+			return t;
+		};
+		fn = (x) => x <= 0 ? 0 : x >= 1 ? 1 : calc(tForX(x), cy);
+	}
+	easings.set(key, fn);
+	return fn;
+};
+const segmentLength = (p1, p2, c1, c2) => {
+	const percents = [];
+	const lengths = [];
+	let total = 0;
+	let lastX = 0;
+	let lastY = 0;
+	for (let k = 0; k < CURVE_SEGMENTS; k += 1) {
+		const t = k / 149;
+		const u = 1 - t;
+		const x = u * u * u * p1[0] + 3 * u * u * t * c1[0] + 3 * u * t * t * c2[0] + t * t * t * p2[0];
+		const y = u * u * u * p1[1] + 3 * u * u * t * c1[1] + 3 * u * t * t * c2[1] + t * t * t * p2[1];
+		if (k > 0) total += Math.hypot(x - lastX, y - lastY);
+		lastX = x;
+		lastY = y;
+		percents[k] = t;
+		lengths[k] = total;
+	}
+	return {
+		percents,
+		lengths,
+		total
+	};
+};
+const distancePercent = (perc, { percents, lengths, total }) => {
+	const len = percents.length;
+	let pos = Math.floor((len - 1) * perc);
+	const target = perc * total;
+	if (pos === len - 1 || pos === 0 || target === lengths[pos]) return percents[pos];
+	const dir = lengths[pos] > target ? -1 : 1;
+	for (;;) {
+		if (lengths[pos] <= target && lengths[pos + 1] > target) {
+			const local = (target - lengths[pos]) / (lengths[pos + 1] - lengths[pos]);
+			return percents[pos] + (percents[pos + 1] - percents[pos]) * local;
+		}
+		pos += dir;
+		if (pos < 0 || pos >= len - 1) return percents[Math.max(0, Math.min(pos, len - 1))];
+	}
+};
+const round3 = (value) => Math.round(value * 1e3) / 1e3;
+const splitSegment = (p1, p2, c1, c2, startPerc, endPerc, data) => {
+	const t0 = distancePercent(Math.min(Math.max(startPerc, 0), 1), data);
+	const t1 = distancePercent(Math.min(endPerc, 1), data);
+	const u0 = 1 - t0;
+	const u1 = 1 - t1;
+	const point = (i) => [
+		round3(u0 * u0 * u0 * p1[i] + 3 * t0 * u0 * u0 * c1[i] + 3 * t0 * t0 * u0 * c2[i] + t0 * t0 * t0 * p2[i]),
+		round3(u0 * u0 * u1 * p1[i] + (t0 * u0 * u1 + u0 * t0 * u1 + u0 * u0 * t1) * c1[i] + (t0 * t0 * u1 + u0 * t0 * t1 + t0 * u0 * t1) * c2[i] + t0 * t0 * t1 * p2[i]),
+		round3(u0 * u1 * u1 * p1[i] + (t0 * u1 * u1 + u0 * t1 * u1 + u0 * u1 * t1) * c1[i] + (t0 * t1 * u1 + u0 * t1 * t1 + t0 * u1 * t1) * c2[i] + t0 * t1 * t1 * p2[i]),
+		round3(u1 * u1 * u1 * p1[i] + 3 * t1 * u1 * u1 * c1[i] + 3 * t1 * t1 * u1 * c2[i] + t1 * t1 * t1 * p2[i])
+	];
+	const x = point(0);
+	const y = point(1);
+	return x.map((value, i) => [value, y[i]]);
+};
+const onLine = (x1, y1, x2, y2, x3, y3) => {
+	const det = x1 * y2 + y1 * x3 + x2 * y3 - x3 * y2 - y3 * x1 - x2 * y1;
+	return det > -.001 && det < .001;
+};
+const spatialCache = /* @__PURE__ */ new Map();
+const spatialBezier = (start, end, to, ti) => {
+	const key = [
+		...start,
+		...end,
+		...to,
+		...ti
+	].join("_");
+	let data = spatialCache.get(key);
+	if (data) return data;
+	const segments = (start[0] !== end[0] || start[1] !== end[1]) && onLine(start[0], start[1], end[0], end[1], start[0] + to[0], start[1] + to[1]) && onLine(start[0], start[1], end[0], end[1], end[0] + ti[0], end[1] + ti[1]) ? 2 : CURVE_SEGMENTS;
+	const points = [];
+	let total = 0;
+	let last;
+	for (let k = 0; k < segments; k += 1) {
+		const t = k / (segments - 1);
+		const u = 1 - t;
+		const point = start.map((s, i) => u * u * u * s + 3 * u * u * t * (s + (to[i] ?? 0)) + 3 * u * t * t * (end[i] + (ti[i] ?? 0)) + t * t * t * end[i]);
+		const partial = last ? Math.hypot(...point.map((v, i) => v - last[i])) : 0;
+		total += partial;
+		points.push({
+			partial,
+			point
+		});
+		last = point;
+	}
+	data = {
+		total,
+		points
+	};
+	spatialCache.set(key, data);
+	return data;
+};
+const pointAlong = ({ total, points }, perc) => {
+	const distance = total * perc;
+	let added = 0;
+	for (let j = 0; j < points.length; j += 1) {
+		added += points[j].partial;
+		if (distance === 0 || perc === 0 || j === points.length - 1) return points[j].point;
+		const next = points[j + 1].partial;
+		if (distance >= added && distance < added + next) {
+			const local = (distance - added) / next;
+			return points[j].point.map((v, i) => v + (points[j + 1].point[i] - v) * local);
+		}
+	}
+	return points[points.length - 1].point;
+};
+//#endregion
+//#region src/player/properties.ts
+const constant = (value) => ({
+	animated: false,
+	at: () => value
+});
+const isKeyframed = (k) => Array.isArray(k) && typeof k[0] === "object" && k[0] !== null && "t" in k[0];
+const component = (value, i) => Array.isArray(value) ? value[i] ?? value[0] : value;
+const ease = (out, into, i = 0) => out && into ? easing(component(out.x, i), component(out.y, i), component(into.x, i), component(into.y, i)) : (x) => x;
+const segment = (keyframes, frame) => {
+	const last = keyframes.length - 1;
+	for (let i = 0; i < last; i += 1) {
+		const next = keyframes[i + 1];
+		if (i === last - 1 && frame >= next.t) return {
+			key: keyframes[i].h ? next : keyframes[i],
+			next
+		};
+		if (next.t > frame) return {
+			key: keyframes[i],
+			next
+		};
+	}
+	return {
+		key: keyframes[last - 1],
+		next: keyframes[last]
+	};
+};
+const vectorAt = (keyframes, frame) => {
+	const { key, next } = segment(keyframes, frame);
+	const start = key.s;
+	const end = next.s ?? key.e ?? start;
+	if (key.to) {
+		const data = spatialBezier(start, end, key.to, key.ti ?? []);
+		if (frame >= next.t || frame < key.t) return data.points[frame >= next.t ? data.points.length - 1 : 0].point;
+		return pointAlong(data, ease(key.o, key.i)((frame - key.t) / (next.t - key.t)));
+	}
+	return start.map((s, i) => {
+		if (key.h === 1) return s;
+		const perc = frame >= next.t ? 1 : frame < key.t ? 0 : ease(key.o, key.i, i)((frame - key.t) / (next.t - key.t));
+		return s + (end[i] - s) * perc;
+	});
+};
+const toVector = (value, fallback) => value === void 0 ? fallback : typeof value === "number" ? [value] : value;
+const random = (seed) => () => {
+	seed = seed + 1831565813 | 0;
+	let t = Math.imul(seed ^ seed >>> 15, 1 | seed);
+	t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+	return ((t ^ t >>> 14) >>> 0) / 4294967296;
+};
+const expression = (source, frameRate) => {
+	if (/loopOut\(\s*(['"]cycle['"])?\s*\)/.test(source)) return (at, keyframes) => ({
+		animated: true,
+		at: (frame) => {
+			if (!keyframes) return at(frame);
+			const first = keyframes[0].t;
+			const last = keyframes[keyframes.length - 1].t;
+			return frame <= last ? at(frame) : at((frame - first) % (last - first) + first);
+		}
+	});
+	const wiggle = /wiggle\(\s*([\d.]+)\s*,\s*([\d.]+)\s*\)/.exec(source);
+	if (wiggle) {
+		const amp = Number(wiggle[2]);
+		return (at) => ({
+			animated: true,
+			at: (frame) => {
+				const base = at(frame);
+				const periods = Math.max(frame / frameRate, 0) * 5;
+				return base.map((value, i) => {
+					const next = random(i + 1);
+					let offset = 0;
+					for (let n = 0; n < Math.floor(periods); n += 1) offset += -amp + amp * 2 * next();
+					return value + offset + (-amp + amp * 2 * next()) * (periods - Math.floor(periods));
+				});
+			}
+		});
+	}
+};
+const vector = (data, fallback, ctx) => {
+	if (!data) return constant(fallback);
+	const keyframes = isKeyframed(data.k) ? data.k.map((key) => ({
+		...key,
+		s: key.s === void 0 ? void 0 : toVector(key.s, fallback),
+		e: key.e === void 0 ? void 0 : toVector(key.e, fallback)
+	})) : void 0;
+	const at = keyframes && keyframes.length > 1 ? (frame) => vectorAt(keyframes, frame) : void 0;
+	const value = at ? void 0 : toVector(keyframes ? keyframes[0].s : data.k, fallback);
+	const base = at ? {
+		animated: true,
+		at
+	} : constant(value);
+	if (!data.x) return base;
+	const apply = expression(data.x, ctx.frameRate);
+	if (!apply) {
+		ctx.warn(`unsupported expression ignored: ${data.x}`);
+		return base;
+	}
+	return apply(base.at, keyframes);
+};
+const scalar = (data, fallback, ctx) => {
+	const v = vector(data, [fallback], ctx);
+	return v.animated ? {
+		animated: true,
+		at: (frame) => v.at(frame)[0]
+	} : constant(v.at(0)[0]);
+};
+const absolute = (path) => ({
+	c: path.c,
+	v: path.v,
+	i: path.i.map((p, j) => [p[0] + path.v[j][0], p[1] + path.v[j][1]]),
+	o: path.o.map((p, j) => [p[0] + path.v[j][0], p[1] + path.v[j][1]])
+});
+const firstPath = (value) => Array.isArray(value) ? value[0] : value;
+const path = (data) => {
+	if (!isKeyframed(data.k)) return constant(absolute(firstPath(data.k)));
+	const keyframes = data.k.map((key) => ({
+		...key,
+		s: key.s && absolute(firstPath(key.s)),
+		e: key.e && absolute(firstPath(key.e))
+	}));
+	const last = keyframes[keyframes.length - 1];
+	return {
+		animated: true,
+		at: (frame) => {
+			if (frame < keyframes[0].t) return keyframes[0].s;
+			if (frame >= last.t) return last.s ?? keyframes[keyframes.length - 2].e;
+			let i = 0;
+			while (i < keyframes.length - 2 && keyframes[i + 1].t <= frame) i += 1;
+			const key = keyframes[i];
+			const next = keyframes[i + 1];
+			const start = key.s;
+			if (key.h === 1) return start;
+			const end = next.s ?? key.e;
+			const perc = ease(key.o, key.i)((frame - key.t) / (next.t - key.t));
+			const lerp = (a, b) => a.map((p, j) => [p[0] + (b[j][0] - p[0]) * perc, p[1] + (b[j][1] - p[1]) * perc]);
+			return {
+				c: start.c,
+				v: lerp(start.v, end.v),
+				i: lerp(start.i, end.i),
+				o: lerp(start.o, end.o)
+			};
+		}
+	};
+};
+//#endregion
+//#region src/player/shapes.ts
+const pathString = (path, m) => {
+	const { v, i, o } = path;
+	if (!v.length) return "";
+	let d = ` M${applyToPoint(m, v[0][0], v[0][1])}`;
+	for (let j = 1; j < v.length; j += 1) d += ` C${applyToPoint(m, o[j - 1][0], o[j - 1][1])} ${applyToPoint(m, i[j][0], i[j][1])} ${applyToPoint(m, v[j][0], v[j][1])}`;
+	if (path.c) {
+		const last = v.length - 1;
+		d += ` C${applyToPoint(m, o[last][0], o[last][1])} ${applyToPoint(m, i[0][0], i[0][1])} ${applyToPoint(m, v[0][0], v[0][1])}z`;
+	}
+	return d;
+};
+const measured = /* @__PURE__ */ new WeakMap();
+const lengthsOf = (path) => {
+	const cached = measured.get(path);
+	if (cached) return cached;
+	const { v, i, o } = path;
+	const segments = [];
+	let total = 0;
+	for (let j = 0; j < v.length - 1; j += 1) {
+		segments.push(segmentLength(v[j], v[j + 1], o[j], i[j + 1]));
+		total += segments[j].total;
+	}
+	if (path.c && v.length) {
+		const last = v.length - 1;
+		segments.push(segmentLength(v[last], v[0], o[last], i[0]));
+		total += segments[last].total;
+	}
+	const lengths = {
+		segments,
+		total
+	};
+	measured.set(path, lengths);
+	return lengths;
+};
+const emptyPath = () => ({
+	c: false,
+	v: [],
+	i: [],
+	o: []
+});
+const addSegment = (target, pos, points, newShape) => {
+	target.o[pos] = points[1];
+	target.i[pos + 1] = points[2];
+	if (newShape) target.v[pos] = points[0];
+	target.v[pos + 1] = points[3];
+};
+const addShapes = (paths, lengths, range, continued) => {
+	let target = continued ?? emptyPath();
+	let count = target.v.length;
+	let initPos = count;
+	const shapes = [target];
+	let added = 0;
+	let newShape = true;
+	for (let p = 0; p < paths.length; p += 1) {
+		const { v, i, o, c } = paths[p];
+		const segments = lengths[p].segments;
+		target.c = c;
+		const end = c ? segments.length : segments.length + 1;
+		let j = 1;
+		for (; j < end; j += 1) {
+			const data = segments[j - 1];
+			if (added + data.total < range.s) {
+				added += data.total;
+				target.c = false;
+			} else if (added > range.e) {
+				target.c = false;
+				break;
+			} else {
+				if (range.s <= added && range.e >= added + data.total) addSegment(target, count, [
+					v[j - 1],
+					o[j - 1],
+					i[j],
+					v[j]
+				], newShape);
+				else {
+					const part = splitSegment(v[j - 1], v[j], o[j - 1], i[j], (range.s - added) / data.total, (range.e - added) / data.total, data);
+					addSegment(target, count, part, newShape);
+					target.c = false;
+				}
+				newShape = false;
+				added += data.total;
+				count += 1;
+			}
+		}
+		if (c && segments.length) {
+			const data = segments[j - 1];
+			if (added <= range.e) {
+				if (range.s <= added && range.e >= added + data.total) addSegment(target, count, [
+					v[j - 1],
+					o[j - 1],
+					i[0],
+					v[0]
+				], newShape);
+				else {
+					const part = splitSegment(v[j - 1], v[0], o[j - 1], i[0], (range.s - added) / data.total, (range.e - added) / data.total, data);
+					addSegment(target, count, part, newShape);
+					target.c = false;
+				}
+				newShape = false;
+			} else target.c = false;
+			added += data.total;
+			count += 1;
+		}
+		if (target.v.length > initPos) {
+			target.i[initPos] = [...target.v[initPos]];
+			target.o[target.v.length - 1] = [...target.v[target.v.length - 1]];
+		}
+		if (added > range.e) break;
+		if (p < paths.length - 1) {
+			target = emptyPath();
+			newShape = true;
+			shapes.push(target);
+			count = 0;
+			initPos = 0;
+		}
+	}
+	return shapes;
+};
+/** Trims paths to [start, end] (fractions of their length) shifted by `offset` degrees. */
+const trim = (paths, start, end, offset) => {
+	let o = offset % 360 / 360;
+	if (o < 0) o += 1;
+	let s = (start > 1 ? 1 : start < 0 ? 0 : start) + o;
+	let e = (end > 1 ? 1 : end < 0 ? 0 : end) + o;
+	if (s > e) [s, e] = [e, s];
+	s = Math.round(s * 1e4) * 1e-4;
+	e = Math.round(e * 1e4) * 1e-4;
+	if (s === e) return [];
+	if (e === 1 && s === 0 || e === 0 && s === 1) return paths;
+	const lengths = paths.map(lengthsOf);
+	const total = lengths.reduce((sum, l) => sum + l.total, 0);
+	const ranges = e <= 1 ? [{
+		s: total * s,
+		e: total * e
+	}] : s >= 1 ? [{
+		s: total * (s - 1),
+		e: total * (e - 1)
+	}] : [{
+		s: total * s,
+		e: total
+	}, {
+		s: 0,
+		e: total * (e - 1)
+	}];
+	if (ranges[0].s === ranges[0].e) return [];
+	const result = [];
+	let shapes = addShapes(paths, lengths, ranges[0]);
+	if (ranges.length > 1) {
+		const continued = paths[paths.length - 1].c ? shapes.pop() : void 0;
+		result.push(...shapes);
+		shapes = addShapes(paths, lengths, ranges[1], continued);
+	}
+	result.push(...shapes);
+	return result;
+};
+const ROUND = .5519;
+const ellipse = ([px, py], [sx, sy], reversed) => {
+	const w = sx / 2;
+	const h = sy / 2;
+	const cw = reversed ? -1 : 1;
+	return {
+		c: true,
+		v: [
+			[px, py - h],
+			[px + w * cw, py],
+			[px, py + h],
+			[px - w * cw, py]
+		],
+		i: [
+			[px - w * ROUND * cw, py - h],
+			[px + w * cw, py - h * ROUND],
+			[px + w * ROUND * cw, py + h],
+			[px - w * cw, py + h * ROUND]
+		],
+		o: [
+			[px + w * ROUND * cw, py - h],
+			[px + w * cw, py + h * ROUND],
+			[px - w * ROUND * cw, py + h],
+			[px - w * cw, py - h * ROUND]
+		]
+	};
+};
+const rectangle = ([px, py], [sx, sy], roundness, reversed) => {
+	const w = sx / 2;
+	const h = sy / 2;
+	const r = Math.min(w, h, roundness);
+	const k = r * .44810000000000005;
+	const points = r ? [
+		[
+			[px + w, py - h + r],
+			[px + w, py - h + r],
+			[px + w, py - h + k]
+		],
+		[
+			[px + w, py + h - r],
+			[px + w, py + h - k],
+			[px + w, py + h - r]
+		],
+		[
+			[px + w - r, py + h],
+			[px + w - r, py + h],
+			[px + w - k, py + h]
+		],
+		[
+			[px - w + r, py + h],
+			[px - w + k, py + h],
+			[px - w + r, py + h]
+		],
+		[
+			[px - w, py + h - r],
+			[px - w, py + h - r],
+			[px - w, py + h - k]
+		],
+		[
+			[px - w, py - h + r],
+			[px - w, py - h + k],
+			[px - w, py - h + r]
+		],
+		[
+			[px - w + r, py - h],
+			[px - w + r, py - h],
+			[px - w + k, py - h]
+		],
+		[
+			[px + w - r, py - h],
+			[px + w - k, py - h],
+			[px + w - r, py - h]
+		]
+	] : [
+		[
+			[px + w, py - h],
+			[px + w, py - h],
+			[px + w, py - h]
+		],
+		[
+			[px + w, py + h],
+			[px + w, py + h],
+			[px + w, py + h]
+		],
+		[
+			[px - w, py + h],
+			[px - w, py + h],
+			[px - w, py + h]
+		],
+		[
+			[px - w, py - h],
+			[px - w, py - h],
+			[px - w, py - h]
+		]
+	];
+	if (reversed) {
+		points.reverse();
+		for (const point of points) [point[1], point[2]] = [point[2], point[1]];
+	}
+	return {
+		c: true,
+		v: points.map((point) => point[0]),
+		o: points.map((point) => point[1]),
+		i: points.map((point) => point[2])
+	};
+};
+//#endregion
+//#region src/player/render.ts
+const SVG = "http://www.w3.org/2000/svg";
+let prefix;
+let uid = 0;
+const newId = () => {
+	prefix ?? (prefix = `__ua${Math.random().toString(36).slice(2, 8)}_`);
+	return `${prefix}${uid += 1}`;
+};
+const create = (name, attrs = {}) => {
+	const element = document.createElementNS(SVG, name);
+	for (const [key, value] of Object.entries(attrs)) element.setAttribute(key, value);
+	return element;
+};
+const written = /* @__PURE__ */ new WeakMap();
+const attr = (element, name, value) => {
+	let values = written.get(element);
+	if (!values) written.set(element, values = {});
+	if (values[name] === value) return;
+	values[name] = value;
+	element.setAttribute(name, value);
+};
+const DEG = Math.PI / 180;
+const transform = (data, ctx) => {
+	const anchor = vector(data.a, [
+		0,
+		0,
+		0
+	], ctx);
+	const separated = data.p?.s;
+	const position = separated ? void 0 : vector(data.p, [
+		0,
+		0,
+		0
+	], ctx);
+	const x = separated ? scalar(data.p?.x, 0, ctx) : void 0;
+	const y = separated ? scalar(data.p?.y, 0, ctx) : void 0;
+	const size = vector(data.s, [
+		100,
+		100,
+		100
+	], ctx);
+	const rotation = scalar(data.r, 0, ctx);
+	const skew = data.sk ? scalar(data.sk, 0, ctx) : void 0;
+	const skewAxis = scalar(data.sa, 0, ctx);
+	const opacity = scalar(data.o, 100, ctx);
+	return {
+		matrix: (frame) => {
+			const [ax, ay] = anchor.at(frame);
+			const [sx, sy] = size.at(frame);
+			let m = scale(translate(identity(), -ax, -ay), sx / 100, sy / 100);
+			if (skew) m = skewFromAxis(m, -skew.at(frame) * DEG, skewAxis.at(frame) * DEG);
+			m = rotate(m, rotation.at(frame) * DEG);
+			const [px, py] = position ? position.at(frame) : [x.at(frame), y.at(frame)];
+			return translate(m, px, py);
+		},
+		opacity: (frame) => opacity.at(frame) / 100
+	};
+};
+const LINE_CAPS = [
+	"",
+	"butt",
+	"round",
+	"square"
+];
+const LINE_JOINS = [
+	"",
+	"miter",
+	"round",
+	"bevel"
+];
+const rgb = ([r, g, b]) => `rgb(${Math.floor(r * 255)},${Math.floor(g * 255)},${Math.floor(b * 255)})`;
+const createStyle = (item, level, ctx) => {
+	const element = create("path");
+	const color = vector(item.c, [
+		0,
+		0,
+		0,
+		1
+	], ctx);
+	const opacity = scalar(item.o, 100, ctx);
+	const stroke = item.ty === "st";
+	const width = stroke ? scalar(item.w, 0, ctx) : void 0;
+	if (stroke) {
+		attr(element, "stroke-linecap", LINE_CAPS[item.lc ?? 2]);
+		attr(element, "stroke-linejoin", LINE_JOINS[item.lj ?? 2]);
+		attr(element, "fill-opacity", "0");
+		if (item.lj === 1) attr(element, "stroke-miterlimit", String(item.ml ?? 4));
+	} else if (item.r === 2) attr(element, "fill-rule", "evenodd");
+	const kind = stroke ? "stroke" : "fill";
+	return {
+		element,
+		level,
+		closed: false,
+		d: "",
+		render: (frame) => {
+			attr(element, kind, rgb(color.at(frame)));
+			attr(element, `${kind}-opacity`, String(opacity.at(frame) / 100));
+			if (width) attr(element, "stroke-width", String(width.at(frame)));
+		}
+	};
+};
+const geometry = (item, ctx) => {
+	if (item.ty === "sh" && item.ks) return path(item.ks);
+	const position = vector(item.p, [0, 0], ctx);
+	const size = vector(item.s, [0, 0], ctx);
+	const reversed = item.d === 3;
+	if (item.ty === "el") return {
+		animated: position.animated || size.animated,
+		at: (frame) => ellipse(position.at(frame), size.at(frame), reversed)
+	};
+	if (item.ty === "rc") {
+		const roundness = scalar(item.r, 0, ctx);
+		return {
+			animated: position.animated || size.animated || roundness.animated,
+			at: (frame) => rectangle(position.at(frame), size.at(frame), roundness.at(frame), reversed)
+		};
+	}
+};
+const buildShapes = (items, root, ctx) => {
+	const styles = [];
+	const groups = [];
+	const shapes = [];
+	const trims = [];
+	const search = (list, container, level, parents) => {
+		const own = [...parents];
+		const ownStyles = [];
+		const ownTrims = [];
+		for (let i = list.length - 1; i >= 0; i -= 1) {
+			const item = list[i];
+			if (item.hd) continue;
+			if (item.ty === "st" || item.ty === "fl") {
+				const style = createStyle(item, level, ctx);
+				container.appendChild(style.element);
+				styles.push(style);
+				ownStyles.push(style);
+			} else if (item.ty === "gr") {
+				const element = create("g");
+				search(item.it ?? [], element, level + 1, own);
+				container.appendChild(element);
+			} else if (item.ty === "tr") {
+				const group = {
+					element: container,
+					transform: transform(item, ctx),
+					matrix: identity()
+				};
+				groups.push(group);
+				own.push(group);
+			} else if (item.ty === "tm") {
+				if (item.m === 2) ctx.warn("trim paths \"individually\" is drawn as \"simultaneously\"");
+				const t = {
+					start: scalar(item.s, 0, ctx),
+					end: scalar(item.e, 100, ctx),
+					offset: scalar(item.o, 0, ctx),
+					closed: false
+				};
+				trims.push(t);
+				ownTrims.push(t);
+			} else if (item.ty === "mm") {} else {
+				const shape = geometry(item, ctx);
+				if (!shape) {
+					ctx.warn(`unsupported shape "${item.ty}" ignored`);
+					continue;
+				}
+				shapes.push({
+					geometry: shape,
+					level,
+					groups: [...own],
+					styles: styles.filter((style) => !style.closed),
+					trims: trims.filter((t) => !t.closed)
+				});
+			}
+		}
+		for (const style of ownStyles) style.closed = true;
+		for (const t of ownTrims) t.closed = true;
+	};
+	search(items, root, 0, []);
+	return (frame) => {
+		for (const group of groups) {
+			group.matrix = group.transform.matrix(frame);
+			attr(group.element, "transform", toCss(group.matrix));
+			attr(group.element, "opacity", String(group.transform.opacity(frame)));
+		}
+		for (const style of styles) style.d = "";
+		for (const shape of shapes) {
+			let paths = [shape.geometry.at(frame)];
+			for (let k = shape.trims.length - 1; k >= 0; k -= 1) {
+				const t = shape.trims[k];
+				paths = trim(paths, t.start.at(frame) / 100, t.end.at(frame) / 100, t.offset.at(frame));
+			}
+			for (const style of shape.styles) {
+				let m = identity();
+				for (let k = shape.groups.length - 1, n = shape.level - style.level; n > 0; k -= 1, n -= 1) m = multiply(m, shape.groups[k].matrix);
+				for (const p of paths) style.d += pathString(p, m);
+			}
+		}
+		for (const style of styles) {
+			attr(style.element, "d", style.d || "M0 0");
+			style.render(frame);
+		}
+	};
+};
+const buildMasks = (masks, target, ctx) => {
+	let type = "clipPath";
+	let current = [];
+	const views = [];
+	const solid = `M0,0 h${ctx.width} v${ctx.height} h-${ctx.width} v-${ctx.height} `;
+	for (const mask of masks) {
+		const opacity = scalar(mask.o, 100, ctx);
+		if (mask.mode !== "a" && mask.mode !== "n" || mask.inv || opacity.animated || opacity.at(0) !== 100) type = "mask";
+		if (mask.mode === "n") continue;
+		let rect;
+		if ((mask.mode === "s" || mask.mode === "i") && !views.length) {
+			rect = create("rect", {
+				fill: "#ffffff",
+				width: String(ctx.width),
+				height: String(ctx.height)
+			});
+			current.push(rect);
+		}
+		const element = create("path", {
+			fill: mask.mode === "s" ? "#000000" : "#ffffff",
+			"clip-rule": "nonzero"
+		});
+		if (mask.mode === "i") {
+			const group = create("g");
+			for (const child of current) group.appendChild(child);
+			const id = newId();
+			const intersect = create("mask", {
+				id,
+				"mask-type": "alpha"
+			});
+			intersect.appendChild(element);
+			ctx.defs.appendChild(intersect);
+			group.setAttribute("mask", `url(#${id})`);
+			current = [group];
+		} else current.push(element);
+		views.push({
+			element,
+			shape: path(mask.pt),
+			opacity,
+			inverted: Boolean(mask.inv),
+			rect
+		});
+	}
+	if (!views.length) return void 0;
+	const id = newId();
+	const container = create(type, { id });
+	for (const child of current) container.appendChild(child);
+	ctx.defs.appendChild(container);
+	target.setAttribute(type === "clipPath" ? "clip-path" : "mask", `url(#${id})`);
+	return (frame, layerMatrix) => {
+		for (const view of views) {
+			const shape = view.shape.at(frame);
+			const d = pathString(shape, identity()).replace(/z$/, "");
+			attr(view.element, "d", shape.c ? view.inverted ? solid + d : d : "");
+			attr(view.element, "fill-opacity", String(view.opacity.at(frame) / 100));
+			if (view.rect) attr(view.rect, "transform", toCss(invert(layerMatrix)));
+		}
+	};
+};
+const buildComposition = (layers, container, ctx) => {
+	const nodes = layers.map((data) => {
+		const node = {
+			data,
+			transform: transform(data.ks, ctx),
+			matrix: identity()
+		};
+		if (data.ty === 3) return node;
+		const element = create("g");
+		let inner = element;
+		if (data.ty === 0 && data.w && data.h) {
+			const id = newId();
+			const clip = create("clipPath", { id });
+			clip.appendChild(create("path", { d: `M0,0 L${data.w},0 L${data.w},${data.h} L0,${data.h}z` }));
+			ctx.defs.appendChild(clip);
+			element.setAttribute("clip-path", `url(#${id})`);
+			if (data.masksProperties?.length) {
+				inner = create("g");
+				element.appendChild(inner);
+			}
+		}
+		let content;
+		if (data.ty === 4) content = buildShapes(data.shapes ?? [], inner, ctx);
+		else if (data.ty === 0 && data.refId && ctx.assets.has(data.refId)) {
+			const render = buildComposition(ctx.assets.get(data.refId), inner, ctx);
+			const remap = data.tm ? scalar(data.tm, 0, ctx) : void 0;
+			content = (frame) => {
+				let local = remap ? remap.at(frame) * ctx.frameRate : (frame - (data.st ?? 0)) / (data.sr ?? 1);
+				if (remap && local === data.op) local = data.op - 1;
+				render(local);
+			};
+		} else ctx.warn(`unsupported layer type ${data.ty} ignored`);
+		const masks = data.masksProperties?.length ? buildMasks(data.masksProperties, inner, ctx) : void 0;
+		return {
+			...node,
+			element,
+			content,
+			masks
+		};
+	});
+	const byIndex = new Map(nodes.map((node) => [node.data.ind, node]));
+	for (let i = nodes.length - 1; i >= 0; i -= 1) {
+		const element = nodes[i].element;
+		if (element) container.appendChild(element);
+	}
+	return (frame) => {
+		for (const node of nodes) node.matrix = node.transform.matrix(frame);
+		for (const node of nodes) {
+			const { data, element } = node;
+			if (!element) continue;
+			const visible = !data.hd && data.ip <= frame && frame < data.op;
+			attr(element, "display", visible ? "inline" : "none");
+			if (!visible) continue;
+			let m = node.matrix;
+			for (let parent = byIndex.get(data.parent); parent; parent = byIndex.get(parent.data.parent)) m = multiply(m, parent.matrix);
+			attr(element, "transform", toCss(m));
+			attr(element, "opacity", String(node.transform.opacity(frame)));
+			node.masks?.(frame, m);
+			node.content?.(frame);
+		}
+	};
+};
+const createRenderer = (data, ctx) => {
+	const svg = create("svg", {
+		viewBox: `0 0 ${data.w} ${data.h}`,
+		width: "100%",
+		height: "100%",
+		preserveAspectRatio: "xMidYMid meet"
+	});
+	svg.style.display = "block";
+	const defs = create("defs");
+	const clipId = newId();
+	const clip = create("clipPath", { id: clipId });
+	clip.appendChild(create("rect", {
+		width: String(data.w),
+		height: String(data.h),
+		x: "0",
+		y: "0"
+	}));
+	defs.appendChild(clip);
+	const root = create("g", { "clip-path": `url(#${clipId})` });
+	svg.append(defs, root);
+	const assets = new Map((data.assets ?? []).filter((asset) => asset.layers).map((asset) => [asset.id, asset.layers]));
+	return {
+		svg,
+		render: buildComposition(data.layers, root, {
+			...ctx,
+			defs,
+			width: data.w,
+			height: data.h,
+			assets
+		})
+	};
+};
+//#endregion
+//#region src/player/index.ts
+const playing = /* @__PURE__ */ new Set();
+let frameRequest = 0;
+let lastTime;
+const schedule = () => {
+	if (frameRequest || !playing.size || typeof requestAnimationFrame !== "function") return;
+	frameRequest = requestAnimationFrame(tick);
+};
+const tick = (now) => {
+	frameRequest = 0;
+	const elapsed = lastTime === void 0 ? 0 : Math.max(0, now - lastTime);
+	lastTime = now;
+	for (const player of Array.from(playing)) try {
+		player.advance(elapsed);
+	} catch (error) {
+		player.fail(error);
+	}
+	if (playing.size) schedule();
+	else lastTime = void 0;
+};
+const warned = /* @__PURE__ */ new WeakMap();
+const warner = (data) => (message) => {
+	let messages = warned.get(data);
+	if (!messages) warned.set(data, messages = /* @__PURE__ */ new Set());
+	if (messages.has(message)) return;
+	messages.add(message);
+	console.warn(`react-useanimations: ${message}`);
+};
+var Player = class {
+	constructor({ container, animationData, loop = false, autoplay = false }) {
+		this.isPaused = true;
+		this.frame = 0;
+		this.direction = 1;
+		this.speed = 1;
+		this.playCount = 0;
+		this.completedLoop = false;
+		this.failed = false;
+		this.listeners = {};
+		const data = animationData;
+		if (!data || !Array.isArray(data.layers)) throw new Error("react-useanimations: `animationData` is not a Lottie animation.");
+		this.renderer = createRenderer(data, {
+			frameRate: data.fr,
+			warn: warner(data)
+		});
+		container.appendChild(this.renderer.svg);
+		this.frameRate = data.fr;
+		this.firstFrame = data.ip;
+		this.totalFrames = data.op - data.ip;
+		this.loop = loop;
+		this.setFrame(0);
+		if (autoplay) this.play();
+	}
+	play() {
+		if (!this.isPaused || this.failed) return;
+		this.isPaused = false;
+		playing.add(this);
+		schedule();
+	}
+	pause() {
+		this.isPaused = true;
+		playing.delete(this);
+	}
+	/** Shows a frame of the current segment and pauses. */
+	goToAndStop(frame) {
+		this.setFrame(frame);
+		this.pause();
+	}
+	setDirection(direction) {
+		this.direction = direction < 0 ? -1 : 1;
+	}
+	setSpeed(speed) {
+		this.speed = speed;
+	}
+	/** Plays absolute frames `from` to `to`, backwards when `to` is smaller. */
+	playSegments([from, to]) {
+		this.playCount = 0;
+		if (to < from) {
+			this.direction = -1;
+			this.firstFrame = to;
+			this.totalFrames = from - to;
+			this.setFrame(this.totalFrames - .001);
+		} else {
+			this.direction = 1;
+			this.firstFrame = from;
+			this.totalFrames = to - from;
+			this.setFrame(.001);
+		}
+		this.play();
+	}
+	addEventListener(name, callback) {
+		var _this$listeners;
+		((_this$listeners = this.listeners)[name] ?? (_this$listeners[name] = /* @__PURE__ */ new Set())).add(callback);
+		return () => {
+			this.listeners[name].delete(callback);
+		};
+	}
+	destroy() {
+		this.pause();
+		this.renderer.svg.remove();
+		for (const name of Object.keys(this.listeners)) this.listeners[name].clear();
+	}
+	/** Stops this animation for good after an error, and reports the error once. */
+	fail(error) {
+		this.pause();
+		if (this.failed) return;
+		this.failed = true;
+		console.error("react-useanimations: an animation stopped after an error.", error);
+	}
+	/** Moves the animation forward by `elapsed` milliseconds, like lottie-web's advanceTime. */
+	advance(elapsed) {
+		if (this.isPaused || elapsed <= 0) return;
+		const modifier = this.frameRate / 1e3 * this.speed * this.direction;
+		let next = this.frame + elapsed * modifier;
+		if (next >= this.totalFrames - 1 && modifier > 0) {
+			if (this.loop && this.playCount !== this.loop) {
+				if (next >= this.totalFrames) {
+					this.playCount += 1;
+					this.setFrame(next % this.totalFrames);
+					this.completedLoop = true;
+					this.trigger("loopComplete");
+				} else this.setFrame(next);
+				return;
+			}
+			next = this.totalFrames - 1;
+		} else if (next < 0) {
+			if (this.loop && !(this.playCount-- <= 0 && this.loop !== true)) {
+				this.setFrame(this.totalFrames + next % this.totalFrames);
+				if (this.completedLoop) this.trigger("loopComplete");
+				else this.completedLoop = true;
+				return;
+			}
+			next = 0;
+		} else {
+			this.setFrame(next);
+			return;
+		}
+		this.setFrame(next);
+		this.pause();
+		this.trigger("complete");
+	}
+	setFrame(frame) {
+		this.frame = frame;
+		if (this.failed) return;
+		try {
+			this.renderer.render(this.firstFrame + frame);
+		} catch (error) {
+			this.fail(error);
+		}
+	}
+	trigger(name) {
+		for (const callback of Array.from(this.listeners[name] ?? [])) callback();
+	}
+};
+const loadAnimation = (options) => new Player(options);
+//#endregion
+//#region src/styles.ts
+const STYLE_ID = "useanimations-styles";
+const css = ":where([data-useanimations] path[stroke^=\"rgb\"]:not([stroke=\"rgb(255,255,255)\"])){stroke:var(--ua-stroke,currentColor)}:where([data-useanimations] path[fill=\"rgb(0,0,0)\"]){fill:var(--ua-fill,var(--ua-stroke,currentColor))}:where([data-useanimations] path[stroke=\"rgb(255,255,255)\"]){stroke:var(--ua-knockout,Canvas)}:where([data-useanimations] path[fill=\"rgb(255,255,255)\"]){fill:var(--ua-knockout,Canvas)}";
+/** Adds the stylesheet once per document, or once per shadow root for icons inside one. */
+const injectStyles = (element) => {
+	const doc = element.ownerDocument;
+	const root = element.getRootNode();
+	const shadow = root.nodeType === 11 && "host" in root ? root : null;
+	if ((shadow ?? doc).getElementById(STYLE_ID)) return;
+	const style = doc.createElement("style");
+	style.id = STYLE_ID;
+	style.textContent = css;
+	(shadow ?? doc.head).appendChild(style);
+};
+const QUERY = "(prefers-reduced-motion: reduce)";
+const hasMatchMedia = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
+const subscribe = (onChange) => {
+	if (!hasMatchMedia()) return () => {};
+	const media = window.matchMedia(QUERY);
+	media.addEventListener("change", onChange);
+	return () => media.removeEventListener("change", onChange);
+};
+const usePrefersReducedMotion = () => useSyncExternalStore(subscribe, () => hasMatchMedia() && window.matchMedia(QUERY).matches, () => false);
+//#endregion
+//#region src/index.tsx
+const REMOVED = {
+	pathCss: "style the paths with CSS instead, e.g. `className=\"icon\"` and `.icon path { stroke-width: 3px }`",
+	options: "use the `loop`, `autoplay` and `speed` props instead"
+};
+const warnedRemoved = /* @__PURE__ */ new Set();
+const warnRemoved = (prop) => {
+	if (warnedRemoved.has(prop)) return;
+	warnedRemoved.add(prop);
+	console.warn(`react-useanimations: the \`${prop}\` prop was removed in v3 and is ignored; ${REMOVED[prop]}.`);
+};
+const missingAnimation = () => {
+	throw new Error("UseAnimations: the `animation` prop is missing. Import an icon and pass it, e.g. `import github from 'react-useanimations/lib/github'` and `<UseAnimations animation={github} />`.");
+};
+const focusVisible = (element) => {
+	try {
+		return element.matches(":focus-visible");
+	} catch {
+		return false;
+	}
+};
+const UseAnimations = (props) => {
+	const { animation, interaction: interactionProp, active: activeProp, reverse, size = 24, speed = 1, strokeColor, fillColor, loop, autoplay, wrapperStyle, render, style, onClick, onMouseEnter, onMouseLeave, onPointerEnter, onFocus, onBlur, pathCss, options, ...other } = props;
+	const { animationData, interaction: defaultInteraction } = animation?.animationData ? animation : missingAnimation();
+	const active = activeProp ?? reverse ?? false;
+	const [container, setContainer] = useState(null);
+	const player = useRef(null);
+	const reducedMotion = usePrefersReducedMotion();
+	const atEnd = useRef(false);
+	const stopAfterCycle = useRef(false);
+	const lastPointer = useRef("");
+	const latest = useRef({
+		speed,
+		active
+	});
+	const interaction = interactionProp ?? defaultInteraction ?? "click-replay";
+	const shouldLoop = loop ?? (interaction === "loop" || interaction === "hover-loop");
+	const shouldAutoplay = autoplay ?? (interaction === "loop" && !reducedMotion);
+	useEffect(() => {
+		latest.current = {
+			speed,
+			active
+		};
+	});
+	const hasPathCss = pathCss !== void 0;
+	const hasOptions = options !== void 0;
+	useEffect(() => {
+		if (hasPathCss) warnRemoved("pathCss");
+		if (hasOptions) warnRemoved("options");
+	}, [hasPathCss, hasOptions]);
+	useEffect(() => {
+		if (!container) return void 0;
+		injectStyles(container);
+		const created = loadAnimation({
+			container,
+			animationData,
+			loop: shouldLoop,
+			autoplay: shouldAutoplay
+		});
+		created.setSpeed(latest.current.speed);
+		const stopCycle = () => {
+			if (!stopAfterCycle.current) return;
+			stopAfterCycle.current = false;
+			created.goToAndStop(0);
+		};
+		created.addEventListener("loopComplete", stopCycle);
+		created.addEventListener("complete", stopCycle);
+		atEnd.current = interaction === "click-toggle" && latest.current.active;
+		if (atEnd.current) created.goToAndStop(created.totalFrames - 1);
+		player.current = created;
+		let observer;
+		if (shouldAutoplay && typeof IntersectionObserver !== "undefined") {
+			observer = new IntersectionObserver(([entry]) => {
+				if (entry.isIntersecting) created.play();
+				else created.pause();
+			});
+			observer.observe(container);
+		}
+		return () => {
+			observer?.disconnect();
+			created.destroy();
+			player.current = null;
+		};
+	}, [
+		container,
+		animationData,
+		interaction,
+		shouldLoop,
+		shouldAutoplay
+	]);
+	useEffect(() => {
+		player.current?.setSpeed(speed);
+	}, [speed]);
+	useEffect(() => {
+		const current = player.current;
+		if (!current || interaction !== "click-toggle" || active === atEnd.current) return;
+		atEnd.current = active;
+		toggle(current, active, reducedMotion);
+	}, [
+		interaction,
+		active,
+		reducedMotion
+	]);
+	const startHover = () => {
+		if (!player.current || !isHover(interaction) || reducedMotion) return;
+		stopAfterCycle.current = false;
+		hoverStart(player.current, interaction);
+	};
+	const endHover = () => {
+		if (!player.current || !isHover(interaction) || reducedMotion) return;
+		stopAfterCycle.current = hoverEnd(player.current, interaction);
+	};
+	const eventProps = {
+		onClick: (event) => {
+			onClick?.(event);
+			const current = player.current;
+			if (!current || event.defaultPrevented) return;
+			if (interaction === "click-toggle" && activeProp === void 0) {
+				atEnd.current = !atEnd.current;
+				toggle(current, atEnd.current, reducedMotion);
+			} else if (interaction === "click-replay" && !reducedMotion) replay(current);
+		},
+		onMouseEnter: (event) => {
+			onMouseEnter?.(event);
+			if (!event.defaultPrevented && lastPointer.current !== "touch") startHover();
+		},
+		onMouseLeave: (event) => {
+			onMouseLeave?.(event);
+			if (!event.defaultPrevented && lastPointer.current !== "touch") endHover();
+		},
+		onPointerEnter: (event) => {
+			onPointerEnter?.(event);
+			lastPointer.current = event.pointerType;
+		},
+		onFocus: (event) => {
+			onFocus?.(event);
+			if (!event.defaultPrevented && focusVisible(event.currentTarget)) startHover();
+		},
+		onBlur: (event) => {
+			onBlur?.(event);
+			if (!event.defaultPrevented) endHover();
+		}
+	};
+	const labelled = Boolean(other["aria-label"] || other["aria-labelledby"]);
+	const animationProps = {
+		"aria-hidden": labelled ? void 0 : true,
+		role: labelled ? "img" : void 0,
+		...other,
+		"data-useanimations": "",
+		ref: setContainer,
+		style: {
+			display: "inline-block",
+			flexShrink: 0,
+			overflow: "hidden",
+			width: size,
+			height: size,
+			"--ua-stroke": strokeColor,
+			"--ua-fill": fillColor,
+			...wrapperStyle,
+			...style
+		}
+	};
+	return render ? render(eventProps, animationProps) : /* @__PURE__ */ jsx("span", {
+		...animationProps,
+		...eventProps
+	});
+};
+//#endregion
+export { UseAnimations as UseAnimation, UseAnimations, UseAnimations as default };