@depup/lottie-react 2.4.1-depup.0 → 3.1.0-depup.0

package/build/animation/useLottieAnimation.js

@@ -0,0 +1,436 @@
+import { applyEngineSettings } from "./configureLottie.js";
+import { createLogger } from "../utils/createLogger.js";
+import { SubscriptionManager } from "../utils/SubscriptionManager.js";
+import { useStableValue } from "../utils/useStableValue.js";
+import { collectMarkerCrossings } from "./collectMarkerCrossings.js";
+import { hasExpressions } from "./hasExpressions.js";
+import { LottieRegistryContext } from "./LottieRegistryContext.js";
+import { normalizeAnimationSource } from "./normalizeAnimationSource.js";
+import { readMarkers, resolveSeekTarget, resolveSegments } from "./resolveSeekTarget.js";
+import { LottieDirection, LottieRenderer, LottieState, LottieSubscription } from "./types.js";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+//#region src/animation/useLottieAnimation.ts
+/** Nothing guarantees a thrown value is an `Error`, and a reason has to be one. */
+function toError(cause) {
+	return cause instanceof Error ? cause : new Error(String(cause));
+}
+/**
+* Everything the animation does, with no opinion about how it is rendered.
+*
+* It takes the engine as an argument so the same logic serves every build.
+* Reach it through `useLottie`, `useLottieSvg` or `useLottieLight` rather than
+* directly.
+*/
+function useLottieAnimation(engine, options) {
+	const { src, renderer, rendererSettings, loop, speed, direction, autoplay = false, segment, assetsPath, debug = false, subscriptions } = options;
+	const [manager] = useState(() => new SubscriptionManager());
+	const [display, setDisplay] = useState(null);
+	const setDisplayRef = useCallback((node) => {
+		setDisplay(node);
+	}, []);
+	const [root, setRoot] = useState(null);
+	const setRootRef = useCallback((node) => {
+		setRoot(node);
+	}, []);
+	const [animationItem, setAnimationItem] = useState(null);
+	const [state, setState] = useState(LottieState.loading);
+	const [error, setError] = useState(null);
+	const [loadAttempt, setLoadAttempt] = useState(1);
+	const reload = useCallback(() => {
+		setLoadAttempt((previous) => previous + 1);
+	}, []);
+	const [playableFrames, setPlayableFrames] = useState(0);
+	const [playableDuration, setPlayableDuration] = useState(0);
+	const [speedValue, setSpeedValue] = useState(speed ?? 1);
+	const [directionValue, setDirectionValue] = useState(direction ?? LottieDirection.forward);
+	const [loopValue, setLoopValue] = useState(loop ?? false);
+	const source = useStableValue(src);
+	const loadConfig = useStableValue({
+		renderer,
+		rendererSettings,
+		autoplay,
+		segment,
+		assetsPath
+	});
+	const itemRef = useRef(null);
+	const valuesRef = useRef({
+		speed: speedValue,
+		direction: directionValue,
+		loop: loopValue
+	});
+	valuesRef.current.speed = speedValue;
+	valuesRef.current.direction = directionValue;
+	valuesRef.current.loop = loopValue;
+	const stateRef = useRef(state);
+	stateRef.current = state;
+	const debugRef = useRef(debug);
+	debugRef.current = debug;
+	const subscriptionsRef = useRef(subscriptions);
+	subscriptionsRef.current = subscriptions;
+	const driversRef = useRef({});
+	const scrubbedFrom = useRef(null);
+	const markerMemory = useRef(null);
+	/**
+	* Warns once per field when a value is driven from a prop and from a setter.
+	*
+	* Both keep working, per field and last writer wins, but they will disagree
+	* the next time the prop changes, and that is worth saying out loud while
+	* someone is building rather than leaving them to find it.
+	*/
+	const noteDriver = useCallback((field, driver) => {
+		if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+			const previous = driversRef.current[field];
+			if (previous === void 0) driversRef.current[field] = driver;
+			else if (previous !== driver && previous !== "both") {
+				driversRef.current[field] = "both";
+				console.warn(`[lottie-react] "${field}" is driven from both the ${field} prop and a setter. Both keep working and the last one to write wins, but they will disagree the next time the prop changes. Drive it from one place.`);
+			}
+		}
+	}, []);
+	const applySpeed = useCallback((next, driver) => {
+		noteDriver("speed", driver);
+		setSpeedValue(next);
+		itemRef.current?.setSpeed(next);
+	}, [noteDriver]);
+	const applyDirection = useCallback((next, driver) => {
+		noteDriver("direction", driver);
+		setDirectionValue(next);
+		itemRef.current?.setDirection(next === LottieDirection.forward ? 1 : -1);
+	}, [noteDriver]);
+	const applyLoop = useCallback((next, driver) => {
+		noteDriver("loop", driver);
+		setLoopValue(next);
+		const item = itemRef.current;
+		if (item) {
+			item.playCount = item.playDirection < 0 && typeof next === "number" ? next : 0;
+			item.loop = next;
+		}
+	}, [noteDriver]);
+	const setSpeed = useCallback((next) => {
+		applySpeed(typeof next === "function" ? next(valuesRef.current.speed) : next, "setter");
+	}, [applySpeed]);
+	const setDirection = useCallback((next) => {
+		applyDirection(typeof next === "function" ? next(valuesRef.current.direction) : next, "setter");
+	}, [applyDirection]);
+	const setLoop = useCallback((next) => {
+		applyLoop(typeof next === "function" ? next(valuesRef.current.loop) : next, "setter");
+	}, [applyLoop]);
+	/**
+	* Plays from wherever the animation is, or from the beginning if it is
+	* sitting at the end it plays towards.
+	*
+	* The restart is not a convenience. Playing forwards from the final frame
+	* does nothing, and playing in reverse from frame 0 does nothing either: the
+	* engine decides it has already finished, pauses, and reports completion
+	* without advancing. Both are the same fault seen from either end.
+	*/
+	const play = useCallback(() => {
+		const item = itemRef.current;
+		if (item === null) return;
+		const reverse = item.playDirection < 0;
+		const finished = reverse ? item.currentFrame <= 0 : item.currentFrame >= item.totalFrames - 1;
+		const numericLoop = typeof item.loop === "number" ? item.loop : null;
+		const exhausted = numericLoop !== null && (reverse ? item.playCount < 0 : item.playCount >= numericLoop);
+		if (finished || exhausted) item.playCount = reverse && numericLoop !== null ? numericLoop : 0;
+		if (finished) {
+			markerMemory.current = null;
+			item.goToAndPlay(reverse ? item.totalFrames : 0, true);
+		} else item.play();
+		setState(LottieState.playing);
+	}, []);
+	const pause = useCallback(() => {
+		const item = itemRef.current;
+		if (item === null) return;
+		item.pause();
+		setState(LottieState.paused);
+	}, []);
+	const stop = useCallback(() => {
+		const item = itemRef.current;
+		if (item === null) return;
+		markerMemory.current = null;
+		item.playCount = 0;
+		item.goToAndStop(0, true);
+		setState(LottieState.stopped);
+	}, []);
+	/**
+	* Reads the playable range, and how it is being played, back off the engine.
+	*
+	* A segment rewrites `firstFrame` and `totalFrames`, so the two values we
+	* report about length have to follow it or a progress bar keeps measuring
+	* whatever was playable before. It settles direction and speed as well: a
+	* range whose end precedes its start plays backwards, a forward range played
+	* while reversed turns the animation around, and a forward range at a
+	* negative speed flips the speed instead. Reporting what was asked for rather
+	* than what happened would make each of those a quiet lie.
+	*/
+	const refreshRange = useCallback((item) => {
+		setPlayableFrames(item.totalFrames);
+		setPlayableDuration(item.getDuration(false));
+		setDirectionValue(item.playDirection < 0 ? LottieDirection.reverse : LottieDirection.forward);
+		setSpeedValue(item.playSpeed);
+	}, []);
+	/**
+	* Resolves a seek target, and says so in development when it cannot.
+	*
+	* Shared by `seek` and `scrubTo` so both report the same way. The message is
+	* built inside the guard rather than passed in, because an argument built at
+	* a call site survives as a discarded expression even once the branch that
+	* used it has gone.
+	*/
+	const resolveOrWarn = useCallback((item, target) => {
+		const resolved = resolveSeekTarget(item, target);
+		if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+			if (resolved === null) console.warn(`[lottie-react] the seek target ${JSON.stringify(target)} could not be resolved, so nothing moved. A marker name has to match one the animation carries, and every other unit has to be a finite number.`);
+			else if (resolved.frame !== resolved.requested && typeof target === "object" && target.marker !== void 0) console.warn(`[lottie-react] the marker "${target.marker}" lies outside the playable range, so the seek was held at frame ${resolved.frame}. Markers are placed against the whole animation, while seeking is relative to whatever a segment has left playable.`);
+		}
+		return resolved === null ? null : resolved.frame;
+	}, []);
+	const seek = useCallback((target) => {
+		const item = itemRef.current;
+		if (item === null) return;
+		const frame = resolveOrWarn(item, target);
+		if (frame === null) return;
+		markerMemory.current = null;
+		if (item.isPaused) item.goToAndStop(frame, true);
+		else item.goToAndPlay(frame, true);
+	}, [resolveOrWarn]);
+	const scrubStart = useCallback(() => {
+		const item = itemRef.current;
+		if (item === null) return;
+		scrubbedFrom.current = stateRef.current;
+		item.pause();
+		setState(LottieState.paused);
+	}, []);
+	const scrubTo = useCallback((frame) => {
+		const item = itemRef.current;
+		if (item === null) return;
+		const resolved = resolveOrWarn(item, frame);
+		if (resolved === null) return;
+		markerMemory.current = null;
+		item.goToAndStop(resolved, true);
+		setState(LottieState.paused);
+	}, [resolveOrWarn]);
+	const scrubEnd = useCallback(() => {
+		if (itemRef.current === null) return;
+		const before = scrubbedFrom.current;
+		scrubbedFrom.current = null;
+		if (before === LottieState.playing) play();
+	}, [play]);
+	const playSegments = useCallback((segments, options) => {
+		const item = itemRef.current;
+		if (item === null) return;
+		const ranges = resolveSegments(item, segments);
+		if (ranges === null) {
+			if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") console.warn(`[lottie-react] playSegments could not use ${JSON.stringify(segments)}, so nothing changed. A range is two different finite frame numbers, and a marker has to carry a duration. A marker without one labels a position rather than a span: seek to it and play instead.`);
+			return;
+		}
+		item.playSegments(ranges, options?.queue !== true || item.isPaused);
+		setState(LottieState.playing);
+	}, []);
+	const resetSegments = useCallback(() => {
+		const item = itemRef.current;
+		if (item === null) return;
+		const wasPlaying = !item.isPaused;
+		const { segment } = loadConfig;
+		if (segment === void 0) item.resetSegments(true);
+		else item.playSegments([[segment[0], segment[1]]], true);
+		if (!wasPlaying) item.pause();
+	}, [loadConfig]);
+	useEffect(() => {
+		const unsubscribers = [
+			manager.subscribe(LottieSubscription.ready, () => subscriptionsRef.current?.ready?.()),
+			manager.subscribe(LottieSubscription.play, () => subscriptionsRef.current?.play?.()),
+			manager.subscribe(LottieSubscription.pause, () => subscriptionsRef.current?.pause?.()),
+			manager.subscribe(LottieSubscription.stop, () => subscriptionsRef.current?.stop?.()),
+			manager.subscribe(LottieSubscription.complete, () => subscriptionsRef.current?.complete?.()),
+			manager.subscribe(LottieSubscription.loopCompleted, () => subscriptionsRef.current?.loopCompleted?.()),
+			manager.subscribe(LottieSubscription.frame, (event) => subscriptionsRef.current?.frame?.(event)),
+			manager.subscribe(LottieSubscription.marker, (event) => subscriptionsRef.current?.marker?.(event)),
+			manager.subscribe(LottieSubscription.newState, (event) => subscriptionsRef.current?.newState?.(event)),
+			manager.subscribe(LottieSubscription.error, (event) => subscriptionsRef.current?.error?.(event))
+		];
+		return () => {
+			for (const unsubscribe of unsubscribers) unsubscribe();
+		};
+	}, [manager]);
+	const notifiedState = useRef(state);
+	useEffect(() => {
+		const previous = notifiedState.current;
+		if (previous === state) return;
+		notifiedState.current = state;
+		manager.notify(LottieSubscription.newState, { state });
+		if (state === LottieState.playing) manager.notify(LottieSubscription.play);
+		else if (state === LottieState.paused) manager.notify(LottieSubscription.pause);
+		else if (state === LottieState.stopped && previous !== LottieState.loading) manager.notify(LottieSubscription.stop);
+	}, [state, manager]);
+	useEffect(() => {
+		if (display === null) return;
+		const logger = createLogger(debugRef.current);
+		setState(LottieState.loading);
+		setError(null);
+		markerMemory.current = null;
+		const fail = (cause) => {
+			manager.notify(LottieSubscription.error, { error: cause });
+			setError(cause);
+			setState(LottieState.error);
+		};
+		const normalized = normalizeAnimationSource(source);
+		if (normalized === null) {
+			fail(/* @__PURE__ */ new Error("lottie-react: `src` must be a non-empty path or a parsed animation object."));
+			return;
+		}
+		const chosenRenderer = loadConfig.renderer ?? LottieRenderer.svg;
+		const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		const autoplayed = loadConfig.autoplay && !reducedMotion;
+		if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+			if (loadConfig.autoplay && reducedMotion) console.warn("[lottie-react] autoplay was not started because this device asks for reduced motion. The animation is loaded and play() works; offer a control rather than starting it for them.");
+		}
+		logger.log("loading the animation", {
+			loadAttempt,
+			renderer: chosenRenderer,
+			autoplay: autoplayed,
+			loop: valuesRef.current.loop,
+			segment: loadConfig.segment
+		});
+		applyEngineSettings(engine);
+		let item;
+		try {
+			item = engine.player.loadAnimation({
+				...normalized,
+				container: display,
+				renderer: chosenRenderer,
+				rendererSettings: loadConfig.rendererSettings,
+				loop: valuesRef.current.loop,
+				autoplay: autoplayed,
+				initialSegment: loadConfig.segment === void 0 ? void 0 : [loadConfig.segment[0], loadConfig.segment[1]],
+				assetsPath: loadConfig.assetsPath
+			});
+		} catch (cause) {
+			fail(toError(cause));
+			return;
+		}
+		itemRef.current = item;
+		setAnimationItem(item);
+		item.setSpeed(valuesRef.current.speed);
+		item.setDirection(valuesRef.current.direction === LottieDirection.forward ? 1 : -1);
+		let sortedMarkers = [];
+		const onDomLoaded = () => {
+			sortedMarkers = readMarkers(item).sort((a, b) => a.time - b.time);
+			setPlayableFrames(item.totalFrames);
+			setPlayableDuration(item.getDuration(false));
+			if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+				if (autoplayed) {
+					const repeats = valuesRef.current.loop;
+					if ((repeats === true ? Number.POSITIVE_INFINITY : item.getDuration(false) * (typeof repeats === "number" ? repeats + 1 : 1)) > 5) console.warn("[lottie-react] this animation starts by itself and moves for more than five seconds, which needs a way to pause it whenever anything else shares the page (WCAG 2.2.2, level A). <LottieControls> is one; any pause affordance satisfies it.");
+				}
+				if ("expressionsPlugin" in item && item.expressionsPlugin === null && "animationData" in item && hasExpressions(item.animationData)) console.warn("[lottie-react] this animation uses expressions, which the light engine does not evaluate, so it renders without them. LottieSvg and useLottieSvg run them and still draw svg only; Lottie and useLottie run them with every renderer.");
+			}
+			setState(item.isPaused ? LottieState.stopped : LottieState.playing);
+			manager.notify(LottieSubscription.ready);
+		};
+		const onDataFailed = () => {
+			fail(/* @__PURE__ */ new Error("lottie-react: the animation could not be loaded. The engine reported no reason; check that the `src` path resolves and returns animation JSON."));
+		};
+		const onComplete = () => {
+			setState(LottieState.stopped);
+			manager.notify(LottieSubscription.complete);
+		};
+		const onLoopComplete = () => {
+			manager.notify(LottieSubscription.loopCompleted);
+		};
+		const onEnterFrame = () => {
+			const current = item.currentFrame;
+			manager.notify(LottieSubscription.frame, { currentFrame: current });
+			const previous = markerMemory.current;
+			markerMemory.current = current;
+			if (previous === null || sortedMarkers.length === 0) return;
+			const announce = (from, to) => {
+				const crossed = collectMarkerCrossings(sortedMarkers, item.firstFrame, from, to);
+				if (crossed !== null) for (const name of crossed) manager.notify(LottieSubscription.marker, { marker: name });
+			};
+			const forward = item.playDirection >= 0;
+			if (!(forward ? current < previous : current > previous)) announce(previous, current);
+			else if (forward) {
+				announce(previous, item.totalFrames);
+				announce(-1, current);
+			} else {
+				announce(previous, -1);
+				announce(item.totalFrames, current);
+			}
+		};
+		const onSegmentStart = () => {
+			markerMemory.current = null;
+			refreshRange(item);
+		};
+		const listeners = [
+			["DOMLoaded", onDomLoaded],
+			["data_failed", onDataFailed],
+			["complete", onComplete],
+			["loopComplete", onLoopComplete],
+			["enterFrame", onEnterFrame],
+			["segmentStart", onSegmentStart]
+		];
+		for (const [name, handler] of listeners) item.addEventListener(name, handler);
+		return () => {
+			for (const [name, handler] of listeners) item.removeEventListener(name, handler);
+			item.destroy();
+			itemRef.current = null;
+			setAnimationItem(null);
+			logger.log("the animation was destroyed");
+		};
+	}, [
+		display,
+		source,
+		loadConfig,
+		engine,
+		manager,
+		refreshRange,
+		loadAttempt
+	]);
+	useEffect(() => {
+		if (speed !== void 0) applySpeed(speed, "prop");
+	}, [speed, applySpeed]);
+	useEffect(() => {
+		if (direction !== void 0) applyDirection(direction, "prop");
+	}, [direction, applyDirection]);
+	useEffect(() => {
+		if (loop !== void 0) applyLoop(loop, "prop");
+	}, [loop, applyLoop]);
+	const instance = {
+		state,
+		error,
+		reload,
+		speed: speedValue,
+		direction: directionValue,
+		loop: loopValue,
+		playableFrames,
+		playableDuration,
+		play,
+		pause,
+		stop,
+		seek,
+		scrubStart,
+		scrubTo,
+		scrubEnd,
+		playSegments,
+		resetSegments,
+		setSpeed,
+		setDirection,
+		setLoop,
+		subscribe: manager.subscribe,
+		setDisplayRef,
+		setRootRef,
+		root,
+		animationItem
+	};
+	const registry = useContext(LottieRegistryContext);
+	const box = useRef({ current: instance }).current;
+	box.current = instance;
+	useEffect(() => registry?.register(box), [registry, box]);
+	useEffect(() => {
+		registry?.bump();
+	});
+	return instance;
+}
+//#endregion
+export { useLottieAnimation };

