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

package/build/controls/LottieControls.cjs

@@ -0,0 +1,180 @@
+const require_renderStyledElement = require("../animation/renderStyledElement.cjs");
+const require_useLottieInstance = require("../animation/useLottieInstance.cjs");
+const require_types = require("../animation/types.cjs");
+const require_LottieDirectionButton = require("./LottieDirectionButton.cjs");
+const require_LottieFullscreenButton = require("./LottieFullscreenButton.cjs");
+const require_LottieLoopButton = require("./LottieLoopButton.cjs");
+const require_LottiePlayButton = require("./LottiePlayButton.cjs");
+const require_LottieReadout = require("./LottieReadout.cjs");
+const require_LottieSeekBar = require("./LottieSeekBar.cjs");
+const require_LottieSpeedSelect = require("./LottieSpeedSelect.cjs");
+const require_LottieStopButton = require("./LottieStopButton.cjs");
+const require_useFullscreen = require("./useFullscreen.cjs");
+const require_useShortcuts = require("./useShortcuts.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/controls/LottieControls.tsx
+/**
+* The class the bar carries, and the name React deduplicates its stylesheet by.
+* One string does both, so two components can only collide in the document if
+* they already collide in CSS.
+*/
+const lottieControlsClass = "lottie-controls";
+/**
+* Everything the bar and its controls look like, at zero specificity and inside
+* the library's cascade layer, so that any rule the consumer writes beats them
+* per property.
+*
+* The whole set lives here rather than one sheet per control, because the class
+* and the `href` are one string and eight stylesheets would mean eight names to
+* keep from colliding instead of one. Every rule below is scoped under the bar's
+* own class, so the controls' classes need no such guarantee.
+*
+* Every control carries a faint fill before it is touched, a stronger one under
+* the pointer and stronger again when it is a toggle that is on, so the three
+* states can never read as each other and the bar is legible at rest rather
+* than only under a cursor. The readout is the one thing with no fill, because
+* it is the one thing that is not a control.
+*
+* Five of these are load-bearing rather than taste.
+*
+* `container-type` is what lets the narrow-width rule measure the bar instead of
+* the window, so a small animation on a wide page counts as narrow. It has a
+* consequence worth knowing: the bar's own width can no longer be worked out
+* from its contents, so it has to be stretched by whatever holds it. Inside the
+* element `<Lottie>` renders that is automatic, and in a row that sizes to its
+* contents the bar would have no width at all.
+*
+* `accent-color` colours the seek bar's track and thumb with one property. The
+* player this replaces reached for `::-webkit-slider-thumb` and its Firefox
+* counterpart instead, unscoped, and so restyled every range input on the page.
+*
+* `field-sizing` on the rate picker makes it as wide as the value showing
+* rather than as wide as its widest option. Measured in Chromium against the
+* real component, that is 35.2px rather than 61.0px, so without it two fifths
+* of the control is space held for `0.25x` while `1x` is displayed, which reads
+* as a gap between the value and its chevron. It is newly enough available that
+* a browser without it simply keeps the wider box, which is a roomy control
+* rather than a broken one.
+*
+* The focus ring is written inside `:where()` along with everything else, so a
+* consumer can still replace it, and it is `:focus-visible` so it appears for
+* the keyboard rather than for every click.
+*
+* Sizes are in `em` and colours are `currentColor` throughout, so the bar takes
+* the surrounding text's size and colour rather than any this library picked.
+* `1.5em` is the smallest target WCAG accepts at a 16px root.
+*/
+const lottieControlsStyles = `:where(.${lottieControlsClass}){container-type:inline-size;display:flex;align-items:center;gap:0.3em;padding:0.35em;border-radius:0.6em;background:color-mix(in srgb,currentColor 7%,transparent);color:currentColor}:where(.${lottieControlsClass}) :where(button,select,input){min-width:1.5em;min-height:1.5em;padding:0;border:0;border-radius:0.25em;background:transparent;color:inherit;font:inherit}:where(.${lottieControlsClass}) :where(button,select){background:color-mix(in srgb,currentColor 10%,transparent)}:where(.${lottieControlsClass}) :where(button){display:inline-flex;align-items:center;justify-content:center;cursor:pointer}:where(.${lottieControlsClass}) :where(button)>:where(svg){width:1em;height:1em}:where(.${lottieControlsClass}) :where(button:hover,select:hover){background:color-mix(in srgb,currentColor 22%,transparent)}:where(.${lottieControlsClass}) :where(button[aria-pressed="true"]){background:color-mix(in srgb,currentColor 38%,transparent)}:where(.${lottieControlsClass}) :where(button:disabled,select:disabled,input:disabled){opacity:0.5;cursor:default}:where(.${lottieControlsClass}) :where(button:focus-visible,select:focus-visible,input:focus-visible){outline:2px solid currentColor;outline-offset:1px}:where(.${lottieControlsClass}) :where(.${require_LottieSeekBar.lottieSeekClass}){flex:1;min-width:6em;accent-color:currentColor;cursor:pointer}:where(.${lottieControlsClass}) :where(.${require_LottieSpeedSelect.lottieSpeedClass}){field-sizing:content;padding:0 0.35em}:where(.${lottieControlsClass}) :where(.${require_LottieReadout.lottieReadoutClass}){padding:0 0.4em;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0.8}:where(.${lottieControlsClass}) :where(.${require_LottieReadout.lottieReadoutClass})>:where(span){display:inline-block;text-align:right}@container (max-width:400px){:where(.${lottieControlsClass}) :where(.${require_LottieStopButton.lottieStopClass},.${require_LottieReadout.lottieReadoutClass},.${require_LottieDirectionButton.lottieDirectionClass},.${require_LottieSpeedSelect.lottieSpeedClass}){display:none}}`;
+/**
+* A bar of controls for driving an animation.
+*
+* Render it among the children of a component that publishes an animation, or
+* anywhere at all with the result of `useLottie`. It sits below the animation
+* rather than over it, because this control set is for inspecting a file and
+* covering the thing being inspected defeats it.
+*
+* ```jsx
+* <Lottie src="/hero.json">
+*   <LottieDisplay />
+*   <LottieControls />
+* </Lottie>
+* ```
+*
+* Left to right: play and stop, the seek bar, the position, looping and
+* direction, then the playback rate and fullscreen. That order follows what
+* every Lottie player that publishes one does, and it is why the rate sits away
+* from the transport controls rather than beside them.
+*
+* Three keys work while the animation holds focus, or while it is the thing
+* filling the screen: `k` plays and pauses, `l` loops, `f` fills the screen.
+* They belong to this bar, so a page that renders no controls has no key
+* listener either.
+*
+* Fullscreen takes this bar with the animation, since both sit inside the
+* element `<Lottie>` renders. On the hook path that element is yours, so the
+* button appears once something carries `setRootRef` and not before.
+*
+* While the animation is loading, and after a load has failed, every control is
+* disabled and so are the keys. Both are states in which an overlay covers this
+* bar, so leaving them usable would mean a keyboard could reach controls
+* nothing can see.
+*
+* It takes every attribute of the `div` it renders, and `ref` names that same
+* element. Its own rules are all zero-specificity, so any of them can be
+* replaced one property at a time from your own stylesheet, which is why there
+* is no theme prop. If your CSS lives in cascade layers, declare
+* `@layer lottie-react;` before your own styles so the library's layer ranks
+* below them.
+*/
+const LottieControls = (0, react.forwardRef)(function LottieControls({ lottie, unit, className, ...rest }, ref) {
+	const instance = require_useLottieInstance.useLottieInstance(lottie);
+	const { loop, setLoop } = instance;
+	const disabled = instance.state === require_types.LottieState.loading || instance.state === require_types.LottieState.error;
+	const remembered = (0, react.useRef)(true);
+	const toggleLoop = (0, react.useCallback)(() => {
+		if (loop === false) setLoop(remembered.current);
+		else {
+			remembered.current = loop;
+			setLoop(false);
+		}
+	}, [loop, setLoop]);
+	const { isFullscreen, toggle: toggleFullscreen } = require_useFullscreen.useFullscreen(instance.root);
+	require_useShortcuts.useShortcuts(instance, {
+		disabled,
+		toggleLoop,
+		toggleFullscreen
+	});
+	return require_renderStyledElement.renderStyledElement({
+		tag: "div",
+		styleClass: lottieControlsClass,
+		styles: lottieControlsStyles,
+		className,
+		attributes: {
+			role: "group",
+			"aria-label": "Animation controls",
+			...rest
+		},
+		ref,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LottiePlayButton.LottiePlayButton, {
+				lottie: instance,
+				disabled
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LottieStopButton.LottieStopButton, {
+				lottie: instance,
+				disabled
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LottieSeekBar.LottieSeekBar, {
+				lottie: instance,
+				disabled
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LottieReadout.LottieReadout, {
+				lottie: instance,
+				unit
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LottieLoopButton.LottieLoopButton, {
+				lottie: instance,
+				toggle: toggleLoop,
+				disabled
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LottieDirectionButton.LottieDirectionButton, {
+				lottie: instance,
+				disabled
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LottieSpeedSelect.LottieSpeedSelect, {
+				lottie: instance,
+				disabled
+			}),
+			toggleFullscreen !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LottieFullscreenButton.LottieFullscreenButton, {
+				isFullscreen,
+				toggle: toggleFullscreen,
+				disabled
+			})
+		] })
+	});
+});
+//#endregion
+exports.LottieControls = LottieControls;
+exports.lottieControlsClass = lottieControlsClass;
+exports.lottieControlsStyles = lottieControlsStyles;

package/build/controls/LottieControls.d.cts

@@ -0,0 +1,58 @@
+import { FixedElementProps, LottieInstance } from "../animation/types.cjs";
+import { LottieReadoutUnit } from "./LottieReadout.cjs";
+//#region src/controls/LottieControls.d.ts
+/** What this component owns. Every other prop belongs to the element. */
+interface LottieControlsOwnProps {
+  /** The animation to drive. Omit it inside a component that publishes one. */
+  lottie?: LottieInstance;
+  /** What the position is counted in. Frames unless you say otherwise. */
+  unit?: LottieReadoutUnit;
+  /** Added to the library's class rather than replacing it. */
+  className?: string;
+}
+/** What {@link LottieControls} accepts. */
+type LottieControlsProps = FixedElementProps<LottieControlsOwnProps, "div">;
+/**
+ * A bar of controls for driving an animation.
+ *
+ * Render it among the children of a component that publishes an animation, or
+ * anywhere at all with the result of `useLottie`. It sits below the animation
+ * rather than over it, because this control set is for inspecting a file and
+ * covering the thing being inspected defeats it.
+ *
+ * ```jsx
+ * <Lottie src="/hero.json">
+ *   <LottieDisplay />
+ *   <LottieControls />
+ * </Lottie>
+ * ```
+ *
+ * Left to right: play and stop, the seek bar, the position, looping and
+ * direction, then the playback rate and fullscreen. That order follows what
+ * every Lottie player that publishes one does, and it is why the rate sits away
+ * from the transport controls rather than beside them.
+ *
+ * Three keys work while the animation holds focus, or while it is the thing
+ * filling the screen: `k` plays and pauses, `l` loops, `f` fills the screen.
+ * They belong to this bar, so a page that renders no controls has no key
+ * listener either.
+ *
+ * Fullscreen takes this bar with the animation, since both sit inside the
+ * element `<Lottie>` renders. On the hook path that element is yours, so the
+ * button appears once something carries `setRootRef` and not before.
+ *
+ * While the animation is loading, and after a load has failed, every control is
+ * disabled and so are the keys. Both are states in which an overlay covers this
+ * bar, so leaving them usable would mean a keyboard could reach controls
+ * nothing can see.
+ *
+ * It takes every attribute of the `div` it renders, and `ref` names that same
+ * element. Its own rules are all zero-specificity, so any of them can be
+ * replaced one property at a time from your own stylesheet, which is why there
+ * is no theme prop. If your CSS lives in cascade layers, declare
+ * `@layer lottie-react;` before your own styles so the library's layer ranks
+ * below them.
+ */
+declare const LottieControls: import("react").ForwardRefExoticComponent<LottieControlsOwnProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof LottieControlsOwnProps> & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { LottieControls, LottieControlsProps };

package/build/controls/LottieControls.d.ts

@@ -0,0 +1,58 @@
+import { FixedElementProps, LottieInstance } from "../animation/types.js";
+import { LottieReadoutUnit } from "./LottieReadout.js";
+//#region src/controls/LottieControls.d.ts
+/** What this component owns. Every other prop belongs to the element. */
+interface LottieControlsOwnProps {
+  /** The animation to drive. Omit it inside a component that publishes one. */
+  lottie?: LottieInstance;
+  /** What the position is counted in. Frames unless you say otherwise. */
+  unit?: LottieReadoutUnit;
+  /** Added to the library's class rather than replacing it. */
+  className?: string;
+}
+/** What {@link LottieControls} accepts. */
+type LottieControlsProps = FixedElementProps<LottieControlsOwnProps, "div">;
+/**
+ * A bar of controls for driving an animation.
+ *
+ * Render it among the children of a component that publishes an animation, or
+ * anywhere at all with the result of `useLottie`. It sits below the animation
+ * rather than over it, because this control set is for inspecting a file and
+ * covering the thing being inspected defeats it.
+ *
+ * ```jsx
+ * <Lottie src="/hero.json">
+ *   <LottieDisplay />
+ *   <LottieControls />
+ * </Lottie>
+ * ```
+ *
+ * Left to right: play and stop, the seek bar, the position, looping and
+ * direction, then the playback rate and fullscreen. That order follows what
+ * every Lottie player that publishes one does, and it is why the rate sits away
+ * from the transport controls rather than beside them.
+ *
+ * Three keys work while the animation holds focus, or while it is the thing
+ * filling the screen: `k` plays and pauses, `l` loops, `f` fills the screen.
+ * They belong to this bar, so a page that renders no controls has no key
+ * listener either.
+ *
+ * Fullscreen takes this bar with the animation, since both sit inside the
+ * element `<Lottie>` renders. On the hook path that element is yours, so the
+ * button appears once something carries `setRootRef` and not before.
+ *
+ * While the animation is loading, and after a load has failed, every control is
+ * disabled and so are the keys. Both are states in which an overlay covers this
+ * bar, so leaving them usable would mean a keyboard could reach controls
+ * nothing can see.
+ *
+ * It takes every attribute of the `div` it renders, and `ref` names that same
+ * element. Its own rules are all zero-specificity, so any of them can be
+ * replaced one property at a time from your own stylesheet, which is why there
+ * is no theme prop. If your CSS lives in cascade layers, declare
+ * `@layer lottie-react;` before your own styles so the library's layer ranks
+ * below them.
+ */
+declare const LottieControls: import("react").ForwardRefExoticComponent<LottieControlsOwnProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof LottieControlsOwnProps> & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { LottieControls, LottieControlsProps };

package/build/controls/LottieControls.js

@@ -0,0 +1,178 @@
+import { renderStyledElement } from "../animation/renderStyledElement.js";
+import { useLottieInstance } from "../animation/useLottieInstance.js";
+import { LottieState } from "../animation/types.js";
+import { LottieDirectionButton, lottieDirectionClass } from "./LottieDirectionButton.js";
+import { LottieFullscreenButton } from "./LottieFullscreenButton.js";
+import { LottieLoopButton } from "./LottieLoopButton.js";
+import { LottiePlayButton } from "./LottiePlayButton.js";
+import { LottieReadout, lottieReadoutClass } from "./LottieReadout.js";
+import { LottieSeekBar, lottieSeekClass } from "./LottieSeekBar.js";
+import { LottieSpeedSelect, lottieSpeedClass } from "./LottieSpeedSelect.js";
+import { LottieStopButton, lottieStopClass } from "./LottieStopButton.js";
+import { useFullscreen } from "./useFullscreen.js";
+import { useShortcuts } from "./useShortcuts.js";
+import { forwardRef, useCallback, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/controls/LottieControls.tsx
+/**
+* The class the bar carries, and the name React deduplicates its stylesheet by.
+* One string does both, so two components can only collide in the document if
+* they already collide in CSS.
+*/
+const lottieControlsClass = "lottie-controls";
+/**
+* Everything the bar and its controls look like, at zero specificity and inside
+* the library's cascade layer, so that any rule the consumer writes beats them
+* per property.
+*
+* The whole set lives here rather than one sheet per control, because the class
+* and the `href` are one string and eight stylesheets would mean eight names to
+* keep from colliding instead of one. Every rule below is scoped under the bar's
+* own class, so the controls' classes need no such guarantee.
+*
+* Every control carries a faint fill before it is touched, a stronger one under
+* the pointer and stronger again when it is a toggle that is on, so the three
+* states can never read as each other and the bar is legible at rest rather
+* than only under a cursor. The readout is the one thing with no fill, because
+* it is the one thing that is not a control.
+*
+* Five of these are load-bearing rather than taste.
+*
+* `container-type` is what lets the narrow-width rule measure the bar instead of
+* the window, so a small animation on a wide page counts as narrow. It has a
+* consequence worth knowing: the bar's own width can no longer be worked out
+* from its contents, so it has to be stretched by whatever holds it. Inside the
+* element `<Lottie>` renders that is automatic, and in a row that sizes to its
+* contents the bar would have no width at all.
+*
+* `accent-color` colours the seek bar's track and thumb with one property. The
+* player this replaces reached for `::-webkit-slider-thumb` and its Firefox
+* counterpart instead, unscoped, and so restyled every range input on the page.
+*
+* `field-sizing` on the rate picker makes it as wide as the value showing
+* rather than as wide as its widest option. Measured in Chromium against the
+* real component, that is 35.2px rather than 61.0px, so without it two fifths
+* of the control is space held for `0.25x` while `1x` is displayed, which reads
+* as a gap between the value and its chevron. It is newly enough available that
+* a browser without it simply keeps the wider box, which is a roomy control
+* rather than a broken one.
+*
+* The focus ring is written inside `:where()` along with everything else, so a
+* consumer can still replace it, and it is `:focus-visible` so it appears for
+* the keyboard rather than for every click.
+*
+* Sizes are in `em` and colours are `currentColor` throughout, so the bar takes
+* the surrounding text's size and colour rather than any this library picked.
+* `1.5em` is the smallest target WCAG accepts at a 16px root.
+*/
+const lottieControlsStyles = `:where(.${lottieControlsClass}){container-type:inline-size;display:flex;align-items:center;gap:0.3em;padding:0.35em;border-radius:0.6em;background:color-mix(in srgb,currentColor 7%,transparent);color:currentColor}:where(.${lottieControlsClass}) :where(button,select,input){min-width:1.5em;min-height:1.5em;padding:0;border:0;border-radius:0.25em;background:transparent;color:inherit;font:inherit}:where(.${lottieControlsClass}) :where(button,select){background:color-mix(in srgb,currentColor 10%,transparent)}:where(.${lottieControlsClass}) :where(button){display:inline-flex;align-items:center;justify-content:center;cursor:pointer}:where(.${lottieControlsClass}) :where(button)>:where(svg){width:1em;height:1em}:where(.${lottieControlsClass}) :where(button:hover,select:hover){background:color-mix(in srgb,currentColor 22%,transparent)}:where(.${lottieControlsClass}) :where(button[aria-pressed="true"]){background:color-mix(in srgb,currentColor 38%,transparent)}:where(.${lottieControlsClass}) :where(button:disabled,select:disabled,input:disabled){opacity:0.5;cursor:default}:where(.${lottieControlsClass}) :where(button:focus-visible,select:focus-visible,input:focus-visible){outline:2px solid currentColor;outline-offset:1px}:where(.${lottieControlsClass}) :where(.${lottieSeekClass}){flex:1;min-width:6em;accent-color:currentColor;cursor:pointer}:where(.${lottieControlsClass}) :where(.${lottieSpeedClass}){field-sizing:content;padding:0 0.35em}:where(.${lottieControlsClass}) :where(.${lottieReadoutClass}){padding:0 0.4em;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0.8}:where(.${lottieControlsClass}) :where(.${lottieReadoutClass})>:where(span){display:inline-block;text-align:right}@container (max-width:400px){:where(.${lottieControlsClass}) :where(.${lottieStopClass},.${lottieReadoutClass},.${lottieDirectionClass},.${lottieSpeedClass}){display:none}}`;
+/**
+* A bar of controls for driving an animation.
+*
+* Render it among the children of a component that publishes an animation, or
+* anywhere at all with the result of `useLottie`. It sits below the animation
+* rather than over it, because this control set is for inspecting a file and
+* covering the thing being inspected defeats it.
+*
+* ```jsx
+* <Lottie src="/hero.json">
+*   <LottieDisplay />
+*   <LottieControls />
+* </Lottie>
+* ```
+*
+* Left to right: play and stop, the seek bar, the position, looping and
+* direction, then the playback rate and fullscreen. That order follows what
+* every Lottie player that publishes one does, and it is why the rate sits away
+* from the transport controls rather than beside them.
+*
+* Three keys work while the animation holds focus, or while it is the thing
+* filling the screen: `k` plays and pauses, `l` loops, `f` fills the screen.
+* They belong to this bar, so a page that renders no controls has no key
+* listener either.
+*
+* Fullscreen takes this bar with the animation, since both sit inside the
+* element `<Lottie>` renders. On the hook path that element is yours, so the
+* button appears once something carries `setRootRef` and not before.
+*
+* While the animation is loading, and after a load has failed, every control is
+* disabled and so are the keys. Both are states in which an overlay covers this
+* bar, so leaving them usable would mean a keyboard could reach controls
+* nothing can see.
+*
+* It takes every attribute of the `div` it renders, and `ref` names that same
+* element. Its own rules are all zero-specificity, so any of them can be
+* replaced one property at a time from your own stylesheet, which is why there
+* is no theme prop. If your CSS lives in cascade layers, declare
+* `@layer lottie-react;` before your own styles so the library's layer ranks
+* below them.
+*/
+const LottieControls = forwardRef(function LottieControls({ lottie, unit, className, ...rest }, ref) {
+	const instance = useLottieInstance(lottie);
+	const { loop, setLoop } = instance;
+	const disabled = instance.state === LottieState.loading || instance.state === LottieState.error;
+	const remembered = useRef(true);
+	const toggleLoop = useCallback(() => {
+		if (loop === false) setLoop(remembered.current);
+		else {
+			remembered.current = loop;
+			setLoop(false);
+		}
+	}, [loop, setLoop]);
+	const { isFullscreen, toggle: toggleFullscreen } = useFullscreen(instance.root);
+	useShortcuts(instance, {
+		disabled,
+		toggleLoop,
+		toggleFullscreen
+	});
+	return renderStyledElement({
+		tag: "div",
+		styleClass: lottieControlsClass,
+		styles: lottieControlsStyles,
+		className,
+		attributes: {
+			role: "group",
+			"aria-label": "Animation controls",
+			...rest
+		},
+		ref,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(LottiePlayButton, {
+				lottie: instance,
+				disabled
+			}),
+			/* @__PURE__ */ jsx(LottieStopButton, {
+				lottie: instance,
+				disabled
+			}),
+			/* @__PURE__ */ jsx(LottieSeekBar, {
+				lottie: instance,
+				disabled
+			}),
+			/* @__PURE__ */ jsx(LottieReadout, {
+				lottie: instance,
+				unit
+			}),
+			/* @__PURE__ */ jsx(LottieLoopButton, {
+				lottie: instance,
+				toggle: toggleLoop,
+				disabled
+			}),
+			/* @__PURE__ */ jsx(LottieDirectionButton, {
+				lottie: instance,
+				disabled
+			}),
+			/* @__PURE__ */ jsx(LottieSpeedSelect, {
+				lottie: instance,
+				disabled
+			}),
+			toggleFullscreen !== null && /* @__PURE__ */ jsx(LottieFullscreenButton, {
+				isFullscreen,
+				toggle: toggleFullscreen,
+				disabled
+			})
+		] })
+	});
+});
+//#endregion
+export { LottieControls, lottieControlsClass, lottieControlsStyles };