package/build/animation/useLottieInstance.cjs

@@ -0,0 +1,21 @@
+"use client";
+const require_LottieInstanceContext = require("./LottieInstanceContext.cjs");
+let react = require("react");
+//#region src/animation/useLottieInstance.ts
+/**
+* The animation a child component should drive: the one it was handed, else the
+* one its `<Lottie>` published.
+*
+* The prop wins, so a child given an animation explicitly is never quietly
+* driven by a surrounding one. Reaching neither is a thrown error rather than a
+* silent no-op, because a control bar that renders and does nothing is a worse
+* failure than one that never renders.
+*/
+function useLottieInstance(explicit) {
+	const provided = (0, react.useContext)(require_LottieInstanceContext.LottieInstanceContext);
+	const instance = explicit ?? provided;
+	if (instance === null) throw new Error("lottie-react: no animation to work with. Render this inside <Lottie>, or pass lottie={…} from useLottie().");
+	return instance;
+}
+//#endregion
+exports.useLottieInstance = useLottieInstance;

package/build/animation/useLottieInstance.d.cts

@@ -0,0 +1,14 @@
+import { LottieInstance } from "./types.cjs";
+//#region src/animation/useLottieInstance.d.ts
+/**
+ * The animation a child component should drive: the one it was handed, else the
+ * one its `<Lottie>` published.
+ *
+ * The prop wins, so a child given an animation explicitly is never quietly
+ * driven by a surrounding one. Reaching neither is a thrown error rather than a
+ * silent no-op, because a control bar that renders and does nothing is a worse
+ * failure than one that never renders.
+ */
+declare function useLottieInstance(explicit?: LottieInstance): LottieInstance;
+//#endregion
+export { useLottieInstance };