package/build/controls/LottieDirectionButton.cjs

@@ -0,0 +1,36 @@
+const require_useLottieInstance = require("../animation/useLottieInstance.cjs");
+const require_types = require("../animation/types.cjs");
+const require_controlIcon = require("./controlIcon.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/controls/LottieDirectionButton.tsx
+/** The class this control carries, which the bar's stylesheet targets. */
+const lottieDirectionClass = "lottie-direction";
+const forwardPath = "M4 18l8.5-6L4 6zm9 0l8.5-6L13 6z";
+const reversePath = "M20 18V6l-8.5 6zm-9 0V6l-8.5 6z";
+/**
+* Turns playing in reverse on and off.
+*
+* The label names the control rather than the next action, and `aria-pressed`
+* carries which way it is currently set. Naming the action instead is what left
+* the old player saying "Reverse direction" while showing a forward arrow, so a
+* reader had to guess whether either described the present.
+*/
+function LottieDirectionButton({ lottie, className, ...rest }) {
+	const instance = require_useLottieInstance.useLottieInstance(lottie);
+	const reversed = instance.direction === require_types.LottieDirection.reverse;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		"aria-label": "Play in reverse",
+		title: "Play in reverse",
+		...rest,
+		"aria-pressed": reversed,
+		className: className ? `${lottieDirectionClass} ${className}` : lottieDirectionClass,
+		onClick: () => {
+			instance.setDirection(reversed ? require_types.LottieDirection.forward : require_types.LottieDirection.reverse);
+		},
+		type: "button",
+		children: require_controlIcon.controlIcon(reversed ? reversePath : forwardPath)
+	});
+}
+//#endregion
+exports.LottieDirectionButton = LottieDirectionButton;
+exports.lottieDirectionClass = lottieDirectionClass;