package/build/animation/useLottieInstance.d.ts

@@ -0,0 +1,14 @@
+import { LottieInstance } from "./types.js";
+//#region src/animation/useLottieInstance.d.ts
+/**
+ * The animation a child component should drive: the one it was handed, else the
+ * one its `<Lottie>` published.
+ *
+ * The prop wins, so a child given an animation explicitly is never quietly
+ * driven by a surrounding one. Reaching neither is a thrown error rather than a
+ * silent no-op, because a control bar that renders and does nothing is a worse
+ * failure than one that never renders.
+ */
+declare function useLottieInstance(explicit?: LottieInstance): LottieInstance;
+//#endregion
+export { useLottieInstance };

package/build/animation/useLottieInstance.js

@@ -0,0 +1,21 @@
+"use client";
+import { LottieInstanceContext } from "./LottieInstanceContext.js";
+import { useContext } from "react";
+//#region src/animation/useLottieInstance.ts
+/**
+* The animation a child component should drive: the one it was handed, else the
+* one its `<Lottie>` published.
+*
+* The prop wins, so a child given an animation explicitly is never quietly
+* driven by a surrounding one. Reaching neither is a thrown error rather than a
+* silent no-op, because a control bar that renders and does nothing is a worse
+* failure than one that never renders.
+*/
+function useLottieInstance(explicit) {
+	const provided = useContext(LottieInstanceContext);
+	const instance = explicit ?? provided;
+	if (instance === null) throw new Error("lottie-react: no animation to work with. Render this inside <Lottie>, or pass lottie={…} from useLottie().");
+	return instance;
+}
+//#endregion
+export { useLottieInstance };