package/build/controls/LottieDirectionButton.js

@@ -0,0 +1,35 @@
+import { useLottieInstance } from "../animation/useLottieInstance.js";
+import { LottieDirection } from "../animation/types.js";
+import { controlIcon } from "./controlIcon.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/controls/LottieDirectionButton.tsx
+/** The class this control carries, which the bar's stylesheet targets. */
+const lottieDirectionClass = "lottie-direction";
+const forwardPath = "M4 18l8.5-6L4 6zm9 0l8.5-6L13 6z";
+const reversePath = "M20 18V6l-8.5 6zm-9 0V6l-8.5 6z";
+/**
+* Turns playing in reverse on and off.
+*
+* The label names the control rather than the next action, and `aria-pressed`
+* carries which way it is currently set. Naming the action instead is what left
+* the old player saying "Reverse direction" while showing a forward arrow, so a
+* reader had to guess whether either described the present.
+*/
+function LottieDirectionButton({ lottie, className, ...rest }) {
+	const instance = useLottieInstance(lottie);
+	const reversed = instance.direction === LottieDirection.reverse;
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": "Play in reverse",
+		title: "Play in reverse",
+		...rest,
+		"aria-pressed": reversed,
+		className: className ? `${lottieDirectionClass} ${className}` : lottieDirectionClass,
+		onClick: () => {
+			instance.setDirection(reversed ? LottieDirection.forward : LottieDirection.reverse);
+		},
+		type: "button",
+		children: controlIcon(reversed ? reversePath : forwardPath)
+	});
+}
+//#endregion
+export { LottieDirectionButton, lottieDirectionClass };