package/build/animation/useLottieLight.cjs

@@ -0,0 +1,28 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_configureLottie = require("./configureLottie.cjs");
+const require_useLottieAnimation = require("./useLottieAnimation.cjs");
+let lottie_web_build_player_lottie_light_js = require("lottie-web/build/player/lottie_light.js");
+lottie_web_build_player_lottie_light_js = require_runtime.__toESM(lottie_web_build_player_lottie_light_js, 1);
+//#region src/animation/useLottieLight.ts
+/**
+* Loads and drives an animation using the light build of the engine.
+*
+* Identical to {@link useLottie} except that `svg` is the only renderer, which
+* the type enforces: the light build does not contain the other two, and asking
+* it for one throws at runtime while its own declarations claim otherwise.
+* It also carries no expression engine, so a property an expression drives is
+* drawn at its static value; {@link useLottieSvg} is the smaller build that
+* keeps expressions.
+*/
+/** The light engine: svg only, no expressions, no `eval`. */
+const lightEngine = {
+	player: lottie_web_build_player_lottie_light_js.default,
+	name: require_configureLottie.LottieEngineName.light
+};
+function useLottieLight(options) {
+	return require_useLottieAnimation.useLottieAnimation(lightEngine, options);
+}
+//#endregion
+exports.lightEngine = lightEngine;
+exports.useLottieLight = useLottieLight;