package/build/controls/LottieFullscreenButton.cjs

@@ -0,0 +1,35 @@
+const require_controlIcon = require("./controlIcon.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/controls/LottieFullscreenButton.tsx
+/** The class this control carries, which the bar's stylesheet targets. */
+const lottieFullscreenClass = "lottie-fullscreen";
+const enterPath = "M7 14H5v5h5v-2H7zM5 10h2V7h3V5H5zm12 7h-3v2h5v-5h-2zM14 5v2h3v3h2V5z";
+const exitPath = "M5 16h3v3h2v-5H5zm3-8H5v2h5V5H8zm6 11h2v-3h3v-2h-5zm2-11V5h-2v5h5V8z";
+/**
+* Fills the screen with the animation and everything around it.
+*
+* The only control that is handed its state rather than reading the animation,
+* because what it needs is a property of an element and of the browser rather
+* than of the animation, and because the bar needs the same toggle for the `f`
+* key. Two copies of one piece of state derived from one event is how they
+* would drift.
+*
+* The label says what pressing it will do and changes with the icon, the way
+* play and pause do in this bar, rather than naming a control whose state is
+* carried separately. That is also what every video player does here.
+*/
+function LottieFullscreenButton({ isFullscreen, toggle, className, ...rest }) {
+	const label = isFullscreen ? "Exit full screen" : "Full screen";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		"aria-label": label,
+		title: label,
+		...rest,
+		className: className ? `${lottieFullscreenClass} ${className}` : lottieFullscreenClass,
+		onClick: toggle,
+		type: "button",
+		children: require_controlIcon.controlIcon(isFullscreen ? exitPath : enterPath)
+	});
+}
+//#endregion
+exports.LottieFullscreenButton = LottieFullscreenButton;
+exports.lottieFullscreenClass = lottieFullscreenClass;

package/build/controls/LottieFullscreenButton.js

@@ -0,0 +1,34 @@
+import { controlIcon } from "./controlIcon.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/controls/LottieFullscreenButton.tsx
+/** The class this control carries, which the bar's stylesheet targets. */
+const lottieFullscreenClass = "lottie-fullscreen";
+const enterPath = "M7 14H5v5h5v-2H7zM5 10h2V7h3V5H5zm12 7h-3v2h5v-5h-2zM14 5v2h3v3h2V5z";
+const exitPath = "M5 16h3v3h2v-5H5zm3-8H5v2h5V5H8zm6 11h2v-3h3v-2h-5zm2-11V5h-2v5h5V8z";
+/**
+* Fills the screen with the animation and everything around it.
+*
+* The only control that is handed its state rather than reading the animation,
+* because what it needs is a property of an element and of the browser rather
+* than of the animation, and because the bar needs the same toggle for the `f`
+* key. Two copies of one piece of state derived from one event is how they
+* would drift.
+*
+* The label says what pressing it will do and changes with the icon, the way
+* play and pause do in this bar, rather than naming a control whose state is
+* carried separately. That is also what every video player does here.
+*/
+function LottieFullscreenButton({ isFullscreen, toggle, className, ...rest }) {
+	const label = isFullscreen ? "Exit full screen" : "Full screen";
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": label,
+		title: label,
+		...rest,
+		className: className ? `${lottieFullscreenClass} ${className}` : lottieFullscreenClass,
+		onClick: toggle,
+		type: "button",
+		children: controlIcon(isFullscreen ? exitPath : enterPath)
+	});
+}
+//#endregion
+export { LottieFullscreenButton, lottieFullscreenClass };