package/build/animation/useLottieLight.d.cts

@@ -0,0 +1,7 @@
+import "./configureLottie.cjs";
+import { LottieInstance, LottieRenderer } from "./types.cjs";
+import { UseLottieOptions } from "./useLottieAnimation.cjs";
+//#region src/animation/useLottieLight.d.ts
+declare function useLottieLight(options: UseLottieOptions<typeof LottieRenderer.svg>): LottieInstance;
+//#endregion
+export { useLottieLight };

package/build/animation/useLottieLight.d.ts

@@ -0,0 +1,7 @@
+import "./configureLottie.js";
+import { LottieInstance, LottieRenderer } from "./types.js";
+import { UseLottieOptions } from "./useLottieAnimation.js";
+//#region src/animation/useLottieLight.d.ts
+declare function useLottieLight(options: UseLottieOptions<typeof LottieRenderer.svg>): LottieInstance;
+//#endregion
+export { useLottieLight };

package/build/animation/useLottieLight.js

@@ -0,0 +1,25 @@
+"use client";
+import { LottieEngineName } from "./configureLottie.js";
+import { useLottieAnimation } from "./useLottieAnimation.js";
+import lottieLight from "lottie-web/build/player/lottie_light.js";
+//#region src/animation/useLottieLight.ts
+/**
+* Loads and drives an animation using the light build of the engine.
+*
+* Identical to {@link useLottie} except that `svg` is the only renderer, which
+* the type enforces: the light build does not contain the other two, and asking
+* it for one throws at runtime while its own declarations claim otherwise.
+* It also carries no expression engine, so a property an expression drives is
+* drawn at its static value; {@link useLottieSvg} is the smaller build that
+* keeps expressions.
+*/
+/** The light engine: svg only, no expressions, no `eval`. */
+const lightEngine = {
+	player: lottieLight,
+	name: LottieEngineName.light
+};
+function useLottieLight(options) {
+	return useLottieAnimation(lightEngine, options);
+}
+//#endregion
+export { lightEngine, useLottieLight };