package/build/controls/LottieLoopButton.cjs

@@ -0,0 +1,32 @@
+const require_useLottieInstance = require("../animation/useLottieInstance.cjs");
+const require_controlIcon = require("./controlIcon.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/controls/LottieLoopButton.tsx
+/** The class this control carries, which the bar's stylesheet targets. */
+const lottieLoopClass = "lottie-loop";
+const loopPath = "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z";
+/**
+* Turns looping on and off.
+*
+* The switching itself is handed in rather than done here, because the `l`
+* shortcut does the same thing and the count in force has to be remembered
+* across both. Two memories would mean pressing the key and then the button
+* loses a `loop={3}`, which is the exact fault that got the old surface's
+* `toggleLoop` dropped rather than rebuilt.
+*/
+function LottieLoopButton({ lottie, toggle, className, ...rest }) {
+	const looping = require_useLottieInstance.useLottieInstance(lottie).loop !== false;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		"aria-label": "Loop",
+		title: "Loop",
+		...rest,
+		"aria-pressed": looping,
+		className: className ? `${lottieLoopClass} ${className}` : lottieLoopClass,
+		onClick: toggle,
+		type: "button",
+		children: require_controlIcon.controlIcon(loopPath)
+	});
+}
+//#endregion
+exports.LottieLoopButton = LottieLoopButton;
+exports.lottieLoopClass = lottieLoopClass;