package/build/animation/useLottieSvg.cjs

@@ -0,0 +1,26 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_configureLottie = require("./configureLottie.cjs");
+const require_useLottieAnimation = require("./useLottieAnimation.cjs");
+let lottie_web_build_player_lottie_svg_js = require("lottie-web/build/player/lottie_svg.js");
+lottie_web_build_player_lottie_svg_js = require_runtime.__toESM(lottie_web_build_player_lottie_svg_js, 1);
+//#region src/animation/useLottieSvg.ts
+/**
+* Loads and drives an animation using the svg build of the engine.
+*
+* Identical to {@link useLottie} except that `svg` is the only renderer, which
+* the type enforces: the svg build does not contain the other two, and asking
+* it for one throws at runtime while its own declarations claim otherwise.
+* Unlike {@link useLottieLight} it keeps the expression engine.
+*/
+/** The svg engine: svg only, expressions kept. */
+const svgEngine = {
+	player: lottie_web_build_player_lottie_svg_js.default,
+	name: require_configureLottie.LottieEngineName.svg
+};
+function useLottieSvg(options) {
+	return require_useLottieAnimation.useLottieAnimation(svgEngine, options);
+}
+//#endregion
+exports.svgEngine = svgEngine;
+exports.useLottieSvg = useLottieSvg;

package/build/animation/useLottieSvg.d.cts

@@ -0,0 +1,7 @@
+import "./configureLottie.cjs";
+import { LottieInstance, LottieRenderer } from "./types.cjs";
+import { UseLottieOptions } from "./useLottieAnimation.cjs";
+//#region src/animation/useLottieSvg.d.ts
+declare function useLottieSvg(options: UseLottieOptions<typeof LottieRenderer.svg>): LottieInstance;
+//#endregion
+export { useLottieSvg };

package/build/animation/useLottieSvg.d.ts

@@ -0,0 +1,7 @@
+import "./configureLottie.js";
+import { LottieInstance, LottieRenderer } from "./types.js";
+import { UseLottieOptions } from "./useLottieAnimation.js";
+//#region src/animation/useLottieSvg.d.ts
+declare function useLottieSvg(options: UseLottieOptions<typeof LottieRenderer.svg>): LottieInstance;
+//#endregion
+export { useLottieSvg };

package/build/animation/useLottieSvg.js

@@ -0,0 +1,23 @@
+"use client";
+import { LottieEngineName } from "./configureLottie.js";
+import { useLottieAnimation } from "./useLottieAnimation.js";
+import lottieSvg from "lottie-web/build/player/lottie_svg.js";
+//#region src/animation/useLottieSvg.ts
+/**
+* Loads and drives an animation using the svg build of the engine.
+*
+* Identical to {@link useLottie} except that `svg` is the only renderer, which
+* the type enforces: the svg build does not contain the other two, and asking
+* it for one throws at runtime while its own declarations claim otherwise.
+* Unlike {@link useLottieLight} it keeps the expression engine.
+*/
+/** The svg engine: svg only, expressions kept. */
+const svgEngine = {
+	player: lottieSvg,
+	name: LottieEngineName.svg
+};
+function useLottieSvg(options) {
+	return useLottieAnimation(svgEngine, options);
+}
+//#endregion
+export { svgEngine, useLottieSvg };